mall-web-ssr/components/mobile/staffManagement/StaffList.vue

<template>
  <div class="seek">
    <div class="com-mobile-header mobile-center-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p>员工管理</p>
      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
    </div>
    <!--列表-->
    <div class="mobile-fix-content mobile-centerfix-content" id="mobile-staff-center">
      <!--列表-->
      <div v-if="activeTab == 0">
        <div class="staff-head">
          <span class="inline-block" :class="{'active': switchType === 'info'}" @click="setSwitchType('info')">员工信息</span>
          <span v-show="isAdmin" class="inline-block" :class="{'active': switchType === 'Audit'}" @click="setSwitchType('Audit')">审核绑定</span>
        </div>
        <div class="staff-record" v-if="switchType === 'info'">
          <div class="search-content clearfix">
            <div class="search">
              <input type="text" placeholder="人员姓名、电话号码、邮箱或UU" v-model="staffSearch" class="staff-search" @keyup.13="staffRecord()">
              <span @click="staffRecord()"><i class="iconfont icon-sousuo"></i></span>
            </div>
            <div class="search-filter">
              <div class="select-wrap" @click="showRoleEvent($event)"><strong v-text="role"></strong><i class="iconfont icon-arrow-down"></i></div>
              <ul class="select-list" v-if="showRole">
                <li @click="rolesEvent()">全部角色</li>
                <li v-for="item in rolesList" v-text="item.desc" @click="rolesEvent(item)">全部角色</li>
              </ul>
            </div>
          </div>
          <div class="list-content" v-if="staffDataList && staffDataList.length">
            <div class="bg" v-for="item in staffDataList">
              <div class="staff-list">
                <div class="list-item"><span>UU账号：</span><span v-text="item.userUU">100000721</span></div>
                <div class="list-item"><span>姓名：</span><span v-text="item.userName">张洪别</span></div>
                <div class="list-item"><span>性别：</span><span v-text="item.userSex === 'F' ? '女' : item.userSex === 'M' ? '男' : '-'">男</span></div>
                <div class="list-item"><span>手机号：</span><span v-text="item.userTel">12345678901</span></div>
                <div class="list-item"><span>邮箱：</span><span v-text="item.userEmail">12345678901</span></div>
                <div class="list-item"><span>角色：</span><span class="role" v-for="role in item.roles" v-text="role.desc ? role.desc.slice(0,2) : ''" v-bind:class="'bg' + role.color">普通</span></div>
              </div>
              <div class="list-footer">
                <div @click="goEdit(item)" class="edit handle" v-bind:class="{'no-allow': (item.userUU === userInfo.userUU)}"><i class="iconfont icon-edit"></i><span>编辑</span></div>
                <div @click="openDelete(item)" class="delete handle" v-bind:class="{'no-allow': (item.userUU === userInfo.userUU)}"><i class="iconfont icon-lajitong"></i><span>删除</span></div>
              </div>
            </div>
          </div>
          <empty-status :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'" v-else></empty-status>
          <pull-up :fixId="'mobile-staff-center'" :isValid="isValid" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
          <nuxt-link class="staff-add" :to="'/mobile/user/staff/add'"><i class="iconfont icon-add"></i>新增用户</nuxt-link>
        </div>
        <div class="staff-record" v-if="switchType === 'Audit'">
          <div class="search-content">
            <input type="text" placeholder="人员姓名、电话号码、邮箱或UU" v-model="auditSearch" @keyup.13="auditRecord()">
            <span @click="auditRecord()"><i class="iconfont icon-sousuo"></i></span>
          </div>
          <div class="list-content" v-if="AuditList && AuditList.length">
            <div class="bg" v-for="item in AuditList">
              <div class="staff-list">
                <div class="list-item"><span>用户名：</span><span v-text="item.user.vipName"></span></div>
                <div class="list-item"><span>UU账号：</span><span v-text="item.user.userUU">100000721</span></div>
                <div class="list-item"><span>手机号：</span><span v-text="item.user.mobile">12345678901</span></div>
                <div class="list-item"><span>邮箱：</span><span v-text="item.user.email">12345678901</span></div>
              </div>
              <div class="list-footer">
                <div class="edit handle" @click="agreeEvent(item, '1')"><i class="iconfont icon-check-circle"></i><span>同意</span></div>
                <div class="handle delete" @click="agreeEvent(item, '0')"><i class="iconfont icon-close-circle"></i><span>拒绝</span></div>
              </div>
            </div>
          </div>
          <empty-status :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'" v-else></empty-status>
          <pull-up :fixId="'mobile-staff-center'" :searchMore="fetch" :allPage="allPageAudit" :page="page" @pullUpAction="onPullUpAudit"></pull-up>
        </div>
      </div>
      <!--编辑角色-->
      <div v-if="activeTab == 1">
        <div v-for="(role, index) in rolesList">
          <div class="staff-role">
            <div class="staff-header"><span :class="'active_0' + role.color"><b></b>{{role.desc}}</span></div>
            <div class="staff-content">
              <label class="radio-label clearfix" >
                <input type="checkbox" :id="role.id" :checked="role.checked" @change="checkRole(role, index)"/>
                <label :for="role.id" v-bind:class="{'margin0': role.color === '4' || role.color === '2'}"></label>
                <p class="staff-des">{{role.duty}}</p>
              </label>
            </div>
          </div>
        </div>
        <div class="staff-footer" v-if="rolesList || rolesList.length > 0">
          <div class="cancel handle" @click="cancelBind">取消</div>
          <div class="agree handle" @click="sureEdit">确定</div>
        </div>
      </div>
      <pull-up :fixId="'mobile-staff-center'" :isValid="isValid" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
      <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
    </div>
    <!--删除员工-->
    <div class="deleteKuang" v-if="showDelete">
      <div class="kuangContent">
        <div class="title">温馨提示</div>
        <div class="titleinfo">确定删除该用户吗？</div>
        <div class="K_btn">
          <div class="cancelBtn" @click="showDelete = false">取消</div>
          <div class="answerBtn" @click="sureDelete()">确定</div>
        </div>
      </div>
    </div>
    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>
