费用管理内容优化-初步
This commit is contained in:
Cheng Zhou
@@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">{{ TEXT.modules.feeSpecials.title }}</h1>
|
||||
<p class="page-subtitle">{{ TEXT.modules.feeSpecials.subtitle }}</p>
|
||||
</div>
|
||||
<el-button type="primary" :disabled="!canWrite" @click="goNew" class="header-action-btn">
|
||||
<el-icon class="el-icon--left"><Plus /></el-icon>
|
||||
{{ TEXT.modules.feeSpecials.newTitle }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="overview">
|
||||
<div class="overview-header">
|
||||
<span class="overview-title">{{ TEXT.modules.feeSpecials.overviewTitle }}</span>
|
||||
<el-tag effect="plain" type="info" size="small">{{ TEXT.modules.feeSpecials.recordCount }} {{ overview.recordCount }}</el-tag>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<KpiCard
|
||||
:title="TEXT.modules.feeSpecials.totalAmount"
|
||||
:value="formatAmount(overview.totalAmount)"
|
||||
unit="元"
|
||||
:loading="loading"
|
||||
:icon="Coin"
|
||||
type="primary"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<KpiCard
|
||||
:title="TEXT.modules.feeSpecials.paidAmount"
|
||||
:value="formatAmount(overview.paidAmount)"
|
||||
unit="元"
|
||||
:loading="loading"
|
||||
:icon="Wallet"
|
||||
type="success"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<KpiCard
|
||||
:title="TEXT.modules.feeSpecials.verifiedAmount"
|
||||
:value="formatAmount(overview.verifiedAmount)"
|
||||
unit="元"
|
||||
:loading="loading"
|
||||
:icon="CircleCheck"
|
||||
type="info"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<KpiCard
|
||||
:title="TEXT.modules.feeSpecials.attachmentTotal"
|
||||
:value="overview.attachmentTotal"
|
||||
:loading="loading"
|
||||
:icon="Document"
|
||||
type="warning"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-card class="filter-card" shadow="never">
|
||||
<el-form :inline="true" :model="filters" class="filter-form">
|
||||
<el-form-item label="" class="filter-item">
|
||||
<el-select v-model="filters.centerId" clearable :placeholder="TEXT.common.fields.site" class="filter-select">
|
||||
<template #prefix>
|
||||
<el-icon><Location /></el-icon>
|
||||
</template>
|
||||
<el-option
|
||||
v-for="site in sites"
|
||||
:key="site.id"
|
||||
:label="site.name || TEXT.common.fallback"
|
||||
:value="site.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" class="filter-item">
|
||||
<el-select v-model="filters.category" clearable :placeholder="TEXT.common.fields.category" class="filter-select">
|
||||
<template #prefix>
|
||||
<el-icon><Menu /></el-icon>
|
||||
</template>
|
||||
<el-option v-for="option in categoryOptions" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" class="filter-item">
|
||||
<el-date-picker
|
||||
v-model="filters.dateRange"
|
||||
type="daterange"
|
||||
unlink-panels
|
||||
value-format="YYYY-MM-DD"
|
||||
:start-placeholder="TEXT.common.placeholders.startDate"
|
||||
:end-placeholder="TEXT.common.placeholders.endDate"
|
||||
class="filter-date"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-actions">
|
||||
<el-button type="primary" @click="load">{{ TEXT.common.actions.search }}</el-button>
|
||||
<el-button @click="resetFilters">{{ TEXT.common.actions.reset }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<StateError v-if="errorMessage" :description="errorMessage">
|
||||
<template #action>
|
||||
<el-button type="primary" @click="load">{{ TEXT.common.actions.retry }}</el-button>
|
||||
</template>
|
||||
</StateError>
|
||||
|
||||
<StateLoading v-else-if="loading" :rows="6" />
|
||||
|
||||
<el-card v-else class="table-card" shadow="never">
|
||||
<el-table :data="expenses" style="width: 100%" @row-click="onRowClick" :header-cell-style="{ background: '#f8f9fb' }">
|
||||
<el-table-column :label="TEXT.common.fields.occurDate" width="140">
|
||||
<template #default="scope">
|
||||
<span class="date-text">{{ displayDate(scope.row.happen_date) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.common.fields.site" min-width="160">
|
||||
<template #default="scope">
|
||||
<span class="site-text">{{ scope.row.center_name || TEXT.common.fallback }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.common.fields.category" width="140">
|
||||
<template #default="scope">
|
||||
<el-tag size="small" :type="getCategoryType(scope.row.category)" effect="light" class="category-tag">
|
||||
{{ displayEnum(TEXT.enums.feeSpecialCategory, scope.row.category) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.common.fields.amount" width="140" align="right">
|
||||
<template #default="scope">
|
||||
<span class="amount-text">{{ formatAmount(scope.row.amount) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" :label="TEXT.common.fields.remark" min-width="200" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
{{ scope.row.description || TEXT.common.fallback }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="140" align="center" :label="TEXT.common.labels.status">
|
||||
<template #default="scope">
|
||||
<el-tooltip :content="scope.row.is_paid ? `${TEXT.modules.feeSpecials.isPaid} (${displayDate(scope.row.paid_date)})` : TEXT.modules.feeSpecials.unpaid" placement="top">
|
||||
<el-icon :class="scope.row.is_paid ? 'status-icon success' : 'status-icon muted'"><Wallet /></el-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip :content="scope.row.is_verified ? `${TEXT.modules.feeSpecials.isVerified} (${displayDate(scope.row.verified_date)})` : TEXT.modules.feeSpecials.unverified" placement="top">
|
||||
<el-icon :class="scope.row.is_verified ? 'status-icon info' : 'status-icon muted'"><CircleCheck /></el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeSpecials.attachmentCount" width="120" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.attachments_count > 0" effect="plain" type="info" round size="small">
|
||||
{{ scope.row.attachments_count }}
|
||||
</el-tag>
|
||||
<span v-else class="text-muted">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.common.actions.delete" width="120">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
size="small"
|
||||
:disabled="!canWrite"
|
||||
@click.stop="remove(scope.row)"
|
||||
>
|
||||
{{ TEXT.common.actions.delete }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<StateEmpty v-if="expenses.length === 0" :description="TEXT.modules.feeSpecials.empty" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { Coin, Wallet, CircleCheck, Document, Plus, Location, Menu } from "@element-plus/icons-vue";
|
||||
import { deleteSpecialExpense, listSpecialExpenses } from "../../api/feeSpecials";
|
||||
import { fetchSites } from "../../api/sites";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import { usePermission } from "../../utils/permission";
|
||||
import { displayDate, displayEnum } from "../../utils/display";
|
||||
import StateEmpty from "../../components/StateEmpty.vue";
|
||||
import StateLoading from "../../components/StateLoading.vue";
|
||||
import StateError from "../../components/StateError.vue";
|
||||
import KpiCard from "../../components/KpiCard.vue";
|
||||
import { TEXT } from "../../locales";
|
||||
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
const { can } = usePermission();
|
||||
const canWrite = computed(() => can("fees.special.write"));
|
||||
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref("");
|
||||
const expenses = ref<any[]>([]);
|
||||
const sites = ref<any[]>([]);
|
||||
|
||||
const filters = reactive({
|
||||
centerId: "",
|
||||
category: "",
|
||||
dateRange: [] as string[],
|
||||
});
|
||||
|
||||
const categoryOptions = Object.keys(TEXT.enums.feeSpecialCategory).map((value) => ({
|
||||
value,
|
||||
label: TEXT.enums.feeSpecialCategory[value],
|
||||
}));
|
||||
|
||||
const toNumber = (value: any) => {
|
||||
const numberValue = Number(value);
|
||||
return Number.isNaN(numberValue) ? 0 : numberValue;
|
||||
};
|
||||
|
||||
const overview = computed(() => {
|
||||
const totals = expenses.value.reduce(
|
||||
(acc, item) => {
|
||||
acc.totalAmount += toNumber(item.amount);
|
||||
if (item.is_paid) acc.paidAmount += toNumber(item.amount);
|
||||
if (item.is_verified) acc.verifiedAmount += toNumber(item.amount);
|
||||
acc.attachmentTotal += toNumber(item.attachments_count);
|
||||
return acc;
|
||||
},
|
||||
{
|
||||
totalAmount: 0,
|
||||
paidAmount: 0,
|
||||
verifiedAmount: 0,
|
||||
attachmentTotal: 0,
|
||||
}
|
||||
);
|
||||
return {
|
||||
...totals,
|
||||
recordCount: expenses.value.length,
|
||||
};
|
||||
});
|
||||
|
||||
const loadSites = async () => {
|
||||
const studyId = study.currentStudy?.id;
|
||||
if (!studyId) return;
|
||||
try {
|
||||
const { data } = await fetchSites(studyId, { limit: 500 });
|
||||
sites.value = Array.isArray(data) ? data : data.items || [];
|
||||
} catch {
|
||||
sites.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const load = async () => {
|
||||
const projectId = study.currentStudy?.id;
|
||||
if (!projectId) return;
|
||||
loading.value = true;
|
||||
errorMessage.value = "";
|
||||
try {
|
||||
const [dateFrom, dateTo] = filters.dateRange || [];
|
||||
const { data } = await listSpecialExpenses({
|
||||
projectId,
|
||||
centerId: filters.centerId || undefined,
|
||||
category: filters.category || undefined,
|
||||
dateFrom: dateFrom || undefined,
|
||||
dateTo: dateTo || undefined,
|
||||
});
|
||||
expenses.value = data?.data || [];
|
||||
} catch (e: any) {
|
||||
errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const resetFilters = () => {
|
||||
filters.centerId = "";
|
||||
filters.category = "";
|
||||
filters.dateRange = [];
|
||||
load();
|
||||
};
|
||||
|
||||
const goNew = () => router.push("/fees/special/new");
|
||||
const goDetail = (id: string) => router.push(`/fees/special/${id}`);
|
||||
const onRowClick = (row: any) => {
|
||||
if (!row?.id) return;
|
||||
goDetail(row.id);
|
||||
};
|
||||
|
||||
const remove = async (row: any) => {
|
||||
if (!row?.id || !canWrite.value) return;
|
||||
const ok = await ElMessageBox.confirm(TEXT.common.confirm.delete, TEXT.common.labels.tips).catch(() => null);
|
||||
if (!ok) return;
|
||||
try {
|
||||
await deleteSpecialExpense(row.id);
|
||||
ElMessage.success(TEXT.common.messages.deleteSuccess);
|
||||
load();
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed);
|
||||
}
|
||||
};
|
||||
|
||||
const formatAmount = (value: any) => {
|
||||
const numberValue = Number(value);
|
||||
if (Number.isNaN(numberValue)) return TEXT.common.fallback;
|
||||
return numberValue.toFixed(2);
|
||||
};
|
||||
|
||||
const getCategoryType = (category: string) => {
|
||||
if (category === 'travel') return 'warning';
|
||||
if (category === 'meeting') return 'success';
|
||||
if (category === 'material') return 'primary';
|
||||
return 'info';
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await loadSites();
|
||||
load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 6px 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.header-action-btn {
|
||||
height: 36px;
|
||||
padding: 0 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.overview {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.overview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 4px 8px;
|
||||
}
|
||||
|
||||
.overview-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--ctms-text-main);
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filter-card :deep(.el-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
background: white;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ctms-border-color);
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
margin-bottom: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.filter-date {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
margin-left: auto !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ctms-border-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-family: var(--el-font-family);
|
||||
color: var(--ctms-text-regular);
|
||||
}
|
||||
|
||||
.site-text {
|
||||
font-weight: 500;
|
||||
color: var(--ctms-text-main);
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-family: var(--el-font-family);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.category-tag {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 18px;
|
||||
margin: 0 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.status-icon.success { color: var(--el-color-success); }
|
||||
.status-icon.info { color: var(--el-color-info); }
|
||||
.status-icon.muted { color: var(--ctms-border-color); opacity: 0.6; }
|
||||
|
||||
.text-muted {
|
||||
color: var(--ctms-text-placeholder);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user