kyj-yanglao-web-new/src/views/operation-analysis/occupancy/empty-bed/index.vue

<template>
  <div v-loading="loading" class="oa-page" element-loading-text="正在查询空床明细…">
    <ContentWrap>
      <div class="page-header">
        <div class="header-title">
          <Icon icon="ep:house" class="title-icon" />
          <span>空床明细报表</span>
        </div>
      </div>

      <!-- 筛选区 -->
      <el-form :inline="true" class="filter-form" @submit.prevent>
        <el-form-item label="院区">
          <el-select
            v-model="queryCampusIds"
            multiple
            collapse-tags
            collapse-tags-tooltip
            clearable
            filterable
            placeholder="全部院区"
            class="campus-select"
          >
            <el-option
              v-for="item in campusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="楼栋">
          <el-select
            v-model="queryBuildIds"
            multiple
            collapse-tags
            collapse-tags-tooltip
            clearable
            filterable
            placeholder="全部楼栋"
            class="build-select"
          >
            <el-option
              v-for="item in buildOptions"
              :key="item.buildId"
              :label="item.label"
              :value="item.buildId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="床位状态">
          <el-select v-model="queryStatus" class="status-select">
            <el-option label="空床" :value="0" />
            <el-option label="在住" :value="1" />
            <el-option label="全部" :value="-1" />
          </el-select>
        </el-form-item>
        <el-form-item label="房号/床号">
          <el-input
            v-model="queryBedName"
            placeholder="房间号或床位号关键字"
            clearable
            class="keyword-input"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">查询</el-button>
          <el-button :icon="RefreshLeft" @click="handleReset">重置</el-button>
          <el-button type="success" :icon="Download" :loading="exporting" @click="handleExport">
            导出 Excel
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 汇总条（恒按空床口径，来自 summary 接口，不受床位状态筛选影响） -->
      <div class="summary-grid">
        <div class="summary-card blue">
          <div class="s-label"><Icon icon="ep:moon" />空床总数</div>
          <div class="s-value">{{ summary.emptyBedCount }}<span class="s-unit">张</span></div>
        </div>
        <div class="summary-card cyan">
          <div class="s-label"><Icon icon="ep:office-building" />涉及空床房间</div>
          <div class="s-value">{{ summary.emptyRoomCount }}<span class="s-unit">间</span></div>
        </div>
        <div class="summary-card green">
          <div class="s-label"><Icon icon="ep:home-filled" />整间空房</div>
          <div class="s-value">{{ summary.fullEmptyRoomCount }}<span class="s-unit">间</span></div>
        </div>
        <div class="summary-card orange">
          <div class="s-label"><Icon icon="ep:files" />当前筛选结果</div>
          <div class="s-value">{{ total }}<span class="s-unit">条</span></div>
        </div>
      </div>
    </ContentWrap>

    <ContentWrap class="table-wrap">
      <div class="panel-title">
        床位明细
        <span class="title-tip">按 院区 / 楼栋 / 楼层 / 房间 排序，默认仅展示空床</span>
      </div>
      <el-table :data="rows" border stripe v-loading="loading">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="tenantName" label="机构" min-width="140" show-overflow-tooltip />
        <el-table-column prop="buildName" label="楼栋" min-width="130" show-overflow-tooltip />
        <el-table-column prop="floorName" label="楼层" min-width="90" />
        <el-table-column prop="roomName" label="房间号" min-width="100" />
        <el-table-column prop="bedName" label="床位号" min-width="90" />
        <el-table-column label="房间床位" width="90" align="center">
          <template #default="{ row }">{{ row.roomUsedCount }}/{{ row.roomBedCount }}</template>
        </el-table-column>
        <el-table-column label="状态" width="90" align="center">
          <template #default="{ row }">
            <el-tag :type="row.bedStatus === 0 ? 'warning' : 'success'" effect="light">
              {{ row.bedStatus === 0 ? '空床' : '在住' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[20, 50, 100, 200]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          background
          @current-change="loadPage"
          @size-change="handleSizeChange"
        />
      </div>
    </ContentWrap>
  </div>
</template>

<script lang="ts" setup>
import { Download, RefreshLeft, Search } from '@element-plus/icons-vue'
import { getBuildList } from '@/api/system/badManage'
import { exportWithCustomHeaders } from '@/utils/excel-export'
import { getCampusOptions } from '../../overview/campus-data'
import {
  fetchEmptyBedPage,
  fetchEmptyBedSummary,
  type EmptyBedPageRow,
  type EmptyBedSummary
} from '../occupancy-api'

defineOptions({ name: 'OaOccupancyEmptyBed' })

const message = useMessage()
const campusOptions = getCampusOptions()

const loading = ref(false)
const exporting = ref(false)
const queryCampusIds = ref<number[]>(campusOptions.map((item) => item.value))
const queryBuildIds = ref<number[]>([])
const queryStatus = ref<number>(0)
const queryBedName = ref('')

const rows = ref<EmptyBedPageRow[]>([])
const total = ref(0)
const summary = ref<EmptyBedSummary>({
  emptyBedCount: 0,
  emptyRoomCount: 0,
  fullEmptyRoomCount: 0
})
const buildOptions = ref<{ buildId: number; label: string }[]>([])
const pageNo = ref(1)
const pageSize = ref(20)

/** 当前筛选条件（院区为空 = 按登录人机构范围） */
const buildFilterParams = () => {
  const ids = queryCampusIds.value.length ? queryCampusIds.value : []
  return {
    tenantIds: ids.length ? ids : undefined,
    buildIds: queryBuildIds.value.length ? queryBuildIds.value : undefined,
    bedName: queryBedName.value.trim() || undefined
  }
}

/** 楼栋下拉：所选院区的全部楼栋（getBuildList 项主键为 id，与明细行 buildId 同源） */
const loadBuildOptions = async () => {
  const ids = queryCampusIds.value.length
    ? queryCampusIds.value
    : campusOptions.map((item) => item.value)
  const nameMap = new Map(campusOptions.map((item) => [item.value, item.label]))
  const groups = await Promise.all(
    ids.map(async (id) => {
      try {
        const list = await getBuildList({ tenantIds: id })
        return (list || []).map((b: any) => ({
          buildId: Number(b.id ?? b.buildId),
          label: `${nameMap.get(id) || id} / ${b.buildName}`
        }))
      } catch {
        return []
      }
    })
  )
  buildOptions.value = groups.flat().filter((item) => !Number.isNaN(item.buildId))
  queryBuildIds.value = queryBuildIds.value.filter((id) =>
    buildOptions.value.some((item) => item.buildId === id)
  )
}

/** 查询明细分页（服务端分页） */
const loadPage = async () => {
  loading.value = true
  try {
    const res = await fetchEmptyBedPage({
      pageNo: pageNo.value,
      pageSize: pageSize.value,
      ...buildFilterParams(),
      // 全部状态不传 status
      status: queryStatus.value === -1 ? '' : queryStatus.value
    })
    rows.value = res.list
    total.value = res.total
  } finally {
    loading.value = false
  }
}

/** 汇总恒以“空床”口径统计，不随床位状态筛选变化 */
const loadSummary = async () => {
  try {
    summary.value = await fetchEmptyBedSummary(buildFilterParams())
  } catch {
    // 汇总失败不阻断明细浏览
  }
}

const handleQuery = () => {
  pageNo.value = 1
  loadPage()
  loadSummary()
}

const handleSizeChange = () => {
  pageNo.value = 1
  loadPage()
}

const handleReset = () => {
  queryCampusIds.value = campusOptions.map((item) => item.value)
  queryBuildIds.value = []
  queryStatus.value = 0
  queryBedName.value = ''
  loadBuildOptions()
  handleQuery()
}

/** 导出：按当前筛选（含状态）拉全量后前端生成 Excel */
const handleExport = async () => {
  exporting.value = true
  try {
    const all: EmptyBedPageRow[] = []
    const pageSizeForExport = 200
    let page = 1
    // 服务端单页上限 200，循环拉取全部筛选结果
    for (;;) {
      const res = await fetchEmptyBedPage({
        pageNo: page,
        pageSize: pageSizeForExport,
        ...buildFilterParams(),
        status: queryStatus.value === -1 ? '' : queryStatus.value
      })
      all.push(...res.list)
      if (all.length >= res.total || res.list.length === 0) break
      page += 1
      if (page > 100) break
    }
    if (!all.length) {
      message.warning('当前筛选条件下暂无数据可导出')
      return
    }
    exportWithCustomHeaders(
      all.map((row) => ({
        tenantName: row.tenantName,
        buildName: row.buildName,
        floorName: row.floorName,
        roomName: row.roomName,
        bedName: row.bedName,
        roomBedText: `${row.roomUsedCount}/${row.roomBedCount}`,
        statusText: row.bedStatus === 0 ? '空床' : '在住'
      })),
      [
        { key: 'tenantName', title: '机构', width: 18 },
        { key: 'buildName', title: '楼栋', width: 16 },
        { key: 'floorName', title: '楼层', width: 10 },
        { key: 'roomName', title: '房间号', width: 12 },
        { key: 'bedName', title: '床位号', width: 10 },
        { key: 'roomBedText', title: '房间床位(在住/总数)', width: 16 },
        { key: 'statusText', title: '状态', width: 8 }
      ],
      `空床明细_${new Date().toISOString().slice(0, 10)}.xlsx`,
      '空床明细'
    )
    message.success('导出成功')
  } finally {
    exporting.value = false
  }
}

watch(queryCampusIds, () => loadBuildOptions())

onMounted(async () => {
  await loadBuildOptions()
  handleQuery()
})
</script>

<style lang="scss" scoped>
.oa-page {
  .page-header {
    margin-bottom: 14px;

    .header-title {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 600;
      color: #303133;

      .title-icon {
        margin-right: 8px;
        font-size: 22px;
        color: #409eff;
      }
    }
  }

  .filter-form {
    margin-top: 4px;

    .campus-select {
      width: 280px;
      max-width: 52vw;
    }
    .build-select {
      width: 240px;
      max-width: 48vw;
    }
    .status-select {
      width: 100px;
    }
    .keyword-input {
      width: 200px;
    }
  }

  .api-tip {
    margin: 4px 0 14px;
  }

  .summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;

    @media (max-width: 992px) {
      grid-template-columns: repeat(2, 1fr);
    }

    .summary-card {
      padding: 14px 18px;
      border-radius: 8px;
      color: #fff;

      .s-label {
        display: flex;
        align-items: center;
        font-size: 13px;
        opacity: 0.95;

        .el-icon {
          margin-right: 6px;
          font-size: 16px;
        }
      }

      .s-value {
        margin-top: 8px;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.1;

        .s-unit {
          margin-left: 4px;
          font-size: 13px;
          font-weight: 400;
          opacity: 0.85;
        }
      }

      &.blue {
        background: linear-gradient(135deg, #5b9bff 0%, #2f7cf6 100%);
      }
      &.cyan {
        background: linear-gradient(135deg, #4fd0e0 0%, #1fa9bf 100%);
      }
      &.green {
        background: linear-gradient(135deg, #62d391 0%, #36a866 100%);
      }
      &.orange {
        background: linear-gradient(135deg, #ffb066 0%, #f5851d 100%);
      }
    }
  }

  .table-wrap {
    margin-top: 12px;
  }

  .pager {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
  }

  .panel-title {
    position: relative;
    padding-left: 10px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #303133;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      width: 4px;
      height: 16px;
      background: #409eff;
      border-radius: 2px;
    }

    .title-tip {
      margin-left: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #a8abb2;
    }
  }
}
</style>