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

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}`;
 }
 

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) => {
+    formRules.value = initFormCreate(customFields.value, ['FUNCTIONAL_CASE:READ+UPDATE']);
-      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[];
   }
 
   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,

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) => {
+    formRules.value = initFormCreate(customFields as CustomAttributes[], ['FUNCTIONAL_CASE:READ+UPDATE']);
-      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 || [],
-        },
-      };
-    });
     // 处理步骤
     if (steps) {
       stepData.value = JSON.parse(steps).map((item: any) => {

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[];
+}

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