Skip to content

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

update

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