FileManage/web/src/views/planscreening/components/inspectreport.vue

<script lang="ts">
export default {
  name: 'inspectreport' // 普检报告
};
</script>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox, FormRules,ElTable} from "element-plus";
import Page from '@/components/Pagination/page.vue';
import { queryExamineSchoolTree,queryPlanGradePage } from "@/api/planscreening";
import { publicTree } from '@/utils/validate';
const props:any = defineProps({
  planInfo: {
    required: false,
    type: Object,
    default: {}
  }
})
const queryInfo :any = ref({
  current:1,
  size:10,
  total:0
})
const tableData:any = ref([])
const multipleSelection = ref([])
const dialogVisible = ref(false)
const loading = ref(false)
// 左侧树
const treeLoading = ref(false)
const defaultProps = { label: "name" }
//树形控件类型定义
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
const vMove = {
  mounted(el: any) {
    el.onmousedown = function (e: any) {
      var init = e.clientX;
      var parent: any = document.getElementById("silderLeft");
      const initWidth: any = parent.offsetWidth;
      document.onmousemove = function (e) {
        var end = e.clientX;
        var newWidth = end - init + initWidth;
        parent.style.width = newWidth + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    };
  }
}
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}
const nodeData:any = ref({})
// 初始化
function init(){
  loading.value = true
  let params:any = {
    planId:props.planInfo.id,
    examType:'01',
    current:queryInfo.value.current,
    size:queryInfo.value.size,
  }
  if(nodeData.value.org_type =='5'){
    params.schoolId =  nodeData.value.id
    params.regionId =  ""
  }else{
    params.regionId =  nodeData.value.id 
    params.schoolId =  ""
  }
  queryPlanGradePage(params).then((res) => {
    tableData.value = []
    if(res.data != null){
      for (const key in res.data) {
        let temp:any =  key.split(",")
        tableData.value.push({
        plan_name:props.planInfo.plan_name,
        grade_id:temp[1],
        grade_name:temp[2],
        exam_time:temp[3]
        })
      }
    }
    loading.value = false
  }).catch(()=>{
    loading.value = false
  });

}
const handleNodeClick = (data: Tree) => {
  nodeData.value = data
  queryInfo.value = {
    current:1,
    size:10,
    total:0
  }
  init()
};
//导出
function exportdata(){

}
function handleClose(){
  dialogVisible.value = false
}
function handleSelectionChange(val:any){
  multipleSelection.value = val
}
function viewclick(row:any){
  ElMessage({
    message: "查看报告功能正在开发中！",
    type: "warning",
  });
}
const treeData:any = ref([])
function getTree(){
  let params = {
    planId: props.planInfo.id,
    orgId: props.planInfo.org_id,
    orgType: props.planInfo.org_type,
  };
  treeLoading.value = true
  queryExamineSchoolTree(params).then((res) => {
    treeData.value = publicTree(res.data,"")
    treeLoading.value = false
  }).catch(()=>{
    treeLoading.value = false
  });
}

onMounted(() => {
   getTree()
   init()
});
function exportinfo(){
  ElMessage({
    message: "导出报告功能正在开发中！",
    type: "warning",
  });
}
</script>

<template>
    <div class="contents-box">
      <aside id="silderLeft">
      <div class="lefttitle">
        <div class="line"></div>
        <div class="treetitle">数据列表</div>
      </div>
        <div>
          <el-tree v-loading="treeLoading" ref="treeRef" node-key="id" :data="treeData" 
            default-expand-all
            :highlight-current="true" :props="defaultProps" :expand-on-click-node="false"
            @node-click="handleNodeClick" style="height: calc(100vh - 350px); overflow: auto">
          </el-tree>
        </div>
      <div class="moveBtn" v-move>
        <div class="moveBtn-line" v-move></div>
      </div>
    </aside>
      <div class="silderRight">
        <div class="searchinfo">
          <el-button type="primary" @click="exportinfo">
            <img src="@/assets/visionscreening/exports.png" alt="">导出
          </el-button>
        </div>
        <div v-loading="loading">
        <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%; height:calc(100vh - 435px)" @selection-change="handleSelectionChange" :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="plan_name" label="检查名称" />
            <el-table-column prop="grade_name" label="年级" />
            <el-table-column prop="exam_time" label="生成时间" width="196">
            <template #default="scope">
              <span v-if="scope.row.exam_time !='null'">{{ dateFormat(scope.row.exam_time) }}</span>
              <span v-else>-</span>
               
            </template>
          </el-table-column>

            <el-table-column prop="address" label="操作" width="100" fixed="right" align="center">
              <template #default="scope">
                <div style="display: -webkit-flex;display: flex; justify-content: space-around;-webkit-justify-content: space-around; ">
                  <img src="@/assets/visionscreening/viewreport.png" alt="" title="查看结果记录表" @click="viewclick(scope.row)" style="cursor: pointer;">
                </div> 
              </template>
            </el-table-column>
          </el-table>
          <Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
          @pagination="init" />
      </div>
      </div>
      <el-dialog v-model="dialogVisible" :show-close="false" :before-close="handleClose" :close-on-click-modal="false" title="视力筛查报告" width="60%" draggable append-to-body>
        
    </el-dialog>
    </div>
</template>
<style scoped  lang="scss">
  .contents-box{
    margin-top: 15px;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    .box-search{
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      margin-bottom: 20px;
      :deep(){
        .el-input{
            width: 240px;
        }
    }
    }
  }
  #silderLeft {
  width: 242px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 3px;
  position: relative;
  &:hover {
    .moveBtn {
      opacity: 1;
    }
  }
}
/* 拖动条 */
.moveBtn {
  height: 100%;
  width: 15px;
  padding: 0 6px;
  opacity: 0;
  position: absolute;
  right: -15px;
  top: 0;
}

.moveBtn-line {
  width: 100%;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background-color: #60bfff;
}
.silderRight {
  flex: 1;
  position: relative;
  width: 100%;
  height: calc(100vh - 285px);
  overflow: auto;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 3px;
  padding: 20px;
  padding-bottom: 0px;
  margin-left: 15px;
  box-sizing: border-box;
}
.lefttitle {
  min-width: 130px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #1B1B1B;
  border-bottom: 1px var(--el-border-color) var(--el-border-style);
  margin-bottom: 10px;
  .line{
    border-width: 0px;
    width: 5px;
    height: 14px;
    margin-right: 7px;
    background: inherit;
    background-color: rgba(64, 158, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
:deep(){
  .el-tree-node__content{
    height: 40px;
    padding-left: 12px !important;
    color: #505050;
   }
   .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
    color: #409eff;
   }
   .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content:hover{
    color: #409eff;
    background-color: #ecf5ff;
   }
  .el-tree-node__content:hover{
    color: #409eff;
    background-color: transparent;
    // #ecf5ff
  }
  .el-tree-node__expand-icon{
    color: #333333;
  }
}
.searchinfo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.my-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .icontext{
    font-size: 12px;
    color: #787878;
    width: 25px;
    text-align: center;
    cursor: pointer;
    img{
        padding-left: 4px;
    }
  }
  
}
.QRbox{
    height: calc(100vh - 200px);
    text-align: center;
}
</style>