refactor: 支持配置必填项是否展示

--story=1017498 --user=刘瑞斌【高级编排应用】用户输入参数默认值增加显示设置优化 https://www.tapd.cn/57709429/s/1635457
1Panel-dev · Dec 23, 2024 · 92ea2fc · 92ea2fc
1 parent 6c7ae3f
commit 92ea2fc
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 8 deletions.
diff --git a/ui/src/components/dynamics-form/constructor/index.vue b/ui/src/components/dynamics-form/constructor/index.vue
@@ -100,6 +100,7 @@ const getData = () => {
     required: form_data.value.required,
     field: form_data.value.field,
     default_value: form_data.value.default_value,
+    show_default_value: form_data.value.show_default_value,
     ...componentFormRef.value.getData()
   }
 }

diff --git a/ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue b/ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue
@@ -26,11 +26,16 @@
     </el-select>
   </el-form-item>
   <el-form-item
-    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>
     <el-date-picker
       v-model="formValue.default_value"
       :type="formValue.type"
@@ -91,19 +96,22 @@ const getData = () => {
       format: formValue.value.format,
       'value-format': formValue.value.format
     },
-    default_value: formValue.value.default_value
+    default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value,
   }
 }
 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 || ''
+  formValue.value.show_default_value = form_data.show_default_value
 }
 defineExpose({ getData, rander })
 onBeforeMount(() => {
   formValue.value.type = 'datetime'
   formValue.value.format = 'YYYY-MM-DD HH:mm:ss'
   formValue.value.default_value = ''
+  formValue.value.show_default_value = true
 })
 </script>
 <style lang="scss"></style>
diff --git a/ui/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue b/ui/src/components/dynamics-form/constructor/items/JsonInputConstructor.vue
@@ -1,10 +1,15 @@
 <template>
   <el-form-item
-    label="默认值"
     :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>
     <JsonInput ref="jsonInputRef" v-model="formValue.default_value"> </JsonInput>
   </el-form-item>
 </template>
@@ -40,7 +45,8 @@ const getData = () => {
         }
       ]
     },
-    default_value: formValue.value.default_value
+    default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value,
   }
 }
 
@@ -55,10 +61,12 @@ const default_value_rule = {
 
 const rander = (form_data: any) => {
   formValue.value.default_value = form_data.default_value
+  formValue.value.show_default_value = form_data.show_default_value
 }
 defineExpose({ getData, rander })
 onMounted(() => {
   formValue.value.default_value = {}
+  formValue.value.show_default_value = true
 })
 </script>
 <style lang="scss"></style>
diff --git a/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
@@ -46,11 +46,16 @@
     </el-row>
   </el-form-item>
   <el-form-item
-    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>
     <el-select
       class="m-2"
       multiple
@@ -103,6 +108,7 @@ const getData = () => {
     input_type: 'MultiSelect',
     attrs: {},
     default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value,
     text_field: 'label',
     value_field: 'value',
     option_list: formValue.value.option_list
@@ -111,12 +117,14 @@ const getData = () => {
 const rander = (form_data: any) => {
   formValue.value.option_list = form_data.option_list || []
   formValue.value.default_value = form_data.default_value
+  formValue.value.show_default_value = form_data.show_default_value
 }
 
 defineExpose({ getData, rander })
 onMounted(() => {
   formValue.value.option_list = []
   formValue.value.default_value = ''
+  formValue.value.show_default_value = true
 
   addOption()
 })

diff --git a/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue b/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
@@ -47,11 +47,16 @@
     </el-row>
   </el-form-item>
   <el-form-item
-    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>
     <RadioCard
       :form-field="formField"
       v-model="formValue.default_value"
@@ -96,6 +101,7 @@ const getData = () => {
     input_type: 'RadioCard',
     attrs: {},
     default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value,
     text_field: 'label',
     value_field: 'value',
     option_list: formValue.value.option_list
@@ -104,12 +110,14 @@ const getData = () => {
 const rander = (form_data: any) => {
   formValue.value.option_list = form_data.option_list || []
   formValue.value.default_value = form_data.default_value
+  formValue.value.show_default_value = form_data.show_default_value
 }
 
 defineExpose({ getData, rander })
 onMounted(() => {
   formValue.value.option_list = []
   formValue.value.default_value = ''
+  formValue.value.show_default_value = true
 
   addOption()
 })

diff --git a/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
@@ -47,11 +47,16 @@
     </el-row>
   </el-form-item>
   <el-form-item
-    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>
     <el-select v-model="formValue.default_value" :teleported="false" popper-class="default-select">
       <el-option
         v-for="(option, index) in formValue.option_list"
@@ -95,6 +100,7 @@ const getData = () => {
     input_type: 'SingleSelect',
     attrs: {},
     default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value,
     text_field: 'label',
     value_field: 'value',
     option_list: formValue.value.option_list
@@ -109,6 +115,7 @@ defineExpose({ getData, rander })
 onMounted(() => {
   formValue.value.option_list = []
   formValue.value.default_value = ''
+  formValue.value.show_default_value = true
 
   addOption()
 })

diff --git a/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue b/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue
@@ -47,13 +47,18 @@
   </el-form-item>
 
   <el-form-item
-    label="默认值"
     :required="formValue.required"
     prop="default_value"
     :rules="
       formValue.required ? [{ required: true, message: '默认值 为必填属性' }, ...rules] : rules
     "
   >
+    <template #label>
+      <div class="flex-between">
+        默认值
+        <el-checkbox v-model="formValue.show_default_value" label="显示默认值" />
+      </div>
+    </template>
     <el-input
       v-model="formValue.default_value"
       :maxlength="formValue.maxlength"
@@ -96,6 +101,7 @@ const getData = () => {
       'show-word-limit': true
     },
     default_value: formValue.value.default_value,
+    show_default_value: formValue.value.show_default_value,
     props_info: {
       rules: formValue.value.required
         ? [
@@ -153,6 +159,7 @@ onMounted(() => {
   formValue.value.minlength = 0
   formValue.value.maxlength = 20
   formValue.value.default_value = ''
+  formValue.value.show_default_value = true
 })
 </script>
 <style lang="scss"></style>
diff --git a/ui/src/components/dynamics-form/index.vue b/ui/src/components/dynamics-form/index.vue
@@ -151,6 +151,12 @@ const initDefaultData = (formField: FormField) => {
   ) {
     formValue.value[formField.field] = formField.default_value
   }
+
+  // 配置不展示默认值
+  if (!formField.show_default_value) {
+    formValue.value[formField.field] = undefined
+    console.log(formField.show_default_value, formValue.value[formField.field])
+  }
 }
 
 onBeforeMount(() => {

diff --git a/ui/src/components/dynamics-form/type.ts b/ui/src/components/dynamics-form/type.ts
@@ -126,6 +126,10 @@ interface FormField {
    * 默认值
    */
   default_value?: any
+  /**
+   * 是否显示默认值
+   */
+  show_default_value?: boolean
   /**
    *  {field:field_value_list} 表示在 field有值 ,并且值在field_value_list中才显示
    */