Skip to content

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

update

上级 18b24c22
显示空白字符变更
内嵌 并排
正在显示 包含 940 行增加 和 2198 行删除
examples/App.vue
浏览文件 @ c69ed42d
<template>
<div id="app">
<vue-form
:menus="menus"
@change="handleChange"
@success="handleSuccess"
@error="handleError"
:default-active="currentActive"
>
<!-- 最终检查 -->
<template v-if="currentActive === 'final'">
<table border="1">
<template v-for="(item, index) in submenu">
<tr :key="index" v-if="index < 7">
<td>{{ index }}{{ item.title }}</td>
<td>{{ item.progress ? '已完成' : '未完成' }}</td>
</tr>
</template>
</table>
</template>
</vue-form>
<application></application>
</div>
</template>
<script>
import axios from 'axios'
// import kelleyForm from './kelley-form'
// import sofiaForm from './sofia-form'
function url2Json(url) {
const str = url.split('?').pop()
return str.split('&').reduce((result, item) => {
const [key, value] = item.split('=')
result[key] = value
return result
}, {})
}
const query = url2Json(location.href)
const projectId = query.projectId || '1000'
const menus = [
{
id: '0',
title: '报名申请',
children: [
{
id: '0-0',
title: '个人资料',
tabs: [
{
id: '1',
title: '个人资料',
required: true,
form: {}
},
{
id: '2',
title: '教育背景',
required: true,
form: {}
},
{
id: '3',
title: '工作经验',
required: true,
form: {}
},
{
id: '4',
title: '学习目的',
required: true,
form: {}
},
{
id: '5',
title: '所受培训',
form: {}
},
{
id: '6',
title: '荣誉奖励',
form: {}
}
]
},
{
id: '0-1',
title: '推荐信',
form: {}
}
]
}
]
<script>
import Application from './ciis/application'
export default {
name: 'app',
data() {
return {
projectId,
currentActive: query.active || 'download',
menus
// menus: projectId === '1000' ? [...sofiaForm, ...menus] : kelleyForm
}
},
computed: {
submenu() {
return this.menus[0].children
}
},
methods: {
handleChange(value) {
this.currentActive = value
console.log('页面切换了', value)
},
handleSuccess(data) {
console.log('提交成功了', data)
this.getProgress()
},
handleError(error) {
console.log(error)
},
// 获取进度
getProgress() {
axios.get(`/zws/v1/enrollment/submissions?project_id=${this.projectId}`).then(response => {
let children = this.menus[0].children
const submitProgress = response.data.submit_progress
children.forEach(item => {
let progress = 0
console.log(submitProgress)
if (Object.prototype.hasOwnProperty.call(submitProgress, item.id)) {
progress = submitProgress[item.id] === 0.2 ? 100 : 0
}
item.progress = progress
})
})
}
},
beforeMount() {
// this.getProgress()
}
components: { Application }
}
</script>
......@@ -148,4 +19,8 @@ export default {
body {
background: #f5f6fa;
}
#app {
width: 1000px;
margin: 0 auto;
}
</style>
examples/ciis/admission/xy.js → examples/ciis/admission/form/xy.js
浏览文件 @ c69ed42d
......@@ -24,8 +24,11 @@ export default {
deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
data: { file_type: 'ADMISSION_AGREEMENT' }
},
prepend: '2寸照片：以电子版的形式上传文件',
append: '注意事项：需要将证书原件扫描或拍照后提交，请确保证书内容清晰可辨。'
prepend: `
<p>第一步：点击下载按键获取入学协议</p>
<p><a href="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/cu/%E5%85%A5%E5%AD%A6%E5%8D%8F%E8%AE%AE%EF%BC%88%E8%AF%B7%E4%B8%8B%E8%BD%BD%E6%A8%A1%E6%9D%BF%E5%A1%AB%E5%86%99%E5%90%8E%E4%B8%8A%E4%BC%A0%E7%85%A7%E7%89%87%EF%BC%89.docx" target="_blank" download>下载入学协议</a></p>
<p>第二步：申请者可将签字后的入学协议原件扫描或拍照后提交。学员应仔细阅读《入学协议》以及课程介绍，如对入学协议或课程有异议，请第一时间与课程顾问咨询确认。请用A4纸打印后，在入学协议上签上姓名和日期，内容需显示完整、格式整齐、字迹清晰可辨。点击下方按钮，上传文件</p>
`
}
]
}
......
examples/ciis/App.vue → examples/ciis/admission/index.vue
浏览文件 @ c69ed42d
<template>
<div id="app">
<app-layout>
<vue-form
:menus="menus"
@change="handleChange"
@success="handleSuccess"
@error="handleError"
@back="$router.push('/my')"
:default-active="currentActive"
>
<template v-slot:content v-if="currentActive === 'application_pay'"> 自定义缴报名费 </template>
</vue-form>
</div>
</app-layout>
</template>
<script>
import axios from 'axios'
import { Message } from 'element-ui'
// 报名申请
import application from './application'
// 申请面试
import interview from './interview'
// 入学办理
import admission from './admission'
const menus = [application, interview, admission]
<script>
import AppLayout from '../layout.vue'
import menus from './form'
export default {
name: 'app',
components: { AppLayout },
data() {
return {
projectId: '1005',
currentActive: 'application_info',
menus
menus: [menus],
currentActive: 'admission_xy'
}
},
watch: {
$route: {
immediate: true,
handler(route) {
const { query = {} } = route
this.currentActive = query.active || 'admission_xy'
}
}
},
methods: {
handleChange(value) {
this.currentActive = value
this.$router.push({ path: this.$route.path, query: { active: value } })
console.log('页面切换了', value)
},
handleSuccess(data) {
console.log('提交成功了', data)
Message({ type: 'success', message: data.message })
this.$message({ type: 'success', message: data.message })
// this.getProgress()
},
handleError(data) {
console.log('提交失败了', data)
Message({ type: 'error', message: data.message })
},
// 获取进度
getProgress() {
axios.get(`/zws/v1/enrollment/submissions?project_id=${this.projectId}`).then(response => {
let children = this.menus[0].children
const submitProgress = response.data.submit_progress
children.forEach(item => {
let progress = 0
console.log(submitProgress)
if (Object.prototype.hasOwnProperty.call(submitProgress, item.id)) {
progress = submitProgress[item.id] === 0.2 ? 100 : 0
this.$message({ type: 'error', message: data.message })
}
item.progress = progress
})
})
}
},
beforeMount() {
// this.getProgress()
}
}
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
body {
background: #f5f6fa;
}
#app {
width: 1000px;
margin: 40px auto;
}
</style>
examples/ciis/application/index.js → examples/ciis/application/form/index.js
浏览文件 @ c69ed42d
......@@ -6,5 +6,5 @@ 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: false }]
}
examples/ciis/application/info.js → examples/ciis/application/form/info.js
浏览文件 @ c69ed42d
......@@ -9,5 +9,10 @@ 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]
}
examples/ciis/application/info/answer.js → examples/ciis/application/form/info/answer.js
浏览文件 @ c69ed42d
......@@ -13,12 +13,12 @@ export default {
const [first = {}, second = {}] = answers
return {
qid1: first.qid || '1',
question1:
first.question || '您为什么要申请美国印第安纳大学Kelley商学院金融学硕士项目？（200字以上，1000字以内）',
question1: first.question || '个人描述（60-1000字）中文或者英文',
answer1: first.answer,
qid2: second.qid || '2',
question2:
second.question || '您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（200字以上，1000字以内）',
second.question ||
'申请紫荆教育康博斯威尔大学教育硕士的原因？以及您的职业或个人发展的预期目标（60-1000字）中文或者英文',
answer2: second.answer
}
}
......@@ -35,6 +35,8 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
items: [
{
type: 'v-input',
......
examples/ciis/application/info/career.js → examples/ciis/application/form/info/career.js
浏览文件 @ c69ed42d
......@@ -9,14 +9,15 @@ export default {
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
const { careers = [] } = data.data.material
return careers.map(item => {
let list = data.data.material.careers || []
list = list.map(item => {
const { start_date: startDate, end_date: endDate } = item
if (startDate) {
item.dates = [startDate, endDate]
}
return item
})
return list.length ? list : [{}]
}
},
update: {
......@@ -43,6 +44,8 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
hasAdd: true,
options: {
labelWidth: '140px'
......@@ -57,9 +60,9 @@ export default {
rangeSeparator: '至',
startPlaceholder: '请选择开始时间',
endPlaceholder: '请选择结束时间',
valueFormat: 'yyyyMM'
valueFormat: 'yyyy-MM'
},
rules: [{ required: true, message: '请选择教育时间', trigger: 'blur' }]
rules: [{ required: true, message: '请选择工作时间', trigger: 'blur' }]
},
{
type: 'v-input',
......
examples/ciis/application/info/education.js → examples/ciis/application/form/info/education.js
浏览文件 @ c69ed42d
......@@ -9,14 +9,15 @@ export default {
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
const { educations = [] } = data.data.material
return educations.map(item => {
let list = data.data.material.educations || []
list = list.map(item => {
const { start_date: startDate, end_date: endDate } = item
if (startDate) {
item.dates = [startDate, endDate]
}
return item
})
return list.length ? list : [{}]
}
},
update: {
......@@ -26,15 +27,7 @@ export default {
const [startDate, endDate] = item.dates
item.start_date = startDate
item.end_date = endDate
return [
'start_date',
'end_date',
'school_name_cn',
'school_country',
'school_city',
'major_cn',
'degree'
].reduce((result, key) => {
return ['start_date', 'end_date', 'school_name_cn', 'major_cn', 'degree'].reduce((result, key) => {
result[key] = item[key]
return result
}, {})
......@@ -43,6 +36,8 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
hasAdd: true,
options: {
labelWidth: '140px'
......@@ -57,7 +52,7 @@ export default {
rangeSeparator: '至',
startPlaceholder: '请选择开始时间',
endPlaceholder: '请选择结束时间',
valueFormat: 'yyyyMM'
valueFormat: 'yyyy-MM'
},
rules: [{ required: true, message: '请选择教育时间', trigger: 'blur' }]
},
......
examples/ciis/application/info/first.js → examples/ciis/application/form/info/first.js
浏览文件 @ c69ed42d
......@@ -6,6 +6,7 @@ export default {
id: 'application_info_first',
title: '个人信息',
required: true,
visible: true,
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
......@@ -22,7 +23,7 @@ export default {
},
{ ID_CARD_FRONT: [], ID_CARD_BACK: [], HK_ID_CARD: [], PASSPORT: [], OTHER_ID_CARD_PHOTO: [] }
)
return Object.assign({}, { basic_info: basicInfo }, attachment)
return Object.assign({}, basicInfo, attachment)
}
},
update: {
......@@ -36,7 +37,7 @@ export default {
}
},
form: {
// hasButton: false,
next: 'application_info_profile',
options: {
labelWidth: '140px'
},
......@@ -63,34 +64,36 @@ export default {
attrs: { placeholder: '请选择证件类型' },
rules: [{ required: true, message: '请选择证件类型', trigger: 'change' }]
},
// 身份证照片(正面）
// 身份证照片(背面)
{
type: 'v-upload',
label: '身份证照片(正面)',
model: 'ID_CARD_FRONT',
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_FRONT' },
limit: 1
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' }],
rules: [{ type: 'array', required: true, message: '请上传身份证照片人像面', trigger: 'change' }],
isShow(data) {
return data.id_type === '居民身份证'
}
},
// 身份证照片(背面)
// 身份证照片(正面）
{
type: 'v-upload',
label: '身份证照片(背面)',
model: 'ID_CARD_BACK',
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_BACK' },
limit: 1
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' }],
rules: [{ type: 'array', required: true, message: '请上传身份证照片国徽面', trigger: 'change' }],
isShow(data) {
return data.id_type === '居民身份证'
}
......
examples/ciis/application/info/honor.js → examples/ciis/application/form/info/honor.js
浏览文件 @ c69ed42d
......@@ -8,8 +8,8 @@ export default {
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
const { honors = [] } = data.data.material
return honors
let list = data.data.material.honors || []
return list.length ? list : [{}]
}
},
update: {
......@@ -25,6 +25,8 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
hasAdd: true,
options: {
labelWidth: '140px'
......
examples/ciis/application/info/profile.js → examples/ciis/application/form/info/profile.js
浏览文件 @ c69ed42d
......@@ -54,6 +54,8 @@ export default {
}
},
form: {
// prev: 'application_info_profile',
next: 'application_info_education',
options: {
labelWidth: '140px'
},
......@@ -81,34 +83,36 @@ export default {
attrs: { disabled: false, placeholder: '请选择证件类型' },
rules: [{ required: true, message: '请选择证件类型', trigger: 'change' }]
},
// 身份证照片(正面）
// 身份证照片(背面)
{
type: 'v-upload',
label: '身份证照片(正面)',
model: 'ID_CARD_FRONT',
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_FRONT' },
limit: 1
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' }],
rules: [{ type: 'array', required: true, message: '请上传身份证照片人像面', trigger: 'change' }],
isShow(data) {
return data.id_type === '居民身份证'
}
},
// 身份证照片(背面)
// 身份证照片(正面）
{
type: 'v-upload',
label: '身份证照片(背面)',
model: 'ID_CARD_BACK',
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_BACK' },
limit: 1
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' }],
rules: [{ type: 'array', required: true, message: '请上传身份证照片国徽面', trigger: 'change' }],
isShow(data) {
return data.id_type === '居民身份证'
}
......
examples/ciis/application/info/training.js → examples/ciis/application/form/info/training.js
浏览文件 @ c69ed42d
......@@ -8,14 +8,15 @@ export default {
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
const { trainings = [] } = data.data.material
return trainings.map(item => {
let list = data.data.material.trainings || []
list = list.map(item => {
const { start_date: startDate, end_date: endDate } = item
if (startDate) {
item.dates = [startDate, endDate]
}
return item
})
return list.length ? list : [{}]
}
},
update: {
......@@ -34,6 +35,8 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
hasAdd: true,
options: {
labelWidth: '140px'
......@@ -48,7 +51,7 @@ export default {
rangeSeparator: '至',
startPlaceholder: '请选择开始时间',
endPlaceholder: '请选择结束时间',
valueFormat: 'yyyyMM'
valueFormat: 'yyyy-MM'
},
rules: [{ required: true, message: '请选择培训时间', trigger: 'blur' }]
},
......
examples/ciis/application/tjx.js → examples/ciis/application/form/tjx.js
浏览文件 @ c69ed42d
......@@ -9,26 +9,28 @@ export default {
get: {
action: '/api/enrollment/v1.0/application-materials/1005',
callback(data) {
const { reco_letters: recoLetters = [] } = data.data.material
return recoLetters
let list = data.data.material.reco_letters || []
return list.length ? list : [{}, {}, {}]
}
},
update: {
action: '/api/enrollment/v1.0/application-materials/1005/put',
beforeRequest(data) {
const recoLetters = data.map(item => {
return ['provider_name', 'provider_phone_number', 'provider_email', 'provider_relationship'].reduce(
(result, key) => {
result[key] = item[key]
return result
},
{}
)
})
return { reco_letters: recoLetters }
// const recoLetters = data.map(item => {
// return ['provider_name', 'provider_phone_number', 'provider_email', 'provider_relationship'].reduce(
// (result, key) => {
// result[key] = item[key]
// return result
// },
// {}
// )
// })
return { reco_letters: data }
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
hasAdd: true,
options: {
labelWidth: '140px'
......
examples/ciis/application/wfzzm.js → examples/ciis/application/form/wfzzm.js
浏览文件 @ c69ed42d
......@@ -12,6 +12,8 @@ export default {
}
},
form: {
prev: 'application_info_profile',
next: 'application_info_profile',
hasButton: false,
options: {},
items: [
......@@ -22,11 +24,12 @@ export default {
attrs: {
action: '/api/enrollment/v1.0/application-materials/attachments/1005/put',
deleteAction: '/api/enrollment/v1.0/application-materials/attachments/1005/delete',
data: { file_type: 'NO_CRIMINAL_CERT' }
data: { file_type: 'NO_CRIMINAL_CERT' },
limit: 1
},
prepend: `
<p>第一步：点击下载按键获取无犯罪证明模板</p>
<p><a href="https://www.baidu.com" target="_blank" download>下载模板</a></p>
<p><a href="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/pc/cu/%E6%97%A0%E7%8A%AF%E7%BD%AA%E8%AE%B0%E5%BD%95%E8%AF%81%E6%98%8E.docx" target="_blank" download>下载模板</a></p>
<p>第二步：打印文件后填写内容并签字上传至电脑，点击下方按钮上传文件</p>
`
}
......
examples/ciis/application/index.vue
浏览文件 @ c69ed42d
......@@ -5,26 +5,53 @@
@change="handleChange"
@success="handleSuccess"
@error="handleError"
@back="$router.push('/my')"
:default-active="currentActive"
@prev="handlePrev"
@next="handleNext"
>
<template #aside-append v-if="visible">
<el-button @click="dialogVisible = true">预览全部</el-button>
</template>
<!-- 报名缴费 -->
<template #content v-if="currentActive === 'application_pay'">
<!-- <app-pay /> -->
</template>
</vue-form>
<el-dialog title="预览全部" :visible.sync="dialogVisible" width="790px">
<!-- <app-preview /> -->
</el-dialog>
</app-layout>
</template>
<script>
import AppLayout from '../layout.vue'
import menu from './index'
import menus from './form'
// import AppPay from './pay.vue'
// import AppPreview from '../preview.vue'
export default {
components: { AppLayout },
data() {
return {
menu: menu,
currentActive: 'application_info'
visible: false,
menus: [menus],
currentActive: 'application_info',
dialogVisible: false
}
},
watch: {
$route: {
immediate: true,
handler(route) {
const { query = {} } = route
this.currentActive = query.active || 'application_info'
}
}
},
methods: {
handleChange(value) {
this.currentActive = value
this.$router.push({ path: this.$route.path, query: { active: value } })
console.log('页面切换了', value)
},
handleSuccess(data) {
......@@ -35,6 +62,12 @@ export default {
handleError(data) {
console.log('提交失败了', data)
this.$message({ type: 'error', message: data.message })
},
handlePrev() {
console.log('prev')
},
handleNext() {
console.log('next')
}
}
}
......
examples/ciis/application/pay.vue 0 → 100644
浏览文件 @ c69ed42d
<template>
<div class="pay">
<div class="pic">
<img src="../../../assets/images/my_pay_01.png" />
</div>
<div class="pay-hd">
<h1>欢迎您</h1>
<p class="t1">
申请紫荆-康博斯威尔大学蒙台梭利方向教育学硕士项目，本项目的注册费、申请费共计<span>700</span>元，请扫描二维码缴费以完成报名。
</p>
<p class="t1" v-if="isPass">
因面试未通过需重新申请紫荆-康博斯威尔大学蒙台梭利方向教育学硕士项目，本项目的注册费、申请费共计<span>700</span>元，请扫描二维码缴费以完成报名。
</p>
</div>
<div class="qrcode-error" v-if="qrcodeError">
生成二维码失败请刷新<i class="el-icon-refresh-left" @click="refreshQrcode" title="刷新"></i>
</div>
<div class="qrcode" v-else>
<qrcode-vue :value="qrcodeValue" size="100"></qrcode-vue>
<span @click="refreshQrcode">刷新</span>
</div>
<div class="pay-ft">
<p class="t2">注释：再提交700元申请费后，申请人还需上传并提交如下文件。</p>
<p class="t2">①本科学位证书、②本科中、英文成绩单各一份、③个人证件照（2寸、免冠、白底）</p>
<p class="t2">该申请费不退，请慎重缴费！</p>
</div>
<el-dialog
title="报名费缴费成功"
:visible.sync="dialogVisible"
:center="true"
:close-on-click-modal="false"
width="348px"
>
<div class="dialog-pay">
<p>请填写申请面试的材料，材料齐全后<br />招生办老师将给您致电预约面试日期与时间</p>
<div class="icon"><img src="../../../assets/images/icon_success.png" /></div>
</div>
<template #footer>
<el-button type="primary" @click="toInterview">立即预约</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
import * as api from '@/api/my'
export default {
name: 'AppPay',
components: { QrcodeVue },
data() {
return {
isPass: false,
order: { id: '', payment_url: '' },
qrcodeError: false,
dialogVisible: false,
timer: null
}
},
computed: {
// 二维码地址
qrcodeValue() {
return this.order.payment_url
},
// 支付成功
paySuccess() {
return this.order.payment_status === 'SUCCESS'
}
},
methods: {
// 获取报名信息
async getApplication() {
await api.getApplication().then(response => {
const { payment_records: paymentRecords = [] } = response.data.material
if (paymentRecords && paymentRecords.length) {
// 获取支付成功的订单
const orderPaySuccess = paymentRecords.find(item => {
return item.bill_type === 'APPLICATION_FEE' && item.payment_status === 'SUCCESS'
})
if (orderPaySuccess) {
this.order = orderPaySuccess
this.dialogVisible = true
return
}
// 获取最后一个订单
const [lastPayment] = paymentRecords.reverse()
this.order = lastPayment
}
})
},
// 获取订单
async getOrder() {
if (this.paySuccess) {
return
}
await api.getOrder({ payment_method: 'WX_PAY_QR' }).then(response => {
const { data, error, message } = response
this.qrcodeError = error.toString() === '1'
if (error.toString() === '0') {
this.order = data
} else {
this.$message.error(message)
}
})
},
// 刷新二维码
refreshQrcode() {
this.getOrder()
},
// 检查支付状态
async checkPay() {
if (this.paySuccess) {
this.timer && clearInterval(this.timer)
return
}
const userId = window.G.UserInfo.id
await api.checkPay(this.order.id, { user_id: userId }).then(response => {
if (response.data.payment_status === 'SUCCESS') {
this.timer && clearInterval(this.timer)
this.dialogVisible = true
}
})
},
setCheckPayTimer() {
this.timer && clearInterval(this.timer)
this.timer = setInterval(this.checkPay, 3000)
},
// 申请面试
toInterview() {
this.$router.push('/my/interview')
}
},
async mounted() {
await this.getApplication()
await this.getOrder()
this.setCheckPayTimer()
},
destroyed() {
this.timer && clearInterval(this.timer)
}
}
</script>
<style lang="scss" scoped>
.pay {
max-width: 562px;
margin: 0 auto;
}
.pic {
text-align: center;
}
.pay-hd {
h1 {
padding: 10px 0;
font-size: 24px;
font-weight: 500;
color: #222;
line-height: 1;
text-align: center;
}
}
.qrcode {
padding: 20px 0;
text-align: center;
span {
margin-top: 10px;
font-size: 12px;
color: #999;
cursor: pointer;
}
}
.qrcode-error {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100px;
height: 100px;
padding: 10px;
margin: 20px auto;
color: var(--main-color);
border-style: dashed;
border-width: 1px;
border-color: var(--main-color);
box-sizing: border-box;
text-align: center;
i {
margin-top: 10px;
cursor: pointer;
}
}
.t1 {
font-size: 14px;
color: #303030;
line-height: 20px;
text-align: center;
span {
color: #ffa448;
}
}
.t2 {
font-size: 12px;
color: #999;
line-height: 20px;
}
.dialog-pay {
text-align: center;
p {
color: #262626;
line-height: 20px;
}
.icon {
margin-top: 20px;
}
}
</style>
examples/ciis/interview/index.vue 0 → 100644
浏览文件 @ c69ed42d
<template>
<app-layout>
<vue-form
:menus="menus"
@change="handleChange"
@success="handleSuccess"
@error="handleError"
@back="$router.push('/my')"
:default-active="currentActive"
>
</vue-form>
</app-layout>
</template>
<script>
import AppLayout from '../layout.vue'
import menus from './form'
export default {
components: { AppLayout },
data() {
return {
menus: [menus],
currentActive: 'interview_byz'
}
},
watch: {
$route: {
immediate: true,
handler(route) {
const { query = {} } = route
this.currentActive = query.active || 'interview_byz'
}
}
},
methods: {
handleChange(value) {
this.currentActive = value
this.$router.push({ path: this.$route.path, query: { active: value } })
console.log('页面切换了', value)
},
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 })
}
}
}
</script>
examples/ciis/layout.vue 0 → 100644
浏览文件 @ c69ed42d
<template>
<div class="layout">
<div class="layout-hd">
<slot name="header">
<h1 class="title">在线报名</h1>
</slot>
</div>
<div class="layout-bd">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {},
data() {
return {}
}
}
</script>
<style lang="scss" scoped>
.layout {
width: 1000px;
margin: 0 auto;
margin-top: 120px;
}
.layout-hd {
.title {
padding: 20px 0;
font-size: 18px;
line-height: 1;
color: var(--main-color);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--main-color);
}
}
.layout-bd {
margin: 20px 0;
}
::v-deep .v-layout-aside {
min-height: 410px;
}
</style>
examples/ciis/preview.vue 0 → 100644
浏览文件 @ c69ed42d
<template>
<div class="preview" v-loading="loading">
<template v-if="!loading">
<div class="preview-hd">
<el-steps align-center :active="options.length">
<template v-for="item in options">
<el-step
:title="item.title"
:status="progress.FILLING[item.code].progress === 1 ? 'success' : 'error'"
:key="item.code"
></el-step>
</template>
</el-steps>
</div>
<div class="preivew-bd">
<div
class="preview-item"
v-for="item in options"
:key="item.code"
:class="progress.FILLING[item.code].progress === 1 ? 'is-success' : 'is-error'"
>
<div class="preview-item-hd">
<div class="title">
{{ item.title }}
<template v-if="progress.FILLING[item.code].progress === 1">（已完善）</template>
<template v-else>（待完善）</template>
</div>
<div class="line"></div>
<el-button plain size="small">编辑</el-button>
</div>
<div class="preview-item-bd">
<template v-if="item.computed">
<div v-html="item.computed(material[item.code])"></div>
</template>
<template v-else-if="item.isMultiple">
<div class="group" v-for="(data, index) in material[item.code]" :key="index">
<dl v-for="subitem in item.items" :key="subitem.code">
<dt>{{ subitem.label }}：</dt>
<dd>
<template v-if="subitem.computed">
<div v-html="subitem.computed(data)"></div>
</template>
<template v-else>{{ data[subitem.code] }}</template>
</dd>
</dl>
</div>
</template>
<template v-else>
<div class="group">
<dl v-for="subitem in item.items" :key="subitem.code">
<dt>{{ subitem.label }}：</dt>
<dd>
<template v-if="subitem.computed">
<div v-html="subitem.computed(material[item.code])"></div>
</template>
<template v-else>{{ material[item.code][subitem.code] }}</template>
</dd>
</dl>
</div>
</template>
</div>
</div>
</div>
</template>
</div>
</template>
<script>
import * as api from '@/api/my'
// 行业类别
const industryList = [
{ label: '互联网/电子商务', value: '1 ' },
{ label: '基金/证券/期货/投资', value: '2 ' },
{ label: '保险', value: '3 ' },
{ label: '银行', value: '4 ' },
{ label: '信托/担保/拍卖/典当', value: '5 ' },
{ label: '计算机软件', value: '6 ' },
{ label: 'IT服务(系统/数据/维护)', value: '7 ' },
{ label: '电子技术/半导体/集成电路', value: '8 ' },
{ label: '计算机硬件', value: '9 ' },
{ label: '通信/电信/网络设备', value: '10' },
{ label: '通信/电信运营、增值服务', value: '11' },
{ label: '网络游戏', value: '12' },
{ label: '房地产/建筑/建材/工程', value: '13' },
{ label: '家居/室内设计/装饰装潢', value: '14' },
{ label: '物业管理/商业中心', value: '15' },
{ label: '专业服务/咨询(财会/法律/人力资源等)', value: '16' },
{ label: '广告/会展/公关', value: '17' },
{ label: '中介服务', value: '18' },
{ label: '检验/检测/认证', value: '19' },
{ label: '外包服务', value: '20' },
{ label: '快速消费品（食品/饮料/烟酒/日化）', value: '21' },
{ label: '耐用消费品（服饰/纺织/皮革/家具/家电）', value: '22' },
{ label: '贸易/进出口', value: '23' },
{ label: '零售/批发', value: '24' },
{ label: '租赁服务', value: '25' },
{ label: '教育/培训/院校', value: '26' },
{ label: '礼品/玩具/工艺美术/收藏品/奢侈品', value: '27' },
{ label: '汽车/摩托车', value: '28' },
{ label: '大型设备/机电设备/重工业', value: '29' },
{ label: '加工制造（原料加工/模具）', value: '30' },
{ label: '仪器仪表及工业自动化', value: '31' },
{ label: '印刷/包装/造纸', value: '32' },
{ label: '办公用品及设备', value: '33' },
{ label: '医药/生物工程', value: '34' },
{ label: '医疗设备/器械', value: '35' },
{ label: '航空/航天研究与制造', value: '36' },
{ label: '交通/运输,物流/仓储', value: '37' },
{ label: '医疗/护理/美容/保健/卫生服务', value: '38' },
{ label: '酒店/餐饮,旅游/度假,媒体/出版/影视/文化传播', value: '39' },
{ label: '娱乐/体育/休闲', value: '40' },
{ label: '能源/矿产/采掘/冶炼', value: '41' },
{ label: '石油/石化/化工,电气/电力/水利', value: '42' },
{ label: '环保', value: '43' },
{ label: '政府/公共事业/非盈利机构', value: '44' },
{ label: '学术/科研,农/林/牧/渔跨领域经营', value: '45' },
{ label: '其他', value: '90' }
]
export default {
name: 'Preview',
data() {
return {
loading: false,
material: {},
progress: {},
options: [
{
title: '个人资料',
code: 'basic_info',
items: [
{ label: '姓名', code: 'real_name_cn' },
{
label: '现居住城市',
code: 'address_city',
computed(data) {
return `${data.address_province}-${data.address_city}`
}
},
{ label: '证件类型', code: 'id_type' },
{ label: '证件号码', code: 'id_number' },
{ label: '手机', code: 'phone_number' },
{ label: '邮箱', code: 'email' },
{ label: '性别', code: 'gender' },
{ label: '国籍', code: 'nationality' },
{ label: '生日', code: 'birthday' },
{ label: '微信号', code: 'we_chat_account' },
{ label: '邮寄地址', code: 'mailing_address' },
{ label: '紧急联系人', code: 'emergency_contact_name' },
{ label: '紧急联系人电话', code: 'emergency_contacts_phone' }
]
},
{
title: '教育背景',
code: 'educations',
isMultiple: true,
items: [
{
label: '教育时间',
code: 'start_date',
computed(data) {
return `${data.start_date}至${data.end_date}`
}
},
{ label: '专业名称', code: 'major_cn' },
{ label: '学校名称', code: 'school_name_cn' },
{ label: '学历/学位', code: 'degree' }
]
},
{
title: '工作经验',
code: 'careers',
isMultiple: true,
items: [
{
label: '工作时间',
code: 'start_date',
computed(data) {
return `${data.start_date}至${data.end_date}`
}
},
{ label: '工作单位', code: 'company_name_cn' },
{
label: '行业类别',
code: 'industry',
computed(data) {
const found = industryList.find(item => item.value === data.industry)
return found.label
}
},
{ label: '工作部门', code: 'dept_cn' },
{ label: '工作职位', code: 'position_cn' },
{ label: '工作描述', code: 'job_desc_cn' }
]
},
{
title: '学习目的',
code: 'answers',
computed(data) {
const result = data.map(item => {
return `<dl><dt>${item.question}</dt><dd>${item.answer}</dd></dl>`
})
return `<div class="answers">${result.join('')}</div>`
}
},
{
title: '所受培训',
code: 'trainings',
isMultiple: true,
items: [
{
label: '培训时间',
code: 'start_date',
computed(data) {
return `${data.start_date}至${data.end_date}`
}
},
{ label: '培训机构', code: 'institution_cn' },
{ label: '课程名称', code: 'course_cn' }
]
},
{
title: '荣誉奖励',
code: 'honors',
isMultiple: true,
items: [
{ label: '获取时间', code: 'time' },
{ label: '荣誉奖励', code: 'title' },
{ label: '证书颁发机构', code: 'institution_cn' }
]
},
{
title: '推荐信',
code: 'reco_letters',
isMultiple: true,
items: [
{ label: '推荐人姓名', code: 'provider_name' },
{ label: '推荐人电话', code: 'provider_phone_number' },
{ label: '推荐人邮箱', code: 'provider_email' },
{ label: '与推荐人关系', code: 'provider_relationship' }
]
},
{
title: '无犯罪证明',
code: 'attachments',
computed(data) {
const found = data.find(item => item.file_type_id === 'NO_CRIMINAL_CERT')
return found ? `<img src="${found.oss_sign_url}" style="max-width:300px;margin:10px 0;">` : ''
}
}
]
}
},
methods: {
// 获取报名信息
getApplication() {
this.loading = true
api.getApplication().then(response => {
const { data, error, message } = response
if (error.toString() === '0') {
const { material, progress } = data
this.material = material
this.progress = progress
} else {
this.$message.error(message)
}
this.loading = false
})
}
},
beforeMount() {
this.getApplication()
}
}
</script>
<style lang="scss" scoped>
.preview {
max-width: 750px;
min-height: 80vh;
padding: 20px;
margin: 0 auto;
background-color: #fff;
}
.preview-hd {
padding: 20px 0;
::v-deep .el-step__title {
font-size: 12px;
}
}
.preview-item {
margin: 20px;
}
.is-success {
color: #37a912;
.line {
background: linear-gradient(90deg, #37a912 0%, rgba(255, 218, 218, 0) 100%);
}
}
.is-error {
color: #da2a56;
.line {
background: linear-gradient(90deg, #da2a56 0%, rgba(255, 218, 218, 0) 100%);
}
}
.preview-item-hd {
display: flex;
align-items: center;
.title {
font-size: 18px;
font-weight: 600;
}
.line {
flex: 1;
height: 4px;
margin: 0 20px;
}
}
.preview-item-bd {
.group {
padding: 20px 0;
display: flex;
flex-wrap: wrap;
}
.group + .group {
border-top: 1px solid #f1f1f1;
}
dl {
flex: 50%;
display: flex;
margin-bottom: 10px;
font-size: 14px;
color: #222;
}
dt {
font-weight: bold;
}
dd {
flex: 1;
}
}
</style>
<style lang="scss">
.preview {
.answers {
padding: 20px 0;
dl {
margin-bottom: 10px;
font-size: 14px;
color: #222;
& + dl {
margin-top: 20px;
}
}
dt {
font-weight: bold;
margin-bottom: 5px;
}
}
}
</style>
examples/kelley-form/answer.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'answer',
title: '学习目的',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/answers?project_id=1001',
callback(data) {
let [first = {}, second = {}] = data
return {
qid1: first.qid || 1,
question1:
first.question ||
'您为什么要申请美国印第安纳大学Kelley商学院金融学硕士项目？（200字以上，1000字以内）',
answer1: first.answer,
qid2: second.qid || 2,
question2:
second.question ||
'您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（200字以上，1000字以内）',
answer2: second.answer
}
}
},
update: {
action: '/zws/v1/enrollment/answers/batch-upload',
data: { project_id: 1001 },
beforeRequest(data) {
return {
records: [
{ qid: data.qid1, question: data.question1, answer: data.answer1 },
{ qid: data.qid2, question: data.question2, answer: data.answer2 }
]
}
}
},
form: {
items: [
{
type: 'input-form',
label:
'您为什么要申请美国印第安纳大学Kelley商学院金融学硕士项目？（200字以上，1000字以内）',
model: 'answer1',
attrs: {
type: 'textarea',
rows: '8',
maxlength: '1000',
'show-word-limit': true
},
rules: [
{
required: true,
message: '请输入',
trigger: 'blur'
},
{
min: 200,
max: 1000,
message: '长度在 200 到 1000 个字符',
trigger: 'blur'
}
]
},
{
type: 'input-form',
label:
'您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（200字以上，1000字以内）',
model: 'answer2',
attrs: {
type: 'textarea',
rows: '8',
maxlength: '1000',
'show-word-limit': true
},
rules: [
{
required: true,
message: '请输入',
trigger: 'blur'
},
{
min: 200,
max: 1000,
message: '长度在 200 到 1000 个字符',
trigger: 'blur'
}
]
}
]
}
}
examples/kelley-form/attachment.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'attachment',
title: '照片/附件',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/attachments?project_id=1001',
callback(data) {
let _data = {
uploadArrs10: [],
uploadArrs22: [],
uploadArrs23: [],
uploadArrs30: [],
uploadArrs31: [],
uploadArrs41: [],
uploadArrs42: [],
uploadArrs50: []
}
data.forEach((item, index) => {
_data['uploadArrs' + item.file_type].push({
url: item.file,
id: item.id,
sso_file_name: item.sso_file_name
})
})
return _data
}
},
form: {
hasButton: false,
options: {
},
items: [
/* 一寸彩色近照 */
{
type: 'upload-form',
label: '一寸彩色近照',
required: true,
model: 'uploadArrs10',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 10,
project_id: 1001
},
attrs: {
multiple: false,
limit: 1
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">申请者需要上传本人半年以内的一寸彩色近照。</p>
<p style="margin: 0;">只需上传一个文件，且照片完整、干净。</p>
<p style="margin: 0;">上传文件仅限“jpg,jpeg,gif,png”格式的图片文件，且文件小于10MB。</p>
</div>
`
},
/* 有效身份证件（正面） */
{
type: 'upload-form',
label: '有效身份证件（正面）',
required: true,
model: 'uploadArrs22',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 22,
project_id: 1001
},
attrs: {
multiple: false,
limit: 1
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">申请者需要将有效身份证件原件扫描或者拍照后提交。</p>
<p style="margin: 0;">请您提供有效身份证件的扫描件，身份证与台港澳居民大陆通行证应包括正反两面扫描件。</p>
<p style="margin: 0;">只上传一个文件，多份文件需合并到一个文件后打印出来检查无误后再上传。</p>
<p style="margin: 0;">上传文件仅限“jpg,jpeg,gif,png”格式，文件小于10MB。</p>
</div>
`
},
/* 有效身份证件（反面） */
{
type: 'upload-form',
label: '有效身份证件（反面）',
required: true,
model: 'uploadArrs23',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 23,
project_id: 1001
},
attrs: {
multiple: false,
limit: 1
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">申请者需要将有效身份证件原件扫描或者拍照后提交。</p>
<p style="margin: 0;">请您提供有效身份证件的扫描件，身份证与台港澳居民大陆通行证应包括正反两面扫描件。</p>
<p style="margin: 0;">只上传一个文件，多份文件需合并到一个文件后打印出来检查无误后再上传。</p>
<p style="margin: 0;">上传文件仅限“jpg,jpeg,gif,png”格式，文件小于10MB。</p>
</div>
`
},
/* 毕业证书 */
{
type: 'upload-form',
label: '毕业证书',
required: true,
model: 'uploadArrs30',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 30,
project_id: 1001
},
attrs: {
multiple: true
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">申请者需要将本科或以上毕业证书原件扫描或者拍照后提交。</p>
<p style="margin: 0;">可上传多个文件，请确保证书号码清晰可辨。</p>
<p style="margin: 0;">上传文件仅限“jpg,jpeg,png”格式，文件小于10MB。</p>
</div>
`
},
/* 学位证书 */
{
type: 'upload-form',
label: '学位证书',
required: true,
model: 'uploadArrs31',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 31,
project_id: 1001
},
attrs: {
multiple: true
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">申请者需要将学位证书原件扫描或者拍照后提交。</p>
<p style="margin: 0;">可上传多个文件，请确保证书号码清晰可辨。</p>
<p style="margin: 0;">上传文件仅限“jpg,jpeg,png”格式，文件小于10MB。</p>
</div>
`
},
/* 英文简历 */
{
type: 'upload-form',
label: '英文简历',
required: true,
model: 'uploadArrs50',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 50,
project_id: 1001
},
attrs: {
multiple: true
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">请下载填写英文简历模板后上传,<a href="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/public/cf036097fe48430b24747bd3a1f7e0fc.docx"></a></p>
<p style="margin: 0;">请将英文简历填写完存为"pdf"格式上传，文件小于10MB。</p>
</div>
`
},
/* 托福／雅思成绩单 */
{
type: 'upload-form',
label: '托福／雅思成绩单',
required: true,
model: 'uploadArrs41',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 41,
project_id: 1001
},
attrs: {
multiple: true
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">托福(TOEFL)／雅思(IELTS)成绩单:如之前考取托福或雅思成绩，请提交官方成绩单扫描件，暂不对有效期进行要求。</p>
<p style="margin: 0;">可上传多个文件，请确保证书号码清晰可辨。</p>
<p style="margin: 0;">上传文件仅限“jpg,gif,png”格式，文件小于10MB。</p>
</div>
`
},
/* 免考托福雅思证明文件 */
{
type: 'upload-form',
label: '免考托福雅思证明文件',
required: true,
model: 'uploadArrs42',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 42,
project_id: 1001
},
attrs: {
multiple: true
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">免考托福雅思证明文件: 可根据有关免考英文测试(托福或雅思)政策，上传符合英文免考要求的以英语为母语国家学位证书或国(境)外学历学位认证。</p>
<p style="margin: 0;">可上传多个文件，请确保证书号码清晰可辨。</p>
<p style="margin: 0;">上传文件仅限“jpg,gif,png”格式，文件小于10MB。</p>
</div>
`
}
]
}
}
examples/kelley-form/career.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'career',
title: '工作经验',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/careers?project_id=1001',
callback(data) {
return data.map(item => {
const { start_date: startDate, end_date: endDate } = item
if (startDate) {
item.dates = [startDate + '', endDate + '']
}
return item
})
}
},
update: {
action: '/zws/v1/enrollment/careers/batch-upload',
data: { project_id: 1001 },
beforeRequest(data) {
const records = data.map(item => {
const [startDate, endDate] = item.dates
item.start_date = startDate
item.end_date = endDate
return [
'start_date',
'end_date',
'company_name_cn',
'industry',
'dept_cn',
'position_cn',
'job_type',
'annual_salary',
'job_desc_cn',
'company_profile'
].reduce((result, key) => {
result[key] = item[key]
return result
}, {})
})
return { records }
}
},
form: {
hasAdd: true,
options: {
labelWidth: '140px'
},
items: [
{
type: 'date-picker-from-to-form',
elemType: 'monthrange',
label: '工作时间',
model: 'dates',
rangeSeparator: '至',
startPlaceholder: '请选择开始时间',
endPlaceholder: '请选择结束时间',
attrs: { 'value-format': 'yyyyMM' },
rules: [{ required: true, message: '请选择教育时间', trigger: 'blur' }]
},
{
type: 'input-form',
label: '工作单位',
model: 'company_name_cn',
placeholder: '请输入工作单位',
rules: [{ required: true, message: '请输入工作单位', trigger: 'blur' }]
},
{
type: 'select-form',
values: [
{ label: '请选择', value: 0 },
{ label: '互联网/电子商务', value: 1 },
{ label: '基金/证券/期货/投资', value: 2 },
{ label: '保险', value: 3 },
{ label: '银行', value: 4 },
{ label: '信托/担保/拍卖/典当', value: 5 },
{ label: '计算机软件', value: 6 },
{ label: 'IT服务(系统/数据/维护)', value: 7 },
{ label: '电子技术/半导体/集成电路', value: 8 },
{ label: '计算机硬件', value: 9 },
{ label: '通信/电信/网络设备', value: 10 },
{ label: '通信/电信运营、增值服务', value: 11 },
{ label: '网络游戏', value: 12 },
{ label: '房地产/建筑/建材/工程', value: 13 },
{ label: '家居/室内设计/装饰装潢', value: 14 },
{ label: '物业管理/商业中心', value: 15 },
{ label: '专业服务/咨询(财会/法律/人力资源等)', value: 16 },
{ label: '广告/会展/公关', value: 17 },
{ label: '中介服务', value: 18 },
{ label: '检验/检测/认证', value: 19 },
{ label: '外包服务', value: 20 },
{ label: '快速消费品（食品/饮料/烟酒/日化）', value: 21 },
{ label: '耐用消费品（服饰/纺织/皮革/家具/家电）', value: 22 },
{ label: '贸易/进出口', value: 23 },
{ label: '零售/批发', value: 24 },
{ label: '租赁服务', value: 25 },
{ label: '教育/培训/院校', value: 26 },
{ label: '礼品/玩具/工艺美术/收藏品/奢侈品', value: 27 },
{ label: '汽车/摩托车', value: 28 },
{ label: '大型设备/机电设备/重工业', value: 29 },
{ label: '加工制造（原料加工/模具）', value: 30 },
{ label: '仪器仪表及工业自动化', value: 31 },
{ label: '印刷/包装/造纸', value: 32 },
{ label: '办公用品及设备', value: 33 },
{ label: '医药/生物工程', value: 34 },
{ label: '医疗设备/器械', value: 35 },
{ label: '航空/航天研究与制造', value: 36 },
{ label: '交通/运输,物流/仓储', value: 37 },
{ label: '医疗/护理/美容/保健/卫生服务', value: 38 },
{ label: '酒店/餐饮,旅游/度假,媒体/出版/影视/文化传播', value: 39 },
{ label: '娱乐/体育/休闲', value: 40 },
{ label: '能源/矿产/采掘/冶炼', value: 41 },
{ label: '石油/石化/化工,电气/电力/水利', value: 42 },
{ label: '环保', value: 43 },
{ label: '政府/公共事业/非盈利机构', value: 44 },
{ label: '学术/科研,农/林/牧/渔跨领域经营', value: 45 },
{ label: '其他', value: 90 }
],
label: '行业类别',
model: 'industry',
rules: [{ required: true, message: '请选择行业类别', trigger: 'change' }]
},
{
type: 'input-form',
label: '工作部门',
model: 'dept_cn',
placeholder: '请输入工作部门',
rules: [{ required: true, message: '请输入工作部门', trigger: 'blur' }]
},
{
type: 'input-form',
label: '工作职位',
model: 'position_cn',
placeholder: '请输入工作职位',
rules: [{ required: true, message: '请输入工作职位', trigger: 'blur' }]
},
{
type: 'select-form',
values: [
{ label: '请选择', value: 0 },
{ label: '高层管理（总经理/副总经理以上级）', value: 1 },
{ label: '高级管理（总助/执行主任/执行总监级）', value: 2 },
{ label: '中级管理（总监/部门经理级）', value: 3 },
{ label: '初级经理（主管/一级经理级）', value: 4 },
{ label: '职员', value: 5 },
{ label: '其他', value: 9 }
],
label: '职位类型',
model: 'job_type',
rules: [{ required: true, message: '请选择职位类型', trigger: 'change' }]
},
{
type: 'input-form',
label: '工作年薪（万元）',
model: 'annual_salary',
placeholder: '请输入工作年薪',
rules: [{ required: true, message: '请输入工作年薪', trigger: 'blur' }]
},
{
type: 'input-form',
label: '工作描述',
model: 'job_desc_cn',
attrs: {
type: 'textarea',
placeholder:
'请详细描述您的职责范围，工作任务以及取得的成绩等，填写文字在100个字以上评定等级，少于不计算，内容越详细，等级越高。（字限3000字以内）',
rows: '8',
maxlength: '3000',
'show-word-limit': true
},
placeholder: '请输入工作描述',
rules: [{ required: true, message: '请输入工作描述', trigger: 'blur' }]
},
{
type: 'input-form',
label: '公司（单位）简介',
model: 'company_profile',
attrs: {
type: 'textarea',
placeholder: '300字左右，包括所属行业在业内的位置，经营时间，业务规模，发展前景等信息',
rows: '4'
},
placeholder: '请输入公司（单位）简介',
rules: [{ required: true, message: '请输入公司（单位）简介', trigger: 'blur' }]
}
]
}
}
examples/kelley-form/declare.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'declare',
title: '本人郑重声明',
update: {
action: '/zws/v1/enrollment/submissions/submit',
data: { project_id: 1001 }
},
form: {
hint:
'我提供的所有报名材料信息皆准确和完整。我同意在需要的情况下提交原件以确认我的报名资格。由于报名材料中的虚假、错误信息或重大遗漏导致不录取或取消学籍的后果由我个人承担。 我理解并同意所有报名材料归紫荆教育所有，无论考生录取与否均不退回。我授权紫荆教育使用报名表中的信息查询本人学习和工作记录。',
model: {
isAgree: []
},
items: [
{
type: 'checkbox-group-form',
label: '',
values: [{ label: '我同意', value: 1 }],
model: 'isAgree',
rules: [
{
required: true,
message: '请勾选',
trigger: 'change'
}
]
}
]
}
}
examples/kelley-form/education.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'education',
title: '教育背景',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/educations?project_id=1001',
callback(data) {
return data.map(item => {
const { start_date: startDate, end_date: endDate } = item
if (startDate) {
item.dates = [startDate + '', endDate + '']
}
return item
})
}
},
update: {
action: '/zws/v1/enrollment/educations/batch-upload',
data: { project_id: 1001 },
beforeRequest(data) {
const records = data.map(item => {
const [startDate, endDate] = item.dates
item.start_date = startDate
item.end_date = endDate
return [
'start_date',
'end_date',
'school_name_cn',
'school_country',
'school_city',
'major_cn',
'degree'
].reduce((result, key) => {
result[key] = item[key]
return result
}, {})
})
return { records }
}
},
form: {
hint: `<div style="color:red;font-size:18px;">请务必如实提供高中以上所有学历学位的详细信息。</div>
<div>按照从最高学历至第一学历的顺序，请您依次填写：博士、硕士、本科、专科，<br>并且填写您获得学位所在学校的国家和城市</div>`,
hasAdd: true,
options: {
labelWidth: '110px'
},
items: [
{
type: 'date-picker-from-to-form',
elemType: 'monthrange',
label: '教育时间',
model: 'dates',
rangeSeparator: '至',
startPlaceholder: '请选择开始时间',
endPlaceholder: '请选择结束时间',
attrs: { 'value-format': 'yyyyMM' },
rules: [{ required: true, message: '请选择教育时间', trigger: 'blur' }]
},
{
type: 'input-form',
label: '学校名称',
model: 'school_name_cn',
rules: [{ required: true, message: '请输入学校名称', trigger: 'blur' }]
},
{
type: 'input-form',
label: '学校所在国家',
model: 'school_country',
rules: [{ required: true, message: '请输入学校所在国家', trigger: 'blur' }]
},
{
type: 'input-form',
label: '学校所在城市',
model: 'school_city',
rules: [{ required: true, message: '请输入学校所在城市', trigger: 'blur' }]
},
{
type: 'input-form',
label: '专业名称',
model: 'major_cn',
rules: [{ required: true, message: '请输入专业名称', trigger: 'blur' }]
},
{
type: 'select-form',
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',
rules: [{ required: true, message: '请选择学历/学位', trigger: 'change' }]
}
]
}
}
examples/kelley-form/honor.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'honor',
title: '荣誉奖励（可选）',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/honors?project_id=1001'
},
update: {
action: '/zws/v1/enrollment/honors/batch-upload',
data: { project_id: 1001 },
beforeRequest(data) {
const records = data.map(item => {
return ['title', 'summary'].reduce((result, key) => {
result[key] = item[key]
return result
}, {})
})
return { records }
}
},
form: {
hasAdd: true,
options: {
labelWidth: '180px'
},
items: [
{
type: 'input-form',
label: '荣誉/奖励',
model: 'title',
placeholder: '请输入荣誉/奖励名称',
rules: [{ required: true, message: '请输入荣誉/奖励', trigger: 'blur' }]
},
{
type: 'input-form',
label: '证书颁发机构及获得时间',
model: 'summary',
rules: [
{
required: true,
message: '请输入证书颁发机构及获得时间',
trigger: 'blur'
}
]
}
]
}
}
examples/kelley-form/index.js deleted 100644 → 0
浏览文件 @ 18b24c22
import profile from './profile'
import education from './education'
import career from './career'
import honor from './honor'
import training from './training'
import answer from './answer'
import attachment from './attachment'
import declare from './declare'
export default [
{
id: 'registerform',
title: '填写报名表',
isActive: true,
hasShadow: true,
children: [
profile,
education,
career,
honor,
training,
answer,
attachment,
declare
]
}
]
examples/kelley-form/profile.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'profile',
title: '个人信息',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/profiles?project_id=1001',
callback(data) {
data.date_of_starting_to_work = data.date_of_starting_to_work + ''
data.city = `${data.address_province + ''}-${data.address_city + ''}`
return data
}
},
update: {
action: '/zws/v1/enrollment/profiles',
data: { project_id: 1001 },
beforeRequest(data) {
let [province, city] = data.city.split('-')
data.address_province = province
data.address_city = city
return [
'real_name_cn',
'real_name_en',
'id_type',
'id_number',
'birthday',
'gender',
'nationality',
'address_province',
'address_city',
'date_of_starting_to_work',
'phone_number',
'email',
'qq_account',
'we_chat_account',
'mailing_address',
'emergency_contact_name',
'emergency_contacts_phone',
'english_level',
'english_score',
'channel'
].reduce((result, key) => {
result[key] = data[key]
return result
}, {})
}
},
form: {
options: {
labelWidth: '150px'
},
items: [
{
type: 'input-form',
label: '姓名',
model: 'real_name_cn',
placeholder: '请输入姓名',
rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
},
{
type: 'input-form',
label: '英文名（姓名全拼）',
model: 'real_name_en',
placeholder: '请输入英文名',
rules: [{ required: true, message: '请输入英文名', trigger: 'blur' }]
},
{
type: 'select-form',
values: [
{ label: '居民身份证', value: 0 },
{ label: '港澳台身份证', value: 1 },
{ label: '护照号', value: 2 },
{ label: '军官证', value: 3 },
{ label: '其他', value: 9 }
],
label: '证件类型',
model: 'id_type',
placeholder: '请选择证件类型',
rules: [
{ required: true, message: '请选择证件类型', trigger: 'change' }
]
},
{
type: 'input-form',
label: '证件号码',
model: 'id_number',
placeholder: '请输入证件号码',
rules: [{ required: true, message: '请输入证件号码', trigger: 'blur' }]
},
{
type: 'date-picker-form',
elemType: 'date',
label: '出生日期',
model: 'birthday',
placeholder: '请选择出生日期',
attrs: { 'value-format': 'yyyy-MM-dd' },
rules: [{ required: true, message: '请选择出生日期', trigger: 'blur' }]
},
{
type: 'radio-group-form',
values: [
{ label: '男', value: 1 },
{ label: '女', value: 2 }
],
label: '性别',
model: 'gender',
rules: [{ required: true, message: '请选择性别', trigger: 'change' }]
},
{
type: 'select-form',
values: [
{ label: '中国', value: 1 },
{ label: '其他国家', value: 9 }
],
label: '国籍',
model: 'nationality',
placeholder: '请选择国籍',
rules: [{ required: true, message: '请选择国籍', trigger: 'blur' }]
},
{
type: 'city-select-form',
label: '现居住城市',
model: 'city',
separator: '-',
rules: [{ required: true, message: '请选择居住城市', trigger: 'blur' }]
},
{
type: 'date-picker-form',
elemType: 'year',
label: '参加工作年份',
model: 'date_of_starting_to_work',
attrs: { 'value-format': 'yyyy' },
placeholder: '请选择参加工作年份',
rules: [
{ required: true, message: '请选择参加工作年份', trigger: 'blur' }
]
},
{
type: 'input-form',
label: '手机号',
model: 'phone_number',
placeholder: '请输入手机号',
rules: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
},
{
type: 'input-form',
label: '邮箱',
model: 'email',
placeholder: '请输入邮箱',
rules: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
hint: '（后续报名信息将发送至此邮箱，请认真填写）'
},
{
type: 'input-form',
label: 'QQ号',
model: 'qq_account',
placeholder: '请输入QQ号',
rules: [{ required: true, message: '请输入QQ号', trigger: 'blur' }]
},
{
type: 'input-form',
label: '微信号',
model: 'we_chat_account',
placeholder: '请输入微信号',
rules: [{ required: true, message: '请输入微信号', trigger: 'blur' }]
},
{
type: 'input-form',
label: '邮寄地址',
model: 'mailing_address',
placeholder: '请输入邮寄地址',
rules: [{ required: true, message: '请输入邮寄地址', trigger: 'blur' }]
},
{
type: 'input-form',
label: '紧急联系人',
model: 'emergency_contact_name',
placeholder: '请输入紧急联系人',
rules: [
{ required: true, message: '请输入紧急联系人', trigger: 'blur' }
]
},
{
type: 'input-form',
label: '紧急联系电话',
model: 'emergency_contacts_phone',
placeholder: '请输入紧急联系电话',
rules: [
{ required: true, message: '请输入紧急联系电话', trigger: 'blur' }
]
},
{
type: 'select-form',
values: [
{ label: '请选择', value: 0 },
{ label: '四级', value: 4 },
{ label: '六级', value: 3 },
{ label: '托福', value: 1 },
{ label: '雅思', value: 2 }
],
label: '英语水平',
model: 'english_level',
rules: [
{ required: true, message: '请选择英语水平', trigger: 'change' }
]
},
{
type: 'input-form',
label: '托福/雅思成绩',
model: 'english_score',
rules: [
{ required: true, message: '请输入托福/雅思成绩', trigger: 'blur' }
]
},
{
type: 'select-form',
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',
defaultValue: 0,
rules: [
{ required: true, message: '请选择了解途径', trigger: 'change' }
]
}
]
}
}
examples/kelley-form/training.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'training',
title: '所受培训（可选）',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/trainings?project_id=1001',
callback(data) {
return data.map(item => {
const { start_date: startDate, end_date: endDate } = item
if (startDate) {
item.dates = [startDate + '', endDate + '']
}
return item
})
}
},
update: {
action: '/zws/v1/enrollment/trainings/batch-upload',
data: { project_id: 1001 },
beforeRequest(data) {
const records = data.map(item => {
const [startDate, endDate] = item.dates
item.start_date = startDate
item.end_date = endDate
return ['start_date', 'end_date', 'institute_cn', 'course_cn'].reduce((result, key) => {
result[key] = item[key]
return result
}, {})
})
return { records }
}
},
form: {
hasAdd: true,
options: {
labelWidth: '80px'
},
items: [
{
type: 'date-picker-from-to-form',
elemType: 'monthrange',
label: '培训时间',
model: 'dates',
rangeSeparator: '至',
startPlaceholder: '请选择开始时间',
endPlaceholder: '请选择结束时间',
attrs: { 'value-format': 'yyyyMM' },
rules: [{ required: true, message: '请选择培训时间', trigger: 'blur' }]
},
{
type: 'input-form',
label: '培训机构',
model: 'institute_cn',
rules: [{ required: true, message: '请输入培训机构', trigger: 'blur' }]
},
{
type: 'input-form',
label: '课程名称',
model: 'course_cn',
rules: [
{
required: true,
message: '请输入课程名称',
trigger: 'blur'
}
]
}
]
}
}
examples/main.js
浏览文件 @ c69ed42d
import Vue from 'vue'
import App from './ciis/App.vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import VueForm from '../src/index'
Vue.use(VueRouter)
Vue.use(VueForm)
Vue.config.productionTip = false
new Vue({
router: new VueRouter(),
render: h => h(App)
}).$mount('#app')
examples/sofia-form/answer.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'answer',
title: '学习目的',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/answers?project_id=1000',
callback(data) {
let [first = {}, second = {}] = data
return {
qid1: first.qid || 1,
question1:
first.question ||
'您为什么要申请索菲亚大学金融方向工商管理硕士项目？（60字以上，1000字以内）',
answer1: first.answer,
qid2: second.qid || 2,
question2:
second.question ||
'您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（60字以上，1000字以内）',
answer2: second.answer
}
}
},
update: {
action: '/zws/v1/enrollment/answers/batch-upload',
data: { project_id: 1000 },
beforeRequest(data) {
return {
records: [
{ qid: data.qid1, question: data.question1, answer: data.answer1 },
{ qid: data.qid2, question: data.question2, answer: data.answer2 }
]
}
}
},
form: {
options: {},
items: [
/* 您为什么要申请索菲亚大学金融方向工商管理硕士项目？（60字以上，1000字以内） */
{
type: 'textarea-form',
label:
'您为什么要申请索菲亚大学金融方向工商管理硕士项目？（60字以上，1000字以内）',
model: 'answer1',
modelWidth: '100%',
placeholder:
'您为什么要申请索菲亚大学金融方向工商管理硕士项目？（60字以上，1000字以内）',
attrs: {
rows: '8',
maxlength: '1000',
'show-word-limit': true
},
rules: [
{
required: true,
message: '请输入内容',
trigger: 'blur'
},
{
min: 60,
max: 1000,
message: '长度在 60 到 1000 个字符',
trigger: 'blur'
}
]
},
/* 您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（60字以上，1000字以内） */
{
type: 'textarea-form',
label:
'您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（60字以上，1000字以内）',
model: 'answer2',
modelWidth: '100%',
placeholder:
'您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（60字以上，1000字以内）',
attrs: {
rows: '8',
maxlength: '1000',
'show-word-limit': true
},
rules: [
{
required: true,
message: '请输入内容',
trigger: 'blur'
},
{
min: 60,
max: 1000,
message: '长度在 60 到 1000 个字符',
trigger: 'blur'
}
]
}
]
}
}
examples/sofia-form/attachment.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'attachment',
title: '资料上传',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/attachments?project_id=1000',
callback(data) {
let _data = {
uploadArrs22: [],
uploadArrs23: [],
uploadArrs30: [],
uploadArrs31: []
}
data.forEach((item, index) => {
_data['uploadArrs' + item.file_type].push({
url: item.file,
id: item.id,
sso_file_name: item.sso_file_name
})
})
return _data
}
},
form: {
hasButton: false,
options: {
},
items: [
/* 有效身份证件（正面） */
{
type: 'upload-form',
label: '有效身份证件（正面）',
required: true,
model: 'uploadArrs22',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 22,
project_id: 1000
},
attrs: {
multiple: false,
limit: 1
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">申请者需要将有效身份证件原件扫描或者拍照后提交。</p>
<p style="margin: 0;">请您提供有效身份证件的扫描件，身份证与台港澳居民大陆通行证应包括正反两面扫描件。</p>
<p style="margin: 0;">只上传一个文件，多份文件需合并到一个文件后打印出来检查无误后再上传。</p>
<p style="margin: 0;">上传文件仅限“jpg,jpeg,gif,png”格式，文件小于10MB。</p>
</div>
`
},
/* 有效身份证件（反面） */
{
type: 'upload-form',
label: '有效身份证件（反面）',
required: true,
model: 'uploadArrs23',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 23,
project_id: 1000
},
attrs: {
multiple: false,
limit: 1
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">申请者需要将有效身份证件原件扫描或者拍照后提交。</p>
<p style="margin: 0;">请您提供有效身份证件的扫描件，身份证与台港澳居民大陆通行证应包括正反两面扫描件。</p>
<p style="margin: 0;">只上传一个文件，多份文件需合并到一个文件后打印出来检查无误后再上传。</p>
<p style="margin: 0;">上传文件仅限“jpg,jpeg,gif,png”格式，文件小于10MB。</p>
</div>
`
},
/* 毕业证书 */
{
type: 'upload-form',
label: '毕业证书',
required: true,
model: 'uploadArrs30',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 30,
project_id: 1000
},
attrs: {
multiple: true
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">申请者需要将本科或以上毕业证书原件扫描或者拍照后提交。</p>
<p style="margin: 0;">可上传多个文件，请确保证书号码清晰可辨。</p>
<p style="margin: 0;">上传文件仅限“jpg,jpeg,png”格式，文件小于10MB。</p>
</div>
`
},
/* 学位证书 */
{
type: 'upload-form',
label: '学位证书',
required: true,
model: 'uploadArrs31',
action: '/zws/v1/enrollment/attachments',
deleteAction: '/zws/v1/enrollment/attachments',
data: {
file_type: 31,
project_id: 1000
},
attrs: {
multiple: true
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">申请者需要将学位证书原件扫描或者拍照后提交。</p>
<p style="margin: 0;">可上传多个文件，请确保证书号码清晰可辨。</p>
<p style="margin: 0;">上传文件仅限“jpg,jpeg,png”格式，文件小于10MB。</p>
</div>
`
}
]
}
}
examples/sofia-form/career.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'career',
title: '工作经验',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/careers?project_id=1000',
callback(data) {
return data.map(item => {
const { start_date: startDate, end_date: endDate } = item
if (startDate) {
item.dates = [startDate + '', endDate + '']
}
return item
})
}
},
update: {
action: '/zws/v1/enrollment/careers/batch-upload',
data: { project_id: 1000 },
beforeRequest(data) {
const records = data.map(item => {
const [startDate, endDate] = item.dates
item.start_date = startDate
item.end_date = endDate
return [
'start_date',
'end_date',
'company_name_cn',
'industry',
'dept_cn',
'position_cn',
'job_desc_cn'
].reduce((result, key) => {
result[key] = item[key]
return result
}, {})
})
return { records }
}
},
form: {
hasAdd: true,
options: {
labelWidth: '160px'
},
items: [
/* 工作时间 */
{
type: 'date-picker-from-to-form',
elemType: 'monthrange',
label: '工作时间',
labelWidth: '160px',
model: 'dates',
modelWidth: '300px',
rangeSeparator: '至',
startPlaceholder: '请选择开始时间',
endPlaceholder: '请选择结束时间',
attrs: { 'value-format': 'yyyyMM' },
rules: [{ required: true, message: '请选择工作时间', trigger: 'blur' }]
},
/* 工作单位 */
{
type: 'input-form',
label: '工作单位',
model: 'company_name_cn',
modelWidth: '300px',
placeholder: '请输入工作单位',
rules: [{ required: true, message: '请输入工作单位', trigger: 'blur' }]
},
/* 行业类别 */
{
type: 'select-form',
label: '行业类别',
model: 'industry',
modelWidth: '300px',
placeholder: '请选择',
values: [
{ label: '请选择', value: 0 },
{ label: '互联网/电子商务', value: 1 },
{ label: '基金/证券/期货/投资', value: 2 },
{ label: '保险', value: 3 },
{ label: '银行', value: 4 },
{ label: '信托/担保/拍卖/典当', value: 5 },
{ label: '计算机软件', value: 6 },
{ label: 'IT服务(系统/数据/维护)', value: 7 },
{ label: '电子技术/半导体/集成电路', value: 8 },
{ label: '计算机硬件', value: 9 },
{ label: '通信/电信/网络设备', value: 10 },
{ label: '通信/电信运营、增值服务', value: 11 },
{ label: '网络游戏', value: 12 },
{ label: '房地产/建筑/建材/工程', value: 13 },
{ label: '家居/室内设计/装饰装潢', value: 14 },
{ label: '物业管理/商业中心', value: 15 },
{ label: '专业服务/咨询(财会/法律/人力资源等)', value: 16 },
{ label: '广告/会展/公关', value: 17 },
{ label: '中介服务', value: 18 },
{ label: '检验/检测/认证', value: 19 },
{ label: '外包服务', value: 20 },
{ label: '快速消费品（食品/饮料/烟酒/日化）', value: 21 },
{ label: '耐用消费品（服饰/纺织/皮革/家具/家电）', value: 22 },
{ label: '贸易/进出口', value: 23 },
{ label: '零售/批发', value: 24 },
{ label: '租赁服务', value: 25 },
{ label: '教育/培训/院校', value: 26 },
{ label: '礼品/玩具/工艺美术/收藏品/奢侈品', value: 27 },
{ label: '汽车/摩托车', value: 28 },
{ label: '大型设备/机电设备/重工业', value: 29 },
{ label: '加工制造（原料加工/模具）', value: 30 },
{ label: '仪器仪表及工业自动化', value: 31 },
{ label: '印刷/包装/造纸', value: 32 },
{ label: '办公用品及设备', value: 33 },
{ label: '医药/生物工程', value: 34 },
{ label: '医疗设备/器械', value: 35 },
{ label: '航空/航天研究与制造', value: 36 },
{ label: '交通/运输,物流/仓储', value: 37 },
{ label: '医疗/护理/美容/保健/卫生服务', value: 38 },
{ label: '酒店/餐饮,旅游/度假,媒体/出版/影视/文化传播', value: 39 },
{ label: '娱乐/体育/休闲', value: 40 },
{ label: '能源/矿产/采掘/冶炼', value: 41 },
{ label: '石油/石化/化工,电气/电力/水利', value: 42 },
{ label: '环保', value: 43 },
{ label: '政府/公共事业/非盈利机构', value: 44 },
{ label: '学术/科研,农/林/牧/渔跨领域经营', value: 45 },
{ label: '其他', value: 90 }
],
rules: [{ required: true, message: '请选择行业类别', trigger: 'change' }]
},
/* 工作部门 */
{
type: 'input-form',
label: '工作部门',
required: true,
model: 'dept_cn',
modelWidth: '300px',
placeholder: '请输入工作部门',
rules: [{ required: true, message: '请输入工作部门', trigger: 'blur' }]
},
/* 工作职位 */
{
type: 'input-form',
label: '工作职位',
model: 'position_cn',
modelWidth: '300px',
placeholder: '请输入工作职位',
rules: [{ required: true, message: '请输入工作职位', trigger: 'blur' }]
},
/* 工作描述 */
{
type: 'textarea-form',
label: '工作描述',
model: 'job_desc_cn',
modelWidth: '300px',
placeholder: '请输入工作描述',
attrs: {
rows: '4',
maxlength: '500',
'show-word-limit': true
},
rules: [
{
required: true,
message: '请输入内容',
trigger: 'blur'
},
{
min: 60,
max: 1000,
message: '长度在 60 到 500 个字符',
trigger: 'blur'
}
]
}
]
}
}
examples/sofia-form/declare.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'declare',
title: '申请声明',
update: {
action: '/zws/v1/enrollment/submissions/submit',
data: { project_id: 1000 }
},
form: {
hint: `<p>1、 本人知晓此申请表及所附文件将作为申请紫荆-索菲亚大学MBA面试和背景评估的参考依据，一旦成功录取，有关资料将作为学生信息存档。</p>
<p>2、 本人声明所填资料正确无误，知晓任何不真实的信息或不诚信的行为，均会影响申请结果，已取得的成绩和资格会被取消。 我理解并同意所有报名材料归紫荆教育所有，无论考生录取与否均不退回。我授权紫荆教育使用报名表中的信息查询本人学习和工作记录。</p>`,
model: {
isAgree: []
},
items: [
{
type: 'checkbox-group-form',
label: '',
values: [{ label: '我同意', value: 1 }],
model: 'isAgree',
rules: [
{
required: true,
message: '请勾选',
trigger: 'change'
}
]
}
]
}
}
examples/sofia-form/education.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'education',
title: '教育背景',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/educations?project_id=1000',
callback(data) {
return data.map(item => {
const { start_date: startDate, end_date: endDate } = item
if (startDate) {
item.dates = [startDate + '', endDate + '']
}
return item
})
}
},
update: {
action: '/zws/v1/enrollment/educations/batch-upload',
data: { project_id: 1000 },
beforeRequest(data) {
const records = data.map(item => {
const [startDate, endDate] = item.dates
item.start_date = startDate
item.end_date = endDate
return ['start_date', 'end_date', 'school_name_cn', 'major_cn', 'degree'].reduce((result, key) => {
result[key] = item[key]
return result
}, {})
})
return { records }
}
},
form: {
hasAdd: true,
options: {
labelWidth: '160px'
},
items: [
/* 教育时间 */
{
type: 'date-picker-from-to-form',
elemType: 'monthrange',
label: '教育时间',
labelWidth: '160px',
model: 'dates',
modelWidth: '300px',
rangeSeparator: '至',
startPlaceholder: '请选择开始时间',
endPlaceholder: '请选择结束时间',
attrs: { 'value-format': 'yyyyMM' },
rules: [{ required: true, message: '请选择教育时间', trigger: 'blur' }]
},
/* 学校名称 */
{
type: 'input-form',
label: '学校名称',
model: 'school_name_cn',
modelWidth: '300px',
placeholder: '请输入学校名称',
rules: [{ required: true, message: '请输入学校名称', trigger: 'blur' }]
},
/* 专业名称 */
{
type: 'input-form',
label: '专业名称',
model: 'major_cn',
modelWidth: '300px',
placeholder: '请输入专业名称',
rules: [{ required: true, message: '请输入专业名称', trigger: 'blur' }]
},
/* 学历/学位 */
{
type: 'select-form',
label: '学历/学位',
model: 'degree',
modelWidth: '300px',
placeholder: '请选择',
values: [
{ label: '专科', value: 1 },
{ label: '本科', value: 2 },
{ label: '本科/学士', value: 3 },
{ label: '硕士研究生', value: 4 },
{ label: '研究生/硕士', value: 5 },
{ label: '博士研究生', value: 6 },
{ label: '研究生/博士', value: 7 },
{ label: '其他', value: 9 }
],
rules: [{ required: true, message: '请选择学历/学位', trigger: 'change' }]
}
]
}
}
examples/sofia-form/honor.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'honor',
title: '荣誉奖励（可选）',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/honors?project_id=1000'
},
update: {
action: '/zws/v1/enrollment/honors/batch-upload',
data: { project_id: 1000 },
beforeRequest(data) {
const records = data.map(item => {
return ['title', 'summary'].reduce((result, key) => {
result[key] = item[key]
return result
}, {})
})
return { records }
}
},
form: {
hint: '请列出曾获得的荣誉和专业资格，从最重要的开始',
hasAdd: true,
options: {
labelWidth: '180px'
},
items: [
/* 荣誉/奖励名称 */
{
type: 'input-form',
label: '荣誉/奖励',
model: 'title',
modelWidth: '300px',
placeholder: '请输入荣誉/奖励',
rules: [{ required: true, message: '请输入荣誉/奖励', trigger: 'blur' }]
},
/* 颁发机构名称 */
{
type: 'input-form',
label: '证书颁发机构及获得时间',
model: 'summary',
rules: [
{
required: true,
message: '请输入证书颁发机构及获得时间',
trigger: 'blur'
}
]
}
]
}
}
examples/sofia-form/index.js deleted 100644 → 0
浏览文件 @ 18b24c22
import profile from './profile'
import education from './education'
import career from './career'
import answer from './answer'
import attachment from './attachment'
import training from './training'
import honor from './honor'
import declare from './declare'
export default [
{
id: 'registerform',
title: '填写报名表',
isActive: true,
hasShadow: true,
children: [
profile,
education,
career,
answer,
attachment,
training,
honor,
{
id: 'final',
title: '最终检查'
},
declare
]
}
]
examples/sofia-form/profile.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'profile',
title: '个人信息',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/profiles?project_id=1000',
callback(data) {
data.date_of_starting_to_work = data.date_of_starting_to_work + ''
let arr = []
arr[0] = data.address_province
arr[1] = data.address_city
data.city_select_str = arr.join('-')
return data
}
},
update: {
action: '/zws/v1/enrollment/profiles',
data: { project_id: 1000 },
beforeRequest(data) {
let arr = data.city_select_str.split('-')
data.address_province = arr[0]
data.address_city = arr[1]
return [
'real_name_cn',
'phone_number',
'email',
'id_type',
'id_number',
'birthday',
'gender',
'nationality',
'address_province',
'address_city',
'date_of_starting_to_work',
'we_chat_account',
'mailing_address',
'emergency_contact_name',
'emergency_contacts_phone'
].reduce((result, key) => {
result[key] = data[key]
return result
}, {})
}
},
form: {
options: {
labelWidth: '150px'
},
items: [
/* 姓名 */
{
type: 'input-form',
label: '姓名',
model: 'real_name_cn',
modelWidth: '300px',
placeholder: '请输入姓名',
rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
},
/* 手机号 */
{
type: 'input-form',
label: '手机号',
model: 'phone_number',
modelWidth: '300px',
placeholder: '请输入手机号',
rules: [{ required: true, message: '请输入英文名', trigger: 'blur' }]
},
/* 邮箱 */
{
type: 'input-form',
label: '邮箱',
model: 'email',
modelWidth: '300px',
placeholder: '请输入邮箱',
rules: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
hint: '（后续报名信息将发送至此邮箱，请认真填写）'
},
/* 证件类型 */
{
type: 'select-form',
label: '证件类型',
model: 'id_type',
modelWidth: '300px',
placeholder: '请选择证件类型',
values: [
{ label: '居民身份证', value: 0 },
{ label: '港澳台身份证', value: 1 },
{ label: '护照号', value: 2 },
{ label: '军官证', value: 3 },
{ label: '其他', value: 9 }
],
rules: [
{ required: true, message: '请选择证件类型', trigger: 'change' }
]
},
/* 证件号码 */
{
type: 'input-form',
label: '证件号码',
model: 'id_number',
modelWidth: '300px',
placeholder: '请输入证件号码',
rules: [{ required: true, message: '请输入证件号码', trigger: 'blur' }]
},
/* 出生日期 */
{
type: 'date-picker-form',
elemType: 'date',
label: '出生日期',
model: 'birthday',
modelWidth: '300px',
placeholder: '请选择出生日期',
attrs: { 'value-format': 'yyyy-MM-dd' },
rules: [{ required: true, message: '请选择出生日期', trigger: 'blur' }]
},
/* 性别 */
{
type: 'radio-group-form',
label: '性别',
model: 'gender',
modelWidth: '300px',
values: [
{ label: '男', value: 1 },
{ label: '女', value: 2 }
],
rules: [{ required: true, message: '请选择性别', trigger: 'change' }]
},
/* 国籍 */
{
type: 'select-form',
label: '国籍',
model: 'nationality',
modelWidth: '300px',
placeholder: '请选择国籍',
values: [
{ label: '中国', value: 1 },
{ label: '其他国家', value: 9 }
],
rules: [{ required: true, message: '请选择国籍', trigger: 'blur' }]
},
/* 现居住城市 */
{
type: 'city-select-form',
label: '现居住城市',
labelWidth: '160px',
model: 'city_select_str',
separator: '-',
placeholder0: '请选择省份',
placeholder1: '请选择城市',
rules: [{ required: true, message: '请选择居住城市', trigger: 'blur' }]
},
/* 参加工作年份 */
{
type: 'date-picker-form',
elemType: 'year',
label: '参加工作年份',
model: 'date_of_starting_to_work',
modelWidth: '300px',
placeholder: '请选择参加工作年份',
attrs: { 'value-format': 'yyyy' },
rules: [
{ required: true, message: '请选择参加工作年份', trigger: 'blur' }
]
},
/* 微信号 */
{
type: 'input-form',
label: '微信号',
model: 'we_chat_account',
modelWidth: '300px',
placeholder: '请输入微信号',
rules: [{ required: true, message: '请输入微信号', trigger: 'blur' }]
},
/* 邮寄地址 */
{
type: 'input-form',
label: '邮寄地址',
model: 'mailing_address',
modelWidth: '300px',
placeholder: '请输入邮寄地址',
rules: [{ required: true, message: '请输入邮寄地址', trigger: 'blur' }]
},
/* 紧急联系人 */
{
type: 'input-form',
label: '紧急联系人',
model: 'emergency_contact_name',
modelWidth: '300px',
placeholder: '请输入紧急联系人',
rules: [
{ required: true, message: '请输入紧急联系人', trigger: 'blur' }
]
},
/* 紧急联系电话 */
{
type: 'input-form',
label: '紧急联系电话',
model: 'emergency_contacts_phone',
modelWidth: '300px',
placeholder: '请输入紧急联系电话',
rules: [
{ required: true, message: '请输入紧急联系电话', trigger: 'blur' }
]
}
]
}
}
examples/sofia-form/training.js deleted 100644 → 0
浏览文件 @ 18b24c22
export default {
id: 'training',
title: '所受培训（可选）',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/trainings?project_id=1000',
callback(data) {
return data.map(item => {
const { start_date: startDate, end_date: endDate } = item
if (startDate) {
item.dates = [startDate + '', endDate + '']
}
return item
})
}
},
update: {
action: '/zws/v1/enrollment/trainings/batch-upload',
data: { project_id: 1000 },
beforeRequest(data) {
const records = data.map(item => {
const [startDate, endDate] = item.dates
item.start_date = startDate
item.end_date = endDate
return ['start_date', 'end_date', 'institute_cn', 'course_cn'].reduce((result, key) => {
result[key] = item[key]
return result
}, {})
})
return { records }
}
},
form: {
hasAdd: true,
options: {
labelWidth: '160px'
},
items: [
/* 培训时间 */
{
type: 'date-picker-from-to-form',
elemType: 'monthrange',
label: '培训时间',
labelWidth: '160px',
model: 'dates',
modelWidth: '300px',
rangeSeparator: '至',
startPlaceholder: '请选择开始时间',
endPlaceholder: '请选择结束时间',
attrs: { 'value-format': 'yyyyMM' },
rules: [{ required: true, message: '请选择培训时间', trigger: 'blur' }]
},
/* 培训机构 */
{
type: 'input-form',
label: '培训机构',
model: 'institute_cn',
modelWidth: '300px',
placeholder: '请输入培训机构',
rules: [{ required: true, message: '请输入培训机构', trigger: 'blur' }]
},
/* 课程名称 */
{
type: 'input-form',
label: '课程名称',
model: 'course_cn',
modelWidth: '300px',
placeholder: '请输入课程名称',
rules: [
{
required: true,
message: '请输入课程名称',
trigger: 'blur'
}
]
}
]
}
}
package.json
浏览文件 @ c69ed42d
{
"name": "@ezijing/vue-form",
"version": "0.2.1",
"version": "0.2.2",
"private": false,
"description": "基于Vue Element-UI的表单",
"scripts": {
......@@ -32,7 +32,8 @@
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
"vue-template-compiler": "^2.6.11",
"vue-router": "^3.4.6"
},
"keywords": [
"element-ui",
......
src/VueForm.vue
浏览文件 @ c69ed42d
<template>
<div class="v-layout">
<div class="v-layout-aside">
<slot name="aside">
<slot name="aside-prepend"></slot>
<v-menu :default-active="defaultActive" :datalist="menus" @select="onSelect"></v-menu>
<slot name="aside-append"></slot>
</slot>
</div>
<div class="v-layout-main" v-if="page" :key="activeId">
<slot>
<!-- 选项卡 -->
<template v-if="page.tabs">
<v-card-tabs v-bind="page" v-on="$listeners"></v-card-tabs>
</template>
<template v-else>
<v-card v-bind="page" v-on="$listeners">
<slot name="content">
......
src/packages/form/src/form-pane.vue
浏览文件 @ c69ed42d
......@@ -22,7 +22,6 @@
<div class="v-form-group__add">
<i class="el-icon-circle-plus" @click="handleAdd"></i>
</div>
<el-button type="primary" @click="handleSubmit">{{ form.submitText || '提交' }}</el-button>
</template>
<!-- 一个表单 -->
......@@ -31,13 +30,18 @@
:options="form.options"
:items="form.items"
:model="model"
:hasButton="form.hasButton"
:hasButton="false"
:submitText="form.submitText"
@onSubmit="onSubmit"
v-on="$listeners"
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>
</div>
</template>
......@@ -68,6 +72,9 @@ export default {
computed: {
isMultiple() {
return Array.isArray(this.model)
},
currentForm() {
return Object.assign({ hasSubmit: true, hasButton: true }, this.form)
}
},
methods: {
......@@ -128,11 +135,20 @@ export default {
},
// 提交
handleSubmit() {
const formCompoents = this.$refs.form
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)
})
},
// 上一步
handlePrev() {
this.$emit('prev', this.form.prev)
},
// 下一步
handleNext() {
this.$emit('next', this.form.next)
}
},
beforeMount() {
......@@ -159,12 +175,14 @@ export default {
cursor: pointer;
}
.v-form-group__add {
margin-bottom: 20px;
padding-bottom: 20px;
font-size: 30px;
color: var(--main-color);
text-align: center;
cursor: pointer;
border-bottom: 1px solid #f1f1f1;
}
.v-form-footer {
margin-top: 20px;
padding: 20px 0;
border-top: 1px solid #f1f1f1;
}
</style>
src/packages/form/src/form.vue
浏览文件 @ c69ed42d
......@@ -37,7 +37,7 @@ export default {
},
items: { type: Array, default: () => [] },
hasButton: { type: Boolean, default: true },
submitText: { type: String, default: '提交' }
submitText: { type: String, default: '保存' }
},
data() {
return {
......@@ -79,6 +79,7 @@ export default {
clearValidate() {
return this.$form.clearValidate(...arguments)
},
// 提交
onSubmit() {
this.validate().then(() => {
this.$emit('onSubmit', this.model)
......
src/packages/input/src/main.vue
浏览文件 @ c69ed42d
<template>
<el-input v-model="data[options.model]" v-bind="$attrs" clearable style="width: 300px" />
<el-input v-model.trim="data[options.model]" v-bind="$attrs" clearable style="width: 300px" />
</template>
<script>
......
src/packages/layout/src/card-tabs.vue
浏览文件 @ c69ed42d
......@@ -5,7 +5,7 @@
<span>{{ backText }}</span>
</div>
<el-tabs type="card" v-model="activeName">
<el-tab-pane :lazy="true" :label="tab.title" :name="tab.id" :key="tab.id" v-for="tab in tabs">
<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 }}
<span class="red" v-if="tab.required">*</span>
......@@ -39,6 +39,13 @@ export default {
this.activeName = first.id
}
}
},
computed: {
currentTabs() {
return this.tabs.filter(item => {
return Object.prototype.hasOwnProperty.call(item, 'visible') ? item.visible : true
})
}
}
}
</script>
......
src/packages/layout/src/submenu.vue
浏览文件 @ c69ed42d
<template>
<div class="v-submenu">
<template v-for="item in datalist">
<template v-for="item in menus">
<div
:class="{ 'v-submenu__item': true, 'is-active': item.isActive }"
:key="item.id"
......@@ -18,6 +18,13 @@ export default {
props: { datalist: { type: Array, default: () => [] } },
data() {
return {}
},
computed: {
menus() {
return this.datalist.filter(item => {
return Object.prototype.hasOwnProperty.call(item, 'visible') ? item.visible : true
})
}
}
}
</script>
......
src/packages/upload/src/main.vue
浏览文件 @ c69ed42d
......@@ -13,8 +13,12 @@
:on-exceed="handleExceed"
:file-list="fileList"
ref="upload"
:class="classes"
>
<div class="cover">
<img :src="defaultImage" v-if="defaultImage" class="default-image" />
<i class="el-icon-plus"></i>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" />
......@@ -63,6 +67,26 @@ export default {
item.url = item.oss_sign_url
return item
})
},
attrs() {
return Object.assign({}, this.options.attrs)
},
defaultImage() {
return this.attrs.image
},
limit() {
return this.attrs.limit
},
hasUpload() {
if (this.limit) {
return this.fileList.length < this.limit
}
return true
},
classes() {
return {
'has-upload': this.hasUpload
}
}
},
methods: {
......@@ -109,8 +133,13 @@ export default {
<style lang="scss">
.v-upload {
.el-upload--picture-card {
line-height: 116px;
.el-upload {
display: none;
}
.has-upload {
.el-upload {
display: inline-block;
}
}
.el-upload--picture-card,
.el-upload-list--picture-card .el-upload-list__item {
......@@ -120,5 +149,20 @@ export default {
.el-upload-list__item {
transition: none;
}
.cover {
position: relative;
width: 100%;
height: 100%;
.default-image {
width: 100%;
}
.el-icon-plus {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
}
}
</style>
\ No newline at end of file
yarn.lock
浏览文件 @ c69ed42d
......@@ -8752,6 +8752,11 @@ vue-loader@^15.9.2:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
vue-router@^3.4.6:
version "3.4.6"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.6.tgz#f7bda2c9a43d39837621c9a02ba7789f5daa24b2"
integrity sha512-kaXnB3pfFxhAJl/Mp+XG1HJMyFqrL/xPqV7oXlpXn4AwMmm6VNgf0nllW8ksflmZANfI4kdo0bVn/FYSsAolPQ==
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
version "4.1.2"
resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论