fix(用例管理): 修改拖拽和折叠样式&去掉多余文件

This commit is contained in:
xinxin.wu 2024-02-29 09:57:41 +08:00 committed by 刘瑞斌
parent 5e266613e6
commit 0a8d374fef
12 changed files with 21 additions and 247 deletions

View File

@ -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' : '',

View File

@ -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>

View File

@ -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'),

View File

@ -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();
});

View File

@ -128,7 +128,6 @@
const props = defineProps<{
caseId: string;
activeTab: string;
}>();
// const activeTab = computed(() => featureCaseStore.activeTab);
const showType = ref('link');

View File

@ -53,7 +53,6 @@
const props = defineProps<{
caseId: string; // id
activeTab: string;
}>();
const keyword = ref<string>('');

View File

@ -102,7 +102,6 @@
const props = defineProps<{
caseId: string;
// activeTab: string;
}>();
const columns: MsTableColumn = [

View File

@ -81,7 +81,6 @@
const props = defineProps<{
caseId: string;
activeTab: string;
}>();
const activeComment = ref('caseComment');

View File

@ -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]">

View File

@ -95,7 +95,6 @@
const keyword = ref<string>('');
const props = defineProps<{
caseId: string;
activeTab: string;
}>();
const columns: MsTableColumn = [

View File

@ -304,7 +304,6 @@
form: DetailCase;
allowEdit?: boolean; //
formRules?: FormRuleItem[]; //
activeTab?: string;
}>(),
{
allowEdit: true, //

View File

@ -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"