Temp (#121)

* fix: 修复修改个人信息分组内容重叠的bug

* fix:checkbox 半选状态

Author: GongJS

src/assets/styles/realize/elementUi.scss

@@ -38,12 +38,6 @@
   width: 100%;
 }
 
-.el-radio {
-  width: 33%;
-  margin-left: 0px !important;
-  margin-bottom: 20px;
-}
-
 .el-radio__inner {
   border: 1px solid #c4c0d2 !important;
 }
@@ -57,12 +51,6 @@
   color: $theme;
 }
 
-@media screen and (max-width: 980px) {
-  .el-radio {
-    width: 50%;
-  }
-}
-
 // form
 .el-form-item__label {
   color: #333333;

src/components/layout/SideBar.vue

@@ -169,7 +169,7 @@ export default {
 
   .mobile-logo {
     width: 64px;
-    height: 66px;
+    height: 72px;
     display: flex;
     justify-content: center;
     align-items: center;

src/views/admin/group/GroupAuths.vue

@@ -5,17 +5,19 @@
         <label>{{title}}</label>
       </div>
       <div class="details">
-
-        <div class="permissions-box" v-for="(auth,index) in allAuths" :key="index">
+        <div class="permissions-box" v-for="(auth,moduleName) in allAuths" :key="moduleName">
           <el-checkbox-group v-model="auths">
             <div class="module-box">
-              <el-checkbox @change="moduleCheck($event, auth)" class="module" :label="index">
-              </el-checkbox>
+              <el-checkbox
+                @change="moduleCheck($event, auth,moduleName)"
+                class="module"
+                :label="moduleName"
+                :indeterminate="halfAuths.includes(moduleName)"></el-checkbox>
             </div>
 
             <ul class="permissions-ul">
               <li class="permissions-li" v-for="(item,key) in auth" :key="key">
-                <el-checkbox :label="key | filterTitle(32)" @change="singleCheck($event, key, index)"></el-checkbox>
+                <el-checkbox :label="key | filterTitle(32)" @change="singleCheck($event, key, moduleName)"></el-checkbox>
               </li>
             </ul>
           </el-checkbox-group>
@@ -35,6 +37,7 @@ export default {
     return {
       allAuths: {}, // 所有分组权限
       auths: [], // 拥有的分组权限
+      halfAuths: [], // 该分类下的权限没有全选中
       cacheFlag: true,
       loading: false,
     }
@@ -53,65 +56,95 @@ export default {
         let res = await Admin.getOneGroup(this.id)
         // 获取分组所拥有的权限
         /* eslint-disable */
-        res = JSON.parse(JSON.stringify(res)) // 去除__ob__
+        res = JSON.parse(JSON.stringify(res)); // 去除__ob__
         for (let i = 0; i < res.auths.length; i++) {
           for (const key in res.auths[i]) {
             for (let j = 0; j < res.auths[i][key].length; j++) {
-              this.auths.push(res.auths[i][key][j].auth)
+              this.auths.push(res.auths[i][key][j].auth);
             }
           }
         }
-        this.$emit('updateCacheAuths', this.auths)
+        this.$emit("updateCacheAuths", this.auths);
         // 检查module状态是否需要选中
         for (const key in this.allAuths) {
-          this.initModuleCheck(key)
+          this.initModuleCheck(key);
         }
       }
-      this.$emit('updateAuths', this.auths)
-      this.$emit('updateAllAuths', this.allAuths)
+      this.$emit("updateAuths", this.auths);
+      this.$emit("updateAllAuths", this.allAuths);
     },
     // 弹窗打开时，判断某一分类权限是否全部选中
     initModuleCheck(moduleName) {
-      const currentModuleChildrenArr = Object.keys(this.allAuths[moduleName])
-      const intersect = Utils.getIntersect(currentModuleChildrenArr, this.auths)
+      const currentModuleChildrenArr = Object.keys(this.allAuths[moduleName]);
+      const intersect = Utils.getIntersect(
+        currentModuleChildrenArr,
+        this.auths
+      );
+      // 全选
       if (intersect.length === currentModuleChildrenArr.length) {
-        this.auths.push(moduleName)
+        this.auths.push(moduleName);
+      }
+      // 半选
+      if (
+        intersect.length > 0 &&
+        intersect.length < currentModuleChildrenArr.length
+      ) {
+        this.halfAuths.push(moduleName);
       }
     },
-    moduleCheck(checked, auth) {
-      const authArr = Object.keys(auth)
+    moduleCheck(checked, auth, moduleName) {
+      const authArr = Object.keys(auth);
       if (checked) {
-        this.auths.push(...authArr)
+        if (this.halfAuths.indexOf(moduleName) > -1) {
+          this.halfAuths.splice(this.halfAuths.indexOf(moduleName), 1);
+        }
+        this.auths.push(...authArr);
       } else {
-        this.auths = this.auths.filter(x => authArr.indexOf(x) < 0)
+        if (this.halfAuths.indexOf(moduleName) > -1) {
+          this.halfAuths.splice(this.halfAuths.indexOf(moduleName), 1);
+        }
+        this.auths = this.auths.filter(x => authArr.indexOf(x) < 0);
       }
-      this.$emit('updateAuths', this.auths)
+      this.$emit("updateAuths", this.auths);
     },
     singleCheck(checked, singleAuth, moduleName) {
-      const currentModuleChildrenArr = Object.keys(this.allAuths[moduleName])
-      const intersect = Utils.getIntersect(currentModuleChildrenArr, this.auths)
+      const currentModuleChildrenArr = Object.keys(this.allAuths[moduleName]);
+      const intersect = Utils.getIntersect(
+        currentModuleChildrenArr,
+        this.auths
+      );
       if (intersect.length === currentModuleChildrenArr.length) {
-        this.auths.push(moduleName)
-      } else {
-        const index = this.auths.indexOf(moduleName)
-        if (index > -1) {
-          this.auths.splice(index, 1)
+        if (this.halfAuths.indexOf(moduleName) > -1) {
+          this.halfAuths.splice(this.halfAuths.indexOf(moduleName), 1);
         }
+        this.auths.push(moduleName);
+      } else if (
+        intersect.length > 0 &&
+        intersect.length < currentModuleChildrenArr.length
+      ) {
+        // this.auths.splice(this.auths.indexOf(moduleName),1)
+        this.halfAuths.push(moduleName);
+      } else {
+
+        this.halfAuths.splice(this.halfAuths.indexOf(moduleName), 1);
+        this.auths.splice(this.auths.indexOf(moduleName), 1);
       }
-      this.$emit('updateAuths', this.auths)
-    },
+      this.halfAuths = Array.from(new Set(this.halfAuths));
+      this.auths = Array.from(new Set(this.auths));
+      this.$emit("updateAuths", this.auths);
+    }
   },
   async created() {
     try {
-      this.loading = true
-      await this.getGroupAuths()
-      this.loading = false
+      this.loading = true;
+      await this.getGroupAuths();
+      this.loading = false;
     } catch (e) {
-      this.loading = false
-      console.log(e)
+      this.loading = false;
+      console.log(e);
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -185,14 +218,15 @@ export default {
         margin-bottom: 20px;
 
         .permissions-li {
-          width: 290px;
+          width: 150px;
           height: 20px;
           line-height: 20px;
           margin-bottom: 20px;
           display: flex;
           flex-direction: row;
           justify-content: flex-start;
           vertical-align: text-top;
+          margin-right: 10px;
 
           .check {
             transform: translateY(2px);

src/views/admin/user/UserInfo.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="container">
     <el-row>
-      <el-col
-        :lg="16"
-        :md="20"
-        :sm="24"
-        :xs="24">
+      <el-col :lg="16" :md="20" :sm="24" :xs="24">
         <el-form
           :model="form"
           status-icon
@@ -14,36 +10,28 @@
           ref="form"
           v-loading="loading"
           label-width="100px"
-          @submit.native.prevent>
+          @submit.native.prevent
+        >
           <el-form-item label="用户名" prop="nickname">
             <el-input clearable v-model="form.nickname" :disabled="isEdited"></el-input>
           </el-form-item>
           <el-form-item label="邮箱" prop="email">
             <el-input clearable v-model="form.email" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item v-if="pageType === 'add'" label="密码" prop="password">
-            <el-input
-              clearable
-              type="password"
-              v-model="form.password"
-              autocomplete="off"></el-input>
+            <el-input clearable type="password" v-model="form.password" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item
             v-if="pageType === 'add'"
             label="确认密码"
             prop="confirm_password"
-            label-position="top">
-            <el-input
-              clearable
-              type="password"
-              v-model="form.confirm_password"
-              autocomplete="off"></el-input>
+            label-position="top"
+          >
+            <el-input clearable type="password" v-model="form.confirm_password" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item v-if="pageType !== 'password'" label="选择分组">
-            <el-radio-group v-model="form.group_id" label-position="top">
-              <el-radio :label="item.id" v-for="(item, index) in groups" :key=index>
-                {{item.name}}
-              </el-radio>
+            <el-radio-group v-model="form.group_id" label-position="top" class="user-info">
+              <el-radio :label="item.id" v-for="(item, index) in groups" :key="index">{{item.name}}</el-radio>
             </el-radio-group>
           </el-form-item>
           <el-form-item v-show="submit" class="submit">
@@ -66,19 +54,23 @@ export default {
       type: Boolean, // 表单是否显示功能按钮
       default: true,
     },
-    id: { // 用户id
+    id: {
+      // 用户id
       type: Number,
       default: undefined,
     },
-    groups: { // 所有分组
+    groups: {
+      // 所有分组
       type: Array,
       default: () => {},
     },
-    labelPosition: { // 表单label位置
+    labelPosition: {
+      // 表单label位置
       type: String,
       default: 'right',
     },
-    info: { // 用户信息
+    info: {
+      // 用户信息
       type: Object,
       default: () => {},
     },
@@ -90,9 +82,10 @@ export default {
   inject: ['eventBus'],
   data() {
     // 验证回调函数
-    const checkUserName = (rule, value, callback) => { // eslint-disable-line
+    const checkUserName = (rule, value, callback) => {
+      // eslint-disable-line
       if (!value) {
-        return callback(new Error('用户名不能为空'))
+        callback(new Error('用户名不能为空'))
       }
       callback()
     }
@@ -130,7 +123,11 @@ export default {
       // 验证规则
       rules: {
         nickname: [
-          { validator: checkUserName, trigger: ['blur', 'change'], required: true },
+          {
+            validator: checkUserName,
+            trigger: ['blur', 'change'],
+            required: true,
+          },
         ],
         password: [
           { validator: validatePassword, trigger: 'blur', required: true },
@@ -139,15 +136,20 @@ export default {
           { validator: validatePassword2, trigger: 'blur', required: true },
         ],
         email: [
-          { type: 'email', message: '请输入正确的邮箱地址或者不填', trigger: ['blur', 'change'] },
+          {
+            type: 'email',
+            message: '请输入正确的邮箱地址或者不填',
+            trigger: ['blur', 'change'],
+          },
         ],
       },
     }
   },
   methods: {
     // 提交表单
     async submitForm(formName) {
-      this.$refs[formName].validate(async (valid) => { // eslint-disable-line
+      this.$refs[formName].validate(async (valid) => {
+        // eslint-disable-line
         if (valid) {
           // 新增用户
           let res
@@ -170,12 +172,20 @@ export default {
             }
           } else {
             // 更新用户信息
-            if (this.form.email === this.info.email && this.form.group_id === this.info.group_id) {
+            if (
+              this.form.email === this.info.email
+              && this.form.group_id === this.info.group_id
+            ) {
+              this.$emit('handleInfoResult', false)
               return
             }
             try {
               this.loading = true
-              res = await Admin.updateOneUser(this.form.email, this.form.group_id, this.id)
+              res = await Admin.updateOneUser(
+                this.form.email,
+                this.form.group_id,
+                this.id,
+              )
             } catch (e) {
               this.loading = false
               console.log(e)
@@ -241,3 +251,30 @@ export default {
   }
 }
 </style>
+
+<style lang="scss">
+.el-radio-group {
+  &.user-info {
+    display: flex;
+    flex-wrap: wrap;
+    width: 120%;
+    > .el-radio {
+      width: 30%;
+      margin-left: 0px !important;
+      margin-right: 10px;
+      margin-bottom: 20px;
+      white-space: normal;
+      display: flex;
+    }
+  }
+}
+@media screen and (max-width: 980px) {
+  .el-radio-group {
+    &.user-info {
+      > .el-radio {
+        width: 50%;
+      }
+    }
+  }
+}
+</style>