推添加表格动态设置展示列

attendance-performance-manager-ui/admin/src/assets/mixins/table.js

@@ -87,7 +87,6 @@ export default {
         return;
       }
       this.tableData.loading = true;
-      console.log(this.query);
       this.$post(this.pageInfo.list, this.query, {
         cancelToken: this.source.token,
       })

attendance-performance-manager-ui/admin/src/components/DataTableSelect.vue

+<template>
+  <el-table
+    size="small"
+    :data="tableData"
+    :row-key="handleRowKeyMethod"
+    :span-method="handleSpanMethod"
+    :toggleRowSelection="toggleRowSelection"
+    @selection-change="handleSelectionChange"
+    @sort-change="handleSortChange"
+    @row-click="handleRowClick"
+    @cell-click="handleCellClick"
+    :row-class-name="tableRowClassName"
+    :empty-text="emptytxt ? emptytxt : emptyText"
+    border
+    style="width: 100%"
+  >
+    <template v-for="column in columns">
+      <el-table-column
+        v-if="column.show"
+        :key="column.prop"
+        :type="column.type"
+        :index="handleIndexMethod"
+        :selectable="handleSelectableMethod"
+        :prop="column.prop"
+        :label="column.label"
+        :width="column.width"
+        :sortable="column.sortable"
+        :show-overflow-tooltip="column.tooltip"
+        :align="column.align || 'left'"
+        :formatter="column.formatter"
+        :reserve-selection="column.reserveSelection"
+        :subColumns="column.subColumns"
+        :fixed="column.fixed"
+      >
+        <el-table-column
+          v-for="sunColumn in column.subColumns"
+          :key="sunColumn.prop"
+          :type="sunColumn.type"
+          :prop="sunColumn.prop"
+          :label="sunColumn.label"
+          :width="sunColumn.width"
+          :sortable="sunColumn.sortable"
+          :align="sunColumn.align || 'left'"
+          :formatter="sunColumn.formatter"
+        />
+      </el-table-column>
+    </template>
+  </el-table>
+</template>
+
+<script>
+export default {
+  props: {
+    handleRowKeyMethod: {
+      type: Function,
+      required: false,
+      default: (row) => {
+        return row.id;
+      },
+    },
+    handleSelectableMethod: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
+    handleIndexMethod: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
+    handleSpanMethod: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
+    handleSelectionChange: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
+    handleRowClick: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
+    handleCellClick: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
+    handleSortChange: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
+    tableRowClassName: {
+      type: Function,
+      required: false,
+      default: () => {},
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    tableData: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    columns: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    emptyText() {
+      return !this.loading && !this.tableData.length ? "暂无数据" : "加载中...";
+    },
+  },
+  mounted() {},
+  watch: {
+    tableData(val) {
+      val.length == 0 || val.length > 0
+        ? (this.emptytxt = "暂无数据")
+        : (this.emptytxt = "加载中...");
+
+      // if (val.length > 0) {
+      //   val.forEach((v) => {
+      //     for (let key in v) {
+      //       v[key] ? "" : (v[key] = "--");
+      //     }
+      //   });
+      //   console.log(val);
+      // }
+    },
+    columns: {
+      deep: true,
+      handler(val) {
+        this.$forceUpdate(this.columns);
+      },
+    },
+  },
+  methods: {},
+  data() {
+    return {
+      emptytxt: "",
+    };
+  },
+};
+</script>

attendance-performance-manager-ui/admin/src/components/Table.vue

@@ -184,6 +184,20 @@
           :handleRowClick="config.methods.handleRowClick"
           :handleCellClick="config.methods.handleCellClick"
         />
+        <DataTableSelect
+          v-if="showType == 'tableSelect'"
+          :tableData="data.data"
+          :columns="config.columns"
+          :loading="data.loading"
+          :tableRowClassName="config.methods.tableRowClassName"
+          :handleSpanMethod="config.methods.handleSpanMethod"
+          :handleSortChange="config.methods.handleSortChange"
+          :handleIndexMethod="config.methods.handleIndexMethod"
+          :handleSelectableMethod="config.methods.handleSelectableMethod"
+          :handleSelectionChange="config.methods.handleSelectionChange"
+          :handleRowClick="config.methods.handleRowClick"
+          :handleCellClick="config.methods.handleCellClick"
+        />
 
         <DataTableFlow
           v-if="showType == 'tableFlow'"
@@ -232,8 +246,9 @@ import Pagination from "@/components/Pagination.vue";
 import SearchForm from "@/components/SearchForm.vue";
 import Confirm from "@/components/Confirm.vue";
 import DataTable from "@/components/DataTable.vue";
+import DataTableSelect from "@/components/DataTableSelect.vue";
 import DataTableMobile from "./DataTableMobile.js";
-import DataTableFlow from "./DataTableFlow.vue";
+import DataTableFlow from "@/components/DataTableFlow.vue";
 import DataTreeTable from "@/components/DataTreeTable.vue";
 import TabPane from "@/components/tabPane.vue";
 export default {
@@ -257,10 +272,10 @@ export default {
     DataTableMobile,
     DataTableFlow,
     DataTreeTable,
+    DataTableSelect,
     TabPane,
   },
-  mounted() {
-  },
+
   methods: {
     // 根据url的query参数判断是否展示查询条件
     isShowSearch(query) {

attendance-performance-manager-ui/admin/src/views/attendance/record/list.vue

@@ -36,7 +36,13 @@
         </div>
       </div>
     </div> -->
-    <LayoutTable :data="tableData" :config="tableConfig" notDel notAdd>
+    <LayoutTable
+      :data="tableData"
+      :config="tableConfig"
+      notDel
+      notAdd
+      ref="layoutTable"
+    >
       <el-button
         slot="table-head-left2"
         style="margin-left: 10px"
@@ -69,9 +75,17 @@
         style="margin-left: 10px"
         icon="el-icon-tickets"
         size="mini"
-        @click="setdialog"
+        @click="setdialog(2)"
         >表格设置</el-button
       >
+      <el-button
+        slot="table-head-left2"
+        style="margin-left: 10px"
+        icon="el-icon-tickets"
+        size="mini"
+        @click="setdialog(1)"
+        >导出表格设置</el-button
+      >
     </LayoutTable>
     <drawer-show ref="drawerform" @ok="getData" />
     <!-- 导出记录查看 -->
@@ -118,7 +132,7 @@
         </div>
       </div>
     </el-drawer>
-    <!-- 表格设置 -->
+    <!-- 导出表格设置 -->
     <el-dialog :visible.sync="isdialog" title="导出表格设置">
       <div class="tipsword">
         请选择表格展示字段，导出的表格中的内容选中的字段将保持一致。
@@ -133,8 +147,27 @@
         </el-checkbox>
       </el-checkbox-group>
       <div class="mt20" style="text-align:right">
-        <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleSubmit">确定</el-button>
+        <el-button @click="handleCancel(1)">取消</el-button>
+        <el-button type="primary" @click="handleSubmit(1)">确定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 显示表格设置 -->
+    <el-dialog :visible.sync="setDialog" title="表格显示设置">
+      <div class="tipsword">
+        请选择表格展示字段，表格中的内容与选中的字段将保持一致。
+      </div>
+      <el-checkbox-group v-model="checkTableList">
+        <el-checkbox
+          v-for="(item, index) in setcolum"
+          :key="index"
+          :label="item.prop"
+        >
+          {{ item.label }}
+        </el-checkbox>
+      </el-checkbox-group>
+      <div class="mt20" style="text-align:right">
+        <el-button @click="handleCancel(2)">取消</el-button>
+        <el-button type="primary" @click="handleSubmit(2)">确定</el-button>
       </div>
     </el-dialog>
     <!-- 上传 -->
@@ -219,14 +252,33 @@ export default {
   },
   methods: {
     // 表格设置弹窗取消操作
-    handleCancel() {
-      this.checkList = [];
-      this.isdialog = false;
+    handleCancel(i) {
+      if (i == 1) {
+        this.checkList = [];
+        this.isdialog = false;
+      } else {
+        this.setDialog = false;
+      }
     },
     // 表格设置提交操作
-    handleSubmit() {
-      this.doExport();
-      this.isdialog = false;
+    handleSubmit(i) {
+      if (i == 1) {
+        this.doExport();
+        this.isdialog = false;
+      } else {
+        this.config.columns.forEach((v) => {
+          v.prop && v.prop != "attendanceStaffStatEntities"
+            ? (v.show = false)
+            : (v.show = true);
+          this.checkTableList.forEach((val) => {
+            if (v.prop == val) {
+              v.show = true;
+            }
+          });
+        });
+        this.$forceUpdate(this.config.columns);
+        this.setDialog = false;
+      }
     },
     // 表格接收数据后
     afterRender(data) {
@@ -249,6 +301,7 @@ export default {
         };
       });
       this.config.columns = [...this.initalArr, ...addobjArr];
+      this.$refs.layoutTable.showType = "tableSelect";
       this.$forceUpdate();
     },
     // 表格接收数据前
@@ -401,12 +454,24 @@ export default {
       }
       return false;
     },
-    setdialog() {
-      this.isdialog = true;
-      this.setcolum = this.config.columns.filter(
-        (item) => item.label && item.prop
-      );
-      console.log(this.setcolum);
+    setdialog(i) {
+      if (i == 1) {
+        this.isdialog = true;
+        this.setcolum = this.config.columns.filter(
+          (item) => item.label && item.prop
+        );
+      } else {
+        this.setDialog = true;
+        this.setcolum = this.config.columns.filter(
+          (item) => item.label && item.prop
+        );
+
+        this.checkTableList = this.config.columns.map((item) => {
+          if (item.show) {
+            return item.prop;
+          }
+        });
+      }
     },
     renderTable(tableData) {
       return (
@@ -463,33 +528,38 @@ export default {
       },
       /** 子表列元素 */
       columnSet: [
-        { prop: "shiftsName", label: "班次名称", width: 150 },
+        { prop: "shiftsName", label: "班次名称", width: 150, show: true },
         {
           prop: "goWorkDate",
           label: "上班打卡时间",
           width: 100,
           formatter: this.formatterDate,
+          show: true,
         },
         {
           prop: "goWorkResult",
           label: "上班打卡结果",
           width: 100,
           formatter: this.formatterString,
+          show: true,
         },
         {
           prop: "offWorkDate",
           label: "下班打卡时间",
           width: 100,
           formatter: this.formatterDate,
+          show: true,
         },
         {
           prop: "offWorkResult",
           label: "下班打卡结果",
           width: 100,
           formatter: this.formatterString,
+          show: true,
         },
       ],
       config: {
+        showType: "tableSelect",
         search: [
           {
             name: "staffName",
@@ -548,39 +618,59 @@ export default {
           },
         ],
         columns: [
-          { type: "selection", width: 60 },
-          { type: "index", label: "序号", width: 50 },
+          { type: "selection", width: 60, show: true },
+          { type: "index", label: "序号", width: 50, show: true },
           {
             label: "打卡日期",
             prop: "attendanceDate",
             formatter: this.formatterDateOnly,
+            show: true,
           },
-          { label: "员工姓名", prop: "staffName" },
-          { label: "员工工号", prop: "workNum" },
+          { label: "员工姓名", prop: "staffName", show: true },
+          { label: "员工工号", prop: "workNum", show: true },
           {
             label: "考勤组",
             prop: "attendanceGroupName",
+            show: true,
+          },
+          { label: "部门", prop: "deptName", show: true },
+          { label: "职位", prop: "positionName", show: true },
+          {
+            label: "班次",
+            prop: "classId",
+            formatter: this.formatter,
+            show: true,
           },
-          { label: "部门", prop: "deptName" },
-          { label: "职位", prop: "positionName" },
-          { label: "班次", prop: "classId", formatter: this.formatter },
           {
             label: "签到结果",
             prop: "signInResult",
             formatter: this.formatter,
+            show: true,
           },
           {
             label: "签退结果",
             prop: "signOutResult",
             formatter: this.formatter,
+            show: true,
+          },
+          {
+            label: "打卡结果",
+            prop: "punchResult",
+            formatter: this.formatter,
+            show: true,
+          },
+          {
+            label: "考勤类型",
+            prop: "attendType",
+            formatter: this.formatter,
+            show: true,
           },
-          { label: "打卡结果", prop: "punchResult", formatter: this.formatter },
-          { label: "考勤类型", prop: "attendType", formatter: this.formatter },
 
           {
             label: "考勤打卡记录详细信息",
             width: 120,
             prop: "subColumns",
+            show: true,
             formatter: (row) => {
               let widthsize = this.columnSet.reduce((pre, cur) => {
                 return pre + Number(cur.width);
@@ -611,6 +701,8 @@ export default {
       isdialog: false,
       setcolum: [],
       checkList: [],
+      setDialog: false,
+      checkTableList: [],
       exportList: [], //导出记录
       baseUrl: process.env.VUE_APP_API_BASE_URL + "/",
       initalArr: [],