问题:
我们想在form表单中进行遍历input、select等多种选择,那么我们需要的数据结构就是:
formList: [
{
value: '',
label: '门诊号',
prop: 'clinicNo',
type: 'input'
},
{
value: '',
label: '住院号',
prop: 'hospitalNo',
type: 'input'
},
{
value: '',
label: '案例号',
prop: 'medicalRecordNo',
type: 'input'
},
{
value: '',
label: '就诊类型',
prop: 'visitType',
type: 'select',
list: [
{
label: '住院',
value: '1'
},
{
label: '门诊',
value: '2'
},
{
label: '急诊',
value: '3'
},
{
label: '体检',
value: '4'
}
]
},
{
value: '',
label: '就诊日期时间',
prop: 'visitDateTime',
type: 'datatime'
},
{
value: '',
label: '机构名称',
prop: 'orgName',
type: 'input'
},
{
value: '',
label: '组织机构代码',
prop: 'orgCode',
type: 'input'
}
]
注:value是输入后的值,label是显示信息,prop表示当前的名字,type表示是哪种输入框类型
解决办法:
表单验证中需要将prop与value的名字一致,然后需要将他们的结构一致。所以我们的数据结构类型如下:
// 验证值
isVisitDialogOpenFormRules: {
clinicNo: this.$filterRules(
{ name: '门诊号', type: 1, required: true },
[
{
pattern: /^[A-Za-z0-9]{1,200}$/,
message: '请输入 200 位以内数字或字母'
}
]
),
hospitalNo: this.$filterRules(
{ name: '住院号', type: 1, required: true },
[
{
pattern: /^[A-Za-z0-9]{1,200}$/,
message: '请输入 200 位以内数字或字母'
}
]
),
medicalRecordNo: this.$filterRules(
{ name: '案例号', type: 1, required: true },
[
{
pattern: /^[A-Za-z0-9]{1,200}$/,
message: '请输入 200 位以内数字或字母'
}
]
),
visitType: this.$filterRules({
name: '就诊类型',
type: 2,
required: true
}),
visitDateTime: this.$filterRules({
name: '就诊日期时间',
type: 2,
required: true
}),
orgName: this.$filterRules(
{ name: '机构名称', type: 1, required: true },
[
{
pattern: /^[A-Za-z0-9]{1,200}$/,
message: '请输入 200 位以内数字或字母'
}
]
),
orgCode: this.$filterRules(
{ name: '组织机构代码', type: 1, required: true },
[
{
pattern: /^[A-Za-z0-9]{1,200}$/,
message: '请输入 200 位以内数字或字母'
}
]
)
},
// value值
isVisitDialogOpenForm: {
clinicNo: '',
hospitalNo: '',
medicalRecordNo: '',
visitType: '',
visitDateTime: '',
orgName: '',
orgCode: ''
},
html的循环结构如下:
<el-form
ref="refIsVisitDialogOpen"
class="main-form"
size="mini"
:label-position="labelPosition"
label-width="120px"
:rules="isVisitDialogOpenFormRules"
:model="isVisitDialogOpenForm"
>
<el-form-item
v-for="item in formList"
:key="item.label"
:prop="item.prop"
:label="item.label"
>
<el-input
v-if="item.type === 'input'"
v-model="isVisitDialogOpenForm[item.prop]"
></el-input>
<el-date-picker
v-if="item.type === 'datatime'"
v-model="isVisitDialogOpenForm[item.prop]"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
<el-select
v-if="item.type === 'select'"
v-model="isVisitDialogOpenForm[item.prop]"
placeholder="请选择"
>
<el-option
v-for="(itmList, iList) in item.list"
:key="iList"
:label="itmList.label"
:value="itmList.value"
></el-option>
</el-select>
</el-form-item>
显示结果如下:
这样才能解决他所有的遍历可以通过后台来控制,结构缺一不可。
附上vue源码,当前是组件:
<template>
<div>
<dhc-dialog
v-model="isDialog"
title="编辑通用访视"
width="32%"
iconfont="iconxiugai"
@sure="isVisitDialogOpenSure"
@close="isVisitDialogOpenClose"
>
<el-form
ref="refIsVisitDialogOpen"
class="main-form"
size="mini"
:label-position="labelPosition"
label-width="120px"
:rules="isVisitDialogOpenFormRules"
:model="isVisitDialogOpenForm"
>
<el-form-item
v-for="item in formList"
:key="item.label"
:prop="item.prop"
:label="item.label"
>
<el-input
v-if="item.type === 'input'"
v-model="isVisitDialogOpenForm[item.prop]"
></el-input>
<el-date-picker
v-if="item.type === 'datatime'"
v-model="isVisitDialogOpenForm[item.prop]"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
<el-select
v-if="item.type === 'select'"
v-model="isVisitDialogOpenForm[item.prop]"
placeholder="请选择"
>
<el-option
v-for="(itmList, iList) in item.list"
:key="iList"
:label="itmList.label"
:value="itmList.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
</dhc-dialog>
</div>
</template>
<script>
export default {
props: {
// 是否打开此弹框
isVisitDialogOpen: {
type: Boolean,
default: () => {
return false
}
},
// 当前行数据
addVisitOpenObj: {
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
// 验证值
isVisitDialogOpenFormRules: {
clinicNo: this.$filterRules(
{ name: '门诊号', type: 1, required: true },
[
{
pattern: /^[A-Za-z0-9]{1,200}$/,
message: '请输入 200 位以内数字或字母'
}
]
),
hospitalNo: this.$filterRules(
{ name: '住院号', type: 1, required: true },
[
{
pattern: /^[A-Za-z0-9]{1,200}$/,
message: '请输入 200 位以内数字或字母'
}
]
),
medicalRecordNo: this.$filterRules(
{ name: '案例号', type: 1, required: true },
[
{
pattern: /^[A-Za-z0-9]{1,200}$/,
message: '请输入 200 位以内数字或字母'
}
]
),
visitType: this.$filterRules({
name: '就诊类型',
type: 2,
required: true
}),
visitDateTime: this.$filterRules({
name: '就诊日期时间',
type: 2,
required: true
}),
orgName: this.$filterRules(
{ name: '机构名称', type: 1, required: true },
[
{
pattern: /^[A-Za-z0-9]{1,200}$/,
message: '请输入 200 位以内数字或字母'
}
]
),
orgCode: this.$filterRules(
{ name: '组织机构代码', type: 1, required: true },
[
{
pattern: /^[A-Za-z0-9]{1,200}$/,
message: '请输入 200 位以内数字或字母'
}
]
)
},
// value值
isVisitDialogOpenForm: {
clinicNo: '',
hospitalNo: '',
medicalRecordNo: '',
visitType: '',
visitDateTime: '',
orgName: '',
orgCode: ''
},
labelPosition: 'right',
// form表单list
formList: [
{
value: '',
label: '门诊号',
prop: 'clinicNo',
type: 'input'
},
{
value: '',
label: '住院号',
prop: 'hospitalNo',
type: 'input'
},
{
value: '',
label: '案例号',
prop: 'medicalRecordNo',
type: 'input'
},
{
value: '',
label: '就诊类型',
prop: 'visitType',
type: 'select',
list: [
{
label: '住院',
value: '1'
},
{
label: '门诊',
value: '2'
},
{
label: '急诊',
value: '3'
},
{
label: '体检',
value: '4'
}
]
},
{
value: '',
label: '就诊日期时间',
prop: 'visitDateTime',
type: 'datatime'
},
{
value: '',
label: '机构名称',
prop: 'orgName',
type: 'input'
},
{
value: '',
label: '组织机构代码',
prop: 'orgCode',
type: 'input'
}
]
}
},
computed: {
isDialog: {
get() {
return this.isVisitDialogOpen
},
set() {}
}
},
watch: {},
mounted() {
this.getSubjectVisitAttr()
},
methods: {
// 获取数据
getSubjectVisitAttr() {
const data = {
subjectCode: this.addVisitOpenObj.item.subjectCode,
subjectVisitCode: this.addVisitOpenObj.item.code
}
this.$api.subjectVisitAttr.getSubjectVisitAttr(data).then(res => {
console.log(res, 'res')
if (res.data) {
this.isVisitDialogOpenForm = res.data
// this.formList.map(item => {
// item.value = res?.data[item.prop]
// })
}
})
},
// 确定按钮
isVisitDialogOpenSure() {
console.log('确定')
this.$refs['refIsVisitDialogOpen'].validate(valid => {
if (valid) {
// alert('submit!')
this.saveOrUpdateSubjectVisitAttr()
} else {
console.log('error submit!!')
return false
}
})
},
// 保存数据
saveOrUpdateSubjectVisitAttr() {
const data = this.isVisitDialogOpenForm
// const data = {}
// this.formList.map(item => {
// data[item.prop] = item.value
// })
// data.researchCode = this.researchCode
// data.subjectCode = this.addVisitOpenObj.item.subjectCode
// data.subjectVisitCode = this.addVisitOpenObj.item.code
this.$api.subjectVisitAttr
.saveOrUpdateSubjectVisitAttr(data)
.then(res => {
console.log(res, 'res')
this.$emit('closeEditoralvisit', false)
})
},
// 取消
isVisitDialogOpenClose() {
console.log('取消')
this.$emit('closeEditoralvisit', false)
}
}
}
</script>