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

<!--化学品存放-->
<template>
  <div class="addPage">
    <div class="addPage-min">
      <el-form :model="queryParamsData" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="关键字" prop="searchValue">
          <el-input
            maxlength="20"
            v-model="queryParamsData.searchValue"
            placeholder="化学品名/别名/CAS号"
            style="width:260px;"
            clearable/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParamsData.status" clearable placeholder="请选择状态">
            <el-option
              v-for="item in optionsListOne"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="属性" prop="status">
          <el-select v-model="queryParamsData.status" clearable placeholder="请选择状态">
            <el-option
              v-for="item in optionsListTwo"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-col :span="1.5">
            <p class="reset-button-one"
               style="width:100px;margin-right:20px;"
               @click="backPage"
            >返回</p>
            <p class="inquire-button-one"
               style="width:100px;"
               @click="handleAdd"
            >确定</p>
          </el-col>
        </el-form-item>
        <el-form-item>
          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
          <p class="reset-button-one" @click="resetQuery">重置</p>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" border :data="tableList" ref="multipleTable" :row-key="getRowKeys"
                tooltip-effect="dark" @select-all="dialogCheck" @select="dialogCheck">
        <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
        <el-table-column label="ID" align="center" prop="id" width="150" show-overflow-tooltip/>
        <el-table-column label="化学品名" align="center" prop="chemicalName" width="250"  show-overflow-tooltip/>
        <el-table-column label="CAS号" align="center" prop="casNum" width="200" show-overflow-tooltip/>
        <el-table-column label="分类" align="center" prop="classifyName" width="250"  show-overflow-tooltip/>
        <el-table-column label="属性" align="center" prop="classifyAttribute"  show-overflow-tooltip/>
        <el-table-column label="形态" align="center" prop="chemicalShapeInfo" width="180"  show-overflow-tooltip/>
        <el-table-column label="纯度" align="center" prop="purity" width="150" show-overflow-tooltip/>
      </el-table>
      <pagination :page-sizes="[20, 30, 40, 50]"
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog title="化学品存放" :visible.sync="dialogType" v-if="dialogType" width="990px" append-to-body class="ChemicalInfo-addPage-dialog">
      <!--<p class="dialog-title">{{dialogDeptName}}</p>-->
      <el-form :model="dialogData" ref="dialogForm" :inline="true" :rules="rules" label-width="70px">
        <el-form-item label="实验室" prop="subId">
          <el-select
            style="width:485px;"
            v-model="dialogData.subId"
            filterable
            remote
            clearable
            @focus="selectFocus"
            reserve-keyword
            @change="selectClick"
            @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>
        <p style="margin:0 0 20px 15px;font-weight:700;font-size:14px;" v-if="dialogData.maxList[0]&&dialogData.subId">设置要存放的化学品规格和数量</p>
        <p style="margin:0 0 0 70px;font-weight:700;font-size:14px;color:#FF6666;" v-if="!dialogData.maxList[0]&&dialogData.subId">该实验室未配置化学品柜</p>
        <div class="scrollbar-box" style="width:950px;margin:0 auto;max-height:500px;overflow-y: scroll" v-if="$store.state.settings.smartAlarmType == 1">
          <div class="for-max-big-box" v-for="(item,index) in dialogData.maxList">
            <div class="for-max-title-box">
              <p></p>
              <p>{{item.name}}</p>
              <p>{{selectioned.chemicalName}}可存放量：{{item.maxNum}}g</p>
            </div>
            <div class="for-big-box" v-for="(bigItem,bigIndex) in item.chemicalJoinCabinetSonList">
              <p class="for-big-title-p">{{bigItem.lockName}}</p>
              <div class="for-big-for-max-box">
                <div class="for-big-for-max-title-box">
                  <p>化学品存放规格</p>
                  <p @click="addList(index,bigIndex)">+添加</p>
                </div>
                <div class="for-min-box" v-for="(minItem,minIndex) in bigItem.list">
                  <el-form-item label="容器容量规格" label-width="120px" :prop="'maxList.'+ index +'.chemicalJoinCabinetSonList.'+bigIndex+'.list.'+minIndex+'.chemicalAmount'" :rules="rules.chemicalAmount">
                    <el-input
                      style="width:150px;"
                      maxlength="5"
                      onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      v-model="minItem.chemicalAmount"
                      placeholder="请输入"
                      size="small">
                      <template slot="append">g</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="容器重量规格" label-width="120px" :prop="'maxList.'+ index +'.chemicalJoinCabinetSonList.'+bigIndex+'.list.'+minIndex+'.tare'" :rules="rules.tare">
                    <el-input
                      style="width:150px;"
                      maxlength="5"
                      onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      v-model="minItem.tare"
                      placeholder="请输入"
                      size="small">
                      <template slot="append">g</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="存放数量" label-width="90px" :prop="'maxList.'+ index +'.chemicalJoinCabinetSonList.'+bigIndex+'.list.'+minIndex+'.storageNum'" :rules="rules.storageNum" class="el-form-item-button-box">
                    <el-input-number
                      style="width:150px;"
                      :min="1"
                      :max="1000"
                      v-model="minItem.storageNum"
                      placeholder="请输入">
                    </el-input-number>
                  </el-form-item>
                  <span class="el-icon-delete" style="margin-left:30px;color:#999;line-height:40px;font-size:24px;cursor: pointer;" @click="delList(index,bigIndex,minIndex)"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="scrollbar-box" style="width:950px;margin:0 auto;max-height:500px;overflow-y: scroll" v-if="$store.state.settings.smartAlarmType == 0">
          <div class="for-max-big-box" v-for="(item,index) in dialogData.maxList">
            <div class="for-max-title-box">
              <p></p>
              <p>{{item.name}}</p>
              <p>{{selectioned.chemicalName}}可存放量：{{item.maxNum}}g</p>
            </div>
            <div class="for-big-box">
              <div class="for-big-for-max-box">
                <div class="for-big-for-max-title-box">
                  <p>化学品存放规格</p>
                  <p @click="addList(index)">+添加</p>
                </div>
                <div class="for-min-box" v-for="(bigItem,bigIndex) in item.list">
                  <el-form-item label="容器容量规格" label-width="120px" :prop="'maxList.'+ index +'.list.'+ bigIndex+'.chemicalAmount'" :rules="rules.chemicalAmount">
                    <el-input
                      style="width:150px;"
                      maxlength="5"
                      onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      v-model="bigItem.chemicalAmount"
                      placeholder="请输入"
                      size="small">
                      <template slot="append">g</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="容器重量规格" label-width="120px" :prop="'maxList.'+ index +'.list.'+ bigIndex+'.tare'" :rules="rules.tare">
                    <el-input
                      style="width:150px;"
                      maxlength="5"
                      onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      v-model="bigItem.tare"
                      placeholder="请输入"
                      size="small">
                      <template slot="append">g</template>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="存放数量" label-width="90px" :prop="'maxList.'+ index +'.list.'+ bigIndex+'.storageNum'" :rules="rules.storageNum" class="el-form-item-button-box">
                    <el-input-number
                      style="width:150px;"
                      :min="1"
                      :max="1000"
                      v-model="bigItem.storageNum"
                      placeholder="请输入">
                    </el-input-number>
                  </el-form-item>
                  <span class="el-icon-delete" style="margin-left:30px;color:#999;line-height:40px;font-size:24px;cursor: pointer;" @click="delList(index,bigIndex)"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { filterDept,getSubList,getCabinetBySubId,hxpChemicalJoinCabinet,getRestStockByManyCabinet } from "@/api/medicUniversity-3_1/index";
  import { getHxpQueryByUser } from "@/api/studentApi/chemicalManagement/index";
  import { getLogoInfo } from "@/api/system/publicConfig";
  export default {
    name: "addPage",
    props:{
      listPropsData:{},
    },
    data() {
      const computingCapacity = (rule, value, callback) => {
        console.log('rule',rule)
        const list = rule.field.split('.');
        let index = parseInt(list[1]);
        let max = parseInt(this.dialogData.maxList[index].maxNum);
        if(value>max){
          callback(new Error("超出该机柜可存放量"));
        }else{
          callback();
        }
      };
      return {
        //限制时间范围
        pickerBeginOption: {
          disabledDate: (time) => {
            return time.getTime() < Date.now()-1 * 24 * 60 * 60 * 1000
          }
        },
        loading:false,
        //数据数量
        total:0,
        tableList:[],
        //实验室列表
        optionsListOne:[{id:"0",name:"普通化学品"},{id:"1",name:"危险化学品"}],
        //状态列表
        optionsListTwo:[{id:"0",name:"有毒品"},{id:"1",name:"爆炸品"}],
        // 搜索数据
        queryParamsData:{
          pageNum:1,
          pageSize:20,
        },
        // 搜索实际发送数据
        queryParams:{
          pageNum:1,
          pageSize:20,
        },
        dialogType:false,
        dialogData:{
          subId:"",
          chemicalId:"",
          maxList:[],
        },
        // 查询
        selectList:[],
        //校验
        rules:{
          subId:[
            { required: true, message: '请搜索选择实验室', trigger: 'blur' },
          ],
          chemicalAmount:[
            { required: true, message: '请输入容器容量', trigger: 'blur' },
            { required: true, message: "请输入容器容量", validator: this.spaceJudgment, trigger: "blur" },
            { required: true, message: "超出该机柜可存放量", validator: computingCapacity, trigger: "blur" },
          ],
          tare:[
            { required: true, message: '请输入容器自重', trigger: 'blur' },
            { required: true, message: "请输入容器自重", validator: this.spaceJudgment, trigger: "blur" }
          ],
          storageNum:[
            { required: true, message: '请输入存放数量', trigger: 'blur' },
            { required: true, message: "请输入存放数量", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //查询历史记录
        recordList:[],
        dialogDeptName:"",
        dialogDeptId:"",
        //选中
        selectioned:{},
      };
    },
    created() {

    },
    mounted(){
      this.getList();
      this.getRecord();
    },
    methods: {
      selectFocus(){
        if(!this.selectList[0]){
          this.getSubList();
        }
      },
      timeChange(){
        this.$forceUpdate();
      },
      //删除规格
      delList(index,bigIndex,minIndex){
        if(this.$store.state.settings.smartAlarmType == 1){
          this.dialogData.maxList[index].chemicalJoinCabinetSonList[bigIndex].list.splice(minIndex,1);
        }else{
          this.dialogData.maxList[index].list.splice(bigIndex,1);
        }
      },
      //新增规格
      addList(index,bigIndex){
        if(this.$store.state.settings.smartAlarmType == 1){
          this.dialogData.maxList[index].chemicalJoinCabinetSonList[bigIndex].list.push({chemicalAmount:"",tare:"",storageNum:1,})
        }else{
          this.dialogData.maxList[index].list.push({chemicalAmount:"",tare:"",storageNum:1,})
        }
      },
      // 提交
      submitForm(){
        let self = this;
        this.$refs["dialogForm"].validate(valid => {
          if (valid) {
            let obj = {
              subId:this.dialogData.subId,
              chemicalId:this.selectioned.id,
              chemicalJoinCabinetSonList:[],
            }
            if(this.$store.state.settings.smartAlarmType == 1){
              for(let i=0;i<self.dialogData.maxList.length;i++){
                for(let o=0;o<self.dialogData.maxList[i].chemicalJoinCabinetSonList.length;o++){
                  for(let x=0;x<self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].list.length;x++){
                    let newObj = {
                      cabinetId:self.dialogData.maxList[i].cabinetId,
                      cabinetlockId:self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].id,
                      chemicalAmount:self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].list[x].chemicalAmount,
                      chemicalAmountUnit:"g/瓶",
                      storageNum:self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].list[x].storageNum,
                      tare:self.dialogData.maxList[i].chemicalJoinCabinetSonList[o].list[x].tare,
                    }
                    obj.chemicalJoinCabinetSonList.push(newObj);
                  }
                }
              }
            }else{
              for(let i=0;i<self.dialogData.maxList.length;i++){
                for(let o=0;o<self.dialogData.maxList[i].list.length;o++){
                  console.log(self.dialogData.maxList[i].list[o]);
                  let newObj = {
                    cabinetId:self.dialogData.maxList[i].cabinetId,
                    chemicalAmount:self.dialogData.maxList[i].list[o].chemicalAmount,
                    chemicalAmountUnit:"g/瓶",
                    storageNum:self.dialogData.maxList[i].list[o].storageNum,
                    tare:self.dialogData.maxList[i].list[o].tare,
                  }
                  obj.chemicalJoinCabinetSonList.push(newObj);
                }
              }
            }
            if(obj.chemicalJoinCabinetSonList[0]){
              hxpChemicalJoinCabinet(obj).then(response => {
                self.dialogType = false;
                self.msgSuccess(response.msg)
                self.resetQuery();
              });
            }else{
              self.msgError('请添加规格')
            }
          }
        })
      },
      //取消
      cancel(){
        this.dialogType = false;
      },
      //选中触发
      selectClick(data){
        let self = this;
        if(data){
          for(let i=0;i<self.selectList.length;i++){
            if(data == self.selectList[i].id){
              let num = 0;
              for(let o=0;o<self.recordList.length;o++){
                if(data == self.recordList[o].id){
                  num ++
                }
              }
              if(num == 0){
                if(self.recordList.length>9){
                  self.recordList.splice(0,1)
                }
                self.recordList.push(self.selectList[i])
                this.$forceUpdate();
                localStorage.setItem('subRecord',JSON.stringify(self.recordList))
                break
              }
            }
          }
          let obj ={
            subId:data,
            cabinetStatus:1
          }
          getCabinetBySubId(obj).then(response => {
            let list = [];
            for(let i=0;i<response.data.length;i++){
              if(self.$store.state.settings.smartAlarmType == 1){
                if(response.data[i].cabinetLockList[0]){
                  let obj ={
                    name:response.data[i].cabinetName,
                    cabinetId:response.data[i].id,
                    chemicalJoinCabinetSonList:response.data[i].cabinetLockList
                  };
                  for(let o=0;o<obj.chemicalJoinCabinetSonList.length;o++){
                    obj.chemicalJoinCabinetSonList[o].list = [];
                  }
                  list.push(obj);
                }
              }else{
                let obj ={
                  name:response.data[i].cabinetName,
                  cabinetId:response.data[i].id,
                  list:[]
                };
                list.push(obj);
              }
            }
            let newObj = {
              chemicalId:self.selectioned.id,
              cabinetIds:"",
            }
            for(let i=0;i<list.length;i++){
              if(i==0){
                newObj.cabinetIds = list[i].cabinetId;
              }else{
                newObj.cabinetIds = newObj.cabinetIds +','+ list[i].cabinetId;
              }
            }
            if(list[0]){
              getRestStockByManyCabinet(newObj).then(response => {
                for(let i=0;i<response.data.length;i++){
                  for(let o=0;o<list.length;o++){
                    if(response.data[i].cabinetId == list[o].cabinetId){
                      list[o].maxNum = response.data[i].restStock;
                    }
                  }
                }
                this.$set(this.dialogData,"maxList",list);
              })
            }else{
              this.$set(this.dialogData,"maxList",list);
            }
          });
        }
      },
      //清空触发
      clearClick(){
        // this.optionsUser = [];
        // this.getList();
        this.getRecord();
        this.dialogData.maxList = [];
      },
      //查询
      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))
      },
      //化学品存放
      handleAdd(){
        //查询当前院系
        filterDept().then(response => {
          if(!this.selectioned.id){
            this.msgError('请勾选化学品')
            return
          }
          let text = "";
          let idText = "";
          for(let i=0;i<response.data.length;i++){
            if(i==0){
              text = text + response.data[i].deptName;
              idText = idText + response.data[i].deptId;
            }else{
              text = text +'-'+ response.data[i].deptName;
              idText = idText +','+ response.data[i].deptId;
            }
          }
          this.$set(this,'dialogDeptName',text);
          this.$set(this,'dialogDeptId',idText);
          this.getSubList();
        });
      },
      backPage(){
        this.$parent.pageToggle(1);
      },
      //获取数据列表
      getList(){
        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
        // this.queryParamsData.chemicalId = this.listPropsData.id;
        getHxpQueryByUser(this.queryParamsData).then(response => {
          this.tableList = response.rows;
          this.total = response.total
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParamsData.pageNum = 1;
        this.queryParamsData.pageSize = 20;
        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'queryParamsData',{});
        this.$set(this,'queryParams',{});
        this.handleQuery();
      },
      //获取选择记录
      getRecord(){
        if(localStorage.getItem('subRecord')){
          //历史记录
          this.recordList = JSON.parse(localStorage.getItem('subRecord'));
          //当前列表
          this.selectList = JSON.parse(localStorage.getItem('subRecord'));
        }else{
          this.recordList = [];
          this.selectList = [];
        }
      },
      //根据所属院系或多个院系获取实验室列表
      getSubList(){
        let ids = this.dialogDeptId+'';
        getSubList(ids).then(response => {
          this.$set(this,'dialogData',{
            subId:"",
            chemicalId:"",
            maxList:[],
          });
          //当前列表
          this.selectList = JSON.parse(JSON.stringify(response.data));
          //原始列表数据
          this.selectListData = JSON.parse(JSON.stringify(response.data));
          this.dialogType = true;
        });
      },
      dialogCheck (selection, row) {
        console.log("selection",selection)
        console.log("row",row)
        this.$refs.multipleTable.clearSelection()
        if (selection.length === 0) {
          // 判断selection是否有值存在
          this.selectioned = {};
        }else{
          this.selectioned = row
          this.$refs.multipleTable.toggleRowSelection(row, true)
        }
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.id
      },
    }
  }
