增加校验

src/views/permission/role.vue

@@ -34,7 +34,7 @@
     </div>
 
     <el-dialog :visible.sync="dialogVisible" :title="dialogType">
-      <el-form :model="role" label-width="80px" label-position="left" :rules="rules">
+      <el-form ref="form" :model="role" label-width="80px" label-position="left" :rules="rules">
         <el-form-item label="角色名称" prop="rlName">
           <el-input v-model="role.rlName" placeholder="角色名称" />
         </el-form-item>
@@ -42,9 +42,10 @@
           <el-input v-model="role.rlDesc" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="角色描述" />
         </el-form-item>
         <el-form-item label="路由树">
-          <el-tree ref="tree" :check-strictly="true" :data="routesData" @check="checkTree" show-checkbox default-expand-all node-key="id">
+          <el-tree ref="tree" :check-strictly="true" :data="routesData" @check="checkTree" show-checkbox
+            default-expand-all node-key="id">
             <span slot-scope="{data}">
-              {{data.title}}
+              {{ data.title }}
               <span class="explain-text">{{ data.explain }}</span>
             </span>
           </el-tree>
@@ -91,8 +92,8 @@ export default {
       dialogVisible: false,
       companyId: '',
       rules: {
-        rlName: [{ required: true, message: "角色名称"}],
-        rlDesc: [{ required: true, message: "角色描述" }]
+        rlName: [{ required: true, message: "角色名称不能为空" }],
+        rlDesc: [{ required: true, message: "角色描述不能为空" }]
       }
     }
   },
@@ -236,7 +237,8 @@ export default {
     },
     //提交
     confirmRole() {
-
+      this.$refs.form.validate((valid) => {
+        if (valid) {
           const isEdit = this.dialogType === '编辑角色'
           // 获取选中权限树id
           const checkedKeys = this.$refs.tree.getCheckedKeys()
@@ -275,6 +277,13 @@ export default {
             })
           }
           this.dialogVisible = false
+        }else{
+          this.$message({
+              type: 'warning',
+              message: '请填写正确信息！'
+            })
+        }
+      })
     },
 
 
@@ -318,6 +327,7 @@ export default {
 .footer {
   text-align: right;
 }
+
 .explain-text {
   font-size: 12px;
   font-weight: 400;