Skip to content

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

update

上级 07a76974
显示空白字符变更
内嵌 并排
正在显示 包含 224 行增加 和 82 行删除
examples/page/answer.js
浏览文件 @ 53331ff5
......@@ -6,37 +6,77 @@ export default {
get: {
action: '/zws/v1/enrollment/answers?project_id=1001',
callback(data) {
data.date_of_starting_to_work = data.date_of_starting_to_work + ''
return data
let [first, second] = data
return {
qid1: first.qid,
question1: first.question,
answer1: first.answer,
qid2: second.qid,
question2: second.question,
answer2: second.answer
}
}
},
update: {
action: '/zws/v1/enrollment/answers/batch-upload',
data: { project_id: 1001 },
callback(data) {
return data
beforeRequest(data) {
return {
records: [
{ qid: data.qid1, question: data.question1, answer: data.answer1 },
{ qid: data.qid2, question: data.question2, answer: data.answer2 }
]
}
}
},
form: {
options: {
labelWidth: '160px'
},
items: [
{
type: 'input-form',
label: '姓名',
model: 'real_name_cn',
placeholder: '123123',
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: '请输入活动名称',
message: '请输入',
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
min: 200,
max: 1000,
message: '长度在 200 到 1000 个字符',
trigger: 'blur'
}
]
......
examples/page/career.js
浏览文件 @ 53331ff5
......@@ -19,7 +19,7 @@ export default {
form: {
hasAdd: true,
options: {
labelWidth: '160px'
labelWidth: '140px'
},
model: [
{
......@@ -34,7 +34,7 @@ export default {
],
items: [
{
type: 'date-picker-form',
type: 'date-picker-from-to-form',
elemType: 'monthrange',
label: '工作时间',
model: 'times',
......@@ -86,23 +86,39 @@ export default {
{ required: true, message: '请选择职位类型', trigger: 'change' }
]
},
{
type: 'input-form',
label: '工作年薪（万元）',
model: 'annual_salary'
model: 'annual_salary',
rules: [{ required: true, message: '请输入工作年薪', trigger: 'blur' }]
},
{
type: 'input-form',
label: '工作描述',
model: 'job_desc_cn',
attrs: { type: 'textarea' }
attrs: {
type: 'textarea',
placeholder:
'请详细描述您的职责范围，工作任务以及取得的成绩等，填写文字在100个字以上评定等级，少于不计算，内容越详细，等级越高。（字限3000字以内）',
rows: '8',
maxlength: '3000',
'show-word-limit': true
},
rules: [{ required: true, message: '请输入工作描述', trigger: 'blur' }]
},
{
type: 'input-form',
label: '公司（单位）简介',
model: 'company_profile',
attrs: { type: 'textarea' }
attrs: {
type: 'textarea',
placeholder:
'300字左右，包括所属行业在业内的位置，经营时间，业务规模，发展前景等信息',
rows: '4'
},
rules: [
{ required: true, message: '请输入公司（单位）简介', trigger: 'blur' }
]
}
]
}
......
examples/page/declare.js
浏览文件 @ 53331ff5
......@@ -18,26 +18,21 @@ export default {
}
},
form: {
hint:
'我提供的所有报名材料信息皆准确和完整。我同意在需要的情况下提交原件以确认我的报名资格。由于报名材料中的虚假、错误信息或重大遗漏导致不录取或取消学籍的后果由我个人承担。 我理解并同意所有报名材料归紫荆教育所有，无论考生录取与否均不退回。我授权紫荆教育使用报名表中的信息查询本人学习和工作记录。',
options: {
labelWidth: '160px'
},
items: [
{
type: 'input-form',
label: '姓名',
type: 'checkbox-form',
label: '我同意',
model: 'real_name_cn',
placeholder: '123123',
rules: [
{
required: true,
message: '请输入活动名称',
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
message: '请勾选',
trigger: 'change'
}
]
}
......
examples/page/education.js
浏览文件 @ 53331ff5
......@@ -28,9 +28,11 @@ export default {
}
},
form: {
hint: `<div style="color:red;font-size:18px;">请务必如实提供高中以上所有学历学位的详细信息。</div>
<div>按照从最高学历至第一学历的顺序，请您依次填写：博士、硕士、本科、专科，<br>并且填写您获得学位所在学校的国家和城市</div>`,
hasAdd: true,
options: {
labelWidth: '160px'
labelWidth: '110px'
},
model: [
{
......@@ -49,7 +51,6 @@ export default {
elemType: 'monthrange',
label: '教育时间',
model: 'times',
required: true,
attrs: { 'value-format': 'yyyy-MM' },
rules: [{ required: true, message: '请选择教育时间', trigger: 'blur' }]
},
......
examples/page/honor.js
浏览文件 @ 53331ff5
export default {
id: 'honor',
title: '学习目的',
title: '荣誉奖励',
showProgress: true,
progress: 0,
get: {
......@@ -19,24 +19,23 @@ export default {
},
form: {
options: {
labelWidth: '160px'
labelWidth: '180px'
},
items: [
{
type: 'input-form',
label: '姓名',
model: 'real_name_cn',
placeholder: '123123',
label: '荣誉/奖励',
model: 'school_name_cn',
rules: [{ required: true, message: '请输入荣誉/奖励', trigger: 'blur' }]
},
{
type: 'input-form',
label: '证书颁发机构及获得时间',
model: 'school_country',
rules: [
{
required: true,
message: '请输入活动名称',
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
message: '请输入证书颁发机构及获得时间',
trigger: 'blur'
}
]
......
examples/page/profile.js
浏览文件 @ 53331ff5
......@@ -7,19 +7,24 @@ export default {
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 },
callback(data) {
beforeRequest(data) {
let [province, city] = data.city.split('-')
data.address_province = province
data.address_city = city
delete data.city
return data
}
},
form: {
options: {
labelWidth: '160px'
labelWidth: '150px'
},
mode: {
real_name_cn: '',
......@@ -46,7 +51,6 @@ export default {
type: 'input-form',
label: '姓名',
model: 'real_name_cn',
placeholder: '123123',
rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
},
{
......@@ -104,11 +108,19 @@ export default {
model: 'nationality',
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: { type: 'year', 'value-format': 'yyyy' },
attrs: { 'value-format': 'yyyy' },
rules: [
{ required: true, message: '请选择参加工作年份', trigger: 'blur' }
]
......
examples/page/training.js
浏览文件 @ 53331ff5
......@@ -19,24 +19,32 @@ export default {
},
form: {
options: {
labelWidth: '160px'
labelWidth: '80px'
},
items: [
{
type: 'date-picker-form',
elemType: 'monthrange',
label: '培训时间',
model: 'times',
required: true,
attrs: { 'value-format': 'yyyy-MM' },
rules: [{ required: true, message: '请选择培训时间', trigger: 'blur' }]
},
{
type: 'input-form',
label: '姓名',
model: 'real_name_cn',
placeholder: '123123',
label: '培训机构',
model: 'school_name_cn',
rules: [{ required: true, message: '请输入培训机构', trigger: 'blur' }]
},
{
type: 'input-form',
label: '课程名称',
model: 'school_country',
rules: [
{
required: true,
message: '请输入活动名称',
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
message: '请输入课程名称',
trigger: 'blur'
}
]
......
src/FormPane.vue
浏览文件 @ 53331ff5
<template>
<div class="ezj-form-pane">
<template v-if="form.hint">
<div class="ezj-form-pane__hint" v-html="form.hint"></div>
</template>
<!-- 多个表单 -->
<template v-if="form.hasAdd">
<template v-for="(item, index) in formModel">
<form-form
:options="form.options"
:model="item"
:items="form.items"
@onSubmit="onSubmit"
:key="index"
>
<el-button>增加一项</el-button>
<el-button>保存</el-button>
<div class="ejz-form-pane_group" :key="index">
<div class="remove" @click="handleRemove(index)">
<i class="el-icon-close"></i>
</div>
<form-form :options="form.options" :model="item" :items="form.items" @onSubmit="onSubmit">
<el-button @click="handleAdd">增加一项</el-button>
<el-button @click="handleSubmit">保存</el-button>
</form-form>
</div>
</template>
</template>
......@@ -48,8 +50,6 @@ export default {
return {}
}
},
data: Object,
headers: Object,
form: Object
},
data() {
......@@ -59,7 +59,7 @@ export default {
},
computed: {
isMultiple() {
return Array.isArray(this.model)
return Array.isArray(this.form)
},
formModel() {
return this.model || this.form.model
......@@ -71,8 +71,17 @@ export default {
},
// 获取
getData() {
const { action, data = {}, callback } = this.get
axios.get(action, { params: data }).then(res => {
let {
action,
headers = {},
data = {},
beforeRequest,
callback
} = this.get
if (beforeRequest) {
data = beforeRequest(data)
}
axios.get(action, { params: data, headers }).then(res => {
let { data } = res
if (callback) {
data = callback(data)
......@@ -81,19 +90,54 @@ export default {
})
},
// 更新
updateData(params) {
const { action, data = {}, callback } = this.update
params = Object.assign({}, params, data)
if (callback) {
params = callback(params)
updateData(formData) {
let {
action,
headers = {},
data = {},
beforeRequest,
callback
} = this.update
if (beforeRequest) {
formData = beforeRequest(formData)
}
// 自定义数据和表单数据合并
formData = Object.assign({}, formData, data)
// 自定义header和默认header合并
headers = Object.assign(
{ 'Content-Type': 'application/x-www-form-urlencoded' },
headers
)
// 表单数据序列化
if (headers['Content-Type'] === 'application/x-www-form-urlencoded') {
let params = new URLSearchParams()
for (let key in formData) {
let value = formData[key]
params.append(
key,
typeof value === 'object' ? JSON.stringify(value) : value
)
}
axios.post(action, params).then(res => {
this.$emit('update')
formData = params
}
axios.post(action, formData, { headers }).then(res => {
let { data } = res
callback && callback(data)
this.$emit('update', data)
})
},
onSubmit(data) {
this.updateData(data)
}
},
// 新增表单
handleAdd() {
this.formModel.push(this.form.model)
},
// 删除表单
handleRemove(index) {
this.formModel.splice(0, index)
},
handleSubmit() {}
},
beforeMount() {
this.init()
......@@ -102,4 +146,31 @@ export default {
</script>
<style lang="scss">
.ezj-form-pane__hint {
margin-bottom: 20px;
}
.ejz-form-pane_group {
position: relative;
margin-bottom: 20px;
padding: 15px;
border: 2px solid #c41230;
border-radius: 10px;
.remove {
position: absolute;
top: -12px;
right: -12px;
z-index: 999;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #fff;
cursor: pointer;
background-color: #c41230;
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论