优化弹窗里标签页的用户体验

server/dbdata/userauth_ldap.go

@@ -45,7 +45,7 @@ func (auth AuthLdap) checkData(authData map[string]interface{}) error {
 		return errors.New("LDAP的用户查询密码不能为空")
 	}
 	if auth.BaseDn == "" || !ValidateDN(auth.BaseDn) {
-		return errors.New("LDAP的BaseName填写有误")
+		return errors.New("LDAP的BaseDN填写有误")
 	}
 	if auth.SearchAttr == "" {
 		return errors.New("LDAP的搜索属性不能为空")
@@ -117,7 +117,6 @@ func (auth AuthLdap) checkUser(name, pwd string, g *Group) error {
 		return fmt.Errorf("LDAP发现 %s 用户，存在多个账号", name)
 	}
 	userDN := sr.Entries[0].DN
-	fmt.Println(userDN)
 	err = l.Bind(userDN, pwd)
 	if err != nil {
 		return fmt.Errorf("%s LDAP 登入失败，请检查登入的账号或密码 %s", name, err.Error())

web/src/pages/group/List.vue

@@ -168,10 +168,11 @@
         title="用户组"
         :visible.sync="user_edit_dialog"
         width="750px"
+        @close='closeDialog'
         center>
 
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
-        <el-tabs v-model="activeTab">
+        <el-tabs v-model="activeTab" :before-leave="beforeTabLeave">
            <el-tab-pane label="通用" name="general">      
                 <el-form-item label="用户组ID" prop="id">
                 <el-input v-model="ruleForm.id" disabled></el-input>
@@ -359,7 +360,7 @@
             </el-tab-pane>
             <el-form-item>
             <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
-            <el-button @click="disVisible">取消</el-button>
+            <el-button @click="closeDialog">取消</el-button>
             </el-form-item>
           </el-tabs>
         </el-form> 
@@ -476,7 +477,6 @@ export default {
     handleEdit(row) {      
       !this.$refs['ruleForm'] || this.$refs['ruleForm'].resetFields();
       console.log(row)      
-      this.activeTab = "general"
       this.user_edit_dialog = true
       if (!row) {
         this.setAuthData(row)
@@ -561,6 +561,24 @@ export default {
     },
     authTypeChange() {
       this.$refs['ruleForm'].clearValidate();
+    },
+    beforeTabLeave() {
+      var isSwitch = true
+      if (! this.user_edit_dialog) {
+        return isSwitch;
+      }      
+      this.$refs['ruleForm'].validate((valid) => {
+        if (!valid) {
+          this.$message.error("错误：您有必填项没有填写。")
+          isSwitch = false;
+          return false;
+        }
+      });      
+      return isSwitch;
+    },
+    closeDialog() {
+      this.user_edit_dialog = false;
+      this.activeTab = "general";
     }
   },
 }

web/src/pages/user/Policy.vue

@@ -136,10 +136,11 @@
         :visible.sync="user_edit_dialog"
         width="750px"
         top="50px"
+        @close='closeDialog'
         center>
 
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
-        <el-tabs v-model="activeTab">
+        <el-tabs v-model="activeTab" :before-leave="beforeTabLeave">
            <el-tab-pane label="通用" name="general">
                 <el-form-item label="ID" prop="id">
                 <el-input v-model="ruleForm.id" disabled></el-input>
@@ -283,7 +284,7 @@ export default {
         re_upper_limit : 0,        
       },
       rules: {
-        name: [
+        username: [
           {required: true, message: '请输入用户名', trigger: 'blur'},
           {max: 30, message: '长度小于 30 个字符', trigger: 'blur'}
         ],
@@ -399,6 +400,24 @@ export default {
         this.$set(this.readMore, id, true);
       }
     },
+    beforeTabLeave() {
+      var isSwitch = true
+      if (! this.user_edit_dialog) {
+        return isSwitch;
+      }      
+      this.$refs['ruleForm'].validate((valid) => {
+        if (!valid) {
+          this.$message.error("错误：您有必填项没有填写。")
+          isSwitch = false;
+          return false;
+        }
+      });      
+      return isSwitch;
+    },
+    closeDialog() {
+      this.user_edit_dialog = false;
+      this.activeTab = "general";
+    },        
   },
 
 }