412 lines
15 KiB
Vue
412 lines
15 KiB
Vue
<script setup lang="ts">
|
||
import { CircleClose, Plus, Search, UploadFilled, View } from '@element-plus/icons-vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { computed, onMounted, reactive, ref } from 'vue'
|
||
|
||
import {
|
||
createOperatingExpense,
|
||
fetchOperatingExpenses,
|
||
voidOperatingExpense,
|
||
type OperatingExpense,
|
||
type OperatingExpenseListSummary,
|
||
} from '@/features/admin/api/adminFinance'
|
||
import AuthImage from '@/shared/components/business/AuthImage.vue'
|
||
import { uploadAdminFile } from '@/shared/api/files'
|
||
import { useAdminSessionStore } from '@/stores/adminSession'
|
||
import { readError } from '@/shared/utils/error'
|
||
import { formatCentWithSymbol, yuanToCent } from '@/shared/utils/money'
|
||
import { formatDateTime, formatInputDate } from '@/shared/utils/time'
|
||
import AdminTablePagination from '../components/AdminTablePagination.vue'
|
||
|
||
const adminSession = useAdminSessionStore()
|
||
const loading = ref(false)
|
||
const createVisible = ref(false)
|
||
const createSaving = ref(false)
|
||
const voucherUploading = ref(false)
|
||
const actionID = ref(0)
|
||
const selectedExpense = ref<OperatingExpense | null>(null)
|
||
const items = ref<OperatingExpense[]>([])
|
||
const total = ref(0)
|
||
const currentPage = ref(1)
|
||
const currentPageSize = ref(20)
|
||
const summary = ref<OperatingExpenseListSummary>(emptySummary())
|
||
const canManage = computed(() => adminSession.hasPermission('finance:operating_expense'))
|
||
const filters = reactive({
|
||
date_type: 'created' as 'created' | 'occurred',
|
||
start_date: defaultStartDate(),
|
||
end_date: formatInputDate(new Date()),
|
||
status: '',
|
||
category: '',
|
||
keyword: '',
|
||
})
|
||
const createForm = reactive({
|
||
category: '',
|
||
payee_name: '',
|
||
amount_yuan: 0,
|
||
occurred_at: new Date(),
|
||
remark: '',
|
||
voucher_url: '',
|
||
})
|
||
|
||
onMounted(loadItems)
|
||
|
||
async function loadItems() {
|
||
loading.value = true
|
||
try {
|
||
const result = await fetchOperatingExpenses({
|
||
...filters,
|
||
page: currentPage.value,
|
||
page_size: currentPageSize.value,
|
||
})
|
||
items.value = result.items
|
||
total.value = result.total
|
||
summary.value = result.summary
|
||
} catch (error) {
|
||
items.value = []
|
||
total.value = 0
|
||
summary.value = emptySummary()
|
||
ElMessage.error(readError(error, '运营开支记录加载失败'))
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function search() {
|
||
currentPage.value = 1
|
||
void loadItems()
|
||
}
|
||
|
||
function resetFilters() {
|
||
filters.date_type = 'created'
|
||
filters.start_date = defaultStartDate()
|
||
filters.end_date = formatInputDate(new Date())
|
||
filters.status = ''
|
||
filters.category = ''
|
||
filters.keyword = ''
|
||
currentPage.value = 1
|
||
void loadItems()
|
||
}
|
||
|
||
function openCreate() {
|
||
createForm.category = ''
|
||
createForm.payee_name = ''
|
||
createForm.amount_yuan = 0
|
||
createForm.occurred_at = new Date()
|
||
createForm.remark = ''
|
||
createForm.voucher_url = ''
|
||
createVisible.value = true
|
||
}
|
||
|
||
async function uploadVoucher(options: { file: File }) {
|
||
if (!options.file.type.startsWith('image/')) {
|
||
ElMessage.warning('开支凭证仅支持图片')
|
||
return
|
||
}
|
||
voucherUploading.value = true
|
||
try {
|
||
const uploaded = await uploadAdminFile(options.file, 'operating-expense')
|
||
createForm.voucher_url = uploaded.url
|
||
ElMessage.success('凭证已上传')
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '凭证上传失败'))
|
||
} finally {
|
||
voucherUploading.value = false
|
||
}
|
||
}
|
||
|
||
async function submitExpense() {
|
||
const amountCent = yuanToCent(createForm.amount_yuan)
|
||
if (
|
||
!createForm.category.trim() ||
|
||
!createForm.payee_name.trim() ||
|
||
amountCent <= 0 ||
|
||
!createForm.occurred_at ||
|
||
!createForm.remark.trim()
|
||
) {
|
||
ElMessage.warning('请填写完整的开支信息')
|
||
return
|
||
}
|
||
createSaving.value = true
|
||
try {
|
||
await createOperatingExpense({
|
||
category: createForm.category.trim(),
|
||
payee_name: createForm.payee_name.trim(),
|
||
amount_cent: amountCent,
|
||
occurred_at: createForm.occurred_at.toISOString(),
|
||
remark: createForm.remark.trim(),
|
||
voucher_url: createForm.voucher_url || undefined,
|
||
})
|
||
createVisible.value = false
|
||
ElMessage.success('运营开支已记账')
|
||
await loadItems()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '运营开支记账失败'))
|
||
} finally {
|
||
createSaving.value = false
|
||
}
|
||
}
|
||
|
||
async function handleVoid(item: OperatingExpense) {
|
||
if (actionID.value) return
|
||
try {
|
||
const { value } = await ElMessageBox.prompt(
|
||
`确认作废开支单 ${item.expense_no}？作废后将从运营开支统计中排除。`,
|
||
'作废运营开支',
|
||
{
|
||
confirmButtonText: '确认作废',
|
||
cancelButtonText: '取消',
|
||
inputPlaceholder: '请输入作废原因',
|
||
inputValidator: value => !!value.trim() || '请输入作废原因',
|
||
type: 'warning',
|
||
}
|
||
)
|
||
actionID.value = item.id
|
||
await voidOperatingExpense(item.id, value.trim())
|
||
selectedExpense.value = null
|
||
ElMessage.success('运营开支已作废')
|
||
await loadItems()
|
||
} catch (error) {
|
||
if (error === 'cancel' || error === 'close') return
|
||
ElMessage.error(readError(error, '运营开支作废失败'))
|
||
} finally {
|
||
actionID.value = 0
|
||
}
|
||
}
|
||
|
||
function emptySummary(): OperatingExpenseListSummary {
|
||
return { record_count: 0, paid_amount_cent: 0, paid_count: 0 }
|
||
}
|
||
|
||
function defaultStartDate() {
|
||
const date = new Date()
|
||
date.setDate(date.getDate() - 29)
|
||
return formatInputDate(date)
|
||
}
|
||
|
||
function money(value: number) {
|
||
return formatCentWithSymbol(Number(value || 0))
|
||
}
|
||
|
||
function statusLabel(status: string) {
|
||
return status === 'paid' ? '已记账' : '已作废'
|
||
}
|
||
|
||
function statusType(status: string) {
|
||
return status === 'paid' ? 'success' : 'danger'
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="page operating-expenses-page">
|
||
<div class="page-header-row">
|
||
<div class="page-header">
|
||
<p class="eyebrow">Operating Expenses</p>
|
||
<h1>运营开支</h1>
|
||
<p>独立记录日常运营费用，并在财务仪表盘按发生日期汇总。</p>
|
||
</div>
|
||
<div class="toolbar-actions">
|
||
<el-button v-if="canManage" type="success" :icon="Plus" @click="openCreate">
|
||
新增运营开支
|
||
</el-button>
|
||
<el-button @click="resetFilters">重置</el-button>
|
||
<el-button type="primary" :icon="Search" :loading="loading" @click="search">查询</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metric-grid operating-metrics">
|
||
<div class="metric-card">
|
||
<span>筛选记录</span>
|
||
<strong>{{ summary.record_count }} 笔</strong>
|
||
<small>当前筛选条件</small>
|
||
</div>
|
||
<div class="metric-card operating-metric">
|
||
<span>有效运营开支</span>
|
||
<strong>{{ money(summary.paid_amount_cent) }}</strong>
|
||
<small>{{ summary.paid_count }} 笔已记账开支</small>
|
||
</div>
|
||
</div>
|
||
|
||
<el-form class="table-panel operating-filters" label-position="top">
|
||
<el-form-item label="日期类型">
|
||
<el-select v-model="filters.date_type" class="full-control">
|
||
<el-option label="录入日期" value="created" />
|
||
<el-option label="开支日期" value="occurred" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="开始日期">
|
||
<el-date-picker v-model="filters.start_date" class="full-control" type="date" value-format="YYYY-MM-DD" />
|
||
</el-form-item>
|
||
<el-form-item label="结束日期">
|
||
<el-date-picker v-model="filters.end_date" class="full-control" type="date" value-format="YYYY-MM-DD" />
|
||
</el-form-item>
|
||
<el-form-item label="状态">
|
||
<el-select v-model="filters.status" clearable placeholder="全部状态" class="full-control">
|
||
<el-option label="已记账" value="paid" />
|
||
<el-option label="已作废" value="voided" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="开支类别">
|
||
<el-input v-model="filters.category" clearable placeholder="按类别精确筛选" />
|
||
</el-form-item>
|
||
<el-form-item label="关键词">
|
||
<el-input v-model="filters.keyword" clearable placeholder="单号、收款方或用途" @keyup.enter="search" />
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-table v-loading="loading" class="table-panel" :data="items">
|
||
<el-table-column label="开支单号" min-width="190">
|
||
<template #default="{ row }">{{ row.expense_no }}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="category" label="开支类别" min-width="130" />
|
||
<el-table-column label="收款方" min-width="150">
|
||
<template #default="{ row }">
|
||
<strong>{{ row.payee_name }}</strong>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="开支金额" min-width="135" align="right">
|
||
<template #default="{ row }"><strong>{{ money(row.amount_cent) }}</strong></template>
|
||
</el-table-column>
|
||
<el-table-column label="开支时间" min-width="175">
|
||
<template #default="{ row }">{{ formatDateTime(row.occurred_at) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" width="105" align="center">
|
||
<template #default="{ row }"><el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag></template>
|
||
</el-table-column>
|
||
<el-table-column label="录入人" min-width="120">
|
||
<template #default="{ row }">{{ row.created_by_name || '-' }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="备注" min-width="180" show-overflow-tooltip>
|
||
<template #default="{ row }">{{ row.remark }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="145" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button link type="primary" :icon="View" @click="selectedExpense = row">详情</el-button>
|
||
<el-button
|
||
v-if="row.status === 'paid' && canManage"
|
||
link
|
||
type="danger"
|
||
:icon="CircleClose"
|
||
:loading="actionID === row.id"
|
||
@click="handleVoid(row)"
|
||
>
|
||
作废
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<AdminTablePagination
|
||
v-if="total > 0"
|
||
v-model:current-page="currentPage"
|
||
v-model:page-size="currentPageSize"
|
||
:total="total"
|
||
:loading="loading"
|
||
@page-change="loadItems"
|
||
/>
|
||
|
||
<el-dialog v-model="createVisible" title="新增运营开支" width="560px" :close-on-click-modal="false">
|
||
<el-form class="expense-form" label-position="top" @submit.prevent="submitExpense">
|
||
<el-form-item label="开支类别" required>
|
||
<el-input v-model="createForm.category" maxlength="50" placeholder="例如：推广投放、办公采购" />
|
||
</el-form-item>
|
||
<el-form-item label="收款方" required>
|
||
<el-input v-model="createForm.payee_name" maxlength="100" placeholder="姓名或单位名称" />
|
||
</el-form-item>
|
||
<el-form-item label="开支金额" required>
|
||
<el-input-number v-model="createForm.amount_yuan" class="full-control" :min="0.01" :precision="2" :step="100" controls-position="right" />
|
||
</el-form-item>
|
||
<el-form-item label="开支时间" required>
|
||
<el-date-picker v-model="createForm.occurred_at" class="full-control" type="datetime" placeholder="选择开支时间" />
|
||
</el-form-item>
|
||
<el-form-item class="expense-form-wide" label="开支用途" required>
|
||
<el-input v-model="createForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="填写开支用途" />
|
||
</el-form-item>
|
||
<el-form-item class="expense-form-wide" label="开支凭证（选填）">
|
||
<div v-if="createForm.voucher_url" class="voucher-preview">
|
||
<AuthImage :source="createForm.voucher_url" :admin="true" fit="cover" :preview-src-list="[createForm.voucher_url]" :image-style="{ width: '104px', height: '104px', borderRadius: '6px' }" />
|
||
<el-button class="voucher-remove" circle plain type="danger" :icon="CircleClose" title="移除凭证" @click="createForm.voucher_url = ''" />
|
||
</div>
|
||
<el-upload v-else :show-file-list="false" :http-request="uploadVoucher" accept="image/jpeg,image/png,image/webp">
|
||
<el-button :icon="UploadFilled" :loading="voucherUploading">上传凭证</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button :disabled="createSaving" @click="createVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="createSaving" :disabled="voucherUploading" @click="submitExpense">确认记账</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog :model-value="!!selectedExpense" title="运营开支详情" width="620px" @update:model-value="selectedExpense = null">
|
||
<el-descriptions v-if="selectedExpense" :column="2" border>
|
||
<el-descriptions-item label="开支单号">{{ selectedExpense.expense_no }}</el-descriptions-item>
|
||
<el-descriptions-item label="状态"><el-tag :type="statusType(selectedExpense.status)">{{ statusLabel(selectedExpense.status) }}</el-tag></el-descriptions-item>
|
||
<el-descriptions-item label="开支类别">{{ selectedExpense.category }}</el-descriptions-item>
|
||
<el-descriptions-item label="收款方">{{ selectedExpense.payee_name }}</el-descriptions-item>
|
||
<el-descriptions-item label="开支金额"><strong>{{ money(selectedExpense.amount_cent) }}</strong></el-descriptions-item>
|
||
<el-descriptions-item label="开支时间">{{ formatDateTime(selectedExpense.occurred_at) }}</el-descriptions-item>
|
||
<el-descriptions-item label="录入人">{{ selectedExpense.created_by_name || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="录入时间">{{ formatDateTime(selectedExpense.created_at) }}</el-descriptions-item>
|
||
<el-descriptions-item label="开支用途" :span="2">{{ selectedExpense.remark }}</el-descriptions-item>
|
||
<el-descriptions-item v-if="selectedExpense.voucher_url" label="开支凭证" :span="2">
|
||
<AuthImage :source="selectedExpense.voucher_url" :admin="true" fit="cover" :preview-src-list="[selectedExpense.voucher_url]" :image-style="{ width: '140px', height: '140px', borderRadius: '6px' }" />
|
||
</el-descriptions-item>
|
||
<el-descriptions-item v-if="selectedExpense.status === 'voided'" label="作废信息" :span="2">
|
||
{{ selectedExpense.voided_by_name || '-' }} · {{ formatDateTime(selectedExpense.voided_at) }} · {{ selectedExpense.void_reason || '-' }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<template #footer>
|
||
<el-button @click="selectedExpense = null">关闭</el-button>
|
||
<el-button v-if="selectedExpense?.status === 'paid' && canManage" type="danger" :icon="CircleClose" :loading="actionID === selectedExpense.id" @click="handleVoid(selectedExpense)">作废记录</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.operating-metrics {
|
||
grid-template-columns: repeat(2, minmax(170px, 1fr));
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.operating-metric {
|
||
border-left: 3px solid #b45309;
|
||
}
|
||
|
||
.operating-filters {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, minmax(130px, 1fr));
|
||
gap: 10px;
|
||
margin-bottom: 16px;
|
||
padding: 14px 16px;
|
||
}
|
||
|
||
.expense-form {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 0 16px;
|
||
}
|
||
|
||
.expense-form-wide {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.voucher-preview {
|
||
position: relative;
|
||
width: 104px;
|
||
height: 104px;
|
||
}
|
||
|
||
.voucher-remove {
|
||
position: absolute;
|
||
top: -10px;
|
||
right: -10px;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.operating-filters {
|
||
grid-template-columns: repeat(3, minmax(140px, 1fr));
|
||
}
|
||
}
|
||
</style>
|