增加前端form校验

QMPlusVuePage/src/main.js

@@ -3,6 +3,8 @@ import App from './App.vue'
 // 引入element
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+// 全局配置elementui的dialog不能通过点击遮罩层关闭
+ElementUI.Dialog.props.closeOnClickModal.default = false
 Vue.use(ElementUI);
 // 引入封装的router
 import router from '@/router/index'

QMPlusVuePage/src/view/superAdmin/api/api.vue

@@ -25,15 +25,14 @@
             <el-tag
               :key="scope.row.methodFiletr"
               :type="scope.row.method|tagTypeFiletr"
-               size="mini"
-              effect="dark">
-              {{scope.row.method|methodFiletr}}
-            </el-tag>
+              effect="dark"
+              size="mini"
+            >{{scope.row.method|methodFiletr}}</el-tag>
             <!-- {{scope.row.method|methodFiletr}} -->
           </div>
         </template>
       </el-table-column>
-      
+
       <el-table-column fixed="right" label="操作" width="200">
         <template slot-scope="scope">
           <el-button @click="editApi(scope.row)" size="small" type="text">编辑</el-button>
@@ -53,11 +52,11 @@
     ></el-pagination>
 
     <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="新增Api">
-      <el-form :inline="true" :model="form" label-width="80px">
-        <el-form-item label="路径">
+      <el-form :inline="true" :model="form" :rules="rules" label-width="80px" ref="apiForm">
+        <el-form-item label="路径" prop="path">
           <el-input autocomplete="off" v-model="form.path"></el-input>
         </el-form-item>
-        <el-form-item label="请求">
+        <el-form-item label="请求" prop="method">
           <el-select placeholder="请选择" v-model="form.method">
             <el-option
               :key="item.value"
@@ -67,16 +66,14 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="api分组">
+        <el-form-item label="api分组" prop="group">
           <el-input autocomplete="off" v-model="form.group"></el-input>
         </el-form-item>
-        <el-form-item label="api简介">
+        <el-form-item label="api简介" prop="description">
           <el-input autocomplete="off" v-model="form.description"></el-input>
         </el-form-item>
       </el-form>
-      <div class="warning">
-          新增Api需要在角色管理内配置权限才可使用
-      </div>
+      <div class="warning">新增Api需要在角色管理内配置权限才可使用</div>
       <div class="dialog-footer" slot="footer">
         <el-button @click="closeDialog">取 消</el-button>
         <el-button @click="enterDialog" type="primary">确 定</el-button>
