|
@@ -5,18 +5,16 @@
|
|
|
<div class="newQuery-head-left flex-wrap">
|
|
|
<div class="title">高级查询</div>
|
|
|
<div class="btns">
|
|
|
- <el-button v-for="(item,index) in queryBtns" :key="index" size="mini" plain type="primary">
|
|
|
- <span class="btnName">{{ item.label }}{{ index+1 }}</span>
|
|
|
- <el-popconfirm title="是否要删除这一行?" @confirm="handleRemove(index)">
|
|
|
- <span slot="reference" class="btnIcon"><i class="el-icon-close"></i></span>
|
|
|
- </el-popconfirm>
|
|
|
+ <el-button v-for="(item,index) in queryItems" :key="index" @click="handleClick(item)" size="mini" plain type="primary">
|
|
|
+ <span class="btnName">{{ item.name }}</span>
|
|
|
+ <span @click.stop="handleRemove(item)" class="btnIcon"><i class="el-icon-close"></i></span>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="newQuery-head-right flex-wrap">
|
|
|
<template v-if="flag">
|
|
|
<el-button @click="handleAdd" size="mini" plain type="primary">新增</el-button>
|
|
|
- <el-button size="mini" plain type="primary">保存条件</el-button>
|
|
|
+ <el-button @click="saveItem" size="mini" plain type="primary">保存条件</el-button>
|
|
|
</template>
|
|
|
<el-button @click="handleSearch" size="mini" plain type="primary">查询</el-button>
|
|
|
<el-button type="primary" plain size="mini" icon="el-icon-download"></el-button>
|
|
@@ -29,80 +27,173 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="flag" class="newQuery-search">
|
|
|
- <Search ref="searchTable" />
|
|
|
+ <Search :dataQuery="dataQuery" @getColData="getColData" ref="searchTable" />
|
|
|
</div>
|
|
|
- <div class="newQuery-table">
|
|
|
+ <div :style="{height:tableHeight}" class="newQuery-table">
|
|
|
<Table />
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <Dialog width="520px" :flag="diaFlag">
|
|
|
+ <div class="dialog-content">
|
|
|
+ <div class="title">查询条件保存</div>
|
|
|
+ <div class="contents">
|
|
|
+ <el-form ref="form" :model="formObj" label-width="80px">
|
|
|
+ <el-form-item label="条件名称">
|
|
|
+ <el-input clearable v-model="formObj.name" placeholder="请输入条件名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="foot right">
|
|
|
+ <el-button size="medium" @click="handleOk" class="r24" type="primary">确定</el-button>
|
|
|
+ <el-button @click="diaFlag = false" size="medium">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
+ <!--删除-->
|
|
|
+ <Dialog :flag="rmFlag">
|
|
|
+ <div class="airportInfoDialog">
|
|
|
+ <div class="title del-title">删除</div>
|
|
|
+ <div class="content del-content">
|
|
|
+ <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ rmTitle }}</span>
|
|
|
+ ?
|
|
|
+ </div>
|
|
|
+ <div class="foot right Delfoot">
|
|
|
+ <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
|
|
|
+ <el-button size="medium" @click="rmFlag = false">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Search from './components/search.vue'
|
|
|
import Table from '../table/index.vue'
|
|
|
+import Dialog from '@/layout/components/Dialog/index.vue'
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
+import pf from '@/layout/mixin/publicFunc'
|
|
|
export default {
|
|
|
name: 'NewQuery',
|
|
|
- components: { Search, Table },
|
|
|
+ components: { Search, Table, Dialog },
|
|
|
+ mixins: [pf],
|
|
|
data () {
|
|
|
return {
|
|
|
- queryBtns: [
|
|
|
- {
|
|
|
- label: '查询条件',
|
|
|
- params: {}
|
|
|
- },
|
|
|
- {
|
|
|
- label: '查询条件',
|
|
|
- params: {}
|
|
|
- },
|
|
|
- {
|
|
|
- label: '查询条件',
|
|
|
- params: {}
|
|
|
- },
|
|
|
- {
|
|
|
- label: '查询条件',
|
|
|
- params: {}
|
|
|
- },
|
|
|
- {
|
|
|
- label: '查询条件',
|
|
|
- params: {}
|
|
|
- }
|
|
|
- ],
|
|
|
+ queryBtns: [],
|
|
|
flag: false,
|
|
|
- tableData: [{
|
|
|
- date: '2016-05-02',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄'
|
|
|
- }, {
|
|
|
- date: '2016-05-04',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1517 弄'
|
|
|
- }, {
|
|
|
- date: '2016-05-01',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1519 弄'
|
|
|
- }, {
|
|
|
- date: '2016-05-03',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1516 弄'
|
|
|
- }]
|
|
|
+ queryType: '',
|
|
|
+ diaFlag: false,
|
|
|
+ rmFlag: false,
|
|
|
+ formObj: {
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ queryArrs: [],
|
|
|
+ nameArrs: [],
|
|
|
+ rmObj: {},
|
|
|
+ rmTitle: '',
|
|
|
+ tbObj: {},
|
|
|
+ dataQuery: [],
|
|
|
+ queryItems: JSON.parse(localStorage.getItem('localItems')) ?? []
|
|
|
}
|
|
|
},
|
|
|
- created () {
|
|
|
- this.$route.meta.auth_id = 27
|
|
|
+ computed: {
|
|
|
+ tableHeight () {
|
|
|
+ if (this.flag) {
|
|
|
+ return 'calc(100% - 390px)';
|
|
|
+ } else {
|
|
|
+ return 'calc(100% - 120px)';
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
//删除查询条件
|
|
|
- handleRemove (index) {
|
|
|
- this.queryBtns.splice(index, 1)
|
|
|
+ handleRemove (item) {
|
|
|
+ this.rmFlag = true
|
|
|
+ this.rmObj = item
|
|
|
+ this.rmTitle = item.name
|
|
|
},
|
|
|
//新增查询
|
|
|
handleAdd () {
|
|
|
this.$refs.searchTable.addParamsHandler()
|
|
|
},
|
|
|
+ //
|
|
|
+ handleClick (item) {
|
|
|
+ this.flag = true
|
|
|
+ const { value } = item
|
|
|
+ setTimeout(() => {
|
|
|
+ this.dataQuery = value
|
|
|
+ }, 50);
|
|
|
+ },
|
|
|
+ // 保存条件
|
|
|
+ saveItem () {
|
|
|
+ this.diaFlag = true
|
|
|
+ this.queryType = 'save'
|
|
|
+ this.$refs.searchTable.advancedQueryHandler()
|
|
|
+ },
|
|
|
+ //获取缓存数据
|
|
|
+ getLocalData () {
|
|
|
+ const datas = localStorage.getItem('localItems')
|
|
|
+ if (datas) {
|
|
|
+ const newDatas = JSON.parse(datas)
|
|
|
+ return newDatas
|
|
|
+ } else {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //查询数据
|
|
|
+ getColData (arrs) {
|
|
|
+ if (this.queryType == 'save') {
|
|
|
+ this.queryArrs.push(arrs)
|
|
|
+ } else {
|
|
|
+ this.getQueryList(this.AqueryId, {
|
|
|
+ filter: arrs
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
//查询
|
|
|
handleSearch () {
|
|
|
+ this.queryType = 'query'
|
|
|
this.$refs.searchTable.advancedQueryHandler()
|
|
|
+ },
|
|
|
+ //确定-保存条件
|
|
|
+ handleOk () {
|
|
|
+ const localDatas = this.getLocalData()
|
|
|
+ let datas = []
|
|
|
+ const name = this.formObj.name
|
|
|
+ this.nameArrs.push(name)
|
|
|
+ const nameIndex = this.nameArrs.slice(-5)
|
|
|
+ const arrs = _.cloneDeep(this.queryArrs).slice(-5)
|
|
|
+ arrs.forEach((item, index) => {
|
|
|
+ const obj = {
|
|
|
+ name: nameIndex[index],
|
|
|
+ value: item,
|
|
|
+ userid: getToken('userid')
|
|
|
+ }
|
|
|
+ datas.push(obj)
|
|
|
+ })
|
|
|
+ if (localDatas && localDatas.length) {
|
|
|
+ datas = [...localDatas, ...datas]
|
|
|
+ }
|
|
|
+ const caps = _.uniqBy(datas, 'name')
|
|
|
+ this.queryItems = caps.slice(-5)
|
|
|
+ this.formObj.name = ''
|
|
|
+ localStorage.setItem('localItems', JSON.stringify(this.queryItems))
|
|
|
+ this.diaFlag = false
|
|
|
+ },
|
|
|
+ //确定-删除
|
|
|
+ tableRemove () {
|
|
|
+ const item = this.rmObj
|
|
|
+ const datas = JSON.parse(localStorage.getItem('localItems'))
|
|
|
+ if (datas && datas.length) {
|
|
|
+ datas.forEach((nitem, index) => {
|
|
|
+ if (item.name == nitem.name) {
|
|
|
+ datas.splice(index, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.queryItems = datas
|
|
|
+ localStorage.setItem('localItems', JSON.stringify(datas))
|
|
|
+ this.dataQuery = []
|
|
|
+ this.rmFlag = false
|
|
|
}
|
|
|
}
|
|
|
}
|