完善管理员编辑功能

src/lang/zh.ts

@@ -174,5 +174,9 @@ export default {
     showSidebarLogo: '显示侧边栏 Logo',
     fixedHeader: '固定 Header',
     sidebarTextTheme: '侧边栏文字主题色'
+  },
+  admin: {
+    addAdmin: '新增',
+    editAdmin: '编辑'
   }
 }

src/views/system/admin.vue

@@ -1,5 +1,30 @@
 <template>
   <div class="app-container">
+    <!-- filter -->
+    <el-form ref="filterForm" :inline="true" :model="filterForm" class="filter">
+      <el-form-item label="关键字" prop="key">
+        <el-input v-model="filterForm.key" placeholder="关键字"/>
+      </el-form-item>
+      <el-form-item label="角色">
+        <el-select
+            v-model="filterForm.role"
+            placeholder="请选择角色"
+            class="w100"
+        >
+          <el-option value="">所有</el-option>
+          <el-option
+              v-for="item in roleList"
+              :key="item.key"
+              :label="item.name"
+              :value="item.key"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="search">查询</el-button>
+        <el-button @click="resetForm('filterForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
     <el-button
         type="primary"
         @click="handleCreateAdmin"
@@ -8,7 +33,8 @@
     </el-button>
 
     <el-table
-        :data="adminList"
+        v-loading="isLoad"
+        :data="tableData"
         style="width: 100%;margin-top:30px;"
         border
     >
@@ -28,12 +54,24 @@
           {{row.showname}}
         </template>
       </el-table-column>
+      <el-table-column
+          prop="sex"
+          align="center"
+          label="性别"
+          :formatter="formSex"
+      >
+      </el-table-column>
       <el-table-column
           align="center"
           label="角色"
       >
