fix: 用例&模板三方插件bug修复

frontend/src/components/pure/ms-form-create/formCreate.vue

@@ -1,8 +1,8 @@
 <template>
   <FormCreate
-    v-model:api="formApi"
+    v-model:api="innerApi"
     :rule="formRules"
-    :option="props.option"
+    :option="props.option || options"
     @mounted="handleMounted"
     @reload="handleReload"
     @change="handleChange"
@@ -32,23 +32,31 @@
     api?: Api; // 收集表单的值
   }>();
 
+  const innerApi = ref<any>();
+
   const emits = defineEmits(['update:api', 'update:rule', 'mounted', 'reload', 'change']);
 
-  const formApi = ref<Api>();
+  const formApi = computed({
-
+    get() {
-  watchEffect(() => {
+      return props.api;
-    formApi.value = props.api;
+    },
+    set(val) {
+      emits('update:api', val);
+    },
   });
+
   watch(
     () => formApi.value,
     (val) => {
       emits('update:api', val);
-    }
+    },
+    { deep: true }
   );
 
   const formRules = ref<FormRule | undefined>([]);
   watchEffect(() => {
     formRules.value = props.rule;
+    formApi.value = props.api || innerApi.value;
   });
   watch(
     () => props.rule,
@@ -62,6 +70,9 @@
     () => formRules.value,
     (val) => {
       emits('update:rule', val);
+    },
+    {
+      deep: true,
     }
   );
 
@@ -75,8 +86,26 @@
 
   function handleChange(value: any) {
     formApi.value?.validateField(value);
-    emits('change');
+    emits('update:api', formApi.value);
+    emits('change', value, formApi.value);
   }
+  const options = {
+    resetBtn: false, // 不展示默认配置的重置和提交
+    submitBtn: false,
+    on: false, // 取消绑定on事件
+    form: {
+      layout: 'vertical',
+      labelAlign: 'left',
+    },
+    // 暂时默认
+    row: {
+      gutter: 0,
+    },
+    wrap: {
+      'asterisk-position': 'end',
+      'validate-trigger': ['change'],
+    },
+  };
 </script>
 
 <style scoped></style>

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

@@ -21,7 +21,7 @@
       >
         <div
           v-if="props.direction === 'horizontal' && props.expandDirection === 'right' && !props.disabled"
-          class="absolute right-0 h-full w-[12px]"
+          class="absolute right-0 z-40 h-full w-[12px]"
         >
           <div class="expand-icon expand-icon--left" @click="() => changeExpand()">
             <MsIcon

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

@@ -118,7 +118,7 @@
                 </a-menu>
               </div>
               <keep-alive>
-                <div class="leftContent mt-4 px-4">
+                <div class="leftContent mt-4 p-[24px]">
                   <template v-if="activeTab === 'detail'">
                     <TabDetail
                       ref="tabDetailRef"

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

@@ -272,6 +272,7 @@
   import useFeatureCaseStore from '@/store/modules/case/featureCase';
   import useUserStore from '@/store/modules/user';
   import { downloadByteFile, getGenerateId } from '@/utils';
+  import { scrollIntoView } from '@/utils/dom';
   import { hasAnyPermission } from '@/utils/permission';
 
   import type {
@@ -763,6 +764,16 @@
     }
   });
 
