122 lines
4.4 KiB
Vue
122 lines
4.4 KiB
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>
|