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:2,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>
        <view class="title">身份信息</view>
        <u-form-item labelWidth="auto" label="是否为小队长" required prop="is_captain" borderBottom>
          <u-radio-group v-model="formData.is_captain" 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 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> -->
        <!-- <districtSelector style="margin-top: 30rpx;" ref="districtSelectorRef"></districtSelector> -->
        <districtSelectorTow style="margin-top: 30rpx;" ref="districtSelectorRef"></districtSelectorTow>
        <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.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-item label="驾驶证正面" labelPosition="top" labelWidth="200rpx"
          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="驾驶证反面" labelPosition="top" labelWidth="200rpx"
          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>
      <button @click="addAcountNum" type="primary" class="btn">创建</button>
    </view>
  </view>
</template>

<script>
  import { upLoadImage } from "@/api/file.js"
  import { loginAdd } from "@/api/oaUser.js"
  import districtSelector from "@/components/districtSelector/districtSelector.vue" //地区选择器
  import districtSelectorTow from "@/components/districtSelector/districtSelectorTow.vue" //地区选择器
  export default {
    components: { districtSelector, districtSelectorTow },
    data() {
      return {
        formData: {
          account: '', //账号
          password: '123456', //密码
          password_confirm: '', //确认密码
          // channel: 6, //注册渠道[1-微信小程序 2-微信公众号 3-手机H5 4-电脑PC 5-苹果APP 6-安卓APP]
          id_card: '',
          is_captain: '',// 队长标识
          sex: '',
          avatar: '',
          nickname: '',
          address: '',
          qualification: {
            id_card: "",
            id_card_b: "",
            car_card: "",
            car_card_b: "",
            bank_account: "",
            bank_account_b: ""
          },
        },
        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: {
            validator: (rule, value, callback) => {
              typeof value === 'number' ? callback() : callback('请选择男或女')
            },
            trigger: ['change', 'blur']
          },
          avatar: {
            type: 'string',
            required: true,
            message: '头像不能为空',
            trigger: ['change', 'blur']
          },
          nickname: {
            type: 'string',
            required: true,
            message: '姓名不能为空',
            trigger: ['change', 'blur']
          },
          is_captain:{
            validator: (rule, value, callback) => {
              typeof value === 'number' ? callback() : callback('不能为空')
            },
            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.bank_account': {
            type: 'string',
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
          'qualification.bank_account_b': {
            type: 'string',
            required: true,
            message: '不能为空',
            trigger: ['change', 'blur']
          },
        },
      }
    },
    onLoad() {},
    onReady() {
      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
      this.$refs.uForm.setRules(this.rules)
    },
    onShow() {},
    methods: {
      // 上传头像
      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() {
        let flag = this.$refs.districtSelectorRef.validate();
        this.$refs.uForm.validate().then(async (e) => {
          if(e&&flag){
            uni.showLoading()
            let res = await loginAdd({...this.formData, ...this.$refs.districtSelectorRef.formData});
            uni.hideLoading()
            uni.showToast({
              icon: "none",
              title: "添加成功",
              success: () => {
                setTimeout(() => {
                  uni.$emit('initPersonnel');
                  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>