@@ -99,27 +96,27 @@ import {
 import infoList from '@/components/mixins/infoList'
 
 const methodOptions = [
-        {
-          value: 'POST',
-          label: '创建',
-          type:'success'
-        },
-        {
-          value: 'GET',
-          label: '查看',
-          type:''
-        },
-        {
-          value: 'PUT',
-          label: '更新',
-          type:'warning'
-        },
-        {
-          value: 'DELETE',
-          label: '删除',
-          type:'danger'
-        }
-      ]
+  {
+    value: 'POST',
+    label: '创建',
+    type: 'success'
+  },
+  {
+    value: 'GET',
+    label: '查看',
+    type: ''
+  },
+  {
+    value: 'PUT',
+    label: '更新',
+    type: 'warning'
+  },
+  {
+    value: 'DELETE',
+    label: '删除',
+    type: 'danger'
+  }
+]
 
 export default {
   name: 'Api',
@@ -132,10 +129,21 @@ export default {
       form: {
         path: '',
         group: '',
+        method: '',
         description: ''
       },
       methodOptions: methodOptions,
-      type: ''
+      type: '',
+      rules: {
+        path: [{ required: true, message: '请输入api路径', trigger: 'blur' }],
+        group: [{ required: true, message: '请输入组名称', trigger: 'blur' }],
+        method: [
+          { required: true, message: '请选择请求方式', trigger: 'blur' }
+        ],
+        description: [
+          { required: true, message: '请输入api介绍', trigger: 'blur' }
+        ]
+      }
     }
   },
   methods: {
@@ -150,7 +158,7 @@ export default {
         path: '',
         group: '',
         description: '',
-        method:''
+        method: ''
       }
     },
     closeDialog() {
@@ -190,56 +198,60 @@ export default {
         })
     },
     async enterDialog() {
-      switch (this.type) {
-        case 'addApi':
-          {
-            const res = await createApi(this.form)
-            if (res.success) {
-              this.$message({
-                type: 'success',
-                message: '添加成功',
-                showClose: true
-              })
-            }
-            this.getTableData()
-            this.closeDialog()
-          }
+      this.$refs.apiForm.validate(async valid => {
+        if (valid) {
+          switch (this.type) {
+            case 'addApi':
+              {
+                const res = await createApi(this.form)
+                if (res.success) {
+                  this.$message({
+                    type: 'success',
+                    message: '添加成功',
+                    showClose: true
+                  })
+                }
+                this.getTableData()
+                this.closeDialog()
+              }
 
-          break
-        case 'edit':
-          {
-            const res = await updataApi(this.form)
-            if (res.success) {
-              this.$message({
-                type: 'success',
-                message: '添加成功',
-                showClose: true
-              })
-            }
-            this.getTableData()
-            this.closeDialog()
+              break
+            case 'edit':
+              {
+                const res = await updataApi(this.form)
+                if (res.success) {
+                  this.$message({
+                    type: 'success',
+                    message: '添加成功',
+                    showClose: true
+                  })
+                }
+                this.getTableData()
+                this.closeDialog()
+              }
+              break
+            default:
+              {
+                this.$message({
+                  type: 'error',
+                  message: '未知操作',
+                  showClose: true
+                })
+              }
+              break
           }
-          break
-        default:
-          {
-            this.$message({
-              type: 'error',
-              message: '未知操作',
-              showClose: true
-            })
-          }
-          break
-      }
+        }
+      })
     }
   },
