123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360 |
- <!--分配用户-->
- <template>
- <div class="role-auth-user">
- <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" class="form-box">
- <el-form-item style="margin-right:20px;">
- <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
- </el-form-item>
- <el-col :span="1.5" style="margin-right:20px;">
- <p class="add-button-one-120"
- @click="openSelectUser"
- v-hasPermi="['system:role:add']"
- ><i class="el-icon-plus"></i>添加用户</p>
- </el-col>
- <el-form-item label="姓名" prop="nickName">
- <el-input
- v-model="queryParams.nickName"
- placeholder="请输入姓名"
- clearable
- maxlength="10"
- size="small"
- style="width: 240px"
- />
- </el-form-item>
- <el-form-item label="身份" prop="dictType">
- <el-select v-model="queryParams.userType" placeholder="请选择身份" clearable size="small">
- <el-option
- v-for="dict in userTypeList"
- :key="dict.deptId"
- :label="dict.deptName"
- :value="dict.deptId"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="工号/学号" prop="userName">
- <el-input
- v-model="queryParams.userName"
- placeholder="请输入工号/学号"
- clearable
- maxlength="20"
- size="small"
- style="width: 240px"
- />
- </el-form-item>
- <el-form-item label="联系方式" prop="phonenumber">
- <el-input
- v-model="queryParams.phonenumber"
- placeholder="请输入联系方式"
- clearable
- maxlength="13"
- size="small"
- style="width: 240px"
- />
- </el-form-item>
- <el-form-item label="学院" prop="type">
- <el-select v-model="queryParams.deptId" placeholder="请选择学院" clearable size="small">
- <el-option
- v-for="dict in deptOptions"
- :key="dict.deptId"
- :label="dict.deptName"
- :value="dict.deptId"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <p class="inquire-button-one" @click="handleQuery">查询</p>
- <p class="reset-button-one" @click="resetQuery">重置</p>
- </el-form-item>
- </el-form>
- <div class="sheet-expand-box">
- <i class="el-icon-warning" style="color:#0045AF;"></i>
- <p class="color_99">已选择 {{selectedNum}} 项</p>
- <p class="color_one cursor_hover" @click="selectPage">全选本页</p>
- <p class="color_warn cursor_hover" @click="clearSelection">清除选项</p>
- <p class="color_FF6666 border-solid-color-FF6666 cursor_hover"
- @click="cancelAuthUserAll"
- v-hasPermi="['system:role:remove']">批量取消授权</p>
- <!--<p class="color_FF6666 border-solid-color-FF6666 cursor_hover"-->
- <!--@click="cancelAuthUserAll"-->
- <!--v-hasPermi="['system:role:remove']">取消所有授权</p>-->
- </div>
- <el-table v-loading="loading" border :data="userList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
- <el-table-column type="selection" width="55" align="center" />
- <!--<el-table-column label="用户名称" prop="userName" :show-overflow-tooltip="true" />-->
- <el-table-column label="姓名" prop="nickName" align="left" :show-overflow-tooltip="true" />
- <el-table-column label="身份" prop="userType" align="left" :show-overflow-tooltip="true">
- <template slot-scope="scope">
- <p>{{scope.row.userType==11?'教职工':(scope.row.userType==22?'学生':'')}}</p>
- </template>
- </el-table-column>
- <el-table-column label="工号/学号" prop="userName" align="left" :show-overflow-tooltip="true" />
- <!--<el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" />-->
- <el-table-column label="联系方式" prop="phonenumber" align="left" :show-overflow-tooltip="true" />
- <el-table-column label="学院" prop="deptName" align="left" :show-overflow-tooltip="true" />
- <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
- <template slot-scope="scope">
- <div class="table-button-box">
- <p class="table-button-null"></p>
- <p class="table-button-p"
- @click="cancelAuthUser(scope.row)"
- v-hasPermi="['system:role:remove']"
- >取消授权</p>
- <p class="table-button-null"></p>
- </div>
- </template>
- </el-table-column>
- </el-table>
- <pagination :page-sizes="[20, 30, 40, 50]"
- v-show="total>0"
- :total="total"
- layout="total, prev, pager, next, sizes, jumper"
- :page.sync="queryParams.pageNum"
- :limit.sync="queryParams.pageSize"
- @pagination="getList"
- />
- <select-user ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />
- </div>
- </template>
- <script>
- import { allocatedUserList, authUserCancel, authUserCancelAll } from "@/api/system/role";
- import { listDepartments } from "@/api/system/dept";
- import selectUser from "./selectUser";
- export default {
- props: {
- roleId: {},
- },
- name: "AuthUser",
- components: { selectUser },
- data() {
- return {
- // 遮罩层
- loading: true,
- // 选中用户组
- userIds: [],
- // 非多个禁用
- multiple: true,
- // 显示搜索条件
- showSearch: true,
- // 总条数
- total: 0,
- // 用户表格数据
- userList: [],
- // 状态数据字典
- statusOptions: [],
- //学院
- deptOptions:[],
- // 角色身份
- userTypeList:[
- {
- deptId:"11",
- deptName:"教职工"
- },
- {
- deptId:"22",
- deptName:"学生"
- },
- ],
- // 查询参数
- queryParams: {
- pageNum: 1,
- pageSize:20,
- roleId: undefined,
- userName: undefined,
- nickName: undefined,
- phonenumber: undefined
- },
- //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
- selectedNum:0,
- };
- },
- created() {
- const roleId = this.roleId;
- // const roleId = this.$route.params && this.$route.params.roleId;
- if (roleId) {
- this.queryParams.roleId = roleId;
- this.getList();
- this.getDicts("sys_normal_disable").then(response => {
- this.statusOptions = response.data;
- });
- }
- this.getDeptList();
- },
- methods: {
- /** 查询学院列表 */
- getDeptList()
- {
- listDepartments().then(response => {
- // this.deptOptions = response.data;
- this.$set(this, 'deptOptions', response.data)
- });
- },
- //=========表格扩展选择器方法---开始=========
- //选择本页
- selectPage(){
- this.$refs.multipleTable.toggleAllSelection()
- },
- //清除选择
- clearSelection(){
- this.$refs.multipleTable.clearSelection()
- },
- /*===记录勾选数据===
- 需要再el-table 添加 :row-key="getRowKeys"
- 需要在selection 添加 :reserve-selection="true"
- */
- getRowKeys(row) {
- return row.id
- },
- //=========表格扩展选择器方法---结束=========
- //返回按钮
- backPage(){
- this.$parent.clickPage(1);
- },
- /** 查询授权用户列表 */
- getList() {
- this.loading = true;
- allocatedUserList(this.queryParams).then(response => {
- this.userList = response.rows;
- this.total = response.total;
- this.loading = false;
- }
- );
- },
- // 返回按钮
- handleClose() {
- this.$store.dispatch("tagsView/delView", this.$route);
- this.$router.push({ path: "/system/role" });
- },
- /** 搜索按钮操作 */
- handleQuery() {
- this.queryParams.pageNum = 1;
- this.getList();
- },
- /** 重置按钮操作 */
- resetQuery() {
- this.resetForm("queryForm");
- this.handleQuery();
- },
- // 多选框选中数据
- handleSelectionChange(selection) {
- this.selectedNum = selection.length;
- this.userIds = selection.map(item => item.userId)
- this.multiple = !selection.length
- },
- /** 打开授权用户表弹窗 */
- openSelectUser() {
- this.$refs.select.show();
- },
- /** 取消授权按钮操作 */
- cancelAuthUser(row) {
- const roleId = this.queryParams.roleId;
- this.$confirm('确认要取消该用户的授权吗?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(function() {
- return authUserCancel({ userId: row.userId, roleId: roleId });
- }).then(() => {
- this.getList();
- this.msgSuccess("取消授权成功");
- }).catch(() => {});
- },
- /** 批量取消授权按钮操作 */
- cancelAuthUserAll(row) {
- if(this.multiple){
- return
- }
- const roleId = this.queryParams.roleId;
- const userIds = this.userIds.join(",");
- this.$confirm('是否取消选中用户授权数据项?', "警告", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(() => {
- return authUserCancelAll({ roleId: roleId, userIds: userIds });
- }).then(() => {
- this.getList();
- this.msgSuccess("取消授权成功");
- }).catch(() => {});
- }
- }
- };
- </script>
- <style scoped lang="scss">
- .role-auth-user {
- flex:1;
- display: flex!important;
- flex-direction: column;
- margin-top:9px;
- padding-bottom:8px;
- overflow: hidden;
- .form-box{
- }
- .button-box{
- width:120px;
- display: flex;
- }
- .sheet-expand-box{
- height:40px;
- display:flex;
- background:rgba(1,131,250,0.1);
- border-radius: 5px;
- margin-bottom:18px;
- font-size:14px;
- i{
- margin:10px 16px 0 14px;
- height:20px;
- width:20px;
- font-size:20px;
- display: block;
- }
- p{
- margin:0;
- }
- p:nth-child(2){
- width:132px;
- font-size:14px;
- height:40px;
- line-height:40px;
- }
- p:nth-child(3){
- width:60px;
- font-size:14px;
- height:40px;
- line-height:40px;
- margin-right:20px;
- }
- p:nth-child(4){
- width:60px;
- font-size:14px;
- height:40px;
- line-height:40px;
- margin-right:20px;
- }
- p:nth-child(5){
- font-size:14px;
- line-height:30px;
- width: 100px;
- height: 30px;
- border-radius: 6px;
- text-align: center;
- margin-top:5px;
- margin-right:20px;
- }
- p:nth-child(6){
- font-size:14px;
- line-height:30px;
- width: 100px;
- height: 30px;
- border-radius: 6px;
- text-align: center;
- margin-top:5px;
- }
- }
- }
- </style>
|