From 26906df48aed7bc719e398fbacd7e2a04499119c Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Mon, 21 Oct 2024 11:55:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=A8=E6=80=81=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E6=94=B6=E9=9B=86=E6=B7=BB=E5=8A=A0=E6=97=A5=E6=9C=9F=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dynamics-form/constructor/index.vue       | 32 +++---
 .../items/DatePickerConstructor.vue           | 99 +++++++++++++++++++
 .../constructor/items/SliderConstructor.vue   | 19 ++--
 .../items/TextInputConstructor.vue            | 24 ++++-
 4 files changed, 148 insertions(+), 26 deletions(-)
 create mode 100644 ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue

diff --git a/ui/src/components/dynamics-form/constructor/index.vue b/ui/src/components/dynamics-form/constructor/index.vue
index 41c038850..4f0f0426f 100644
--- a/ui/src/components/dynamics-form/constructor/index.vue
+++ b/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<{
-  modelValue: any
-}>()
+const props = withDefaults(
+  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'
diff --git a/ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue b/ui/src/components/dynamics-form/constructor/items/DatePickerConstructor.vue
new file mode 100644
index 000000000..ccd431d1e
--- /dev/null
+++ b/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>
diff --git a/ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue b/ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue
index 974914ef3..6d6b6c3b4 100644
--- a/ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/SliderConstructor.vue
@@ -1,16 +1,19 @@
 <template>
-  <el-form-item label="最小值" required>
-    <el-input-number v-model="formValue.min" :min="0" controls-position="right" />
-  </el-form-item>
-  <el-form-item label="最大值" required>
-    <el-input-number v-model="formValue.max" :min="0" controls-position="right" />
+  <el-form-item label="取值范围" required>
+    <el-col :span="11">
+      <el-input-number style="width: 100%" v-model="formValue.min" 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" 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"
diff --git a/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue b/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue
index 4f01dd4fa..3ff74bf25 100644
--- a/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue
@@ -1,10 +1,24 @@
 <template>
-  <el-form-item label="最小长度" required>
-    <el-input-number v-model="formValue.min_length" :min="0" controls-position="right" />
-  </el-form-item>
-  <el-form-item label="最大长度" required>
-    <el-input-number v-model="formValue.max_length" :min="0" controls-position="right" />
+  <el-form-item label="取值范围" required>
+    <el-col :span="11">
+      <el-input-number
+        style="width: 100%"
+        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"