-  filters:{
-    methodFiletr(value){
-      const target = methodOptions.filter(item=>item.value === value)[0]
+  filters: {
+    methodFiletr(value) {
+      const target = methodOptions.filter(item => item.value === value)[0]
       // return target && `${target.label}(${target.value})`
       return target && `${target.label}`
     },
-    tagTypeFiletr(value){
-      const target = methodOptions.filter(item=>item.value === value)[0]
+    tagTypeFiletr(value) {
+      const target = methodOptions.filter(item => item.value === value)[0]
       return target && `${target.type}`
     }
   }
@@ -252,10 +264,10 @@ export default {
     float: right;
   }
 }
-.el-tag--mini{
+.el-tag--mini {
   margin-left: 5px;
 }
 .warning {
-    color: #DC143C;
+  color: #dc143c;
 }
 </style>
\ No newline at end of file

QMPlusVuePage/src/view/superAdmin/authority/authority.vue

@@ -4,35 +4,35 @@
       <el-button @click="addAuthority('0')" type="primary">新增角色</el-button>
     </div>
     <el-table
-            :data="tableData"
-            style="width: 100%"
-            row-key="ID"
-            border
-            stripe
-            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
-        <el-table-column label="id" min-width="180" prop="ID"></el-table-column>
-        
-        <el-table-column label="角色id" min-width="180" prop="authorityId"></el-table-column>
-        <el-table-column label="角色名称" min-width="180" prop="authorityName"></el-table-column>
-        <el-table-column fixed="right" label="操作" min-width="300">
-            <template slot-scope="scope">
-                <el-button @click="opdendrawer(scope.row)" size="small" type="text">设置权限</el-button>
-                <el-button @click="deleteAuth(scope.row)" size="small" type="text">删除角色</el-button>
-                <el-button @click="addAuthority(scope.row.authorityId)" size="small" type="text">新增子角色</el-button>
-            </template>
-        </el-table-column>
-    </el-table>
+      :data="tableData"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      border
+      row-key="ID"
+      stripe
+      style="width: 100%"
+    >
+      <el-table-column label="id" min-width="180" prop="ID"></el-table-column>
 
+      <el-table-column label="角色id" min-width="180" prop="authorityId"></el-table-column>
+      <el-table-column label="角色名称" min-width="180" prop="authorityName"></el-table-column>
+      <el-table-column fixed="right" label="操作" min-width="300">
+        <template slot-scope="scope">
+          <el-button @click="opdendrawer(scope.row)" size="small" type="text">设置权限</el-button>
+          <el-button @click="deleteAuth(scope.row)" size="small" type="text">删除角色</el-button>
+          <el-button @click="addAuthority(scope.row.authorityId)" size="small" type="text">新增子角色</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
     <!-- 新增角色弹窗 -->
     <el-dialog :visible.sync="dialogFormVisible" title="新增角色">
-      <el-form :model="form">
-         <el-form-item label="父级角色ID">
+      <el-form :model="form" :rules="rules" ref="authorityForm">
+        <el-form-item label="父级角色ID" prop="parentId">
           <el-input autocomplete="off" disabled v-model="form.parentId"></el-input>
         </el-form-item>
-        <el-form-item label="角色ID">
+        <el-form-item label="角色ID" prop="authorityId">
           <el-input autocomplete="off" v-model="form.authorityId"></el-input>
         </el-form-item>
-        <el-form-item label="角色姓名">
+        <el-form-item label="角色姓名" prop="authorityName">
           <el-input autocomplete="off" v-model="form.authorityName"></el-input>
         </el-form-item>
       </el-form>
@@ -42,7 +42,7 @@
       </div>
     </el-dialog>
 
-    <el-drawer :visible.sync="drawer" v-if="drawer" :with-header="false" size="40%" title="角色配置">
+    <el-drawer :visible.sync="drawer" :with-header="false" size="40%" title="角色配置" v-if="drawer">
       <el-tabs class="role-box" type="border-card">
         <el-tab-pane label="角色菜单">
           <Menus :row="activeRow" />
@@ -50,8 +50,8 @@
         <el-tab-pane label="角色api">
           <apis :row="activeRow" />
         </el-tab-pane>
-         <el-tab-pane label="资源权限">
-          <Datas :row="activeRow" :authority="tableData" />
+        <el-tab-pane label="资源权限">
+          <Datas :authority="tableData" :row="activeRow" />
         </el-tab-pane>
       </el-tabs>
     </el-drawer>
@@ -87,7 +87,18 @@ export default {
       form: {
         authorityId: '',
         authorityName: '',
-        parentId:'0'
+        parentId: '0'
+      },
+      rules: {
+        authorityId: [
+          { required: true, message: '请输入角色ID', trigger: 'blur' }
+        ],
+        authorityName: [
+          { required: true, message: '请输入角色名', trigger: 'blur' }
+        ],
+        parentId: [
+          { required: true, message: '请选择请求方式', trigger: 'blur' }
+        ]
       }
     }
   },
@@ -140,17 +151,28 @@ export default {
     // 确定弹窗
 
     async enterDialog() {
-      const res = await createAuthority(this.form)
-      if (res.success) {
+      if (this.form.authorityId == '0') {
         this.$message({
-          type: 'success',
-          message: '添加成功!'
+          type: 'error',
+          message: '角色id不能为0'
         })
-        this.getTableData()
-        this.closeDialog()
+        return false
       }
-      this.initForm()
-      this.dialogFormVisible = false
+      this.$refs.authorityForm.validate(async valid => {
+        if (valid) {
+          const res = await createAuthority(this.form)
+          if (res.success) {
+            this.$message({
+              type: 'success',
+              message: '添加成功!'
+            })
+            this.getTableData()
+            this.closeDialog()
+          }
+          this.initForm()
+          this.dialogFormVisible = false
+        }
+      })
     },
     // 增加角色
     addAuthority(parentId) {
@@ -158,7 +180,7 @@ export default {
       this.dialogFormVisible = true
     }
   },
-  created(){
+  created() {
     this.pageSize = 999
   }
 }
@@ -173,9 +195,9 @@ export default {
   }
 }
 .role-box {
-    .el-tabs__content {
-      height: calc(100vh - 150px);
-      overflow: auto;
-    }
+  .el-tabs__content {
+    height: calc(100vh - 150px);
+    overflow: auto;
   }
+}
 </style>
\ No newline at end of file

QMPlusVuePage/src/view/superAdmin/menu/menu.vue

@@ -5,7 +5,7 @@
     </div>
 
     <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
-    <el-table :data="tableData" border stripe row-key="ID">
+    <el-table :data="tableData" border row-key="ID" stripe>
       <el-table-column label="ID" min-width="100" prop="ID"></el-table-column>
       <el-table-column label="路由Name" min-width="160" prop="name"></el-table-column>
       <el-table-column label="是否隐藏" min-width="100" prop="hidden">
@@ -36,8 +36,8 @@
     </el-table>
 
     <el-dialog :before-close="handleClose" :visible.sync="dialogFormVisible" title="新增菜单">
-      <el-form :inline="true" :model="form" label-width="80px">
-        <el-form-item label="路由name">
+      <el-form :inline="true" :model="form" :rules="rules" label-width="85px" ref="menuForm">
+        <el-form-item label="路由name" prop="path">
           <el-input autocomplete="off" placeholder="唯一英文字符串" v-model="form.path"></el-input>
         </el-form-item>
         <el-form-item label="是否隐藏">
@@ -49,10 +49,10 @@
         <el-form-item label="父节点Id">
           <el-input autocomplete="off" disabled v-model="form.parentId"></el-input>
         </el-form-item>
-        <el-form-item label="文件路径">
+        <el-form-item label="文件路径" prop="component">
           <el-input autocomplete="off" v-model="form.component"></el-input>
         </el-form-item>
-        <el-form-item label="展示名称">
+        <el-form-item label="展示名称" prop="meta.title">
           <el-input autocomplete="off" v-model="form.meta.title"></el-input>
         </el-form-item>
         <el-form-item label="图标">
@@ -62,9 +62,7 @@
           <el-input autocomplete="off" v-model="form.sort"></el-input>
         </el-form-item>
       </el-form>
-        <div class="warning">
-            新增菜单需要在角色管理内配置权限才可使用
-        </div>
+      <div class="warning">新增菜单需要在角色管理内配置权限才可使用</div>
       <div class="dialog-footer" slot="footer">
         <el-button @click="closeDialog">取 消</el-button>
         <el-button @click="enterDialog" type="primary">确 定</el-button>
@@ -104,30 +102,40 @@ export default {
           icon: ''
         }
       },
+      rules: {
+        path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
+        component: [
+          { required: true, message: '请输入文件路径', trigger: 'blur' }
+        ],
+        'meta.title': [
+          { required: true, message: '请输入菜单展示名称', trigger: 'blur' }
+        ]
+      },
       isEdit: false
     }
   },
   methods: {
-    handleClose(done){
+    handleClose(done) {
       this.initForm()
       done()
     },
     // 懒加载子菜单
     load(tree, treeNode, resolve) {
-          resolve([
-            {
-              id: 31,
-              date: '2016-05-01',
-              name: '王小虎',
-              address: '上海市普陀区金沙江路 1519 弄'
-            }, {
-              id: 32,
-              date: '2016-05-01',
-              name: '王小虎',
-              address: '上海市普陀区金沙江路 1519 弄'
-            }
-          ])
-      },
+      resolve([
+        {
+          id: 31,
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          id: 32,
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }
+      ])
+    },
     // 删除菜单
     deleteMenu(ID) {
       this.$confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
@@ -172,26 +180,30 @@ export default {
     },
     // 添加menu
     async enterDialog() {
-      let res
-      this.form.name = this.form.path
-      if (this.isEdit) {
-        res = await updataBaseMenu(this.form)
-      } else {
-        res = await addBaseMenu(this.form)
-      }
-      if (res.success) {
-        this.$message({
-          type: 'success',
-          message: '添加成功!'
-        })
-        this.getTableData()
-      } else {
-        this.$message({
-          type: 'error',
-          message: '添加失败!'
-        })
-      }
-      this.dialogFormVisible = false
+      this.$refs.menuForm.validate(async valid => {
+        if (valid) {
+          let res
+          this.form.name = this.form.path
+          if (this.isEdit) {
+            res = await updataBaseMenu(this.form)
+          } else {
+            res = await addBaseMenu(this.form)
+          }
+          if (res.success) {
+            this.$message({
+              type: 'success',
+              message: '添加成功!'
+            })
+            this.getTableData()
+          } else {
+            this.$message({
+              type: 'error',
+              message: '添加失败!'
+            })
+          }
+          this.dialogFormVisible = false
+        }
+      })
     },
     // 添加菜单方法，id为 0则为添加根菜单
     addMenu(id) {
@@ -207,7 +219,7 @@ export default {
       this.isEdit = true
     }
   },
-  created(){
+  created() {
     this.pageSize = 999
   }
 }
@@ -220,6 +232,6 @@ export default {
   }
 }
 .warning {
-  color: #DC143C;
+  color: #dc143c;
 }
 </style>
\ No newline at end of file

QMPlusVuePage/src/view/superAdmin/user/user.vue

@@ -43,14 +43,14 @@
     ></el-pagination>
 
     <el-dialog :visible.sync="addUserDialog" custom-class="user-dialog" title="新增用户">
-      <el-form :model="userInfo">
-        <el-form-item label="用户名" label-width="80px">
+      <el-form :rules="rules" ref="userForm" :model="userInfo" >
+        <el-form-item label="用户名" label-width="80px" prop="username">
           <el-input v-model="userInfo.username"></el-input>
         </el-form-item>
-        <el-form-item label="密码" label-width="80px">
+        <el-form-item label="密码" label-width="80px" prop="password">
           <el-input v-model="userInfo.password"></el-input>
         </el-form-item>
-        <el-form-item label="别名" label-width="80px">
+        <el-form-item label="别名" label-width="80px" prop="nickName">
           <el-input v-model="userInfo.nickName"></el-input>
         </el-form-item>
         <el-form-item label="头像" label-width="80px">
@@ -66,7 +66,7 @@
             <i class="el-icon-plus avatar-uploader-icon" v-else></i>
           </el-upload>
         </el-form-item>
-        <el-form-item label="用户角色" label-width="80px">
+        <el-form-item label="用户角色" label-width="80px" prop="authorityId">
           <el-select placeholder="请选择" v-model="userInfo.authorityId">
             <el-option
               :key="item.authorityId"
@@ -109,7 +109,19 @@ export default {
         nickName: '',
         headerImg: '',
         authorityId: ''
-      }
+      },
+      rules: {
+        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        password: [
+          { required: true, message: '请输入用户密码', trigger: 'blur' }
+        ],
+        nickName: [
+          { required: true, message: '请输入用户昵称', trigger: 'blur' }
+        ],
+        authorityId: [
+          { required: true, message: '请选择用户角色', trigger: 'blur' }
+        ]
+      },
     }
   },
   computed: {
@@ -117,12 +129,16 @@ export default {
   },
   methods: {
     async enterAddUserDialog() {
-      const res = await regist(this.userInfo)
-      if (res.success) {
-        this.$message({ type: 'success', message: '创建成功' })
-      }
-      await this.getTableData()
-      this.closeAddUserDialog()
+      this.$refs.userForm.validate(async valid => {
+        if (valid) {
+          const res = await regist(this.userInfo)
+          if (res.success) {
+            this.$message({ type: 'success', message: '创建成功' })
+          }
+          await this.getTableData()
+          this.closeAddUserDialog()
+        }
+      })
     },
     closeAddUserDialog() {
       this.userInfo = {