You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
<template>
|
|
<el-date-picker
|
|
v-if="options !== null && options.attrs !== null"
|
|
ref="dateRef"
|
|
v-model="options.value"
|
|
:type="options.attrs.type"
|
|
:range-separator="$t(options.attrs.rangeSeparator)"
|
|
:start-placeholder="$t(options.attrs.startPlaceholder)"
|
|
:end-placeholder="$t(options.attrs.endPlaceholder)"
|
|
:placeholder="$t(options.attrs.placeholder)"
|
|
:append-to-body="inScreen"
|
|
style="min-height: 36px"
|
|
@change="dateChange"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import { timeSection } from "@/utils";
|
|
export default {
|
|
props: {
|
|
element: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
inDraw: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
inScreen: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
options: null,
|
|
operator: "between",
|
|
values: null,
|
|
};
|
|
},
|
|
created() {
|
|
this.options = this.element.options;
|
|
if (this.options.attrs.type === "date") {
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
|
|
this.options.value = start;
|
|
console.log("date", this.options, start);
|
|
this.setCondition()
|
|
} else if (this.options.attrs.type === "daterange") {
|
|
const end = new Date();
|
|
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
|
|
const start = new Date();
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 8);
|
|
this.options.value = [start, end];
|
|
console.log("daterange", this.options);
|
|
this.setCondition()
|
|
} else {
|
|
this.options.value = null;
|
|
}
|
|
|
|
if (
|
|
(this.options.attrs.type === "date" || this.options.attrs.type === "daterange") &&
|
|
Array.isArray(this.options.value) &&
|
|
this.options.value.length === 0
|
|
) {
|
|
this.options.value = null;
|
|
}
|
|
if (
|
|
!!this.options &&
|
|
!!this.options.value &&
|
|
Object.keys(this.options.value).length === 0
|
|
) {
|
|
// this.options.value = null;
|
|
}
|
|
},
|
|
methods: {
|
|
search() {
|
|
this.setCondition();
|
|
},
|
|
setCondition() {
|
|
const param = {
|
|
component: this.element,
|
|
value: Array.isArray(this.options.value)
|
|
? this.options.value
|
|
: [this.options.value],
|
|
operator: this.operator,
|
|
};
|
|
param.value = this.formatValues(param.value);
|
|
this.inDraw && this.$store.commit("addViewFilter", param);
|
|
},
|
|
dateChange(value) {
|
|
this.setCondition();
|
|
this.styleChange();
|
|
},
|
|
formatValues(values) {
|
|
if (!values || values.length === 0) {
|
|
return [];
|
|
}
|
|
if (this.options.attrs.type === "daterange") {
|
|
if (values.length !== 2) {
|
|
return null;
|
|
}
|
|
let start = values[0];
|
|
let end = values[1];
|
|
start = timeSection(start, "date")[0];
|
|
end = timeSection(end, "date")[1];
|
|
const results = [start, end];
|
|
return results;
|
|
} else {
|
|
const value = values[0];
|
|
return timeSection(value, this.options.attrs.type);
|
|
}
|
|
},
|
|
styleChange() {
|
|
this.$store.commit("recordStyleChange");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|