v3-lab-web/src/views/integratedManagement/laboratoryManagement/subject/associationConfiguration.vue

<!--关联配置-->
<template>
  <div class="page-container associationConfiguration">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">关联配置</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-submit-p" @click="submitForm">提交</p>
    </div>
    <div class="content-box 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.value"
                :label="dict.label"
                :value="dict.value"
              ></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:70px;margin-left:50px;margin-top:4px;">是</el-radio>
              <el-radio :label="0" style="width:70px;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.value"
                :label="dict.label"
                :value="dict.value"
              ></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.value"
                :label="dict.label"
                :value="dict.value"
              ></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:70px;margin-left:50px;margin-top:4px;">是</el-radio>
              <el-radio :label="0" style="width:70px;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">
            <p class="hazard-add" @click="hazardClick">+配置危险源</p>
          </el-form-item>
        </div>
        <div class="hazard-for-box" v-for="(item,index) in form.hazardSubRelInnerList">
          <el-form-item label="危险源名称" :prop="'hazardSubRelInnerList.'+ 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="'hazardSubRelInnerList.'+ index +'.anotherCode'" :rules="rules.anotherCode"
                        class="form-item" label-width="60px">
            <el-input placeholder="请输入类型" disabled maxlength="10" v-model="item.anotherCode"/>
          </el-form-item>
          <el-form-item label="型号" :prop="'hazardSubRelInnerList.'+ index +'.anotherCode'" :rules="rules.anotherCode"
                        class="form-item" label-width="60px">
            <el-input placeholder="请输入型号" disabled 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>
          <el-form-item label="" class="form-item" v-if="item.hazardRelId"  label-width="20px">
            <p class="look-code-p" @click="dialogQrCodeOn(item)">查看二维码</p>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!--新增弹窗-->
    <el-dialog class="iotClassification-dialog" title='选择危险源' width="682px"
               append-to-body
               :visible.sync="dialogVisible"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="queryParams" ref="queryParams" :inline="true" label-width="140px">
        <el-form-item label="" prop="chName" >
          <el-input
            v-model="queryParams.chName"
            placeholder="危险源名称"
            clearable
            size="small"
          />
        </el-form-item>
        <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
        <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
      </el-form>
      <el-table class="table-box"  border :data="dataList"
                ref="multipleTable"
                @selection-change="handleSelectionChange" :row-key="getRowKeys">
        <el-table-column type="selection"  width="55" :reserve-selection="true" align="center"></el-table-column>
        <el-table-column label="名称" show-overflow-tooltip align="left" prop="chName"/>
        <el-table-column label="型号" align="left" prop="hazardCode"/>
        <el-table-column label="类型" align="left" prop="smallTypeName" />
      </el-table>
      <div class="selected-num-box" v-show="total>0">
        <p class="selected-num-p">
          <i class="el-icon-warning"></i>
          已选择 {{selectedNum}} 项
        </p>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    :total="total"
                    :page.sync="queryParams.page"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogOff()">取消</p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
    <qr-code-dialog ref="qrCodeDialog" :qrCodeDialogData="qrCodeDialogData"></qr-code-dialog>
  </div>
</template>

