feat: 优化时间选择器和日期时间选择器的配置项，更新为时间类型和时间格式，文本显示和提交到后端的数据保持一致

data-room-ui/packages/BasicComponents/DateTimePicker/index.vue

@@ -7,7 +7,7 @@
     clearable
     :class="['basic-component-date-picker', `date-picker-${config.code}`]"
     :popper-class="'basic-component-date-picker date-picker-popper-' + config.code"
-    :value-format="config.customize.valueFormat"
+    :value-format="config.customize.format"
     :format="config.customize.format"
     :default-value="value"
     size="large"
@@ -53,12 +53,26 @@ export default {
   watch: {
     'config.customize.formatType': {
       handler (val) {
+        const newFomat = this.config.customize.format.replace(/y/g, 'Y').replace(/d/g, 'D')
         if (val === 'timestamp') {
-          this.value = 0
-          this.valueFormat = 'timestamp'
+          // this.value = 0
+          if (['year', 'month', 'date', 'week', 'datetime'].includes(this.config.customize.type)) {
+            this.value = moment(new Date()).format(newFomat)
+          } else {
+            this.value = [
+              moment(new Date()).subtract(7, 'days').valueOf(),
+              moment(new Date()).valueOf()
+            ]
+          }
         } else if (val === 'custom') {
-          this.value = ''
-          this.valueFormat = 'YYYY-MM-DD HH:mm:ss'
+          if (['year', 'month', 'date', 'week', 'datetime'].includes(this.config.customize.type)) {
+            this.value = moment(new Date()).format(newFomat)
+          } else {
+            this.value = [
+              moment(new Date()).subtract(7, 'days').format(newFomat),
+              moment(new Date()).format(newFomat)
+            ]
+          }
         }
       },
       immediate: true
@@ -70,16 +84,58 @@ export default {
             document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
           }
         })
+        const newFomat = this.config.customize.format.replace(/y/g, 'Y').replace(/d/g, 'D')
         if (['year', 'month', 'date', 'week', 'datetime'].includes(val)) {
-          this.value = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+          if (this.config.customize.formatType === 'timestamp') {
+            this.value = moment(new Date()).valueOf()
+          } else {
+            this.value = moment(new Date()).format(newFomat)
+          }
         } else {
-          this.value = [
-            moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'),
-            moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
-          ]
+          if (this.config.customize.formatType === 'timestamp') {
+            this.value = [
+              moment(new Date()).subtract(7, 'days').valueOf(),
+              moment(new Date()).valueOf()
+            ]
+          } else {
+            this.value = [
+              moment(new Date()).subtract(7, 'days').format(newFomat),
+              moment(new Date()).format(newFomat)
+            ]
+          }
         }
       },
       immediate: true
+    },
+    'config.customize.format': {
+      handler (val) {
+        this.$nextTick(() => {
+          if (!this.isPreview) {
+            document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
+          }
+        })
+        const newFomat = val?.replace(/y/g, 'Y')?.replace(/d/g, 'D')
+        if (['year', 'month', 'date', 'week', 'datetime'].includes(this.config.customize.type)) {
+          this.value = moment(new Date()).format(newFomat)
+          if (this.config.customize.formatType === 'timestamp') {
+            this.value = moment(new Date()).valueOf()
+          } else {
+            this.value = moment(new Date()).format(newFomat)
+          }
+        } else {
+          if (this.config.customize.formatType === 'timestamp') {
+            this.value = [
+              moment(new Date()).subtract(7, 'days').valueOf(),
+              moment(new Date()).valueOf()
+            ]
+          } else {
+            this.value = [
+              moment(new Date()).subtract(7, 'days').format(newFomat),
+              moment(new Date()).format(newFomat)
+            ]
+          }
+        }
+      }
     }
   },
   created () { },
@@ -89,9 +145,10 @@ export default {
     }
     this.changeStyle(this.config)
     if (this.value === '') {
+      const newFomat = this.config.customize.format.replace(/y/g, 'Y').replace(/d/g, 'D')
       this.value = [
-        moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'),
-        moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+        moment(new Date()).subtract(7, 'days').format(newFomat),
+        moment(new Date()).format(newFomat)
       ]
     }
   },
