FE-V2-PC/src/views/comprehensive/personnel/post/selectUser.vue

<template>
  <!-- 授权用户 -->
  <el-dialog title="选择用户" :visible.sync="visible" width="1540px" top="5vh" append-to-body class="role-select-user"
             :close-on-click-modal="false">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="姓名" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入姓名"
          maxlength="10"
          clearable
          size="small"
        />
      </el-form-item>
      <!--<el-form-item label="身份" prop="deptId">-->
        <!--<el-select v-model="queryParams.deptId" placeholder="请选择身份" clearable size="small">-->
          <!--<el-option-->
            <!--v-for="dict in userTypeList"-->
            <!--:key="dict.deptId"-->
            <!--:label="dict.deptName"-->
            <!--:value="dict.deptId"-->
          <!--&gt;</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
          size="small"
        />
      </el-form-item>
      <el-form-item label="学院" prop="deptId">
        <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_one border-solid-color-one  cursor_hover"-->
         <!--@click="selectAll">选择全部</p>-->
    <!--</div>-->
    <el-row>
      <el-table @row-click="clickRow" border ref="table" :data="userList" @selection-change="handleSelectionChange" height="400px" :row-key="getRowKeys">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <!--<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" />-->
        <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="center" prop="status">-->
          <!--<template slot-scope="scope">-->
            <!--<dict-tag :options="statusOptions" :value="scope.row.status"/>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="创建时间" align="center" prop="createTime" width="180">-->
          <!--<template slot-scope="scope">-->
            <!--<span>{{ parseTime(scope.row.createTime) }}</span>-->
          <!--</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"
      />
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handleSelectUser">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { unallocatedUserList, authUserSelectAll } from "@/api/system/role";
import { noJoinPositionByList, bingUserByPosition } from "@/api/system/user";
import { listDepartments } from "@/api/system/dept";
export default {
  props: {
    // 角色编号
    postId: {}
  },
  data() {
    return {
      // 遮罩层
      visible: false,
      // 选中数组值
      userIds: [],
      //学院
      deptOptions:[],
      // 角色身份
      userTypeList:[
        {
          deptId:"11",
          deptName:"教职工"
        },
        {
          deptId:"22",
          deptName:"学生"
        },
      ],
      // 总条数
      total: 0,
      // 未授权用户数据
      userList: [],
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        postId: '',
        nickName: '',
        userName: '',
        phonenumber: '',
        deptId: '',
      },
      //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
      selectedNum:0,
    };
  },
  created() {
    this.getDicts("sys_normal_disable").then(response => {
      this.statusOptions = response.data;
    });
    console.log(this.postId)
    this.getDeptList();
  },
  methods: {
    /** 查询学院列表 */
    getDeptList()
    {
      listDepartments().then(response => {
        // this.deptOptions = response.data;
        this.$set(this, 'deptOptions', response.data)
      });
    },
    selectAll(){

    },
    //=========表格扩展选择器方法---开始=========
    //选择本页
    selectPage(){
      console.log(this.$refs.multipleTable)
      this.$refs.table.toggleAllSelection()
      // console.log(this.$refs.multipleTable.selection)
    },
    //清除选择
    clearSelection(){
      this.$refs.table.clearSelection()
    },
    /*===记录勾选数据===
      需要再el-table 添加  :row-key="getRowKeys"
      需要在selection 添加 :reserve-selection="true"
    */
    getRowKeys(row) {
      return row.id
    },
    //=========表格扩展选择器方法---结束=========
    // 显示弹框
    show() {
      this.queryParams.postId = this.postId;
      this.queryParams.pageNum = 1;
      this.queryParams.nickName = '';
      this.queryParams.userName = '';
      this.queryParams.phonenumber = '';
      this.queryParams.deptId = '';
      this.getList();
      this.visible = true;
    },
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.userIds = selection.map(item => item.userId);
    },
    // 查询表数据
    getList() {
      noJoinPositionByList(this.queryParams).then(res => {
        this.userList = res.rows;
        this.total = res.total;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.$set(this,'queryParams',{
        pageNum: 1,
        pageSize:20,
        postId: '',
        nickName: '',
        userName: '',
        phonenumber: '',
        deptId: '',
      });
      this.handleQuery();
    },
    /** 选择授权用户操作 */
    handleSelectUser() {
      if(!this.userIds[0]){
        this.msgError('请选择要添加的用户')
        return
      }
      const postId = this.queryParams.postId;
      const userIds = this.userIds.join(",");
      bingUserByPosition({ position: postId, userIds: userIds }).then(res => {
        this.msgSuccess(res.msg);
        if (res.code === 200) {
          this.visible = false;
          this.$emit("ok");
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  .role-select-user {
    .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>