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

import request from '@/utils/request';

export default {
  data() {
    return {
      newColumns: []
    };
  },
  mounted() {
    //从服务器获取缓存列表配置
    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() {
      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];
        }
      }
    },
    //服务器和本地配置columns对比
    columnsContrast(list) {
      const key = 'label';
      var updateType = 0;
      let sList = list.filter((d, i, r) => {
        return d[key];
      });
      let devColumns =
        this.newColumns?.length > 0 ? this.newColumns : this.columns;
      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) => !keysA.has(item[key]));
      // 本地 比 缓存服务端 少的对象（删除）
      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;
        } else {
          item.prop = item.label;
          item.id = item.label;
        }
        item.checked = true;
      });

      if (added.length > 0 || removed.length > 0) {
        updateType = 1;
      }
      // 合并保留的对象和新增的对象
      return { nlist: [...keptA, ...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);
      }
    }
  }
};