<template>
<div>
<van-form ref='form'>
<div class='title'>居民信息</div>
<!-- <div class='label-title'>证件类型</div>
<van-field
v-model='form.certificateTypeName'
is-link
readonly
placeholder='证件类型'
class='input-back mt-2 form-input'
:rules='rules.certificateTypeName'
/>-->
<!-- <div class='label-title mt-5'>证件号码</div>
<van-field
v-model='form.idCard'
readonly
placeholder='证件号码'
class='input-back mt-2 form-input'
:rules='rules.idCard'
/>-->
<div class='label-title mt-5'>姓名</div>
<van-field
v-model='form.residentName'
clearable
placeholder='姓名'
class='input-back mt-2 form-input'
:rules='rules.residentName'
/>
<!-- <div class='label-title mt-5'>性别</div>
<van-field
v-model='form.genderName'
is-link
readonly
placeholder='性别'
class='input-back mt-2 form-input'
:rules='rules.genderName'
/>-->
<!-- <div class='label-title mt-5'>出生日期</div>
<van-field
v-model='form.dataBirth'
is-link
readonly
placeholder='出生日期'
class='input-back mt-2 form-input'
:rules='rules.dataBirth'
/>-->
<div class='label-title mt-5'>本人电话</div>
<van-field
v-model='form.telephone'
clearable
placeholder='本人电话'
class='input-back mt-2 form-input'
:rules='rules.telephone'
/>
<div class='label-title mt-5'>民族</div>
<van-field
v-model='form.nationalName'
is-link
readonly
name='national'
placeholder='请选择'
class='input-back mt-2 form-input'
:rules='rules.nationalName'
@click='showNational = true' />
<van-popup v-model:show='showNational' position='bottom'>
<van-picker
:columns-field-names="{ text: 'name', value: 'value' }"
:columns="store.getDict('DC00006')"
@confirm='nationalConfirm'
@cancel='showNational = false'
/>
</van-popup>
<!-- <div class='label-title mt-5'>年龄</div>
<van-field
v-model='form.currentAge'
readonly
placeholder='年龄'
class='input-back mt-2 form-input'
:rules='rules.currentAge'
/>-->
<div class='label-title mt-5'>现住址</div>
<van-field
v-model='form.presentCodeName'
is-link
readonly
style='min-height: 26px!important;'
placeholder='请选择所在地区'
class='input-back mt-2 form-input'
:rules='rules.presentCodeName'
@click='showPresent = true'
>
<template #input>
<span class='text-end'>{{ form.presentCodeName }}</span>
</template>
</van-field>
<van-popup v-model:show='showPresent' :close-on-click-overlay='false' position='bottom'>
<DocAddress v-model:value='form.presentCode' @close='showPresent = false'
:viewData='addressRecord.presentCode'
@change='presentChange' />
</van-popup>
<div class='no-req-label mt-5'>详细地址</div>
<van-field
v-model='form.nowAddress'
clearable
class='input-back mt-2 form-input'
placeholder='请填写详细地址'
maxlength='50'
/>
<div class='flex items-center justify-between mt-5'>
<div class='label-title '>户口地址</div>
<van-button size='mini' plain type='primary'
@click='setRegisteredAddress'>同步现住址
</van-button>
</div>
<van-field
v-model='form.registeredCodeName'
is-link
readonly
placeholder='请选择所在地区'
class='input-back mt-2 form-input'
:rules='rules.registeredCode'
@click='showRegistered = true'
>
<template #input>
<span class='text-end'>{{ form.registeredCodeName }}</span>
</template>
</van-field>
<van-popup v-model:show='showRegistered' :close-on-click-overlay='false' position='bottom'>
<DocAddress v-model:value='form.registeredCode' @close='showRegistered = false'
:viewData='addressRecord.registeredCode'
@change='registeredChange' />
</van-popup>
<div class='no-req-label mt-5'>详细地址</div>
<van-field
v-model='form.permanentAddress'
clearable
class='input-back mt-2 form-input'
placeholder='请填写详细地址'
maxlength='50'
/>
<div class='title mt-5'>联系人信息</div>
<div class='no-req-label mt-5'>联系人姓名</div>
<van-field
v-model='form.contactName'
clearable
placeholder='联系人姓名'
class='input-back mt-2 form-input'
:rules='rules.contactName'
/>
<div class='no-req-label mt-5'>与居民关系</div>
<van-field
v-model='form.relationName'
readonly
is-link
placeholder='与居民关系'
class='input-back mt-2 form-input'
@click='showRelation= true'
/>
<van-popup v-model:show='showRelation' position='bottom'>
<van-picker
:columns-field-names="{ text: 'name', value: 'value' }"
:columns="store.getDict('DC00023')"
@confirm='relationlConfirm'
@cancel='showRelation = false'
/>
</van-popup>
<van-field
v-if='form.relation == 99'
v-model='form.relationOther'
clearable
placeholder='其他关系'
class='input-back mt-2 form-input'
/>
<div class='no-req-label mt-5'>联系电话</div>
<van-field
v-model='form.contactPhone'
clearable
placeholder='联系电话'
class='input-back mt-2 form-input'
:rules='rules.contactPhone'
/>
<div class='title mt-5'>随访信息</div>
<div class='label-title mt-5'>随访人群</div>
<van-field
v-model='form.groupsArraysName'
readonly
is-link
placeholder='请选择'
class='input-back mt-2 form-input'
:rules='rules.groupsArraysName'
@click='showGroupsArrays= true'
>
<template #input>
<span class='text-end'>{{form.groupsArraysName}}</span>
</template>
</van-field>
<van-popup v-model:show='showGroupsArrays' position='bottom'>
<div class='p-4'>
<div class='flex justify-between mb-4'>
<div class='greyColor' @click='showGroupsArrays = false'>取消</div>
<div class='blueColor' @click='groupsArraysConfirm'>确认</div>
</div>
<CheckBtn multiple :options='groupArrList' v-model:value='checkGroupsArrays' :fieldNames="{text: 'name', value: 'value'}"/>
</div>
</van-popup>
<div class='label-title mt-5'>随访方式</div>
<van-field
v-model='form.visitWayName'
readonly
is-link
placeholder='请选择'
class='input-back mt-2 form-input'
:style="{borderRadius: form.visitWayName ? '8px 8px 0px 0px ': '8px'}"
:rules='rules.visitWay'
@click='showVisitWay= true'
/>
<div class='tel-back' v-if='form.visitWayName'>
<div class='tel flex items-center justify-between'>
<div>
<span>居民电话： </span><span>{{ form.telephone }}</span>
</div>
<div @click='toTel' class='tel-label'>点击拨打</div>
</div>
</div>
<van-popup v-model:show='showVisitWay' position='bottom'>
<div class='p-4'>
<div class='flex justify-between mb-4'>
<div class='greyColor' @click='showVisitWay = false'>取消</div>
<div class='blueColor' @click='visitWayConfirm'>确认</div>
</div>
<CheckBtn column-2 :options="store.getDict('CP00179')" v-model:value='checkVisitWay' :fieldNames="{text: 'name', value: 'value'}"/>
</div>
</van-popup>
<div class='label-title mt-5'>随访类型</div>
<van-field
v-model='form.visitWayRulesName'
readonly
is-link
placeholder='请选择'
class='input-back mt-2 form-input'
:rules='rules.visitWayRulesName'
@click='showVisitWayRules= true'
/>
<van-popup v-model:show='showVisitWayRules' position='bottom'>
<div class='p-4'>
<div class='flex justify-between mb-4'>
<div class='greyColor' @click='showVisitWayRules = false'>取消</div>
<div class='blueColor' @click='visitWayRulesConfirm'>确认</div>
</div>
<CheckBtn multiple column-2 :options='visitWayRulesList' v-model:value='checkVisitWayRules' :fieldNames="{text: 'name', value: 'value'}"/>
</div>
</van-popup>
</van-form>
</div>
</template>
<script>
import { addToArr, fetchDataHandle } from '@/utils/common'
import { useStore } from '@/doctor/store'
import DocAddress from '@/components/docAddress/DocAddress'
import dayjs from 'dayjs'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn'
const defaultForm = (info = {}) => {
const form = {
id: undefined,
personId: undefined,
residentInfoId: undefined,
// 年龄
currentAge: undefined,
// 证件类型,[DC00004]
certificateType: 1,
certificateTypeName: '身份证',
// 联系人姓名
contactName: undefined,
// 联系人电话
contactPhone: undefined,
// 出生日期
dataBirth: undefined,
// 性别,[DC00005]
gender: undefined,
genderName: undefined,
// 身份证号
idCard: undefined,
// 民族,[DC00006]
national: undefined,
nationalName: undefined,
// 现住址
nowAddress: undefined,
// 户籍地址
permanentAddress: undefined,
// 现住址编码
presentCode: undefined,
presentCodeName: undefined,
// 户籍地编码
registeredCode: undefined,
registeredCodeName: undefined,
// 居民档案id
residentId: undefined,
// 姓名
residentName: undefined,
// 本人电话
telephone: undefined,
// 与居民关系
relation: undefined,
relationName: undefined,
relationOther: undefined,
//随访人群
groupsArrays: undefined,
groupsArraysName: undefined,
//随访方式
visitWay: undefined,
visitWayName: undefined,
//随访类型
visitWayRules: undefined,
visitWayRulesName: undefined,
sendNumber: undefined,
}
Reflect.ownKeys(form).forEach(key => {
if (info[key] != undefined) {
form[key] = info[key]
}
})
return form
}
export default {
name: 'BaseInfo',
components: { CheckBtn, DocAddress },
props: {
info: {
default: () => {
return {}
}
},
modeEnumList: {
default: () => {
return {}
}
},
},
data() {
return {
store: useStore(),
// 民族
showNational: false,
showRelation: false,
// 现住址
showPresent: false,
// 户籍地址
showRegistered: false,
// 地址回显使用
addressRecord: {},
showTime1: false,
showTime2: false,
showGroupsArrays: false,
showVisitWay: false,
showVisitWayRules: false,
//随访人群组件双向绑定变量
checkGroupsArrays: [],
//随访方式组件双向绑定变量
checkVisitWay: [],
//随访类型组件双向绑定变量
checkVisitWayRules: [],
form: {},
rules: {
certificateTypeName: [{ required: true, message: '请选择证件类型' }],
idCard: [{ required: true, message: '请填写证件号码' }],
residentName: [{ required: true, message: '请填写姓名' }],
genderName: [{ required: true, message: '请选择性别' }],
dataBirth: [{ required: true, message: '请选择出生日期' }],
nationalName: [{ required: true, message: '请选择民族' }],
currentAge: [{ required: true, message: '请填写年龄' }],
telephone: [{ required: true, message: '请填写本人电话' }],
contactName: [{ required: false, message: '请填写联系人姓名' }],
contactPhone: [{ required: false, message: '请填写联系电话' }],
presentCodeName: [{ required: true, message: '请选择所在地区' }],
registeredCode: [{ required: true, message: '请选择所在地区' }],
groupsArraysName: [{ required: true, message: '请选择' }],
visitWay: [{ required: true, message: '请选择' }],
visitWayRulesName: [{ required: true, message: '请选择' }],
}
}
},
computed: {
authInfo() {
return this.store.$state.authInfo
},
//随访人群
groupArrList() {
let res = []
res = this.store.getDict('CP00181')
if (this.info?.groupsArrays) {
let list = this.info.groupsArrays.split(',').map(item => Number(item))
res.forEach(item => {
item.disabled = true
if (list.includes(item.value)) {
item.disabled = false
}
})
} else {
res.forEach(item => {
item.disabled = true
})
}
return res
},
//随访类型
visitWayRulesList() {
let res = []
const {visitWay} = this.form
if (visitWay) {
res = this.modeEnumList.mode1.filter(item => item.value == visitWay)[0].children
}
return res
},
},
watch: {
'info': {
handler() {
this.form = defaultForm(this.info)
if (this.form.presentCode) {
this.addressRecord.presentCode = addToArr(this.form.presentCode)
}
if (this.form.registeredCode) {
this.addressRecord.registeredCode = addToArr(this.form.registeredCode)
}
},
immediate: true
},
'form.visitWay': {
handler() {
this.form.visitWayRulesName = ''
this.form.visitWayRules = ''
this.checkVisitWayRules = []
}
}
},
methods: {
// 民族
nationalConfirm({ selectedValues, selectedOptions }) {
this.form.national = selectedValues[0]
this.form.nationalName = selectedOptions[0].name
this.showNational = false
},
//与居民关系
relationlConfirm({ selectedValues, selectedOptions }) {
this.form.relation = selectedValues[0]
this.form.relationName = selectedOptions[0].name
this.showRelation = false
},
// 现住址
presentChange(val) {
const selectedOptions = val.selectedOptions
this.form.presentCodeName = selectedOptions.map(e => e.text).join('/')
},
// 户口地址
registeredChange(val) {
const selectedOptions = val.selectedOptions
this.form.registeredCodeName = selectedOptions.map(e => e.text).join('/')
if (!this.form.presentCode && selectedOptions.length >= 5) {
this.form.presentCode = val.value
this.form.presentCodeName = this.form.registeredCodeName
}
},
// 同步现住址
setRegisteredAddress() {
this.$refs.form.validate(['presentCode']).then(res => {
this.form.registeredCode = this.form.presentCode
this.form.registeredCodeName = this.form.presentCodeName
this.form.permanentAddress = this.form.nowAddress
this.addressRecord.registeredCode = addToArr(this.form.presentCode)
}).catch(err => console.warn(err))
},
toTel() {
// 创建一个电话号码的URL
let phoneNumber = this.form.telephone // 替换为需要拨打的号码
let url = 'tel:' + encodeURIComponent(phoneNumber)
// 创建一个a标签
let a = document.createElement('a')
a.href = url
// 触发a标签的点击事件
a.click()
},
//随访人群
groupsArraysConfirm() {
let res = []
this.groupArrList.forEach(item => {
let selected = this.checkGroupsArrays.filter(i => i == item.value)
if (selected && selected.length) {
res.push(item.name)
}
})
if (this.checkGroupsArrays && this.checkGroupsArrays.length) {
this.form.groupsArrays = this.checkGroupsArrays.join()
this.form.groupsArraysName = res.join()
}
this.showGroupsArrays = false
},
//随访方式
visitWayConfirm() {
this.store.getDict('CP00179').forEach(item => {
if (item.value == this.checkVisitWay) {
this.form.visitWay = item.value
this.form.visitWayName = item.name
}
})
this.showVisitWay = false
},
//随访类型
visitWayRulesConfirm() {
let res = []
this.visitWayRulesList.forEach(item => {
let selected = this.checkVisitWayRules.filter(i => i == item.value)
if (selected && selected.length) {
res.push(item.name)
}
})
if (this.checkVisitWayRules && this.checkVisitWayRules.length) {
this.form.visitWayRules = this.checkVisitWayRules.join()
this.form.visitWayRulesName = res.join()
}
this.showVisitWayRules = false
},
onSubmit() {
return new Promise((resolve, reject) => {
this.$refs.form.validate().then(() => {
const {
personId,
visitWay,
visitWayRules ,
groupsArrays,
sendNumber,
...others
} = this.form
let par = {
visitWay,
visitWayRules,
groupsArrays,
sendNumber,
residentInfoId: this.form.residentInfoId,
residentsRecord: {
...others,
groupsArrays: this.info.groupsArrays,
id: this.form.personId
}
}
resolve(par)
}).catch((e) => {
console.warn('baseInfo error', e)
})
})
}
}
}
</script>
<style scoped lang='less'>
.title {
font-weight: bold;
margin-bottom: 20px;
}
.label-title {
font-size: 13px;
color: #595959;
font-weight: 500;
&::after {
content: "*";
color: red;
font-weight: bold;
margin-left: 4px;
}
}
.no-req-label {
font-size: 13px;
color: #595959;
font-weight: 500;
}
.form-input {
padding: 8px 12px;
border-radius: 8px;
}
.input-back {
background: #FAFAFA;
}
.input-white {
background: #FFFFFF;
}
.tel-back {
background: #F5F5F5;
padding: 8px;
border-radius: 0px 0px 8px 8px;
}
.death-r {
background: #F5F5F5;
border-radius: 0px 0px 8px 8px;
padding: 8px 12px;
}
.tel {
background: #FFFFFF;
padding: 8px;
border-radius: 8px;
}
.tel-label {
color: #607FF0;
font-weight: bold;
}
.p-12-0 {
padding: 12px 0px;
}
//灰色
.greyColor {
color: var(--van-text-color-2);
}
//确认按钮颜色
.blueColor {
color: var(--van-primary-color)
}
:deep(.van-cell-group--inset) {
overflow: visible;
}
:deep(.van-cell) {
overflow: visible;
}
:deep(.van-field__error-message) {
position: absolute;
}
:deep(.van-cell:after) {
border-bottom: 0px;
}
:deep(.van-radio__icon--checked.van-radio__icon--dot .van-radio__icon--dot__icon) {
background: #FFFFFF;
}
:deep(.van-radio__icon--checked.van-radio__icon--dot) {
background: var(--van-button-primary-background)
}
:deep(.van-popup) {
min-height: 30%!important;
}
</style>