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

<!--录入检查-->
<template>
  <div class="app-container addCheckPage">
    <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"
              filterable
              remote
              reserve-keyword
              placeholder="请输入实验室房间号"
              :remote-method="getSelectInfoByRoom"
              @change="selectChange"
              >
              <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="隐患描述：" :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
              placeholder="请输入检查项名称或点击箭头选择"
              :before-filter="(value)=>filterRegion(value,index)"
              filterable
              clearable
              maxlength="10"
              :show-all-levels="false"
              ref="cascaderGet"
              style="width:300px;"
              v-model="item.jcxId"
              :options="defaultCheckOptionList"
              @change="(val)=>cascaderChange(val,index)"
              @focus="focusClick()"
              :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="focusCheck(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="add-button-one-90" @click="submitForm(1)" v-hasPermi="['laboratory:checkRecord:add']">保存草稿</p>
        <p class="inquire-button-one" @click="submitForm(2)" v-hasPermi="['laboratory:checkRecord:add']">提交发布</p>
      </div>
    </el-form>
    <!--新增检查项-->
    <el-dialog title="添加检查项" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="addForm" :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,listCheckRecord, getCheckRecord, delCheckRecord, addCheckRecord, updateCheckRecord, selectInfoByRoom,
    checkRecordAddC, checkRecordAdd, addTempCheckOption,selectDeptListUserDeptId,hiddenDangerCount } from "@/api/laboratory/checkRecord";
  import { getToken } from "@/utils/auth";
export default {
  name: "CheckRecord",
  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" },
          { required: true, message: "请输入检查项名称", validator: this.spaceJudgment, trigger: "blur" }
        ],
        idList: [
          { required: true, message: "请选择目录", trigger: "blur" }
        ],
        checkName: [
          { required: true, message: "请输入检查名称", trigger: "blur" },
          { required: true, message: "请输入检查名称", validator: this.spaceJudgment, trigger: "blur" }
        ],
      },
      // 检查先搜索列表
      optionsUser:[],
      open:false,
      openIndex:"",
      //检查项联机
      examinationForm:{
        laboratoryName:"",
        idList:[],
      },
      //检查项
      defaultCheckOptionList:[],
      defaultCheckOption:[],
      checkOptionListExamination:[],
      //临时数据组
      temporaryIdList:[],
      //检查单位
      inspectionUnitArrayData:[],
      //提醒页面开关
      remindOpen:false,
      remindList:[],
      nameOpen:false,
      nameForm:{
        checkName:"",
      },
      formData:{},
      addList:[],
    };
  },
  created() {
    this.getListCheckOptionData();
    this.getListCheckOptionTwo();
    this.treeselect();
  },
  methods: {
    remindOff(){
      this.remindOpen = false;
    },
    remindButton(){
      this.remindOpen = 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
    },
    //删除隐患
    delDanger(index){
      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:"",
      };
      this.form.detailsList.push(obj);
    },
    //上传
    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(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;
            checkRecordAdd(this.formData).then( response => {
              this.msgSuccess('提交成功')
              this.addList = [];
              this.getListCheckOptionData();
              this.delForm();
              this.nameOpen = false;
              this.loading = false;
            });
          }
        })
      }
    },
    /** 提交按钮 */
    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++){
            if(obj.detailsList[i].jcxName.indexOf("/") != -1){
              let list = obj.detailsList[i].jcxName.split("/");
              obj.detailsList[i].jcxName = list[list.length-1];
            }
            obj.detailsList[i].jcxId = obj.detailsList[i].jcxId + ',';
            obj.detailsList[i].yhImg = obj.detailsList[i].yhImg + '';
          }
          obj.zgStatus = 0;
          if(type == 1){
            obj.isCg = 1;
          }else if(type == 2){
            obj.isCg = 0;
          }
          this.formData = JSON.parse(JSON.stringify(obj));
          if(type == 1){
            this.loading = true;
            checkRecordAddC(this.formData).then( response => {
              this.msgSuccess('保存草稿成功')
              this.addList = [];
              this.getListCheckOptionData();
              this.delForm();
              this.loading = false;
            });
          }else{
            this.nameForm.checkName = "";
            this.nameOpen = true;
          }
        }
      });
    },
    delForm(){
      let obj = {
        fjNumber:"",
          buildingId:"",
          buildingName:"",
          laboratoryId:"",
          laboratoryName:"",
          fzrName:"",
          fzrLxfs:"",
          detailsList:[
          // {
          //   isLingshi:0,
          //   yhImg:[],
          //   yhMs:"",
          //   jcxId:"",
          //   jcxName:"",
          // }
        ],
      }
      this.fjNumber = "";
      this.$set(this,"form",obj)
    },
    /** 下列人员-懒加载 */
    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["addForm"].validate(valid => {
        if (valid) {
          let obj = {
            name:this.examinationForm.name,
            parentId:this.examinationForm.idList[this.examinationForm.idList.length-1]
          };
          addTempCheckOption(obj).then( response => {
            let obj = {
              id:response.data.id,
              name:response.data.name,
            };
            this.defaultCheckOptionList.push(obj);
            this.addList.push(obj);
            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){
      console.log("query",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,"laboratoryId",self.optionsSelect[i].building)
              // self.$set(self.form,"buildingId",self.optionsSelect[i].deptId)
              // self.$set(self.form,"deptId",self.optionsSelect[i].id)
              self.$set(self.form,"laboratoryId",self.optionsSelect[i].id)
              self.$set(self.form,"buildingId",self.optionsSelect[i].building)
              self.$set(self.form,"deptId",self.optionsSelect[i].deptId)
              self.$set(self.form,"deptName",self.optionsSelect[i].deptName)
              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(() => {
            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(() => {
            self.$set(self.form,"fjNumber",self.fjNumber)
            this.getSelectInfoByRoom(self.fjNumber)
          });
        }
      }
    },
    getListCheckOptionData(){
      let newObj = {
        level:4,
      }
      listCheckOption(newObj).then( response => {
        this.defaultCheckOptionList = this.getTreeData(response.data);
        this.$set(this,'defaultCheckOption',this.defaultCheckOptionList);
      });
    },
    focusClick(){
      this.$set(this,'defaultCheckOptionList',JSON.parse(JSON.stringify(this.defaultCheckOption.concat(this.addList))));
    },
    filterRegion(value,index){
      this.getListCheckOptionOne(value,index);
      return false
    },
    //获取检查项
    getListCheckOptionOne(data,index) {
      let newObj = {
        level:4,
        searchValue:data
      }
      listCheckOption(newObj).then( response => {
        let list = this.getTreeData(response.data);
        if(list[0]){
          list = list.concat(this.addList);
          this.$set(this,'defaultCheckOptionList',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">
  .addCheckPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    .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;
            .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;
          margin-right:20px;
        }
        p:nth-child(3){
          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;
          }
        }
      }
    }
  }
</style>