fix(用例管理): 修改交互样式和模板删除字段用例异常

2024-03-08 19:19:10 +08:00 · 2024-03-08 19:19:10 +08:00 · d7685bd2ce
parent 390c3e2b07
commit d7685bd2ce
5 changed files with 91 additions and 74 deletions
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@ -123,9 +123,12 @@ export function formatFileSize(fileSize: number): string {
    size /= 1024;
    unitIndex++;
  }
-  const formattedSize = size.toFixed(2);
  const unit = units[unitIndex];
-
+  if (size) {
+    const formattedSize = size.toFixed(2);
+    return `${formattedSize} ${unit}`;
+  }
+  const formattedSize = 0;
  return `${formattedSize} ${unit}`;
 }

--- a/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
@ -192,15 +192,15 @@
              <!-- 自定义字段结束 -->
              <div class="baseItem">
                <span class="label"> {{ t('caseManagement.featureCase.tableColumnCreateUser') }}</span>
-                <span>{{ detailInfo?.createUserName }}</span>
+                <span class="value">{{ detailInfo?.createUserName }}</span>
              </div>
              <div class="baseItem">
                <span class="label"> {{ t('caseManagement.featureCase.tableColumnCreateTime') }}</span>
-                <span>{{ dayjs(detailInfo?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+                <span class="value">{{ dayjs(detailInfo?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
              </div>
              <div class="baseItem">
                <span class="label"> {{ t('caseManagement.featureCase.tableColumnTag') }}</span>
-                <span>
+                <span class="value">
                  <MsTag v-for="item of detailInfo.tags" :key="item"> {{ item }} </MsTag>
                </span>
              </div>
@ -261,7 +261,7 @@
  import { ModuleTreeNode } from '@/models/common';
  import { CaseManagementRouteEnum } from '@/enums/routeEnum';

-  import { getCaseLevels } from './utils';
+  import { getCaseLevels, initFormCreate } from './utils';
  import { LabelValue } from '@arco-design/web-vue/es/tree-select/interface';
  import debounce from 'lodash-es/debounce';
  // 异步加载组件
@ -483,6 +483,7 @@
      wrapperColProps: {
        span: 15,
      },
+      contentClass: 'contentClass',
    },
    // 暂时默认
    row: {
@ -498,38 +499,7 @@
  const fApi = ref(null);
  // 初始化表单
  function initForm() {
-    formRules.value = customFields.value.map((item: any) => {
-      const multipleType = ['MULTIPLE_SELECT', 'CHECKBOX', 'MULTIPLE_MEMBER', 'MULTIPLE_INPUT'];
-      const numberType = ['INT', 'FLOAT'];
-      let currentDefaultValue;
-      if (numberType.includes(item.type)) {
-        currentDefaultValue = item.defaultValue * 1;
-      } else if (
-        multipleType.includes(item.type) &&
-        Array.isArray(item.defaultValue) &&
-        item.defaultValue.length === 0
-      ) {
-        currentDefaultValue = item.defaultValue;
-      } else if (multipleType.includes(item.type)) {
-        currentDefaultValue = JSON.parse(item.defaultValue);
-      } else {
-        currentDefaultValue = item.defaultValue;
-      }
-      return {
-        ...item,
-        type: item.type,
-        name: item.fieldId,
-        label: item.fieldName,
-        value: currentDefaultValue,
-        required: item.required,
-        options: item.options || [],
-        props: {
-          modelValue: currentDefaultValue,
-          disabled: !hasAnyPermission(['FUNCTIONAL_CASE:READ+UPDATE']),
-          options: item.options || [],
-        },
-      };
-    }) as FormItem[];
+    formRules.value = initFormCreate(customFields.value, ['FUNCTIONAL_CASE:READ+UPDATE']);
  }

  const tabDetailRef = ref();
@ -656,6 +626,9 @@
        width: 38%;
        color: var(--color-text-3);
      }
+      .value {
+        padding-left: 10px;
+      }
    }
    :deep(.arco-form-item-layout-horizontal) {
      margin-bottom: 16px !important;
@ -663,6 +636,28 @@
    :deep(.arco-form-item-label-col > .arco-form-item-label) {
      color: var(--color-text-3) !important;
    }
+    :deep(.arco-select-view-single) {
+      border-color: transparent !important;
+      .arco-select-view-suffix {
+        visibility: hidden;
+      }
+      &:hover {
+        border-color: rgb(var(--primary-5)) !important;
+        .arco-select-view-suffix {
+          visibility: visible !important;
+        }
+      }
+      &:hover > .arco-input {
+        font-weight: normal;
+        text-decoration: none;
+        color: var(--color-text-1);
+      }
+      & > .arco-input {
+        font-weight: 500;
+        text-decoration: underline;
+        color: var(--color-text-1);
+      }
+    }
  }
  .rightButtons {
    :deep(.ms-button--secondary):hover,
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue
@ -271,17 +271,19 @@
  import useAppStore from '@/store/modules/app';
  import useFeatureCaseStore from '@/store/modules/case/featureCase';
  import { downloadByteFile, getGenerateId } from '@/utils';
+  import { hasAnyPermission } from '@/utils/permission';

  import type {
    AssociatedList,
    AttachFileInfo,
    CreateOrUpdateCase,
+    CustomAttributes,
    DetailCase,
    StepList,
  } from '@/models/caseManagement/featureCase';
  import type { ModuleTreeNode, TableQueryParams } from '@/models/common';

-  import { convertToFile } from './utils';
+  import { convertToFile, initFormCreate } from './utils';

  const { t } = useI18n();
  const route = useRoute();
@ -496,39 +498,7 @@
      name: route.params.mode === 'copy' ? `copy_${detailResult.name}` : detailResult.name,
    };
    // 处理自定义字段
-    formRules.value = (customFields || []).map((item: any) => {
-      const multipleType = ['MULTIPLE_SELECT', 'CHECKBOX', 'MULTIPLE_MEMBER', 'MULTIPLE_INPUT'];
-      const numberType = ['INT', 'FLOAT'];
-
-      let currentDefaultValue;
-      if (numberType.includes(item.type)) {
-        currentDefaultValue = item.defaultValue * 1;
-      } else if (
-        multipleType.includes(item.type) &&
-        Array.isArray(item.defaultValue) &&
-        item.defaultValue.length === 0
-      ) {
-        currentDefaultValue = item.defaultValue;
-      } else if (multipleType.includes(item.type)) {
-        currentDefaultValue = JSON.parse(item.defaultValue);
-      } else {
-        currentDefaultValue = item.defaultValue;
-      }
-
-      return {
-        ...item,
-        type: item.type,
-        name: item.fieldId,
-        label: item.fieldName,
-        value: currentDefaultValue,
-        required: item.required,
-        options: item.options || [],
-        props: {
-          modelValue: currentDefaultValue,
-          options: item.options || [],
-        },
-      };
-    });
+    formRules.value = initFormCreate(customFields as CustomAttributes[], ['FUNCTIONAL_CASE:READ+UPDATE']);
    // 处理步骤
    if (steps) {
      stepData.value = JSON.parse(steps).map((item: any) => {
--- a/frontend/src/views/case-management/caseManagementFeature/components/utils.ts
+++ b/frontend/src/views/case-management/caseManagementFeature/components/utils.ts
@ -1,9 +1,11 @@
+import type { FormItem, FormRuleItem } from '@/components/pure/ms-form-create/types';
 import { MsTableColumnData } from '@/components/pure/ms-table/type';
 import { getFileEnum } from '@/components/pure/ms-upload/iconMap';
 import type { MsFileItem } from '@/components/pure/ms-upload/types';
 import type { CaseLevel } from '@/components/business/ms-case-associate/types';

 import { useI18n } from '@/hooks/useI18n';
+import { hasAnyPermission } from '@/utils/permission';

 import type { AssociatedList, CustomAttributes } from '@/models/caseManagement/featureCase';
 import { StatusType } from '@/enums/caseEnum';
@ -164,3 +166,40 @@ export function getTableFields(customFields: CustomAttributes[], itemDataIndex:
    return currentColumnData.defaultValue || '-';
  }
 }
+
+export function initFormCreate(customFields: CustomAttributes[], permission: string[]) {
+  return customFields.map((item: any) => {
+    const multipleType = ['MULTIPLE_SELECT', 'CHECKBOX', 'MULTIPLE_MEMBER', 'MULTIPLE_INPUT'];
+    const numberType = ['INT', 'FLOAT'];
+    let currentDefaultValue;
+    if (numberType.includes(item.type)) {
+      currentDefaultValue = item.defaultValue * 1;
+    } else if (multipleType.includes(item.type) && Array.isArray(item.defaultValue) && item.defaultValue.length === 0) {
+      currentDefaultValue = item.defaultValue;
+    } else if (multipleType.includes(item.type)) {
+      const tempValue = JSON.parse(item.defaultValue);
+      if (item.type !== 'MULTIPLE_INPUT') {
+        const optionsIds = item.options?.map((e: any) => e.value);
+        currentDefaultValue = optionsIds.filter((e: any) => tempValue.includes(e));
+      } else {
+        currentDefaultValue = JSON.parse(item.defaultValue);
+      }
+    } else {
+      currentDefaultValue = item.defaultValue;
+    }
+    return {
+      ...item,
+      type: item.type,
+      name: item.fieldId,
+      label: item.fieldName,
+      value: currentDefaultValue,
+      required: item.required,
+      options: item.options || [],
+      props: {
+        modelValue: currentDefaultValue,
+        disabled: !hasAnyPermission(permission),
+        options: item.options || [],
+      },
+    };
+  }) as FormItem[];
+}
--- a/frontend/src/views/setting/organization/template/components/addTemplate.vue
+++ b/frontend/src/views/setting/organization/template/components/addTemplate.vue
@ -507,6 +507,7 @@
    return customFields.map((item: any) => {
      const currentFormRules = FieldTypeFormRules[item.type];
      let selectOptions: any = [];
+      const multipleType = ['MULTIPLE_SELECT', 'CHECKBOX', 'MULTIPLE_MEMBER', 'MULTIPLE_INPUT'];
      if (item.options && item.options.length) {
        selectOptions = item.options.map((optionItem: any) => {
          return {
@ -514,8 +515,17 @@
            value: optionItem.value,
          };
        });
+
        currentFormRules.options = selectOptions;
      }
+      let initValue;
+      if (multipleType.includes(item.type)) {
+        const optionsIds = selectOptions.map((e: any) => e.value);
+        initValue = optionsIds.filter((e: any) => item.defaultValue.includes(e));
+      } else {
+        initValue = item.defaultValue;
+      }
+
      return {
        ...item,
        id: item.fieldId,
@ -526,11 +536,11 @@
            effect: {
              required: item.required,
            },
-            value: item.defaultValue,
+            value: initValue,
            props: {
              ...currentFormRules.props,
              options: selectOptions,
-              modelValue: item.defaultValue,
+              modelValue: initValue,
              placeholder: t('system.orgTemplate.defaultValue'),
            },
          },