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

songshankun

2023-09-23 7f0ec738a0af4d9d334ce85012f864f2519ebb3f

 src/views/purchaseManage/returned/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">
@@ -74,6 +75,19 @@
      },
      search: '',
      returnedStatusList:getDataByType('returnedStatus'),
      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: 180 },
        { label: "经办人", prop: "city", min: 130 },
        { label: "制单人", prop: "member_name", min: 130 },
        { label: "退货日期", prop: "member_name", min: 150 },
        // { label: "状态", prop: "member_name", min: 110 }
      ],
      showCol: ['退货单编号', '采购单编号', '单据类型', '供应商名称', '退货仓库', '退货理由', '经办人', '制单人', '退货日期']
    }
  },
  created() {
@@ -92,23 +106,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: 180 },
          { label: "经办人", prop: "city", min: 130 },
          { label: "制单人", prop: "member_name", min: 130 },
          { label: "退货日期", prop: "member_name", min: 150 },
          // { label: "状态", prop: "member_name", min: 110 }
        ]
        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() {