<template>
<div class="bs-setting-wrap">
<el-form
ref="form"
:model="config"
label-width="100px"
label-position="left"
class="setting-body bs-el-form"
>
<div>
<slot name="top" />
<el-form
:model="config.customize"
label-position="left"
class="setting-body bs-el-form"
label-width="100px"
>
<SettingTitle>位置</SettingTitle>
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="组件类型">
<el-select
v-model="config.customize.type"
class="bs-el-select"
popper-class="bs-el-select"
@change="changeType"
>
<el-option
v-for="(type) in displayTypeOptions"
:key="type.value"
:label="type.label"
:value="type.value"
/>
</el-select>
</el-form-item>
<!-- 选择器背景颜色 -->
<el-form-item label="背景颜色">
<ColorPicker
v-model="config.customize.bgColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 字体大小 -->
<el-form-item label="字体大小">
<el-input-number
v-model="config.customize.fontSize"
class="bs-el-input-number"
:min="12"
:max="100"
/>
</el-form-item>
<!-- 字体颜色 -->
<el-form-item label="字体颜色">
<ColorPicker
v-model="config.customize.fontColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
</div>
<SettingTitle>下拉项</SettingTitle>
<!-- 选择器下拉框背景颜色 -->
<div class="lc-field-body">
<el-form-item label="背景颜色">
<ColorPicker
v-model="config.customize.dropDownBox.bgColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<el-form-item label="字体颜色">
<ColorPicker
v-model="config.customize.dropDownBox.fontColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 下拉项悬浮背景颜色 -->
<!-- <el-form-item label="悬浮背景颜色">
<ColorPicker
v-model="config.customize.dropDownBox.hoverBgColor"
:predefine="predefineThemeColors"
/>
</el-form-item> -->
<!-- 下拉项悬浮字体颜色 -->
<el-form-item label="悬浮字体颜色">
<ColorPicker
v-model="config.customize.dropDownBox.hoverFontColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 激活项文字颜色 -->
<el-form-item label="选中项文字颜色">
<ColorPicker
v-model="config.customize.dropDownBox.selectedFontColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 选中范围背景颜色 -->
<el-form-item
v-if="['daterange', 'datetimerange'].includes(config.customize.type)"
label="范围背景颜色"
>
<ColorPicker
v-model="config.customize.dropDownBox.rangeBgColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
</div>
<SettingTitle>日期时间格式</SettingTitle>
<div class="lc-field-body">
<!-- <el-form-item label="时间显示格式化">
<div class="description">
<el-input
v-model="config.customize.format"
placeholder="例如：yyyy-MM-dd HH:mm:ss"
clearable
/>
<el-tooltip placement="top">
<span
class="el-icon-question"
style="color:#9e9e9e"
/>
<div slot="content">
年：yyyy，表示年份，例如：2017<br>
月：M，表示月份，不补0，例如：1<br>
月：MM，表示月份，补0，例如：01<br>
日：d，表示日期，不补0，例如：2<br>
日：dd，表示日期，补0，例如：02<br>
小时：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>
AM/PM：A，仅 format 可用，大写，例如：AM<br>
am/pm：a，仅 format 可用，小写，例如：am<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"
clearable
@change="changeFormatType"
>
<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>
自定义：通过输入特定的格式字符串来指定时间的数据格式，例如：yyyy-MM-dd HH:mm:ss对应数据为 2023-10-08 09:30:00。<br>
</div>
</el-tooltip>
</div>
</el-form-item>
<el-form-item
v-if="config.customize.formatType === 'custom'"
label="时间格式"
>
<!-- year/month/date/week/ datetime/datetimerange/daterange -->
<div class="description">
<el-input
v-model="config.customize.format"
placeholder="例如：yyyy-MM-dd HH:mm:ss"
clearable
/>
<!-- HH表示小时（24小时制），mm表示分钟，ss表示秒 -->
<el-tooltip placement="top">
<span
class="el-icon-question"
style="color:#9e9e9e"
/>
<div slot="content">
<div slot="content">
年：yyyy，表示年份，例如：2017<br>
月：M，表示月份，不补0，例如：1<br>
月：MM，表示月份，补0，例如：01<br>
日：d，表示日期，不补0，例如：2<br>
日：dd，表示日期，补0，例如：02<br>
小时：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>
AM/PM：A，仅 format 可用，大写，例如：AM<br>
am/pm：a，仅 format 可用，小写，例如：am<br>
JS时间戳：timestamp，仅 value-format 可用，组件绑定值为number类型，例如：1483326245000<br>
不需要格式化字符：[MM]，使用方括号标识不需要格式化的字符，例如：MM<br>
具体的时间格式化字符和使用方式，可以参考Element-UI官网的日期选择器的时间格式化部分。
</div>
</div>
</el-tooltip>
</div>
</el-form-item>
</div>
</el-form>
</div>
</el-form>
</div>
</template>
<script>
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'
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
export default {
name: 'DateTimePickerSetting',
components: {
ColorPicker,
PosWhSetting,
SettingTitle,
RotateSetting
},
props: {
config: {
type: Object,
required: true
},
predefineThemeColors: {
type: Array,
default: () => predefineColors
}
},
data () {
return {
hour: 'HH',
minute: 'mm',
second: 'ss',
// 时间格式化类型选项
formatTypeOptions: [
{ label: '时间戳', value: 'timestamp' },
{ label: '自定义格式', value: 'custom' }
],
// 时间显示类型选项 :year/month/date/week/ datetime/datetimerange/daterange
displayTypeOptions: [
{ label: '年', value: 'year' },
{ label: '月', value: 'month' },
{ label: '日', value: 'date' },
{ label: '日期时间', value: 'datetime' },
{ label: '日期时间范围', value: 'datetimerange' },
{ label: '日期范围', value: 'daterange' }
]
}
},
watch: {},
mounted () { },
methods: {
changeType (val) {
if (val === 'year') {
if (this.config.customize.formatType === 'custom') {
this.config.customize.format = 'yyyy'
}
} else if (val === 'month') {
if (this.config.customize.formatType === 'custom') {
this.config.customize.format = 'yyyy-MM'
}
} else if (val === 'date') {
if (this.config.customize.formatType === 'custom') {
this.config.customize.format = 'yyyy-MM-dd'
}
} else if (val === 'datetime') {
if (this.config.customize.formatType === 'custom') {
this.config.customize.format = 'yyyy-MM-dd HH:mm:ss'
}
} else if (val === 'datetimerange') {
if (this.config.customize.formatType === 'custom') {
this.config.customize.format = 'yyyy-MM-dd HH:mm:ss'
}
} else if (val === 'daterange') {
if (this.config.customize.formatType === 'custom') {
this.config.customize.format = 'yyyy-MM-dd'
}
}
},
changeFormatType (val) {
if (val === 'timestamp') {
this.config.customize.format = 'timestamp'
} else if (val === 'custom') {
this.config.customize.format = 'yyyy-MM-dd HH:mm:ss'
}
}
}
}
</script>
<style lang="scss" scoped>
.lc-field-body {
width: 97%;
padding: 16px;
}
.description {
display: flex;
align-items: center;
.el-tooltip {
margin-left: 5px;
}
}
</style>