FileManage/web/src/views/planscreening/viewreport.vue

<script lang="ts">
export default {
  name: 'viewreport' // 查看报告
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from "vue";
import Inspectreport from './components/inspectreport.vue';
import Personalreports from './components/personalreports.vue';
const props:any = defineProps({
  planInfo: {
    required: false,
    type: Object,
    default: {}
  }
})
const Inspectreportdiv = ref()
const Personalreportsdiv = ref()

const menulist:any = ref({menuname1:true,menuname2:false})
const examItems = ref('')
onMounted(() => {
   let tempData = []
  if(props.planInfo.exam_items != null &&props.planInfo.exam_items != ""){
    let exam_items = JSON.parse(props.planInfo.exam_items)
    for(let i=0;i<exam_items.length;i++ )
    tempData.push(exam_items[i].name)
  }
  examItems.value = tempData.join("、")

});
function menuswith(type:any){
  if(type === 1){
    menulist.value.menuname1 = true
    menulist.value.menuname2 = false
  }else{
    menulist.value.menuname1 = false
    menulist.value.menuname2 = true
  }
}
//返回
const emit = defineEmits(['reportreturnClick'])
function reportreturnClick(){
  menulist.value = {menuname1:true,menuname2:false}
  emit('reportreturnClick')
}

</script>

<template>
    <div class="contents-box">
        <div class="content-box-top">
            <div class="box-top1">
              <div class="box-top1-title">{{ planInfo.plan_name }}</div>
              <div class="return" @click="reportreturnClick">
                <img src="@/assets/tableicon/u549.png" alt="">
                <div style="padding-left: 2px;padding-top: 2px;">返回</div>
              </div>
            </div>
            <div class="box-top2">
              <div style="width:160px;" class="box-top2-text">年度:<span class="box-top2-texts">{{ planInfo.plan_year }}</span></div>
              <div style="min-width:220px;" class="box-top2-text">组织机构:<span class="box-top2-texts">{{ planInfo.org_name }}</span></div>
              <div style="min-width:280px;" class="box-top2-text">筛选项目:<span class="box-top2-texts">{{ examItems }}</span></div>
              <div style="width:220px;" class="box-top2-text">开始时间:<span class="box-top2-texts">{{planInfo.plan_start_date}}</span></div>
              <div style="width:150px;" class="box-top2-text">结束时间:<span class="box-top2-texts">{{ planInfo.plan_end_date }}</span></div>
            </div>
            <!-- <div class="box-top3">
                <div :class="[menulist.menuname1?'menucheckstyle':'']" class="box-top3-info" @click="menuswith(1)">普检报告</div>
                <div :class="[menulist.menuname2?'menucheckstyle':'']" class="box-top3-info" @click="menuswith(2)">个人报告</div>
            </div> -->
        </div>
         <!-- <Inspectreport  ref="Inspectreportdiv" v-if="menulist.menuname1" :planInfo="planInfo"/> -->
         <Personalreports ref="Personalreportsdiv" :planInfo="planInfo"/>
    </div>
</template>
<style scoped  lang="scss">
.contents-box{
    width: 100%;
  .content-box-top{
    width: 100%;
    height: 140px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
    background-color: #fff;
    padding: 20px;
    .box-top1{
        display: flex;
        justify-content: space-between;
        .box-top1-title{
          font-weight: 700;
          font-style: normal;
          color: #363636;
          font-size:24px;
        }
        :deep(){
         .el-button{
            width: 54px;
            height: 26px;
            padding: 0px;
         }
         .el-button:focus, .el-button:hover{
            background-color: #ecf5ff;
            color:#409eff;
         }
        }
    }
    .box-top2{
        display: flex;
        margin-top: 11px;
      .box-top2-text{
        font-size: 14px;
        color:#949494;
        margin-right: 20px;
      }
      .box-top2-texts{
        font-size: 14px;
        color:#363636;
        padding-left: 11px;
      }
    }
    .box-top3{
        display: flex;
        margin-top: 16px;
        .box-top3-info{
        //   height: 50px;
          font-size: 14px;
          margin-right: 40px;
          padding-bottom: 12px;
        //   border-bottom: 3px solid #409eff;
          color: #505050;
          cursor: pointer;
        }
        .box-top3-info:hover{
            color: #409eff;
        }
        .menucheckstyle{
          border-bottom: 3px solid #409eff; 
          color: #409eff;
        }
    }
  }
}
.return{
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      color: #409EFF;
      width: 50px;
      height: 26px;
      border: 1px solid #C6E2FF;
      background: rgb(236, 245, 255);
      border-radius:4px;
      cursor: pointer;
    }
</style>