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

style(测试计划): 测试计划详情-视图优化-模块/测试点的切换放在左侧 

--story=1015918 --user=吕梦园
https://www.tapd.cn/55049933/prong/stories/view/1155049933001015918
This commit is contained in:
teukkk 2024-08-27 14:47:54 +08:00 committed by 刘瑞斌
parent 1bf05cd0c1
commit 5bc575bfbe
9 changed files with 102 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/views/test-plan/testPlan/detail/apiCase/components/caseTree.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="p-[16px]">
<div>
<a-input
v-model:model-value="moduleKeyword"
:placeholder="

47
frontend/src/views/test-plan/testPlan/detail/apiCase/index.vue
View File

@ -1,21 +1,27 @@
<template>
<MsSplitBox>
<template #first>
<CaseTree
ref="caseTreeRef"
:modules-count="modulesCount"
:selected-keys="selectedKeys"
:tree-type="props.treeType"
@folder-node-select="handleFolderNodeSelect"
@init="initModuleTree"
@change-protocol="handleProtocolChange"
/>
<div class="p-[16px]">
<a-radio-group v-model:model-value="treeType" size="medium" class="mb-[16px] w-full" type="button">
<a-radio value="COLLECTION">{{ t('ms.case.associate.testSet') }}</a-radio>
<a-radio value="MODULE">{{ t('common.module') }}</a-radio>
</a-radio-group>
<CaseTree
ref="caseTreeRef"
:modules-count="modulesCount"
:selected-keys="selectedKeys"
:tree-type="treeType"
@folder-node-select="handleFolderNodeSelect"
@init="initModuleTree"
@change-protocol="handleProtocolChange"
/>
</div>
</template>
<template #second>
<CaseTable
ref="caseTableRef"
:plan-id="planId"
:tree-type="props.treeType"
:tree-type="treeType"
:modules-count="modulesCount"
:module-name="moduleName"
:module-parent-id="moduleParentId"
@ -41,19 +47,20 @@
import CaseTree from './components/caseTree.vue';
import { getApiCaseModuleCount } from '@/api/modules/test-plan/testPlan';
import { useI18n } from '@/hooks/useI18n';
import { ModuleTreeNode } from '@/models/common';
import type { PlanDetailApiCaseQueryParams } from '@/models/testPlan/testPlan';
const props = defineProps<{
canEdit: boolean;
treeType: 'MODULE' | 'COLLECTION';
}>();
const emit = defineEmits<{
(e: 'refresh'): void;
}>();
const { t } = useI18n();
const route = useRoute();
const planId = ref(route.query.id as string);
@ -98,6 +105,7 @@
caseTreeRef.value?.initModules();
}
const treeType = ref<'MODULE' | 'COLLECTION'>('COLLECTION');
function getCaseTableList() {
nextTick(() => {
initModules();
@ -108,8 +116,17 @@
}
});
}
defineExpose({
getCaseTableList,
});
watch(
() => treeType.value,
() => {
getCaseTableList();
}
);
</script>
<style lang="less" scoped>
:deep(.arco-radio-button) {
flex: 1;
text-align: center;
}
</style>

2
frontend/src/views/test-plan/testPlan/detail/apiScenario/components/scenarioTree.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="p-[16px]">
<div>
<a-input
v-model:model-value="moduleKeyword"
:placeholder="

45
frontend/src/views/test-plan/testPlan/detail/apiScenario/index.vue
View File

@ -1,20 +1,26 @@
<template>
<MsSplitBox>
<template #first>
<CaseTree
ref="caseTreeRef"
:modules-count="modulesCount"
:selected-keys="selectedKeys"
:tree-type="props.treeType"
@folder-node-select="handleFolderNodeSelect"
@init="initModuleTree"
/>
<div class="p-[16px]">
<a-radio-group v-model:model-value="treeType" size="medium" class="mb-[16px] w-full" type="button">
<a-radio value="COLLECTION">{{ t('ms.case.associate.testSet') }}</a-radio>
<a-radio value="MODULE">{{ t('common.module') }}</a-radio>
</a-radio-group>
<CaseTree
ref="caseTreeRef"
:modules-count="modulesCount"
:selected-keys="selectedKeys"
:tree-type="treeType"
@folder-node-select="handleFolderNodeSelect"
@init="initModuleTree"
/>
</div>
</template>
<template #second>
<CaseTable
ref="caseTableRef"
:plan-id="planId"
:tree-type="props.treeType"
:tree-type="treeType"
:modules-count="modulesCount"
:module-name="moduleName"
:module-parent-id="moduleParentId"
@ -39,19 +45,20 @@
import CaseTree from './components/scenarioTree.vue';
import { getApiScenarioModuleCount } from '@/api/modules/test-plan/testPlan';
import { useI18n } from '@/hooks/useI18n';
import { ModuleTreeNode } from '@/models/common';
import type { PlanDetailApiScenarioQueryParams } from '@/models/testPlan/testPlan';
const props = defineProps<{
canEdit: boolean;
treeType: 'MODULE' | 'COLLECTION';
}>();
const emit = defineEmits<{
(e: 'refresh'): void;
}>();
const { t } = useI18n();
const route = useRoute();
const planId = ref(route.query.id as string);
@ -92,6 +99,7 @@
caseTreeRef.value?.initModules();
}
const treeType = ref<'MODULE' | 'COLLECTION'>('COLLECTION');
function getCaseTableList() {
nextTick(() => {
initModules();
@ -102,8 +110,17 @@
}
});
}
defineExpose({
getCaseTableList,
});
watch(
() => treeType.value,
() => {
getCaseTableList();
}
);
</script>
<style lang="less" scoped>
:deep(.arco-radio-button) {
flex: 1;
text-align: center;
}
</style>

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

