菜单权限组件修改

src/components/menu-checkbox.vue

+<template>
+  <div class="apass-checkbox">
+    <!-- 未选中 -->
+    <label
+      class="el-checkbox apass_checkbox selected_0"
+      v-if="item.selected === 0"
+    >
+      <span class="el-checkbox__input">
+        <span class="el-checkbox__inner"></span>
+      </span>
+      <span class="el-checkbox__label" v-text="item.menu_name"></span>
+    </label>
+    <!-- 选中 -->
+    <label
+      class="el-checkbox apass_checkbox selected_1"
+      v-if="item.selected === 1"
+    >
+      <span class="el-checkbox__input is-checked">
+        <span class="el-checkbox__inner"></span>
+      </span>
+      <span class="el-checkbox__label" v-text="item.menu_name"></span>
+    </label>
+    <!-- 半选 -->
+    <label
+      class="el-checkbox apass_checkbox selected_2"
+      v-if="item.selected === 2"
+    >
+      <span
+        class="el-checkbox__input is-indeterminate"
+        tabindex="0"
+        role="checkbox"
+        aria-checked="mixed"
+      >
+        <span class="el-checkbox__inner"></span>
+      </span>
+      <span class="el-checkbox__label" v-text="item.menu_name"></span>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.apass_checkbox {
+  line-height: 40px;
+}
+</style>

src/components/menu-permission.vue

 <template>
   <div class="menu_permission">
-    <ul class="floor_list first" v-if="data && data.length">
-      <li v-for="(first_item, first_index) in data" :key="'p_' + first_index">
-        <div class="floor_item first">
-          <label
-            class="el-checkbox apass_checkbox"
-            :class="{ 'is-checked': first_item.selected }"
-            @click="selectedItem(first_item)"
+    <ul
+      class="floor_list first"
+      v-if="permissionsList && permissionsList.length"
     >
-            <span
-              class="el-checkbox__input"
-              :class="{ 'is-checked': first_item.selected }"
+      <li
+        v-for="(first_item, first_index) in permissionsList"
+        :key="'p_' + first_index"
       >
-              <span class="el-checkbox__inner"></span>
-            </span>
-            <span
-              class="el-checkbox__label"
-              v-text="first_item.menu_name"
-            ></span>
-          </label>
-        </div>
+        <menu-checkbox
+          class="floor_item first"
+          :item="first_item"
+          @click.native="selectedItem(first_item)"
+        ></menu-checkbox>
         <ul
           class="floor_list second"
           v-if="first_item.Child && first_item.Child.length"
@@ -28,24 +21,11 @@
             v-for="(second_item, second_index) in first_item.Child"
             :key="'p_' + first_index + '_' + second_index"
           >
-            <div class="floor_item second">
-              <label
-                class="el-checkbox apass_checkbox"
-                :class="{ 'is-checked': second_item.selected }"
-                @click="selectedItem(second_item, first_item)"
-              >
-                <span
-                  class="el-checkbox__input"
-                  :class="{ 'is-checked': second_item.selected }"
-                >
-                  <span class="el-checkbox__inner"></span>
-                </span>
-                <span
-                  class="el-checkbox__label"
-                  v-text="second_item.menu_name"
-                ></span>
-              </label>
-            </div>
+            <menu-checkbox
+              class="floor_item second"
+              :item="second_item"
+              @click.native="selectedItem(second_item, first_item)"
+            ></menu-checkbox>
             <ul
               class="floor_list third"
               v-if="second_item.Child && second_item.Child.length"
@@ -56,31 +36,19 @@
                   'p_' + first_index + '_' + second_index + '_' + third_index
                 "
               >
