<template>
|
<view class="form-box">
|
<u-form labelWidth="70" :model="form" :rules="rules" ref="form">
|
<u-form-item label="姓名" required prop="name" class="form-item">
|
<u--input v-model="form.name" border="none" placeholder="请填写姓名"></u--input>
|
</u-form-item>
|
<u-form-item label="电话号码" class="form-item">
|
<u--input v-model="form.telephone" border="none" placeholder="请填写电话号码"></u--input>
|
</u-form-item>
|
<u-form-item label="暂住地" class="form-item">
|
<u--input v-model="form.tempAddress" border="none" placeholder="请填写地址"></u--input>
|
</u-form-item>
|
<u-form-item label="身份证号" class="form-item">
|
<u--input v-model="form.idCard" border="none" placeholder="请填写地址"></u--input>
|
</u-form-item>
|
<u-form-item label="微信号" class="form-item">
|
<u--input v-model="form.wxAccount" border="none" placeholder="请填写地址"></u--input>
|
</u-form-item>
|
<u-form-item label="年龄" class="form-item">
|
<u--input v-model="form.age" border="none" placeholder="请填写地址"></u--input>
|
</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 @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 label="工作单位" class="form-item">
|
<u--input v-model="form.employer" border="none" placeholder="请填写地址"></u--input>
|
</u-form-item>
|
<u-form-item label="岗位性质" class="form-item">
|
<u--input v-model="form.jobNature" border="none" placeholder="请填写地址"></u--input>
|
</u-form-item>
|
<u-form-item label="户籍地址" class="form-item">
|
<u--input v-model="form.registeredAddress" border="none" placeholder="请填写地址"></u--input>
|
</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 {
|
form: {
|
name: '',
|
telephone: '',
|
tempAddress: '',
|
legalIdCard: '',
|
gender: "",
|
ethnicity: "",
|
registeredAddress: "",
|
jobNature: "",
|
wxAccount: "",
|
employer: "",
|
jobNature: ""
|
},
|
rules: {
|
name: {
|
type: 'string',
|
required: true,
|
message: '请填写姓名',
|
trigger: ['blur', 'change']
|
}
|
},
|
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>
|
<style lang="scss" scoped>
|
.form-box {
|
background-color: #fff;
|
padding: 0 30rpx;
|
|
.form-item {
|
border-bottom: 1rpx solid #f6f6f6;
|
padding: 0 20rpx;
|
background-color: #fff;
|
}
|
}
|
</style>
|
