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

<!--新增化学品-->
<template>
  <div class="listPage">
    <div class="title-box">
      <p>{{addPropsData.id?'编辑化学品':'新增化学品'}}</p>
      <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
    </div>
    <div class="listPage-min scrollbar-box">
      <el-form :model="formData" ref="form" :inline="true" :rules="rules" label-width="120px">
        <div class="form-min-box">
          <el-form-item label="化学品名：" prop="chemicalName">
            <el-input
              maxlength="30"
              style="width:500px;"
              v-model="formData.chemicalName"
              placeholder="请输入化学品名"
              clearable
              size="small"/>
          </el-form-item>
        </div>
        <div class="form-min-box">
          <el-form-item label="化学品分类：" prop="chemicalClassify">
            <el-select v-model="formData.chemicalClassify" clearable placeholder="请选择化学品分类" style="width:180px;">
              <el-option
                v-for="item in optionsListOne"
                :key="item.id"
                :label="item.classifyName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="属性：" prop="classifyAttribute" label-width="70px">-->
            <!--<el-select-->
              <!--style="width:250px;"-->
              <!--v-model="formData.classifyAttribute"-->
              <!--multiple-->
              <!--collapse-tags-->
              <!--placeholder="请选择属性">-->
              <!--<el-option-->
                <!--v-for="item in optionsListTwo"-->
                <!--:key="item.dictValue"-->
                <!--:label="item.dictLabel"-->
                <!--:value="item.dictValue">-->
              <!--</el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <el-form-item class="criticality-input" label="临界量(T)：" prop="criticality" label-width="100px" v-if="formData.chemicalClassify == 1">
            <el-input-number
              :precision="2"
              :step="0.01" :max="10000"
              style="width:220px;"
              v-model="formData.criticality"
              placeholder="请输入临界量"
              clearable
              size="small"/>
          </el-form-item>
        </div>
        <div class="form-min-box">
          <el-form-item label="形态：" prop="chemicalShape">
            <el-select v-model="formData.chemicalShape" clearable placeholder="请选择形态" style="width:500px;">
              <el-option
                v-for="item in optionsList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <!--<div class="form-min-box">-->
          <!--<el-form-item label="标签类型：" prop="labelType" style="width:500px;">-->
            <!--<el-radio-group v-model="formData.labelType">-->
              <!--<el-radio :label="1">RFID</el-radio>-->
              <!--<el-radio :label="2">二维码</el-radio>-->
            <!--</el-radio-group>-->
          <!--</el-form-item>-->
        <!--</div>-->
        <div class="form-min-box">
          <el-form-item label="计量方式：" prop="measuringMethod">
            <el-select v-model="formData.measuringMethod" clearable placeholder="请选择计量方式" style="width:180px;">
              <el-option label="重量" :value="1"></el-option>
              <!--<el-option label="体积" :value="2"></el-option>-->
              <!--<el-option label="个数" :value="3"></el-option>-->
            </el-select>
          </el-form-item>
          <el-form-item label="单位：" prop="chemicalUnit" label-width="100px">
            <el-select v-model="formData.chemicalUnit" clearable placeholder="请选择单位" style="width:220px;">
              <el-option label="g" value="g"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="form-el-checkbox-group">
          <el-form-item label="属性：" prop="classifyAttribute">
            <el-checkbox-group v-model="formData.classifyAttribute" style="margin-top:2px;flex:1;">
              <el-checkbox v-for="item in optionsListTwo" :label="item.dictValue"
                           :key="item.dictValue">{{item.dictLabel}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <!--<div class="form-min-box">-->
          <!--<el-form-item label="检验方式：" prop="verification">-->
            <!--<el-select v-model="formData.verification" clearable placeholder="请选择检验方式" style="width:500px;">-->
              <!--<el-option label="单人验证" :value="1"></el-option>-->
              <!--<el-option label="双人双卡" :value="2"></el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
        <!--</div>-->
        <div class="form-min-box">
          <el-form-item label="别名：" prop="anotherName">
            <el-input
              maxlength="30"
              style="width:500px;"
              v-model="formData.anotherName"
              placeholder="请输入别名"
              clearable
              size="small"/>
          </el-form-item>
        </div>
        <div class="form-min-box">
          <el-form-item label="CAS号：" prop="casNum">
            <el-input
              maxlength="30"
              style="width:500px;"
              v-model="formData.casNum"
              placeholder="请输入CAS号"
              clearable
              size="small"/>
          </el-form-item>
        </div>
        <div class="form-min-box">
          <el-form-item label="生产厂家：" prop="factory">
            <el-input
              maxlength="30"
              style="width:500px;"
              v-model="formData.factory"
              placeholder="请输入生产厂家"
              clearable
              size="small"/>
          </el-form-item>
        </div>
        <div class="form-min-box">
          <el-form-item label="纯度：" prop="purity">
            <el-input
              maxlength="30"
              style="width:500px;"
              v-model="formData.purity"
              placeholder="请输入纯度"
              clearable
              size="small"/>
          </el-form-item>
        </div>
        <div class="form-min-box">
          <el-form-item label="领用时效：" prop="collectHour">
            <el-input
              maxlength="2"
              onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
              style="width:100px;"
              v-model="formData.collectHour"
              placeholder="请输入"
              clearable
              size="small"/>
          </el-form-item>
          <el-form-item label="小时" label-width="44px" prop="collectMinute">
            <el-input
              maxlength="2"
              onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
              style="width:100px;"
              v-model="formData.collectMinute"
              placeholder="请输入"
              clearable
              size="small"/>
          </el-form-item>
          <span class="form-left-text">分钟</span>
          <i class="el-icon-question form-i-icon"></i>
          <span class="form-right-text">化学品使用最大时长设置</span>
        </div>
        <div class="bottom-button-box">
          <p class="inquire-button-one right-button" @click="upData">提交</p>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { classifyList,addHxpChemical,putHxpChemical } from "@/api/medicUniversity-3_1/index";
  export default {
    name: "addPage",
    props:{
      addPropsData:{},
    },
    data() {
      return {
        rules:{
          chemicalName:[
            { required: true, message: '请输入化学品名', trigger: 'blur' },
            { required: true, message: "请输入化学品名", validator: this.spaceJudgment, trigger: "blur" }
          ],
          chemicalClassify:[
            { required: true, message: '请选择化学品分类', trigger: 'blur' },
            { required: true, message: "请选择化学品分类", validator: this.spaceJudgment, trigger: "blur" }
          ],
          chemicalShape:[
            { required: true, message: '请选择形态', trigger: 'blur' },
            { required: true, message: "请选择形态", validator: this.spaceJudgment, trigger: "blur" }
          ],
          // labelType:[
          //   { required: true, message: '请选择标签类型', trigger: 'blur' },
          //   { required: true, message: "请选择标签类型", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          measuringMethod:[
            { required: true, message: '请选择计量方式', trigger: 'blur' },
            { required: true, message: "请选择计量方式", validator: this.spaceJudgment, trigger: "blur" }
          ],
          criticality:[
            { required: true, message: '请输入临界量', trigger: 'blur' },
            { required: true, message: "请输入临界量", validator: this.spaceJudgment, trigger: "blur" }
          ],
          chemicalUnit:[
            { required: true, message: '请选择单位', trigger: 'blur' },
            { required: true, message: "请选择单位", validator: this.spaceJudgment, trigger: "blur" }
          ],
          verification:[
            { required: true, message: '请选择检验方式', trigger: 'blur' },
            { required: true, message: "请选择检验方式", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        formData:{
          // labelType:1,
          classifyAttribute:[],
        },
        //化学品形态
        optionsList:[],
        //化学品分类列表
        optionsListOne:[],
        //属性列表
        optionsListTwo:[],
      };
    },
    created() {
    },
    mounted(){
      this.getDicts("chemical_shape").then(response => {
        this.optionsList = response.data;
      })
      this.getDicts("hxp_classifyattribute").then(response => {
        this.optionsListTwo = response.data;
      })
      this.classifyList();
      if(this.addPropsData.id){
        this.formData = JSON.parse(JSON.stringify(this.addPropsData));
        this.formData.chemicalShape = this.addPropsData.chemicalShape+''
        if(this.formData.classifyAttribute){
          this.formData.classifyAttribute = this.formData.classifyAttribute.split(",");
        }
      }
    },
    methods: {
      //提交接口
      upData(){
        let self = this;
        console.log('this.addPropsData',this.addPropsData);
        this.$refs["form"].validate(valid => {
          if (valid) {
            console.log('this.addPropsData',this.addPropsData);
            if(this.addPropsData.id){
              //编辑
              if(this.formData.chemicalClassify != 1){
                this.formData.criticality = 0;
              }
              this.formData.classifyAttribute = this.formData.classifyAttribute+'';
              putHxpChemical(this.formData).then(response => {
                if(response.code == 200){
                  this.msgSuccess(response.msg);
                  this.$parent.pageToggle(1,'get');
                }
              });
            }else{
              //新增
              if(this.formData.chemicalClassify != 1){
                this.formData.criticality = 0;
              }
              this.formData.classifyAttribute = this.formData.classifyAttribute+'';
              addHxpChemical(this.formData).then(response => {
                if(response.code == 200){
                  this.msgSuccess(response.msg);
                  this.$parent.pageToggle(1,'refresh');
                }
              });
            }
          }
        });
      },
      //获取化学品分类列表
      classifyList(){
        classifyList().then(response => {
          this.optionsListOne = response.rows;
        });
      },
      backPage(){
        this.$parent.pageToggle(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .listPage{
    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;
      }
    }
    .listPage-min{
      flex:1;
      display: flex;
      flex-direction: column;
      padding:20px;
      .form-min-box{
        display: inline-block;
        width:750px;
        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;

        }
      }
      .bottom-button-box{
        display: flex;
        width:160px;
        margin:40px auto 20px;
        .left-button{
          margin-right:20px;
        }
      }
    }
  }
</style>
<style lang="scss">
  .listPage{
    .listPage-min{
      .criticality-input{
        .el-input-number__decrease,.el-input-number__increase{
          display: none;
        }
        .el-input-number .el-input{
          input{
            padding:0 15px;
            text-align: left;
          }
        }
      }
      .form-el-checkbox-group{
        .el-form-item{
          display: flex;
          .el-form-item__label{
            width:120px;
          }
          .el-form-item__content{
            flex:1;
          }
          .el-checkbox{
            display: inline-block;
          }
        }
      }
    }
  }
</style>