Skip to content

V
vue-form
提交 a37c8066 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

add components

上级 0c438c6b
显示空白字符变更
内嵌 并排
正在显示 包含 248 行增加 和 393 行删除
examples/App.vue
浏览文件 @ a37c8066
...@@ -215,8 +215,8 @@ export default { ...@@ -215,8 +215,8 @@ export default {
progress: 0, progress: 0,
get: { get: {
action: '/zws/v1/enrollment/profiles?project_id=1001', action: '/zws/v1/enrollment/profiles?project_id=1001',
callback(res) { callback(data) {
return res return data
} }
}, },
update: { update: {
...@@ -558,48 +558,31 @@ export default { ...@@ -558,48 +558,31 @@ export default {
title: '填写报名表', title: '填写报名表',
isActive: true, isActive: true,
hasShadow: true, hasShadow: true,
submenus: [ children: [
{ {
id: '0-1', id: '0-1',
title: '个人信息', title: '个人信息',
showProgress: true,
progress: 0, progress: 0,
get: { get: {
action: '/zws/v1/enrollment/profiles?project_id=1001', action: '/zws/v1/enrollment/profiles?project_id=1001',
callback(res) { callback(data) {
return res data.date_of_starting_to_work =
data.date_of_starting_to_work + ''
return data
} }
}, },
update: { update: {
action: '/api/v1/enrollment/profiles/6614756225840054272' action: '/zws/v1/enrollment/profiles',
data: { project_id: 1001 },
callback(data) {
return data
}
}, },
form: { form: {
options: { options: {
labelWidth: '160px' labelWidth: '160px'
}, },
model: {
real_name_cn: '王鹏飞',
real_name_en: 'Max',
id_type: '0',
id_number: 'xxxxxxx',
birthday: '1994-02-19',
gender: '1',
nationality: '1',
city: '2,52',
date_of_starting_to_work: '2010',
phone_number: 'xxxx',
email: 'xxxxx@163.com',
qq_account: 'xxxx',
we_chat_account: 'xxxx',
mailing_address: '北京',
emergency_contact_name: 'xxxxxx',
emergency_contacts_phone: 'xxxxx',
english_level: '2',
english_score: '12',
channel: '12',
address_province: '2',
address_city: '52',
project_id: '1001'
},
items: [ items: [
{ {
type: 'input', type: 'input',
...@@ -629,11 +612,11 @@ export default { ...@@ -629,11 +612,11 @@ export default {
{ {
type: 'select', type: 'select',
values: [ values: [
{ label: '居民身份证', value: '0' }, { label: '居民身份证', value: 0 },
{ label: '港澳台身份证', value: '1' }, { label: '港澳台身份证', value: 1 },
{ label: '护照号', value: '2' }, { label: '护照号', value: 2 },
{ label: '军官证', value: '3' }, { label: '军官证', value: 3 },
{ label: '其他', value: '9' } { label: '其他', value: 9 }
], ],
label: '证件类型', label: '证件类型',
model: 'id_type', model: 'id_type',
...@@ -655,8 +638,8 @@ export default { ...@@ -655,8 +638,8 @@ export default {
{ {
type: 'radioGroup', type: 'radioGroup',
values: [ values: [
{ label: '男', value: '1' }, { label: '男', value: 1 },
{ label: '女', value: '2' } { label: '女', value: 2 }
], ],
label: '性别', label: '性别',
model: 'gender', model: 'gender',
...@@ -665,8 +648,8 @@ export default { ...@@ -665,8 +648,8 @@ export default {
{ {
type: 'select', type: 'select',
values: [ values: [
{ label: '中国', value: '1' }, { label: '中国', value: 1 },
{ label: '其他国家', value: '9' } { label: '其他国家', value: 9 }
], ],
label: '国籍', label: '国籍',
model: 'nationality', model: 'nationality',
...@@ -725,11 +708,11 @@ export default { ...@@ -725,11 +708,11 @@ export default {
{ {
type: 'select', type: 'select',
values: [ values: [
{ label: '请选择', value: '0' }, { label: '请选择', value: 0 },
{ label: '四级', value: '4' }, { label: '四级', value: 4 },
{ label: '六级', value: '3' }, { label: '六级', value: 3 },
{ label: '托福', value: '1' }, { label: '托福', value: 1 },
{ label: '雅思', value: '2' } { label: '雅思', value: 2 }
], ],
label: '英语水平', label: '英语水平',
model: 'english_level', model: 'english_level',
...@@ -744,27 +727,27 @@ export default { ...@@ -744,27 +727,27 @@ export default {
{ {
type: 'select', type: 'select',
values: [ values: [
{ label: '请选择', value: '0' }, { label: '请选择', value: 0 },
{ label: '紫荆教育官方网站', value: '11' }, { label: '紫荆教育官方网站', value: 11 },
{ label: '紫荆教育官方微信公众号', value: '12' }, { label: '紫荆教育官方微信公众号', value: 12 },
{ label: '紫荆教育学位项目老学员推荐', value: '13' }, { label: '紫荆教育学位项目老学员推荐', value: 13 },
{ label: '紫荆教育Kelley项目系列活动', value: '14' }, { label: '紫荆教育Kelley项目系列活动', value: 14 },
{ {
label: '紫荆教育其他活动公开课、大讲堂、沙龙等', label: '紫荆教育其他活动公开课、大讲堂、沙龙等',
value: '15' value: 15
}, },
{ label: '紫荆教育员工或者老师推荐', value: '16' }, { label: '紫荆教育员工或者老师推荐', value: 16 },
{ label: '公司人力资源推荐', value: '17' }, { label: '公司人力资源推荐', value: 17 },
{ {
label: label:
'报纸杂志网站广告微博微信公众号论坛等第三方媒体、社交平台', '报纸杂志网站广告微博微信公众号论坛等第三方媒体、社交平台',
value: '18' value: 18
}, },
{ {
label: '网络搜索，如百度、必应、谷歌等', label: '网络搜索，如百度、必应、谷歌等',
value: '19' value: 19
}, },
{ label: '其他', value: '9' } { label: '其他', value: 9 }
], ],
label: '了解途径', label: '了解途径',
model: 'channel', model: 'channel',
...@@ -776,7 +759,107 @@ export default { ...@@ -776,7 +759,107 @@ export default {
{ {
id: '0-2', id: '0-2',
title: '教育背景', title: '教育背景',
progress: 0 showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/profiles?project_id=1001',
callback(data) {
const { start_date: startDate, end_date: endDate } = data
if (startDate) {
data.times = [startDate + '', endDate + '']
}
return data
}
},
update: {
action: '/zws/v1/enrollment/profiles',
data: { project_id: 1001 },
callback(data) {
let [startDate, endDate] = data.times
data.start_date = startDate
data.end_date = endDate
return data
}
},
form: {
hasAdd: true,
options: {
labelWidth: '160px'
},
items: [
{
type: 'datePicker',
label: '教育时间',
model: 'times',
required: true,
attrs: { type: 'monthrange', 'value-format': 'yyyy-MM' }
},
{
type: 'input',
label: '学校名称',
model: 'school_name_cn',
rules: [
{
required: true,
message: '请输入学校名称',
trigger: 'blur'
}
]
},
{
type: 'input',
label: '学校所在国家',
model: 'school_country',
rules: [
{
required: true,
message: '请输入学校所在国家',
trigger: 'blur'
}
]
},
{
type: 'input',
label: '学校所在城市',
model: 'school_city',
rules: [
{
required: true,
message: '请输入学校所在城市',
trigger: 'blur'
}
]
},
{
type: 'input',
label: '专业名称',
model: 'major_cn',
rules: [
{
required: true,
message: '请输入专业名称',
trigger: 'blur'
}
]
},
{
type: 'select',
values: [
{ label: '请选择', value: 0 },
{ label: '专科', value: 1 },
{ label: '本科', value: 2 },
{ label: '本科/学士', value: 3 },
{ label: '硕士研究生', value: 4 },
{ label: '研究生/硕士', value: 5 },
{ label: '博士研究生', value: 6 },
{ label: '研究生/博士', value: 7 },
{ label: '其他', value: 9 }
],
label: '学历/学位',
model: 'degree'
}
]
}
}, },
{ {
id: '0-3', id: '0-3',
...@@ -813,13 +896,16 @@ export default { ...@@ -813,13 +896,16 @@ export default {
{ {
id: '1', id: '1',
title: '办理入学', title: '办理入学',
group: { isGroup: true,
children: [
{
title: '必填项', title: '必填项',
submenus: [ children: [
{ id: '1-1', title: '入学协议' }, { id: '1-1', title: '入学协议' },
{ id: '1-2', title: '缴费凭证' } { id: '1-2', title: '缴费凭证' }
] ]
} }
]
} }
] ]
} }
......
src/Container.vue
浏览文件 @ a37c8066
...@@ -37,33 +37,23 @@ export default { ...@@ -37,33 +37,23 @@ export default {
}, },
computed: { computed: {
currentPage() { currentPage() {
let found = null return this.getDeepItem(this.menus, this.activeId)
for (let i = 0; i < this.menus.length; i++) {
let menu = this.menus[i]
if (menu.group) {
found = this.find(menu.group.submenus, this.activeId)
if (found) {
break
} }
} else if (menu.submenus) { },
found = this.find(menu.submenus, this.activeId) methods: {
if (found) { getDeepItem(arr, id) {
break for (const item of arr) {
if (item.id === id || id === undefined) {
return item
} }
} else { if (item.children) {
found = this.find(this.menus, this.activeId) let found = this.getDeepItem(item.children, id)
if (found) { if (found) {
break return found
}
} }
} }
return found
} }
}, },
methods: {
find(arr, id) {
return arr.find(item => item.id === id)
},
onSelect(id) { onSelect(id) {
this.activeId = id this.activeId = id
} }
......
src/FormPane.vue
浏览文件 @ a37c8066
<template> <template>
<div class="ezj-form-pane"> <div class="ezj-form-pane">
<!-- 多个表单 --> <!-- 多个表单 -->
<template v-if="isMultiple"> <template v-if="form.hasAdd">
<template v-for="(form, index) in form"> <template v-for="(item, index) in formModel">
<ezj-form <ezj-form
:options="form.options" :options="form.options"
:model="form.model" :model="item"
:items="form.items" :items="form.items"
@onSubmit="onSubmit" @onSubmit="onSubmit"
:key="index" :key="index"
...@@ -18,19 +18,14 @@ ...@@ -18,19 +18,14 @@
<!-- 一个表单 --> <!-- 一个表单 -->
<template v-else> <template v-else>
<ezj-form <ezj-form :options="form.options" :model="formModel" :items="form.items" @onSubmit="onSubmit"></ezj-form>
:options="form.options"
:model="form.model"
:items="form.items"
@onSubmit="onSubmit"
></ezj-form>
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import EzjForm from './Form'
import axios from 'axios' import axios from 'axios'
import EzjForm from './Form'
export default { export default {
name: 'EzjFormPane', name: 'EzjFormPane',
...@@ -51,11 +46,19 @@ export default { ...@@ -51,11 +46,19 @@ export default {
}, },
data: Object, data: Object,
headers: Object, headers: Object,
form: [Object, Array] form: Object
},
data() {
return {
model: {}
}
}, },
computed: { computed: {
isMultiple() { isMultiple() {
return Array.isArray(this.form) return Array.isArray(this.model)
},
formModel() {
return this.form.model || this.model
} }
}, },
methods: { methods: {
...@@ -64,23 +67,29 @@ export default { ...@@ -64,23 +67,29 @@ export default {
}, },
// 获取 // 获取
getData() { getData() {
const { action, data = {} } = this.get const { action, data = {}, callback } = this.get
console.log(action, this.get)
axios.get(action, { params: data }).then(res => { axios.get(action, { params: data }).then(res => {
console.log(res) let { data } = res
if (callback) {
data = callback(data)
}
this.model = data
}) })
}, },
// 更新 // 更新
updateData() { updateData(params) {
const { action, data = {}, callback } = this.update const { action, data = {}, callback } = this.update
axios.post(action, { data }).then(res => { params = Object.assign({}, params, data)
console.log(res)
if (callback) { if (callback) {
callback(res.data) params = callback(params)
} }
axios.post(action, params).then(res => {
this.$emit('update')
}) })
}, },
onSubmit() {} onSubmit(data) {
this.updateData(data)
}
}, },
beforeMount() { beforeMount() {
this.init() this.init()
......
src/Menu.vue
浏览文件 @ a37c8066
...@@ -6,37 +6,30 @@ ...@@ -6,37 +6,30 @@
:key="menu.id" :key="menu.id"
> >
<div class="ezj-menu__title" @click="handleClick(menu.id)">{{menu.title}}</div> <div class="ezj-menu__title" @click="handleClick(menu.id)">{{menu.title}}</div>
<!-- 分组 --> <template v-if="menu.children">
<div class="ezj-menu-group" v-if="menu.group"> <template v-if="menu.isGroup">
<div class="ezj-menu-group__title">{{menu.group.title}}</div> <template v-for="submenu in menu.children">
<div class="ezj-submenu" v-if="menu.group.submenus" :key="menu.group.title"> <div class="ezj-menu-group" :key="submenu.title">
<template v-for="submenu in menu.group.submenus"> <div class="ezj-menu-group__title">{{submenu.title}}</div>
<div <ezj-submenu :menus="submenu.children" @onClick="handleClick"></ezj-submenu>
class="ezj-submenu__item"
:key="submenu.id"
@click="handleClick(submenu.id)"
>{{submenu.title}}</div>
</template>
</div>
</div> </div>
</template>
</template>
<template v-else>
<!-- 子菜单 --> <!-- 子菜单 -->
<div class="ezj-submenu" v-if="menu.submenus" :key="menu.title"> <ezj-submenu :menus="menu.children" @onClick="handleClick"></ezj-submenu>
<template v-for="submenu in menu.submenus"> </template>
<div
class="ezj-submenu__item"
:key="submenu.id"
@click="handleClick(submenu.id)"
>{{submenu.title}}</div>
</template> </template>
</div>
</div> </div>
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import EzjSubmenu from './Submenu'
export default { export default {
name: 'EzjMenu', name: 'EzjMenu',
components: { EzjSubmenu },
props: { props: {
menus: { menus: {
type: Array, type: Array,
......
src/MultipleForm.vue 0 → 100644
浏览文件 @ a37c8066
<template>
<div class="multiple-form"></div>
</template>
<script>
export default {
name: 'MultipleForm',
data() {
return {}
},
methods: {}
}
</script>
<style lang="scss">
</style>
src/Submenu.vue 0 → 100644
浏览文件 @ a37c8066
<template>
<div class="ezj-submenu">
<template v-for="submenu in menus">
<div class="ezj-submenu__item" :key="submenu.id" @click="$emit('onClick', submenu.id)">
<span>{{submenu.title}}</span>
<!-- 是否必选 -->
<template v-if="submenu.showRequired">{{submenu.required ? '': '（可选）'}}</template>
<!-- 进度 -->
<template v-if="submenu.showProgress">
<span
:class="submenu.progress ? 'is-success' : 'is-error'"
>{{submenu.progress ? '（已完成）': '（未完成）'}}</span>
</template>
</div>
</template>
</div>
</template>
<script>
export default {
name: 'Submenu',
props: { menus: Array },
data() {
return {}
}
}
</script>
<style lang="scss">
.is-success {
color: #12c44a;
}
.is-error {
color: #c41230;
}
</style>
src/TabForm.vue deleted 100644 → 0
浏览文件 @ 0c438c6b
<template>
<div class="ezj-tab-form">
<div class="ezj-tab-form__title">{{title}}</div>
<el-tabs :tab-position="tabPosition">
<template v-for="(tab, index) in tabs">
<el-tab-pane :key="index" :label="tab.title" :lazy="true">
<template v-slot:label>
<i class="el-icon-user"></i>
<span class="title">{{tab.title}}</span>
<!-- 是否必选 -->
<template v-if="showRequired">{{tab.required ? '': '（可选）'}}</template>
<!-- 进度 -->
<template v-if="showProgress">
<span
:class="tab.progress ? 'is-success' : 'is-error'"
>{{tab.progress ? '（已完成）': '（未完成）'}}</span>
</template>
</template>
<ezj-form-pane v-bind="tab"></ezj-form-pane>
</el-tab-pane>
</template>
</el-tabs>
</div>
</template>
<script>
import EzjFormPane from './FormPane'
export default {
name: 'EzjTabForm',
components: { EzjFormPane },
props: {
title: String,
showProgress: { type: Boolean, default: true },
showRequired: { type: Boolean, default: true },
tabs: {
type: Array,
default() {
return []
}
}
},
data() {
return {
tabPosition: 'left'
}
}
}
</script>
<style lang="scss">
.ezj-tab-form__title {
position: absolute;
left: 0;
top: 0;
width: 295px;
font-size: 18px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #c41230;
}
.ezj-tab-form {
position: relative;
.el-tabs__header {
margin-top: 60px;
width: 295px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
}
.el-tabs__active-bar {
display: none;
}
.el-tabs__nav-wrap::after {
display: none;
}
.el-tabs--left .el-tabs__nav-wrap.is-left {
margin-right: 0;
}
.el-tabs--left .el-tabs__item.is-left {
text-align: left;
}
.el-tabs--left,
.el-tabs--right {
overflow: inherit;
}
.el-tabs__item.is-active .title {
color: #c41230;
}
.el-tabs__item {
font-size: 18px;
color: #000;
.is-success {
color: #12c44a;
}
.is-error {
color: #c41230;
}
}
}
</style>
src/TabNav.vue deleted 100644 → 0
浏览文件 @ 0c438c6b
<template>
<div class="ezj-tab-nav__scroll">
<template v-for="(pane, index) in panes">
<div
class="ezj-tab-nav__item"
:key="index"
@click="(e) => $emit('onTabClick', pane, pane.name || pane.index, e)"
>
<span>{{pane.label}}</span>
<span v-if="pane.showRequired">{{pane.required ? '（可选）' : ''}}</span>
<span v-if="pane.showPorgess">{{pane.progress ? '（已完成）' : '（未完成）'}}</span>
</div>
</template>
</div>
</template>
<script>
export default {
name: 'EzjTabNav',
props: {
panes: Array
},
data() {
return {}
},
computed: {},
methods: {}
}
</script>
<style lang="scss">
.ezj-tab-nav__scroll {
overflow-y: auto;
}
.ezj-tab-nav__item {
margin: 20px;
font-size: 18px;
line-height: 20px;
}
</style>
src/TabPane.vue deleted 100644 → 0
浏览文件 @ 0c438c6b
<template>
<div class="ezj-tab-pane">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'EzjTabPane',
props: {
label: String,
name: String,
lazy: Boolean
},
data() {
return {
index: null,
loaded: false
}
},
computed: {
active() {
const active = this.$parent.currentName === (this.name || this.index)
return active
},
paneName() {
return this.name || this.index
}
},
updated() {
this.$parent.$emit('tab-nav-update')
}
}
</script>
src/Tabs.vue deleted 100644 → 0
浏览文件 @ 0c438c6b
<template>
<div class="ezj-tabs">
<div class="ezj-tab-nav">
<div class="ezj-tab-nav__title">{{title}}</div>
<tab-nav :panes="panes" @onTabClick="handleTabClick"></tab-nav>
</div>
<div class="ezj-tab-content">
<slot></slot>
</div>
</div>
</template>
<script>
import TabNav from './TabNav'
export default {
name: 'EzjTabs',
props: {
title: String,
activeName: String,
value: {}
},
components: { TabNav },
data() {
return {
currentName: this.value || this.activeName,
panes: []
}
},
watch: {
activeName(value) {
this.setCurrentName(value)
},
value(value) {
this.setCurrentName(value)
}
},
methods: {
calcPaneInstances() {
if (this.$slots.default) {
const paneSlots = this.$slots.default.filter(
vnode =>
vnode.tag &&
vnode.componentInstance &&
vnode.componentOptions &&
vnode.componentOptions.Ctor.options.name === 'EzjTabPane'
)
this.panes = paneSlots.map(({ componentInstance }) => componentInstance)
} else {
this.panes = []
}
},
handleTabClick(tab, tabName, event) {
this.setCurrentName(tabName)
this.$emit('tab-click', tab, event)
},
setCurrentName(value) {
this.currentName = value
this.$emit('input', value)
}
},
mounted() {
this.calcPaneInstances()
},
update() {
this.calcPaneInstances()
}
}
</script>
<style lang="scss">
.ezj-tabs {
display: flex;
align-items: flex-start;
}
.ezj-tab-nav {
width: 295px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
}
.ezj-tab-nav__title {
font-size: 18px;
line-height: 60px;
color: #fff;
text-align: center;
background-color: #c41230;
}
.ezj-tab-content {
flex: 1;
overflow: hidden;
}
</style>
src/index.js
浏览文件 @ a37c8066
...@@ -24,12 +24,9 @@ import { ...@@ -24,12 +24,9 @@ import {
} from 'element-ui' } from 'element-ui'
import EzjForm from './Form' import EzjForm from './Form'
import EzjTabs from './Tabs'
import EzjTabPane from './TabPane'
import EzjTabForm from './TabForm'
import EzjContainer from './Container' import EzjContainer from './Container'
const components = [EzjForm, EzjTabs, EzjTabPane, EzjTabForm, EzjContainer] const components = [EzjForm, EzjContainer]
const install = function(Vue) { const install = function(Vue) {
if (install.installed) return if (install.installed) return
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论