|
@@ -1,50 +1,30 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <cardcountpanel :showCount="showCount" :statisticList="statisticList" />
|
|
|
- <el-form
|
|
|
- :model="queryParams.queryMap"
|
|
|
- ref="queryForm"
|
|
|
- size="small"
|
|
|
- :inline="true"
|
|
|
- label-width="68px"
|
|
|
- @submit.native.prevent
|
|
|
- v-show="showSearch"
|
|
|
- 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-if="true" class="btn-wrap">
|
|
|
+ <div v-show="showSearch" class="btn-wrap">
|
|
|
<!-- 条件循环-->
|
|
|
<span v-for="(item, index) in formVals" :key="index">
|
|
|
<!-- input框循环-->
|
|
|
<span
|
|
|
v-if="item.conditionType == 'input'"
|
|
|
- style="width: 500px; height: 500px"
|
|
|
- >
|
|
|
+ style="width: 500px; height: 500px">
|
|
|
<el-form-item
|
|
|
:label="item.conditionName"
|
|
|
- :prop="item.conditionField"
|
|
|
>
|
|
|
+ <!-- :label-width="calculateLabelWidth(item.conditionName)"-->
|
|
|
<el-input
|
|
|
v-model="queryParams.queryMap[item.conditionField]"
|
|
|
:placeholder="
|
|
@@ -55,7 +35,6 @@
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
</span>
|
|
|
-
|
|
|
<!-- button按钮循环-->
|
|
|
<span v-if="item.conditionType == 'button'">
|
|
|
<el-form-item :label="item.conditionName">
|
|
@@ -69,8 +48,7 @@
|
|
|
@keyup.enter.native="btnClick"
|
|
|
@click="
|
|
|
btnClick(item.conditionField, item.conditionDefaultValue)
|
|
|
- "
|
|
|
- >
|
|
|
+ ">
|
|
|
<span>
|
|
|
<svg-icon
|
|
|
v-if="item.componentIcon"
|
|
@@ -78,37 +56,30 @@
|
|
|
slot="prefix"
|
|
|
:icon-class="item.componentIcon"
|
|
|
/>{{
|
|
|
- item.conditionNotes == null ? "按钮" : item.conditionNotes
|
|
|
+ item.conditionName == null ? "按钮" : item.conditionName
|
|
|
}}
|
|
|
</span>
|
|
|
</el-button>
|
|
|
</el-form-item>
|
|
|
- <div style="clear: both" />
|
|
|
+ <div style="clear: both"/>
|
|
|
</span>
|
|
|
- <div style="clear: both" />
|
|
|
-
|
|
|
+ <div style="clear: both"/>
|
|
|
<!-- select下拉框循环-->
|
|
|
<span
|
|
|
v-if="item.conditionType == 'select'"
|
|
|
- style="width: 500px; height: 500px"
|
|
|
- >
|
|
|
+ style="width: 500px; height: 500px">
|
|
|
<el-form-item
|
|
|
- :label="item.conditionName"
|
|
|
- :prop="item.conditionField"
|
|
|
- >
|
|
|
+ :label="item.conditionName">
|
|
|
<el-select
|
|
|
v-model="queryParams.queryMap[item.conditionField]"
|
|
|
:placeholder="
|
|
|
item.conditionNotes == null ? '请选择' : item.conditionNotes
|
|
|
- "
|
|
|
- clearable
|
|
|
- filterable
|
|
|
- >
|
|
|
+ " clearable filterable>
|
|
|
<el-option
|
|
|
v-for="(i, index) in item.dropDownList"
|
|
|
:key="index"
|
|
|
- :label="i.fieldName"
|
|
|
- :value="i.fieldKey"
|
|
|
+ :label="i.label"
|
|
|
+ :value="i.value"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
|
|
@@ -125,7 +96,7 @@
|
|
|
v-if="item.conditionType == 'radio'"
|
|
|
style="width: 500px; height: 500px"
|
|
|
>
|
|
|
- <el-form-item :prop="item.conditionField">
|
|
|
+ <el-form-item>
|
|
|
<el-button
|
|
|
:type="item.componentType"
|
|
|
:icon="item.componentIcon"
|
|
@@ -138,25 +109,37 @@
|
|
|
</span>
|
|
|
<!-- time时间范围 -->
|
|
|
<span
|
|
|
- v-if="item.conditionType == 'between'"
|
|
|
+ v-if="item.conditionType == 'datetimerange'"
|
|
|
style="width: 500px; height: 500px"
|
|
|
>
|
|
|
<el-form-item
|
|
|
:label="item.conditionName"
|
|
|
- :prop="item.conditionField"
|
|
|
>
|
|
|
<!-- item.componentType 使用某种组件
|
|
|
year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange-->
|
|
|
- <el-date-picker
|
|
|
- v-model="queryParams.queryMap[item.conditionField]"
|
|
|
- :type="item.componentType"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- value-format="yyyy-MM-DD HH:mm:ss"
|
|
|
- :default-time="['12:00:00']"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
+
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.queryMap[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>
|
|
|
+
|
|
|
+ <!-- <el-date-picker-->
|
|
|
+ <!-- v-model="queryParams.queryMap[item.conditionField]"-->
|
|
|
+ <!-- :type="item.componentType"-->
|
|
|
+ <!-- :picker-options="pickerOptions"-->
|
|
|
+ <!-- range-separator="至"-->
|
|
|
+ <!-- start-placeholder="开始日期"-->
|
|
|
+ <!-- end-placeholder="结束日期"-->
|
|
|
+ <!-- value-format="yyyy-MM-DD HH:mm:ss"-->
|
|
|
+ <!-- :default-time="['12:00:00']"-->
|
|
|
+ <!-- >-->
|
|
|
+ <!-- </el-date-picker>-->
|
|
|
</el-form-item>
|
|
|
</span>
|
|
|
</span>
|
|
@@ -185,7 +168,7 @@ export default {
|
|
|
type: Array,
|
|
|
},
|
|
|
},
|
|
|
- components: { cardcountpanel },
|
|
|
+ components: {cardcountpanel},
|
|
|
data() {
|
|
|
return {
|
|
|
// 时间范围临时存储
|
|
@@ -217,6 +200,33 @@ export default {
|
|
|
selects: [],
|
|
|
// 单选/按钮
|
|
|
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]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
// card
|
|
|
};
|
|
|
},
|
|
@@ -251,6 +261,12 @@ export default {
|
|
|
// console.log("statisticList", this.statisticList)
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 计算form宽度-label
|
|
|
+ calculateLabelWidth(font) {
|
|
|
+ // 一个汉字为20px宽度
|
|
|
+ console.log("当前form中label宽度:", 20 * font.length, font);
|
|
|
+ return 20 * font.length;
|
|
|
+ },
|
|
|
// radio 点击事件调用getList
|
|
|
buttonClick(tem) {
|
|
|
// 调用父组件中的getlist 待处理
|
|
@@ -301,6 +317,7 @@ export default {
|
|
|
.pre-icon {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
+
|
|
|
.cardBox {
|
|
|
display: flex;
|
|
|
align-content: space-between;
|
|
@@ -346,8 +363,9 @@ export default {
|
|
|
font-size: 30px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.btn-wrap {
|
|
|
display: flex;
|
|
|
- flex-direction: row-reverse;
|
|
|
+ //flex-direction: row-reverse;
|
|
|
}
|
|
|
</style>
|