From 8fc2069fd5d7ddcabafb3bb53ca60a6862b42327 Mon Sep 17 00:00:00 2001
From: "wu.jian2" <distantmtn@gmail.com>
Date: Tue, 26 Sep 2023 14:06:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E3=80=81=E6=97=A5=E6=9C=9F=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E9=80=89=E6=8B=A9=E5=99=A8=E9=BB=98=E8=AE=A4=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=BD=93=E5=89=8D=E6=97=B6=E9=97=B4=E3=80=82=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=80=89=E6=8B=A9=E5=99=A8=E5=9C=A8=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8F=98=E5=8C=96=E6=97=B6=EF=BC=8C=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=95=B0=E5=80=BC=E5=9E=8B=E5=92=8C=E5=AD=97=E7=AC=A6?=
 =?UTF-8?q?=E4=B8=B2=E7=B1=BB=E5=9E=8B=E4=BA=92=E6=8D=A2=E5=87=BA=E7=8E=B0?=
 =?UTF-8?q?=E7=9A=84=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicComponents/DateTimePicker/index.vue  | 46 +++++++++++++------
 .../DateTimePicker/setting.vue                | 30 ++++++++----
 .../DateTimePicker/settingConfig.js           |  5 +-
 .../BasicComponents/TimePicker/index.vue      | 28 +++--------
 .../BasicComponents/TimePicker/setting.vue    |  1 +
 data-room-ui/packages/BizComponent/index.vue  |  2 +-
 6 files changed, 64 insertions(+), 48 deletions(-)

diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue b/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
index cd43e446..5350515d 100644
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue
@@ -1,13 +1,14 @@
 <template>
   <el-date-picker
     :key="config.customize.type"
-    v-model="config.customize.value"
+    v-model="value"
     :picker-options="config.customize.pickerOptions"
     :type="config.customize.type"
     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"
+    :default-value="value"
     size="large"
     @focus="focusEvent"
     @change="changeValue"
@@ -16,6 +17,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'
@@ -35,6 +37,7 @@ export default {
   },
   data () {
     return {
+      value: '',
       innerConfig: {}
     }
   },
@@ -47,16 +50,30 @@ export default {
     }
   },
   watch: {
-    config: {
-      handler: function (val) {
-        if (val && val.customize && val.customize.formatType === 'custom') {
-          // 解决时间格式化类型为自定义时，时间格式化类型和时间格式化值数据类型不匹配的问题
-          this.$nextTick(() => {
-            this.config.customize.value = toString(this.config.customize.value)
-          })
+    'config.customize.formatType': {
+      handler (val) {
+        if (val === 'timestamp') {
+          this.value = 0
+          this.valueFormat = 'timestamp'
+        } else if (val === 'custom') {
+          this.value = ''
+          this.valueFormat = 'YYYY-MM-DD HH:mm:ss'
+        }
+      },
+      immediate: true
+    },
+    'config.customize.type': {
+      handler (val) {
+        if (['year', 'month', 'date', 'week', 'datetime'].includes(val)) {
+          this.value = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+        } 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')
+          ]
         }
       },
-      deep: true
+      immediate: true
     }
   },
   created () { },
@@ -65,9 +82,11 @@ 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()
+    if (this.value === '') {
+      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')
+      ]
     }
   },
   beforeDestroy () {
@@ -128,6 +147,7 @@ export default {
     },
     // 组件联动
     changeValue (val) {
+      console.log(val)
       this.linkage({ [this.config.code]: val })
     },
     focusEvent () {
@@ -171,7 +191,7 @@ export default {
       })
     },
     mouseenter () {
-      if (this.config.customize.value) {
+      if (this.value) {
         setTimeout(() => {
           // 清空图标
           const timePickerCloseIcon = document.querySelector(`.date-picker-${this.innerConfig.code} .el-icon-circle-close`)
diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue b/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
index 8f52700e..920abe17 100644
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue
@@ -114,7 +114,6 @@
                 class="bs-el-select"
                 popper-class="bs-el-select"
                 clearable
-                @change="selectFormatType"
               >
                 <el-option
                   v-for="(type) in formatTypeOptions"
@@ -163,6 +162,7 @@
   </div>
 </template>
 <script>
+import moment from 'moment'
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
@@ -210,7 +210,6 @@ export default {
         { label: '年', value: 'year' },
         { label: '月', value: 'month' },
         { label: '日', value: 'date' },
-        { label: '周', value: 'week' },
         { label: '日期时间', value: 'datetime' },
         { label: '日期时间范围', value: 'datetimerange' },
         { label: '日期范围', value: 'daterange' }
@@ -220,14 +219,25 @@ export default {
   watch: {},
   mounted () {},
   methods: {
-    selectFormatType (type) {
-      if (type === 'timestamp') {
-        this.config.customize.value = 0
-        this.config.customize.valueFormat = 'timestamp'
-      } else if (type === 'custom') {
-        this.config.customize.valueFormat = 'yyyy-MM-dd HH:mm:ss'
-      }
-    }
+    // selectFormatType (type) {
+    //   if (type === 'timestamp') {
+    //     this.config.customize.value = 0
+    //     this.config.customize.valueFormat = 'timestamp'
+    //   } else if (type === 'custom') {
+    //     this.config.customize.value = ''
+    //     this.config.customize.valueFormat = 'YYYY-MM-DD HH:mm:ss'
+    //   }
+    // },
+    // selectDisplayType (val) {
+    //   if (['year', 'month', 'date', 'week', 'datetime'].includes(val)) {
+    //     this.config.customize.value = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+    //   } else {
+    //     this.config.customize.value = [
+    //       moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'),
+    //       moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+    //     ]
+    //   }
+    // }
   }
 }
 </script>
diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js b/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
index fc580d74..e74e3c84 100644
--- a/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js
@@ -22,15 +22,14 @@ const customConfig = {
   },
   // 自定义属性
   customize: {
-    value: '',
     // 选择框背景颜色
     bgColor: '#35393F',
     // 选择框文字颜色
     fontColor: '#FFFFFF',
     // 选择框文字大小
     fontSize: 20,
-    // 显示类型 year/month/date/week/ datetime/datetimerange/daterange
-    type: 'datetime',
+    // 显示类型 year/month/date/ datetime/datetimerange/daterange
+    type: 'datetimerange',
     // 时间格式化类型:时间戳（timestamp），自定义（custom）
     formatType: 'custom',
     // 绑定值的格式
diff --git a/data-room-ui/packages/BasicComponents/TimePicker/index.vue b/data-room-ui/packages/BasicComponents/TimePicker/index.vue
index 9fac689d..0a3024d8 100644
--- a/data-room-ui/packages/BasicComponents/TimePicker/index.vue
+++ b/data-room-ui/packages/BasicComponents/TimePicker/index.vue
@@ -7,6 +7,7 @@
     :class="['basic-component-time-picker', `time-picker-${config.code}`]"
     :popper-class="'basic-component-time-picker time-picker-popper-' + config.code"
     :value-format="config.customize.valueFormat"
+    :default-value="config.customize.value"
     @focus="focusEvent"
     @change="changeValue"
     @mouseenter.native="mouseenter"
@@ -47,32 +48,16 @@ export default {
       return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
     }
   },
-  watch: {
-    config: {
-      handler: function (val) {
-        if (val && val.customize && val.customize.formatType === 'custom') {
-          this.$nextTick(() => {
-            this.config.customize.value = toString(this.config.customize.value)
-          })
-        }
-      },
-      deep: true
-    }
-  },
+  watch: { },
   created () { },
   mounted () {
     if (!this.isPreview) {
-      // document.querySelector(`.time-picker-${this.config.code}`).style.pointerEvents = 'none'
+      document.querySelector(`.time-picker-${this.config.code}`).style.pointerEvents = 'none'
+    }
+    if (this.config.customize.value === '') {
+      this.config.customize.value = moment(new Date()).format(this.config.customize.valueFormat)
     }
     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: {
@@ -130,6 +115,7 @@ export default {
     },
     // 组件联动
     changeValue (val) {
+      console.log('val', val)
       this.linkage({ [this.config.code]: val })
     },
     focusEvent () {
diff --git a/data-room-ui/packages/BasicComponents/TimePicker/setting.vue b/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
index 44937fc6..81b9fab0 100644
--- a/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
+++ b/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
@@ -184,6 +184,7 @@ export default {
         this.config.customize.valueFormat = 'timestamp'
       } else if (type === 'custom') {
         this.config.customize.valueFormat = 'HH:mm:ss'
+        this.config.customize.value = ''
       }
     }
   }
diff --git a/data-room-ui/packages/BizComponent/index.vue b/data-room-ui/packages/BizComponent/index.vue
index 27b3820d..87eedb4f 100644
--- a/data-room-ui/packages/BizComponent/index.vue
+++ b/data-room-ui/packages/BizComponent/index.vue
@@ -140,7 +140,7 @@
   </div>
 </template>
 <script>
-import { toJpeg, toPng } from 'html-to-image'
+import { toJpeg } from 'html-to-image'
 import CusBtn from 'data-room-ui/BigScreenDesign/BtnLoading'
 // import MonacoEditor from 'data-room-ui/MonacoEditor'
 import BizComponentPreview from './Preview'