医生端小程序 v1.2 1、新增居民基本信息表单通用组件

src/doctor/Doctor.vue

@@ -57,7 +57,7 @@ export default {
             if (!token) {
                 token = sessionStorage.getItem('token')
                 if (process.env.NODE_ENV !== 'production') {
-                    token = '660972fe-8a58-4e69-be0f-ff60366c8ffb'
+                    token = 'a1aa2026-5d9f-48e1-b942-06401fad42e7'
                 }
             }
             if (token) {

src/doctor/components/archiveCommon/archiveCommon.vue

+<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
+                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'
+            />
+        </van-form>
+    </div>
+</template>
+
+<script>
+import { addToArr } from '@/utils/common'
+import { useStore } from '@/doctor/store'
+import DocAddress from '@/components/docAddress/DocAddress'
+import DocNavBar from '@/doctor/components/docNavBar/DocNavBar.vue'
+
+const defaultForm = (info = {}) => {
+    const form = {
+        id: undefined,
+        residentInfoId: undefined,
+        // 年龄
+        currentAge: undefined,
+        // 出生地详细地址
+        birthAddress: undefined,
+        // 出生地编码
+        birthCode: undefined,
+        // 证件类型,[DC00004]
+        certificateType: 1,
+        certificateTypeName: '身份证',
+        // 联系人姓名
+        contactName: undefined,
+        contactName2: undefined,
+        // 联系人电话
+        contactPhone: undefined,
+        // 与居民关系,[DC00023]
+        contactRelation: undefined,
+        contactRelationName: undefined,
+        // 出生日期
+        dataBirth: undefined,
+        // 职业,[DC00010]
+        duty: undefined,
+        dutyName: undefined,
+        // 文化程度(学历),[DC00007]
+        education: undefined,
+        educationName: 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,
+        // 姓名
+        residentName: undefined,
+        // 本人电话
+        telephone: undefined,
+        // 工作单位
+        workUnit: undefined,
+        // 与居民关系
+        relation: undefined,
+        relationName: undefined,
+        relationOther: undefined,
+        // 人群
+        chronicCrowd: undefined,
+        chronicTagsArray: undefined,
+        firstScreenDate: undefined,
+        firstScreenResult: undefined,
+        highTagsArray: undefined,
+        highTags: undefined,
+        latelyDiagnoseDate: undefined,
+        latelyScreenDate: undefined,
+        // 建档单位、科室、医生
+        createDoctorId: undefined,
+        createDoctorName: undefined,
+        createOfficeId: undefined,
+        createOfficeName: undefined,
+        createUnitId: undefined,
+        createUnitName: undefined,
+        // 当前人群-显示type=CP00181
+        groupsArrays: undefined,
+        // 当前人群-查询
+        groups: undefined
+    }
+    Reflect.ownKeys(form).forEach(key => {
+        if (info[key] != undefined) {
+            form[key] = info[key]
+        }
+    })
+    return form
+}
+export default {
+    name: 'archiveCommon',
+    components: { DocAddress, DocNavBar },
+    props: {
+        info: {
+            default: () => {
+                return {}
+            }
+        }
+    },
+    data() {
+        return {
+            store: useStore(),
+            // 民族
+            showNational: false,
+            showRelation: false,
+            // 现住址
+            showPresent: false,
+            // 户籍地址
+            showRegistered: false,
+            // 地址回显使用
+            addressRecord: {},
+            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: '请选择所在地区' }]
+            }
+        }
+    },
+    computed: {
+        authInfo() {
+            return this.store.$state.authInfo
+        },
+        residentInfoId() {
+            return this.$route.query.residentInfoId
+        }
+    },
+    watch: {
+        'info': {
+            handler() {
+                this.init()
+            }
+        }
+    },
+    methods: {
+        init() {
+            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)
+            }
+        },
+        // 民族
+        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))
+        },
+        onSubmit() {
+            return new Promise((resolve, reject) => {
+                this.$refs.form.validate().then(() => {
+                    resolve(...this.form)
+                }).catch((e) => {
+                    console.warn('ArchiveCommon error', e)
+                })
+            })
+        }
+    }
+}
+</script>
+
+<style scoped lang='less'>
+.h-overflow {
+    height: calc(100vh - 110px);
+    overflow-y: auto;
+}
+
+.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;
+}
+
+.tel-back {
+    background: #F5F5F5;
+    padding: 8px;
+    border-radius: 0px 0px 8px 8px;
+}
+
+.tel {
+    background: #FFFFFF;
+    padding: 8px;
+    border-radius: 8px;
+}
+
+.tel-label {
+    color: #607FF0;
+    font-weight: bold;
+}
+
+.p-12-0 {
+    padding: 12px 0px;
+}
+
+:deep(.van-nav-bar .van-icon) {
+    color: #000000;
+}
+
+:deep(.van-cell-group--inset) {
+    overflow: visible;
+}
+
+:deep(.van-cell) {
+    overflow: visible;
+}
+
+/*:deep(.van-field__error-message) {
+    position: absolute;
+    margin-top: 3px;
+}*/
+
+:deep(.van-cell:after) {
+    border-bottom: 0px;
+}
+</style>
\ No newline at end of file