rongxing-vue/src/views/modules/knifemold/receive.vue

<template>
  <div class="mod-config">
    <el-form :inline="true" :model="querySysLanguagePack" @keyup.enter.native="getDataList()">

      <el-form-item>

        <el-select filterable v-model="querySysLanguagePack.objectType" clearable>
          <el-option label="列表" value="table"></el-option>
          <el-option label="按钮" value="button"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()" type="primary">{{buttons.search}}</el-button>
        <el-button @click="saveColumnList()" type="primary" v-show="showDefault">{{buttons.defaultTable}}
        </el-button>
        <el-button @click="userSetting" type="primary">{{ buttons.settingTable}}</el-button>
        <download-excel
          :fields="exportDataStandard"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :defaultValue="exportDefaultValue"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{buttons.download}}
        </download-excel>

        <el-button v-if="isAuth(':prd:delete')" type="danger" @click="deleteHandle()"
                   :disabled="dataListSelections.length <= 0">{{ buttons.deleteList}}
        </el-button>
      </el-form-item>

      <el-form-item>
        <el-select filterable v-model="querySysLanguagePack.languageCode" clearable>
          <el-option :label="item.languageName" :value="item.languageCode" v-for="(item,index) in languageList "
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addLanguageFun()">{{buttons.add}}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table

      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        width="40"
        align="center">
      </el-table-column>
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed"
        :width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>


      <!--      <el-table-column-->
      <!--        fixed="right"-->
      <!--        header-align="center"-->
      <!--        align="center"-->
      <!--        width="80"-->
      <!--        :label="buttons.cz">-->
      <!--        <template slot-scope="scope">-->
      <!--          <a @click="addOrUpdateHandle(scope.row.id)">{{buttons.edit}}|</a>-->
      <!--          <a @click="deleteHandle(scope.row.id)">{{buttons.delete}}</a>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 50, 200, 500]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <el-dialog title="设置table列" :visible.sync="visible" width="1000px">

      <!--      <el-table :data="userColumnList">-->
      <!--        <el-table-column-->
      <!--          v-for="(item,index) in columnList" :key="item.columnProp"-->
      <!--          :sortable="item.columnSortable"-->
      <!--          :prop="item.columnProp"-->
      <!--          :header-align="item.headerAlign"-->
      <!--          :show-overflow-tooltip="item.showOverflowTooltip"-->
      <!--          :align="item.align"-->
      <!--          :fixed="item.fixed"-->
      <!--          :width="item.columnWidth"-->
      <!--          :label="item.columnLabel">-->
      <!--          <template slot-scope="scope">-->
      <!--            <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span>-->
      <!--            <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"-->
      <!--                                               style="width: 100px; height: 80px"/></span>-->
      <!--          </template>-->
      <!--        </el-table-column>-->
      <!--      </el-table>-->


      <el-form @keyup.enter.native="updateColumnList()"
               v-model="userColumnList"
               inline="inline"
               size="mini"
               label-width="80px">
        <el-form-item v-for="(item,index) in userColumnList"
                      :key="item.columnProp"
                      :label="item.columnLabel"
                      :prop="item.columnProp">
          <el-form-item>
            排序
            <el-input-number v-model="item.sortLv" controls-position="right" size="mini" :min="0"
                             :max="10"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-switch
              v-model="item.status"
              active-text="显示"
              inactive-text="隐藏">
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-switch
              v-model="item.columnSortable"
              active-text="排序"
              inactive-text="不排序">
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-switch
              v-model="item.fixed"
              active-text="固定"
              inactive-text="不固定">
            </el-switch>
          </el-form-item>
          <el-form-item>
            宽度
            <el-input-number v-model="item.columnWidth" controls-position="right" size="mini" :min="0"
                             :max="1000"></el-input-number>
          </el-form-item>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="updateColumnList()">确定</el-button>
          </span>
    </el-dialog>

    <el-dialog :title="'设置语言一'+querySysLanguagePack.languageCode" :visible.sync="addLanguage" width="1000px">
      <el-table
        height="450"
        :data="languageDataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          type="selection"
          header-align="center"
          width="40"
          align="center">
        </el-table-column>
        <el-table-column
          v-for="(item,index) in languageColumnList" :key="index"
          :sortable="item.columnSortable"
          :prop="item.columnProp"
          :width="item.columnWidth"
          :label="item.columnLabel">
          <template slot-scope="scope">
            <span v-if="item.columnProp!='languageValue'"> {{scope.row[item.columnProp]}}</span>
            <span v-if="item.columnProp=='languageValue'"><input
              class="sl-input"
              v-model="scope.row[item.columnProp]" type="text"
              clearable></input></span>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          :label="buttons.cz">
          <template slot-scope="scope">
            <a type="text" size="small" @click="saveLanguageList(scope.row)">添加</a>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>
  </div>
