refactor: 重构动态表单收集框回显逻辑

ui/src/components/dynamics-form/constructor/index.vue

@@ -38,12 +38,12 @@
   </el-form>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, nextTick } from 'vue'
 import type { FormInstance } from 'element-plus'
-
+import _ from 'lodash'
 const props = withDefaults(
   defineProps<{
-    modelValue: any
+    modelValue?: any
     input_type_list?: Array<{ label: string; value: string }>
   }>(),
   {
@@ -102,19 +102,24 @@ const validate = () => {
 
 onMounted(() => {
   if (props.modelValue) {
-    const data = props.modelValue
-    form_data.value = data
-    // 处理option
-    form_data.value.input_type = data.input_type + 'Constructor'
-    if (data.label && data.label.input_type === 'TooltipLabel') {
-      form_data.value.tooltip = data.label.attrs.tooltip
-      form_data.value.label = data.label.label
-    } else {
-      form_data.value.label = data.label
-    }
+    rander(props.modelValue)
   }
 })
+const rander = (data: any) => {
+  form_data.value.required = data.required
+  form_data.value.field = data.field
+  form_data.value.input_type = data.input_type + 'Constructor'
+  if (data.label && data.label.input_type === 'TooltipLabel') {
+    form_data.value.tooltip = data.label.attrs.tooltip
+    form_data.value.label = data.label.label
+  } else {
+    form_data.value.label = data.label
+  }
+  nextTick(() => {
+    componentFormRef.value?.rander(data)
+  })
+}
 
-defineExpose({ getData, validate })
+defineExpose({ getData, validate, rander })
 </script>
 <style lang="scss"></style>

ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue

@@ -11,7 +11,6 @@
   </el-form-item>
   <el-form-item label="格式" required>
     <el-select
-      @change="format_change"
       v-model="formValue.format"
       filterable
       default-first-option
@@ -95,11 +94,16 @@ const getData = () => {
     default_value: formValue.value.default_value
   }
 }
-defineExpose({ getData })
+const rander = (form_data: any) => {
+  formValue.value.type = form_data.attrs.type
+  formValue.value.format = form_data.attrs?.format
+  formValue.value.default_value = form_data.default_value
+}
+defineExpose({ getData, rander })
 onMounted(() => {
-  formValue.value.type = props.modelValue.attrs?.type || 'datetime'
-  formValue.value.format = props.modelValue.attrs?.format || 'YYYY-MM-DD HH:mm:ss'
-  formValue.value.default_value = props.modelValue.default_value || ''
+  formValue.value.type = 'datetime'
+  formValue.value.format = 'YYYY-MM-DD HH:mm:ss'
+  formValue.value.default_value = ''
 })
 </script>
 <style lang="scss"></style>

ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue

@@ -24,7 +24,6 @@
         </el-icon>
       </el-button>
     </div>
-
   </el-form-item>
   <el-form-item
     label="默认值"
@@ -33,7 +32,12 @@
     :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
   >
     <el-select v-model="formValue.default_value">
-      <el-option v-for="(option, index) in formValue.option_list" :key="index" :label="option.value" :value="option.value" />
+      <el-option
+        v-for="(option, index) in formValue.option_list"
+        :key="index"
+        :label="option.value"
+        :value="option.value"
+      />
     </el-select>
   </el-form-item>
 </template>
@@ -61,7 +65,6 @@ const delOption = (index: number) => {
   formValue.value.option_list.splice(index, 1)
 }
 
-
 const getData = () => {
   return {
     input_type: 'SingleSelect',
@@ -72,9 +75,13 @@ const getData = () => {
     option_list: formValue.value.option_list
   }
 }
-defineExpose({ getData })
+const rander = (form_data: any) => {
+  formValue.value.option_list = form_data.option_list
+}
+
+defineExpose({ getData, rander })
 onMounted(() => {
-  formValue.value.option_list = props.modelValue.option_list || []
+  formValue.value.option_list = []
 })
 </script>
 <style lang="scss" scoped>

ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form-item label="取值范围" required>
-    <el-col :span="11">
+    <el-col :span="11" style="padding-left: 0">
       <el-input-number style="width: 100%" v-model="formValue.min" controls-position="right" />
     </el-col>
     <el-col :span="2" class="text-center">
@@ -61,13 +61,22 @@ const getData = () => {
     default_value: formValue.value.default_value
   }
 }
-defineExpose({ getData })
+
+const rander = (form_data: any) => {
+  const attrs = form_data.attrs
+  formValue.value.option_list = form_data.option_list
+  formValue.value.min = attrs.min
+  formValue.value.max = attrs.max
+  formValue.value.step = attrs.step
+  formValue.value.default_value = form_data.default_value
+}
+
+defineExpose({ getData, rander })
 onBeforeMount(() => {
-  formValue.value.min = props.modelValue.attrs?.min || 0
-  formValue.value.max = props.modelValue.attrs?.max || 20
-  formValue.value.step = props.modelValue.attrs?.step || 0.1
-  formValue.value.precision = props.modelValue.attrs?.precision || 1
-  formValue.value.default_value = props.modelValue.default_value || 1
+  formValue.value.min = 0
+  formValue.value.max = 20
+  formValue.value.step = 0.1
+  formValue.value.default_value = 1
 })
 </script>
 <style lang="scss"></style>

ui/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue

@@ -31,9 +31,13 @@ const getData = () => {
     default_value: formValue.value.default_value
   }
 }
-defineExpose({ getData })
+
+const rander = (form_data: any) => {
+  formValue.value.default_value = form_data.default_value
+}
+defineExpose({ getData, rander })
 onMounted(() => {
-  formValue.value.default_value = formValue.value.default_value || false
+  formValue.value.default_value = false
 })
 </script>
 <style lang="scss"></style>

ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form-item label="取值范围" required>
-    <el-col :span="11">
+    <el-col :span="11" style="padding-left: 0">
       <el-input-number
         style="width: 100%"
         v-model="formValue.min_length"
@@ -62,12 +62,17 @@ const getData = () => {
     default_value: formValue.value.default_value
   }
 }
-defineExpose({ getData })
+const rander = (form_data: any) => {
+  const attrs = form_data.attrs || {}
+  formValue.value.min_length = attrs.min_length
+  formValue.value.max_length = attrs.max_length
+  formValue.value.default_value = form_data.default_value
+}
+defineExpose({ getData, rander })
 onMounted(() => {
-  formValue.value.required = props.modelValue.required
-  formValue.value.min_length = props.modelValue.attrs?.min_length || 0
-  formValue.value.max_length = props.modelValue.attrs?.max_length || 20
-  formValue.value.default_value = props.modelValue.default_value || ''
+  formValue.value.min_length = 0
+  formValue.value.max_length = 20
+  formValue.value.default_value = ''
 })
 </script>
 <style lang="scss"></style>