FE-V2-PC/src/views/medicUniversity-3_1/chemicalManagement/chemicalLibrary/CabinetManagement/addPage.vue

<!--化学品柜管理/新增/编辑-->
<template>
  <div class="addPage">
    <div class="title-box">
      <p>{{addPropsData.id?'编辑':'新增'}}</p>
      <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
    </div>
    <el-form :model="formData" ref="form" :inline="true" :rules="rules" label-width="120px" style="margin-top:40px;">
      <div class="form-min-box">
        <el-form-item label="化学品柜：" prop="cabinetName">
          <el-input
            maxlength="15"
            style="width:400px;"
            v-model="formData.cabinetName"
            placeholder="请输入化学品柜"
            clearable
            size="small"/>
        </el-form-item>
      </div>
      <div class="form-min-box">
        <el-form-item label="所属学院：" prop="deptId">
          <el-select v-model="formData.deptId" placeholder="请选择所属学院" style="width:400px;" @change="deptChange(formData.deptId)" @clear="clearButton">
            <el-option
              v-for="item in optionsListOne"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="form-min-box">
        <el-form-item label="实验室：" prop="subId">
          <el-select v-model="formData.subId" placeholder="请选择实验室" style="width:400px;" @change="subChange(formData.subId)">
            <el-option
              v-for="item in optionsListTwo"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="form-text-box">
        <p>位置：</p>
        <p>{{address?address:'请选择学院与实验室'}}</p>
      </div>
      <div class="form-text-box" style="margin-top:24px;">
        <p>安全责任人：</p>
        <p>{{userName?userName:'请选择学院与实验室'}}</p>
      </div>
      <div class="bottom-button-box">
        <p class="inquire-button-one right-button" @click="upData">提交</p>
      </div>
    </el-form>
  </div>
</template>

<script>
  import { getAddress,hxpCabinet,putHxpCabinet } from "@/api/medicUniversity-3_1/index";
  import { listDepartments } from "@/api/system/dept";
  import { getNoAdminSubjectListNopage } from "@/api/laboratory/sparseHardware";
  export default {
    name: "addPage",
    props:{
      addPropsData:{},
    },
    data() {
      return {
        formData:{},
        optionsListOne:[],
        optionsListTwo:[],
        rules:{
          cabinetName:[
            { required: true, message: '请输入化学品柜', trigger: 'blur' },
            { required: true, message: "请输入化学品柜", validator: this.spaceJudgment, trigger: "blur" }
          ],
          deptId:[
            { required: true, message: '请选择所属学院', trigger: 'blur' },
          ],
          subId:[
            { required: true, message: '请选择实验室', trigger: 'blur' },
          ],
        },
        address:"",
        userName:"",
      };
    },
    created() {

    },
    mounted(){
      this.listDepartments();
      if(this.addPropsData.id){
        this.$set(this.formData,'cabinetName',this.addPropsData.cabinetName);
        this.$set(this.formData,'deptId',this.addPropsData.deptId);
        this.$set(this.formData,'subId',this.addPropsData.subId);
        this.getListData(this.formData.deptId);
      }
    },
    methods: {
      getListData(deptId){
        let self = this;
        let obj = {
          deptId:deptId,
        };
        getNoAdminSubjectListNopage(obj).then(response => {
          this.optionsListTwo = response.data;
          for(let i=0;i<self.optionsListTwo.length;i++){
            if(self.formData.subId == self.optionsListTwo[i].id){
              if(self.optionsListTwo[i].safeUserNames){
                self.userName = self.optionsListTwo[i].safeUserNames;
              }else{
                self.userName = "该实验室未设置安全责任人"
              }
              if(self.optionsListTwo[i].deptName && self.optionsListTwo[i].roomName){
                self.address = self.optionsListTwo[i].deptName+'-'+self.optionsListTwo[i].roomName;
              }else{
                self.address = "该实验室未设置位置"
              }
              // safeUserNames //负责人
              // getAddress(self.optionsListTwo[i].layoutId).then(response => {
              //   if(response.data.deptName&&response.data.room){
              //     self.address = response.data.deptName +'-'+ response.data.room;
              //   }else{
              //     self.address = "该实验室未设置位置"
              //   }
              // });
            }
          }
        });
      },
      //数据提交操作
      upData(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(this.addPropsData.id){
              //编辑
              let obj = {
                id:this.addPropsData.id,
                cabinetName:this.formData.cabinetName,
                subId:this.formData.subId,
              };
              putHxpCabinet(obj).then(response => {
                this.msgSuccess(response.msg)
                this.$parent.pageToggle(1,'get');
              });
            }else{
              //新增
              let obj = {
                cabinetName:this.formData.cabinetName,
                subId:this.formData.subId,
              }
              hxpCabinet(obj).then(response => {
                this.msgSuccess(response.msg)
                this.$parent.pageToggle(1,'refresh');
              });
            }
          }
        })
      },
      //学院清空操作
      clearButton(){
        this.$set(this,'optionsListTwo',[])
        this.$set(this.formData,'subId','')
      },
      //根据学院获取实验室
      deptChange(deptId){
        if (deptId){
          let obj = {
            deptId:deptId,
          }
          getNoAdminSubjectListNopage(obj).then(response => {
            this.optionsListTwo = response.data;
            this.$set(this.formData,'subId','')
            this.address = "";
            this.userName = "";
          });
        }
      },
      subChange(id){
        let self = this;
        for(let i=0;i<self.optionsListTwo.length;i++){
          if(id == self.optionsListTwo[i].id){
            if(self.optionsListTwo[i].safeUserNames){
              self.userName = self.optionsListTwo[i].safeUserNames;
            }else{
              self.userName = "该实验室未设置安全责任人"
            }

            if(self.optionsListTwo[i].deptName && self.optionsListTwo[i].roomName){
              self.address = self.optionsListTwo[i].deptName+'-'+self.optionsListTwo[i].roomName;
            }else{
              self.address = "该实验室未设置位置"
            }

            // safeUserNames //负责人
            // getAddress(self.optionsListTwo[i].layoutId).then(response => {
            //   if(response.data.deptName&&response.data.room){
            //     self.address = response.data.deptName +'-'+ response.data.room;
            //   }else{
            //     self.address = "该实验室未设置位置"
            //   }
            // });
          }
        }
      },
      // 获取学院
      listDepartments(){
        listDepartments().then(response => {
          this.optionsListOne = response.data;
        });
      },
      backPage(){
        this.$parent.pageToggle(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;
      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;
      }
    }
    .form-min-box{
      display: inline-block;
      width:700px;
      height:70px;
      .form-i-icon{
        margin-right:10px;
        color:rgba(255,192,0,1);
      }
      .form-left-text{
        line-height:30px;
        font-size:14px;
        color:#606266;
        margin-right:40px;
      }
      .form-right-text{
        line-height:40px;
        font-size:14px;
        color:#606266;

      }
    }
    .form-text-box{
      display: flex;
      p{
        color:#333;
        line-height:20px;
      }
      p:nth-child(1){
        width:108px;
        font-weight:500;
        text-align: right;
        font-size:14px;
      }
      p:nth-child(2){
        flex:1;
        font-size:14px;
        font-weight:500;
        margin-left:12px;
      }
    }
    .bottom-button-box{
      display: flex;
      width:160px;
      margin:40px auto;
      .left-button{
        margin-right:20px;
      }
    }
  }
</style>