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

<template>
  <section class="travel-page">
    <article class="travel-list panel">
      <nav class="status-tabs" aria-label="差旅报销状态">
        <button
          v-for="tab in tabs"
          :key="tab"
          type="button"
          :class="{ active: activeTab === tab }"
          @click="activeTab = tab"
        >
          {{ tab }}
        </button>
      </nav>

      <div class="list-toolbar">
        <div class="filter-set">
          <div class="list-search">
            <i class="mdi mdi-magnify"></i>
            <input 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>
        </div>
        <button class="create-request-btn" type="button" @click="emit('create-request')">
          <i class="mdi mdi-plus-circle-outline"></i>
          <span>发起报销</span>
        </button>
      </div>

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

      <div class="table-wrap">
        <table>
          <colgroup>
            <col class="col-id">
            <col class="col-reason">
            <col class="col-city">
            <col class="col-period">
            <col class="col-apply">
            <col class="col-amount">
            <col class="col-node">
            <col class="col-approval">
            <col class="col-travel">
          </colgroup>
          <thead>
            <tr>
              <th>单号</th>
              <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.id }}</strong></td>
              <td>{{ row.reason }}</td>
              <td>{{ row.city }}</td>
              <td>{{ row.period }}</td>
              <td>{{ row.applyTime }}</td>
              <td>{{ row.amount }}</td>
              <td>{{ row.node }}</td>
              <td><span class="status-tag" :class="row.approvalTone">{{ row.approval }}</span></td>
              <td><span class="status-tag" :class="row.travelTone">{{ row.travel }}</span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <footer class="list-foot">
        <span class="page-summary">共 {{ totalCount }} 条，目前第 {{ currentPage }} 页</span>
        <div class="pager" aria-label="分页">
          <button class="page-nav" type="button" :disabled="currentPage === 1" aria-label="上一页" @click="currentPage--"><i class="mdi mdi-chevron-left"></i></button>
          <button v-for="p in totalPages" :key="p" class="page-number" :class="{ active: currentPage === p }" type="button" :aria-current="currentPage === p ? 'page' : undefined" @click="currentPage = p">{{ p }}</button>
          <button class="page-nav" type="button" :disabled="currentPage === totalPages" aria-label="下一页" @click="currentPage++"><i class="mdi mdi-chevron-right"></i></button>
        </div>
        <div class="page-size-wrap">
          <button class="page-size" type="button" @click="pageSizeOpen = !pageSizeOpen">
            {{ pageSize }} 条/页 <i class="mdi mdi-chevron-down"></i>
          </button>
          <div v-if="pageSizeOpen" class="page-size-dropdown" role="listbox">
            <button v-for="size in pageSizes" :key="size" type="button" role="option" :aria-selected="pageSize === size" :class="{ active: pageSize === size }" @click="changePageSize(size)">{{ size }} 条/页</button>
          </div>
        </div>
      </footer>
    </article>
  </section>
</template>

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

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