el-date-picker date component switching pitfalls
Problem Description:
Question 1. Switch the time selector component required according to the type (the search bar is a form component, which contains input, select, picker, etc., and it can be displayed by passing the specified type in the page used). Switch daily in order for the first time. There is no problem with regular hair, weekly hair, or monthly hair, but when you select weekly hair for the second time, the selector does not change, and then the selector that should have appeared last time will appear when you switch again, and there will be problems 2. The selector is misplaced Phenomenon
solve:
The values passed to the backend are startTIme and endTime, but the actual selector saves an unformatted time. Question 1: The date value should be deleted after each switch of the select value (in order to process the data format required by the backend, so the day and week The time value saved in each month is the same) Question 2: Add a key to each picker in the form component
Complete formComponent component
<!--
* @Description: form组件 页面
* @Use: type可选值：'',numberInput,select,dept,radio,switch,date,daterange,dateNoTime,datetimerange
* @Author: mhf
* @Date: 2023-06-29 17:08:33
-->
<!-- eslint-disable vue/no-mutating-props -->
<template>
<div class="search-component">
<!-- 表单区域 -->
<el-form ref="formRef" :model="form" :inline="inline" :rules="formRules">
<el-form-item
v-for="(item, index) in formLabel"
:key="index"
:label="item.label + ' :'"
:prop="item.value"
>
<el-input
v-if="!item.type"
v-model.trim="form[item.value]"
:placeholder="'请输入' + item.label"
size="small"
:type="item.type ? item.type : 'text'"
/>
<el-input
v-if="item.type === 'numberInput'"
v-model.number="form[item.value]"
:placeholder="'请输入' + item.label"
size="small"
/>
<el-select
v-if="item.type === 'select'"
v-model.trim="form[item.value]"
filterable
:placeholder="'请选择' + item.label"
clearable
size="small"
>
<el-option
v-for="(items, index) in item.opts"
:key="index"
:label="items[item.optLabel]"
:value="items[item.optValue]"
@click.native="selectClick(item, items)"
/>
</el-select>
<treeselect
v-if="item.type === 'dept'"
v-model="form[item.value]"
class="treeBox"
:options="item.opts"
:show-count="true"
:placeholder="'请选择' + item.label"
/>
<template v-if="item.type === 'radio'">
<el-radio
v-for="items in item.opts"
:key="items.value"
v-model="form[item.value]"
:label="items.value"
>{
{ items.label }}
</el-radio>
</template>
<el-switch v-if="item.type === 'switch'" v-model="form[item.value]" />
<el-date-picker
v-if="item.type === 'date'"
key="date"
v-model="form[item.value]"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd HH:mm:ss"
/>
<el-date-picker
v-if="item.type === 'dateNoTime'"
key="dateNoTime"
v-model="form[item.value]"
type="date"
placeholder="选择日期"
value-format="yyyy-MM-dd"
/>
<el-date-picker
v-if="item.type === 'datetimerange'"
key="datetimerange"
v-model="form[item.value]"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
value-format="yyyy-MM-dd HH:mm:ss"
/>
<el-date-picker
v-if="item.type === 'daterange'"
key="daterange"
v-model="form[item.value]"
type="daterange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
value-format="yyyy-MM-dd"
@change="daterangeChange"
/>
<el-date-picker
v-if="item.type === 'week'"
key="week"
v-model="form[item.value]"
type="week"
format="yyyy 第 WW 周"
placeholder="选择周"
@change="weekChange"
>
</el-date-picker>
<el-date-picker
v-if="item.type === 'month'"
key="month"
v-model="form[item.value]"
type="month"
placeholder="选择月"
value-format="yyyy-MM-dd"
@change="monthChange"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<slot name="formSlot" />
</el-form-item>
<div v-if="showOperationBtn" class="right-handle">
<el-form-item>
<el-button
type="primary"
size="small"
icon="el-icon-search"
@click="handleSearch"
>查询
</el-button>
<el-button
size="small"
icon="el-icon-refresh"
@click="handleResetFrom"
>重置
</el-button>
</el-form-item>
<el-form-item />
<el-form-item>
<slot name="handleSlot" />
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
export default {
name: "SearchComponent",
props: {
inline: {
type: Boolean,
default: true,
},
// eslint-disable-next-line vue/require-default-prop
form: {
type: Object,
required: true,
},
// eslint-disable-next-line vue/require-default-prop
formLabel: {
type: Array,
required: true,
},
// eslint-disable-next-line vue/require-default-prop
formRules: {
type: Object,
default: () => {
return {};
},
},
labelWidth: {
type: Number,
default: 90,
},
showOperationBtn: {
type: Boolean,
default: true,
},
},
// 用来以对象方式存放数据
data() {
return {
pickerOptions: {
shortcuts: [
{
text: "今天",
onClick(picker) {
const startTime = new Date(new Date().setHours(0, 0, 0));
const endTime = new Date(new Date().setHours(23, 59, 59));
// const endTime = new Date(); //
picker.$emit("pick", [startTime, endTime]);
},
},
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
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]);
},
},
],
},
};
},
created() {},
mounted() {},
methods: {
selectClick(item, items) {
this.$emit("selectChange", { item, items });
},
handleSearch() {
this.$emit("handleSearch", this.form);
},
handleResetFrom() {
this.$emit("handleResetFrom");
},
daterangeChange(val) {
this.$emit("daterangeChange", val);
},
weekChange(val) {
let timeArr = [];
if (val) {
let startTime = new Date(val.getTime()); //开始时间
let endTime = new Date(val.getTime() + 24 * 60 * 60 * 1000 * 6); //结束时间
timeArr = [
startTime.toISOString().slice(0, 10),
endTime.toISOString().slice(0, 10),
];
}
this.$emit("getTimeArr", timeArr);
},
monthChange(val) {
const [year, month, day] = val.split("-");
const endDate = new Date(year, month, 0).getDate();
let timeArr = [`${year}-${month}-${day}`, `${year}-${month}-${endDate}`];
this.$emit("getMonthArr", timeArr);
},
},
};
</script>
<style lang="scss" scoped>
.search-component {
.right-handle {
display: inline-block;
margin-left: 30px;
}
}
.treeBox {
width: 242px;
}
</style>
Complete page used
<!--
* @Description: 常发拥堵路段 页面
* @Author: mhf
* @Date: 2023-09-14 15:46:36
-->
<template>
<div>
<newPageCompYt
ref="newPageCompYt"
idName="id"
:formLabel="formLabel"
:btnList="btnList"
:tableData="tableData"
:tableConfig="tableConfig"
:tableDataColumn="tableDataColumn"
:total="total"
:paginationConfig.sync="paginationConfig"
:pageSizes="pageSizes"
:exportTypeAndUrl="exportTypeAndUrl"
:customObj="customObj"
@on-response="getBtnType"
@resetForm="resetForm"
@getTableData="getTableData"
@daterangeChange="daterangeChange"
@getTimeRange="getTimeRange"
@getMonthArr="getMonthArr"
@formSelectChange="formSelectChange"
>
<template slot="roadType" slot-scope="scope">
<dict-tag
:options="dict.type.traffic_road_type"
:value="scope.row.roadType"
/>
</template>
<template slot="roadDirection" slot-scope="scope">
<dict-tag
:options="dict.type.traffic_road_direction"
:value="scope.row.roadDirection"
/>
</template>
</newPageCompYt>
</div>
</template>
<script>
import { getLastNumDay } from "@/utils/publicFun";
import { getRoadBlockList } from "@/api/statisticAnalysis/statisticAnalysis";
export default {
name: "roadCongested",
components: {},
props: {},
dicts: ["traffic_often_type", "traffic_road_type", "traffic_road_direction"],
computed: {
customObj() {
let flag = false;
if (this.paginationConfig.queryAllTime) {
flag =
this.paginationConfig.queryAllTime.length > 0 ||
this.paginationConfig.queryAllTime !== [];
} else {
flag = false;
}
return {
startTime: flag
? this.paginationConfig.queryAllTime[0] + " 00:00:00"
: null,
endTime: flag
? this.paginationConfig.queryAllTime[1] + " 23:59:59"
: null,
oftenType: this.paginationConfig.oftenType,
pageNum: this.paginationConfig.pageNum,
pageSize: this.paginationConfig.pageSize,
};
},
},
data() {
return {
formLabel: [
{
label: "常发类型",
value: "oftenType",
type: "select",
opts: [],
dict: "traffic_often_type",
optLabel: "dictLabel",
optValue: "dictValue",
},
{
label: "日期",
value: "queryAllTime",
type: "daterange",
},
],
btnList: [
{
name: "导出",
icon: "iconfont if-daochu",
color: "#1492FF",
hasPermi: "system:user:resetPwd",
},
],
tableData: [],
tableConfig: {
isLoading: false,
},
tableDataColumn: [
{ name: "序号", value: "index" },
{ name: "路段名称", value: "roadName" },
{ name: "道路方向", value: "roadDirection", isSlot: true },
{ name: "道路等级", value: "roadType", isSlot: true },
],
total: 0,
paginationConfig: {
pageNum: 1,
pageSize: 10,
},
pageSizes: [5, 10, 15, 20],
exportTypeAndUrl: {
isCustom: true,
exportType: "trafficTrend",
exportUrl: "/trafficRun/dataReport/congestedRoad",
},
};
},
methods: {
getTableData() {
this.tableConfig.isLoading = true;
const { queryAllTime, ...obj } = this.paginationConfig;
getRoadBlockList(obj).then((response) => {
this.tableData = response.data.rows !== null ? response.data.rows : [];
this.total = response.data.total;
this.tableConfig.isLoading = false;
});
},
getSETime(timeArr) {
if (timeArr.length > 0) {
this.$set(this.paginationConfig, "startTime", timeArr[0] + " 00:00:00");
this.$set(this.paginationConfig, "endTime", timeArr[1] + " 23:59:59");
} else {
this.$set(this.paginationConfig, "startTime", null);
this.$set(this.paginationConfig, "endTime", null);
}
},
daterangeChange(timeRange) {
this.getSETime(timeRange);
},
getTimeRange(timeRange) {
this.getSETime(timeRange);
},
getMonthArr(timeRange) {
this.getSETime(timeRange);
},
weekChange(val) {
// let timeArr = []
// if (val) {
// let startTime = new Date(val.getTime()); //开始时间
// let endTime = new Date(val.getTime() + (24 * 60 * 60 * 1000) * 6); //结束时间
// timeArr = [startTime.toISOString().slice(0, 10), endTime.toISOString().slice(0, 10)];
// }
},
formSelectChange(obj) {
if (obj.item.label === "常发类型") {
let arr = [
{
label: "日期",
value: "queryAllTime",
type: "daterange",
},
{
label: "日期",
value: "queryAllTime",
type: "week",
},
{
label: "日期",
value: "queryAllTime",
type: "month",
},
];
this.formLabel[1] = arr[obj.items.dictValue - 1]
this.$set(this.paginationConfig, 'queryAllTime', null)
delete this.paginationConfig.queryAllTime // 主要是这步 清空原先保存的值（问题1）
this.getSETime([])
}
},
getBtnType(type) {
console.log(type);
},
resetForm() {
let timeArr = getLastNumDay(30, false);
this.$set(this.paginationConfig, "queryAllTime", timeArr);
this.$set(this.paginationConfig, "startTime", timeArr[0]);
this.$set(this.paginationConfig, "endTime", timeArr[1]);
this.$set(this.paginationConfig, "oftenType", "1");
this.formLabel[1] = {
label: "日期",
value: "queryAllTime",
type: "daterange",
};
},
},
created() {
this.resetForm();
},
mounted() {},
};
</script>
<style lang="scss" scoped></style>Question 2 Just read this paragraph
<el-date-picker
v-if="item.type === 'datetimerange'"
key="datetimerange"
v-model="form[item.value]"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
value-format="yyyy-MM-dd HH:mm:ss"
/>