增加管理员的锁定和解锁功能

src/api/admins.ts

@@ -10,6 +10,7 @@ export interface IAdmin {
   avatar: string
   password: string
   department: string
+  level: number
 }
 
 export const defaultAdmin: IAdmin = {
@@ -19,6 +20,7 @@ export const defaultAdmin: IAdmin = {
   comment: '',
   locked: false,
   roles: [],
+  level: 1,
   sex: '0',
   password: '',
   avatar: '',
@@ -58,6 +60,14 @@ export const deleteAdmin = (uid: string) => {
   })
 }
 
+export const changeLocker = (uid: string, status: boolean) => {
+  return request({
+    url: `/admin/${uid}/locker`,
+    method: 'post',
+    data: { lock: status }
+  })
+}
+
 export const getUsers = (params: any) =>
   request({
     url: '/admins',

src/views/system/admin.vue

@@ -27,6 +27,7 @@
             class="w100"
         >
           <el-option value="">所有</el-option>
+          <el-option value="系统帐号">系统帐号</el-option>
           <el-option value="未指定">未指定</el-option>
           <el-option
               v-for="item in allDepts"
@@ -53,21 +54,35 @@
         :data="tableData"
         style="width: 100%;margin-top:30px;"
         border
+        :row-class-name="tableRowClassName"
     >
       <el-table-column
           align="center"
           label="帐号名"
       >
         <template slot-scope="{row}">
-          {{row.username}}
+          {{row.showname}}({{row.username}})
         </template>
       </el-table-column>
       <el-table-column
+          prop="department"
           align="center"
-          label="显示名"
+          label="店铺"
       >
         <template slot-scope="{row}">
-          {{row.showname}}
+          {{formatDept(row)}}
+        </template>
+      </el-table-column>
+      <el-table-column
+          prop="locked"
+          align="center"
+          label="状态"
+      >
+        <template slot-scope="{row}">
+          <el-tag
+              size="small"
+              :type="row.locked ? 'danger': 'info'"
+          >{{ formStatus(row.locked) }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column
@@ -81,22 +96,14 @@
           align="center"
           label="角色"
       >
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
           <el-tag
-              v-for="(item, index) in scope.row.roles"
+              v-for="(item, index) in row.roles"
               :key="index"
               size="small"
               style="margin-right: 10px;"
           >{{ formatRole(item) }}</el-tag>
         </template>
-      </el-table-column>
-      <el-table-column
-          prop="department"
-          align="center"
-          label="店铺"
-          :formatter = "formatDept"
-      >
-
       </el-table-column>
       <el-table-column
           align="header-center"
@@ -110,6 +117,7 @@
           align="center"
           label="操作"
           fixed="right"
+          width="220"
       >
         <template slot-scope="scope">
           <el-button
@@ -126,6 +134,14 @@
           >
             {{$t('permission.delete')}}
           </el-button>
+
+          <el-button
+              type="warning"
+              size="small"
+              @click="handleLock(scope)"
+          >
+            {{scope.row.locked? '解锁' : '锁定'}}
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -180,15 +196,15 @@
           />
         </el-form-item>
         <el-form-item label="性别">
-          <el-radio-group v-model="record.sex">
+          <el-radio-group size='small' v-model="record.sex">
-            <el-radio label="0">未指定</el-radio>
+            <el-radio-button label="0">未指定</el-radio-button>
-            <el-radio label="1">男</el-radio>
+            <el-radio-button label="1">男</el-radio-button>
-            <el-radio label="2">女</el-radio>
+            <el-radio-button label="2">女</el-radio-button>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="角色">
-          <el-checkbox-group v-model="record.roles">
+          <el-checkbox-group size="small" v-model="record.roles">
-            <el-checkbox v-for="role in roleList"
+            <el-checkbox border v-for="role in roleList"
                          :key="role.key"
                          :label="role.key"
                          name="type"
@@ -196,9 +212,16 @@
             </el-checkbox>
           </el-checkbox-group>
         </el-form-item>
+        <el-form-item label="帐号类型">
+          <el-radio-group v-model="record.level" size="small">
+            <el-radio-button :label="1">系统帐号</el-radio-button>
+            <el-radio-button :label="9">店铺</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item
             label="店铺"
-            class="postInfo-container-item"
+            prop="department"
+            v-if="record.level === 9"
         >
           <el-select
               v-model="record.department"
@@ -251,6 +274,7 @@ import { cloneDeep } from 'lodash'
 import { Component, Vue } from 'vue-property-decorator'
 import { getRoles } from '@/api/roles'
 import {
+  changeLocker,
   defaultAdmin,
   deleteAdmin,
   getUsers,
@@ -337,7 +361,11 @@ export default class extends Vue {
       })
     }
     if (this.filterForm.department) {
-      if (this.filterForm.department === '未指定') {
+      if (this.filterForm.department === '系统帐号') {
+        result = result.filter(user => {
+          return user.level === 1
+        })
+      } else if (this.filterForm.department === '未指定') {
         result = result.filter(user => {
           return !user.department
         })
@@ -373,6 +401,10 @@ export default class extends Vue {
       (this.currentPage - 1) * this.pageSize,
       this.currentPage * this.pageSize
     )
+    if (this.tableData.length === 0 && this.currentPage > 1) {
+      this.currentPage -= 1
+      this.sliceData()
+    }
   }
 
   private async getRecords() {
@@ -402,6 +434,10 @@ export default class extends Vue {
     }
   }
 
+  private formStatus(cellValue: boolean) {
+    return cellValue ? '已锁定' : '正常'
+  }
+
   private formatRole(val: string) {
     const data = this.roleList.find(o => {
       return o.key === val
@@ -423,24 +459,50 @@ export default class extends Vue {
     this.record = cloneDeep(scope.row)
   }
 
-  private handleDelete(scope: any) {
+  private async handleDelete(scope: any) {
     const { $index, row } = scope
-    this.$confirm('Confirm to remove the record?', 'Warning', {
+    console.log($index, row)
-      confirmButtonText: 'Confirm',
+    try {
-      cancelButtonText: 'Cancel',
+      await this.$confirm('确定删除当前帐号?', 'Warning', {
-      type: 'warning'
+        confirmButtonText: '确定',
-    })
+        cancelButtonText: '取消',
-      .then(async() => {
+        type: 'warning'
-        await deleteAdmin(row.id)
-        this.adminList.splice($index, 1)
-        this.$message({
-          type: 'success',
-          message: 'Deleted!'
-        })
       })
-      .catch(err => {
+      await deleteAdmin(row.id)
-        console.log(err)
+      const index = this.adminList.indexOf(row)
+      this.adminList.splice(index, 1)
+      this.sliceData()
+      this.$message({
+        type: 'success',
+        message: 'Deleted!'
       })
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  private async handleLock(scope: any) {
+    const { row } = scope
+    try {
+      let txt = '确定锁定当前帐号?'
+      if (row.locked) {
+        txt = '确定解锁当前帐号?'
+      }
+      await this.$confirm(txt, 'Warning', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+      await changeLocker(row.id, !row.locked)
+      row.locked = !row.locked
+      this.sliceData()
+      this.$message({
+        type: 'success',
+        message: 'Deleted!'
+      })
+    } catch (err) {
+      console.log(err)
+    }
   }
 
   private closeModal() {
@@ -489,15 +551,31 @@ export default class extends Vue {
     return data.records
   }
 
-  private formatDept(row: number, column: number, cellValue: string) {
+  private formatDept(row: any) {
+    if (row.level === 1) {
+      return '系统帐号'
+    }
     let result = '未指定'
     for (const dep of this.allDepts) {
-      if (dep._id === cellValue) {
+      if (dep._id === row.department) {
         result = dep.name
         break
       }
     }
     return result
   }
+
+  private tableRowClassName({ row, rowIndex }: {row: any, rowIndex: number}) {
+    if (row.level === 1) {
+      return 'shop-row'
+    }
+    return ''
+  }
 }
 </script>
+
+<style lang="scss" >
+  .el-table .shop-row {
+    background: oldlace!important;
+  }
+</style>