feat: 表格组件新增表头配置组件, 各列表页适配此组件

songshankun

2023-09-23 7f0ec738a0af4d9d334ce85012f864f2519ebb3f

 src/views/purchaseManage/quality/index.vue

@@ -21,6 +21,7 @@
              ref="tableListRef"
              :table-list="tableList"
              @selCommonClick="selCommonClick"
              @selTableCol="selTableCol"
          >
            <template slot="tableButton">
              <el-table-column align="center" label="状态" width="120">
@@ -72,6 +73,18 @@
      },
      search: {},
      qualityStatusList:getDataByType('qualityStatus'),
      tableColumn: [
        { label: "质检单编号", prop: "number", min: 190, isCommonClick: true },
        { label: "采购单编号", prop: "name", min: 130, isCommonClick: true},
        { label: "单据类型", prop: "contact_name", min: 130 },
        { label: "供应商名称", prop: "contact_phone", min: 130 },
        { label: "到货仓库", prop: "sales_resources", min: 130 },
        { label: "质检数量", prop: "province", min: 130 },
        { label: "检验员", prop: "city", min: 130 },
        // { label: "状态", prop: "member_name", min: 110 },
        { label: "质检时间", prop: "member_name", min: 150 },
      ],
      showCol: ['质检单编号', '采购单编号', '单据类型', '供应商名称', '到货仓库', '质检数量', '检验员', '质检时间']
    }
  },
  created() {
@@ -90,22 +103,27 @@
        return "--";
      }
    },
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        tableColumn: [
          { label: "质检单编号", prop: "number", min: 190, isCommonClick: true },
          { label: "采购单编号", prop: "name", min: 130, isCommonClick: true},
          { label: "单据类型", prop: "contact_name", min: 130 },
          { label: "供应商名称", prop: "contact_phone", min: 130 },
          { label: "到货仓库", prop: "sales_resources", min: 130 },
          { label: "质检数量", prop: "province", min: 130 },
          { label: "检验员", prop: "city", min: 130 },
          // { label: "状态", prop: "member_name", min: 110 },
          { label: "质检时间", prop: "member_name", min: 150 },
        ]
        showcol: this.showCol,
        allcol: [],
        tableColumn:this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    // 请求数据
    async getData() {