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

2024-03-16 15:39:13 +08:00 · 2024-03-16 15:39:13 +08:00 · 13adc882ea
parent b86f722afe
commit 13adc882ea
10 changed files with 123 additions and 63 deletions
--- a/frontend/src/components/pure/ms-form-create/formCreate.vue
+++ b/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>();
-
-  watchEffect(() => {
-    formApi.value = props.api;
+  const formApi = computed({
+    get() {
+      return 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>
--- a/frontend/src/components/pure/ms-split-box/index.vue
+++ b/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
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
+++ b/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"
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTemplateDetail.vue
+++ b/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,
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/tabCommentIndex.vue
+++ b/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
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/demand.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/demand.vue
@ -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();
+        nextTick(() => {
+          tableRef.value?.initColumn(fullColumns);
          initData();
+        });
      }
    }
  );
@ -373,15 +389,7 @@
  }

  onMounted(async () => {
-    try {
-      const result = await getCaseRelatedInfo(currentProjectId.value);
-      if (result && result.platform_key) {
-        platformInfo.value = { ...result };
-        initColumn();
-      }
-    } catch (error) {
-      console.log(error);
-    }
+    initPlatform();
  });

  // watch(
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/thirdDemandDrawer.vue
+++ b/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 () => {
-  //   try {
-  //     const result = await getCaseRelatedInfo(currentProjectId.value);
-  //     if (result && result.platform_key) {
-  //       platformInfo.value = { ...result };
-  //       initColumn();
-  //     }
-  //   } catch (error) {
-  //     console.log(error);
-  //   }
-  // });
+  watchEffect(() => {
+    if (props.platformInfo.demand_platform_config) {
+      initColumn();
+    }
+  });

  watch(
    () => innerLinkDemandVisible.value,
@ -248,7 +240,10 @@
      if (val) {
        resetSelector();
        if (props.platformInfo.demand_platform_config) {
+          nextTick(() => {
+            tableRef.value?.initColumn(fullColumns);
            initData();
+          });
        }
      }
    }
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue
@ -21,14 +21,20 @@
            }}</a-button
          ></span
        >
+        <div v-if="isEditPreposition" class="px-2">
          <MsRichText
-          v-if="isEditPreposition"
            v-model:raw="detailForm.prerequisite"
            v-model:filed-ids="prerequisiteFileIds"
            :upload-image="handleUploadImage"
            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>
--- a/frontend/src/views/setting/organization/template/components/addTemplate.vue
+++ b/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,
            },
--- a/frontend/src/views/setting/organization/template/components/fieldSetting.ts
+++ b/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,
          },