-                <div class="floor_item third">
-                  <label
-                    class="el-checkbox apass_checkbox"
-                    :class="{ 'is-checked': third_item.selected }"
-                    @click="selectedItem(third_item, second_item, first_item)"
-                  >
-                    <span
-                      class="el-checkbox__input"
-                      :class="{ 'is-checked': third_item.selected }"
-                    >
-                      <span class="el-checkbox__inner"></span>
-                    </span>
-                    <span
-                      class="el-checkbox__label"
-                      v-text="third_item.menu_name"
-                    ></span>
-                  </label>
-                </div>
+                <menu-checkbox
+                  class="floor_item third"
+                  :item="third_item"
+                  @click.native="
+                    selectedItem(third_item, second_item, first_item)
+                  "
+                ></menu-checkbox>
                 <ul
                   class="floor_list fourth"
                   v-if="third_item.Child && third_item.Child.length"
                 >
                   <li>
-                    <div class="floor_item fourth">
-                      <label
+                    <menu-checkbox
                       v-for="(fourth_item, fourth_index) in third_item.Child"
                       :key="
                         'p_' +
@@ -92,9 +60,9 @@
                           '_' +
                           fourth_index
                       "
-                        class="el-checkbox apass_checkbox"
-                        :class="{ 'is-checked': fourth_item.selected }"
-                        @click="
+                      class="floor_item fourth"
+                      :item="fourth_item"
+                      @click.native="
                         selectedItem(
                           fourth_item,
                           third_item,
@@ -102,19 +70,7 @@
                           first_item
                         )
                       "
-                      >
-                        <span
-                          class="el-checkbox__input"
-                          :class="{ 'is-checked': fourth_item.selected }"
-                        >
-                          <span class="el-checkbox__inner"></span>
-                        </span>
-                        <span
-                          class="el-checkbox__label"
-                          v-text="fourth_item.menu_name"
-                        ></span>
-                      </label>
-                    </div>
+                    ></menu-checkbox>
                   </li>
                 </ul>
               </li>
@@ -127,72 +83,173 @@
 </template>
 
 <script>
