remove warning of admin editor

src/views/system/admin.vue

@@ -22,7 +22,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="search">查询</el-button>
-        <el-button @click="resetForm('filterForm')">重置</el-button>
+        <el-button @click="resetFilterForm">重置</el-button>
       </el-form-item>
     </el-form>
     <el-button
@@ -256,10 +256,17 @@ export default class extends Vue {
     children: 'children',
     label: 'title'
   }
+
   private filterForm = {
     key: '',
     role: ''
   }
+
+  $refs!: {
+    modalForm: HTMLFormElement
+    filterForm: HTMLFormElement
+  }
+
   private modalRules = {
     username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
       { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
@@ -293,7 +300,7 @@ export default class extends Vue {
     let result = [...this.adminList]
     if (this.filterForm.key) {
       result = result.filter(user => {
-        let reg = new RegExp(this.filterForm.key)
+        const reg = new RegExp(this.filterForm.key)
         return (reg.test(user.showname)) || (reg.test(user.username))
       })
     }
@@ -306,9 +313,8 @@ export default class extends Vue {
     return result
   }
 
-  private resetForm(formName: string) {
+  private resetFilterForm() {
-    const ref: any = this.$refs[formName]
+    this.$refs.filterForm.resetFields()
-    ref.resetFields()
   }
 
   // pagination
@@ -326,8 +332,8 @@ export default class extends Vue {
     // 满足过滤条件 -> 分页
     const data = this.filterData()
     this.tableData = data.slice(
-        (this.currentPage - 1) * this.pageSize,
+      (this.currentPage - 1) * this.pageSize,
-        this.currentPage * this.pageSize
+      this.currentPage * this.pageSize
     )
   }
 
@@ -345,7 +351,7 @@ export default class extends Vue {
     this.roleList = data
   }
 
-  private formSex(row: number, column: number, cellValue: string, index: number) {
+  private formSex(row: number, column: number, cellValue: string) {
     switch (cellValue) {
       case '0':
         return '未指定'
@@ -355,12 +361,12 @@ export default class extends Vue {
         return '女'
       default:
         return '未指定'
-
     }
   }
-  formatRole(val: string) {
+
-    let data = this.roleList.find(o => {
+  private formatRole(val: string) {
-       return o.key === val
+    const data = this.roleList.find(o => {
+      return o.key === val
     })
     return data?.name || ''
   }
@@ -382,32 +388,31 @@ export default class extends Vue {
   private handleDelete(scope: any) {
     const { $index, row } = scope
     this.$confirm('Confirm to remove the record?', 'Warning', {
-          confirmButtonText: 'Confirm',
+      confirmButtonText: 'Confirm',
-          cancelButtonText: 'Cancel',
+      cancelButtonText: 'Cancel',
-          type: 'warning'
+      type: 'warning'
-        })
+    })
-        .then(async () => {
+      .then(async() => {
-          await deleteAdmin(row.id)
+        await deleteAdmin(row.id)
-          this.adminList.splice($index, 1)
+        this.adminList.splice($index, 1)
-          this.$message({
+        this.$message({
-            type: 'success',
+          type: 'success',
-            message: 'Deleted!'
+          message: 'Deleted!'
-          })
-        })
-        .catch(err => {
-          console.log(err)
         })
+      })
+      .catch(err => {
+        console.log(err)
+      })
   }
+
   private closeModal() {
     this.dialogVisible = false
-    let modalForm: any = this.$refs['modalForm']
+    this.$refs.modalForm.clearValidate()
-    modalForm.clearValidate()
   }
-  // TODO: 验证数据完整性
+
   private async confirmRole() {
     const isEdit = this.dialogType === 'edit'
-    const modalForm: any = this.$refs['modalForm']
+    this.$refs.modalForm.validate(async(valid: boolean) => {
-    modalForm.validate(async (valid: boolean) => {
       if (!valid) {
         this.$message.error('请按要求填写表单')
         return false
@@ -431,13 +436,12 @@ export default class extends Vue {
         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>