更新

Lou

2024-03-21 5db9bf59a85073db5b2ecc6cedac3ca9feef2939

 subPackage/workbench/components/rentForm.vue

@@ -1,24 +1,49 @@
<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="姓名" />
      </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>
   <view class="">
      <u-form :model="form" class="form-box" :rules="rules" ref="refForm">
         <u-form-item class="form-item" label="姓名" required prop="name" labelWidth="100">
            <u-input v-model="form.name" border="none" placeholder="姓名" />
         </u-form-item>
         <u-form-item class="form-item" label="联系方式" required prop="phoneNumber" labelWidth="100">
            <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="100">
            <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"
            labelWidth="100">
            <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 @click="showNationPicker = true" class="form-item" label="民族" prop="ethnicity"
            labelWidth="100">
            <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="100">
            <u-input v-model="form.hukouRegistration" border="none" placeholder="选填" />
         </u-form-item>
         <u-form-item class="form-item" label="工作单位" labelWidth="100">
            <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 {
@@ -27,7 +52,9 @@
               phoneNumber: '',
               idCard: '',
               hukouRegistration: '',
               employer: ''
               employer: '',
               ethnicity: '',
               gender: ''
            },
            rules: {
               name: [{
@@ -68,9 +95,70 @@
                  message: '请输入正确的身份证号',
                  // 触发器可以同时用blur和change
                  trigger: ['change', 'blur'],
               }]
            }
               }],
            },
            nationTypeList: [], //民族
            nationTypeIndex: [0],
            nationValue: "",
            gender: [{ //性别
                  value: 1,
                  name: '男',
               },
               {
                  value: 0,
                  name: '女',
               }
            ],
            genderIndex: [0],
            genderValue: "",
            showNationPicker: false,
            showGenderPicker: false,

         }
      },
      created() {
         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>