OfficeApp/subpkg/newPersonnel/newPersonnel.vue

<template>
  <view class="">
    <view class="card">
      <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
        <view class="title">基本信息</view>
        <u-form-item label="电话" required prop="account" borderBottom>
          <u--input v-model="formData.account" placeholder="请输入手机号" type="number"></u--input>
        </u-form-item>
        <u-form-item label="姓名" required prop="nickname" borderBottom>
          <u--input v-model="formData.nickname" placeholder="请输入姓名"></u--input>
        </u-form-item>
        <u-form-item label="性别" required prop="sex" borderBottom>
          <u-radio-group v-model="formData.sex" style="margin: 16rpx;">
            <u-radio :customStyle="{marginRight: '16px'}"
              v-for="(item, index) in [{value:1,label:'男'},{value:0,label:'女'}]" :key="index" :label="item.label"
              :name="item.value">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="头像" required prop="avatar" borderBottom>
          <u-upload :fileList="formData.avatar?[{url:formData.avatar}]:[]" @afterRead="afterReadAvatar"
            @delete="formData.avatar=''" name="avatar" :maxCount="1" width="150rpx" height="150rpx"
            style="margin-top: 10rpx;">
          </u-upload>
        </u-form-item>
        <u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
          <u--input v-model="formData.id_card" placeholder="请输入身份证号" type="idcard"></u--input>
        </u-form-item>
        <!-- <u-form-item labelWidth="auto" label="登录密码" prop="formData.name" borderBottom>
          <u--input v-model="formData.password" placeholder="不输入密码则默认为手机号" password></u--input>
        </u-form-item>
        <u-form-item labelWidth="auto" label="确认密码" prop="formData.name" borderBottom>
          <u--input v-model="formData.password_confirm" placeholder="不输入密码则默认为手机号" password></u--input>
        </u-form-item> -->
        <view class="title">地区信息</view>
        <u-form-item label="省" required prop="province" @click="changeCity('province')" borderBottom>
          <u--input :value="formDataText.province" disabled disabledColor="#fff" placeholder="请选择省"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="市" required prop="city" @click="changeCity('city')" borderBottom>
          <u--input :value="formDataText.city" disabled disabledColor="#fff" placeholder="请选择市"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="区县" required prop="area" @click="changeCity('area')" borderBottom>
          <u--input :value="formDataText.area" disabled disabledColor="#fff" placeholder="请选择区县"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="乡镇" required prop="street" @click="changeCity('street')" borderBottom>
          <u--input :value="formDataText.street" disabled disabledColor="#fff" placeholder="请选择镇"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="村社" required prop="village" @click="changeCity('village')" borderBottom>
          <u--input :value="formDataText.village" disabled disabledColor="#fff" placeholder="请选择村"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item label="小队" required prop="brigade" @click="changeCity('brigade')" borderBottom>
          <u--input :value="formDataText.brigade" disabled disabledColor="#fff" placeholder="请选择小队"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <view class="title">资质信息</view>
        <u-form-item label="身份证正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.id_card"
          borderBottom>
          <u-upload :fileList="formData.qualification.id_card?[{url:formData.qualification.id_card}]:[]"
            @afterRead="afterRead" @delete="formData.qualification.id_card=''" name="id_card" :maxCount="1"
            width="638rpx" height="300rpx" style="margin-top: 10rpx;">
          </u-upload>
        </u-form-item>
        <u-form-item label="身份证反面" required labelPosition="top" labelWidth="200rpx" prop="qualification.id_card_b"
          borderBottom>
          <u-upload :fileList="formData.qualification.id_card_b?[{url:formData.qualification.id_card_b}]:[]"
            @afterRead="afterRead" @delete="formData.qualification.id_card_b=''" name="id_card_b" :maxCount="1"
            width="638rpx" height="300rpx" style="margin-top: 10rpx;">
          </u-upload>
        </u-form-item>
        <u-form-item label="驾驶证正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.car_card"
          borderBottom>
          <u-upload :fileList="formData.qualification.car_card?[{url:formData.qualification.car_card}]:[]"
            @afterRead="afterRead" @delete="formData.qualification.car_card=''" name="car_card" :maxCount="1"
            width="638rpx" height="300rpx" style="margin-top: 10rpx;">
          </u-upload>
        </u-form-item>
        <u-form-item label="驾驶证反面" required labelPosition="top" labelWidth="200rpx" prop="qualification.car_card_b"
          borderBottom>
          <u-upload :fileList="formData.qualification.car_card_b?[{url:formData.qualification.car_card_b}]:[]"
            @afterRead="afterRead" @delete="formData.qualification.car_card_b=''" name="car_card_b" :maxCount="1"
            width="638rpx" height="300rpx" style="margin-top: 10rpx;">
          </u-upload>
        </u-form-item>
        <u-form-item label="银行卡正面" required labelPosition="top" labelWidth="200rpx" prop="qualification.bank_account"
          borderBottom>
          <u-upload :fileList="formData.qualification.bank_account?[{url:formData.qualification.bank_account}]:[]"
            @afterRead="afterRead" @delete="formData.qualification.bank_account=''" name="bank_account" :maxCount="1"
            width="638rpx" height="300rpx" style="margin-top: 10rpx;">
          </u-upload>
        </u-form-item>
        <u-form-item label="银行卡反面" required labelPosition="top" labelWidth="200rpx" prop="qualification.bank_account_b"
          borderBottom>
          <u-upload :fileList="formData.qualification.bank_account_b?[{url:formData.qualification.bank_account_b}]:[]"
            @afterRead="afterRead" @delete="formData.qualification.bank_account_b=''" name="bank_account_b"
            :maxCount="1" width="638rpx" height="300rpx" style="margin-top: 10rpx;">
          </u-upload>
        </u-form-item>
      </u--form>
      <u-picker :show="showProvince" :columns="[changeList()]" :keyName="changeType+'_name'" @confirm="confirm"
        @cancel="showProvince = false" @close="showProvince = false"></u-picker>
      <button @click="addAcountNum" type="primary" class="btn">创建</button>
    </view>
  </view>
