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

refactor(测试计划): 测试计划详情-缺陷列表

This commit is contained in:
teukkk 2024-05-30 19:07:55 +08:00 committed by 刘瑞斌
parent 6653d5497d
commit 327476108f
8 changed files with 101 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/locale/zh-CN/common.ts
View File

@ -163,7 +163,8 @@ export default {
'common.text': '文本',
'common.resourceDeleted': '资源已被删除',
'common.refresh': '刷新',
'common.searchByNameAndId': '通过ID、名称或标签搜索',
'common.searchByIdName': '通过ID 或名称搜索',
'common.searchByIDNameTag': '通过ID、名称或标签搜索',
'common.archive': '归档',
'common.running': '执行中',
'common.unExecute': '未执行',

20
frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/bugList.vue
View File

@ -4,17 +4,15 @@
<span type="text" class="one-line-text cursor-pointer px-0 text-[rgb(var(--primary-5))]">{{ record.num }}</span>
</template>
<template #name="{ record }">
<div class="flex flex-nowrap items-center">
<a-tooltip :content="record.name">
<div class="one-line-text max-w-[200px] flex-auto items-center"> {{ characterLimit(record.name) }}</div>
</a-tooltip>
<a-popover class="bug-content-popover" title="" position="right" style="width: 480px">
<span class="ml-1 text-[rgb(var(--primary-5))]">{{ t('caseManagement.featureCase.preview') }}</span>
<template #content>
<div v-dompurify-html="record.content" class="markdown-body bug-content"> </div>
</template>
</a-popover>
</div>
<a-tooltip :content="record.name">
<div class="one-line-text max-w-[calc(100%-32px)]"> {{ record.name }}</div>
</a-tooltip>
<a-popover class="bug-content-popover" title="" position="right" style="width: 480px">
<span class="ml-1 text-[rgb(var(--primary-5))]">{{ t('caseManagement.featureCase.preview') }}</span>
<template #content>
<div v-dompurify-html="record.content" class="markdown-body bug-content"> </div>
</template>
</a-popover>
</template>
<template #statusName="{ record }">
<div class="one-line-text">{{ record.statusName || '-' }}</div>

2
frontend/src/views/test-plan/testPlan/components/planTable.vue
View File

@ -4,7 +4,7 @@
:filter-config-list="filterConfigList"
:custom-fields-config-list="searchCustomFields"
:row-count="filterRowCount"
:search-placeholder="t('common.searchByNameAndId')"
:search-placeholder="t('common.searchByIDNameTag')"
@keyword-search="fetchData"
@adv-search="fetchData"
@refresh="fetchData"

38
frontend/src/views/test-plan/testPlan/detail/bugManagement/caseCountPopover.vue
View File

@ -1,48 +1,52 @@
<template>
<a-popover position="bottom" content-class="case-count-popover" @popup-visible-change="popupChange">
<a-popover position="br" content-class="case-count-popover" @popup-visible-change="popupChange">
<div class="one-line-text cursor-pointer px-0 text-[rgb(var(--primary-5))]">{{
props.record.relateCase.length
props.bugItem.relateCase?.length ?? 0
}}</div>
<template #content>
<div class="w-[500px]">
<MsBaseTable v-bind="propsRes" v-on="propsEvent"></MsBaseTable>
<MsBaseTable v-bind="propsRes" v-on="propsEvent">
<template #num="{ record }">
<MsButton type="text" @click="goCaseDetail(record.id)">{{ record.num }}</MsButton>
</template>
</MsBaseTable>
</div>
</template>
</a-popover>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import MsButton from '@/components/pure/ms-button/index.vue';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import type { MsTableColumn } from '@/components/pure/ms-table/type';
import useTable from '@/components/pure/ms-table/useTable';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
import type { PlanDetailBugItem } from '@/models/testPlan/testPlan';
import { CaseManagementRouteEnum } from '@/enums/routeEnum';
import { TableKeyEnum } from '@/enums/tableEnum';
const { t } = useI18n();
const props = defineProps<{
record: PlanDetailBugItem;
bugItem: PlanDetailBugItem;
}>();
const router = useRouter();
const appStore = useAppStore();
const columns: MsTableColumn = [
{
title: 'caseManagement.featureCase.tableColumnID',
dataIndex: 'num',
slotName: 'num',
width: 100,
showInTable: true,
showTooltip: true,
showDrag: false,
},
{
title: 'case.caseName',
slotName: 'name',
dataIndex: 'name',
showInTable: true,
showTooltip: true,
width: 200,
},
@ -59,7 +63,15 @@
});
function popupChange() {
propsRes.value.data = props.record.relateCase;
propsRes.value.data = props.bugItem.relateCase;
}
function goCaseDetail(id: string) {
window.open(
`${window.location.origin}#${
router.resolve({ name: CaseManagementRouteEnum.CASE_MANAGEMENT_CASE }).fullPath
}?id=${id}&orgId=${appStore.currentOrgId}&pId=${appStore.currentProjectId}`
);
}
</script>

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

