From 00d31f0fdd70688baef52ddf8a2b67d9c034acdb Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Mon, 21 Oct 2024 14:24:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E8=A1=A8=E5=8D=95=E6=94=B6=E9=9B=86=E6=A1=86=E5=9B=9E?=
 =?UTF-8?q?=E6=98=BE=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dynamics-form/constructor/index.vue       | 33 +++++++++++--------
 .../items/DatePickerConstructor.vue           | 14 +++++---
 .../items/SingleSelectConstructor.vue         | 17 +++++++---
 .../constructor/items/SliderConstructor.vue   | 23 +++++++++----
 .../items/SwitchInputConstructor.vue          |  8 +++--
 .../items/TextInputConstructor.vue            | 17 ++++++----
 6 files changed, 73 insertions(+), 39 deletions(-)

diff --git a/ui/src/components/dynamics-form/constructor/index.vue b/ui/src/components/dynamics-form/constructor/index.vue
index baaa953be..b605daf62 100644
--- a/ui/src/components/dynamics-form/constructor/index.vue
+++ b/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>
diff --git a/ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue b/ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue
index bdf6148a5..44d1f91d4 100644
--- a/ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue
+++ b/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>
diff --git a/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
index b8085cb64..17d52a268 100644
--- a/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
+++ b/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>
diff --git a/ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue b/ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue
index 6d6b6c3b4..04462a600 100644
--- a/ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue
+++ b/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>
diff --git a/ui/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue b/ui/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue
index 4ef9e5142..80ba8dbc0 100644
--- a/ui/src/components/dynamics-form/constructor/items/SwitchInputConstructor.vue
+++ b/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>
diff --git a/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue b/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue
index 3ff74bf25..1f23ad846 100644
--- a/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue
+++ b/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>