<script>
  import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
  import { BaseFilter } from '~components/mobile/base'
  export default {
    layout: 'mobile',
    data () {
      return {
        remindText: '',
        timeoutCount: 0,
        page: 1,
        count: 10,
        staffSearch: '',
        staffDataList: [],
        auditSearch: '',
        AuditList: [],
        isChange: false,
        hasChange: false,
        switchType: 'info',
        showDelete: false,
        currentObject: '',
        activeTab: 0,
        checked: false,
        rolesList: [],
        currentStaff: [],
        isValid: true,
        role: '全部角色',
        showRole: false
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus,
      BaseFilter
    },
    mounted () {
      // 获取角色
      this.$nextTick(() => {
        this.getRoles()
      })
      let _this = this
      _this.$nextTick(function () {
        window.addEventListener('scroll', function () {
          _this.scroll()
        }, false)
        document.body.onclick = () => {
          this.showRole = false
        }
      })
    },
    watch: {
      'staffData': {
        handler: function (val) {
          if (this.isChange) {
            this.staffDataList = val.content
            this.isChange = false
          } else {
            this.staffDataList = [...this.staffDataList, ...val.content]
          }
        },
        immediate: true
      },
      'auditBind': {
        handler: function (val) {
          if (this.hasChange) {
            this.AuditList = val.content
            this.hasChange = false
          } else {
            this.AuditList = [...this.AuditList, ...val.content]
          }
        }
      }
    },
    mounted () {
      // 获取角色
      this.$nextTick(() => {
        this.getRoles()
      })
    },
    computed: {
      staffData () {
        return this.$store.state.staff.infoList.info.data
      },
      fetching () {
        return this.staffData.fetching
      },
      allPage () {
        return Math.floor(this.staffData.totalElements / this.staffData.size) + Math.floor(this.staffData.totalElements % this.staffData.size > 0 ? 1 : 0)
      },
      auditBind () {
        return this.$store.state.staff.infoList.audit.data || {content:[]}
      },
      fetch () {
        return this.$store.state.staff.infoList.audit.fetching
      },
      allPageAudit () {
        return Math.floor(this.auditBind.totalElements / this.auditBind.size) + Math.floor(this.auditBind.totalElements % this.auditBind.size > 0 ? 1 : 0)
      },
      userInfo () {
        return this.$store.state.option.user.data
      }
    },
    methods: {
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount++
      },
      setSwitchType (type) {
        this.switchType = type
        this.page = 1
        if ( type === 'info') {
          this.staffRecord()
        } else {
          this.auditRecord()
        }
      },
      staffList () {
        this.$store.dispatch('staff/loadStaffList', {count: this.count, page: this.page, enuu: this.userInfo.enterprise.uu})
      },
      onPullUpAction: function () {
        this.page++
        this.staffList()
        this.isValid = true
      },
      // 员工搜索
      staffRecord () {
        this.role = '全部角色'
        this.showRole = false
        this.$store.dispatch('staff/loadStaffList', {count: this.count, page: this.page, enuu: this.user.data.enterprise.uu, keyword: this.staffSearch})
      },
      // 删除员工
      openDelete (item) {
        this.currentObject = item
        this.showDelete = true
      },
      // 确认删除
      sureDelete () {
        this.$http.delete('/basic/user/' + this.currentObject.userUU)
          .then(response => {
            // console.log(response)
            this.showDelete = false
            this.onRemind('用户' + this.currentObject.userUU + '删除成功')
            this.page = 1
            this.isChange = true
            this.staffList()
          }).catch(data => {
          this.showDelete = false
          this.onRemind(data.response.data)
        })
      },
      // 打开选择
      showRoleEvent (e) {
        if (e) {
          e.stopPropagation()
        }
        this.showRole = !this.showRole
      },
      // 选择性搜索
      rolesEvent (type) {
        this.showRole = !this.showRole
        this.page = 1
        if (type) {
          this.role = type.desc
          let params = {
            count: this.count,
            page: this.page,
            enuu: this.user.data.enterprise.uu,
            keyword: this.staffSearch,
            roleId: type.id
          }
          this.$store.commit('infoList/REQUEST_INFO_LIST')
          this.$http.get('/basic/user/enterprise/keywordinfo', {params})
            .then(response => {
              this.$store.commit('staff/infoList/GET_INFO_LIST_SUCCESS', response.data ? response.data : {})
            }, err => {
              this.$store.commit('staff/infoList/GET_INFO_LIST_FAILURE', err)
            })
        } else {
          this.role = '全部角色'
          this.staffRecord()
        }
      },
      // 获取角色
      getRoles () {
        this.isValid = false
        this.$http.get('/account/role')
          .then(response => {
            if (response.data) {
              this.rolesList = response.data
            }
          })
      },
      // 当前选中对象
      goEdit (item) {
        let currentData = item
        this.currentStaff = this.baseUtils.deepCopy(currentData)
        this.activeTab = 1
        for (let i = 0; i < this.currentStaff.roles.length; i++) {
          for (let j = 0; j < this.rolesList.length; j++) {
            //判断已绑定角色
            if (this.currentStaff.roles[i].id === this.rolesList[j].id) {
              this.rolesList[j].checked = true
            }
          }
        }
      },
      // 选择角色
      checkRole (role) {
        role.checked = !role.checked
      },
      // 取消编辑
      cancelBind () {
        this.activeTab = 0
      },
      // 确定编辑
      sureEdit () {
        this.currentStaff.roles = []
        for (var i = 0 ; i< this.rolesList.length; i++) {
          if (this.rolesList[i].checked) {
            this.currentStaff.roles.push(this.rolesList[i])
          }
        }
        this.$http.put(`/basic/user/updaterole`, this.currentStaff)
          .then(() => {
            this.onRemind('角色编辑成功')
            this.activeTab = 0
            this.page = 1
            this.isChange = true
            this.staffList()
          })
      },
      // 申请绑定搜索
      auditRecord () {
        this.$store.dispatch('staff/loadBindAudit', {count: this.count, page: this.page, speaceUU: this.user.data.enterprise.uu, status: 311, keyword: this.auditSearch})
      },
      // 绑定下拉
      onPullUpAudit () {
        this.page++
        this.auditRecord()
      },
      // 申请绑定操作事件 （同意和拒绝）
      agreeEvent (type, flag) {
        this.$http.get(`/basic/enterprise/auditApply?id=${type.id}&status=${Number(flag)}&userUU=${type.userUU}`)
        this.auditSearch = null
        this.page = 1
        this.auditRecord()
      }
    }
  }
