refactor(系统设置): 服务集成字段替换联调

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

@@ -1,5 +1,5 @@
 <template>
-  <FormCreate v-model:api="fApi" :rule="formRuleList" :option="props.options || option"></FormCreate>
+  <FormCreate v-model:api="fApi" :rule="formRuleList" :option="props.options || option"> </FormCreate>
 </template>
 
 <script setup lang="ts">
@@ -180,7 +180,7 @@
         // 梳理表单所需要属性
         props: {
           ...FieldTypeFormRules[currentTypeForm].props,
-          'tooltip': item.tooltip,
+          // 'tooltip': item.tooltip,
           // 表单后边展示图片
           'instructionsIcon': item.instructionsIcon,
           // 下拉选项请求 必须是开启远程搜索才有该方法
@@ -194,11 +194,14 @@
           'modelValue': item.value,
           'options': currentOptions, // 当前已经存在的options
           'disabled': item?.props?.disabled,
-          'type': item.control?.length && item.type === 'RADIO' ? 'button' : '',
+          'type': item.control?.length && item.type === 'RADIO' ? 'button' : 'radio',
         },
         sourceType: item.type || '',
         control: [],
         update: item.update,
+        wrap: {
+          tooltip: item.tooltip,
+        },
       };
       // 如果不存在关联name删除link关联属性
       if (!ruleItem.link.filter((ink: string) => ink).length) {
@@ -208,6 +211,9 @@
       if (ruleItem.type !== 'SearchSelect') {
         delete ruleItem.props.inputSearch;
       }
+      if (ruleItem.type !== 'RADIO') {
+        delete ruleItem.props.type;
+      }
       let controlItem;
       if (item?.control) {
         controlItem = item.control.map((control: { value: string; rule: FormItem[] }) => {
@@ -273,6 +279,12 @@
   defineExpose({
     formRuleList,
   });
+
+  onUnmounted(() => {
+    formItems.value = [];
+    controlFormItemsMaps.value = {};
+    cascadeItemsMaps.value = {};
+  });
 </script>
 
 <style scoped></style>

frontend/src/components/pure/ms-form-create/types.ts

@@ -64,7 +64,7 @@ export interface FormItem {
   value: string | number | boolean | string[] | number[] | Record<string, any> | Record<string, any>[];
   subDesc?: string; // 表单项描述，在表单项下方显示
   inputSearch?: boolean; // 是否支持远程搜索
-  tooltip?: ''; // 表单后边的提示info
+  tooltip?: string; // 表单后边的提示info
   instructionsIcon?: ''; // 是否有图片在表单后边展示
   optionMethod?: string; // 请求检索的方法 两个参数 表单项的所有值
   options?: FormItemDefaultOptions[];

frontend/src/views/setting/organization/serviceIntegration/components/configModal.vue

@@ -5,10 +5,12 @@
     class="ms-modal-form ms-modal-medium"
     :ok-text="t('organization.member.Confirm')"
     :cancel-text="t('organization.member.Cancel')"
+    unmount-on-close
   >
     <template #title> {{ title }} </template>
-    <div>
-      <MsFormCreate v-model:api="fApi" :rule="formRules" :option="options" />
+    <div class="wrapper">
+      <MsFormCreate v-model:api="fApi" v-model:form-item="formItemList" :form-rule="formRules" :option="options">
+      </MsFormCreate>
     </div>
     <template #footer>
       <div class="flex justify-between">
@@ -40,7 +42,8 @@
   import { ref, watch, watchEffect } from 'vue';
   import { Message } from '@arco-design/web-vue';
 
-  import MsFormCreate from '@/components/pure/ms-form-create/formCreate.vue';
+  import MsFormCreate from '@/components/pure/ms-form-create/ms-form-create.vue';
+  import type { FormItem, FormRuleItem } from '@/components/pure/ms-form-create/types';
 
   import { addOrUpdate, configScript, postValidate } from '@/api/modules/setting/serviceIntegration';
   import { useI18n } from '@/hooks/useI18n';
@@ -49,8 +52,6 @@
 
   import type { AddOrUpdateServiceModel, ServiceItem } from '@/models/setting/serviceIntegration';
 
-  import { FormRule } from '@form-create/arco-design';
-
   const { t } = useI18n();
   const appStore = useAppStore();
   const lastOrganizationId = appStore.currentOrgId;
@@ -83,7 +84,8 @@
       'validate-trigger': ['change'],
     },
   });
-  const formRules = ref<FormRule>();
+  const formRules = ref<FormItem[]>([]);
+  const formItemList = ref<FormRuleItem[]>([]);
   const title = ref<string>('');
   const formItem = ref<AddOrUpdateServiceModel>({});
   watchEffect(() => {
@@ -138,7 +140,7 @@
   };
   const saveHandler = () => {
     fApi.value?.validate((valid: any, fail: any) => {
-      if (valid) {
+      if (valid === true) {
         submit();
       } else {
         console.log(fail);
@@ -149,13 +151,15 @@
   // 获取配置脚本
   const getPluginScript = async (cuurentPluginId: string) => {
     try {
+      formRules.value = [];
+      formItemList.value = [];
       const result = await configScript(cuurentPluginId);
       formRules.value = [...result];
       if (type.value === 'edit') {
-        fApi.value.nextTick(() => {
-          fApi.value.setValue({ ...formItem.value.configuration });
-          fApi.value.refresh();
-        });
+        // fApi.value.nextTick(() => {
+        fApi.value.setValue({ ...formItem.value.configuration });
+        fApi.value.refresh();
+        // });
       }
     } catch (error) {
       console.log(error);

frontend/src/views/setting/organization/serviceIntegration/components/serviceList.vue

@@ -107,7 +107,7 @@
   import { useRouter } from 'vue-router';
 
   import MsCard from '@/components/pure/ms-card/index.vue';
-  import ConfigModal from './conifgModal.vue';
+  import ConfigModal from './configModal.vue';
 
   import { addOrUpdate, getServiceList, getValidate, resetService } from '@/api/modules/setting/serviceIntegration';
   import { useI18n } from '@/hooks/useI18n';