Skip to content

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

form

parent e8e112af
Show whitespace changes
Inline Side-by-side
Showing with 464 additions and 469 deletions
src/views/haomo/components/forms/HmComplexForm.md
View file @ 2becc703
### 基本使用 ### 基本使用
```jsx ```jsx
<hm-complex-form <hm-complex-form :columns="[
{ 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 }
]"
:schema="{ :schema="{
'model': 'HmUser', 'model': 'HmUser',
'modelPlural': 'HmUserS', 'modelPlural': 'HmUsers',
'modelCamel': 'hmUser', 'modelCamel': 'hmUser',
'modelCamelPlural': 'hmUserS', 'modelCamelPlural': 'hmUsers',
'modelUnderscore': 'hm_user', 'modelUnderscore': 'hm_user',
'modelUnderscorePlural': 'hm_userS', 'modelUnderscorePlural': 'hm_users',
'columns': [ 'columns': [
{ {
'id': 'o50', 'id': 'o50',
...@@ -111,8 +118,7 @@ ...@@ -111,8 +118,7 @@
'codeCamelPlural': 'avatars', 'codeCamelPlural': 'avatars',
'codeUnderscore': 'avatar', 'codeUnderscore': 'avatar',
'codeUnderscorePlural': 'avatars', 'codeUnderscorePlural': 'avatars',
'type': 'string', 'type': 'string'
'widgetType': 'checkbox'
}, },
{ {
'id': 'o56', 'id': 'o56',
...@@ -177,8 +183,7 @@ ...@@ -177,8 +183,7 @@
'codeCamelPlural': 'securityLevels', 'codeCamelPlural': 'securityLevels',
'codeUnderscore': 'security_level', 'codeUnderscore': 'security_level',
'codeUnderscorePlural': 'security_levels', 'codeUnderscorePlural': 'security_levels',
'type': 'number', 'type': 'number'
'widgetType': 'richText'
}, },
{ {
'id': 'o60', 'id': 'o60',
...@@ -196,41 +201,22 @@ ...@@ -196,41 +201,22 @@
'codeCamelPlural': 'types', 'codeCamelPlural': 'types',
'codeUnderscore': 'type', 'codeUnderscore': 'type',
'codeUnderscorePlural': 'types', 'codeUnderscorePlural': 'types',
'type': 'number', 'type': 'number'
'widgetType': 'selectType'
},
{
'id': 'o340',
'objectId': 'B5BCB5C5-192F-4BD0-8215-BB65A8288168',
'name': '部门id',
'code': 'department_id',
'creationDate': '1503476586',
'creator': 'yide',
'modificationDate': '1517186153',
'modifier': 'yide',
'dataType': 'varchar(128)',
'length': '128',
'codeCamel': 'departmentId',
'codeCamelPlural': 'departmentIds',
'codeUnderscore': 'department_id',
'codeUnderscorePlural': 'department_ids',
'type': 'string',
'widgetType': 'textarea'
} }
] ]
}"></hm-complex-form> }"></hm-complex-form>
``` ```
### 指定显示的表单类型
### 指定显示的表单类型及按钮
```vue ```vue
<template> <template>
<div> <hm-complex-form :schema="schema['HmUser']"
<hm-complex-form :columns="showUserColumns"
:tableId="tableId" :tableId="tableId"
:schema="schema['HmUser']" :buttons="showUserButtons">
:columns="showUserColumns">
</hm-complex-form> </hm-complex-form>
</div>
</template> </template>
<script> <script>
...@@ -348,8 +334,7 @@ ...@@ -348,8 +334,7 @@
'codeCamelPlural': 'avatars', 'codeCamelPlural': 'avatars',
'codeUnderscore': 'avatar', 'codeUnderscore': 'avatar',
'codeUnderscorePlural': 'avatars', 'codeUnderscorePlural': 'avatars',
'type': 'string', 'type': 'string'
'widgetType': 'checkbox'
}, },
{ {
'id': 'o56', 'id': 'o56',
...@@ -414,8 +399,7 @@ ...@@ -414,8 +399,7 @@
'codeCamelPlural': 'securityLevels', 'codeCamelPlural': 'securityLevels',
'codeUnderscore': 'security_level', 'codeUnderscore': 'security_level',
'codeUnderscorePlural': 'security_levels', 'codeUnderscorePlural': 'security_levels',
'type': 'number', 'type': 'number'
'widgetType': 'richText'
}, },
{ {
'id': 'o60', 'id': 'o60',
...@@ -433,13 +417,14 @@ ...@@ -433,13 +417,14 @@
'codeCamelPlural': 'types', 'codeCamelPlural': 'types',
'codeUnderscore': 'type', 'codeUnderscore': 'type',
'codeUnderscorePlural': 'types', 'codeUnderscorePlural': 'types',
'type': 'number', 'type': 'number'
'widgetType': 'selectType'
} }
] ]
} }
}, },
showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email'] 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: ['确定', '取消']
} }
}, },
created() { created() {
...@@ -448,4 +433,6 @@ ...@@ -448,4 +433,6 @@
} }
} }
</script> </script>
``` ```
\ No newline at end of file
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 2becc703
...@@ -8,21 +8,14 @@ ...@@ -8,21 +8,14 @@
<!--表单部分--> <!--表单部分-->
<el-form ref="form" :model="formModel" :rules="rules" label-width="110px" <el-form ref="form" :model="formModel" :rules="rules" label-width="110px"
style="width:80%;margin:0 auto"> style="width:80%;margin:0 auto">
<el-form-item v-for="(column,index) in showUserColumns" :key="index" :label="column.name" :prop="column.codeCamel"> <el-form-item v-for="(column,index) in showUserColumns" :key="column.id" :label="column.name" :prop="column.codeCamel">
<!--el-input<el-input v-if="column.codeCamel==='password'" type="password" <!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
v-model="formModel[column.codeCamel]"></el-input>--> v-model="formModel[column.codeCamel]"></el-input>-->
<!-- 富文本 --> <!-- 1 普通input -->
<quill-editor v-if="column.widgetType === 5" <el-input v-if="column.widgetType === 1" v-model="formModel[column.codeCamel]"></el-input>
ref="textEditor" <!-- 2 日期选择 -->
v-model="formModel[column.codeCamel]" <el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- 日期选择 -->
<el-date-picker v-else-if="column.type === 'datetime' || column.type === 'date'"
v-model="formModel[column.codeCamel]" v-model="formModel[column.codeCamel]"
type="datetime" type="datetime"
align="right" align="right"
...@@ -30,31 +23,36 @@ ...@@ -30,31 +23,36 @@
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"> :picker-options="pickerOptions">
</el-date-picker> </el-date-picker>
<!-- 下拉框 --> <!-- 3 下拉框 -->
<el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]"> <el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]" @change="selectChange(formModel[column.codeCamel])">
<el-option v-for="item in selectOptions" <el-option v-for="(item,key) in column.options"
:key="item.value" :key="key"
:label="item.label" :label="item"
:value="item.value"> :value="key">
</el-option> </el-option>
</el-select> </el-select>
<!-- 文本域 --> <!-- 4 文本域 -->
<el-input v-else-if="column.widgetType === 4" v-model="formModel[column.codeCamel]" <el-input v-else-if="column.widgetType === 4" v-model="formModel[column.codeCamel]"
type="textarea" type="textarea"
:autosize="{ minRows: 2, maxRows: 5}" :autosize="{ minRows: 2, maxRows: 5}"
:rows="2"> :rows="2">
</el-input> </el-input>
<!-- 复选框 --> <!-- 5 复选框 -->
<el-checkbox v-else-if="column.widgetType === 3" v-model="formModel[column.codeCamel]"></el-checkbox> <el-checkbox v-else-if="column.widgetType === 3" v-model="formModel[column.codeCamel]"></el-checkbox>
<!-- 普通input --> <!-- 6 富文本 -->
<el-input v-else v-model="formModel[column.codeCamel]"></el-input> <quill-editor v-else-if="column.widgetType === 5"
ref="textEditor"
v-model="formModel[column.codeCamel]"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item v-if="buttons.length">
<el-col :span="12"> <el-col :span="12" v-for="(btn,key) in buttons" :key="key">
<el-button type="primary" @click="onSubmit()">确定</el-button> <el-button v-if="btn === '确定' || btn === '提交'" type="primary" @click="onSubmit()">{{btn}}</el-button>
</el-col> <el-button v-if="btn === '取消' || btn === '重置'" type="primary" @click="resetForm()">{{btn}}</el-button>
<el-col :span="12">
<el-button @click="resetForm()">重置</el-button>
</el-col> </el-col>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -69,7 +67,6 @@ ...@@ -69,7 +67,6 @@
<script> <script>
import _ from 'lodash' import _ from 'lodash'
import request from '@/utils/request' import request from '@/utils/request'
// import { parseTime } from '@/utils/index'
/** /**
* 毫末科技的表单组件. * 毫末科技的表单组件.
...@@ -82,7 +79,8 @@ ...@@ -82,7 +79,8 @@
// 集成其他组件 // 集成其他组件
extends: {}, extends: {},
// 使用其它组件 // 使用其它组件
components: {}, components: {
},
// 混入公共对象 // 混入公共对象
mixins: [], mixins: [],
props: { props: {
...@@ -95,11 +93,18 @@ ...@@ -95,11 +93,18 @@
required: true required: true
}, },
/** /**
* 指定要显示的表单字段及类型。默认为根据schema得到的所有字段。 * 指定要显示的表单字段及类型，必传。数组的每个元素须有name和widgetType两个字段，name表示要显示的表单字段，widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，取值1-6(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期格式)，若表单类型为下拉框，还需传入options字段，值为数组(数组元素是下拉框的选项)
* 示例：[
* { 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 }
* ]
*/ */
columns: { columns: {
type: Array, type: Array,
required: false, required: true,
validator: function(value) { validator: function(value) {
if (typeof value !== 'object') { if (typeof value !== 'object') {
console.warn(`传入的columns不符合要求，必须是数组`) console.warn(`传入的columns不符合要求，必须是数组`)
...@@ -109,6 +114,13 @@ ...@@ -109,6 +114,13 @@
return true return true
} }
}, },
/**
* 指定要显示的按钮(确定、取消、重置)。默认不显示。
*/
buttons: {
type: Array,
required: false
},
/** /**
* 传入用户的id用来修改用户信息 * 传入用户的id用来修改用户信息
*/ */
...@@ -152,7 +164,6 @@ ...@@ -152,7 +164,6 @@
// } // }
// } // }
return { return {
requestUrl: '',
form: null, form: null,
formModel: {}, // 双向绑定的数据变量 formModel: {}, // 双向绑定的数据变量
showUserColumns: [], // 要显示的字段 showUserColumns: [], // 要显示的字段
...@@ -213,24 +224,19 @@ ...@@ -213,24 +224,19 @@
picker.$emit('pick', date) picker.$emit('pick', date)
} }
}] }]
}, }
selectOptions: [{
value: '1',
label: '企业'
}, {
value: '2',
label: '代理商'
}]
} }
}, },
created() { created() {
// this.validate() // this.validate()
this.init() this.init()
// console.log(this.schema) console.log(this.buttons)
}, },
methods: { methods: {
selectChange(v) {
console.log(v)
},
logTimeChange(value) { logTimeChange(value) {
// value = parseTime(value)
console.log(value) console.log(value)
}, },
validate() { validate() {
......
src/views/haomo/components/forms/index.vue
View file @ 2becc703
<template> <template>
<div> <div>
<hm-complex-form :schema="schema['HmUser2']" :columns="showUserColumns" :tableId="tableId"> <hm-complex-form :schema="schema['HmUser2']" :columns="showUserColumns" :buttons="showUserButtons" :tableId="tableId">
</hm-complex-form> </hm-complex-form>
</div> </div>
</template> </template>
...@@ -21,7 +21,9 @@ ...@@ -21,7 +21,9 @@
return { return {
// showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email', 'createTime'] // showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email', 'createTime']
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期
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 }] 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: ['确定', '取消']
} }
}, },
computed: { computed: {
......
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