FE-V2-PC/src/views/comprehensive/laboratoryManagement/subject/admissionConfiguration.vue

<!--实验室准入配置-->
<template>
    <div class="admissionConfiguration scrollbar-box">
      <div class="top-title-box">
        <p class="title-p">基本信息</p>
        <p class="right-button reset-button-one" @click="backPage">返回</p>
      </div>
      <div class="basics">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="适用实验室:" prop="name" class="form-item">
            <el-input
              style="width:320px;"
              maxlength="30"
              v-model="form.name"
              placeholder=""
              clearable
              size="small"
              disabled
            />
          </el-form-item>
        </el-form>
      </div>
      <!--门禁授权-->
      <div class="top-title-box2" v-if="subjectData.xxpCardInfoId">
        <p class="title-p">门禁授权</p>
      </div>
      <div class="entrance-table" v-if="subjectData.xxpCardInfoId">
          <el-form :model="queryParams" ref="queryParams" :inline="true">
            <el-form-item label="关键字" prop="searchValue" label-width="60px">
              <el-input
                maxlength="20"
                v-model="queryParams.searchValue"
                placeholder="请输入姓名"
                clearable
                style="width: 200px"
                />
            </el-form-item>
            <el-form-item label="类别"  label-width="50px">
              <el-select v-model="queryParams.userType" placeholder="请选择类别" clearable style="width: 140px" >
                <el-option label="学生" value="22" />
                <el-option label="教职工" value="11" />
              </el-select>
            </el-form-item>
            <el-form-item label="授权时间段" label-width="100px">
              <el-date-picker
                :clearable="false"
                v-model="dateRange"
                size="small"
                style="width: 240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item style="float: right;">
              <el-col :span="1.5">
                <p class="inquire-button-one"
                   style="width:120px;margin-right:10px;"
                   @click="handleClick('','','addStudent')"
                >新增学生授权</p>
                <p class="inquire-button-one"
                   style="width:120px;margin-right:0;"
                   @click="handleClick('','','addTeacher')"
                >新增教职工授权</p>
              </el-col>
            </el-form-item>
            <el-form-item>
              <p class="inquire-button-one" style="margin-left:20px;" @click="handleQuery">查询</p>
              <p class="reset-button-one" style="margin-left:20px;" @click="resetQuery">重置</p>
            </el-form-item>
          </el-form>
          <el-table  v-loading="loading"  border :data="tableData" height="500">
            <el-table-column label="所属单位" align="left" prop="deptName" show-overflow-tooltip/>
            <el-table-column label="姓名" align="left" prop="userName"></el-table-column>
            <el-table-column  align="left" prop="authName"></el-table-column>
            <el-table-column label="类别" align="left" prop="userType"  width="120px">
              <template slot-scope="scope">
                <span  v-if="scope.row.userType==11">教职工</span>
                <span  v-if="scope.row.userType==22">学生</span>
              </template>
            </el-table-column>
            <el-table-column label="授权时间" align="left" prop="createTime" show-overflow-tooltip></el-table-column>
            <el-table-column label="授权人" align="left" prop="createBy"></el-table-column>
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="80">
              <template slot-scope="scope">
                <div class="button-box" style="display: flex;justify-content: flex-start;">
                  <p class="table-min-button" @click="handleClick('',scope.row,'delete')">删除</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px">
            <pagination :page-sizes="[20, 30, 40, 50]"
                        v-show="total>0"
                        :total="total"
                        style="margin:0;"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
            />
          </div>
      </div>
      <div class="top-title-box">
        <p class="title-p">准入信息配置</p>
      </div>
      <div class="max-for-box">
        <div class="for-box" v-for="(item,index) in listStudent" :key="index" :class="item.checkType?'for-border-two':'for-border-one'" @click="forListClick(item)">
          <div><span>{{item.materialName}}</span><span>{{item.materialDescribe}}</span></div>
          <img class="position-img" v-if="item.checkType" src="@/assets/ZDimages/icon_30.png" alt="">
        </div>
      </div>
      <p class="inquire-button-one button-p" @click="upDataButton">{{newUpDataType?'提交':'修改'}}</p>
      <!--关联实验室弹框-->
      <el-dialog :title=dialogTitle @close="handleClose" :visible.sync="dialogVisible" width="80%">
        <el-form :model="dialogForm" ref="dialogForm" :inline="true" label-width="140px">
          <el-form-item label="关键字" prop="name" >
            <el-input
              v-model="dialogForm.searchValue"
              placeholder="请输入名称/联系方式"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="所属单位" prop="deptId" label-width="80px">
            <el-select v-model="dialogForm.deptId" clearable placeholder="请选择学院">
              <el-option
                v-for="item in collegeOptions"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <p class="inquire-button-one" style="margin-left:20px;" @click="onSearch">查询</p>
            <p class="reset-button-one" style="margin-left:20px;" @click="resetForm">重置</p>
          </el-form-item>
        </el-form>
        <div class="btn_list">
          <i class="el-icon-warning"></i>
          <i>已选择 {{labWhiteJoinSubList.length}} 项目</i>
          <i @click="toggleSelection(dialogTable)">全选本页</i>
          <i></i>
          <i @click="toggleSelection()">清除选项</i>
        </div>
        <el-table ref="multipleTable"  border tooltip-effect="dark" :row-key="getRowKeys" :data="dialogTable"
                  highlight-current-row @selection-change="handleSelectionChange" style="cursor: pointer;height:500px;">
          <el-table-column type="selection"  width="55" :reserve-selection="true" align="center"></el-table-column>
          <el-table-column label="所属单位" align="left" prop="deptName"/>
          <el-table-column label="姓名" align="left" prop="nickName" />
          <el-table-column label="导师" align="left" prop="tutorUserName" v-if="userType==1"/>
          <el-table-column label="专业" align="left" prop="major" v-if="userType==1"/>
          <el-table-column label="身份" align="left" prop="positionName" v-if="userType==2"/>
          <el-table-column label="验证方式" align="left" prop="authType">
            <template slot-scope="scope">
              <el-select v-model="scope.row.authType" @change="verifyModeFun(scope.row)" clearable >
                <el-option
                  v-for="item in verifyWayList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    :page.sync="dialogForm.pageNum"
                    :limit.sync="dialogForm.pageSize"
                    @pagination="getUserList"
        />
        <div class="configuration">
          <el-form  :model="configuration" ref="queryForm" :inline="true" v-if="unifyDeploy">
            <el-form-item label="验证方式:" prop="name">
              <el-select v-model="configuration.authType" clearable >
                <el-option
                  v-for="item in verifyWayList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <p :class="unifyDeploy?'add-button-one-120':'inquire-button-one'"  @click="unifyDeployFun()">{{unifyDeploy?'取消统一配置':'统一配置'}}</p>
          <el-button class="color_ff back_one" @click="submitForm()">确定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { listTemplate, subjectmaterial, addlist } from "@/api/laboratory/admissionConfiguration";
  import {
    AddImpowerHaikang,
    delUserHaikang,
    getHaikangUserList, getSignAuthAdd, getSignAuthDelete, getSignAuthList,
    getSignTypeList
  } from '@/api/laboratory/subject'
  import { listDepartments } from '@/api/system/dept'
  import { listUser } from '@/api/permissionRequired'
    export default {
      name: "admissionConfiguration",
      props:{
        subjectData:{},
      },
      data() {
        return {
          loading:false,
          //学生模板
          listStudent:[],
          //老师模板
          listTeacher:[],
          newUpDataType:false,
          form:{
            jurisdiction:[],
          },
          timecardList:[{
            value: '人脸/指纹/刷卡/密码',
            label: '人脸/指纹/刷卡/密码'
          }, {
            value: '人脸/指纹/刷卡/密码',
            label: '人脸/指纹/刷卡/密码'
          },],
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize:20,
            searchValue:'',
            subjectId:this.subjectData.id,
            beginTime:null,
            endTime:null,
          },
          total:0,
          tableData:[],
          dateRange:[],
          dialogForm:{
            pageNum: 1,
            pageSize: 20,
            userType: '',
            searchValue:'',
            deptId:'',
          },
          dialogTitle:'选择学生',
          dialogVisible:false,
          collegeOptions:[],//学院
          labWhiteJoinSubList:[],
          dialogTable:[],
          userType:1,//判断是学生 1 教职工2
          verifyWayList:[],
          configuration:{
            authType:'',
          },
          unifyDeploy:false,
          // 设置只能选择当前日期及之后的日期
          pickerOptions0: {
            disabledDate(time) {
              return time.getTime() < Date.now();//如果没有后面的-8.64e7就是不可以选择今天的
            }
          },
        }
      },
      created() {
        this.listDepartments();
        this.getSignTypeList()
        this.subjectmaterial();
        this.getList();

      },
      mounted(){
      },
      methods:{
        //弹出层表格里验证方式改变重新赋值
        verifyModeFun(d){
          let _this=this;
          this.dialogTable.forEach(function(item,index){
            if(item.userId==d.userId){
              _this.$set(_this.dialogTable,index,d)
            }
          })
        },
        //获取当前日期
        getdate() {
          const dates = new Date()
          dates.setMonth(dates.getMonth() + 1)
          var pastMonth = dates.getMonth() + 1
          var pastDay = dates.getDate()
          if (pastMonth >= 1 && pastMonth <= 9) {
            pastMonth = '0' + pastMonth
          }
          if (pastDay >= 0 && pastDay <= 9) {
            pastDay = '0' + pastDay
          }
          const endDate = dates.getFullYear() + '-' + pastMonth + '-' + pastDay
          return endDate
        },
        //查询
        onSearch() {
          this.dialogForm.pageNo = 1;
          this.getUserList();
        },
        //重置
        resetForm() {
          this.dialogForm.searchValue = '';
          this.dialogForm.deptId = '';
          this.onSearch();
        },
        //统一配置
        unifyDeployFun(){
          this.unifyDeploy=!this.unifyDeploy
          if(this.unifyDeploy==false){
            this.configuration.authType='';
          }
        },
        getRowKeys(row) {
          return row.userId;   //指定row-key的一个标识
        },
        //监听关联记录弹窗关闭
        handleClose(){
          console.log('弹窗关闭');
          this.$refs.multipleTable.clearSelection();
          this.dialogForm.searchValue='';
          this.dialogForm.pageNum=1;
          this.dialogForm.deptId='';
          this.configuration.authType='';
        },
        //取消选中
        toggleSelection(rows) {
          let _this=this;
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row,true);
            });

          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        //选中实验室
        handleSelectionChange(val){
          let _this=this;
          this.labWhiteJoinSubList=[];
          this.labWhiteJoinSubList=val;

        },
        //已授权列表
        handleSelectionChange2(val){
          let _this=this;
          this.impowerList=[];
          this.impowerList=val;

        },
        //获取学院列表
        listDepartments(){
          listDepartments().then(response => {
            this.collegeOptions = response.data;
          });
        },
        /** 弹框查询列表 */
        getUserList() {//type 1学生 2教职工
          let _this=this;
          this.loading = true;
          if(_this.userType==1){
            this.dialogForm.userType=22
            listUser(this.addDateRange(this.dialogForm, this.dateRange)).then(response => {
                this.dialogTable = response.rows;
                this.total = response.total;
                this.loading = false;
                this.dialogTable.forEach(function(item) {
                  item.authType='2'
                })
              }
            );
          }else if(_this.userType==2){
            this.dialogForm.userType=11
            listUser(this.addDateRange(this.dialogForm, this.dateRange)).then(response => {
                this.dialogTable = response.rows;
                this.total = response.total;
                this.loading = false;
                this.dialogTable.forEach(function(item) {
                  item.authType='2'
                })
              }
            );

          }
        },
        /** 查询门禁授权类型 */
        getSignTypeList(){
          getSignTypeList().then(response => {
            if(response.code==200){
              this.verifyWayList=response.rows
              console.log(this.verifyWayList)
            }
          });
        },
        //获取当前实验室准入配置
        subjectId(){
          let self = this;
          listTemplate({subjectId:this.subjectData.id}).then( response => {
            for(let i=0;i<response.data.listStudent.length;i++){
              for(let o=0;o<self.listStudent.length;o++){
                if(response.data.listStudent[i].id == self.listStudent[o].id){
                  self.listStudent[o].checkType = true;
                }
              }
            }
            for(let i=0;i<response.data.listTeacher.length;i++){
              for(let o=0;o<self.listTeacher.length;o++){
                if(response.data.listTeacher[i].id == self.listTeacher[o].id){
                  self.listTeacher[o].checkType = true;
                }
              }
            }
            if(!response.data.listStudent[0] && !response.data.listTeacher[0]){
              this.newUpDataType = true;
            }else{
              this.newUpDataType = false;
            }
            this.form.name=this.subjectData.name
          });
        },
        //提交接口
        upDataButton(){
          let self = this;
          let num = 0;
          let newData = {
            labSubjectList:[],
            studentList:[],
            teacherList:[],
          };
          newData.labSubjectList.push({id:this.subjectData.id});
          for(let i=0;i<self.listStudent.length;i++){
            if(self.listStudent[i].checkType){
              let obj = {
                materialId:self.listStudent[i].id,
                materialType:self.listStudent[i].materialSuit
              };
              newData.studentList.push(obj);
              num++
            }
          }
          for(let i=0;i<self.listTeacher.length;i++){
            if(self.listTeacher[i].checkType){
              let obj = {
                materialId:self.listTeacher[i].id,
                materialType:self.listTeacher[i].materialSuit
              };
              newData.teacherList.push(obj);
              num++
            }
          }
          if(num == 0){
            this.msgError("请选择准入条件");
            return
          }
          addlist(newData).then( response => {
            this.msgSuccess(this.newUpDataType?"提交成功":"修改成功");
            this.$parent.clickPage(1);
          });
        },
        //点击事件
        forListClick(item){
          item.checkType = !item.checkType;
        },
        //获取准入模板
        subjectmaterial(){
          subjectmaterial().then( response => {
            for(let i=0;i<response.data.listStudent.length;i++){
              response.data.listStudent[i].checkType = false;
            }
            for(let i=0;i<response.data.listTeacher.length;i++){
              response.data.listTeacher[i].checkType = false;
            }
            this.$set(this,'listStudent',response.data.listStudent);
            this.$set(this,'listTeacher',response.data.listTeacher);
            this.subjectId();
          });
        },
        //返回按钮
        backPage(){
          this.$parent.clickPage(1);
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.$set(this,'queryParams',{
            pageNum: 1,
            pageSize:20,
            deptId:"",
            name: '',
          });
          this.handleQuery();
        },
        handleClick(index,row,doType){
          let _this=this;
          if(doType=='delete'){//删除
            let _this=this
            console.log(row)
            this.$confirm('是否确认删除['+row.userName+']门禁授权?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              getSignAuthDelete(row.id).then( response => {
                _this.msgSuccess("删除成功");
                _this.getList();
              });
            }).then(() => {
              _this.getList();

            }).catch(() => {});
          }else if(doType=='addStudent'){
            _this.unifyDeploy=false;
            _this.dialogVisible=true;
            _this.dialogTitle='选择学生';
            _this.userType=1;
            this.getUserList();
          }else if(doType=='addTeacher'){
            _this.unifyDeploy=false;
            _this.dialogVisible=true;
            _this.dialogTitle='选择教职工';
            _this.userType=2;
            this.getUserList();
          }
        },
        /* 新增授权*/
        submitForm(){
          let _this=this;
          let arr=[];
          if(this.labWhiteJoinSubList.length>0){
            if(_this.configuration.authType){//统一配置
              this.labWhiteJoinSubList.forEach(function(item){
                arr.push({'userId':item.userId,'userName':item.nickName,'authType':_this.configuration.authType,'userType':item.userType,'subjectId':_this.subjectData.id,'subjectName':_this.subjectData.name,'hardwareId':_this.subjectData.xxpCardInfoId,'deptId':item.deptId,'deptName':item.deptName})
              })
            }else{
              this.labWhiteJoinSubList.forEach(function(item){
                arr.push({'userId':item.userId,'userName':item.nickName,'userType':item.userType,'subjectId':_this.subjectData.id,'subjectName':_this.subjectData.name,'hardwareId':_this.subjectData.xxpCardInfoId,'deptId':item.deptId,'deptName':item.deptName,'authType':item.authType})
              })
            }
            _this.form.userAuthList=arr;
            getSignAuthAdd(_this.form).then(response => {
              if(response.code==200){
                _this.msgSuccess("新增成功");
                _this.dialogVisible=false;
                _this.getList();
              }else if(response.code==205){
                _this.$confirm(response.msg, "警告", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                }).then(function() {
                  _this.dialogVisible=false;
                  _this.getList();
                }).then(() => {
                  _this.dialogVisible=false;
                  _this.getList();
                }).catch(() => {});
              }
            });
          }else{
            this.msgError("请先选择人员!");
          }
        },
        getList(){
          let _this=this;
          if(this.dateRange){
            this.queryParams.beginTime = this.dateRange[0];
            this.queryParams.endTime = this.dateRange[1];
            delete this.queryParams.dateRange
          }else{
            delete this.queryParams.dateRange
          }
          getSignAuthList(_this.queryParams).then( response => {
            let res=response.rows;
            this.loading=false;
            _this.tableData=res;
            _this.total=response.total;

            _this.tableData.forEach(function(item) {
              _this.verifyWayList.forEach(function(item2) {
                  if(item.authType==item2.dictValue){
                    item.authName=item2.dictLabel
                  }
              })
            })
          });
        },
      }
    }
