员工管理

components/mobile/staffManagement/StaffEdit.vue

@@ -1,190 +1,210 @@
-<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" v-if="roles">
-      <div v-for="role in roles">
-        <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" @click="checkRole(role)">
-              <input type="checkbox" :id="role.id" v-bind:class="{'checked': role.checked}"/>
-              <label :for="role.id" v-bind:class="{'margin0': role.color === '4'}"></label>
-              <p class="staff-des">{{role.duty}}</p>
-            </label>
-          </div>
-        </div>
-      </div>
-      <div class="staff-footer">
-        <div class="cancel handle" @click="cancelBind">取消</div>
-        <div class="agree handle" @click="sureEdit">确定</div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  export default {
-    data () {
-      return {
-        checked: false,
-        roles: []
-      }
-    },
-    computed: {
-      currentData () {
-        return this.$store.state.staff.infoList.edit.data
-      }
-    },
-    mounted () {
-      // 获取角色
-      this.$nextTick(() => {
-        this.getRoles()
-      })
-    },
-    methods: {
-      // 获取角色
-      getRoles () {
-        this.$http.get('/account/role')
-          .then(response => {
-            if (response.data) {
-              this.roles = response.data
-              for (let i = 0; i < this.currentData.roles.length; i++) {
-                for (let j = 0; j < this.roles.length; j++) {
-                  //判断已绑定角色
-                  if (this.currentData.roles[i].id === this.roles[j].id) {
-                    this.roles[j].checked = true
-                    // console.log(this.roles[j].checked)
-                  }
-                }
-              }
-            }
-          })
-      },
-      // 选择角色
-      checkRole (role) {
-        console.log(role)
-        role.checked = !role.checked
-        console.log(this.currentData.roles, 'roles')
-        // this.currentData.roles.push(role)
-      },
-      // 取消编辑
-      cancelBind () {
-        this.$router.push('/mobile/user/staff')
-      },
-      // 确定编辑
-      sureEdit () {
-        this.$http.put(`/basic/user/updaterole/${this.currentData}`)
-          .then(() => {})
-      }
-    }
-  }
-</script>
-<style lang="scss">
-  $base-color: #3f84f6;
-  #mobile-staff-center {
-    margin: 0 auto;
-    .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;
-        }
-      }
-    }
-  }
-</style>
+<!--<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" v-if="roles">-->
+      <!--<div v-for="(role, index) in roles">-->
+        <!--<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" @click.stop="checkRole(role, index)">-->
+              <!--<input type="checkbox" :id="role.id" :checked="role.checked"/>-->
+              <!--<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="roles || roles.length > 0">-->
+        <!--<div class="cancel handle" @click="cancelBind">取消</div>-->
+        <!--<div class="agree handle" @click="sureEdit">确定</div>-->
+      <!--</div>-->
+    <!--</div>-->
+    <!--<remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>-->
+  <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+  <!--import { RemindBox } from '~components/mobile/common'-->
+  <!--export default {-->
+    <!--data () {-->
+      <!--return {-->
+        <!--checked: false,-->
+        <!--roles: [],-->
+        <!--remindText: '',-->
+        <!--timeoutCount: 0-->
+      <!--}-->
+    <!--},-->
+    <!--components: {-->
+      <!--RemindBox-->
+    <!--},-->
+    <!--computed: {-->
+      <!--currentData () {-->
+        <!--return this.baseUtils.deepCopy(this.$store.state.staff.infoList.edit.data) || []-->
+      <!--}-->
+    <!--},-->
+    <!--mounted () {-->
+      <!--// 获取角色-->
+      <!--this.$nextTick(() => {-->
+        <!--this.getRoles()-->
+      <!--})-->
+    <!--},-->
+    <!--methods: {-->
+      <!--// 获取角色-->
+      <!--getRoles () {-->
+        <!--this.$http.get('/account/role')-->
+          <!--.then(response => {-->
+            <!--if (response.data) {-->
+              <!--this.roles = response.data-->
+              <!--for (let i = 0; i < this.currentData.roles.length; i++) {-->
+                <!--for (let j = 0; j < this.roles.length; j++) {-->
+                  <!--//判断已绑定角色-->
+                  <!--if (this.currentData.roles[i].id === this.roles[j].id) {-->
+                    <!--this.roles[j].checked = true-->
+                  <!--}-->
+                <!--}-->
+              <!--}-->
+            <!--}-->
+          <!--})-->
+      <!--},-->
+      <!--// 选择角色-->
+      <!--checkRole (role, index) {-->
+        <!--role.checked = !role.checked-->
+        <!--for (let i = 0; i < this.currentData.roles.length; i++) {-->
+          <!--if (role.checked) {-->
+            <!--console.log('1')-->
+            <!--this.currentData.roles.push(role)-->
+          <!--} else {-->
+            <!--console.log('0')-->
+            <!--this.currentData.roles.splice(index,1)-->
+          <!--}-->
+        <!--}-->
+      <!--},-->
+      <!--// 取消编辑-->
+      <!--cancelBind () {-->
+        <!--this.$router.push('/mobile/user/staff')-->
+      <!--},-->
+      <!--// 确定编辑-->
+      <!--sureEdit () {-->
+        <!--this.$http.put(`/basic/user/updaterole`, this.currentData)-->
+          <!--.then(() => {-->
+            <!--this.onRemind('角色编辑成功')-->
+            <!--this.$router.push('/mobile/user/staff')-->
+          <!--})-->
+      <!--},-->
+      <!--onRemind: function (str) {-->
+        <!--this.remindText = str-->
+        <!--this.timeoutCount ++-->
+      <!--}-->
+    <!--}-->
+  <!--}-->
+<!--</script>-->
+<!--<style lang="scss">-->
+  <!--$base-color: #3f84f6;-->
+  <!--#mobile-staff-center {-->
+    <!--padding-bottom: .5rem;-->
+    <!--margin: 0 auto;-->
+    <!--.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;-->
+        <!--}-->
+      <!--}-->
+    <!--}-->
+  <!--}-->
+<!--</style>-->

