rt-sim-training-client/src/components/QueryListPage/QueryForm.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>