feat(缺陷管理): 详情保存

frontend/src/views/bug-management/components/bug-detail-drawer.vue

@@ -88,7 +88,13 @@
                     <template #title>
                       {{ t('bugManagement.detail.detail') }}
                     </template>
-                    <BugDetailTab :allow-edit="true" :detail-info="detailInfo" @update-success="updateSuccess" />
+                    <BugDetailTab
+                      ref="bugDetailTabRef"
+                      :form-item="formItem"
+                      :allow-edit="true"
+                      :detail-info="detailInfo"
+                      @update-success="updateSuccess"
+                    />
                   </a-tab-pane>
                   <a-tab-pane key="case">
                     <template #title>
@@ -118,7 +124,7 @@
                 :form-rule="formRules"
                 class="w-full"
                 :option="options"
-                @change="handleOK"
+                @change="handelFormCreateChange"
               />
               <!-- 自定义字段结束 -->
               <div class="baseItem">
@@ -154,6 +160,7 @@
   import { ref } from 'vue';
   import { useRouter } from 'vue-router';
   import { Message } from '@arco-design/web-vue';
+  import { debounce } from 'lodash-es';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsFormCreate from '@/components/pure/ms-form-create/ms-form-create.vue';
@@ -175,7 +182,6 @@
     followBug,
     getBugDetail,
     getTemplateById,
-    updateBug,
   } from '@/api/modules/bug-management/index';
   import useFullScreen from '@/hooks/useFullScreen';
   import { useI18n } from '@/hooks/useI18n';
@@ -212,6 +218,7 @@
   const formItem = ref<FormRuleItem[]>([]); // 表单项
   const currentProjectId = computed(() => appStore.currentProjectId);
   const showDrawerVisible = defineModel<boolean>('visible', { default: false });
+  const bugDetailTabRef = ref();
 
   const activeTab = ref<string | number>('detail');
 
@@ -219,7 +226,7 @@
   const tags = ref([]);
 
   // 处理表单格式
