kd-aiot-frontend-eom/src/mixins/tableColumnsMixin.js

import request from '@/utils/request';

export default {
  data() {
    return {
      newColumns: []
    };
  },
  created() {
    //从服务器获取缓存列表配置
    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);
        //有更新则更新服务缓存配置
        if (type) {
          this.saveColumns(nlist);
        }
        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);
      }
    }
  }
};