表单日期格式处理

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DDate.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-08-01 09:55:12
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-14 10:31:08
+ * @LastEditTime: 2024-08-14 16:01:30
  * @Version: 1.0.0
  * @Description: 动态渲染-日期组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -20,7 +20,7 @@
 
     <van-field
       readonly
-      v-model="currentValue"
+      v-model="description"
       :placeholder="disabled ? '' : '请选择'"
       :name="name"
       :disabled="disabled"
@@ -41,15 +41,27 @@
         v-model="pickerValue"
         :type="dateType[type]"
         :title="`选择${fieldConfig.description}`"
+        :filter="filter"
         @confirm="dateConfirm"
         @cancel="showDate(false)"
+        v-if="type !== 'year'"
+      />
+      <van-picker
+        show-toolbar
+        v-model="pickerValue"
+        :columns="columns"
+        @confirm="dateConfirm"
+        @cancel="showDate(false)"
+        :title="`选择${fieldConfig.description}`"
+        ref="yearRef"
+        v-if="type === 'year'"
       />
     </van-popup>
   </div>
 </template>
 
 <script>
-import {Cell, DatetimePicker, Popup, Icon, Field} from 'vant';
+import {Cell, DatetimePicker, Popup, Icon, Field, Picker} from 'vant';
 import DLabel from './DLabel';
 
 export default {
@@ -60,6 +72,7 @@ export default {
     [Popup.name]: Popup,
     [Icon.name]: Icon,
     [Field.name]: Field,
+    [Picker.name]: Picker,
     DLabel
   },
   props: {
@@ -69,7 +82,7 @@ export default {
     },
     type: {
       type: String,
-      default: 'DatePicker'
+      default: 'date', //'DatePicker'
     },
     name: {
       type: String,
@@ -103,22 +116,69 @@ export default {
   data () {
     return {
       dateType: {
-        DatePicker: 'date',
-        DateTimePicker: 'datetime'
+        // DatePicker: 'date',
+        // DateTimePicker: 'datetime',
+        dateTime: 'datetime',
+        time: 'datetime',
+        month: 'year-month',
+        year: 'year-month',
+        week: 'date',
+        date: 'date',
       },
       currentValue: '',
+      description: '',
       pickerValue: '',
       visible: false,
+      columns: [], 
     }
   },
   watch: {
     value: function(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this.currentValue = newValue
+      if (newValue !== oldValue && this.currentValue !== newValue) {
+        console.log('日期过来了', newValue)
+        this.currentValue = newValue;
+        if (newValue) {
+          this.dateParse(this.currentValue);
+        }
+        
       }
     }
   },
+  mounted() {
+    this.init();
+  },
   methods: {
+    init() {
+      if (this.type === 'year') {
+        this.setColumns();
+      }
+    },
+    setColumns() {
+      const currentYear = new Date().getFullYear();
+      const cols = [currentYear];
+      for (let i = 1; i <= 10; i++) {
+        cols.unshift(currentYear - i);
+        cols.push(currentYear + i);
+      }
+      console.log(cols);
+      this.columns = cols;
+    },
+    dateParse(val) {
+      if (val) {
+        const {value, description} = this.dateFormat(new Date(val));
+        this.currentValue = value;
+        this.description = description;
+      } else {
+        this.currentValue = val;
+        this.description = val;
+      }
+    },
+    filter(type, options) {
+      if (this.type === 'year' && type === 'month') {
+        return ['', '', '', ''];
+      }
+      return options;
+    },
     clear(e) {
       e.preventDefault()
       e.stopPropagation()
@@ -129,20 +189,65 @@ export default {
         this.visible = flag;
         if (flag) {
           this.pickerValue = this.currentValue ? new Date(this.currentValue) : '';
+          if (this.type === 'year') {
+            this.$refs.yearRef.setValues([this.description]);
+          }
         }
       }
     },
     dateConfirm(date) {
       this.showDate(false);
-      this.currentValue = date ? this.dateFormat(date) : '';
+      if (date) {
+        if (this.type === 'year') {
+          this.currentValue = `${date}-00-00`;
+          this.description = date;
+        } else {
+          const {value, description} = this.dateFormat(date);
+          this.currentValue = value;
+          this.description = description;
+        }
+      } else {
+        this.currentValue = '';
+        this.description = '';
+      }
       this.$emit('input', this.currentValue);
       this.$emit('change', this.currentValue);
     },
     dateFormat(time) { // 时间格式化 2019-09-08
       let year = time.getFullYear();
-      let month = time.getMonth() + 1;
-      let day = time.getDate();
-      return `${year}-${month < 10 ? `0`: ''}${month}-${day < 10 ? `0`: ''}${day}`;
+      let month = this.suppField(time.getMonth() + 1);
+      let day = this.suppField(time.getDate());
+      let hour = this.suppField(time.getHours());
+      let minutes = this.suppField(time.getMinutes());
+      let seconds = this.suppField(time.getSeconds());
+      let dateDescription = `${year}-${month}-${day}`;
+      let dateValue = `${year}-${month}-${day}`;
+      if (['time', 'dateTime'].includes(this.type)) {
+        dateDescription = `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
+        dateValue = dateDescription;
+      } else if (this.type === 'month') {
+        dateDescription = `${year}-${month}`;
+        dateValue = `${year}-${month}-01`;
+      } else if (this.type === 'year') {
+        dateDescription = `${year}`;
+        dateValue = `${year}-00-00`;
+      } else if (this.type === 'week') {
+        const firstDayOfYear = new Date(year, 0, 1);  // 获取当年的第一天
+        const pastDaysOfYear = (time - firstDayOfYear) / 86400000;  // 计算已经过去的天数
+        const weekNum = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);  // 计算当前日期是第几周
+        dateDescription = `${year}-${weekNum}周`;
+      }
+      console.log({
+        value: dateValue,
+        description: dateDescription
+      })
+      return {
+        value: dateValue,
+        description: dateDescription
+      }
+    },
+    suppField(num) { // 补充显示
+      return `${num < 10 ? `0`: ''}${num}`;
     }
   },
 }

src/Dynamic/ConfigRenderComponent/DForm/FormItem/DField.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-08-01 09:55:12
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-14 10:57:14
+ * @LastEditTime: 2024-08-14 11:12:05
  * @Version: 1.0.0
  * @Description: 动态渲染-文本框组件
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -17,7 +17,7 @@
     :type="fieldType[type]"
     :disabled="disabled"
     :required="required"
-    :clearable="clearable"
+    :clearable="!disabled && clearable"
     :formatter="formatter"
     :rules="[{ required, message: `请输入${label}` }]"
     :error="false"

src/Dynamic/ConfigRenderComponent/DForm/index.vue

@@ -2,7 +2,7 @@
  * @Author: zong.wang01@hand-china.com
  * @Date: 2024-07-29 10:51:56
  * @LastEditors: zong.wang01@hand-china.com
- * @LastEditTime: 2024-08-14 09:21:52
+ * @LastEditTime: 2024-08-14 16:02:32
  * @Version: 1.0.0
  * @Description: 表单渲染
  * @Copyright: Copyright (c) 2021, Hand-RongJing
@@ -87,6 +87,7 @@
         <d-date
           v-if="dateComponents.indexOf(field.validationTypeDisplay) > -1"
           v-model="fieldsObj[field.columnName]"
+          :type="field.dataType"
           :name="field.columnName"
           :label="field.description"
           :help="field.help"