style(功能用例): 新设计稿样式布局调整

2023-11-27 14:19:18 +08:00 · 2023-11-27 14:19:18 +08:00 · c86a192ae9
parent d22890795e
commit c86a192ae9
9 changed files with 101 additions and 107 deletions
--- a/frontend/src/router/routes/modules/caseManagement.ts
+++ b/frontend/src/router/routes/modules/caseManagement.ts
@ -26,6 +26,27 @@ const FeatureTest: AppRouteRecordRaw = {
        isTopMenu: true,
      },
    },
+    // 创建用例&编辑用例
+    {
+      path: 'featureCaseDetail/:mode?',
+      name: FeatureTestRouteEnum.FEATURE_TEST_CASE_DETAIL,
+      component: () => import('@/views/case-management/caseManagementFeature/components/caseDetail.vue'),
+      meta: {
+        locale: 'menu.featureTest.featureCaseDetail',
+        roles: ['*'],
+        breadcrumbs: [
+          {
+            name: FeatureTestRouteEnum.FEATURE_TEST_CASE,
+            locale: 'menu.featureTest.featureCase',
+          },
+          {
+            name: FeatureTestRouteEnum.FEATURE_TEST_CASE_DETAIL,
+            editTag: 'id',
+            locale: 'menu.featureTest.featureCaseDetail',
+          },
+        ],
+      },
+    },
    // 功能用例回收站
    {
      path: 'featureCaseRecycle',
@ -46,26 +67,6 @@ const FeatureTest: AppRouteRecordRaw = {
        ],
      },
    },
-    // 创建用例&编辑用例
-    {
-      path: 'featureCaseDetail',
-      name: FeatureTestRouteEnum.FEATURE_TEST_CASE_DETAIL,
-      component: () => import('@/views/case-management/caseManagementFeature/components/caseDetail.vue'),
-      meta: {
-        locale: 'menu.featureTest.featureCaseDetail',
-        roles: ['*'],
-        breadcrumbs: [
-          {
-            name: FeatureTestRouteEnum.FEATURE_TEST_CASE,
-            locale: 'menu.featureTest.featureCase',
-          },
-          {
-            name: FeatureTestRouteEnum.FEATURE_TEST_CASE_DETAIL,
-            locale: 'menu.featureTest.featureCaseDetail',
-          },
-        ],
-      },
-    },
  ],
 };

