From 046aa2aed0a40fd6c639c99e9797f6e78b9fab9e Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 30 Dec 2024 16:38:26 +0800
Subject: [PATCH] fix: dynamics form default value style

---
 .../items/DatePickerConstructor.vue           | 22 ++++++++++-----
 .../items/JsonInputConstructor.vue            | 28 +++++++++++++------
 .../items/MultiSelectConstructor.vue          | 19 +++++++++----
 .../items/RadioCardConstructor.vue            | 19 +++++++++----
 .../constructor/items/RadioRowConstructor.vue | 18 ++++++++----
 .../items/SingleSelectConstructor.vue         | 20 +++++++++----
 6 files changed, 87 insertions(+), 39 deletions(-)

diff --git a/ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue b/ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue
index 68df25abc..92d2a768c 100644
--- a/ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue
@@ -26,16 +26,15 @@
     </el-select>
   </el-form-item>
   <el-form-item
+    class="defaultValueItem"
     :required="formValue.required"
     prop="default_value"
+    label="默认值"
     :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
   >
-    <template #label>
-      <div class="flex-between">
-        默认值
-        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-      </div>
-    </template>
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
     <el-date-picker
       v-model="formValue.default_value"
       :type="formValue.type"
@@ -115,4 +114,13 @@ onBeforeMount(() => {
   }
 })
 </script>
-<style lang="scss"></style>
+<style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
+</style>
diff --git a/ui/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue b/ui/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue
index 7bea45fd5..9a028de8d 100644
--- a/ui/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue
@@ -1,11 +1,14 @@
 <template>
-  <el-form-item :required="formValue.required" prop="default_value" :rules="[default_value_rule]">
-    <template #label>
-      <div class="flex-between">
-        默认值
-        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-      </div>
-    </template>
+  <el-form-item
+    class="defaultValueItem"
+    label="默认值"
+    :required="formValue.required"
+    prop="default_value"
+    :rules="[default_value_rule]"
+  >
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
     <JsonInput ref="jsonInputRef" v-model="formValue.default_value"> </JsonInput>
   </el-form-item>
 </template>
@@ -66,4 +69,13 @@ onMounted(() => {
   }
 })
 </script>
-<style lang="scss"></style>
+<style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
+</style>
diff --git a/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
index 83c117ca4..c0b08855f 100644
--- a/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
@@ -46,16 +46,15 @@
     </el-row>
   </el-form-item>
   <el-form-item
+    class="defaultValueItem"
+    label="默认值"
     :required="formValue.required"
     prop="default_value"
     :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
   >
-    <template #label>
-      <div class="flex-between">
-        默认值
-        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-      </div>
-    </template>
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
     <el-select
       class="m-2"
       multiple
@@ -130,6 +129,14 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
 :deep(.el-form-item__label) {
   display: block;
 }
diff --git a/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue b/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
index ae9c1491f..ade68f3fe 100644
--- a/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
@@ -47,16 +47,15 @@
     </el-row>
   </el-form-item>
   <el-form-item
+    class="defaultValueItem"
+    label="默认值"
     :required="formValue.required"
     prop="default_value"
     :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
   >
-    <template #label>
-      <div class="flex-between">
-        默认值
-        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-      </div>
-    </template>
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
     <RadioCard
       :form-field="formField"
       v-model="formValue.default_value"
@@ -123,6 +122,14 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
 :deep(.el-form-item__label) {
   display: block;
 }
diff --git a/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue b/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue
index ccb11abc2..8935b466d 100644
--- a/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue
@@ -47,17 +47,15 @@
     </el-row>
   </el-form-item>
   <el-form-item
+    class="defaultValueItem"
     label="默认值"
     :required="formValue.required"
     prop="default_value"
     :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
   >
-    <template #label>
-      <div class="flex-between">
-        默认值
-        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-      </div>
-    </template>
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
     <RadioRow
       :form-field="formField"
       v-model="formValue.default_value"
@@ -124,6 +122,14 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
 :deep(.el-form-item__label) {
   display: block;
 }
diff --git a/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
index ef32ebe83..c25bb47d4 100644
--- a/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
@@ -47,16 +47,16 @@
     </el-row>
   </el-form-item>
   <el-form-item
+    class="defaultValueItem"
     :required="formValue.required"
     prop="default_value"
+    label="默认值"
     :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
   >
-    <template #label>
-      <div class="flex-between">
-        默认值
-        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
-      </div>
-    </template>
+    <div class="defaultValueCheckbox">
+      <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+    </div>
+
     <el-select v-model="formValue.default_value" :teleported="false" popper-class="default-select">
       <el-option
         v-for="(option, index) in formValue.option_list"
@@ -123,6 +123,14 @@ onMounted(() => {
 })
 </script>
 <style lang="scss" scoped>
+.defaultValueItem {
+  position: relative;
+  .defaultValueCheckbox {
+    position: absolute;
+    right: 0;
+    top: -35px;
+  }
+}
 :deep(.el-form-item__label) {
   display: block;
 }