erp-el-element/CommonInput/TimingModule.vue

317 lines
7.6 KiB
Vue

<template>
<div class="TimingModule">
<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 {
name:'TimingModule',
props: {
default: {
default: null,
},
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;
return this.data.filter((item) => item.type === "el-date-picker");
},
},
methods: {
//选择分类
selectChange(val) {
this.timer.forEach((e, i) => {
if (e.enName == val) {
this.Index = i;
}
});
this.screen();
},
//选择日期
timeChange(e) {
this.screen();
},
//筛选满足条件的返回
screen() {
if (
this.timer.find((e) => e.enName == this.select).TimeType == "daterange"
) {
this.$emit("getDateTime", this.select, this.DateTime);
console.log(this.select, this.DateTime);
} else if (
this.timer.find((e) => e.enName == this.select).TimeType == "date"
) {
this.$emit("getDateTime", this.select, this.Time);
console.log(this.select, 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>