居民信息表单

src/assets/css/base.less

@@ -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

+<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

 <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,9 +111,11 @@ export default {
         },
         // 地址同步使用
         viewData(val) {
+            if (val) {
                 this.viewHandle(val)
             }
         }
+    }
 }
 </script>
 

src/resident/screening/first/form/BaseInfo.vue

@@ -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"
+                    <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

@@ -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

@@ -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

 <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

@@ -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

@@ -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,18 +47,27 @@ 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
+            result[key] = addToArr(data[key])
+        }
+    })
+    return {
+        ...data,
+        ...result
+    }
+}
+
+// 最后一级地址 => 地址数组
+export function addToArr(str = '', level = 5) {
+    if (!str) return []
+    if (str.length === 2) {
+        return [str]
     }
     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),
+        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: ''}
@@ -66,13 +77,7 @@ export function fetchDataHandle(source = {}, obj = {}) {
     for (let i = 1; i < temp.length; i++) {
         temp[i] = temp[i] + suffix[i]
     }
-            result[key] = temp
-        }
-    })
-    return {
-        ...data,
-        ...result
-    }
+    return temp.slice(0, level)
 }
 
 // 从身份证号获取基础信息

src/utils/commonReg.js

@@ -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) {