gx1868 日期选择和排班患者查询条件,默认显示当天的已排班患者

chenyc

2025-07-14 05c827fea632f004821cc746ba73880769fab7cd

 src/views/home/index.vue

@@ -3,20 +3,56 @@
        <div class="container">
            <div class="container-left" v-if="isLeftVisible">
                <div class="patTabel">
                    <el-table :data="state.filterTableData" stripe :height="state.tableHeight.left" size="default"
                        highlight-current-row @current-change="handleCurrentChange" style="width: 300px">
               <el-table
                  :data="state.filterTableData"
                  stripe
                  :height="state.tableHeight.left"
                  size="default"
                  highlight-current-row
                  @current-change="handleCurrentChange"
                  style="width: 300px"
               >
                        <el-table-column>
                            <template #header>
                                <div class="home-title">
                                    <el-avatar shape="square"
                                        style="width: 16px; height: 16px;background-color: #ffffff;margin-right: 10px;margin-left: 10px;"
                                        fit="contain" :src="huanzheliebiao" />
                                    <div class="titleHome">患者列表 <span style="color: blue;" v-if="state.filterTableData.length"> &numsp; 共（{{state.filterTableData.length}}）人</span></div>
                           <el-avatar
                              shape="square"
                              style="width: 16px; height: 16px; background-color: #ffffff; margin-right: 10px; margin-left: 10px"
                              fit="contain"
                              :src="huanzheliebiao"
                           />
                           <div class="titleHome">
                              患者列表 <span style="color: blue" v-if="state.filterTableData.length"> &numsp; 共（{{ state.filterTableData.length }}）人</span>
                                </div>
                                <el-input size="default" @change="getPatients" v-model="state.search" placeholder="支持模糊查询"
                                    :prefix-icon="Search" />

                                <el-row style="margin-top: 5px;">
                        </div>
                        <el-input size="default" @change="getPatients()" v-model="state.search" placeholder="支持模糊查询" :prefix-icon="Search" />
                        <el-row :gutter="5" style="margin-top: 5px">
                           <el-col :span="12">
                              <el-date-picker
                                 size="default"
                                 :clearable="false"
                                 v-model="state.queryDete"
                                 type="date"
                                 value-format="YYYY-MM-DD"
                                 :placeholder="$t('message.透析单.选择排班日期')"
                                 class="dialysis_form_date"
                                 style="width: 100%"
                                 @change="() => getPatients()"
                              >
                              </el-date-picker>
                           </el-col>
                           <el-col :span="12" style="text-align: right">
                              <el-select size="default" v-model="state.timeSlot" class="w_100" :clearable="false" @change="() => getPatients()">
                                 <el-option
                                    v-for="(item, index) in state.timeSlotOptions"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                 ></el-option>
                              </el-select>
                           </el-col>
                        </el-row>
                        <el-row style="margin-top: 5px">
                                    <el-col :span="10">姓名</el-col>
                                    <el-col :span="5">性别</el-col>
                                    <el-col :span="4">年龄</el-col>
@@ -35,8 +71,8 @@
                    </el-table>
                </div>
            </div>
            <div class="right" :class="{'full-width': !isLeftVisible}" style="width: 100%;">
                <div style="width: 100%;">
         <div class="right" :class="{ 'full-width': !isLeftVisible }" style="width: 100%">
            <div style="width: 100%">
                    <el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="患者档案" name="患者档案">
                            <template #label>
@@ -67,7 +103,6 @@
                                    <span style="margin-left: 5px">膳食调查</span>
                                </span>
                            </template>
                            
                        </el-tab-pane>

                        <el-tab-pane label="食物过敏原及胃肠功能调查" name="食物过敏原及胃肠功能调查">
@@ -119,7 +154,6 @@
                                    <span style="margin-left: 5px">用药记录</span>
                                </span>
                            </template>

                        </el-tab-pane>
                        <el-tab-pane label="营养服务管理记录" name="营养服务管理记录">
                            <template #label>
