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

<!--编辑-->
<template>
  <div class="editPage">
    <div class="editPage-min" v-if="pageType == 1">
      <div class="title-box">
        <p>化学品申购</p>
        <p class="reset-button-one" @click="backPage(0)"><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="pageToggle(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>
    <edit-check-page :editCheckIds="editCheckIds" v-if="pageType == 2"></edit-check-page>
  </div>
</template>

<script>
  import editCheckPage from "./editCheckPage.vue"
  import { getNoAdminSubjectListNopage,getCabinetBySubId,getRestStock } from "@/api/medicUniversity-3_1/index";
  import { getHxpapply,addHxpapply } from "@/api/studentApi/chemicalManagement/index";
  export default {
    name: "editPage",
    components: {
      editCheckPage
    },
    props:{
      editPagePropsData:{},
    },
    data(){
      const nonZero = (rule, value, callback) => {
        if(value<=0){
          callback(new Error("请输入本次申购量"));
        }else{
          callback();
        }
      };
      return{
        pageType:1,
        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" },
            { required: true, message: "请输入本次申购量", validator: nonZero, trigger: "blur" },
          ],
        },
        //实验室列表
        selectList:[],
        //机柜列表
        cabinetLit:[],
        //当前选中化学品(用于下级页面)
        editCheckIds:{},
      }
    },
    created() {

    },
    mounted(){
      this.editData();
    },
    methods: {
      //去选择页面
      pageToggle(type,data){
        let self = this;
        if(type == 1){
          this.pageType = 1;
        }else if(type == 2){
          let text = "";
          for(let i=0;i<self.formData.maxList.length;i++){
            if(i == 0){
              text = self.formData.maxList[i].chemicalId
            }else{
              text = text + ',' +self.formData.maxList[i].chemicalId
            }
          }
          this.$set(this.editCheckIds,'ids',text);
          this.pageType = 2;
        }else if(type == 3){
          let newList = [];
          for(let i=0;i<self.formData.maxList.length;i++){
            for(let o=0;o<data.length;o++){
              if(self.formData.maxList[i].chemicalId == data[o].id){
                newList.push(self.formData.maxList[i]);
              }
            }
          }
          newList = JSON.parse(JSON.stringify(newList));
          this.$set(this.formData,'maxList',newList);
          for(let i=0;i<data.length;i++){
            let num = 0;
            for(let o=0;o<self.formData.maxList.length;o++){
              if(self.formData.maxList[o].chemicalId == data[i].id){
                num++
              }
            }
            if(num == 0){
              let obj = {
                chemicalId:data[i].id,
                chemicalName:data[i].chemicalName,
                list:[{cabinetId:"",applyNum:"",applyText:""}],
              }
              self.formData.maxList.push(obj);
            }
          }
          this.pageType = 1;
        }
      },
      //新增逻辑
      editData(){
        this.$set(this,'formData',this.editPagePropsData);
        this.getSubject();
        this.getCabinet(this.editPagePropsData.subId);
      },
      //删除子项
      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 = {
                id:self.formData.id,
                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(1);
              });
            }).then(() => {
            }).catch(() => {});
          }
        })
      },
      //返回
      backPage(type){
        if(type == 0){
          this.$parent.pageToggle(0);
        }else if(type == 1){
          this.$parent.pageToggle(1);
        }
      },
      // 机柜选中
      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));
        });
      },
      getCabinet(val){
        getCabinetBySubId({id:val}).then(response => {
          this.$set(this,'cabinetLit',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">
  .editPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .editPage-min{
      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;
        }
      }
      .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>