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() {
      this.debouncedHandleColumnChange();
    },

    // 获取table-column配置
    async getTabColumns() {
      const res = await this.getByTableId(this.cacheKeyUrl);
      if (res?.columnConfig?.length > 0) {
        this.setStorage(this.cacheKeyUrl + 'Cols', res.columnConfig);
        // 更新列
        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配置
    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);
      }
    }
  }
};