v3-lab-web/src/views/chemicalManage/components/addChemicals.vue

<!--

  <add-chemicals ref="addChemicals"></add-chemicals>

  import addChemicals from "@/views/chemicalManage/components/addChemicals.vue";

  components: {
    addChemicals
  },

  //新增
  this.$refs.addChemicals.addChemicalsOpen('1');

  //编辑
  this.$refs.addChemicals.addChemicalsOpen('2',row);

  //父类方法(添加成功后会调用)
  submitSuccessful(){

  },

-->
<template>
  <el-dialog class="addChemicals"
             :modal-append-to-body="false"
             :close-on-click-modal="false" :close-on-press-escape="false"
             :title="lookImgDialogTitle"
             :visible.sync="lookImgDialogType"
             v-if="lookImgDialogType"
             width="800px" height="482px"
             append-to-body>
    <div class="form-box">
      <el-form :model="dialogForm" ref="dialogForm" :inline="true" :rules="dialogRules" class="addCheckPage-min">
        <el-form-item label="化学品名：" prop="chemicalName" label-width="130px">
          <el-input v-model="dialogForm.chemicalName" placeholder="请输入化学品名" maxLength="150" style="width:590px;"/>
        </el-form-item>
        <div>
          <el-form-item label="类别：" prop="chemicalCategory" label-width="130px">
            <el-cascader
              ref="addCascader"
              @change="addHandleChange"
              style="width:245px;"
              v-model="dialogForm.chemicalCategory"
              :options="categoryOptions"
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="级别：" prop="chemicalLevel" label-width="90px">
            <el-select v-model="dialogForm.chemicalLevel" placeholder="请选择级别" style="width: 245px">
              <el-option
                v-for="dict in levelOptions"
                :key="dict.itemId"
                :label="dict.label"
                :value="dict.itemId"
              />
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="CAS：" prop="casNum" label-width="130px">
            <el-input v-model="dialogForm.casNum" placeholder="请输入CAS码" maxLength="12" style="width:245px;"/>
          </el-form-item>
          <el-form-item label="别名：" prop="anotherName" label-width="90px">
            <el-input v-model="dialogForm.anotherName" placeholder="请输入化学品别名" maxLength="20" style="width:245px;"/>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="纯度：" prop="chemicalPurity" label-width="130px">
            <el-input v-model="dialogForm.chemicalPurity" placeholder="请输入化学品纯度" maxLength="20" style="width:245px;"/>
          </el-form-item>
          <el-form-item label="密度：" prop="chemicalDensity" label-width="90px">
            <el-input-number v-model="dialogForm.chemicalDensity" controls-position="right" style="width:245px;"
                             :precision="2" :step="0.1" :min="0" :max="99"></el-input-number>
          </el-form-item>
        </div>
        <el-form-item label="实验室存放规定：" prop="depositRequire" label-width="130px">
          <el-input-number
            class="table-date-input-right-border"
            v-model="dialogForm.depositRequire"
            style="width:145px;"
            :controls="false"
            :min="0" :max="9999">
          </el-input-number>
          <el-select
            class="table-date-input-left-border"
            v-model="dialogForm.depositUnit" placeholder="请选择" style="width: 100px">
            <el-option
              v-for="dict in stateOfMatter"
              :key="dict.value"
              :label="dict.value"
              :value="dict.value"
            />
          </el-select>
          <el-form-item label="密度说明：" prop="relativeDensity" label-width="100px">
            <el-input v-model="dialogForm.relativeDensity" placeholder="请输入密度说明" disabled style="width:245px;"/>
          </el-form-item>
          <!--<el-input placeholder="请输入" v-model="dialogForm.depositRequire" style="width:245px;"-->
                    <!--maxlength="5" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">-->
            <!--<template slot="append">-->
              <!--<el-select v-model="dialogForm.depositUnit" placeholder="请选择" style="width: 62px">-->
                <!--<el-option-->
                  <!--v-for="dict in stateOfMatter"-->
                  <!--:key="dict.value"-->
                  <!--:label="dict.label"-->
                  <!--:value="dict.value"-->
                <!--/>-->
              <!--</el-select>-->
            <!--</template>-->
          <!--</el-input>-->
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer dialog-footer-box">
      <p class="dialog-footer-button-null"></p>
      <p class="dialog-footer-button-info" @click="addChemicalsOpen(3)">取消</p>
      <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
      <p class="dialog-footer-button-null"></p>
    </div>
  </el-dialog>
