302 lines
7.8 KiB
Vue
302 lines
7.8 KiB
Vue
<template>
|
|
<el-date-picker
|
|
:style="{ width }"
|
|
:prefix-icon="iconClass"
|
|
clear-icon="ag-icon-clear"
|
|
ref="datepickerref"
|
|
v-model="dateArr"
|
|
v-bind="attrs"
|
|
v-on="Listeners"
|
|
:size="$attrs.size||'small'"
|
|
:value="value"
|
|
:type="datetype"
|
|
@mouseenter.native="mousetrue = true"
|
|
@mouseleave.native="mousetrue = false"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import isEmpty from "../../../src/utils/isEmpty";
|
|
|
|
export default {
|
|
name: "AgDatePicker",
|
|
props: {
|
|
range:false,
|
|
showTime:false,
|
|
type: {
|
|
type: String,
|
|
default: "date",
|
|
},
|
|
value: {
|
|
default:()=>{
|
|
return null||[]
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
width: "160px",
|
|
dateArr: null||[],
|
|
date_picker: false,
|
|
mousetrue: false,
|
|
};
|
|
},
|
|
computed: {
|
|
datetype(){
|
|
if(this.range){
|
|
if(this.showTime){
|
|
return "datetimerange"
|
|
}else{
|
|
return "daterange";
|
|
}
|
|
}else{
|
|
if(this.showTime){
|
|
return "datetime";
|
|
}else{
|
|
return "date";
|
|
}
|
|
}
|
|
},
|
|
attrs() {
|
|
let config = {};
|
|
if (this.range) {
|
|
config = {
|
|
"start-placeholder":this.$attrs.startPlaceholder||"开始日期",
|
|
"end-placeholder":this.$attrs.endPlaceholder|| "结束日期",
|
|
"range-separator":this.$attrs.rangeSeparator||"-",
|
|
"picker-options": {
|
|
disabledDate(time) {
|
|
return (
|
|
time.getTime() >
|
|
new Date(new Date().toLocaleDateString()).getTime() +
|
|
24 * 60 * 60 * 1000 -
|
|
1
|
|
);
|
|
},
|
|
shortcuts: [
|
|
{
|
|
text: "本月",
|
|
onClick(picker) {
|
|
const end =
|
|
new Date(new Date().toLocaleDateString()).getTime() +
|
|
24 * 60 * 60 * 1000 -
|
|
1;
|
|
const time = new Date();
|
|
time.setDate(1);
|
|
time.setHours(0);
|
|
time.setSeconds(0);
|
|
time.setMinutes(0);
|
|
var start = time.getTime();
|
|
picker.$emit("pick", [start, end]);
|
|
},
|
|
},
|
|
{
|
|
text: "近一个月",
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
picker.$emit("pick", [start, end]);
|
|
},
|
|
},
|
|
{
|
|
text: "近三个月",
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
picker.$emit("pick", [start, end]);
|
|
},
|
|
},
|
|
{
|
|
text: "近六个月",
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
|
|
picker.$emit("pick", [start, end]);
|
|
},
|
|
},
|
|
{
|
|
text: "最近一年",
|
|
onClick(picker) {
|
|
const end = new Date();
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
|
|
picker.$emit("pick", [start, end]);
|
|
},
|
|
},
|
|
],
|
|
}, //多选日期
|
|
};
|
|
} else {
|
|
config = {
|
|
align: "right",
|
|
placeholder: this.$attrs.placeholder||"选择日期",
|
|
"picker-options": {
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
shortcuts: [
|
|
{
|
|
text: "今天",
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime());
|
|
picker.$emit("pick", date);
|
|
},
|
|
},
|
|
{
|
|
text: "昨天",
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 1* 24 * 60 * 60 * 1000);
|
|
picker.$emit("pick", date);
|
|
},
|
|
},
|
|
{
|
|
text: "一周前",
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 7 * 24 * 60 * 60 * 1000);
|
|
picker.$emit("pick", date);
|
|
},
|
|
},
|
|
],
|
|
},
|
|
};
|
|
}
|
|
return {
|
|
size: "small",
|
|
type: "daterange",
|
|
format: this.showTime?"yyyy-MM-dd hh:mm:ss":"yyyy-MM-dd",
|
|
"value-format":this.showTime?"yyyy-MM-dd hh:mm:ss": "yyyy-MM-dd",
|
|
...config,
|
|
...this.$attrs,
|
|
};
|
|
},
|
|
// 所有父级事件
|
|
Listeners() {
|
|
return Object.assign({}, this.$listeners, {
|
|
input: (value) => {
|
|
if (this.range) {
|
|
if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
|
|
if(this.showTime){
|
|
if(this.$listeners.change){
|
|
this.$emit("change", value);
|
|
}
|
|
}else{
|
|
if(this.$listeners.change){
|
|
this.$emit("change", [
|
|
`${value[0]} 00:00:00`,
|
|
`${value[1]} 23:59:59`,
|
|
]);
|
|
}
|
|
}
|
|
|
|
} else {
|
|
if(this.$listeners.change){
|
|
this.$emit("change", []);
|
|
}
|
|
}
|
|
} else {
|
|
if(this.$listeners.change){
|
|
this.$emit("change", value);
|
|
}
|
|
}
|
|
},
|
|
});
|
|
},
|
|
iconClass() {
|
|
return this.mousetrue
|
|
? "ag-icon-prefix-hide"
|
|
: "ag-icon-prefix-show";
|
|
},
|
|
},
|
|
mounted() {
|
|
if (Array.isArray(this.value)&&this.range){
|
|
this.dateArr = [this.value[0] || "", this.value[1] || ""];
|
|
} else {
|
|
this.dateArr = this.value;
|
|
}
|
|
for(const key in this.$refs.datepickerref){
|
|
if(!this[key]&&key!='value'){
|
|
this[key]=this.$refs.datepickerref[key];
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(newVal) {
|
|
if (Array.isArray(newVal)&&this.range){
|
|
this.dateArr = [newVal[0] || "", newVal[1] || ""];
|
|
} else {
|
|
this.dateArr = newVal;
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
dateArr: {
|
|
handler(newVal) {
|
|
if(!newVal){
|
|
return
|
|
}
|
|
let defaultWidth = this.range ?this.showTime?"330px":"200px" : this.showTime?"190px":"150px";
|
|
this.width = defaultWidth;
|
|
},
|
|
immediate: true,
|
|
deep: true,
|
|
},
|
|
},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep {
|
|
[class*="ag-icon-"] {
|
|
font-family: element-icons !important;
|
|
speak: none;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
line-height: 1;
|
|
vertical-align: baseline;
|
|
display: inline-block;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.el-input__icon,
|
|
.ag-icon-prefix-show,
|
|
.ag-iconfont,
|
|
.ag-icon-clear {
|
|
position: absolute;
|
|
width: 16px !important;
|
|
font-size: 16px;
|
|
margin-left: -5px;
|
|
line-height: 1 !important;
|
|
right: 6px;
|
|
top: 1px;
|
|
z-index: 1;
|
|
}
|
|
.el-input__prefix {
|
|
position: absolute;
|
|
left: 98%;
|
|
}
|
|
.ag-icon-clear {
|
|
&:before {
|
|
content: "\e6db";
|
|
}
|
|
}
|
|
.ag-icon-prefix-show {
|
|
&:before {
|
|
content: "\e78e";
|
|
}
|
|
}
|
|
.ag-icon-prefix-hide {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|