+import menuCheckbox from "./menu-checkbox";
+
 export default {
+  components: {
+    menuCheckbox,
+  },
   model: {
-    prop: "data",
+    prop: "permissions",
     event: "change-permissions",
   },
   props: {
-    data: {
+    permissions: {
+      type: Array,
+      default: () => [],
+    },
+    list: {
       type: Array,
       default: () => [],
     },
   },
+  data: () => ({
+    initFlag: true,
+    permissionsList: [],
+  }),
+  watch: {
+    permissions: {
+      handler() {
+        this.init();
+      },
+      deep: true,
+    },
+  },
   methods: {
+    init() {
+      if (!this.initFlag) {
+        return;
+      }
+
+      console.log("menu permission init.")
+      let permissionsList = this.deepClone(this.list);
+      let permissions = this.permissions;
+
+      permissionsList.forEach((item) => {
+        this.traverse(item, (item) => {
+          let target = permissions.find((v) => v.menu_id === item.menu_id);
+
+          this.$set(item, "selected", target ? 1 : 0);
+        });
+      });
+
+      this.permissionsList = permissionsList;
+      this.initPermissionsList();
+    },
+    traverse(obj, cb) {
+      cb(obj);
+
+      if (obj.Child && obj.Child.length) {
+        obj.Child.forEach((item) => {
+          this.traverse(item, cb);
+        });
+      }
+    },
+    deepClone(source) {
+      if (!source || typeof source !== "object") {
+        throw new Error("error arguments from deepClone");
+      }
+
+      let result = source.constructor === Array ? [] : {};
+
+      for (let key in source) {
+        if (source[key] && typeof source[key] === "object") {
+          result[key] = source[key].constructor === Array ? [] : {};
+          result[key] = this.deepClone(source[key]);
+        } else {
+          result[key] = source[key];
+        }
+      }
+
+      return result;
+    },
     selectedItem(
       selected_item,
       p_item = null, // 父元素
       gp_item = null, // 祖父元素
       ggp_item = null // 曾祖父元素
     ) {
-      let selected = !(selected_item.selected || false);
+      let selected = selected_item.selected === 1 ? 0 : 1;
 
-      this.traverse(selected_item, (v) => {
-        this.$set(v, "selected", selected);
+      this.traverse(selected_item, (item) => {
+        this.$set(item, "selected", selected);
       });
 
       if (p_item) {
-        let selectedAll = false;
+        this.upParentSelected(p_item);
+      }
 
-        p_item.Child.forEach((item) => {
-          selectedAll = selectedAll || item.selected;
-        });
+      if (gp_item) {
+        this.upParentSelected(gp_item);
+      }
 
-        this.$set(p_item, "selected", selectedAll);
+      if (ggp_item) {
+        this.upParentSelected(ggp_item);
       }
 
-      if (gp_item) {
-        let selectedAll = false;
+      this.uppermissions();
+    },
+    initPermissionsList() {
+      this.permissionsList.forEach((item) => {
+        this.traverse(item, (item) => {
+          let selected = item.selected;
 
-        gp_item.Child.forEach((item) => {
-          selectedAll = selectedAll || item.selected;
+          if (item.selected !== 0) {
+            let allSelcted = true;
+
+            item.Child &&
+              item.Child.forEach((v) => {
+                allSelcted = v.selected === 0 && allSelcted;
               });
 
-        this.$set(gp_item, "selected", selectedAll);
+            this.$set(item, "selected", allSelcted ? 1 : 2);
           }
+        });
+      });
 
-      if (ggp_item) {
-        let selectedAll = false;
+      // this.$emit("change-list", this.permissionsList);
+    },
+    upParentSelected(parent) {
+      let selectedLength = 0;
+      let selected = parent.selected;
 
-        ggp_item.Child.forEach((item) => {
-          selectedAll = selectedAll || item.selected;
+      parent.Child.forEach((item) => {
+        if (item.selected === 1) {
+          selectedLength++;
+        }
       });
 
-        this.$set(ggp_item, "selected", selectedAll);
+      if (selectedLength === parent.Child.length) {
+        selected = 1;
+      } else if (selectedLength > 0) {
+        selected = 2;
       }
 
-      this.$emit("change", this.data);
+      this.$set(parent, "selected", selected);
     },
-    traverse(obj, cb) {
-      cb(obj);
+    uppermissions() {
+      let permissions = [];
 
-      if (obj.Child && obj.Child.length) {
-        obj.Child.forEach((item) => {
-          this.traverse(item, cb);
+      this.permissionsList.forEach((item) => {
+        this.traverse(item, (item) => {
+          if (item.selected !== 0) {
+            permissions.push({
+              menu_name: item.menu_name,
+              menu_id: item.menu_id,
             });
           }
+        });
+      });
+
+      this.initFlag = false;
+
+      // this.$emit("change-list", this.permissionsList);
+      this.$emit("change-permissions", this.permissions);
     },
   },
+  mounted() {
+    this.init();
+  },
 };
 </script>
 
@@ -229,7 +286,4 @@ export default {
   width: 100%;
   justify-content: flex-start;
 }
-.apass_checkbox {
-  line-height: 40px;
-}
 </style>

src/pages/authority/role/addroles.vue

@@ -57,7 +57,6 @@
         <menu-permission
           v-model="permission_arr"
           :list="permissionData"
-          @change="changePermissions"
         ></menu-permission>
       </div>
     </div>
@@ -160,7 +159,7 @@ export default {
           .then((result) => {
             console.log(result);
             this.service_node = result[1].data.data;
-            this.permission_arr = result[1].data.data
+            this.permission_arr = result[1].data.data;
             // this.deal_tree_data(result[0].data.data, result[1].data.data);
             this.permissionData = result[0].data.data;
           })
@@ -304,10 +303,6 @@ export default {
         }
       });
     },
-    changePermissions(values) {
-      console.log(values);
-      console.log(this.permissionData);
-    },
     get_now_user() {
       this.$api.user.getNowUser().then(({ data }) => {
         let baseinfo = {