From 2e11de3a812ddcad9126a3ac46b47bd1eeecc1ad Mon Sep 17 00:00:00 2001
From: "wu.jian2" <distantmtn@gmail.com>
Date: Sun, 8 Oct 2023 10:15:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8=E6=B7=BB=E5=8A=A0=E6=95=B0=E6=8D=AE=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BasicComponents/TimePicker/index.vue      |  1 +
 .../BasicComponents/TimePicker/setting.vue    | 90 ++++++++++++++-----
 .../TimePicker/settingConfig.js               |  2 +
 3 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/data-room-ui/packages/BasicComponents/TimePicker/index.vue b/data-room-ui/packages/BasicComponents/TimePicker/index.vue
index f777b074..26764193 100644
--- a/data-room-ui/packages/BasicComponents/TimePicker/index.vue
+++ b/data-room-ui/packages/BasicComponents/TimePicker/index.vue
@@ -6,6 +6,7 @@
     clearable
     :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"
     :default-value="value"
     @focus="focusEvent"
diff --git a/data-room-ui/packages/BasicComponents/TimePicker/setting.vue b/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
index db9442b5..0efd7845 100644
--- a/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
+++ b/data-room-ui/packages/BasicComponents/TimePicker/setting.vue
@@ -84,25 +84,69 @@
           </div>
           <SettingTitle>时间格式</SettingTitle>
           <div class="lc-field-body">
-            <el-form-item label="时间格式化类型">
-              <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-form-item label="时间显示格式化">
+              <div class="description">
+                <el-input
+                  v-model="config.customize.format"
+                  placeholder="例如：HH:mm:ss"
+                  clearable
                 />
-              </el-select>
+                <el-tooltip
+                  placement="top"
+                >
+                  <span
+                    class="el-icon-question"
+                    style="color:#9e9e9e"
+                  />
+                  <div slot="content">
+                    小时：H，表示小时（24小时制），不补0，例如：3<br>
+                    小时：HH，表示小时（24小时制），补0，例如：03<br>
+                    小时：h，表示小时（12小时制），须和 A 或 a 使用，不补0，例如：3<br>
+                    小时：hh，表示小时（12小时制），须和 A 或 a 使用，补0，例如：03<br>
+                    分钟：m，表示分钟，不补0，例如：4<br>
+                    分钟：mm，表示分钟，补0，例如：04<br>
+                    秒：s，表示秒钟，不补0，例如：5<br>
+                    秒：ss，表示秒钟，补0，例如：05<br>
+                    JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000<br>
+                    不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM<br>
+                    具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。
+                  </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"
+                >
+                  <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="time-format-description">
+              <div class="description">
                 <el-input
                   v-model="config.customize.valueFormat"
                   placeholder="例如：HH:mm:ss"
@@ -116,11 +160,17 @@
                     style="color:#9e9e9e"
                   />
                   <div slot="content">
-                    时间格式示例：<br>
-                    HH：表示小时（24小时制），<br>
-                    mm：表示分钟，<br>
-                    ss：表示秒，
-                    具体可参考Element-UI官网的日期选择器的时间格式化部分。
+                    小时：H，表示小时（24小时制），不补0，例如：3<br>
+                    小时：HH，表示小时（24小时制），补0，例如：03<br>
+                    小时：h，表示小时（12小时制），须和 A 或 a 使用，不补0，例如：3<br>
+                    小时：hh，表示小时（12小时制），须和 A 或 a 使用，补0，例如：03<br>
+                    分钟：m，表示分钟，不补0，例如：4<br>
+                    分钟：mm，表示分钟，补0，例如：04<br>
+                    秒：s，表示秒钟，不补0，例如：5<br>
+                    秒：ss，表示秒钟，补0，例如：05<br>
+                    JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000<br>
+                    不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM<br>
+                    具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。
                   </div>
                 </el-tooltip>
               </div>
@@ -184,7 +234,7 @@ export default {
     width: 97%;
     padding: 16px;
   }
-  .time-format-description{
+  .description{
     display: flex;
     align-items: center;
     .el-tooltip{
diff --git a/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js b/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js
index b7ebd516..f5ac420a 100644
--- a/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js
@@ -41,6 +41,8 @@ const customConfig = {
     dropDownSelectedFontColor: '#409EFF',
     // 时间格式化类型:时间戳（timestamp），自定义（custom）
     formatType: 'custom',
+    // 时间格式化
+    format: 'HH:mm:ss',
     // 绑定值的格式
     valueFormat: 'HH:mm:ss'
   }