</template>
<script>
  import { getDicts } from "@/api/commonality/noPermission";
  import { chemicalChemicalAdd,chemicalChemicalUpdate,chemicalChemicalDetail,systemDictChemicalType } from "@/api/chemicalManage/index";
  export default {
    name: 'addChemicals',
    data () {
      return {
        lookImgDialogType:false,
        lookImgDialogTitle:'',
        //化学品类别
        categoryOptions:[],
        //级别
        levelOptions:[{itemId:1,label:'管控'},{itemId:2,label:'非管控'}],
        //物质状态
        stateOfMatter:[],
        dialogForm:{
          chemicalName:null,
          chemicalCategory:[],
          chemicalLevel:1,
          casNum:null,
          anotherName:null,
          chemicalPurity:null,
          chemicalDensity:1,
          depositRequire:0,
          depositUnit:'L',
        },
        dialogRules:{
          chemicalName: [
            { required: true, message: "请输入化学品名", trigger: "blur" },
            { required: true, message: "请输入化学品名", validator: this.spaceJudgment, trigger: "blur" }
          ],
          chemicalCategory: [
            { required: true, message: "请选择类别", trigger: "blur" },
            { required: true, message: "请选择类别", validator: this.spaceJudgment, trigger: "blur" }
          ],
          chemicalLevel: [
            { required: true, message: "请选择级别", trigger: "blur" },
            { required: true, message: "请选择级别", validator: this.spaceJudgment, trigger: "blur" }
          ],
          chemicalDensity: [
            { required: true, message: "请输入密度", trigger: "blur" },
            { required: true, message: "请输入密度", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //调用方法
      addChemicalsOpen(type,row){
        this.initialize();
        if(type == 1){
          this.initialize();
          this.$set(this,'dialogForm',{
            chemicalName:null,
            chemicalCategory:[],
            chemicalLevel:1,
            casNum:null,
            anotherName:null,
            chemicalPurity:null,
            chemicalDensity:1,
            depositRequire:0,
            depositUnit:'L',
          });
          this.$set(this,'lookImgDialogTitle','新增');
          this.$set(this,'lookImgDialogType',true);
        }else if(type == 2){
          chemicalChemicalDetail({chemicalId:row.chemicalId}).then(response => {
            let obj = {
              chemicalId:row.chemicalId,
              chemicalName:response.data.chemicalName,
              chemicalLevel:response.data.chemicalLevel,
              casNum:response.data.casNum,
              anotherName:response.data.anotherName,
              chemicalPurity:response.data.chemicalPurity,
              chemicalDensity:response.data.chemicalDensity,
              depositRequire:response.data.depositRequire+'',
              depositUnit:response.data.depositUnit,
              relativeDensity:response.data.relativeDensity,
            };
            if(response.data.chemicalCategoryClass){
              obj.chemicalCategory = [response.data.chemicalCategory,response.data.chemicalCategoryClass]
            }else{
              obj.chemicalCategory = [response.data.chemicalCategory]
            }
            this.$set(this,'dialogForm',obj);
            this.$set(this,'lookImgDialogTitle','编辑');
            this.$set(this,'lookImgDialogType',true);
          });
        }else if(type == 3){
          this.$set(this,'dialogForm',{});
          this.$set(this,'lookImgDialogTitle','');
          this.$set(this,'lookImgDialogType',false);
        }
      },
      //初始化
      initialize(){
        //化学品类别字典
        systemDictChemicalType({dictCode:'chemicals_category'}).then(response => {
          this.$set(this,'categoryOptions',response.data);
        });
        //存放单位
        getDicts('storage_unit').then(response => {
          this.$set(this,'stateOfMatter',response.data);
        });
      },
      //提交
      dialogSubmit(){
        let self = this;
        this.$refs["dialogForm"].validate(valid => {
          if (valid) {
            if(this.dialogForm.casNum){//
              let regex = /^\d{1,7}-\d{2}-\d/;
              if(!regex.test(this.dialogForm.casNum)){
                this.msgError('请输入正确的CAS码')
                return
              }
            }
            let obj = JSON.parse(JSON.stringify(this.dialogForm))
            if(obj.chemicalCategory[1]){
              obj.chemicalCategoryClass = obj.chemicalCategory[1]
              obj.chemicalCategory = obj.chemicalCategory[0]
              for(let i=0; i<self.categoryOptions.length;i++){
                if(self.categoryOptions[i].value == obj.chemicalCategory){
                  for(let o=0;o<self.categoryOptions[i].children.length;o++){
                    if(self.categoryOptions[i].children[o].value == obj.chemicalCategoryClass){
                      obj.chemicalCategoryName = self.categoryOptions[i].label
                      obj.chemicalCategoryClassName =self.categoryOptions[i].children[o].label
                    }
                  }
                }
              }
            }else{
              obj.chemicalCategoryClass = null;
              obj.chemicalCategory = obj.chemicalCategory[0]
              for(let i=0; i<self.categoryOptions.length;i++){
                if(self.categoryOptions[i].value == obj.chemicalCategory){
                  obj.chemicalCategoryName = self.categoryOptions[i].label
                  obj.chemicalCategoryClassName = '';
                }
              }
            }
            if(this.dialogForm.chemicalId){
              chemicalChemicalUpdate(obj).then(response => {
                this.msgSuccess(response.message)
                this.$parent.submitSuccessful();
                this.addChemicalsOpen(3);
              });
            }else{
              chemicalChemicalAdd(obj).then(response => {
                this.msgSuccess(response.message)
                this.$parent.submitSuccessful();
                this.addChemicalsOpen(3);
              });
            }
          }
        })
      },
      addHandleChange(value, selectedData) {
        this.$refs.addCascader.dropDownVisible = false;
      }
    },
  }
</script>
<style scoped lang="scss">
  .addChemicals{
    .form-box{
      .table-date-input-left-border{
        ::v-deep input{
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          border-left:none;
        }
      }
      .table-date-input-right-border{
        ::v-deep input{
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }
  }
</style>