|
@@ -0,0 +1,209 @@
|
|
|
|
|
+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) {
|
|
|
|
|
+ //对比接口返回和本地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) => {
|
|
|
|
|
+ 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);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+};
|