<script>
  import { getBottleInfo} from "@/apiDemo/gasManage3_0/gasManage";
  import qrCodeDialog from "@/components/qrCodeDialog/index.vue"
  import { laboratorySubRelInfoUpdateHazardSubRel } from '@/api/integratedManagement'
  import { laboratoryHazardList } from '@/api/integratedManagement'
  import { getDicts } from '@/api/commonality/noPermission'
  export default {
    name: "associationConfiguration",
    props:{
      subjectData:{},
    },
    components: {
      qrCodeDialog
    },
    data() {
      return {
        onepcOutcheckIn:[],
        onepcOutcheck:[],
        form:{},
        //二维码组件参数
        qrCodeDialogData:{},
        queryParams:{
          chName:'',
        },
        dialogVisible:false,
        dataList:[],
        total:0,
        // 选中数组
        selectedNum:0,
        ids:[],
        selectedData:[],
        multiple:true,
        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" }
          ],
        },
      }
    },
    created() {
      this.getDicts();
      this.getList();
    },
    mounted(){
      let self = this;
      //获取气瓶存放总量
      //this.getBottleInfo();
      //this.listHazard();
      //编辑
      if(this.subjectData){
        this.form=this.subjectData
        /** 检查项信息*/
        if(this.subjectData.checkIn){
          let list = this.subjectData.checkIn.split(",");
          this.$set(this.form,'checkIn',list);
        }else{
          this.$set(this.form,'checkIn',[]);
        }
        if(this.subjectData.checkOut){
          let list = this.subjectData.checkOut.split(",");
          this.$set(this.form,'checkOut',list);
        }
        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)
        }

      }else{

      }
    },
    methods:{
      //展示二维码
      dialogQrCodeOn(row){
        this.$set(this,'qrCodeDialogData',{
          download:true,
          type:'1',                                                     //二维码类型 用于区分二维码功能类型
          parameter:row.hazardRelId,                                             //二维码参数
          name:row.anotherName,                                                //二维码名称用于下载时命名
          codeName:row.anotherName,                                            //二维码图片下名称展示(非必传)
        });
        this.$refs['qrCodeDialog'].initialize();
      },
      //穿戴检查项和离开检查项
      getDicts(){
        getDicts('sub_check_in').then(response => {
          this.$set(this,'onepcOutcheckIn',response.data);
        });
        getDicts('lab_onepc_outcheck').then(response => {
          this.$set(this,'onepcOutcheck',response.data);
        });
      },
      //危险源选中事件
      hazardClick(e){
        this.dialogVisible=true;
      },
      //弹窗关闭
      dialogOff(){
        this.dialogVisible=false;
      },
      //弹框确认按钮
      dialogSubmit(){
        let self = this;
        let list=[];
        for(let i=0;i<self.selectedData.length;i++){
         list.push(
           {
             hazardId:self.selectedData[i].hazardId,
             anotherName:self.selectedData[i].chName,
             anotherCode:self.selectedData[i].hazardCode,
             smallTypeName:self.selectedData[i].smallTypeName,
             smallTypeValue:self.selectedData[i].smallTypeValue,
           }
         )
        }
        this.$set(this.form,'hazardSubRelInnerList',list);
        this.dialogVisible=false;
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this,'queryParams',{
          page: 1,
          pageSize:20,
          chName:'',
        });
        this.handleQuery();
      },
      /** 查询危险源列表 */
      getList() {
        this.$set(this,'loading',true);
        laboratoryHazardList(this.queryParams).then(response => {
          this.$set(this,'loading',false);
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
        });
      },
      getRowKeys(row) {
        return row.hazardId;   //指定row-key的一个标识
      },
      //多选框选中数据
      handleSelectionChange(selection) {
        this.selectedNum = selection.length;
        this.selectedData = selection;
        this.ids = selection.map(item => item.id)
        this.multiple = !selection.length
      },
      //二维码组件开关
      qrCodeDialogButton(id,name){
        this.$set(this,'qrCodeDialogData',{
          download:true,
          type:'10',                                                     //二维码类型 用于区分二维码功能类型
          parameter:id,                                             //二维码参数
          name:name,                                                //二维码名称用于下载时命名
          codeName:name,                                            //二维码图片下名称展示(非必传)
        });
        this.$refs['qrCodeDialog'].initialize();
      },
      //删除选中危险源
      delHazard(index){
        this.form.hazardSubRelInnerList.splice(index, 1);
        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();
          }
        }
      },
      /**巡检人员  */
      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.inspectSignTime<99){
          this.form.inspectSignTime++
        }
      },
      reduceNumOne(){
        if(this.form.inspectSignTime>2){
          this.form.inspectSignTime--
        }
      },
      //获取气瓶存放总量
      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);
            }
          }
        })
      },
      //提交
      submitForm(){
        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
            }
            for(let i=0;i<self.form.hazardSubRelInnerList.length;i++){
              let num = 0;
              for(let o=0;o<self.form.hazardSubRelInnerList.length;o++){
                if(self.form.hazardSubRelInnerList[i].anotherName == self.form.hazardSubRelInnerList[o].anotherName){
                  num++
                }
                if(num > 1){
                  this.msgError('危险源名称重复：'+self.form.hazardSubRelInnerList[i].anotherName);
                  return
                }
              }
            }
            self.$confirm('是否确认提交?', "", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              self.laboratorySubRelInfoUpdateHazardSubRel();
            }).then(() => {}).catch(() => {});
          }
        })
      },
      laboratorySubRelInfoUpdateHazardSubRel(){
        let self = this;
        let obj = {
          id:self.form.id,
          skipped:self.form.skipped,
          inspectSkipped:self.form.inspectSkipped,
          infoId:self.form.infoId,
          subId:self.form.subId,
        }
        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.hazardSubRelInnerList[0]){
          obj.hazardSubRelInnerList = self.form.hazardSubRelInnerList
        }
        if(self.form.bottleUserTotal) {
          obj.bottleUserTotal = self.form.bottleUserTotal;
        }
        if(self.form.bottleTotal) {
          obj.bottleTotal = self.form.bottleTotal;
        }
        laboratorySubRelInfoUpdateHazardSubRel(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;
    overflow-y: auto;
    .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;
      .look-code-p{
        font-weight:500;
        color:#0183fa;
        cursor: pointer;
      }
    }
    .hazard-for-box{
      .del-hazard{
        color:#dedede;
      }
      .del-hazard:hover{
        cursor: pointer;
        color:#FF6666;
      }
    }

    .hazard-add{
      width: 250px;
      height: 40px;
      border-radius: 4px 4px 4px 4px;
      border: 1px dashed #0183FA;
      font-weight: 400;
      font-size: 14px;
      color: #0183FA;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
  }
</style>