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.id"
              ></checkbox>
              <text class="padding-left-xs">{{item.roleName}}</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'
import oliSiteApi from '@/api/oli-site.js'
import oliUserApi from '@/api/oli-user.js'
export default {
  data() {
    return {
		siteId:uni.getStorageSync('oilSiteId'),
      tempUid: uni.getStorageSync('tempUid'),
      checkbox: [],
      userInfo: {},
      mainURL: this.global.mainURL,
      authList: [],
      lastAuthList: [],
	  menuList:'',
	  oilItem:uni.getStorageSync('siteOli')
    }
  },
  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) {
		console.log(e)
      var items = this.checkbox,
        values = e.detail.value; 
		this.menuList = values
      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) {
      oliUserApi.addNewStaff(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 = {
		siteId:this.siteId,
        id: this.userInfo.cUserId,
        userName: this.userInfo.cUserName,
        phone: this.userInfo.phone,
        roleIds:  this.menuList.toString(),
        pushState: 1,
		channelId:uni.getStorageSync('channelId'),
        pushProcedureState: 1
      }

      this.addUser(data4)

    },
    getAllMenu() {
	// 获取权限列表
	oliSiteApi.getRoleList().then( (res)=>{
		console.log(res)
		for(let i = 0 ; i <res.data.length ; i++){
			if (res.data[i].roleName != 'ROOT' ) {
				this.checkbox.push(res.data[i])
			}
		}
	} )
      // 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>