</script>

<style lang="scss" scoped>
  .admissionConfiguration{
    flex:1;
    overflow-y: scroll;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius:10px!important;
    margin:5px 20px 20px 10px!important;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
    .form-item{
      display: inline-block;
      overflow: hidden;
      margin-top: 40px;
    }
    .basics{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .tip{
        width: 14px;
        height: 14px;
        margin-left: 14px;
      }
    }
    .top-title-box{
      display: flex;
      border-bottom:1px solid #E0E0E0;
      margin:0 20px;
      p{
        margin:20px 0;
        line-height: 40px;

      }
      .title-p{
        font-size:18px;
        color:#0045AF;
        flex: 1;
      }
      .right-icon{
        width:40px;
        text-align: center;
      }
      .right-icon:hover{
        cursor: pointer;
        background: rgba(0,0,0,0.1);
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
      }
    }
    .top-title-box2{
      display: flex;
      border-bottom:1px solid #E0E0E0;
      margin:0 20px;
      p{
        line-height: 14px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;

        color: #333333;
        margin-bottom: 30px;
      }
      .title-p{
        font-size:18px;
        color:#0045AF;
      }
      .people-num{
          margin-left: 26px;
         margin-right: 32px;
        font-weight: 400;
      }
      .fail-num{
        font-weight: 400;
      }
    }
    .name-box{
      margin:32px 0 0 35px;
      font-size:16px;
      p{
        margin:0;
      }
    }
    .max-for-box{
      .for-box{
        display: inline-block;
        width:400px;
        height:60px;
        margin:32px 0 0 40px;
        cursor: pointer;
        border-radius:10px;
        overflow: hidden;
        position: relative;
        div{
          display: flex;
          line-height:60px;
          span:nth-child(1){
            margin:0 18px 0 18px;
            font-size:16px;
            color:#333;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          span:nth-child(2){
            font-size:14px;
            color:#999999;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
        .position-img{
          position: absolute;
          right:0;
          bottom:0;
        }
      }
      .for-border-one{
        border:1px solid #E0E0E0;
      }
      .for-border-two{
        border:1px solid #349cfb;
      }
    }
    .button-p{
      width:80px;
      margin:40px auto;
    }
    /*门禁列表*/
    .entrance-table{
      margin: 20px;
    }
    /*弹框*/
    .btn_list{
      width: 100%;
      height: 40px;
      background: rgba(1,131,250,0.1);
      border-radius: 6px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 32px;
      >i{
        font-style: normal;
        display: inline-block;
        cursor: pointer;
      }
      >i:nth-of-type(1){
        font-size: 20px;
        color: #0045AF;
        margin: 0 16px 0 14px;
      }
      >i:nth-of-type(2){
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #999999;
        line-height: 16px;
      }
      >i:nth-of-type(3){
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #0045AF;
        line-height: 16px;
        margin: 0 28px 0 46px;
      }
      >i:nth-of-type(4){
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #0045AF;
        line-height: 16px;
      }
      >i:nth-of-type(5){
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFA312;
        line-height: 16px;
        margin: 0 40px 0 28px;
      }
      .bottom-button-box{
        display: flex;
        width:220px;
        margin: 0;
        p{
          font-size:14px;
          height:30px;
          width:100px;
          line-height:30px;
          text-align: center;
          border-radius:4px;
        }
        p:nth-child(1){
          border:1px solid #E0E0E0;
          margin-right:20px;
        }
        p:nth-child(2){
          border:1px solid #0045AF;
        }
      }
    }
    .configuration{
      height: 70px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border-top: 1px solid #D8D8D8;
      .el-form-item{
        margin-bottom: 0!important;
      }
    }
    /*验证方式*/
    .verify-green{
      color: #46D417;
      margin-right: 10px;
    }
    .verify-red{
      color: #FF0000;
      margin-right: 10px;
    }
  }
</style>