266 lines
7.7 KiB
Vue
266 lines
7.7 KiB
Vue
<template>
|
|
<el-dialog
|
|
title="高级查询构造器"
|
|
:visible.sync="dialogVisible"
|
|
:close-on-click-modal="false"
|
|
width="50%">
|
|
|
|
<el-row type="flex">
|
|
<el-col style="display:flex;align-items: center;width: 200px">
|
|
<vi-title title="过滤条件匹配："
|
|
style="display:flex;align-items: center;margin-bottom: 0"></vi-title>
|
|
</el-col>
|
|
<el-col>
|
|
<enum-select v-model="value.method" value="name" :clearable="false" label="description"
|
|
style="width: 300px"
|
|
enum="MatchMethod"></enum-select>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row v-for="(cnd,idx) in value.conditions" gutter="20" style="margin-top: 20px" type="flex">
|
|
<el-col span="7">
|
|
<el-select v-model="cnd.field" placeholder="请选择字段" style="width: 100%"
|
|
@change="(v)=>fieldChange(v,cnd)">
|
|
<el-option
|
|
v-for="item in fields"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col span="4">
|
|
<enum-select v-model="cnd.operational" value="name" :clearable="false" label="description"
|
|
style="width: 100%"
|
|
enum="ConditionalOperational"></enum-select>
|
|
</el-col>
|
|
<el-col span="9">
|
|
|
|
<el-select v-if="cnd.fieldObj&&cnd.fieldObj.type=='select'" v-model="cnd.value"
|
|
placeholder="请选择值"
|
|
filterable
|
|
style="width: 100%"
|
|
clearable>
|
|
<el-option
|
|
v-for="item in cnd.fieldObj.options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
|
|
<el-date-picker
|
|
v-else-if="cnd.fieldObj&&cnd.fieldObj.type=='date'"
|
|
v-model="cnd.value"
|
|
type="date"
|
|
value-format="yyyy-MM-dd"
|
|
placeholder="请选择日期" style="width: 100%">
|
|
</el-date-picker>
|
|
|
|
<el-input v-else v-model="cnd.value" clearable placeholder="请输入值"
|
|
style="width: 100%"></el-input>
|
|
|
|
</el-col>
|
|
<el-col style="width: 180px">
|
|
<el-button icon="el-icon-plus" @click="value.conditions.splice(idx+1, 0, {})"></el-button>
|
|
<el-button icon="el-icon-minus" :disabled="value.conditions.length==1"
|
|
@click="value.conditions.splice(idx, 1)"></el-button>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row v-if="show_filter_result" :gutter="10" class="mt20">
|
|
<table-tool :app="this" label="查询结果">
|
|
<template #func>
|
|
<!-- <el-button @click="openAdd" size="small" type="primary">新增类型</el-button>-->
|
|
</template>
|
|
</table-tool>
|
|
|
|
<el-table :data="searchData" :size="tableSize" v-loading="tableLoading" style="width: 100%">
|
|
<el-table-column header-align="center" label="序号" type="index"
|
|
width="80px"></el-table-column>
|
|
|
|
<el-table-column
|
|
v-for="column in tableColumns"
|
|
:label="column.label"
|
|
:prop="column.prop"
|
|
:sortable="column.sortable"
|
|
:width="column.width"
|
|
align="center"
|
|
header-align="center"
|
|
min-width="50"
|
|
show-overflow-tooltip
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-row class="el-pagination-container" style="margin-bottom: 0px">
|
|
<el-pagination
|
|
:current-page="pageForm.pageNumber"
|
|
:page-size="pageForm.pageSize"
|
|
:page-sizes="[5,10, 20, 30, 50]"
|
|
:total="pageForm.totalCount"
|
|
layout="total, sizes, prev, pager, next"
|
|
@size-change="pageSizeChange"
|
|
@current-change="pageNumberChange">
|
|
</el-pagination>
|
|
</el-row>
|
|
|
|
</el-row>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="doSubmit" v-if="show_submit">{{ submit_text }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
module.exports = {
|
|
props: {
|
|
value: {
|
|
type: Object, default: {
|
|
method: "AND",
|
|
conditions: [{}],
|
|
}
|
|
},
|
|
fields: [],
|
|
submit_text: {type: String, default: '确 定'},
|
|
show_filter_result: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
show_submit: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
model: {
|
|
prop: 'value',
|
|
event: 'confirm'
|
|
},
|
|
components: {'enum-select': httpVueLoader('/components/plugins/EnumSelect.vue?v=1.0.0'),},
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
searchData: [],
|
|
tableSize: null,
|
|
tableLoading: false,
|
|
tableColumns: [
|
|
{label: '姓名', prop: 'username'},
|
|
{label: '工号', prop: 'loginname'},
|
|
{label: '性别', prop: 'sex'},
|
|
{label: '单位', prop: 'unitname'},
|
|
{label: '分工会', prop: 'unionname'},
|
|
],
|
|
pageForm: {pageNumber: 1, totalCount: 0, pageSize: 5}
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
deep: true,
|
|
handler: function (value) {
|
|
if (value.conditions.length) {
|
|
value.conditions.map(v => {
|
|
const field = this.fields.find(x => x.value == v.field)
|
|
v.fieldObj = field
|
|
})
|
|
}
|
|
// this.$emit("confirm", value)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
fieldChange(val, cnd) {
|
|
this.$set(cnd, "value", '')
|
|
this.$set(cnd, "fieldObj", this.fields.find(v => v.value == val))
|
|
},
|
|
doSubmit() {
|
|
this.dialogVisible = false
|
|
//传递合法的数据
|
|
const matchCnd = clone(this.value)
|
|
matchCnd.conditions = matchCnd.conditions.filter(v => {
|
|
if (v.field && v.operational && v.value) {
|
|
v.options = []
|
|
return v
|
|
}
|
|
})
|
|
this.$emit("confirm", matchCnd)
|
|
},
|
|
flush() {
|
|
this.value = {
|
|
method: "AND",
|
|
conditions: [{}],
|
|
}
|
|
},
|
|
flushUserTable() {
|
|
this.searchData = []
|
|
this.pageForm.pageNumber = 1
|
|
this.pageForm.pageSize = 5
|
|
this.pageForm.totalCount = 0
|
|
},
|
|
|
|
open(flush) {
|
|
if (flush || !this.value || !Object.keys(this.value)) {
|
|
this.flush()
|
|
}
|
|
this.flushUserTable()
|
|
if (this.value && this.value.conditions.length > 0) {
|
|
// this.doSearch()
|
|
}
|
|
this.dialogVisible = true
|
|
},
|
|
pageNumberChange(val) {
|
|
this.pageForm.pageNumber = val
|
|
this.findUserByCnd()
|
|
},
|
|
pageSizeChange(val) {
|
|
this.pageForm.pageSize = val
|
|
this.findUserByCnd()
|
|
},
|
|
async findUserByCnd() {
|
|
const param = {
|
|
...this.pageForm,
|
|
cnd: null
|
|
}
|
|
const matchCnd = clone(this.value)
|
|
matchCnd.conditions = matchCnd.conditions.filter(v => {
|
|
if (v.field && v.operational && v.value) {
|
|
v.options = []
|
|
return v
|
|
}
|
|
})
|
|
if (matchCnd.conditions && matchCnd.conditions.length > 0) {
|
|
param.cnd = JSON.stringify(matchCnd)
|
|
this.tableLoading = true
|
|
const resp = await $.post('/platform/userFilter/findUserByCnd', param)
|
|
if (resp.code === 0) {
|
|
this.searchData = resp.data.list
|
|
this.pageForm.totalCount = resp.data.totalCount
|
|
} else {
|
|
this.$message.error(resp.msg)
|
|
}
|
|
this.tableLoading = false
|
|
}
|
|
},
|
|
doSearch() {
|
|
this.pageForm.pageNumber = 1
|
|
this.findUserByCnd()
|
|
},
|
|
tableSizeChange(size) {
|
|
this.tableSize = size
|
|
},
|
|
columnChange(val) {
|
|
this.tableLoading = true
|
|
this.tableColumns = val
|
|
this.tableLoading = false
|
|
},
|
|
},
|
|
created() {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |