Skip to content

V
VueElementTemplate
Commit 3cad6300 authored by 杨柠瑞's avatar 杨柠瑞
Browse files
Options

coding

parents 7cfb5054 2d456dee
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 48 deletions
src/views/haomo/components/forms/HmComplexForm.md
View file @ 3cad6300
......@@ -212,9 +212,10 @@
```vue
<template>
<hm-complex-form :schema="schema['HmUser']"
:columns="showUserColumns"
:tableId="tableId"
:buttons="showUserButtons">
:columns="showUserColumns"
:tableId="tableId"
:layout="layout"
:buttons="showUserButtons">
</hm-complex-form>
</template>
......@@ -424,7 +425,8 @@
},
showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['企业', '代理商'] }, { name: 'avatar', widgetType: 3 }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }],
// 要显示按钮 暂只支持确定、保存、取消、提交、重置
showUserButtons: ['确定', '取消']
showUserButtons: ['确定', '取消'],
layout: { left: 0, middle: 12, right: 12 }
}
},
created() {
......
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 3cad6300
<template>
<div class="app-container documentation-container">
<el-row type="flex" class="hm-form" style="margin-top: 50px">
<el-col :span="6">
<!--v-loading="Loading"-->
<el-row type="flex" class="hm-form" style="margin-top: 20px" >
<el-col :span="layout.left">
<div></div>
</el-col>
<el-col :span="12">
<el-col :span="layout.middle">
<div>
<!--表单部分-->
<el-form ref="form"
element-loading-text="加载中"
:model="formModel"
:rules="rules"
label-width="110px"
......@@ -46,9 +48,13 @@
:rows="2">
</el-input>
<!-- 5 复选框 -->
<el-checkbox v-else-if="column.widgetType === 3 && !column.options" v-model="formModel[column.codeCamel]" true-label="1" false-label="0"></el-checkbox>
<el-checkbox-group v-else-if="column.widgetType === 3 && column.options" v-model="formModel[column.codeCamel]">
<el-checkbox v-for="option in column.options" :label="option" :key="option">{{option}}</el-checkbox>
<el-checkbox v-else-if="column.widgetType === 3 && !column.options"
v-model="formModel[column.codeCamel]"
true-label="1" false-label="0"></el-checkbox>
<el-checkbox-group v-else-if="column.widgetType === 3 && column.options"
v-model="formModel[column.codeCamel]">
<el-checkbox v-for="option in column.options"
:label="option" :key="option">{{option}}</el-checkbox>
</el-checkbox-group>
<!-- 6 富文本 -->
<quill-editor v-else-if="column.widgetType === 5"
......@@ -60,22 +66,30 @@
@ready="onEditorReady($event)">
</quill-editor>
<!-- 7 单选框 -->
<el-radio-group v-else-if="column.widgetType === 7" v-model="formModel[column.codeCamel]">
<el-radio v-for="(option,key) in column.options" :key="key" :label="key">{{option}}</el-radio>
<el-radio-group v-else-if="column.widgetType === 7"
v-model="formModel[column.codeCamel]">
<el-radio v-for="(option,key) in column.options"
:key="key" :label="key">{{option}}</el-radio>
</el-radio-group>
</el-form-item>
<!--按钮-->
<el-form-item v-if="buttons && buttons.length > 0">
<el-col :span="12" v-for="(btn,key) in buttons" :key="key">
<el-button v-if="btn === '确定' || btn === '提交' || btn === '保存' || btn === '发布'" type="primary" @click="onSubmit()">{{btn}}</el-button>
<el-button v-if="btn === '重置'" type="primary" @click="resetForm()">{{btn}}</el-button>
<el-button v-if="btn === '取消'" type="primary" @click="cancelFunction?cancelFunction():''">{{btn}}</el-button>
<el-col :span="24/buttons.length" v-for="(btn,key) in buttons" :key="key">
<el-button v-if="btn.type === 1"
type="primary"
@click="onSubmit(btn.method)">{{btn.text}}</el-button>
<el-button v-if="btn.type === 2"
type="primary"
@click="resetForm(btn.method)">{{btn.text}}</el-button>
<el-button v-if="btn.type === 3"
type="primary"
@click="btn.method">{{btn.text}}</el-button>
</el-col>
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :span="6">
<el-col :span="layout.right">
<div></div>
</el-col>
</el-row>
......@@ -141,9 +155,16 @@
}
},
/**
* 非必传，指定要显示的按钮(确定、保存、取消、提交、重置)，默认不显示。
* 非必传，指定要显示的按钮及类型，默认不显示。
* 类型（type）关系到按钮要执行的方法，type=1，执行组件的提交方法，如果用户传入了method，会作为提交方法的回调函数执行
* type=2，执行组件的重置方法,如果用户传入了method，会作为重置方法的回调函数执行
* type=3，直接执行用户传入的方法
* 如果要传入了确定/取消的回调函数，请先传入对应的按钮
* 示例：['确定', '取消']
* 示例：[
* {text: '确定', type: '1', method: method1},
* {text: '重置', type: '2', method: method2},
* {text: '取消', type: '3', method: method3}
* ]
*/
buttons: {
type: Array,
......@@ -157,19 +178,12 @@
required: false
},
/**
* 非必传，传入点击'确定'后的回调函数，该回调函数会在form组件onSubmit函数的成功回调中调用
* 如果要传入该函数，请先传入对应的按钮
*/
confirmFunction: {
type: Function,
required: false
},
/**
* 非必传，传入点击'取消'后的回调函数，该回调函数会在点击'取消'后直接调用
* 如果要传入该函数，请先传入对应的按钮
* 非必传，布局方式，form组件布局分三栏，左右为留白，中间是form，
* 通过传参可以控制各部分所占份数，遵循elementUi24分栏，默认居中布局(left：6，middle：12，right：6)
* 示例：{ left: 0, middle: 12, right: 12 }
*/
cancelFunction: {
type: Function,
layout: {
type: Object,
required: false
}
},
......@@ -208,6 +222,7 @@
// }
// }
return {
Loading: true,
form: null,
formModel: {}, // 双向绑定的数据变量
showUserColumns: [], // 要显示的字段
......@@ -274,6 +289,7 @@
created() {
// this.validate()
this.init()
this.getList()
console.log(this.buttons)
},
methods: {
......@@ -316,6 +332,24 @@
onEditorReady(editor) {
// console.log('editor ready!')
},
// 存在tableId，修改数据前先获取数据
getList() {
const self = this
// 获取数据
request(self.schema.modelUnderscorePlural + '/' + self.tableId).then(resp => {
// 数据库字段转化显示
/* if (self.options.changeValue) {
resp.data = self.changeValue(resp.data)
} */
self.Loading = false
// console.log(self.formModel)
var formArray = _.keys(self.formModel)
// console.log(formArray)
self.formModel = _.pick(resp.data, formArray)
// console.log(self.formModel)
})
},
init() {
const self = this
// 如果没有传columns，则全部显示
......@@ -340,9 +374,9 @@
self.$set(tmp, 'widgetType', column.widgetType || 1)
column.options && self.$set(tmp, 'options', column.options)
self.$set(self.showUserColumns, index, tmp) // 顺序
// console.log(self.showUserColumns)
}
})
console.log(self.showUserColumns)
// 提取v-model绑定的变量
_.each(self.showUserColumns, function(item) {
if (item.widgetType === 3 && item.options && item.options.length > 0) {
......@@ -351,10 +385,15 @@
self.$set(self.formModel, item.codeCamel, '')
}
})
console.log(self.formModel)
if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api'
}
// 加载等待
if (self.tableId) {
self.Loading = true
} else {
self.Loading = false
}
} else {
console.log('columns为必传字段!!')
}
......@@ -366,7 +405,7 @@
* 所有选项输入并验证通过，正确提交
* 验证失败，禁止提交并给出提示
*/
onSubmit() {
onSubmit(callback) {
const self = this
console.log('点击了提交函数')
console.log(self.formModel)
......@@ -395,7 +434,9 @@
}).then(resp => {
console.log('修改成功')
self.resetForm()
self.confirmFunction && self.confirmFunction()
if (typeof (callback) === 'function') {
callback()
}
})
} else { // 不存在tableId 则创建一条数据
request(self.schema.modelUnderscorePlural + '/new', {
......@@ -413,7 +454,9 @@
}).then(resp => {
console.log('创建成功')
self.resetForm()
self.confirmFunction && self.confirmFunction()
if (typeof (callback) === 'function') {
callback()
}
})
}
} else {
......@@ -432,9 +475,12 @@
*
* 清空所有输入及提示信息。
*/
resetForm() {
resetForm(callback) {
console.log('重置')
this.$refs.form.resetFields()
if (typeof (callback) === 'function') {
callback()
}
}
}
......
src/views/haomo/components/forms/index.vue
View file @ 3cad6300
......@@ -3,8 +3,7 @@
<hm-complex-form :schema="schema['HmUser']"
:columns="showUserColumns"
:buttons="showUserButtons"
:confirmFunction="confirm"
:cancelFunction="cancel"
:layout="layout"
:tableId="tableId">
</hm-complex-form>
</div>
......@@ -27,16 +26,22 @@
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
showUserColumns: [
{ name: '姓名', codeCamel: 'username', widgetType: 1 },
{ name: '安全级别', codeCamel: 'securityLevel', widgetType: 5 },
{ name: '邮箱', codeCamel: 'email', widgetType: 5 },
{ name: '选择类型', codeCamel: 'type', widgetType: 2, options: ['选项1', '选项2'] },
{ name: '选择头像', codeCamel: 'avatar', widgetType: 3, options: ['美女', '帅哥'] },
{ name: '部门', codeCamel: 'departmentId', widgetType: 4 },
{ codeCamel: 'password', widgetType: 4 },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6 },
{ name: '登陆地址', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] }
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] }
],
// 要显示按钮
showUserButtons: [
{ text: '确定', type: 1, method: this.method1 },
{ text: '重置', type: 2, method: this.method2 },
{ text: '取消', type: 3, method: this.method3 }
],
// 要显示按钮 暂只支持确定、保存、取消、提交、重置
showUserButtons: ['确定', '取消']
// showUserButtons: []
// 布局方式
layout: { left: 0, middle: 12, right: 12 }
}
},
computed: {
......@@ -49,11 +54,14 @@
this.tableId = '0e26566e953449a7a7500c34be39fd26'
},
methods: {
confirm() {
console.log('确定')
method1() {
console.log('method1')
},
method2() {
console.log('method2')
},
cancel() {
console.log('取消')
method3() {
console.log('method3')
}
}
}
......
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