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

frontend/src/components/pure/ms-split-box/index.vue

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

frontend/src/views/case-management/caseManagementFeature/components/associatedFileDrawer.vue

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

frontend/src/views/case-management/caseManagementFeature/components/batchEditModal.vue

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

frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue

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

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/tabDefect.vue

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

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabCaseReview.vue

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

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabChangeHistory.vue

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

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/tabCommentIndex.vue

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

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/preAndPostCaseDrawer.vue

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

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/tabDependency.vue

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

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue

@@ -304,7 +304,6 @@
       form: DetailCase;
       allowEdit?: boolean; // 是否允许编辑
       formRules?: FormRuleItem[]; // 编辑表单
-      activeTab?: string;
     }>(),
     {
       allowEdit: true, // 是否允许编辑

frontend/src/views/case-management/caseManagementFeature/components/tabContent/transferModal.vue

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