FE-V2-PC/src/views/comprehensive/laboratoryManagement/subject/associationConfiguration.vue

<!--关联配置-->
<template>
  <div class="associationConfiguration scrollbar-box">
    <el-form ref="form" :model="form" label-width="160px" :rules="rules">
      <div class="title-box">
        <p class="left-title">检查项信息</p>
      </div>
      <div>
        <el-form-item label="穿戴检查项"  prop="checkIn" class="form-item" v-if="form.checkIn">
          <el-select v-model="form.checkIn" multiple placeholder="请选择穿戴检查项目" @change="radioChange" style="width:320px;">
            <el-option
              v-for="dict in onepcOutcheckIn"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="穿戴检查可跳过" prop="skipped" class="form-item">
          <el-radio-group v-model="form.skipped" style="width:260px;" @change="radioChange">
            <el-radio :label="1" style="width:100px;margin-left:50px;margin-top:4px;">是</el-radio>
            <el-radio :label="0" style="width:100px;margin-top:4px;">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="穿戴检查识别上限"  prop="checkCount" class="form-item" v-if="form.skipped == 1 && form.checkIn[0]">
          <el-input placeholder="请输入内容" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="2" v-model="form.checkCount" style="width:320px;">
            <template slot="prepend" style="height:20px;">次</template>
            <div slot="append" style="display: flex;flex-direction: column;">
              <p class="el-icon-arrow-up" @click="addNum" style="line-height:18px;width:30px;font-size:14px;text-align: center;border-bottom:1px solid #E0E0E0;cursor: pointer;"></p>
              <p class="el-icon-arrow-down" @click="reduceNum" style="line-height:19px;width:30px;font-size:14px;text-align: center;cursor: pointer;"></p>
            </div>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="离开时检查项"  prop="checkOutArr" class="form-item">
          <el-select v-model="form.checkOut" multiple placeholder="请选择离开检查项"  style="width:320px;">
            <el-option
              v-for="dict in onepcOutcheck"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签到有效时间"  prop="signTime" class="form-item">
          <el-input placeholder="请输入内容" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="2" v-model="form.signTime" style="width:320px;">
            <template slot="prepend" style="height:20px;">小时</template>
            <div slot="append" style="display: flex;flex-direction: column;">
              <p class="el-icon-arrow-up" @click="addNumOne" style="line-height:18px;width:30px;font-size:14px;text-align: center;border-bottom:1px solid #E0E0E0;cursor: pointer;"></p>
              <p class="el-icon-arrow-down" @click="reduceNumOne" style="line-height:19px;width:30px;font-size:14px;text-align: center;cursor: pointer;"></p>
            </div>
          </el-input>
        </el-form-item>
      </div>
      <div class="title-box">
        <p class="left-title">检查项信息(巡查人员)</p>
      </div>
      <div>
        <el-form-item label="穿戴检查项"  prop="inspectCheckIn" class="form-item" v-if="form.inspectCheckIn">
          <el-select v-model="form.inspectCheckIn" multiple placeholder="请选择穿戴检查项目" @change="radioChange2" style="width:320px;">
            <el-option
              v-for="dict in onepcOutcheckIn"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="穿戴检查可跳过" prop="inspectSkipped" class="form-item">
          <el-radio-group v-model="form.inspectSkipped" style="width:260px;" @change="radioChange2">
            <el-radio :label="1" style="width:100px;margin-left:50px;margin-top:4px;">是</el-radio>
            <el-radio :label="0" style="width:100px;margin-top:4px;">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="穿戴检查识别上限"  prop="inspectCheckCount" class="form-item" v-if="form.inspectSkipped == 1 && form.inspectCheckIn[0]">
          <el-input placeholder="请输入内容" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="2" v-model="form.inspectCheckCount" style="width:320px;">
            <template slot="prepend" style="height:20px;">次</template>
            <div slot="append" style="display: flex;flex-direction: column;">
              <p class="el-icon-arrow-up" @click="addNum" style="line-height:18px;width:30px;font-size:14px;text-align: center;border-bottom:1px solid #E0E0E0;cursor: pointer;"></p>
              <p class="el-icon-arrow-down" @click="reduceNum" style="line-height:19px;width:30px;font-size:14px;text-align: center;cursor: pointer;"></p>
            </div>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="签到有效时间"  prop="inspectSignTime" class="form-item">
          <el-input placeholder="请输入内容" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="2" v-model="form.inspectSignTime" style="width:320px;">
            <template slot="prepend" style="height:20px;">小时</template>
            <div slot="append" style="display: flex;flex-direction: column;">
              <p class="el-icon-arrow-up" @click="addNumOne" style="line-height:18px;width:30px;font-size:14px;text-align: center;border-bottom:1px solid #E0E0E0;cursor: pointer;"></p>
              <p class="el-icon-arrow-down" @click="reduceNumOne" style="line-height:19px;width:30px;font-size:14px;text-align: center;cursor: pointer;"></p>
            </div>
          </el-input>
        </el-form-item>
      </div>
      <div class="title-box">
        <p class="left-title">危险源信息</p>
      </div>
      <el-form-item label="气瓶存放总量" prop="bottleTotal" class="form-item input-number-none-box-left">
        <el-input
          oninput="value=value.replace(/[^0-9.]/g,'')"
          style="width:320px;"
          v-model="form.bottleTotal"
          placeholder="请输入数量"
          maxLength="3"
          clearable
        />
      </el-form-item>
      <el-form-item label="气瓶单人可存放总量" prop="bottleUserTotal" class="form-item input-number-none-box-left">
        <el-input
          oninput="value=value.replace(/[^0-9.]/g,'')"
          style="width:320px;"
          v-model="form.bottleUserTotal"
          placeholder="请输入数量"
          clearable
          maxLength="3"
        />
      </el-form-item>
      <div>
        <el-form-item label="危险源"  prop="hazardId" class="form-item">
          <el-select placeholder="请选择危险源" v-model="hazardId" style="width:320px;" @change="hazardClick">
            <el-option
              v-for="dict in hazardList"
              :key="dict.id"
              :label="dict.text"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="hazard-for-box" v-for="(item,index) in form.hazardRelations">
        <el-form-item label="危险源名称" :prop="'hazardRelations.'+ index +'.anotherName'" :rules="rules.anotherName"
                      class="form-item" label-width="160px">
          <el-input placeholder="请输入危险源名称" maxlength="20" v-model="item.anotherName"/>
        </el-form-item>
        <el-form-item label="型号" :prop="'hazardRelations.'+ index +'.anotherCode'" :rules="rules.anotherCode"
                      class="form-item" label-width="60px">
          <el-input placeholder="请输入型号"  maxlength="10" v-model="item.anotherCode"/>
        </el-form-item>
        <el-form-item label="" class="form-item" label-width="20px">
          <span class="del-hazard el-icon-error" style="line-height:40px;font-size:24px;" @click="delHazard(index)"></span>
        </el-form-item>
      </div>
      <div class="bottom-button-box">
        <p class="reset-button-one left-button" @click="backPage">取消</p>
        <p class="inquire-button-one right-button" @click="upData">提交</p>
      </div>
    </el-form>
  </div>
