FE-V2-PC/src/views/studentViews/chemicalManagement/studentPurchaseRequisition/addPage.vue

<!--新增-->
<template>
  <div class="addPage">
    <div class="title-box">
      <p>化学品申购</p>
      <p class="reset-button-one" @click="backPage(1)"><i class="el-icon-arrow-left"></i>返回</p>
    </div>
    <div class="page-max-box scrollbar-box">
      <el-form :model="formData" ref="form" :inline="true" :rules="rules">
        <el-form-item label="申购原因：" prop="applyReason" label-width="100px">
          <el-input
            type="textarea"
            resize="none"
            maxLength="50"
            :rows="4"
            style="width:1200px;"
            v-model="formData.applyReason"
            placeholder="请输入申购原因"
            clearable/>
        </el-form-item>
        <div class="two-form-flex">
          <div class="two-form-left">
            <el-form-item label="实验室：" prop="subId" label-width="100px">
              <el-select
                style="width:360px;"
                v-model="formData.subId"
                filterable
                remote
                clearable
                reserve-keyword
                @change="subChange"
                @focus="selectFocus"
                @clear="clearClick"
                placeholder="请选择实验室"
                :remote-method="getSelectList"
                :loading="loading">
                <el-option
                  v-for="item in selectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <p class="two-form-right add-button-one-90" @click="backPage(2)">更换化学品</p>
        </div>
        <div class="form-list-max-box">
          <div class="form-list-title-box">
            <p>化学品名称</p>
            <p>化学品柜</p>
            <p>剩余可存放量</p>
            <p>本次申购量</p>
          </div>
          <div class="form-list-data-box" v-for="(item,index) in formData.maxList" :key="index">
            <div class="form-list-data-title">
              <p>{{item.chemicalName}}</p>
            </div>
            <div class="form-list-data-for-max-box">
              <div class="form-list-data-for" v-for="(minItem,minIndex) in item.list" :key="minIndex">
                <div class="form-list-one-box">
                  <el-form-item label="" :prop="'maxList.'+ index +'.list.'+ minIndex +'.cabinetId'"
                                :rules="rules.cabinetId">
                    <el-select v-model="minItem.cabinetId" clearable placeholder="请选择化学品柜"
                      @change="(val)=>selectCabinet(index,minIndex,val)">
                      <el-option v-for="item in cabinetLit"
                                 :key="item.id" :value="item.id" :label="item.cabinetName"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <p class="form-list-text-p">
                  {{minItem.applyText?minItem.applyText:'请选择化学品柜'}}
                </p>
                <div class="form-list-two-box">
                  <el-form-item label="" :prop="'maxList.'+ index +'.list.'+ minIndex +'.applyNum'"
                                :rules="rules.applyNum">
                    <el-input
                      maxLength="30"
                      v-model="minItem.applyNum"
                      placeholder="请输入本次申购量"
                      clearable
                      onkeyup="this.value=this.value.replace(/\D/g,'')"
                      onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      style="width: 220px"
                    ><i slot="append">g</i></el-input>
                  </el-form-item>
                  <p class="el-icon-delete button-icon-p" v-if="formData.maxList[index].list.length>1" @click="delObj(index,minIndex)"></p>
                  <p class="el-icon-circle-plus-outline button-icon-p" v-if="minIndex ==formData.maxList[index].list.length-1" @click="addObj(index)"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-button-box">
          <p class="add-button-one-90 right-button" @click="upData(2)">保存草稿</p>
          <p class="inquire-button-one right-button" @click="upData(1)">提交</p>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { getNoAdminSubjectListNopage,getCabinetBySubId,getRestStock } from "@/api/medicUniversity-3_1/index";
  import { getHxpapply,addHxpapply } from "@/api/studentApi/chemicalManagement/index";
  export default {
    name: "addPage",
    props:{
      addPagePropsData:{},
      multipleTableList:{},
    },
    data(){
      return{
        loading:false,
        formData:{
          subId:"",
          applyReason:"",
          maxList:[],
        },
        rules:{
          applyReason:[
            { required: true, message: '请输入申购原因', trigger: 'blur' },
            { required: true, message: "请输入申购原因", validator: this.spaceJudgment, trigger: "blur" }
          ],
          subId:[
            { required: true, message: '请选择实验室', trigger: 'blur' },
            { required: true, message: "请选择实验室", validator: this.spaceJudgment, trigger: "blur" }
          ],
          cabinetId:[
            { required: true, message: '请选择化学品柜', trigger: 'blur' },
            { required: true, message: "请选择化学品柜", validator: this.spaceJudgment, trigger: "blur" }
          ],
          applyNum:[
            { required: true, message: '请输入本次申购量', trigger: 'blur' },
            { required: true, message: "请输入本次申购量", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //实验室列表
        selectList:[],
        //机柜列表
        cabinetLit:[],
      }
    },
    created() {

    },
    mounted(){
      if(this.addPagePropsData.subId){
        this.$set(this.formData,'subId',this.addPagePropsData.subId);
      }
      if(this.addPagePropsData.applyReason){
        this.$set(this.formData,'applyReason',this.addPagePropsData.applyReason);
      }
      if(this.addPagePropsData.cabinetLit){
        this.$set(this,'cabinetLit',this.addPagePropsData.cabinetLit);
      }
      this.getSubject();
      this.addData();
    },
    methods: {
      //新增逻辑
      addData(){
        let self = this;
        for(let i=0;i<self.multipleTableList.length;i++){
          let num = 0;
          let newObj = {};
          if(self.addPagePropsData.list){
            for(let o=0;o<self.addPagePropsData.list.length;o++){
              if(self.multipleTableList[i].id == self.addPagePropsData.list[o].chemicalId){
                num++
                newObj = JSON.parse(JSON.stringify(self.addPagePropsData.list[o]))
              }
            }
          }
          if(num == 0){
            let obj = {
              chemicalId:self.multipleTableList[i].id,
              chemicalName:self.multipleTableList[i].chemicalName,
              list:[{cabinetId:"",applyNum:"",applyText:""}],
            }
            self.formData.maxList.push(obj);
          }else{
            self.formData.maxList.push(JSON.parse(JSON.stringify(newObj)));
          }
        }
      },
      //删除子项
      delObj(index,minIndex){
        this.formData.maxList[index].list.splice(minIndex,1)
      },
      //增加子项
      addObj(index){
        let obj = {cabinetId:"",applyNum:"",applyText:""}
        this.formData.maxList[index].list.push(obj);
      },
      //提交
      upData(type){
        let self = this;
        this.$refs["form"].validate((valid) => {
          if (valid) {
            let text = type==1?'提交':'保存';
            this.$confirm('是否确认'+text+'?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              let upObj = {
                applyStatus:type,
                subId:self.formData.subId,
                applyReason:self.formData.applyReason,
                actHxpapplyDetailList:[],
              };
              for(let i=0;i<self.formData.maxList.length;i++){
                for(let o=0;o<self.formData.maxList[i].list.length;o++){
                  let obj = {
                    chemicalId: self.formData.maxList[i].chemicalId,
                    chemicalName: self.formData.maxList[i].chemicalName,
                    cabinetId: self.formData.maxList[i].list[o].cabinetId,
                    applyNum: self.formData.maxList[i].list[o].applyNum
                  }
                  upObj.actHxpapplyDetailList.push(obj)
                }
              }
              addHxpapply(upObj).then(response => {
                self.msgSuccess(response.msg);
                self.backPage(3)
              });
            }).then(() => {
            }).catch(() => {});
          }
        })
      },
      //返回
      backPage(type){
        if(type == 1){
          this.$parent.goPage(1);
        }else if(type == 2){
          let obj = {
            type:true,
            subId:this.formData.subId,
            applyReason:this.formData.applyReason,
            list:JSON.parse(JSON.stringify(this.formData.maxList)),
            cabinetLit:this.cabinetLit
          };
          this.$parent.goPage(3,obj);
        }else if(type == 3){
          this.$parent.backPage();
        }
      },
      // 机柜选中
      selectCabinet(index,minIndex,val){
        let obj = {
          subId:this.formData.subId,
          chemicalId:this.formData.maxList[index].chemicalId,
          cabinetId:this.formData.maxList[index].list[minIndex].cabinetId,
        };
        getRestStock(obj).then(response => {
          this.$set(this.formData.maxList[index].list[minIndex],'applyText',response.data.restStock);
        });
      },
      // 实验室选中
      subChange(val){
        let self = this;
        getCabinetBySubId({id:val}).then(response => {
          this.$set(this,'cabinetLit',response.data);
          for(let i=0;i<self.formData.maxList.length;i++){
            for(let o=0;o<self.formData.maxList[i].list.length;o++){
              console.log(self.formData.maxList[i].list[o])
              this.$set(this.formData.maxList[i].list[o],'cabinetId',"");
              this.$set(this.formData.maxList[i].list[o],'applyText',"");
            }
          }
        });
      },
      getSubject(){
        //查询院系下实验室
        getNoAdminSubjectListNopage().then(response => {
          //当前列表
          this.selectList = JSON.parse(JSON.stringify(response.data));
          //原始列表数据
          this.selectListData = JSON.parse(JSON.stringify(response.data));
        });
      },
      selectFocus(){
        this.selectList = JSON.parse(JSON.stringify(this.selectListData));
      },
      /** 实验室-本地懒加载 */
      getSelectList(val) {
        let self = this;
        let list = [];
        for(let i=0;i<self.selectListData.length;i++){
          if(self.selectListData[i].name.indexOf(val) != -1){
            list.push(self.selectListData[i]);
          }
        }
        this.selectList = JSON.parse(JSON.stringify(list))
      },
      //实验室选中清除
      clearClick(){
        this.selectList = JSON.parse(JSON.stringify(this.selectListData))
      },
    }
  }
</script>

<style scoped lang="scss">
  .addPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-weight:500;
    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;
      }
    }
    .page-max-box{
      flex:1;
      display: flex;
      flex-direction: column;
      padding:20px 80px;
      .two-form-flex{
        display: flex;
        .two-form-left{
          flex:1;
        }
        .two-form-right{
          width:130px;
        }
      }
      .form-list-max-box{
        .form-list-title-box{
          display: flex;
          background: #F5F5F5;
          border-bottom:1px solid #e0e0e0;
          p{
            line-height:60px;
            font-size:16px;
            color:#333;
          }
          p:nth-child(1){
            padding-left:58px;
            width:255px;
          }
          p:nth-child(2){
            width:469px;
          }
          p:nth-child(3){
            width:252px;
          }
          p:nth-child(4){
            flex:1;
          }
        }
        .form-list-data-box{
          display: flex;
          border:1px solid #e0e0e0;
          border-top:none;
          padding-top:20px;
          .form-list-data-title{
            vertical-align:middle;
            width:255px;
            display: flex;
            p{
              height:40px;
              line-height:40px;
              align-self: center;
              margin-top:-20px;
              margin-left:58px;
            }
          }
          .form-list-data-for-max-box{
            .form-list-data-for{
              display: flex;
              .form-list-one-box{
                width:469px;
              }
              .form-list-text-p{
                width:252px;
                line-height:40px;
                font-size:14px;
              }
              .form-list-two-box{
                flex:1;
                .button-icon-p:nth-child(2){
                  margin-left:80px;
                }
                .button-icon-p{
                  color:#A2A2A2;
                  width:40px;
                  height:40px;
                  line-height:40px;
                  text-align: center;
                  cursor: pointer;
                  margin-left:20px;
                }
              }
            }
          }
        }
      }
      .bottom-button-box{
        display: flex;
        width:260px;
        margin:55px auto;
        p:nth-child(1){
          width:120px;
          margin-right:20px;
        }
        p:nth-child(2){
          width:120px;
        }
      }
    }
  }
</style>