LSM_OIL_SITE/packageStaff/pages/staff/editStaff/addUser.vue

<template>
  <view class="page-content my-bg">
    <cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
      <block slot="backText">返回</block>
      <block slot="content">员工管理</block>
    </cu-custom>
    <view class="margin radius">
      <form>
        <view class="cu-form-group">
          <view class="title">姓名</view>
          <input
            :maxlength="8"
            @input="getChinese"
            :value="userInfo.cUserName"
            @blur="showChinese"
            placeholder="请输入姓名"
            name="input"
          />
        </view>
        <view class="cu-form-group">
          <view class="title">手机号</view>
          <input
            type="number"
            :maxlength="11"
            v-model="userInfo.phone"
            placeholder="请输入手机号"
            name="input"
          />
        </view>

        <view class="cu-form-group text-right">
          <view class="title">权限设置</view>
          <view class>请选择以下权限</view>
        </view>
        <view class="padding bg-white">
          <checkbox-group @change="checkboxChange" class="flex flex-wrap justify-between">
            <view class="basis-sm margin-bottom-sm" v-for="(item,index) in checkbox" :key="index">
              <checkbox
                @tap="item.checked=!item.checked"
                class="round red"
                :class="item.checked?'checked':''"
                :checked="item.checked?true:false"
                :value="item.value"
              ></checkbox>
              <text class="padding-left-xs">{{item.name}}</text>
            </view>
          </checkbox-group>
        </view>
      </form>
      <view class="padding-top">
        <view class="text-lg">添加说明</view>
        <view class="padding-top-sm text-sm text-grey">
          <view class="margin-bottom-xs">1、员工添加成功后，系统会向该员工发送一条短信，短信中包含了云站的识别码。</view>
          <view
            class="margin-bottom-xs"
          >2、用户在收到短信后，需要关注“星油云站公众号”，进入小程序，输入云站编码后，根据页面要求输入对应的手机号，姓名，身份证信息，与管理员添加的信息一致方可绑定成功。</view>
          <view class>3、绑定成功后无需再次登录操作。</view>
        </view>
      </view>
    </view>
    <view class="margin-left margin-right padding-lg bottom-bg">
      <button class="bg-main-oil round" @tap="saveInfo">保存</button>
    </view>
  </view>
</template>

<script>
import staffApi from '@/packageStaff/api/staff.js'
export default {
  data() {
    return {
      tempUid: uni.getStorageSync('tempUid'),
      checkbox: [],
      userInfo: {},
      mainURL: this.global.mainURL,
      authList: [],
      lastAuthList: []
    }
  },
  created() {
    this.getAllMenu()
    if (this.tempUid.type === 'edit') {
      setTimeout(() => {
        this.getUserInfo()
      }, 200);
    }
  },
  methods: {

    showChinese() {
      const reg = /[\u4e00-\u9fa5]/g
      var names = this.userInfo.cUserName.match(reg);
      this.userInfo.cUserName = names.join("")
      if (names) {
        this.$set(this.userInfo, 'cUserName', names.join(""))
      }
    },
    // 中文提取
    getChinese(e) {
      var value = e.target.value
      console.log('e-target-value', value)
      if (value !== null && value !== '') {
        const reg = /[\u4e00-\u9fa5]/g
        var names = value.match(reg);
        // console.log(names)
        // this.$set(this.userInfo, 'cUserName', names.join(""))
        if (names) {
          this.$set(this.userInfo, 'cUserName', names.join(""))
        }

        console.log('v-model-name', this.userInfo.cUserName)
      }


    },
    calcMenuList() {
      this.checkbox.forEach(item => {
        console.log(item.checked)
        if (item.checked) {
          this.lastAuthList.push(item.value)
        }
      })
      console.log('计算出来的', this.lastAuthList)
    },
    checkboxChange(e) {
      var items = this.checkbox,
        values = e.detail.value;
      for (var i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i]
        if (values.includes(item.value)) {
          this.$set(item, 'checked', true)
        } else {
          this.$set(item, 'checked', false)
        }
      }
    },
    updateUser(data4) {
      staffApi.updateUser(data4).then(res => {
        if (res.code === 20000) {
          uni.showToast({
            title: res.msg,
            duration: 3000
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 2500);
        }
      })
    },
    addUser(data4) {
      staffApi.addOilUser(data4).then(res => {
        if (res.code === 20000) {
          uni.showToast({
            title: res.msg,
            duration: 3000
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 2500);
        }
      })
    },
    saveInfo() {
      if (!this.userInfo.cUserName) {
        uni.showToast({
          title: '请输入员工姓名',
          icon: 'none'
        })
        return false
      }
      if (!this.userInfo.phone) {
        uni.showToast({
          title: '请输入员工手机号',
          icon: 'none'
        })
        return false
      } else if (!/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1})|(16[0-9]{1}))+\d{8})$/.test(this.userInfo.phone)) {
        uni.showToast({
          title: '手机号码不正确',
          icon: 'none'
        })
        return false
      }
      this.calcMenuList()
      const data4 = {
        cUserId: this.userInfo.cUserId,
        cUserName: this.userInfo.cUserName,
        phone: this.userInfo.phone,
        menuIdLst: this.lastAuthList,
        pushState: 1,
        pushProcedureState: 1
      }

      this.addUser(data4)

    },
    getAllMenu() {
      staffApi.getOilSiteAllMenu(this.tempUid.id).then(res => {
        if (res.code === 20000) {
          var auths = []
          var temp = res.data
          temp.forEach(item => {
            auths.push({
              value: item.menuId,
              checked: false,
              name: item.menuName
            })
          })
          this.checkbox = auths
        }
      })
    },
    getUserInfo() {
      staffApi.findUserAuthById(this.tempUid.id).then(res => {
        if (res.code === 20000) {
          this.userInfo = res.data
          this.authList = res.data.authList
          if (this.authList && this.authList.length > 0) {
            console.log('已有权限', this.authList)
            this.authList.forEach((auth, index) => {
              this.checkbox.forEach(item => {
                if (auth.menuId === item.value) {
                  this.$set(item, 'checked', true)
                }
              })
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
</style>