临时写的,不够成熟,如果有更好的,希望能让小弟白嫖一下,谢谢大佬们
// 需要使用的页面
/**
* @users_genre 判断不同表单
* @users_list 数据源
*/
<user_Form :users_genre="'government'" :users_list="student_list" @Form_item="Form_item" :formItem="formItem"></user_Form>
<Row :gutter="16">
<Col :span="users_genre === 'student' ? '6' : item.span" v-for="item in users_list" :key="item.id">
<FormItem :label="item.label" :prop="item.prop" v-if="item.type === 'Input' && item.genre.indexOf(users_genre) !== -1">
<Input :size="item.size" v-model="formItem[item.model]"
:placeholder="item.placeholder.split('|').length > 1 ? item.placeholder.split('|')[[item.genre.split('|').indexOf(users_genre)]] : item.placeholder"
:disabled="item.disabled" @input="surcreatepy(item.surcreatepyold, item.surcreatepydata)"></Input>
</FormItem>
<FormItem :label="item.label" :prop="item.prop" v-if="item.type === 'Select' && item.genre.indexOf(users_genre) !== -1">
<Select :size="item.size" v-model="formItem[item.model]" :disabled="item.disabled">
<Option v-for="subitem in item.children" :key="subitem.value" :value="subitem.value">{{subitem.label}}
</Option>
</Select>
</FormItem>
</Col>
</Row>
// 拼音转换插件
import pinyin from 'js-pinyin'
export default {
name: 'Form',
props: {
users_list: {
type: Array,
default: false
},
formItem: {
type: Object,
default: false
},
users_genre: {
type: String,
default: ''
}
},
watch: {
formItem: {
handler(val, oldVal) {
this.Form_item(val)
},
deep: true,
immediate: true
}
},
data() {
return {
formItem: {}
}
},
methods: {
Form_item(data) {
this.$emit('Form_item', data)
},
// 姓转换
surcreatepy(old, data) {
this.formItem[data] = pinyin.getFullChars(this.formItem[old])
}
}
}
/**
* @placeholder 提示
* @label 标题
* @prop 验证规则
* @size 大小
* @model v-model绑定值
* @type 类型
* @genre 相当于权限
* @surcreatepyold 被转换的字段
* @surcreatepydata 转换后的拼音
* @span col占的大小
* @disabled 是否禁用
* @children 下拉框的数据
*/
export const student_list = [
{ id: 0, label: '姓', prop: 'surname', size: 'large', model: 'surname', placeholder: '请输入学生姓|请输入老师姓|请输入培训老师姓|请输入政府人员姓', type: 'Input', genre: 'student|teacher|train|government', surcreatepyold: 'surname', surcreatepydata: 'surnamepin', span: '6' },
{ id: 1, label: '名', prop: 'name', size: 'large', model: 'name', placeholder: '请输入学生名|请输入老师名|请输入培训老师名|请输入政府人员名', type: 'Input', genre: 'student|teacher|train|government', surcreatepyold: 'name', surcreatepydata: 'namepin', span: '6' },
{ id: 2, label: '姓(拼音)', disabled: 'true', prop: 'surnamepin', size: 'large', genre: 'student|teacher|train|government', model: 'surnamepin', placeholder: '英文 姓(拼音),需要与护照保持一致', type: 'Input', span: '6' },
{ id: 3, label: '名(拼音)', disabled: 'true', prop: 'namepin', size: 'large', genre: 'student|teacher|train|government', model: 'namepin', placeholder: '英文 名(拼音),需要与护照保持一致', type: 'Input', span: '6' },
{ id: 4, label: '手机号', prop: 'mobile', size: 'large', model: 'mobile', genre: 'teacher|train|government', placeholder: '请输入手机号', type: 'Input', span: '8' },
{ id: 5, label: '电话', prop: 'phone', size: 'large', model: 'phone', genre: 'teacher|train|government', placeholder: '请输入电话', type: 'Input', span: '8' },
{ id: 6, label: '邮编', prop: 'postalCode', size: 'large', model: 'postalCode', genre: 'teacher|train|government', placeholder: '请输入邮编', type: 'Input', span: '8' }
]