费用管理内容优化-初步
This commit is contained in:
Cheng Zhou
@@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">{{ TEXT.modules.feeContracts.detailTitle }}</h1>
|
||||
<p class="page-subtitle">{{ TEXT.modules.feeContracts.detailSubtitle }}</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button type="primary" :disabled="!canWrite" @click="goEdit" class="header-action-btn copy-btn">
|
||||
<el-icon class="el-icon--left"><Edit /></el-icon>
|
||||
{{ TEXT.common.actions.edit }}
|
||||
</el-button>
|
||||
<el-button @click="goBack" class="header-action-btn">
|
||||
{{ TEXT.common.actions.back }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
|
||||
<template v-else>
|
||||
<el-card class="detail-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="header-title">{{ TEXT.common.labels.basicInfo }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions :column="2" border class="custom-descriptions">
|
||||
<el-descriptions-item :label="TEXT.common.fields.site" label-class-name="desc-label">
|
||||
{{ centerName || TEXT.common.fallback }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="TEXT.modules.feeContracts.contractAmount" label-class-name="desc-label">
|
||||
<span class="amount-text">{{ formatAmountWan(detail.contract_amount) }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="TEXT.modules.feeContracts.contractCases" label-class-name="desc-label">
|
||||
{{ detail.contract_cases ?? TEXT.common.fallback }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="TEXT.modules.feeContracts.actualCases" label-class-name="desc-label">
|
||||
{{ detail.actual_cases ?? TEXT.common.fallback }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="TEXT.modules.feeContracts.settlementAmount" label-class-name="desc-label">
|
||||
<span class="amount-text">{{ formatAmountWan(detail.settlement_amount) }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="TEXT.modules.feeContracts.finalPaymentAmount" label-class-name="desc-label">
|
||||
<span class="amount-text">{{ formatAmountWan(detail.final_payment_amount) }}</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<el-card class="section-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="header-title">{{ TEXT.modules.feeContracts.paymentTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-table :data="detail.payments" style="width: 100%" :header-cell-style="{ background: '#f8f9fb' }">
|
||||
<el-table-column :label="TEXT.modules.feeContracts.paymentSeq" width="120">
|
||||
<template #default="scope">
|
||||
<span class="seq-tag">{{ TEXT.modules.feeContracts.paymentSeq }}{{ scope.row.seq }}{{ TEXT.modules.feeContracts.paymentSeqUnit }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.common.fields.amount" width="160" align="right">
|
||||
<template #default="scope">
|
||||
<span class="amount-text">{{ formatAmountWan(scope.row.amount) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeContracts.paidFlag" width="200">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.is_paid" class="status-cell">
|
||||
<el-tag type="success" size="small">{{ TEXT.modules.feeContracts.isPaid }}</el-tag>
|
||||
<span class="status-date">{{ displayDate(scope.row.paid_date) }}</span>
|
||||
</div>
|
||||
<span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeContracts.verifiedFlag" width="200">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.is_verified" class="status-cell">
|
||||
<el-tag type="info" size="small">{{ TEXT.modules.feeContracts.isVerified }}</el-tag>
|
||||
<span class="status-date">{{ displayDate(scope.row.verified_date) }}</span>
|
||||
</div>
|
||||
<span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.common.fields.remark" min-width="200" show-overflow-tooltip>
|
||||
<template #default="scope">{{ scope.row.remark || TEXT.common.fallback }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<StateEmpty v-if="detail.payments.length === 0" :description="TEXT.modules.feeContracts.paymentEmpty" />
|
||||
</el-card>
|
||||
|
||||
<el-card class="section-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="header-title">{{ TEXT.modules.feeContracts.attachmentTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<FeeAttachmentPanel
|
||||
v-if="contractId"
|
||||
:entity-type="'contract_fee'"
|
||||
:entity-id="contractId"
|
||||
:groups="attachmentGroups"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { Edit } from "@element-plus/icons-vue";
|
||||
import { getContractFee } from "../../api/feeContracts";
|
||||
import { fetchSites } from "../../api/sites";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import { usePermission } from "../../utils/permission";
|
||||
import { displayDate } from "../../utils/display";
|
||||
import StateEmpty from "../../components/StateEmpty.vue";
|
||||
import StateError from "../../components/StateError.vue";
|
||||
import StateLoading from "../../components/StateLoading.vue";
|
||||
import FeeAttachmentPanel from "../../components/fees/FeeAttachmentPanel.vue";
|
||||
import { TEXT } from "../../locales";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
const { can } = usePermission();
|
||||
const canWrite = computed(() => can("fees.contract.write"));
|
||||
|
||||
const contractId = route.params.contractId as string;
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref("");
|
||||
const detail = reactive<any>({
|
||||
contract_amount: 0,
|
||||
contract_cases: 0,
|
||||
actual_cases: null,
|
||||
settlement_amount: null,
|
||||
final_payment_amount: null,
|
||||
payments: [],
|
||||
});
|
||||
const sites = ref<any[]>([]);
|
||||
|
||||
const attachmentGroups = [
|
||||
{
|
||||
key: "contract",
|
||||
label: TEXT.modules.feeContracts.attachmentContract,
|
||||
description: TEXT.modules.feeContracts.attachmentContractDesc,
|
||||
emptyText: TEXT.modules.feeContracts.attachmentContractEmpty,
|
||||
},
|
||||
{
|
||||
key: "voucher",
|
||||
label: TEXT.modules.feeContracts.attachmentVoucher,
|
||||
description: TEXT.modules.feeContracts.attachmentVoucherDesc,
|
||||
emptyText: TEXT.modules.feeContracts.attachmentVoucherEmpty,
|
||||
},
|
||||
{
|
||||
key: "invoice",
|
||||
label: TEXT.modules.feeContracts.attachmentInvoice,
|
||||
description: TEXT.modules.feeContracts.attachmentInvoiceDesc,
|
||||
emptyText: TEXT.modules.feeContracts.attachmentInvoiceEmpty,
|
||||
},
|
||||
];
|
||||
|
||||
const centerName = computed(() => {
|
||||
const match = sites.value.find((site) => site.id === detail.center_id);
|
||||
return match?.name || "";
|
||||
});
|
||||
|
||||
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 () => {
|
||||
if (!contractId) return;
|
||||
loading.value = true;
|
||||
errorMessage.value = "";
|
||||
try {
|
||||
const { data } = await getContractFee(contractId);
|
||||
Object.assign(detail, data?.data || {});
|
||||
if (!Array.isArray(detail.payments)) detail.payments = [];
|
||||
} catch (e: any) {
|
||||
errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const formatAmountWan = (value: any) => {
|
||||
const numberValue = Number(value);
|
||||
if (Number.isNaN(numberValue)) return TEXT.common.fallback;
|
||||
return (numberValue / 10000).toFixed(2);
|
||||
};
|
||||
|
||||
const goEdit = () => router.push(`/fees/contracts/${contractId}/edit`);
|
||||
const goBack = () => router.push("/fees/contracts");
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 6px 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-action-btn {
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.detail-card, .section-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ctms-border-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--ctms-text-main);
|
||||
border-left: 4px solid var(--el-color-primary);
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.desc-label) {
|
||||
background-color: var(--ctms-bg-color-page) !important;
|
||||
color: var(--ctms-text-secondary);
|
||||
width: 150px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-family: var(--el-font-family);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.seq-tag {
|
||||
color: var(--ctms-text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.status-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.status-date {
|
||||
font-size: 12px;
|
||||
color: var(--ctms-text-secondary);
|
||||
font-family: var(--el-font-family);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--ctms-text-placeholder);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,635 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">{{ isEdit ? TEXT.modules.feeContracts.editTitle : TEXT.modules.feeContracts.newTitle }}</h1>
|
||||
<p class="page-subtitle">{{ TEXT.modules.feeContracts.formSubtitle }}</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button @click="goBack" class="header-action-btn">{{ TEXT.common.actions.back }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StateError v-if="errorMessage" :description="errorMessage">
|
||||
<template #action>
|
||||
<el-button type="primary" @click="loadDetail">{{ TEXT.common.actions.retry }}</el-button>
|
||||
</template>
|
||||
</StateError>
|
||||
|
||||
<StateLoading v-else-if="loading" :rows="6" />
|
||||
|
||||
<template v-else>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="140px" label-position="top">
|
||||
<el-card class="form-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="header-title">{{ TEXT.common.labels.basicInfo }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.common.fields.site" prop="center_id" required>
|
||||
<el-select v-model="form.center_id" :disabled="isEdit" :placeholder="TEXT.common.placeholders.select" class="full-width">
|
||||
<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-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.contractAmount" prop="contract_amount" required>
|
||||
<el-input-number v-model="form.contract_amount" :min="0" :precision="2" :step="1000" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.contractCases" prop="contract_cases" required>
|
||||
<el-input-number v-model="form.contract_cases" :min="0" :step="1" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.actualCases" prop="actual_cases">
|
||||
<el-input-number v-model="form.actual_cases" :min="0" :step="1" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.settlementAmount" prop="settlement_amount">
|
||||
<el-input-number v-model="form.settlement_amount" :min="0" :precision="2" :step="1000" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.finalPaymentAmount" prop="final_payment_amount">
|
||||
<el-input-number v-model="form.final_payment_amount" :min="0" :precision="2" :step="1000" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card class="form-card section-margin" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header actions-header">
|
||||
<span class="header-title">{{ TEXT.modules.feeContracts.paymentTitle }}</span>
|
||||
<el-button type="primary" @click="addPayment">
|
||||
<el-icon class="el-icon--left"><Plus /></el-icon>
|
||||
{{ TEXT.common.actions.add }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="payments.length === 0" class="section-empty">
|
||||
<StateEmpty :description="TEXT.modules.feeContracts.paymentEmpty" />
|
||||
</div>
|
||||
|
||||
<div v-else class="payment-list">
|
||||
<transition-group name="list">
|
||||
<div v-for="(payment, index) in payments" :key="payment.tempId" class="payment-item">
|
||||
<div class="payment-item-header">
|
||||
<div class="payment-seq">
|
||||
<span class="seq-circle">{{ index + 1 }}</span>
|
||||
<span class="seq-text">{{ TEXT.modules.feeContracts.paymentSeqUnit }}</span>
|
||||
</div>
|
||||
<el-button link type="danger" @click="removePayment(index)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="TEXT.common.fields.amount" :error="paymentErrors[index]?.amount">
|
||||
<el-input-number v-model="payment.amount" :min="0" :precision="2" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.paidFlag" :error="paymentErrors[index]?.paid_date">
|
||||
<div class="status-control">
|
||||
<el-checkbox v-model="payment.is_paid" @change="() => onPaidToggle(payment)">
|
||||
{{ TEXT.modules.feeContracts.isPaid }}
|
||||
</el-checkbox>
|
||||
<el-date-picker
|
||||
v-if="payment.is_paid"
|
||||
v-model="payment.paid_date"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="TEXT.common.placeholders.select"
|
||||
class="status-picker"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.verifiedFlag" :error="paymentErrors[index]?.verified_date">
|
||||
<div class="status-control">
|
||||
<el-checkbox v-model="payment.is_verified" @change="() => onVerifiedToggle(payment)">
|
||||
{{ TEXT.modules.feeContracts.isVerified }}
|
||||
</el-checkbox>
|
||||
<el-date-picker
|
||||
v-if="payment.is_verified"
|
||||
v-model="payment.verified_date"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="TEXT.common.placeholders.select"
|
||||
class="status-picker"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item :label="TEXT.common.fields.remark" class="mb-0">
|
||||
<el-input v-model="payment.remark" type="textarea" :rows="2" :placeholder="TEXT.common.placeholders.input" />
|
||||
</el-form-item>
|
||||
|
||||
<div v-if="paymentErrors[index]?.verification" class="payment-error">
|
||||
{{ paymentErrors[index].verification }}
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="form-card section-margin" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="header-title">{{ TEXT.modules.feeContracts.attachmentTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<FeeAttachmentPanel
|
||||
v-if="form.id"
|
||||
:entity-type="'contract_fee'"
|
||||
:entity-id="form.id"
|
||||
:groups="attachmentGroups"
|
||||
/>
|
||||
|
||||
<StateEmpty v-else :description="TEXT.modules.feeContracts.uploadHint" class="compact-empty" />
|
||||
</el-card>
|
||||
|
||||
<div class="footer-actions">
|
||||
<el-button @click="goBack">{{ TEXT.common.actions.cancel }}</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="submit" class="save-btn">
|
||||
{{ TEXT.common.actions.save }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Plus, Delete } from "@element-plus/icons-vue";
|
||||
import {
|
||||
createContractFee,
|
||||
createContractPayment,
|
||||
deleteContractPayment,
|
||||
getContractFee,
|
||||
updateContractFee,
|
||||
updateContractPayment,
|
||||
} from "../../api/feeContracts";
|
||||
import { fetchSites } from "../../api/sites";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import StateEmpty from "../../components/StateEmpty.vue";
|
||||
import StateError from "../../components/StateError.vue";
|
||||
import StateLoading from "../../components/StateLoading.vue";
|
||||
import FeeAttachmentPanel from "../../components/fees/FeeAttachmentPanel.vue";
|
||||
import { TEXT } from "../../locales";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const errorMessage = ref("");
|
||||
const sites = ref<any[]>([]);
|
||||
|
||||
const formRef = ref();
|
||||
const form = reactive({
|
||||
id: "",
|
||||
project_id: "",
|
||||
center_id: "",
|
||||
contract_amount: 0,
|
||||
contract_cases: 0,
|
||||
actual_cases: null as number | null,
|
||||
settlement_amount: null as number | null,
|
||||
final_payment_amount: null as number | null,
|
||||
});
|
||||
|
||||
const payments = ref<any[]>([]);
|
||||
const removedPaymentIds = ref<string[]>([]);
|
||||
const paymentErrors = ref<Record<string, string>[]>([]);
|
||||
|
||||
const contractId = computed(() => route.params.contractId as string | undefined);
|
||||
const isEdit = computed(() => !!contractId.value);
|
||||
|
||||
const attachmentGroups = [
|
||||
{
|
||||
key: "contract",
|
||||
label: TEXT.modules.feeContracts.attachmentContract,
|
||||
description: TEXT.modules.feeContracts.attachmentContractDesc,
|
||||
emptyText: TEXT.modules.feeContracts.attachmentContractEmpty,
|
||||
},
|
||||
{
|
||||
key: "voucher",
|
||||
label: TEXT.modules.feeContracts.attachmentVoucher,
|
||||
description: TEXT.modules.feeContracts.attachmentVoucherDesc,
|
||||
emptyText: TEXT.modules.feeContracts.attachmentVoucherEmpty,
|
||||
},
|
||||
{
|
||||
key: "invoice",
|
||||
label: TEXT.modules.feeContracts.attachmentInvoice,
|
||||
description: TEXT.modules.feeContracts.attachmentInvoiceDesc,
|
||||
emptyText: TEXT.modules.feeContracts.attachmentInvoiceEmpty,
|
||||
},
|
||||
];
|
||||
|
||||
const rules = {
|
||||
center_id: [{ required: true, message: TEXT.common.messages.required, trigger: "change" }],
|
||||
contract_amount: [{ required: true, message: TEXT.common.messages.required, trigger: "blur" }],
|
||||
contract_cases: [{ required: true, message: TEXT.common.messages.required, trigger: "blur" }],
|
||||
};
|
||||
|
||||
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 loadDetail = async () => {
|
||||
if (!contractId.value) return;
|
||||
loading.value = true;
|
||||
errorMessage.value = "";
|
||||
removedPaymentIds.value = [];
|
||||
paymentErrors.value = [];
|
||||
try {
|
||||
const { data } = await getContractFee(contractId.value);
|
||||
const detail = data?.data || {};
|
||||
Object.assign(form, {
|
||||
id: detail.id || contractId.value,
|
||||
project_id: detail.project_id || study.currentStudy?.id || "",
|
||||
center_id: detail.center_id || "",
|
||||
contract_amount: Number(detail.contract_amount || 0) / 10000,
|
||||
contract_cases: Number(detail.contract_cases || 0),
|
||||
actual_cases: detail.actual_cases ?? null,
|
||||
settlement_amount: detail.settlement_amount !== null && detail.settlement_amount !== undefined ? Number(detail.settlement_amount) / 10000 : null,
|
||||
final_payment_amount: detail.final_payment_amount !== null && detail.final_payment_amount !== undefined ? Number(detail.final_payment_amount) / 10000 : null,
|
||||
});
|
||||
payments.value = (detail.payments || []).map((payment: any) => ({
|
||||
id: payment.id,
|
||||
tempId: payment.id,
|
||||
amount: Number(payment.amount || 0),
|
||||
paid_date: payment.paid_date || "",
|
||||
verified_date: payment.verified_date || "",
|
||||
is_paid: !!payment.is_paid,
|
||||
is_verified: !!payment.is_verified,
|
||||
remark: payment.remark || "",
|
||||
}));
|
||||
} catch (e: any) {
|
||||
errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const addPayment = () => {
|
||||
payments.value.push({
|
||||
tempId: `${Date.now()}-${Math.random()}`,
|
||||
amount: 0,
|
||||
paid_date: "",
|
||||
verified_date: "",
|
||||
is_paid: false,
|
||||
is_verified: false,
|
||||
remark: "",
|
||||
});
|
||||
};
|
||||
|
||||
const removePayment = (index: number) => {
|
||||
const payment = payments.value[index];
|
||||
if (payment?.id) {
|
||||
removedPaymentIds.value.push(payment.id);
|
||||
}
|
||||
payments.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const onPaidToggle = (payment: any) => {
|
||||
if (!payment.is_paid) {
|
||||
payment.paid_date = "";
|
||||
payment.is_verified = false;
|
||||
payment.verified_date = "";
|
||||
}
|
||||
};
|
||||
|
||||
const onVerifiedToggle = (payment: any) => {
|
||||
if (payment.is_verified && !payment.is_paid) {
|
||||
payment.is_paid = true;
|
||||
}
|
||||
if (!payment.is_verified) {
|
||||
payment.verified_date = "";
|
||||
}
|
||||
};
|
||||
|
||||
const validatePayments = () => {
|
||||
const errors: Record<string, string>[] = [];
|
||||
let ok = true;
|
||||
payments.value.forEach((payment, index) => {
|
||||
const entry: Record<string, string> = {};
|
||||
if (payment.amount === null || payment.amount === undefined || Number(payment.amount) < 0) {
|
||||
entry.amount = TEXT.modules.feeContracts.amountInvalid;
|
||||
ok = false;
|
||||
}
|
||||
if (payment.is_paid && !payment.paid_date) {
|
||||
entry.paid_date = TEXT.modules.feeContracts.paidDateRequired;
|
||||
ok = false;
|
||||
}
|
||||
if (payment.is_verified && !payment.verified_date) {
|
||||
entry.verified_date = TEXT.modules.feeContracts.verifiedDateRequired;
|
||||
ok = false;
|
||||
}
|
||||
if (payment.is_verified && !payment.is_paid) {
|
||||
entry.verification = TEXT.modules.feeContracts.verifyRequiresPaid;
|
||||
ok = false;
|
||||
}
|
||||
errors[index] = entry;
|
||||
});
|
||||
paymentErrors.value = errors;
|
||||
return ok;
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (!study.currentStudy?.id) return;
|
||||
const formOk = await formRef.value?.validate?.().catch(() => false);
|
||||
if (!formOk) return;
|
||||
if (!validatePayments()) {
|
||||
ElMessage.error(TEXT.modules.feeContracts.paymentValidationFailed);
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
try {
|
||||
const payload = {
|
||||
project_id: study.currentStudy.id,
|
||||
center_id: form.center_id,
|
||||
contract_amount: Number(form.contract_amount || 0) * 10000,
|
||||
contract_cases: Number(form.contract_cases || 0),
|
||||
actual_cases: form.actual_cases === null ? null : Number(form.actual_cases),
|
||||
settlement_amount: form.settlement_amount === null ? null : Number(form.settlement_amount) * 10000,
|
||||
final_payment_amount: form.final_payment_amount === null ? null : Number(form.final_payment_amount) * 10000,
|
||||
};
|
||||
const updatePayload = {
|
||||
contract_amount: payload.contract_amount,
|
||||
contract_cases: payload.contract_cases,
|
||||
actual_cases: payload.actual_cases,
|
||||
settlement_amount: payload.settlement_amount,
|
||||
final_payment_amount: payload.final_payment_amount,
|
||||
};
|
||||
|
||||
let savedId = contractId.value || form.id;
|
||||
if (isEdit.value && savedId) {
|
||||
await updateContractFee(savedId, updatePayload);
|
||||
} else {
|
||||
const { data } = await createContractFee(payload);
|
||||
savedId = data?.data?.id;
|
||||
form.id = savedId || "";
|
||||
}
|
||||
|
||||
if (savedId) {
|
||||
for (const paymentId of removedPaymentIds.value) {
|
||||
await deleteContractPayment(paymentId);
|
||||
}
|
||||
removedPaymentIds.value = [];
|
||||
for (const payment of payments.value) {
|
||||
const paymentPayload = {
|
||||
amount: Number(payment.amount || 0),
|
||||
paid_date: payment.paid_date || null,
|
||||
verified_date: payment.verified_date || null,
|
||||
is_paid: !!payment.is_paid,
|
||||
is_verified: !!payment.is_verified,
|
||||
remark: payment.remark || null,
|
||||
};
|
||||
if (payment.id) {
|
||||
await updateContractPayment(payment.id, paymentPayload);
|
||||
} else {
|
||||
const { data } = await createContractPayment(savedId, paymentPayload);
|
||||
payment.id = data?.data?.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ElMessage.success(TEXT.common.messages.saveSuccess);
|
||||
if (savedId) {
|
||||
router.push(`/fees/contracts/${savedId}`);
|
||||
} else {
|
||||
goBack();
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const goBack = () => router.push("/fees/contracts");
|
||||
|
||||
onMounted(async () => {
|
||||
await loadSites();
|
||||
if (isEdit.value) {
|
||||
await loadDetail();
|
||||
} else {
|
||||
form.project_id = study.currentStudy?.id || "";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 6px 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.header-action-btn {
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ctms-border-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-margin {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.actions-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--ctms-text-main);
|
||||
border-left: 4px solid var(--el-color-primary);
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-empty {
|
||||
padding: 24px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.payment-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.payment-item {
|
||||
border: 1px solid var(--ctms-border-color);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
background-color: var(--ctms-bg-color-page);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.payment-item:hover {
|
||||
border-color: var(--ctms-border-color-hover);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.payment-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.payment-seq {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.seq-circle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--el-color-primary);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.seq-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--ctms-text-main);
|
||||
}
|
||||
|
||||
.status-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.payment-error {
|
||||
color: var(--ctms-danger);
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.compact-empty :deep(.state) {
|
||||
padding: 24px 0 !important;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
.compact-empty :deep(.state-icon) {
|
||||
font-size: 24px !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.compact-empty :deep(.state-title) {
|
||||
font-size: 14px !important;
|
||||
font-weight: normal !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.compact-empty :deep(.state-desc) {
|
||||
margin: 0 !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">{{ TEXT.modules.feeContracts.title }}</h1>
|
||||
<p class="page-subtitle">{{ TEXT.modules.feeContracts.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.feeContracts.newTitle }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="overview">
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<KpiCard
|
||||
:title="`${TEXT.modules.feeContracts.totalContractAmount} (${TEXT.modules.feeContracts.centerCount} ${overview.centerCount})`"
|
||||
:value="formatAmountWan(overview.totalContractAmount)"
|
||||
unit="万元"
|
||||
:loading="loading"
|
||||
:icon="Coin"
|
||||
type="primary"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<KpiCard
|
||||
:title="TEXT.modules.feeContracts.totalPaidAmount"
|
||||
:value="formatAmountWan(overview.totalPaidAmount)"
|
||||
unit="万元"
|
||||
:loading="loading"
|
||||
:icon="Wallet"
|
||||
type="success"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<KpiCard
|
||||
:title="TEXT.modules.feeContracts.totalUnpaidAmount"
|
||||
:value="formatAmountWan(overview.totalUnpaidAmount)"
|
||||
unit="万元"
|
||||
:loading="loading"
|
||||
:icon="CircleClose"
|
||||
type="warning"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<KpiCard
|
||||
:title="TEXT.modules.feeContracts.totalVerifiedAmount"
|
||||
:value="formatAmountWan(overview.totalVerifiedAmount)"
|
||||
unit="万元"
|
||||
:loading="loading"
|
||||
:icon="CircleCheck"
|
||||
type="info"
|
||||
/>
|
||||
</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-input v-model="filters.q" :placeholder="TEXT.common.placeholders.keyword" clearable class="filter-input">
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</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="contracts" style="width: 100%" @row-click="onRowClick" :header-cell-style="{ background: '#f8f9fb' }">
|
||||
<el-table-column prop="center_name" :label="TEXT.common.fields.site" min-width="180">
|
||||
<template #default="scope">
|
||||
<div class="site-cell">
|
||||
<span class="site-name">{{ scope.row.center_name || TEXT.common.fallback }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeContracts.contractAmount" width="160" align="right">
|
||||
<template #default="scope">
|
||||
<span class="amount-text">{{ formatAmountWan(scope.row.contract_amount) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeContracts.caseProgress" min-width="150" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag effect="plain" type="info">
|
||||
{{ displayCases(scope.row.contract_cases, scope.row.actual_cases) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeContracts.paidSummary" min-width="180">
|
||||
<template #default="scope">
|
||||
<div class="summary-line">
|
||||
<span>{{ TEXT.modules.feeContracts.paidTotal }}</span>
|
||||
<span class="amount-highlight success">{{ formatAmountWan(scope.row.paid_total) }}</span>
|
||||
</div>
|
||||
<div class="summary-line">
|
||||
<span>{{ TEXT.modules.feeContracts.unpaidBalance }}</span>
|
||||
<span class="amount-highlight warning" v-if="scope.row.unpaid_balance > 0">{{ formatAmountWan(scope.row.unpaid_balance) }}</span>
|
||||
<span class="amount-muted" v-else>0.00</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeContracts.verifySummary" min-width="180">
|
||||
<template #default="scope">
|
||||
<div class="summary-line">
|
||||
<span>{{ TEXT.modules.feeContracts.verifiedTotal }}</span>
|
||||
<span class="amount-highlight info">{{ formatAmountWan(scope.row.verified_total) }}</span>
|
||||
</div>
|
||||
<div class="summary-line">
|
||||
<span>{{ TEXT.modules.feeContracts.unverifiedBalance }}</span>
|
||||
<span class="amount-highlight warning" v-if="scope.row.unverified_balance > 0">{{ formatAmountWan(scope.row.unverified_balance) }}</span>
|
||||
<span class="amount-muted" v-else>0.00</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeContracts.recentDates" min-width="200">
|
||||
<template #default="scope">
|
||||
<div class="date-line">
|
||||
<span class="date-label">{{ TEXT.modules.feeContracts.lastPaid }}</span>
|
||||
<span class="date-value">{{ displayDate(scope.row.last_paid_date) }}</span>
|
||||
</div>
|
||||
<div class="date-line">
|
||||
<span class="date-label">{{ TEXT.modules.feeContracts.lastVerified }}</span>
|
||||
<span class="date-value">{{ displayDate(scope.row.last_verified_date) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.common.fields.remark" min-width="180" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
{{ scope.row.remark || TEXT.common.fallback }}
|
||||
</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="contracts.length === 0" :description="TEXT.modules.feeContracts.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, CircleClose, Plus, Location, Search } from "@element-plus/icons-vue";
|
||||
import { deleteContractFee, listContractFees } from "../../api/feeContracts";
|
||||
import { fetchSites } from "../../api/sites";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import { usePermission } from "../../utils/permission";
|
||||
import { displayDate } 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.contract.write"));
|
||||
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref("");
|
||||
const contracts = ref<any[]>([]);
|
||||
const sites = ref<any[]>([]);
|
||||
|
||||
const filters = reactive({
|
||||
centerId: "",
|
||||
q: "",
|
||||
});
|
||||
|
||||
const toNumber = (value: any) => {
|
||||
const numberValue = Number(value);
|
||||
return Number.isNaN(numberValue) ? 0 : numberValue;
|
||||
};
|
||||
|
||||
const overview = computed(() => {
|
||||
const totals = contracts.value.reduce(
|
||||
(acc, item) => {
|
||||
acc.totalContractAmount += toNumber(item.contract_amount);
|
||||
acc.totalPaidAmount += toNumber(item.paid_total);
|
||||
acc.totalUnpaidAmount += toNumber(item.unpaid_balance);
|
||||
acc.totalVerifiedAmount += toNumber(item.verified_total);
|
||||
return acc;
|
||||
},
|
||||
{
|
||||
totalContractAmount: 0,
|
||||
totalPaidAmount: 0,
|
||||
totalUnpaidAmount: 0,
|
||||
totalVerifiedAmount: 0,
|
||||
}
|
||||
);
|
||||
return {
|
||||
...totals,
|
||||
centerCount: contracts.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 { data } = await listContractFees({
|
||||
projectId,
|
||||
centerId: filters.centerId || undefined,
|
||||
q: filters.q || undefined,
|
||||
});
|
||||
contracts.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.q = "";
|
||||
load();
|
||||
};
|
||||
|
||||
const goNew = () => router.push("/fees/contracts/new");
|
||||
const goDetail = (id: string) => router.push(`/fees/contracts/${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 deleteContractFee(row.id);
|
||||
ElMessage.success(TEXT.common.messages.deleteSuccess);
|
||||
load();
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed);
|
||||
}
|
||||
};
|
||||
|
||||
const displayCases = (contractCases: any, actualCases: any) => {
|
||||
const contractValue = Number(contractCases ?? 0);
|
||||
const actualValue = Number(actualCases ?? 0);
|
||||
if (Number.isNaN(contractValue) || Number.isNaN(actualValue)) {
|
||||
return TEXT.common.fallback;
|
||||
}
|
||||
return `${actualValue}/${contractValue}`;
|
||||
};
|
||||
|
||||
const formatAmountWan = (value: any) => {
|
||||
const numberValue = Number(value);
|
||||
if (Number.isNaN(numberValue)) return TEXT.common.fallback;
|
||||
return (numberValue / 10000).toFixed(2);
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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,
|
||||
.filter-input {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
margin-left: auto !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ctms-border-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site-cell {
|
||||
font-weight: 500;
|
||||
color: var(--ctms-text-main);
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-family: var(--el-font-family);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.summary-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
margin-bottom: 4px;
|
||||
color: var(--ctms-text-regular);
|
||||
}
|
||||
|
||||
.summary-line:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.amount-highlight {
|
||||
font-weight: 600;
|
||||
font-family: var(--el-font-family);
|
||||
}
|
||||
|
||||
.amount-highlight.success { color: var(--el-color-success); }
|
||||
.amount-highlight.warning { color: var(--el-color-warning); }
|
||||
.amount-highlight.info { color: var(--el-color-info); }
|
||||
.amount-muted { color: var(--ctms-text-placeholder); }
|
||||
|
||||
.date-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.date-value {
|
||||
color: var(--ctms-text-regular);
|
||||
font-family: var(--el-font-family);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">{{ TEXT.modules.feeSpecials.detailTitle }}</h1>
|
||||
<p class="page-subtitle">{{ TEXT.modules.feeSpecials.detailSubtitle }}</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button type="primary" :disabled="!canWrite" @click="goEdit" class="header-action-btn copy-btn">
|
||||
<el-icon class="el-icon--left"><Edit /></el-icon>
|
||||
{{ TEXT.common.actions.edit }}
|
||||
</el-button>
|
||||
<el-button @click="goBack" class="header-action-btn">
|
||||
{{ TEXT.common.actions.back }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
|
||||
<template v-else>
|
||||
<el-card class="detail-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="header-title">{{ TEXT.common.labels.basicInfo }}</span>
|
||||
<div class="status-badges">
|
||||
<el-tag v-if="detail.is_paid" type="success" effect="dark" size="default">{{ TEXT.modules.feeSpecials.isPaid }}</el-tag>
|
||||
<el-tag v-else type="info" effect="plain" size="default">{{ TEXT.modules.feeSpecials.unpaid }}</el-tag>
|
||||
|
||||
<el-tag v-if="detail.is_verified" type="info" effect="dark" size="default">{{ TEXT.modules.feeSpecials.isVerified }}</el-tag>
|
||||
<el-tag v-else type="info" effect="plain" size="default">{{ TEXT.modules.feeSpecials.unverified }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-descriptions :column="2" border class="custom-descriptions">
|
||||
<el-descriptions-item :label="TEXT.common.fields.occurDate" label-class-name="desc-label">
|
||||
<span class="date-text">{{ displayDate(detail.happen_date) }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="TEXT.common.fields.site" label-class-name="desc-label">
|
||||
{{ centerName || TEXT.common.fallback }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="TEXT.common.fields.category" label-class-name="desc-label">
|
||||
<el-tag size="small" :type="getCategoryType(detail.category)" effect="light">
|
||||
{{ displayEnum(TEXT.enums.feeSpecialCategory, detail.category) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="TEXT.common.fields.amount" label-class-name="desc-label">
|
||||
<span class="amount-text">{{ formatAmount(detail.amount) }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="TEXT.modules.feeSpecials.paidFlag" label-class-name="desc-label">
|
||||
<span v-if="detail.is_paid">
|
||||
{{ displayDate(detail.paid_date) }}
|
||||
</span>
|
||||
<span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="TEXT.modules.feeSpecials.verifiedFlag" label-class-name="desc-label">
|
||||
<span v-if="detail.is_verified">
|
||||
{{ displayDate(detail.verified_date) }}
|
||||
</span>
|
||||
<span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="TEXT.common.fields.description" :span="2" label-class-name="desc-label">
|
||||
{{ detail.description || TEXT.common.fallback }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<el-card class="section-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="header-title">{{ TEXT.modules.feeSpecials.attachmentTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<FeeAttachmentPanel
|
||||
v-if="expenseId"
|
||||
:entity-type="'special_expense'"
|
||||
:entity-id="expenseId"
|
||||
:groups="attachmentGroups"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { Edit } from "@element-plus/icons-vue";
|
||||
import { getSpecialExpense } 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 StateError from "../../components/StateError.vue";
|
||||
import StateLoading from "../../components/StateLoading.vue";
|
||||
import FeeAttachmentPanel from "../../components/fees/FeeAttachmentPanel.vue";
|
||||
import { TEXT } from "../../locales";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
const { can } = usePermission();
|
||||
const canWrite = computed(() => can("fees.special.write"));
|
||||
|
||||
const expenseId = route.params.expenseId as string;
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref("");
|
||||
const detail = reactive<any>({
|
||||
happen_date: "",
|
||||
center_id: "",
|
||||
category: "",
|
||||
amount: 0,
|
||||
description: "",
|
||||
is_paid: false,
|
||||
paid_date: "",
|
||||
is_verified: false,
|
||||
verified_date: "",
|
||||
});
|
||||
const sites = ref<any[]>([]);
|
||||
|
||||
const attachmentGroups = [
|
||||
{
|
||||
key: "voucher",
|
||||
label: TEXT.modules.feeSpecials.attachmentVoucher,
|
||||
description: TEXT.modules.feeSpecials.attachmentVoucherDesc,
|
||||
emptyText: TEXT.modules.feeSpecials.attachmentVoucherEmpty,
|
||||
},
|
||||
{
|
||||
key: "invoice",
|
||||
label: TEXT.modules.feeSpecials.attachmentInvoice,
|
||||
description: TEXT.modules.feeSpecials.attachmentInvoiceDesc,
|
||||
emptyText: TEXT.modules.feeSpecials.attachmentInvoiceEmpty,
|
||||
},
|
||||
{
|
||||
key: "other",
|
||||
label: TEXT.modules.feeSpecials.attachmentOther,
|
||||
description: TEXT.modules.feeSpecials.attachmentOtherDesc,
|
||||
emptyText: TEXT.modules.feeSpecials.attachmentOtherEmpty,
|
||||
},
|
||||
];
|
||||
|
||||
const centerName = computed(() => {
|
||||
const match = sites.value.find((site) => site.id === detail.center_id);
|
||||
return match?.name || "";
|
||||
});
|
||||
|
||||
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 () => {
|
||||
if (!expenseId) return;
|
||||
loading.value = true;
|
||||
errorMessage.value = "";
|
||||
try {
|
||||
const { data } = await getSpecialExpense(expenseId);
|
||||
Object.assign(detail, data?.data || {});
|
||||
} catch (e: any) {
|
||||
errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
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';
|
||||
};
|
||||
|
||||
const goEdit = () => router.push(`/fees/special/${expenseId}/edit`);
|
||||
const goBack = () => router.push("/fees/special");
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 6px 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-action-btn {
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.detail-card, .section-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ctms-border-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--ctms-text-main);
|
||||
border-left: 4px solid var(--el-color-primary);
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.status-badges {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.desc-label) {
|
||||
background-color: var(--ctms-bg-color-page) !important;
|
||||
color: var(--ctms-text-secondary);
|
||||
width: 150px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-family: var(--el-font-family);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-family: var(--el-font-family);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--ctms-text-placeholder);
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,495 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">{{ isEdit ? TEXT.modules.feeSpecials.editTitle : TEXT.modules.feeSpecials.newTitle }}</h1>
|
||||
<p class="page-subtitle">{{ TEXT.modules.feeSpecials.formSubtitle }}</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button @click="goBack" class="header-action-btn">{{ TEXT.common.actions.back }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StateError v-if="errorMessage" :description="errorMessage">
|
||||
<template #action>
|
||||
<el-button type="primary" @click="loadDetail">{{ TEXT.common.actions.retry }}</el-button>
|
||||
</template>
|
||||
</StateError>
|
||||
|
||||
<StateLoading v-else-if="loading" :rows="6" />
|
||||
|
||||
<template v-else>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="top">
|
||||
<el-card class="form-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="header-title">{{ TEXT.common.labels.basicInfo }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.common.fields.site">
|
||||
<el-select v-model="form.center_id" clearable :placeholder="TEXT.common.placeholders.select" class="full-width">
|
||||
<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-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.common.fields.occurDate" prop="happen_date">
|
||||
<el-date-picker v-model="form.happen_date" type="date" value-format="YYYY-MM-DD" class="full-width" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.common.fields.category" prop="category" required>
|
||||
<el-select v-model="form.category" :placeholder="TEXT.common.placeholders.select" class="full-width">
|
||||
<el-option v-for="option in categoryOptions" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.common.fields.amount" prop="amount" required>
|
||||
<el-input-number v-model="form.amount" :min="0" :precision="2" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="TEXT.common.fields.description">
|
||||
<el-input v-model="form.description" type="textarea" :rows="3" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card class="form-card section-margin" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="header-title">{{ TEXT.common.fields.status }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="status-section">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<div class="status-box">
|
||||
<div class="status-header">
|
||||
<span class="status-title">{{ TEXT.modules.feeSpecials.paidFlag }}</span>
|
||||
<el-switch v-model="form.is_paid" @change="onPaidToggle" />
|
||||
</div>
|
||||
<el-form-item :label="TEXT.common.fields.occurDate" :error="specialErrors.paid_date" class="status-form-item">
|
||||
<el-date-picker
|
||||
v-model="form.paid_date"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="TEXT.common.placeholders.select"
|
||||
:disabled="!form.is_paid"
|
||||
class="full-width"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="status-box">
|
||||
<div class="status-header">
|
||||
<span class="status-title">{{ TEXT.modules.feeSpecials.verifiedFlag }}</span>
|
||||
<el-switch v-model="form.is_verified" @change="onVerifiedToggle" />
|
||||
</div>
|
||||
<el-form-item :label="TEXT.common.fields.occurDate" :error="specialErrors.verified_date" class="status-form-item">
|
||||
<el-date-picker
|
||||
v-model="form.verified_date"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="TEXT.common.placeholders.select"
|
||||
:disabled="!form.is_verified"
|
||||
class="full-width"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-if="specialErrors.verification" class="payment-error">
|
||||
{{ specialErrors.verification }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="form-card section-margin" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="header-title">{{ TEXT.modules.feeSpecials.attachmentTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<FeeAttachmentPanel
|
||||
v-if="form.id"
|
||||
:entity-type="'special_expense'"
|
||||
:entity-id="form.id"
|
||||
:groups="attachmentGroups"
|
||||
/>
|
||||
|
||||
<StateEmpty v-else :description="TEXT.modules.feeSpecials.uploadHint" class="compact-empty" />
|
||||
</el-card>
|
||||
|
||||
<div class="footer-actions">
|
||||
<el-button @click="goBack">{{ TEXT.common.actions.cancel }}</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="submit" class="save-btn">
|
||||
{{ TEXT.common.actions.save }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { createSpecialExpense, getSpecialExpense, updateSpecialExpense } from "../../api/feeSpecials";
|
||||
import { fetchSites } from "../../api/sites";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import StateEmpty from "../../components/StateEmpty.vue";
|
||||
import StateError from "../../components/StateError.vue";
|
||||
import StateLoading from "../../components/StateLoading.vue";
|
||||
import FeeAttachmentPanel from "../../components/fees/FeeAttachmentPanel.vue";
|
||||
import { TEXT } from "../../locales";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
|
||||
const loading = ref(false);
|
||||
const saving = ref(false);
|
||||
const errorMessage = ref("");
|
||||
const sites = ref<any[]>([]);
|
||||
|
||||
const formRef = ref();
|
||||
const form = reactive({
|
||||
id: "",
|
||||
project_id: "",
|
||||
center_id: "",
|
||||
category: "travel",
|
||||
amount: 0,
|
||||
happen_date: "",
|
||||
description: "",
|
||||
is_paid: false,
|
||||
paid_date: "",
|
||||
is_verified: false,
|
||||
verified_date: "",
|
||||
});
|
||||
|
||||
const specialErrors = reactive({
|
||||
paid_date: "",
|
||||
verified_date: "",
|
||||
verification: "",
|
||||
});
|
||||
|
||||
const expenseId = computed(() => route.params.expenseId as string | undefined);
|
||||
const isEdit = computed(() => !!expenseId.value);
|
||||
|
||||
const attachmentGroups = [
|
||||
{
|
||||
key: "voucher",
|
||||
label: TEXT.modules.feeSpecials.attachmentVoucher,
|
||||
description: TEXT.modules.feeSpecials.attachmentVoucherDesc,
|
||||
emptyText: TEXT.modules.feeSpecials.attachmentVoucherEmpty,
|
||||
},
|
||||
{
|
||||
key: "invoice",
|
||||
label: TEXT.modules.feeSpecials.attachmentInvoice,
|
||||
description: TEXT.modules.feeSpecials.attachmentInvoiceDesc,
|
||||
emptyText: TEXT.modules.feeSpecials.attachmentInvoiceEmpty,
|
||||
},
|
||||
{
|
||||
key: "other",
|
||||
label: TEXT.modules.feeSpecials.attachmentOther,
|
||||
description: TEXT.modules.feeSpecials.attachmentOtherDesc,
|
||||
emptyText: TEXT.modules.feeSpecials.attachmentOtherEmpty,
|
||||
},
|
||||
];
|
||||
|
||||
const categoryOptions = Object.keys(TEXT.enums.feeSpecialCategory).map((value) => ({
|
||||
value,
|
||||
label: (TEXT.enums.feeSpecialCategory as any)[value],
|
||||
}));
|
||||
|
||||
const rules = {
|
||||
category: [{ required: true, message: TEXT.common.messages.required, trigger: "change" }],
|
||||
amount: [{ required: true, message: TEXT.common.messages.required, trigger: "blur" }],
|
||||
};
|
||||
|
||||
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 loadDetail = async () => {
|
||||
if (!expenseId.value) return;
|
||||
loading.value = true;
|
||||
errorMessage.value = "";
|
||||
resetSpecialErrors();
|
||||
try {
|
||||
const { data } = await getSpecialExpense(expenseId.value);
|
||||
const detail = data?.data || {};
|
||||
Object.assign(form, {
|
||||
id: detail.id || expenseId.value,
|
||||
project_id: detail.project_id || study.currentStudy?.id || "",
|
||||
center_id: detail.center_id || "",
|
||||
category: detail.category || "travel",
|
||||
amount: Number(detail.amount || 0),
|
||||
happen_date: detail.happen_date || "",
|
||||
description: detail.description || "",
|
||||
is_paid: !!detail.is_paid,
|
||||
paid_date: detail.paid_date || "",
|
||||
is_verified: !!detail.is_verified,
|
||||
verified_date: detail.verified_date || "",
|
||||
});
|
||||
} catch (e: any) {
|
||||
errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const resetSpecialErrors = () => {
|
||||
specialErrors.paid_date = "";
|
||||
specialErrors.verified_date = "";
|
||||
specialErrors.verification = "";
|
||||
};
|
||||
|
||||
const onPaidToggle = () => {
|
||||
if (!form.is_paid) {
|
||||
form.paid_date = "";
|
||||
form.is_verified = false;
|
||||
form.verified_date = "";
|
||||
}
|
||||
};
|
||||
|
||||
const onVerifiedToggle = () => {
|
||||
if (form.is_verified && !form.is_paid) {
|
||||
form.is_paid = true;
|
||||
}
|
||||
if (!form.is_verified) {
|
||||
form.verified_date = "";
|
||||
}
|
||||
};
|
||||
|
||||
const validateSpecial = () => {
|
||||
resetSpecialErrors();
|
||||
let ok = true;
|
||||
if (form.is_paid && !form.paid_date) {
|
||||
specialErrors.paid_date = TEXT.modules.feeSpecials.paidDateRequired;
|
||||
ok = false;
|
||||
}
|
||||
if (form.is_verified && !form.verified_date) {
|
||||
specialErrors.verified_date = TEXT.modules.feeSpecials.verifiedDateRequired;
|
||||
ok = false;
|
||||
}
|
||||
if (form.is_verified && !form.is_paid) {
|
||||
specialErrors.verification = TEXT.modules.feeSpecials.verifyRequiresPaid;
|
||||
ok = false;
|
||||
}
|
||||
return ok;
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (!study.currentStudy?.id) return;
|
||||
const formOk = await formRef.value?.validate?.().catch(() => false);
|
||||
if (!formOk) return;
|
||||
if (!validateSpecial()) {
|
||||
ElMessage.error(TEXT.modules.feeSpecials.validationFailed);
|
||||
return;
|
||||
}
|
||||
saving.value = true;
|
||||
try {
|
||||
const payload = {
|
||||
project_id: study.currentStudy.id,
|
||||
center_id: form.center_id || null,
|
||||
category: form.category,
|
||||
amount: Number(form.amount || 0),
|
||||
happen_date: form.happen_date || null,
|
||||
description: form.description || null,
|
||||
is_paid: !!form.is_paid,
|
||||
paid_date: form.paid_date || null,
|
||||
is_verified: !!form.is_verified,
|
||||
verified_date: form.verified_date || null,
|
||||
};
|
||||
const updatePayload = {
|
||||
center_id: payload.center_id,
|
||||
category: payload.category,
|
||||
amount: payload.amount,
|
||||
happen_date: payload.happen_date,
|
||||
description: payload.description,
|
||||
is_paid: payload.is_paid,
|
||||
paid_date: payload.paid_date,
|
||||
is_verified: payload.is_verified,
|
||||
verified_date: payload.verified_date,
|
||||
};
|
||||
|
||||
let savedId = expenseId.value || form.id;
|
||||
if (isEdit.value && savedId) {
|
||||
await updateSpecialExpense(savedId, updatePayload);
|
||||
} else {
|
||||
const { data } = await createSpecialExpense(payload);
|
||||
savedId = data?.data?.id;
|
||||
form.id = savedId || "";
|
||||
}
|
||||
|
||||
ElMessage.success(TEXT.common.messages.saveSuccess);
|
||||
if (savedId) {
|
||||
router.push(`/fees/special/${savedId}`);
|
||||
} else {
|
||||
goBack();
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const goBack = () => router.push("/fees/special");
|
||||
|
||||
onMounted(async () => {
|
||||
await loadSites();
|
||||
if (isEdit.value) {
|
||||
await loadDetail();
|
||||
} else {
|
||||
form.project_id = study.currentStudy?.id || "";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 6px 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.header-action-btn {
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ctms-border-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-margin {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--ctms-text-main);
|
||||
border-left: 4px solid var(--el-color-primary);
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-section {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.status-box {
|
||||
background-color: var(--ctms-bg-color-page);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--ctms-border-color);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.status-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-weight: 600;
|
||||
color: var(--ctms-text-main);
|
||||
}
|
||||
|
||||
.status-form-item {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.payment-error {
|
||||
color: var(--ctms-danger);
|
||||
font-size: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.compact-empty :deep(.state) {
|
||||
padding: 24px 0 !important;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
.compact-empty :deep(.state-icon) {
|
||||
font-size: 24px !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
.compact-empty :deep(.state-title) {
|
||||
font-size: 14px !important;
|
||||
font-weight: normal !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.compact-empty :deep(.state-desc) {
|
||||
margin: 0 !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -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