Skip to content

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

form

parent 77d267fc
Show whitespace changes
Inline Side-by-side
Showing with 77 additions and 68 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ c3638ac0
......@@ -26,20 +26,20 @@
<el-input v-if="column.widgetType === 1"
v-model="formModel[column.codeCamel]"
:disabled="column.disabled"
@change="useralidate(formModel[column.codeCamel])"></el-input>
@change="column.change && column.change($event)"></el-input>
<!-- 2 日期选择 -->
<el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
v-model="formModel[column.codeCamel]"
:type="column.dateType || 'date'"
align="right" :disabled="column.disabled"
@change="logTimeChange"
@change="column.change && column.change($event)"
:value-format="column.dateFormate || 'yyyy-MM-dd'"
:picker-options="pickerOptions">
</el-date-picker>
<!-- 3 下拉框 -->
<el-select v-else-if="column.widgetType === 2"
v-model="formModel[column.codeCamel]"
@change="selectChange"
@change="column.change && column.change($event)"
:multiple="column.multiple"
:disabled="column.disabled"
clearable>
......@@ -54,17 +54,18 @@
v-model="formModel[column.codeCamel]"
type="textarea" :disabled="column.disabled"
:autosize="{ minRows: 2, maxRows: 5}"
:rows="2">
:rows="2" @change="column.change && column.change($event)">
</el-input>
<!-- 5 复选框 -->
<el-checkbox v-else-if="column.widgetType === 3 && !column.options"
v-model="formModel[column.codeCamel]"
:disabled="column.disabled"
@change="column.change && column.change($event)"
true-label="1" false-label="0"></el-checkbox>
<el-checkbox-group v-else-if="column.widgetType === 3 && column.options"
v-model="formModel[column.codeCamel]"
:disabled="column.disabled"
@change="checkboxsChange">
@change="column.change && column.change($event)">
<el-checkbox v-for="option in column.options"
:label="option" :key="option">{{option}}</el-checkbox>
</el-checkbox-group>
......@@ -75,11 +76,13 @@
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="column.change && column.change($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- 7 单选框 -->
<el-radio-group v-else-if="column.widgetType === 7"
:disabled="column.disabled"
@change="column.change && column.change($event)"
v-model="formModel[column.codeCamel]">
<el-radio v-for="(option,key) in column.options"
:key="key" :label="key">{{option}}</el-radio>
......@@ -150,18 +153,19 @@
/**
* 必传，指定要显示的表单字段及类型。数组的元素为对象类型，对象的属性有name、codeCamel、widgetType、disabled、
* options、multiple、dateType等，不同的表单类型需配置的属性不同，
* codeCamel必须有，表示要显示的表单字段,
* name表示自定义的字段名，如果不传，默认为数据库中的字段名，
* widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
* codeCamel属性必须有，表示要显示的表单字段,
* name属性表示自定义的字段名，如果不传，默认为数据库中的字段名，
* widgetType属性表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
* change属性，值为函数类型，表示input的change事件的执行方法，参数即为input输入内容
* 取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框)，
* 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
* 对于复选框，如果只有一个备选项则不必传options,
* 若表单类型为下拉框，还可传入multiple字段，取值bolean类型，true/false，表示是否多选，默认false
* 若表单类型为时间日期，可传入dateType字段，值为date（只显示日期）或datetime（显示日期和时间），如果不传，
* 若表单类型为时间日期，可传入dateType字段，值为'date'（只显示日期）或'datetime'（显示日期和时间），如果不传，
* 默认只显示日期; 可传入dateFormate字段，为日期格式，取值遵循elementUI DatePicker组件中的日期格式，
* 比如 只显示日期取值'yyyy-MM-dd'，显示日期和时间取值'yyyy-MM-dd HH:mm:ss'，如果不传默认为只显示日期取值'yyyy-MM-dd'，date字段和dateFormate字段取值须对应
* 所有的表单类型都可传入disabled字段，取值bolean类型,true/false，表示是否禁用，默认不禁用
* input类表单还可传入rule字段来进行自定义验证规则，rule取值规范参照elementUI，下面有简单示例
* 所有的表单类型都可传入disabled属性，取值bolean类型,true/false，表示是否禁用，默认不禁用
* input类表单还可传入rule属性来进行自定义验证规则，rule取值规范参照elementUI，下面有简单示例
* 示例：[
{ name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: true,
rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
......@@ -338,15 +342,45 @@
// this.validate()
this.init()
this.getList()
console.log(this.buttons)
// console.log(this.buttons)
},
methods: {
createRule() {
_.each()
// inputChange(val) {
// // console.log(event)
// // console.log(val)
// },
// checkboxChange(val) {
// console.log(val)
// },
// checkboxsChange(val) {
// console.log(val)
// },
// selectChange(val) {
// console.log(val)
// },
// radioChange(val) {
// console.log(val)
// },
// logTimeChange(val) {
// console.log(val)
// },
// textareaChange(val) {
// console.log(val)
// },
// onEditorChange({ quill, html, text }) {
// console.log(quill)
// console.log(html)
// console.log(text)
// // this.content = html
// },
onEditorBlur(val) {
// console.log(val)
},
useralidate(value) {
// console.log(event)
console.log(value)
onEditorFocus(val) {
// console.log('editor focus!')
},
onEditorReady(val) {
// console.log('editor ready!')
},
handleRemove(file, fileList) {
console.log(file, fileList)
......@@ -354,12 +388,6 @@
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
},
checkboxsChange(val) {
console.log(val)
},
selectChange(val) {
console.log(val)
},
// 判断是否一个对象的所有属性都为空
isEmpty(obj) {
_.forEach(obj, function(val) {
......@@ -367,9 +395,6 @@
})
return true
},
logTimeChange(value) {
console.log(value)
},
validate() {
const self = this
// this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列
......@@ -390,15 +415,6 @@
}
})
},
onEditorBlur(editor) {
// console.log('editor blur!')
},
onEditorFocus(editor) {
// console.log('editor focus!')
},
onEditorReady(editor) {
// console.log('editor ready!')
},
// 存在tableId，修改数据前先获取数据
getList() {
const self = this
......@@ -411,17 +427,17 @@
} */
self.Loading = false
// console.log(self.formModel)
var formArray = _.keys(self.formModel)
var formArray = _.keys(self.formModel) // 提取formModel的属性到数组
// console.log(formArray)
self.formModel = _.pick(resp.data, formArray)
self.formModel = _.pick(resp.data, formArray) // 根据数组中的属性提取出data中对应的数据
// console.log(self.formModel)
})
},
init() {
const self = this
console.log(self.columns)
if (self.columns && self.columns.length) {
self.showUserColumns = JSON.parse(JSON.stringify(self.columns))
// console.log(self.showUserColumns)
self.showUserColumns = _.cloneDeep(self.columns)
// 将字符串对象进行替换处理
_.each(self.showUserColumns, function(column, index) {
if (typeof column === 'object') {
......@@ -437,6 +453,7 @@
column.multiple && self.$set(tmp, 'multiple', column.multiple) // 设置下拉框是否多选
column.dateType && self.$set(tmp, 'dateType', column.dateType) // 设置日期表单显示类型
column.dateFormate && self.$set(tmp, 'dateFormate', column.dateFormate) // 设置日期格式
column.change && self.$set(tmp, 'change', column.change) // 设置change函数
self.$set(self.showUserColumns, index, tmp) // 顺序
}
})
......@@ -451,9 +468,8 @@
})
if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api'
console.log('没有')
}
console.log(request.defaults.baseURL)
// console.log(request.defaults.baseURL)
// 加载等待
if (self.tableId) {
self.Loading = true
......
src/views/haomo/components/forms/index.vue
View file @ c3638ac0
......@@ -4,7 +4,6 @@
<hm-complex-form :schema="schema['HmUser']"
:columns="showUserColumns"
:buttons="showUserButtons"
:tableId="tableId"
:layout="layout"
>
</hm-complex-form>
......@@ -28,28 +27,28 @@
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
showUserColumns: [
{ name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: false,
rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
change: this.inputChange
// rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
},
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false,
rule: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]
change: this.inputChange
// rule: [
// { required: true, message: '请输入邮箱地址', trigger: 'blur' },
// { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
// ]
},
{ name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false,
change: this.inputChange,
options: [
{ value: 0, label: '选项1' },
{ value: 1, label: '选项2' },
{ value: 2, label: '选项3' },
{ value: 3, label: '选项4' },
{ value: 4, label: '选项5' }
{ value: 1, label: '企业' },
{ value: 3, label: '代理商' }
]
},
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'] },
{ codeCamel: 'password', widgetType: 4 },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] },
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8 }
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'], change: this.inputChange },
{ codeCamel: 'password', widgetType: 4, change: this.inputChange },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss', change: this.inputChange },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'], change: this.inputChange },
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8, change: this.inputChange }
],
// 要显示按钮
showUserButtons: [
......@@ -69,9 +68,13 @@
created() {
this.schema = schema
// console.log(this.schema)
this.tableId = '0e26566e953449a7a7500c34be39fd26'
this.tableId = '1efff63125954583b0ac5a9c252b9041'
},
methods: {
inputChange(val) {
// console.log(event)
console.log(val)
},
processData(object) {
console.log(object)
return object
......@@ -84,16 +87,6 @@
},
method3() {
console.log('method3')
},
usernameValidate() {
console.log(1)
// if (!value) {
// callback(new Error('请输入用户名'))
// } else if ((value.length < 2 || value.length > 10)) {
// callback(new Error('用户名长度在 2 到 10 个字符'))
// } else {
// callback()
// }
}
}
}
......
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