first commit
This commit is contained in:
@@ -0,0 +1,266 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user