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

2 years ago · 2d81127385
parent 5daa4abd0f
commit 2d81127385
8 changed files with 43 additions and 26 deletions
--- a/data-room-ui/packages/BasicComponents/CurrentTime/index.vue
+++ b/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],
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
+++ b/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 () {
  },
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
+++ b/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') {
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
+++ b/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: {
      // 下拉框背景颜色
--- a/data-room-ui/packages/BasicComponents/TimePicker/index.vue
+++ b/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: {
--- a/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
+++ b/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') {
--- a/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js
+++ b/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 = {
--- a/data-room-ui/packages/js/utils/getComponentConfig.js
+++ b/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,