488 lines
16 KiB
Vue
488 lines
16 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 || $t('global.chooseDate')"
|
|
/>
|
|
</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="$t('global.to')"
|
|
/>
|
|
</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 || $t('global.chooseTime')"
|
|
/>
|
|
</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="$t('global.to')"
|
|
/>
|
|
</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 || $t('global.chooseDateTime')"
|
|
/>
|
|
</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="$t('global.to')"
|
|
/>
|
|
</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 || $t('global.choose')"
|
|
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 class="button_style" type="primary" size="small" :disabled="!canQuery" @click="query">{{ $t('global.query') }}</el-button>
|
|
<el-button class="button_style" v-if="queryForm.reset" type="primary" size="small" :disabled="!canQuery" @click="doClean">{{ $t('global.reset') }}</el-button>
|
|
<el-button class="button_style" v-if="exportFlag" type="primary" size="small" :disabled="!canQuery" @click="doExport">{{ $t('global.export') }}</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"
|
|
class="button_style"
|
|
>{{ 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,
|
|
default(val) {
|
|
return val;
|
|
}
|
|
},
|
|
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] && resultData[item].trim) {
|
|
resultData[item] = resultData[item].trim();
|
|
}
|
|
}
|
|
// 查询前数据处理
|
|
resultData = this.beforeQuery(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;
|
|
}
|
|
.button_style {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|