@ -1,15 +1,15 @@
<template>
<div class="p-[16px]">
<div class="flex items-center justify-between">
<div class="mb-[16px] flex items-center justify-between">
<div
>{{ t('testPlan.bugManagement.bug') }}
<span class="!text-[var(--color-text-n4)]">({{ addCommasToNumber(count) }})</span>
<span class="text-[var(--color-text-4)]">({{ addCommasToNumber(count) }})</span>
</div>
<a-input-search
v-model:model-value="keyword"
:placeholder="t('caseManagement.featureCase.searchByName')"
:placeholder="t('common.searchByIdName')"
allow-clear
class="mx-[8px] w-[240px]"
class="w-[240px]"
@search="getFetch"
@press-enter="getFetch"
@clear="getFetch"
@ -17,23 +17,21 @@
</div>
<MsBaseTable ref="tableRef" v-bind="propsRes" v-on="propsEvent">
<template #num="{ record }">
<a-tooltip :content="`${record.num}`">
<a-button type="text" class="px-0 !text-[14px] !leading-[22px]" size="mini">
<div class="one-line-text max-w-[168px]">{{ record.num }}</div>
</a-button>
</a-tooltip>
<MsButton type="text" @click="toDetail(record.id)">{{ record.num }}</MsButton>
</template>
<template #name="{ record }">
<span class="one-line-text max-w-[300px]"> {{ record.name }}</span>
<a-popover title="" position="right" style="width: 480px">
<a-tooltip :content="record.title">
<div class="one-line-text max-w-[calc(100%-32px)]"> {{ record.title }}</div>
</a-tooltip>
<a-popover class="bug-content-popover" title="" position="right" style="width: 480px">
<span class="ml-1 text-[rgb(var(--primary-5))]">{{ t('caseManagement.featureCase.preview') }}</span>
<template #content>
<div v-dompurify-html="record.content" class="markdown-body" style="margin-left: 48px"> </div>
<div v-dompurify-html="record.content" class="markdown-body bug-content"> </div>
</template>
</a-popover>
</template>
<template #linkCase="{ record }">
<CaseCountPopover :record="record" />
<CaseCountPopover :bug-item="record" />
</template>
</MsBaseTable>
</div>
@ -41,31 +39,35 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import MsButton from '@/components/pure/ms-button/index.vue';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import type { MsTableColumn } from '@/components/pure/ms-table/type';
import useTable from '@/components/pure/ms-table/useTable';
import CaseCountPopover from './caseCountPopover.vue';
import { getCustomOptionHeader } from '@/api/modules/bug-management';
import { planDetailBugPage } from '@/api/modules/test-plan/testPlan';
import { useI18n } from '@/hooks/useI18n';
import useAppStore from '@/store/modules/app';
import { addCommasToNumber } from '@/utils';
import { hasAnyPermission } from '@/utils/permission';
// import { BugManagementRouteEnum } from '@/enums/routeEnum';
import { TableKeyEnum } from '@/enums/tableEnum';
import { makeColumns } from '@/views/case-management/caseManagementFeature/components/utils';
const { t } = useI18n();
const route = useRoute();
// const router = useRouter();
const appStore = useAppStore();
const props = defineProps<{
planId: string | undefined;
}>();
const keyword = ref<string>('');
const planId = ref(route.query.id as string);
function getFetch() {}
const columns: MsTableColumn = [
const columns = ref<MsTableColumn>([
{
title: 'ID',
dataIndex: 'num',
@ -80,21 +82,22 @@
},
{
title: 'testPlan.bugManagement.bugName',
slotName: 'title',
slotName: 'name',
dataIndex: 'title',
showInTable: true,
showTooltip: false,
width: 300,
ellipsis: true,
showDrag: false,
},
{
title: 'testPlan.bugManagement.defectState',
slotName: 'status',
title: 'caseManagement.featureCase.defectState',
dataIndex: 'status',
filterConfig: {
options: [],
labelKey: 'text',
},
showInTable: true,
showTooltip: true,
width: 200,
width: 150,
ellipsis: true,
showDrag: false,
},
@ -103,8 +106,7 @@
slotName: 'linkCase',
dataIndex: 'linkCase',
showInTable: true,
showTooltip: true,
width: 300,
width: 150,
ellipsis: true,
},
{
@ -129,10 +131,9 @@
width: 200,
showDrag: true,
},
];
]);
const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(planDetailBugPage, {
columns,
columns: columns.value,
tableKey: TableKeyEnum.TEST_PLAN_DETAIL_BUG_TABLE,
scroll: { x: '100%' },
showSelectorAll: false,
@ -144,18 +145,40 @@
return propsRes.value.msPagination?.total || 0;
});
function initData() {
function getFetch() {
setLoadListParams({
planId: props.planId,
planId: planId.value,
keyword: keyword.value,
projectId: appStore.currentProjectId,
});
loadList();
}
const tableRef = ref<InstanceType<typeof MsBaseTable>>();
async function initFilterOptions() {
if (hasAnyPermission(['PROJECT_BUG:READ'])) {
const res = await getCustomOptionHeader(appStore.currentProjectId);
const optionsMap: Record<string, any> = {
status: res.statusOption,
};
columns.value = makeColumns(optionsMap, columns.value);
}
tableRef.value?.initColumn(columns.value);
}
function toDetail(id: string) {
// eslint-disable-next-line no-console
console.log('id', id);
// TODO: 查看详情
// window.open(
// `${window.location.origin}#${
// router.resolve({ name: BugManagementRouteEnum.BUG_MANAGEMENT_INDEX }).fullPath
// }?id=${id}&orgId=${appStore.currentOrgId}&pId=${appStore.currentProjectId}`
// );
}
onBeforeMount(() => {
initData();
initFilterOptions();
getFetch();
});
</script>
<style scoped></style>

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

@ -107,8 +107,7 @@
:can-edit="detail.status !== 'ARCHIVED'"
@refresh="initDetail"
/>
<!-- TODO 先不上 -->
<!-- <BugManagement v-if="activeTab === 'defectList'" :plan-id="detail.id" /> -->
<BugManagement v-if="activeTab === 'defectList'" />
</MsCard>
<AssociateDrawer
v-model:visible="caseAssociateVisible"
@ -303,11 +302,10 @@
value: 'featureCase',
label: t('menu.caseManagement.featureCase'),
},
// TODO 先不上
// {
// key: 'defectList',
// title: t('caseManagement.featureCase.defectList'),
// },
{
value: 'defectList',
label: t('caseManagement.featureCase.defectList'),
},
]);
const hasSelectedIds = ref<string[]>([]);
const caseAssociateVisible = ref(false);

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

@ -90,7 +90,6 @@ export default {
'testPlan.bugManagement.bug': 'Defect list',
'testPlan.bugManagement.bugName': 'name',
'testPlan.bugManagement.defectState': 'Defect state',
'testPlan.bugManagement.caseClassification': 'Classification',
'testPlan.featureCase.bugCount': 'Bug count',
'testPlan.featureCase.executor': 'Executor',
'testPlan.featureCase.changeExecutor': 'Change executor',

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

@ -85,7 +85,6 @@ export default {
'testPlan.bugManagement.bug': '缺陷列表',
'testPlan.bugManagement.bugName': '名称',
'testPlan.bugManagement.defectState': '缺陷状态',
'testPlan.bugManagement.caseClassification': '用例分类',
'testPlan.featureCase.bugCount': '缺陷数',
'testPlan.featureCase.bug': '缺陷',
'testPlan.featureCase.executor': '执行人',