X-Financial/web/src/views/RequestsView.vue

<template>
  <section class="travel-page">
    <EnterpriseListPage
      v-model:active-tab="activeTab"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      class="travel-list"
      :tabs="tabs"
      tabs-label="个人报销状态"
      :loading="loading"
      :error="error"
      :empty="showEmpty"
      :empty-state="emptyState"
      :total="totalCount"
      :total-pages="totalPages"
      :page-size-options="pageSizeOptions"
      :show-pagination="showTable"
      loading-title="真实报销数据同步中"
      loading-message="正在加载后端返回的个人报销单据"
      loading-icon="mdi mdi-file-document-outline"
      error-title="报销列表加载失败"
      @retry="emit('reload')"
      @empty-action="handleEmptyAction"
      @page-size-change="changePageSize"
    >
      <template #filters>
        <div class="list-search">
          <i class="mdi mdi-magnify"></i>
          <input v-model="listKeyword" type="search" placeholder="搜索单号、事由、报销类型..." />
        </div>

        <div class="date-range-filter" :class="{ open: datePopover }">
          <button class="filter-btn date-range-trigger" type="button" @click="datePopover = !datePopover">
            <span class="date-range-label">{{ dateRangeLabel }}</span>
            <i class="mdi mdi-calendar"></i>
          </button>
          <div v-if="datePopover" class="date-range-popover" role="dialog" aria-label="选择时间段">
            <header>
              <strong>选择时间段</strong>
              <button type="button" aria-label="关闭" @click="datePopover = false"><i class="mdi mdi-close"></i></button>
            </header>
            <div class="date-range-fields">
              <label>
                <span>开始日期</span>
                <input v-model="rangeStart" type="date" />
              </label>
              <label>
                <span>结束日期</span>
                <input v-model="rangeEnd" type="date" />
              </label>
            </div>
            <footer>
              <button class="ghost-btn" type="button" @click="datePopover = false">取消</button>
              <button class="apply-btn" type="button" :disabled="!rangeStart || !rangeEnd" @click="applyDateRange">应用</button>
            </footer>
          </div>
        </div>

        <button v-for="filter in filters" :key="filter" type="button" class="filter-btn">
          <span>{{ filter }}</span>
          <i class="mdi mdi-chevron-down"></i>
        </button>
      </template>

      <template #actions>
        <button class="create-request-btn" type="button" @click="emit('create-request')">
          <i class="mdi mdi-plus-circle-outline"></i>
          <span>发起报销</span>
        </button>
      </template>

      <template #hint>
        <i class="mdi mdi-information-outline"></i>
        点击任意行可查看单据详情
      </template>

      <template #table>
        <table>
          <colgroup>
            <col class="col-id">
            <col class="col-type">
            <col class="col-title">
            <col class="col-occurred">
            <col class="col-apply">
            <col class="col-amount">
            <col class="col-node">
            <col class="col-approval">
          </colgroup>
          <thead>
            <tr>
              <th>单号</th>
              <th>报销类型</th>
              <th>报销事由</th>
              <th>发生时间</th>
              <th>申请时间</th>
              <th>金额</th>
              <th>当前节点</th>
              <th>审批状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in visibleRows" :key="row.id" @click="emit('ask', row)">
              <td><strong class="doc-id">{{ row.documentNo || row.id }}</strong></td>
              <td><span class="type-tag" :class="row.typeTone">{{ row.typeLabel }}</span></td>
              <td>{{ row.reason }}</td>
              <td>{{ row.occurredDisplay }}</td>
              <td>{{ row.applyTime }}</td>
              <td>{{ row.amountDisplay }}</td>
              <td>{{ row.node }}</td>
              <td><span class="status-tag" :class="row.approvalTone">{{ row.approval }}</span></td>
            </tr>
          </tbody>
        </table>
      </template>
    </EnterpriseListPage>
  </section>
</template>

<script src="./scripts/RequestsView.js"></script>

<style scoped src="../assets/styles/views/requests-view.css"></style>