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 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 roles" 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'" :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 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: '',
        role: '全部角色',
        roles: [],
        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]
          }
        }
      }
    },
    computed: {
      staffData () {
        return this.$store.state.staff.infoList.info.data
      },
      fetching () {
        return this.$store.state.staff.infoList.info.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()
        }
      },
      // 获取角色信息
      getRoles () {
        this.$http.get('/account/role')
          .then(response => {
            if (response.data) {
              this.roles = response.data
            }
          })
          .catch(err => {
            console.log(err)
        })
      },
      staffList () {
        this.$store.dispatch('staff/loadStaffList', {count: this.count, page: this.page, enuu: this.userInfo.enterprise.uu})
      },
      onPullUpAction: function () {
        this.page++
        this.staffList()
      },
      goEdit (item) {
        this.$store.commit('staff/infoList/EDIT_DATA_SUCCESS', item)
        this.$router.push('/mobile/user/staff/edit')
      },
      // 删除员工
      openDelete (item) {
        this.currentObject = item
        this.showDelete = 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})
      },
      // 打开选择
      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()
        }
      },
      sureDelete () {
        this.$http.delete('/basic/user/' + this.currentObject.userUU)
          .then(response => {
            console.log(response.data)
            this.showDelete = false
            this.onRemind('用户' + this.currentObject.userUU + '删除成功')
            this.staffData()
          }).catch(data => {
          this.showDelete = false
          this.onRemind(data.response.data)
        })
      },
      // 申请绑定搜索
      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 {
    .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;
        }
        .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;
        }
      }
    }
  }
  /*删除弹框*/
  .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>