修改店铺管理员编辑页面

src/views/shop/shop_admin.vue

@@ -20,31 +20,15 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="店铺">
-        <el-select
-            v-model="filterForm.department"
-            placeholder="所有"
-            class="w100"
-        >
-          <el-option value="">所有</el-option>
-          <el-option value="未指定">未指定</el-option>
-          <el-option
-              v-for="item in allDepts"
-              :key="item._id"
-              :label="item.name"
-              :value="item._id"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="search">查询</el-button>
         <el-button @click="resetFilterForm">重置</el-button>
       </el-form-item>
     </el-form>
     <el-button
+        v-permission="['shopadmin:edit']"
         type="primary"
         @click="handleCreateAdmin"
-        v-permission="['shopadmin:edit']"
     >
       {{$t('admin.addAdmin')}}
     </el-button>
@@ -54,21 +38,26 @@
         :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="locked"
           align="center"
-          label="显示名"
+          label="状态"
       >
         <template slot-scope="{row}">
-          {{row.showname}}
+          <el-tag
+              size="small"
+              :type="row.locked ? 'danger': 'info'"
+          >{{ formStatus(row.locked) }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column
@@ -82,22 +71,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"
@@ -111,6 +92,7 @@
           align="center"
           label="操作"
           fixed="right"
+          width="220"
       >
         <template slot-scope="scope">
           <el-button
@@ -129,6 +111,15 @@
           >
             {{$t('permission.delete')}}
           </el-button>
+
+          <el-button
+              type="warning"
+              size="small"
+              v-permission="['shopadmin:lock']"
+              @click="handleLock(scope)"
+          >
+            {{scope.row.locked? '解锁' : '锁定'}}
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -183,15 +174,15 @@
           />
         </el-form-item>
         <el-form-item label="性别">
-          <el-radio-group v-model="record.sex">
-            <el-radio label="0">未指定</el-radio>
-            <el-radio label="1">男</el-radio>
-            <el-radio label="2">女</el-radio>
+          <el-radio-group size='small' v-model="record.sex">
+            <el-radio-button label="0">未指定</el-radio-button>
+            <el-radio-button label="1">男</el-radio-button>
+            <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 v-for="role in roleList"
+          <el-checkbox-group size="small" v-model="record.roles">
+            <el-checkbox border v-for="role in roleList"
                          :key="role.key"
                          :label="role.key"
                          name="type"
@@ -199,29 +190,20 @@
             </el-checkbox>
           </el-checkbox-group>
         </el-form-item>
-        <el-form-item
-            label="店铺"
-            class="postInfo-container-item"
-        >
-          <el-select
-              v-model="record.department"
-              :remote-method="getRemoteDeptList"
-              filterable
-              default-first-option
-              remote
-              placeholder=""
-          >
-            <el-option
-                v-for="(item) in deptListOptions"
-                :key="item._id"
-                :label="item.name"
-                :value="item._id"
-            />
-          </el-select>
+        <el-form-item label="帐号类型">
+          <el-radio-group v-model="record.level" size="small">
+            <el-radio-button :label="9">店铺</el-radio-button>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="锁定">
+        <el-form-item label="锁定" v-permission="['admin:lock']">
           <el-switch v-model="record.locked"/>
         </el-form-item>
+        <el-form-item
+            prop="avatar"
+            label="头像"
+        >
+          <upload-image v-model="record.avatar" />
+        </el-form-item>
         <el-form-item label="备注">
           <el-input
               v-model="record.comment"
@@ -252,8 +234,10 @@
 <script lang="ts">
 import { cloneDeep } from 'lodash'
 import { Component, Vue } from 'vue-property-decorator'
+import UploadImage from '@/components/UploadImage/index.vue'
 import { getRoles } from '@/api/roles'
 import {
+  changeLocker,
   defaultAdmin,
   deleteAdmin,
   getUsers,
@@ -261,12 +245,13 @@ import {
   saveAdmin
 } from '@/api/admins'
 import { IRole } from '@/views/system/role.vue'
-import { getShops } from '@/api/shop'
 import { IShopData } from '@/api/types'
+import { UserModule } from '@/store/modules/user'
 
 @Component({
   name: 'ShopAdmin',
   components: {
+    UploadImage
   }
 })
 export default class extends Vue {
@@ -316,7 +301,6 @@ export default class extends Vue {
   }
 
   async created() {
-    this.allDepts = await this.getRemoteDeptList('')
     await this.getRecords()
     await this.getAllRole()
   }
@@ -340,7 +324,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
         })
@@ -376,11 +364,15 @@ 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() {
     this.isLoad = true
-    const { data } = await getUsers({ /* Your params here */ })
+    const { data } = await getUsers({ dept: UserModule.department })
     this.adminList = data
     this.dataCount = data.length
     this.sliceData()
@@ -388,7 +380,7 @@ export default class extends Vue {
   }
 
   private async getAllRole() {
-    const { data } = await getRoles({ /* Your params here */ })
+    const { data } = await getRoles({ level: UserModule.level })
     this.roleList = data
   }
 
@@ -405,6 +397,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
@@ -426,24 +422,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', {
-      confirmButtonText: 'Confirm',
-      cancelButtonText: 'Cancel',
-      type: 'warning'
-    })
-      .then(async() => {
-        await deleteAdmin(row.id)
-        this.adminList.splice($index, 1)
-        this.$message({
-          type: 'success',
-          message: 'Deleted!'
-        })
+    console.log($index, row)
+    try {
+      await this.$confirm('确定删除当前帐号?', 'Warning', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       })
-      .catch(err => {
-        console.log(err)
+      await deleteAdmin(row.id)
+      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() {
@@ -485,22 +507,31 @@ export default class extends Vue {
     })
   }
 
-  private async getRemoteDeptList(name: string) {
-    const { data } = await getShops({ key: name })
-    if (!data.records) return
-    this.deptListOptions = data.records
-    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 }: {row: any}) {
+    if (row.level === 1) {
+      return 'shop-row'
+    }
+    return ''
+  }
 }
 </script>
+
+<style lang="scss" >
+.el-table .shop-row {
+  background: oldlace!important;
+}
+</style>