Skip to content

V
vue-form
提交 6c02c8b4 authored 作者: GOD_ZYX's avatar GOD_ZYX
浏览文件
操作

update

上级 82cb7081
显示空白字符变更
内嵌 并排
正在显示 包含 296 行增加 和 46 行删除
examples/kelley-form/file.js
浏览文件 @ 6c02c8b4
......@@ -6,40 +6,218 @@ export default {
get: {
action: '/zws/v1/enrollment/attachments?project_id=1001',
callback(data) {
data.date_of_starting_to_work = data.date_of_starting_to_work + ''
return data
let _data = {
uploadArrs10: [],
uploadArrs22: [],
uploadArrs23: [],
uploadArrs30: [],
uploadArrs31: [],
uploadArrs41: [],
uploadArrs42: [],
uploadArrs50: []
}
},
update: {
action: '/zws/v1/enrollment/profiles',
data: { project_id: 1001 },
callback(data) {
return data
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: {
labelWidth: '160px'
},
items: [
/* 一寸彩色近照 */
{
type: 'input-form',
label: '姓名',
model: 'real_name_cn',
placeholder: '123123',
rules: [
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,
message: '请输入活动名称',
trigger: 'blur'
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>
`
},
/* 有效身份证件（反面） */
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
]
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/sofia-form/file.js
浏览文件 @ 6c02c8b4
......@@ -4,46 +4,71 @@ export default {
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/attachments?project_id=1001',
action: '/zws/v1/enrollment/attachments?project_id=1000',
callback(data) {
let _data = {
uploadArrs: []
uploadArrs22: [],
uploadArrs23: [],
uploadArrs30: [],
uploadArrs31: []
}
data.forEach((item, index) => {
_data.uploadArrs.push({
_data['uploadArrs' + item.file_type].push({
url: item.file,
id: item.id,
'sso_file_name': item.sso_file_name
sso_file_name: item.sso_file_name
})
})
return _data
}
},
update: {
action: '/zws/v1/enrollment/profiles',
data: { project_id: 1000 },
callback(data) {
return data
}
},
form: {
hasButton: false,
options: {
},
items: [
/* 有效身份证件（正面） */
{
type: 'upload-form',
label: '有效身份证件（正面）',
'model': 'uploadArrs',
'action': '/zws/v1/enrollment/attachments',
'deleteAction': '/zws/v1/enrollment/attachments',
'data': {
'file_type': 10,
'project_id': 1001
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>
`
},
'attrs': {
'multiple': true
/* 有效身份证件（反面） */
{
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
},
'html': `
attrs: {
multiple: false,
limit: 1
},
html: `
<div style="color: #72818c; font-size: 14px;">
<p style="margin: 0;">申请者需要将有效身份证件原件扫描或者拍照后提交。</p>
<p style="margin: 0;">请您提供有效身份证件的扫描件，身份证与台港澳居民大陆通行证应包括正反两面扫描件。</p>
......@@ -51,6 +76,52 @@ export default {
<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>
`
}
]
}
......
src/components/elem-form/upload-form/src/uploadForm.vue
浏览文件 @ 6c02c8b4
......@@ -25,7 +25,7 @@
<template v-for="(item, index) in filesArr">
<template v-if="/(jpeg)|(jpg)|(png)|(gif)/gi.test(item.url)">
<div v-bind:key="item.id" class="show-file">
<div class="close" @click="deleteFile(index)">X</div>
<div class="close" @click="deleteFiles(index)">X</div>
<el-avatar shape="square" :size="100" fit="contain" :src="item.url"></el-avatar>
<span class="title">{{ item.sso_file_name }}</span>
<div class="hover">
......@@ -35,7 +35,7 @@
</template>
<template v-else>
<div v-bind:key="item.id" class="show-file">
<div class="close">X</div>
<div class="close" @click="deleteFiles(index)">X</div>
<el-avatar shape="square" :size="100" fit="contain" :src="item.url"></el-avatar>
<span class="title">{{ item.sso_file_name }}</span>
<div class="hover">
......@@ -92,10 +92,10 @@ export default {
response.sso_file_name = file.name
this.filesArr.push(response)
},
deleteFile (index) {
deleteFiles (index) {
let temp = this.filesArr[index]
deleteFile({
action: this.item.deleteAction + '/' + temp.id + '?project_id=' + this.project_id,
action: this.item.deleteAction + '/' + temp.id + '?project_id=' + this.item.data.project_id,
onError: () => {},
onSuccess: (res) => {
if (res.status === 200) {
......
src/components/layout/FormPane.vue
浏览文件 @ 6c02c8b4
......@@ -32,6 +32,7 @@
:model="model"
:items="form.items"
@onSubmit="onSubmit"
:hasButton="form.hasButton"
ref="form"
></form-form>
</template>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论