From 38e344e41c5d8b13ae278a9a0acb5444828f9efc Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Mon, 8 Jun 2020 15:35:18 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=9D=83=E9=99=90=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=E7=BB=84=E4=BB=B6=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/index.css           |   9 +
 src/components/menu-permission.vue | 282 ++++++++++++++++++++---------
 src/pages/authority/addroles.vue   | 231 +++++++++++++++--------
 3 files changed, 356 insertions(+), 166 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index aebd520..977d6ce 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -582,4 +582,13 @@ width: 620px!important;
     font-size: 14px;
     color: #dde4ff;
     margin: 0 20px;
+}
+
+.apass_checkbox .el-checkbox__input.is-checked .el-checkbox__inner,
+.apass_checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #515fe7;
+}
+.apass_checkbox .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #58617a;
 }
\ No newline at end of file
diff --git a/src/components/menu-permission.vue b/src/components/menu-permission.vue
index d1e4bd8..a2e1b22 100644
--- a/src/components/menu-permission.vue
+++ b/src/components/menu-permission.vue
@@ -1,36 +1,126 @@
 <template>
   <div class="menu_permission">
-    <el-table border :data="data">
-      <el-table-column label="名称" width="214">
-        <template slot-scope="scope">
-          <div class="permission_list">
-            <el-checkbox
-              :value="selectAllInfo[scope.row.prop]"
-              @change="selectAll(scope.row.prop)"
+    <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)"
+          >
+            <span
+              class="el-checkbox__input"
+              :class="{ 'is-checked': first_item.selected }"
             >
-              {{ scope.row.name }}
-            </el-checkbox>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="选项">
-        <template slot-scope="scope">
-          <el-checkbox-group
-            v-model="permissions[scope.row.prop]"
-            class="permission_list"
-            @change="selectPermission"
+              <span class="el-checkbox__inner"></span>
+            </span>
+            <span class="el-checkbox__label" v-text="first_item.name"></span>
+          </label>
+        </div>
+        <ul
+          class="floor_list second"
+          v-if="first_item.children && first_item.children.length"
+        >
+          <li
+            v-for="(second_item, second_index) in first_item.children"
+            :key="'p_' + first_index + '_' + second_index"
           >
-            <el-checkbox
-              v-for="(item, index) in scope.row.children"
-              :label="item.value"
-              :key="'permission_' + 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.name"
+                ></span>
+              </label>
+            </div>
+            <ul
+              class="floor_list third"
+              v-if="second_item.children && second_item.children.length"
             >
