<template>
|
<view class="register_index">
|
<u-form
|
ref="form"
|
:model="formRegister"
|
:rules="rulesRegister"
|
labelWidth="auto"
|
labelPosition="left">
|
<u-form-item
|
label="头像"
|
prop="photoUrl"
|
borderBottom>
|
<u-upload
|
:fileList="fileList"
|
@afterRead="afterRead"
|
@delete="deleteImage"
|
name="6"
|
:maxCount="1"
|
width="60"
|
height="60">
|
<u-avatar src="" shape="square"></u-avatar>
|
</u-upload>
|
<u-icon
|
slot="right"
|
name="arrow-right">
|
</u-icon>
|
</u-form-item>
|
<u-form-item
|
label="姓名"
|
prop="realName"
|
borderBottom>
|
<u-input
|
v-model="formRegister.realName"
|
placeholder="请输入姓名"
|
border="none">
|
</u-input>
|
</u-form-item>
|
<u-form-item
|
label="性别"
|
prop="sexValue"
|
borderBottom
|
@click="changeSex()">
|
<u-input
|
v-model="formRegister.sexValue"
|
placeholder="请选择性别"
|
disabled
|
disabledColor="#FFFFFF"
|
border="none">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="arrow-right">
|
</u-icon>
|
</u-form-item>
|
<u-form-item
|
label="手机号"
|
prop="phone"
|
borderBottom>
|
<u-input
|
v-model="formRegister.phone"
|
placeholder="请输入手机号"
|
border="none">
|
</u-input>
|
</u-form-item>
|
<u-form-item
|
label="身份证号"
|
prop="idNo"
|
borderBottom>
|
<u-input
|
v-model="formRegister.idNo"
|
placeholder="请输入身份证号"
|
border="none">
|
</u-input>
|
</u-form-item>
|
<u-form-item
|
label="分公司"
|
prop="companyIdValue"
|
borderBottom
|
@click="changeCompany()">
|
<u-input
|
v-model="formRegister.companyIdValue"
|
placeholder="请选择分公司"
|
disabled
|
disabledColor="#FFFFFF"
|
border="none">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="arrow-right">
|
</u-icon>
|
</u-form-item>
|
<u-form-item
|
label="岗位"
|
prop="posIdValue"
|
borderBottom
|
@click="changePosition()">
|
<u-input
|
v-model="formRegister.posIdValue"
|
placeholder="请选择岗位"
|
disabled
|
disabledColor="#FFFFFF"
|
border="none">
|
</u-input>
|
<u-icon
|
slot="right"
|
name="arrow-right">
|
</u-icon>
|
</u-form-item>
|
<u-form-item
|
label="备注"
|
borderBottom>
|
<u-input
|
v-model="formRegister.remark"
|
placeholder="请输入备注"
|
border="none">
|
</u-input>
|
</u-form-item>
|
</u-form>
|
<view class="submit_bnt">
|
<u-button type="primary" color="#1976FF" text="确认" @click="submitInsertForm()"></u-button>
|
</view>
|
<u-picker
|
:show="showSex"
|
:columns="sexColumns"
|
keyName="label"
|
@cancel="showSex = false"
|
@confirm="selectSex">
|
</u-picker>
|
<u-picker
|
:show="showCompany"
|
:columns="companyColumns"
|
keyName="companyName"
|
@cancel="showCompany = false"
|
@confirm="selectCompany">
|
</u-picker>
|
<u-picker
|
:show="showPosition"
|
:columns="positionColumns"
|
keyName="posName"
|
@cancel="showPosition = false"
|
@confirm="selectPosition">
|
</u-picker>
|
</view>
|
</template>
|
|
<script>
|
import { basrUrl } from '../../api/http';
|
import { throttle } from '../../plugins/public';
|
export default {
|
data() {
|
return {
|
fileList: [],
|
formRegister: {
|
realName: '',
|
sex: '',
|
sexValue: '',
|
phone: '',
|
idNo: '',
|
companyIdValue: '',
|
posId: '',
|
posIdValue: '',
|
remark: ''
|
},
|
showSex: false, // 性别选择
|
sexColumns: [[{
|
value: 0,
|
label: '男'
|
}, {
|
value: 1,
|
label: '女'
|
}]],
|
showCompany: false,
|
companyColumns: [],
|
showPosition: false,
|
positionColumns: [],
|
rulesRegister: {
|
realName: [{
|
required: true,
|
message: '请输入姓名',
|
trigger: 'blur'
|
}],
|
sexValue: [{
|
required: true,
|
message: '请选择性别',
|
trigger: ['blur', 'change']
|
}],
|
phone: [{
|
required: true,
|
message: '请输入手机号',
|
trigger: 'blur'
|
},{
|
// 自定义验证函数，见上说明
|
validator: (rule, value, callback) => {
|
return uni.$u.test.mobile(value);
|
},
|
message: '请输入正确的手机号码',
|
trigger: 'blur',
|
}],
|
idNo: [{
|
required: true,
|
message: '请输入身份证号',
|
trigger: 'blur'
|
},{
|
// 自定义验证函数，见上说明
|
validator: (rule, value, callback) => {
|
return uni.$u.test.idCard(value);
|
},
|
message: '请输入正确的身份证号码',
|
trigger: 'blur',
|
}],
|
companyIdValue: [{
|
required: true,
|
message: '请选择分公司',
|
trigger: ['blur', 'change']
|
}],
|
posIdValue: [{
|
required: true,
|
message: '请选择岗位',
|
trigger: ['blur', 'change']
|
}]
|
}
|
}
|
},
|
onLoad(option) {
|
if(option.data) {
|
const data = JSON.parse(option.data);
|
this.fileList = [{
|
id: this.fileList.length + 1,
|
data: data.photoUrl,
|
url: `https://pipe.thhy-tj.com/${data.photoUrl}`
|
}]
|
this.$set(this.formRegister, 'realName', data.realName);
|
this.$set(this.formRegister, 'sex', data.sex);
|
this.$set(this.formRegister, 'sexValue', data.sex == 0 ? '男' : data.sex == 1 ? '女' : '');
|
this.$set(this.formRegister, 'phone', data.phone);
|
this.$set(this.formRegister, 'idNo', data.idNo);
|
this.$set(this.formRegister, 'companyIdValue', data.companyName);
|
this.$set(this.formRegister, 'companyId', data.companyId);
|
this.$set(this.formRegister, 'posIdValue', data.posName);
|
this.$set(this.formRegister, 'posId', data.posId);
|
this.$set(this.formRegister, 'remark', data.remark);
|
this.getPositionData(data.companyId);
|
}
|
},
|
onReady() {
|
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
this.getCompanyData();
|
this.$refs.form.setRules(this.rulesRegister);
|
},
|
methods: {
|
// 获取分公司信息
|
async getCompanyData() {
|
const { data } = await this.$api.system.getCompanyData();
|
this.companyColumns = [data];
|
},
|
// 获取岗位信息
|
async getPositionData(companyId) {
|
this.positionColumns = [];
|
const { data } = await this.$api.system.getPositionData({
|
companyId: companyId
|
});
|
this.positionColumns = [data];
|
},
|
// 读取图片后
|
afterRead(event) {
|
console.log(event);
|
this.fileList.push({
|
status: 'loading',
|
message: '上传中',
|
})
|
uni.uploadFile({
|
url: `${basrUrl}/file/file/upload`,
|
fileType: 'image',
|
filePath: event.file.url,
|
name: 'file',
|
success: (res) => {
|
const data = JSON.parse(res.data);
|
this.$set(this.fileList, this.fileList.length - 1, {
|
id: this.fileList.length + 1,
|
status: 'success',
|
message: '',
|
data: data.data,
|
url: `https://pipe.thhy-tj.com/${data.data}`
|
})
|
},
|
fail: (error) => {
|
uni.$u.toast('上传失败！');
|
}
|
})
|
},
|
// 删除图片
|
deleteImage(event) {
|
console.log(event,'????');
|
this.$nextTick(() => {
|
this.fileList.splice(event.index, 1);
|
})
|
},
|
// 打开性别选择
|
changeSex() {
|
this.showSex = true;
|
this.$set(this.formRegister, 'sex', '');
|
this.$set(this.formRegister, 'sexValue', '');
|
},
|
// 确认选择性别
|
selectSex({ value }) {
|
this.$nextTick(() => {
|
console.log(value,'??????');
|
this.$set(this.formRegister, 'sex', value[0].value);
|
this.$set(this.formRegister, 'sexValue', value[0].label);
|
this.showSex = false;
|
})
|
},
|
// 打开分公司选择
|
changeCompany() {
|
this.showCompany = true;
|
this.$set(this.formRegister, 'companyId', '');
|
this.$set(this.formRegister, 'companyIdValue', '');
|
},
|
// 确认选择分公司
|
selectCompany({ value }) {
|
this.$set(this.formRegister, 'companyId', value[0].companyId);
|
this.$set(this.formRegister, 'companyIdValue', value[0].companyName);
|
this.getPositionData(value[0].companyId);
|
this.showCompany = false;
|
},
|
// 打开岗位选择
|
changePosition() {
|
this.showPosition = true;
|
this.$set(this.formRegister, 'posId', '');
|
this.$set(this.formRegister, 'posIdValue', '');
|
},
|
// 确认选择岗位
|
selectPosition({ value }) {
|
this.$set(this.formRegister, 'posId', value[0].posId);
|
this.$set(this.formRegister, 'posIdValue', value[0].posName);
|
this.showPosition = false;
|
},
|
//
|
submitInsertForm: throttle(function() {
|
this.$refs.form.validate().then((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formRegister);
|
params.photoUrl = this.fileList.length > 0 ? this.fileList[0].data : '';
|
params.openId = uni.getStorageSync('openId') || "";
|
delete params.sexValue;
|
delete params.companyIdValue;
|
delete params.posIdValue;
|
this.$api.system.useRegister(params).then((res) => {
|
if(res.success) {
|
uni.$u.toast("注册信息已提交，请等待审核");
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1500)
|
} else {
|
uni.$u.toast(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000)
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.register_index {
|
position: relative;
|
padding: 10px;
|
height: calc(100vh - 20px);
|
}
|
|
.submit_bnt {
|
position: absolute;
|
bottom: 5%;
|
width: calc(100% - 20px);
|
}
|
|
::v-deep .u-input__content__field-wrapper__field {
|
text-align: right !important;
|
}
|
|
::v-deep .u-upload__wrap {
|
justify-content: flex-end;
|
}
|
|
::v-deep .u-upload__wrap__preview {
|
margin: 0 !important;
|
}
|
</style>
|
