|
|
@@ -0,0 +1,142 @@
|
|
|
+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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|