Skip to content

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

重构组件

上级 678bb557
隐藏空白字符变更
内嵌 并排
正在显示 包含 546 行增加 和 7 行删除
examples/App.vue
浏览文件 @ 0c438c6b
<template> <template>
<div id="app"> <div id="app">
<ezj-tab-form title="填写报名表" :tabs="tabs"></ezj-tab-form> <ezj-container :menus="menus" default-active="0-1"></ezj-container>
<!-- <ezj-tab-form title="填写报名表" :tabs="tabs"></ezj-tab-form> -->
<!-- <ezj-tabs title="填写报名表" v-model="activeName"> <!-- <ezj-tabs title="填写报名表" v-model="activeName">
<ezj-tab-pane label="个人信息" name="one" :required="true"> <ezj-tab-pane label="个人信息" name="one" :required="true">
<ezj-form :options="formOptions" :model="formModel" :items="formItems" @submit="onSubmit"></ezj-form> <ezj-form :options="formOptions" :model="formModel" :items="formItems" @submit="onSubmit"></ezj-form>
...@@ -213,7 +214,10 @@ export default { ...@@ -213,7 +214,10 @@ export default {
title: '个人信息', title: '个人信息',
progress: 0, progress: 0,
get: { get: {
action: '/api/v1/enrollment/profiles?project_id=1001' action: '/zws/v1/enrollment/profiles?project_id=1001',
callback(res) {
return res
}
}, },
update: { update: {
action: '/api/v1/enrollment/profiles/6614756225840054272' action: '/api/v1/enrollment/profiles/6614756225840054272'
...@@ -420,10 +424,16 @@ export default { ...@@ -420,10 +424,16 @@ export default {
title: '教育背景', title: '教育背景',
progress: 0, progress: 0,
get: { get: {
action: '/api/v1/enrollment/profiles?project_id=1001' action: '/api/v1/enrollment/profiles',
data: {
project_id: 1001
}
}, },
update: { update: {
action: '/api/v1/enrollment/profiles/6614756225840054272' action: '/zws/v1/enrollment/profiles',
data: {
project_id: 1001
}
}, },
form: { form: {
options: { options: {
...@@ -541,6 +551,276 @@ export default { ...@@ -541,6 +551,276 @@ export default {
] ]
} }
} }
],
menus: [
{
id: '0',
title: '填写报名表',
isActive: true,
hasShadow: true,
submenus: [
{
id: '0-1',
title: '个人信息',
progress: 0,
get: {
action: '/zws/v1/enrollment/profiles?project_id=1001',
callback(res) {
return res
}
},
update: {
action: '/api/v1/enrollment/profiles/6614756225840054272'
},
form: {
options: {
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: [
{
type: 'input',
label: '姓名',
model: 'real_name_cn',
placeholder: '123123',
rules: [
{
required: true,
message: '请输入活动名称',
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
]
},
{
type: 'input',
label: '英文名（姓名全拼）',
model: 'real_name_en',
required: true
},
{
type: 'select',
values: [
{ label: '居民身份证', value: '0' },
{ label: '港澳台身份证', value: '1' },
{ label: '护照号', value: '2' },
{ label: '军官证', value: '3' },
{ label: '其他', value: '9' }
],
label: '证件类型',
model: 'id_type',
required: true
},
{
type: 'input',
label: '证件号码',
model: 'id_number',
required: true
},
{
type: 'datePicker',
label: '出生日期',
model: 'birthday',
required: true,
attrs: { type: 'date', 'value-format': 'yyyy-MM-dd' }
},
{
type: 'radioGroup',
values: [
{ label: '男', value: '1' },
{ label: '女', value: '2' }
],
label: '性别',
model: 'gender',
required: true
},
{
type: 'select',
values: [
{ label: '中国', value: '1' },
{ label: '其他国家', value: '9' }
],
label: '国籍',
model: 'nationality',
required: true
},
{
type: 'datePicker',
label: '参加工作年份',
model: 'date_of_starting_to_work',
required: true,
attrs: { type: 'year', 'value-format': 'yyyy' }
},
{
type: 'input',
label: '手机号',
model: 'phone_number',
required: true
},
{
type: 'input',
label: '邮箱',
model: 'email',
required: true,
hint: '（后续报名信息将发送至此邮箱，请认真填写）'
},
{
type: 'input',
label: 'QQ号',
model: 'qq_account',
required: true
},
{
type: 'input',
label: '微信号',
model: 'we_chat_account',
required: true
},
{
type: 'input',
label: '邮寄地址',
model: 'mailing_address',
required: true
},
{
type: 'input',
label: '紧急联系人',
model: 'emergency_contact_name',
required: true
},
{
type: 'input',
label: '紧急联系电话',
model: 'emergency_contacts_phone',
required: true
},
{
type: 'select',
values: [
{ label: '请选择', value: '0' },
{ label: '四级', value: '4' },
{ label: '六级', value: '3' },
{ label: '托福', value: '1' },
{ label: '雅思', value: '2' }
],
label: '英语水平',
model: 'english_level',
required: true
},
{
type: 'input',
label: '托福/雅思成绩',
model: 'english_score',
required: true
},
{
type: 'select',
values: [
{ label: '请选择', value: '0' },
{ label: '紫荆教育官方网站', value: '11' },
{ label: '紫荆教育官方微信公众号', value: '12' },
{ label: '紫荆教育学位项目老学员推荐', value: '13' },
{ label: '紫荆教育Kelley项目系列活动', value: '14' },
{
label: '紫荆教育其他活动公开课、大讲堂、沙龙等',
value: '15'
},
{ label: '紫荆教育员工或者老师推荐', value: '16' },
{ label: '公司人力资源推荐', value: '17' },
{
label:
'报纸杂志网站广告微博微信公众号论坛等第三方媒体、社交平台',
value: '18'
},
{
label: '网络搜索，如百度、必应、谷歌等',
value: '19'
},
{ label: '其他', value: '9' }
],
label: '了解途径',
model: 'channel',
required: true
}
]
}
},
{
id: '0-2',
title: '教育背景',
progress: 0
},
{
id: '0-3',
title: '工作经验',
progress: 0
},
{
id: '0-4',
title: '学习目的',
progress: 0
},
{
id: '0-5',
title: '资料上传',
progress: 0
},
{
id: '0-6',
title: '所受培训',
progress: 0
},
{
id: '0-7',
title: '最终检查',
progress: 0
},
{
id: '0-8',
title: '申请声明',
progress: 0
}
]
},
{
id: '1',
title: '办理入学',
group: {
title: '必填项',
submenus: [
{ id: '1-1', title: '入学协议' },
{ id: '1-2', title: '缴费凭证' }
]
}
}
] ]
} }
}, },
......
src/Aside.vue 0 → 100644
浏览文件 @ 0c438c6b
<template>
<div class="ezj-aside" :style="style">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'EzjAside',
props: {
width: { String, default: '295px' }
},
computed: {
style() {
return {
width: this.width
}
}
}
}
</script>
<style lang="scss">
.ezj-aside {
width: 295px;
}
</style>
src/Container.vue 0 → 100644
浏览文件 @ 0c438c6b
<template>
<div class="ezj-container">
<ezj-aside>
<ezj-menu :menus="menus" @select="onSelect"></ezj-menu>
</ezj-aside>
<ezj-main :title="currentPage.title" v-if="currentPage" :key="activeId">
<slot>
<ezj-form-pane v-bind="currentPage" v-if="currentPage.form"></ezj-form-pane>
</slot>
</ezj-main>
</div>
</template>
<script>
import EzjAside from './Aside'
import EzjMenu from './Menu'
import EzjMain from './Main'
import EzjFormPane from './FormPane'
export default {
name: 'EzjContainer',
props: {
menus: {
type: Array,
required: true,
default() {
return []
}
},
defaultActive: { type: String }
},
components: { EzjAside, EzjMenu, EzjMain, EzjFormPane },
data() {
return {
activeId: this.defaultActive
}
},
computed: {
currentPage() {
let found = null
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)
if (found) {
break
}
} else {
found = this.find(this.menus, this.activeId)
if (found) {
break
}
}
}
return found
}
},
methods: {
find(arr, id) {
return arr.find(item => item.id === id)
},
onSelect(id) {
this.activeId = id
}
}
}
</script>
<style lang="scss">
.ezj-container {
display: flex;
}
</style>
src/FormPane.vue
浏览文件 @ 0c438c6b
...@@ -72,9 +72,12 @@ export default { ...@@ -72,9 +72,12 @@ export default {
}, },
// 更新 // 更新
updateData() { updateData() {
const { action, data = {} } = this.update const { action, data = {}, callback } = this.update
axios.post(action, { data }).then(res => { axios.post(action, { data }).then(res => {
console.log(res) console.log(res)
if (callback) {
callback(res.data)
}
}) })
}, },
onSubmit() {} onSubmit() {}
......
src/Main.vue 0 → 100644
浏览文件 @ 0c438c6b
<template>
<div class="ezj-main">
<div class="ezj-main__hd">
<slot name="header">
<h1 class="ezj-main__title">{{title}}</h1>
</slot>
</div>
<div class="ezj-main__bd">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
title: String
}
}
</script>
<style lang="scss">
.ezj-main {
flex: 1;
margin: 0 40px;
}
.ezj-main__title {
font-size: 24px;
color: #000;
}
</style>
src/Menu.vue 0 → 100644
浏览文件 @ 0c438c6b
<template>
<div class="ezj-menu">
<template v-for="menu in menus">
<div
:class="{'ezj-menu__item': true,'has-shadow': menu.hasShadow, 'is-active': menu.isActive}"
:key="menu.id"
>
<div class="ezj-menu__title" @click="handleClick(menu.id)">{{menu.title}}</div>
<!-- 分组 -->
<div class="ezj-menu-group" v-if="menu.group">
<div class="ezj-menu-group__title">{{menu.group.title}}</div>
<div class="ezj-submenu" v-if="menu.group.submenus" :key="menu.group.title">
<template v-for="submenu in menu.group.submenus">
<div
class="ezj-submenu__item"
:key="submenu.id"
@click="handleClick(submenu.id)"
>{{submenu.title}}</div>
</template>
</div>
</div>
<!-- 子菜单 -->
<div class="ezj-submenu" v-if="menu.submenus" :key="menu.title">
<template v-for="submenu in menu.submenus">
<div
class="ezj-submenu__item"
:key="submenu.id"
@click="handleClick(submenu.id)"
>{{submenu.title}}</div>
</template>
</div>
</div>
</template>
</div>
</template>
<script>
export default {
name: 'EzjMenu',
props: {
menus: {
type: Array,
default() {
return []
}
},
router: { type: Boolean, default: false },
defaultActive: { type: String }
},
data() {
return {
currentActive: null
}
},
watch: {
defaultActive: {
immediate: true,
handler(value) {
this.currentActive = value
}
}
},
methods: {
handleClick(id) {
this.currentActive = id
this.$emit('select', id)
}
}
}
</script>
<style lang="scss">
.ezj-menu__item {
margin-bottom: 10px;
&.has-shadow {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
.ezj-submenu__item {
margin: 20px;
}
}
&.is-active {
.ezj-menu__title {
color: #fff;
background-color: #c41230;
border: 0;
}
}
}
.ezj-menu__title {
height: 60px;
font-size: 18px;
line-height: 60px;
color: #000;
text-align: center;
border: 1px solid #d8dce6;
box-sizing: border-box;
cursor: pointer;
&:hover {
color: #fff;
background-color: #c41230;
border: 0;
}
}
.ezj-menu-group__title {
margin: 10px 0;
}
.ezj-submenu {
overflow: hidden;
}
.ezj-submenu__item {
margin: 10px 0;
font-size: 18px;
line-height: 20px;
cursor: pointer;
}
</style>
src/index.js
浏览文件 @ 0c438c6b
...@@ -27,8 +27,9 @@ import EzjForm from './Form' ...@@ -27,8 +27,9 @@ import EzjForm from './Form'
import EzjTabs from './Tabs' import EzjTabs from './Tabs'
import EzjTabPane from './TabPane' import EzjTabPane from './TabPane'
import EzjTabForm from './TabForm' import EzjTabForm from './TabForm'
import EzjContainer from './Container'
const components = [EzjForm, EzjTabs, EzjTabPane, EzjTabForm] const components = [EzjForm, EzjTabs, EzjTabPane, EzjTabForm, EzjContainer]
const install = function(Vue) { const install = function(Vue) {
if (install.installed) return if (install.installed) return
......
vue.config.js
浏览文件 @ 0c438c6b
...@@ -5,6 +5,6 @@ module.exports = { ...@@ -5,6 +5,6 @@ module.exports = {
} }
}, },
devServer: { devServer: {
proxy: 'https://kelley.ezijing.com' proxy: 'https://api.ezijing.com'
} }
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论