@ -14,7 +14,7 @@
@adv-search="loadCaseList()"
@refresh="handleRefreshAll"
>
<template v-if="props.treeType === 'MODULE'" #right>
<template #right>
<a-radio-group
v-model:model-value="showType"
type="button"
@ -263,6 +263,7 @@
const emit = defineEmits<{
(e: 'refresh'): void;
(e: 'setTreeTypeToModule'): void; // TODO lmy v3.4版本删除此代码
(e: 'selectParentNode', tree: ModuleTreeNode[]): void;
}>();
@ -549,6 +550,7 @@
}
);
// TODO lmy v3.4版本删除此代码
watch(
() => props.treeType,
(val) => {
@ -628,18 +630,14 @@
refresh();
}
function handleTreeTypeChange() {
if (showType.value !== 'list') {
showType.value = 'list';
}
loadCaseList(true);
}
function handleShowTypeChange(val: string | number | boolean) {
if (val === 'minder') {
keyword.value = '';
// 切换到脑图刷新模块统计
getModuleCount();
if (props.treeType === 'COLLECTION') {
emit('setTreeTypeToModule'); // TODO lmy v3.4版本删除此代码
return;
}
getModuleCount(); // 切换到脑图刷新模块统计
} else {
loadCaseList();
}
@ -907,7 +905,7 @@
defineExpose({
resetSelector,
handleTreeTypeChange,
refresh,
});
await tableStore.initColumn(TableKeyEnum.TEST_PLAN_DETAIL_FEATURE_CASE_TABLE, columns.value, 'drawer', true);

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

@ -2,9 +2,13 @@
<MsSplitBox>
<template #first>
<div class="p-[16px]">
<a-radio-group v-model:model-value="treeType" size="medium" class="mb-[16px] w-full" type="button">
<a-radio value="COLLECTION">{{ t('ms.case.associate.testSet') }}</a-radio>
<a-radio value="MODULE">{{ t('common.module') }}</a-radio>
</a-radio-group>
<CaseTree
ref="caseTreeRef"
:tree-type="props.treeType"
:tree-type="treeType"
:modules-count="modulesCount"
:selected-keys="selectedKeys"
@folder-node-select="handleFolderNodeSelect"
@ -14,7 +18,7 @@
<template #second>
<CaseTable
ref="caseTableRef"
:tree-type="props.treeType"
:tree-type="treeType"
:plan-id="planId"
:modules-count="modulesCount"
:module-name="moduleName"
@ -24,6 +28,7 @@
:can-edit="props.canEdit"
@select-parent-node="selectParentNode"
@refresh="emit('refresh')"
@set-tree-type-to-module="setTreeTypeToModule"
></CaseTable>
</template>
</MsSplitBox>
@ -37,19 +42,20 @@
import CaseTable from './components/caseTable.vue';
import CaseTree from './components/caseTree.vue';
import { useI18n } from '@/hooks/useI18n';
import useTestPlanFeatureCaseStore from '@/store/modules/testPlan/testPlanFeatureCase';
import { ModuleTreeNode } from '@/models/common';
const props = defineProps<{
canEdit: boolean;
treeType: 'MODULE' | 'COLLECTION';
}>();
const emit = defineEmits<{
(e: 'refresh'): void;
}>();
const { t } = useI18n();
const route = useRoute();
const testPlanFeatureCaseStore = useTestPlanFeatureCaseStore();
@ -79,18 +85,31 @@
caseTreeRef.value?.selectParentNode(folderTree);
}
const treeType = ref<'MODULE' | 'COLLECTION'>('COLLECTION');
function setTreeTypeToModule() {
treeType.value = 'MODULE'; // TODO lmy v3.4版本删除此代码
}
function getCaseTableList() {
nextTick(async () => {
await caseTreeRef.value?.initModules();
if (activeFolderId.value !== 'all') {
caseTreeRef.value?.setActiveFolder('all');
} else {
caseTableRef.value?.handleTreeTypeChange();
caseTableRef.value?.refresh();
}
});
}
defineExpose({
getCaseTableList,
});
watch(
() => treeType.value,
() => {
getCaseTableList();
}
);
</script>
<style lang="less" scoped>
:deep(.arco-radio-button) {
flex: 1;
text-align: center;
}
</style>

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

@ -19,16 +19,6 @@
</a-tooltip>
</template>
<template #headerRight>
<a-switch
v-model="treeType"
size="small"
type="line"
checked-value="MODULE"
unchecked-value="COLLECTION"
class="mr-[4px]"
@change="loadActiveTabList"
/>
<span class="mr-[14px]">{{ t('testPlan.testPlanDetail.moduleView') }}</span>
<MsButton v-if="isEnableEdit" type="button" status="default" @click="editorCopyHandler(false)">
<MsIcon type="icon-icon_edit_outlined" class="mr-[8px]" />
{{ t('common.edit') }}
@ -117,8 +107,6 @@
/>
<FeatureCase
v-else-if="activeTab === 'featureCase'"
ref="featureCaseRef"
:tree-type="treeType"
:can-edit="countDetail.status !== 'ARCHIVED'"
@refresh="initDetail"
/>
@ -127,17 +115,9 @@
:can-edit="countDetail.status !== 'ARCHIVED'"
@refresh="initDetail"
/>
<ApiCase
v-else-if="activeTab === 'apiCase'"
ref="apiCaseRef"
:tree-type="treeType"
:can-edit="countDetail.status !== 'ARCHIVED'"
@refresh="initDetail"
/>
<ApiCase v-else-if="activeTab === 'apiCase'" :can-edit="countDetail.status !== 'ARCHIVED'" @refresh="initDetail" />
<ApiScenario
v-else-if="activeTab === 'apiScenario'"
ref="apiScenarioRef"
:tree-type="treeType"
:can-edit="countDetail.status !== 'ARCHIVED'"
@refresh="initDetail"
/>
@ -217,7 +197,6 @@
const detail = ref<TestPlanDetail>({
...testPlanDefaultDetail,
});
const treeType = ref<'MODULE' | 'COLLECTION'>('COLLECTION');
const countDetail = ref<PassRateCountDetail>({ ...defaultDetailCount });
@ -531,25 +510,6 @@
}
}
const featureCaseRef = ref<InstanceType<typeof FeatureCase>>();
const apiCaseRef = ref<InstanceType<typeof ApiCase>>();
const apiScenarioRef = ref<InstanceType<typeof ApiScenario>>();
function loadActiveTabList() {
switch (activeTab.value) {
case 'featureCase':
featureCaseRef.value?.getCaseTableList();
return;
case 'apiCase':
apiCaseRef.value?.getCaseTableList();
return;
case 'apiScenario':
apiScenarioRef.value?.getCaseTableList();
return;
default:
return '';
}
}
function changeTabInterceptor(newVal: string | number, oldVal: string | number, done: () => void) {
if (oldVal === 'plan' && minderStore.minderUnsaved) {
openModal({

1
frontend/src/views/test-plan/testPlan/locale/en-US.ts
View File

@ -96,7 +96,6 @@ export default {
'testPlan.planForm.pickCases': 'Select cases',
'testPlan.testPlanDetail.executed': 'Executed',
'testPlan.testPlanDetail.generateReport': 'Generate report',
'testPlan.testPlanDetail.moduleView': 'Module View',
'testPlan.testPlanDetail.successfullyGenerated': 'Successfully generated',
'testPlan.bugManagement.bug': 'Defect list',
'testPlan.bugManagement.bugName': 'name',

1
frontend/src/views/test-plan/testPlan/locale/zh-CN.ts
View File

@ -92,7 +92,6 @@ export default {
'testPlan.planForm.pickCases': '选择用例',
'testPlan.testPlanDetail.executed': '已执行',
'testPlan.testPlanDetail.generateReport': '生成报告',
'testPlan.testPlanDetail.moduleView': '模块视图',
'testPlan.testPlanDetail.successfullyGenerated': '生成成功',
'testPlan.bugManagement.bug': '缺陷列表',
'testPlan.bugManagement.bugName': '名称',