fix(用例管理): 修改拖拽和折叠样式&去掉多余文件
This commit is contained in:
parent
5e266613e6
commit
0a8d374fef
|
@ -5,6 +5,7 @@
|
|||
:max="props.max"
|
||||
:class="[
|
||||
'h-full',
|
||||
'ms-split-box-second',
|
||||
isExpanded ? '' : 'expanded-panel',
|
||||
isExpandAnimating ? 'animating' : '',
|
||||
props.direction === 'vertical' ? 'ms-split-box--vertical' : '',
|
||||
|
|
|
@ -1,219 +0,0 @@
|
|||
<template>
|
||||
<MsDrawer
|
||||
v-model:visible="showDrawer"
|
||||
:mask="false"
|
||||
:title="t('caseManagement.featureCase.associatedFile')"
|
||||
:ok-text="t('caseManagement.featureCase.associated')"
|
||||
:ok-loading="drawerLoading"
|
||||
:width="960"
|
||||
unmount-on-close
|
||||
:show-continue="false"
|
||||
@confirm="handleDrawerConfirm"
|
||||
@cancel="handleDrawerCancel"
|
||||
>
|
||||
<div class="mb-4 grid grid-cols-4 gap-2">
|
||||
<div class="col-end-4">
|
||||
<a-select v-model="fileType" @change="changeSelect">
|
||||
<a-option key="" value="">{{ t('common.all') }}</a-option>
|
||||
<a-option v-for="item of fileTypeList" :key="item" :value="item">{{ item }}</a-option>
|
||||
<template #prefix
|
||||
><span>{{ t('caseManagement.featureCase.fileType') }}</span></template
|
||||
>
|
||||
</a-select></div
|
||||
>
|
||||
<div>
|
||||
<a-input-search
|
||||
v-model="searchParams.keyword"
|
||||
:max-length="255"
|
||||
:placeholder="t('project.member.searchMember')"
|
||||
allow-clear
|
||||
@search="searchHandler"
|
||||
@press-enter="searchHandler"
|
||||
></a-input-search
|
||||
></div>
|
||||
</div>
|
||||
<MsBaseTable v-bind="propsRes" v-on="propsEvent">
|
||||
<template #name="{ record }">
|
||||
<div class="flex items-center">
|
||||
<span> <MsIcon class="mr-1" :type="getFileType(record.fileType)" /></span>
|
||||
<span>{{ record.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</MsBaseTable>
|
||||
</MsDrawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import MsDrawer from '@/components/pure/ms-drawer/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 { FileIconMap, getFileEnum } from '@/components/pure/ms-upload/iconMap';
|
||||
|
||||
import { getAssociatedFileListUrl } from '@/api/modules/case-management/featureCase';
|
||||
import { getFileTypes } from '@/api/modules/project-management/fileManagement';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import { useAppStore } from '@/store';
|
||||
|
||||
import type { AssociatedList } from '@/models/caseManagement/featureCase';
|
||||
import { TableQueryParams } from '@/models/common';
|
||||
import { TableKeyEnum } from '@/enums/tableEnum';
|
||||
import { UploadStatus } from '@/enums/uploadEnum';
|
||||
|
||||
const { t } = useI18n();
|
||||
const showDrawer = ref<boolean>(false);
|
||||
const drawerLoading = ref<boolean>(false);
|
||||
const appStore = useAppStore();
|
||||
const getCurrentProjectId = computed(() => appStore.getCurrentProjectId);
|
||||
const fileTypeList = ref<string[]>([]);
|
||||
const fileType = ref('');
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', val: boolean): void;
|
||||
(e: 'save', selectList: AssociatedList[]): void;
|
||||
}>();
|
||||
|
||||
const columns: MsTableColumn = [
|
||||
{
|
||||
title: 'caseManagement.featureCase.fileName',
|
||||
dataIndex: 'name',
|
||||
slotName: 'name',
|
||||
showInTable: true,
|
||||
showTooltip: true,
|
||||
showDrag: false,
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: 'caseManagement.featureCase.description',
|
||||
dataIndex: 'description',
|
||||
showInTable: true,
|
||||
showTooltip: true,
|
||||
showDrag: true,
|
||||
},
|
||||
{
|
||||
title: 'caseManagement.featureCase.tags',
|
||||
dataIndex: 'tags',
|
||||
isTag: true,
|
||||
showDrag: true,
|
||||
},
|
||||
{
|
||||
title: 'caseManagement.featureCase.tableColumnCreateUser',
|
||||
dataIndex: 'createUser',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
sorter: true,
|
||||
},
|
||||
showTooltip: true,
|
||||
showDrag: true,
|
||||
},
|
||||
{
|
||||
title: 'caseManagement.featureCase.tableColumnUpdateUser',
|
||||
dataIndex: 'updateUser',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
sorter: true,
|
||||
},
|
||||
showTooltip: true,
|
||||
showInTable: true,
|
||||
},
|
||||
{
|
||||
title: 'caseManagement.featureCase.tableColumnUpdateTime',
|
||||
dataIndex: 'updateTime',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
sorter: true,
|
||||
},
|
||||
showTooltip: true,
|
||||
showInTable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(
|
||||
getAssociatedFileListUrl,
|
||||
{
|
||||
tableKey: TableKeyEnum.CASE_MANAGEMENT_ASSOCIATED_TABLE,
|
||||
selectable: true,
|
||||
noDisable: true,
|
||||
columns,
|
||||
scroll: {
|
||||
x: 1400,
|
||||
},
|
||||
heightUsed: 300,
|
||||
},
|
||||
(record) => ({
|
||||
...record,
|
||||
tags: record.tags || [],
|
||||
})
|
||||
);
|
||||
|
||||
const searchParams = ref<TableQueryParams>({
|
||||
keyword: '',
|
||||
filter: {},
|
||||
moduleIds: [],
|
||||
fileType: fileType.value,
|
||||
projectId: getCurrentProjectId.value,
|
||||
});
|
||||
|
||||
const initData = async () => {
|
||||
setLoadListParams({ ...searchParams.value });
|
||||
await loadList();
|
||||
};
|
||||
|
||||
const searchHandler = () => {
|
||||
initData();
|
||||
resetSelector();
|
||||
};
|
||||
|
||||
function changeSelect(value: string | number | boolean | Record<string, any>) {
|
||||
searchParams.value.fileType = value;
|
||||
initData();
|
||||
}
|
||||
const tableSelected = ref<AssociatedList[]>([]);
|
||||
|
||||
function handleDrawerConfirm() {
|
||||
const selectedIds = [...propsRes.value.selectedKeys];
|
||||
tableSelected.value = propsRes.value.data.filter((item: any) => selectedIds.indexOf(item.id) > -1);
|
||||
emit('save', tableSelected.value);
|
||||
showDrawer.value = false;
|
||||
propsRes.value.selectedKeys.clear();
|
||||
}
|
||||
|
||||
function handleDrawerCancel() {
|
||||
showDrawer.value = false;
|
||||
resetSelector();
|
||||
}
|
||||
|
||||
function getFileType(type: string) {
|
||||
const fileTypes = type ? getFileEnum(type.toLowerCase()) : 'unknown';
|
||||
return FileIconMap[fileTypes][UploadStatus.done];
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(val) => {
|
||||
showDrawer.value = val;
|
||||
if (val) {
|
||||
initData();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => showDrawer.value,
|
||||
(val) => {
|
||||
emit('update:visible', val);
|
||||
}
|
||||
);
|
||||
|
||||
onBeforeMount(async () => {
|
||||
fileTypeList.value = await getFileTypes(appStore.currentProjectId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
|
@ -6,6 +6,7 @@
|
|||
ok-text="common.confirm"
|
||||
:confirm="confirmHandler"
|
||||
:close="closeHandler"
|
||||
unmount-on-close
|
||||
:switch-props="{
|
||||
switchName: t('caseManagement.featureCase.appendTag'),
|
||||
switchTooltip: t('caseManagement.featureCase.enableTags'),
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
:mask-closable="true"
|
||||
:edit-name="true"
|
||||
show-full-screen
|
||||
unmount-on-close
|
||||
:unmount-on-close="true"
|
||||
@loaded="loadedCase"
|
||||
>
|
||||
<template #titleLeft>
|
||||
|
@ -92,7 +92,7 @@
|
|||
height: 'calc(100% - 86px)',
|
||||
}"
|
||||
>
|
||||
<MsSplitBox :size="0.7" :max="0.9" :min="0.7" direction="horizontal" expand-direction="right">
|
||||
<MsSplitBox :size="800" :max="0.7" :min="0.5" direction="horizontal" expand-direction="right">
|
||||
<template #first>
|
||||
<div class="leftWrapper h-full">
|
||||
<div class="header h-[50px]">
|
||||
|
@ -122,33 +122,32 @@
|
|||
:form="detailInfo"
|
||||
:allow-edit="true"
|
||||
:form-rules="formItem"
|
||||
:active-tab="activeTab"
|
||||
@update-success="updateSuccess"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="activeTab === 'requirement'">
|
||||
<TabDemand :active-tab="activeTab" :case-id="props.detailId" />
|
||||
<TabDemand :case-id="props.detailId" />
|
||||
</template>
|
||||
<template v-if="activeTab === 'case'">
|
||||
<TabCaseTable :active-tab="activeTab" :case-id="props.detailId" />
|
||||
<TabCaseTable :case-id="props.detailId" />
|
||||
</template>
|
||||
<template v-if="activeTab === 'bug'">
|
||||
<TabDefect :active-tab="activeTab" :case-id="props.detailId" />
|
||||
<TabDefect :case-id="props.detailId" />
|
||||
</template>
|
||||
<template v-if="activeTab === 'dependency'">
|
||||
<TabDependency :active-tab="activeTab" :case-id="props.detailId" />
|
||||
<TabDependency :case-id="props.detailId" />
|
||||
</template>
|
||||
<template v-if="activeTab === 'caseReview'">
|
||||
<TabCaseReview :active-tab="activeTab" :case-id="props.detailId" />
|
||||
<TabCaseReview :case-id="props.detailId" />
|
||||
</template>
|
||||
<template v-if="activeTab === 'testPlan'">
|
||||
<TabTestPlan :active-tab="activeTab" />
|
||||
<TabTestPlan />
|
||||
</template>
|
||||
<template v-if="activeTab === 'comments'">
|
||||
<TabComment ref="commentRef" :active-tab="activeTab" :case-id="props.detailId" />
|
||||
<TabComment ref="commentRef" :case-id="props.detailId" />
|
||||
</template>
|
||||
<template v-if="activeTab === 'changeHistory'">
|
||||
<TabChangeHistory :active-tab="activeTab" :case-id="props.detailId" />
|
||||
<TabChangeHistory :case-id="props.detailId" />
|
||||
</template>
|
||||
</div>
|
||||
</keep-alive>
|
||||
|
@ -571,6 +570,8 @@
|
|||
showDrawerVisible.value = val;
|
||||
activeTab.value = 'detail';
|
||||
featureCaseStore.setActiveTab(activeTab.value);
|
||||
} else {
|
||||
activeTab.value = '';
|
||||
}
|
||||
}
|
||||
);
|
||||
|
@ -624,16 +625,6 @@
|
|||
tabDetailRef.value.handleOK();
|
||||
}, 300);
|
||||
|
||||
watch(
|
||||
() => props.detailId,
|
||||
(val) => {
|
||||
if (val) {
|
||||
updateSuccess();
|
||||
}
|
||||
}
|
||||
);
|
||||
provide('activeTab', activeTab.value);
|
||||
|
||||
onMounted(() => {
|
||||
settingDrawerRef.value.getTabModule();
|
||||
});
|
||||
|
|
|
@ -128,7 +128,6 @@
|
|||
|
||||
const props = defineProps<{
|
||||
caseId: string;
|
||||
activeTab: string;
|
||||
}>();
|
||||
// const activeTab = computed(() => featureCaseStore.activeTab);
|
||||
const showType = ref('link');
|
||||
|
|
|
@ -53,7 +53,6 @@
|
|||
|
||||
const props = defineProps<{
|
||||
caseId: string; // 用例id
|
||||
activeTab: string;
|
||||
}>();
|
||||
|
||||
const keyword = ref<string>('');
|
||||
|
|
|
@ -102,7 +102,6 @@
|
|||
|
||||
const props = defineProps<{
|
||||
caseId: string;
|
||||
// activeTab: string;
|
||||
}>();
|
||||
|
||||
const columns: MsTableColumn = [
|
||||
|
|
|
@ -81,7 +81,6 @@
|
|||
|
||||
const props = defineProps<{
|
||||
caseId: string;
|
||||
activeTab: string;
|
||||
}>();
|
||||
|
||||
const activeComment = ref('caseComment');
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
:footer="false"
|
||||
no-content-padding
|
||||
:mask-closable="false"
|
||||
unmount-on-close
|
||||
>
|
||||
<div class="flex h-full">
|
||||
<div class="w-[292px] border-r border-[var(--color-text-n8)] p-[16px]">
|
||||
|
|
|
@ -95,7 +95,6 @@
|
|||
const keyword = ref<string>('');
|
||||
const props = defineProps<{
|
||||
caseId: string;
|
||||
activeTab: string;
|
||||
}>();
|
||||
|
||||
const columns: MsTableColumn = [
|
||||
|
|
|
@ -304,7 +304,6 @@
|
|||
form: DetailCase;
|
||||
allowEdit?: boolean; // 是否允许编辑
|
||||
formRules?: FormRuleItem[]; // 编辑表单
|
||||
activeTab?: string;
|
||||
}>(),
|
||||
{
|
||||
allowEdit: true, // 是否允许编辑
|
||||
|
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<a-modal v-model:visible="transferVisible" title-align="start" class="ms-modal-upload ms-modal-small">
|
||||
<a-modal
|
||||
v-model:visible="transferVisible"
|
||||
title-align="start"
|
||||
unmount-on-close
|
||||
class="ms-modal-upload ms-modal-small"
|
||||
>
|
||||
<template #title> {{ t('caseManagement.featureCase.selectTransferDirectory') }} </template>
|
||||
<a-tree-select
|
||||
v-model="transferId"
|
||||
|
|
Loading…
Reference in New Issue