|
|
|
@ -1,47 +1,76 @@ |
|
|
|
<template> |
|
|
|
<div class="resi-container"> |
|
|
|
<el-form class="resi-form"> |
|
|
|
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row" :gutter="20"> |
|
|
|
<el-col v-for="n in item" :key="n.id" :span="6"> |
|
|
|
<el-form-item> |
|
|
|
<div class="resi-cell"> |
|
|
|
<div class="resi-cell-label">{{n.label}}</div> |
|
|
|
<div class="resi-cell-value" :class="n.item_type === 'radio' && 'resi-cell-value-radio'"> |
|
|
|
<div :id="formId" class="resi-container"> |
|
|
|
<el-form :ref="formId" class="resi-form" :model="form" :rules="rules" :label-width="labelWidth"> |
|
|
|
<el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row"> |
|
|
|
<el-col v-for="n in item" :key="n.id" :span="n.item_type === 'textarea'&&24 || 6"> |
|
|
|
<el-form-item :prop="n.column_name" :label="n.label"> |
|
|
|
<!-- <div class="resi-cell"> --> |
|
|
|
<!-- <div class="resi-cell-label">{{n.label}}</div> --> |
|
|
|
<div class="resi-cell-value"> |
|
|
|
<template v-if="n.item_type === 'input'"> |
|
|
|
<el-input |
|
|
|
v-if="n.item_type === 'input'" |
|
|
|
v-if="n.valid_type" |
|
|
|
v-model="form[n.column_name]" |
|
|
|
class="resi-cell-input" |
|
|
|
size="small" |
|
|
|
clearable |
|
|
|
placeholder="请输入内容" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
<el-input |
|
|
|
v-else |
|
|
|
v-model="form[n.column_name]" |
|
|
|
class="resi-cell-input" |
|
|
|
size="small" |
|
|
|
clearable |
|
|
|
placeholder="请输入内容" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
</template> |
|
|
|
<template v-if="n.item_type === 'textarea'"> |
|
|
|
<el-input |
|
|
|
v-model="form[n.column_name]" |
|
|
|
class="resi-cell-textarea" |
|
|
|
size="small" |
|
|
|
type="textarea" |
|
|
|
clearable |
|
|
|
placeholder="请输入内容" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
</template> |
|
|
|
<el-date-picker |
|
|
|
v-else-if="n.item_type === 'date'" |
|
|
|
v-model="value" |
|
|
|
v-model="form[n.column_name]" |
|
|
|
class="resi-cell-input" |
|
|
|
type="date" |
|
|
|
size="small" |
|
|
|
clearable |
|
|
|
placeholder="选择日期"> |
|
|
|
</el-date-picker> |
|
|
|
<el-select v-else-if="n.item_type === 'select'" v-model="value" placeholder="请选择" size="small" class="resi-cell-select"> |
|
|
|
<el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]" |
|
|
|
placeholder="请选择" size="small" clearable class="resi-cell-select"> |
|
|
|
<el-option |
|
|
|
v-for="item in options" |
|
|
|
v-for="item in n.option_source_value || options" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<template v-else-if="n.item_type === 'radio'"> |
|
|
|
<el-radio label="1">备选项</el-radio> |
|
|
|
<el-radio label="1">备选项</el-radio> |
|
|
|
<el-radio v-for="ns in n.option_source_value" :key="ns.value" v-model="form[n.column_name]" |
|
|
|
:label="ns.value"> |
|
|
|
{{ ns.label }} |
|
|
|
</el-radio> |
|
|
|
<!-- <el-radio v-model="form[n.column_name]" label="1">备选项</el-radio> --> |
|
|
|
</template> |
|
|
|
<template v-else-if="n.item_type === 'checkbox'"> |
|
|
|
<el-checkbox-group v-model="checkList"> |
|
|
|
<el-checkbox-group v-model="form[n.column_name]"> |
|
|
|
<el-checkbox label="复选框 A"></el-checkbox> |
|
|
|
<el-checkbox label="复选框 B"></el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- </div> --> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
@ -50,20 +79,19 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
let form = {} |
|
|
|
function initForm (obj, arr) { |
|
|
|
console.log('formInfo', obj) |
|
|
|
if (Object.keys(obj).length > 0) { |
|
|
|
form = { ...obj } |
|
|
|
return |
|
|
|
} |
|
|
|
arr.forEach(item => { |
|
|
|
form[item.column_name] = '' |
|
|
|
// this.$set(form, item.column_name, '') |
|
|
|
}) |
|
|
|
} |
|
|
|
import { isCard, isMobile } from '@/utils/validate' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'resiForm', |
|
|
|
props: { |
|
|
|
labelWidth: { |
|
|
|
type: String, |
|
|
|
default: '100px' |
|
|
|
}, |
|
|
|
formId: { |
|
|
|
type: String, |
|
|
|
default: 'resiForm' |
|
|
|
}, |
|
|
|
formList: { |
|
|
|
type: Array, |
|
|
|
default: function () { |
|
|
|
@ -78,8 +106,61 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
data () { |
|
|
|
console.log('data-ttttt--', this.formList) |
|
|
|
let form = {} |
|
|
|
// let rules = {} |
|
|
|
let checkMObile = (rule, value, callback) => { |
|
|
|
if (value === '') { |
|
|
|
callback(new Error('请输入手机号')) |
|
|
|
} else { |
|
|
|
if (!isMobile(value)) { |
|
|
|
callback(new Error('手机号格式不正确')) |
|
|
|
} |
|
|
|
callback() |
|
|
|
} |
|
|
|
} |
|
|
|
let checkIdCard = (rule, value, callback) => { |
|
|
|
if (value === '') { |
|
|
|
callback(new Error('请输入身份证')) |
|
|
|
} else { |
|
|
|
if (!isCard(value)) { |
|
|
|
callback(new Error('身份证号格式不正确')) |
|
|
|
} |
|
|
|
callback() |
|
|
|
} |
|
|
|
} |
|
|
|
let initForm = (obj, arr) => { |
|
|
|
console.log('formInfo', obj) |
|
|
|
if (Object.keys(obj).length > 0) { |
|
|
|
form = { ...obj } |
|
|
|
return |
|
|
|
} |
|
|
|
arr.forEach(item => { |
|
|
|
form[item.column_name] = '' |
|
|
|
}) |
|
|
|
} |
|
|
|
let initRules = (arr) => { |
|
|
|
let rules = {} |
|
|
|
arr.forEach(item => { |
|
|
|
if (item.require) { |
|
|
|
if (item.valid_type === 'mobile') { |
|
|
|
rules[item.column_name] = [ |
|
|
|
{ validator: checkMObile, trigger: 'blur' } |
|
|
|
] |
|
|
|
} else if (item.valid_type === 'id_card') { |
|
|
|
rules[item.column_name] = [ |
|
|
|
{ validator: checkIdCard, trigger: 'blur' } |
|
|
|
] |
|
|
|
} else { |
|
|
|
rules[item.column_name] = [ |
|
|
|
{ required: true, message: `请输入${item.label}`, trigger: 'blur' } |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
return rules |
|
|
|
} |
|
|
|
initForm(this.formInfo, this.formList) |
|
|
|
let rules = initRules(this.formList) |
|
|
|
return { |
|
|
|
openSearch: false, |
|
|
|
options: [{ |
|
|
|
@ -99,6 +180,7 @@ export default { |
|
|
|
label: '北京烤鸭' |
|
|
|
}], |
|
|
|
form, |
|
|
|
rules, |
|
|
|
value: '', |
|
|
|
checkList: ['选中且禁用', '复选框 A'] |
|
|
|
} |
|
|
|
@ -144,76 +226,49 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.resi-container .resi-card { |
|
|
|
position: relative; |
|
|
|
overflow: visible; |
|
|
|
} |
|
|
|
.resi-down { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
bottom: -10px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 46px; |
|
|
|
height: 12px; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-left: -23rpx; |
|
|
|
cursor: pointer; |
|
|
|
background: #FFFFFF; |
|
|
|
border-radius: 0 0 10px 10px; |
|
|
|
img { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
.resi-row-box { |
|
|
|
height: 104px; |
|
|
|
overflow: hidden; |
|
|
|
transition: height .5s; |
|
|
|
} |
|
|
|
.resi-row-more { |
|
|
|
height: max-content; |
|
|
|
transition: height .5s; |
|
|
|
.el-date-editor.el-input, .el-date-editor.el-input__inner { |
|
|
|
width: 100% !important; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
.resi-form .resi-row { |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
.resi-search { |
|
|
|
.el-col { |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
} |
|
|
|
.resi-cell { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.resi-cell-label { |
|
|
|
width: 70px; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-right: 15px; |
|
|
|
text-align: right; |
|
|
|
// line-height: 32; |
|
|
|
} |
|
|
|
.resi-cell-value-radio { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
min-height: 32px; |
|
|
|
} |
|
|
|
.resi-cell-input { |
|
|
|
width: 180px; |
|
|
|
} |
|
|
|
.resi-cell-select { |
|
|
|
width: 180px; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-right: 10px; |
|
|
|
&-middle { |
|
|
|
width: 130px; |
|
|
|
} |
|
|
|
&-small { |
|
|
|
width: 88px; |
|
|
|
} |
|
|
|
|
|
|
|
// .resi-form .resi-cell { |
|
|
|
// display: flex; |
|
|
|
// align-items: center; |
|
|
|
// .resi-cell-label { |
|
|
|
// width: 70px; |
|
|
|
// box-sizing: border-box; |
|
|
|
// margin-right: 15px; |
|
|
|
// text-align: right; |
|
|
|
// } |
|
|
|
// .resi-cell-value-radio { |
|
|
|
// display: flex; |
|
|
|
// align-items: center; |
|
|
|
// min-height: 36px; |
|
|
|
// } |
|
|
|
// .resi-cell-value .resi-cell-input { |
|
|
|
// width: 180px; |
|
|
|
// } |
|
|
|
.resi-cell-value .resi-cell-textarea { |
|
|
|
width: 300px; |
|
|
|
} |
|
|
|
// .resi-cell-select { |
|
|
|
// width: 180px; |
|
|
|
// box-sizing: border-box; |
|
|
|
// margin-right: 10px; |
|
|
|
// &-middle { |
|
|
|
// width: 130px; |
|
|
|
// } |
|
|
|
// &-small { |
|
|
|
// width: 88px; |
|
|
|
// } |
|
|
|
// } |
|
|
|
.resi-cell-select:last-child { |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
// } |
|
|
|
</style> |
|
|
|
|
13176889840
4 years ago