发布课程管理form 添加城市与地图的级联关系
This commit is contained in:
fan
parent
f8d6a3eb9f
commit
7e13f98167
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
@ -34,6 +34,7 @@ export default {
|
||||
cityCode: {
|
||||
type: 'select',
|
||||
label: this.$t('publish.city'),
|
||||
selectChange: this.handleCitySelect,
|
||||
config: {
|
||||
data: []
|
||||
}
|
||||
@ -200,9 +201,25 @@ export default {
|
||||
});
|
||||
}).catch(() => { });
|
||||
},
|
||||
|
||||
reloadTable() {
|
||||
this.queryList.reload();
|
||||
},
|
||||
handleCitySelect(form) {
|
||||
this.queryForm.queryObject.mapId.config.data = [];
|
||||
form.mapId = '';
|
||||
if (!form.cityCode) {
|
||||
this.mapList.forEach(elem => {
|
||||
this.queryForm.queryObject.mapId.config.data.push({value: elem.id, label: elem.name});
|
||||
});
|
||||
} else {
|
||||
this.mapList.forEach(elem => {
|
||||
if (elem.cityCode === form.cityCode) {
|
||||
console.log('2222222');
|
||||
this.queryForm.queryObject.mapId.config.data.push({value: elem.id, label: elem.name});
|
||||
console.log(this.queryForm.queryObject.mapId, '====');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user