Skip to content

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

update

上级 bca06045
显示空白字符变更
内嵌 并排
正在显示 包含 500 行增加 和 177 行删除
examples/App.vue
浏览文件 @ bac83775
......@@ -4,15 +4,15 @@
</div>
</template>
<script>
import registerForm from './kelley-form'
// import sofiaForm from './sofia-form'
// import registerForm from './kelley-form'
import sofiaForm from './sofia-form'
export default {
name: 'app',
data() {
return {
// menus: sofiaForm,
menus: registerForm
menus: sofiaForm
// menus: registerForm
}
},
methods: {
......
examples/sofia-form/answer.js
浏览文件 @ bac83775
......@@ -44,13 +44,13 @@ export default {
'rules': [
{
'required': true,
'message': '请输入',
'message': '请输入内容',
'trigger': 'blur'
},
{
'min': 200,
'min': 60,
'max': 1000,
'message': '长度在 200 到 1000 个字符',
'message': '长度在 60 到 1000 个字符',
'trigger': 'blur'
}
]
......@@ -62,7 +62,25 @@ export default {
'required': true,
'model': 'learn_target_02',
'model-width': '100%',
'placeholder': '您的短期和长期职业发展目标是什么？您打算如何达成此愿景？（60字以上，1000字以内）'
'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/career.js
浏览文件 @ bac83775
......@@ -4,16 +4,27 @@ export default {
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/careers?project_id=1001',
action: '/zws/v1/enrollment/careers?project_id=1000',
callback(data) {
return data
return data.map(item => {
const { start_date: startDate, end_date: endDate } = item
if (startDate) {
item.times = [(startDate + '').replace(/([\d]{4})([\d]{2})/gi, '$1-$2'), (endDate + '').replace(/([\d]{4})([\d]{2})/gi, '$1-$2')]
}
return item
})
}
},
update: {
action: '/zws/v1/enrollment/carrers/batch-upload',
data: { project_id: 1001 },
data: { project_id: 1000 },
callback(data) {
return data
return data.map(item => {
let [startDate, endDate] = item.times
item.start_date = parseInt(startDate.replace(/-/gi, ''))
item.end_date = parseInt(endDate.replace(/-/gi, ''))
return item
})
}
},
form: {
......@@ -33,76 +44,138 @@ export default {
}
],
items: [
/* 工作时间 */
{
type: 'date-picker-form',
elemType: 'monthrange',
label: '工作时间',
model: 'times',
required: true,
attrs: { 'value-format': 'yyyy-MM' },
rules: [{ required: true, message: '请选择工作时间', trigger: 'blur' }]
'type': 'date-picker-from-to-form',
'elemType': 'monthrange',
'label': '工作时间',
'required': true,
'disabled': false,
'label-width': '160px',
'model': 'times',
'model-width': '300px',
'rangeSeparator': '至',
'startPlaceholder': '请选择开始时间',
'endPlaceholder': '请选择结束时间',
'attrs': { 'value-format': 'yyyy-MM' },
'rules': [{ 'required': true, 'message': '请选择工作时间', 'trigger': 'blur' }]
},
/* 工作单位 */
{
type: 'input-form',
label: '工作单位',
model: 'company_name_cn',
rules: [{ required: true, message: '请输入工作单位', trigger: 'blur' }]
'type': 'input-form',
'label': '工作单位',
'required': true,
'model': 'company_name_cn',
'model-width': '300px',
'placeholder': '请输入工作单位',
'rules': [{ 'required': true, 'message': '请输入工作单位', 'trigger': 'blur' }]
},
/* 行业类别 */
{
type: 'select-form',
values: [{ label: '请选择', value: 0 }],
label: '行业类别',
model: 'industry',
rules: [
{ required: true, message: '请选择行业类别', trigger: 'change' }
'type': 'select-form',
'label': '行业类别',
'required': true,
'model': 'industry',
'model-width': '300px',
'placeholder': '请选择',
'values': [
{ '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: '工作部门',
model: 'dept_cn',
rules: [{ required: true, message: '请输入工作部门', trigger: 'blur' }]
},
{
type: 'input-form',
label: '工作职位',
model: 'position_cn',
rules: [{ required: true, message: '请输入工作职位', trigger: 'blur' }]
'type': 'input-form',
'label': '工作部门',
'required': true,
'model': 'dept_cn',
'model-width': '300px',
'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': '工作职位',
'required': true,
'model': 'position_cn',
'model-width': '300px',
'placeholder': '请输入工作职位',
'rules': [{ 'required': true, 'message': '请输入工作职位', 'trigger': 'blur' }]
},
/* 工作描述 */
{
type: 'input-form',
label: '工作年薪（万元）',
model: 'annual_salary'
'type': 'textarea-form',
'label': '工作描述',
'required': true,
'model': 'job_desc_cn',
'model-width': '300px',
'placeholder': '请输入工作描述',
'attrs': {
'rows': '4',
'maxlength': '500',
'show-word-limit': true
},
'rules': [
{
type: 'input-form',
label: '工作描述',
model: 'job_desc_cn',
attrs: { type: 'textarea' }
'required': true,
'message': '请输入内容',
'trigger': 'blur'
},
{
type: 'input-form',
label: '公司（单位）简介',
model: 'company_profile',
attrs: { type: 'textarea' }
'min': 60,
'max': 1000,
'message': '长度在 60 到 500 个字符',
'trigger': 'blur'
}
]
}
]
}
......
examples/sofia-form/education.js
浏览文件 @ bac83775
......@@ -4,12 +4,12 @@ export default {
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/educations?project_id=1001',
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.times = [startDate + '', endDate + '']
item.times = [(startDate + '').replace(/([\d]{4})([\d]{2})/gi, '$1-$2'), (endDate + '').replace(/([\d]{4})([\d]{2})/gi, '$1-$2')]
}
return item
})
......@@ -17,12 +17,12 @@ export default {
},
update: {
action: '/zws/v1/enrollment/educations/batch-upload',
data: { project_id: 1001 },
data: { project_id: 1000 },
callback(data) {
return data.map(item => {
let [startDate, endDate] = item.times
item.start_date = startDate
item.end_date = endDate
item.start_date = parseInt(startDate.replace(/-/gi, ''))
item.end_date = parseInt(endDate.replace(/-/gi, ''))
return item
})
}
......@@ -44,47 +44,51 @@ export default {
}
],
items: [
/* 教育时间 */
{
type: 'date-picker-form',
elemType: 'monthrange',
label: '教育时间',
model: 'times',
required: true,
attrs: { 'value-format': 'yyyy-MM' },
rules: [{ required: true, message: '请选择教育时间', trigger: 'blur' }]
'type': 'date-picker-from-to-form',
'elemType': 'monthrange',
'label': '教育时间',
'required': true,
'disabled': false,
'label-width': '160px',
'model': 'times',
'model-width': '300px',
'rangeSeparator': '至',
'startPlaceholder': '请选择开始时间',
'endPlaceholder': '请选择结束时间',
'attrs': { 'value-format': 'yyyy-MM' },
'rules': [{ 'required': true, 'message': '请选择教育时间', 'trigger': 'blur' }]
},
/* 学校名称 */
{
type: 'input-form',
label: '学校名称',
model: 'school_name_cn',
rules: [{ required: true, message: '请输入学校名称', trigger: 'blur' }]
'type': 'input-form',
'label': '学校名称',
'required': true,
'model': 'school_name_cn',
'model-width': '300px',
'placeholder': '请输入学校名称',
'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': 'input-form',
'label': '专业名称',
'required': true,
'model': 'major_cn',
'model-width': '300px',
'placeholder': '请输入专业名称',
'rules': [{ 'required': true, 'message': '请输入专业名称', 'trigger': 'blur' }]
},
/* 学历/学位 */
{
type: 'select-form',
values: [
{ label: '请选择', value: 0 },
'type': 'select-form',
'label': '学历/学位',
'required': true,
'model': 'degree',
'model-width': '300px',
'placeholder': '请选择',
'values': [
{ label: '专科', value: 1 },
{ label: '本科', value: 2 },
{ label: '本科/学士', value: 3 },
......@@ -94,10 +98,8 @@ export default {
{ label: '研究生/博士', value: 7 },
{ label: '其他', value: 9 }
],
label: '学历/学位',
model: 'degree',
rules: [
{ required: true, message: '请选择学历/学位', trigger: 'change' }
'rules': [
{ 'required': true, 'message': '请选择学历/学位', trigger: 'change' }
]
}
]
......
examples/sofia-form/file.js
浏览文件 @ bac83775
......@@ -19,27 +19,24 @@ export default {
},
form: {
options: {
labelWidth: '160px'
},
items: [
{
type: 'input-form',
label: '姓名',
model: 'real_name_cn',
placeholder: '123123',
rules: [
{
required: true,
message: '请输入活动名称',
trigger: 'blur'
type: 'upload-form',
label: '有效身份证件（正面）',
'action': '/zws/v1/enrollment/attachments',
'data': {
'file_type': 10,
'project_id': 1001
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
]
'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>
`
}
]
}
......
examples/sofia-form/honor.js
浏览文件 @ bac83775
export default {
id: 'honor',
title: '学习目的',
title: '荣誉和奖励（可选）',
showProgress: true,
progress: 0,
get: {
......@@ -22,24 +22,34 @@ export default {
labelWidth: '160px'
},
items: [
/* 荣誉/奖励名称 */
{
type: 'input-form',
label: '姓名',
model: 'real_name_cn',
placeholder: '123123',
rules: [
'type': 'input-form',
'label': '荣誉/奖励名称',
'required': false,
'model': 'title',
'model-width': '300px',
'placeholder': '请输入荣誉/奖励名称'
},
/* 颁发机构名称 */
{
required: true,
message: '请输入活动名称',
trigger: 'blur'
'type': 'input-form',
'label': '颁发机构名称',
'required': false,
'model': 'institution',
'model-width': '300px',
'placeholder': '请输入颁发机构名称'
},
/* 颁发时间 */
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
]
'type': 'date-picker-form',
'elemType': 'month',
'label': '颁发时间',
'required': false,
'model': 'time',
'model-width': '300px',
'placeholder': '请选择颁发时间',
'attrs': { 'value-format': 'yyyy-MM' }
}
]
}
......
examples/sofia-form/index.js
浏览文件 @ bac83775
......@@ -2,8 +2,9 @@ import profile from './profile'
import education from './education'
import career from './career'
import answer from './answer'
import training from './training'
import file from './file'
import training from './training'
import honor from './honor'
import declare from './declare'
export default [
......@@ -17,8 +18,9 @@ export default [
education,
career,
answer,
training,
file,
training,
honor,
declare
]
}
......
examples/sofia-form/training.js
浏览文件 @ bac83775
export default {
id: 'training',
title: '所受培训',
title: '所受培训（可选）',
showProgress: true,
progress: 0,
get: {
action: '/zws/v1/enrollment/trainings?project_id=1001',
action: '/zws/v1/enrollment/trainings?project_id=1000',
callback(data) {
data.date_of_starting_to_work = data.date_of_starting_to_work + ''
return data
return data.map(item => {
const { start_date: startDate, end_date: endDate } = item
if (startDate) {
item.times = [(startDate + '').replace(/([\d]{4})([\d]{2})/gi, '$1-$2'), (endDate + '').replace(/([\d]{4})([\d]{2})/gi, '$1-$2')]
}
return item
})
}
},
update: {
action: '/api/v1/enrollment/trainings',
data: { project_id: 1001 },
data: { project_id: 1000 },
callback(data) {
return data
return data.map(item => {
let [startDate, endDate] = item.times
item.start_date = parseInt(startDate.replace(/-/gi, ''))
item.end_date = parseInt(endDate.replace(/-/gi, ''))
return item
})
}
},
form: {
options: {
labelWidth: '160px'
},
model: [
{
times: [],
start_date: null,
end_date: null,
institute_cn: '',
course_cn: ''
}
],
items: [
/* 培训时间 */
{
type: 'input-form',
label: '姓名',
model: 'real_name_cn',
placeholder: '123123',
rules: [
'type': 'date-picker-from-to-form',
'elemType': 'monthrange',
'label': '培训时间',
'required': false,
'disabled': false,
'label-width': '160px',
'model': 'times',
'model-width': '300px',
'rangeSeparator': '至',
'startPlaceholder': '请选择开始时间',
'endPlaceholder': '请选择结束时间',
'attrs': { 'value-format': 'yyyy-MM' }
},
/* 培训机构 */
{
required: true,
message: '请输入活动名称',
trigger: 'blur'
'type': 'input-form',
'label': '培训机构',
'required': false,
'model': 'institute_cn',
'model-width': '300px',
'placeholder': '请输入培训机构'
},
/* 课程名称 */
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
]
'type': 'input-form',
'label': '课程名称',
'required': false,
'model': 'course_cn',
'model-width': '300px',
'placeholder': '请输入课程名称'
}
]
}
......
src/components/elem-form/city-select-form/src/citySelectForm.vue
浏览文件 @ bac83775
<template>
<div class="input-form">
<div class="city-select-form">
<el-form-item
:key="item.model"
:prop="item.model"
......
src/components/elem-form/date-picker-form/src/datePickerForm.vue
浏览文件 @ bac83775
<template>
<div class="select-form">
<div class="date-picker-form">
<el-form-item
:key="item.model"
:prop="item.model"
......
src/components/elem-form/date-picker-from-to-form/elemInfo.md
浏览文件 @ bac83775
......@@ -4,6 +4,17 @@
| ------- | ------------------------- | ------- | ----- |
| `type` | 类型：`String`; 说明：组件类型名 | 自定义字段 | `date-picker-from-to-form` |
| `elemType` | 类型：`String`; 说明：组件类型选择 | element-ui el-date-picker对应字段 | `daterange` |
| `label` | 类型：`String`; 说明：组件左侧显示名称 | element-ui el-form-item对应字段 | `''` |
| `label-width` | 类型：`String`; 说明：组件左侧显示名称宽度（加单位），父级设置可以子级继承 | element-ui el-form-item对应字段 | `''` |
| `required` | 类型：`Boolean`; 说明：标识是否必填 | element-ui el-form-item对应字段 | `false` |
| `disabled` | 类型：`Boolean`; 说明：标识是否只读 | element-ui el-form-item对应字段 | `false` |
| `model` | 类型：`String`; 说明：表单提交name值和回显对照字段 | 自定义字段 | `''` |
| `model-width` | 类型：`String`; 说明：右侧输入组件宽度（加单位） | 自定义字段 | `'100%'` |
| `rangeSeparator` | 类型：`String`; 说明：中间分隔符 | 自定义字段 | `'-'` |
| `startPlaceholder` | 类型：`String`; 说明：开始时间提示 | 自定义字段 | `''` |
| `endPlaceholder` | 类型：`String`; 说明：结束时间提示 | 自定义字段 | `''` |
| `attrs` | 类型：`Object`; 说明：定义标签上Data属性值 | element-ui对应字段 | `{}` |
| `rules` | 类型：`Array`; 说明：组件错误提示规则 | element-ui el-form-item对应字段 | `[]` |
### Demo:
``` js
......
src/components/elem-form/date-picker-from-to-form/src/datePickerFromToForm.vue
浏览文件 @ bac83775
<template>
<div class="select-form">
<div class="date-picker-from-to-form">
<el-form-item
:key="item.model"
:prop="item.model"
......
src/components/elem-form/index.js
浏览文件 @ bac83775
......@@ -31,6 +31,7 @@ import CitySelectForm from './city-select-form'
import DatePickerForm from './date-picker-form'
import DatePickerFromToForm from './date-picker-from-to-form'
import RadioGroupForm from './radio-group-form'
import UploadForm from './upload-form'
const components = [
InputForm,
......@@ -39,7 +40,8 @@ const components = [
CitySelectForm,
DatePickerForm,
DatePickerFromToForm,
RadioGroupForm
RadioGroupForm,
UploadForm
]
const install = function(Vue, opts = {}) {
......@@ -96,5 +98,6 @@ export default {
CitySelectForm,
DatePickerForm,
DatePickerFromToForm,
RadioGroupForm
RadioGroupForm,
UploadForm
}
src/components/elem-form/radio-group-form/src/radioGroupForm.vue
浏览文件 @ bac83775
<template>
<div class="select-form">
<div class="radio-group-form">
<el-form-item
:key="item.model"
:prop="item.model"
......
src/components/elem-form/textarea-form/elemInfo.md
浏览文件 @ bac83775
......@@ -3,6 +3,15 @@
| 字段值 | 说明 | 字段属性 | 默认值 |
| ------- | ------------------------- | ------- | ----- |
| `type` | 类型：`String`; 说明：组件类型名 | 自定义字段 | `textarea-form` |
| `label` | 类型：`String`; 说明：组件左侧显示名称 | element-ui el-form-item对应字段 | `''` |
| `label-width` | 类型：`String`; 说明：组件左侧显示名称宽度（加单位），父级设置可以子级继承 | element-ui el-form-item对应字段 | `''` |
| `required` | 类型：`Boolean`; 说明：标识是否必填 | element-ui el-form-item对应字段 | `false` |
| `disabled` | 类型：`Boolean`; 说明：标识是否只读 | element-ui el-form-item对应字段 | `false` |
| `model` | 类型：`String`; 说明：表单提交name值和回显对照字段 | 自定义字段 | `''` |
| `model-width` | 类型：`String`; 说明：右侧输入组件宽度（加单位） | 自定义字段 | `'100%'` |
| `placeholder` | 类型：`String`; 说明：组件input框中，默认提示文字 | element-ui el-input对应字段 | `''` |
| `attrs` | 类型：`Object`; 说明：定义标签上Data属性值 | element-ui对应字段 | `{}` |
| `rules` | 类型：`Array`; 说明：组件错误提示规则 | element-ui el-form-item对应字段 | `[]` |
### Demo:
``` js
......@@ -14,19 +23,22 @@
'label-width': '160px',
'model': 'work_info',
'model-width': '',
'rows': 0,
'placeholder': '请详细描述您的职责范围，工作任务以及取得的成绩等，填写文字在100个字以上评定等级，少于不计算，内容越详细，等级越高。（字限3000字以内）',
'attrs': {},
'attrs': {
'rows': '8',
'maxlength': '1000',
'show-word-limit': true
},
'rules': [
{
'required': true,
'message': '请输入活动名称',
'message': '请输入内容',
'trigger': 'blur'
},
{
'min': 3,
'max': 5,
'message': '长度在 3 到 5 个字符',
'min': 60,
'max': 1000,
'message': '长度在 60 到 1000 个字符',
'trigger': 'blur'
}
]
......
src/components/elem-form/textarea-form/src/textareaForm.vue
浏览文件 @ bac83775
<template>
<div class="select-form">
<div class="textarea-form">
<el-form-item
:key="item.model"
:prop="item.model"
......@@ -11,7 +11,6 @@
>
<el-input :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
type="textarea"
:rows="item.rows || 3"
v-bind="item.attrs || {}"
v-on="$listeners"
v-model="formData[item.model]"
......
src/components/elem-form/upload-form/elemInfo.md 0 → 100644
浏览文件 @ bac83775
## 组件简介
| 字段值 | 说明 | 字段属性 | 默认值 |
| ------- | ------------------------- | ------- | ----- |
| `type` | 类型：`String`; 说明：组件类型名 | 自定义字段 | `upload-form` |
| `action` | 类型：`String`; 说明：请求接口path | 自定义字段 | `` |
| `html` | 类型：`String`; 说明：上传说明，支持html | 自定义字段 | `` |
| `label` | 类型：`String`; 说明：组件左侧显示名称 | element-ui el-form-item对应字段 | `''` |
| `label-width` | 类型：`String`; 说明：组件左侧显示名称宽度（加单位），父级设置可以子级继承 | element-ui el-form-item对应字段 | `''` |
| `required` | 类型：`Boolean`; 说明：标识是否必填 | element-ui el-form-item对应字段 | `false` |
| `disabled` | 类型：`Boolean`; 说明：标识是否只读 | element-ui el-form-item对应字段 | `false` |
| `model` | 类型：`String`; 说明：表单提交name值和回显对照字段 | 自定义字段 | `''` |
| `model-width` | 类型：`String`; 说明：右侧输入组件宽度（加单位） | 自定义字段 | `'100%'` |
| `placeholder` | 类型：`String`; 说明：组件input框中，默认提示文字 | element-ui el-input对应字段 | `''` |
| `attrs` | 类型：`Object`; 说明：定义标签上Data属性值 | element-ui对应字段 | `{}` |
| `rules` | 类型：`Array`; 说明：组件错误提示规则 | element-ui el-form-item对应字段 | `[]` |
### Demo Example:
``` js
{
'type': 'upload-form',
'label': '姓名',
'label-width': '160px',
'required': true,
'disabled': false,
'model': 'real_name_cn',
'model-width': '',
'placeholder': '请输入姓名',
'action': '',
'data': {
},
'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': false
'limit': 1
},
'rules': [
{
'required': true,
'message': '请输入姓名',
'trigger': 'blur'
},
{
'min': 3,
'max': 5,
'message': '长度在 3 到 5 个字符',
'trigger': 'blur'
}
]
}
```
* 其他属性 [参考文档]([https://](https://element.eleme.cn/#/zh-CN/component/input))
src/components/elem-form/upload-form/index.js 0 → 100644
浏览文件 @ bac83775
import Upload from './src/uploadForm'
/* istanbul ignore next */
Upload.install = function (Vue) {
Vue.component(Upload.name, Upload)
}
export default Upload
src/components/elem-form/upload-form/src/uploadForm.vue 0 → 100644
浏览文件 @ bac83775
<template>
<div class="upload-form">
<el-form-item
:key="item.model"
:prop="item.model"
:label="item.label || ''"
:label-width="item.labelWidth || item['label-width'] || ''"
:required="item.required || false"
:rules="item.rules || []"
:size="item.size"
>
<el-upload
:action="item.action"
:data="item.data"
:before-upload="beforeUploadFile"
:with-credentials="true"
v-bind="item.attrs || {}">
<el-button type="primary">点击上传</el-button>
<template v-if="formData[item.model]">
<!-- 遍历显示文件 -->
{{successFileUrl.replace(/.*\/([^\/]*\.docx)$/gi, '$1')}}
</template>
</el-upload>
<div class='info' style="line-height: 1.5;" v-html="item.html"></div>
<!-- <el-input :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
v-bind="item.attrs || {}"
v-on="$listeners"
v-model="formData[item.model]"
:disabled="item.disabled || false"
:placeholder="item.placeholder || ''"
></el-input> -->
</el-form-item>
</div>
</template>
<script>
export default {
name: 'UploadForm',
componentName: 'UploadForm',
props: {
item: {
type: Object,
default () {
return {}
}
},
formData: {
type: Object,
default () {
return {}
}
}
},
data () {
return {
successFileUrl: '',
filesArr: [],
file: {
id: 'WU_FILE_0',
name: '',
type: '',
lastModifiedDate: '',
size: '',
file: ''
}
}
},
methods: {
handleChange (file, filelist) {
this.file.name = file.raw.name
this.file.type = file.raw.type
this.file.lastModifiedDate = file.raw.lastModifiedDate
this.file.size = file.raw.size
this.file.file = file.raw
},
beforeUploadFile (file) {
debugger
},
uploadFile () {
// if (!/\.(docx)$/gi.test(this.file.name)) {
// this.$message.error('文件格式不对，请重新上传')
// this.filesArr.pop()
// return
// }
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// cAction.chapterAction.uploadFile(this.file).then(data => {
// this.successFileUrl = data.url
// this.filesArr.pop()
// }).catch(e => { this.filesArr.pop(); this.$message.error(e.message) }).finally(() => { loading.close() })
}
}
}
</script>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论