WanZai_School/src/views/roles/roles.vue

<template>
  <div class="content-box">
    <!-- 左边树状结构区域 -->
    <el-card class="box_left">
      <el-tree
        :data="dataSource"
        node-key="id"
        default-expand-all
        highlight-current
        :props="{ label: 'name', children: 'authorListGroups' }"
        :expand-on-click-node="false"
      >
        <template #default="{ node, data }">
          <div class="left_tree">
            <component
              :is="node.level === 1 ? 'FolderOpened' : 'Document'"
              style="width: 15px; height: 15px"
            />
            <div
              @click="handleNodeClick(data)"
              class="tree_text"
              :class="data.id == authorGroupId ? 'tree_click' : ''"
            >
              {{ data.name }}
            </div>

            <el-dropdown
              trigger="click"
              class="tree_more"
            >
              <div>
                <el-icon><MoreFilled /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    command="a"
                    @click="addGroup(data)"
                    v-if="node.level === 1"
                    >新建下级管理组</el-dropdown-item
                  >
                  <el-dropdown-item command="b" @click="updataGroup(data)"
                    >修改管理组</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-tree>
    </el-card>

    <!-- 右边主体内容区域 -->
    <el-card class="box_right">
      <!-- 标题区域 -->
      <template #header>
        <div class="right_header">{{ headerValue }}</div>
      </template>

      <!-- 内容区域 -->
      <div class="right_body">
        <!-- 管理员区域 -->
        <div class="body_box">
          <div class="box_left">管理员：</div>
          <div class="box_center">
            <el-tag
              class="tag"
              closable
              v-for="(item, index) in tagList"
              :key="item.id"
              @close="handleCloseUser(item)"
            >
              {{ item.userName }}
            </el-tag>
          </div>
          <div class="box_right">
            <!-- <img src="./images/code.png" /> -->
            <span class="btn" @click="AddMemberClick">添加管理员</span>
          </div>
        </div>

        <!-- 管理组权限区域 -->
        <div class="body_box">
          <div class="box_left">管理组权限：</div>
          <div class="box_center">请点击修改查看具体权限</div>
          <div class="box_right">
            <span
              style="display: inline-block; cursor: pointer"
              @click="managementClick"
              >修改</span
            >
          </div>
        </div>
        <!-- 菜单权限区域 -->
        <div class="body_box">
          <div class="box_left">菜单权限：</div>
          <div class="box_center">
            <el-tag
              class="tag"
              closable
              v-for="(item, index) in menuList"
              :key="index"
              @close="handleCloseRoles(item)"
            >
              {{ item.name }}
            </el-tag>
          </div>
          <div class="box_right">
            <span
              style="display: inline-block; cursor: pointer"
              @click="treMemberClick"
              >修改</span
            >
          </div>
        </div>
      </div>
    </el-card>

    <!-- 新建下级管理 -->
    <el-dialog
      class="addGroupDialog"
      v-model="addGroupVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="addGroupTitle"
      align-center
      width="520"
      :before-close="cancelAddGroup"
    >
      <el-form
        ref="addGroupRef"
        :model="addGroupRuleForm"
        :rules="addGroupRules"
        label-width="100px"
        class="demo-ruleForm"
        :size="formSize"
        label-position="left"
        status-icon
      >
        <el-form-item label="管理组名称 :" prop="department">
          <el-input
            v-model.trim="addGroupRuleForm.department"
            placeholder="请输入管理组名称"
            clearable
            style="width: 340px"
          />
        </el-form-item>
        <div class="option">
          <el-button
            color="rgba(41, 109, 227, 1)"
            class="queding"
            type="primary"
            @click="confirmAddGroup(addGroupRef)"
          >
            确认
          </el-button>
          <el-button @click="cancelAddGroup(addGroupRef)">取消</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 编辑应用权限弹窗 -->
    <el-dialog
      class="appPop"
      v-model="appPop"
      title="编辑应用权限"
      width="800"
      align-center
      :close-on-click-modal="false"
    >
      <div class="pop_app">
        <el-table
          ref="editApply"
          :row-class-name="tableRowClassName"
          :data="editAppPop"
          :header-cell-style="{
            background: 'rgba(240, 243, 247, 1)',
            height: '50px',
          }"
          @selection-change="editApplyHandleSelectionChange"
        >
          <el-table-column
            width="160"
            align="center"
            type="index"
            label="序号"
          />
          <el-table-column align="center" prop="name" label="应用" />
          <el-table-column align="center" type="selection" width="150" />
        </el-table>
      </div>
      <template #footer>
        <el-button type="primary"> 保存 </el-button>
      </template>
    </el-dialog>

    <!-- 编辑管理组权限弹窗 -->
    <el-dialog
      class="management"
      v-model="managementVis"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="编辑管理组权限"
      align-center
      width="950"
      :before-close="cancelManagement"
    >
      <!-- <div class="searchInp">
        <el-input
          :clearable="true"
          @clear="searchBtn"
          v-model="freezeListSel"
          placeholder="请输入关键字"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
        <el-button
          color="rgba(0, 97, 255, 1)"
          type="primary"
          class="search"
          @click="searchBtn"
        >
          查询</el-button
        >
      </div> -->
      <div class="footer">
        <el-table
          :data="managementData.list"
          style="width: 100%"
          :header-cell-style="{
            background: 'rgba(240, 243, 247, 1)',
            height: '50px',
            border: 0,
          }"
        >
          <el-table-column align="center" prop="cardNo" label="学号" />
          <el-table-column align="center" prop="name" label="姓名" />
          <el-table-column prop="lookRoles" label="查看权限" width="250">
            <template #default="{ row }">
              <div
                class="selBM"
                v-if="row.editShow"
                @click="editLookMemberClick(row)"
              >
                选择部门
              </div>
              <div class="rolesSel">
                <el-tag
                  class="tag"
                  v-for="(item, index) in row.departmentViewJson"
                  :key="item.id"
                >
                  {{ item.name }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="roles" label="管理权限" width="250">
            <template #default="{ row }">
              <div
                class="selBM"
                v-if="row.editShow"
                @click="editGuanLiMemberClick(row)"
              >
                选择部门
              </div>
              <div class="rolesSel">
                <el-tag
                  class="tag"
                  v-for="(item, index) in row.departmentManageJson"
                  :key="item.id"
                >
                  {{ item.name }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="roles" label="菜单权限">
            <template #default="scope">
              <div class="selBM" @click="treMemberClick(scope.row)">
                选择菜单权限
              </div>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="操作" width="140">
            <template #default="{ row }">
              <div v-if="row.editShow">
                <!-- <span class="defrost" @click="confirmEditDepartment(row)"
                  >保存</span
                > -->
                <span class="defrost" @click="cancelEditDepartment(row)"
                  >取消</span
                >
              </div>
              <div v-else>
                <span class="defrost" @click="editDepartmentClick(row)"
                  >编辑</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 请选择查看部门 -->
    <el-dialog
      class="moveMemberDialog"
      v-model="editMemberVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="editDepartmentTitle"
      align-center
      width="650"
      :before-close="cancelEditMember"
    >
      <div class="move">
        <div class="moveLeft">
          <el-input
            v-model="editMemberInput"
            :clearable="true"
            @clear="editManagementList"
            @input="editManagementList"
            placeholder="请输入部门"
            class="searchTree"
            style="width: 260px"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
          <el-tree
            ref="editMemberTree"
            :data="departmentTreeData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            show-checkbox
            @check="editMemberCheckChange"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <div class="title">
                  <img src="@/assets/images/folder.png" alt="" />
                  <!-- <img src="@/assets/images/document.png" alt="" /> -->
                  <span>{{ data.name }}</span>
                </div>
              </span>
            </template>
          </el-tree>
        </div>
        <div class="moveRight">
          <div class="sel">已选择 :</div>
          <ul
            class="infinite-list"
            style="overflow: auto"
            infinite-scroll-immediate="false"
          >
            <li
              v-for="(i, index) in lookEditMemberData"
              :key="index"
              class="infinite-list-item"
            >
              <span style="margin-left: 19px">{{ i.name }}</span>
              <el-icon @click="cancelEditMemberTreeSel(i)">
                <Close />
              </el-icon>
              <!-- <i class="el-icon-close" @click="cancelCheck(i)"></i> -->
            </li>
          </ul>
        </div>
      </div>
      <div class="options">
        <el-button
          color="rgba(41, 109, 227, 1)"
          class="queding"
          type="primary"
          @click="confirmEditMember"
        >
          确认
        </el-button>
        <el-button @click="cancelEditMember">取消</el-button>
      </div>
    </el-dialog>

    <!-- 菜单权限按钮 -->
    <el-dialog
      class="pushSetDialog"
      v-model="treListVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="菜单权限设置"
      align-center
      width="700"
      :before-close="cancelTreList"
    >
      <div class="tree_pushSet">
        <div class="trees">
          <div class="tree">
            <div class="tree-left">
              <span>{{ menuList.length }} / {{ dataLength }}</span>
              <!-- <el-input
                style="margin-left: 5px"
                v-model.trim="pushSetInput"
                placeholder="输入名字查询"
                @input="pushData"
                :clearable="true"
              /> -->
            </div>

            <el-tree
              :data="treListData"
              show-checkbox
              node-key="id"
              ref="treListTree"
              :default-checked-keys="[]"
              :props="{
                label: id,
                children: childrenAddMemberClick,
                disabled: disabled,
              }"
              @check="checkTreList"
            >
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span>{{ data.name }}</span>
                </span>
              </template>
            </el-tree>
          </div>
          <div class="tree">
            <div class="tree-left">
              <span>已选 {{ menuList.length }}</span>
            </div>
            <ul
              class="infinite-list"
              style="overflow: auto"
              infinite-scroll-immediate="false"
            >
              <li
                v-for="(i, index) in menuList"
                :key="index"
                class="infinite-list-item"
              >
                <span style="margin-left: 19px">{{ i.name }} </span>
                <el-icon @click="cancelLiCheck(i)">
                  <Close />
                </el-icon>
              </li>
            </ul>
          </div>
        </div>
        <div class="options">
          <el-button
            color="rgba(0, 97, 255, 1)"
            class="queding"
            type="primary"
            @click="affirmTreList"
          >
            确认
          </el-button>
          <el-button @click="cancelTreList">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 添加管理员按钮 -->
    <el-dialog
      class="addManagerDialog"
      v-model="addManagerVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="菜单权限设置"
      align-center
      width="1050"
      :before-close="cancelAddManager"
    >
      <div class="tree_pushSet">
        <div class="trees">
          <div class="tree">
            <div
              class="tree-left"
              style="border-right: 1px solid rgba(230, 230, 230, 1)"
            >
              &nbsp;&nbsp;&nbsp;&nbsp;部门
            </div>
            <el-tree
              :data="addManagerData"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
              :highlight-current="true"
            >
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <div class="title" @click="nodeClick(node, data)">
                    <img src="@/assets/images/folder.png" alt="" />
                    <span :class="data.id == departmentId ? 'nodeClick' : ''">{{
                      data.name
                    }}</span>
                  </div>
                </span>
              </template>
            </el-tree>
          </div>
          <div class="tree">
            <div class="tree-left">
              <el-input
                style="margin-left: 5px; width: 180px"
                v-model.trim="selManagerInput"
                placeholder="输入名字查询"
                :clearable="true"
                @change="addManagerSearch"
              />
            </div>
            <ul
              class="infinite-list"
              style="overflow: auto"
              infinite-scroll-immediate="false"
            >
              <li v-for="(i, index) in selManagerData" :key="index">
                <div v-if="i.selShow" class="infinite-list-item">
                  <el-icon style="margin-left: 19px">
                    <UserFilled />
                  </el-icon>
                  <div>
                    <span>{{ i.department }} </span>&nbsp;&nbsp;&nbsp;
                    <span>{{ i.name }} </span>
                  </div>
                  <el-icon v-if="i.selShow" color="green"><Select /></el-icon>
                  <el-icon v-if="i.loadShow"><Loading /></el-icon>
                </div>
                <div v-else class="infinite-list-item" @click="userClick(i)">
                  <el-icon style="margin-left: 19px">
                    <UserFilled />
                  </el-icon>
                  <div>
                    <span>{{ i.department }} </span>&nbsp;&nbsp;&nbsp;
                    <span>{{ i.name }} </span>
                  </div>
                  <el-icon v-if="i.selShow" color="green"><Select /></el-icon>
                  <el-icon v-if="i.loadShow"><Loading /></el-icon>
                </div>
              </li>
              <div class="loadMore">
                <el-button
                  @click="loadMoreList"
                  v-if="
                    selManagerPage !== selManagertotalPage &&
                    selManagertotalPage !== 0
                  "
                  >加载更多</el-button
                >
              </div>
            </ul>
          </div>
          <div class="selTree">
            <ul
              class="infinite-list"
              style="overflow: auto"
              infinite-scroll-immediate="false"
            >
              <div class="title">已选择 :</div>
              <li
                v-for="(i, index) in addManagerLiCount"
                :key="index"
                class="infinite-list-item"
              >
                <span style="margin-left: 19px">{{ i.name }} </span>
                <el-icon @click="cancelAddManagerLiCheck(i)">
                  <Close />
                </el-icon>
              </li>
            </ul>
          </div>
        </div>
        <div class="options">
          <el-button
            color="rgba(0, 97, 255, 1)"
            class="queding"
            type="primary"
            @click="affirmAddManager"
          >
            确认
          </el-button>
          <el-button @click="cancelAddManager">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import eds from "@/utils/eds.js";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

// 树状结构数据
const dataSource = ref([
  {
    id: 1,
    label: "超级管理员",
    icon: "FolderOpened",
    children: [],
  },
]);
const authorGroupParentId = ref(0); // 父id
const authorGroupId = ref(0); // id
const headerValue = ref("超级管理员"); // 当前身份
// 新建下级管理(----------------------------------------------------)
const addGroupVisible = ref(false); // 新建下级管理弹窗
const addGroupRef = ref();
const addGroupTitle = ref("新建下级管理"); // 新建下级管理标题
const addGroupRuleForm = reactive({
  department: "", // 管理组名称
  id: "",
});
// 表单验证
const addGroupRules = reactive({
  department: [
    { required: true, message: "管理组名称名称不能为空", trigger: "blur" },
  ],
});

// 人员列表
const tagList = ref([]);
const tagListAuth = ref(); // 每个人员对应的权限数组(重组的)

// 应用列表
const appList = ref([
  {
    name: "缴费大厅",
    checked: true,
  },
  {
    name: "学生轨迹",
    checked: true,
  },
  {
    name: "通讯录",
    checked: true,
  },
]);

// 编辑应用权限 (----------------------------------------------------------------)
const appPop = ref(false);
const editAppPop = ref([]); // 全部应用列表
const editApply = ref(); // 全部应用表格ref
const editApplySelect = ref(); // 编辑中选择多选数据

// 编辑管理组权限弹窗（------------------------------------------------------------------）
const managementVis = ref(false);
const managementData = reactive({
  list: [
    { studentId: "254125", name: "张三", lookRoles: "", roles: "" },
    { studentId: "254125", name: "李四", lookRoles: "", roles: "" },
    { studentId: "254125", name: "张明", lookRoles: "", roles: "" },
  ],
});
const editShow = ref(false); // 点击编辑时出现选择部门按钮

// 菜单权限弹窗(----------------------------------------------------)
const treListVisible = ref(false);
// 选择菜单权限
const treListTree = ref(); // ref
const treListData = ref([]);

const dataLength = ref(); // 菜单全部数据
const menuList = ref([]); // 菜单列表  右边li展示的菜单数据

// 修改管理组权限中 选择部门弹窗数据(------------------------------------）
const editMemberVisible = ref(false);
const editMemberTree = ref(); // 部门树形ref
const editMemberInput = ref(); // 部门搜索
const departmentTreeData = ref([]); // 部门数据

const editMemberUserId = ref(); // 用户id
const editDepartmentTitle = ref();
const lookEditMemberData = ref(); // 已勾选的查看部门数据li

// 添加管理员弹窗(----------------------------------------------------)
const addManagerVisible = ref(false);
// 选择管理员
const addManagerTree = ref(); // ref
const addManagerData = ref([]); // 添加管理员中部门数据
const departmentId = ref(); // 添加管理员点击部门id
const selManagerData = ref(); // 添加管理员点击部门查询的数据
const selManagerPage = ref(1); // 添加管理员点击部门查询的数据页数
const selManagertotalPage = ref(1); // 添加管理员点击部门查询的数据总页数（用于判断是否继续加载）
const selManagerCount = ref(30); // 添加管理员点击部门查询的数据每页条数
const selManagerInput = ref(); // 添加管理员中查询人员参数
const addManagerLiCount = ref([]); // 添加管理员  已选择的人员数据

// 获取树形权限数据
const getList = async () => {
  getAllDataList(); // 权限数据
};
// 左边树形权限数据
const getAllDataList = async () => {
  let data = {
    authorGroupId: authorGroupParentId.value,
    // managerId: sessionStorage.getItem("token"),
  };
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartAuthorGroup/querySmartAuthorGroup",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "树形权限数据");
  console.log(res, "树形权限数据");
  if (res.data.code == 200) {
    let data = JSON.parse(eds.decryptDes(res.data.data));
    // let data = res.data.data;
    dataSource.value = data;
    authorGroupParentId.value = data[0].parentId;
    authorGroupId.value = data[0].id;
    // tagList.value = JSON.parse(data[0].userId).data; // 管理人员
    // menuList.value = JSON.parse(data[0].applyId).data; //菜单权限
    // appList.value = JSON.parse(data[0].applyId).data; //应用权限
    // console.log(tagList.value, menuList.value, appList.value);
    getUserAuthList(); // 所有用户权限数据
    allRolesData(); // 查看权限组编辑数据
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 所有用户权限数据
const getUserAuthList = async () => {
  const formData = new FormData();
  formData.append("groupId", authorGroupId.value);
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartAuthorGroup/getSmartAuthorGroupManager",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: formData,
  });
  console.log(res, "查看权限组编辑数据");
  if (res.data.code == 200) {
    // let data = JSON.parse(eds.decryptDes(res.data.data));
    res.data.data.forEach((item) => {
      item.name = item.userName;
      item.selShow = true;
    });
    tagList.value = res.data.data;
    managementData.list = JSON.parse(JSON.stringify(tagList.value)); // 编辑权限组中修改部门权限刷新所在界面表格数据
    // console.log(data,"当前管理员所有数据");
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 当前管理员所有数据 菜单权限数据
const allRolesData = async () => {
  // 菜单权限数据
  const formDatas = new FormData();
  formDatas.append("id", authorGroupId.value);
  let resData = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartAuthorGroup/getSmartAuthorGroupMenu",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: formDatas,
  });
  console.log(resData, "菜单权限数据");
  if (resData.data.code == 200) {
    // let datas = JSON.parse(eds.decryptDes(resData.data.data));
    let datas = resData.data.data;
    // let flag = datas.some((item) => {
    //   return item.id == 1;
    // });
    // if (!flag) {
    //   datas.unshift({
    //     id: 1,
    //     name: "系统首页",
    //     route: "/wanzai/home",
    //   });
    // }
    console.log(datas);

    menuList.value = datas;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: resData.data.message,
      center: true,
    });
  }
};

