Skip to content

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

update

上级 77d72458
显示空白字符变更
内嵌 并排
正在显示 包含 300 行增加 和 169 行删除
babel.config.js
浏览文件 @ 5ca62e95
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
['@babel/preset-env', { modules: false }]
],
presets: ['@vue/cli-plugin-babel/preset', '@vue/babel-preset-jsx', ['@babel/preset-env', { modules: false }]],
plugins: [
[
'component',
......
examples/ciis/application/form/declare.js
浏览文件 @ 5ca62e95
/**
* 申请申明
* 申请声明
*/
export default {
id: 'application_declare',
title: '申请申明',
title: '申请声明',
visible() {
return this.tabActive !== 'application_info_first'
},
update: {
action: '/api/enrollment/v1.0/application-materials/submit/1005'
},
......
examples/ciis/application/form/index.js
浏览文件 @ 5ca62e95
......@@ -6,5 +6,17 @@ import declare from './declare'
export default {
id: 'application',
title: '报名申请',
children: [info, tjx, wfzsm, declare, { id: 'application_pay', title: '缴报名费' }]
children: [
info,
tjx,
wfzsm,
declare,
{
id: 'application_pay',
title: '缴报名费',
visible() {
return this.tabActive !== 'application_info_first'
}
}
]
}
examples/ciis/application/form/info.js
浏览文件 @ 5ca62e95
// import first from './info/first'
import first from './info/first'
import profile from './info/profile'
import education from './info/education'
import career from './info/career'
......@@ -9,10 +9,5 @@ import answer from './info/answer'
export default {
id: 'application_info',
title: '个人资料',
tab: {
options: {},
active: 'application_info_profile',
items: [profile, education, career, answer, training, honor]
},
tabs: [profile, education, career, answer, training, honor]
tabs: [first, profile, education, career, answer, training, honor]
}
examples/ciis/application/form/info/answer.js
浏览文件 @ 5ca62e95
......@@ -6,9 +6,13 @@ export default {
id: 'application_info_answer',
title: '学习目的',
required: true,
visible() {
return this.tabActive !== 'application_info_first'
},
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
this.form.options.disabled = data.data.material.submission_status === 'SUBMITTED'
const { answers = [] } = data.data.material
const [first = {}, second = {}] = answers
return {
......@@ -35,8 +39,9 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
prev: { to: { query: { active: 'application_info', tab: 'application_info_career' } } },
next: { to: { query: { active: 'application_info', tab: 'application_info_training' } } },
options: {},
items: [
{
type: 'v-input',
......
examples/ciis/application/form/info/career.js
浏览文件 @ 5ca62e95
......@@ -6,9 +6,13 @@ export default {
id: 'application_info_career',
title: '工作经验',
required: true,
visible() {
return this.tabActive !== 'application_info_first'
},
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
this.form.options.disabled = data.data.material.submission_status === 'SUBMITTED'
let list = data.data.material.careers || []
list = list.map(item => {
const { start_date: startDate, end_date: endDate } = item
......@@ -44,8 +48,8 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
prev: { to: { query: { active: 'application_info', tab: 'application_info_education' } } },
next: { to: { query: { active: 'application_info', tab: 'application_info_answer' } } },
hasAdd: true,
options: {
labelWidth: '140px'
......
examples/ciis/application/form/info/education.js
浏览文件 @ 5ca62e95
......@@ -6,9 +6,13 @@ export default {
id: 'application_info_education',
title: '教育背景',
required: true,
visible() {
return this.tabActive !== 'application_info_first'
},
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
this.form.options.disabled = data.data.material.submission_status === 'SUBMITTED'
let list = data.data.material.educations || []
list = list.map(item => {
const { start_date: startDate, end_date: endDate } = item
......@@ -36,8 +40,8 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
prev: { to: { query: { active: 'application_info', tab: 'application_info_profile' } } },
next: { to: { query: { active: 'application_info', tab: 'application_info_career' } } },
hasAdd: true,
options: {
labelWidth: '140px'
......
examples/ciis/application/form/info/first.js
浏览文件 @ 5ca62e95
......@@ -6,10 +6,13 @@ export default {
id: 'application_info_first',
title: '个人信息',
required: true,
visible: true,
visible() {
return this.tabActive === 'application_info_first'
},
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
this.form.options.disabled = data.data.material.submission_status === 'SUBMITTED'
const { basic_info: basicInfo = {}, attachments = [] } = data.data.material
const attachment = attachments.reduce(
(result, item) => {
......@@ -37,10 +40,9 @@ export default {
}
},
form: {
next: 'application_info_profile',
options: {
labelWidth: '140px'
},
hasButton: false,
next: { to: { query: { active: 'application_info', tab: 'application_info_profile' } }, isSubmit: true },
options: { labelWidth: '140px' },
items: [
{
type: 'v-input',
......
examples/ciis/application/form/info/honor.js
浏览文件 @ 5ca62e95
......@@ -5,9 +5,13 @@
export default {
id: 'application_info_honor',
title: '荣誉奖励',
visible() {
return this.tabActive !== 'application_info_first'
},
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
this.form.options.disabled = data.data.material.submission_status === 'SUBMITTED'
let list = data.data.material.honors || []
return list.length ? list : [{}]
}
......@@ -25,8 +29,8 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
prev: { to: { query: { active: 'application_info', tab: 'application_info_training' } } },
next: { to: { query: { active: 'application_tjx' } } },
hasAdd: true,
options: {
labelWidth: '140px'
......
examples/ciis/application/form/info/profile.js
浏览文件 @ 5ca62e95
......@@ -6,9 +6,13 @@ export default {
id: 'application_info_profile',
title: '个人信息',
required: true,
visible() {
return this.tabActive !== 'application_info_first'
},
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
this.form.options.disabled = data.data.material.submission_status === 'SUBMITTED'
const { basic_info: basicInfo = {}, attachments = [] } = data.data.material
const attachment = attachments.reduce(
(result, item) => {
......@@ -54,24 +58,22 @@ export default {
}
},
form: {
// prev: 'application_info_profile',
next: 'application_info_education',
options: {
labelWidth: '140px'
},
prev: { to: { query: { active: 'application_info', tab: 'application_info_first' } } },
next: { to: { query: { active: 'application_info', tab: 'application_info_education' } } },
options: { labelWidth: '140px' },
items: [
{
type: 'v-input',
label: '手机号',
model: 'phone_number',
attrs: { disabled: false, placeholder: '请输入手机号' },
attrs: { disabled: true, placeholder: '请输入手机号' },
rules: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
},
{
type: 'v-input',
label: '邮箱',
model: 'email',
attrs: { disabled: false, placeholder: '请输入邮箱' },
attrs: { disabled: true, placeholder: '请输入邮箱' },
rules: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
hint: '（后续报名信息将发送至此邮箱，请认真填写）'
},
......@@ -80,96 +82,96 @@ export default {
values: [{ value: '居民身份证' }, { value: '港澳台身份证' }, { value: '护照' }, { value: '其他' }],
label: '证件类型',
model: 'id_type',
attrs: { disabled: false, placeholder: '请选择证件类型' },
attrs: { disabled: true, placeholder: '请选择证件类型' },
rules: [{ required: true, message: '请选择证件类型', trigger: 'change' }]
},
// 身份证照片(背面)
{
type: 'v-upload',
label: '身份证人像面',
model: 'ID_CARD_BACK',
attrs: {
action: '/api/enrollment/v1.0/application-materials/attachments/1005/put',
deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
data: { file_type: 'ID_CARD_BACK' },
limit: 1,
image: 'https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/cu/id_card_back.png'
},
rules: [{ type: 'array', required: true, message: '请上传身份证照片人像面', trigger: 'change' }],
isShow(data) {
return data.id_type === '居民身份证'
}
},
// 身份证照片(正面）
{
type: 'v-upload',
label: '身份证国徽面',
model: 'ID_CARD_FRONT',
attrs: {
action: '/api/enrollment/v1.0/application-materials/attachments/1005/put',
deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
data: { file_type: 'ID_CARD_FRONT' },
limit: 1,
image: 'https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/cu/id_card_front.png'
},
rules: [{ type: 'array', required: true, message: '请上传身份证照片国徽面', trigger: 'change' }],
isShow(data) {
return data.id_type === '居民身份证'
}
},
// 港澳台身份证
{
type: 'v-upload',
label: '港澳台身份证',
model: 'HK_ID_CARD',
attrs: {
action: '/api/enrollment/v1.0/application-materials/attachments/1005/put',
deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
data: { file_type: 'HK_ID_CARD' },
limit: 1
},
rules: [{ type: 'array', required: true, message: '请上传港澳台身份证', trigger: 'change' }],
isShow(data) {
return data.id_type === '港澳台身份证'
}
},
// 护照
{
type: 'v-upload',
label: '护照',
model: 'PASSPORT',
attrs: {
action: '/api/enrollment/v1.0/application-materials/attachments/1005/put',
deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
data: { file_type: 'PASSPORT' },
limit: 1
},
rules: [{ type: 'array', required: true, message: '请上传护照', trigger: 'change' }],
isShow(data) {
return data.id_type === '护照'
}
},
// 其他证件
{
type: 'v-upload',
label: '其他证件',
model: 'OTHER_ID_CARD_PHOTO',
attrs: {
action: '/api/enrollment/v1.0/application-materials/attachments/1005/put',
deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
data: { file_type: 'OTHER_ID_CARD_PHOTO' },
limit: 1
},
rules: [{ type: 'array', required: true, message: '请上传其他证件', trigger: 'change' }],
isShow(data) {
return data.id_type === '其他'
}
},
// // 身份证照片(背面)
// {
// type: 'v-upload',
// label: '身份证人像面',
// model: 'ID_CARD_BACK',
// attrs: {
// action: '/api/enrollment/v1.0/application-materials/attachments/1005/put',
// deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
// data: { file_type: 'ID_CARD_BACK' },
// limit: 1,
// image: 'https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/cu/id_card_back.png'
// },
// rules: [{ type: 'array', required: true, message: '请上传身份证照片人像面', trigger: 'change' }],
// isShow(data) {
// return data.id_type === '居民身份证'
// }
// },
// // 身份证照片(正面）
// {
// type: 'v-upload',
// label: '身份证国徽面',
// model: 'ID_CARD_FRONT',
// attrs: {
// action: '/api/enrollment/v1.0/application-materials/attachments/1005/put',
// deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
// data: { file_type: 'ID_CARD_FRONT' },
// limit: 1,
// image: 'https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/cu/id_card_front.png'
// },
// rules: [{ type: 'array', required: true, message: '请上传身份证照片国徽面', trigger: 'change' }],
// isShow(data) {
// return data.id_type === '居民身份证'
// }
// },
// // 港澳台身份证
// {
// type: 'v-upload',
// label: '港澳台身份证',
// model: 'HK_ID_CARD',
// attrs: {
// action: '/api/enrollment/v1.0/application-materials/attachments/1005/put',
// deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
// data: { file_type: 'HK_ID_CARD' },
// limit: 1
// },
// rules: [{ type: 'array', required: true, message: '请上传港澳台身份证', trigger: 'change' }],
// isShow(data) {
// return data.id_type === '港澳台身份证'
// }
// },
// // 护照
// {
// type: 'v-upload',
// label: '护照',
// model: 'PASSPORT',
// attrs: {
// action: '/api/enrollment/v1.0/application-materials/attachments/1005/put',
// deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
// data: { file_type: 'PASSPORT' },
// limit: 1
// },
// rules: [{ type: 'array', required: true, message: '请上传护照', trigger: 'change' }],
// isShow(data) {
// return data.id_type === '护照'
// }
// },
// // 其他证件
// {
// type: 'v-upload',
// label: '其他证件',
// model: 'OTHER_ID_CARD_PHOTO',
// attrs: {
// action: '/api/enrollment/v1.0/application-materials/attachments/1005/put',
// deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
// data: { file_type: 'OTHER_ID_CARD_PHOTO' },
// limit: 1
// },
// rules: [{ type: 'array', required: true, message: '请上传其他证件', trigger: 'change' }],
// isShow(data) {
// return data.id_type === '其他'
// }
// },
{
type: 'v-input',
label: '证件号码',
model: 'id_number',
attrs: { disabled: false, placeholder: '请输入证件号码' },
attrs: { disabled: true, placeholder: '请输入证件号码' },
rules: [{ required: true, message: '请输入证件号码', trigger: 'blur' }]
},
{
......
examples/ciis/application/form/info/training.js
浏览文件 @ 5ca62e95
......@@ -5,9 +5,13 @@
export default {
id: 'application_info_training',
title: '所受培训',
visible() {
return this.tabActive !== 'application_info_first'
},
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
this.form.options.disabled = data.data.material.submission_status === 'SUBMITTED'
let list = data.data.material.trainings || []
list = list.map(item => {
const { start_date: startDate, end_date: endDate } = item
......@@ -35,8 +39,8 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
prev: { to: { query: { active: 'application_info', tab: 'application_info_answer' } } },
next: { to: { query: { active: 'application_info', tab: 'application_info_honor' } } },
hasAdd: true,
options: {
labelWidth: '140px'
......
examples/ciis/application/form/tjx.js
浏览文件 @ 5ca62e95
......@@ -5,10 +5,13 @@
export default {
id: 'application_tjx',
title: '推荐信',
required: true,
visible() {
return this.tabActive !== 'application_info_first'
},
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
// this.form.options.disabled = data.data.material.submission_status === 'SUBMITTED'
let list = data.data.material.reco_letters || []
return list.length ? list : [{}, {}, {}]
}
......@@ -29,9 +32,43 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
prev: { to: { query: { active: 'application_info', tab: 'application_info_honor' } } },
next: { to: { query: { active: 'application_wfzzm' } } },
hasAdd: true,
renderAside(h, data, _that) {
// console.log(this, _that)
_that.$slots.aside = (
<div>
<p style='color:#33C011;'>推荐人已完成</p>
<el-button
type='primary'
onClick={() => {
console.log(this, data)
}}>
再次邀请
</el-button>
<el-button type='primary'>更换推荐人</el-button>
</div>
)
},
aside: {
prepend: '<p style="color:#33C011;">推荐人已完成</p>',
buttons: [
{
text: '再次邀请',
canShow() {},
onClick(data) {
console.log(data, this)
}
},
{
text: '更换推荐人',
onClick(data) {
console.log(data, this)
}
}
]
},
options: {
labelWidth: '140px'
},
......
examples/ciis/application/form/wfzzm.js
浏览文件 @ 5ca62e95
export default {
id: 'application_wfzzm',
title: '无犯罪证明',
visible() {
return this.tabActive !== 'application_info_first'
},
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
this.form.options.disabled = data.data.material.submission_status === 'SUBMITTED'
const { attachments = [] } = data.data.material
const NO_CRIMINAL_CERT = attachments.filter(item => {
return item.file_type_id === 'NO_CRIMINAL_CERT'
......@@ -12,8 +16,8 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
prev: { to: { query: { active: 'application_tjx' } } },
next: { to: { query: { active: 'application_declare' } } },
hasButton: false,
options: {},
items: [
......
examples/ciis/application/index.vue
浏览文件 @ 5ca62e95
......@@ -2,11 +2,13 @@
<app-layout>
<vue-form
:menus="menus"
@change="handleChange"
:default-active="currentActive"
:tab-active="tabActive"
@page-change="handlePageChange"
@tab-change="handleTabChange"
@success="handleSuccess"
@error="handleError"
@back="$router.push('/my')"
:default-active="currentActive"
@prev="handlePrev"
@next="handleNext"
>
......@@ -35,7 +37,8 @@ export default {
return {
visible: false,
menus: [menus],
currentActive: 'application_info',
currentActive: 'application_info_profile',
tabActive: 'application_info_profile',
dialogVisible: false
}
},
......@@ -44,30 +47,34 @@ export default {
immediate: true,
handler(route) {
const { query = {} } = route
this.currentActive = query.active || 'application_info'
this.currentActive = query.active || 'application_info_profile'
this.tabActive = query.tab || 'application_info_profile'
}
}
},
methods: {
handleChange(value) {
handlePageChange(value) {
this.currentActive = value
this.$router.push({ path: this.$route.path, query: { active: value } })
console.log('页面切换了', value)
},
handleTabChange(value) {
this.tabActive = value
const query = Object.assign({}, this.$route.query, { tab: value })
this.$router.push({ query })
},
handleSuccess(data) {
console.log('提交成功了', data)
this.$message({ type: 'success', message: data.message })
// this.getProgress()
},
handleError(data) {
console.log('提交失败了', data)
this.$message({ type: 'error', message: data.message })
},
handlePrev() {
console.log('prev')
handlePrev(to) {
this.$router.push(to)
},
handleNext() {
console.log('next')
handleNext(to) {
this.$router.push(to)
}
}
}
......
package.json
浏览文件 @ 5ca62e95
{
"name": "@ezijing/vue-form",
"version": "0.2.3",
"version": "0.2.4",
"private": false,
"description": "基于Vue Element-UI的表单",
"scripts": {
......@@ -15,6 +15,8 @@
"README.md"
],
"dependencies": {
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"@vue/babel-preset-jsx": "^1.1.2",
"axios": "^0.20.0",
"core-js": "^3.6.5",
"element-ui": "^2.13.2",
......@@ -32,8 +34,8 @@
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11",
"vue-router": "^3.4.6"
"vue-router": "^3.4.6",
"vue-template-compiler": "^2.6.11"
},
"keywords": [
"element-ui",
......
src/VueForm.vue
浏览文件 @ 5ca62e95
......@@ -11,7 +11,7 @@
<slot>
<!-- 选项卡 -->
<template v-if="page.tabs">
<v-card-tabs v-bind="page" v-on="$listeners"></v-card-tabs>
<v-card-tabs :default-active="tabActive" v-bind="page" v-on="$listeners"></v-card-tabs>
</template>
<template v-else>
......@@ -44,7 +44,8 @@ export default {
return []
}
},
defaultActive: { type: String }
defaultActive: { type: String },
tabActive: { type: String }
},
components: { VMenu, VCard, VCardTabs, VFormPane },
data() {
......@@ -52,6 +53,11 @@ export default {
activeId: this.defaultActive
}
},
watch: {
defaultActive(value) {
this.activeId = value
}
},
computed: {
page() {
return this.getDeepItem(this.menus, this.activeId)
......@@ -73,7 +79,7 @@ export default {
},
onSelect(id) {
this.activeId = id
this.$emit('change', id)
this.$emit('page-change', id)
}
}
}
......
src/packages/form/src/form-pane.vue
浏览文件 @ 5ca62e95
<template>
<div class="v-form-pane">
<div class="v-form-pane" ref="formpane">
<template v-if="form.hint">
<div class="v-form-pane__hint" v-html="form.hint"></div>
</template>
......@@ -16,6 +16,10 @@
v-on="$listeners"
ref="form"
></v-form>
<template v-if="form.renderAside">
{{ form.renderAside($createElement, item, that) }}
<slot name="aside"></slot>
</template>
<div class="v-form-group__remove" @click="handleRemove(index)">删除</div>
</div>
</template>
......@@ -37,10 +41,17 @@
ref="form"
></v-form>
</template>
<div class="v-form-footer" v-if="currentForm.hasButton">
<!-- <el-button type="primary" size="medium" @click="handlePrev" v-if="form.prev">上一步</el-button> -->
<el-button type="primary" size="medium" @click="handleSubmit">{{ form.submitText || '保存' }}</el-button>
<!-- <el-button type="primary" size="medium" @click="handleNext" v-if="form.next">下一步</el-button> -->
<div class="v-form-footer">
<el-button type="primary" size="medium" @click="handlePrev" v-if="form.prev">上一步</el-button>
<el-button
type="primary"
size="medium"
:disabled="currentForm.options.disabled"
@click="handleSubmit"
v-if="currentForm.hasButton"
>{{ form.submitText || '保存' }}</el-button
>
<el-button type="primary" size="medium" @click="handleNext" v-if="form.next">下一步</el-button>
</div>
</div>
</template>
......@@ -66,7 +77,8 @@ export default {
data() {
const model = this.form.model || (this.form.hasAdd ? [Object.assign({}, this.form.defaultModel)] : {})
return {
model
model,
detail: {}
}
},
computed: {
......@@ -74,7 +86,10 @@ export default {
return Array.isArray(this.model)
},
currentForm() {
return Object.assign({ hasSubmit: true, hasButton: true }, this.form)
return Object.assign({ hasSubmit: true, hasButton: true, options: {} }, this.form)
},
that() {
return this
}
},
methods: {
......@@ -95,26 +110,27 @@ export default {
headers
})
.then(res => {
this.detail = res
// 默认数据设置
if (this.form.hasAdd && Array.isArray(res) && !res.length) {
res.push(Object.assign({}, this.form.defaultModel))
}
if (callback) {
res = callback(res)
res = callback.call(this, res)
}
this.model = res
})
.catch(error => this.$emit('error', error))
},
// 更新
updateData(formData) {
async updateData(formData) {
let { action, headers = {}, data = {}, beforeRequest, callback } = this.update
if (beforeRequest) {
formData = beforeRequest(formData)
}
// 自定义数据和表单数据合并
formData = Object.assign({}, formData, data)
httpRequest
await httpRequest
.post(action, formData, { headers })
.then(res => {
callback && callback(res)
......@@ -127,28 +143,40 @@ export default {
},
// 新增表单
handleAdd() {
if (this.currentForm.options.disabled) {
return
}
this.model.push(Object.assign({}, this.form.defaultModel))
},
// 删除表单
handleRemove(index) {
if (this.currentForm.options.disabled) {
return
}
this.model.splice(index, 1)
},
// 提交
handleSubmit() {
async handleSubmit() {
if (this.currentForm.options.disabled) {
return
}
const form = this.$refs.form
const formCompoents = Array.isArray(form) ? form : [form]
const allPromise = formCompoents.map(form => form.validate())
Promise.all(allPromise).then(() => {
this.updateData(this.model)
await Promise.all(allPromise).then(() => {
return this.updateData(this.model)
})
},
// 上一步
handlePrev() {
this.$emit('prev', this.form.prev)
this.$emit('prev', this.form.prev.to)
},
// 下一步
handleNext() {
this.$emit('next', this.form.next)
async handleNext() {
if (this.form.next.isSubmit) {
await this.handleSubmit()
}
this.$emit('next', this.form.next.to)
}
},
beforeMount() {
......@@ -184,5 +212,8 @@ export default {
margin-top: 20px;
padding: 20px 0;
border-top: 1px solid #f1f1f1;
.el-button + .el-button {
margin-left: 20px;
}
}
</style>
src/packages/layout/src/card-tabs.vue
浏览文件 @ 5ca62e95
......@@ -4,7 +4,7 @@
<i class="el-icon-arrow-left"></i>
<span>{{ backText }}</span>
</div>
<el-tabs type="card" v-model="activeName">
<el-tabs type="card" v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane :lazy="true" :label="tab.title" :name="tab.id" :key="tab.id" v-for="tab in currentTabs">
<template v-slot:label>
{{ tab.title }}
......@@ -22,6 +22,7 @@ import VFormPane from '../../form/src/form-pane'
export default {
name: 'VCardTabs',
props: {
defaultActive: { type: String },
tabs: { type: Array, default: () => [] },
backText: { type: String, default: '返回报名系统' }
},
......@@ -32,20 +33,31 @@ export default {
}
},
watch: {
tabs: {
defaultActive: {
immediate: true,
handler(list) {
const [first] = list
this.activeName = first.id
handler(value) {
this.activeName = value
}
}
// tabs: {
// immediate: true,
// handler(list) {
// const [first] = list
// this.activeName = first.id
// }
// }
},
computed: {
currentTabs() {
return this.tabs.filter(item => {
return Object.prototype.hasOwnProperty.call(item, 'visible') ? item.visible : true
return item.visible === undefined || item.visible.call(this.$parent)
})
}
},
methods: {
handleTabClick() {
this.$emit('tab-change', this.activeName)
}
}
}
</script>
......
src/packages/layout/src/submenu.vue
浏览文件 @ 5ca62e95
......@@ -22,7 +22,7 @@ export default {
computed: {
menus() {
return this.datalist.filter(item => {
return Object.prototype.hasOwnProperty.call(item, 'visible') ? item.visible : true
return item.visible === undefined || item.visible.call(this.$parent.$parent)
})
}
}
......
yarn.lock
浏览文件 @ 5ca62e95
......@@ -1126,8 +1126,8 @@
"@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
version "1.0.0"
resolved "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040"
integrity sha1-BI/leZWNpAj7eosqPsBQtQpmEEA=
resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040"
integrity sha512-6tyf5Cqm4m6v7buITuwS+jHzPlIPxbFzEhXR5JGZpbrvOcp1hiQKckd305/3C7C36wFekNTQSxAtgeM0j0yoUw==
"@vue/babel-helper-vue-transform-on@^1.0.0-rc.2":
version "1.0.0-rc.2"
......@@ -1184,8 +1184,8 @@
"@vue/babel-preset-jsx@^1.1.2":
version "1.1.2"
resolved "https://registry.npm.taobao.org/@vue/babel-preset-jsx/download/@vue/babel-preset-jsx-1.1.2.tgz#2e169eb4c204ea37ca66c2ea85a880bfc99d4f20"
integrity sha1-LhaetMIE6jfKZsLqhaiAv8mdTyA=
resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.1.2.tgz#2e169eb4c204ea37ca66c2ea85a880bfc99d4f20"
integrity sha512-zDpVnFpeC9YXmvGIDSsKNdL7qCG2rA3gjywLYHPCKDT10erjxF4U+6ay9X6TW5fl4GsDlJp9bVfAVQAAVzxxvQ==
dependencies:
"@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
"@vue/babel-plugin-transform-vue-jsx" "^1.1.2"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论