菜单权限组件

src/assets/css/index.css

@@ -535,40 +535,40 @@ width: 620px!important;
   background-color: #e1e4fb;
   border-color: #e1e4fb;
 }
-.appas_table .el-table th > .cell {
+.apass_table .el-table th > .cell {
   color: #1a2236;
 }
-.appas_table .el-table td,
-.appas_table .el-table th.is-leaf {
+.apass_table .el-table td,
+.apass_table .el-table th.is-leaf {
   border: none !important;
   line-height: 23px;
 }
-.appas_table .el-table::before {
+.apass_table .el-table::before {
   display: none;
 }
-.appas_table .el-table {
+.apass_table .el-table {
   width: 100%;
 }
-.appas_table .el-table__row:nth-child(odd) td {
+.apass_table .el-table__row:nth-child(odd) td {
   background-color: #f8f9fd;
 }
-.appas_table .row_action {
+.apass_table .row_action {
     user-select: none;
 }
-.appas_table .row_action .btn {
+.apass_table .row_action .btn {
   font-size: 14px;
   font-weight: bold;
   color: #0f2683;
   cursor: pointer;
 }
-.appas_table .row_action .btn.warn {
+.apass_table .row_action .btn.warn {
   color: #830f53;
 }
-.appas_table .row_action .btn.disabled {
+.apass_table .row_action .btn.disabled {
   color: #dde4ff;
   cursor: not-allowed;
 }
-.appas_table .row_action .interval_line {
+.apass_table .row_action .interval_line {
     font-size: 14px;
     color: #dde4ff;
     margin: 0 20px;

src/components/apass-dialog.vue

@@ -10,7 +10,7 @@
         <span v-text="title || '提示'"></span>
       </h3>
 
-      <div class="dialog_content appas_table" v-if="$slots.content">
+      <div class="dialog_content apass_table" v-if="$slots.content">
         <slot name="content"></slot>
       </div>
       <p class="dialog_msg" v-html="msg" v-else></p>

src/components/apass-list.vue

@@ -44,10 +44,10 @@
 
       <div class="cross_line" v-if="!hideHeader"></div>
 
-      <div class="list-container appas_table" v-if="$slots.list">
+      <div class="list-container" v-if="$slots.list">
         <slot name="list"></slot>
       </div>
-      <div class="list-container appas_table" v-else>
+      <div class="list-container" v-else>
         <list-table
           :header="listHeader"
           :data="listData"

src/components/apass-table.vue

 <template>
-  <div class="appas_table">
-    <el-table slot="list" :border="false" :data="data">
+  <div class="apass_table">
+    <el-table :data="data">
       <el-table-column :width="paddingLeft - 10"></el-table-column>
       <el-table-column
         v-for="(item, index) in header"

src/components/menu-permission.vue

+<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)"
+            >
+              {{ 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"
+          >
+            <el-checkbox
+              v-for="(item, index) in scope.row.children"
+              :label="item.value"
+              :key="'permission_' + index"
+            >
+              {{ item.name }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: "permissions",
+    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;
+
+        datas.forEach((v) => {
+          selectAllFlag = selectAllFlag && values.indexOf(v.value) > -1;
+        });
+
+        this.selectAllInfo[item.prop] = selectAllFlag;
+      });
+    },
+    selectAll(prop) {
+      let newValues = { ...this.permissions };
+
+      this.selectAllInfo[prop] = !this.selectAllInfo[prop];
+
+      if (this.selectAllInfo[prop]) {
+        newValues[prop] = this.data
+          .find((item) => item.prop === prop)
+          .children.map((item) => item.value);
+      } else {
+        newValues[prop] = [];
+      }
+      this.$emit("change-permissions", newValues);
+    },
+  },
+  mounted() {
+    this.upSelectAllInfo();
+  },
+};
+</script>
+
+<style scoped>
+.menu_permission {
+  margin-top: 20px;
+}
+</style>
+
+<style>
+.menu_permission .el-table__header-wrapper {
+  display: none;
+}
+.permission_list .el-checkbox {
+  color: #58617a;
+  line-height: 40px;
+}
+.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;
+}
+.permission_list .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #58617a;
+}
+.menu_permission .el-table .cell {
+  padding: 0 50px !important;
+}
+.menu_permission .el-table--border {
+  border: 1px solid #f4f7fc;
+  border-radius: 6px;
+}
+</style>

src/pages/authority/users.vue

@@ -17,63 +17,67 @@
           权限审批
         </el-button>
       </template>
-      <el-table slot="list" :border="false" :data="listData">
-        <el-table-column label="" width="40"></el-table-column>
-        <el-table-column label="账号" width="160">
-          <template slot-scope="scope">
-            <span v-text="scope.row.account"></span>
-          </template>
-        </el-table-column>
-        <el-table-column label="业务系统名称">
-          <template slot-scope="scope">
-            <span v-text="scope.row.name"></span>
-          </template>
-        </el-table-column>
-        <el-table-column label="用户类型" align="center" width="160">
-          <template slot-scope="scope">
-            <span v-text="scope.row.role"></span>
-          </template>
-        </el-table-column>
-        <el-table-column label="所属组织">
-          <template slot-scope="scope">
-            <span v-text="scope.row.organization"></span>
-          </template>
-        </el-table-column>
-        <el-table-column label="账号状态" align="center" width="240">
-          <template slot-scope="scope">
-            <span v-text="scope.row.state === 0 ? '禁用' : '启用'"></span>
-          </template>
-        </el-table-column>
-        <el-table-column label="上次操作修改时间" align="center" width="200">
-          <template slot-scope="scope">
-            <span v-text="scope.row.update_time"></span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="300">
-          <template slot-scope="scope">
-            <div class="row_action">
-              <a
-                class="btn"
-                @click="$router.push(`/authority/users/detail/${scope.row.id}`)"
-              >
-                详情
-              </a>
-              <span class="interval_line">|</span>
-              <a class="btn" @click="setRole(scope.row)">
-                分配角色
-              </a>
-              <span class="interval_line">|</span>
-              <a
-                class="btn"
-                :class="{ warn: scope.row.state === 1 }"
-                @click="setState(scope.row)"
-              >
-                {{ scope.row.state === 0 ? "启用" : "禁用" }}
-              </a>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+      <div class="apass_table" slot="list">
+        <el-table :border="false" :data="listData">
+          <el-table-column label="" width="40"></el-table-column>
+          <el-table-column label="账号" width="160">
+            <template slot-scope="scope">
+              <span v-text="scope.row.account"></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="业务系统名称">
+            <template slot-scope="scope">
+              <span v-text="scope.row.name"></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="用户类型" align="center" width="160">
+            <template slot-scope="scope">
+              <span v-text="scope.row.role"></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="所属组织">
+            <template slot-scope="scope">
+              <span v-text="scope.row.organization"></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="账号状态" align="center" width="240">
+            <template slot-scope="scope">
+              <span v-text="scope.row.state === 0 ? '禁用' : '启用'"></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="上次操作修改时间" align="center" width="200">
+            <template slot-scope="scope">
+              <span v-text="scope.row.update_time"></span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="300">
+            <template slot-scope="scope">
+              <div class="row_action">
+                <a
+                  class="btn"
+                  @click="
+                    $router.push(`/authority/users/detail/${scope.row.id}`)
+                  "
+                >
+                  详情
+                </a>
+                <span class="interval_line">|</span>
+                <a class="btn" @click="setRole(scope.row)">
+                  分配角色
+                </a>
+                <span class="interval_line">|</span>
+                <a
+                  class="btn"
+                  :class="{ warn: scope.row.state === 1 }"
+                  @click="setState(scope.row)"
+                >
+                  {{ scope.row.state === 0 ? "启用" : "禁用" }}
+                </a>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </apass-list>
 
     <apass-dialog