From 7e13f981678db058ff48f4da37e135d910d63590 Mon Sep 17 00:00:00 2001 From: fan <18706759286@163.com> Date: Fri, 8 Nov 2019 10:57:07 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E5=B8=83=E8=AF=BE=E7=A8=8B=E7=AE=A1?= =?UTF-8?q?=E7=90=86form=20=E6=B7=BB=E5=8A=A0=E5=9F=8E=E5=B8=82=E4=B8=8E?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=9A=84=E7=BA=A7=E8=81=94=E5=85=B3=E7=B3=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/QueryListPage/QueryForm.vue | 647 +++++++++++---------- src/views/publish/publishLesson/index.vue | 19 +- 2 files changed, 343 insertions(+), 323 deletions(-) diff --git a/src/components/QueryListPage/QueryForm.vue b/src/components/QueryListPage/QueryForm.vue index 743a3775c..58a27aec5 100644 --- a/src/components/QueryListPage/QueryForm.vue +++ b/src/components/QueryListPage/QueryForm.vue @@ -152,329 +152,332 @@ 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 - }, - leftSpan: { - type: Number, - default() { - return 18; - } - } - }, - 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]); - } - } + 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 + }, + leftSpan: { + type: Number, + default() { + return 18; + } + } + }, + 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); - } - } - } + 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); + } + if ( typeof row.selectChange === 'function') { + row.selectChange && row.selectChange(form); + } + } + } };