</script>
<style lang="scss">
  $base-color: #3f84f6;
  #mobile-staff-center {
    padding-bottom: .5rem;
    margin: 0 auto;
    .staff-head {
      height: .82rem;
      line-height: .82rem;
      text-align: center;
      background: #fff;
      span {
        font-size: .29rem;
        &:first-child {
          margin-right: 2.6rem;
        }
        &.active {
          color: $base-color;
          border-bottom: 1px solid $base-color;
        }
      }
    }
    .staff-record {
      .search-content {
        padding: .25rem 0;
        text-align: center;
        input {
          width: 6.9rem;
          border: 1px solid #376ff3;
        }
        .staff-search {
          width: 5.31rem;
        }
        .search {
          float: left;
        }
        .search-filter {
          float: left;
          margin-left: .35rem;
          position: relative;
          .select-wrap {
            width: 1.45rem;
            height: .58rem;
            line-height: .58rem;
            background-color: #ffffff;
            border-radius: .06rem;
            border: solid 1px #b4b4b4;
            strong{
              font-weight: normal;
            }
            i{
              float:right;
              display:inline-block;
              font-size: .1rem;
              font-weight: bold;
              color: $base-color;
            }
          }
          ul.select-list{
            width: 1.45rem;
            position: absolute;
            left: 0rem;
            top: .59rem;
            border: solid 1px #b4b4b4;
            border-top: none;
            -webkit-box-shadow: 0 1px 5px 0 #aaa;
            box-shadow: 0 1px 5px 0 #aaa;
            border-radius: .04rem;
            li{
              background: #fff;
              text-align: left;
              padding: 0 .13rem;
              font-size: .28rem;
              height: .53rem;
              line-height: .53rem;
            }
          }
        }
      }
      .list-content{
        margin: 0 auto;
        padding: 0 .20rem;
        margin-bottom:1.2rem;
        div.bg{
          padding: .32rem .24rem 0 .24rem;
          margin-bottom: .25rem;
          width: 7.1rem;
          background: #fff;
          border-radius: .05rem;
          &:last-child {
            margin-bottom: 1.5rem;
          }
        }
        .staff-list {
          width: 100%;
          .list-item {
            margin-bottom: .14rem;
            &:last-child{
              padding-bottom: 0;
            }
            span {
              display: inline-block;
              font-size: .28rem;
              &:first-child {
                width: 1.3rem;
                text-align: right;
                color: #3f84f6;
              }
              &:last-child {
                color: #666;
              }
            }
            span.role{
              display: inline-block;
              margin-right: .1rem;
              padding: 0 .05rem;
              height: .25rem;
              line-height: .25rem;
              text-align: center;
              font-size: .24rem;
              color: #fff;
              border-radius: .04rem;
            }
            span.role.bg1{
              background-color: #89aefa;
            }
            span.role.bg2{
              background-color: #01d9ce;
            }
            span.role.bg3{
              background-color: #01d9ce;
            }
            span.role.bg4{
              background-color: #ff6769;
            }
            span.role.bg5{
              background-color: #ff8050;
            }
          }
        }
        .list-footer {
          width: 100%;
          height: .8rem;
          line-height: .8rem;
          background: #fff;
          border-top: 1px solid #d9d9d9;
          div.handle{
            float: left;
            width: 50%;
            margin: 0 auto;
            text-align: center;
            span{
              font-size: .26rem;
              color: #333;
            }
            i.iconfont {
              margin-right: .06rem;
              font-size: .36rem;
              color: #333;
            }
          }
          div.edit{
            border-right: 1px solid #d9d9d9;
          }
          div.no-allow {
            color: #606168;
            cursor: not-allowed;
          }
        }
      }
      .staff-add {
        display: inline-block;
        position: fixed;
        bottom: 1.2rem;
        left: 50%;
        margin-left: -3.29rem;
        width: 6.59rem;
        height: .77rem;
        line-height: .77rem;
        text-align: center;
        font-size: .32rem;
        color: #fff;
        background-color: #3f84f6;
        border-radius: 0.08rem;
        i{
          margin-right: .1rem;
          font-size: .32rem;
          color: #fff;
        }
      }
    }
    /*编辑角色*/
    .staff-role{
      margin: .2rem auto 0;
      padding: 0 .24rem;
      width: 7.1rem;
      height: 1.72rem;
      background-color: #fff;
      border-radius: .05rem;
      .staff-header {
        height: .5rem;
        line-height: .5rem;
        text-align: left;
        border-bottom: 1px solid #d9d9d9;
        span {
          font-size: .28rem;
          color: #333;
          b{
            display: inline-block;
            margin-right: .05rem;
            width: .05rem;
            height: .18rem;
            background-color: #3f84f6;
          }
        }
        span.active_02 b{
          background-color: #8aaefc;
        }
        span.active_03 b{
          background-color: #09d7cd;
        }
        span.active_04 b{
          background-color: #ff676a;
        }
        span.active_05 b{
          background-color: #fc9b68;
        }
      }
      .staff-content {
        padding-top: .25rem;
        .radio-label {
          background-size: contain;
          vertical-align: middle;
          input{
            float: left;
            display: none;
            margin: .18rem .1rem 0 0;
            width: .36rem;
            height: .36rem;
            border: solid 2px #999999;
          }
          label {
            float: left;
            margin: .18rem .1rem 0 0;
            width: .36rem;
            height: .36rem;
            border-radius: 50%;
            background: url(/images/mobile/center/user/car-noChecked.png) no-repeat;
            background-size: contain;
            vertical-align: middle;
          }
          label.margin0 {
            margin: 0.05rem .1rem 0 0;
          }
          input:checked + label {
            background-image: url(/images/mobile/center/user/car-checked.png);
          }
          input.checked + label {
            background-image: url(/images/mobile/center/user/car-checked.png);
          }
        }
        .staff-des{
          float: left;
          width: 6rem;
          line-height: .42rem;
          font-weight: normal;
          font-size: .28rem;
          color: #666666;
        }
      }
    }
    .staff-footer{
      overflow: hidden;
      margin-top: .6rem;
      div.handle{
        float: left;
        width: 3.24rem;
        height: .77rem;
        line-height: .77rem;
        font-size: .32rem;
        color: #fff;
        text-align: center;
        border-radius: .08rem;
        &:first-child{
          margin: 0 .28rem 0 .35rem;
          background-color: #acaaab;
        }
        &:last-child{
          background-color: #3f84f6;
        }
      }
    }
  }
  /*删除弹框*/
  .deleteKuang {
    position: fixed;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    .kuangContent {
      border-radius: 5px;
      background: #fff;
      width: 5rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      overflow: hidden;
      .titleinfo {
        font-size: .3rem;
        color: #666;
        text-align: center;
        margin-top: 0.5rem;
        margin-bottom: 0.1rem;
      }
      .title {
        background: #5078cb;
        height: .7rem;
        line-height: .7rem;
        font-size: .3rem;
        color: #fff;
        text-align: center;
      }
      .info {
        color: #f00;
        text-align: center;
      }
      .K_btn {
        margin-top: 0.4rem;
        line-height: 0.7rem;
        height: 0.7rem;
        &::after{
          clear: both;
          display: block;
          content: ' ';
          visibility: hidden;
          zoom: 1;
        }
        div {
          float: left;
          width: 50%;
          font-size: 0.3rem;
          text-align: center;
          &.cancelBtn {
            background: #b4b5b9;
            color: #333;
          }
          &.answerBtn {
            background: #5078cb;
            color: #fff;
          }
        }
      }
    }
  }
</style>