|
|
@@ -0,0 +1,293 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <!-- 授权用户 -->
|
|
|
+ <el-dialog
|
|
|
+ title="添加分组管理员"
|
|
|
+ :visible.sync="open"
|
|
|
+ width="800px"
|
|
|
+ top="5vh"
|
|
|
+ append-to-body
|
|
|
+ custom-class="el-dialog2"
|
|
|
+ >
|
|
|
+ <div class="dialog-main">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <!--部门数据-->
|
|
|
+ <el-col :span="6" :xs="24">
|
|
|
+ <div class="head-container">
|
|
|
+ <el-input
|
|
|
+ v-model="deptName"
|
|
|
+ placeholder="请输入部门名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="head-container">
|
|
|
+ <el-tree
|
|
|
+ :data="deptOptions"
|
|
|
+ :props="defaultProps"
|
|
|
+ :expand-on-click-node="false"
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ ref="tree"
|
|
|
+ node-key="id"
|
|
|
+ default-expand-all
|
|
|
+ highlight-current
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <!--用户数据-->
|
|
|
+ <el-col :span="18" :xs="24">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ >
|
|
|
+ <el-form-item label="用户名称" prop="userName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.userName"
|
|
|
+ placeholder="请输入用户名称"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ class="aaa"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="bbb"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="userList"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="50" align="center" />
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="用户名称"
|
|
|
+ align="center"
|
|
|
+ key="userName"
|
|
|
+ prop="userName"
|
|
|
+ v-if="columns[1].visible"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="用户昵称"
|
|
|
+ align="center"
|
|
|
+ key="nickName"
|
|
|
+ prop="nickName"
|
|
|
+ v-if="columns[2].visible"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="部门"
|
|
|
+ align="center"
|
|
|
+ key="deptName"
|
|
|
+ prop="dept.deptName"
|
|
|
+ v-if="columns[3].visible"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+</el-row>
|
|
|
+<div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="open = false">确 定</el-button>
|
|
|
+ <el-button @click="open = false">取 消</el-button>
|
|
|
+</div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { unallocatedUserList, groupUserSelectAll } from "@/api/doc/groupUser";
|
|
|
+
|
|
|
+export default {
|
|
|
+ dicts: ['sys_normal_disable'],
|
|
|
+ props: {
|
|
|
+ // 角色编号
|
|
|
+ groupId: {
|
|
|
+ type: [String]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ open:true,
|
|
|
+ // 遮罩层
|
|
|
+ visible: false,
|
|
|
+ // 选中数组值
|
|
|
+ userIds: [],
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 未授权用户数据
|
|
|
+ userList: [],
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ groupId: undefined,
|
|
|
+ // userName: undefined,
|
|
|
+ // phonenumber: undefined
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 显示弹框
|
|
|
+ show() {
|
|
|
+ console.log(this.queryParams)
|
|
|
+ this.queryParams.groupId = parseInt(this.groupId);
|
|
|
+ this.getList();
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+ clickRow(row) {
|
|
|
+ this.$refs.table.toggleRowSelection(row);
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.userIds = selection.map(item => item.userId);
|
|
|
+ },
|
|
|
+ // 查询表数据
|
|
|
+ getList() {
|
|
|
+ unallocatedUserList(this.queryParams).then(res => {
|
|
|
+ this.userList = res.rows;
|
|
|
+ this.total = res.total;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ /** 选择授权用户操作 */
|
|
|
+ handleSelectUser() {
|
|
|
+ const groupId = this.queryParams.groupId;
|
|
|
+ const userIds = this.userIds.join(",");
|
|
|
+ if (userIds == "") {
|
|
|
+ this.$modal.msgError("请选择要分配的用户");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ authUserSelectAll({ groupId: groupId, userIds: userIds }).then(res => {
|
|
|
+ this.$modal.msgSuccess(res.msg);
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.visible = false;
|
|
|
+ this.$emit("ok");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang='scss'>
|
|
|
+//弹窗样式
|
|
|
+::v-deep .el-dialog2{
|
|
|
+ width: calc(100vw * (1000 / 1920)) !important;
|
|
|
+ height: calc(100vh * (850 / 1080)) !important;
|
|
|
+ background: url(../../../assets/img/Group-585.png);
|
|
|
+ background-size: calc(100vw * (1000 / 1920)) calc(100vh * (850 / 1080));
|
|
|
+
|
|
|
+ .el-dialog__headerbtn {
|
|
|
+ top: 3%;
|
|
|
+ right: 4%;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .dialog-main{
|
|
|
+ width: calc(100vw * (815 / 1920));
|
|
|
+ height: calc(100vh * (820 / 1080));
|
|
|
+ // background: salmon;
|
|
|
+ margin-left: calc(100vw * (15 / 1920));
|
|
|
+ margin-top: calc(100vh * (20 / 1080));
|
|
|
+ .head-container{
|
|
|
+ .el-input{
|
|
|
+ width: calc(100vw * (190 / 1920)) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .aaa,.bbb{
|
|
|
+ background-color: #002a5cff;
|
|
|
+ color: #1890ff;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .dialog-footer{
|
|
|
+ position: absolute;
|
|
|
+ right: 10%;
|
|
|
+ bottom: 8%;
|
|
|
+ }
|
|
|
+ .el-table{
|
|
|
+background: transparent;
|
|
|
+color: #7EA4C8FF;
|
|
|
+ border: 1px solid #006C9AFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .el-dialog:not(.is-fullscreen) {
|
|
|
+ margin-top: 20px !important;
|
|
|
+}
|
|
|
+//下面跳转
|
|
|
+::v-deep .pagination-container .el-pagination {
|
|
|
+ width: calc(100vw * (490 / 1920)) !important;
|
|
|
+}
|
|
|
+::v-deep .el-pagination .el-select .el-input {
|
|
|
+ width: calc(100vw * (100 / 1920)) !important;
|
|
|
+}
|
|
|
+::v-deep .el-pagination .el-select .el-input .el-input__inner {
|
|
|
+ width: calc(100vw * (100 / 1920)) !important;
|
|
|
+}
|
|
|
+//前往第几页
|
|
|
+::v-deep .el-pagination__editor.el-input {
|
|
|
+ width: calc(100vw * (50 / 1920)) !important;
|
|
|
+}
|
|
|
+//左边下拉框背景
|
|
|
+::v-deep .el-tree {
|
|
|
+ background: transparent;
|
|
|
+ color: #7EA4C8FF;
|
|
|
+ border: 1px solid #006C9AFF;
|
|
|
+}
|
|
|
+//选中时的样式
|
|
|
+::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
|
|
+ background: #002659FF;
|
|
|
+ color: #2E8AECFF;
|
|
|
+}
|
|
|
+::v-deep .el-tree-node__content:hover{
|
|
|
+ background: #002659FF;
|
|
|
+ color: #2E8AECFF;
|
|
|
+}
|
|
|
+//右边用户名称
|
|
|
+::v-deep .el-dialog .el-form-item {
|
|
|
+ margin: 0;
|
|
|
+ .el-input{
|
|
|
+ width: calc(100vw * (320 / 1920)) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
yxc
