mirror of
https://gitee.com/orangeform/orange-admin.git
synced 2026-01-18 11:06:36 +08:00
commit：同步2.3版本
This commit is contained in:
Jerry
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="date-range">
|
||||
<!--<year-range-panel />-->
|
||||
<el-select v-model="dateType" :size="size"
|
||||
style="max-width: 100px; min-width: 100px; margin-right: 10px;"
|
||||
v-if="!hideTypeOnlyOne || validTypeList.length > 1">
|
||||
<el-option v-for="type in validTypeList" :key="type.value" :value="type.value" :label="type.label" />
|
||||
</el-select>
|
||||
<el-date-picker style="flex-grow: 1;" v-model="currentDates"
|
||||
:size="size" :placeholder="placeholder" :type="innerDateType"
|
||||
:disabled="disabled" :format="innerDateFormat" :readonly="readonly" :editable="editable"
|
||||
:clearable="clearable" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder"
|
||||
:align="align" :range-separator="rangeSeparator" :value-format="valueFormat"
|
||||
:prefix-icon="prefixIcon" :clear-icon="clearIcon" @change="onValueChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { formatDate, parseDate } from 'element-ui/src/utils/date-util';
|
||||
|
||||
const allTypeList = [{
|
||||
value: 'day',
|
||||
label: '自然日'
|
||||
}, {
|
||||
value: 'month',
|
||||
label: '自然月'
|
||||
}, {
|
||||
value: 'year',
|
||||
label: '自然年'
|
||||
}];
|
||||
|
||||
export default {
|
||||
name: 'DateRange',
|
||||
props: {
|
||||
/**
|
||||
* 绑定的数据
|
||||
*/
|
||||
value: {
|
||||
type: [Array],
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 默认显示的数据选择方式，如果不存在与allowTypes中则显示allowTypes中的第一个
|
||||
*/
|
||||
defaultDateType: {
|
||||
type: String,
|
||||
default: 'day'
|
||||
},
|
||||
/**
|
||||
* 组件大小（medium / small / mini）
|
||||
*/
|
||||
size: {
|
||||
type: String
|
||||
},
|
||||
/**
|
||||
* 数据选择方式只有一个的时候是否隐藏数据选择方式下拉
|
||||
*/
|
||||
hideTypeOnlyOne: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 允许的数据选择方式（day, month, year）
|
||||
* 默认值['day', 'month', 'year']
|
||||
*/
|
||||
allowTypes: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return allTypeList.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 是否范围选择
|
||||
*/
|
||||
isRange: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 输出字符串的format
|
||||
*/
|
||||
outputFormat: {
|
||||
type: String,
|
||||
default: 'yyyy-MM-dd HH:mm:ss'
|
||||
},
|
||||
/**
|
||||
* 非范围选择时的占位内容
|
||||
*/
|
||||
placeholder: String,
|
||||
/**
|
||||
* 范围选择时开始日期的占位内容
|
||||
*/
|
||||
startPlaceholder: String,
|
||||
/**
|
||||
* 范围选择时结束日期的占位内容
|
||||
*/
|
||||
endPlaceholder: String,
|
||||
/**
|
||||
* 完全只读
|
||||
*/
|
||||
readonly: Boolean,
|
||||
/**
|
||||
* 禁用
|
||||
*/
|
||||
disabled: Boolean,
|
||||
/**
|
||||
* 文本框可输入
|
||||
*/
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 是否显示清除按钮
|
||||
*/
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 对齐方式（left, center, right）
|
||||
*/
|
||||
align: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
/**
|
||||
* 选择范围时的分隔符
|
||||
*/
|
||||
rangeSeparator: {
|
||||
type: String,
|
||||
default: '-'
|
||||
},
|
||||
/**
|
||||
* 可选，绑定值的格式。不指定则绑定值为 Date 对象
|
||||
*/
|
||||
valueFormat: {
|
||||
type: String,
|
||||
default: 'yyyy-MM-dd'
|
||||
},
|
||||
/**
|
||||
* 自定义头部图标的类名
|
||||
*/
|
||||
prefixIcon: {
|
||||
type: String,
|
||||
default: 'el-icon-date'
|
||||
},
|
||||
/**
|
||||
* 自定义清空图标的类名
|
||||
*/
|
||||
clearIcon: {
|
||||
type: String,
|
||||
default: 'el-icon-circle-close'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dateType: this.defaultDateType,
|
||||
currentDates: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onValueChange (values) {
|
||||
this.$nextTick(() => {
|
||||
this.emitChange();
|
||||
});
|
||||
},
|
||||
emitChange () {
|
||||
let outputDate = [];
|
||||
if (this.currentDates != null) {
|
||||
if (!this.isRange) {
|
||||
outputDate[0] = new Date(this.currentDates);
|
||||
outputDate[1] = new Date(this.currentDates);
|
||||
} else {
|
||||
if (Array.isArray(this.currentDates) && this.currentDates.length === 2) {
|
||||
outputDate[0] = new Date(this.currentDates[0]);
|
||||
outputDate[1] = new Date(this.currentDates[1]);
|
||||
}
|
||||
}
|
||||
|
||||
if (outputDate[0] != null && outputDate[1] != null) {
|
||||
outputDate[0].setHours(0, 0, 0, 0);
|
||||
outputDate[1].setHours(0, 0, 0, 0);
|
||||
switch (this.dateType) {
|
||||
case 'day':
|
||||
outputDate[1].setDate(outputDate[1].getDate() + 1);
|
||||
break;
|
||||
case 'month':
|
||||
outputDate[1].setDate(1);
|
||||
outputDate[0].setDate(1);
|
||||
outputDate[1].setMonth(outputDate[1].getMonth() + 1);
|
||||
break;
|
||||
case 'year':
|
||||
outputDate[1].setMonth(0);
|
||||
outputDate[1].setDate(1);
|
||||
outputDate[0].setMonth(0);
|
||||
outputDate[0].setDate(1);
|
||||
outputDate[1].setFullYear(outputDate[1].getFullYear() + 1);
|
||||
break;
|
||||
}
|
||||
outputDate[1] = new Date(outputDate[1].getTime() - 1);
|
||||
|
||||
outputDate[0] = formatDate(outputDate[0], this.outputFormat);
|
||||
outputDate[1] = formatDate(outputDate[1], this.outputFormat);
|
||||
}
|
||||
}
|
||||
this.$emit('input', outputDate);
|
||||
this.$emit('change', outputDate);
|
||||
},
|
||||
getCurrentStatsDateType () {
|
||||
return this.dateType;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
validTypeList () {
|
||||
return allTypeList.filter((item) => {
|
||||
return this.allowTypes.indexOf(item.value) !== -1;
|
||||
});
|
||||
},
|
||||
/**
|
||||
* el-date-picker使用的type
|
||||
*/
|
||||
innerDateType () {
|
||||
switch (this.dateType) {
|
||||
case 'day': return this.isRange ? 'daterange' : 'date';
|
||||
case 'month': return this.isRange ? 'monthrange' : 'month';
|
||||
case 'year': return this.isRange ? 'monthrange' : 'year';
|
||||
default: return this.isRange ? 'daterange' : 'date';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* el-date-picker使用的format
|
||||
*/
|
||||
innerDateFormat () {
|
||||
switch (this.dateType) {
|
||||
case 'day': return 'yyyy-MM-dd';
|
||||
case 'month': return 'yyyy-MM';
|
||||
case 'year': return 'yyyy';
|
||||
default: return 'yyyy-MM-dd';
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler: function (newValue, oldValue) {
|
||||
if (newValue == null || newValue.length < 2) {
|
||||
this.currentDates = this.isRange ? [] : undefined;
|
||||
} else {
|
||||
if (this.currentDates == null) this.currentDates = [];
|
||||
if (this.isRange) {
|
||||
this.currentDates = [
|
||||
parseDate(newValue[0], this.valueFormat),
|
||||
parseDate(newValue[1], this.valueFormat)
|
||||
];
|
||||
} else {
|
||||
this.currentDates = parseDate(newValue[0], this.valueFormat);
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
dateType: {
|
||||
handler: function (newValue, oldValue) {
|
||||
if (this.allowTypes.indexOf(this.dateType) === -1) {
|
||||
this.dateType = this.allowTypes[0] || 'day';
|
||||
}
|
||||
this.emitChange();
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
defaultDateType: {
|
||||
handler: function (newValue, oldValue) {
|
||||
if (this.allowTypes.indexOf(newValue) !== -1) {
|
||||
this.dateType = newValue;
|
||||
} else {
|
||||
this.dateType = this.allowTypes[0];
|
||||
}
|
||||
}
|
||||
},
|
||||
isRange: {
|
||||
handler: function (newValue, oldValue) {
|
||||
let temp;
|
||||
if (newValue) {
|
||||
temp = [this.currentDates, this.currentDates];
|
||||
} else {
|
||||
temp = this.currentDates[0];
|
||||
}
|
||||
|
||||
this.currentDates = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.date-range {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user