|
|
@@ -0,0 +1,1650 @@
|
|
|
+<template>
|
|
|
+ <div class="role_management">
|
|
|
+ <el-main class="content">
|
|
|
+ <SplitArea class="left">
|
|
|
+ <div class="title">
|
|
|
+ 角色配置
|
|
|
+ <kt-button
|
|
|
+ icon="fa fa-plus"
|
|
|
+ :label="'新增'"
|
|
|
+ perms="sys:role:add"
|
|
|
+ type="primary"
|
|
|
+ @click="handleAdd"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="search">
|
|
|
+ <el-input
|
|
|
+ placeholder="搜索角色权限名称"
|
|
|
+ v-model="searchRole"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <div class="search_icon" @click="searRoleList">
|
|
|
+ <img src="@/assets/image/search.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="role_list">
|
|
|
+ <div
|
|
|
+ class="role"
|
|
|
+ v-for="(item, index) in pageResult"
|
|
|
+ :key="index"
|
|
|
+ @click="handleRoleClick(item, index)"
|
|
|
+ :class="roleIndex == index ? 'active' : ''"
|
|
|
+ >
|
|
|
+ <div class="role_name">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div class="icon_box">
|
|
|
+ <img
|
|
|
+ src="@/assets/image/edit.png"
|
|
|
+ alt=""
|
|
|
+ @click.stop="roleEdit(item)"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="@/assets/image/delete.png"
|
|
|
+ alt=""
|
|
|
+ @click.stop="roleDelete(item)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination
|
|
|
+ small
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="totalPages"
|
|
|
+ :page-size="20"
|
|
|
+ @current-change="handleLeftCurrentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </SplitArea>
|
|
|
+ <SplitArea class="right">
|
|
|
+ <div class="option">
|
|
|
+ <div
|
|
|
+ class="title"
|
|
|
+ :class="rightCurrentIndex == index ? 'active' : ''"
|
|
|
+ v-for="(item, index) in rightTitle"
|
|
|
+ :key="index"
|
|
|
+ @click="changeOption(index)"
|
|
|
+ >
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="rightCurrentIndex == 0">
|
|
|
+ <!-- 筛选区域Start -->
|
|
|
+ <div class="queryFrom">
|
|
|
+ <el-form ref="queryFormRef" :model="queryFrom" label-width="auto">
|
|
|
+ <div class="queryFrom_option">
|
|
|
+ <el-form-item label="姓名">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入姓名"
|
|
|
+ v-model="queryFrom.name"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="queryFrom_option">
|
|
|
+ <el-form-item label="手机号">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ v-model="queryFrom.tel"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="queryFrom_option">
|
|
|
+ <el-form-item label="部门名称">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入部门名称"
|
|
|
+ v-model="queryFrom.deptName"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="queryFrom_option">
|
|
|
+ <div class="search" @click="searchRightList">查询</div>
|
|
|
+ <div class="add" @click="memberAdd">新增</div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <!-- 筛选区域End -->
|
|
|
+ <!-- 表格start -->
|
|
|
+ <div class="table">
|
|
|
+ <el-table
|
|
|
+ :data="rightpageResult"
|
|
|
+ border
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ height="100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="deptId" label="部门编码" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="deptName" label="部门名称" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="id" label="工号" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="姓名" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="mobile" label="联系电话" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="roleName" label="角色" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="操作" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div @click="memberEdit(scope.row)">
|
|
|
+ <img src="@/assets/image/edit.png" alt="" />配置角色
|
|
|
+ </div>
|
|
|
+ <div @click="memberDelete(scope.row)">
|
|
|
+ <img src="@/assets/image/delete.png" alt="" />删除
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="10"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="rightTotal"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 功能权限区域 start -->
|
|
|
+ <div class="jurisdiction_box" v-show="rightCurrentIndex == 1">
|
|
|
+ <div class="jurisdiction_btn">
|
|
|
+ <el-checkbox
|
|
|
+ :indeterminate="isIndeterminate"
|
|
|
+ v-model="checkAll"
|
|
|
+ @change="handleCheckAllChange"
|
|
|
+ >全选</el-checkbox
|
|
|
+ >
|
|
|
+ <div class="btn">
|
|
|
+ <el-button size="small" type="primary" @click="resetSelection"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary" @click="submitAuthForm"
|
|
|
+ >提交</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 功能权限组件 -->
|
|
|
+ <VueTreeToTable
|
|
|
+ :origin-data="menuData"
|
|
|
+ :table-columns="tableColumns"
|
|
|
+ show-checkbox
|
|
|
+ :checkStrictly="false"
|
|
|
+ :isShowTableHead="false"
|
|
|
+ :isFold="true"
|
|
|
+ ref="menuTree"
|
|
|
+ :key="refreshComponent"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- 功能权限区域 end -->
|
|
|
+ </SplitArea>
|
|
|
+ </el-main>
|
|
|
+ <!-- 左侧角色新增修改弹窗start -->
|
|
|
+ <el-dialog :visible.sync="dialogVisible" title="角色配置新增">
|
|
|
+ <div>
|
|
|
+ <!-- <div class="title"></div> -->
|
|
|
+ <div class="addTitle"><span></span>角色信息</div>
|
|
|
+ <div class="input_data">
|
|
|
+ <div class="inp">
|
|
|
+ <span>角色名</span>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入角色名"
|
|
|
+ v-model="roleData.name"
|
|
|
+ @input="changeName($event)"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="inp text">
|
|
|
+ <span>备注</span>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ type="textarea"
|
|
|
+ :rows="2"
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入备注"
|
|
|
+ v-model="roleData.remark"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog_footer">
|
|
|
+ <el-button size="small" @click.native="dialogVisible = false">{{
|
|
|
+ $t("action.cancel")
|
|
|
+ }}</el-button>
|
|
|
+ <el-button size="small" type="primary" @click.native="submitForm">{{
|
|
|
+ $t("action.submit")
|
|
|
+ }}</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 左侧角色新增修改弹窗end -->
|
|
|
+ <!-- 右侧角色配置弹窗start -->
|
|
|
+ <el-dialog
|
|
|
+ title="角色配置"
|
|
|
+ width="800px"
|
|
|
+ :visible.sync="rightDialogVisible"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div class="addTitle"><span></span>人员信息</div>
|
|
|
+ <div class="input_data people">
|
|
|
+ <div class="inp">
|
|
|
+ <span>部门编码</span>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入部门编码"
|
|
|
+ v-model="rightRoleData.deptId"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="inp">
|
|
|
+ <span>部门名称</span>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入部门名称"
|
|
|
+ v-model="rightRoleData.deptName"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="inp">
|
|
|
+ <span>员工工号</span>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入员工工号"
|
|
|
+ v-model="rightRoleData.id"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="inp">
|
|
|
+ <span>姓名</span>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入姓名"
|
|
|
+ v-model="rightRoleData.name"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="inp">
|
|
|
+ <span>邮箱</span>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入邮箱"
|
|
|
+ v-model="rightRoleData.email"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="inp">
|
|
|
+ <span>电话</span>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入电话"
|
|
|
+ v-model="rightRoleData.mobile"
|
|
|
+ disabled
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="separation"></div>
|
|
|
+ <div class="addTitle"><span></span>人员信息</div>
|
|
|
+ <div class="input_data people">
|
|
|
+ <div class="inp">
|
|
|
+ <span>角色权限</span>
|
|
|
+ <el-select
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ v-model="rightRoleData.roleId"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="changeRole($event)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ :label="roleItem.name"
|
|
|
+ :value="roleItem.id"
|
|
|
+ v-for="(roleItem, roleIndex) in roleoptions"
|
|
|
+ :key="roleIndex"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="inp">
|
|
|
+ <span>树权限</span>
|
|
|
+ <el-select
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ v-model="rightRoleData.showLevel"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="changeTree($event)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(val, index) in treeOptions"
|
|
|
+ :label="val.dictTag"
|
|
|
+ :value="val.dictValue"
|
|
|
+ :key="index"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="inp">
|
|
|
+ <span>拨号权限</span>
|
|
|
+ <el-select
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ v-model="rightRoleData.isDial"
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="refreshData"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(val, index) in isDialOptions"
|
|
|
+ :label="val.label"
|
|
|
+ :value="val.value"
|
|
|
+ :key="index"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="inp">
|
|
|
+ <span>拨号权限账号</span>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入拨号权限账号"
|
|
|
+ v-model="rightRoleData.dialUserName"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="inp">
|
|
|
+ <span>拨号权限密码</span>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入拨号权限密码"
|
|
|
+ v-model="rightRoleData.dialPassWord"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="inp"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="closeDialog">取消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="submitRole"
|
|
|
+ >提交</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 右侧角色配置弹窗end -->
|
|
|
+ <!-- 右侧角色成员新增弹窗start -->
|
|
|
+ <el-dialog title="角色成员新增" width="70%" :visible.sync="isAddMember">
|
|
|
+ <el-main>
|
|
|
+ <Split>
|
|
|
+ <!-- 左侧树start -->
|
|
|
+ <SplitArea size="30%">
|
|
|
+ <div class="tree_left">
|
|
|
+ <tree
|
|
|
+ :setting="ztreeSetting"
|
|
|
+ :nodes="ztreeNodes"
|
|
|
+ @onClick="onZTreeClick"
|
|
|
+ @onCreated="onZTreeCreated"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </SplitArea>
|
|
|
+ <!-- 左侧树end -->
|
|
|
+ <!-- 右侧表格start -->
|
|
|
+ <SplitArea size="70%">
|
|
|
+ <!-- 筛选区域 -->
|
|
|
+ <div class="tree_left tree_right">
|
|
|
+ <el-form
|
|
|
+ ref="queryFormRef"
|
|
|
+ :model="memberqueryFrom"
|
|
|
+ label-width="auto"
|
|
|
+ >
|
|
|
+ <div class="queryFrom_option">
|
|
|
+ <el-form-item label="姓名">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入姓名"
|
|
|
+ v-model="memberqueryFrom.name"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="queryFrom_option">
|
|
|
+ <el-form-item label="手机号">
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ v-model="memberqueryFrom.tel"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="queryFrom_option">
|
|
|
+ <div class="search" @click="searchMemberList">查询</div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <!-- 表格区域 -->
|
|
|
+ <div class="table_box">
|
|
|
+ <el-table
|
|
|
+ :row-key="getRowKeyOfTarget"
|
|
|
+ ref="multipleTable"
|
|
|
+ :data="memberPageResult"
|
|
|
+ border
|
|
|
+ style="width: 100%; height: 100%"
|
|
|
+ height="100%"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ :reserve-selection="true"
|
|
|
+ type="selection"
|
|
|
+ width="55"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ label="序号"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="deptId"
|
|
|
+ label="部门编码"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="deptName"
|
|
|
+ label="部门名称"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="id" label="工号" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="姓名" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="mobile"
|
|
|
+ label="联系电话"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleMmberSizeChange"
|
|
|
+ @current-change="handleMemberCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="10"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="memberTotal"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </SplitArea>
|
|
|
+ <!-- 右侧表格end -->
|
|
|
+ </Split>
|
|
|
+ </el-main>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="closeMemberDialog">取消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="submitMember"
|
|
|
+ >提交</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 右侧角色成员新增弹窗end -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Cookies from "js-cookie";
|
|
|
+import KtButton from "@/views/Core/KtButton";
|
|
|
+import tree from "@/components/ztree.vue"; // 机构树组件
|
|
|
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
|
|
|
+import VueTreeToTable from "vue-tree-to-table";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ KtButton,
|
|
|
+ KtCommonTable,
|
|
|
+ tree,
|
|
|
+ VueTreeToTable,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchRole: null,
|
|
|
+ pageResult: [],
|
|
|
+ pageRequest: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ columnFilters: {
|
|
|
+ name: {
|
|
|
+ name: "name",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ roleIndex: null,
|
|
|
+ rightpageRequest: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ columnFilters: {
|
|
|
+ deptid: {
|
|
|
+ name: "deptid",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ containsSubDept: {
|
|
|
+ name: "containsSubDept",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ usertype: {
|
|
|
+ name: "usertype",
|
|
|
+ value: "A",
|
|
|
+ },
|
|
|
+ status: {
|
|
|
+ name: "status",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ id: {
|
|
|
+ name: "id",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ name: {
|
|
|
+ name: "name",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ mobile: {
|
|
|
+ name: "mobile",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ roleId: {
|
|
|
+ name: "roleId",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ deptName: {
|
|
|
+ name: "deptName",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ name: "",
|
|
|
+ },
|
|
|
+ totalPages: null,
|
|
|
+ rightTitle: [
|
|
|
+ {
|
|
|
+ title: "角色成员",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "功能权限",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ rightCurrentIndex: 0,
|
|
|
+ // 右侧列表查询数据Start
|
|
|
+ queryFrom: {},
|
|
|
+ rightpageResult: [],
|
|
|
+ peopleid: "",
|
|
|
+ peopledeptid: "",
|
|
|
+ currentPage: null,
|
|
|
+ rightTotal: null,
|
|
|
+ dialogVisible: false,
|
|
|
+ //左侧角色新增信息
|
|
|
+ roleData: {
|
|
|
+ name: "",
|
|
|
+ remark: "",
|
|
|
+ },
|
|
|
+ rightDialogVisible: false, //右侧角色配置弹窗
|
|
|
+ dataForm: {},
|
|
|
+ roleoptions: [], //角色配置--角色权限下拉框
|
|
|
+ treeOptions: [], //角色配置--树权限下拉框
|
|
|
+ //角色配置--拨号权限下拉框
|
|
|
+ isDialOptions: [
|
|
|
+ {
|
|
|
+ label: "关闭",
|
|
|
+ value: "0",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "开启",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ rightRoleData: {
|
|
|
+ remark: "",
|
|
|
+ roleId: "",
|
|
|
+ dialUserName: "",
|
|
|
+ dialPassWord: "",
|
|
|
+ isDial: "0",
|
|
|
+ },
|
|
|
+ isAddMember: false,
|
|
|
+ //结构树数据
|
|
|
+ ztreeNodes: [],
|
|
|
+ //结构树配置
|
|
|
+ ztreeSetting: {
|
|
|
+ check: {
|
|
|
+ enable: false,
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ simpleData: {
|
|
|
+ enable: true,
|
|
|
+ pIdKey: "parentId",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ view: {
|
|
|
+ showIcon: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //成员弹窗配置
|
|
|
+ memberRequest: {
|
|
|
+ //查询的默认条件
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ columnFilters: {
|
|
|
+ deptid: {
|
|
|
+ name: "deptid",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ containsSubDept: {
|
|
|
+ name: "containsSubDept",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ usertype: {
|
|
|
+ name: "usertype",
|
|
|
+ value: "A",
|
|
|
+ },
|
|
|
+ status: {
|
|
|
+ name: "status",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ id: {
|
|
|
+ name: "id",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ name: {
|
|
|
+ name: "name",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ mobile: {
|
|
|
+ name: "mobile",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ memmberPageResult: {},
|
|
|
+ /*新增角色成员弹窗相关 start*/
|
|
|
+ memberPageResult: [],
|
|
|
+ memberqueryFrom: {},
|
|
|
+ memberPageRequest: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ columnFilters: {
|
|
|
+ deptid: {
|
|
|
+ name: "deptid",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ containsSubDept: {
|
|
|
+ name: "containsSubDept",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ usertype: {
|
|
|
+ name: "usertype",
|
|
|
+ value: "A",
|
|
|
+ },
|
|
|
+ status: {
|
|
|
+ name: "status",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ id: {
|
|
|
+ name: "id",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ name: {
|
|
|
+ name: "name",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ mobile: {
|
|
|
+ name: "mobile",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ roleId: {
|
|
|
+ name: "roleId",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ deptName: {
|
|
|
+ name: "deptName",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ currentTreeNode: null,
|
|
|
+ memberTotal: null,
|
|
|
+ addMemberData: {
|
|
|
+ roleId: "",
|
|
|
+ userIds: [],
|
|
|
+ },
|
|
|
+ //新增成员弹窗相关 end
|
|
|
+ //右侧功能权限配置相关 start
|
|
|
+ menuData: [],
|
|
|
+ tableData: [],
|
|
|
+ tableColumns: [],
|
|
|
+ isIndeterminate: false,
|
|
|
+ checkAll: false,
|
|
|
+ jurisdictionroleId: "",
|
|
|
+ jurisdictionroleName: "",
|
|
|
+ subData: [],
|
|
|
+ refreshComponent: 0,
|
|
|
+ //右侧功能权限配置相关 end
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //角色列表点击事件
|
|
|
+ handleRoleClick(item, index) {
|
|
|
+ this.jurisdictionroleId = item.id;
|
|
|
+ this.jurisdictionroleName = item.name;
|
|
|
+
|
|
|
+ this.rightpageRequest.columnFilters.roleId.value = item.id;
|
|
|
+ this.addMemberData.roleId = item.id;
|
|
|
+ this.roleIndex = index;
|
|
|
+ this.findPage();
|
|
|
+ this.getjurisdictionList();
|
|
|
+ },
|
|
|
+ //获取左侧列表
|
|
|
+ getRoleList() {
|
|
|
+ this.$api.role.findPage(this.pageRequest).then((res) => {
|
|
|
+ this.pageResult = res.data.content;
|
|
|
+ this.totalPages = res.data.totalSize;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //搜索左侧列表
|
|
|
+ searRoleList() {
|
|
|
+ this.pageRequest.columnFilters.name.value = this.searchRole;
|
|
|
+ this.getRoleList();
|
|
|
+ },
|
|
|
+ handleLeftCurrentChange(val) {
|
|
|
+ this.pageRequest.pageNum = val;
|
|
|
+ this.getRoleList();
|
|
|
+ },
|
|
|
+ //删除左侧角色
|
|
|
+ roleDelete(item) {
|
|
|
+ this.$confirm("确认删除选中记录吗？", "提示", {
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ let data = [];
|
|
|
+ data.push({ id: item.id });
|
|
|
+ this.$api.role.batchDelete(data).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({ message: "删除成功", type: "success" });
|
|
|
+ this.getRoleList();
|
|
|
+ } else {
|
|
|
+ this.$message({ message: "操作失败, " + res.msg, type: "error" });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ //左侧角色信息修改
|
|
|
+ roleEdit(item) {
|
|
|
+ this.roleData = {};
|
|
|
+ this.dialogVisible = true;
|
|
|
+ // this.roleData.id = item.id;
|
|
|
+ // this.roleData.name = item.name;
|
|
|
+ // this.roleData.remark = item.remark;
|
|
|
+ this.roleData = Object.assign({}, item);
|
|
|
+ },
|
|
|
+ //获取权限列表
|
|
|
+ getjurisdictionList() {
|
|
|
+ let allMenus = [];
|
|
|
+ this.deletecheckAllMenu(this.menuData, allMenus);
|
|
|
+ this.$api.role
|
|
|
+ .findRoleMenus({ roleId: this.jurisdictionroleId })
|
|
|
+ .then((res) => {
|
|
|
+ let temp = res.data;
|
|
|
+ this.compare(this.menuData, temp);
|
|
|
+ // this.menuLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ compare(menuData, temp) {
|
|
|
+ let temp1 = temp;
|
|
|
+ temp1.forEach((item) => {
|
|
|
+ menuData.forEach((tree) => {
|
|
|
+ if (tree.id == item.id) {
|
|
|
+ tree.isChecked = true;
|
|
|
+ } else {
|
|
|
+ if (tree.chidrenList.length > 0) {
|
|
|
+ this.children(tree.chidrenList, item.id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ children(chidrenList, id) {
|
|
|
+ chidrenList.forEach((item) => {
|
|
|
+ if (item.id == id) {
|
|
|
+ item.isChecked = true;
|
|
|
+ } else {
|
|
|
+ this.children(item.chidrenList, id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 角色菜单授权提交
|
|
|
+ submitAuthForm() {
|
|
|
+ this.subData = []
|
|
|
+ if ("admin" == this.jurisdictionroleName) {
|
|
|
+ this.$message({
|
|
|
+ message: "超级管理员拥有所有菜单权限，不允许修改！",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let selectData = this.$refs.menuTree.getCheckedNodeList();
|
|
|
+ selectData.forEach(element => {
|
|
|
+ let roleMenu = { roleId: this.jurisdictionroleId, menuId: element.id };
|
|
|
+ this.subData.push(roleMenu);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$api.role.saveRoleMenus(this.subData).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({ message: "操作成功", type: "success" });
|
|
|
+ this.getjurisdictionList()
|
|
|
+ } else {
|
|
|
+ this.$message({ message: "操作失败, " + res.msg, type: "error" });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //切换右侧
|
|
|
+ changeOption(index) {
|
|
|
+ this.rightCurrentIndex = index;
|
|
|
+ },
|
|
|
+ // 右侧列表的方法Start
|
|
|
+ findPage() {
|
|
|
+ // 获取分页数据;
|
|
|
+ // if (data && data.pageRequest) {
|
|
|
+ // this.pageRequest.pageNum = data.pageRequest.pageNum;
|
|
|
+ // this.pageRequest.pageSize = data.pageRequest.pageSize;
|
|
|
+ // }
|
|
|
+ this.$api.user.userQueryPage(this.rightpageRequest).then((res) => {
|
|
|
+ this.rightTotal = res.data.totalSize;
|
|
|
+ if (res.code == 200) {
|
|
|
+ //角色权限过滤转换
|
|
|
+ res.data.content.forEach((item) => {
|
|
|
+ item.roleId = Number(item.roleId);
|
|
|
+ });
|
|
|
+ this.rightpageResult = res.data.content;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // .then(data != null ? data.callback : "");
|
|
|
+ },
|
|
|
+ handleTableEdit(params) {
|
|
|
+ // this.dataForm = Object.assign({}, params.row)
|
|
|
+ // this.dataForm.isDial=this.dataForm.isDial==null?'0':'1';
|
|
|
+ // this.dataForm.showLevel=this.dataForm.showLevel=='null' || this.dataForm.showLevel==null?'subordinate':this.dataForm.showLevel
|
|
|
+ // this.dialogVisible = true
|
|
|
+ },
|
|
|
+ // 查询Start
|
|
|
+ searchRightList() {
|
|
|
+ this.rightpageRequest.columnFilters.name.value = this.queryFrom.name;
|
|
|
+ this.rightpageRequest.columnFilters.mobile.value = this.queryFrom.tel;
|
|
|
+ this.rightpageRequest.columnFilters.deptName.value =
|
|
|
+ this.queryFrom.deptName;
|
|
|
+ this.rightpageRequest.pageNum = 1;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.rightpageRequest.pageSize = val;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.rightpageRequest.pageNum = val;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ this.roleData = {};
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ //新增角色
|
|
|
+ submitForm() {
|
|
|
+ this.$confirm("确认提交吗？", "提示", {}).then(() => {
|
|
|
+ // let params = Object.assign({}, this.dataForm);
|
|
|
+ this.$api.role.save(this.roleData).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({ message: "操作成功", type: "success" });
|
|
|
+ this.dialogVisible = false;
|
|
|
+ // this.$refs["dataForm"].resetFields();
|
|
|
+ this.getRoleList()
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: "操作失败, " + res.msg,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.getRoleList();
|
|
|
+ this.findPage(null);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取角色权限下拉框内容
|
|
|
+ getRoles() {
|
|
|
+ this.$api.role
|
|
|
+ .findAll()
|
|
|
+ .then((res) => {
|
|
|
+ this.roleoptions = res.data;
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.roleoptions = [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //获取树权限下拉框内容
|
|
|
+ dictList() {
|
|
|
+ this.$api.dict.dictList().then((res) => {
|
|
|
+ let dataArr = res.filter((item) => {
|
|
|
+ return item.dictType == "treeShowLevelEnum";
|
|
|
+ });
|
|
|
+ dataArr.length > 0 ? (this.treeOptions = dataArr[0].ddList) : "";
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //成员配置
|
|
|
+ memberEdit(row) {
|
|
|
+ this.rightDialogVisible = true;
|
|
|
+ this.rightRoleData.deptId = row.deptId;
|
|
|
+ this.rightRoleData.deptName = row.deptName;
|
|
|
+ this.rightRoleData.id = row.id;
|
|
|
+ this.rightRoleData.name = row.name;
|
|
|
+ this.rightRoleData.email = row.email;
|
|
|
+ this.rightRoleData.mobile = row.mobile;
|
|
|
+ this.rightRoleData.roleId = row.roleId;
|
|
|
+ row.showLevel.length > 0
|
|
|
+ ? (this.rightRoleData.showLevel = row.showLevel)
|
|
|
+ : (this.rightRoleData.showLevel = "subordinate");
|
|
|
+ this.rightRoleData.isDial = row.isDial;
|
|
|
+ this.rightRoleData.dialUserName = row.dialUserName;
|
|
|
+ this.rightRoleData.dialPassWord = row.dialPassWord;
|
|
|
+ },
|
|
|
+ //删除成员
|
|
|
+ memberDelete(row) {
|
|
|
+ if (row.roleName) {
|
|
|
+ this.$confirm("确认删除选中记录吗？", "提示", {
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ let data = {};
|
|
|
+ data.userId = row.id;
|
|
|
+ this.$api.user.deleteUserRole(data).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({ message: "删除成功", type: "success" });
|
|
|
+ // this.getRoleList();
|
|
|
+ this.findPage();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: "操作失败, " + res.msg,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ } else {
|
|
|
+ this.$message({ message: "该用户未分配角色，无法删除", type: "error" });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleDialogBefore() {},
|
|
|
+ closeDialog() {
|
|
|
+ this.rightDialogVisible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // //角色权限
|
|
|
+ // changeRole(roleid) {
|
|
|
+ // this.rightRoleData.roleId = roleid;
|
|
|
+ // },
|
|
|
+ // // //树权限
|
|
|
+ changeTree(val) {
|
|
|
+ this.rightRoleData.showLevel = val;
|
|
|
+ },
|
|
|
+ // //拨号权限
|
|
|
+ refreshData(val) {
|
|
|
+ this.rightRoleData.isDial = val;
|
|
|
+ },
|
|
|
+ //右侧配置角色信息提交
|
|
|
+ submitRole() {
|
|
|
+ this.$confirm("确认提交吗？", "提示", {})
|
|
|
+ .then(() => {
|
|
|
+ this.$api.user
|
|
|
+ .saveUserRole({
|
|
|
+ roleId: this.rightRoleData.roleId,
|
|
|
+ userId: this.rightRoleData.id,
|
|
|
+ showLevel: this.rightRoleData.showLevel,
|
|
|
+ isDial: this.rightRoleData.isDial,
|
|
|
+ dialUserName: this.rightRoleData.dialUserName,
|
|
|
+ dialPassWord: this.rightRoleData.dialPassWord,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ message: "操作成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.findPage(null);
|
|
|
+ this.rightDialogVisible = false;
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: "操作失败",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消提交",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //--left tree start-------
|
|
|
+ findLeftTreeData: function () {
|
|
|
+ // 获取数据
|
|
|
+ this.$api.dept.findTree().then((res) => {
|
|
|
+ this.ztreeNodes = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onZTreeCreated: function (ztreeObj) {
|
|
|
+ this.ztreeObj = ztreeObj;
|
|
|
+ // onCreated 中操作ztreeObj对象展开第一个节点
|
|
|
+ ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
|
|
|
+ this.currentTreeNode = ztreeObj.getNodes()[0];
|
|
|
+ },
|
|
|
+ onZTreeClick: function (evt, treeId, treeNode) {
|
|
|
+ // 点击事件
|
|
|
+ this.currentTreeNode = treeNode;
|
|
|
+ this.memberPageRequest.columnFilters.deptid.value =
|
|
|
+ this.currentTreeNode.id;
|
|
|
+ this.getMemberList();
|
|
|
+ },
|
|
|
+ //--left tree end-------
|
|
|
+ //右侧角色成员新增谈窗相关 start
|
|
|
+ //获取成员列表
|
|
|
+ getMemberList() {
|
|
|
+ this.$api.user.userQueryPage(this.memberPageRequest).then((res) => {
|
|
|
+ this.memberTotal = res.data.totalSize;
|
|
|
+ if (res.code == 200) {
|
|
|
+ //角色权限过滤转换
|
|
|
+ res.data.content.forEach((item) => {
|
|
|
+ item.roleId = Number(item.roleId);
|
|
|
+ });
|
|
|
+ this.memberPageResult = res.data.content;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //查询成员列表
|
|
|
+ searchMemberList() {
|
|
|
+ this.memberPageRequest.columnFilters.name.value =
|
|
|
+ this.memberqueryFrom.name;
|
|
|
+ this.memberPageRequest.columnFilters.mobile.value =
|
|
|
+ this.memberqueryFrom.tel;
|
|
|
+ this.memberPageRequest.pageNum = 1;
|
|
|
+ this.getMemberList();
|
|
|
+ },
|
|
|
+ // 获取每个item的唯一标识index
|
|
|
+ getRowKeyOfTarget(row) {
|
|
|
+ return row.id;
|
|
|
+ },
|
|
|
+ //新增成员弹窗显示
|
|
|
+ memberAdd() {
|
|
|
+ if (this.addMemberData.roleId == "") {
|
|
|
+ this.$message.error("请选择左侧角色");
|
|
|
+ } else {
|
|
|
+ this.isAddMember = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 新增成员弹窗关闭
|
|
|
+ closeMemberDialog() {
|
|
|
+ this.isAddMember = false;
|
|
|
+ },
|
|
|
+ // 分页每页条数改变
|
|
|
+ handleMmberSizeChange(val) {
|
|
|
+ this.memberPageRequest.pageSize = val;
|
|
|
+ this.getMemberList();
|
|
|
+ },
|
|
|
+ // 分页页码改变
|
|
|
+ handleMemberCurrentChange(val) {
|
|
|
+ this.memberPageRequest.pageNum = val;
|
|
|
+ this.getMemberList();
|
|
|
+ },
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ let temp = [];
|
|
|
+ val.forEach((item) => {
|
|
|
+ if (item.id) {
|
|
|
+ temp.push(item.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.addMemberData.userIds = temp;
|
|
|
+ },
|
|
|
+ // 提交新增成员
|
|
|
+ submitMember() {
|
|
|
+ this.$confirm("确认提交吗？", "提示", {})
|
|
|
+ .then(() => {
|
|
|
+ this.$api.user.roleAddUser(this.addMemberData).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ message: "操作成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.findPage();
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: "操作失败",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消提交",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ queryStaffInfo() {},
|
|
|
+ // 右侧角色成员新增谈窗 end
|
|
|
+ //右侧功能权限配置相关 start
|
|
|
+ // 获取数据
|
|
|
+ findTreeData: function () {
|
|
|
+ // this.menuLoading = true;
|
|
|
+ this.$api.menu.newfindMenuTree().then((res) => {
|
|
|
+ this.menuData = res.data;
|
|
|
+ // this.menuLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 重置选择
|
|
|
+ resetSelection() {
|
|
|
+ this.checkAll = false;
|
|
|
+ // this.$refs.menuTree.setCheckedNodes([]);
|
|
|
+ this.deletecheckAllMenu(this.menuData);
|
|
|
+ this.refreshComponent += 1;
|
|
|
+ // this.$nextTick
|
|
|
+ },
|
|
|
+ //全选
|
|
|
+ handleCheckAllChange() {
|
|
|
+ if (this.checkAll) {
|
|
|
+ let allMenus = [];
|
|
|
+ this.checkAllMenu(this.menuData, allMenus);
|
|
|
+ // this.$refs.menuTree.setCheckedNodes(allMenus);
|
|
|
+ } else {
|
|
|
+ // this.$refs.menuTree.setCheckedNodes([]);
|
|
|
+ let allMenus = [];
|
|
|
+ this.deletecheckAllMenu(this.menuData);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 递归全选
|
|
|
+ checkAllMenu(menuData, allMenus) {
|
|
|
+ menuData.forEach((item) => {
|
|
|
+ item.isChecked = true;
|
|
|
+ // this.subData.push(item);
|
|
|
+ if (item.chidrenList.length > 0) {
|
|
|
+ this.checkAllMenu(item.chidrenList, allMenus);
|
|
|
+ } else {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deletecheckAllMenu(menuData) {
|
|
|
+ menuData.forEach((item) => {
|
|
|
+ item.isChecked = false;
|
|
|
+ if (item.chidrenList && item.chidrenList.length > 0) {
|
|
|
+ this.deletecheckAllMenu(item.chidrenList);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ //右侧功能权限配置相关 end
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.peopleid = Cookies.get("user");
|
|
|
+ if (this.peopleid != "admin") {
|
|
|
+ this.peopledeptid = Cookies.get("user").split("D")[0];
|
|
|
+ this.rightpageRequest.columnFilters.deptid.value = this.peopledeptid;
|
|
|
+ this.memberPageRequest.columnFilters.deptid.value = this.peopledeptid;
|
|
|
+ } else {
|
|
|
+ this.peopledeptid = "9";
|
|
|
+ this.rightpageRequest.columnFilters.deptid.value = this.peopledeptid;
|
|
|
+ this.memberPageRequest.columnFilters.deptid.value = this.peopledeptid;
|
|
|
+ }
|
|
|
+ //获取所有下拉框数据(字典)
|
|
|
+ this.getRoles();
|
|
|
+ this.dictList();
|
|
|
+ this.tableColumns = [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ id: "head1",
|
|
|
+ nodeName: "表头1",
|
|
|
+ rowSpan: 2,
|
|
|
+ colSpan: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "head2",
|
|
|
+ nodeName: "表头2",
|
|
|
+ rowSpan: 2,
|
|
|
+ colSpan: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "head3",
|
|
|
+ nodeName: "表头3",
|
|
|
+ rowSpan: 1,
|
|
|
+ colSpan: 4,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ id: "head4",
|
|
|
+ nodeName: "表头4",
|
|
|
+ rowSpan: 1,
|
|
|
+ colSpan: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: "head5",
|
|
|
+ nodeName: "表头5",
|
|
|
+ rowSpan: 1,
|
|
|
+ colSpan: 3,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getRoleList();
|
|
|
+ this.findPage();
|
|
|
+ this.findLeftTreeData(); // 获取机构树的数据
|
|
|
+ this.getMemberList();
|
|
|
+ this.findTreeData();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped >
|
|
|
+.role_management {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #eaedf1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ .left {
|
|
|
+ width: 284px;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid #d7dbe7;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ background: #f7f7f9;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ border: 1px solid #d7dbe7;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0px 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ width: 268px;
|
|
|
+ height: 32px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid #d7dbe7;
|
|
|
+ margin: 10px auto;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .search_icon {
|
|
|
+ width: 36px;
|
|
|
+ // height: 32px;
|
|
|
+ background: rgba(45, 77, 137, 0.1);
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ border: 1px solid #d7dbe7;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .role_list {
|
|
|
+ width: 100%;
|
|
|
+ flex: 1;
|
|
|
+ padding: 0px 8px;
|
|
|
+ .role {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ padding: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ .role_name {
|
|
|
+ // width: 100px;
|
|
|
+ }
|
|
|
+ .icon_box {
|
|
|
+ // width: 50px;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0px 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background: #fff2f2;
|
|
|
+ color: #d42426;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pagination {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ border: 1px solid #d7dbe7;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .option {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid #eef1f6;
|
|
|
+ .title {
|
|
|
+ width: 60px;
|
|
|
+ margin-right: 40px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(51, 51, 51, 0.8);
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ padding-bottom: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #2d4d89;
|
|
|
+ font-weight: 500;
|
|
|
+ border-bottom: 3px solid #2d4d89;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .jurisdiction_box {
|
|
|
+ width: 100%;
|
|
|
+ // .menu_1 .menu_2 .menu_3 .menu_4 .menu_5{
|
|
|
+ .menu_1 {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .menu_2 {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .menu_3 {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .menu_4 {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .menu_5 {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .menu_6 {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .jurisdiction_btn {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin: 8px auto;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ // border: 1px solid #eef1f6;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .queryFrom {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 16px;
|
|
|
+
|
|
|
+ .queryFrom_option {
|
|
|
+ width: 20%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .search {
|
|
|
+ width: 80px;
|
|
|
+ height: 32px;
|
|
|
+ background: #2d4d89;
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ width: 80px;
|
|
|
+ height: 32px;
|
|
|
+ background: #d42426;
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table {
|
|
|
+ width: 100%;
|
|
|
+ height: 585px;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ .el-pagination {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addTitle {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ margin-top: 24px;
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ width: 4px;
|
|
|
+ height: 18px;
|
|
|
+ background: #d42426;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .input_data {
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .inp {
|
|
|
+ width: 30%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .people {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .separation {
|
|
|
+ width: 100%;
|
|
|
+ height: 10px;
|
|
|
+ background: #f7f7f7;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ }
|
|
|
+ .dialog_footer {
|
|
|
+ width: 100%;
|
|
|
+ text-align: right;
|
|
|
+ border-top: 1px solid #eeeeee;
|
|
|
+ padding-top: 15px;
|
|
|
+ }
|
|
|
+ .add_role_popup {
|
|
|
+ }
|
|
|
+ .tree_left {
|
|
|
+ // width: 40%;
|
|
|
+ height: 668px;
|
|
|
+ border: 1px solid #d7dbe7;
|
|
|
+ overflow-y: auto;
|
|
|
+ margin-right: 20px;
|
|
|
+ // display: flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // justify-content: space-between;
|
|
|
+ }
|
|
|
+ .tree_right {
|
|
|
+ width: 100%;
|
|
|
+ border: none;
|
|
|
+ .table_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 584px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .queryFrom_option {
|
|
|
+ width: 40%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .search {
|
|
|
+ width: 80px;
|
|
|
+ height: 32px;
|
|
|
+ background: #2d4d89;
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ width: 80px;
|
|
|
+ height: 32px;
|
|
|
+ background: #d42426;
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .el-input__inner {
|
|
|
+ height: 32px !important;
|
|
|
+}
|
|
|
+/deep/.el-pagination {
|
|
|
+ text-align: right !important;
|
|
|
+}
|
|
|
+/deep/.el-form {
|
|
|
+ display: flex !important;
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0px;
|
|
|
+ }
|
|
|
+ .el-form-item__label-wrap {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .el-form-item__content {
|
|
|
+ margin-right: 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/.el-table .el-table__cell {
|
|
|
+ height: 53px;
|
|
|
+}
|
|
|
+/deep/.el-table__header {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+/deep/.el-table .el-table__cell {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+/deep/.el-table td.el-table__cell div {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #2d4d89;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .el-dialog {
|
|
|
+ margin-top: 2vh !important;
|
|
|
+}
|
|
|
+/deep/ .el-dialog .el-dialog__body {
|
|
|
+ padding-top: 0px !important;
|
|
|
+}
|
|
|
+/deep/ .el-dialog__header {
|
|
|
+ text-align: center !important;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+}
|
|
|
+/deep/ .el-select {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+/deep/ .el-dialog__footer {
|
|
|
+ border-top: 1px solid #eeeeee;
|
|
|
+}
|
|
|
+</style>
|
