TradeMate Dev
87 lines
3.6 KiB
Vue
87 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<el-tabs v-model="tab">
|
|
<el-tab-pane label="开票申请" name="apply">
|
|
<el-card shadow="never">
|
|
<el-form :model="form" label-width="100" size="large">
|
|
<el-form-item label="发票类型">
|
|
<el-radio-group v-model="form.type">
|
|
<el-radio value="individual">个人发票</el-radio>
|
|
<el-radio value="enterprise">企业发票</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="抬头"><el-input v-model="form.title" /></el-form-item>
|
|
<el-form-item label="税号" v-if="form.type === 'enterprise'"><el-input v-model="form.tax_id" /></el-form-item>
|
|
<el-form-item label="金额"><el-input-number v-model="form.amount" :min="1" style="width:200px" /></el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" :loading="loading" @click="apply">提交申请</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="开票记录" name="history">
|
|
<el-card shadow="never">
|
|
<el-table :data="list" v-loading="loadingList" stripe style="width:100%">
|
|
<el-table-column label="类型" width="100">
|
|
<template #default="{ row }">{{ row.type === 'individual' ? '个人' : '企业' }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="title" label="抬头" min-width="140" />
|
|
<el-table-column label="金额" width="120">
|
|
<template #default="{ row }">{{ row.amount }} 元</template>
|
|
</el-table-column>
|
|
<el-table-column label="状态" width="100">
|
|
<template #default="{ row }">
|
|
<el-tag :type="statusType(row.status)" size="small">{{ statusLabel(row.status) }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="created_at" label="申请时间" width="170" />
|
|
<el-table-column v-if="rejectedReason" label="驳回原因" min-width="140">
|
|
<template #default="{ row }">{{ row.reason || '-' }}</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-empty v-if="!loadingList && !list.length" description="暂无开票记录" />
|
|
</el-card>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { applyInvoice, listInvoices } from '@/api'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const tab = ref('apply')
|
|
const loading = ref(false)
|
|
const loadingList = ref(false)
|
|
const list = ref([])
|
|
const form = ref({ type: 'individual', title: '', tax_id: '', amount: 0 })
|
|
|
|
function statusType(s) { return { pending: 'warning', issued: 'success', rejected: 'danger' }[s] || 'info' }
|
|
function statusLabel(s) { return { pending: '处理中', issued: '已开票', rejected: '已驳回' }[s] || s }
|
|
|
|
onMounted(loadList)
|
|
|
|
async function apply() {
|
|
if (!form.value.title || !form.value.amount) { ElMessage.warning('请填写完整'); return }
|
|
loading.value = true
|
|
try {
|
|
await applyInvoice(form.value)
|
|
ElMessage.success('申请已提交')
|
|
form.value = { type: 'individual', title: '', tax_id: '', amount: 0 }
|
|
loadList()
|
|
} catch (e) { ElMessage.error(e?.detail || '提交失败') }
|
|
finally { loading.value = false }
|
|
}
|
|
|
|
async function loadList() {
|
|
loadingList.value = true
|
|
try {
|
|
const res = await listInvoices({ page: 1, size: 50 })
|
|
const d = res.data || res
|
|
list.value = d.items || d.rows || d.data || d || []
|
|
} catch { /* ignore */ }
|
|
finally { loadingList.value = false }
|
|
}
|
|
</script>
|