diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue index 8a1ffc36fa..679cb6b202 100644 --- a/frontend/src/components/pure/ms-table/base-table.vue +++ b/frontend/src/components/pure/ms-table/base-table.vue @@ -106,7 +106,7 @@ :options="item.filterConfig.options" :data-index="item.dataIndex" v-bind="item.filterConfig" - :filter="filter" + :filter="filterData" @handle-confirm="(v) => handleFilterConfirm(v, item.dataIndex as string, item.isCustomParam || false)" > @@ -356,8 +356,10 @@ value: string[] | (string | number)[] | undefined, isCustomParam: boolean ): void; + (e: 'resetFilter', filterValue: Record): void; (e: 'moduleChange'): void; (e: 'initEnd'): void; + (e: 'reset'): void; }>(); const attrs = useAttrs(); @@ -637,13 +639,11 @@ columnSelectorVisible.value = true; }; - const filter = ref>({}); const handleFilterConfirm = ( value: string[] | (string | number)[] | undefined, dataIndex: string, isCustomParam: boolean ) => { - filter.value[dataIndex] = value; emit('filterChange', dataIndex, value, isCustomParam); }; @@ -652,9 +652,13 @@ batchLeft.value = getBatchLeft(); }); + const filterData = computed(() => { + return (attrs.filter || {}) as Record; + }); + function hasSelectedFilter(item: MsTableColumnData) { if (item.filterConfig && item.dataIndex) { - return (filter.value[item.dataIndex] || []).length > 0; + return (filterData.value[item.dataIndex] || []).length > 0; } return false; } diff --git a/frontend/src/components/pure/ms-table/comp/defaultFilter.vue b/frontend/src/components/pure/ms-table/comp/defaultFilter.vue index f07c1bf97e..1c2e0e639e 100644 --- a/frontend/src/components/pure/ms-table/comp/defaultFilter.vue +++ b/frontend/src/components/pure/ms-table/comp/defaultFilter.vue @@ -124,9 +124,6 @@ const loading = ref(true); const optionLabelRender = (option: SelectOptionData) => { - if (option.email !== '') { - return `${option.name}(${option.email})`; - } return `${option.name}`; }; @@ -159,6 +156,25 @@ } return false; }); + + const isNoFilter = computed(() => { + if (props.filter && JSON.stringify(props.filter) !== '{}') { + return !Object.keys(props.filter).some((key: any) => { + return props.filter[key].length > 0; + }); + } + return true; + }); + + // 用于切换的时候重置清空上一次的选择 + watch( + () => isNoFilter.value, + (val) => { + if (val) { + checkedList.value = []; + } + } + ); diff --git a/frontend/src/views/project-management/taskCenter/component/executionStatus.vue b/frontend/src/views/project-management/taskCenter/component/executionStatus.vue index ad373f1209..85aa00f17e 100644 --- a/frontend/src/views/project-management/taskCenter/component/executionStatus.vue +++ b/frontend/src/views/project-management/taskCenter/component/executionStatus.vue @@ -22,10 +22,9 @@ import { useI18n } from '@/hooks/useI18n'; + import type { ResourceTypeMapKey } from '@/enums/taskCenter'; import { TaskCenterEnum } from '@/enums/taskCenter'; - import type { ResourceTypeMapKey } from './utils'; - const { t } = useI18n(); const props = defineProps<{ status: string; diff --git a/frontend/src/views/project-management/taskCenter/component/scheduledTask.vue b/frontend/src/views/project-management/taskCenter/component/scheduledTask.vue index 7e1728d9e0..7793bfbd9e 100644 --- a/frontend/src/views/project-management/taskCenter/component/scheduledTask.vue +++ b/frontend/src/views/project-management/taskCenter/component/scheduledTask.vue @@ -54,6 +54,16 @@ {{ t(resourceTypeMap[record.resourceType as ResourceTypeMapKey].label) }} + + + {{ characterLimit(record.projectName) }} + + + + + {{ characterLimit(record.organizationName) }} + + - - - - - - - - = { + const tableKeyMap: Record = { system: { - API_IMPORT: { - key: TableKeyEnum.TASK_SCHEDULE_TASK_API_IMPORT_SYSTEM, - columns: [ - ...ordAndProjectColumn, - ...columns.slice(0, 2), - ...swaggerUrlColumn, - ...columns.slice(2, columns.length), - ], - }, - API_SCENARIO: { - key: TableKeyEnum.TASK_SCHEDULE_TASK_API_SCENARIO_SYSTEM, - columns: [...ordAndProjectColumn, ...columns], - }, + API_IMPORT: TableKeyEnum.TASK_SCHEDULE_TASK_API_IMPORT_SYSTEM, + API_SCENARIO: TableKeyEnum.TASK_SCHEDULE_TASK_API_SCENARIO_SYSTEM, }, organization: { - API_IMPORT: { - key: TableKeyEnum.TASK_SCHEDULE_TASK_API_IMPORT_ORGANIZATION, - columns: [ - ...ordAndProjectColumn.slice(-1), - ...columns.slice(0, 2), - ...swaggerUrlColumn, - ...columns.slice(2, columns.length), - ], - }, - API_SCENARIO: { - key: TableKeyEnum.TASK_SCHEDULE_TASK_API_SCENARIO_ORGANIZATION, - columns: [...ordAndProjectColumn.slice(-1), ...columns], - }, + API_IMPORT: TableKeyEnum.TASK_SCHEDULE_TASK_API_IMPORT_ORGANIZATION, + API_SCENARIO: TableKeyEnum.TASK_SCHEDULE_TASK_API_SCENARIO_ORGANIZATION, }, project: { - API_IMPORT: { - key: TableKeyEnum.TASK_SCHEDULE_TASK_API_IMPORT_PROJECT, - columns: [...columns.slice(0, 2), ...swaggerUrlColumn, ...columns.slice(2, columns.length)], - }, - API_SCENARIO: { - key: TableKeyEnum.TASK_SCHEDULE_TASK_API_SCENARIO_PROJECT, - columns, - }, + API_IMPORT: TableKeyEnum.TASK_SCHEDULE_TASK_API_IMPORT_PROJECT, + API_SCENARIO: TableKeyEnum.TASK_SCHEDULE_TASK_API_SCENARIO_PROJECT, + }, + }; + + const groupColumnsMap: Record = { + system: { + API_IMPORT: [ + getOrgColumns(), + getProjectColumns(tableKeyMap[props.group][props.moduleType]), + ...resourceColumns, + ...swaggerUrlColumn, + ...staticColumns, + ], + + API_SCENARIO: [ + getOrgColumns(), + getProjectColumns(tableKeyMap[props.group][props.moduleType]), + ...resourceColumns, + ...staticColumns, + ], + }, + organization: { + API_IMPORT: [ + getProjectColumns(tableKeyMap[props.group][props.moduleType]), + ...resourceColumns, + ...swaggerUrlColumn, + ...staticColumns, + ], + API_SCENARIO: [ + getProjectColumns(tableKeyMap[props.group][props.moduleType]), + ...resourceColumns, + ...staticColumns, + ], + }, + project: { + API_IMPORT: [...resourceColumns, ...swaggerUrlColumn, ...staticColumns], + API_SCENARIO: [...resourceColumns, ...staticColumns], }, }; - const orgFilterVisible = ref(false); - const projectFilterVisible = ref(false); const orgApiCaseFilter = ref([]); const orgApiScenarioFilter = ref([]); @@ -413,13 +387,10 @@ const hasJumpPermission = computed(() => hasAnyPermission(permissionsMap[props.group][props.moduleType].jump)); - const licenseStore = useLicenseStore(); - const xPack = computed(() => licenseStore.hasLicense()); - - const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable( + const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector, resetFilterParams } = useTable( loadRealMap.value[props.group].list, { - tableKey: groupColumnsMap[props.group][props.moduleType].key, + tableKey: tableKeyMap[props.group][props.moduleType], scroll: { x: 1200, }, @@ -440,10 +411,6 @@ setLoadListParams({ keyword: keyword.value, scheduleTagType: props.moduleType, - filter: { - organizationIds: orgFiltersMap.value[props.moduleType], - projectIds: projectFiltersMap.value[props.moduleType], - }, }); loadList(); } @@ -570,10 +537,7 @@ excludeIds, condition: { keyword: keyword.value, - filter: { - organizationIds: orgFiltersMap.value[props.moduleType], - projectIds: projectFiltersMap.value[props.moduleType], - }, + filter: propsRes.value.filter, }, }); resetSelector(); @@ -649,8 +613,8 @@ ); await tableStore.initColumn( - groupColumnsMap[props.group][props.moduleType].key, - groupColumnsMap[props.group][props.moduleType].columns, + tableKeyMap[props.group][props.moduleType], + groupColumnsMap[props.group][props.moduleType], 'drawer', true ); @@ -660,7 +624,8 @@ () => props.moduleType, (val) => { if (val) { - tableRef.value.initColumn(groupColumnsMap[props.group][props.moduleType].columns); + resetFilterParams(); + tableRef.value.initColumn(groupColumnsMap[props.group][props.moduleType]); } } ); diff --git a/frontend/src/views/project-management/taskCenter/component/taskCom.vue b/frontend/src/views/project-management/taskCenter/component/taskCom.vue index a79846406d..99e238fb53 100644 --- a/frontend/src/views/project-management/taskCenter/component/taskCom.vue +++ b/frontend/src/views/project-management/taskCenter/component/taskCom.vue @@ -28,9 +28,10 @@ import { useI18n } from '@/hooks/useI18n'; + import type { ResourceTypeMapKey } from '@/enums/taskCenter'; import { TaskCenterEnum } from '@/enums/taskCenter'; - import type { ResourceTypeMapKey } from './utils'; + import type { ExtractedKeys } from './utils'; const { t } = useI18n(); @@ -77,7 +78,7 @@ ]); const activeTask = ref(route.query.tab || 'real'); - const activeTab = ref((route.query.type as ResourceTypeMapKey) || TaskCenterEnum.API_CASE); + const activeTab = ref((route.query.type as ExtractedKeys) || TaskCenterEnum.API_CASE); const rightTabList = computed(() => { return activeTask.value === 'real' ? realTabList.value : timingTabList.value; diff --git a/frontend/src/views/project-management/taskCenter/component/utils.ts b/frontend/src/views/project-management/taskCenter/component/utils.ts index 4bc672821b..3a4f87ef24 100644 --- a/frontend/src/views/project-management/taskCenter/component/utils.ts +++ b/frontend/src/views/project-management/taskCenter/component/utils.ts @@ -1,148 +1,159 @@ -import type { MsTableColumn } from '@/components/pure/ms-table/type'; +import type { MsTableColumnData } from '@/components/pure/ms-table/type'; +import { useI18n } from '@/hooks/useI18n'; +import { useAppStore } from '@/store'; +import useLicenseStore from '@/store/modules/setting/license'; +import { hasAnyPermission } from '@/utils/permission'; + +import { TableKeyEnum } from '@/enums/tableEnum'; +import { FilterRemoteMethodsEnum } from '@/enums/tableFilterEnum'; +import type { ResourceTypeMapKey } from '@/enums/taskCenter'; import { TaskCenterEnum } from '@/enums/taskCenter'; -export const TaskStatus = { +const appStore = useAppStore(); +const licenseStore = useLicenseStore(); +const { t } = useI18n(); +export const TaskStatus: Record> = { [TaskCenterEnum.API_CASE]: { SUCCESS: { icon: 'icon-icon_succeed_colorful', - label: 'project.taskCenter.successful', + label: t('project.taskCenter.successful'), }, ERROR: { icon: 'icon-icon_close_colorful', - label: 'project.taskCenter.failure', + label: t('project.taskCenter.failure'), }, FAKE_ERROR: { icon: 'icon-icon_warning_colorful', - label: 'project.taskCenter.falseAlarm', + label: t('project.taskCenter.falseAlarm'), }, STOPPED: { icon: 'icon-icon_block_filled', - label: 'project.taskCenter.stop', + label: t('project.taskCenter.stop'), color: '!var(--color-text-input-border)', }, RUNNING: { icon: 'icon-icon_testing', - label: 'project.taskCenter.inExecution', + label: t('project.taskCenter.inExecution'), color: '!text-[rgb(var(--link-6))]', }, // RERUNNING: { // icon: 'icon-icon_testing', - // label: 'project.taskCenter.rerun', + // label: t('project.taskCenter.rerun', // color: '!text-[rgb(var(--link-6))]', // }, PENDING: { icon: 'icon-icon_wait', - label: 'project.taskCenter.queuing', + label: t('project.taskCenter.queuing'), color: '!text-[rgb(var(--link-6))]', }, }, [TaskCenterEnum.API_SCENARIO]: { SUCCESS: { icon: 'icon-icon_succeed_colorful', - label: 'project.taskCenter.successful', + label: t('project.taskCenter.successful'), }, ERROR: { icon: 'icon-icon_close_colorful', - label: 'project.taskCenter.failure', + label: t('project.taskCenter.failure'), }, FAKE_ERROR: { icon: 'icon-icon_warning_colorful', - label: 'project.taskCenter.falseAlarm', + label: t('project.taskCenter.falseAlarm'), }, STOPPED: { icon: 'icon-icon_block_filled', - label: 'project.taskCenter.stop', + label: t('project.taskCenter.stop'), color: 'var(--color-text-input-border)', }, RUNNING: { icon: 'icon-icon_testing', - label: 'project.taskCenter.inExecution', + label: t('project.taskCenter.inExecution'), color: '!text-[rgb(var(--link-6))]', }, // RERUNNING: { // icon: 'icon-icon_testing', - // label: 'project.taskCenter.rerun', + // label: t('project.taskCenter.rerun', // color: '!text-[rgb(var(--link-6))]', // }, PENDING: { icon: 'icon-icon_wait', - label: 'project.taskCenter.queuing', + label: t('project.taskCenter.queuing'), color: '!text-[rgb(var(--link-6))]', }, }, [TaskCenterEnum.LOAD_TEST]: { STARTING: { icon: 'icon-icon_restarting', - label: 'project.taskCenter.starting', + label: t('project.taskCenter.starting'), color: '!text-[rgb(var(--link-6))]', }, RUNNING: { icon: 'icon-icon_testing', - label: 'project.taskCenter.inExecution', + label: t('project.taskCenter.inExecution'), color: '!text-[rgb(var(--link-6))]', }, ERROR: { icon: 'icon-icon_close_colorful', - label: 'project.taskCenter.failure', + label: t('project.taskCenter.failure'), }, SUCCESS: { icon: 'icon-icon_succeed_colorful', - label: 'project.taskCenter.successful', + label: t('project.taskCenter.successful'), }, COMPLETED: { icon: 'icon-icon_succeed_colorful', - label: 'project.taskCenter.complete', + label: t('project.taskCenter.complete'), }, STOPPED: { icon: 'icon-icon_block_filled', - label: 'project.taskCenter.stop', + label: t('project.taskCenter.stop'), color: 'var(--color-text-input-border)', }, }, [TaskCenterEnum.UI_TEST]: { PENDING: { icon: 'icon-icon_wait', - label: 'project.taskCenter.queuing', + label: t('project.taskCenter.queuing'), color: '!text-[rgb(var(--link-6))]', }, RUNNING: { icon: 'icon-icon_testing', - label: 'project.taskCenter.inExecution', + label: t('project.taskCenter.inExecution'), color: '!text-[rgb(var(--link-6))]', }, // RERUNNING: { // icon: 'icon-icon_testing', - // label: 'project.taskCenter.rerun', + // label: t('project.taskCenter.rerun', // color: '!text-[rgb(var(--link-6))]', // }, ERROR: { icon: 'icon-icon_close_colorful', - label: 'project.taskCenter.failure', + label: t('project.taskCenter.failure'), }, SUCCESS: { icon: 'icon-icon_succeed_colorful', - label: 'project.taskCenter.successful', + label: t('project.taskCenter.successful'), }, STOPPED: { icon: 'icon-icon_block_filled', - label: 'project.taskCenter.stop', + label: t('project.taskCenter.stop'), color: 'var(--color-text-input-border)', }, }, [TaskCenterEnum.TEST_PLAN]: { RUNNING: { icon: 'icon-icon_testing', - label: 'project.taskCenter.queuing', + label: t('project.taskCenter.queuing'), color: '!text-[rgb(var(--link-6))]', }, SUCCESS: { icon: 'icon-icon_succeed_colorful', - label: 'project.taskCenter.successful', + label: t('project.taskCenter.successful'), }, STARTING: { icon: 'icon-icon_restarting', - label: 'project.taskCenter.starting', + label: t('project.taskCenter.starting'), color: '!text-[rgb(var(--link-6))]', }, }, @@ -150,57 +161,82 @@ export const TaskStatus = { export type Group = 'system' | 'organization' | 'project'; -export type ResourceTypeMapKey = - | TaskCenterEnum.API_CASE - | TaskCenterEnum.API_SCENARIO - | TaskCenterEnum.UI_TEST - | TaskCenterEnum.LOAD_TEST - | TaskCenterEnum.TEST_PLAN; +export type ExtractedKeys = Extract; export const resourceTypeMap: Record> = { [TaskCenterEnum.API_CASE]: { value: TaskCenterEnum.API_CASE, - label: 'project.taskCenter.interfaceCase', + label: t('project.taskCenter.interfaceCase'), }, [TaskCenterEnum.API_SCENARIO]: { value: TaskCenterEnum.API_SCENARIO, - label: 'project.taskCenter.apiScenario', + label: t('project.taskCenter.apiScenario'), }, [TaskCenterEnum.UI_TEST]: { value: TaskCenterEnum.UI_TEST, - label: 'project.taskCenter.uiDefaultFile', + label: t('project.taskCenter.uiDefaultFile'), }, [TaskCenterEnum.LOAD_TEST]: { value: TaskCenterEnum.LOAD_TEST, - label: 'project.taskCenter.performanceTest', + label: t('project.taskCenter.performanceTest'), }, [TaskCenterEnum.TEST_PLAN]: { value: TaskCenterEnum.TEST_PLAN, - label: 'project.taskCenter.testPlan', + label: t('project.taskCenter.testPlan'), }, }; -export const ordAndProjectColumn: MsTableColumn = [ - { +export function getOrgColumns(): MsTableColumnData { + const config: MsTableColumnData = { title: 'project.belongOrganization', - dataIndex: 'organizationName', + dataIndex: 'organizationIds', slotName: 'organizationName', - titleSlotName: 'orgFilterName', - showTooltip: true, showDrag: true, width: 200, showInTable: true, - }, - { + }; + if (licenseStore.hasLicense()) { + config.filterConfig = { + mode: 'remote', + remoteMethod: FilterRemoteMethodsEnum.SYSTEM_ORGANIZATION_LIST, + placeholderText: t('project.taskCenter.filterOrgPlaceholderText'), + }; + } + return config; +} + +export function getProjectColumns(key: TableKeyEnum): MsTableColumnData { + const systemKey = [ + TableKeyEnum.TASK_API_CASE_SYSTEM, + TableKeyEnum.TASK_SCHEDULE_TASK_API_IMPORT_SYSTEM, + TableKeyEnum.TASK_SCHEDULE_TASK_API_SCENARIO_SYSTEM, + ]; + const filterKeyPermission = systemKey.includes(key) + ? hasAnyPermission(['SYSTEM_ORGANIZATION_PROJECT:READ']) + : hasAnyPermission(['ORGANIZATION_PROJECT:READ']); + const remoteMethod = systemKey.includes(key) + ? FilterRemoteMethodsEnum.SYSTEM_PROJECT_LIST + : FilterRemoteMethodsEnum.SYSTEM_ORGANIZATION_PROJECT; + + const config: MsTableColumnData = { title: 'project.belongProject', - dataIndex: 'projectName', + dataIndex: 'projectIds', slotName: 'projectName', - titleSlotName: 'projectFilterName', - showTooltip: true, showDrag: true, width: 200, showInTable: true, - }, -]; + }; + if (filterKeyPermission && remoteMethod) { + config.filterConfig = { + mode: 'remote', + loadOptionParams: { + organizationId: appStore.currentOrgId, + }, + remoteMethod, + placeholderText: t('project.taskCenter.filterProPlaceholderText'), + }; + } + return config; +} export default {};