Skip to content

F
frontend-h5
Commit 40e7c8a1 authored by songrui's avatar songrui
Browse files
Options

居民信息表单

parent dd01eb2a
Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 73 deletions
src/assets/css/base.less
View file @ 40e7c8a1
......@@ -34,6 +34,10 @@ body {
// van组件样式调整
// 表单
.screen-form {
input::placeholder {
color: #999999;
float: right;
}
.van-cell:after {
transform: scaleY(1);
}
......
src/assets/icons/doc-left.svg 0 → 100644
View file @ 40e7c8a1
<svg width="9" height="18" viewBox="0 0 9 18" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 16.4375L7.95453 17.5L0.280918 9.70137C-0.10202 9.31219 -0.102019 8.68781 0.280918 8.29863L7.95453 0.5L9 1.5625L1.68173 9L9 16.4375Z" fill-opacity="0.9"/>
</svg>
src/components/docAddress/DocAddress.vue
View file @ 40e7c8a1
<template>
<van-cascader class="address-select"
:closeable="false"
v-model="innerValue"
title="请选择所在地区"
:options="areaData"
......@@ -18,6 +17,7 @@ export default {
props: {
value: [String, Number],
viewData: Array,
level: { default: 4 },
},
emits: ['update:value', 'change', 'close'],
data() {
......@@ -47,7 +47,7 @@ export default {
const targetOption = options[options.length - 1]
targetOption.loading = true
getAreaChild(targetOption.value).then(res => {
targetOption.children = this.dataField(res || [], options.length === 4)
targetOption.children = this.dataField(res || [], options.length === this.level)
this.areaData = [...this.areaData]
}).finally(() => {
targetOption.loading = false
......@@ -73,7 +73,7 @@ export default {
const res = await getAreaChild(current.value)
const result = res || []
if (!result.length) break
current.children = this.dataField(result, index === 4)
current.children = this.dataField(result, index === this.level)
current = current.children.find(e => e.value === val[index])
this.areaData = [...this.areaData]
if (!current) break
......@@ -91,13 +91,13 @@ export default {
const targetOption = options[options.length - 1]
if (tabIndex < 4 ) {
getAreaChild(val.value).then(res => {
targetOption.children = this.dataField(res || [], options.length === 4)
targetOption.children = this.dataField(res || [], options.length === this.level)
this.areaData = [...this.areaData]
})
}
this.$emit('update:value', val.value)
this.$emit('change', val)
if (tabIndex === 4 ) {
if (tabIndex === this.level) {
this.$emit('close')
}
}
......@@ -111,7 +111,9 @@ export default {
},
// 地址同步使用
viewData(val) {
this.viewHandle(val)
if (val) {
this.viewHandle(val)
}
}
}
}
......
src/resident/screening/first/form/BaseInfo.vue
View file @ 40e7c8a1
......@@ -5,10 +5,10 @@
<div class="px-4 title">居民信息</div>
<div class="text-12">请准确填写您的证件信息，标*内容为必填</div>
</div>
<van-form label-width="5em" ref="form" input-align="right">
<van-form label-width="5em" ref="form" class="screen-form"
error-message-align="right">
<van-field v-model="form.residentName"
required
center
clearable
name="residentName"
label="姓名"
......@@ -17,7 +17,7 @@
>
</van-field>
<van-field required
v-model="form.genderTrans"
v-model="form.genderName"
is-link
readonly
name="gender"
......@@ -40,23 +40,27 @@
name="dataBirth"
label="出生日期"
placeholder="请选择"
@click="showPicker = true"
@click="showBirth = true"
/>
<van-popup v-model:show="showBirth" position="bottom">
<van-date-picker @confirm="dataBirthConfirm" @cancel="showPicker = false" />
<van-date-picker @confirm="dataBirthConfirm" @cancel="showBirth = false" />
</van-popup>
<van-field v-model="form.age"
name="age" required
<van-field v-model="form.currentAge"
name="currentAge" required
label="年龄"
type="digit"
placeholder="请输入年龄"
maxlength="10"
:rules="rules.age"
/>
:rules="rules.currentAge"
>
<template #extra>
<span class="ml-1">岁</span>
</template>
</van-field>
<van-field required
v-model="form.nationalTrans"
v-model="form.nationalName"
is-link
readonly
name="national"
......@@ -83,16 +87,18 @@
/>
<van-field required
v-model="form.presentCodeTrans"
v-model="form.presentCodeName"
name="presentCode"
is-link
readonly
label="现住址"
placeholder="请选择所在地区"
:rules="rules.presentCode"
@click="showPresent = true"
/>
<van-popup v-model:show="showPresent" :close-on-click-overlay="false" round position="bottom">
<DocAddress v-model:value="form.presentCode" @close="showPresent = false"
:viewData="addressRecord.presentCode"
@change="presentChange"/>
</van-popup>
......@@ -104,7 +110,7 @@
/>
<van-field required
v-model="form.registeredCodeTrans"
v-model="form.registeredCodeName"
name="registeredCode"
is-link
readonly
......@@ -115,7 +121,7 @@
/>
<van-popup v-model:show="showRegistered" :close-on-click-overlay="false" round position="bottom">
<DocAddress v-model:value="form.registeredCode" @close="showRegistered = false"
:viewData="addressRecord"
:viewData="addressRecord.registeredCode"
@change="registeredChange"/>
</van-popup>
......@@ -126,15 +132,17 @@
maxlength="50"
>
<template #button>
<van-button size="small" plain type="primary"
@click="setRegisteredAddress">同步住址</van-button>
<div class="flex items-center">
<van-button size="mini" plain type="primary"
@click="setRegisteredAddress">同步住址</van-button>
</div>
</template>
</van-field>
</van-form>
<div class="px-4 pb-4 grow flex flex-col justify-end">
<van-button type="primary" block
<div class="pt-4"></div>
<div class="px-5 pb-4 mt-5 grow flex flex-col justify-end">
<van-button type="primary" block round
@click="submit">下一步</van-button>
</div>
</div>
......@@ -142,10 +150,11 @@
<script>
import { useStore } from '@/resident/store/index.js'
import { getInfoByIdCard, fetchDataHandle, addToArr } from '@/utils/common.js'
import { mobileValidator, addressValidator } from '@/utils/commonReg.js'
import DocAddress from '@/components/docAddress/DocAddress.vue'
const defaultForm = () => {
const defaultForm = (info = {}) => {
const form = {
id: undefined,
residentInfoId:undefined,
......@@ -177,19 +186,23 @@ const defaultForm = () => {
education: undefined,
// 性别,[DC00005]
gender: undefined,
genderName: undefined,
// 身份证号
idCard: undefined,
// innerMarital: undefined,
// 民族,[DC00006]
national: undefined,
nationalName: undefined,
// 现住址
nowAddress: undefined,
// 户籍地址
permanentAddress: undefined,
// 现住址编码
presentCode: undefined,
presentCodeName: undefined,
// 户籍地编码
registeredCode: undefined,
registeredCodeName: undefined,
// 居民档案id
residentId: undefined,
// 姓名
......@@ -205,6 +218,11 @@ const defaultForm = () => {
// 人群
chronicTagsArray: undefined,
}
Reflect.ownKeys(form).forEach(key => {
if (info[key] != undefined) {
form[key] = info[key]
}
})
return form
}
......@@ -212,21 +230,21 @@ export default {
components: {
DocAddress
},
inject: ['checkInfo'],
inject: ['checkInfo', 'recordForm'],
data() {
return {
form: defaultForm(),
rules: {
residentName: [{ required: true, message: '请输入' }],
age: [{ required: true, message: '请输入' }],
currentAge: [{ required: true, message: '请输入' }],
gender: [{ required: true, message: '请选择' }],
national: [{ required: true, message: '请选择' }],
telephone: [{ required: true, message: '请输入' }, mobileValidator],
presentCode: [{ required: true, message: '请选择' }, addressValidator],
registeredCode: [{ required: true, message: '请选择' }, addressValidator]
},
// 地址同步使用
addressRecord: [],
// 地址回显使用
addressRecord: {},
// 性别选择
showGender: false,
// 出生日期
......@@ -248,14 +266,38 @@ export default {
return this.checkInfo.residentsRecord
}
},
created() {
this.init()
},
methods: {
init() {
if (this.recordForm.base) {
this.form = defaultForm(this.recordForm.base)
return
}
if (this.residentsRecord) {
this.form = defaultForm(this.residentsRecord)
this.addressRecord.presentCode = addToArr(this.form.presentCode)
this.addressRecord.registeredCode = addToArr(this.form.registeredCode)
}
const idCard = this.checkInfo.idCard
const info = getInfoByIdCard(idCard)
this.form.gender = info.gender
this.form.genderName = this.store.getDictValue('DC00005', this.form.gender)
this.form.currentAge = info.currentAge
this.form.dataBirth = info.dataBirth
},
submit() {
debugger
this.$refs.form.validate().then(() => {
this.recordForm.base = {...this.form}
this.$parent.onNext()
}).catch(err => console.warn(err))
},
// 性别
genderConfirm({ selectedValues, selectedOptions }) {
this.form.gender = selectedValues[0]
this.form.genderTrans = selectedOptions[0].name
this.form.genderName = selectedOptions[0].name
this.showGender = false
},
// 出生日期
......@@ -266,35 +308,36 @@ export default {
// 民族
nationalConfirm({ selectedValues, selectedOptions }) {
this.form.national = selectedValues[0]
this.form.nationalTrans = selectedOptions[0].name
this.form.nationalName = selectedOptions[0].name
this.showNational = false
},
// 户口地址
registeredChange(val) {
const selectedOptions = val.selectedOptions
this.form.registeredCodeTrans = selectedOptions.map(e => e.text).join('/')
this.form.registeredCodeName = selectedOptions.map(e => e.text).join('/')
if (!this.form.presentCode && selectedOptions.length >= 5) {
this.form.presentCode = val.value
this.form.presentCodeTrans = this.form.registeredCodeTrans
this.form.presentCodeName = this.form.registeredCodeName
}
},
// 现住址
presentChange(val) {
const selectedOptions = val.selectedOptions
this.form.presentCodeTrans = selectedOptions.map(e => e.text).join('/')
this.form.presentCodeName = selectedOptions.map(e => e.text).join('/')
},
// 同步现住址
setRegisteredAddress() {
this.$refs.form.validate(['presentCode']).then(res => {
this.form.registeredCode = [...this.form.presentCode]
this.addressRecord = [...this.form.presentCode]
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))
}
}
}
</script>
<style lang="less" scoped>
@import '../../../utils/common.less';
</style>
src/resident/screening/first/form/IdCheck.vue
View file @ 40e7c8a1
......@@ -5,7 +5,8 @@
<div class="px-4 font-semibold title">居民证件信息</div>
<div class="text-12">请准确填写您的证件信息，标*内容为必填</div>
</div>
<van-form label-width="5em" ref="form" input-align="right"
<van-form label-width="5em" ref="form"
error-message-align="right"
class="screen-form">
<van-field required
v-model="form.certificateTypeTrans"
......@@ -17,7 +18,6 @@
disabled/>
<van-field v-model="form.idCard"
required
center
clearable
name="idCard"
label="证件号码"
......@@ -36,7 +36,7 @@
<div class="text-12 tip">提示：所填写的信息只用于慢病初筛，不会用于其他用途。</div>
</div>
<div class="px-4 pb-4 grow flex flex-col justify-end">
<div class="px-5 pb-4 grow flex flex-col justify-end">
<van-button type="primary" block round
@click="submit">下一步</van-button>
</div>
......
src/resident/screening/first/form/Index.vue
View file @ 40e7c8a1
......@@ -22,7 +22,7 @@
import { showNotify } from 'vant'
import IdCheck from './IdCheck.vue'
import CheckTip from './CheckTip.vue'
import BaseInfo from './BaseInfo.vue'
import BaseInfo from './BaseInfo.vue'
import ScreenInfo from './ScreenInfo.vue'
export default {
......@@ -38,12 +38,15 @@ export default {
step: 1,
setpHistory: [1],
// 查询信息
checkInfo: {}
checkInfo: {},
// 表单暂时保存的信息
recordForm: {}
}
},
provide() {
return {
checkInfo: this.checkInfo
checkInfo: this.checkInfo,
recordForm: this.recordForm
}
},
computed: {
......
src/resident/screening/first/form/ScreenInfo.vue
View file @ 40e7c8a1
<template>
<div class="screen-info">
筛查信息
<div class="flex items-end py-4"
style="border-bottom: 1px solid var(--van-cell-border-color);">
<div class="px-4 font-semibold title">筛查信息</div>
<div class="text-12">请根据您身体实际情况填写以下内容</div>
</div>
</div>
</template>
......@@ -11,5 +15,5 @@ export default {
</script>
<style lang="less" scoped>
@import '../../../utils/common.less';
</style>
src/resident/utils/common.less
View file @ 40e7c8a1
......@@ -7,7 +7,7 @@
display: inline-block;
background: var(--van-primary-color);
height: 16px;
width: 4px;
margin-right: 4px;
width: 3px;
margin-right: 6px;
}
}
\ No newline at end of file
src/utils/common.js
View file @ 40e7c8a1
......@@ -36,7 +36,9 @@ export function fetchDataHandle(source = {}, obj = {}) {
Reflect.ownKeys(obj).forEach(key => {
// 数组 <=> 字符串
if (obj[key] === 'arrToStr') {
result[key] = data[key] ? data[key].join(',') : ''
const temp = data[key] || []
temp.sort((a, b) => a - b)
result[key] = temp.join(',') || ''
} else if (obj[key] === 'strToArr') {
result[key] = data[key] ? data[key].split(',') : []
} else if (obj[key] === 'strToArrNum') {
......@@ -45,28 +47,7 @@ export function fetchDataHandle(source = {}, obj = {}) {
// 地址数组 => 最后一级地址
result[key] = data[key] ? data[key][data[key].length - 1] : ''
} else if (obj[key] === 'addToArr') {
if (!data[key]) return []
// 最后一级地址 => 地址数组
if (data[key].length === 2) {
result[key] = [data[key]]
return
}
let temp = [
data[key].substring(0, 2),
data[key].substring(2, 4),
data[key].substring(4, 6),
data[key].substring(6, 9),
data[key].substring(9, 12),
]
temp = temp.filter(e => e !== '00' || e !== '000')
const suffix = {1: '00000000', 2: '000000', 3: '000', 4: ''}
for (let i = 1; i < temp.length; i++) {
temp[i] = temp[i - 1] + temp[i]
}
for (let i = 1; i < temp.length; i++) {
temp[i] = temp[i] + suffix[i]
}
result[key] = temp
result[key] = addToArr(data[key])
}
})
return {
......@@ -75,6 +56,30 @@ export function fetchDataHandle(source = {}, obj = {}) {
}
}
// 最后一级地址 => 地址数组
export function addToArr(str = '', level = 5) {
if (!str) return []
if (str.length === 2) {
return [str]
}
let temp = [
str.substring(0, 2),
str.substring(2, 4),
str.substring(4, 6),
str.substring(6, 9),
str.substring(9, 12),
]
temp = temp.filter(e => e !== '00' || e !== '000')
const suffix = {1: '00000000', 2: '000000', 3: '000', 4: ''}
for (let i = 1; i < temp.length; i++) {
temp[i] = temp[i - 1] + temp[i]
}
for (let i = 1; i < temp.length; i++) {
temp[i] = temp[i] + suffix[i]
}
return temp.slice(0, level)
}
// 从身份证号获取基础信息
export function getInfoByIdCard(idCard) {
if (!validateIdCard(idCard)) return {}
......
src/utils/commonReg.js
View file @ 40e7c8a1
......@@ -51,7 +51,9 @@ export const idCardRule = { validator: (value = '') => {
// 5级地址校验
export const addressValidator = { validator: (value) => {
if (!value || !value.length || value.length === 5) {
if (!value) return
const array = value.split('/')
if (!array.length || array.length === 5) {
return
}
if (value.length < 5) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment