<template>
|
<div class="report">
|
<div style="border: 1pt solid #707070;">
|
<van-nav-bar title="" :left-text="typeName">
|
<template #right>
|
<van-button
|
icon="todo-list-o"
|
size="small"
|
plain
|
type="primary"
|
@click="showPopup = true"
|
>筛选</van-button
|
>
|
</template>
|
</van-nav-bar>
|
</div>
|
<DateRangePicker v-model="showPopup" @confirm="handleConfirm" />
|
<!-- <div v-if="loading" style="margin-top: 20pt; text-align: center;"> -->
|
<!-- <van-loading type="spinner" /> -->
|
<!-- </div> -->
|
<div class="test-list">
|
<div v-for="(item, index) in reportList" :key="index" class="test-item">
|
<img src="@/assets/listIoc.png" alt="Icon" class="icon">
|
<div class="content" @click="topath(item)">
|
<div class="title">{{ item.itemGroupName }}</div>
|
<div class="date">{{ item.date }}</div>
|
</div>
|
<!-- <div class="hospital">{{ item.client_code }}</div> -->
|
</div>
|
</div>
|
<itembody ref="itembodyRef" />
|
<!-- <div class="listdiv"> -->
|
<!-- <div class="listrow" v-for="x in 6" :key="x"> -->
|
<!-- <van-row> -->
|
<!-- <div class="info"></div> -->
|
<!-- <van-row class="lable"> -->
|
<!-- <van-col span="12">检验值</van-col> -->
|
<!-- <van-col span="12" style="text-align: right">血常规</van-col> -->
|
<!-- </van-row> -->
|
<!-- <van-row class="lable"> -->
|
<!-- <van-col span="12">检验值</van-col> -->
|
<!-- <van-col -->
|
<!-- span="12" -->
|
<!-- style="text-align: right; color: #769aff" -->
|
<!-- @click="topath('/reportItem')" -->
|
<!-- >点击查看详情</van-col -->
|
<!-- > -->
|
<!-- </van-row> -->
|
<!-- <van-row class="lable"> -->
|
<!-- <van-col span="12">最新检查日期</van-col> -->
|
<!-- <van-col span="12" style="text-align: right">2022-08-01</van-col> -->
|
<!-- </van-row> -->
|
<!-- </van-row> -->
|
<!-- </div> -->
|
<!-- </div> -->
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { onMounted, ref } from 'vue'
|
import { Toast } from 'vant'
|
import { userInfoStore } from '@/stores/userInfo'
|
import DateRangePicker from './components/DateRangePicker.vue'
|
import itembody from './item/index.vue'
|
import { ajaxPost } from '@/utils/axios'
|
import { AxiosRequestConfig } from 'axios'
|
const showPopup = ref(false)
|
const userInfo = userInfoStore()
|
const typeName=ref('近三个月')
|
const loading=ref(false)
|
const dataDate=ref({
|
startDate: '',
|
endDate: '',
|
})
|
const reportList=ref(<any>[])
|
const itembodyRef = ref(null)
|
const topath = (row: any) => {
|
console.log('sss',row)
|
itembodyRef.value.showSet(row)
|
|
}
|
const handleConfirm = (data) => {
|
typeName.value=data.type
|
console.log('Selected date range:', data)
|
dataDate.value.startDate = data.startDate
|
dataDate.value.endDate = data.endDate
|
console.log('dataDate', dataDate.value)
|
getDatas(dataDate.value)
|
}
|
// 格式化日期为 YYYY-MM-DD
|
const formatDate = (date:any) => {
|
const year = date.getFullYear()
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
const day = String(date.getDate()).padStart(2, '0')
|
return `${year}-${month}-${day}`
|
}
|
|
// 排序结果数组
|
function flattenData(data) {
|
const result = []
|
// 遍历每个日期
|
for (const date in data) {
|
if (data.hasOwnProperty(date)) {
|
const groups = data[date]
|
|
// 遍历每个组别
|
for (const groupName in groups) {
|
if (groups.hasOwnProperty(groupName)) {
|
const items = groups[groupName]
|
|
// 创建一个新的对象来存储当前组别的信息
|
const groupItem = {
|
date: date,
|
itemGroupName: groupName,
|
client_code: items.length > 0 ? items[0].client_code : null, // 假设所有项有相同的client_code
|
itemGroupItems: items.map(item => (item))
|
}
|
|
result.push(groupItem)
|
}
|
}
|
}
|
}
|
|
return result
|
}
|
|
|
const getDatas=()=>{
|
console.log(userInfo.patient.patientInfo.code)
|
// const pagedata={
|
// patCode :'PAT9121102427442HIiL',
|
// date1:dataDate.value.startDate,
|
// date2:dataDate.value.endDate,
|
// isGroupByFeeItem:1
|
//
|
// }
|
//
|
// const pasm=`date1=${dataDate.value.startDate}&date2=${dataDate.value.endDate}&isGroupByFeeItem=1&patCode="${userInfo.patient.patientInfo.code}"`
|
// 配置请求头为 x-www-form-urlencoded
|
const config: AxiosRequestConfig = {
|
headers: {
|
'Content-Type': 'application/x-www-form-urlencoded',
|
},
|
}
|
let pasm=`date1=${dataDate.value.startDate}&date2=${dataDate.value.endDate}&isGroupByFeeItem=1&patCode=${userInfo.patient.patientInfo.code}`
|
if (!dataDate.value.startDate||!dataDate.value.endDate){
|
pasm=`date1=2020-01-01&date2=2030-01-01&isGroupByFeeItem=1&patCode=${userInfo.patient.patientInfo.code}`
|
}
|
loading.value = true // 开始加载
|
reportList.value=[]
|
const toast = Toast.loading({
|
duration: 0,
|
forbidClick: true,
|
message: '加载中...',
|
})
|
|
|
ajaxPost('/lis/report/getLatestReportByPat',pasm,config).then((re:any)=>{
|
console.log('获取数据', re)
|
console.log(re)
|
const da= flattenData(re)
|
console.log('扁平化数据', da)
|
reportList.value = da
|
|
}).finally(()=>{
|
loading.value = false // 加载完成
|
toast.clear() // 清除加载提示
|
}).catch((error:any)=>{
|
console.error('获取数据失败', error)
|
})
|
}
|
onMounted(() => {
|
const now = new Date()
|
const threeMonthsAgo = new Date(now)
|
threeMonthsAgo.setMonth(now.getMonth() - 3)
|
dataDate.value.startDate = formatDate(threeMonthsAgo)
|
dataDate.value.endDate = formatDate(now)
|
getDatas()
|
})
|
</script>
|
<style scoped lang="scss">
|
.report {
|
background-color: #b9d0e2;
|
padding: 0;
|
|
.inputdiv {
|
width: 94%;
|
margin-left: 3%;
|
margin-top: 5px;
|
|
.input {
|
width: 100%;
|
|
// height: 33px;
|
border-radius: 22px;
|
border: 1px solid #dadada;
|
|
// line-height: 33px;
|
}
|
}
|
}
|
|
.listdiv {
|
.listrow {
|
margin-top: 10px;
|
width: 94%;
|
margin-left: 3%;
|
background: #fff;
|
box-shadow: 0 2px 4px 0 rgba(70, 150, 249, 0.1);
|
border-radius: 8px;
|
|
.lable {
|
width: 90%;
|
margin-left: 5%;
|
height: 40px;
|
|
div {
|
height: 40px;
|
font-size: 13px;
|
font-family: Arial, sans-serif;
|
font-weight: 400;
|
color: #777;
|
line-height: 40px;
|
border-bottom: #f1f1f2 1px solid;
|
}
|
}
|
}
|
}
|
|
.test-list {
|
background-color: #f0f8ff;
|
padding: 10pt;
|
}
|
|
.test-item {
|
display: flex;
|
align-items: center;
|
background-color: "#ffffff";
|
border-radius: 5pt;
|
margin-bottom: 10pt;
|
padding: 7pt;
|
border-bottom: 1px solid #b4afaf;
|
}
|
|
.icon {
|
width: 40pt;
|
height: 40pt;
|
margin-right: ptpx;
|
}
|
|
.content {
|
flex: 1;
|
}
|
|
.title {
|
padding: 5pt;
|
font-size: 12pt;
|
font-weight: bold;
|
}
|
|
.date {
|
padding: 5pt;
|
font-size: 12pt;
|
color: #666;
|
}
|
|
.hospital {
|
font-size: 12pt;
|
color: #666;
|
}
|
</style>
|
