platformFront/src/components/recordInput/AddRecord.vue

<template>
    <div>
        <crumbs :title="title" :param="$route.params" linkTo="RecordInput"></crumbs>
        <div class="contents">
            <div class="content ">
                <el-form ref="form" :label-position="labelPosition" label-width="90px" class="add-record-form clearfix" :model="form">
                    <div class="contentBox clearfix">
                        <div class="left fl clearfix">
                            <div class="selectHospital">
                                <!-- <el-form-item label="医院名称：" prop="">
                                    <span>{{form.hospitalCode}}</span>
                                </el-form-item> -->
                                <el-form-item label="病案号：" prop="">
                                    <span>{{form.caseNumber}}</span>
                                </el-form-item>
                                <div class="recordInfoBox">
                                    <!-- <p class="title">病例信息：</p> -->
                                    <el-collapse v-model="activeLeftNames" @change="handleChange">
                                        <el-collapse-item v-for="(item, index) in caseInfoList" :title="item.name" :name="item.id" :key="item.id">
                                            <div v-for="it in item.text"  class="caseInfo">
                                              {{it}}
                                            </div>
                                        </el-collapse-item>
                                    </el-collapse>
                                </div>
                            </div>
                            <div class="contentBox">
                              
                            </div>
                            
                            
                        </div>
                        <div class="right fr clearfix">
                          <p class="title">病例标注：</p>
                            <div class="rightContentBox">
                              <el-collapse v-model="activeRightNames" @change="handleChange">
                                <el-collapse-item v-for="(item, index) in caseLIst" :title="item.name" :name="item.id" :key="item.id">
                                    <el-checkbox-group v-model="checkAllMap[item.remark]" >
                                      <el-checkbox v-for=" casesEntry in item.qcCasesEntry" :label="casesEntry.id" :key="casesEntry.id">{{casesEntry.name}}</el-checkbox>
                                  </el-checkbox-group>
                                </el-collapse-item>
                              </el-collapse>
                            </div>
                        </div>
                    </div>
                    <p class="oper">
                        <el-button style="margin-right: 30px" size="small" type="primary" :disabled="!canSumbit" @click="confirm('form')">确定</el-button>
                        <el-button size="small" @click="cancel">取消</el-button>
                    </p>
                </el-form>
               
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
  import api from '@api/records.js';
  export default {
    name:'AddRecord',
    data(){
      return{
        // data:{},
        labelPosition:'left',
        caseLIst:[],
        caseRemarkList:[],
        casesEntryList:[],
        textList:[],
        casesEntryListSelect:[],
        checkList:[],
        caseInfoList:[],
        checkAllMap:{},
        textAllMap:{},
        title:'病例录入-标注病例',
        form:{
          caseNumber:'',
          hospitalCode:'',
          caseNumberId:'',
          hospitalId:''

        },
        id:null,
        modifier:'',
        canSumbit: true,
        activeLeftNames: ['1'],
        activeRightNames: ['1']
      }
    },
    created(){
      
      const userLoginDTO = JSON.parse(localStorage.getItem('userLoginDTO'));
      this.modifier = userLoginDTO && userLoginDTO.linkman;
      const { isEdit, data } = this.$route.params;
      if(isEdit) {
          this.title = '病例录入-标注病例';
          this.id= data.id
          this.form.caseNumber = data.caseNumber
          this.form.hospitalCode = data.hospitalName
          this.form.hospitalId = data.hospitalId
          // this.form.recordInfo = data.text
          this.caseInfoList = data.moduleMappingDTOList
          const qcInputcasesMapping = data.qcInputcasesMapping
           this.getRecordInpModule()
           .then(()=>{
                // console.log('checkAllMap',this.checkAllMap)
                // console.log('this.caseLIst',this.caseLIst)
                if(qcInputcasesMapping){
                  const checkAllMapCopy = JSON.parse(JSON.stringify(this.checkAllMap))
                  for(let i = 0; i < this.caseLIst.length; i++){
                    const filterArr = qcInputcasesMapping.filter(item => item.casesId ==  this.caseLIst[i].id&& item.pass == -1)
                    let checkArr = []
                    for(let j = 0; j < filterArr.length; j++){
                      checkArr.push(filterArr[j].casesEntryId)
                    }
                    checkAllMapCopy[this.caseLIst[i].remark] = checkArr
                  }
                  this.checkAllMap = checkAllMapCopy
                }
               
          })
      }else {
        this.getRecordInpModule()
      }

    },
    methods:{
      handleChange(val) {
        // console.log(val);
      },
      getRecordInpModule(){
        return api.getRecordInpModuleByHospital({
          hospitalId: this.form.hospitalId
        }).then((res)=>{
          const result = res.data;
          if(result.code==0){
            this.caseLIst = result.data
            const checkAllMap = {}
            const textAllMap = {}
            for(let i = 0; i < this.caseLIst.length; i++){
              checkAllMap[this.caseLIst[i].remark] = []
              textAllMap[this.caseLIst[i].remark] = []
            }
            this.checkAllMap = checkAllMap
            this.textAllMap = textAllMap
          }else{
            this.$message({
              message:result.msg,
              type:'warning'
            });
          }
        })
      },
    
      cancel(){
        this.$router.push({
          name: 'RecordInput',
          params: Object.assign({}, this.$route.params)
        });
      },
      getArrDifference(arr1, arr2) {
          return arr1.concat(arr2).filter(function(v, i, arr) {
              return arr.indexOf(v) === arr.lastIndexOf(v);
          });
      },
      getIdList(arr){
        let  casesEntryIdList = []
        for(let i = 0; i < arr.length; i++){
          casesEntryIdList.push( arr[i].id)
        }
        return casesEntryIdList
      },
      confirm(form){
        const {casesId} = this.form
        let qcInputMappingSaveVO = []
        const caseLIstCopy = JSON.parse(JSON.stringify(this.caseLIst))
        for(let i = 0; i < caseLIstCopy.length; i++){
          const CheckList = this.checkAllMap[caseLIstCopy[i].remark]
          if(caseLIstCopy[i].qcCasesEntry){
            for(let j = 0; j < caseLIstCopy[i].qcCasesEntry.length; j++){
              let item = {
                casesEntryId: caseLIstCopy[i].qcCasesEntry[j].id,
                casesId: caseLIstCopy[i].id,
                pass: 0
              }
              if(CheckList.findIndex(item => item == caseLIstCopy[i].qcCasesEntry[j].id) > -1){
                item.pass = -1
              }
              qcInputMappingSaveVO.push(item)
            }
          }
          
        }
        // for(let i = 0; i < noCheckList.length; i++) {
        //   qcInputMappingSaveVO.push({
        //     casesEntryId: noCheckList[i],
        //     casesId: casesId,
        //     pass: 0
        //   })
        // }
        // for(let i = 0; i < checkedcasesEntrys.length; i++) {
        //   qcInputMappingSaveVO.push({
        //     casesEntryId: checkedcasesEntrys[i],
        //     casesId: casesId,
        //     pass: -1
        //   })
        // }
        let param = {
          hospitalId: this.form.hospitalId,
          caseNumberId: this.id,
          caseNumber: this.form.caseNumber, 
          isTag: true,
          qcInputMappingSaveVO,
        }
        // for(let i = 0; i < this.textList.length; i++){
        //   param[this.textList[i].remark] = this.textList[i].recordInfo
        // }
        // if(this.id){
        //   param = Object.assign(param,{id: this.id})
        // }
        this.canSumbit = false
        api.addRecordInp(param).then((res)=>{
            this.canSumbit = true
            if(res.data.code==0){
                if(this.id){
                  this.warning('修改成功', 'success')
                }else{
                  this.warning('添加成功', 'success')
                }
                //返回带搜索条件的首页
                this.$router.push({
                  name: 'RecordInput',
                  // params: Object.assign({}, this.$route.params)
                });
            }else{
                this.warning(res.data.msg)
               
            }
        })
      },
      warning(msg,type){
        this.$message({
          showClose: true,
          message:msg,
          type:type||'warning'
        })
      },
    }
  }
