481 lines
15 KiB
Vue
481 lines
15 KiB
Vue
|
<template>
|
||
|
|
<div class="query-form-main-custom" style="margin-bottom: 10px;">
|
||
|
|
<el-card>
|
||
|
|
<el-form
|
||
|
|
ref="queryForm"
|
||
|
|
:model="formModel"
|
||
|
|
:label-position="queryForm.labelPosition"
|
||
|
|
:label-width="queryForm.labelWidth"
|
||
|
|
size="small"
|
||
|
|
style="padding-top: 18px;"
|
||
|
|
>
|
||
|
|
<el-row>
|
||
|
|
<el-col :span="18">
|
||
|
|
<template v-for="(colNum, rIndex) in rowColumnList">
|
||
|
|
<el-row :key="rIndex" :gutter="20">
|
||
|
|
<template v-for="(field, name, index) in queryObject">
|
||
|
|
<template v-if="checkColumnIndex(rIndex, index)">
|
||
|
|
<el-col :key="index" :span="24/columnNum*field.columnNeed">
|
||
|
|
<template v-if="checkFieldType(field, 'text', name)">
|
||
|
|
<el-form-item :prop="name" :label="field.label">
|
||
|
|
<el-input
|
||
|
|
v-model="formModel[name]"
|
||
|
|
type="text"
|
||
|
|
clearable
|
||
|
|
:placeholder="field.placeholder"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="checkFieldType(field, 'date', name)">
|
||
|
|
<el-form-item :prop="name" :label="field.label">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="formModel[name]"
|
||
|
|
type="date"
|
||
|
|
:value-format="field.valueFormat || 'yyyy-MM-dd'"
|
||
|
|
:placeholder="field.placeholder || '选择日期'"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="checkFieldType(field, 'daterange', name)">
|
||
|
|
<el-form-item :prop="name" :label="field.label">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="formModel[name]"
|
||
|
|
type="daterange"
|
||
|
|
:value-format="field.valueFormat || 'yyyy-MM-dd'"
|
||
|
|
range-separator="至"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="checkFieldType(field, 'time', name)">
|
||
|
|
<el-form-item :prop="name" :label="field.label">
|
||
|
|
<el-time-picker
|
||
|
|
v-model="formModel[name]"
|
||
|
|
type="time"
|
||
|
|
:value-format="field.valueFormat || 'HH:mm:ss'"
|
||
|
|
:placeholder="field.placeholder || '选择时间'"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="checkFieldType(field, 'timerange', name)">
|
||
|
|
<el-form-item :prop="name" :label="field.label">
|
||
|
|
<el-time-picker
|
||
|
|
v-model="formModel[name]"
|
||
|
|
type="timerange"
|
||
|
|
is-range
|
||
|
|
:value-format="field.valueFormat || 'HH:mm:ss'"
|
||
|
|
range-separator="至"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="checkFieldType(field, 'datetime', name)">
|
||
|
|
<el-form-item :prop="name" :label="field.label">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="formModel[name]"
|
||
|
|
type="datetime"
|
||
|
|
:value-format="field.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
|
||
|
|
:placeholder="field.placeholder || '选择日期时间'"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="checkFieldType(field, 'datetimerange', name)">
|
||
|
|
<el-form-item :prop="name" :label="field.label">
|
||
|
|
<el-date-picker
|
||
|
|
v-model="formModel[name]"
|
||
|
|
type="datetimerange"
|
||
|
|
:value-format="field.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
|
||
|
|
range-separator="至"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="checkFieldType(field, 'select', name)">
|
||
|
|
<el-form-item :prop="name" :label="field.label">
|
||
|
|
<el-select
|
||
|
|
v-if="field.show !== false"
|
||
|
|
:ref="name"
|
||
|
|
v-model="formModel[name]"
|
||
|
|
:multiple="field.config.multiple"
|
||
|
|
clearable
|
||
|
|
:placeholder="field.placeholder || '请选择'"
|
||
|
|
filterable
|
||
|
|
@change="selectChange(field, formModel)"
|
||
|
|
>
|
||
|
|
<template v-if="field.config.data instanceof Array ? true : false">
|
||
|
|
<template v-for="(item, idx) in field.config.data">
|
||
|
|
<el-option :key="idx" :value="item.value" :label="item.label">{{
|
||
|
|
item.label }}</el-option>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="checkFieldType(field, 'complete')">
|
||
|
|
<el-form-item :prop="name" :label="field.label">
|
||
|
|
<el-autocomplete
|
||
|
|
v-if="field.show !== false"
|
||
|
|
v-model="formModel[name]"
|
||
|
|
:fetch-suggestions="field.querySearchAsync"
|
||
|
|
:placeholder="field.placeholder"
|
||
|
|
:style="{width: '80%'}"
|
||
|
|
clearable
|
||
|
|
@select="field.handleSelect"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
</template>
|
||
|
|
</el-col>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</el-row>
|
||
|
|
</template>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="5" :offset="1">
|
||
|
|
<el-button type="primary" size="small" :disabled="!canQuery" @click="query">查询</el-button>
|
||
|
|
<el-button v-if="queryForm.reset" type="primary" size="small" :disabled="!canQuery" @click="doClean">重置</el-button>
|
||
|
|
<el-button v-if="exportFlag" type="primary" size="small" :disabled="!canQuery" @click="doExport">导出</el-button>
|
||
|
|
<template v-for="(button, index) in queryList.actions">
|
||
|
|
<el-button
|
||
|
|
v-if="button.hasOwnProperty('show') ? button.show: true"
|
||
|
|
:key="index"
|
||
|
|
:type="button.type ? button.type: 'primary'"
|
||
|
|
size="small"
|
||
|
|
:style="button.style"
|
||
|
|
@click="button.handler"
|
||
|
|
>{{ button.text }}</el-button>
|
||
|
|
</template>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import localStore from 'storejs'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'QueryForm',
|
||
|
|
props: {
|
||
|
|
queryList: {
|
||
|
|
type: Object,
|
||
|
|
default: function() {
|
||
|
|
return { actions: [] }
|
||
|
|
}
|
||
|
|
},
|
||
|
|
queryForm: {
|
||
|
|
type: Object,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
beforeQuery: {
|
||
|
|
type: Function,
|
||
|
|
},
|
||
|
|
canQuery: {
|
||
|
|
type: Boolean,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
columnNum: 4,
|
||
|
|
queryObject: {},
|
||
|
|
queryFlag: this.canQuery,
|
||
|
|
exportFlag: false,
|
||
|
|
resetShow: true,
|
||
|
|
formModel: {},
|
||
|
|
modelFields: [],
|
||
|
|
ossConfig: {
|
||
|
|
accessKeyId: 'LTAIuLzS7VK3mV8d',
|
||
|
|
accessKeySecret: '7F7aWIi3ymq3J7uGxs9M2c2DnfSiF3',
|
||
|
|
bucket: 'kfexcel'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
rowColumnList() {
|
||
|
|
const alocateColumnNum = function(field) {
|
||
|
|
let need = 1
|
||
|
|
switch (field.type) {
|
||
|
|
case 'daterange':
|
||
|
|
need = 2
|
||
|
|
break
|
||
|
|
case 'timerange':
|
||
|
|
need = 2
|
||
|
|
break
|
||
|
|
case 'datetimerange':
|
||
|
|
need = 2
|
||
|
|
break
|
||
|
|
}
|
||
|
|
field.columnNeed = need
|
||
|
|
return need
|
||
|
|
}
|
||
|
|
const objNumList = []
|
||
|
|
let tempColumnNum = 0
|
||
|
|
let rowColumnNum = 0
|
||
|
|
for (const item in this.queryObject) {
|
||
|
|
var colNum = alocateColumnNum(this.queryObject[item])
|
||
|
|
tempColumnNum = tempColumnNum + colNum
|
||
|
|
if (tempColumnNum > this.columnNum) {
|
||
|
|
objNumList.push(rowColumnNum)
|
||
|
|
rowColumnNum = 1
|
||
|
|
tempColumnNum = colNum
|
||
|
|
} else if (tempColumnNum === this.columnNum) {
|
||
|
|
objNumList.push(++rowColumnNum)
|
||
|
|
rowColumnNum = 0
|
||
|
|
tempColumnNum = 0
|
||
|
|
} else {
|
||
|
|
++rowColumnNum
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (tempColumnNum > 0 && rowColumnNum > 0) {
|
||
|
|
objNumList.push(rowColumnNum)
|
||
|
|
}
|
||
|
|
return objNumList
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
'queryForm.queryObject': function(newVal) {
|
||
|
|
this.initPageData()
|
||
|
|
},
|
||
|
|
canQuery(newVal) {
|
||
|
|
this.queryFlag = newVal
|
||
|
|
},
|
||
|
|
formModel: {
|
||
|
|
handler: function(form) {
|
||
|
|
if (form) {
|
||
|
|
localStore.set(this.$route.path, form)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
deep: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initPageData()
|
||
|
|
this.initQueryModel()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取默认查询参数
|
||
|
|
initQueryModel() {
|
||
|
|
this.formModel = localStore.get(this.$route.path) || this.formModel
|
||
|
|
if (typeof this.queryForm.initLoadCallback === 'function') {
|
||
|
|
this.queryForm.initLoadCallback(this.formModel)
|
||
|
|
}
|
||
|
|
this.query()
|
||
|
|
},
|
||
|
|
// 初始化页面数据
|
||
|
|
initPageData() {
|
||
|
|
this.modelFields = []
|
||
|
|
this.exportFlag = this.queryForm.canExport
|
||
|
|
this.resetShow = this.queryForm.reset
|
||
|
|
this.buildQueryField()
|
||
|
|
this.buildForm()
|
||
|
|
},
|
||
|
|
// 构建查询表单对象、显示的查询对象
|
||
|
|
buildForm() {
|
||
|
|
// 获取表单Field的默认值
|
||
|
|
const getDefaultValueByField = function(field) {
|
||
|
|
let defaultValue = ''
|
||
|
|
switch (field.type) {
|
||
|
|
case 'select':
|
||
|
|
if (field.config.multiple) {
|
||
|
|
defaultValue = []
|
||
|
|
} else {
|
||
|
|
defaultValue = ''
|
||
|
|
}
|
||
|
|
break
|
||
|
|
case 'daterange':
|
||
|
|
defaultValue = []
|
||
|
|
break
|
||
|
|
case 'timerange':
|
||
|
|
defaultValue = []
|
||
|
|
break
|
||
|
|
case 'datetimerange':
|
||
|
|
defaultValue = []
|
||
|
|
break
|
||
|
|
}
|
||
|
|
return defaultValue
|
||
|
|
}
|
||
|
|
// 构建查询表单对象、显示的查询对象
|
||
|
|
const queryObject = {}
|
||
|
|
const model = {}
|
||
|
|
for (const item in this.queryForm.queryObject) {
|
||
|
|
if (this.queryForm.queryObject.show === false) {
|
||
|
|
continue
|
||
|
|
} else if (this.queryForm.queryObject.visible === false) {
|
||
|
|
model[item] = this.queryForm.queryObject[item].value
|
||
|
|
} else {
|
||
|
|
queryObject[item] = this.queryForm.queryObject[item]
|
||
|
|
model[item] = this.queryForm.queryObject[item].value || getDefaultValueByField(this.queryForm.queryObject[item])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.queryObject = queryObject
|
||
|
|
this.formModel = model
|
||
|
|
},
|
||
|
|
// 构建查询fieldName列表
|
||
|
|
buildQueryField() {
|
||
|
|
const fields = []
|
||
|
|
for (const item in this.queryForm.queryObject) {
|
||
|
|
if (this.queryForm.queryObject.show === false) {
|
||
|
|
continue
|
||
|
|
} else if (this.queryForm.queryObject.visible === false) {
|
||
|
|
fields.push({ field: item })
|
||
|
|
} else {
|
||
|
|
const type = this.queryForm.queryObject[item].type
|
||
|
|
switch (type) {
|
||
|
|
case 'text':
|
||
|
|
fields.push({ field: item })
|
||
|
|
break
|
||
|
|
case 'date':
|
||
|
|
fields.push({ field: item })
|
||
|
|
break
|
||
|
|
case 'daterange':
|
||
|
|
fields.push({ field: item, subFields: this.queryForm.queryObject[item].fieldsName })
|
||
|
|
break
|
||
|
|
case 'time':
|
||
|
|
fields.push({ field: item })
|
||
|
|
break
|
||
|
|
case 'timerange':
|
||
|
|
fields.push({ field: item, subFields: this.queryForm.queryObject[item].fieldsName })
|
||
|
|
break
|
||
|
|
case 'datetime':
|
||
|
|
fields.push({ field: item })
|
||
|
|
break
|
||
|
|
case 'datetimerange':
|
||
|
|
fields.push({ field: item, subFields: this.queryForm.queryObject[item].fieldsName })
|
||
|
|
break
|
||
|
|
case 'select':
|
||
|
|
fields.push({ field: item })
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.modelFields = fields
|
||
|
|
},
|
||
|
|
checkColumnIndex(rowIndex, objIndex) {
|
||
|
|
var flag = false
|
||
|
|
if (rowIndex === 0) {
|
||
|
|
if (objIndex >= 0 && objIndex < this.rowColumnList[rowIndex]) {
|
||
|
|
flag = true
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
let objNum = 0
|
||
|
|
for (var i = 0; i < rowIndex; ++i) {
|
||
|
|
objNum += this.rowColumnList[i]
|
||
|
|
}
|
||
|
|
if (objIndex >= objNum && objIndex < objNum + this.rowColumnList[rowIndex]) {
|
||
|
|
flag = true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return flag
|
||
|
|
},
|
||
|
|
checkFieldType(field, type, name) {
|
||
|
|
if (field.type === type) {
|
||
|
|
return true
|
||
|
|
} else {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleTreeListChildren(treeList) {
|
||
|
|
const traverse = function(list) {
|
||
|
|
if (list && list.length > 0) {
|
||
|
|
list.forEach(element => {
|
||
|
|
if (element.children != null && element.children.length > 0) {
|
||
|
|
traverse(element.children)
|
||
|
|
} else if (element.children != null && element.children.length === 0) {
|
||
|
|
element.children = null
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (treeList && treeList.length > 0) {
|
||
|
|
traverse(treeList)
|
||
|
|
return treeList
|
||
|
|
} else {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 重置操作
|
||
|
|
doClean() {
|
||
|
|
this.initPageData()
|
||
|
|
this.query()
|
||
|
|
},
|
||
|
|
// 导出操作
|
||
|
|
doExport() {
|
||
|
|
this.doExportFront()
|
||
|
|
},
|
||
|
|
// 前端方式导出
|
||
|
|
doExportFront() {
|
||
|
|
const resultData = this.prepareQueryData()
|
||
|
|
if (resultData === false) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$emit('queryExport', resultData)
|
||
|
|
},
|
||
|
|
// 将表单对象转换为查询对象
|
||
|
|
prepareQueryData() {
|
||
|
|
let resultData = {}
|
||
|
|
// 将formModel转换为查询对象
|
||
|
|
for (const item in this.formModel) {
|
||
|
|
for (var i = 0; i < this.modelFields.length; ++i) {
|
||
|
|
if (item === this.modelFields[i].field) {
|
||
|
|
if (this.modelFields[i].type === 'treeSelect') {
|
||
|
|
const qo = this.queryForm.queryObject[item]
|
||
|
|
const nodeKey = qo.treeConfig.nodeKey ? qo.treeConfig.nodeKey : 'id'
|
||
|
|
const tmpIds = []
|
||
|
|
for (var v = 0; v < this.formModel[item].length; ++v) {
|
||
|
|
tmpIds[v] = this.formModel[item][v][nodeKey]
|
||
|
|
}
|
||
|
|
resultData[item] = tmpIds
|
||
|
|
break
|
||
|
|
} else {
|
||
|
|
if (this.modelFields[i].subFields) {
|
||
|
|
for (var j = 0; j < this.modelFields[i].subFields.length; ++j) {
|
||
|
|
if (this.formModel[item] && this.formModel[item].length > j) {
|
||
|
|
resultData[this.modelFields[i].subFields[j]] = this.formModel[item][j]
|
||
|
|
} else {
|
||
|
|
resultData[this.modelFields[i].subFields[j]] = ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break
|
||
|
|
} else {
|
||
|
|
resultData[item] = this.formModel[item]
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 对所有的数据进行trim操作
|
||
|
|
for (const item in resultData) {
|
||
|
|
if (resultData[item].trim) {
|
||
|
|
resultData[item] = resultData[item].trim()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 查询前数据处理
|
||
|
|
resultData = this.beforeQuery ? this.beforeQuery(resultData) : resultData
|
||
|
|
return resultData
|
||
|
|
},
|
||
|
|
query() {
|
||
|
|
const resultData = this.prepareQueryData()
|
||
|
|
if (resultData === false) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.$emit('query', resultData)
|
||
|
|
},
|
||
|
|
selectChange(row, form) {
|
||
|
|
if (row.change) {
|
||
|
|
row.change(form)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.query-form-main-custom .el-input {
|
||
|
|
max-width: 240px;
|
||
|
|
min-width: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.query-form-main-custom .el-select {
|
||
|
|
max-width: 240px;
|
||
|
|
min-width: 100px;
|
||
|
|
}
|
||
|
|
</style>
|