-  const getFormRules = (arr: BugEditCustomField[]) => {
+  const getFormRules = (arr: BugEditCustomField[], valueObj: BugEditFormObject) => {
     formRules.value = [];
     if (Array.isArray(arr) && arr.length) {
       formRules.value = arr.map((item) => {
@@ -227,11 +234,11 @@
           type: item.type,
           name: item.fieldId,
           label: item.fieldName,
-          value: item.value,
+          value: valueObj[item.fieldId],
           options: item.platformOptionJson ? JSON.parse(item.platformOptionJson) : item.options,
           required: item.required as boolean,
           props: {
-            modelValue: item.value,
+            modelValue: valueObj[item.fieldId],
             options: item.platformOptionJson ? JSON.parse(item.platformOptionJson) : item.options,
           },
         };
@@ -239,11 +246,11 @@
     }
   };
 
-  const templateChange = async (v: SelectValue) => {
+  const templateChange = async (v: SelectValue, valueObj: BugEditFormObject) => {
     if (v) {
       try {
         const res = await getTemplateById({ projectId: appStore.currentProjectId, id: v });
-        getFormRules(res.customFields);
+        getFormRules(res.customFields, valueObj);
       } catch (error) {
         // eslint-disable-next-line no-console
         console.log(error);
@@ -255,16 +262,14 @@
     const { templateId } = detail;
     // tag 赋值
     tags.value = detail.tags || [];
-    // 初始化自定义字段
-    await templateChange(templateId);
     const tmpObj = {};
     if (detail.customFields && Array.isArray(detail.customFields)) {
       detail.customFields.forEach((item) => {
         tmpObj[item.id] = item.value;
       });
     }
-    // 自定义字段赋值
+    // 初始化自定义字段
-    fApi.value.setValue(tmpObj);
+    await templateChange(templateId, tmpObj);
   }
 
   const editLoading = ref<boolean>(false);
@@ -333,24 +338,9 @@
     });
   }
 
-  const handleOK = async () => {
+  const handelFormCreateChange = debounce(() => {
-    const values = await fApi.value.validate();
+    bugDetailTabRef.value?.handleSave();
-    if (values) {
+  }, 300);
-      const params = {
-        id: detailInfo.value.id,
-        projectId: currentProjectId.value,
-        ...values,
-      };
-      try {
-        await updateBug(params);
-        Message.success(t('common.editSuccess'));
-        detailDrawerRef.value?.initDetail();
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.log(error);
-      }
-    }
-  };
 
   // 表单配置项
   const options = {

frontend/src/views/bug-management/components/bugDetailTab.vue

@@ -1,36 +1,36 @@
 <template>
-  <div class="p-[16px]">
+  <div class="relative p-[16px] pb-[16px]">
     <div class="header">
       <div class="header-title">{{ t('bugManagement.edit.content') }}</div>
-      <div v-if="!contentEditAble" v-permission="['PROJECT_BUG:READ+UPDATE']" class="header-action">
+      <div v-permission="['PROJECT_BUG:READ+UPDATE']" class="header-action">
-        <a-button type="text" @click="contentEditAble = true">
+        <a-button type="text" @click="contentEditAble = !contentEditAble">
           <template #icon> <MsIconfont type="icon-icon_edit_outlined" /> </template>
           {{ t('bugManagement.edit.contentEdit') }}
         </a-button>
       </div>
     </div>
-    <div class="mt-[8]" :class="{ 'max-h-[260px]': contentEditAble }">
+    <div class="mt-[16px]" :class="{ 'max-h-[260px]': contentEditAble }">
       <MsRichText
         v-if="contentEditAble"
-        v-model:raw="form.content"
+        v-model:raw="form.description"
         v-model:filed-ids="fileIds"
         :disabled="!contentEditAble"
         :placeholder="t('bugManagement.edit.contentPlaceholder')"
         :upload-image="handleUploadImage"
       />
-      <div v-else v-dompurify-html="form?.content || '-'" class="text-[var(--color-text-3)]"></div>
+      <div v-else v-dompurify-html="form?.description || '-'" class="text-[var(--color-text-3)]"></div>
     </div>
-    <div v-if="contentEditAble" class="flex justify-end">
+    <div v-if="contentEditAble" class="mt-[8px] flex justify-end">
       <a-button type="secondary" @click="handleCancel">{{ t('common.cancel') }}</a-button>
-      <a-button class="ml-[12px]" type="primary" :loading="confirmLoading">
+      <a-button class="ml-[12px]" type="primary" :loading="confirmLoading" @click="handleSave">
         {{ t('common.save') }}
       </a-button></div
     >
     <div v-if="props.allowEdit">
-      <div class="font-medium text-[var(--color-text-1)]">
+      <div class="mt-[16px] font-medium text-[var(--color-text-1)]">
         {{ t('bugManagement.edit.file') }}
       </div>
-      <div class="mb-1">
+      <div class="mt-[16px] pb-[4px]">
         <a-dropdown position="tr" trigger="hover">
           <a-button v-permission="['PROJECT_BUG:READ+UPDATE']" type="outline">
             <template #icon> <icon-plus class="text-[14px]" /> </template
@@ -162,6 +162,7 @@
   import { Message } from '@arco-design/web-vue';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
+  import { FormRuleItem } from '@/components/pure/ms-form-create/types';
   import MsIconfont from '@/components/pure/ms-icon-font/index.vue';
   import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
   import MsFileList from '@/components/pure/ms-upload/fileList.vue';
@@ -171,6 +172,7 @@
 
   import {
     checkFileIsUpdateRequest,
+    createOrUpdateBug,
     deleteFileOrCancelAssociation,
     downloadFileRequest,
     editorUploadFile,
@@ -180,14 +182,12 @@
     updateFile,
     uploadOrAssociationFile,
   } from '@/api/modules/bug-management';
-  import { updateCaseRequest } from '@/api/modules/case-management/featureCase';
   import { getModules, getModulesCount } from '@/api/modules/project-management/fileManagement';
   import { useI18n } from '@/hooks/useI18n';
   import { useAppStore } from '@/store';
   import { downloadByteFile, sleep } from '@/utils';
-  import { scrollIntoView } from '@/utils/dom';
 
-  import { BugEditFormObject } from '@/models/bug-management';
+  import { BugEditCustomFieldItem, BugEditFormObject } from '@/models/bug-management';
   import { AssociatedList, AttachFileInfo } from '@/models/caseManagement/featureCase';
   import { TableQueryParams } from '@/models/common';
 
@@ -197,6 +197,7 @@
 
   const props = defineProps<{
     detailInfo: BugEditFormObject;
+    formItem: FormRuleItem[];
     allowEdit?: boolean; // 是否允许编辑
   }>();
 
@@ -224,7 +225,7 @@
     },
   });
   const form = ref({
-    content: '',
+    description: '',
     deleteLocalFileIds: [] as string[],
     unLinkRefIds: [] as string[],
     linkFileIds: [] as string[],
@@ -251,36 +252,17 @@
     }
   };
 