// 点击树状结构每一个节点触发的回调
const handleNodeClick = async (data) => {
  headerValue.value = data.name;
  authorGroupParentId.value = data.parentId;
  authorGroupId.value = data.id;
  getUserAuthList(); // 所有用户权限数据
  allRolesData(); // 当前管理员所有数据

  // let datas = {
  //   authorGroupId: authorGroupParentId.value,
  //   // managerId: sessionStorage.getItem("token"),
  // };
  // let res = await axios({
  //   method: "post",
  //   url: api.value + "/wanzai/api/smartAuthorGroup/querySmartAuthorGroup",
  //   headers: {
  //     token: sessionStorage.getItem("token"),
  //     user_head: sessionStorage.getItem("userhead"),
  //   },
  //   params: datas,
  // });
  // console.log(res, "点击时的树形权限数据");
  // if (res.data.code == 200) {
  //   // console.log(res.data.data);
  //   // tagList.value = JSON.parse(
  //   //   JSON.parse(eds.decryptDes(res.data.data))[0].userId
  //   // ).data; // 管理人员
  //   // appList.value = JSON.parse(
  //   //   JSON.parse(eds.decryptDes(res.data.data))[0].applyId
  //   // ).data; //应用权限
  //   // console.log(tagList.value, appList.value);
  //   // getUserAuthList(); // 各个用户权限数据
  // } else {
  //   ElMessage({
  //     type: "error",
  //     showClose: true,
  //     message: res.data.message,
  //     center: true,
  //   });
  // }
};
// 新建下级管理
const addGroup = (row) => {
  addGroupVisible.value = true;
  addGroupTitle.value = "新建下级管理组";
  addGroupRuleForm.id = row.id;
  addGroupRuleForm.department = "";
};
// 确定新建下级管理
const confirmAddGroup = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (addGroupTitle.value == "新建下级管理组") {
        let data = {
          smartAuthorGroup: {
            parentId: addGroupRuleForm.id,
            name: addGroupRuleForm.department,
          },
        };
        let res = await axios({
          method: "post",
          url: api.value + "/wanzai/api/smartAuthorGroup/addSmartAuthorGroup",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        console.log(res);
        // console.log(
        //   res,
        //   JSON.parse(eds.decryptDes(res.data.data)),
        //   "新建下级管理员"
        // );
        if (res.data.code == 200) {
          getAllDataList();
          addGroupVisible.value = false;
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else if (addGroupTitle.value == "修改管理组") {
        let data = {
          id: addGroupRuleForm.id,
          name: addGroupRuleForm.department,
        };
        let res = await axios({
          method: "post",
          url:
            api.value +
            "/wanzai/api/smartAuthorGroup/updateSmartAuthorGroupName",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        console.log(res);
        // console.log(
        //   res,
        //   JSON.parse(eds.decryptDes(res.data.data)),
        //   "新建下级管理员"
        // );
        if (res.data.code == 200) {
          getAllDataList();
          addGroupVisible.value = false;
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 修改管理组
const updataGroup = (row) => {
  console.log(row);
  addGroupVisible.value = true;
  addGroupTitle.value = "修改管理组";
  addGroupRuleForm.id = row.id;
  addGroupRuleForm.department = row.name;
};
// 取消新建下级管理
const cancelAddGroup = () => {
  addGroupVisible.value = false;
  addGroupRef.value.resetFields();
};

// 点击修改应用权限按钮回调 （-------------------------------------------------------）
const handleEditApp = async () => {
  appPop.value = true;
  let data = {
    currentPage: 1,
    pageCount: 1000,
    // managerId: sessionStorage.getItem("token"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartApply/queryPageSmartApply",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "应用管理分页数据");
  if (res.data.code == 200) {
    editAppPop.value = JSON.parse(eds.decryptDes(res.data.data)).list;
    editApplySelect.value = [];
    editAppPop.value.forEach((item) => {
      appList.value.forEach((i) => {
        if (item.id == i.id) {
          editApplySelect.value.push(item);
          nextTick(() => {
            editApply.value.toggleRowSelection(item, undefined);
          });
        }
      });
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 编辑中选择多选功能
const editApplyHandleSelectionChange = (val) => {
  console.log(val);
  editApplySelect.value = val;
};

// 编辑管理组权限 (-----------------------------------------------------)
const managementClick = async () => {
  managementVis.value = true;
  // managementData.list = JSON.parse(JSON.stringify(tagList.value)); // 管理组权限
  editManagementList();
};
// 部门数据
const editManagementList = async () => {
  let data = {
    name: editMemberInput.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartDepartment/queryAllDepartmentTree",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "部门树形数据");
  if (res.data.code == 200) {
    departmentTreeData.value = JSON.parse(eds.decryptDes(res.data.data));
    // ElMessage({
    //   type: "success",
    //   showClose: true,
    //   message: res.data.message,
    //   center: true,
    // });
  } else {
    loading.value = false;
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const confirmEdit = (flag) => {
  if (flag == 1) {
    editShow.value = false;
  } else if (flag == 2) {
    editShow.value = false;
  }
};
const cancelManagement = () => {
  managementVis.value = false;
  managementData.list.forEach((item) => {
    item.editShow = false;
  });
};

// 修改管理组权限中 点击编辑按钮 (--------------------------------------------)
const editDepartmentClick = (row) => {
  console.log(row);

  managementData.list.forEach((item) => {
    item.editShow = false;
  });
  managementData.list.forEach((item) => {
    if (item.id == row.id) {
      item.editShow = true;
    }
  });
};
// 修改管理组权限中 点击取消按钮
const cancelEditDepartment = (row) => {
  managementData.list.forEach((item) => {
    if (item.id == row.id) {
      item.editShow = false;
    }
  });
};

// 修改管理组权限中 查看部门 选择部门弹窗 （---------------）
const editLookMemberClick = async (row) => {
  editMemberVisible.value = true;
  console.log(row, "选择查看部门");
  editDepartmentTitle.value = "查看部门权限";
  editMemberUserId.value = row.id;
  lookEditMemberData.value = row.departmentViewJson;
  let arrId = row.departmentView.split(",");
  console.log(arrId);
  nextTick(() => {
    editMemberTree.value.setCheckedKeys(arrId);
  });
};
// 修改管理组权限中 管理部门 选择部门弹窗 （---------------）
const editGuanLiMemberClick = async (row) => {
  editMemberVisible.value = true;
  console.log(row, "选择管理部门");
  editDepartmentTitle.value = "管理部门权限";
  editMemberUserId.value = row.id;
  lookEditMemberData.value = row.departmentManageJson;
  let arrId = row.departmentManage.split(",");
  console.log(arrId);
  nextTick(() => {
    editMemberTree.value.setCheckedKeys(arrId);
  });
};
// 修改管理组权限中 查看部门 确定查看部门选择
const confirmEditMember = async () => {
  let data = {};
  if (editDepartmentTitle.value == "查看部门权限") {
    let arr = [];
    lookEditMemberData.value.forEach((i) => {
      arr.push(i.id);
    });
    console.log(arr);
    data = {
      id: editMemberUserId.value,
      departmentView: arr.join(","), // 不修改就设为null
      departmentManage: null,
    };
  } else if (editDepartmentTitle.value == "管理部门权限") {
    let arr = [];
    lookEditMemberData.value.forEach((i) => {
      arr.push(i.id);
    });
    console.log(arr);
    data = {
      id: editMemberUserId.value,
      departmentView: null, // 不修改就设为null
      departmentManage: arr.join(","),
    };
  }
  console.log(data, "所需参数");
  let res = await axios({
    method: "post",
    url:
      api.value + "/wanzai/api/smartAuthorGroup/operateSmartAuthorDepartment",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "选择查看权限");
  if (res.data.code == 200) {
    editMemberVisible.value = false;
    getUserAuthList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

const cancelEditMember = () => {
  editMemberVisible.value = false;
  editMemberTree.value.setCheckedKeys([]);
  lookEditMemberData.value = []; // 查看部门数据置空
};
// 勾选查看部门
const editMemberCheckChange = (data, nodes) => {
  // console.log(nodes.checkedNodes, "勾选部门");
  lookEditMemberData.value = [];
  // 选中勾选的房间赋值给count
  nodes.checkedNodes.forEach((item, index) => {
    // console.log(item);
    lookEditMemberData.value.push(item);
  });
  console.log(lookEditMemberData.value);
};
// 取消勾选
const cancelEditMemberTreeSel = (i) => {
  console.log(i);
  lookEditMemberData.value = lookEditMemberData.value.filter((item) => {
    return item.id != i.id;
  });
  let arr = [];
  lookEditMemberData.value.forEach((item) => {
    arr.push(item.id);
  });
  editMemberTree.value.setCheckedKeys(arr);
};

// 点击添加管理员弹窗 (----------------------------------------------)
const AddMemberClick = async () => {
  addManagerVisible.value = true;
  addManagerList(); // 加载全部人员数据
  addManagerLiCount.value = tagList.value;
};
// 管理人员全部数据
const addManagerList = async () => {
  let data = {
    name: selManagerInput.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartDepartment/queryAllDepartmentTree",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "部门树形数据");
  if (res.data.code == 200) {
    let resData = JSON.parse(eds.decryptDes(res.data.data));
    addManagerData.value = resData;

    // ElMessage({
    //   type: "success",
    //   showClose: true,
    //   message: res.data.message,
    //   center: true,
    // });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// // 推送人滚动加载数据
// const addManagerScroll = () => {
//   nextTick(() => {
//     const domElementNode = document.querySelector(".pushSetTree");
//     console.log(domElementNode);

//     // 注册下拉滚动事件;
//     if (domElementNode) {
//       domElementNode.addEventListener("scroll", async () => {
//         const isBottom =
//           domElementNode.scrollHeight - domElementNode.scrollTop <=
//           domElementNode.clientHeight;
//         if (isBottom) {
//           // console.log("触底了");
//           // console.log(addManagerCurrentPage.value, addManagerTotal.value);
//           if (addManagerCurrentPage.value < addManagerCount.value) {
//             addManagerCurrentPage.value++;
//             let data = {
//               name: selManagerInput.value,
//               currentPage: addManagerCurrentPage.value,
//               pageCount: addManagerPageCount.value,
//               departmentId: 1, // 部门id
//             };
//             let res = await axios({
//               method: "get",
//               url: api.value + "/wanzai/api/smartWarning/warningUserList",
//              headers: {
//   token: sessionStorage.getItem("token"),
//   user_head: sessionStorage.getItem("userhead"),
// },
//               params: data,
//             });
//             console.log(res, "管理员人员滚动数据");
//             if (res.data.code == 200) {
//               addManagerData.value = [
//                 ...addManagerData.value,
//                 ...JSON.parse(eds.decryptDes(res.data.data)).list,
//               ];
//               defaultAddManager.value = []; // 默认勾选中的管理员
//               addManagerLiCount.value.forEach((item) => {
//                 defaultAddManager.value.push(item.id);
//               });
//               nextTick(() => {});
//             } else {
//               ElMessage({
//                 type: "error",
//                 showClose: true,
//                 message: res.data.message,
//                 center: true,
//               });
//             }
//           } else {
//             console.log("数据全部加载完成");
//           }
//         }
//       });
//     }
//   });
// };

// 添加管理员 搜索人员
const addManagerSearch = () => {
  selManagerPage.value = 1;
  departmentList();
};
// 添加管理员点击 部门查询 的数据
const departmentList = async (title) => {
  let data = {
    currentPage: selManagerPage.value,
    pageCount: selManagerCount.value,
    departmentId: departmentId.value,
    name: selManagerInput.value,
    // managerId: sessionStorage.getItem("token"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartUser/queryPageSmartUser",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(
    res,
    JSON.parse(eds.decryptDes(res.data.data)),
    "添加管理员点击部门查询的数据"
  );
  if (res.data.code == 200) {
    let resData = JSON.parse(eds.decryptDes(res.data.data));
    if (title == "加载更多") {
      selManagerData.value = selManagerData.value.concat(resData.list);
      selManagertotalPage.value = resData.totalPage;
    } else {
      selManagerData.value = resData.list;
      selManagertotalPage.value = resData.totalPage;
    }
    selManagerData.value.forEach((item) => {
      item.userId = item.id;
    });
    selManagerData.value.forEach((item) => {
      addManagerLiCount.value.forEach((i) => {
        if (item.userId == i.userId) {
          item.selShow = true;
        }
      });
    });
    console.log(selManagerData.value, "查询的数据");
    console.log(addManagerLiCount.value, "勾选的数据");
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 添加管理员中的 点击部门 操作
const nodeClick = async (node, row) => {
  console.log(row, "点击的部门数据");
  departmentId.value = row.id;
  selManagerPage.value = 1;
  departmentList(); // 添加管理员点击部门查询的数据
};
// 添加管理员中 加载更多 操作
const loadMoreList = () => {
  selManagerPage.value = selManagerPage.value + 1;
  departmentList("加载更多");
};
// 添加管理员中 点击人员判断是否已加入权限
const userClick = async (row) => {
  // console.log(row);
  row.loadShow = true;
  const formData = new FormData();
  formData.append("userId", row.id);
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartAuthorGroup/queryUserAuthor",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: formData,
  });
  // console.log(
  //   res,
  //   JSON.parse(eds.decryptDes(res.data.data)),
  //   "点击判断用户是否已分配权限"
  // );
  console.log(res, "点击判断用户是否已分配权限");

  if (res.data.code == 200) {
    // let resData = JSON.parse(eds.decryptDes(res.data.data));
    let resData = res.data.data;
    // console.log(resData.length!=0);
    if (resData.length == 0) {
      row.selShow = true;
      row.loadShow = false;
      // 将被勾选的用户选出来
      addManagerLiCount.value = [];
      selManagerData.value.forEach((item) => {
        if (item.selShow) {
          addManagerLiCount.value.push(item);
        }
      });
      ElMessage({
        type: "success",
        showClose: true,
        message: "勾选成功",
        center: true,
      });
    } else {
      row.selShow = false;
      row.loadShow = false;
      ElMessage({
        type: "error",
        showClose: true,
        message: "当前用户已分配权限",
        center: true,
      });
    }
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 添加管理员中 取消勾选人员
const cancelAddManagerLiCheck = (i) => {
  console.log(i);
  selManagerData.value.forEach((item) => {
    if (item.userId == i.userId) {
      item.selShow = false;
    }
  });
  addManagerLiCount.value = [];
  selManagerData.value.forEach((item) => {
    if (item.selShow) {
      addManagerLiCount.value.push(item);
    }
  });
};
// 确认按钮
const affirmAddManager = async () => {
  if (addManagerLiCount.value.length >= 1) {
    let arr = [];
    addManagerLiCount.value.forEach((item) => {
      arr.push(item.userId);
    });
    const formData = new FormData();
    formData.append("id", authorGroupId.value);
    formData.append("userId", arr.join(","));
    console.log(formData);

    let res = await axios({
      method: "post",
      url:
        api.value + "/wanzai/api/smartAuthorGroup/operateSmartAuthorGroupUser",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: formData,
    });
    console.log(res, "确认添加管理员");
    if (res.data.code == 200) {
      getUserAuthList(); // 所有用户权限数据
      addManagerVisible.value = false;
      addManagerLiCount.value = [];
      selManagerData.value = [];
      departmentId.value = "";
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  } else {
    ElMessage({
      type: "warning",
      showClose: true,
      message: "至少选择一个管理员",
      center: true,
    });
  }
};
const cancelAddManager = () => {
  addManagerVisible.value = false;
  addManagerLiCount.value = []; // 将勾选的管理人员置空
  selManagerData.value = []; // 将部门查询的数据置空
  departmentId.value = ""; // 将点击的部门id置空
};
// 界面 管理员标签 删除
const handleCloseUser = async (row) => {
  console.log(row);
  console.log(tagList.value, "管理员");
  let filArr = tagList.value.filter((i) => {
    return i.id != row.id;
  });
  let arr = [];
  filArr.forEach((item) => {
    arr.push(item.id);
  });
  const formData = new FormData();
  formData.append("id", authorGroupId.value);
  formData.append("userId", arr.join(","));
  console.log(formData);
  let res = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartAuthorGroup/operateSmartAuthorGroupUser",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: formData,
  });
  console.log(res, "确认添加管理员");
  if (res.data.code == 200) {
    getUserAuthList(); // 所有用户权限数据
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 点击选择菜单权限 (----------------------------------------------)
const treMemberClick = async (row) => {
  treListVisible.value = true;
  // menuList.value = [];
  let data = {
    currentPage: 1,
    pageCount: 1000,
    // managerId: sessionStorage.getItem("token"),
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartMenu/queryPageSmartMenu",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(
    res,
    JSON.parse(eds.decryptDes(res.data.data)).list,
    "菜单管理分页数据"
  );
  if (res.data.code == 200) {
    treListData.value = JSON.parse(eds.decryptDes(res.data.data)).list;
    treListData.value.forEach((item) => {
      // if (item.id == 1) {
      //   item.disabled = true;
      // }
    });
    dataLength.value = JSON.parse(eds.decryptDes(res.data.data)).totalCount;
    nextTick(() => {
      treListTree.value.setCheckedNodes(menuList.value);
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 勾选人员
const checkTreList = (data, nodes) => {
  // console.log(nodes);
  menuList.value = [];
  // 选中勾选的房间赋值给count
  nodes.checkedNodes.forEach((item, index) => {
    if (!item.children) {
      // console.log(item);
      menuList.value.push(item);
    }
  });
  console.log(menuList.value);
};
// 右边叉掉推送人员
const cancelLiCheck = (i) => {
  // console.log(i);
  menuList.value = menuList.value.filter((item) => {
    return item.id != i.id;
  });
  treListTree.value.setCheckedNodes(menuList.value);
};

// 确认按钮
const affirmTreList = async () => {
  let arr = [];
  menuList.value.forEach((item) => {
    arr.push(item.id);
  });
  const formData = new FormData();
  formData.append("id", authorGroupId.value);
  formData.append("applyId", arr.join(","));
  let res = await axios({
    method: "post",
    url:
      api.value + "/wanzai/api/smartAuthorGroup/operateSmartAuthorGroupApply",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: formData,
  });
  console.log(res, "修改权限");
  if (res.data.code == 200) {
    treListVisible.value = false;
    // getUserAuthList(); // 所有用户权限数据
    allRolesData();
    updataRoles()
    location.reload();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
const cancelTreList = () => {
  treListVisible.value = false;
  menuList.value = [];
  treListTree.value.setCheckedNodes([]);
  allRolesData();
};
// 界面 菜单权限标签 删除
const handleCloseRoles = (row) => {
  console.log(row);
  menuList.value = menuList.value.filter((i) => {
    return i.id != row.id;
  });
  console.log(menuList.value, "菜单权限");
  affirmTreList();
};
// 删除菜单更新界面
const updataRoles=async ()=>{
  const formDatas = new FormData();
  formDatas.append("userId", 722);
  let resData = await axios({
    method: "post",
    url: api.value + "/wanzai/api/smartAuthorGroup/queryUserAuthor",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: formDatas,
  });
  console.log(resData, "查看当前用户权限");
  if (resData.data.code == 200) {
    let roleList = resData.data.data[0].treAuthor;
    roleList.forEach((item) => {
      let list = item.route.split("/");
      item.routeName = list[2];
    });
    sessionStorage.setItem("roleList", JSON.stringify(roleList));
    store.commit("ROLELIST", "");
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: resData.data.message,
      center: true,
    });
  }
}

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
onBeforeMount(async () => {
  api.value = store.state.user.api;

  getList();
  // const formData = new FormData();
  // formData.append("userId",690);
  // let ress = await axios({
  //   method: "post",
  //   url: api.value + "/wanzai/api/smartAuthorGroup/queryUserAuthor",
  //   headers: {
  //      token: sessionStorage.getItem("token"),
  //      user_head: sessionStorage.getItem("userhead"),
  //   },
  //   data: formData,
  // });
  // console.log(ress, JSON.parse(eds.decryptDes(ress.data.data)), "单个用户权限");
});
</script>

<style scoped lang="scss">
.content-box {
  min-width: 1000px;
  width: calc(100vw - 260px);
  height: calc(100vh - 105px);
  margin: 20px auto;
  // background-color: #fff;
  color: #fff;
  display: flex;
  // box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

  .box_left {
    width: 247px;
    height: 100%;

    :deep(.el-card__body) {
      padding: 10px;
      height: calc(100% - 20px);
      overflow: auto;
      .el-tree-node__content {
        cursor: auto;
        .tree_text {
          cursor: pointer;
        }
      }
    }

    .left_tree {
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 14px;
      font-weight: bold;

      .tree_text {
        margin-left: 6px;
      }
      .tree_click {
        color: #0061ff;
      }

      .tree_more {
        margin-left: auto;
      }
    }
  }

  .box_right {
    margin-left: 15px;
    // width: 1415px;
    flex: 1;
    height: 100%;

    ::v-deep(.el-card__header),
    ::v-deep(.el-card__body) {
      padding: 0;
    }

    .right_header {
      padding-left: 34px;
      display: flex;
      align-items: center;
      height: 65px;
      font-size: 24px;
      font-weight: bold;
    }
    :deep(.el-card__body) {
      height: calc(100% - 66px);
      overflow: auto;
    }
    .right_body {
      .body_box {
        display: flex;
        align-items: center;
        margin-left: 115px;
        padding: 10px 92px 10px 0;
        box-sizing: border-box;
        min-height: 122px;
        font-size: 16px;
        border-bottom: 1px solid #e6e6e6;

        .box_left {
          width: 130px;
          font-weight: bold;
        }

        .box_center {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          max-height: 200px;
          overflow: auto;
          color: #999999;
          &::-webkit-scrollbar-track {
            background-color: rgb(230, 230, 230);
          }

          &::-webkit-scrollbar {
            background-color: #57b2ff;
            height: 5px;
            width: 3px;
          }

          .tag {
            margin-top: 5px;
            margin-bottom: 5px;
            margin-right: 16px;
          }
        }

        .box_right {
          display: flex;
          align-items: center;
          flex-direction: row-reverse;
          width: 220px;
          color: #0061ff;
          // cursor: pointer;
          .btn {
            margin-left: 15px;
            cursor: pointer;
          }
          img {
            margin-left: 6px;
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }

  .pop_app {
    height: 500px;
    font-size: 16px;

    .app_header {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 45px;
      height: 50px;
      border-radius: 5px;
      font-weight: bold;
      color: #000;
      background-color: #f0f3f7;
    }

    .app_list {
      height: 450px;
      overflow-y: auto;
      .app_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 50px 0 18px;
        height: 65px;
        color: #000;
        border-bottom: 1px solid #dfe2e6;
      }
    }
  }

  // 新建下级管理
  :deep(.addGroupDialog) {
    // height: 600px;
    overflow: hidden;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(245, 249, 255, 1);
      font-weight: 600;
      height: 60px;
      padding: 0 20px;
      line-height: 60px;
      margin: 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0px 20px 20px 20px;
      // height: 200px;
      // display: flex;
      // flex-direction: column-reverse;
      .el-form-item {
        margin: 40px 0;
      }
      .option {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
    }
  }
  // 编辑应用权限弹窗
  :deep(.appPop) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 20px 30px 10px 30px;

      .options {
        margin: 80px 20px 20px 0;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }

  // 编辑管理组权限弹窗
  :deep(.management) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 20px 30px 10px 30px;
      .searchInp {
        margin: 0 0 20px 0;
        display: flex;
        justify-content: space-between;
        .search {
          margin-left: 15px;
        }
      }
      .footer {
        width: 100%;
        height: 550px;
        margin: 10px auto 30px;

        .el-table--fit {
          height: 100%;

          .el-table__header-wrapper {
            background-color: #000;
            font-size: 14px;

            tr {
              // color: #000;
            }
          }

          .el-table__row {
            height: 50px;
            font-size: 14px;
            // color: #000;
            .cell {
              display: flex;
              flex-direction: column;
              .selBM {
                margin: 5px 0;
                text-align: center;
                border: 1px solid rgb(0, 97, 255);
                width: 100px;
                height: 32px;
                line-height: 30px;
                cursor: pointer;
                border-radius: 5px;
                background-color: rgba(235, 242, 255, 1);
                color: rgba(0, 97, 255, 1);
              }
              .rolesSel {
                display: flex;
                flex-wrap: wrap;
                margin: 10px 0;
                width: 85%;
                .el-tag {
                  margin: 0 3px 3px 0;
                }
              }
            }

            &:hover {
              td {
                background-color: rgb(255, 255, 255);
              }
            }
          }

          .el-table__row td {
            padding: 0;
            border: 0;
            border-bottom: 1px solid rgba(230, 230, 230, 1);
            .cell {
              display: flex;
              justify-content: center;
            }
          }

          .el-button--primary {
            margin-left: 5px;
          }

          .el-table__body .even {
            background-color: #fff;
          }

          .el-table__body .odd {
            background-color: rgba(240, 243, 247, 1);
          }

          .defrost {
            padding: 0 10px;
            color: rgba(30, 125, 251, 1);
            cursor: pointer;
          }
        }
      }
    }
  }

  // 请选择部门
  :deep(.moveMemberDialog) {
    // height: 600px;
    overflow: hidden;
    border-radius: 11px;

    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(245, 249, 255, 1);
      font-weight: 600;
      height: 60px;
      padding: 0 20px;
      line-height: 60px;
      margin: 0;
      border-bottom: 1px solid rgba(230, 230, 230, 1);

      .el-dialog__headerbtn {
        outline: none;
      }
    }

    .el-dialog__body {
      padding: 0px 20px 20px 20px;
      height: 550px;
      // display: flex;
      // flex-direction: column-reverse;
      .move {
        display: flex;
        .moveLeft {
          width: 280px;
          height: 96%;
          margin: 20px 20px 0 0;
          border-radius: 8px;
          .searchTree {
            width: 220px;
            margin-bottom: 8px;
            .el-input__wrapper {
              background-color: rgba(230, 230, 230, 1);
            }
          }
          // box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
          .el-tree {
            height: 430px;
            // border: 1px solid red;
            overflow: auto;
          }
          .el-tree-node__content {
            .custom-tree-node {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 14px;
              padding-right: 8px;
              .title {
                display: flex;
                align-items: center;
              }
              img {
                width: 1.2em;
                height: 1.2em;
                margin: 0 5px 0 0;
              }
            }
          }
        }
        .moveRight {
          margin: 20px 0 0 0;
          flex: 1;
          .sel {
            margin-bottom: 10px;
          }
          ul {
            // width: 316px;
            height: 450px;
            list-style: none;
            padding: 0;
            margin: 0;
            border-left: 1px solid rgba(230, 230, 230, 1);
            box-sizing: border-box;
            overflow: auto;

            li {
              display: flex;
              justify-content: space-between;
              padding-right: 17px;
              align-items: center;
              margin-top: 5px;

              .el-icon-close {
                cursor: pointer;
                width: 10px;
                height: 10px;
              }
            }
          }
        }
      }
      .options {
        margin: 15px 0;
        display: flex;
        flex-direction: row-reverse;
        .queding {
          margin-left: 20px;
        }
      }

      .option {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin: 10px 0;

        .queding {
          margin-left: 20px;
        }
      }
    }
  }

  // 菜单权限按钮
  :deep(.pushSetDialog) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 0 30px 10px 30px;
      .trees {
        display: flex;
        justify-content: center;
        padding: 25px 0;
        // border-bottom: 1px solid rgba(204, 204, 204, 1);
      }

      .tree {
        .tree-left {
          width: 316px;
          height: 44px;
          padding: 0 10px;
          background: rgba(240, 243, 247, 1);
          border: 1px solid rgba(230, 230, 230, 1);
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: row-reverse;
        }
      }

      .el-tree {
        width: 316px;
        height: 324px;
        border: 1px solid rgba(230, 230, 230, 1);
        box-sizing: border-box;
        padding-left: 9px;
        overflow: auto;
        .el-tree-node {
          &:nth-child(1) {
            margin-top: 10px;
          }
          margin-bottom: 10px;
          .el-tree-node__content {
            .el-icon {
              display: none;
            }
          }
        }
      }

      ul {
        width: 316px;
        height: 324px;
        list-style: none;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(230, 230, 230, 1);
        box-sizing: border-box;
        overflow: auto;

        li {
          display: flex;
          justify-content: space-between;
          padding-right: 17px;
          align-items: center;
          margin-top: 5px;

          .el-icon-close {
            cursor: pointer;
            width: 10px;
            height: 10px;
          }
        }
      }

      .options {
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        padding: 16px 0;

        .queding {
          margin-left: 20px;
          color: #fff;
        }
      }
    }
  }

  // 批量添加
  :deep(.AddMember) {
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 20px 0;
      .addMember {
        width: 100%;
        // box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);

        .content {
          padding: 0 30px;
          margin: 10px 0 0 0;
          .form {
            // height: 98%;
            // overflow: auto;
            .startImport {
              .el-button {
                width: 500px;
                height: 35px;
              }
              .downLoad {
                color: rgba(0, 97, 255, 1);
                font-size: 14px;
                margin-left: 15px;
                cursor: pointer;
              }
            }
            .tableTitle {
              font-size: 14px;
              margin-top: 10px;
            }
            .footer {
              width: 99%;
              margin: 10px auto 15px;

              .el-table--fit {
                height: 100%;

                .el-table__header-wrapper {
                  background-color: #000;
                  font-size: 14px;

                  tr {
                    // color: #000;
                  }
                }

                .el-table__row {
                  height: 45px;
                  font-size: 14px;
                  // color: #000;
                  &:hover {
                    td {
                      background-color: rgba(223, 236, 254, 1);
                    }
                  }
                }

                :deep(.el-table__row):nth-child(2n) {
                  .el-table-fixed-column--right {
                    background-color: rgba(240, 243, 247, 1);
                  }
                }

                :deep(.el-table__row td) {
                  padding: 0;
                  border: 0;
                }

                .el-button--primary {
                  margin-left: 5px;
                }

                :deep(.el-table__body .even) {
                  background-color: #fff;
                }

                :deep(.el-table__body .odd) {
                  background-color: rgba(240, 243, 247, 1);
                }

                .look {
                  padding: 0 10px;
                  cursor: pointer;
                  color: rgba(30, 125, 251, 1);
                }
              }
              .pageSize {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 20px 30px 0;

                span {
                  color: #000;
                }

                .el-pagination {
                  // width: 1600px;
                  .el-pagination__total {
                    color: #000;
                  }

                  .el-pagination__goto {
                    color: #000;
                  }

                  .el-pagination__classifier {
                    color: #000;
                  }
                  .el-input__wrapper {
                    border: 1px solid rgba(0, 0, 0, 1);
                    border-radius: 5px;
                    box-shadow: none;
                  }

                  .el-pager li {
                    margin: 0 5px;
                    border: 1px solid rgba(0, 0, 0, 1);
                    border-radius: 5px;
                    background-color: transparent;
                  }

                  .el-pager li.is-active {
                    // background-color: rgba(0, 97, 255, 0.8);
                    border: 1px solid rgba(0, 97, 255, 1);
                    color: rgba(0, 97, 255, 1);
                  }

                  .btn-prev {
                    margin-right: 5px;
                    border: 1px solid rgba(0, 0, 0, 1);
                    border-radius: 5px;
                    background-color: transparent;
                  }

                  .btn-next {
                    margin-left: 5px;
                    border: 1px solid rgba(0, 0, 0, 1);
                    border-radius: 5px;
                    background-color: transparent;
                  }
                }
              }
            }
          }
          // 整个滚动条
          .form::-webkit-scrollbar-track {
            background-color: #daeeff;
          }
          // 滚动条的滚动区域（轨道）
          .form::-webkit-scrollbar {
            background-color: #0888f8;
            height: 3px;
            width: 4px;
          }
          // 滚动条的可拖拽部分（滑块）
          // .form::-webkit-scrollbar-thumb {
          //   background: #57b2ff;
          //   border-radius: 4px;
          //   height: 3px;
          //   width: 4px;
          // }
        }
      }
    }
  }

  // 添加管理按钮
  :deep(.addManagerDialog) {
    // height: 600px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 0 30px 10px 30px;
      height: 600px;
      .tree_pushSet {
        height: 600px;
      }
      .trees {
        display: flex;
        justify-content: center;
        padding: 25px 0 10px 0;
        height: 500px;
        border-bottom: 1px solid rgba(204, 204, 204, 1);
      }

      .tree {
        height: 100%;
        .tree-left {
          width: 316px;
          height: 44px;
          background: rgba(240, 243, 247, 1);
          // border: 1px solid rgba(230, 230, 230, 1);
          font-size: 16px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          // flex-direction: row-reverse;
        }
        ul {
          width: 316px;
          height: calc(100% - 44px);
          list-style: none;
          padding: 0;
          margin: 0;
          // border: 1px solid rgba(230, 230, 230, 1);
          box-sizing: border-box;
          overflow: auto;

          .infinite-list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid rgba(230, 230, 230, 1);
            cursor: pointer;
            &:hover {
              background-color: rgba(230, 230, 230, 1);
            }
          }

          .loadMore {
            // width: 100%;
            display: flex;
            align-items: center;
            padding: 10px 0;
            justify-content: center;
          }
        }
      }
      .selTree {
        .title {
          margin-left: 10px;
          font-size: 16px;
        }
        ul {
          width: 316px;
          height: 100%;
          list-style: none;
          padding: 0;
          margin: 0 0 0 15px;
          border-left: 1px solid rgba(230, 230, 230, 1);
          box-sizing: border-box;
          overflow: auto;

          li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
            .el-icon {
              cursor: pointer;
              width: 16px;
              height: 16px;
            }
          }
        }
      }

      .el-tree {
        width: 316px;
        height: calc(100% - 44px);
        border-right: 1px solid rgba(230, 230, 230, 1);
        // border-left: 1px solid rgba(230, 230, 230, 1);
        box-sizing: border-box;
        padding-left: 9px;
        overflow: auto;
        .el-tree-node {
          .el-tree-node__content {
            .el-icon {
              // display: none;
            }
            .custom-tree-node {
              .title {
                display: flex;
                align-items: center;
                img {
                  width: 18px;
                  height: 18px;
                  margin-right: 2px;
                }
                .nodeClick {
                  color: rgba(0, 97, 255, 1);
                }
              }
            }
          }
        }
      }

      .options {
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        padding: 16px 0;

        .queding {
          margin-left: 20px;
          color: #fff;
        }
      }
    }
  }
}
</style>