@@ -116,7 +173,7 @@ export default {
         // 时间选择器输入框元素
         const timePickerInput = timePickerEl.querySelector('.el-input__inner')
         if (timePickerInput) {
-        // 时间选择器输入框背景颜色
+          // 时间选择器输入框背景颜色
           timePickerInput.style.backgroundColor = bgColor
           // 时间选择器输入框字体颜色
           timePickerInput.style.color = fontColor
@@ -126,7 +183,7 @@ export default {
         // 时间范围选择器输入框元素
         const timePickerRangeInput = timePickerEl.querySelectorAll('.el-range-input')
         if (timePickerRangeInput.length > 0) {
-        // 连接符
+          // 连接符
           const timePickerRangeSeparator = timePickerEl.querySelector('.el-range-separator')
           if (timePickerRangeSeparator) {
             // 宽度和字体大小保持一致
@@ -135,7 +192,7 @@ export default {
             timePickerRangeSeparator.style.fontSize = fontSize + 'px'
           }
           timePickerRangeInput.forEach((el) => {
-          // 时间范围选择器输入框背景颜色
+            // 时间范围选择器输入框背景颜色
             el.style.backgroundColor = bgColor
             // 时间范围选择器输入框字体颜色
             el.style.color = fontColor
@@ -218,106 +275,121 @@ export default {
 <style lang="scss">
 .basic-component-date-picker {
   color: '';
+
   // 清空图标
   .el-icon-circle-close {
-    display: flex ;
-    align-items: center ;
+    display: flex;
+    align-items: center;
   }
 
   // 时间选择器
   .el-icon-time {
-    display: flex ;
-    align-items: center ;
+    display: flex;
+    align-items: center;
   }
 
   .el-time-panel {
-    border: none ;
-    background-color: var(--bgColor) ;
+    border: none;
+    background-color: var(--bgColor);
   }
 
   // 选择日期 时间区域
   .el-date-picker__time-header {
-    border-bottom: var(--bgColor) ;
+    border-bottom: var(--bgColor);
 
     .el-input__inner {
-      border: none ;
+      border: none;
       // 添加一点阴影
-      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) ;
-      color: var(--fontColor) ;
-      background-color: var(--inputBgColor) ;
+      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
+      color: var(--fontColor);
+      background-color: var(--inputBgColor);
     }
 
   }
 
   // 头部，修改文字颜色和图标颜色
   .el-date-picker__header {
-    color: var(--fontColor) ;
+    color: var(--fontColor);
 
     .el-date-picker__header-label {
-      color: var(--fontColor) ;
+      color: var(--fontColor);
     }
 
     // 左右箭头图标颜色
     .el-picker-panel__icon-btn {
-      color: var(--fontColor) ;
+      color: var(--fontColor);
     }
   }
+
   // datetimerange
   .el-date-range-picker__time-header {
     border-color: var(--fontColor);
 
     // 中间箭头图标颜色
     .el-icon-arrow-right {
-      color: var(--fontColor) ;
+      color: var(--fontColor);
     }
+
     // 时间选择器输入框
-    .el-input__inner{
+    .el-input__inner {
       border: none;
       color: var(--fontColor);
       // 添加一点阴影
-      background-color: var(--inputBgColor) ;
-      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) ;
+      background-color: var(--inputBgColor);
+      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
     }
   }
+
   // datetimerange
-  .el-picker-panel__content{
-    .el-icon-d-arrow-left{
-      color: var(--fontColor) ;
-      &:after{
-        color: var(--fontColor) ;
+  .el-picker-panel__content {
+    .el-icon-d-arrow-left {
+      color: var(--fontColor);
+
+      &:after {
+        color: var(--fontColor);
       }
     }
-    .el-icon-arrow-left{
-      color: var(--fontColor) ;
-      &:after{
-        color: var(--fontColor) ;
+
+    .el-icon-arrow-left {
+      color: var(--fontColor);
+
+      &:after {
+        color: var(--fontColor);
       }
     }
-    .el-icon-d-arrow-right{
-      color: var(--fontColor) ;
-      &:after{
-        color: var(--fontColor) ;
+
+    .el-icon-d-arrow-right {
+      color: var(--fontColor);
+
+      &:after {
+        color: var(--fontColor);
       }
     }
-    .el-icon-arrow-right{
-      color: var(--fontColor) ;
-      &:after{
-        color: var(--fontColor) ;
+
+    .el-icon-arrow-right {
+      color: var(--fontColor);
+
+      &:after {
+        color: var(--fontColor);
       }
     }
   }
-  .el-date-range-picker__content.is-left{
-    border-color: var(--fontColor) ;
+
+  .el-date-range-picker__content.is-left {
+    border-color: var(--fontColor);
   }
-  .el-date-table{
-    th{
-      border-color: var(--fontColor) ;
-    }
-    td{
-      div{
-        color: var(--fontColor) ;
-        &:hover{
-          color: var(--hoverFontColor) ;
+
+  .el-date-table {
+    th {
+      border-color: var(--fontColor);
+    }
+
+    td {
+      div {
+        color: var(--fontColor);
+
+        &:hover {
+          color: var(--hoverFontColor);
         }
       }
     }
@@ -352,66 +424,67 @@ export default {
     border-top: 1px solid var(--fontColor);
     border-bottom: 1px solid var(--fontColor);
   }
+
   // 脚部
   .el-picker-panel__footer {
     border-color: var(--fontColor);
-    background-color: var(--bgColor) ;
+    background-color: var(--bgColor);
 
     // 清空按钮
     .el-picker-panel__link-btn {
       span {
-        color: var(--fontColor) ;
+        color: var(--fontColor);
       }
     }
 
     // 确定按钮
     .el-button--default {
-      border: none ;
-      color: var(--fontColor) ;
-      background-color: var(--bgColor) ;
+      border: none;
+      color: var(--fontColor);
+      background-color: var(--bgColor);
     }
 
     .is-disabled {
       span {
-        color: #999 ;
+        color: #999;
       }
     }
   }
 
   .el-time-spinner {
-    margin-bottom: 0px ;
+    margin-bottom: 0px;
 
     .el-time-spinner__item {
       &:hover {
-        color: var(--hoverFontColor) ;
-        background-color: var(--hoverBgColor) ;
+        color: var(--hoverFontColor);
+        background-color: var(--hoverBgColor);
       }
     }
 
     .active {
-      color: var(--selectedFontColor) ;
+      color: var(--selectedFontColor);
 
       &:hover {
-        color: var(--selectedFontColor) ;
-        background-color: transparent ;
+        color: var(--selectedFontColor);
+        background-color: transparent;
       }
     }
   }
 
   .popper__arrow {
-    bottom: -6px ;
+    bottom: -6px;
     border-bottom-color: var(--bgColor) !important;
     border-top-color: var(--bgColor) !important;
 
     &::after {
-      bottom: 0px ;
+      bottom: 0px;
       border-bottom-color: var(--bgColor) !important;
       border-top-color: var(--bgColor) !important;
     }
   }
 
   .cancel {
-    color: var(--fontColor) ;
+    color: var(--fontColor);
   }
 
   .confirm {
@@ -419,53 +492,62 @@ export default {
   }
 
   .el-time-panel__footer {
-    border-top: 1px solid var(--fontColor) ;
+    border-top: 1px solid var(--fontColor);
+
     .cancel {
       span {
-        color: var(--fontColor) ;
+        color: var(--fontColor);
       }
     }
 
     // 确定按钮
     .confirm {
-      border: none ;
-      color: var(--fontColor) ;
-      background-color: var(--bgColor) ;
+      border: none;
+      color: var(--fontColor);
+      background-color: var(--bgColor);
     }
   }
+
   // 年选择器
   .el-year-table {
-    a{
-      color: var(--fontColor) ;
-      &:hover{
-        color: var(--hoverFontColor) ;
+    a {
+      color: var(--fontColor);
+
+      &:hover {
+        color: var(--hoverFontColor);
       }
     }
   }
+
   // 月选择器
   .el-month-table {
-    a{
-      color: var(--fontColor) ;
-      &:hover{
-        color: var(--hoverFontColor) ;
+    a {
+      color: var(--fontColor);
+
+      &:hover {
+        color: var(--hoverFontColor);
       }
     }
   }
+
   // 上月 下月 字体颜色置灰
-  .prev-month{
-  span{
-    color: #999 !important;
-    &:hover{
-      color: var(--hoverFontColor) !important;
+  .prev-month {
+    span {
+      color: #999 !important;
+
+      &:hover {
+        color: var(--hoverFontColor) !important;
+      }
     }
   }
-  }
-  .next-month{
-    span{
+
+  .next-month {
+    span {
       color: #999 !important;
-      &:hover{
-      color: var(--hoverFontColor) !important;
-    }
+
+      &:hover {
+        color: var(--hoverFontColor) !important;
+      }
     }
   }
 }
@@ -497,7 +579,7 @@ export default {
   height: 100% !important;
   line-height: 100% !important;
 }
-::v-deep .el-range-input{
+
+::v-deep .el-range-input {
   width: 45% !important;
-}
-</style>
+}</style>

data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue

@@ -32,6 +32,7 @@
                 v-model="config.customize.type"
                 class="bs-el-select"
                 popper-class="bs-el-select"
+                @change="changeType"
               >
                 <el-option
                   v-for="(type) in displayTypeOptions"
@@ -103,7 +104,7 @@
             </el-form-item>
             <!-- 选中范围背景颜色 -->
             <el-form-item
-              v-if="['daterange','datetimerange'].includes(config.customize.type)"
+              v-if="['daterange', 'datetimerange'].includes(config.customize.type)"
               label="范围背景颜色"
             >
               <ColorPicker
@@ -114,45 +115,14 @@
           </div>
           <SettingTitle>日期时间格式</SettingTitle>
           <div class="lc-field-body">
-            <el-form-item label="时间数据类型">
-              <div class="description">
-                <el-select
-                  v-model="config.customize.formatType"
-                  class="bs-el-select"
-                  popper-class="bs-el-select"
-                  clearable
-                >
-                  <el-option
-                    v-for="(type) in formatTypeOptions"
-                    :key="type.value"
-                    :label="type.label"
-                    :value="type.value"
-                  />
-                </el-select>
-                <el-tooltip
-                  placement="top"
-                >
-                  <span
-                    class="el-icon-question"
-                    style="color:#9e9e9e"
-                  />
-                  <div slot="content">
-                    时间戳：从1970年1月1日开始计算的秒数，数据类型为数值型，例如：1483326245000。<br>
-                    自定义：通过输入特定的格式字符串来指定时间的数据格式，例如：yyyy-MM-dd HH:mm:ss对应数据为 2023-10-08 09:30:00。<br>
-                  </div>
-                </el-tooltip>
-              </div>
-            </el-form-item>
-            <el-form-item label="时间显示格式化">
+            <!-- <el-form-item label="时间显示格式化">
               <div class="description">
                 <el-input
                   v-model="config.customize.format"
                   placeholder="例如：yyyy-MM-dd HH:mm:ss"
                   clearable
                 />
-                <el-tooltip
-                  placement="top"
-                >
+                <el-tooltip placement="top">
                   <span
                     class="el-icon-question"
                     style="color:#9e9e9e"
@@ -179,22 +149,48 @@
                   </div>
                 </el-tooltip>
               </div>
+            </el-form-item> -->
+            <el-form-item label="时间类型">
+              <div class="description">
+                <el-select
+                  v-model="config.customize.formatType"
+                  class="bs-el-select"
+                  popper-class="bs-el-select"
+                  clearable
+                  @change="changeFormatType"
+                >
+                  <el-option
+                    v-for="(type) in formatTypeOptions"
+                    :key="type.value"
+                    :label="type.label"
+                    :value="type.value"
+                  />
+                </el-select>
+                <el-tooltip placement="top">
+                  <span
+                    class="el-icon-question"
+                    style="color:#9e9e9e"
+                  />
+                  <div slot="content">
+                    时间戳：从1970年1月1日开始计算的秒数，数据类型为数值型，例如：1483326245000。<br>
+                    自定义：通过输入特定的格式字符串来指定时间的数据格式，例如：yyyy-MM-dd HH:mm:ss对应数据为 2023-10-08 09:30:00。<br>
+                  </div>
+                </el-tooltip>
+              </div>
             </el-form-item>
             <el-form-item
               v-if="config.customize.formatType === 'custom'"
-              label="时间数据格式化"
+              label="时间格式"
             >
               <!-- year/month/date/week/ datetime/datetimerange/daterange -->
               <div class="description">
                 <el-input
-                  v-model="config.customize.valueFormat"
+                  v-model="config.customize.format"
                   placeholder="例如：yyyy-MM-dd HH:mm:ss"
                   clearable
                 />
                 <!-- HH表示小时（24小时制），mm表示分钟，ss表示秒 -->
-                <el-tooltip
-                  placement="top"
-                >
+                <el-tooltip placement="top">
                   <span
                     class="el-icon-question"
                     style="color:#9e9e9e"
@@ -265,6 +261,7 @@ export default {
       }
     }
   },
+
   data () {
     return {
       hour: 'HH',
@@ -273,7 +270,7 @@ export default {
       // 时间格式化类型选项
       formatTypeOptions: [
         { label: '时间戳', value: 'timestamp' },
-        { label: '自定义', value: 'custom' }
+        { label: '自定义格式', value: 'custom' }
       ],
       // 时间显示类型选项 :year/month/date/week/ datetime/datetimerange/daterange
       displayTypeOptions: [
@@ -287,21 +284,58 @@ export default {
     }
   },
   watch: {},
-  mounted () {},
-  methods: { }
+  mounted () { },
+  methods: {
+    changeType (val) {
+      if (val === 'year') {
+        if (this.config.customize.formatType === 'custom') {
+          this.config.customize.format = 'yyyy'
+        }
+      } else if (val === 'month') {
+        if (this.config.customize.formatType === 'custom') {
+          this.config.customize.format = 'yyyy-MM'
+        }
+      } else if (val === 'date') {
+        if (this.config.customize.formatType === 'custom') {
+          this.config.customize.format = 'yyyy-MM-dd'
+        }
+      } else if (val === 'datetime') {
+        if (this.config.customize.formatType === 'custom') {
+          this.config.customize.format = 'yyyy-MM-dd HH:mm:ss'
+        }
+      } else if (val === 'datetimerange') {
+        if (this.config.customize.formatType === 'custom') {
+          this.config.customize.format = 'yyyy-MM-dd HH:mm:ss'
+        }
+      } else if (val === 'daterange') {
+        if (this.config.customize.formatType === 'custom') {
+          this.config.customize.format = 'yyyy-MM-dd'
+        }
+      }
+    },
+    changeFormatType (val) {
+      if (val === 'timestamp') {
+        this.config.customize.format = 'timestamp'
+      } else if (val === 'custom') {
+        this.config.customize.format = 'yyyy-MM-dd HH:mm:ss'
+      }
+    }
+  }
 }
 </script>
 
-  <style lang="scss" scoped>
-  .lc-field-body {
-    width: 97%;
-    padding: 16px;
-  }
-  .description{
-    display: flex;
-    align-items: center;
-    .el-tooltip{
-      margin-left: 5px;
-    }
+<style lang="scss" scoped>
+.lc-field-body {
+  width: 97%;
+  padding: 16px;
+}
+
+.description {
+  display: flex;
+  align-items: center;
+
+  .el-tooltip {
+    margin-left: 5px;
   }
-  </style>
+}
+</style>

data-room-ui/packages/BasicComponents/TimePicker/index.vue

@@ -7,7 +7,7 @@
     :class="['basic-component-time-picker', `time-picker-${config.code}`]"
     :popper-class="'basic-component-time-picker time-picker-popper-' + config.code"
     :format="config.customize.format"
-    :value-format="config.customize.valueFormat"
+    :value-format="config.customize.format"
     :default-value="value"
     @focus="focusEvent"
     @change="changeValue"
@@ -54,16 +54,24 @@ export default {
       handler (val) {
         if (val === 'timestamp') {
           this.value = new Date().getTime()
-          // this.config.customize.format = 'timestamp'
-          // this.config.customize.valueFormat = 'timestamp'
         } else if (val === 'custom') {
-          // this.config.customize.valueFormat = 'HH:mm:ss'
-          this.value = moment(new Date()).format('HH:mm:ss')
+          const newFomat = this.config.customize.format.replace(/y/g, 'Y').replace(/d/g, 'D')
+          this.value = moment(new Date()).format(newFomat)
+        }
+      },
+      immediate: true
+    },
+    'config.customize.format': {
+      handler (val) {
+        if (this.config.customize.formatType === 'timestamp') {
+          this.value = new Date().getTime()
+        } else if (this.config.customize.formatType === 'custom') {
+          const newFomat = val.replace(/y/g, 'Y').replace(/d/g, 'D')
+          this.value = moment(new Date()).format(newFomat)
         }
       },
       immediate: true
     }
-
   },
   created () { },
   mounted () {
@@ -71,7 +79,8 @@ export default {
       document.querySelector(`.time-picker-${this.config.code}`).style.pointerEvents = 'none'
     }
     if (this.value === '') {
-      this.value = moment(new Date()).format(this.config.customize.valueFormat)
+      const newFomat = this.config.customize.format.replace(/y/g, 'Y').replace(/d/g, 'D')
+      this.value = moment(new Date()).format(newFomat)
     }
     this.changeStyle(this.config)
   },

data-room-ui/packages/BasicComponents/TimePicker/setting.vue

@@ -90,44 +90,14 @@
           </div>
           <SettingTitle>时间格式</SettingTitle>
           <div class="lc-field-body">
-            <el-form-item label="时间数据类型">
-              <div class="description">
-                <el-select
-                  v-model="config.customize.formatType"
-                  class="bs-el-select"
-                  popper-class="bs-el-select"
-                >
-                  <el-option
-                    v-for="(type) in formatTypeOptions"
-                    :key="type.value"
-                    :label="type.label"
-                    :value="type.value"
-                  />
-                </el-select>
-                <el-tooltip
-                  placement="top"
-                >
-                  <span
-                    class="el-icon-question"
-                    style="color:#9e9e9e"
-                  />
-                  <div slot="content">
-                    时间戳：从1970年1月1日开始计算的秒数，数据类型为数值型，例如：1483326245000。<br>
-                    自定义：通过输入特定的格式字符串来指定时间的数据格式，例如：HH:mm:ss对应数据为 09:30:00。<br>
-                  </div>
-                </el-tooltip>
-              </div>
-            </el-form-item>
-            <el-form-item label="时间显示格式化">
+            <!-- <el-form-item label="时间显示格式化">
               <div class="description">
                 <el-input
                   v-model="config.customize.format"
                   placeholder="例如：HH:mm:ss"
                   clearable
                 />
-                <el-tooltip
-                  placement="top"
-                >
+                <el-tooltip placement="top">
                   <span
                     class="el-icon-question"
                     style="color:#9e9e9e"
@@ -147,21 +117,45 @@
                   </div>
                 </el-tooltip>
               </div>
+            </el-form-item> -->
+            <el-form-item label="时间类型">
+              <div class="description">
+                <el-select
+                  v-model="config.customize.formatType"
+                  class="bs-el-select"
+                  popper-class="bs-el-select"
+                  @change="changeFormatType"
+                >
+                  <el-option
+                    v-for="(type) in formatTypeOptions"
+                    :key="type.value"
+                    :label="type.label"
+                    :value="type.value"
+                  />
+                </el-select>
+                <el-tooltip placement="top">
+                  <span
+                    class="el-icon-question"
+                    style="color:#9e9e9e"
+                  />
+                  <div slot="content">
+                    时间戳：从1970年1月1日开始计算的秒数，数据类型为数值型，例如：1483326245000。<br>
+                    自定义：通过输入特定的格式字符串来指定时间的数据格式，例如：HH:mm:ss对应数据为 09:30:00。<br>
+                  </div>
+                </el-tooltip>
+              </div>
             </el-form-item>
-
             <el-form-item
               v-if="config.customize.formatType === 'custom'"
-              label="时间数据格式化"
+              label="时间格式"
             >
               <div class="description">
                 <el-input
-                  v-model="config.customize.valueFormat"
+                  v-model="config.customize.format"
                   placeholder="例如：HH:mm:ss"
                   clearable
                 />
-                <el-tooltip
-                  placement="top"
-                >
+                <el-tooltip placement="top">
                   <span
                     class="el-icon-question"
                     style="color:#9e9e9e"
@@ -223,20 +217,7 @@ export default {
       }
     }
   },
-  watch: {
-    'config.customize.formatType': {
-      handler (val) {
-        if (val === 'timestamp') {
-          this.config.customize.format = 'timestamp'
-          this.config.customize.valueFormat = 'timestamp'
-        } else if (val === 'custom') {
-          this.config.customize.format = 'HH:mm:ss'
-          this.config.customize.valueFormat = 'HH:mm:ss'
-        }
-      },
-      immediate: true
-    }
-  },
+  watch: {},
   data () {
     return {
       // 时间格式化类型选项
@@ -246,21 +227,31 @@ export default {
       ]
     }
   },
-  mounted () {},
-  methods: { }
+  mounted () { },
+  methods: {
+    changeFormatType (val) {
+      if (val === 'timestamp') {
+        this.config.customize.format = 'timestamp'
+      } else if (val === 'custom') {
+        this.config.customize.format = 'HH:mm:ss'
+      }
+    }
+  }
 }
 </script>
 
-  <style lang="scss" scoped>
-  .lc-field-body {
-    width: 97%;
-    padding: 16px;
-  }
-  .description{
-    display: flex;
-    align-items: center;
-    .el-tooltip{
-      margin-left: 5px;
-    }
+<style lang="scss" scoped>
+.lc-field-body {
+  width: 97%;
+  padding: 16px;
+}
+
+.description {
+  display: flex;
+  align-items: center;
+
+  .el-tooltip {
+    margin-left: 5px;
   }
-  </style>
+}
+</style>