最新提交

pengwei

2025-03-12 18fcb8ad28f583e3e1b99b23e4f7d9e1833dcd83

 ÏîÄ¿´úÂë/client/src/views/system/Permission.vue

@@ -1,6 +1,14 @@
<template>
  <div style="width: 100%;height: 100%;display: flex;overflow: hidden;">
    <div class="role-tree-left flex-col">
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      overflow: hidden;
    "
  >
    <!-- <div class="role-tree-left flex-col">
      <div class="title"><i class="el-icon-user"></i>角色列表</div>
      <el-scrollbar class="el-role-list">
        <el-tree :data="tree" @node-click="nodeClick" node-key="id" :default-expanded-keys="openKeys"
@@ -14,26 +22,59 @@
          </template>
        </el-tree>
      </el-scrollbar>
    </div>
    <div style="height: calc(100vh - 6.5rem);flex: 1;overflow: hidden;background-color: white;" class="role-tree-right flex-col">
    </div> -->

    <div
      style="
        height: calc(100vh - 6.5rem);
        flex: 1;
        overflow: hidden;
        background-color: white;
      "
      class="role-tree-right flex-col"
    >
      <div class="title" style="display: flex; justify-content: space-between">
        <div>
          è§’色权限管理（{{
            userInfo.userName ? userInfo.userName : "超级管理员"
          }}）
        </div>
        <el-icon @click="goBack" size="25"><CloseBold /></el-icon>
      </div>
      <div class="title">
        <div><i class="el-icon-folder-opened"></i>菜单权限</div>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
      <el-scrollbar class="el-role-list" style="height: 100%;">
        <el-tree @check-change="leftCheckChange" @check="nodeCheck" :data="roleTree" :show-checkbox="false"
          style="padding: 15px" node-key="id" default-expand-all :expand-on-click-node="false">
      <el-scrollbar class="el-role-list" style="height: 100%">
        <el-tree
          @check-change="leftCheckChange"
          @check="nodeCheck"
          :data="roleTree"
          :show-checkbox="false"
          style="padding: 15px"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <template #default="{ data }">
            <div class="action-group">
              <div class="action-text" :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }">
              <div
                class="action-text"
                :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }"
              >
                <el-checkbox v-model="data.leftCk" @change="allChange(data)">{{
                  // data.text + (data.isApp ? "(app)" : "")
                  data.text
                }}</el-checkbox>
              </div>
              <div class="action-item">
                <el-checkbox v-for="(item, index) in data.actions" :key="index" v-model="item.checked"
                  @change="actionChange(data, item.checked)">{{ item.text }}</el-checkbox>
                <el-checkbox
                  v-for="(item, index) in data.actions"
                  :key="index"
                  v-model="item.checked"
                  @change="actionChange(data, item.checked)"
                  >{{ item.text }}</el-checkbox
                >
              </div>
            </div>
          </template>
@@ -41,12 +82,18 @@
      </el-scrollbar>
    </div>
  </div>
  
</template>

<script>
import { defineComponent, ref, reactive, getCurrentInstance } from "vue";
import {
  defineComponent,
  ref,
  reactive,
  getCurrentInstance,
  onActivated,
} from "vue";
import http from "@/../src/api/http.js";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const selectId = ref(-1);
@@ -57,7 +104,9 @@
    const roleList = reactive([]);
    const roleTree = reactive([]);
    const openKeys = reactive([]);

    const route = useRoute();
    const router = useRouter();
    const userInfo = reactive({});
    const leftCheckChange = (node, selected) => {
      node.actions.forEach((x, index) => {
        x.checked = selected;
@@ -109,7 +158,6 @@
    const load = () => {
      const url = "api/Sys_Role/getUserChildRoles";
      http.post(url, {}, true).then((result) => {

        if (!result.status) return;
        list.splice(0);
        list.push(...result.data);
@@ -164,6 +212,9 @@
      });
    };

    const goBack = () => {
      router.push("/Usermanagement");
    };
    const getRoleTree = (id, data, isRootId) => {
      roleList.forEach((x) => {
        if (x.pid == id) {
@@ -225,6 +276,13 @@

    load();
    getCurrentTreePermission();

    onActivated(() => {
      let detail = history.state.info;
      userInfo.value = JSON.parse(detail || {});
    });
    console.log(userInfo.value);

    return {
      list,
      nodeClick,
@@ -242,12 +300,15 @@
      allChange,
      actionChange,
      save,
      route,
      goBack,
      router,
      userInfo,
    };
  },
});
</script>
<style lang="less" scoped>

.flex-col {
  display: flex;
  flex-direction: column;
@@ -265,8 +326,6 @@
    }
  }
}



.title {
  display: flex;
@@ -299,7 +358,6 @@
  }
}


.title {
  padding: 10px;
  background: rgb(246 250 255);
@@ -313,7 +371,6 @@
  height: 0;
  overflow-x: hidden;
}


.role-tree-left ::v-deep(.el-tree-node__content) {
  cursor: pointer;