DateRange.vue
4.68 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<template>
<el-row>
<el-form-item label="控件标题">
<el-input v-model="activeData.__config__.label" placeholder="请输入控件标题" />
</el-form-item>
<el-form-item label="开始占位">
<el-input v-model="activeData['start-placeholder']" placeholder="请输入占位提示" />
</el-form-item>
<el-form-item label="结束占位">
<el-input v-model="activeData['end-placeholder']" placeholder="请输入占位提示" />
</el-form-item>
<template v-if="!activeData.__config__.isSubTable">
<el-form-item label="控件栅格">
<el-slider v-model="activeData.__config__.span" :max="24" :min="6" show-stops :step="2"
show-tooltip />
</el-form-item>
<el-form-item label="标题宽度">
<el-input-number v-model="activeData.__config__.labelWidth" placeholder="标题宽度" :min="0"
:precision="0" controls-position="right" />
</el-form-item>
</template>
<el-form-item label="控件宽度" v-if="activeData.__config__.isSubTable">
<el-input-number v-model="activeData.__config__.columnWidth" placeholder="控件宽度" :min="0"
:precision="0" controls-position="right" />
</el-form-item>
<el-form-item label="默认值">
<el-date-picker v-model="activeData.__config__.defaultValue" :type="activeData.type"
:value-format="activeData['value-format']" :format="activeData.format" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item label="时间类型">
<el-select v-model="activeData.type" placeholder="请选择时间类型" @change="dateTypeChange">
<el-option v-for="(item, index) in dateOptions" :key="index" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="分隔符">
<el-input v-model="activeData['range-separator']" placeholder="请输入分隔符" />
</el-form-item>
<el-form-item label="时间格式">
<el-input :value="activeData.format" placeholder="请输入时间格式" @input="setTimeValue($event)" />
</el-form-item>
<!-- <el-form-item label="显示标签">
<el-switch v-model="activeData.__config__.showLabel" />
</el-form-item> -->
<el-form-item label="能否清空">
<el-switch v-model="activeData.clearable" />
</el-form-item>
<el-form-item label="是否只读">
<el-switch v-model="activeData.readonly" />
</el-form-item>
<el-form-item label="是否禁用">
<el-switch v-model="activeData.disabled" />
</el-form-item>
<el-divider>校验</el-divider>
<el-form-item label="是否必填">
<el-switch v-model="activeData.__config__.required" />
</el-form-item>
</el-row>
</template>
<script>
const dateTimeFormat = {
date: 'yyyy-MM-dd',
week: 'yyyy 第 WW 周',
month: 'yyyy-MM',
year: 'yyyy',
datetime: 'yyyy-MM-dd HH:mm:ss',
daterange: 'yyyy-MM-dd',
monthrange: 'yyyy-MM',
datetimerange: 'yyyy-MM-dd HH:mm:ss'
}
import comMixin from './mixin';
export default {
props: ['activeData'],
mixins: [comMixin],
data() {
return {
dateTypeOptions: [
{
label: '日(date)',
value: 'date'
},
// {
// label: '周(week)',
// value: 'week'
// },
// {
// label: '月(month)',
// value: 'month'
// },
// {
// label: '年(year)',
// value: 'year'
// },
{
label: '日期时间(datetime)',
value: 'datetime'
}
],
dateRangeTypeOptions: [
{
label: '日期范围(daterange)',
value: 'daterange'
},
// {
// label: '月范围(monthrange)',
// value: 'monthrange'
// },
{
label: '日期时间范围(datetimerange)',
value: 'datetimerange'
}
]
}
},
computed: {
dateOptions() {
if (
this.activeData.type !== undefined
&& this.activeData.__config__.tag === 'el-date-picker'
) {
if (this.activeData['start-placeholder'] === undefined) {
return this.dateTypeOptions
}
return this.dateRangeTypeOptions
}
return []
},
},
created() { },
methods: {
setTimeValue(val, type) {
const valueFormat = type === 'week' ? dateTimeFormat.date : val
this.$set(this.activeData.__config__, 'defaultValue', null)
// this.$set(this.activeData, 'value-format', valueFormat)
this.$set(this.activeData, 'format', val)
},
dateTypeChange(val) {
this.setTimeValue(dateTimeFormat[val], val)
}
}
}
</script>