+  const confirmLoading = ref<boolean>(false);
+
+  const initCurrentDetail = async (detail: BugEditFormObject) => {
+    const { attachments, description } = detail;
+    form.value.description = description;
+    handleFileFunc(attachments);
+  };
+
   function handleCancel() {
     contentEditAble.value = false;
   }
-  const confirmLoading = ref<boolean>(false);
-
-  // function handleOK() {
-  //   caseFormRef.value?.validate().then(async (res: any) => {
-  //     if (!res) {
-  //       try {
-  //         confirmLoading.value = true;
-  //         await updateCaseRequest();
-  //         Message.success(t('caseManagement.featureCase.editSuccess'));
-  //         handleCancel();
-  //         emit('updateSuccess');
-  //       } catch (error) {
-  //         // eslint-disable-next-line no-console
-  //         console.log(error);
-  //       } finally {
-  //         confirmLoading.value = false;
-  //       }
-  //     }
-  //     return scrollIntoView(document.querySelector('.arco-form-item-message'), { block: 'center' });
-  //   });
-  // }
-
-  const initCurrentDetail = async (detail: BugEditFormObject) => {
-    const { attachments, content } = detail;
-    form.value.content = content;
-    handleFileFunc(attachments);
-  };
 
   // 删除本地文件
   async function deleteFileHandler(item: MsFileItem) {
@@ -311,16 +293,6 @@
     return Promise.resolve(true);
   }
 
-  function handleChange(_fileList: MsFileItem[]) {
-    fileList.value = _fileList.map((e) => {
-      return {
-        ...e,
-        enable: true, // 是否启用
-        local: true, // 是否本地文件
-      };
-    });
-  }
-
   // 预览图片
   async function handlePreview(item: MsFileItem) {
     try {
@@ -471,10 +443,50 @@
     },
     { deep: true }
   );
+  // 保存操作
+  async function handleSave() {
+    try {
+      confirmLoading.value = true;
+      const { formItem } = props;
+      const customFields: BugEditCustomFieldItem[] = [];
+      if (formItem && formItem.length) {
+        formItem.forEach((item: FormRuleItem) => {
+          customFields.push({
+            id: item.field as string,
+            name: item.title as string,
+            type: item.sourceType as string,
+            value: item.value as string,
+          });
+        });
+      }
+      const tmpObj: BugEditFormObject = {
+        ...form.value,
+        id: props.detailInfo.id,
+        projectId: currentProjectId.value,
+        templateId: props.detailInfo.templateId,
+        customFields,
+      };
+      // 执行保存操作
+      const res = await createOrUpdateBug({ request: tmpObj, fileList: fileList.value as unknown as File[] });
+      if (res) {
+        Message.success(t('common.updateSuccess'));
+        handleCancel();
+        emit('updateSuccess');
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      confirmLoading.value = false;
+    }
+  }
 
   watchEffect(() => {
     initCurrentDetail(props.detailInfo);
   });
+  defineExpose({
+    handleSave,
+  });
 </script>
 
 <style lang="less" scoped>
@@ -487,6 +499,9 @@
       color: var(--color-text-1);
     }
     &-action {
+      position: absolute;
+      top: 0;
+      right: 6px;
       color: rgb(var(--primary-7));
     }
   }

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

@@ -452,6 +452,7 @@
     formRules.value = customFields.value.map((item: any) => {
       const multipleType = ['MULTIPLE_SELECT', 'CHECKBOX', 'MULTIPLE_MEMBER', 'MULTIPLE_INPUT'];
       const currentDefaultValue = multipleType.includes(item.type) ? JSON.parse(item.defaultValue) : item.defaultValue;
+      console.log('currentDefaultValue', currentDefaultValue);
       return {
         ...item,
         type: item.type,