Skip to content

V
VueElementTemplate
Commit 147bdb4d authored by 王康's avatar 王康
Browse files
Options

form

parent 01d5922d
Hide whitespace changes
Inline Side-by-side
Showing with 144 additions and 69 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 147bdb4d
...@@ -314,6 +314,21 @@ ...@@ -314,6 +314,21 @@
type: Array, type: Array,
required: false required: false
}, },
/**
* 编辑时，涉及主查外，返回数据后渲染前对数据进行处理,beforeRender函数接受两个参数，第一个参数为主查外的数据，
* 第二个参数为表单的绑定对象formModel，该函数需要将主查外的数据绑定到formModel，并返回formModel
* 格式为: 属性beforeRender为固定键
* {
* beforeRender: function(resp.data, formModel) {
* do something
* return formModel
* }
* }
*/
funObject: {
type: Object,
required: false
},
/** /**
* 请求成功或失败时的提示信息,格式为: * 请求成功或失败时的提示信息,格式为:
* tips: { * tips: {
...@@ -478,7 +493,7 @@ ...@@ -478,7 +493,7 @@
// console.log('上传成功') // console.log('上传成功')
// console.log(response) // console.log(response)
// console.log('fileList', fileList) // console.log('fileList', fileList)
// console.log('formModel', self.formModel) console.log('formModel', self.formModel)
for (var i = 0, len = self.showUserColumns.length; i < len; i++) { for (var i = 0, len = self.showUserColumns.length; i < len; i++) {
if (self.showUserColumns[i].widgetType === 8 && !self.showUserColumns[i].edited) { if (self.showUserColumns[i].widgetType === 8 && !self.showUserColumns[i].edited) {
self.$set(self.showUserColumns[i], 'edited', true) self.$set(self.showUserColumns[i], 'edited', true)
...@@ -486,10 +501,10 @@ ...@@ -486,10 +501,10 @@
if (self.showUserColumns[i].codeCamel === key) { if (self.showUserColumns[i].codeCamel === key) {
// self.formModel[key] = response.message || response.visitName // self.formModel[key] = response.message || response.visitName
// 张家口 // 张家口
self.formModel[key] = response.visitName + response.fileName // self.formModel[key] = response.visitName + response.fileName
break
// org // org
// self.formModel[key] = response.visitName + '/' + response.saveName self.formModel[key] = response.visitName + '/' + response.saveName
break
} }
} }
break break
...@@ -533,12 +548,12 @@ ...@@ -533,12 +548,12 @@
onEditorReady(val) { onEditorReady(val) {
// console.log('editor ready!') // console.log('editor ready!')
}, },
handleRemove(file, fileList, callback) { handleRemove(file, fileList) {
// console.log(self.formModel) // console.log(self.formModel)
}, },
handleChange(file, fileList) { handleChange(file, fileList) {
// console.log(file, fileList) // console.log(file, fileList)
console.log('自己的') // console.log('自己的')
}, },
// 判断是否一个对象的所有属性都为空 // 判断是否一个对象的所有属性都为空
// 可判断空对象或者属性值为null、空数组、空字符串，属性值为空对象无法判断 // 可判断空对象或者属性值为null、空数组、空字符串，属性值为空对象无法判断
...@@ -620,7 +635,7 @@ ...@@ -620,7 +635,7 @@
} }
}).then(resp => { }).then(resp => {
console.log('创建中间表成功') console.log('创建中间表成功')
console.log(resp.data) // console.log(resp.data)
}) })
}, },
// 批量创建的参数处理 // 批量创建的参数处理
...@@ -631,43 +646,77 @@ ...@@ -631,43 +646,77 @@
str.push(encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])) str.push(encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]))
} }
}) })
console.log(str.join('&')) // console.log(str.join('&'))
return str.join('&') return str.join('&')
}, },
// 存在tableId，编辑数据前先获取数据 // 存在tableId，编辑数据前先获取数据
getList() { getList() {
const self = this const self = this
if (!self.tableId) return if (!self.tableId) return
// 获取数据 const filters = {}
request(self.schema.modelUnderscorePlural + '/' + self.tableId).then(resp => { const params = {}
filters[self.schema.modelUnderscore] = { 'id': { 'equalTo': self.tableId }}
if (self.refers) {
params.refers = self.refers
}
params.filters = filters
// console.log('params', params)
// 获取数据 + '/' + self.tableId
request(self.schema.modelUnderscorePlural, {
params: params
}).then(resp => {
self.Loading = false self.Loading = false
// console.log(self.formModel) // console.log(self.formModel)
var formArray = _.keys(self.formModel) // 提取formModel的属性到数组 console.log('获取成功', resp.data)
// console.log(formArray) // 如果联查了外表
self.formModel = _.pick(resp.data, formArray) // 根据数组中的属性提取出data中对应的数据 if (resp.data.length > 0 && resp.data[0].superior !== undefined && !self.isEmptyObject(resp.data[0].superior) && resp.data[0].refers !== undefined && !self.isEmptyObject(resp.data[0].refers)) {
console.log(resp.data)
// 下拉框多选时将字符串转为数组 column.widgetType === 3 && !column.options if (self.funObject && !self.isEmptyObject(self.funObject)) {
_.each(self.columns, function(item, index) { self.formModel = self.funObject.beforeRender(resp.data, self.formModel)
if (item.widgetType === 2 && item.multiple === true) {
_.forEach(self.formModel, function(value, key) {
if (item.codeCamel === key) {
// console.log(11111, self.formModel[key])
self.formModel[key] = self.formModel[key].split(',')
}
})
} }
// 单个复选框时，将请求回来的1和0转为'1'和'0' } else if (resp.data.length > 0) {
if (item.widgetType === 3 && !item.options) { var formArray = _.keys(self.formModel) // 提取formModel的属性到数组
_.forEach(self.formModel, function(value, key) { if (resp.data[0].superior && !self.isEmptyObject(resp.data[0].superior)) {
if (item.codeCamel === key) { self.formModel = _.pick(resp.data[0].superior, formArray) // 根据数组中的属性提取出data中对应的数据
// console.log(11111, self.formModel[key]) } else {
self.formModel[key] = self.formModel[key] + '' self.formModel = _.pick(resp.data[0], formArray)
}
})
} }
}) // console.log('获取到数据', self.formModel)
// console.log('getList', self.formModel) // 处理返回来的数据
// console.log(typeof self.formModel.isUsed) _.each(self.columns, function(item, index) {
// 下拉框多选时将字符串转为数组 column.widgetType === 3 && !column.options
if (item.widgetType === 2 && item.multiple === true) {
_.forEach(self.formModel, function(value, key) {
if (item.codeCamel === key) {
self.formModel[key] = self.formModel[key].split(',')
}
})
}
// 下拉框单选时将数字转为字符串 column.widgetType === 3 && !column.options
if (item.widgetType === 2 && !item.multiple) {
_.forEach(self.formModel, function(value, key) {
if (item.codeCamel === key) {
if (typeof self.formModel[key] === 'number') {
self.formModel[key] = self.formModel[key] + ''
}
// self.formModel[key] = self.formModel[key].split(',')
}
})
}
// 单个复选框时，将请求回来的1和0转为'1'和'0'
if (item.widgetType === 3 && !item.options) {
_.forEach(self.formModel, function(value, key) {
if (item.codeCamel === key) {
// console.log(11111, self.formModel[key])
self.formModel[key] = self.formModel[key] + ''
}
})
}
})
}
console.log('getList', self.formModel)
}).catch(error => {
console.log(error)
}) })
}, },
// 初始化 // 初始化
...@@ -696,7 +745,7 @@ ...@@ -696,7 +745,7 @@
self.$set(self.showUserColumns, index, tmp) // 顺序 self.$set(self.showUserColumns, index, tmp) // 顺序
} }
}) })
console.log('self.showUserColumns', self.showUserColumns) // console.log('self.showUserColumns', self.showUserColumns)
// 提取v-model绑定的变量 // 提取v-model绑定的变量
_.each(self.showUserColumns, function(item) { _.each(self.showUserColumns, function(item) {
if (item.widgetType === 8 || (item.widgetType === 3 && item.options && item.options.length > 0)) { if (item.widgetType === 8 || (item.widgetType === 3 && item.options && item.options.length > 0)) {
...@@ -705,7 +754,7 @@ ...@@ -705,7 +754,7 @@
item.default ? self.$set(self.formModel, item.codeCamel, item.default) : self.$set(self.formModel, item.codeCamel, '') item.default ? self.$set(self.formModel, item.codeCamel, item.default) : self.$set(self.formModel, item.codeCamel, '')
} }
}) })
console.log('self.formModel', self.formModel) // console.log('self.formModel', self.formModel)
if (!request.defaults.baseURL) { if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api' request.defaults.baseURL = '/org/api'
} }
...@@ -729,10 +778,10 @@ ...@@ -729,10 +778,10 @@
*/ */
onSubmit(callback, processData) { onSubmit(callback, processData) {
const self = this const self = this
console.log('点击了提交函数') console.log('点击了提交函数', self.formModel)
console.log(self.formModel)
// 对表单数据进行处理 // 对表单数据进行处理
self.formModel = processData ? processData(self.formModel, self.isCancel) : self.formModel self.formModel = processData ? processData(self.formModel, self.isCancel) : self.formModel
// console.log(self.formModel)
// 如果在processData中禁止提交了，显示提示信息 // 如果在processData中禁止提交了，显示提示信息
if (self.isCancel.cancelSubmit) { if (self.isCancel.cancelSubmit) {
console.log('取消提交') console.log('取消提交')
...@@ -802,12 +851,13 @@ ...@@ -802,12 +851,13 @@
}) })
} else { } else {
// 不存在tableId 则创建一条数据 // 不存在tableId 则创建一条数据
console.log(self.formModel) // console.log(self.formModel)
if (self.refers && self.foreignForm) { if (self.refers && self.foreignForm) {
// 遍历foreignFormFields 生成外表数据对象 // 遍历foreignFormFields 生成外表数据对象
_.each(self.foreignFormFields, function(val, key) { _.each(self.foreignFormFields, function(val, key) {
self.$set(self.foreignForm, val, '') self.$set(self.foreignForm, val, '')
}) })
console.log('self.foreignForm', self.foreignForm)
_.each(self.showUserColumns, function(item, index) { _.each(self.showUserColumns, function(item, index) {
// 提取本表数据以提交 // 提取本表数据以提交
if (!item.isForeign) { if (!item.isForeign) {
...@@ -837,15 +887,22 @@ ...@@ -837,15 +887,22 @@
} }
} }
}) })
// 处理多选时 部分属性值为数组，转成字符串
// _.each(self.partPropModel, function(value, key) {
// if (typeof value === Object && value.length && value.length > 0) {
// self.partPropModel[key] = value.join('')
// }
// })
console.log('本表', self.nativeFormModel) console.log('本表', self.nativeFormModel)
console.log('外表', self.foreignFormModel) console.log('外表', self.foreignFormModel)
console.log('部分属性', self.partPropModel) console.log('部分属性', self.partPropModel)
} }
// 发送新建请求 // 发送新建请求
console.log('请求之前', self.formModel)
request(self.schema.modelUnderscorePlural + '/new', { request(self.schema.modelUnderscorePlural + '/new', {
method: 'post', method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
data: self.refers ? self.nativeFormModel : self.formModel, data: self.isEmptyObject(self.refers) ? self.formModel : self.nativeFormModel,
transformRequest: transformRequest:
function(obj) { function(obj) {
var str = [] var str = []
...@@ -855,9 +912,8 @@ ...@@ -855,9 +912,8 @@
return str.join('&') return str.join('&')
} }
}).then(resp => { }).then(resp => {
console.log('创建成功') console.log('创建成功', resp.data)
// 设置中间表与本表(主表)对应字段 // 设置中间表与本表(主表)对应字段
console.log(resp.data)
// if (!self.relates || !self.relates.length) return // if (!self.relates || !self.relates.length) return
// 创建中间表数据 // 创建中间表数据
if (resp.data && self.relates && self.relates.length && self.relates[1].relateTable) { if (resp.data && self.relates && self.relates.length && self.relates[1].relateTable) {
...@@ -897,15 +953,30 @@ ...@@ -897,15 +953,30 @@
} }
}) })
} }
console.log('外表公共属性partProp', self.partPropModel)
// 把外表公共属性partProp的值写入foreignArray的每条数据对象 // 把外表公共属性partProp的值写入foreignArray的每条数据对象
if (self.foreignArray.length > 0) { if (self.foreignArray.length > 0) {
_.each(self.foreignArray, function(item, key) { _.each(self.foreignArray, function(item, key) {
var tem = _.cloneDeep(self.partPropModel) var tem = _.cloneDeep(self.partPropModel)
if (_.includes(item, _.values(self.partPropModel)[0])) { var tem2 = _.values(self.partPropModel)[0]
tem[_.keys(self.partPropModel)[0]] = 1 // 可能出问题 if (typeof tem2 !== 'object') {
if (_.includes(item, tem2)) {
tem[_.keys(self.partPropModel)[0]] = 1 // 可能出问题
} else {
tem[_.keys(self.partPropModel)[0]] = 0 // 可能出问题
}
} else { } else {
tem[_.keys(self.partPropModel)[0]] = 0 // 可能出问题 _.each(tem2, function(value, k) { // ['A','B']
_.each(item, function(v, i) { // {ccSubjectId:'aaa',description: 'aaa, correct: '', serialNumber: 'A'}
if (value === v && tem[_.keys(self.partPropModel)[0]] !== 1) {
tem[_.keys(self.partPropModel)[0]] = 1
}
if ((value !== v && tem[_.keys(self.partPropModel)[0]] !== 1)) {
tem[_.keys(self.partPropModel)[0]] = 0
}
})
})
console.log('多选--数组')
} }
item = Object.assign(item, tem) item = Object.assign(item, tem)
}) })
...@@ -917,8 +988,7 @@ ...@@ -917,8 +988,7 @@
request.post(url + '?params=' + string, { request.post(url + '?params=' + string, {
headers: { 'Content-Type': 'application/json;charset=UTF-8' } headers: { 'Content-Type': 'application/json;charset=UTF-8' }
}).then(resp => { }).then(resp => {
console.log('批量创建成功') console.log('批量创建成功', resp.data)
console.log(resp.data)
}).catch(error => { }).catch(error => {
console.log('批量创建失败', error) console.log('批量创建失败', error)
}) })
......
src/views/haomo/components/forms/index.vue
View file @ 147bdb4d
...@@ -5,11 +5,13 @@ ...@@ -5,11 +5,13 @@
:buttons="showUserButtons" :buttons="showUserButtons"
:layout="layout" :layout="layout"
:tips="tips" :tips="tips"
:funObject="funObject"
:refers="userRefers"
:foreignFormFields="foreignFormFields" :foreignFormFields="foreignFormFields"
:refers="userRefers"> :relates="userRelates">
<!-- foreignFormFields 主查外的外表显示字段 和userRefers连用--> <!-- foreignFormFields 主查外的外表显示字段 和userRefers连用-->
<!-- :relates="userRelates" 中间表和间接关联表--> <!-- :relates="userRelates" 中间表和间接关联表-->
<!-- :refers="userRefers" 主查外的外表和外键字段 和foreignFormFields；连用--> <!-- :refers="userRefers" 主查外的外表和外键字段 和foreignFormFields；连用-->
</hm-complex-form> </hm-complex-form>
</div> </div>
</template> </template>
...@@ -31,11 +33,11 @@ ...@@ -31,11 +33,11 @@
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框 8: 文件上传 // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框 8: 文件上传
showUserColumns: [ showUserColumns: [
// 1普通input // 1普通input
{ name: '选择类型', codeCamel: 'type', widgetType: 1, disabled: true, { name: '选择类型', codeCamel: 'type', widgetType: 1, disabled: false,
change: this.inputChange, change: this.inputChange
// rule: { required: true, message: '用户名不能为空', trigger: 'blur' } // rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
// hide: true // hide: true
default: '默认值' // default: '默认值',
}, },
// 5富文本 // 5富文本
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false, { name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false,
...@@ -69,11 +71,11 @@ ...@@ -69,11 +71,11 @@
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, { name: '登陆id', codeCamel: 'loginid', widgetType: 7,
options: [ options: [
{ label: 1, value: '会员' }, // 单选的value是选项文字，label是选中值 { label: 1, value: '会员' }, // 单选的value是选项文字，label是选中值
{ label: 2, value: '访客' } { label: 2, value: '访客' } // 如果数据库中存的数据类型是number，label值写number如1，如果为string，label值写string ,如'1'
], // default: 1 ], // default: 1
change: this.inputChange }, change: this.inputChange },
// 8文件 // 8文件 change: this.uploadChange
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload', change: this.uploadChange } // url是后台接口地址 { name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload' } // url是后台接口地址
], ],
// CcSubject示例 // CcSubject示例
showUserColumns2: [ showUserColumns2: [
...@@ -117,6 +119,9 @@ ...@@ -117,6 +119,9 @@
// { text: '预览2', method: this.method5 }, // { text: '预览2', method: this.method5 },
{ text: '取消', type: 3, method: this.method3 } { text: '取消', type: 3, method: this.method3 }
], ],
funObject: {
beforeRender: this.beforeRender
},
// showUserButtons: [] // showUserButtons: []
// 布局方式 // 布局方式
layout: { left: 2, middle: 20, right: 2 }, layout: { left: 2, middle: 20, right: 2 },
...@@ -183,14 +188,8 @@ ...@@ -183,14 +188,8 @@
console.log(125, object) console.log(125, object)
return object // 将数据返回 return object // 将数据返回
}, },
method1(formModel) { method1() {
// console.log('method1', formModel) console.log('method1')
// formModel.password = '1234'
// console.log('method1', formModel)
},
uploadChange(response, formModel) {
console.log(192, response)
console.log(192, formModel)
}, },
method2() { method2() {
console.log('method2') console.log('method2')
...@@ -199,13 +198,19 @@ ...@@ -199,13 +198,19 @@
console.log('method3') console.log('method3')
}, },
method4(formModel) { method4(formModel) {
console.log('method4', formModel) console.log(formModel)
formModel.password = 123 console.log('method4')
console.log('method4', formModel)
}, },
method5(formModel) { method5(formModel) {
console.log(formModel) console.log(formModel)
console.log('method4') console.log('method4')
},
beforeRender(data, formModel) {
// 数据处理
// do something...
// console.log(111, data)
// console.log(112, formModel)
return formModel
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment