refactor: 设置器加载统一,代码优化 #269

jiangchunfu · jiangchunfu · commit 132f56e33724 · 2024-08-07T09:49:40.000+08:00
diff --git a/web/src/management/pages/edit/components/SetterField.vue b/web/src/management/pages/edit/components/SetterField.vue
@@ -37,8 +37,8 @@
   </el-form>
 </template>
 <script setup lang="ts">
-import { watch, ref, shallowRef } from 'vue'
-import { get as _get, pick as _pick, isFunction as _isFunction } from 'lodash-es'
+import { watch, ref, shallowRef, type Component } from 'vue'
+import { get as _get, pick as _pick, isFunction as _isFunction, values as _values } from 'lodash-es'
 
 import FormItem from '@/materials/setters/widgets/FormItem.vue'
 import setterLoader from '@/materials/setters/setterLoader'
@@ -48,6 +48,7 @@ import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
 interface Props {
   formConfigList: Array<any>
   moduleConfig: any
+  customComponents?: Record<string, Component>
 }
 
 interface Emit {
@@ -70,7 +71,7 @@ const formatValue = ({ item, moduleConfig }: any) => {
       result = _get(moduleConfig, key, item.value)
     }
     if (keys) {
-      result = _pick(moduleConfig, keys)
+      result = _values(_pick(moduleConfig, keys))
     }
 
     return result
@@ -79,7 +80,7 @@ const formatValue = ({ item, moduleConfig }: any) => {
 
 const formFieldData = ref<Array<any>>([])
 const init = ref<boolean>(true)
-const components = shallowRef<any>({})
+const components = shallowRef<any>(props.customComponents || {})
 
 const handleFormChange = (data: any, formConfig: any) => {
   if (_isFunction(formConfig?.valueSetter)) {
@@ -132,13 +133,15 @@ const normalizationValues = (configList: Array<any> = []) => {
 const registerComponents = async (formFieldData: any) => {
   let innerSetters: Array<any> = []
 
-  const setters = formFieldData.map((item: any) => {
-    if (item.type === 'Customed') {
-      innerSetters.push(...(item.content || []).map((content: any) => content.type))
-    }
+  const setters = formFieldData
+    .filter((item: any) => !item.custom)
+    .map((item: any) => {
+      if (item.type === 'Customed') {
+        innerSetters.push(...(item.content || []).map((content: any) => content.type))
+      }
 
-    return item.type
-  })
+      return item.type
+    })
 
   const settersSet = new Set([...setters, ...innerSetters])
   const settersArr = Array.from(settersSet)
diff --git a/web/src/management/pages/edit/modules/resultModule/SetterPanel.vue b/web/src/management/pages/edit/modules/resultModule/SetterPanel.vue
@@ -3,34 +3,23 @@
     <div class="setter-title">
       {{ currentEditText }}
     </div>
-    <el-form class="question-config-form" label-position="top" @submit.prevent>
-      <template v-for="(item, index) in formFields" :key="index">
-        <FormItem
-          v-if="item.type && !item.hidden && Boolean(registerTypes[item.type])"
-          :form-config="item"
-          :style="item.style"
-        >
-          <Component
-            v-if="Boolean(registerTypes[item.type])"
-            :is="components[item.type]"
-            :module-config="moduleConfig"
-            :form-config="item"
-            @form-change="handleFormChange"
-          />
-        </FormItem>
-      </template>
-    </el-form>
+    <SetterField
+      class="question-config-form"
+      label-position="top"
+      :form-config-list="formFields"
+      :module-config="moduleConfig"
+      @form-change="handleFormChange"
+    />
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, shallowRef, toRef } from 'vue'
+import { computed, toRef } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useEditStore } from '@/management/stores/edit'
 import { get as _get } from 'lodash-es'
 
-import FormItem from '@/materials/setters/widgets/FormItem.vue'
-import setterLoader from '@/materials/setters/setterLoader'
 import statusConfig from '@/management/pages/edit/setterConfig/statusConfig'
+import SetterField from '@/management/pages/edit/components/SetterField.vue'
 
 const textMap = {
   Success: '提交成功页面配置',
@@ -41,8 +30,6 @@ const editStore = useEditStore()
 const { currentEditStatus } = storeToRefs(editStore)
 const { schema, changeSchema } = editStore
 
-const components = shallowRef<any>({})
-const registerTypes = ref<any>({})
 const moduleConfig = toRef(schema, 'submitConf')
 const currentEditText = computed(() => (textMap as any)[currentEditStatus.value])
 const formFields = computed(() => {
@@ -53,8 +40,6 @@ const formFields = computed(() => {
     return { ...item, value }
   })
 
-  registerComponents(list)
-
   return list
 })
 
@@ -64,39 +49,6 @@ const handleFormChange = ({ key, value }: any) => {
     value
   })
 }
-
-const registerComponents = async (formFieldData: any) => {
-  const setters = formFieldData.map((item: any) => item.type)
-  const settersSet = new Set(setters)
-  const settersArr = Array.from(settersSet)
-  const allSetters = settersArr.map((item) => {
-    return {
-      type: item,
-      path: item
-    }
-  })
-
-  try {
-    const comps = await setterLoader.loadComponents(allSetters)
-
-    for (const comp of comps) {
-      if (!comp) {
-        continue
-      }
-
-      const { type, component, err } = comp
-
-      if (!err) {
-        const componentName = component.name
-
-        components.value[type] = component
-        registerTypes.value[type] = componentName
-      }
-    }
-  } catch (err) {
-    console.error(err)
-  }
-}
 </script>
 <style lang="scss" scoped>
 .question-edit-form {
diff --git a/web/src/management/pages/edit/modules/settingModule/SettingPanel.vue b/web/src/management/pages/edit/modules/settingModule/SettingPanel.vue
@@ -2,146 +2,57 @@
   <div class="question-config">
     <div class="question-config-wrapper">
       <div class="question-config-main">
-        <div v-for="form of setterList" :key="form.key" class="config-item">
+        <div v-for="form of formConfigList" :key="form.key" class="config-item">
           <div class="config-title">
             <span>
               {{ form.title }}
             </span>
           </div>
-          <el-form
+          <SetterField
+            :key="form.key"
             class="question-config-form"
             label-position="left"
             label-width="200px"
-            @submit.prevent
-          >
-            <template v-for="(item, index) in form.formList">
-              <FormItem
-                v-if="item.type && !item.hidden && Boolean(registerTypes[item.type])"
-                :key="index"
-                :form-config="item"
-                :style="item.style"
-              >
-                <Component
-                  v-if="Boolean(registerTypes[item.type])"
-                  :is="components[item.type]"
-                  :module-config="form.dataConfig"
-                  :form-config="item"
-                  @form-change="handleFormChange"
-                />
-              </FormItem>
-            </template>
-          </el-form>
+            :form-config-list="form.formList"
+            :module-config="baseConf"
+            :custom-components="{
+              WhiteList,
+              TeamMemberList
+            }"
+            @form-change="handleFormChange"
+          ></SetterField>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, onMounted, shallowRef } from 'vue'
-import {
-  cloneDeep as _cloneDeep,
-  isArray as _isArray,
-  get as _get,
-  isFunction as _isFunction
-} from 'lodash-es'
+import { ref, toRef } from 'vue'
 import { useEditStore } from '@/management/stores/edit'
 
 import baseConfig from '@/management/pages/edit/setterConfig/baseConfig'
 import baseFormConfig from '@/management/pages/edit/setterConfig/baseFormConfig'
-import FormItem from '@/materials/setters/widgets/FormItem.vue'
-import setterLoader from '@/materials/setters/setterLoader'
+import SetterField from '@/management/pages/edit/components/SetterField.vue'
 
 import WhiteList from './components/WhiteList.vue'
 import TeamMemberList from './components/TeamMemberList.vue'
 
 const editStore = useEditStore()
 const { schema, changeSchema } = editStore
+const baseConf = toRef(schema, 'baseConf')
 
-const formConfigList = ref<Array<any>>([])
-const components = shallowRef<any>({
-  ['WhiteList']: WhiteList,
-  ['TeamMemberList']: TeamMemberList
-})
-// 登记默认注册的高级设置器组件
-const registerTypes = ref<any>({
-  WhiteList: 'WhiteList',
-  TeamMemberList: 'TeamMemberList'
-})
+const baseConfigWithFormList = baseConfig.map((item) => ({
+  ...item,
+  formList: item.formList.map((key) => (baseFormConfig as any)[key]).filter((config) => !!config)
+}))
+const formConfigList = ref<Array<any>>(baseConfigWithFormList)
 
-const schemaBaseConf = computed(() => schema?.baseConf || {})
-
-const setterList = computed(() => {
-  const list = _cloneDeep(formConfigList.value)
-
-  return list.map((form) => {
-    const dataConfig: any = {}
-
-    for (const formItem of form.formList) {
-      const formKey = formItem.key ? formItem.key : formItem.keys
-      let formValue
-      if (_isArray(formKey)) {
-        formValue = []
-        for (const key of formKey) {
-          const val = _get(schema, key, formItem.value)
-          formValue.push(val)
-          dataConfig[key] = val
-        }
-      } else {
-        formValue = _get(schema, formKey, formItem.value)
-        dataConfig[formKey] = formValue
-      }
-      formItem.value = formValue
-    }
-    // 动态显隐设置器
-    form.formList = form.formList.filter((item: any) => {
-      if (_isFunction(item.relyFunc)) {
-        return item.relyFunc(schemaBaseConf.value)
-      }
-      return true
-    })
-
-    form.dataConfig = dataConfig
-
-    return form
-  })
-})
-
-const handleFormChange = (data: any) => {
+const handleFormChange = ({ key, value }: any) => {
   changeSchema({
-    key: data.key,
-    value: data.value
+    key: `baseConf.${key}`,
+    value: value
   })
 }
-
-onMounted(async () => {
-  formConfigList.value = baseConfig.map((item) => ({
-    ...item,
-    formList: item.formList.map((key) => (baseFormConfig as any)[key]).filter((config) => !!config)
-  }))
-
-  const formList = formConfigList.value.map((item) => item.formList).flat()
-  const typeList = formList
-    .filter((item) => !item.custom)
-    .map((item) => ({
-      type: item.type,
-      path: item.path || item.type
-    }))
-
-  const comps = await setterLoader.loadComponents(typeList)
-  for (const comp of comps) {
-    if (!comp) {
-      continue
-    }
-
-    const { type, component, err } = comp
-    if (!err) {
-      const componentName = component.name
-
-      components.value[type] = component
-      registerTypes.value[type] = componentName
-    }
-  }
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/management/pages/edit/setterConfig/baseFormConfig.js b/web/src/management/pages/edit/setterConfig/baseFormConfig.js