@@ -130,25 +164,28 @@
                                    <span style="margin-left: 5px">营养服务管理记录</span>
                                </span>
                            </template>

                        </el-tab-pane>
                    </el-tabs>
                    <div class="itemDoby">
                        <patientFile v-show="state.activeName === '患者档案'" :tableHeight="state.tableHeight.detailRight"
                            ref="patientFileRef" />
                        <lisUi v-show="state.activeName === '生化数据'" ref="lisUiRef">
                        </lisUi>
                  <patientFile v-show="state.activeName === '患者档案'" :tableHeight="state.tableHeight.detailRight" ref="patientFileRef" />
                  <lisUi v-show="state.activeName === '生化数据'" ref="lisUiRef"> </lisUi>
                        <MedicationRecords v-show="state.activeName === '用药记录'"  :tableHeight="state.tableHeight.detailRight" ref="MedicationRecordsRef">
                        </MedicationRecords>
                        <dietarySurvey ref="dietarySurveyRef" v-show="state.activeName === '膳食调查'"  :tableHeight="state.tableHeight.detailRight"></dietarySurvey>
                        <shiwuguoming ref="shiwuguomingRef" v-show="state.activeName === '食物过敏原及胃肠功能调查'"  :tableHeight="state.tableHeight.detailRight"></shiwuguoming>
                  <dietarySurvey
                     ref="dietarySurveyRef"
                     v-show="state.activeName === '膳食调查'"
                     :tableHeight="state.tableHeight.detailRight"
                  ></dietarySurvey>
                  <shiwuguoming
                     ref="shiwuguomingRef"
                     v-show="state.activeName === '食物过敏原及胃肠功能调查'"
                     :tableHeight="state.tableHeight.detailRight"
                  ></shiwuguoming>
                        <pinggubiao ref="pinggubiaoRef" v-show="state.activeName === '营养筛查评估'"  :tableHeight="state.tableHeight.detailRight"></pinggubiao>
                        <fangAn ref="fangAnRef" v-show="state.activeName === '营养饮食指导方案'"  :tableHeight="state.tableHeight.detailRight"></fangAn>
                        <suifangjilu ref="suifangjiluRef" v-show="state.activeName === '随访记录'" :tableHeight="state.tableHeight.detailRight"></suifangjilu>

                        <jilubiao ref="jilubiaoRef" v-show="state.activeName === '营养服务管理记录'" :tableHeight="state.tableHeight.detailRight"></jilubiao>


                    </div>
                </div>
            </div>
@@ -163,82 +200,84 @@
</template>

<script setup lang="ts" name="home">
import huanzheliebiao from '/@/assets/imgs/huanzheliebiao.png'
import huanzheliebiao from '/@/assets/imgs/huanzheliebiao.png';
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
import { QueryList,getRecordsInToday2 } from '/@/api/Patients'
import { QueryList, getRecordsInToday2 } from '/@/api/Patients';
import { storeToRefs } from 'pinia';
import {formatDate} from '/@/utils/formatTime'
import { formatDate } from '/@/utils/formatTime';
import { useUserInfo } from '/@/stores/userInfo';
import { usePatientsInfo } from '/@/stores/patientsInfo';
const stores = useUserInfo();
const storesPat = usePatientsInfo();
const { userInfos } = storeToRefs(stores);
const { patientsInfo } = storeToRefs(storesPat);
import { ElLoading, TabsPaneContext } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { ElLoading, TabsPaneContext } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
// 用药记录
import MedicationRecords from './components/Medication_records.vue'
import MedicationRecords from './components/Medication_records.vue';
// 膳食调查
import dietarySurvey from './components/dietary_survey.vue'
import shiwuguoming from './components/shiwuguoming/index.vue'
import dietarySurvey from './components/dietary_survey.vue';
import shiwuguoming from './components/shiwuguoming/index.vue';
// 患者档案
import patientFile from './components/patient_file.vue'
import patientFile from './components/patient_file.vue';
// 化验结果
import lisUi from './components/lis_.ui.vue'
import lisUi from './components/lis_.ui.vue';
// 评估表
import pinggubiao from './components/pingubiao/index.vue'
import pinggubiao from './components/pingubiao/index.vue';
// 方案
import fangAn from './components/fangAn/index.vue'
import fangAn from './components/fangAn/index.vue';
// 随访记录
import suifangjilu from './components/suifangjilu/index.vue'
import suifangjilu from './components/suifangjilu/index.vue';
// 营养记录表
import jilubiao from './components/jilubiao/index.vue'
import jilubiao from './components/jilubiao/index.vue';
interface User {
    code: string,
    patientName: string
    patientGenderText: string
    age: string
   code: string;
   patientName: string;
   patientGenderText: string;
   age: string;
}
const MedicationRecordsRef = ref()
const patientFileRef = ref()
const currentRow = ref()
const lisUiRef = ref()
const pinggubiaoRef=ref()
const dietarySurveyRef=ref()// 膳食调查
const shiwuguomingRef=ref()
const fangAnRef=ref()
const suifangjiluRef=ref()
const jilubiaoRef=ref()
const isLeftVisible=ref(true)
const MedicationRecordsRef = ref();
const patientFileRef = ref();
const currentRow = ref();
const lisUiRef = ref();
const pinggubiaoRef = ref();
const dietarySurveyRef = ref(); // 膳食调查
const shiwuguomingRef = ref();
const fangAnRef = ref();
const suifangjiluRef = ref();
const jilubiaoRef = ref();
const isLeftVisible = ref(true);
const state = reactive({
    
    global: {
        homeChartOne: null,
        homeChartTwo: null,
        homeCharThree: null,
        dispose: [null, '', undefined],
    } as any,
   queryDete: formatDate(new Date(), 'YYYY-mm-dd'),
    filterTableData: [],
    activeName: '患者档案',
    tableHeight: {
        left: 0,
        detailRight: 0
      detailRight: 0,
    },
    search: '',
    isTable: true,
    timeSlot:-1, // 排班时间段
    timeSlotOptions:[{label:'全部患者',value:3},{label:"排班患者",value:-1}]
});
onMounted(() => {
    setTableHeight()
    getPatients()
})
   setTableHeight();
   getPatients();
});
// 定义一个方法来切换左边div的显示状态
const toggleVisibility = () => {
  isLeftVisible.value = !isLeftVisible.value;
};
const handleCurrentChange = (val: any | undefined) => {
    if (val) {
        console.log(val)
        currentRow.value = val
      console.log(val);
      currentRow.value = val;
        const ps={
            id: val.patientId,
         code: val.patientCode,
@@ -246,13 +285,13 @@
         patientName:val.patientName,
         patientGenderText: val?.patientGender?'女':'男',
         patientAvatarIcon: val?.patientAvatar,
         clientCode:val.clientCode
        }
         clientCode: val.clientCode,
      };
        //缓存到vuex 中
        storesPat.setPatientsInfo(ps)
        getTabsData()
      storesPat.setPatientsInfo(ps);
      getTabsData();
    }
}
};
/**获取患者列表 */
const getPatients = () => {
    // 初始化患者信息
@@ -263,30 +302,31 @@
        patientName: '',
        patientGenderText: '',
        patientAvatarIcon: '',
        clientCode:''

    })
      clientCode: '',
   });
    // 患者信息查询条件
    const pp={
        timeSlot:3,
      timeSlot: state.timeSlot, 
        patientFrom:-1,
        patientName:state.search.toLowerCase(),
        orderCondition:2,
        clientCode:userInfos.value.clientCode,
        dateBegin:formatDate(new Date(),'YYYY-mm-dd')+ " 00:00:00",
        dateEnd:formatDate(new Date(),'YYYY-mm-dd')+" 23:59:59"
    }
      dateBegin: formatDate(new Date(state.queryDete), 'YYYY-mm-dd') + ' 00:00:00',
      dateEnd: formatDate(new Date(state.queryDete), 'YYYY-mm-dd') + ' 23:59:59',
   };
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
   });
   getRecordsInToday2(pp)
      .then((re) => {
         console.log(re.data);
         state.filterTableData = re.data;
    })
    getRecordsInToday2(pp).then(re=>{
        console.log(re.data)
        state.filterTableData = re.data
    }).finally(() => {
         loading.close()
     })
      .finally(() => {
         loading.close();
      });
    
    // var ps = {
    //     page: 0,
