Browse Source

feat: 根据修改意见调整时间、日期时间选择器组件配置,时间格式化数据默认为自定义,去除Date对象

wu.jian2 1 year ago
parent
commit
2d81127385

+ 2 - 2
data-room-ui/packages/BasicComponents/CurrentTime/index.vue

@@ -31,8 +31,8 @@
 import moment from 'moment'
 import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
 import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
-import cloneDeep from "lodash/cloneDeep";
-import {mapMutations, mapState} from 'vuex'
+import cloneDeep from 'lodash/cloneDeep'
+import { mapMutations, mapState } from 'vuex'
 export default {
   name: 'CurrentTime',
   mixins: [paramsMixins],

+ 5 - 1
data-room-ui/packages/BasicComponents/DateTimePicker/index.vue

@@ -52,7 +52,7 @@ export default {
         if (val && val.customize && val.customize.formatType === 'custom') {
           // 解决时间格式化类型为自定义时,时间格式化类型和时间格式化值数据类型不匹配的问题
           this.$nextTick(() => {
-            this.value = toString(this.value)
+            this.config.customize.value = toString(this.config.customize.value)
           })
         }
       },
@@ -65,6 +65,10 @@ export default {
       document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
     }
     this.changeStyle(this.config)
+    // 将config.customize.value设置值为当前时间 :
+    if (this.config.customize.value === '') {
+      this.config.customize.value = new Date()
+    }
   },
   beforeDestroy () {
   },

+ 11 - 6
data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue

@@ -137,13 +137,22 @@
                 />
                 <!-- HH表示小时(24小时制),mm表示分钟,ss表示秒 -->
                 <el-tooltip
-                  content="时间格式示例:yyyy表示年份,MM表示月份,dd表示日期,HH表示小时(24小时制),mm表示分钟,ss表示秒,具体可参考Element-UI官网的日期选择器的时间格式化部分"
                   placement="top"
                 >
                   <span
                     class="el-icon-question"
                     style="color:#9e9e9e"
                   />
+                  <div slot="content">
+                    时间格式示例:<br>
+                    yyyy:表示年份,<br>
+                    MM:表示月份,<br>
+                    dd:表示日期,<br>
+                    HH:表示小时(24小时制),<br>
+                    mm:表示分钟,<br>
+                    ss:表示秒,<br>
+                    具体可参考Element-UI官网的日期选择器的时间格式化部分。
+                  </div>
                 </el-tooltip>
               </div>
             </el-form-item>