-        <template slot-scope="{row}">
+        <template slot-scope="scope">
-          {{ row.roles.join(',') }}
+          <el-tag
+              v-for="(item, index) in scope.row.roles"
+              :key="index"
+              size="small"
+              style="margin-right: 10px;"
+          >{{ formatRole(item) }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column
@@ -66,20 +104,34 @@
         </template>
       </el-table-column>
     </el-table>
-
+    <!-- pagination -->
+    <el-pagination
+        :hide-on-single-page="false"
+        :current-page="currentPage"
+        :page-sizes="[5, 10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="dataCount"
+        class="al-r"
+        @size-change="sizeChange"
+        @current-change="pageChange"
+    />
     <el-dialog
         :visible.sync="dialogVisible"
         :title="dialogType==='edit'?'Edit Admin':'New Admin'"
     >
       <el-form
           :model="record"
+          ref="modalForm"
+          :rules="modalRules"
           label-width="80px"
           label-position="left"
       >
-        <el-form-item label="用户名">
+        <el-form-item label="用户名" prop="username">
           <el-input
               v-model="record.username"
               placeholder="用户名"
+              clearable
           />
         </el-form-item>
         <el-form-item label="密码" v-if="dialogType==='edit'">
@@ -96,7 +148,7 @@
               placeholder="密码"
           />
         </el-form-item>
-        <el-form-item label="显示名">
+        <el-form-item label="显示名" prop="showname">
           <el-input
               v-model="record.showname"
               placeholder="显示名"
@@ -104,9 +156,9 @@
         </el-form-item>
         <el-form-item label="性别">
           <el-radio-group v-model="record.sex">
-            <el-radio label="0" >未指定</el-radio>
+            <el-radio label="0">未指定</el-radio>
-            <el-radio label="1" >男</el-radio>
+            <el-radio label="1">男</el-radio>
-            <el-radio label="2" >女</el-radio>
+            <el-radio label="2">女</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="角色">
@@ -115,11 +167,12 @@
                          :key="role.key"
                          :label="role.key"
                          name="type"
-            >{{role.name}}</el-checkbox>
+            >{{role.name}}
+            </el-checkbox>
           </el-checkbox-group>
         </el-form-item>
         <el-form-item label="锁定">
-          <el-switch v-model="record.locked" />
+          <el-switch v-model="record.locked"/>
         </el-form-item>
         <el-form-item label="备注">
           <el-input
@@ -133,7 +186,7 @@
       <div style="text-align:right;">
         <el-button
             type="danger"
-            @click="dialogVisible=false"
+            @click="closeModal"
         >
           {{$t('permission.cancel')}}
         </el-button>
@@ -153,7 +206,7 @@ import { cloneDeep } from 'lodash'
 import { Component, Vue } from 'vue-property-decorator'
 import { getRoles } from '@/api/roles'
 import TagInput from '@/components/TagInput/index.vue'
-import { getUsers, deleteAdmin, saveAdmin } from '@/api/admins'
+import { deleteAdmin, getUsers, saveAdmin } from '@/api/admins'
 import { IRole } from '@/views/system/role.vue'
 
 interface IAdmin {
@@ -189,23 +242,102 @@ const defaultAdmin: IAdmin = {
 export default class extends Vue {
   private record = Object.assign({}, defaultAdmin)
   private adminList: IAdmin[] = []
+  private tableData: IAdmin[] = []
   private roleList: IRole[] = []
   private dialogVisible = false
   private dialogType = 'new'
   private checkStrictly = false
+  private isLoad = false
+  // pagination
+  private currentPage = 1
+  private pageSize = 5
+  private dataCount = 0
   private defaultProps = {
     children: 'children',
     label: 'title'
   }
+  private filterForm = {
+    key: '',
+    role: ''
+  }
+  private modalRules = {
+    username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
+      { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
+      {
+        required: true,
+        pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
+        message: '用户名不支持特殊字符',
+        trigger: 'blur'
+      }],
+    showname: [{ required: true, message: '请输入用户名', trigger: 'blur' },
+      { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
+      {
+        required: true,
+        pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
+        message: '显示名不支持特殊字符',
+        trigger: 'blur'
+      }]
+  }
 
   created() {
     this.getRecords()
     this.getAllRole()
   }
 
+  private search() {
+    this.tableData = this.filterData()
+    this.currentPage = 1
+  }
+
+  private filterData() {
+    let result = [...this.adminList]
+    if (this.filterForm.key) {
+      result = result.filter(user => {
+        let reg = new RegExp(this.filterForm.key)
+        return (reg.test(user.showname)) || (reg.test(user.username))
+      })
+    }
+    if (this.filterForm.role) {
+      result = result.filter(user => {
+        return user.roles.indexOf(this.filterForm.role) >= 0
+      })
+    }
+    this.dataCount = result.length
+    return result
+  }
+
+  private resetForm(formName: string) {
+    const ref: any = this.$refs[formName]
+    ref.resetFields()
+  }
+
+  // pagination
+  private sizeChange(val: number) {
+    this.pageSize = val
+    this.sliceData()
+  }
+
+  private pageChange(val: number) {
+    this.currentPage = val
+    this.sliceData()
+  }
+
+  private sliceData() {
+    // 满足过滤条件 -> 分页
+    const data = this.filterData()
+    this.tableData = data.slice(
+        (this.currentPage - 1) * this.pageSize,
+        this.currentPage * this.pageSize
+    )
+  }
+
   private async getRecords() {
+    this.isLoad = true
     const { data } = await getUsers({ /* Your params here */ })
     this.adminList = data
+    this.dataCount = data.length
+    this.sliceData()
+    this.isLoad = false
   }
 
   private async getAllRole() {
@@ -213,6 +345,26 @@ export default class extends Vue {
     this.roleList = data
   }
 
+  private formSex(row: number, column: number, cellValue: string, index: number) {
+    switch (cellValue) {
+      case '0':
+        return '未指定'
+      case '1':
+        return '男'
+      case '2':
+        return '女'
+      default:
+        return '未指定'
+
+    }
+  }
+  formatRole(val: string) {
+    let data = this.roleList.find(o => {
+       return o.key === val
+    })
+    return data?.name || ''
+  }
+
   private handleCreateAdmin() {
     this.record = Object.assign({}, defaultAdmin)
 
@@ -234,7 +386,7 @@ export default class extends Vue {
           cancelButtonText: 'Cancel',
           type: 'warning'
         })
-      .then(async() => {
+        .then(async () => {
           await deleteAdmin(row.id)
           this.adminList.splice($index, 1)
           this.$message({
@@ -246,9 +398,20 @@ export default class extends Vue {
           console.log(err)
         })
   }
+  private closeModal() {
+    this.dialogVisible = false
+    let modalForm: any = this.$refs['modalForm']
+    modalForm.clearValidate()
+  }
   // TODO: 验证数据完整性
   private async confirmRole() {
     const isEdit = this.dialogType === 'edit'
+    const modalForm: any = this.$refs['modalForm']
+    modalForm.validate(async (valid: boolean) => {
+      if (!valid) {
+        this.$message.error('请按要求填写表单')
+        return false
+      }
       const { data } = await saveAdmin(this.record)
       console.log(data)
       if (isEdit) {
@@ -261,18 +424,20 @@ export default class extends Vue {
       } else {
         this.adminList.push(data)
       }
-
+      this.sliceData()
       const { username, showname } = this.record
       this.dialogVisible = false
       this.$notify({
         title: 'Success',
         dangerouslyUseHTMLString: true,
         message: `
-          <div>Admin Username: ${username}</div>
+          <div>Admin Username: ${ username }</div>
-          <div>Admin Showname: ${showname}</div>
+          <div>Admin Showname: ${ showname }</div>
         `,
         type: 'success'
       })
+    })
+
   }
 }
 </script>