菜单配置

@@ -152,7 +152,7 @@ export default {
                         this.getUserList(scope.row);
                       }}
                     >
-                      人员
+                      配置
                     </el-button>
                     </span>
                     </el-tooltip>

 <template>
-  <Dialog
-    :title="title"
-    class="tableClass"
-    :show.sync="visible"
-    :width="'715px'"
-    @close="close()"
+  <el-dialog
+    :close-on-click-modal="false"
+    top="0"
+    @click="close()"
+    custom-class="dialogBox editDialogBox mainCenter"
+    :visible.sync="visible"
+    width="85%"
   >
-    <template slot="content">
+    <div slot="title" class="dialog_title" ref="dialogTitle">
+      {{ title || "标题" }}
+    </div>
+    <div class="editDialogBox-box">
+      <el-tabs v-model="activeName" type="card">
+        <el-tab-pane label="人员配置" name="first"></el-tab-pane>
+        <el-tab-pane label="菜单配置" name="second"></el-tab-pane>
+      </el-tabs>
+      <!-- <div class="editDialogBox-box"  v-if="activeName == 'first'"> -->
       <lb-table
+        v-if="activeName == 'first'"
         ref="multipleTable"
         :pagination="false"
-        :column="tableData.column"
-        :data="tableData.data"
+        :column="usertableData.column"
+        :data="usertableData.data"
         @selection-change="handleSelectionChange"
+        @row-click="handleClickTableRow"
+      >
         >
       </lb-table>
-    </template>
+      <!-- </div> -->
+      <!-- <div class="editDialogBox-box"  v-else="activeName !== 'first'"> -->
+       <lb-table
+        v-else="activeName !== 'first'"
+        :pagination="false"
+        :column="menutableData.columns"
+        :data="menutableData"
+        row-key="id"
+        default-expand-all
+        @selection-change="handleSelectionChanges"
+        @row-click="handleClickTableRows"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+      </lb-table>
+      <!-- </div> -->
+    </div>
     <template slot="footer">
       <el-button type="primary" class="save" @click="handleSaveMember()"
         >保存</el-button
       >
       <el-button class="cancel-button" @click="close()">取消</el-button>
     </template>
-  </Dialog>
+  </el-dialog>
 </template>
 
 <script>
