From ab8019b40a841eb5efff799ad292492c38ef603c Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Mon, 15 Mar 2021 16:47:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=AE=A1=E7=90=86=E5=91=98?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lang/zh.ts             |   4 +
 src/views/system/admin.vue | 265 ++++++++++++++++++++++++++++++-------
 2 files changed, 219 insertions(+), 50 deletions(-)

diff --git a/src/lang/zh.ts b/src/lang/zh.ts
index e3971a6..fb852d2 100644
--- a/src/lang/zh.ts
+++ b/src/lang/zh.ts
@@ -174,5 +174,9 @@ export default {
     showSidebarLogo: '显示侧边栏 Logo',
     fixedHeader: '固定 Header',
     sidebarTextTheme: '侧边栏文字主题色'
+  },
+  admin: {
+    addAdmin: '新增',
+    editAdmin: '编辑'
   }
 }
diff --git a/src/views/system/admin.vue b/src/views/system/admin.vue
index ad114b1..ba035da 100644
--- a/src/views/system/admin.vue
+++ b/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}">
-          {{ row.roles.join(',') }}
+        <template slot-scope="scope">
+          <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,22 +156,23 @@
         </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 label="0">未指定</el-radio>
+            <el-radio label="1">男</el-radio>
+            <el-radio label="2">女</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="角色">
           <el-checkbox-group v-model="record.roles">
             <el-checkbox v-for="role in roleList"
                          :key="role.key"
-                :label="role.key"
-                name="type"
-            >{{role.name}}</el-checkbox>
+                         :label="role.key"
+                         name="type"
+            >{{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)
 
@@ -230,49 +382,62 @@ export default class extends Vue {
   private 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!'
+          confirmButtonText: 'Confirm',
+          cancelButtonText: 'Cancel',
+          type: 'warning'
         })
-      })
-      .catch(err => {
-        console.log(err)
-      })
+        .then(async () => {
+          await deleteAdmin(row.id)
+          this.adminList.splice($index, 1)
+          this.$message({
+            type: 'success',
+            message: 'Deleted!'
+          })
+        })
+        .catch(err => {
+          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 { data } = await saveAdmin(this.record)
-    console.log(data)
-    if (isEdit) {
-      for (let index = 0; index < this.adminList.length; index++) {
-        if (this.adminList[index].id === this.record.id) {
-          this.adminList.splice(index, 1, Object.assign({}, this.record))
-          break
-        }
+    const modalForm: any = this.$refs['modalForm']
+    modalForm.validate(async (valid: boolean) => {
+      if (!valid) {
+        this.$message.error('请按要求填写表单')
+        return false
       }
-    } else {
-      this.adminList.push(data)
-    }
-
-    const { username, showname } = this.record
-    this.dialogVisible = false
-    this.$notify({
-      title: 'Success',
-      dangerouslyUseHTMLString: true,
-      message: `
-          <div>Admin Username: ${username}</div>
-          <div>Admin Showname: ${showname}</div>
+      const { data } = await saveAdmin(this.record)
+      console.log(data)
+      if (isEdit) {
+        for (let index = 0; index < this.adminList.length; index++) {
+          if (this.adminList[index].id === this.record.id) {
+            this.adminList.splice(index, 1, Object.assign({}, this.record))
+            break
+          }
+        }
+      } 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 Showname: ${ showname }</div>
         `,
-      type: 'success'
+        type: 'success'
+      })
     })
+
   }
 }
 </script>