--- a/frontend/src/views/case-management/caseManagementFeature/components/caseDetail.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseDetail.vue
@ -60,12 +60,12 @@
  async function save() {
    try {
      loading.value = true;
-      if (isEdit.value) {
+      if (route.params.mode === 'edit') {
        await updateCaseRequest(caseDetailInfo.value);
        Message.success(t('featureTest.featureCase.editSuccess'));
      } else {
        await createCaseRequest(caseDetailInfo.value);
-        Message.success(t('common.addSuccess'));
+        Message.success(route.params.mode === 'copy' ? t('ms.description.copySuccess') : t('common.addSuccess'));
      }
      router.push({ name: FeatureTestRouteEnum.FEATURE_TEST_CASE, query: { ...route.query } });
      featureCaseStore.setIsAlreadySuccess(true);
@ -99,8 +99,10 @@
  }

  watchEffect(() => {
-    if (isEdit.value) {
+    if (route.params.mode === 'edit') {
      title.value = t('featureTest.featureCase.updateCase');
+    } else if (route.params.mode === 'copy') {
+      title.value = t('featureTest.featureCase.copyCase');
    } else {
      title.value = t('featureTest.featureCase.creatingCase');
    }
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
@ -1,8 +1,9 @@
+<!-- eslint-disable prefer-destructuring -->
 <template>
  <div class="page-header mb-4 h-[34px]">
    <div class="text-[var(--color-text-1)]"
-      >{{ t('featureTest.featureCase.allCase') }}
-      <span class="text-[var(--color-text-4)]"> ({{ props.modulesCount.all }})</span></div
+      >{{ moduleNamePath }}
+      <span class="text-[var(--color-text-4)]"> ({{ props.modulesCount[props.activeFolder] }})</span></div
    >
    <div class="flex w-[80%] items-center justify-end">
      <a-select class="w-[240px]" :placeholder="t('featureTest.featureCase.versionPlaceholder')">
@ -81,7 +82,8 @@
      </a-tooltip>
    </template>
    <template #operation="{ record }">
-      <MsButton @click="editCase(record)">{{ t('common.edit') }}</MsButton>
+      <MsButton @click="operateCase(record, 'edit')">{{ t('common.edit') }}</MsButton>
+      <MsButton @click="operateCase(record, 'copy')">{{ t('featureTest.featureCase.copy') }}</MsButton>
      <MsButton class="!mr-0" @click="deleteCase(record)">{{ t('common.delete') }}</MsButton>
    </template>
  </ms-base-table>
@ -166,7 +168,7 @@
  import useModal from '@/hooks/useModal';
  import { useAppStore, useTableStore } from '@/store';
  import useFeatureCaseStore from '@/store/modules/case/featureCase';
-  import { characterLimit, findNodePathByKey } from '@/utils';
+  import { characterLimit, findNodeByKey, findNodePathByKey } from '@/utils';

  import type { CaseManagementTable, CaseModuleQueryParams } from '@/models/caseManagement/featureCase';
  import type { TableQueryParams } from '@/models/common';
@ -357,6 +359,17 @@
      isTag: true,
      showDrag: true,
    },
+    {
+      title: 'featureTest.featureCase.tableColumnUpdateTime',
+      slotName: 'updateTime',
+      dataIndex: 'updateTime',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+      showInTable: true,
+      width: 200,
+      showDrag: true,
+    },
    {
      title: 'featureTest.featureCase.tableColumnCreateUser',
      slotName: 'createUser',
@ -375,31 +388,11 @@
      width: 200,
      showDrag: true,
    },
-    {
-      title: 'featureTest.featureCase.tableColumnUpdateUser',
-      slotName: 'updateUser',
-      dataIndex: 'updateUser',
-      showInTable: true,
-      width: 200,
-      showDrag: true,
-    },
-    {
-      title: 'featureTest.featureCase.tableColumnUpdateTime',
-      slotName: 'updateTime',
-      dataIndex: 'updateTime',
-      sortable: {
-        sortDirections: ['ascend', 'descend'],
-      },
-      showInTable: true,
-      width: 200,
-      showDrag: true,
-    },
    {
      title: 'featureTest.featureCase.tableColumnActions',
      slotName: 'operation',
      dataIndex: 'operation',
      fixed: 'right',
-      width: 140,
      showInTable: true,
      showDrag: false,
    },
@ -558,13 +551,16 @@
    emitTableParams();
  }

-  // 编辑
-  function editCase(record: CaseManagementTable) {
+  // 编辑&复制
+  function operateCase(record: CaseManagementTable, mode: string) {
    router.push({
      name: FeatureTestRouteEnum.FEATURE_TEST_CASE_DETAIL,
      query: {
        id: record.id,
      },
+      params: {
+        mode,
+      },
    });
  }

@ -674,11 +670,15 @@
    showBatchMoveDrawer.value = true;
  }

+  const moduleNamePath = computed(() => {
+    return props.activeFolder === 'all'
+      ? t('featureTest.featureCase.allCase')
+      : findNodeByKey<Record<string, any>>(caseTreeData.value, featureCaseStore.moduleId[0], 'id')?.name;
+  });
  // 获取对应模块name
  function getModules(moduleIds: string) {
    const modules = findNodePathByKey(caseTreeData.value, moduleIds, undefined, 'id');
    const moduleName = (modules || []).treePath.map((item: any) => item.name);
-
    if (moduleName.length === 1) {
      return moduleName[0];
    }
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue
@ -524,6 +524,7 @@
        break;
    }
  };
+
  // 总自定义字段
  const totalTemplateField = ref<DefinedFieldItem[]>([]);

@ -589,7 +590,7 @@
  }

  const title = ref('');
-  const isEdit = computed(() => !!route.query.id);
+  const isEditOrCopy = computed(() => !!route.query.id);
  const attachmentsList = ref([]);

  // 后台传过来的local文件的item列表
@ -638,6 +639,7 @@
    const { customFields, attachments, steps, tags } = detailResult;
    form.value = {
      ...detailResult,
+      name: route.params.mode === 'copy' ? `${detailResult.name}_copy` : detailResult.name,
      tags: JSON.parse(tags as string),
    };
    // 处理自定义字段
@ -655,6 +657,7 @@
      });
    }
    attachmentsList.value = attachments;
