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' }