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="卖家名称/订单号" v-model="filterParams.keyword" @keyup.13="filterRecord">-->
            <input type="text" placeholder="人员姓名、电话号码、邮箱或UU" class="staff-search">
            <!--<span @click="filterRecord"><i class="iconfont icon-sousuo"></i></span>-->
            <span><i class="iconfont icon-sousuo"></i></span>
          </div>
          <div class="search-filter">
            <div class="select-wrap">全部角色<i class="iconfont icon-arrow-down"></i></div>
            <ul class="select-list" v-if="false">
              <li>全部角色</li>
              <li>管理员</li>
              <li>店长</li>
              <li>普通用户</li>
              <li>销售员</li>
              <li>任意测试</li>
            </ul>
          </div>
        </div>
        <div class="list-content">
          <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>
        <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="卖家名称/订单号" v-model="filterParams.keyword" @keyup.13="filterRecord">-->
          <input type="text" placeholder="人员姓名、电话号码、邮箱或UU" v-model="auditSearch">
          <!--<span @click="filterRecord"><i class="iconfont icon-sousuo"></i></span>-->
          <span><i class="iconfont icon-sousuo"></i></span>
        </div>
        <div class="list-content">
          <div class="bg">
            <div class="staff-list">
              <div class="list-item"><span>用户名：</span><span>{item}</span></div>
              <div class="list-item"><span>UU账号：</span><span>100000721</span></div>
              <div class="list-item"><span>手机号：</span><span>12345678901</span></div>
              <div class="list-item"><span>邮箱：</span><span>12345678901</span></div>
            </div>
            <div class="list-footer">
              <div class="edit handle"><i class="iconfont icon-check-circle"></i><span>同意</span></div>
              <div class="handle delete"><i class="iconfont icon-close-circle"></i><span>拒绝</span></div>
            </div>
          </div>
        </div>
        <empty-status :type="'collect'" :showLink="true" :text="'抱歉，没有相关信息'"></empty-status>
      </div>
      <pull-up :fixId="'mobile-staff-center'" :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>
  </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,
        staffDataList: [],
        auditSearch: '',
        switchType: 'info',
        showDelete: false,
        currentObject: ''
      }
    },
    components: {
      RemindBox,
      PullUp,
      EmptyStatus,
      BaseFilter
    },
    watch: {
      'staffData': {
        handler: function (val) {
          if (this.isChange) {
            this.staffDataList = val.content
            this.isChange = false
          } else {
            this.staffDataList = [...this.staffDataList, ...val.content]
          }
          console.log(this.staffDataList, '1213')
        },
        immediate: true
      }
    },
    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)
      },
      userInfo () {
        return this.$store.state.option.user.data
      }
    },
    methods: {
      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')
      },
      setSwitchType (type) {
        this.switchType = type
        this.$http({
          method: 'get',
          baseURL: process.env.ssoUrl,
          url: `/api/userspace/apply/info/mall`,
          data: {
            count: 10,
            page: 1,
            speaceUU: 10049698,
            status: 311
          }
        }).then(res => {
            console.log('1', res.data)
          }, err => {
            console.log('12', err)
          })
      },
      // 删除员工
      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.staffData()
          }).catch(data => {
            this.showDelete = false
            this.onRemind(data.response.data)
          })
      },
      onRemind: function (str) {
        this.remindText = str
        this.timeoutCount ++
      }
    }
  }
</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;
            i{
              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;
        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;
        }
      }
    }
  }
  /*删除弹框*/
  .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>