-import Dialog from "@/components/Dialog/";
 import { updateUser } from "@/api/quanxianmanagement";
 export default {
   name: "",
-  components: { Dialog },
   data() {
     return {
       title: "人员配置",
       visible: false,
-      hasSelectList: [
-        // {
-        //   name: "管理员",
-        //   loginName: "admin1",
-        //   departmentName: "研发部",
-        //   jobLevel: null,
-        // },
-        // {
-        //   name: "测试账号",
-        //   loginName: "admin2",
-        //   departmentName: "研发部",
-        //   jobLevel: null,
-        // },
-      ], //已经选择的id组成的数组
-      tableData: {
+       menutableData: {
         column: [
           {
             type: "selection",
           },
           {
             prop: "name",
-            label: "姓名",
+            label: "菜单名称",
           },
+        ],
+      },
+       usertableData: {
+        column: [
           {
-            prop: "loginName",
-            label: "用户名",
+            type: "selection",
           },
           {
-            prop: "departmentName",
-            label: "部门",
+            prop: "name",
+            label: "姓名",
           },
           {
-            prop: "jobLevel",
-            label: "职务",
+            prop: "loginName",
+            label: "用户名",
           },
         ],
-        data: [],
+      },
       // 角色id
       roleId: "",
-      },
+      activeName: "first",
       multipleSelection: [],
     };
   },
@@ -83,26 +97,106 @@ export default {
   created() {},
   mounted() {},
   methods: {
-    // 人员配置根据selectStatus字段确定已选人员
+
+    // 人员配置点击行勾选数据
+    handleClickTableRow(row, event) {
+      this.checkNum = 0;
+      this.isCheck = false;
+      if (event.label == "操作") {
+        return;
+      } else {
+        if (row.status == "0") {
+          return;
+        } else {
+          if (this.multipleSelection.length > 0) {
+            if (
+              JSON.stringify(this.multipleSelection).indexOf(
+                JSON.stringify(row)
+              ) == -1
+            ) {
+              this.multipleSelection.push(row);
+              this.$refs.multipleTable.toggleRowSelection(row, true);
+            } else {
+              this.multipleSelection.map((item, index) => {
+                if (item.id == row.id) {
+                  this.multipleSelection.splice(index, 1);
+                  this.$refs.multipleTable.toggleRowSelection(row, false);
+                }
+              });
+            }
+          } else {
+            this.multipleSelection.push(row);
+            this.$refs.multipleTable.toggleRowSelection(row, true);
+          }
+        }
+      }
+      if (this.multipleSelection.length > 0) {
+        this.checkNum = this.multipleSelection.length;
+        this.isCheck = true;
+      } else {
+        this.isCheck = false;
+      }
+    },
+      // 菜单配置点击行勾选数据
+    handleClickTableRow(row, event) {
+      this.checkNum = 0;
+      this.isCheck = false;
+      if (event.label == "操作") {
+        return;
+      } else {
+        if (row.status == "0") {
+          return;
+        } else {
+          if (this.multipleSelection.length > 0) {
+            if (
+              JSON.stringify(this.multipleSelection).indexOf(
+                JSON.stringify(row)
+              ) == -1
+            ) {
+              this.multipleSelection.push(row);
+              this.$refs.multipleTable.toggleRowSelection(row, true);
+            } else {
+              this.multipleSelection.map((item, index) => {
+                if (item.id == row.id) {
+                  this.multipleSelection.splice(index, 1);
+                  this.$refs.multipleTable.toggleRowSelection(row, false);
+                }
+              });
+            }
+          } else {
+            this.multipleSelection.push(row);
+            this.$refs.multipleTable.toggleRowSelection(row, true);
+          }
+        }
+      }
+      if (this.multipleSelection.length > 0) {
+        this.checkNum = this.multipleSelection.length;
+        this.isCheck = true;
+      } else {
+        this.isCheck = false;
+      }
+    },
+    // 获取人员列表做筛选
     adds(a, rid) {
       this.roleId = rid;
       this.visible = true;
-      this.tableData.data = a;
-      this.tableData.data.forEach((item, index) => {
+      this.usertableData.data = a;
+      this.usertableData.data.forEach((item, index) => {
         if (item.selectStatus === 0) {
           this.$nextTick(() => {
             this.$refs.multipleTable.toggleRowSelection(
-              this.tableData.data[index],
+              this.usertableData.data[index],
               true
             );
           });
         }
       });
     },
+    // 关闭事件
     close() {
       this.visible = false;
     },
-    // 保存
+    // 保存事件
     handleSaveMember() {
       const idList = this.multipleSelection.map((item) => {
         return item.id;
@@ -116,18 +210,229 @@ export default {
         } else this.$message.error({ message: res.message, showClose: true });
       });
     },
+    // 勾选人员事件
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
+    // 勾选菜单事件
+    handleSelectionChanges(val) {
+      this.multipleSelection = val;
+    },
   },
 };
 </script>
 <style scoped lang="scss">
-/deep/.el-dialog__header {
+@import "~@/styles/mixin.scss";
+@import "~@/styles/dialogBox.scss";
+
+.editForm {
+  /deep/.el-textarea__inner {
+    border: 1px solid #224c7c !important;
+    margin: 0 0 10px 0 !important;
+    width: 100% !important;
+    color: #dadde3 !important;
+    background: transparent !important;
+  }
+
+  /deep/.el-input__inner {
+    border: 1px solid #224c7c !important;
+    margin: 0 !important;
+    width: 100% !important;
+    color: #dadde3 !important;
+    background: transparent !important;
+  }
+}
+
+/deep/.el-dialog__body {
+  display: flex;
+  flex-direction: column;
+}
+
+/deep/ .el-tabs {
+  color: #cef8ff;
+}
+
+.sjmx {
+  /deep/.el-tabs__item {
+    height: 50px;
+    padding-top: 6px;
+  }
+}
+
+/deep/.el-tabs__item {
+  color: #cef8ff !important;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background: url("~@/image/tabitem.png") no-repeat;
+  background-size: 100% 100%;
+  border: none !important;
+}
+
+.obligee-item-name {
+  background: #05275b;
+  color: #ffffff;
+  background: url("~@/image/itembg.png") no-repeat;
+  background-size: 100% 100%;
+}
+
+/deep/.el-tabs__nav-scroll {
+  background: none;
+}
+
+/deep/.el-tabs__nav {
+  display: flex;
+  border: none !important;
+}
+
+/deep/.el-tabs__item.is-top {
+  border: 1px solid #dfe4ed;
+  border-top: 1px solid #dfe4ed;
+  border-bottom: 1px solid transparent;
+}
+
+/deep/.el-tabs__header {
+  border: none;
+  margin-bottom: 0;
+}
+
+/deep/.el-tabs__item.is-top:not(:last-child) {
+  margin-right: 5px;
+}
+
+/deep/.el-tabs__item.is-top {
+  background-color: none !important;
+}
+
+/deep/.el-tabs__item.is-active {
+  background: url("~@/image/tabitemse.png") no-repeat;
+  background-size: 100% 100%;
+}
+
+.success-images {
+  width: 30px;
+  height: 30px;
+  position: relative;
+  top: 10px;
+  right: 3px;
+}
+
+.tab-pane-item {
+  line-height: 20px;
+  color: #02d9fd;
+
+  p {
     text-align: center;
+  }
+}
+
+.edit-content {
+  height: 450px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 1px;
   margin-bottom: 10px;
-  .el-dialog__title {
+  border-top: none;
+}
+
+/deep/.editDialogBox {
+  border-radius: 8px;
+  overflow: hidden;
+  min-width: 1228px;
+  height: 825px !important;
+
+  .dialog-from {
+    padding: 13px;
+    border-radius: 2px;
+    box-sizing: border-box;
+
+    .el-row {
+      display: flex;
+      flex-wrap: nowrap;
+    }
+
+    .el-col {
+      line-height: 18px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 3px;
+      color: #b5d6dc;
+      border-radius: 2px;
+      border: 1px solid #224c7c;
+      margin: 5px;
+
+      span {
+        display: inline-block;
+        padding: 3px;
+        border-radius: 3px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-align: left;
+        color: #02d9fd;
+      }
+
+      p {
+        flex: 1;
+        width: 100%;
+        padding-left: 5px;
+        line-height: 20px;
+        color: #c0c4cc;
+        cursor: not-allowed;
+        white-space: nowrap;
+        margin-right: 5px;
+        text-align: right;
+      }
+    }
+  }
+
+  .dialog_title {
+    display: flex;
+    position: relative;
+    font-size: 24px;
+    top: -11px;
+    width: 38%;
+    height: 40px;
+    margin-left: 28px;
+    justify-content: center;
+  }
+
+  .el-dialog__header {
+    display: flex;
+    margin-bottom: 15px;
+  }
+
+  .dialog_footer {
+    flex-direction: column;
+
+    .dialog_button {
+      margin-top: 8px;
+    }
+  }
+
+  .divider {
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+  }
+}
+
+.el-dialog__wrapper {
+  overflow: hidden;
+}
+/deep/.el-table {
+  background: none;
+  th.el-table__cell {
+    background-color: #073781;
+    color: #02d9fd;
+  }
+  tr {
+    background: none;
+
+    td {
       color: white;
     }
+  }
 }
+
+// #08346F !important;
 </style>