</template>

<script>
  import { upLoadImage } from "@/api/file.js"
  import { commonProvince, commonCity, commonArea, commonStreet, commonVillage, commonBrigade } from "@/api/oaPbulic.js"
  import { loginAdd } from "@/api/oaUser.js"
  import { Toast } from "../../libs/uniApi"
  export default {
    data() {
      return {
        showProvince: false,
        formData: {
          account: '', //账号
          password: '123456', //密码
          password_confirm: '', //确认密码
          // channel: 6, //注册渠道[1-微信小程序 2-微信公众号 3-手机H5 4-电脑PC 5-苹果APP 6-安卓APP]
          id_card: '',
          sex: '',
          avatar: '',
          nickname: '',
          province: '',
          city: '',
          area: '',
          street: '',
          village: '',
          brigade: '',
          address: '测试地址',
          qualification: {
            id_card: "",
            id_card_b: "",
            car_card: "",
            car_card_b: "",
            bank_account: "",
            bank_account_b: ""
          },
        },
        formDataText: {
          province: '',
          city: '',
          area: '',
          street: '',
          village: '',
          brigade: '',
        },
        rules: {
          account: {
            required: true,
            pattern: /^(1[3456789]\d{9})$/,
            message: '请输入正确的手机号码',
            trigger: ['change', 'blur']
          },
          id_card: {
            required: true,
            pattern: /^\d{17}[\dX]$|^\d{15}[\dX]$/,
            message: '请输入正确的身份证号',
            trigger: ['change', 'blur']
          },
          sex: {
            type: 'number',
            max: 1,
            required: true,
            message: '请选择男或女',
            trigger: ['blur', 'change']
          },
          avatar: {
            type: 'string',
            required: true,
            message: '头像不能为空',
            trigger: ['change', 'blur']
          },
          nickname: {
            type: 'string',
            required: true,
            message: '姓名不能为空',
            trigger: ['change', 'blur']
          },
          province: {
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          city: {
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          area: {
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          street: {
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          village: {
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          brigade: {
            type: 'any',
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          'qualification.id_card': {
            type: 'string',
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          'qualification.id_card_b': {
            type: 'string',
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          'qualification.car_card': {
            type: 'string',
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          'qualification.car_card_b': {
            type: 'string',
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          'qualification.bank_account': {
            type: 'string',
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          'qualification.bank_account_b': {
            type: 'string',
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
        },
        provinceList: [],
        cityList: [],
        areaList: [],
        streetList: [],
        villageList: [],
        brigadeList: [],
        changeType: '', //当前选择的城市类型
      }
    },
    onLoad() {
      this.initProvinceAndCity()
    },
    onReady() {
      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      this.$refs.uForm.setRules(this.rules)
    },
    onShow() {},
    methods: {
      async initProvinceAndCity() {
        let res = await commonProvince();
        this.provinceList = res.data;
        this.provinceList.forEach(item => {
          if (item.province_name.indexOf('四川') !== -1) {
            this.formData.province = item.province_code;
            this.formDataText.province = item.province_name;
            commonCity({
              city: item.province_code
            }).then(cityRes => {
              this.cityList = cityRes.data;
              this.cityList.forEach(item => {
                if (item.city_name.indexOf('泸州') !== -1) {
                  this.formData.city = item.city_code;
                  this.formDataText.city = item.city_name;
                  commonArea({
                    area: item.city_code
                  }).then(areaRes => {
                    this.areaList = areaRes.data;
                  })
                }
              })
            })
          }
        })

      },
      // 选择城市
      changeCity(type) {
        if (this[type + 'List'].length == 0) return Toast('请先选择上一级地区');
        this.changeType = type;
        this.showProvince = true;
      },
      // 选择列表
      changeList() {
        return this[this.changeType + 'List'];
      },
      // 选中城市
      confirm(e) {
        let flag = false;//清空所选标记
        if(this.formData[this.changeType] != e.value[0][this.changeType + '_code'])flag = true;
        if (this.changeType == 'brigade') {
          this.formData.brigade = e.value[0].id;
          this.formDataText.brigade = e.value[0].brigade_name;
          this.showProvince = false;
          return ;
        }
        this.formData[this.changeType] = e.value[0][this.changeType + '_code'];
        this.formDataText[this.changeType] = e.value[0][this.changeType + '_name'];
        // 加载下一级城市信息
        switch (this.changeType) {
          case 'province':
            this.loadCity(this.formData['province']);
            break;
          case 'city':
            this.loadArea(this.formData['city']);
            break;
          case 'area':
            this.loadStreet(this.formData['area']);
            break;
          case 'street':
            this.loadVillage(this.formData['street']);
            break;
          case 'village':
            this.loadBrigade(this.formData['village']);
            break;
        }
        // 清空之前所选信息
        if(flag) switch (this.changeType) {
          case 'province':
            this.formData.city = '';
            this.formDataText.city = ''
          case 'city':
            this.formData.area = '';
            this.formDataText.area = ''
          case 'area':
            this.formData.street = '';
            this.formDataText.street = ''
          case 'street':
            this.formData.village = '';
            this.formDataText.village = ''
          case 'village':
            this.formData.brigade = '';
            this.formDataText.brigade = ''
        }
        this.showProvince = false;
      },
      loadCity(code) {
        commonCity({
          city: code
        }).then(res => {
          this.cityList = res.data;
        })
      },
      loadArea(code) {
        commonArea({
          area: code
        }).then(res => {
          this.areaList = res.data;
        })
      },
      loadStreet(code) {
        commonStreet({
          street: code
        }).then(res => {
          this.streetList = res.data;
        })
      },
      loadVillage(code) {
        commonVillage({
          village: code
        }).then(res => {
          this.villageList = res.data;
        })
      },
      loadBrigade(code) {
        commonBrigade({
          brigade: code
        }).then(res => {
          this.brigadeList = res.data;
        })
      },
      // 上传头像
      async afterReadAvatar(event) {
        upLoadImage({
          filePath: event.file.url,
          name: 'file'
        }).then(res => {
          this.formData.avatar = res.data.uri
        })
      },
      // 新增图片
      async afterRead(event) {
        this.upLoad(event.file.url, event.name)
      },
      // 上传图片
      upLoad(url, type) {
        upLoadImage({
          filePath: url,
          name: 'file'
        }).then(res => {
          this.formData.qualification[type] = res.data.uri
        })
      },
      // 创建账号
      addAcountNum() {
        this.$refs.uForm.validate().then(async (e) => {
          if(e){
            uni.showLoading()
            let res = await loginAdd(this.formData);
            uni.hideLoading()
            uni.showToast({
              icon:"none",
              title:"添加成功",
              success: () => {
                setTimeout(()=>{
                  uni.navigateBack()
                },1000)
              }
            })
          }
        })

      },
      // // 获取机型,[1-微信小程序 2-微信公众号 3-手机H5 4-电脑PC 5-苹果APP 6-安卓APP]
      // initTerminal() {
      //   // #ifndef APP-PLUS
      //   this.formData.terminal = 6;
      //   // #endif
      //   uni.getSystemInfo({
      //     success: (res) => {
      //       const platform = res.platform.toLowerCase();
      //       if (platform === 'ios') {
      //         this.formData.terminal = 5;
      //       } else if (platform === 'windows') {
      //         this.formData.terminal = 4;
      //       } else if (platform === 'mac') {
      //         this.formData.terminal = 4;
      //       }
      //     }
      //   })
      //   // #ifdef H5
      //   this.formData.terminal = 3;
      //   // #endif
      //   // #ifdef MP-WEIXIN
      //   this.formData.terminal = 1;
      //   // #endif
      // },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .card {
    background-color: #fff;
    margin: 28rpx;
    padding: 28rpx;
    border-radius: 14rpx;

    .title {
      font-weight: 500;
      font-size: 34rpx;
      margin-top: 30rpx;

      &:nth-child(1) {
        margin-top: 0;
      }

      &::before {
        width: 8rpx;
        height: 26rpx;
        border-radius: 4rpx;
        background-color: #3175f9;
        content: "";
        display: inline-block;
        margin-right: 8rpx;
      }
    }

    .btn{
      margin-top: 32rpx;
      // margin-bottom: 40rpx;
      width: 100%;
      height: 84rpx;
      background: $theme-oa-color;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;
    }
  }
</style>