feat(表格配置): 添加表格列配置混入功能

src/components/addDoc/main.vue

@@ -17,6 +17,7 @@
       tool-class="ele-toolbar-form"
       :needPage="false"
       row-key="id"
+      :cache-key="cacheKeyUrl"
     >
       <template v-slot:toolbar v-if="type != 'view'">
         <el-button type="primary" @click="fileEditOpen">本地上传</el-button>
@@ -84,8 +85,10 @@
   import browse from './browse.vue';
   import { queryIds } from './api';
   import { setFileUrl } from './util.js';
+  import tabMixins from '@/mixins/tableColumnsMixin';
 
   export default {
+    mixins: [tabMixins],
     components: { doc_template, fileEdit, browse },
 
     data() {
@@ -95,6 +98,8 @@
         showEditFlag: false,
         tableList: [],
         type: 'add',
+        cacheKeyUrl: 'eam-addDoc-main',
+        tabMixinsInit: false,
         columns: [
           {
             label: '编码',

src/mixins/tableColumnsMixin.js

@@ -0,0 +1,252 @@
+import request from '@/utils/request';
+import _ from 'lodash';
+
+export default {
+  data() {
+    return {
+      newColumns: [],
+      tabMixinsInit: true //进入页面是否默认请求列配置
+    };
+  },
+  created() {
+    //从服务器获取缓存列表配置
+    if (this.tabMixinsInit) {
+      this.getTabColumns();
+    }
+
+    // 创建防抖函数并绑定this
+    this.debouncedHandleColumnChange = this.debounce(
+      this.handleColumnChangeImpl,
+      1000
+    );
+  },
+  methods: {
+    // 实际的列变更处理逻辑
+    handleColumnChangeImpl() {
+      try {
+        const list = this.getStorage(this.cacheKeyUrl + 'Cols');
+        if (list) {
+          this.saveColumns(list);
+        }
+      } catch (error) {
+        console.error('处理列配置出错:', error);
+      }
+    },
+
+    // 列表变化回调
+    handleColumnChange() {
+      const list = this.getStorage(this.cacheKeyUrl + 'Cols');
+
+      if (list) {
+        let requireList = [];
+        let currentList = this.getColumns()
+          .filter((item) => item.headerSlot)
+          .map((item) => item.prop);
+        list.forEach((item) => {
+          if (currentList.includes(item.prop) && !item.checked) {
+            requireList.push(item.label);
+            item.checked = true;
+          }
+        });
+        if (requireList.length) {
+          this.setStorage(this.cacheKeyUrl + 'Cols', list);
+          if ('columns' in this.$options.computed) {
+            this.columnsVersion++;
+          } else {
+            this.columns = [...this.columns];
+          }
+          this.$message.warning(
+            `${requireList.toString()} 为必填项，无法隐藏！`
+          );
+          return;
+        }
+      }
+      this.debouncedHandleColumnChange();
+    },
+
+    // 获取table-column配置
+    async getTabColumns() {
+      const res = await this.getByTableId(this.cacheKeyUrl);
+      if (res?.columnConfig?.length > 0) {
+        //对比接口返回和本地columns
+        let { nlist, type } = this.columnsContrast(res.columnConfig);
+        // 将nlist中的prop字段去重
+        const uniqueList = _.uniqBy(nlist, 'prop');
+        const uniqueLabelList = _.uniqBy(uniqueList, 'label');
+        //有更新则更新服务缓存配置
+        if (type) {
+          this.saveColumns(uniqueLabelList);
+        }
+        this.setStorage(this.cacheKeyUrl + 'Cols', nlist);
+        // 更新列
+        if (this._computedWatchers && this._computedWatchers.columns) {
+          // console.log('columns 是计算属性');
+          this.columnsVersion++;
+        } else {
+          // console.log('columns 是 data 属性');
+          this.columns = [...this.columns];
+          this.newColumns = [...this.newColumns];
+        }
+      }
+    },
+    getColumns() {
+      if (typeof this.columns == 'function') {
+        return this.columns();
+      } else {
+        return this.columns;
+      }
+    },
+    //服务器和本地配置columns对比
+    columnsContrast(list) {
+      const key = 'label';
+      var updateType = 0;
+      let sList = list.filter((d, i, r) => {
+        return d[key];
+      });
+      let devColumns = this.newColumns?.length
+        ? this.newColumns
+        : this.getColumns();
+
+      let dList = devColumns.filter((d, i, r) => {
+        return d[key] && d[key] !== '序号';
+      });
+      const keysA = new Set(sList.map((item) => item[key]));
+      const keysB = new Set(dList.map((item) => item[key]));
+      // 本地 比 缓存服务端 多的对象（新增）
+      const added = dList.filter((item) => {
+        return !keysA.has(item[key]) && (item.prop || item.label === '操作');
+      });
+      // 本地 比 缓存服务端 少的对象（删除）
+      const removed = sList.filter((item) => !keysB.has(item[key]));
+      const removedPropSet = new Set(removed.map((item) => item[key]));
+      // 删除 缓存中 中被移除的对象
+      const keptA = list.filter((item) => !removedPropSet.has(item[key]));
+      added.forEach((item) => {
+        //新增columns字段prop参数为必填
+        if (item.prop) {
+          item.id = item.prop;
+        } else if (item.columnKey) {
+          item.id = item.columnKey;
+        }
+        item.checked = true;
+      });
+
+      if (added.length > 0 || removed.length > 0) {
+        updateType = 1;
+      }
+
+      // 更新项：key 存在但内容变化
+      const dMap = new Map(dList.map((item) => [item[key], item]));
+      const updated = keptA.map((sItem) => {
+        const dItem = dMap.get(sItem[key]);
+        if (dItem && dItem.prop && sItem.prop !== dItem.prop) {
+          updateType = 1;
+          // 记录旧值和新值
+          const oldValue = sItem.prop;
+          const newValue = dItem.prop;
+          // 遍历所有属性，动态替换匹配旧值的字段
+          const updatedItem = { ...sItem };
+          Object.keys(updatedItem).forEach((k) => {
+            if (updatedItem[k] === oldValue) {
+              updatedItem[k] = newValue;
+            }
+          });
+          return updatedItem;
+        }
+        return sItem;
+      });
+
+      // 合并保留的对象和新增的对象
+      return { nlist: [...updated, ...added], type: updateType };
+    },
+
+    // 提交columns配置
+    async saveColumns(e) {
+      const data = {
+        tableId: this.cacheKeyUrl,
+        columnConfig: e
+      };
+      const msg = await this.saveTableConfig(data);
+      // console.log('列配置保存成功:', msg);
+      return msg;
+    },
+
+    //获取localstorage缓存
+    setStorage(key, value) {
+      try {
+        localStorage.setItem(key, JSON.stringify(value));
+      } catch (e) {
+        console.log('LocalStorage 存储错误:', e);
+        if (e.name === 'QuotaExceededError') {
+          this.clearCacheByPrefix(); //缓存不足，清除
+          localStorage.setItem(key, JSON.stringify(value));
+        }
+      }
+    },
+
+    //缓存不足清除缓存
+    clearCacheByPrefix() {
+      const prefix = 'Cols'; // 标识后缀
+      Object.keys(localStorage).forEach((key) => {
+        if (key.endsWith(prefix)) {
+          localStorage.removeItem(key);
+          // console.log(`已清除缓存: ${key}`);
+        }
+      });
+      // console.log('缓存清除完成');
+    },
+
+    //设置localstorage缓存
+    getStorage(key) {
+      try {
+        const value = localStorage.getItem(key);
+        return value ? JSON.parse(value) : null;
+      } catch (e) {
+        console.error('LocalStorage 解析错误:', e);
+        return null;
+      }
+    },
+
+    //防抖函数
+    debounce(fn, delay) {
+      let timer = null;
+      return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          fn.apply(this, args);
+        }, delay);
+      };
+    },
+
+    //获取column记录接口
+    async getByTableId(key) {
+      try {
+        const res = await request.get(
+          `/sys/table-config/getByTableId/${key}`,
+          {}
+        );
+        if (res.data.code == 0) {
+          return res.data.data;
+        }
+      } catch (error) {
+        console.error('获取列配置失败:', error);
+      }
+    },
+
+    // 添加column记录接口
+    async saveTableConfig(data) {
+      try {
+        const res = await request({
+          url: '/sys/table-config/save',
+          method: 'post',
+          data
+        });
+        if (res.data.code == 0) {
+          return res.data.data;
+        }
+      } catch (error) {
+        console.error('保存列配置失败:', error);
+      }
+    }
+  }
+};