FE-V2-PC/src/views/securityCheck/checkRecord/unsubmittedInfo.vue

<!--未提交检查详情-->
<template>
  <div class="unsubmittedInfo">
    <el-form :model="form" ref="form" :inline="true" :rules="rules" class="addCheckPage-min">
      <div class="top-addCheckPage-title">基本信息</div>
      <div class="top-addCheckPage">
        <el-form-item label="房间号：" prop="fjNumber" label-width="130px" class="el-form-item-top">
          <el-select
            style="width:230px;"
            v-model="form.fjNumber"
            clearable
            filterable
            remote
            reserve-keyword
            placeholder="请输入实验室房间号"
            :remote-method="getSelectInfoByRoom"
            @change="selectChange"
            :loading="loading">
            <el-option
              v-for="item in optionsSelect"
              :key="item.room"
              :label="item.room"
              :value="item.room">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实验楼：" prop="buildingName" label-width="130px" class="el-form-item-top">
          <el-input
            disabled
            style="width:230px;"
            maxlength="20"
            v-model="form.buildingName"
            placeholder="请选择房间号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="实验室：" prop="laboratoryName" label-width="130px" class="el-form-item-top">
          <el-input
            disabled
            style="width:230px;"
            maxlength="20"
            v-model="form.laboratoryName"
            placeholder="请选择房间号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="负责人：" prop="fzrName" label-width="130px" class="el-form-item-top">
          <el-input
            disabled
            style="width:230px;"
            maxlength="10"
            v-model="form.fzrName"
            placeholder="请选择房间号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="联系方式：" prop="fzrLxfs" label-width="130px" class="el-form-item-top">
          <el-input
            oninput="value=value.replace(/[^\d]/g,'')"
            style="width:230px;"
            maxlength="11"
            v-model="form.fzrLxfs"
            placeholder="请输入联系方式"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="整改截止时间：" prop="zgjzTime" label-width="130px" class="el-form-item-top">
          <el-date-picker style="width:230px;"
                          v-model="form.zgjzTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          :picker-options="pickerBeginOption"
                          placeholder="选择整改截止时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="整改类型：" prop="zgType" class="el-form-item-top" label-width="130px">
          <el-select v-model="form.zgType" placeholder="请选择整改类型" style="width:230px;">
            <el-option label="一般整改" :value="0" />
            <el-option label="重大整改" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="检查单位：" prop="jcDw" class="el-form-item-top" label-width="130px">
          <el-select v-model="form.jcDw" @change="jcDwChange" placeholder="请选择检查单位" style="width:230px;">
            <el-option v-for="(item,index) in inspectionUnitArrayData" :key="index" :label="item.label" :value="item.id" />
          </el-select>
        </el-form-item>
      </div>
      <div class="top-addCheckPage-title" style="border-top:10px solid #dedede;">隐患信息</div>
      <div class="center-addCheckPage scrollbar-box">
        <div v-for="(item,index) in form.detailsList" :key="index" class="form-list-for-box">
          <el-form-item label="隐患照片：" :prop="'detailsList.'+ index +'.yhImg'" :rules="rules.yhImg" label-width="150px" class="el-form-item-bottom">
            <div class="el-form-item-bottom-up">
              <div class="form-up-img-box">
                <div v-for="(imgUrl,imgIndex) in item.yhImg" :key="imgIndex" class="up-img-for-box">
                  <img :src="imgUrl">
                  <i class="el-icon-close del-i" @click="imgDel(index,imgIndex)"></i>
                </div>
              </div>
              <el-upload
                v-if="!item.yhImg[4]"
                class="certificate-avatar-uploader"
                style="margin-top:10px;"
                :action="uploadImgUrl"
                :show-file-list="false"
                accept="image/jpeg,image/gif,image/png"
                :on-success="function (res, file){return handleAvatarSuccess(res, file, index)}"
                :headers="headers"
                :before-upload="beforeAvatarUpload">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="语音备注：" label-width="150px" class="el-form-item-bottom" v-if="item.voice[0]">
            <div class="audio-box" v-for="(voiceItem,voiceIndex) in item.voice" :key="voiceIndex">
              <video controls="" ref="video" name="media" class="video-box">
                <source :src="voiceItem.url" type="audio/mpeg">
              </video>
            </div>
            <p class="audio-text">依据语音描述重新整理并完善下面隐患描述并提交检查单</p>
          </el-form-item>
          <el-form-item label="隐患描述：" :prop="'detailsList.'+ index +'.yhMs'" :rules="rules.yhMs" label-width="150px" class="el-form-item-bottom">
            <el-input
              style="width:450px;"
              maxlength="50"
              v-model="item.yhMs"
              type="textarea"
              placeholder="请输入隐患描述">
            </el-input>
          </el-form-item>
          <el-form-item label="对应检查项：" :prop="'detailsList.'+ index +'.jcxId'" :rules="rules.jcxId" label-width="150px" class="el-form-item-bottom">
            <el-cascader
              v-if="checkOptionList[index]"
              placeholder="请输入检查项名称或点击箭头选择"
              :before-filter="(value)=>filterRegion(value,index)"
              filterable
              clearable
              :show-all-levels="false"
              ref="cascaderGet"
              style="width:240px;"
              v-model="item.jcxId"
              :options="checkOptionList[index]"
              @change="(val)=>cascaderChange(val,index)"
              @blur="blurCheck(index)"
              :props="{ expandTrigger: 'hover',value: 'id', label: 'name' }">
              <template slot-scope="{ node, data }">
                <el-tooltip :disabled="data.name.length < 14" class="item" effect="dark" :content="data.name" placement="top-start">
                  <p style="max-width:200px;overflow: hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ data.name}}</p>
                </el-tooltip>
              </template>
            </el-cascader>
            <!--<span class="add-span" style="margin-left:20px;" @click="blurCheck(index)">重置检查项</span>-->
            <span class="text-span">没有找到对应的隐患</span>
            <span class="add-span" @click="dialogClick(index)">手动添加</span>
            <p style="color:#999999;" v-if="item.yhcount">此检查项在当前实验室累计出现<span style="color:#FF2D2D;">{{item.yhcount}}</span>次隐患</p>
          </el-form-item>
          <p class="del-button-p" @click="delDanger(index)">删除隐患项</p>
        </div>
        <p class="add-button-p" :class="form.detailsList[0]?'add-button-p-one':''" @click="addDanger">+ 新增隐患项</p>
      </div>
      <div class="bottom-addCheckPage">
        <p></p>
        <p class="reset-button-one" @click="backPage">返回</p>
        <p class="add-button-one-90" @click="submitForm(1)" v-hasPermi="['laboratory:checkRecord:edit']">保存草稿</p>
        <p class="inquire-button-one" @click="submitForm(2)" v-hasPermi="['laboratory:checkRecord:edit']">提交发布</p>
      </div>
    </el-form>
    <el-dialog title="添加检查项" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="examinationForm" :rules="rules" label-width="100px">
        <el-form-item label="检查项名称" prop="name">
          <el-input type="textarea" maxlength="20" v-model="examinationForm.name" placeholder="请输入检查项名称" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="目录" prop="idList">
          <el-cascader
            :show-all-levels="false"
            style="width:360px;"
            v-model="examinationForm.idList"
            :options="checkOptionListExamination"
            :props="{ expandTrigger: 'hover',value: 'id', label: 'name' }"
            @change="handleChange">
            <template slot-scope="{ node, data }">
              <el-tooltip :disabled="data.name.length < 14" class="item" effect="dark" :content="data.name" placement="top-start">
                <p style="max-width:200px;overflow: hidden;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ data.name}}</p>
              </el-tooltip>
            </template>
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="dialogSubmitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!--检查重复提示-->
    <el-dialog title="提示" :visible.sync="remindOpen" width="600px" append-to-body class="remind-dialog-box">
      <div class="for-max-box scrollbar-box">
        <div v-for="(item,index) in remindList" :key="index" class="for-box">
          <div class="for-min-box" style="margin-top:20px;">
            <p class="for-min-title">检查时间：</p>
            <p class="for-min-text" style="flex:1;">{{item.createTime}}<span style="margin-left:30px;">检查人：{{item.jcRyxm}}</span></p>
          </div>
          <div class="for-min-box">
            <p class="for-min-title">隐患描述：</p>
            <p class="for-min-text" style="flex:1;">{{item.yhMs}}</p>
          </div>
          <div class="for-min-box" v-if="item.yhImg[0]">
            <p class="for-min-title">照片：</p>
            <div class="for-img-box">
              <img :src="minItem" v-for="(minItem,minIndex) in item.yhImg" :key="minIndex">
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remindOff">取 消</el-button>
        <el-button type="primary" @click="remindButton">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="发布" :visible.sync="nameOpen" width="600px" append-to-body class="remind-dialog-box">
      <el-form ref="nameForm" :model="nameForm" :rules="rules" label-width="100px">
        <el-form-item label="检查名称" prop="checkName" style="margin-top:20px;">
          <el-input maxlength="20" v-model="nameForm.checkName" placeholder="请输入检查名称" rows="3" resize="none"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="nameFormButton(1)">取 消</el-button>
        <el-button type="primary" @click="nameFormButton(2)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listCheckOption } from "@/api/laboratory/checkOption";
  import { treeselect,recordDettailsList ,addTempCheckOption ,checkRecordUpdate,selectInfoByRoom ,selectDeptListUserDeptId,hiddenDangerCount } from "@/api/laboratory/checkRecord";
  import { getToken } from "@/utils/auth";
  export default {
    name: 'unsubmittedInfo',
    props:{
      infoId: {},
    },
    data() {
      return {
        //限制时间范围
        pickerBeginOption: {
          disabledDate: (time) => {
            return time.getTime() < Date.now()-1 * 24 * 60 * 60 * 1000
          }
        },
        //上传设置
        uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 遮罩层
        loading: true,
        //实验室懒加载数据
        optionsSelect:[],
        // 安全检查表格数据
        checkRecordList: [],
        // 表单参数
        form: {
          fjNumber:"",
          buildingId:"",
          buildingName:"",
          laboratoryId:"",
          laboratoryName:"",
          fzrName:"",
          fzrLxfs:"",
          detailsList:[
            // {
            //   isLingshi:0,
            //   yhImg:[],
            //   yhMs:"",
            //   jcxId:"",
            //   jcxName:"",
            // }
          ],
        },
        imgIndex:"",
        //临时存储房间号
        fjNumber:"",
        // 表单校验
        rules: {
          fjNumber: [
            { required: true, message: "请输入实验室房间号", trigger: "blur" },
            { required: true, message: "请输入实验室房间号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          buildingName: [
            { required: true, message: "请选择房间自动匹配实验楼", trigger: "blur" }
          ],
          laboratoryName: [
            { required: true, message: "请选择房间自动匹配实验室", trigger: "blur" }
          ],
          fzrName: [
            { required: true, message: "请选择房间自动匹配负责人", trigger: "blur" }
          ],
          zgjzTime: [
            { required: true, message: "选择整改截止时间", trigger: "blur" }
          ],
          zgType: [
            { required: true, message: "请选择整改类型", trigger: "blur" }
          ],
          jcDw: [
            { required: true, message: "请选择检查单位", trigger: "blur" }
          ],
          yhMs: [
            { required: true, message: "请输入隐患描述", trigger: "blur" },
            { required: true, message: "请输入隐患描述", validator: this.spaceJudgment, trigger: "blur" }
          ],
          // yhImg: [
          //   { required: true, message: "请上传隐患照片", trigger: "blur" }
          // ],
          jcxId: [
            { required: true, message: "请选择检项", trigger: "blur" }
          ],
          name: [
            { required: true, message: "请输入检查项名称", trigger: "blur" }
          ],
          checkName: [
            { required: true, message: "请输入检查名称", trigger: "blur" }
          ],
          idList: [
            { required: true, message: "请选择目录", trigger: "blur" }
          ],
        },
        // 检查先搜索列表
        optionsUser:[],
        open:false,
        openIndex:"",
        //检查项联机
        examinationForm:{
          laboratoryName:""
        },
        //检查项联机搜索
        options:[],
        //检查项
        defaultCheckOptionList:[],
        checkOptionList:[],
        checkOptionListExamination:[],
        //临时数据组
        temporaryIdList:[],
        //检查单位
        inspectionUnitArrayData:[],
        //提醒页面开关
        remindOpen:false,
        remindList:[],
        nameOpen:false,
        nameForm:{
          checkName:"",
        },
        formData:{},
      };
    },
    created() {
      this.getListCheckOptionData();
      this.getListCheckOptionTwo();
      // this.selectDeptListUserDeptId();
      this.treeselect();
    },
    mounted(){
      this.getInfo();
    },
    methods: {
      remindOff(){
        this.remindOpen = false;
      },
      remindButton(){
        this.remindOpen = false;
      },
      blurCheck(index){
        // this.getListCheckOptionData(index);
        let list = JSON.parse(JSON.stringify(this.checkOptionList));
        list[index] = JSON.parse(JSON.stringify(this.defaultCheckOptionList));
        this.$set(this,'checkOptionList',JSON.parse(JSON.stringify(list)))
      },
      filterRegion(value,index){
        this.getListCheckOptionOne(value,index);
        return false
      },
      jcDwChange(val){
        let self = this;
        for(let i=0;i<self.inspectionUnitArrayData.length;i++){
          if(val == self.inspectionUnitArrayData[i].id){
            this.form.jcDwName = self.inspectionUnitArrayData[i].label;
          }
        }
      },
      //根据用户获取对应检查单位列表
      selectDeptListUserDeptId(){
        selectDeptListUserDeptId().then( data => {
          this.inspectionUnitArrayData = data.data;
        })
      },
      treeselect(){
        treeselect().then( data => {
          // let list = [];
          // for(let i=0;i<data.data[0].children.length;i++){
          //   let obj = {
          //     id:data.data[0].children[i].id,
          //     label:data.data[0].children[i].label,
          //   }
          //   list.push(obj);
          //   for(let o=0;o<data.data[0].children[i].children.length;o++){
          //     let obj = {
          //       id:data.data[0].children[i].children[o].id,
          //       label:data.data[0].children[i].children[o].label,
          //     }
          //     list.push(obj);
          //   }
          // }
          // this.inspectionUnitArrayData = list;
          this.inspectionUnitArrayData = this.toArray(data.data);
        });
      },
      toArray(data){
        let list = [];
        let newList = JSON.parse(JSON.stringify(data));
        for(let i=0;i<newList.length;i++){
          pushNode(newList[i]);
        }
        function pushNode(node){
          if(node.children){
            for (let nodeItem of node.children){
              pushNode(nodeItem)
            }
            delete node.children;
            list.push(node)
          }else{
            if(node.children){
              delete node.children
            }
            list.push(node)
          }
        }
        return list
      },
      getInfo(){
        let self = this;
        console.log("this.infoId",this.infoId)
        let obj = {
          id:this.infoId
        }
        recordDettailsList(obj).then( response => {
          let obj = JSON.parse(JSON.stringify(response.data))
          for(let i=0;i<obj.yhlist.length;i++){
            if(obj.yhlist[i].yhImg){
              obj.yhlist[i].yhImg = obj.yhlist[i].yhImg.split(",");
            }else{
              obj.yhlist[i].yhImg = [];
            }
            if(obj.yhlist[i].voice){
              obj.yhlist[i].voice = JSON.parse(obj.yhlist[i].voice);
            }else{
              obj.yhlist[i].voice = [];
            }
            for(let x=0;x<obj.yhlist[i].voice.length;x++){
              obj.yhlist[i].voice[x].url = window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + '/' + obj.yhlist[i].voice[x].url;
            }
            obj.yhlist[i].jcxId = obj.yhlist[i].jcxId.split(",");
            for(let o=0;o<obj.yhlist[i].jcxId.length;o++){
              if(obj.yhlist[i].jcxId[o] == ''){
                obj.yhlist[i].jcxId.splice(o,1);
              }else{
                obj.yhlist[i].jcxId[o] = parseInt(obj.yhlist[i].jcxId[o])
              }
            }
          }
          for(let i=0;i<obj.yhlist.length;i++){
            if(obj.yhlist[i].isLingshi == 1){
              let list = JSON.parse(JSON.stringify(self.checkOptionList));
              let newObj = {
                id:parseInt(obj.yhlist[i].jcxId+''),
                name:obj.yhlist[i].jcxName,
              }
              list.push(newObj);
              self.$set(self,'checkOptionList',JSON.parse(JSON.stringify(list)));
              self.temporaryIdList.push(obj.yhlist[i].jcxId);
            }
            self.getListCheckOption();
          }
          console.log(obj)
          let newOjb = obj.record;
          newOjb.detailsList = obj.yhlist;
          newOjb.jcDw = parseInt(newOjb.jcDw);
          this.fjNumber = obj.record.fjNumber;
          this.$set(this,'form',newOjb);
        });
      },
      //返回
      backPage(){
        this.$parent.goPageInfo(1);
      },
      //删除隐患
      delDanger(index){
        this.checkOptionList.splice(index,1)
        this.form.detailsList.splice(index,1)
        this.$forceUpdate();
      },
      //新增隐患项
      addDanger(){
        if(!this.form.fjNumber){
          this.msgError("请先选择房间")
          return
        }
        if(this.form.detailsList.length>19){
          this.msgError("最多添加20个隐患")
          return
        }
        let obj = {
          yhImg:[],
          yhMs:"",
          voice:[],
        };
        this.form.detailsList.push(obj);
        this.getListCheckOption();
      },
      //上传
      handleAvatarSuccess(res, file, index) {
        // let url=window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API+"/"+res.data.url;
        // this.form.detailsList[index].yhImg.push(url);
        // this.form.detailsList[index].yhImg.push(res.data.url);
        this.form.detailsList[index].yhImg.push(res.data.url);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        let type = false;
        console.log('file',file);
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
          type = true;
        }else{
          this.$message.error('只能上传png/jpeg/gif格式图片');
          type = false;
        }
        return type;
      },
      //删除
      imgDel(index,minIndex){
        this.form.detailsList[index].yhImg.splice(minIndex,1);
      },
      /** 查询安全检查列表 */
      getList() {
        this.loading = true;
        listCheckRecord({}).then( response => {
          this.checkRecordList =  response.rows;
          this.total =  response.total;
          this.loading = false;
        });
      },
      //发布按钮
      nameFormButton(type){
        if(type == 1){
          this.nameOpen = false;
        }else if(type == 2){
          this.$refs["nameForm"].validate(valid => {
            if (valid) {
              this.loading = true;
              this.formData.checkName = this.nameForm.checkName;
              checkRecordUpdate(this.formData).then( response => {
                this.msgSuccess('提交成功')
                this.loading = false;
                this.backPage();
              });
            }
          })
        }
      },
      /** 提交按钮 */
      submitForm(type) {
        let self = this;
        if(!this.form.detailsList[0]){
          this.msgError('请添加至少一个隐患项')
          return
        }
        this.$refs["form"].validate(valid => {
          if (valid) {
            let obj = JSON.parse(JSON.stringify(self.form));
            for(let i=0;i<obj.detailsList.length;i++){
              obj.detailsList[i].jcxId = obj.detailsList[i].jcxId + ',';
              obj.detailsList[i].yhImg = obj.detailsList[i].yhImg + '';
              obj.detailsList[i].voice = null;
            }
            obj.zgStatus = 0;
            if(type == 1){
              obj.isCg = 1;
              obj.isFabu = 0;
            }else if(type == 2){
              obj.isCg = 0;
              obj.isFabu = 1;
            }
            this.formData = JSON.parse(JSON.stringify(obj));
            if(type == 1){
              this.loading = true;
              checkRecordUpdate(this.formData).then( response => {
                this.msgSuccess('保存草稿成功')
                this.loading = false;
                this.backPage();
              });
            }else if(type == 2){
              this.nameForm.checkName = "";
              this.nameOpen = true;
            }
          }
        });
      },
      /** 下列人员-懒加载 */
      userSelectList(query) {
        // if (query !== '' && query.length>1) {
        //   this.loading = true;
        //   this.userSelectList.nickName=query;
        //   selectListUser(this.userSelectList).then(response => {
        //     this.optionsUser = response.data;
        //     this.loading = false;
        //   });
        // } else {
        //   this.optionsUser = [];
        // }
      },
      //新增检查项
      dialogClick(index){
        this.openIndex = index;
        this.examinationForm = {};
        this.open = true;
      },
      //检查项联机触发
      handleChange() {

      },
      //检查项确定
      cascaderChange(val,index){
        let self = this;
        if(val[0]){
          let text = "";
          let cascaderList = this.$refs['cascaderGet'][index].getCheckedNodes()[0].pathLabels    // 获取label值
          let nodesList = this.$refs['cascaderGet'][index].getCheckedNodes()[0].pathNodes    // 获取label值
          let jcxSstkNum = nodesList[nodesList.length-1].data.code;
          let jcxSstkMs = "";
          for(let i=0;i<nodesList.length-1;i++){
            if(i == 0){
              jcxSstkMs = jcxSstkMs + nodesList[i].data.name
            }else{
              jcxSstkMs = jcxSstkMs + '-' + nodesList[i].data.name
            }
          }
          let num = 0;
          for(let i=0;i<self.temporaryIdList.length;i++){
            if(self.temporaryIdList[i] == val){
              num++
            }
          }
          if(num == 0){
            this.$set(this.form.detailsList[index],'isLingshi',0);
          }else{
            this.$set(this.form.detailsList[index],'isLingshi',1);
          }
          this.$set(this.form.detailsList[index],'jcxName',cascaderList[cascaderList.length-1]);
          this.$set(this.form.detailsList[index],'jcxSstkNum',jcxSstkNum);
          this.$set(this.form.detailsList[index],'jcxSstkMs',jcxSstkMs);
        }else{
          this.$set(this.form.detailsList[index],'isLingshi',0);
          this.$set(this.form.detailsList[index],'jcxName',"");
          this.$set(this.form.detailsList[index],'jcxSstkNum',"");
          this.$set(this.form.detailsList[index],'jcxSstkMs',"");
        }
        console.log('val',val);
        if(val[0]){
          let obj = {
            laboratoryId:this.form.laboratoryId,
            checkId:val[val.length-1],
          };
          hiddenDangerCount(obj).then( response => {
            this.$set(this.form.detailsList[index],'yhcount',response.data.yhcount);
            if(response.data.yhflg){
              for(let i=0;i<response.data.yhlist.length;i++){
                response.data.yhlist[i].yhImg = response.data.yhlist[i].yhImg.split(',')
              }
              this.$set(this,'remindList',response.data.yhlist);
              this.remindOpen = true;
            }
          });
        }else{
          this.$set(this.form.detailsList[index],'yhcount','');
        }
      },
      //新增检查项
      dialogSubmitForm(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            let obj = {
              name:this.examinationForm.name,
              parentId:this.examinationForm.idList[this.examinationForm.idList.length-1]
            };
            addTempCheckOption(obj).then( response => {
              let list = JSON.parse(JSON.stringify(this.checkOptionList));
              let obj = {
                id:response.data.id,
                name:response.data.name,
              };
              list[this.openIndex].push(obj);
              this.$set(this,'checkOptionList',JSON.parse(JSON.stringify(list)));
              this.temporaryIdList.push(response.data.id);
              this.$set(this.form.detailsList[this.openIndex],'jcxId',response.data.id);
              this.$set(this.form.detailsList[this.openIndex],'jcxName',response.data.name);
              this.$set(this.form.detailsList[this.openIndex],'isLingshi',1);
              this.msgSuccess("新增成功");
              this.open = false;
            });
          }
        });
      },
      //关闭检查项
      cancel(){
        this.open = false;
      },
      //实验室数据懒加载
      getSelectInfoByRoom(query){
        if (query !== '' && query.length>0) {
          this.loading = true;
          let obj = {
            room:query,
          }
          selectInfoByRoom(obj).then(response => {
            this.optionsSelect = response.data;
            this.loading = false;
          });
        } else {
          this.optionsSelect = [];
        }
      },
      //清除实验室选中
      delSelect(){

      },
      //实验室房间懒加载选中
      selectChange(name){
        let self = this;
        if(!this.fjNumber){
          if(name){
            for(let i=0;i<self.optionsSelect.length;i++){
              if(name == self.optionsSelect[i].room){
                self.$set(self,"fjNumber",self.optionsSelect[i].room)
                self.$set(self.form,"fjNumber",self.optionsSelect[i].room)
                self.$set(self.form,"deptName",self.optionsSelect[i].deptName)
                self.$set(self.form,"buildingId",self.optionsSelect[i].building)
                self.$set(self.form,"deptId",self.optionsSelect[i].deptId)
                self.$set(self.form,"laboratoryId",self.optionsSelect[i].id)
                self.$set(self.form,"buildingName",self.optionsSelect[i].buildName)
                self.$set(self.form,"laboratoryName",self.optionsSelect[i].name)
                self.$set(self.form,"fzrId",self.optionsSelect[i].userId)
                self.$set(self.form,"fzrName",self.optionsSelect[i].safeUserName)
                self.$set(self.form,"fzrLxfs",self.optionsSelect[i].safeUserPhone)
              }
            }
          }
          else{
            self.$set(self.form,"fjNumber","")
            self.$set(self.form,"buildingId","")
            self.$set(self.form,"deptName","")
            self.$set(self.form,"deptId","")
            self.$set(self.form,"buildingName","")
            self.$set(self.form,"laboratoryId","")
            self.$set(self.form,"laboratoryName","")
            self.$set(self.form,"fzrId","")
            self.$set(self.form,"fzrName","")
            self.$set(self.form,"fzrLxfs","")
          }
        }else{
          if(this.fjNumber != name){
            this.$confirm('更换实验室后需要从新选择检查项,是否确认更换实验室?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
            }).then(() => {
              console.log("确定")
              for(let i=0;i<self.optionsSelect.length;i++){
                if(name == self.optionsSelect[i].room){
                  self.$set(self,"fjNumber",self.optionsSelect[i].room)
                  self.$set(self.form,"fjNumber",self.optionsSelect[i].room)
                  self.$set(self.form,"buildingId",self.optionsSelect[i].deptId)
                  self.$set(self.form,"deptName",self.optionsSelect[i].deptName)
                  self.$set(self.form,"deptId",self.optionsSelect[i].id)
                  self.$set(self.form,"buildingName",self.optionsSelect[i].buildName)
                  self.$set(self.form,"laboratoryId",self.optionsSelect[i].building)
                  self.$set(self.form,"laboratoryName",self.optionsSelect[i].name)
                  self.$set(self.form,"fzrId",self.optionsSelect[i].userId)
                  self.$set(self.form,"fzrName",self.optionsSelect[i].safeUserName)
                  self.$set(self.form,"fzrLxfs",self.optionsSelect[i].safeUserPhone)
                  self.$set(self.form,"detailsList",[])
                }
              }
            }).catch(() => {
              console.log("取消")
            });
          }
        }
      },
      //获取检查项
      getListCheckOption() {
        let newObj = {
          level:4,
        }
        listCheckOption(newObj).then( response => {
          let list = this.getTreeData(response.data);
          this.checkOptionList.push(JSON.parse(JSON.stringify(list)));
        });
        this.$forceUpdate();
      },
      getListCheckOptionData(){
        let newObj = {
          level:4,
        }
        listCheckOption(newObj).then( response => {
          this.defaultCheckOptionList = this.getTreeData(response.data);
          // let list = JSON.parse(JSON.stringify(this.checkOptionList));
          // list[index] = this.getTreeData(response.data);
          // this.$set(this,'checkOptionList',JSON.parse(JSON.stringify(list)))
          // this.$forceUpdate();
        });
      },
      //获取检查项
      getListCheckOptionOne(data,index) {
        let newObj = {
          level:4,
          searchValue:data
        }
        listCheckOption(newObj).then( response => {
          let list = JSON.parse(JSON.stringify(this.checkOptionList));
          list[index] = this.getTreeData(response.data);
          if(list[index][0]){
            this.$set(this,'checkOptionList',JSON.parse(JSON.stringify(list)))
            this.$forceUpdate()
          }else{
            this.msgError('未找到相关检查项')
          }
        });
      },
      getListCheckOptionTwo(){
        let newObj = {
          level:3,
        }
        listCheckOption(newObj).then( response => {
          let list = this.getTreeData(response.data);
          this.checkOptionListExamination = JSON.parse(JSON.stringify(list));
        });
      },
      getTreeData(data){
        for(var i=0;i<data.length>0;i++){
          if(data[i].children == null||data[i].children.length<=0){
            // children若为空数组，则将children设为undefined
            data[i].children = undefined;
          }else {
            // children若不为空数组，则继续 递归调用 本方法
            this.getTreeData(data[i].children);
          }
        }
        return data;
      },
    }
  }
