增加前端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,10 +25,9 @@
             <el-tag
               :key="scope.row.methodFiletr"
               :type="scope.row.method|tagTypeFiletr"
+              effect="dark"
               size="mini"
-              effect="dark">
-              {{scope.row.method|methodFiletr}}
-            </el-tag>
+            >{{scope.row.method|methodFiletr}}</el-tag>
             <!-- {{scope.row.method|methodFiletr}} -->
           </div>
         </template>
@@ -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>
@@ -102,24 +99,24 @@ const methodOptions = [
   {
     value: 'POST',
     label: '创建',
-          type:'success'
+    type: 'success'
   },
   {
     value: 'GET',
     label: '查看',
-          type:''
+    type: ''
   },
   {
     value: 'PUT',
     label: '更新',
-          type:'warning'
+    type: 'warning'
   },
   {
     value: 'DELETE',
     label: '删除',
-          type:'danger'
+    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,6 +198,8 @@ export default {
         })
     },
     async enterDialog() {
+      this.$refs.apiForm.validate(async valid => {
+        if (valid) {
           switch (this.type) {
             case 'addApi':
               {
@@ -231,15 +241,17 @@ export default {
               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>

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

@@ -5,11 +5,12 @@
     </div>
     <el-table
       :data="tableData"
-            style="width: 100%"
-            row-key="ID"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
       border
+      row-key="ID"
       stripe
-            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      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>
@@ -22,17 +23,16 @@
         </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" />
@@ -51,7 +51,7 @@
           <apis :row="activeRow" />
         </el-tab-pane>
         <el-tab-pane label="资源权限">
-          <Datas :row="activeRow" :authority="tableData" />
+          <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,6 +151,15 @@ export default {
     // 确定弹窗
 
     async enterDialog() {
+      if (this.form.authorityId == '0') {
+        this.$message({
+          type: 'error',
+          message: '角色id不能为0'
+        })
+        return false
+      }
+      this.$refs.authorityForm.validate(async valid => {
+        if (valid) {
           const res = await createAuthority(this.form)
           if (res.success) {
             this.$message({
@@ -151,6 +171,8 @@ export default {
           }
           this.initForm()
           this.dialogFormVisible = false
+        }
+      })
     },
     // 增加角色
     addAuthority(parentId) {
@@ -158,7 +180,7 @@ export default {
       this.dialogFormVisible = true
     }
   },
-  created(){
+  created() {
     this.pageSize = 999
   }
 }
@@ -177,5 +199,5 @@ export default {
     height: calc(100vh - 150px);
     overflow: auto;
   }
-  }
+}
 </style>

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,11 +102,20 @@ 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()
     },
@@ -120,7 +127,8 @@ export default {
           date: '2016-05-01',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1519 弄'
-            }, {
+        },
+        {
           id: 32,
           date: '2016-05-01',
           name: '王小虎',
@@ -172,6 +180,8 @@ export default {
     },
     // 添加menu
     async enterDialog() {
+      this.$refs.menuForm.validate(async valid => {
+        if (valid) {
           let res
           this.form.name = this.form.path
           if (this.isEdit) {
@@ -192,6 +202,8 @@ export default {
             })
           }
           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>

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() {
+      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 = {