</script>
<style lang="less">
    @import "../../less/admin.less";
    .content{
        background: #fff;
        padding: 20px 20px 50px;
        color: #545455;
        min-width: 980px;
        position: relative;
        .left,.right{
          width: 50%;
          // height: 450px;
          .el-select{
            width: 100%;
          }
        }
        // .el-form-item__label{
        //    font-weight: bold;
        //    font-size: 16px;
        // }
        .title{
          font-size: 16px;
          color: #606266;
          line-height: 40px;
          margin-bottom: 22px;
          font-weight: bold;
        }
        .caseInfo{
          border: 1px solid #eee;
          margin: 0 0 10px 0;
          white-space: pre-wrap;
        }
        .checkBox{
          margin: 20px 0 0 0;
          .el-checkbox{
             display: block;
            position: relative;
            margin: 0 30px  0 0px;
            line-height: 30px;
           
            .el-checkbox__input{
              position: absolute;
              top: 9px;
            }
            .el-checkbox__label{
              padding: 0 0 0 20px;
              white-space: normal;
              line-height: 30px;
            }
          }
        }
        .right{
          width: 45%;
          margin-left: 5%;
          .el-select{
            width: 80%;
          }
        }
        .contentBox{
          margin: 20px 0 0 0;
        }
        .casesEntryList{
          margin-top: 20px;
          padding: 10px 0;
          width: 80%;
          border: 1px solid #dcdfe6;
          height: 410px;
          overflow-y: auto;
          .el-checkbox{
            position: relative;
            display: block;
            width: calc(100% - 60px);
            margin-left: 30px;
            line-height: 30px;
            .el-checkbox__input{
              position: absolute;
              top: 9px;
            }
            .el-checkbox__label{
              padding: 0 0 0 20px;
              white-space: normal;
              line-height: 30px;
            }
          }
        }
        .short-inp{
            width: 200px;
        }
        .sub-title{
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 20px;
        }
        .oper{
          margin: 30px 0 0 0;
            padding-right: 80px;
            text-align: right;
        }
        .treatments{
          .el-input{
              width:200px;
              display: inline-block;
          }
        }
        .el-checkbox{
          margin: 0 30px 0 0;
          display: block;
        }
        .recordInfoBox{
          height: 650px;
          overflow-y: auto;
        }
        .rightContentBox{
          height: 650px;
          overflow-y: auto;
        }
    }

</style>