138 lines
3.9 KiB
Vue
138 lines
3.9 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="请选择值"
|
|
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>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="doSubmit">{{ 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: '确 定'}
|
|
},
|
|
model: {
|
|
prop: 'value',
|
|
event: 'confirm'
|
|
},
|
|
components: {'enum-select': httpVueLoader('/components/plugins/EnumSelect.vue?v=1.0.0'),},
|
|
data() {
|
|
return {
|
|
dialogVisible: false
|
|
}
|
|
},
|
|
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
|
|
this.$emit("confirm", this.value)
|
|
},
|
|
flush() {
|
|
this.value = {
|
|
method: "AND",
|
|
conditions: [{}],
|
|
}
|
|
},
|
|
open(flush) {
|
|
if (flush || !this.value || !Object.keys(this.value)) {
|
|
this.flush()
|
|
}
|
|
this.dialogVisible = true
|
|
}
|
|
},
|
|
created() {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style> |