|
@@ -1,41 +1,74 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <cardcountpanel :showCount="showCount" :statisticList="statisticList"/>
|
|
|
- <el-form :model="queryParams.queryMap" ref="queryForm" size="small" :inline="true" @submit.native.prevent
|
|
|
- class="demo-form-inline">
|
|
|
+ <cardcountpanel :showCount="showCount" :statisticList="statisticList" />
|
|
|
+ <el-form
|
|
|
+ :model="queryParams.queryMap"
|
|
|
+ ref="queryForm"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ @submit.native.prevent
|
|
|
+ class="demo-form-inline"
|
|
|
+ >
|
|
|
<el-form-item label="超级查询">
|
|
|
- <el-input v-model="queryParams.queryMap.queryCriteriaValue" placeholder="请输入"
|
|
|
- @keyup.enter.native="handleQuery" clearable/>
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.queryMap.queryCriteriaValue"
|
|
|
+ placeholder="请输入"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ clearable
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
|
|
|
<!-- 不加载初始数据 -->
|
|
|
<div v-show="showSearch" class="btn-wrap">
|
|
|
<!-- 条件循环-->
|
|
|
- <span v-if="!(formVals.length&&queryParams.queryMap)"/>
|
|
|
+ <span v-if="!(formVals.length && queryParams.queryMap)" />
|
|
|
<span v-else v-for="(item, index) in formVals" :key="index">
|
|
|
<!-- input框循环-->
|
|
|
<span v-if="item.conditionType == 'input'">
|
|
|
<el-form-item :label="item.conditionName">
|
|
|
<!-- :label-width="calculateLabelWidth(item.conditionName)"-->
|
|
|
- <el-input v-model="queryParams.queryMap[item.conditionField]" @keyup.enter.native="handleQuery" clearable
|
|
|
- :placeholder=" item.conditionNotes == null ? '请输入' : item.conditionNotes"/>
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.queryMap[item.conditionField]"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ clearable
|
|
|
+ :placeholder="
|
|
|
+ item.conditionNotes == null ? '请输入' : item.conditionNotes
|
|
|
+ "
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</span>
|
|
|
<!-- button按钮循环-->
|
|
|
<span v-if="item.conditionType == 'button'">
|
|
|
<el-form-item>
|
|
|
- <el-button :size="item.componentSize" :type="item.componentType" @keyup.enter.native="btnClick"
|
|
|
- @click=" btnClick(item.conditionField, item.conditionDefaultValue)">
|
|
|
+ <el-button
|
|
|
+ :size="item.componentSize"
|
|
|
+ :type="item.componentType"
|
|
|
+ @keyup.enter.native="btnClick"
|
|
|
+ @click="
|
|
|
+ btnClick(item.conditionField, item.conditionDefaultValue)
|
|
|
+ "
|
|
|
+ >
|
|
|
<span>
|
|
|
- <svg-icon v-if="item.componentIcon" class="pre-icon" slot="prefix" :icon-class="item.componentIcon"/>
|
|
|
- {{
|
|
|
- item.conditionName == null ? "按钮" : item.conditionName
|
|
|
- }}
|
|
|
+ <svg-icon
|
|
|
+ v-if="item.componentIcon"
|
|
|
+ class="pre-icon"
|
|
|
+ slot="prefix"
|
|
|
+ :icon-class="item.componentIcon"
|
|
|
+ />
|
|
|
+ {{ item.conditionName == null ? "按钮" : item.conditionName }}
|
|
|
</span>
|
|
|
</el-button>
|
|
|
</el-form-item>
|
|
@@ -43,32 +76,50 @@
|
|
|
<!-- select下拉框循环-->
|
|
|
<span v-if="item.conditionType == 'select'">
|
|
|
<el-form-item :label="item.conditionName">
|
|
|
- <el-select v-model="queryParams.queryMap[item.conditionField]"
|
|
|
- :placeholder=" item.conditionNotes == null ? '请选择' : item.conditionNotes" clearable
|
|
|
- filterable>
|
|
|
- <el-option v-for="(i, index) in item.dropDownList" :key="index" :label="i.label"
|
|
|
- :value="i.value"></el-option>
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.queryMap[item.conditionField]"
|
|
|
+ :placeholder="
|
|
|
+ item.conditionNotes == null ? '请选择' : item.conditionNotes
|
|
|
+ "
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(i, index) in item.dropDownList"
|
|
|
+ :key="index"
|
|
|
+ :label="i.label"
|
|
|
+ :value="i.value"
|
|
|
+ ></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</span>
|
|
|
<!-- radio单选框循环-->
|
|
|
<span v-if="item.conditionType == 'radio'">
|
|
|
<el-form-item>
|
|
|
- <el-button :type="item.componentType" :icon="item.componentIcon" :size="item.componentSize"
|
|
|
- @click="buttonClick(item)">{{ item.conditionName }}</el-button>
|
|
|
+ <el-button
|
|
|
+ :type="item.componentType"
|
|
|
+ :icon="item.componentIcon"
|
|
|
+ :size="item.componentSize"
|
|
|
+ @click="buttonClick(item)"
|
|
|
+ >{{ item.conditionName }}</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
</span>
|
|
|
<!-- time时间范围 -->
|
|
|
- <span
|
|
|
- v-if="item.conditionType == 'datetimerange'">
|
|
|
+ <span v-if="item.conditionType == 'datetimerange'">
|
|
|
<el-form-item :label="item.conditionName">
|
|
|
<!-- item.componentType 使用某种组件
|
|
|
year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange-->
|
|
|
- <el-date-picker v-model="queryParams.queryMap.timehorizon[item.conditionField]"
|
|
|
- :type="item.conditionType" :picker-options="pickerOptions"
|
|
|
- range-separator="至" start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
- align="right"/>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.queryMap.timehorizon[item.conditionField]"
|
|
|
+ :type="item.conditionType"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ align="right"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</span>
|
|
|
<!-- <span v-if="index==3">-->
|
|
@@ -101,7 +152,7 @@ export default {
|
|
|
type: Array,
|
|
|
},
|
|
|
},
|
|
|
- components: {cardcountpanel},
|
|
|
+ components: { cardcountpanel },
|
|
|
data() {
|
|
|
return {
|
|
|
// 共通查询参数
|
|
@@ -134,31 +185,35 @@ export default {
|
|
|
// 单选/按钮
|
|
|
radios: [],
|
|
|
pickerOptions: {
|
|
|
- shortcuts: [{
|
|
|
- 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]);
|
|
|
- }
|
|
|
- }]
|
|
|
+ shortcuts: [
|
|
|
+ {
|
|
|
+ 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]);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
};
|
|
|
},
|
|
@@ -169,18 +224,21 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
handlerFormVals() {
|
|
|
- console.log("监听调用")
|
|
|
+ console.log("监听调用");
|
|
|
// 处理当前需要渲染的查询条件 // 删除超级查询、默认查询得到实际需要渲染查询条件数组
|
|
|
this.formVals.forEach((item, index) => {
|
|
|
- if (item.conditionType == "DefaultQuery" || item.conditionType == "SuperQuery") {
|
|
|
- this.formVals.splice(index, 1)
|
|
|
+ if (
|
|
|
+ item.conditionType == "DefaultQuery" ||
|
|
|
+ item.conditionType == "SuperQuery"
|
|
|
+ ) {
|
|
|
+ this.formVals.splice(index, 1);
|
|
|
}
|
|
|
});
|
|
|
// 排序
|
|
|
this.formVals.sort((a, b) => {
|
|
|
if (a.sort < b.sort) return -1;
|
|
|
if (a.sort > b.sort) return 1;
|
|
|
- return 0;// 如果sort相等,保持原相对顺序(稳定排序)
|
|
|
+ return 0; // 如果sort相等,保持原相对顺序(稳定排序)
|
|
|
});
|
|
|
},
|
|
|
// 计算form宽度-label
|
|
@@ -200,32 +258,42 @@ export default {
|
|
|
/** 搜索按钮操作 */
|
|
|
handleQuery() {
|
|
|
// 拷贝查询参数对象
|
|
|
- let tempQueryParams = Object.assign({}, JSON.parse(JSON.stringify(this.queryParams)));
|
|
|
+ let tempQueryParams = Object.assign(
|
|
|
+ {},
|
|
|
+ JSON.parse(JSON.stringify(this.queryParams))
|
|
|
+ );
|
|
|
// 调用组件中的getList
|
|
|
this.queryParams.pageNum = 1;
|
|
|
- if (tempQueryParams.queryMap.timehorizon && typeof (tempQueryParams.queryMap.timehorizon) != "undefined") {
|
|
|
+ if (
|
|
|
+ tempQueryParams.queryMap.timehorizon &&
|
|
|
+ typeof tempQueryParams.queryMap.timehorizon != "undefined"
|
|
|
+ ) {
|
|
|
// 处理时间查询参数 this.queryParams.queryMap.timehorizon
|
|
|
// 得到当前查询所需时间范围
|
|
|
- let timehorizon = Object.assign({}, JSON.parse(JSON.stringify(tempQueryParams.queryMap.timehorizon)));
|
|
|
+ let timehorizon = Object.assign(
|
|
|
+ {},
|
|
|
+ JSON.parse(JSON.stringify(tempQueryParams.queryMap.timehorizon))
|
|
|
+ );
|
|
|
tempQueryParams.queryMap.timehorizon = {};
|
|
|
// 得到所有时间范围查询条件参数
|
|
|
let keys = Object.keys(timehorizon);
|
|
|
if (keys.length != 0) {
|
|
|
// 循环处理时间范围
|
|
|
- keys.forEach(item => {
|
|
|
+ keys.forEach((item) => {
|
|
|
let times = timehorizon[item];
|
|
|
times = Array.isArray(times) ? times : [];
|
|
|
- if (times.length >= 2) { // 确保times数组至少有两个元素
|
|
|
+ if (times.length >= 2) {
|
|
|
+ // 确保times数组至少有两个元素
|
|
|
let parms = {
|
|
|
- 'beginTime': times[0],
|
|
|
- 'endTime': times[1]
|
|
|
+ beginTime: times[0],
|
|
|
+ endTime: times[1],
|
|
|
};
|
|
|
- tempQueryParams.queryMap.timehorizon[item] = parms
|
|
|
+ tempQueryParams.queryMap.timehorizon[item] = parms;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
- this.$emit("getList", tempQueryParams)
|
|
|
+ this.$emit("getList", tempQueryParams);
|
|
|
|
|
|
// 以下注释勿动!!!⚠️⚠️⚠️
|
|
|
// // 处理时间查询参数 this.queryParams.queryMap.timehorizon
|
|
@@ -288,7 +356,6 @@ export default {
|
|
|
},
|
|
|
/** 重置按钮操作 */
|
|
|
resetQuery() {
|
|
|
- debugger;
|
|
|
// 查询表单清空
|
|
|
this.resetForm("queryForm");
|
|
|
// 清空查询条件
|
|
@@ -297,7 +364,7 @@ export default {
|
|
|
timehorizon: {},
|
|
|
// 超级查询的唯一值
|
|
|
queryCriteriaValue: "",
|
|
|
- }
|
|
|
+ };
|
|
|
// {
|
|
|
// isAsc: this.sortState ? "DESC" : "ASC", // desc(降序)或 asc(升序)
|
|
|
// // 基本查询参数
|