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

feat(表格): 支持记住手动调整的字段列宽& 关联用例增加创建人筛选

This commit is contained in:
xinxin.wu 2024-12-09 19:04:59 +08:00 committed by Craftsman
parent 4c0bd68163
commit 91321faa07
35 changed files with 612 additions and 504 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
frontend/src/components/business/ms-associate-case/apiCaseTable.vue
View File

@ -1,8 +1,8 @@
<template>
<MsBaseTable
ref="tableRef"
class="mt-[16px]"
v-bind="propsRes"
class="mt-[16px]"
:action-config="{
baseAction: [],
moreAction: [],
@ -80,7 +80,7 @@
import { ReportEnum } from '@/enums/reportEnum';
import { ApiTestRouteEnum } from '@/enums/routeEnum';
import { SpecialColumnEnum, TableKeyEnum } from '@/enums/tableEnum';
import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
import { FilterRemoteMethodsEnum, FilterSlotNameEnum } from '@/enums/tableFilterEnum';
import type { moduleKeysType } from './types';
import useModuleSelection from './useModuleSelection';
@ -127,97 +127,105 @@
const tableStore = useTableStore();
const columns: MsTableColumn = [
{
title: 'ID',
dataIndex: 'num',
slotName: 'num',
sortIndex: 1,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
const columns = computed<MsTableColumn>(() => {
return [
{
title: 'ID',
dataIndex: 'num',
slotName: 'num',
sortIndex: 1,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
fixed: 'left',
width: 100,
showTooltip: true,
columnSelectorDisabled: true,
},
fixed: 'left',
width: 100,
showTooltip: true,
columnSelectorDisabled: true,
},
{
title: 'case.caseName',
dataIndex: 'name',
showTooltip: true,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
{
title: 'case.caseName',
dataIndex: 'name',
showTooltip: true,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
width: 180,
columnSelectorDisabled: true,
},
width: 180,
columnSelectorDisabled: true,
},
{
title: 'case.caseLevel',
dataIndex: 'priority',
slotName: 'caseLevel',
filterConfig: {
options: casePriorityOptions,
filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_CASE_LEVEL,
{
title: 'case.caseLevel',
dataIndex: 'priority',
slotName: 'caseLevel',
filterConfig: {
options: casePriorityOptions,
filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_CASE_LEVEL,
},
width: 150,
showDrag: true,
},
width: 150,
showDrag: true,
},
{
title: 'case.lastReportStatus',
dataIndex: 'lastReportStatus',
slotName: 'lastReportStatus',
filterConfig: {
options: lastReportStatusListOptions.value,
filterSlotName: FilterSlotNameEnum.API_TEST_CASE_API_LAST_EXECUTE_STATUS,
{
title: 'case.lastReportStatus',
dataIndex: 'lastReportStatus',
slotName: 'lastReportStatus',
filterConfig: {
options: lastReportStatusListOptions.value,
filterSlotName: FilterSlotNameEnum.API_TEST_CASE_API_LAST_EXECUTE_STATUS,
},
showInTable: false,
width: 150,
showDrag: true,
},
showInTable: false,
width: 150,
showDrag: true,
},
{
title: 'apiTestManagement.path',
dataIndex: 'path',
showTooltip: true,
width: 200,
showDrag: true,
},
{
title: 'common.tag',
slotName: 'tags',
dataIndex: 'tags',
isTag: true,
width: 300,
},
{
title: 'caseManagement.featureCase.tableColumnCreateUser',
slotName: 'createName',
dataIndex: 'createName',
showTooltip: true,
width: 200,
showDrag: true,
},
{
title: 'caseManagement.featureCase.tableColumnCreateTime',
slotName: 'createTime',
dataIndex: 'createTime',
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
{
title: 'apiTestManagement.path',
dataIndex: 'path',
showTooltip: true,
width: 200,
showDrag: true,
},
width: 200,
showDrag: true,
},
{
title: '',
dataIndex: 'action',
width: 24,
slotName: SpecialColumnEnum.ACTION,
fixed: 'right',
cellClass: 'operator-class',
},
];
{
title: 'common.tag',
slotName: 'tags',
dataIndex: 'tags',
isTag: true,
width: 300,
},
{
title: 'caseManagement.featureCase.tableColumnCreateUser',
slotName: 'createName',
dataIndex: 'createUser',
filterConfig: {
mode: 'remote',
loadOptionParams: {
projectId: props.currentProject,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
},
width: 200,
showDrag: true,
},
{
title: 'caseManagement.featureCase.tableColumnCreateTime',
slotName: 'createTime',
dataIndex: 'createTime',
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
width: 200,
showDrag: true,
},
{
title: '',
dataIndex: 'action',
width: 24,
slotName: SpecialColumnEnum.ACTION,
fixed: 'right',
cellClass: 'operator-class',
},
];
});
const getPageList = computed(() => {
return props.activeSourceType !== 'API'
@ -443,6 +451,7 @@
setPagination({
current: 1,
});
tableRef.value?.initColumn(columns.value);
resetFilterParams();
loadCaseList();
},
@ -537,7 +546,7 @@
setCaseAdvanceFilter,
});
await tableStore.initColumn(TableKeyEnum.ASSOCIATE_CASE_API_CASE, columns, 'drawer');
await tableStore.initColumn(TableKeyEnum.ASSOCIATE_CASE_API_CASE, columns.value, 'drawer');
</script>
<style lang="less" scoped>

167
frontend/src/components/business/ms-associate-case/apiTable.vue
View File

@ -112,89 +112,90 @@
});
});
const columns: MsTableColumn = [
{
title: 'ID',
dataIndex: 'num',
slotName: 'num',
sortIndex: 1,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
fixed: 'left',
width: 100,
columnSelectorDisabled: true,
},
{
title: 'apiTestManagement.apiName',
dataIndex: 'name',
showTooltip: true,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
width: 200,
columnSelectorDisabled: true,
},
{
title: 'apiTestManagement.apiType',
dataIndex: 'method',
slotName: 'method',
width: 140,
showDrag: true,
filterConfig: {
options: requestMethodsOptions.value,
filterSlotName: FilterSlotNameEnum.API_TEST_API_REQUEST_METHODS,
},
},
{
title: 'apiTestManagement.path',
dataIndex: 'path',
showTooltip: true,
width: 200,
showDrag: true,
},
{
title: 'common.tag',
dataIndex: 'tags',
isTag: true,
isStringTag: true,
showDrag: true,
},
{
title: 'apiTestManagement.caseTotal',
dataIndex: 'caseTotal',
showTooltip: true,
width: 100,
showDrag: true,
slotName: 'caseTotal',
},
{
title: 'common.creator',
slotName: 'createUserName',
dataIndex: 'createUser',
filterConfig: {
mode: 'remote',
loadOptionParams: {
projectId: appStore.currentProjectId,
const columns = computed<MsTableColumn>(() => {
return [
{
title: 'ID',
dataIndex: 'num',
slotName: 'num',
sortIndex: 1,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
fixed: 'left',
width: 100,
columnSelectorDisabled: true,
},
showInTable: true,
width: 200,
showDrag: true,
},
{
title: '',
dataIndex: 'action',
width: 24,
slotName: SpecialColumnEnum.ACTION,
fixed: 'right',
cellClass: 'operator-class',
},
];
{
title: 'apiTestManagement.apiName',
dataIndex: 'name',
showTooltip: true,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
width: 200,
columnSelectorDisabled: true,
},
{
title: 'apiTestManagement.apiType',
dataIndex: 'method',
slotName: 'method',
width: 140,
showDrag: true,
filterConfig: {
options: requestMethodsOptions.value,
filterSlotName: FilterSlotNameEnum.API_TEST_API_REQUEST_METHODS,
},
},
{
title: 'apiTestManagement.path',
dataIndex: 'path',
showTooltip: true,
width: 200,
showDrag: true,
},
{
title: 'common.tag',
dataIndex: 'tags',
isTag: true,
isStringTag: true,
showDrag: true,
},
{
title: 'apiTestManagement.caseTotal',
dataIndex: 'caseTotal',
showTooltip: true,
width: 100,
showDrag: true,
slotName: 'caseTotal',
},
{
title: 'common.creator',
slotName: 'createUserName',
dataIndex: 'createUser',
filterConfig: {
mode: 'remote',
loadOptionParams: {
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
},
showInTable: true,
width: 200,
showDrag: true,
},
{
title: '',
dataIndex: 'action',
width: 24,
slotName: SpecialColumnEnum.ACTION,
fixed: 'right',
cellClass: 'operator-class',
},
];
});
const {
propsRes,
@ -363,6 +364,7 @@
function setCaseAdvanceFilter(filter: FilterResult, id: string) {
setAdvanceFilter(filter, id);
}
const apiTableRef = ref<InstanceType<typeof MsBaseTable>>();
watch(
[() => props.currentProject, () => props.protocols],
@ -370,6 +372,7 @@
setPagination({
current: 1,
});
apiTableRef.value?.initColumn(columns.value);
resetFilterParams();
loadApiList();
},
@ -466,7 +469,7 @@
setCaseAdvanceFilter,
});
await tableStore.initColumn(TableKeyEnum.ASSOCIATE_CASE_API, columns, 'drawer');
await tableStore.initColumn(TableKeyEnum.ASSOCIATE_CASE_API, columns.value, 'drawer');
</script>
<style lang="less" scoped>

198
frontend/src/components/business/ms-associate-case/caseTable.vue
View File

@ -42,6 +42,11 @@
<template #lastExecResult="{ record }">
<ExecuteResult :execute-result="record.lastExecResult" />
</template>
<template #createUserName="{ record }">
<a-tooltip :content="`${record.createUserName}`" position="tl">
<div class="one-line-text">{{ record.createUserName }}</div>
</a-tooltip>
</template>
<template #count>
<slot></slot>
</template>
@ -72,7 +77,7 @@
import { CaseLinkEnum } from '@/enums/caseEnum';
import { CaseManagementRouteEnum } from '@/enums/routeEnum';
import { SpecialColumnEnum, TableKeyEnum } from '@/enums/tableEnum';
import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
import { FilterRemoteMethodsEnum, FilterSlotNameEnum } from '@/enums/tableFilterEnum';
import type { moduleKeysType } from './types';
import useModuleSelection from './useModuleSelection';
@ -134,102 +139,110 @@
});
});
const columns: MsTableColumn = [
{
title: 'ID',
dataIndex: 'num',
slotName: 'num',
sortIndex: 1,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
const columns = computed<MsTableColumn>(() => {
return [
{
title: 'ID',
dataIndex: 'num',
slotName: 'num',
sortIndex: 1,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
fixed: 'left',
width: 150,
showTooltip: true,
},
fixed: 'left',
width: 150,
showTooltip: true,
},
{
title: 'case.caseName',
dataIndex: 'name',
showTooltip: true,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
{
title: 'case.caseName',
dataIndex: 'name',
showTooltip: true,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
width: 180,
columnSelectorDisabled: true,
},
width: 180,
columnSelectorDisabled: true,
},
{
title: 'case.caseLevel',
dataIndex: 'caseLevel',
slotName: 'caseLevel',
filterConfig: {
options: casePriorityOptions,
filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_CASE_LEVEL,
{
title: 'case.caseLevel',
dataIndex: 'caseLevel',
slotName: 'caseLevel',
filterConfig: {
options: casePriorityOptions,
filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_CASE_LEVEL,
},
width: 150,
showDrag: true,
},
width: 150,
showDrag: true,
},
{
title: 'caseManagement.featureCase.tableColumnReviewResult',
dataIndex: 'reviewStatus',
slotName: 'reviewStatus',
filterConfig: {
options: reviewResultOptions.value,
filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_REVIEW_RESULT,
{
title: 'caseManagement.featureCase.tableColumnReviewResult',
dataIndex: 'reviewStatus',
slotName: 'reviewStatus',
filterConfig: {
options: reviewResultOptions.value,
filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_REVIEW_RESULT,
},
showInTable: true,
width: 150,
showDrag: true,
},
showInTable: true,
width: 150,
showDrag: true,
},
{
title: 'caseManagement.featureCase.tableColumnExecutionResult',
dataIndex: 'lastExecuteResult',
slotName: 'lastExecuteResult',
filterConfig: {
options: executeResultOptions.value,
filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_EXECUTE_RESULT,
{
title: 'caseManagement.featureCase.tableColumnExecutionResult',
dataIndex: 'lastExecuteResult',
slotName: 'lastExecuteResult',
filterConfig: {
options: executeResultOptions.value,
filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_EXECUTE_RESULT,
},
showInTable: true,
width: 150,
showDrag: true,
},
showInTable: true,
width: 150,
showDrag: true,
},
{
title: 'common.tag',
dataIndex: 'tags',
isTag: true,
isStringTag: true,
width: 400,
showDrag: true,
},
{
title: 'caseManagement.featureCase.tableColumnCreateUser',
slotName: 'createUserName',
dataIndex: 'createUserName',
showTooltip: true,
width: 150,
showDrag: true,
},
{
title: 'caseManagement.featureCase.tableColumnCreateTime',
slotName: 'createTime',
dataIndex: 'createTime',
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
{
title: 'common.tag',
dataIndex: 'tags',
isTag: true,
isStringTag: true,
width: 400,
showDrag: true,
},
width: 200,
showDrag: true,
},
{
title: '',
dataIndex: 'action',
width: 24,
slotName: SpecialColumnEnum.ACTION,
fixed: 'right',
cellClass: 'operator-class',
},
];
{
title: 'caseManagement.featureCase.tableColumnCreateUser',
slotName: 'createUserName',
dataIndex: 'createUserName',
width: 150,
filterConfig: {
mode: 'remote',
loadOptionParams: {
projectId: props.currentProject,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
},
showDrag: true,
},
{
title: 'caseManagement.featureCase.tableColumnCreateTime',
slotName: 'createTime',
dataIndex: 'createTime',
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
width: 200,
showDrag: true,
},
{
title: '',
dataIndex: 'action',
width: 24,
slotName: SpecialColumnEnum.ACTION,
fixed: 'right',
cellClass: 'operator-class',
},
];
});
const getPageList = computed(() => {
return getPublicLinkCaseListMap[props.getPageApiType][props.activeSourceType];
@ -478,6 +491,7 @@
watch(
() => props.currentProject,
() => {
tableRef.value?.initColumn(columns.value);
resetFilterParams();
loadCaseList();
initFilter();
@ -508,7 +522,7 @@
setCaseAdvanceFilter,
});
await tableStore.initColumn(TableKeyEnum.ASSOCIATE_CASE, columns, 'drawer');
await tableStore.initColumn(TableKeyEnum.ASSOCIATE_CASE, columns.value, 'drawer');
</script>
<style lang="less" scoped>

181
frontend/src/components/business/ms-associate-case/scenarioCaseTable.vue
View File

@ -119,96 +119,98 @@
});
});
const columns: MsTableColumn = [
{
title: 'ID',
dataIndex: 'num',
slotName: 'num',
sortIndex: 1,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
fixed: 'left',
width: 160,
showTooltip: false,
columnSelectorDisabled: true,
},
{
title: 'apiScenario.table.columns.name',
dataIndex: 'name',
slotName: 'name',
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
width: 134,
showTooltip: true,
columnSelectorDisabled: true,
},
{
title: 'apiScenario.table.columns.level',
dataIndex: 'priority',
slotName: 'priority',
showDrag: true,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
filterConfig: {
options: casePriorityOptions,
filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_CASE_LEVEL,
},
width: 140,
},
{
title: 'apiScenario.table.columns.runResult',
dataIndex: 'lastReportStatus',
slotName: 'lastReportStatus',
showTooltip: false,
showDrag: true,
filterConfig: {
options: statusList.value,
filterSlotName: FilterSlotNameEnum.API_TEST_CASE_API_REPORT_EXECUTE_RESULT,
},
width: 200,
},
{
title: 'apiScenario.table.columns.passRate',
dataIndex: 'requestPassRate',
showDrag: true,
width: 100,
},
{
title: 'apiScenario.table.columns.tags',
dataIndex: 'tags',
isTag: true,
isStringTag: true,
showDrag: true,
},
{
title: 'apiScenario.table.columns.createUser',
dataIndex: 'createUser',
slotName: 'createUserName',
width: 109,
filterConfig: {
mode: 'remote',
loadOptionParams: {
projectId: appStore.currentProjectId,
const columns = computed<MsTableColumn>(() => {
return [
{
title: 'ID',
dataIndex: 'num',
slotName: 'num',
sortIndex: 1,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
fixed: 'left',
width: 160,
showTooltip: false,
columnSelectorDisabled: true,
},
},
{
title: '',
dataIndex: 'action',
width: 24,
slotName: SpecialColumnEnum.ACTION,
fixed: 'right',
cellClass: 'operator-class',
},
];
{
title: 'apiScenario.table.columns.name',
dataIndex: 'name',
slotName: 'name',
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
width: 134,
showTooltip: true,
columnSelectorDisabled: true,
},
{
title: 'apiScenario.table.columns.level',
dataIndex: 'priority',
slotName: 'priority',
showDrag: true,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
filterConfig: {
options: casePriorityOptions,
filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_CASE_LEVEL,
},
width: 140,
},
{
title: 'apiScenario.table.columns.runResult',
dataIndex: 'lastReportStatus',
slotName: 'lastReportStatus',
showTooltip: false,
showDrag: true,
filterConfig: {
options: statusList.value,
filterSlotName: FilterSlotNameEnum.API_TEST_CASE_API_REPORT_EXECUTE_RESULT,
},
width: 200,
},
{
title: 'apiScenario.table.columns.passRate',
dataIndex: 'requestPassRate',
showDrag: true,
width: 100,
},
{
title: 'apiScenario.table.columns.tags',
dataIndex: 'tags',
isTag: true,
isStringTag: true,
showDrag: true,
},
{
title: 'apiScenario.table.columns.createUser',
dataIndex: 'createUser',
slotName: 'createUserName',
width: 109,
filterConfig: {
mode: 'remote',
loadOptionParams: {
projectId: props.currentProject,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
},
},
{
title: '',
dataIndex: 'action',
width: 24,
slotName: SpecialColumnEnum.ACTION,
fixed: 'right',
cellClass: 'operator-class',
},
];
});
const getPageList = computed(() => {
return getPublicLinkCaseListMap[props.getPageApiType][props.activeSourceType];
});
@ -457,6 +459,7 @@
watch(
() => props.currentProject,
() => {
tableRef.value?.initColumn(columns.value);
resetFilterParams();
loadScenarioList();
}
@ -483,7 +486,7 @@
loadScenarioList,
});
await tableStore.initColumn(TableKeyEnum.ASSOCIATE_CASE_API_SCENARIO, columns, 'drawer');
await tableStore.initColumn(TableKeyEnum.ASSOCIATE_CASE_API_SCENARIO, columns.value, 'drawer');
</script>
<style lang="less" scoped>

116
frontend/src/components/business/ms-case-associate/index.vue
View File

@ -117,6 +117,7 @@
/>
<ms-base-table
v-bind="propsRes"
:columns="columns"
:action-config="{
baseAction: [],
moreAction: [],
@ -154,6 +155,11 @@
<template #[FilterSlotNameEnum.CASE_MANAGEMENT_EXECUTE_RESULT]="{ filterContent }">
<ExecuteStatusTag :execute-result="filterContent.value" />
</template>
<template #createUserName="{ record }">
<a-tooltip :content="`${record.createUserName}`" position="tl">
<div class="one-line-text">{{ record.createUserName }}</div>
</a-tooltip>
</template>
</ms-base-table>
<div class="footer">
<div class="flex flex-1 items-center">
@ -211,7 +217,7 @@
import { CaseLinkEnum } from '@/enums/caseEnum';
import { CaseManagementRouteEnum } from '@/enums/routeEnum';
import { TableKeyEnum } from '@/enums/tableEnum';
import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
import { FilterRemoteMethodsEnum, FilterSlotNameEnum } from '@/enums/tableFilterEnum';
import { initGetModuleCountFunc, type RequestModuleEnum } from './utils';
import { casePriorityOptions } from '@/views/api-test/components/config';
@ -425,57 +431,66 @@
return [];
}
const columns: MsTableColumn = [
{
title: 'ID',
dataIndex: 'num',
slotName: 'num',
sortIndex: 1,
showTooltip: true,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
const columns = computed<MsTableColumn>(() => {
return [
{
title: 'ID',
dataIndex: 'num',
slotName: 'num',
sortIndex: 1,
showTooltip: true,
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
width: 120,
fixed: 'left',
},
width: 120,
fixed: 'left',
},
{
title: 'ms.case.associate.caseName',
dataIndex: 'name',
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
{
title: 'ms.case.associate.caseName',
dataIndex: 'name',
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
showTooltip: true,
width: 250,
},
showTooltip: true,
width: 250,
},
...getCaseLevelColumn(),
...getReviewStatus(),
{
title: 'ms.case.associate.tags',
dataIndex: 'tags',
isTag: true,
},
{
title: 'caseManagement.featureCase.tableColumnCreateUser',
slotName: 'createUserName',
dataIndex: 'createUserName',
showTooltip: true,
width: 200,
showDrag: true,
},
{
title: 'caseManagement.featureCase.tableColumnCreateTime',
slotName: 'createTime',
dataIndex: 'createTime',
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
...getCaseLevelColumn(),
...getReviewStatus(),
{
title: 'ms.case.associate.tags',
dataIndex: 'tags',
isTag: true,
},
width: 200,
showDrag: true,
},
];
{
title: 'caseManagement.featureCase.tableColumnCreateUser',
slotName: 'createUserName',
dataIndex: 'createUser',
showTooltip: true,
width: 200,
filterConfig: {
mode: 'remote',
loadOptionParams: {
projectId: innerProject.value,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
},
showDrag: true,
},
{
title: 'caseManagement.featureCase.tableColumnCreateTime',
slotName: 'createTime',
dataIndex: 'createTime',
sortable: {
sortDirections: ['ascend', 'descend'],
sorter: true,
},
width: 200,
showDrag: true,
},
];
});
watchEffect(() => {
getCaseLevelColumn();
@ -495,7 +510,7 @@
} = useTable(
props.getTableFunc,
{
columns,
columns: columns.value,
tableKey: TableKeyEnum.CASE_MANAGEMENT_ASSOCIATED_TABLE,
scroll: { x: '100%' },
showSetting: false,
@ -820,6 +835,7 @@
value: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]
) {
innerProject.value = value as string;
resetFilterParams();
await initModules();
setAllSelectModule();
initFilter();

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

@ -310,7 +310,7 @@
<script lang="ts" setup>
import { Message } from '@arco-design/web-vue';
import { debounce } from 'lodash-es';
import { debounce, throttle } from 'lodash-es';
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
import MsPagination from '@/components/pure/ms-pagination/index';
@ -964,8 +964,18 @@
batchLeft.value = getBatchLeft();
});
function columnResize(dataIndex: string) {
const updateColumnWidth = throttle(async (dataIndex: string, width: number) => {
if (dataIndex) {
const [index] = dataIndex.split('_').slice(-1);
const lastIndex = attrs.selectable ? Number(index) - 1 : Number(index);
currentColumns.value[lastIndex].width = width;
await tableStore.updateColumnWidth(attrs.tableKey as TableKeyEnum, currentColumns.value);
}
}, 200);
function columnResize(dataIndex: string, width: number) {
if (dataIndex) {
updateColumnWidth(dataIndex, width);
updateAllTagVisibility();
}
}

169
frontend/src/components/pure/ms-table/comp/defaultFilter.vue
View File

@ -34,25 +34,54 @@
</a-checkbox>
</a-checkbox-group>
</div>
<div v-else class="w-[200px] p-[12px] pb-[8px]">
<MsSelect
v-model:model-value="checkedList"
mode="remote"
:options="[]"
:placeholder="props.placeholderText"
multiple
:value-key="props.valueKey || 'id'"
:label-key="props.labelKey || 'name'"
:filter-option="false"
<div v-if="props.mode === 'remote'" class="w-[190px] p-[12px] py-[8px]">
<a-input
v-model:model-value="filterKeyword"
class="mb-[8px]"
:placeholder="t('common.pleaseInput')"
allow-clear
:search-keys="['name']"
:loading="loading"
:remote-func="loadList"
:remote-extra-params="{ ...props.loadOptionParams }"
:option-label-render="optionLabelRender"
:should-calculate-max-tag="false"
>
</MsSelect>
<template #prefix>
<MsIcon
type="icon-icon_search-outline_outlined"
class="text-[var(--color-text-input-border)]"
size="16"
/>
</template>
</a-input>
<a-spin class="w-full" :loading="loading">
<MsList
v-model:data="filterListOptions"
mode="remote"
item-key-field="id"
:item-border="false"
class="w-full rounded-[var(--border-radius-small)]"
:no-more-data="false"
:virtual-list-props="{
height: '160px',
}"
>
<template #title="{ item }">
<div class="w-full" @click.stop="checkItem(item.value)">
<a-checkbox
:model-value="checkedList.includes(item.value)"
:value="item.value"
@click.stop="checkItem(item.value)"
>
<a-tooltip
:content="item[props.labelKey || 'label']"
:mouse-enter-delay="300"
:disabled="!item[props.labelKey || 'label']"
>
<div class="one-line-text max-w-[120px]" @click.stop="checkItem(item.value)">
<div class="one-line-text max-w-[120px]">{{ item.label }}</div>
</div>
</a-tooltip>
</a-checkbox>
</div>
</template>
</MsList>
</a-spin>
</div>
<div
:class="`${
@ -74,8 +103,9 @@
<script lang="ts" setup>
import { SelectOptionData } from '@arco-design/web-vue';
import { debounce } from 'lodash-es';
import MsSelect from '@/components/business/ms-select/index';
import MsList from '@/components/pure/ms-list/index.vue';
import { useI18n } from '@/hooks/useI18n';
@ -96,7 +126,6 @@
mode?: 'static' | 'remote';
remoteMethod?: FilterRemoteMethodsEnum; // 加载选项方法
loadOptionParams?: Record<string, any>; // 请求下拉的参数
placeholderText?: string;
dataIndex?: string | undefined;
filter: Record<string, any>;
emptyFilter?: boolean; // 增加-空选项查询
@ -129,36 +158,6 @@
const loading = ref(true);
const optionLabelRender = (option: SelectOptionData) => {
return `<span class='text-[var(--color-text-1)]'>${option.name}</span>`;
};
const loadList = async (params: Record<string, any>) => {
try {
loading.value = true;
const { keyword, ...rest } = params;
if (props.remoteMethod) {
const list = (await initRemoteOptionsFunc(props.remoteMethod, { keyword, ...rest })) || [];
list.forEach((item: any) => {
if (props.valueKey) {
item.id = item[props.valueKey || 'id'] as string;
}
if (props.labelKey) {
item.name = (item[props.labelKey] as string) || '';
}
});
return list;
}
return [];
} catch (error) {
// eslint-disable-next-line no-console
console.log(error);
return [];
} finally {
loading.value = false;
}
};
const isHighlight = computed(() => {
if (props.filter && props.dataIndex) {
return (props.filter[props.dataIndex] || []).length > 0;
@ -175,6 +174,43 @@
return true;
});
const originFilterList = ref<SelectOptionData[]>([]);
const filterListOptions = ref<SelectOptionData[]>([]);
const filterKeyword = ref('');
async function initOptions() {
try {
loading.value = true;
if (props.remoteMethod) {
const list =
(await initRemoteOptionsFunc(props.remoteMethod, {
keyword: filterKeyword.value,
...props.loadOptionParams,
})) || [];
list.forEach((item: any) => {
item.value = item[props.valueKey || 'id'] as string;
item.label = (item[props.labelKey || 'name'] as string) || '';
});
filterListOptions.value = list;
originFilterList.value = list;
}
} catch (error) {
// eslint-disable-next-line no-console
console.log(error);
} finally {
loading.value = false;
}
}
function checkItem(value: string) {
if (checkedList.value.includes(value)) {
checkedList.value = checkedList.value.filter((e) => e !== value);
} else {
checkedList.value.push(value);
}
}
// 用于切换的时候重置清空上一次的选择
watch(
() => isNoFilter.value,
@ -188,11 +224,44 @@
watch(
() => props.filter,
(val) => {
if (val[props.dataIndex as string] && val[props.dataIndex as string]?.length) {
if (!val[props.dataIndex as string] || val[props.dataIndex as string]?.length === 0) {
checkedList.value = []; // 清空选择
} else {
// 如果有过滤条件，更新 checkedList
checkedList.value = val[props.dataIndex as string];
}
}
);
const searchItem = debounce(() => {
filterListOptions.value = originFilterList.value.filter((item: SelectOptionData) =>
item.label?.includes(filterKeyword.value)
);
}, 300);
watch(
() => visible.value,
(val) => {
if (val && props.mode === 'remote') {
filterKeyword.value = '';
initOptions();
}
}
);
watch(
() => filterKeyword.value,
() => {
if (filterKeyword.value === '') {
filterListOptions.value = [...originFilterList.value];
}
searchItem();
}
);
onBeforeUnmount(() => {
checkedList.value = [];
});
</script>
<style scoped lang="less">

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

@ -33,7 +33,6 @@ export interface MsTableColumnFilterConfig {
emptyFilter?: boolean; // 是否空选项查询（包含未执行和排队中无状态）
remoteMethod?: FilterRemoteMethodsEnum; // 加载选项的类型
loadOptionParams?: Record<string, any>; // 请求下拉的参数
placeholderText?: string;
firstLabelKey?: string;
secondLabelKey?: string;
disabledTooltip?: boolean;

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

@ -76,7 +76,14 @@ export default function useTableStore() {
const { columnBackup: oldColumn, pageSize } = tableColumnsMap;
// 比较页面上定义的 column 和 浏览器备份的column 是否相同
const isEqual = isArraysEqualWithOrder(oldColumn, column);
if (!isEqual) {
column.forEach((col) => {
const storedCol = oldColumn.find((sc) => sc.dataIndex === col.dataIndex);
if (storedCol) {
col.width = storedCol.width; // 使用上一次拖拽存储的宽度，避免组件里边使用时候初始化到最初的列宽
}
});
// 如果不相等，说明有变动将新的column存入indexDB
setItem(
tableKey,
@ -274,6 +281,31 @@ export default function useTableStore() {
}
}
async function updateColumnWidth(tableKey: TableKeyEnum, column: MsTableColumn) {
try {
// 从 IndexedDB 获取当前存储的列配置
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (tableColumnsMap) {
// 存储更新后的列配置到 IndexedDB
await setItem(
tableKey,
{
...tableColumnsMap,
column,
},
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
}
} catch (error) {
// eslint-disable-next-line no-console
console.error('Error updating column width:', error);
}
}
return {
initColumn,
setMode,
@ -286,5 +318,6 @@ export default function useTableStore() {
getShowInTableColumns,
getPageSize,
getStoreColumns,
updateColumnWidth,
};
}

1
frontend/src/views/api-test/management/components/management/api/apiTable.vue
View File

@ -512,7 +512,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
showInTable: true,
width: 200,

1
frontend/src/views/api-test/management/components/management/api/shareListDrawer.vue
View File

@ -161,7 +161,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('common.pleaseSelect'),
},
},
{

1
frontend/src/views/api-test/management/components/management/case/caseTable.vue
View File

@ -548,7 +548,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
showInTable: true,
width: 180,

1
frontend/src/views/api-test/management/components/recycle/case/caseTable.vue
View File

@ -317,7 +317,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
},
{

1
frontend/src/views/api-test/report/component/reportList.vue
View File

@ -185,7 +185,6 @@
sortDirections: ['ascend', 'descend'],
sorter: true,
},
ellipsis: true,
showDrag: false,
columnSelectorDisabled: true,
},

1
frontend/src/views/api-test/scenario/components/common/importApiDrawer/table.vue
View File

@ -295,7 +295,6 @@
},
fixed: 'left',
width: 130,
ellipsis: true,
showTooltip: true,
},
{

2
frontend/src/views/api-test/scenario/components/scenarioTable.vue
View File

@ -789,7 +789,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
},
{
@ -804,7 +803,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
},
{

2
frontend/src/views/api-test/scenario/recycle/recycleTable.vue
View File

@ -250,6 +250,7 @@
dataIndex: 'modulePath',
width: 176,
showDrag: true,
showTooltip: true,
},
{
title: 'apiScenario.table.columns.createTime',
@ -297,7 +298,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
},
{

4
frontend/src/views/bug-management/components/bugCaseTab.vue
View File

@ -145,7 +145,6 @@
width: 200,
showInTable: true,
showTooltip: true,
ellipsis: true,
showDrag: false,
},
{
@ -154,7 +153,6 @@
showInTable: true,
showTooltip: true,
width: 300,
ellipsis: true,
showDrag: false,
},
{
@ -164,7 +162,6 @@
showInTable: true,
showTooltip: true,
width: 300,
ellipsis: true,
showDrag: false,
},
{
@ -173,7 +170,6 @@
showInTable: true,
showTooltip: true,
width: 300,
ellipsis: true,
showDrag: false,
},
{

3
frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
View File

@ -591,7 +591,6 @@
sortDirections: ['ascend', 'descend'],
sorter: true,
},
ellipsis: true,
showDrag: false,
columnSelectorDisabled: true,
},
@ -685,7 +684,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
showInTable: true,
width: 200,
@ -713,7 +711,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
showInTable: true,
showTooltip: true,

4
frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
View File

@ -280,7 +280,6 @@
sortDirections: ['ascend', 'descend'],
sorter: true,
},
ellipsis: true,
showDrag: false,
columnSelectorDisabled: true,
},
@ -356,7 +355,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
showInTable: true,
showTooltip: true,
@ -386,7 +384,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
showInTable: true,
width: 200,
@ -413,7 +410,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
showInTable: true,
showTooltip: true,

1
frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/tabDefect.vue
View File

@ -236,7 +236,6 @@
width: 100,
showInTable: true,
showTooltip: true,
ellipsis: true,
showDrag: false,
},
{

3
frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabCase/tabCaseTable.vue
View File

@ -128,7 +128,6 @@
width: 200,
showInTable: true,
showTooltip: true,
ellipsis: true,
},
{
title: 'caseManagement.featureCase.tableColumnName',
@ -153,7 +152,6 @@
// showInTable: true,
// showTooltip: true,
// width: 300,
// ellipsis: true,
// },
{
title: 'caseManagement.featureCase.changeType',
@ -162,7 +160,6 @@
showInTable: true,
showTooltip: true,
width: 300,
ellipsis: true,
},
{
title: 'caseManagement.featureCase.tableColumnActions',

2
frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/thirdDemandDrawer.vue
View File

@ -99,14 +99,12 @@
// width: 300,
// dataIndex: 'status',
// showTooltip: true,
// ellipsis: true,
// },
// {
// title: 'caseManagement.featureCase.platformDemandHandler',
// width: 300,
// dataIndex: 'handler',
// showTooltip: true,
// ellipsis: true,
// },
];

4
frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/tabDependency.vue
View File

@ -116,7 +116,6 @@
width: 200,
showInTable: true,
showTooltip: true,
ellipsis: true,
},
{
title: 'caseManagement.featureCase.tableColumnName',
@ -125,7 +124,6 @@
showInTable: true,
showTooltip: true,
width: 300,
ellipsis: true,
},
// {
// title: 'caseManagement.featureCase.tableColumnVersion',
@ -134,7 +132,6 @@
// showInTable: true,
// showTooltip: true,
// width: 300,
// ellipsis: true,
// },
{
title: 'caseManagement.featureCase.tableColumnCreateUser',
@ -143,7 +140,6 @@
showInTable: true,
showTooltip: true,
width: 300,
ellipsis: true,
},
{
title: 'caseManagement.featureCase.tableColumnActions',

1
frontend/src/views/case-management/caseReview/components/detail/caseTable.vue
View File

@ -526,7 +526,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
},
{

1
frontend/src/views/case-management/caseReview/components/index/reviewTable.vue
View File

@ -443,7 +443,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.PROJECT_PERMISSION_MEMBER,
placeholderText: t('caseManagement.caseReview.reviewerPlaceholder'),
},
showDrag: true,
width: 150,

2
frontend/src/views/project-management/environmental/components/envParams/DatabaseTab.vue
View File

@ -97,7 +97,6 @@
showDrag: true,
showInTable: true,
showTooltip: true,
ellipsis: true,
},
{
title: 'URL',
@ -105,7 +104,6 @@
showDrag: true,
showInTable: true,
showTooltip: true,
ellipsis: true,
},
{
title: 'project.environmental.database.username',

1
frontend/src/views/setting/system/resourcePool/index.vue
View File

@ -167,7 +167,6 @@
return {
mode: 'remote',
remoteMethod: FilterRemoteMethodsEnum.SYSTEM_ORGANIZATION_LIST,
placeholderText: t('common.pleaseSelect'),
};
}
return {

2
frontend/src/views/test-plan/report/detail/exportPDF.vue
View File

@ -449,7 +449,6 @@
title: 'ID',
dataIndex: 'num',
width: 80,
ellipsis: true,
},
{
title: 'case.caseName',
@ -466,7 +465,6 @@
{
title: 'common.belongModule',
dataIndex: 'moduleName',
ellipsis: true,
width: 200,
},
{

1
frontend/src/views/test-plan/testPlan/detail/apiCase/components/caseTable.vue
View File

@ -385,7 +385,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.EXECUTE_USER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
},
{

1
frontend/src/views/test-plan/testPlan/detail/apiScenario/components/scenarioTable.vue
View File

@ -364,7 +364,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.EXECUTE_USER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
},
{

4
frontend/src/views/test-plan/testPlan/detail/bugManagement/index.vue
View File

@ -108,7 +108,6 @@
dataIndex: 'title',
showInTable: true,
width: 300,
ellipsis: true,
showDrag: false,
},
{
@ -120,7 +119,6 @@
},
showInTable: true,
width: 150,
ellipsis: true,
showDrag: false,
},
{
@ -129,7 +127,6 @@
dataIndex: 'linkCase',
showInTable: true,
width: 150,
ellipsis: true,
},
{
title: 'caseManagement.featureCase.updateUser',
@ -139,7 +136,6 @@
showInTable: true,
showTooltip: true,
width: 300,
ellipsis: true,
},
{
title: 'common.createTime',

1
frontend/src/views/test-plan/testPlan/detail/featureCase/components/caseTable.vue
View File

@ -436,7 +436,6 @@
projectId: appStore.currentProjectId,
},
remoteMethod: FilterRemoteMethodsEnum.EXECUTE_USER,
placeholderText: t('caseManagement.featureCase.PleaseSelect'),
},
},
{

4
frontend/src/views/test-plan/testPlan/detail/featureCase/detail/bug/index.vue
View File

@ -135,7 +135,6 @@
showInTable: true,
showTooltip: false,
width: 300,
ellipsis: true,
showDrag: false,
},
{
@ -148,7 +147,6 @@
},
showInTable: true,
width: 150,
ellipsis: true,
showDrag: false,
},
{
@ -158,7 +156,6 @@
showInTable: true,
showTooltip: true,
width: 200,
ellipsis: true,
},
{
title: 'caseManagement.featureCase.updateUser',
@ -170,7 +167,6 @@
},
showInTable: true,
width: 200,
ellipsis: true,
},
{
title: 'caseManagement.featureCase.tableColumnActions',

1
frontend/src/views/workbench/components/testCaseTable.vue
View File

@ -117,7 +117,6 @@
showTooltip: true,
fixed: 'left',
width: 180,
ellipsis: true,
},
{
title: 'caseManagement.featureCase.tableColumnLevel',