+  // onMounted(() => {
+  //   nextTick(() => {
+  //     console.log(document.querySelector('.preview-left'));
+
+  //     scrollIntoView(document.querySelector('.preview-left'), { block: 'center' });
+  //     console.log(caseFormRef.value?.$el.querySelector('.arco-form-item-message'));
+
+  //   });
+  // });
+
   defineExpose({
     caseFormRef,
     formRef,

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

@@ -10,7 +10,6 @@
     </div>
   </div>
   <div>
-    <div id="magnifier"></div>
     <!-- 用例评论 -->
     <div v-show="activeComment === 'caseComment'">
       <MsComment

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

@@ -78,10 +78,10 @@
       </div>
       <ms-base-table ref="tableRef" v-bind="propsRes" v-on="propsEvent">
         <template #demandName="{ record }">
-           <span class="ml-1 text-[rgb(var(--primary-5))]">
+          <span class="ml-1 text-[rgb(var(--primary-5))]">
             {{ record.demandName }}
             <span>({{ (record.children || []).length || 0 }})</span></span
-           >
+          >
         </template>
         <template v-for="item in customFields" :key="item.slotName" #[item.dataIndex]="{ record }">
           <span> {{ getSlotName(record, item) }} </span>
@@ -188,11 +188,11 @@
     //   ellipsis: true,
     // },
   ];
-  const fullColumns = ref<MsTableColumn>([...columns]);
+  let fullColumns: MsTableColumn = [...columns];
 
   const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(getThirdDemandList, {
     tableKey: TableKeyEnum.CASE_MANAGEMENT_TAB_DEMAND_PLATFORM,
-    columns: fullColumns.value,
+    columns: fullColumns,
     rowKey: 'demandId',
     scroll: { x: '100%' },
     heightUsed: 290,
@@ -221,12 +221,6 @@
     return filteredData;
   });
 
-  // 关联需求
-  const linkDemandDrawer = ref<boolean>(false);
-  function associatedDemand() {
-    linkDemandDrawer.value = true;
-  }
-
   const platformKeyword = ref<string>('');
 
   const initData = async () => {
@@ -242,7 +236,7 @@
   const tableRef = ref();
   const customFields = ref<any[]>([]);
   async function initColumn() {
-    fullColumns.value = [...columns];
+    fullColumns = [...columns];
     try {
       const res = await getThirdDemandList({
         current: 1,
@@ -258,12 +252,19 @@
           options: item.options,
         };
       }) as any;
-      fullColumns.value = [...columns, ...customFields.value];
+      fullColumns = [...columns, ...customFields.value];
     } catch (error) {
       console.log(error);
     }
   }
 
+  // 关联需求
+  const linkDemandDrawer = ref<boolean>(false);
+  function associatedDemand() {
+    linkDemandDrawer.value = true;
+    initData();
+  }
+
   function getSlotName(record: any, item: MsTableColumnData) {
     if (item?.options) {
       const currentRecord = {
@@ -332,12 +333,27 @@
     }
   }
 
+  async function initPlatform() {
+    try {
+      const result = await getCaseRelatedInfo(currentProjectId.value);
+      if (result && result.platform_key) {
+        platformInfo.value = { ...result };
+        initColumn();
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
   watch(
     () => linkDemandDrawer.value,
-    async (val) => {
+    (val) => {
       if (val) {
         resetSelector();
-        initData();
+        nextTick(() => {
+          tableRef.value?.initColumn(fullColumns);
+          initData();
+        });
       }
     }
   );
@@ -373,15 +389,7 @@
   }
 
   onMounted(async () => {
-    try {
+    initPlatform();
-      const result = await getCaseRelatedInfo(currentProjectId.value);
-      if (result && result.platform_key) {
-        platformInfo.value = { ...result };
-        initColumn();
-      }
-    } catch (error) {
-      console.log(error);
-    }
   });
 
   // watch(

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

@@ -44,7 +44,6 @@
 <script setup lang="ts">
   import { ref } from 'vue';
   import { useVModel } from '@vueuse/core';
-  import { Message } from '@arco-design/web-vue';
 
   import MsDrawer from '@/components/pure/ms-drawer/index.vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
@@ -107,12 +106,12 @@
     // },
   ];
 
-  const fullColumns = ref<MsTableColumn>([...columns]);
+  let fullColumns: MsTableColumn = [...columns];
   const customFields = ref<Record<string, any>[]>([]);
 
   const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(getThirdDemandList, {
     tableKey: TableKeyEnum.CASE_MANAGEMENT_TAB_DEMAND_PLATFORM,
-    columns: fullColumns.value,
+    columns: fullColumns,
     rowKey: 'demandId',
     scroll: { x: '100%' },
     selectable: true,
@@ -138,7 +137,6 @@
     return filteredData;
   });
 
-  // const platformInfo = ref<Record<string, any>>({});
   function getPlatName() {
     switch (props.platformInfo.platform_key) {
       case 'zentao':
@@ -205,7 +203,7 @@
 
   const tableRef = ref();
   async function initColumn() {
-    fullColumns.value = [...columns];
+    fullColumns = [...columns];
     try {
       const res = await getThirdDemandList({
         current: 1,
@@ -224,23 +222,17 @@
         }) as any;
       }
 
-      fullColumns.value.push(...customFields.value);
+      fullColumns = [...columns, ...customFields.value];
     } catch (error) {
       console.log(error);
     }
   }
 
-  // onBeforeMount(async () => {
+  watchEffect(() => {
-  //   try {
+    if (props.platformInfo.demand_platform_config) {
-  //     const result = await getCaseRelatedInfo(currentProjectId.value);
+      initColumn();
-  //     if (result && result.platform_key) {
+    }
-  //       platformInfo.value = { ...result };
+  });
-  //       initColumn();
-  //     }
-  //   } catch (error) {
-  //     console.log(error);
-  //   }
-  // });
 
   watch(
     () => innerLinkDemandVisible.value,
@@ -248,7 +240,10 @@
       if (val) {
         resetSelector();
         if (props.platformInfo.demand_platform_config) {
-          initData();
+          nextTick(() => {
+            tableRef.value?.initColumn(fullColumns);
+            initData();
+          });
         }
       }
     }

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

@@ -21,14 +21,20 @@
             }}</a-button
           ></span
         >
-        <MsRichText
+        <div v-if="isEditPreposition" class="px-2">
-          v-if="isEditPreposition"
+          <MsRichText
-          v-model:raw="detailForm.prerequisite"
+            v-model:raw="detailForm.prerequisite"
-          v-model:filed-ids="prerequisiteFileIds"
+            v-model:filed-ids="prerequisiteFileIds"
-          :upload-image="handleUploadImage"
+            :upload-image="handleUploadImage"
-          class="mt-2"
+            class="mt-2"
-        />
+          />
-        <div v-else v-dompurify-html="detailForm?.prerequisite || '-'" class="markdown-body"></div>
+        </div>
+
+        <div
+          v-else
+          v-dompurify-html="detailForm?.prerequisite || '-'"
+          class="markdown-body !break-words break-all"
+        ></div>
       </a-form-item>
       <a-form-item
         field="step"
@@ -69,6 +75,7 @@
         <div
           v-if="detailForm.caseEditType === 'TEXT' && !isEditPreposition"
           v-dompurify-html="detailForm.textDescription || '-'"
+          class="markdown-body !break-words break-all"
         ></div>
       </a-form-item>
       <a-form-item
@@ -82,7 +89,11 @@
           v-model:filed-ids="expectedResultFileIds"
           :upload-image="handleUploadImage"
         />
-        <div v-else v-dompurify-html="detailForm.expectedResult || '-'" class="markdown-body"></div>
+        <div
+          v-else
+          v-dompurify-html="detailForm.expectedResult || '-'"
+          class="markdown-body !break-words break-all"
+        ></div>
       </a-form-item>
       <a-form-item field="description" :label="t('caseManagement.featureCase.remark')">
         <MsRichText
@@ -91,7 +102,7 @@
           v-model:raw="detailForm.description"
           :upload-image="handleUploadImage"
         />
-        <div v-else v-dompurify-html="detailForm.description || '-'" class="markdown-body"></div>
+        <div v-else v-dompurify-html="detailForm.description || '-'" class="markdown-body !break-words break-all"></div>
       </a-form-item>
       <div v-if="isEditPreposition" class="flex justify-end">
         <a-button type="secondary" @click="handleCancel">{{ t('common.cancel') }}</a-button>

frontend/src/views/setting/organization/template/components/addTemplate.vue

@@ -124,10 +124,11 @@
             >
               <!-- 表单 -->
               <MsFormCreate
-                v-model:api="formItem.api"
+                v-model:api="formItem.fApi"
                 v-model:rule="formItem.formRules"
                 :option="configOptions"
                 @click="activeHandler(index)"
+                @change="(value, formApi) => changeHandler(value, formApi)"
               />
               <a-form
                 v-if="templateForm.enableThirdPart && route.query.type === 'BUG'"
@@ -354,6 +355,10 @@
     isError.value = false;
   }
 
+  function changeHandler(value: string, api: any) {
+    api.validateField(value);
+  }
+
   // 保存回调
   async function save() {
     try {
@@ -565,6 +570,7 @@
           {
             ...currentFormRules,
             title: item.fieldName,
+            field: item.fieldId,
             effect: {
               required: item.required,
             },

frontend/src/views/setting/organization/template/components/fieldSetting.ts

@@ -282,6 +282,7 @@ export const getTotalFieldOptionList = (totalData: DefinedFieldItem[]) => {
         {
           ...currentFormRules,
           title: item.name,
+          field: item.id,
           effect: {
             required: false,
           },