web_dist/src/views/reports/InfectiousDisease.vue

<template>
  <div class="layout_container">
    <header>
      <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
          style="width: 220px"
      ></el-date-picker>
      <el-select style="width: 160px" v-model="dept" filterable remote placeholder="科室" remote-show-suffix clearable
                 :loading="loadingDept"
                 :remote-method="selectDeptMultiple">
        <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-select style="width: 160px" v-model="doctor" filterable remote placeholder="医生" remote-show-suffix clearable
                 :loading="loadingDoctor" :remote-method="selectDoctorMultiple">
        <el-option v-for="item in doctorOptions" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-input v-model="admNo" style="width: 180px;" placeholder="请输入住院/门诊号" clearable></el-input>
      <el-button type="primary" icon="Search" @click="query" style="margin-left: 5px">查询</el-button>
      <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>
    </header>
    <div class="layout_main">
      <xc-table :data="returnData" localPaging>
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <template v-for="col in returnData.tableDisplays">
          <el-table-column v-if="col.prop.endsWith('-t')" :prop="col.prop" :label="col.label" :width="col.width"
                           :align="col.align" show-overflow-tooltip>
            <template v-for="cell in returnData.chirdData">
              <el-table-column v-if="cell.pid === col.id" :prop="cell.prop" :label="cell.label"
                               :width="cell.width" :align="cell.align" show-overflow-tooltip>
              </el-table-column>
            </template>
          </el-table-column>
          <el-table-column v-else :prop="col.prop" :label="col.label" :width="col.width" :align="col.align"
                           show-overflow-tooltip>
          </el-table-column>
        </template>
      </xc-table>
    </div>
  </div>

</template>
<script setup name="InfectiousDisease">
import {reactive, ref} from 'vue'
import {shortcuts, clockinShortcuts} from '@/data/shortcuts'
import {formatDate, getDateRangeFormatDate} from '@/utils/date'
import {ElMessage} from 'element-plus'
import {selectReportPortalMenu, exportReportPortalData} from '@/api/reports/high-report'
import {selectAllDept, selectAllDoctor} from '@/api/medical-insurance/si-yb-util'
import XcTable from '@/components/xiao-chan/xc-table/XcTable.vue'

const start = formatDate(clockinShortcuts[1].value[0]);
const end = formatDate(clockinShortcuts[1].value[1]);
const dateRange = ref([]);
const queryTerm = reactive({
  startTime: "",
  endTime: "",
  dept: "",
  doctor: "",
  zyh: "",
  reportId: "zy_crbtj",
  menuId: "201",
  type: "1",
});

const dept = ref('')
const doctor = ref('')
const admNo = ref('')

onMounted(() => {
  queryTerm.startTime = start + '00:00:00';
  queryTerm.endTime = end + " 23:59:59";
  dateRange.value = [start, end];
});

const deptOptions = ref([])
const doctorOptions = ref([])
const loadingDept = ref(false)
const loadingDoctor = ref(false)
const selectDeptMultiple = (ks) => {
  if (ks) {
    loadingDept.value = true
    const param = {
      str: ks,
    }
    selectAllDept(param).then((res) => {
      loadingDept.value = false
      deptOptions.value = res
    })
  } else {
    deptOptions.value = []
  }
}

const selectDoctorMultiple = (ys) => {
  if (ys) {
    loadingDoctor.value = true
    let d = dept.value
    const paramF = {
      str: ys,
      dept: d,
    }
    selectAllDoctor(paramF).then((res) => {
      loadingDoctor.value = false
      doctorOptions.value = res
    })
  } else {
    doctorOptions.value = []
  }
}

const returnData = ref({
  currentPage: 1,
  pageSize: 30,
  total: 0,
  data: []
});

const query = async () => {
  if (dateRange.value) {
    let dateS = getDateRangeFormatDate(dateRange.value);
    queryTerm.startTime = dateS.startTime;
    queryTerm.endTime = dateS.endTime;
  } else {
    queryTerm.startTime = start;
    queryTerm.endTime = end;
    ElMessage({
      type: "info",
      message: "默认查询本月的数据",
      duration: 2500,
      showClose: true,
    });
  }
  if(dept.value){
    queryTerm.dept = dept.value;
  } else {
    queryTerm.dept = ''
  }
  if(doctor.value){
    queryTerm.doctor = doctor.value;
  } else {
    queryTerm.doctor = ''
  }
  queryTerm.zyh = admNo.value
  await selectReportPortalMenu(queryTerm)
      .then((res) => {
        let id
        returnData.value.tableDisplays = []
        returnData.value.chirdData = []
        res.tableDisplays.forEach(item => {
          if (item.prop.endsWith('-t')) {
            id = item.id
            returnData.value.tableDisplays.push(item)
          } else {
            if (item.pid === id) {
              returnData.value.chirdData.push(item)
            } else {
              returnData.value.tableDisplays.push(item)
            }
          }
        })
        returnData.value.data = res.dataList
        returnData.value.total = returnData.value.data.length
      });
};
const exportData = () => {
  if (returnData.value.data.length <= 0) {
    ElMessage({
      message: '没有可以导出的数据！',
      type: 'warning',
      duration: 2500,
      showClose: true,
    })
  }
  if(dept.value){
    queryTerm.dept = dept.value;
  }
  if(doctor.value){
    queryTerm.doctor = doctor.value;
  }
  // 导出excel表格标题
  queryTerm.exportName = '传染病统计';
  exportReportPortalData(queryTerm)
}

</script>