</template>

<script>

import {
  searchSysLanguagePackList,
  searchSysLanguageParam,
  searchFunctionButtonList,
  saveButtonList,
  searchSysLanguage,
  searchLanguageListByLanguageCode,
  saveSysLanguageOne
} from "@/api/sysLanguage.js"
import {
  saveTableDefaultList,
  saveTableUser,
  getTableDefaultListLanguage,
  getTableUserListLanguage
} from "@/api/table.js"

export default {
  data() {
    return {
      addLanguage: false,
      functionId: 9001,
      tableId: "common1001",
      value1: true,
      visible: false,
      showDefault: false,
      // 默认table 查询参数
      queryTable: {
        functionId: 9001,
        tableId: "common1001",
        languageCode: this.$i18n.locale
      },
      // 用户table 查询参数
      queryTableUser: {
        userId: this.$store.state.user.name,
        functionId: 9001,
        tableId: "common1001",
        status: true,
        languageCode: this.$i18n.locale
      },
      // 语言词典查询参数
      querySysLanguageParam: {
        languageCode: this.$i18n.locale
      },
      // 语言词典集合
      sysLanguageParams: [],
      // 用户table 配置集合
      userColumnList: [],
      // 展示列集
      columnList: [
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9001,
        //   serialNumber: 'common1001functionId',
        //   tableId: "common1001",
        //   tableName: "common",
        //   columnProp: "functionId",
        //   headerAlign: "center",
        //   align: "center",
        //   columnLabel: "功能编码",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: true,
        //   sortLv: 0,
        //   status: true,
        //   fixed: false
        // },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9001,
        //   serialNumber: 'common1001serialNumber',
        //   tableId: "common1001",
        //   tableName: "common",
        //   columnProp: "objectId",
        //   headerAlign: "center",
        //   align: "center",
        //   columnLabel: "序列化编码",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: true,
        //   sortLv: 0,
        //   status: true,
        //   fixed: false,
        // },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9001,
        //   serialNumber: 'common1001type',
        //   tableId: "common1001",
        //   tableName: "common",
        //   columnProp: "objectType",
        //   headerAlign: "center",
        //   align: "center",
        //   columnLabel: "类型",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: true,
        //   sortLv: 0,
        //   status: true,
        //   fixed: false,
        // },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9001,
        //   serialNumber: 'common1001value',
        //   tableId: "common1001",
        //   tableName: "common",
        //   columnProp: "languageValue",
        //   headerAlign: "center",
        //   align: "center",
        //   columnLabel: "语言编码",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: true,
        //   sortLv: 0,
        //   status: true,
        //   fixed: false,
        // }
      ],
      // 展示列集
      columnList1: [
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9001,
        //   tableId: "common1002",
        //   tableName: "commonLanguage",
        //   columnProp: "functionId",
        //   headerAlign: "center",
        //   align: "center",
        //   columnLabel: "功能编码",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: true,
        //   sortLv: 0,
        //   status: true,
        //   fixed: false
        // },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9001,
        //   tableId: "common1002",
        //   tableName: "commonLanguage",
        //   columnProp: "objectId",
        //   headerAlign: "center",
        //   align: "center",
        //   columnLabel: "序列化编码",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: true,
        //   sortLv: 0,
        //   status: true,
        //   fixed: false,
        // },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9001,
        //   tableId: "common1002",
        //   tableName: "commonLanguage",
        //   columnProp: "objectType",
        //   headerAlign: "center",
        //   align: "center",
        //   columnLabel: "类型",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: true,
        //   sortLv: 0,
        //   status: true,
        //   fixed: false,
        // },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9001,
        //   tableId: "common1002",
        //   tableName: "commonLanguage",
        //   columnProp: "languageValue",
        //   headerAlign: "center",
        //   align: "center",
        //   columnLabel: "语言值",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: true,
        //   sortLv: 0,
        //   status: true,
        //   fixed: false,
        // },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 9001,
        //   tableId: "common1002",
        //   tableName: "commonLanguage",
        //   columnProp: "languageCode",
        //   headerAlign: "center",
        //   align: "center",
        //   columnLabel: "语言编码",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: true,
        //   sortLv: 0,
        //   status: true,
        //   fixed: false,
        // }
      ],
      // 数据集
      dataList: [],
      queryButton: {
        functionId: 9001,
        table_id: 'common1001',
        languageCode: this.$i18n.locale,
        objectType: 'button'
      },
      buttons: {
        add: '添加',
        edit: '编辑',
        delete: '删除',
        deleteList: '批量删除',
        cz: '操作',
        search: '查询',
        download: '导出',
        settingTable: '设置列表',
        defaultTable: '设置默认配置'
      },
      // 导出 start
      exportData: [],
      exportDataStandard: {
        "功能编码": "functionId",
        "序列化编码": "objectId",
        "类型": "objectType",
        "语言值": "languageValue"
      },
      exportName: "页面功能语言",
      exportHeader: ["页面功能语言"],
      exportFooter: [],
      exportDefaultValue: "这一行这一列没有数据",
      // 导出 end
      buttonList: [
        // {
        //   functionId: "9001",
        //   languageValue: '添加',
        //   objectId: 'add',
        //   objectType: "button",
        //   tableId: "common1001"
        // },
        // {
        //   functionId: "9001",
        //   languageValue: '编辑',
        //   objectId: 'edit',
        //   objectType: "button",
        //   tableId: "common1001"
        // },
        // {
        //   functionId: "9001",
        //   languageValue: '删除',
        //   objectId: 'delete',
        //   objectType: "button",
        //   tableId: "common1001"
        // },
        // {
        //   functionId: "9001",
        //   languageValue: '批量删除',
        //   objectId: 'deleteList',
        //   objectType: "button",
        //   tableId: "common1001"
        // },
        // {
        //   functionId: "9001",
        //   languageValue: '操作',
        //   objectId: 'cz',
        //   objectType: "button",
        //   tableId: "common1001"
        // },
        // {
        //   functionId: "9001",
        //   languageValue: '查询',
        //   objectId: 'search',
        //   objectType: "button",
        //   tableId: "common1001"
        // },
        // {
        //   functionId: "9001",
        //   languageValue: '导出',
        //   objectId: 'download',
        //   objectType: "button",
        //   tableId: "common1001"
        // },
        // {
        //   functionId: "9001",
        //   languageValue: '设置列表',
        //   objectId: 'settingTable',
        //   objectType: "button",
        //   tableId: "common1001"
        // },
        // {
        //   functionId: "9001",
        //   languageValue: '设置默认配置',
        //   objectId: 'defaultTable',
        //   objectType: "button",
        //   tableId: "common1001"
        // }
      ],
      languageList: [],
      languageColumnList: [],
      languageDataList: [],
      queryLanguage: {},
      // 数据集条件
      querySysLanguagePack: {
        page: 1,
        limit: 1,
        languageValue: '',
        objectType: '',
        objectId: ''
      },
      //
      // 分页
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  activated() {
    this.getDataList()
    this.getLanguageList()
  },
  methods: {
    // 保存语言编辑
    saveLanguageList(val) {
      saveSysLanguageOne(val).then(({data}) => {
        if (data.code == 0) {
          this.$message.success(data.msg)
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 编辑语言
    addLanguageFun() {
      if (this.querySysLanguagePack.languageCode) {
        this.addLanguage = true
        this.languageColumnList = []
        let query = {
          functionId: 9001,
          tableId: "common1002",
          languageCode: this.$i18n.locale
        }
        getTableDefaultListLanguage(query).then(({data}) => {
          if (data.rows.length > 0) {
            this.languageColumnList = data.rows
          }
        })
        this.languageColumnList = this.columnList
        searchLanguageListByLanguageCode(this.querySysLanguagePack).then(({data}) => {
          this.languageDataList = data.rows
        })
      } else {
        this.$message("请选中一种语言")
      }
    },
    // 获取多语言列表
    getLanguageList() {
      searchSysLanguage(this.queryLanguage).then(({data}) => {
        this.languageList = data.rows
      })
    },
    // 获取button的词典
    getFunctionButtonList() {
      searchFunctionButtonList(this.queryButton).then(({data}) => {
        console.log(data.data)
        if (data.data) {
          this.buttons = data.data
        } else {
          saveButtonList(this.buttonList).then(({data}) => {
          })
        }
      })
    },
    // 获取语言词典
    getSysLanguageParamList() {
      searchSysLanguageParam(this.querySysLanguageParam).then(({data}) => {
        this.sysLanguageParams = data.rows
      })
    },
    // 打开页面设置
    userSetting() {
      this.visible = true;
      this.getTableUserAll()
    },
    // 获取 用户的配置
    getTableUserAll() {
      let queryTable = {
        userId: this.$store.state.user.name,
        functionId: 9001,
        tableId: "common1001",
        languageCode: this.$i18n.locale
      }
      getTableUserListLanguage(queryTable).then(({data}) => {
        if (data.code == 0) {
          this.userColumnList = data.rows
          if (data.rows.length <= 0) {
            getTableDefaultListLanguage(this.queryTable).then(({data}) => {
              this.userColumnList = data.rows

            })
          }
        }

      })
    },
    // 修改 table 列
    updateColumnList() {
      let userColumns = []
      for (let column of this.userColumnList) {
        let userColumn = {
          userId: this.$store.state.user.name,
          functionId: column.functionId,
          tableId: column.tableId,
          tableName: column.tableName,
          columnProp: column.columnProp,
          headerAlign: column.headerAlign,
          align: column.align,
          columnWidth: column.columnWidth,
          columnLabel: column.columnLabel,
          columnHidden: column.columnHidden,
          columnImage: column.columnImage,
          columnSortable: column.columnSortable,
          format: column.format,
          sortLv: column.sortLv,
          status: column.status,
          fixed: column.fixed,
          serialNumber: column.serialNumber
        }
        userColumns.push(userColumn)
      }
      saveTableUser(userColumns).then(({data}) => {
        if (data.code == 0) {
          this.$message.success(data.msg)
          this.visible = false
          this.getTableUserColumn()
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 获取 用户保存的 格式列
    getTableUserColumn() {
      getTableUserListLanguage(this.queryTableUser).then(({data}) => {
        if (data.rows.length > 0) {
          //this.columnList = []
          this.columnList = data.rows
        } else {
          this.getColumnList()
        }

      })
    },
    // 保存 默认配置 列
    saveColumnList() {

      saveTableDefaultList(this.columnList).then(({data}) => {
        if (data.code == 0) {
          this.$message.success(data.msg)
          this.showDefault = false
        } else {
          this.$message.error(data.msg)
        }
      })
      saveTableDefaultList(this.columnList1).then(({data}) => {
        if (data.code == 0) {
          this.$message.success(data.msg)
          this.showDefault = false
        } else {
          this.$message.error(data.msg)
        }
      })
      this.getFunctionButtonList();
      this.getColumnList()
    },
    // 获取 tableDefault 列
    getColumnList() {
      getTableDefaultListLanguage(this.queryTable).then(({data}) => {
        if (!data.rows.length == 0) {
          this.showDefault = false
          this.columnList = data.rows
        } else {
          this.showDefault = true
        }
      })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.querySysLanguagePack.limit = this.pageSize
      this.querySysLanguagePack.page = this.pageIndex
      searchSysLanguagePackList(this.querySysLanguagePack).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('//prd/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    createExportData() {
      // 点击导出按钮之后,开始导出数据之前的执行函数,返回值为需要下载的数据
      // TODO:构造需要下载的数据返回
      if(this.dataListSelections.length>0){
        return this.dataListSelections;
      }
      return this.dataList;
    },
    startDownload() {
      //  this.exportData = this.dataList
      console.log("数据开始")
    },
    finishDownload() {
      console.log("数据下载完成")
    }
  },
  created() {
    this.getTableUserColumn()
    this.getSysLanguageParamList()
    this.getFunctionButtonList()
  }
}
</script>
<style>
.sl-input {
  background-color: transparent;
  border: 0 !important;
  font-size: 12px !important;
  height: 12px !important;
  line-height: 14px !important;
  background-color: transparent !important;
  width: 140px;
}

.sl-input:focus, textarea:focus {

  outline: none;

}

</style>