components/mobile/staffManagement/StaffList.vue

@@ -5,67 +5,92 @@
       <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 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="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 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="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 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>
-        <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 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>
-        <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 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">
@@ -101,8 +126,12 @@
         switchType: 'info',
         showDelete: false,
         currentObject: '',
+        activeTab: 0,
+        checked: false,
+        rolesList: [],
+        currentStaff: [],
+        isValid: true,
         role: '全部角色',
-        roles: [],
         showRole: false
       }
     },
@@ -150,12 +179,18 @@
         }
       }
     },
+    mounted () {
+      // 获取角色
+      this.$nextTick(() => {
+        this.getRoles()
+      })
+    },
     computed: {
       staffData () {
         return this.$store.state.staff.infoList.info.data
       },
       fetching () {
-        return this.$store.state.staff.infoList.info.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)
@@ -187,39 +222,39 @@
           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()
+        this.isValid = true
       },
-      goEdit (item) {
-        this.$store.commit('staff/infoList/EDIT_DATA_SUCCESS', item)
-        this.$router.push('/mobile/user/staff/edit')
+      // 员工搜索
+      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
       },
-      // 员工搜索
-      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})
+      // 确认删除
+      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) {
@@ -253,17 +288,54 @@
           this.staffRecord()
         }
       },
-      sureDelete () {
-        this.$http.delete('/basic/user/' + this.currentObject.userUU)
+      // 获取角色
+      getRoles () {
+        this.isValid = false
+        this.$http.get('/account/role')
           .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)
-        })
+            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 () {
@@ -287,6 +359,8 @@
 <style lang="scss">
   $base-color: #3f84f6;
   #mobile-staff-center {
+    padding-bottom: .5rem;
+    margin: 0 auto;
     .staff-head {
       height: .82rem;
       line-height: .82rem;
@@ -472,6 +546,107 @@
         }
       }
     }
+    /*编辑角色*/
+    .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 {