</script>

<style scoped lang="scss">
  .unsubmittedInfo{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    .addCheckPage-min{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden !important;
      .top-addCheckPage-title{
        line-height:60px;
        padding:0 20px;
        font-size:16px;
        border-bottom:1px solid #dedede;
      }
      .top-addCheckPage{
        padding:20px 20px 10px;
        .el-form-item-top{
          margin:10px 24px 20px 0;
        }
      }
      .center-addCheckPage{
        flex:1;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        border-top:1px solid #dedede;
        border-bottom:1px solid #dedede;
        .form-list-for-box:nth-child(1){
          border:none;
        }
        .form-list-for-box{
          border-top:1px solid #dedede;
          .el-form-item-bottom{
            display: block;
            margin:20px 0 30px 0;
            .audio-box:nth-child(1){
              margin-top:0;
            }
            .audio-box{
              width:280px;
              height:40px;
              background: #B2DAFD;
              border-radius:4px;
              overflow: hidden;
              position: relative;
              margin-top:10px;
              .video-box{
                position: absolute;
                z-index: 10;
                width:280px;
                height:40px;
              }
            }
            .audio-text{
              color:#FF3131;
              margin:10px 0 0 0;
              line-height:12px;
              font-size:12px;
            }
            .el-form-item-bottom-up{
              display: flex;
              min-width:200px;
              .form-up-img-box{
                .up-img-for-box{
                  display: inline-block;
                  width:80px;
                  height:80px;
                  position: relative;
                  margin:10px 10px 0 0;
                  img{
                    width:80px;
                    height:80px;
                  }
                  .del-i{
                    position: absolute;
                    top:0;
                    right:0;
                    width:20px;
                    height:20px;
                    line-height:20px;
                    background: rgba(0,0,0,0.4);
                    color:#fff;
                    font-size:14px;
                    text-align: center;
                    cursor:pointer;
                  }
                  .del-i:hover{
                    background: #FF6666;
                  }
                }
                .certificate-avatar-uploader{
                  width:80px;
                  height:80px;
                }
              }
            }
          }
          .text-span{
            margin-left:20px;
            color:#999;
          }
          .add-span{
            margin-left:10px;
            color:#0183FA;
            cursor:pointer;
          }
        }
        .del-button-p{
          width:300px;
          line-height:40px;
          text-align: center;
          border-radius:6px;
          border:1px dashed #999;
          font-size:14px;
          color:#999;
          cursor:pointer;
          margin:20px 0 30px 146px;
        }
        .add-button-p{
          width:300px;
          line-height:40px;
          text-align: center;
          border-radius:6px;
          border:1px dashed #999;
          font-size:14px;
          color:#999;
          cursor:pointer;
          margin:20px 0 30px 146px;
        }
        .add-button-p-one{
          margin-top:-17px;
        }
      }
      .bottom-addCheckPage{
        padding:20px;
        height:80px;
        display: flex;
        p:nth-child(1){
          flex:1;
        }
        p:nth-child(2){
          width:100px;
        }
        p:nth-child(3){
          width:100px;
          margin:0 20px;
        }
        p:nth-child(4){
          width:100px;
        }
      }
    }
  }
</style>
<style  lang="scss">
  .remind-dialog-box{

    .el-dialog__body{
      padding: 0 20px;
    }
    .for-box:nth-child(1){
      border:none;
    }
    .for-max-box{
      max-height:500px;
    }
    .for-box{
      border-top:1px dashed #dedede;
      *{
        margin:0;
      }
      .for-min-box{
        display: flex;
        margin-bottom:20px;
        .for-min-title{
          width:80px;
          text-align: right;
        }
        .for-min-text{
          flex:1;
        }
        .for-img-box{
          img{
            display: inline-block;
            width:60px;
            height:60px;
            border:1px solid #dedede;
            overflow: hidden;
            margin:0 10px 10px 0;
          }
        }
      }
    }
  }
  .center-addCheckPage{
    video::-webkit-media-controls-enclosure{
      background: #B2DAFD;
      border-radius:4px;
      overflow: hidden;
      width:280px;
    }
    video::-webkit-media-controls-timeline {
      width:130px;
      margin-right:50px ;
    }
  }
</style>