feat: 动态表单收集添加日期格式

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

@@ -7,12 +7,12 @@
     :model="form_data"
     v-bind="$attrs"
   >
-    <el-form-item label="显示名称" :required="true" prop="label" :rules="rules.label">
-      <el-input v-model="form_data.label" placeholder="请输入显示名称" />
-    </el-form-item>
     <el-form-item label="参数" :required="true" prop="field" :rules="rules.field">
       <el-input v-model="form_data.field" placeholder="请输入参数" />
     </el-form-item>
+    <el-form-item label="显示名称" :required="true" prop="label" :rules="rules.label">
+      <el-input v-model="form_data.label" placeholder="请输入显示名称" />
+    </el-form-item>
     <el-form-item label="参数提示说明">
       <el-input v-model="form_data.tooltip" placeholder="请输入参数提示说明" />
     </el-form-item>
@@ -41,18 +41,25 @@
 import { onMounted, ref } from 'vue'
 import type { FormInstance } from 'element-plus'
 
-const props = defineProps<{
+const props = withDefaults(
-  modelValue: any
+  defineProps<{
-}>()
+    modelValue: any
+    input_type_list: Array<{ label: string; value: string }>
+  }>(),
+  {
+    input_type_list: () => [
+      { label: '文本框', value: 'TextInputConstructor' },
+      { label: '滑块', value: 'SliderConstructor' },
+      { label: '开关', value: 'SwitchInputConstructor' },
+      { label: '单选框', value: 'SingleSelectConstructor' },
+      { label: '日期', value: 'DatePickerConstructor' }
+    ]
+  }
+)
 const emit = defineEmits(['update:modelValue'])
 
 const ruleFormRef = ref<FormInstance>()
-const input_type_list = [
+
-  { label: '文本框', value: 'TextInputConstructor' },
-  { label: '滑块', value: 'SliderConstructor' },
-  { label: '开关', value: 'SwitchInputConstructor' },
-  { label: '单选框', value: 'SingleSelectConstructor' }
-]
 const componentFormRef = ref<any>()
 const form_data = ref<any>({
   label: '',
@@ -96,7 +103,6 @@ const validate = () => {
 onMounted(() => {
   if (props.modelValue) {
     const data = props.modelValue
-    // console.log(data)
     form_data.value = data
     // 处理option
     form_data.value.input_type = data.input_type + 'Constructor'

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

@@ -0,0 +1,99 @@
+<template>
+  <el-form-item label="时间类型" required>
+    <el-select @change="type_change" v-model="formValue.type" placeholder="请选择时间类型">
+      <el-option
+        v-for="input_type in type_list"
+        :key="input_type.value"
+        :label="input_type.label"
+        :value="input_type.value"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item label="格式" required>
+    <el-select
+      v-model="formValue.format"
+      filterable
+      default-first-option
+      allow-create
+      placeholder="请选择格式"
+    >
+      <el-option
+        v-for="input_type in type_dict[formValue.type]"
+        :key="input_type.value"
+        :label="input_type.value"
+        :value="input_type.value"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item
+    label="默认值"
+    :required="formValue.required"
+    prop="default_value"
+    :rules="formValue.required ? [{ required: true, message: '默认值 为必填属性' }] : []"
+  >
+    <el-date-picker
+      v-model="formValue.default_value"
+      :type="formValue.type"
+      placeholder="选择日期"
+      :format="formValue.format"
+      :value-format="formValue.format"
+    />
+  </el-form-item>
+</template>
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+const type_list = [
+  {
+    label: '年',
+    value: 'year'
+  },
+  {
+    label: '月',
+    value: 'month'
+  },
+  {
+    label: '日期',
+    value: 'date'
+  },
+  {
+    label: '日期时间',
+    value: 'datetime'
+  }
+]
+const type_dict: any = {
+  year: [{ value: 'YYYY' }],
+  month: [{ value: 'YYYY-MM' }],
+  date: [{ value: 'YYYY-MM-DD' }],
+  datetime: [{ value: 'YYYY-MM-DD HH:mm:ss' }]
+}
+const type_change = () => {
+  formValue.value.format = type_dict[formValue.value.type][0].value
+}
+const props = defineProps<{
+  modelValue: any
+}>()
+const emit = defineEmits(['update:modelValue'])
+const formValue = computed({
+  set: (item) => {
+    emit('update:modelValue', item)
+  },
+  get: () => {
+    return props.modelValue
+  }
+})
+
+const getData = () => {
+  return {
+    input_type: 'DatePicker',
+    attrs: {},
+    default_value: formValue.value.default_value
+  }
+}
+defineExpose({ getData })
+onMounted(() => {
+  formValue.value.type = 'datetime'
+  formValue.value.format = 'YYYY-MM-DD HH:mm:ss'
+  formValue.value.default_value = props.modelValue.default_value || ''
+})
+</script>
+<style lang="scss"></style>

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

@@ -1,16 +1,19 @@
 <template>
-  <el-form-item label="最小值" required>
+  <el-form-item label="取值范围" required>
-    <el-input-number v-model="formValue.min" :min="0" controls-position="right" />
+    <el-col :span="11">
-  </el-form-item>
+      <el-input-number style="width: 100%" v-model="formValue.min" controls-position="right" />
-  <el-form-item label="最大值" required>
+    </el-col>
-    <el-input-number v-model="formValue.max" :min="0" controls-position="right" />
+    <el-col :span="2" class="text-center">
+      <span class="text-gray-500">-</span>
+    </el-col>
+    <el-col :span="11">
+      <el-input-number style="width: 100%" v-model="formValue.max" controls-position="right" />
+    </el-col>
   </el-form-item>
   <el-form-item label="步长值" required>
     <el-input-number v-model="formValue.step" :min="0" controls-position="right" />
   </el-form-item>
-  <el-form-item label="精确值" required>
+
-    <el-input-number v-model="formValue.precision" :min="0" controls-position="right" />
-  </el-form-item>
   <el-form-item
     label="默认值"
     :required="formValue.required"

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

@@ -1,10 +1,24 @@
 <template>
-  <el-form-item label="最小长度" required>
+  <el-form-item label="取值范围" required>
-    <el-input-number v-model="formValue.min_length" :min="0" controls-position="right" />
+    <el-col :span="11">
-  </el-form-item>
+      <el-input-number
-  <el-form-item label="最大长度" required>
+        style="width: 100%"
-    <el-input-number v-model="formValue.max_length" :min="0" controls-position="right" />
+        v-model="formValue.min_length"
+        controls-position="right"
+      />
+    </el-col>
+    <el-col :span="2" class="text-center">
+      <span class="text-gray-500">-</span>
+    </el-col>
+    <el-col :span="11">
+      <el-input-number
+        style="width: 100%"
+        v-model="formValue.max_length"
+        controls-position="right"
+      />
+    </el-col>
   </el-form-item>
+
   <el-form-item
     label="默认值"
     :required="formValue.required"