编辑用户以及删除员工信息

components/mobile/staffManagement/StaffEdit.vue

@@ -5,51 +5,22 @@
       <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-role">
-        <div class="staff-header"><span class="active_01"><b></b>管理员</span></div>
-        <div class="staff-content">
-          <label for="1" class="radio-label active">
-            <input type="radio" v-model="selectFlag" name="role" value="" id="1"/>
-          </label>
-          <p class="staff-des">拥有管理员角色的用户不受权限控制，可以执行任何操作</p>
+    <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-role">
-        <div class="staff-header"><span class="active_02"><b></b>店长</span></div>
-        <div class="staff-content">
-          <label for="2" class="radio-label">
-            <input type="radio" v-model="selectFlag" name="role" value="" id="2"/>
-          </label>
-          <p class="staff-des">店长可以对买/卖家中心的全部模块进行查看和编辑</p>
-        </div>
-      </div>
-      <div class="staff-role">
-        <div class="staff-header"><span class="active_03"><b></b>普通用户</span></div>
-        <div class="staff-content">
-          <label for="3" class="radio-label">
-            <input type="radio" v-model="selectFlag" name="role" value="" id="3"/>
-          </label>
-          <p class="staff-des">可以进行交易相关的一般操作，不能进行“员工管理”和“角色权限”的编辑操作</p>
-        </div>
-      </div>
-      <div class="staff-role">
-        <div class="staff-header"><span class="active_04"><b></b>采购员</span></div>
-        <div class="staff-content">
-          <label for="4" class="radio-label">
-            <input type="radio" v-model="selectFlag" name="role" value="" id="4"/>
-          </label>
-          <p class="staff-des" style="margin-top: .12rem;">可以查看并操作处理买家中心所有模块</p>
-        </div>
-      </div>
-      <div class="staff-role">
-        <div class="staff-header"><span class="active_05"><b></b>销售员</span></div>
-        <div class="staff-content">
-          <label for="5" class="radio-label">
-            <input type="radio" v-model="selectFlag" name="role" value="" id="5"/>
-          </label>
-          <p class="staff-des">可以查看并操作处理卖家中心的基本模块，不能进行 "员工管理" 和 "角色权限" 的编辑操作</p>
-        </div>
+      <div class="staff-footer">
+        <div class="cancel handle" @click="cancelBind">取消</div>
+        <div class="agree handle" @click="sureEdit">确定</div>
       </div>
     </div>
   </div>
@@ -58,9 +29,56 @@
   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>
@@ -105,23 +123,35 @@
         }
       }
       .staff-content {
-        overflow: hidden;
         padding-top: .25rem;
         .radio-label {
-          float: left;
-          margin: .18rem .1rem 0 0;
-          min-width: .36rem;
-          height: .36rem;
-          background: url(/images/mobile/center/user/car-noChecked.png) no-repeat;
           background-size: contain;
           vertical-align: middle;
           input{
+            float: left;
             display: none;
+            margin: .18rem .1rem 0 0;
             width: .36rem;
             height: .36rem;
             border: solid 2px #999999;
           }
-          &.active {
+          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);
           }
         }
@@ -129,10 +159,32 @@
           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

@@ -41,8 +41,8 @@
               <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">
-              <nuxt-link tag="div" :to="'/mobile/user/staff/edit'" class="edit handle" v-bind:class="{'no-allow': (item.userUU === userInfo.userUU)}"><i class="iconfont icon-edit"></i><span>编辑</span></nuxt-link>
-              <div class="delete handle" v-bind:class="{'no-allow': (item.userUU === userInfo.userUU)}"><i class="iconfont icon-lajitong"></i><span>删除</span></div>
+              <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>
@@ -73,6 +73,18 @@
       </div>
       <!--<seek-list :keyword="remindKeyword" :isSearch="isSearch" :userType="userType" :seekType="seekType" :purchaseManList="purchaseManListData"></seek-list>-->
       <!--<pull-up :fixId="'mobileFixContent'" :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>
@@ -84,11 +96,13 @@
     data () {
       return {
         remindText: '',
-        timeoutCount: '',
+        timeoutCount: 0,
         page: 1,
         count: 10,
         auditSearch: '',
-        switchType: 'info'
+        switchType: 'info',
+        showDelete: false,
+        currentObject: ''
       }
     },
     components: {
@@ -117,12 +131,11 @@
         return this.$store.state.option.user.data
       }
     },
-    // fetch ({ store }) {
-    //   return Promise.all([
-    //     store.dispatch('staff/bindAudit', {size: this.count, page: this.page, speaceUU: this.user.userUU, status: 311, keyword: this.auditSearch})
-    //   ])
-    // },
     methods: {
+      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({
@@ -140,6 +153,27 @@
           }, 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 ++
       }
     }
   }
@@ -323,4 +357,69 @@
       }
     }
   }
+  /*删除弹框*/
+  .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>

pages/mobile/user/staff/edit.vue

@@ -10,17 +10,6 @@
     layout: 'mobile',
     components: {
       StaffEdit
-    },
-    data () {
-      return {
-      }
-    },
-    fetch ({ store }) {
-      return Promise.all([
-        store.dispatch('staff/loadStaffList', { count: 10, page: 1, enuu: store.state.option.user.data.enterprise.uu})
-      ])
-    },
-    methods: {
     }
   }
 </script>

store/staff/infoList.js

@@ -2,10 +2,17 @@ export const state = () => ({
   info: {
     fetching: false,
     data: []
+  },
+  edit: {
+    fetching: false,
+    data: []
   }
 })
 
 export const mutations = {
+  EDIT_DATA_SUCCESS (state, result) {
+    state.edit.data = result || []
+  },
   REQUEST_INFO_LIST (state) {
     state.info.fetching = true
   },