</template>

<script>
  import { listHazard } from "@/api/permissionRequired";
  import { updateSubjectEditJoinHazard } from "@/api/laboratory/subject";
  import { getBottleInfo} from "@/api/gasManage3_0/gasManage";
  export default {
    name: "associationConfiguration",
    props:{
      subjectData:{},
    },
    data() {
      return {
        onepcOutcheckIn:[],
        onepcOutcheck:[],
        hazardList:[],
        form:{},
        rules:{
          anotherName:[
            {required: true, message: '请输入危险源名称', trigger: 'blur'},
            { required: true, message: "请输入危险源名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          anotherCode:[
            {required: true, message: '请输入型号', trigger: 'blur'},
            { required: true, message: "请输入型号", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        hazardId:"",
      }
    },
    created() {

    },
    mounted(){
      let self = this;
      //获取气瓶存放总量
      this.getBottleInfo();
      this.getDicts("sub_check_in").then(response => {
        this.onepcOutcheckIn = response.data;
      });
      this.getDicts("lab_onepc_outcheck").then(response => {
        this.onepcOutcheck = response.data;
      });
      this.listHazard();
      if(this.subjectData.id){
        this.form.id = this.subjectData.id;
      }
      if(this.subjectData.signTime) {
        this.$set(this.form,'signTime',this.subjectData.signTime);
      }
      /** 检查项信息*/
      if(this.subjectData.checkIn){
        let list = this.subjectData.checkIn.split(",");
        this.$set(this.form,'checkIn',list);
        // this.form.checkIn = this.subjectData.checkIn.split(",");
      }else{
        this.$set(this.form,'checkIn',[]);
      }
      if(this.subjectData.checkOut){
        let list = this.subjectData.checkOut.split(",");
        this.$set(this.form,'checkOut',list);
        // this.form.checkOut = this.subjectData.checkOut.split(",");
      }
      if(this.subjectData.skipped && this.subjectData.skipped!=null){
        this.$set(this.form,'skipped',this.subjectData.skipped)
      }else{
        this.$set(this.form,'skipped',0)
      }
      if(this.subjectData.checkCount){
        this.$set(this.form,'checkCount',this.subjectData.checkCount)
      }else{
        this.$set(this.form,'checkCount',0)
      }
      /** 检查项信息-巡查人员*/

      if(this.subjectData.inspectCheckIn){
        let list = this.subjectData.inspectCheckIn.split(",");
        this.$set(this.form,'inspectCheckIn',list);
      }else{
        this.$set(this.form,'inspectCheckIn',[]);
      }
      if(this.subjectData.inspectSkipped && this.subjectData.inspectSkipped!=null){
        this.$set(this.form,'inspectSkipped',this.subjectData.inspectSkipped)
      }else{
        this.$set(this.form,'inspectSkipped',0)
      }

      if(this.subjectData.inspectSignTime) {
        this.$set(this.form,'inspectSignTime',this.subjectData.inspectSignTime);
      }

      if(this.subjectData.inspectCheckCount){
        this.$set(this.form,'inspectCheckCount',this.subjectData.inspectCheckCount)
      }else{
        this.$set(this.form,'inspectCheckCount',0)
      }
      if(this.subjectData.labHazardList){
        let list = [];
        for(let i=0;i<self.subjectData.labHazardList.length;i++){
          list.push({
            hazardId:self.subjectData.labHazardList[i].id,
            anotherName:self.subjectData.labHazardList[i].anotherName,
            anotherCode:self.subjectData.labHazardList[i].anotherCode
          })
        }
        this.$set(this.form,'hazardRelations',list)
      }
      this.radioChange();
    },
    methods:{
      //删除选中危险源
      delHazard(index){
        this.form.hazardRelations.splice(index, 1);
        this.$forceUpdate();
      },
      //危险源选中事件
      hazardClick(e){
        let self = this;
        for(let i=0;i<self.hazardList.length;i++){
          if(e == self.hazardList[i].id){
            this.form.hazardRelations.push({
              hazardId:self.hazardList[i].id,
              anotherName:self.hazardList[i].anotherName,
              anotherCode:self.hazardList[i].anotherCode
            });
          }
        }
        this.$forceUpdate();
      },
      radioChange(){
        if(this.form.skipped == 0){
          let obj = {
            checkIn:[
              {required: true, message: '请选择穿戴检查项目', trigger: 'blur'}
            ]
          };
          this.$set(this,'rules',obj);
        }else if(this.form.skipped == 1){
          if(this.form.checkIn[0]){
            let obj = {
              checkIn:[
                {required: true, message: '请选择穿戴检查项目', trigger: 'blur'}
              ]
            };
            this.$set(this,'rules',obj);
          }else{
            this.$set(this,'rules',{});
            this.$refs['form'].clearValidate();
          }
        }
        // if(e == 1){
        //   this.$set(this,'rules',{});
        //   this.$refs['form'].clearValidate();
        // }else if(e == 0){
        //   let obj = {
        //     checkIn:[
        //       {required: true, message: '请选择穿戴检查项目', trigger: 'blur'}
        //     ]
        //   }
        //   this.$set(this,'rules',obj);
        // }
      },
      /**巡检人员  */
      radioChange2(){
        if(this.form.inspectSkipped == 0){
          let obj = {
            inspectCheckIn:[
              {required: true, message: '请选择穿戴检查项目', trigger: 'blur'}
            ]
          };
          this.$set(this,'rules',obj);
        }else if(this.form.inspectSkipped == 1){
          if(this.form.inspectCheckIn[0]){
            let obj = {
              inspectCheckIn:[
                {required: true, message: '请选择穿戴检查项目', trigger: 'blur'}
              ]
            };
            this.$set(this,'rules',obj);
          }else{
            this.$set(this,'rules',{});
            this.$refs['form'].clearValidate();
          }
        }
      },
      addNum(){
        if(this.form.checkCount<99){
          this.form.checkCount++
        }
      },
      reduceNum(){
        if(this.form.checkCount>2){
          this.form.checkCount--
        }
      },
      addNumOne(){
        if(this.form.signTime<99){
          this.form.signTime++
        }
      },
      reduceNumOne(){
        if(this.form.signTime>2){
          this.form.signTime--
        }
      },
      //获取气瓶存放总量
      getBottleInfo(){
        getBottleInfo({subjectId:this.subjectData.id}).then(response=>{
          let res=response.data;
          if(response.code==200){
            if(res.bottleTotal && res.bottleUserTotal){
              this.$set(this.form,'bottleUserTotal',res.bottleUserTotal);
              this.$set(this.form,'bottleTotal',res.bottleTotal);
              // this.form.bottleUserTotal=res.bottleUserTotal;
              // this.form.bottleTotal=res.bottleTotal;
            }

          }

        })
      },
      //获取危险源列表
      listHazard(){
        listHazard({}).then(response=>{
          for(let i=0;i<response.data.length;i++){
            response.data[i].text = response.data[i].anotherName+'-'+response.data[i].anotherCode
          }
          this.$set(this,'hazardList',response.data);
        })
      },
      upData(){
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(self.form.skipped == 1 && self.form.checkCount<2 && self.form.checkIn[0]){
              this.msgError('穿戴检查识别上限不能小于2')
              return
            }
            if(self.form.inspectSkipped == 1 && self.form.inspectCheckCount<2 && self.form.inspectCheckIn[0]){
              this.msgError('穿戴检查识别上限不能小于2')
              return
            }
            self.$confirm('是否确认提交?', "", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              self.updateSubjectEditJoinHazard();
            }).then(() => {}).catch(() => {});
          }
        })
      },
      updateSubjectEditJoinHazard(){
        let self = this;
        let obj = {
          id:self.form.id,
          skipped:self.form.skipped,
          inspectSkipped:self.form.inspectSkipped,
        }
        if(self.form.skipped == 1 && self.form.checkIn[0]){
          obj.checkCount = self.form.checkCount
        }
        if(self.form.checkIn) {
          obj.checkIn = self.form.checkIn.join() ;
        }
        if(self.form.signTime) {
          obj.signTime = self.form.signTime;
        }else{
          obj.signTime=0;
        }
        if(self.form.checkOut) {
          obj.checkOut = self.form.checkOut.join() ;
        }
        /**巡检人员  */
        if(self.form.inspectSkipped == 1 && self.form.inspectCheckIn[0]){
          obj.inspectCheckCount = self.form.inspectCheckCount
        }
        if(self.form.inspectCheckIn) {
          obj.inspectCheckIn = self.form.inspectCheckIn.join() ;
        }
        if(self.form.inspectSignTime) {
          obj.inspectSignTime = self.form.inspectSignTime;
        }else{
          obj.inspectSignTime=0;
        }



        if (self.form.hazardRelations[0]){
          obj.hazardRelations = self.form.hazardRelations
        }
        if(self.form.bottleUserTotal) {
          obj.bottleUserTotal = self.form.bottleUserTotal;
        }
        if(self.form.bottleTotal) {
          obj.bottleTotal = self.form.bottleTotal;
        }
        // if(self.form.hazardRelations) {
        //   let list = self.form.hazardRelations;
        //   let newList = [];
        //   for(let i=0;i<list.length;i++){
        //     let newObj = {
        //       hazardId:list[i],
        //     };
        //     newList.push(newObj);
        //   }
        //   obj.hazardRelations = newList;
        // }
        updateSubjectEditJoinHazard(obj).then(response => {
          this.msgSuccess("修改成功");
          this.$parent.clickPage(1);
        });
      },
      //返回上一页
      backPage(){
        this.$parent.clickPage(1);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .associationConfiguration{
    flex:1;
    display: flex;
    flex-direction: column;
    border-radius:10px!important;
    margin:5px 20px 20px 10px!important;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
    *{
      margin:0;
    }
    .title-box{
      display: flex;
      margin:0 20px 30px;
      border-bottom:1px solid #E0E0E0;
      .left-title{
        flex:1;
        height:80px;
        line-height:80px;
        color:#0045AF;
        font-size:18px;
      }
      .right-button{
        margin:20px 0;
      }
    }
    .form-item{
      display: inline-block;
      overflow: hidden;
      min-height:70px;
    }
    .hazard-for-box{
      .del-hazard{
        color:#dedede;
      }
      .del-hazard:hover{
        cursor: pointer;
        color:#FF6666;
      }
    }
    .bottom-button-box{
      display: flex;
      width:400px;
      margin:10px auto 40px;
      .null-p{
        flex:1;
      }
      .left-button{
        margin-right:20px;
      }
    }
  }
</style>