ccl_plm-vue/src/views/modules/common/column.vue

<template>
  <el-dialog :modal-append-to-body="false"
             :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" title="设置表格栏位"
             :visible.sync="visible"
             class="cl"
             width="958px" v-drag>
    <el-select @change="getTableUserList()" v-model="queryTable.tableId">
      <el-option  :value="item.tableId" :label="item.tableName" v-for="(item,index) in tableList" :key="index">

      </el-option>
    </el-select>
    <el-table
      :height="height"
      :data="userColumnList"
      border
      v-loading="dataListLoading"
      highlight-current-row
      :row-style="{height: '20px'}"
      style="width: 100%;">
      <el-table-column
        width="120"
        label="栏位名称">
        <template slot-scope="scope">
          <el-input readonly v-model="scope.row.columnLabel"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        width="80"
        label="显示顺序">
        <template slot-scope="scope">
          <el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="scope.row.sortLv" :min="0"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        width="140"
        label="显示状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-text="显示"
            inactive-text="隐藏">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        label="固定位置">
        <template slot-scope="scope">
          <el-select style="width: 100px" v-model="scope.row.fixed">
            <el-option label="不固定" value=""></el-option>
            <el-option label="左固定" value="left"></el-option>
            <el-option label="右固定" value="right"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        width="160"
        label="排序">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.columnSortable"
            active-text="排序"
            inactive-text="不排序">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        width="100"
        label="宽度">
        <template slot-scope="scope">
          <el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="scope.row.columnWidth" :min="0"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        width="100"
        label="类型">
        <template slot-scope="scope">
          <el-select v-model="scope.row.columnType">
            <el-option value="string" label="string"></el-option>
            <el-option value="number" label="number"></el-option>
            <el-option value="date" label="date"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        width="100"
        label="位置">
        <template slot-scope="scope">
          <el-select v-model="scope.row.align">
            <el-option value="left" label="居左"></el-option>
            <el-option value="center" label="居中"></el-option>
            <el-option value="right" label="居右"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>


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

</template>

<script>


import {
  saveTableUser,
  getTableDefaultListLanguage,
  getTableUserListLanguage,
  getMenuTableList
} from "@/api/table.js"

export default {
  data() {
    return {
      height: 400,
      // 展示列集
      columnList: [
        {
          columnLabel: "显示顺序",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
        {
          columnLabel: "显示状态",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
        {
          columnLabel: "排序",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
        {
          columnLabel: "固定状态",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
        {
          columnLabel: "宽度",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
        {
          columnLabel: "类型",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },
        {
          columnLabel: "位置",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: null,
          format: null,
          sortLv: 0,
          status: true,
          fixed: '',
          serialNumber: null,
          columnType: null,
          align: null
        },

      ],
      tableList: [],
      dataList: [],
      dataListLoading: false,
      // 用户table 配置集合
      userColumnList: [],
      queryTable: {
        userId: '',
        functionId: '',
        languageCode: '',
        tableId: '',
      },
      visible: false,
      fullscreenLoading: false
    }
  },
  methods: {

    // 获取 用户的配置
    async init(queryTable) {
      if (!queryTable.functionId) return;
      this.visible = true
      this.queryTable = queryTable

      // 先获取功能下的所有tableId 和tableName
      await getMenuTableList(queryTable).then(({data}) => {
        if (data && data.code == 0) {
          this.tableList = data.data
          this.queryTable.tableId = data.data.length>0?data.data[0].tableId:'-1'
        }
      })
      await this.getTableUserList()
    },
    async getTableUserList(){
      this.dataListLoading = true
      await getTableUserListLanguage(this.queryTable).then(({data}) => {
         if (data.code == 0) {
           this.dataListLoading = false
           this.userColumnList = data.rows
           if (data.rows.length <= 0) {
             getTableDefaultListLanguage(this.queryTable).then(({data}) => {
               this.userColumnList = data.rows
             })
           }
         }
       })
     },
    // 修改 table 列
    updateColumnList() {
      const loading = this.$loading({
        lock: true,
        text: '正在保存用户设置',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      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,
          columnType: column.columnType
        }
        userColumns.push(userColumn)
        this.$emit("refreshData");
      }
      saveTableUser(userColumns).then(({data}) => {
        if (data.code == 0) {
          this.$message.success(data.msg)
          loading.close();
          this.visible = false
          this.$emit("refreshData", this.queryTable.tableId);
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  }
}
</script>
<style>
.cl .el-table .cell {
  line-height: 20px;
  font-size: 12px;
  height: 20px;
}

.cl .el-switch__label * {
  line-height: 1;
  font-size: 12px;
  display: inline-block;
}

</style>