328 lines
7.9 KiB
Vue
328 lines
7.9 KiB
Vue
<template>
|
|
<div class="TimingModule" v-if="timer && timer.length">
|
|
<el-select
|
|
v-model="select"
|
|
placeholder="请选择"
|
|
class="dateselect"
|
|
:size="size"
|
|
@change="selectChange"
|
|
>
|
|
<template slot="prefix">
|
|
{{ (timer.find((e) => e.enName == select) || {}).lable }}
|
|
</template>
|
|
<el-option
|
|
v-for="item in timer"
|
|
:key="item.enName"
|
|
:label="item.lable"
|
|
:value="item.enName"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
<el-date-picker
|
|
v-show="timer[Index].TimeType == 'daterange'"
|
|
class="datepicker"
|
|
v-model="DateTime"
|
|
value-format="timestamp"
|
|
:picker-options="pickerOptions"
|
|
:size="size"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
:default-time="['00:00:00', '23:59:59']"
|
|
@change="timeChange"
|
|
>
|
|
</el-date-picker>
|
|
<el-date-picker
|
|
v-show="timer[Index].TimeType == 'date'"
|
|
v-model="Time"
|
|
:size="size"
|
|
align="right"
|
|
type="date"
|
|
clearable
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="选择日期"
|
|
:picker-options="pickerOption"
|
|
@change="timeChange"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
default: {
|
|
default: "time",
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: "small",
|
|
},
|
|
data: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
components: {},
|
|
data() {
|
|
return {
|
|
select: this.default, //选择
|
|
DateTime: [],
|
|
Time: "",
|
|
pickerOptions: {
|
|
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]);
|
|
},
|
|
},
|
|
],
|
|
}, //多选日期
|
|
pickerOption: {
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
shortcuts: [
|
|
{
|
|
text: "近一周",
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() - 7 * 24 * 60 * 60 * 1000);
|
|
picker.$emit("pick", date);
|
|
},
|
|
},
|
|
|
|
{
|
|
text: "近一个月",
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setMonth(date.getMonth() - 1);
|
|
picker.$emit("pick", date);
|
|
},
|
|
},
|
|
|
|
{
|
|
text: "近三个月",
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setMonth(date.getMonth() - 3);
|
|
picker.$emit("pick", date);
|
|
},
|
|
},
|
|
{
|
|
text: "近六个月",
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setMonth(date.getMonth() - 6);
|
|
picker.$emit("pick", date);
|
|
},
|
|
},
|
|
{
|
|
text: "近一年",
|
|
onClick(picker) {
|
|
const date = new Date();
|
|
date.setFullYear(date.getFullYear() - 1);
|
|
picker.$emit("pick", date);
|
|
},
|
|
},
|
|
],
|
|
}, //单选日期
|
|
Index: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
timer() {
|
|
if (!this.data) return;
|
|
let arr = [];
|
|
arr = this.data.filter(
|
|
(item) => item.type === "el-date-picker" && item.show
|
|
);
|
|
if (arr && arr.length) {
|
|
arr.findIndex((e) => e.enName == this.select) == -1
|
|
? this.$set(this, "select", arr[0].enName)
|
|
: "";
|
|
}
|
|
return arr;
|
|
},
|
|
},
|
|
methods: {
|
|
//选择分类
|
|
selectChange(val) {
|
|
this.timer.forEach((e, i) => {
|
|
if (e.enName == val) {
|
|
this.Index = i;
|
|
}
|
|
});
|
|
this.screen();
|
|
},
|
|
//选择日期
|
|
timeChange() {
|
|
this.screen();
|
|
},
|
|
//筛选满足条件的返回
|
|
screen() {
|
|
if (
|
|
this.timer.find((e) => e.enName == this.select).TimeType == "daterange"
|
|
) {
|
|
this.$emit("getDateTime", this.select, this.DateTime);
|
|
} else if (
|
|
this.timer.find((e) => e.enName == this.select).TimeType == "date"
|
|
) {
|
|
this.$emit("getDateTime", this.select, this.Time);
|
|
}
|
|
},
|
|
clear() {
|
|
this.select = "";
|
|
this.DateTime = "";
|
|
this.Time = "";
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang='scss'>
|
|
.TimingModule {
|
|
width: 380px;
|
|
display: flex;
|
|
span {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-input__suffix {
|
|
z-index: 1;
|
|
}
|
|
.el-input__inner:hover,
|
|
.el-select:hover .el-input__inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.el-range-editor.is-active,
|
|
.el-range-editor.is-active:hover,
|
|
.el-select .el-input.is-focus .el-input__inner {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.el-range-editor.el-input__inner {
|
|
border-radius: 0px 4px 4px 0px;
|
|
margin-left: -1px;
|
|
}
|
|
}
|
|
::v-deep .el-date-editor {
|
|
width: 100% !important;
|
|
|
|
.el-input__suffix {
|
|
z-index: 1;
|
|
}
|
|
.el-input__prefix {
|
|
z-index: 99;
|
|
}
|
|
.el-input__inner:hover {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.el-input__inner:focus {
|
|
position: relative;
|
|
z-index: 50;
|
|
}
|
|
|
|
.el-input__inner {
|
|
border-radius: 0px 4px 4px 0px;
|
|
margin-left: -1px;
|
|
}
|
|
}
|
|
::v-deep .dateselect {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
min-width: 105px;
|
|
max-width: 140px;
|
|
color: #fff;
|
|
text-align: start;
|
|
.el-input__prefix {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 0 35px 0 18px;
|
|
box-sizing: border-box;
|
|
color: #606266;
|
|
visibility: hidden;
|
|
}
|
|
.el-input {
|
|
height: 100%;
|
|
}
|
|
.el-input__inner {
|
|
padding: 0 15px;
|
|
border-radius: 4px 0 0 4px;
|
|
z-index: 1;
|
|
}
|
|
.el-input__inner:hover {
|
|
z-index: 1;
|
|
}
|
|
.el-input__suffix {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
z-index: 50;
|
|
}
|
|
.el-input__inner {
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
}
|
|
</style> |