@@ -193,7 +202,6 @@ export default {
       second: 'ss',
       // 时间格式化类型选项
       formatTypeOptions: [
-        { label: 'Date 对象', value: 'default' },
         { label: '时间戳', value: 'timestamp' },
         { label: '自定义', value: 'custom' }
       ],
@@ -213,10 +221,7 @@ export default {
   mounted () {},
   methods: {
     selectFormatType (type) {
-      if (type === 'default') {
-        this.config.customize.value = ''
-        this.config.customize.valueFormat = ''
-      } else if (type === 'timestamp') {
+      if (type === 'timestamp') {
         this.config.customize.value = 0
         this.config.customize.valueFormat = 'timestamp'
       } else if (type === 'custom') {

+ 3 - 3
data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js

@@ -31,10 +31,10 @@ const customConfig = {
     fontSize: 20,
     // 显示类型 year/month/date/week/ datetime/datetimerange/daterange
     type: 'datetime',
-    // 时间格式化类型:Date 对象(default),时间戳(timestamp),自定义(custom)
-    formatType: 'default',
+    // 时间格式化类型:时间戳(timestamp),自定义(custom)
+    formatType: 'custom',
     // 绑定值的格式
-    valueFormat: '',
+    valueFormat: 'yyyy-MM-dd HH:mm:ss',
     // 下拉框
     dropDownBox: {
       // 下拉框背景颜色

+ 10 - 1
data-room-ui/packages/BasicComponents/TimePicker/index.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script>
+import moment from 'moment'
 import cloneDeep from 'lodash/cloneDeep'
 import commonMixins from 'data-room-ui/js/mixins/commonMixins'
 import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
@@ -51,7 +52,7 @@ export default {
       handler: function (val) {
         if (val && val.customize && val.customize.formatType === 'custom') {
           this.$nextTick(() => {
-            this.value = toString(this.value)
+            this.config.customize.value = toString(this.config.customize.value)
           })
         }
       },
@@ -64,6 +65,14 @@ export default {
       // document.querySelector(`.time-picker-${this.config.code}`).style.pointerEvents = 'none'
     }
     this.changeStyle(this.config)
+    // 将config.customize.value设置值为当前时间 :HH:mm:ss
+    // if (this.config.customize.value === '') {
+    //   this.config.customize.valueFormat = 'HH:mm:ss'
+    //   this.$nextTick(() => {
+    //     this.config.customize.value = moment(new Date()).format('HH:mm:ss')
+    //     console.log(this.config.customize.value)
+    //   })
+    // }
   },
   beforeDestroy () { },
   methods: {

+ 8 - 9
data-room-ui/packages/BasicComponents/TimePicker/setting.vue

@@ -111,13 +111,19 @@
                   clearable
                 />
                 <el-tooltip
-                  content="时间格式示例:HH表示小时(24小时制),mm表示分钟,ss表示秒"
                   placement="top"
                 >
                   <span
                     class="el-icon-question"
                     style="color:#9e9e9e"
                   />
+                  <div slot="content">
+                    时间格式示例:<br>
+                    HH:表示小时(24小时制),<br>
+                    mm:表示分钟,<br>
+                    ss:表示秒,
+                    具体可参考Element-UI官网的日期选择器的时间格式化部分。
+                  </div>
                 </el-tooltip>
               </div>
             </el-form-item>
@@ -162,12 +168,8 @@ export default {
   },
   data () {
     return {
-      hour: 'HH',
-      minute: 'mm',
-      second: 'ss',
       // 时间格式化类型选项
       formatTypeOptions: [
-        { label: 'Date 对象', value: 'default' },
         { label: '时间戳', value: 'timestamp' },
         { label: '自定义', value: 'custom' }
       ]
@@ -177,10 +179,7 @@ export default {
   mounted () {},
   methods: {
     selectFormatType (type) {
-      if (type === 'default') {
-        this.config.customize.value = ''
-        this.config.customize.valueFormat = ''
-      } else if (type === 'timestamp') {
+      if (type === 'timestamp') {
         this.config.customize.value = 0
         this.config.customize.valueFormat = 'timestamp'
       } else if (type === 'custom') {

+ 3 - 3
data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js

@@ -39,10 +39,10 @@ const customConfig = {
     dropDownHoverFontColor: '#FFFFFF',
     // 下拉项激活文字颜色
     dropDownSelectedFontColor: '#409EFF',
-    // 时间格式化类型:Date 对象(default),时间戳(timestamp),自定义(custom)
-    formatType: 'default',
+    // 时间格式化类型:时间戳(timestamp),自定义(custom)
+    formatType: 'custom',
     // 绑定值的格式
-    valueFormat: ''
+    valueFormat: 'HH:mm:ss'
   }
 }
 export const dataConfig = {

+ 1 - 1
data-room-ui/packages/js/utils/getComponentConfig.js

@@ -278,7 +278,7 @@ export default function getComponentConfig (type) {
         name: '日期时间选择器',
         title: '日期时间选择器',
         icon: Icon.getNameList()[23],
-        className: 'com.gccloud.dataroom.core.module.chart.components.ScreenTimePickerChart',
+        className: 'com.gccloud.dataroom.core.module.chart.components.ScreenDateTimePickerChart',
         w: 260,
         h: 80,
         x: 0,