增加校验

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,45 +237,53 @@ export default {
     },
     //提交
     confirmRole() {
-
-      const isEdit = this.dialogType === '编辑角色'
-      // 获取选中权限树id
-      const checkedKeys = this.$refs.tree.getCheckedKeys()
-      if (checkedKeys) {
-        let routes = []
-        checkedKeys.forEach(key => {
-          let obj = { id: key }
-          routes.push(obj)
-        })
-        // 将menu对象数组，赋给要添加的role
-        this.role.routes = routes
-      }
-      if (isEdit) { // 修改角色
-        updateRole(this.role).then((res) => {
-          if (res.status == "success") {
-            this.$message.success("修改成功")
-            this.getRoles()
-          } else {
-            this.$message.error(res.data)
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          const isEdit = this.dialogType === '编辑角色'
+          // 获取选中权限树id
+          const checkedKeys = this.$refs.tree.getCheckedKeys()
+          if (checkedKeys) {
+            let routes = []
+            checkedKeys.forEach(key => {
+              let obj = { id: key }
+              routes.push(obj)
+            })
+            // 将menu对象数组，赋给要添加的role
+            this.role.routes = routes
           }
-        }).catch((error) => {
-          this.$message.error("修改失败")
-        })
+          if (isEdit) { // 修改角色
+            updateRole(this.role).then((res) => {
+              if (res.status == "success") {
+                this.$message.success("修改成功")
+                this.getRoles()
+              } else {
+                this.$message.error(res.data)
+              }
+            }).catch((error) => {
+              this.$message.error("修改失败")
+            })
 
-      } else {
-        //新增角色
-        addRole(this.role).then((res) => {
-          if (res.status == "success") {
-            this.$message.success("添加成功")
-            this.getRoles()
           } else {
-            this.$message.error(res.data)
+            //新增角色
+            addRole(this.role).then((res) => {
+              if (res.status == "success") {
+                this.$message.success("添加成功")
+                this.getRoles()
+              } else {
+                this.$message.error(res.data)
+              }
+            }).catch((error) => {
+              this.$message.error("添加失败")
+            })
           }
-        }).catch((error) => {
-          this.$message.error("添加失败")
-        })
-      }
-      this.dialogVisible = false
+          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;