FE-V2-PC/src/views/comprehensive/laboratoryManagement/accessAuthorization/addPage.vue

<template>
  <div class="addPage">
    <div class="title-box">
      <p>门禁授权申请</p>
      <!--<p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>-->
    </div>
    <el-form ref="form" :model="form" :rules="addRules" label-width="200px">
      <el-form-item label="实验室：" prop="subjectId" class="selsectbox"
                    style="display: inline-block">
        <el-select
          style="width:500px;"
          @change="userChange"
          v-model="form.subjectId"
          filterable
          placeholder="搜索选择实验室"
          remote
          :remote-method="userSelectList"
          :loading="loading">
          <el-option
            v-for="item in optionsUser"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管理员：" prop="safeUserId"
                    style="display: inline-block">
        <el-select
          style="width:500px;"
          v-model="form.safeUserId"
          placeholder="请选择管理员"
          remote
          :loading="loading">
          <el-option
            v-for="item in optionsUserOne"
            :key="item.safeUserId"
            :label="item.safeUserName"
            :value="item.safeUserId">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="共同申请人：" prop="userId2" class="selsectbox"-->
                    <!--style="display: inline-block">-->
        <!--<el-select-->
          <!--style="width:500px;"-->
          <!--@change="userChangeOne"-->
          <!--v-model="form.userId2"-->
          <!--filterable-->
          <!--placeholder="搜索选择共同申请人"-->
          <!--remote-->
          <!--:remote-method="userSelectListOne"-->
          <!--:loading="loading">-->
          <!--<el-option-->
            <!--v-for="item in optionsUserOne"-->
            <!--:key="item.userId"-->
            <!--:label="item.nickName"-->
            <!--:value="item.userId">-->
            <!--{{item.nickName}}-{{item.userName}}-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item label="位置：" prop="laboratoryId">
        <p style="line-height:40px;color:#333;">{{text?text:'请选择实验室'}}</p>
      </el-form-item>
      <!--<el-form-item label="安全责任人：" prop="laboratoryId">-->
        <!--&lt;!&ndash;<p style="line-height:40px;">{{name?name:'请选择实验室'}}</p>&ndash;&gt;-->
        <!--<p style="line-height:40px;color:#333;" v-if="!nameList[0]">请选择实验室</p>-->
        <!--<p style="line-height:40px;color:#333;" v-if="nameList[0]"><span v-for="(item,index) in nameList">{{index!=0?','+item:item}}</span></p>-->
      <!--</el-form-item>-->
    </el-form>
    <div class="bottom-button-box">
      <p class="reset-button-one" @click="backPage">取消</p>
      <p class="inquire-button-one" @click="upData">提交</p>
    </div>
  </div>
</template>

<script>
import { subjectList,selectUserListByName } from "@/api/laboratory/approval";
import { subjectVo,openDoorApply,subjectRelationList } from "@/api/laboratory/subject";
  export default {
    name: "addPage",
    data(){
      return{
        loading:false,
        form:{},
        addRules:{
          subjectId: [
            { required: true, message: "请选择实验室", trigger: "blur" }
          ],
          userId2: [
            { required: true, message: "请选择共同申请人", trigger: "blur" },
          ],
          safeUserId: [
            { required: true, message: "请选择管理员", trigger: "blur" },
          ],
        },
        optionsUser:[],
        optionsUserOne:[],
        subjectOptions:[],
        text:"",
        nameList:"",
        newObj:{},

      }
    },
    created() {

    },
    mounted(){

    },
    methods:{
      //实验室获取
      userSelectList(query){
        if (query !== '' && query.length>1) {
          this.loading = true;
          let obj = {
            name : query
          };
          subjectList(obj).then(response => {
            this.optionsUser = response.data;
            this.loading = false;
          });
        } else {
          this.optionsUser = [];
        }
      },
      //人员获取
      userSelectListOne(query){
        if (query !== '' && query.length>1) {
          this.loading = true;
          let obj = {
            nickName : query,
            userType : 22
          };
          selectUserListByName(obj).then(response => {
            this.optionsUserOne = response.data;
            this.loading = false;
          });
        } else {
          this.optionsUserOne = [];
        }
      },
      //实验室选中
      userChange(data){
        let self = this;
        subjectVo(data,0).then(response => {
          this.text = response.data.deptName + '-' + response.data.buildName + '-' + response.data.floorName +'-'+ response.data.roomName
          let list = response.data.safeUserNames.split(',');
          this.$set(this,'nameList',list);
          this.$set(this.newObj,'position',response.data.buildName + '-' + response.data.floorName +'-'+ response.data.roomName);
          this.$set(this.newObj,'college',response.data.deptName);
          this.$set(this.newObj,'subjectName',response.data.name);
          this.$set(this.newObj,'subjectId',response.data.id);
          // this.$set(this.newObj,'safeUserName',response.data.safeUserName);
          // this.$set(this.newObj,'safeUserId',response.data.safeUserId);
          // this.$set(this.newObj,'safeUserPhone',response.data.safeUserPhone);
          subjectRelationList({subjectId:response.data.id}).then(response => {
            this.$set(this,'optionsUserOne',response.rows);
          })
        });
      },
      //人员选中
      userChangeOne(data){
        this.$set(this.newObj,'userId2',data);
      },
      upData(){
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('确认要提交吗?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              for(let i=0;i<self.optionsUserOne.length;i++){
                if(self.form.safeUserId == self.optionsUserOne[i].safeUserId){
                  self.newObj.safeUserId = self.optionsUserOne[i].safeUserId;
                  self.newObj.safeUserName = self.optionsUserOne[i].safeUserName;
                  self.newObj.safeUserPhone = self.optionsUserOne[i].safeUserPhone;
                }
              }
              openDoorApply(self.newObj).then(response => {
                self.msgSuccess(response.msg);
                self.$parent.goPageButton(3);
              });
            }).catch(function() {
              //  取消
            });
          }
        });
      },
      //返回
      backPage(){
        this.$parent.goPageButton(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .addPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    p{
      margin:0;
      padding:0;
    }
    .title-box{
      display: flex;
      height:90px;
      border-bottom: 1px solid #D8D8D8;
      margin-bottom:40px;
      p:nth-child(1){
        flex:1;
        font-size:16px;
        line-height:90px;
        margin-left:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin:25px 25px 0 0;
      }
    }
    .bottom-button-box{
      display: flex;
      margin:200px auto 40px;
      p:nth-child(1){
        margin-right:20px;
        width:90px;
      }
      p:nth-child(2){
        width:90px;
      }
    }
  }
</style>
<style>
  /*//替换左边默认图标*/
  .selsectbox .el-select .el-input .el-select__caret:after {
    background: url(../../../../assets/ZDimages/icon_001.png) no-repeat center center; /*引入icon*/
    transform:rotate(180deg);
    background-size: 20px 20px;  /*这个是图片的大小，在这里不能直接设置width  height,设置宽高其实是select的宽高，图片可能会失真只设置宽度  高度auto也行*/
    padding: 0 0 0 26px; /*需要设置padding 把placeholder向右移*/
    box-sizing: border-box;
    font-size: 14px;
  }
</style>