From acb3114d76e9cc9cc5ee226c69e38a910675e4e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=BF=94=E5=AE=87-=E6=97=85=E7=AE=A1=E5=AE=B6?=
 <153298343@qq.com>
Date: Tue, 1 Nov 2022 18:50:12 +0800
Subject: [PATCH] up

---
 src/views/system/permission.vue | 617 ++++++++++++++++----------------
 1 file changed, 305 insertions(+), 312 deletions(-)

diff --git a/src/views/system/permission.vue b/src/views/system/permission.vue
index 09180d3..fe4e3dc 100644
--- a/src/views/system/permission.vue
+++ b/src/views/system/permission.vue
@@ -1,313 +1,306 @@
-<template>
-  <div class="container">
-    <!-- 查询配置 -->
-    <div>
-      <div ref="lxHeader">
-        <LxHeader icon="md-apps" text="权限管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
-          <div slot="content"></div>
-          <slot>
-          </slot>
-        </LxHeader>
-      </div>
-
-
-      <el-row :gutter="20">
-        <el-col :span="3">
-          <Card class="box-card">
-            <div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
-              <span>角色列表</span>
-            </div>
-            <div style="overflow: auto;" :style="{height:height+'px'}">
-              <el-scrollbar style="flex: 1">
-                <el-tabs tab-position="left" v-model="activeRole" @tab-click="roleChange">
-                  <el-tab-pane :label="item.name" :name="item.rowid" v-for="(item,index) in rolelist">
-                  </el-tab-pane>
-                </el-tabs>
-              </el-scrollbar>
-            </div>
-          </Card>
-        </el-col>
-        <el-col :span="21">
-          <Card class="box-card">
-            <div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
-              <span>菜单列表</span>
-              <Button style="float: right;" type="primary" @click="savepermission">保存</Button>
-            </div>
-
-            <div style="overflow: auto;" :style="{height:height+'px'}">
-              <el-scrollbar style="flex: 1">
-                <el-tree ref="tree" :data="tree" show-checkbox style="padding: 15px" node-key="id" default-expand-all
-                  :expand-on-click-node="false">
-                  <div class="action-group" slot-scope="{ node, data }">
-                    <div class="action-text" :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }">
-                      {{ data.name }}
-                    </div>
-                    <div class="action-item">
-                      <el-checkbox v-for="(item, index) in data.auth_node_tags_array" :key="index"
-                        v-model="item.checked" @change="() => {}">
-                        {{ item.name }}
-                      </el-checkbox>
-                    </div>
-                  </div>
-                </el-tree>
-              </el-scrollbar>
-            </div>
-          </Card>
-        </el-col>
-      </el-row>
-    </div>
-  </div>
-</template>
-
-<script>
-  import LxHeader from "@/components/LxHeader/index.vue";
-  import {
-    list
-  } from "../../api/system/role.js";
-  import {
-    listmenu
-  } from "../../api/system/menu.js";
-  import {
-    setPermissions
-  } from "../../api/system/permission.js"
-  export default {
-    components: {
-      LxHeader
-    },
-    created() {
-
-    },
-    mounted() {},
-    data() {
-      return {
-        activeRole: "",
-        rolelist: [],
-        selectIndex: -1,
-        checked: false,
-        data: [],
-        tree: [],
-        height: 0
-
-      }
-    },
-    created() {
-      var that = this;
-      this.initLoad();
-      this.load(function() {
-        that.loadrole();
-      });
-    },
-    methods: {
-      initLoad() {
-        var that = this;
-        var clientHeight = document.documentElement.clientHeight
-        var lxHeader_height = 67; //查询 头部
-        var card_Height = 109; //分页的高度
-        var topHeight = 50; //页面 头部
-        let height = clientHeight - lxHeader_height - topHeight - card_Height;
-        that.height = height;
-      },
-      loadrole() {
-        var that = this;
-        list().then(response => {
-          let cur = 0;
-          that.rolelist = response;
-
-          for (var mod of response) {
-            mod.rowid = mod.id.toString();
-            if (cur == 0) {
-              that.activeRole = mod.rowid;
-              that.loadPermisstions(0, that.activeRole);
-            }
-            cur++;
-          }
-
-        }).catch(error => {
-          //reject(error)
-        })
-      },
-      load(callback) {
-        var that = this;
-        listmenu().then(response => {
-          this.tree = response;
-
-          this.tree.map((tree, index1) => {
-
-            let children = tree.children
-            children.map((menu, index3) => {
-
-              menu.auth_node_tags_array.map((m, index4) => {
-                m.checked = false;
-                that.$forceUpdate();
-
-              })
-            })
-          })
-
-          callback();
-        }).catch(error => {
-          //reject(error)
-        })
-      },
-      roleChange(tab, event) {
-        this.loadPermisstions(parseInt(tab.index), tab.name)
-      },
-      loadPermisstions(index, name) {
-        let select = this.rolelist[index].permissions;
-        this.$refs.tree.setCheckedKeys([]);
-        this.activeRole = name;
-
-
-        let that = this;
-        this.tree.map((tree, index1) => {
-          let children = tree.children;
-          select.map((item, index2) => {
-            let selectMenu = children.filter(m => {
-              return m.id == item.id
-            });
-
-            selectMenu.map((menu, index3) => {
-                if (item.has_auth_node_tags.length > 0) {
-                  menu.auth_node_tags_array.map((m, index4) => {
-                    if (item.has_auth_node_tags.indexOf(m.tag) > -1) {
-                      that.$set(that.tree[index1].children[index3].auth_node_tags_array[index4],
-                        "checked", true);
-                    }
-                    else{
-                      that.$set(that.tree[index1].children[index3].auth_node_tags_array[index4],
-                        "checked", false);
-                    }
-                  })
-                } else {
-                  menu.auth_node_tags_array.map(m => {
-                    m.checked = false;
-                  })
-                }
-            })
-          })
-          this.$refs.tree.updateKeyChildren(tree.id, JSON.parse(JSON.stringify(children)))
-        })
-
-
-        this.$refs.tree.setCheckedNodes(select);
-        that.$forceUpdate();
-
-
-      },
-      savepermission() {
-        var checkedList = this.$refs.tree.getCheckedNodes();
-        console.log(checkedList)
-        if (checkedList.length == 0) {
-          this.$message.error("请选择菜单");
-          return false;
-        }
-        let data = {};
-        data.id = this.activeRole;
-        let permission = [];
-        for (var m of checkedList) {
-          let tags = [];
-          var mod = {};
-          mod.permission_id = m.id;
-          m.auth_node_tags_array.map(item => {
-            if (item.checked) {
-              tags.push(item.tag);
-            }
-          });
-          mod.auth_node_tags = tags.join(",");
-          permission.push(mod);
-
-        }
-        data.permission_list = permission;
-        setPermissions(data).then(response => {
-          console.log(response)
-          this.$Message.success('操作成功');
-          that.dialogFormVisible = false;
-          that.load();
-        }).catch(error => {
-          //reject(error)
-        })
-
-      }
-    }
-  };
-</script>
-
-<style lang="less" scoped>
-  .t-tree {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    padding: 12px;
-    background: #eee;
-    /* padding: 100px; */
-  }
-
-  .header {
-    background: #f9f8f8;
-    line-height: 40px;
-    border-bottom: 1px solid #eee;
-    position: relative;
-    font-size: 15px;
-    padding: 0 15px;
-
-    button {
-      position: absolute;
-      right: 15px;
-      top: 4px;
-    }
-  }
-
-  .action-container {
-    border-radius: 4px;
-    flex: 1;
-    margin-left: 15px;
-    background: white;
-    border-bottom: 1px solid #eee;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .role-list {
-    width: 200px;
-    border: 1px solid #eee;
-    border-bottom: 0;
-  }
-
-  .actived {
-    color: #409efe !important;
-    background-color: #f3f7f9;
-  }
-</style>
-<style scoped>
-  .roleitem {
-    margin-bottom: 5px;
-  }
-
-  .action-group {
-    width: 100%;
-    display: flex;
-  }
-
-  .action-text {
-    font-size: 14px;
-    margin-right: 10px;
-  }
-
-  .action-item {
-    flex: 1;
-  }
-
-  .action-item>label {
-    width: 55px;
-    margin-left: 3px;
-  }
-
-  .action-container>>>.el-tree-node {
-    padding: 5px 0;
-  }
-
-  .action-container>>>.el-checkbox__label {
-    padding-left: 5px;
-  }
+<template>
+  <div class="container">
+    <!-- 查询配置 -->
+    <div>
+      <div ref="lxHeader">
+        <LxHeader icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="权限管理">
+          <div slot="content"></div>
+          <slot>
+          </slot>
+        </LxHeader>
+      </div>
+
+
+      <el-row :gutter="20">
+        <el-col :span="3">
+          <Card class="box-card">
+            <div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
+              <span>角色列表</span>
+            </div>
+            <div :style="{height:height+'px'}" style="overflow: auto;">
+              <el-scrollbar style="flex: 1">
+                <el-tabs v-model="activeRole" tab-position="left" @tab-click="roleChange">
+                  <el-tab-pane v-for="(item,index) in rolelist" :key="item.id" :label="item.name" :name="item.rowid">
+                  </el-tab-pane>
+                </el-tabs>
+              </el-scrollbar>
+            </div>
+          </Card>
+        </el-col>
+        <el-col :span="21">
+          <Card class="box-card">
+            <div slot="title" class="clearfix" style="height: 32px;line-height: 32px;">
+              <span>菜单列表</span>
+              <Button style="float: right;" type="primary" @click="savepermission">保存</Button>
+            </div>
+
+            <div :style="{height:height+'px'}" style="overflow: auto;">
+              <el-scrollbar style="flex: 1">
+                <el-tree ref="tree" :data="tree" :expand-on-click-node="false" default-expand-all node-key="id" show-checkbox
+                         style="padding: 15px"
+                >
+                  <div slot-scope="{ node, data }" class="action-group">
+                    <div :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }" class="action-text">
+                      {{ data.name }}
+                    </div>
+                    <div class="action-item">
+                      <el-checkbox v-for="(item, index) in data.auth_node_tags_array" :key="index"
+                                   v-model="item.checked" @change="()=>{}"
+                      >
+                        {{ item.name }}
+                      </el-checkbox>
+                    </div>
+                  </div>
+                </el-tree>
+              </el-scrollbar>
+            </div>
+          </Card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import LxHeader from '@/components/LxHeader/index.vue'
+import {
+  list
+} from '../../api/system/role.js'
+import {
+  listmenu
+} from '../../api/system/menu.js'
+import {
+  setPermissions
+} from '../../api/system/permission.js'
+
+export default {
+  components: {
+    LxHeader
+  },
+  mounted() {
+  },
+  data() {
+    return {
+      activeRole: '',
+      rolelist: [],
+      selectIndex: -1,
+      checked: false,
+      data: [],
+      tree: [],
+      height: 0
+
+    }
+  },
+  created() {
+    var that = this
+    this.initLoad()
+    this.load(function() {
+      that.loadrole()
+    })
+  },
+  methods: {
+    initLoad() {
+      var that = this
+      var clientHeight = document.documentElement.clientHeight
+      var lxHeader_height = 67 //查询 头部
+      var card_Height = 109 //分页的高度
+      var topHeight = 50 //页面 头部
+      let height = clientHeight - lxHeader_height - topHeight - card_Height
+      that.height = height
+    },
+    loadrole() {
+      var that = this
+      list().then(response => {
+        let cur = 0
+        that.rolelist = response
+
+        for (let mod of response) {
+          mod.rowid = mod.id.toString()
+          console.log(mod)
+          if (cur == 0) {
+            that.activeRole = mod.rowid
+            that.loadPermisstions(0, that.activeRole)
+          }
+          cur++
+        }
+
+      }).catch(error => {
+      })
+    },
+    load(callback) {
+      var that = this
+      listmenu().then(response => {
+        this.tree = response
+
+        this.tree.forEach((tree, index1) => {
+
+          let children = tree.children
+          children.forEach((menu, index3) => {
+
+            menu.auth_node_tags_array.map((m, index4) => {
+              m.checked = false
+              that.$forceUpdate()
+
+            })
+          })
+        })
+        callback()
+      }).catch(error => {
+      })
+    },
+    roleChange(tab, event) {
+      this.loadPermisstions(parseInt(tab.index), tab.name)
+    },
+    loadPermisstions(index, name) {
+      let select = this.rolelist[index].permissions
+      this.$refs.tree.setCheckedKeys([])
+      this.activeRole = name
+
+      let that = this
+      this.tree.forEach((tree, index1) => {
+        let children = tree.children
+        select.forEach((item, index2) => {
+          let selectMenu = children.filter(m => {
+            return m.id == item.id
+          })
+
+          selectMenu.forEach((menu, index3) => {
+            if (item.has_auth_node_tags.length > 0) {
+              menu.auth_node_tags_array.forEach((m, index4) => {
+                if (item.has_auth_node_tags.indexOf(m.tag) > -1) {
+                  that.$set(m,
+                    'checked', true)
+                } else {
+                  that.$set(m,
+                    'checked', false)
+                }
+              })
+            } else {
+              menu.auth_node_tags_array.map(m => {
+                m.checked = false
+              })
+            }
+          })
+        })
+        this.$refs.tree.updateKeyChildren(tree.id, JSON.parse(JSON.stringify(children)))
+      })
+      this.$refs.tree.setCheckedNodes(select)
+      that.$forceUpdate()
+    },
+
+    savepermission() {
+      var checkedList = this.$refs.tree.getCheckedNodes()
+      console.log(checkedList)
+      if (checkedList.length == 0) {
+        this.$message.error('请选择菜单')
+        return false
+      }
+      let data = {}
+      data.id = this.activeRole
+      let permission = []
+      for (var m of checkedList) {
+        let tags = []
+        var mod = {}
+        mod.permission_id = m.id
+        m.auth_node_tags_array.map(item => {
+          if (item.checked) {
+            tags.push(item.tag)
+          }
+        })
+        mod.auth_node_tags = tags.join(',')
+        permission.push(mod)
+
+      }
+      data.permission_list = permission
+      setPermissions(data).then(response => {
+        console.log(response)
+        this.$Message.success('操作成功')
+        that.dialogFormVisible = false
+        that.load()
+      }).catch(error => {
+      })
+
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.t-tree {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 12px;
+  background: #eee;
+  /* padding: 100px; */
+}
+
+.header {
+  background: #f9f8f8;
+  line-height: 40px;
+  border-bottom: 1px solid #eee;
+  position: relative;
+  font-size: 15px;
+  padding: 0 15px;
+
+  button {
+    position: absolute;
+    right: 15px;
+    top: 4px;
+  }
+}
+
+.action-container {
+  border-radius: 4px;
+  flex: 1;
+  margin-left: 15px;
+  background: white;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  flex-direction: column;
+}
+
+.role-list {
+  width: 200px;
+  border: 1px solid #eee;
+  border-bottom: 0;
+}
+
+.actived {
+  color: #409efe !important;
+  background-color: #f3f7f9;
+}
+</style>
+<style scoped>
+.roleitem {
+  margin-bottom: 5px;
+}
+
+.action-group {
+  width: 100%;
+  display: flex;
+}
+
+.action-text {
+  font-size: 14px;
+  margin-right: 10px;
+}
+
+.action-item {
+  flex: 1;
+}
+
+.action-item > label {
+  width: 55px;
+  margin-left: 3px;
+}
+
+.action-container >>> .el-tree-node {
+  padding: 5px 0;
+}
+
+.action-container >>> .el-checkbox__label {
+  padding-left: 5px;
+}
 </style>