327 lines
11 KiB
Plaintext
327 lines
11 KiB
Plaintext
<template>
|
|
<view class="finance-invoice">
|
|
<!-- 头部筛选区 -->
|
|
<view class="filter-card border-shadow">
|
|
<view class="filter-row">
|
|
<view class="filter-item">
|
|
<text class="filter-label">创建时间:</text>
|
|
<view class="date-picker-wrap">
|
|
<text class="calendar-icon">📅</text>
|
|
<text class="date-placeholder">最近30天</text>
|
|
</view>
|
|
</view>
|
|
<view class="filter-item search-wrap">
|
|
<text class="filter-label">搜索:</text>
|
|
<input class="search-input" v-model="searchKeyword" placeholder="订单号/抬头/用户名" @confirm="handleQuery" />
|
|
</view>
|
|
<view class="btn-query" @click="handleQuery">
|
|
<text class="btn-txt">查询</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 状态切换选项卡 -->
|
|
<view class="tab-section">
|
|
<view
|
|
v-for="(tab, index) in tabs"
|
|
:key="index"
|
|
class="tab-item"
|
|
:class="{ active: activeTab === index }"
|
|
@click="handleTabChange(index)"
|
|
>
|
|
<text class="tab-title">{{ tab.name }}</text>
|
|
<view class="active-line" v-if="activeTab === index"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数据表格 -->
|
|
<view class="table-container border-shadow">
|
|
<view class="table-header">
|
|
<view class="th col-order"><text class="th-txt">订单号</text></view>
|
|
<view class="th col-amount"><text class="th-txt">订单金额</text></view>
|
|
<view class="th col-type"><text class="th-txt">发票类型</text></view>
|
|
<view class="th col-header"><text class="th-txt">抬头信息</text></view>
|
|
<view class="th col-time"><text class="th-txt">申请时间</text></view>
|
|
<view class="th col-status-inv"><text class="th-txt">开票状态</text></view>
|
|
<view class="th col-ops"><text class="th-txt">操作</text></view>
|
|
</view>
|
|
|
|
<view class="table-body">
|
|
<view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
|
|
<text>加载中...</text>
|
|
</view>
|
|
<view v-else-if="tableData.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
|
|
<text>暂无发票申请</text>
|
|
</view>
|
|
<view v-else class="table-row" v-for="(item, index) in tableData" :key="item.id">
|
|
<view class="td col-order text-left"><text class="td-txt">{{ item.order_no }}</text></view>
|
|
<view class="td col-amount"><text class="td-txt">¥ {{ item.order_amount.toFixed(2) }}</text></view>
|
|
<view class="td col-type"><text class="td-txt">{{ item.invoice_type == 1 ? '普通发票' : '专用发票' }}</text></view>
|
|
<view class="td col-header">
|
|
<view class="header-box">
|
|
<text class="td-txt">{{ item.header_name }}</text>
|
|
<text class="sub-txt" v-if="item.tax_id">税号: {{ item.tax_id }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="td col-time"><text class="td-txt">{{ item.created_at.substring(0, 16).replace('T', ' ') }}</text></view>
|
|
<view class="td col-status-inv">
|
|
<text class="status-tag" :class="getStatusClass(item.status)">
|
|
{{ getStatusText(item.status) }}
|
|
</text>
|
|
</view>
|
|
<view class="td col-ops">
|
|
<view class="ops-box" v-if="item.status === 0">
|
|
<text class="op-link" @click="handleProcess(item.id, 1)">开票</text>
|
|
<text class="sep">|</text>
|
|
<text class="op-link red-txt" @click="handleProcess(item.id, -1)">驳回</text>
|
|
</view>
|
|
<text v-else class="td-txt">-</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分页区域 -->
|
|
<view class="pagination-footer">
|
|
<view class="page-total">
|
|
<text class="total-txt">共 {{ total }} 条</text>
|
|
</view>
|
|
<view class="page-btns">
|
|
<view class="p-btn" :class="{ disabled: page <= 1 }" @click="prevPage">
|
|
<text><</text>
|
|
</view>
|
|
<view class="p-btn active">
|
|
<text>{{ page }}</text>
|
|
</view>
|
|
<view class="p-btn" :class="{ disabled: page >= totalPages }" @click="nextPage">
|
|
<text>></text>
|
|
</view>
|
|
</view>
|
|
<view class="page-jump">
|
|
<text class="jump-txt">前往</text>
|
|
<input class="jump-input" v-model="jumpPage" type="number" @confirm="goToJumpPage" />
|
|
<text class="jump-txt">页</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { fetchInvoiceList, processInvoice } from '@/services/admin/financeService.uts'
|
|
|
|
const activeTab = ref(0)
|
|
const searchKeyword = ref('')
|
|
const page = ref(1)
|
|
const pageSize = ref(15)
|
|
const total = ref(0)
|
|
const loading = ref(false)
|
|
const jumpPage = ref('')
|
|
|
|
const tabs = [
|
|
{ name: '全部发票', value: null as number | null },
|
|
{ name: '待开发票', value: 0 as number | null },
|
|
{ name: '已开发票', value: 1 as number | null },
|
|
{ name: '已拒绝', value: -1 as number | null }
|
|
]
|
|
|
|
const tableData = ref<any[]>([])
|
|
|
|
const totalPages = computed(() : number => {
|
|
if (pageSize.value <= 0) return 1
|
|
return Math.ceil(total.value / pageSize.value)
|
|
})
|
|
|
|
async function loadInvoices() {
|
|
loading.value = true
|
|
try {
|
|
const status = tabs[activeTab.value].value
|
|
const res = await fetchInvoiceList(
|
|
page.value,
|
|
pageSize.value,
|
|
status,
|
|
null,
|
|
null,
|
|
searchKeyword.value || null
|
|
)
|
|
tableData.value = res.items
|
|
total.value = res.total
|
|
} catch (e) {
|
|
uni.showToast({ title: '加载发票列表失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadInvoices()
|
|
})
|
|
|
|
function handleTabChange(index : number) {
|
|
activeTab.value = index
|
|
page.value = 1
|
|
loadInvoices()
|
|
}
|
|
|
|
function handleQuery() {
|
|
page.value = 1
|
|
loadInvoices()
|
|
}
|
|
|
|
function prevPage() {
|
|
if (page.value > 1) {
|
|
page.value--
|
|
loadInvoices()
|
|
}
|
|
}
|
|
|
|
function nextPage() {
|
|
if (page.value < totalPages.value) {
|
|
page.value++
|
|
loadInvoices()
|
|
}
|
|
}
|
|
|
|
function goToJumpPage() {
|
|
const targetPage = parseInt(jumpPage.value)
|
|
if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages.value) {
|
|
page.value = targetPage
|
|
loadInvoices()
|
|
jumpPage.value = ''
|
|
} else {
|
|
uni.showToast({ title: '页码无效', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
async function handleProcess(id : string, status : number) {
|
|
const action = status === 1 ? '确认已完成开票' : '确认驳回该申请'
|
|
uni.showModal({
|
|
title: '开票处理',
|
|
content: action,
|
|
editable: status === -1,
|
|
placeholderText: '请输入驳回原因',
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
const ok = await processInvoice(id, status, null, res.content || null)
|
|
if (ok) {
|
|
uni.showToast({ title: '处理成功' })
|
|
loadInvoices()
|
|
} else {
|
|
uni.showToast({ title: '处理失败', icon: 'none' })
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function getStatusText(status : number) : string {
|
|
if (status === 0) return '待开票'
|
|
if (status === 1) return '已开票'
|
|
if (status === -1) return '已拒绝'
|
|
return '未知'
|
|
}
|
|
|
|
function getStatusClass(status : number) : string {
|
|
if (status === 0) return 'status-pending'
|
|
if (status === 1) return 'status-success'
|
|
if (status === -1) return 'status-error'
|
|
return ''
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.finance-invoice {
|
|
padding: 20px;
|
|
background-color: #f5f7fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.border-shadow {
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.filter-card { padding: 20px 24px; margin-bottom: 20px; }
|
|
.filter-row { display: flex; flex-direction: row; align-items: center; }
|
|
.filter-item { display: flex; flex-direction: row; align-items: center; margin-right: 30px; }
|
|
.filter-label { font-size: 14px; color: #333; margin-right: 8px; }
|
|
|
|
.search-wrap { flex: 1; }
|
|
.search-input { flex: 1; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 12px; font-size: 13px; }
|
|
|
|
.btn-query {
|
|
background-color: #1890ff;
|
|
border-radius: 4px;
|
|
padding: 0 20px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.btn-txt { color: #fff; font-size: 14px; }
|
|
|
|
/* 选项卡 */
|
|
.tab-section { display: flex; flex-direction: row; margin-bottom: 20px; border-bottom: 1px solid #e4e7ed; padding: 0 10px; }
|
|
.tab-item { padding: 12px 20px; position: relative; cursor: pointer; }
|
|
.tab-title { font-size: 14px; color: #606266; transition: all 0.3s; }
|
|
.tab-item.active .tab-title { color: #1890ff; font-weight: 600; }
|
|
.active-line { position: absolute; bottom: 0; left: 20px; right: 20px; height: 2px; background-color: #1890ff; }
|
|
|
|
/* 表格 */
|
|
.table-container { display: flex; flex-direction: column; }
|
|
.table-header { background-color: #f8f9fb; display: flex; flex-direction: row; border-bottom: 1px solid #ebeef5; }
|
|
.th { padding: 15px 10px; display: flex; align-items: center; justify-content: center; }
|
|
.th-txt { font-size: 14px; font-weight: 600; color: #909399; }
|
|
|
|
.table-row { display: flex; flex-direction: row; border-bottom: 1px solid #ebeef5; }
|
|
.td { padding: 15px 10px; display: flex; align-items: center; justify-content: center; }
|
|
.td-txt { font-size: 13px; color: #606266; }
|
|
|
|
.header-box { display: flex; flex-direction: column; align-items: flex-start; .sub-txt { font-size: 11px; color: #999; margin-top: 2px; } }
|
|
|
|
.status-tag { font-size: 12px; padding: 2px 8px; border-radius: 2px; }
|
|
.status-pending { color: #fa8c16; background: #fff7e6; border: 1px solid #ffd591; }
|
|
.status-success { color: #52c41a; background: #f6ffed; border: 1px solid #b7eb8f; }
|
|
.status-error { color: #f5222d; background: #fff1f0; border: 1px solid #ffa39e; }
|
|
|
|
/* 列宽分配 */
|
|
.col-order { width: 200px; justify-content: flex-start; padding-left: 20px; }
|
|
.col-amount { width: 100px; }
|
|
.col-type { width: 120px; }
|
|
.col-header { flex: 1; min-width: 180px; justify-content: flex-start; }
|
|
.col-time { width: 160px; }
|
|
.col-status-inv { width: 100px; }
|
|
.col-ops { width: 140px; }
|
|
|
|
.text-left { justify-content: flex-start; }
|
|
.ops-box { display: flex; flex-direction: row; align-items: center; }
|
|
.op-link { font-size: 13px; color: #1890ff; cursor: pointer; }
|
|
.red-txt { color: #f5222d; }
|
|
.sep { font-size: 12px; color: #ebeef5; margin: 0 8px; }
|
|
|
|
/* 分页 */
|
|
.pagination-footer {
|
|
padding: 24px 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
}
|
|
.total-txt { font-size: 14px; color: #606266; }
|
|
.page-btns { display: flex; flex-direction: row; gap: 8px; }
|
|
.p-btn {
|
|
width: 32px; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px;
|
|
display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer;
|
|
}
|
|
.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
|
|
.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; cursor: not-allowed; }
|
|
|
|
.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
|
|
.jump-txt { font-size: 14px; color: #606266; }
|
|
.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
|
|
</style>
|