-              {{ item.name }}
-            </el-checkbox>
-          </el-checkbox-group>
-        </template>
-      </el-table-column>
-    </el-table>
+              <li
+                v-for="(third_item, third_index) in second_item.children"
+                :key="
+                  '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.name"
+                    ></span>
+                  </label>
+                </div>
+                <ul
+                  class="floor_list fourth"
+                  v-if="third_item.children && third_item.children.length"
+                >
+                  <li>
+                    <div class="floor_item fourth">
+                      <label
+                        v-for="(fourth_item,
+                        fourth_index) in third_item.children"
+                        :key="
+                          'p_' +
+                            first_index +
+                            '_' +
+                            second_index +
+                            '_' +
+                            third_index +
+                            '_' +
+                            fourth_index
+                        "
+                        class="el-checkbox apass_checkbox"
+                        :class="{ 'is-checked': fourth_item.selected }"
+                        @click="
+                          selectedItem(
+                            fourth_item,
+                            third_item,
+                            second_item,
+                            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.name"
+                        ></span>
+                      </label>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -41,86 +131,104 @@ export default {
     event: "change-permissions",
   },
   props: {
-    permissions: {
-      type: Object,
-      default: {},
-    },
     data: {
       type: Array,
       default: () => [],
     },
   },
-  data: () => ({
-    selectAllInfo: {},
-  }),
-  watch: {
-    permissions: {
-      handler() {
-        this.upSelectAllInfo();
-      },
-      deep: true,
-    },
-  },
   methods: {
-    selectPermission(values) {
-      this.$emit("change-permissions", this.permissions);
-    },
-    upSelectAllInfo() {
-      this.data.forEach((item) => {
-        let values = this.permissions[item.prop];
-        let datas = this.data.find((v) => v.prop === item.prop).children;
-        let selectAllFlag = true;
+    selectedItem(
+      selected_item,
+      p_item = null, // 父元素
+      gp_item = null, // 祖父元素
+      ggp_item = null // 曾祖父元素
+    ) {
+      let selected = !(selected_item.selected || false);
+
+      this.traverse(selected_item, (v) => {
+        this.$set(v, "selected", selected);
+      });
+
+      if (p_item) {
+        let selectedAll = true;
 
-        datas.forEach((v) => {
-          selectAllFlag = selectAllFlag && values.indexOf(v.value) > -1;
+        p_item.children.forEach((item) => {
+          selectedAll = selectedAll && item.selected;
         });
 
-        this.selectAllInfo[item.prop] = selectAllFlag;
-      });
-    },
-    selectAll(prop) {
-      let newValues = { ...this.permissions };
+        this.$set(p_item, "selected", selectedAll);
+      }
 
-      this.selectAllInfo[prop] = !this.selectAllInfo[prop];
+      if (gp_item) {
+        let selectedAll = true;
 
-      if (this.selectAllInfo[prop]) {
-        newValues[prop] = this.data
-          .find((item) => item.prop === prop)
-          .children.map((item) => item.value);
-      } else {
-        newValues[prop] = [];
+        gp_item.children.forEach((item) => {
+          selectedAll = selectedAll && item.selected;
+        });
+
+        this.$set(gp_item, "selected", selectedAll);
+      }
+
+      if (ggp_item) {
+        let selectedAll = true;
+
+        ggp_item.children.forEach((item) => {
+          selectedAll = selectedAll && item.selected;
+        });
+
+        this.$set(ggp_item, "selected", selectedAll);
+      }
+
+      this.$emit("change", this.data);
+    },
+    traverse(obj, cb) {
+      cb(obj);
+
+      if (obj.children && obj.children.length) {
+        obj.children.forEach((item) => {
+          this.traverse(item, cb);
+        });
       }
-      this.$emit("change-permissions", newValues);
     },
   },
-  mounted() {
-    this.upSelectAllInfo();
-  },
+  mounted() {},
 };
 </script>
 
-
-<style>
-.menu_permission .el-table__header-wrapper {
-  display: none;
+<style scoped>
+.floor_list > li {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
 }
-.permission_list .el-checkbox {
-  color: #58617a;
-  line-height: 40px;
+.floor_list.first > li {
+  border: 2px solid #f4f7fc;
+  border-radius: 7px;
+  overflow: hidden;
 }
-.permission_list .el-checkbox__input.is-checked .el-checkbox__inner,
-.permission_list .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  background-color: #626de9;
-  border-color: #515fe7;
+.floor_list:not(.first) {
+  flex-grow: 1;
 }
-.permission_list .el-checkbox__input.is-checked + .el-checkbox__label {
-  color: #58617a;
+.floor_list:not(.first) > li {
+  border-left: 2px solid #f4f7fc;
+  border-top: 2px solid #f4f7fc;
+  margin: -2px 0 0 -2px;
 }
-.menu_permission .el-table .cell {
-  padding: 0 50px !important;
+.floor_list.first > li:not(:first-child) {
+  margin-top: 20px;
 }
-.menu_permission .el-table--border {
-  border: 1px solid #f4f7fc;
-  border-radius: 6px;
+.floor_item {
+  min-width: 230px;
+  padding: 10px 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.floor_item.fourth {
+  width: 100%;
+  justify-content: flex-start;
+}
+.apass_checkbox {
+  line-height: 40px;
 }
 </style>
diff --git a/src/pages/authority/addroles.vue b/src/pages/authority/addroles.vue
index 5f9eb01..bf42119 100644
--- a/src/pages/authority/addroles.vue
+++ b/src/pages/authority/addroles.vue
@@ -51,9 +51,8 @@
         style="margin-bottom:100px;margin-top:20px;"
       >
         <menu-permission
-          v-model="permission"
           :data="permissionData"
-          @change-permissions="changePermissions"
+          @change="changePermissions"
         ></menu-permission>
       </div>
     </div>
@@ -77,126 +76,200 @@ export default {
         date: "",
       },
       now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员
-      permission: {
-        value1: [11, 13],
-        value2: [],
-        value3: [31, 32, 33],
-        value4: [],
-        value5: [],
-      },
       permissionData: [
         {
           name: "权限管理1",
-          prop: "value1",
+          selected: false,
+          value: 1,
           children: [
             {
-              name: "权限管理1",
+              name: "权限管理1-1",
+              selected: false,
               value: 11,
+              children: [
+                {
+                  name: "权限管理1-1-1",
+                  selected: false,
+                  value: 111,
+                  children: [
+                    {
+                      name: "权限管理1-1-1-1",
+                      selected: false,
+                      value: 1111,
+                    },
+                    {
+                      name: "权限管理1-1-1-2",
+                      selected: false,
+                      value: 1112,
+                    },
+                    {
+                      name: "权限管理1-1-1-3",
+                      selected: false,
+                      value: 1113,
+                    },
+                  ],
+                },
+              ],
             },
             {
-              name: "权限管理2",
+              name: "权限管理1-2",
+              selected: false,
               value: 12,
-            },
-            {
-              name: "权限管理3",
-              value: 13,
+              children: [
+                {
+                  name: "权限管理1-2-1",
+                  selected: false,
+                  value: 121,
+                  children: [
+                    {
+                      name: "权限管理1-2-1-1",
+                      selected: false,
+                      value: 1211,
+                    },
+                    {
+                      name: "权限管理1-2-1-2",
+                      selected: false,
+                      value: 1212,
+                    },
+                    {
+                      name: "权限管理1-2-1-3",
+                      selected: false,
+                      value: 1213,
+                    },
+                  ],
+                },
+              ],
             },
           ],
         },
         {
           name: "权限管理2",
-          prop: "value2",
+          selected: false,
+          value: 2,
           children: [
             {
-              name: "权限管理1",
+              name: "权限管理2-1",
+              selected: false,
               value: 21,
+              children: [
+                {
+                  name: "权限管理2-1-1",
+                  selected: false,
+                  value: 211,
+                  children: [
+                    {
+                      name: "权限管理2-1-1-1",
+                      selected: false,
+                      value: 2111,
+                    },
+                    {
+                      name: "权限管理2-1-1-2",
+                      selected: false,
+                      value: 2112,
+                    },
+                    {
+                      name: "权限管理2-1-1-3",
+                      selected: false,
+                      value: 2113,
+                    },
+                  ],
+                },
+              ],
             },
             {
-              name: "权限管理2",
+              name: "权限管理2-2",
+              selected: false,
               value: 22,
-            },
-            {
-              name: "权限管理3",
-              value: 23,
-            },
-            {
-              name: "权限管理4",
-              value: 24,
-            },
-            {
-              name: "权限管理5",
-              value: 25,
-            },
-            {
-              name: "权限管理6",
-              value: 26,
-            },
-            {
-              name: "权限管理7",
-              value: 27,
-            },
-            {
-              name: "权限管理8",
-              value: 28,
-            },
-            {
-              name: "权限管理9",
-              value: 29,
+              children: [
+                {
+                  name: "权限管理2-2-1",
+                  selected: false,
+                  value: 221,
+                  children: [
+                    {
+                      name: "权限管理2-2-1-1",
+                      selected: false,
+                      value: 2211,
+                    },
+                    {
+                      name: "权限管理2-2-1-2",
+                      selected: false,
+                      value: 2212,
+                    },
+                    {
+                      name: "权限管理2-2-1-3",
+                      selected: false,
+                      value: 2213,
+                    },
+                  ],
+                },
+              ],
             },
           ],
         },
         {
           name: "权限管理3",
-          prop: "value3",
+          selected: false,
+          value: 3,
           children: [
             {
-              name: "权限管理1",
+              name: "权限管理3-1",
+              selected: false,
               value: 31,
+              children: [
+                {
+                  name: "权限管理3-1-1",
+                  selected: false,
+                  value: 311,
+                  children: [
+                    {
+                      name: "权限管理3-1-1-1",
+                      selected: false,
+                      value: 3111,
+                    },
+                    {
+                      name: "权限管理3-1-1-2",
+                      selected: false,
+                      value: 3112,
+                    },
+                    {
+                      name: "权限管理3-1-1-3",
+                      selected: false,
+                      value: 3113,
+                    },
+                  ],
+                },
+              ],
             },
             {
-              name: "权限管理2",
+              name: "权限管理3-2",
+              selected: false,
               value: 32,
-            },
-            {
-              name: "权限管理3",
-              value: 33,
+              children: [
+                {
+                  name: "权限管理3-2-1",
+                  selected: false,
+                  value: 321,
+                },
+              ],
             },
           ],
         },
         {
           name: "权限管理4",
-          prop: "value4",
+          selected: false,
+          value: 4,
           children: [
             {
-              name: "权限管理1",
+              name: "权限管理4-1",
+              selected: false,
               value: 41,
             },
             {
-              name: "权限管理2",
+              name: "权限管理4-2",
+              selected: false,
               value: 42,
             },
-            {
-              name: "权限管理4",
-              value: 43,
-            },
-          ],
-        },
-        {
-          name: "权限管理5",
-          prop: "value5",
-          children: [
-            {
-              name: "权限管理1",
-              value: 51,
-            },
-            {
-              name: "权限管理2",
-              value: 52,
-            },
-            {
-              name: "权限管理5",
-              value: 53,
-            },
           ],
         },
       ],
-- 
2.26.0