</script>

<style scoped lang="scss">
  .addPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-weight:500;
    p{
      margin:0;
      padding:0;
    }
    .addPage-min{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px;
    }
  }
</style>
<style lang="scss">
  .ChemicalInfo-addPage-dialog{
    p{
      margin:0;
    }
    .dialog-title{
      margin-left:10px;
      margin-bottom:20px;
      font-weight:700;
    }
    .for-max-big-box{
      padding:20px;
      background: #f5f5f5;
      margin-bottom:12px;
      .for-max-title-box{
        display: flex;
        p:nth-child(1){
          background: #0045AF;
          width: 3px;
          height: 16px;
        }
        p:nth-child(2){
          flex:1;
          height: 16px;
          font-size: 16px;
          color: #333333;
          line-height: 16px;
          margin-left:12px;
        }
        p:nth-child(3){
          font-size:16px;
          line-height: 16px;
          color:#0183FA;
        }
      }
      .for-big-box{
        margin-top:20px;
        .for-big-title-p{
          height:50px;
          line-height:50px;
          padding:0 22px;
          font-size: 16px;
          color:#333333;
          background: #CCE6FE;
        }
        .for-big-for-max-box{
          border:1px solid #E0E0E0;
          .for-big-for-max-title-box{
            height:60px;
            display: flex;
            p:nth-child(1){
              flex:1;
              font-size:14px;
              line-height:60px;
              margin-left:22px;
            }
            p:nth-child(2){
              width:80px;
              height: 30px;
              line-height:30px;
              border-radius: 6px;
              border: 1px solid #0045AF;
              text-align: center;
              margin:16px 14px;
              color:#0045AF;
              font-size:12px;
              cursor: pointer;
            }
          }
          .for-min-box{
            margin-bottom:10px;
          }
        }
      }
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none!important;
      }
      /* 在Firefox浏览器下 */
      input[type="number"]{
        -moz-appearance: textfield!important;
      }
      .el-form-item__label{
        font-weight:400;
      }
      .el-form-item-button-box{
        .el-input-number__decrease{
          height:38px;
          width:38px;
          line-height:38px;
        }
        .el-input-number__increase{
          height:38px;
          width:38px;
          line-height:38px;
        }
      }
    }
  }
</style>