更新

Lou

2024-03-21 022501d1f7cb6b1e953ecf990a4dd3b5b9714646

更新

 subPackage/bs/components/form/rentForm.vue

@@ -1,24 +1,51 @@
<template>

    <u-form :model="form" class="form-box" :rules="rules" ref="refForm">

        <u-form-item class="form-item" label="姓名" required prop="name" labelWidth="80">

            <u-input v-model="form.name" border="none" placeholder="姓名" />

    <view class="">





        <u-form :model="form" class="form-box" :rules="rules" ref="refForm">

            <u-form-item class="form-item" label="姓名" required prop="name" labelWidth="80">

                <u-input v-model="form.name" border="none" placeholder="姓名" />

            </u-form-item>

            <u-form-item class="form-item" label="联系方式" required prop="phoneNumber" labelWidth="80">

                <u-input type="number" v-model="form.phoneNumber" border="none" placeholder="联系方式" />

            </u-form-item>

            <u-form-item class="form-item" label="身份证号码" required prop="idCard" labelWidth="80">

                <u-input type="idcard" v-model="form.idCard" border="none" placeholder="身份证号码" />

            </u-form-item>



            <!-- <u-form-item @click="showGenderPicker = true" class="form-item" label="性别" prop="legalGender">

            <u--input border="none" v-model="genderValue" disabled disabledColor="#ffffff" placeholder="请选择性别">

            </u--input>

            <u-icon slot="right" name="arrow-right"></u-icon>

        </u-form-item>

        <u-form-item class="form-item" label="联系方式" required prop="phoneNumber" labelWidth="80">

            <u-input type="number" v-model="form.phoneNumber" border="none" placeholder="联系方式" />

        </u-form-item>

        <u-form-item class="form-item" label="身份证号码" required prop="idCard" labelWidth="80">

            <u-input type="idcard" v-model="form.idCard" border="none" placeholder="身份证号码" />

        </u-form-item>

        <u-form-item class="form-item" label="户籍地址" labelWidth="80">

            <u-input v-model="form.hukouRegistration" border="none" placeholder="选填" />

        </u-form-item>

        <u-form-item class="form-item" label="工作单位" labelWidth="80">

            <u-input v-model="form.employer" border="none" placeholder="选填" />

        </u-form-item>

    </u-form>

        <u-form-item @click="showNationPicker = true" class="form-item" label="民族" prop="ethnicity">

            <u--input border="none" v-model="nationValue" disabled disabledColor="#ffffff" placeholder="请选择民族">

            </u--input>

            <u-icon slot="right" name="arrow-right"></u-icon>

        </u-form-item> -->



            <u-form-item class="form-item" label="户籍地址" labelWidth="80">

                <u-input v-model="form.hukouRegistration" border="none" placeholder="选填" />

            </u-form-item>

            <u-form-item class="form-item" label="工作单位" labelWidth="80">

                <u-input v-model="form.employer" border="none" placeholder="选填" />

            </u-form-item>

        </u-form>

        <u-picker :defaultIndex="nationTypeListIndex" :closeOnClickOverlay="true" :show="showNationPicker"

            :columns="[nationTypeList]" @close="showNationPicker = false" @cancel="showNationPicker = false"

            keyName="name" @confirm="confirmNation"></u-picker>



        <u-picker :defaultIndex="genderIndex" :closeOnClickOverlay="true" :show="showGenderPicker" :columns="[gender]"

            @close="showGenderPicker = false" @cancel="showGenderPicker = false" keyName="name"

            @confirm="confirmGender"></u-picker>

    </view>



</template>



<script>

    import {

        bizDictionary

    } from '@/api/system/dict.js'

    export default {

        data() {

            return {

@@ -68,9 +95,71 @@
                        message: '请输入正确的身份证号',

                        // 触发器可以同时用blur和change

                        trigger: ['change', 'blur'],

                    }]

                    }],





                    nationTypeList: [], //民族

                    nationTypeIndex: [0],

                    nationValue: "",

                    gender: [{ //性别

                            value: 1,

                            name: '男',

                        },

                        {

                            value: 0,

                            name: '女',

                        }

                    ],

                    genderIndex: [0],

                    genderValue: "",

                    showNationPicker: false,

                    showGenderPicker: false,

                }

            }

        },

        // create(){

        //     this.getAllBizDict()

        // },

        methods: {

            async getAllBizDict() {

                // 获取民族

                await this.getBizDict('nationType', this.nationTypeList);

            },



            // 获取业务字典

            async getBizDict(code, list) {

                const param = {

                    code: code

                }

                const res = await bizDictionary(param)

                res.data.forEach(e => {

                    list.push({

                        name: e.dictValue,

                        value: Number(e.dictKey)

                    })

                })

            },





            //选择民族

            confirmNation(e) {

                this.nationIndex = e.indexs;

                this.nationValue = e.value[0].name;

                this.form.ethnicity = e.value[0].value;

                this.showNationPicker = false;

            },



            //选择性别

            confirmGender(e) {

                this.genderIndex = e.indexs;

                this.genderValue = e.value[0].name;

                this.form.gender = e.value[0].value;

                this.showGenderPicker = false;

            },









        }

    }

</script>