@@ -302,49 +342,46 @@
    // }).finally(() => {
    //     loading.close()
    // })
}
};
/**设置高度 */
const setTableHeight = () => {
    let height = document.documentElement.clientHeight;
    console.log('窗口高度')
   console.log('窗口高度');
    const navDom = document.querySelector('.layout-navbars-breadcrumb-index');
    if (navDom) {
        height -= navDom.scrollHeight;
    }
    state.tableHeight.detailRight = height
   state.tableHeight.detailRight = height;
    state.tableHeight.left = height - 77;
    // const demoFormDom = document.querySelector('.card_box_search')

};
/** 切换明细tabs*/
const handleClick = (tab: TabsPaneContext, event: Event) => {
    state.activeName = tab.paneName as string
    getTabsData()
}
   state.activeName = tab.paneName as string;
   getTabsData();
};
/** 获取明细项数据 */
const getTabsData = () => {
    if (patientsInfo.value.id) {
        if (state.activeName === '用药记录') {
            MedicationRecordsRef.value.getData()
         MedicationRecordsRef.value.getData();
        } else if (state.activeName === '患者档案') {
            patientFileRef.value.getData()
         patientFileRef.value.getData();
        } else if(state.activeName === '膳食调查'){
            dietarySurveyRef.value.getData()
         dietarySurveyRef.value.getData();
        }else if(state.activeName === '食物过敏原及胃肠功能调查'){
            shiwuguomingRef.value.getData()
        }
        else if(state.activeName === '营养筛查评估'){
            pinggubiaoRef.value.getData()
           
         shiwuguomingRef.value.getData();
      } else if (state.activeName === '营养筛查评估') {
         pinggubiaoRef.value.getData();
        }else if(state.activeName==='营养饮食指导方案'){
            fangAnRef.value.getData()
         fangAnRef.value.getData();
        }else if(state.activeName==='随访记录'){
            suifangjiluRef.value.getData()
         suifangjiluRef.value.getData();
        }else if(state.activeName==='营养服务管理记录'){
            jilubiaoRef.value.getData()
         jilubiaoRef.value.getData();
        }
    }
}
};
</script>

<style lang="scss">
@@ -375,10 +412,9 @@

        .el-table__body tr.current-row>td.el-table__cell {
            background: rgb(197.7, 225.9, 255);
            color: #409EFF;
         color: #409eff;
        }
    }

}

.patTitle {