test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(all): 修复bugs&表格配置本地存储按项目隔离

This commit is contained in:
baiqi 2024-04-15 10:30:36 +08:00 committed by Craftsman
parent e517846a46
commit 4aaa4f1046
10 changed files with 214 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/pure/ms-table/base-table.vue
View File

@ -84,7 +84,7 @@
props.showSetting &&
(item.slotName === SpecialColumnEnum.OPERATION || item.slotName === SpecialColumnEnum.ACTION)
"
:table-key="(attrs.tableKey as string)"
:table-key="(attrs.tableKey as TableKeyEnum)"
:is-simple="(attrs.isSimpleSetting as boolean)"
@show-setting="handleShowSetting"
@init-data="handleInitColumn"
@ -245,7 +245,7 @@
v-if="props.showSetting"
v-model:visible="columnSelectorVisible"
:show-jump-method="(attrs.showJumpMethod as boolean)"
:table-key="(attrs.tableKey as string)"
:table-key="(attrs.tableKey as TableKeyEnum)"
:show-pagination="!!attrs.showPagination"
:show-subdirectory="!!attrs.showSubdirectory"
@init-data="handleInitColumn"
@ -273,7 +273,7 @@
import { useAppStore, useTableStore } from '@/store';
import { DragSortParams } from '@/models/common';
import { ColumnEditTypeEnum, SelectAllEnum, SpecialColumnEnum } from '@/enums/tableEnum';
import { ColumnEditTypeEnum, SelectAllEnum, SpecialColumnEnum, TableKeyEnum } from '@/enums/tableEnum';
import type {
BatchActionConfig,
@ -376,7 +376,7 @@
try {
let tmpArr: MsTableColumn = [];
if (props.showSetting) {
tmpArr = await tableStore.getShowInTableColumns(attrs.tableKey as string);
tmpArr = await tableStore.getShowInTableColumns(attrs.tableKey as TableKeyEnum);
} else {
tmpArr = props.columns;
}

6
frontend/src/components/pure/ms-table/columnSelector.vue
View File

@ -116,6 +116,8 @@
import { useTableStore } from '@/store';
import { TableOpenDetailMode } from '@/store/modules/components/ms-table/types';
import { TableKeyEnum } from '@/enums/tableEnum';
import { MsTableColumn } from './type';
const tableStore = useTableStore();
@ -139,7 +141,7 @@
const props = defineProps<{
visible: boolean;
tableKey: string;
tableKey: TableKeyEnum;
showJumpMethod: boolean;
showPagination: boolean;
showSubdirectory: boolean;
@ -156,7 +158,7 @@
emit('initData');
};
const loadColumn = (key: string) => {
const loadColumn = (key: TableKeyEnum) => {
tableStore.getColumns(key).then((res) => {
const { nonSort, couldSort } = res;
nonSortColumn.value = nonSort;

6
frontend/src/components/pure/ms-table/columnSelectorIcon.vue
View File

@ -61,7 +61,7 @@
import { useI18n } from '@/hooks/useI18n';
import { useTableStore } from '@/store';
import { SpecialColumnEnum } from '@/enums/tableEnum';
import { SpecialColumnEnum, TableKeyEnum } from '@/enums/tableEnum';
import { MsTableColumn } from './type';
@ -81,7 +81,7 @@
};
const props = defineProps<{
tableKey: string;
tableKey: TableKeyEnum;
isSimple: boolean;
}>();
@ -102,7 +102,7 @@
emit('initData');
};
const loadColumn = (key: string) => {
const loadColumn = (key: TableKeyEnum) => {
tableStore.getColumns(key, true).then((res) => {
const { nonSort, couldSort } = res;
nonSortColumn.value = nonSort;

4
frontend/src/components/pure/ms-table/type.ts
View File

@ -1,5 +1,5 @@
import type { TableQueryParams } from '@/models/common';
import { ColumnEditTypeEnum, SelectAllEnum } from '@/enums/tableEnum';
import { ColumnEditTypeEnum, SelectAllEnum, TableKeyEnum } from '@/enums/tableEnum';
import type { TableChangeExtra, TableColumnData, TableData, TableDraggable } from '@arco-design/web-vue';
@ -65,7 +65,7 @@ export type MsTableDataItem<T> = T & {
export interface MsTableProps<T> {
// 表格数据 - 详见 TableData https://arco.design/web-vue/components/table-data;
data: MsTableDataItem<T>[];
tableKey: string; // 表格key, 用于存储表格列配置,pageSize等
tableKey?: TableKeyEnum; // 表格key, 用于存储表格列配置,pageSize等
rowKey: string; // 表格行的key rowId
// 表格列 - 详见 TableColumn https://arco.design/web-vue/components/table-column;
columns: MsTableColumnData[];

2
frontend/src/components/pure/ms-table/useTable.ts
View File

@ -38,9 +38,7 @@ export default function useTableProps<T>(
) {
const defaultHeightUsed = 286;
// 底部操作栏的height和marginTop
const footerActionWrapHeight = 48;
const defaultProps: MsTableProps<T> = {
tableKey: '', // 缓存pageSize 或 column 的 key
bordered: true, // 是否显示边框
showPagination: true, // 是否显示分页
showSubdirectory: false, // 是否显示子目录开关

50
frontend/src/hooks/useLocalForage.ts Normal file
View File

@ -0,0 +1,50 @@
import localforage from 'localforage';
import useAppStore from '@/store/modules/app';
import { Recordable } from '#/global';
export default function useLocalForage() {
const appStore = useAppStore();
/**
* 读取本地存储的数据
* @param key 唯一 key
* @param notIsolatedByProject 存储数据时是否不按项目隔离数据
*/
const getItem = async <T>(key: string, notIsolatedByProject = false): Promise<T | null> => {
const itemKey = notIsolatedByProject ? key : `${appStore.currentProjectId}-${key}`;
try {
const res = await localforage.getItem<T>(itemKey);
if (!res) {
return null;
}
return res;
} catch (e) {
// eslint-disable-next-line no-console
console.log(e);
return null;
}
};
/**
* 永久存储数据
* @param key 唯一 key
* @param val 存储的值
* @param notIsolatedByProject 是否不按项目隔离数据
*/
const setItem = async (key: string, val: string | number | boolean | Recordable, notIsolatedByProject = false) => {
try {
const itemKey = notIsolatedByProject ? key : `${appStore.currentProjectId}-${key}`;
await localforage.setItem(itemKey, val);
} catch (e) {
// eslint-disable-next-line no-console
console.log(e);
}
};
return {
getItem,
setItem,
};
}

217
frontend/src/hooks/useTableStore.ts
View File

@ -1,33 +1,21 @@
import { filter, orderBy, sortBy } from 'lodash-es';
import localforage from 'localforage';
import { MsTableColumn, MsTableColumnData } from '@/components/pure/ms-table/type';
import { useAppStore } from '@/store';
import { MsTableSelectorItem, PageSizeMap, TableOpenDetailMode } from '@/store/modules/components/ms-table/types';
import useAppStore from '@/store/modules/app';
import { MsTableSelectorItem, TableOpenDetailMode } from '@/store/modules/components/ms-table/types';
import { isArraysEqualWithOrder } from '@/utils/equal';
import { SpecialColumnEnum } from '@/enums/tableEnum';
import { SpecialColumnEnum, TableKeyEnum } from '@/enums/tableEnum';
import useLocalForage from './useLocalForage';
export default function useTableStore() {
const state = reactive({
baseSortIndex: 10,
operationBaseIndex: 100,
});
const getPageSizeMap = async () => {
try {
const pageSizeMap = await localforage.getItem<PageSizeMap>('pageSizeMap');
if (!pageSizeMap) {
return {};
}
return pageSizeMap;
} catch (e) {
// eslint-disable-next-line no-console
console.log(e);
return {};
}
};
const { getItem, setItem } = useLocalForage();
const columnsTransform = (columns: MsTableColumn) => {
columns.forEach((item, idx) => {
@ -58,36 +46,49 @@ export default function useTableStore() {
};
async function initColumn(
tableKey: string,
tableKey: TableKeyEnum,
column: MsTableColumn,
mode?: TableOpenDetailMode,
showSubdirectory?: boolean
) {
try {
const tableColumnsMap = await localforage.getItem<MsTableSelectorItem>(tableKey);
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (!tableColumnsMap) {
// 如果没有在indexDB里初始化
column = columnsTransform(column);
localforage.setItem(tableKey, {
mode,
showSubdirectory,
column,
columnBackup: JSON.parse(JSON.stringify(column)),
});
} else {
// 初始化过了，但是可能有新变动，如列的顺序，列的显示隐藏，列的拖拽
column = columnsTransform(column);
const { columnBackup: oldColumn } = tableColumnsMap;
// 比较页面上定义的 column 和 浏览器备份的column 是否相同
const isEqual = isArraysEqualWithOrder(oldColumn, column);
if (!isEqual) {
// 如果不相等，说明有变动将新的column存入indexDB
localforage.setItem(tableKey, {
setItem(
tableKey,
{
mode,
showSubdirectory,
column,
columnBackup: JSON.parse(JSON.stringify(column)),
});
pageSize: useAppStore().pageSize,
},
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
} else {
// 初始化过了，但是可能有新变动，如列的顺序，列的显示隐藏，列的拖拽
column = columnsTransform(column);
const { columnBackup: oldColumn, pageSize } = tableColumnsMap;
// 比较页面上定义的 column 和 浏览器备份的column 是否相同
const isEqual = isArraysEqualWithOrder(oldColumn, column);
if (!isEqual) {
// 如果不相等，说明有变动将新的column存入indexDB
setItem(
tableKey,
{
mode,
showSubdirectory,
column,
columnBackup: JSON.parse(JSON.stringify(column)),
pageSize: pageSize || useAppStore().pageSize,
},
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
}
}
} catch (e) {
@ -95,12 +96,16 @@ export default function useTableStore() {
console.log(e);
}
}
async function setMode(key: string, mode: TableOpenDetailMode) {
async function setSubdirectory(tableKey: string, val: boolean) {
try {
const tableColumnsMap = await localforage.getItem<MsTableSelectorItem>(key);
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (tableColumnsMap) {
tableColumnsMap.mode = mode;
await localforage.setItem(key, tableColumnsMap);
tableColumnsMap.showSubdirectory = val;
await setItem(tableKey, tableColumnsMap, tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION'));
}
} catch (e) {
// eslint-disable-next-line no-console
@ -108,21 +113,19 @@ export default function useTableStore() {
}
}
async function setSubdirectory(key: string, val: boolean) {
try {
const tableColumnsMap = await localforage.getItem<MsTableSelectorItem>(key);
if (tableColumnsMap) {
tableColumnsMap.showSubdirectory = val;
await localforage.setItem(key, tableColumnsMap);
}
} catch (e) {
// eslint-disable-next-line no-console
console.log(e);
async function getSubShow(tableKey: TableKeyEnum) {
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (tableColumnsMap) {
return tableColumnsMap.showSubdirectory;
}
return true as boolean;
}
async function setColumns(
key: string,
tableKey: TableKeyEnum,
columns: MsTableColumn,
mode?: TableOpenDetailMode,
showSubdirectory?: boolean,
@ -134,7 +137,10 @@ export default function useTableStore() {
item.sortIndex = state.baseSortIndex + idx;
}
});
const tableColumnsMap = await localforage.getItem<MsTableSelectorItem>(key);
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (!tableColumnsMap) {
return;
}
@ -144,41 +150,28 @@ export default function useTableStore() {
if (operationColumn) columns.push(operationColumn);
}
await localforage.setItem(key, {
mode,
showSubdirectory,
column: JSON.parse(JSON.stringify(columns)),
columnBackup: tableColumnsMap.columnBackup,
});
await setItem(
tableKey,
{
mode,
showSubdirectory,
column: JSON.parse(JSON.stringify(columns)),
columnBackup: tableColumnsMap.columnBackup,
pageSize: tableColumnsMap.pageSize || useAppStore().pageSize,
},
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
} catch (e) {
// eslint-disable-next-line no-console
console.error('tableStore.setColumns', e);
}
}
async function setPageSize(key: string, pageSize: number) {
const pageSizeMap = await getPageSizeMap();
pageSizeMap[key] = pageSize;
await localforage.setItem('pageSizeMap', pageSizeMap);
}
async function getMode(key: string) {
const tableColumnsMap = await localforage.getItem<MsTableSelectorItem>(key);
if (tableColumnsMap) {
return tableColumnsMap.mode;
}
return 'drawer';
}
async function getSubShow(key: string) {
const tableColumnsMap = await localforage.getItem<MsTableSelectorItem>(key);
if (tableColumnsMap) {
return tableColumnsMap.showSubdirectory;
}
return true as boolean;
}
async function getColumns(key: string, isSimple?: boolean) {
const tableColumnsMap = await localforage.getItem<MsTableSelectorItem>(key);
async function getColumns(tableKey: TableKeyEnum, isSimple?: boolean) {
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (tableColumnsMap) {
const tmpArr = tableColumnsMap.column;
const { nonSortableColumns, couldSortableColumns } = tmpArr.reduce(
@ -199,8 +192,39 @@ export default function useTableStore() {
}
return { nonSort: [], couldSort: [] };
}
async function getShowInTableColumns(key: string) {
const tableColumnsMap = await localforage.getItem<MsTableSelectorItem>(key);
async function getMode(tableKey: TableKeyEnum) {
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (tableColumnsMap) {
return tableColumnsMap.mode;
}
return 'drawer';
}
async function setMode(tableKey: string, mode: TableOpenDetailMode) {
try {
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (tableColumnsMap) {
tableColumnsMap.mode = mode;
await setItem(tableKey, tableColumnsMap, tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION'));
}
} catch (e) {
// eslint-disable-next-line no-console
console.log(e);
}
}
async function getShowInTableColumns(tableKey: TableKeyEnum) {
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (tableColumnsMap) {
const tmpArr: MsTableColumn = tableColumnsMap.column;
return orderBy(
@ -211,13 +235,32 @@ export default function useTableStore() {
}
return [];
}
async function getPageSize(key: string) {
const pageSizeMap = await getPageSizeMap();
if (pageSizeMap[key]) {
return pageSizeMap[key];
async function getPageSize(tableKey: TableKeyEnum) {
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (tableColumnsMap) {
return tableColumnsMap.pageSize;
}
return useAppStore().pageSize;
}
async function setPageSize(tableKey: TableKeyEnum, pageSize: number) {
try {
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (tableColumnsMap) {
tableColumnsMap.pageSize = pageSize;
await setItem(tableKey, tableColumnsMap, tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION'));
}
} catch (e) {
// eslint-disable-next-line no-console
console.log(e);
}
}
return {
initColumn,

16
frontend/src/store/modules/case/featureCase.ts
View File

@ -7,6 +7,7 @@ import {
getCaseModulesCounts,
getRecycleModulesCounts,
} from '@/api/modules/case-management/featureCase';
import useLocalForage from '@/hooks/useLocalForage';
import { isArraysEqualWithOrder } from '@/utils/equal';
import type { ContentTabsMap, CustomAttributes, TabItemType } from '@/models/caseManagement/featureCase';
@ -132,17 +133,18 @@ const useFeatureCaseStore = defineStore('featureCase', {
},
async initContentTabList(arr: TabItemType[]) {
try {
const tabsMap = await localforage.getItem<ContentTabsMap>('caseTabsMap');
const { getItem, setItem } = useLocalForage();
const tabsMap = await getItem<ContentTabsMap>('caseTabsMap');
if (tabsMap) {
const { backupTabList } = tabsMap;
const isEqual = isArraysEqualWithOrder<TabItemType>(backupTabList, arr);
if (!isEqual) {
tabsMap.tabList = arr;
tabsMap.backupTabList = arr;
await localforage.setItem('caseTabsMap', tabsMap);
await setItem('caseTabsMap', tabsMap);
}
} else {
await localforage.setItem('caseTabsMap', { tabList: arr, backupTabList: arr });
await setItem('caseTabsMap', { tabList: arr, backupTabList: arr });
}
} catch (e) {
console.log(e);
@ -150,7 +152,8 @@ const useFeatureCaseStore = defineStore('featureCase', {
},
async getContentTabList() {
try {
const tabsMap = await localforage.getItem<ContentTabsMap>('caseTabsMap');
const { getItem } = useLocalForage();
const tabsMap = await getItem<ContentTabsMap>('caseTabsMap');
if (tabsMap) {
return tabsMap.tabList;
}
@ -160,11 +163,12 @@ const useFeatureCaseStore = defineStore('featureCase', {
}
},
async setContentTabList(arr: TabItemType[]) {
const tabsMap = await localforage.getItem<ContentTabsMap>('caseTabsMap');
const { getItem, setItem } = useLocalForage();
const tabsMap = await getItem<ContentTabsMap>('caseTabsMap');
if (tabsMap) {
const tmpArrList = JSON.parse(JSON.stringify(arr));
tabsMap.tabList = tmpArrList;
await localforage.setItem('caseTabsMap', tabsMap);
await setItem('caseTabsMap', tabsMap);
}
},
},

6
frontend/src/store/modules/components/ms-table/types.ts
View File

@ -10,14 +10,12 @@ export interface MsTableSelectorItem {
column: MsTableColumn;
// 列配置的备份，用于比较当前定义的列配置是否和备份的列配置相同
columnBackup: MsTableColumn;
pageSize: number;
}
export interface SelectorColumnMap {
[key: string]: MsTableSelectorItem;
}
export interface PageSizeMap {
[key: string]: number;
}
export interface MsTableState {
// 列配置， 持久化
selectorColumnMap: SelectorColumnMap;
@ -25,6 +23,4 @@ export interface MsTableState {
baseSortIndex: number;
// 操作列基数
operationBaseIndex: number;
// 分页大小
pageSizeMap: PageSizeMap;
}

16
frontend/src/store/modules/setting/useProjectEnvStore.ts
View File

@ -3,6 +3,7 @@ import { cloneDeep } from 'lodash-es';
import localforage from 'localforage';
import { getDetailEnv, getGlobalParamDetail } from '@/api/modules/project-management/envManagement';
import useLocalForage from '@/hooks/useLocalForage';
import { useAppStore } from '@/store';
import { isArraysEqualWithOrder } from '@/utils/equal';
@ -128,7 +129,8 @@ const useProjectEnvStore = defineStore(
// 初始化内容tab列表
async function initContentTabList(arr: ContentTabItem[]) {
try {
const tabsMap = await localforage.getItem<ContentTabsMap>('bugTabsMap');
const { getItem, setItem } = useLocalForage();
const tabsMap = await getItem<ContentTabsMap>('bugTabsMap');
if (tabsMap) {
// 初始化过了
const { backupTabList } = tabsMap;
@ -136,11 +138,11 @@ const useProjectEnvStore = defineStore(
if (!isEqual) {
tabsMap.tabList = arr;
tabsMap.backupTabList = arr;
await localforage.setItem('bugTabsMap', tabsMap);
await setItem('bugTabsMap', tabsMap);
}
} else {
// 没初始化过
await localforage.setItem('bugTabsMap', { tabList: arr, backupTabList: arr });
await setItem('bugTabsMap', { tabList: arr, backupTabList: arr });
}
} catch (e) {
// eslint-disable-next-line no-console
@ -150,7 +152,8 @@ const useProjectEnvStore = defineStore(
// 获取Tab列表
async function getContentTabList() {
try {
const tabsMap = await localforage.getItem<ContentTabsMap>('bugTabsMap');
const { getItem } = useLocalForage();
const tabsMap = await getItem<ContentTabsMap>('bugTabsMap');
if (tabsMap) {
return tabsMap.tabList;
}
@ -163,11 +166,12 @@ const useProjectEnvStore = defineStore(
// 设置Tab列表
async function setContentTabList(arr: ContentTabItem[]) {
const tabsMap = await localforage.getItem<ContentTabsMap>('bugTabsMap');
const { getItem, setItem } = useLocalForage();
const tabsMap = await getItem<ContentTabsMap>('bugTabsMap');
if (tabsMap) {
const tmpArrList = JSON.parse(JSON.stringify(arr));
tabsMap.tabList = tmpArrList;
await localforage.setItem('bugTabsMap', tabsMap);
await setItem('bugTabsMap', tabsMap);
}
}