gx

chenyc

2025-08-08 ace0cfcd61927780dda4bd4a86c7b742ce9d48c2

 src/views/report/index.vue

@@ -1,83 +1,270 @@
<template>
    <div class="report">
        <van-nav-bar
            title=""
            left-text="返回"
            left-arrow
        />
        <div class="inputdiv">
            <van-field left-icon="search" class="input" v-model="inputValue" placeholder="模糊匹配项目、日期检索" />
        <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>
        <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>
        <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 {ref,reactive,watchEffect,watch} from 'vue'
    import {useRouter} from 'vue-router'
    const router=useRouter()
    const inputValue=ref('')
    const topath=(url:string)=>{
        console.log('sss')
        router.push(url)
    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: #F6FAFF;
        padding: 0;
        .inputdiv{
            width: 94%;
            margin-left: 3%;
            margin-top: 10px;
            .input{
                width: 100%;
                // height: 33px;
                border-radius: 22px;
                border: 1px solid #DADADA;
                // line-height: 33px;
            }
.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: #FFFFFF;
            box-shadow: 0px 2px 4px 0px rgba(70,150,249,0.1);
            border-radius: 8px;
            .lable{
                width: 90%;
                margin-left: 5%;
                height: 40px;
               div{
}

.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: PingFangSC-Regular, PingFang SC;
                font-family: Arial, sans-serif;
                font-weight: 400;
                color: #777777;
                color: #777;
                line-height: 40px;
                border-bottom: #F1F1F2 1px solid;
               }
                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;
}

.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>