+
    // 处理文件列表
    fileList.value = attachments
      .map((fileInfo: any) => {
@ -685,12 +688,9 @@
  }

  watchEffect(() => {
-    if (isEdit.value) {
-      title.value = t('featureTest.featureCase.updateCase');
-      // 调用详情处理字段
+    if (route.params.mode === 'edit' || route.params.mode === 'copy') {
      getCaseInfo();
    } else {
-      title.value = t('featureTest.featureCase.creatingCase');
      initDefaultFields();
    }
  });
@ -709,7 +709,7 @@
      if (val) {
        form.value.relateFileMetaIds = fileList.value.filter((item) => !item.local).map((item) => item.uid);
        params.value.fileList = fileList.value.filter((item) => item.local && item.status === 'init');
-        if (isEdit.value) {
+        if (isEditOrCopy.value) {
          getFilesParams();
        }
      }
@ -794,11 +794,11 @@
            type: item.type,
            name: item.id,
            label: item.name,
-            value: isEdit.value ? JSON.parse(rule.value) : rule.value,
+            value: isEditOrCopy.value ? JSON.parse(rule.value) : rule.value,
            options: optionsItem,
            required: item.required,
            props: {
-              modelValue: isEdit.value ? JSON.parse(rule.value) : rule.value,
+              modelValue: isEditOrCopy.value ? JSON.parse(rule.value) : rule.value,
              options: optionsItem,
            },
          };
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTree.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseTree.vue
@ -5,7 +5,7 @@
    allow-clear
    class="mb-[16px]"
  ></a-input-search>
-  <a-spin class="w-full" :style="{ height: `calc(100vh - 356px)` }" :loading="loading">
+  <a-spin class="w-full" :style="{ height: `calc(100vh - 316px)` }" :loading="loading">
    <MsTree
      v-model:focus-node-key="focusNodeKey"
      :selected-keys="props.selectedKeys"
@ -30,8 +30,10 @@
      @drop="handleDrag"
    >
      <template #title="nodeData">
-        <span class="text-[var(--color-text-1)]">{{ nodeData.name }}</span>
-        <span class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</span>
+        <div class="inline-flex w-full">
+          <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
+          <div v-if="!props.isModal" class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+        </div>
      </template>
      <template v-if="!props.isModal" #extra="nodeData">
        <MsPopConfirm
--- a/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
@ -3,21 +3,18 @@
    <MsSplitBox>
      <template #left>
        <div class="p-[24px]">
-          <div class="mb-4 flex items-center">
-            <div class="back" @click="handleBack"><icon-arrow-left /></div>
-            <div
-              >{{ t('featureTest.featureCase.recycle')
-              }}<span class="ml-1 text-[var(--color-text-4)]">({{ recycleModulesCount.all }})</span></div
-            >
-          </div>
-          <a-divider class="my-[4px]" />
-
+          <a-input-search
+            v-model:model-value="groupKeyword"
+            :placeholder="t('featureTest.featureCase.searchTip')"
+            allow-clear
+            class="mb-[16px]"
+          ></a-input-search>
          <div class="feature-case">
            <div class="case h-[38px]">
              <div class="flex items-center" :class="getActiveClass('all')" @click="setActiveFolder('all')">
                <MsIcon type="icon-icon_folder_filled1" class="folder-icon" />
                <div class="folder-name mx-[4px]">{{ t('featureTest.featureCase.allCase') }}</div>
-                <div class="folder-count">({{ allCaseCount }})</div></div
+                <div class="folder-count">({{ recycleModulesCount.all }})</div></div
              >
              <div class="ml-auto flex items-center">
                <a-tooltip
@ -31,12 +28,7 @@
                </a-tooltip>
              </div>
            </div>
-            <a-input-search
-              v-model:model-value="groupKeyword"
-              :placeholder="t('featureTest.featureCase.searchTip')"
-              allow-clear
-              class="mb-[16px]"
-            ></a-input-search>
+            <a-divider class="my-[8px]" />
            <a-spin class="w-full" :loading="loading">
              <MsTree
                v-model:focus-node-key="focusNodeKey"
@ -58,9 +50,9 @@
                @select="caseNodeSelect"
              >
                <template #title="nodeData">
-                  <div @click="setFocusKey(nodeData)">
-                    <span class="text-[var(--color-text-1)]">{{ nodeData.name }}</span>
-                    <span class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</span>
+                  <div class="inline-flex w-full" @click="setFocusKey(nodeData)">
+                    <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
+                    <div class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
                  </div>
                </template>
              </MsTree>
@ -72,8 +64,8 @@
        <div class="p-[24px]">
          <div class="page-header mb-4 h-[34px]">
            <div class="text-[var(--color-text-1)]"
-              >{{ t('featureTest.featureCase.allCase') }}
-              <span class="text-[var(--color-text-4)]"> ({{ recycleModulesCount.all }})</span></div
+              >{{ currentModuleName }}
+              <span class="text-[var(--color-text-4)]"> ({{ recycleModulesCount[activeFolder] }})</span></div
            >
            <div class="flex w-[80%] items-center justify-end">
              <a-select class="w-[240px]" :placeholder="t('featureTest.featureCase.versionPlaceholder')">
@ -161,7 +153,7 @@
  import useModal from '@/hooks/useModal';
  import { useAppStore, useTableStore } from '@/store';
  import useFeatureCaseStore from '@/store/modules/case/featureCase';
-  import { characterLimit, findNodePathByKey, mapTree } from '@/utils';
+  import { characterLimit, findNodeByKey, findNodePathByKey, mapTree } from '@/utils';

  import type {
    BatchMoveOrCopyType,
@ -170,8 +162,6 @@
  } from '@/models/caseManagement/featureCase';
  import type { TableQueryParams } from '@/models/common';
  import { ModuleTreeNode } from '@/models/projectManagement/file';
-  import { StatusType } from '@/enums/caseEnum';
-  import { FeatureTestRouteEnum } from '@/enums/routeEnum';
  import { TableKeyEnum } from '@/enums/tableEnum';

  import { getReviewStatusClass, getStatusText } from './utils';
@ -181,11 +171,8 @@
  const featureCaseStore = useFeatureCaseStore();

  const { t } = useI18n();
-  const router = useRouter();
  const { openModal } = useModal();

-  const allCaseCount = ref<number>(0);
-
  const activeCaseType = ref<'folder' | 'module'>('folder'); // 激活用例类型

  const appStore = useAppStore();
@ -427,7 +414,7 @@

  const loading = ref(false);
  const caseTree = ref<ModuleTreeNode[]>([]);
-  const recycleModulesCount = ref<Record<string, number>>({});
+  const recycleModulesCount = ref<Record<string, any>>({});
  const groupKeyword = ref<string>('');

  /**
@ -456,6 +443,12 @@
    }
  }

+  const currentModuleName = computed(() => {
+    return activeFolder.value === 'all'
+      ? t('featureTest.featureCase.allCase')
+      : findNodeByKey<Record<string, any>>(caseTree.value, activeFolder.value, 'id')?.name;
+  });
+
  const keyword = ref<string>('');

  const searchParams = ref<TableQueryParams>({
@ -620,12 +613,6 @@
      hideCancel: false,
    });
  }
-  // 返回
-  function handleBack() {
-    router.push({
-      name: FeatureTestRouteEnum.FEATURE_TEST_CASE,
-    });
-  }

  watch(
    () => activeFolder.value,
--- a/frontend/src/views/case-management/caseManagementFeature/index.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/index.vue
@ -1,23 +1,16 @@
 <template>
  <div class="mb-[16px]">
-    <a-button type="primary" class="mr-[12px]" @click="caseDetail">
+    <a-button type="primary" @click="caseDetail">
      {{ t('featureTest.featureCase.creatingCase') }}
    </a-button>
-    <a-button type="outline"> {{ t('featureTest.featureCase.importCase') }} </a-button>
+    <a-button class="mx-3" type="outline"> {{ t('featureTest.featureCase.importExcel') }} </a-button>
+    <a-button type="outline"> {{ t('featureTest.featureCase.importXmind') }} </a-button>
  </div>
  <div class="pageWrap">
    <MsSplitBox>
      <template #left>
        <div class="p-[24px] pb-0">
          <div class="feature-case h-[100%]">
-            <div class="case h-[38px]">
-              <div class="flex items-center" :class="getActiveClass('public')">
-                <MsIcon type="icon-icon_folder_outlined-1" class="folder-icon" />
-                <div class="folder-name mx-[4px]">{{ t('featureTest.featureCase.publicCase') }}</div>
-                <div class="folder-count">({{ publicCaseCount }})</div></div
-              >
-              <div class="back"><icon-arrow-right /></div>
-            </div>
            <div class="case h-[38px]">
              <div class="flex items-center" :class="getActiveClass('all')" @click="setActiveFolder('all')">
                <MsIcon type="icon-icon_folder_filled1" class="folder-icon" />
@ -190,7 +183,7 @@
      const params: CreateOrUpdateModule = {
        projectId: currentProjectId.value,
        name: field,
-        parentId: 'none',
+        parentId: 'NONE',
      };
      await createCaseModuleTree(params);
      Message.success(t('featureTest.featureCase.addSuccess'));
--- a/frontend/src/views/case-management/caseManagementFeature/locale/en-US.ts
+++ b/frontend/src/views/case-management/caseManagementFeature/locale/en-US.ts
@ -1,6 +1,8 @@
 export default {
  'featureTest.featureCase.creatingCase': 'Create Case',
  'featureTest.featureCase.importCase': 'Import Case',
+  'featureTest.featureCase.importExcel': 'Import Excel',
+  'featureTest.featureCase.importXmind': 'Import Xmind',
  'featureTest.featureCase.publicCase': 'Public of Cases',
  'featureTest.featureCase.allCase': 'All of Cases',
  'featureTest.featureCase.searchTip': 'Please enter a group name',
@ -25,6 +27,7 @@ export default {
  'featureTest.featureCase.deleteSuccess': 'Delete Successfully',
  'featureTest.featureCase.addSuccess': 'Add Successfully',
  'featureTest.featureCase.addGroupTip': 'Please enter the group name and press enter to save',
+  'featureTest.featureCase.moduleMoveSuccess': 'Move successfully',
  'featureTest.featureCase.tableColumnID': 'ID',
  'featureTest.featureCase.tableColumnName': 'Case Name',
  'featureTest.featureCase.tableColumnLevel': 'Case Level',
@ -105,4 +108,6 @@ export default {
  'featureTest.featureCase.cleanOutDeleteTip':
    'After deletion, the data will not be recovered, please operate with caution!',
  'featureTest.featureCase.pleaseEnterInputTags': 'Please enter content Enter add label',
+  'featureTest.featureCase.copy': 'Copy',
+  'featureTest.featureCase.copyCase': 'Copy case',
 };
--- a/frontend/src/views/case-management/caseManagementFeature/locale/zh-CN.ts
+++ b/frontend/src/views/case-management/caseManagementFeature/locale/zh-CN.ts
@ -1,6 +1,8 @@
 export default {
  'featureTest.featureCase.creatingCase': '创建用例',
  'featureTest.featureCase.importCase': '导入用例',
+  'featureTest.featureCase.importExcel': 'Excel导入',
+  'featureTest.featureCase.importXmind': 'Xmind导入',
  'featureTest.featureCase.publicCase': '公共用例库',
  'featureTest.featureCase.allCase': '全部用例',
  'featureTest.featureCase.searchTip': '请输入分组名称',
@ -24,7 +26,7 @@ export default {
  'featureTest.featureCase.deleteSuccess': '删除成功',
  'featureTest.featureCase.addSuccess': '添加成功',
  'featureTest.featureCase.addGroupTip': '请输入分组名称，按回车键保存',
-  'featureTest.featureCase.moduleMoveSuccess': '请输入分组名称，按回车键保存',
+  'featureTest.featureCase.moduleMoveSuccess': '移动成功',
  'featureTest.featureCase.tableColumnID': 'ID',
  'featureTest.featureCase.tableColumnName': '用例名称',
  'featureTest.featureCase.tableColumnLevel': '用例等级',
@ -104,4 +106,6 @@ export default {
  'featureTest.featureCase.recoveredSuccessfully': '恢复成功',
  'featureTest.featureCase.cleanOutDeleteTip': '删除后，数据将无法恢复，请谨慎操作！',
  'featureTest.featureCase.pleaseEnterInputTags': '请输入内容回车添加标签',
+  'featureTest.featureCase.copy': '复制',
+  'featureTest.featureCase.copyCase': '复制用例',
 };