zhouchengcheng/ctms
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

整合合同费用并移除旧财务合同

Browse Source
This commit is contained in:
Cheng Zhou
2026-05-28 10:49:08 +08:00
parent 2c85742040
commit 8da7fc715c
20 changed files with 400 additions and 948 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/feeContracts.ts
+8 -4
View File
@@ -4,19 +4,23 @@ import type { FeeApiResponse } from "../types/api";
export interface ContractFeePayload {
project_id: string;
center_id: string;
contract_no?: string | null;
signed_date?: string | null;
contract_amount: number;
currency?: string;
remark?: string | null;
contract_cases: number;
actual_cases?: number | null;
settlement_amount?: number | null;
final_payment_amount?: number | null;
}
export interface ContractFeeUpdatePayload {
contract_no?: string | null;
signed_date?: string | null;
contract_amount?: number;
currency?: string;
remark?: string | null;
contract_cases?: number;
actual_cases?: number | null;
settlement_amount?: number | null;
final_payment_amount?: number | null;
}
export interface ContractPaymentPayload {
frontend/src/api/financeContracts.ts
-16
View File
@@ -1,16 +0,0 @@
import { apiDelete, apiGet, apiPatch, apiPost } from "./axios";
export const listFinanceContracts = (studyId: string, params?: Record<string, any>) =>
apiGet(`/api/v1/studies/${studyId}/finance/contracts`, { params });
export const getFinanceContract = (studyId: string, contractId: string) =>
apiGet(`/api/v1/studies/${studyId}/finance/contracts/${contractId}`);
export const createFinanceContract = (studyId: string, payload: Record<string, any>) =>
apiPost(`/api/v1/studies/${studyId}/finance/contracts`, payload);
export const updateFinanceContract = (studyId: string, contractId: string, payload: Record<string, any>) =>
apiPatch(`/api/v1/studies/${studyId}/finance/contracts/${contractId}`, payload);
export const deleteFinanceContract = (studyId: string, contractId: string) =>
apiDelete(`/api/v1/studies/${studyId}/finance/contracts/${contractId}`);
frontend/src/views/fees/ContractFeeDetail.vue
+16 -8
View File
@@ -12,7 +12,7 @@
<el-card class="detail-card unified-shell" shadow="never">
<template #header>
<div class="card-header actions-header">
<span class="header-title">{{ TEXT.common.labels.basicInfo }}</span>
<span class="header-title">{{ TEXT.modules.feeContracts.contractInfoTitle }}</span>
<div class="actions">
<el-button type="primary" :disabled="!canWrite || isReadOnly" @click="goEdit" class="header-action-btn copy-btn">
<el-icon class="el-icon--left"><Edit /></el-icon>
@@ -24,10 +24,16 @@
</div>
</div>
</template>
<el-descriptions :column="2" border class="custom-descriptions">
<el-descriptions :column="4" 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.common.fields.contractNo" label-class-name="desc-label">
{{ detail.contract_no || TEXT.common.fallback }}
</el-descriptions-item>
<el-descriptions-item :label="TEXT.common.fields.signedDate" label-class-name="desc-label">
{{ displayDate(detail.signed_date) }}
</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>
@@ -37,11 +43,11 @@
<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 :label="TEXT.common.fields.currency" label-class-name="desc-label">
{{ detail.currency || TEXT.common.fields.currencyDefault }}
</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 :label="TEXT.common.fields.remark" label-class-name="desc-label" :span="4">
{{ detail.remark || TEXT.common.fallback }}
</el-descriptions-item>
</el-descriptions>
</el-card>
@@ -133,11 +139,13 @@ const contractId = route.params.contractId as string;
const loading = ref(false);
const errorMessage = ref("");
const detail = reactive<any>({
contract_no: "",
signed_date: "",
contract_amount: 0,
currency: "CNY",
remark: "",
contract_cases: 0,
actual_cases: null,
settlement_amount: null,
final_payment_amount: null,
payments: [],
});
const sites = ref<any[]>([]);
frontend/src/views/fees/ContractFeeForm.test.ts
+33
View File
@@ -0,0 +1,33 @@
import { describe, expect, it } from "vitest";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
const readSource = () => readFileSync(resolve(__dirname, "./ContractFeeForm.vue"), "utf8");
describe("ContractFeeForm.vue", () => {
it("keeps contract fields in a four-column contract info section", () => {
const source = readSource();
expect(source).toContain("contractInfoTitle");
expect(source).not.toContain("feeSettlementTitle");
expect(source).not.toContain("settlement_amount");
expect(source).not.toContain("final_payment_amount");
expect(source).toContain(':lg="6"');
expect(source).toContain('prop="contract_no"');
expect(source).toContain('prop="signed_date"');
expect(source).toContain('prop="currency"');
expect(source).toContain('prop="remark"');
expect(source).toContain("form.contract_no");
expect(source).toContain("form.signed_date");
expect(source).toContain("form.currency");
expect(source).toContain("form.remark");
});
it("allows system admins to edit without project permission matrix entries", () => {
const source = readSource();
expect(source).toContain("useAuthStore");
expect(source).toContain("isSystemAdmin");
expect(source).toContain("if (isAdmin.value) return true;");
});
});
frontend/src/views/fees/ContractFeeForm.vue
+58 -37
View File
@@ -13,12 +13,12 @@
<el-card class="form-card unified-shell" shadow="never">
<template #header>
<div class="card-header actions-header">
<span class="header-title">{{ TEXT.common.labels.basicInfo }}</span>
<span class="header-title">{{ TEXT.modules.feeContracts.contractInfoTitle }}</span>
<el-button @click="goBack">{{ TEXT.common.actions.back }}</el-button>
</div>
</template>
<el-row :gutter="24">
<el-col :span="12">
<el-col :xs="24" :sm="12" :lg="6">
<el-form-item :label="TEXT.common.fields.site" prop="center_id" required>
<el-select
v-model="form.center_id"
@@ -36,7 +36,24 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :xs="24" :sm="12" :lg="6">
<el-form-item :label="TEXT.common.fields.contractNo" prop="contract_no">
<el-input v-model="form.contract_no" :disabled="isReadOnly" :placeholder="TEXT.common.placeholders.input" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :lg="6">
<el-form-item :label="TEXT.common.fields.signedDate" prop="signed_date">
<el-date-picker
v-model="form.signed_date"
:disabled="isReadOnly"
type="date"
value-format="YYYY-MM-DD"
:placeholder="TEXT.common.placeholders.select"
class="full-width"
/>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :lg="6">
<el-form-item :label="TEXT.modules.feeContracts.contractAmount" prop="contract_amount" required>
<el-input-number
v-model="form.contract_amount"
@@ -49,40 +66,28 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :xs="24" :sm="12" :lg="6">
<el-form-item :label="TEXT.modules.feeContracts.contractCases" prop="contract_cases" required>
<el-input-number v-model="form.contract_cases" :disabled="isReadOnly" :min="0" :step="1" class="full-width" controls-position="right" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :xs="24" :sm="12" :lg="6">
<el-form-item :label="TEXT.modules.feeContracts.actualCases" prop="actual_cases">
<el-input-number v-model="form.actual_cases" :disabled="isReadOnly" :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"
:disabled="isReadOnly"
:min="0"
:precision="2"
:step="1000"
class="full-width"
controls-position="right"
/>
<el-col :xs="24" :sm="12" :lg="6">
<el-form-item :label="TEXT.common.fields.currency" prop="currency">
<el-select v-model="form.currency" :disabled="isReadOnly" :placeholder="TEXT.common.placeholders.select" class="full-width">
<el-option label="CNY" value="CNY" />
<el-option label="USD" value="USD" />
<el-option label="EUR" value="EUR" />
</el-select>
</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"
:disabled="isReadOnly"
:min="0"
:precision="2"
:step="1000"
class="full-width"
controls-position="right"
/>
<el-col :span="24">
<el-form-item :label="TEXT.common.fields.remark" prop="remark">
<el-input v-model="form.remark" :disabled="isReadOnly" type="textarea" :rows="2" :placeholder="TEXT.common.placeholders.input" />
</el-form-item>
</el-col>
</el-row>
@@ -100,7 +105,7 @@
</template>
<div v-if="payments.length === 0" class="section-empty">
<StateEmpty :description="TEXT.modules.feeContracts.paymentEmpty" />
{{ TEXT.modules.feeContracts.paymentEmpty }}
</div>
<div v-else class="payment-list">
@@ -217,16 +222,19 @@ import {
} from "../../api/feeContracts";
import { fetchSites } from "../../api/sites";
import { useStudyStore } from "../../store/study";
import { useAuthStore } from "../../store/auth";
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";
import { isApiPermissionAllowed } from "../../utils/apiPermissionValue";
import { isSystemAdmin } from "../../utils/roles";
const route = useRoute();
const router = useRouter();
const study = useStudyStore();
const auth = useAuthStore();
const loading = ref(false);
const saving = ref(false);
@@ -244,11 +252,13 @@ const form = reactive({
id: "",
project_id: "",
center_id: "",
contract_no: "",
signed_date: "",
contract_amount: 0,
currency: "CNY",
remark: "",
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[]>([]);
@@ -258,7 +268,9 @@ const paymentErrors = ref<Record<string, string>[]>([]);
const contractId = computed(() => route.params.contractId as string | undefined);
const isEdit = computed(() => !!contractId.value);
const projectRole = computed(() => study.currentStudyRole || (study.currentStudy as any)?.role_in_study || "");
const isAdmin = computed(() => isSystemAdmin(auth.user));
const canMutate = computed(() => {
if (isAdmin.value) return true;
const operationKey = isEdit.value ? "fees_contracts:update" : "fees_contracts:create";
return isApiPermissionAllowed(study.currentPermissions?.[projectRole.value]?.[operationKey]);
});
@@ -315,11 +327,13 @@ const loadDetail = async () => {
id: detail.id || contractId.value,
project_id: detail.project_id || study.currentStudy?.id || "",
center_id: detail.center_id || "",
contract_no: detail.contract_no || "",
signed_date: detail.signed_date || "",
contract_amount: Number(detail.contract_amount || 0) / 10000,
currency: detail.currency || "CNY",
remark: detail.remark || "",
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,
@@ -437,18 +451,22 @@ const submit = async () => {
const payload = {
project_id: study.currentStudy.id,
center_id: form.center_id,
contract_no: form.contract_no || null,
signed_date: form.signed_date || null,
contract_amount: Number(form.contract_amount || 0) * 10000,
currency: form.currency || "CNY",
remark: form.remark || null,
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_no: payload.contract_no,
signed_date: payload.signed_date,
currency: payload.currency,
remark: payload.remark,
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;
@@ -553,9 +571,12 @@ onMounted(async () => {
}
.section-empty {
padding: 24px 0;
padding: 28px 0;
display: flex;
justify-content: center;
color: #8a97ab;
font-size: 14px;
line-height: 1.6;
}
.payment-list {
frontend/src/views/finance/ContractDetail.vue
-120
View File
@@ -1,120 +0,0 @@
<template>
<div class="page">
<div class="unified-shell">
<section class="unified-section" v-loading="loading">
<div class="unified-section-header">
<div class="ctms-section-title">{{ TEXT.modules.financeContracts.detailTitle }}</div>
<div class="ctms-section-actions">
<el-button type="primary" :disabled="isReadOnly" @click="goEdit">{{ TEXT.common.actions.edit }}</el-button>
<el-button @click="goBack">{{ TEXT.common.actions.back }}</el-button>
</div>
</div>
<el-descriptions :column="2" border>
<el-descriptions-item :label="TEXT.common.fields.site">{{ detail.site_name || TEXT.common.fallback }}</el-descriptions-item>
<el-descriptions-item :label="TEXT.common.fields.contractNo">{{ detail.contract_no || TEXT.common.fallback }}</el-descriptions-item>
<el-descriptions-item :label="TEXT.common.fields.signedDate">{{ displayDate(detail.signed_date) }}</el-descriptions-item>
<el-descriptions-item :label="TEXT.common.fields.amount">
{{ detail.amount }} {{ detail.currency || TEXT.common.fields.currencyDefault }}
</el-descriptions-item>
<el-descriptions-item :label="TEXT.common.fields.remark" :span="2">{{ detail.remark || TEXT.common.fallback }}</el-descriptions-item>
</el-descriptions>
</section>
<section class="unified-section attachment-section">
<AttachmentList
v-if="contractId"
:study-id="studyId"
entity-type="finance_contract"
:entity-id="contractId"
:readonly="isReadOnly"
/>
</section>
</div>
</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 { useStudyStore } from "../../store/study";
import { getFinanceContract } from "../../api/financeContracts";
import { fetchSites } from "../../api/sites";
import { displayDate } from "../../utils/display";
import AttachmentList from "../../components/attachments/AttachmentList.vue";
import { TEXT } from "../../locales";
const route = useRoute();
const router = useRouter();
const study = useStudyStore();
const loading = ref(false);
const contractId = route.params.contractId as string;
const studyId = study.currentStudy?.id || "";
const sites = ref<any[]>([]);
const detail = reactive<any>({
site_name: "",
contract_no: "",
signed_date: "",
amount: "",
currency: "",
remark: "",
});
const siteActiveMap = computed(() => {
const map: Record<string, boolean> = {};
sites.value.forEach((site) => {
if (site?.name) map[site.name] = !!site.is_active;
});
return map;
});
const isReadOnly = computed(() => !!detail.site_name && siteActiveMap.value[detail.site_name] === false);
const loadSites = async () => {
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 (!studyId || !contractId) return;
loading.value = true;
try {
const { data } = await getFinanceContract(studyId, contractId);
Object.assign(detail, data);
} catch (e: any) {
ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
} finally {
loading.value = false;
}
};
const goEdit = () => {
if (isReadOnly.value) {
ElMessage.warning("中心已停用");
return;
}
router.push(`/finance/contracts/${contractId}/edit`);
};
const goBack = () => router.push("/finance/contracts");
onMounted(async () => {
await loadSites();
load();
});
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
gap: 0;
}
.attachment-section {
padding: 0;
}
</style>
frontend/src/views/finance/ContractForm.vue
-184
View File
@@ -1,184 +0,0 @@
<template>
<div class="page">
<div class="unified-shell">
<section class="unified-section">
<div class="unified-section-header">
<div class="ctms-section-title">{{ isEdit ? TEXT.modules.financeContracts.editTitle : TEXT.modules.financeContracts.newTitle }}</div>
<div class="ctms-section-actions">
<el-button @click="goBack">{{ TEXT.common.actions.back }}</el-button>
</div>
</div>
<el-form ref="formRef" :model="form" label-width="110px">
<el-form-item :label="TEXT.common.fields.site" prop="site_name" required>
<el-input v-model="form.site_name" :disabled="isReadOnly" :placeholder="TEXT.common.placeholders.input + TEXT.common.fields.site" />
</el-form-item>
<el-form-item :label="TEXT.common.fields.contractNo" prop="contract_no" required>
<el-input v-model="form.contract_no" :disabled="isReadOnly" :placeholder="TEXT.common.placeholders.input + TEXT.common.fields.contractNo" />
</el-form-item>
<el-form-item :label="TEXT.common.fields.signedDate">
<el-date-picker v-model="form.signed_date" :disabled="isReadOnly" type="date" value-format="YYYY-MM-DD" :placeholder="TEXT.common.placeholders.select" />
</el-form-item>
<el-form-item :label="TEXT.common.fields.amount" prop="amount" required>
<el-input-number v-model="form.amount" :disabled="isReadOnly" :min="0" :precision="2" :step="1000" />
</el-form-item>
<el-form-item :label="TEXT.common.fields.currency">
<el-select v-model="form.currency" :disabled="isReadOnly" :placeholder="TEXT.common.placeholders.select">
<el-option label="CNY" value="CNY" />
<el-option label="USD" value="USD" />
<el-option label="EUR" value="EUR" />
</el-select>
</el-form-item>
<el-form-item :label="TEXT.common.fields.remark">
<el-input v-model="form.remark" :disabled="isReadOnly" type="textarea" :rows="3" :placeholder="TEXT.common.placeholders.input" />
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="saving" :disabled="isReadOnly" @click="submit">{{ TEXT.common.actions.save }}</el-button>
<el-button @click="goBack">{{ TEXT.common.actions.cancel }}</el-button>
</el-form-item>
</el-form>
</section>
<section class="unified-section">
<AttachmentList
v-if="isEdit && contractId"
:study-id="studyId"
entity-type="finance_contract"
:entity-id="contractId"
:readonly="isReadOnly"
/>
<StateEmpty v-else :description="TEXT.modules.financeContracts.uploadHint" />
</section>
</div>
</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 { useStudyStore } from "../../store/study";
import { createFinanceContract, getFinanceContract, updateFinanceContract } from "../../api/financeContracts";
import { fetchSites } from "../../api/sites";
import AttachmentList from "../../components/attachments/AttachmentList.vue";
import StateEmpty from "../../components/StateEmpty.vue";
import { TEXT } from "../../locales";
import { isApiPermissionAllowed } from "../../utils/apiPermissionValue";
const route = useRoute();
const router = useRouter();
const study = useStudyStore();
const saving = ref(false);
const sites = ref<any[]>([]);
const contractId = computed(() => route.params.contractId as string | undefined);
const isEdit = computed(() => !!contractId.value);
const studyId = computed(() => study.currentStudy?.id || "");
const projectRole = computed(() => study.currentStudyRole || (study.currentStudy as any)?.role_in_study || "");
const canMutate = computed(() => {
const operationKey = isEdit.value ? "finance_contracts:update" : "finance_contracts:create";
return isApiPermissionAllowed(study.currentPermissions?.[projectRole.value]?.[operationKey]);
});
const form = reactive({
site_name: "",
contract_no: "",
signed_date: "",
amount: 0,
currency: "CNY",
remark: "",
});
const siteActiveMap = computed(() => {
const map: Record<string, boolean> = {};
sites.value.forEach((site) => {
if (site?.name) map[site.name] = !!site.is_active;
});
return map;
});
const isReadOnly = computed(() => !canMutate.value || (isEdit.value && !!form.site_name && siteActiveMap.value[form.site_name] === false));
const loadSites = async () => {
if (!studyId.value) return;
try {
const { data } = await fetchSites(studyId.value, { limit: 500 });
sites.value = Array.isArray(data) ? data : data.items || [];
} catch {
sites.value = [];
}
};
const load = async () => {
if (!isEdit.value || !studyId.value || !contractId.value) return;
try {
const { data } = await getFinanceContract(studyId.value, contractId.value);
Object.assign(form, {
site_name: data.site_name || "",
contract_no: data.contract_no || "",
signed_date: data.signed_date || "",
amount: Number(data.amount || 0),
currency: data.currency || "CNY",
remark: data.remark || "",
});
} catch (e: any) {
ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
}
};
const submit = async () => {
if (!studyId.value) return;
if (!canMutate.value) {
ElMessage.warning("权限不足");
return;
}
if (isReadOnly.value) {
ElMessage.warning("中心已停用");
return;
}
if (!form.site_name) {
ElMessage.warning(TEXT.common.messages.required);
return;
}
if (siteActiveMap.value[form.site_name] === false) {
ElMessage.warning("中心已停用");
return;
}
saving.value = true;
try {
const payload = {
site_name: form.site_name,
contract_no: form.contract_no,
signed_date: form.signed_date || null,
amount: form.amount,
currency: form.currency,
remark: form.remark || null,
};
if (isEdit.value && contractId.value) {
await updateFinanceContract(studyId.value, contractId.value, payload);
ElMessage.success(TEXT.common.messages.saveSuccess);
router.push(`/finance/contracts/${contractId.value}`);
} else {
const { data } = await createFinanceContract(studyId.value, payload);
ElMessage.success(TEXT.common.messages.createSuccess);
router.push(`/finance/contracts/${data.id}`);
}
} catch (e: any) {
ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
} finally {
saving.value = false;
}
};
const goBack = () => router.push("/finance/contracts");
onMounted(async () => {
await loadSites();
load();
});
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
gap: 0;
}
</style>
frontend/src/views/ia/FinanceContracts.vue
-249
View File
@@ -1,249 +0,0 @@
<template>
<div class="page">
<div class="main-content-flat unified-shell">
<div class="filter-container unified-action-bar">
<el-form :inline="true" :model="filters" class="filter-form">
<div class="filter-item-form">
<el-input
v-model="filters.site_name"
:placeholder="TEXT.common.fields.site"
clearable
class="filter-input-comp"
/>
</div>
<div class="filter-item-form">
<el-input
v-model="filters.contract_no"
:placeholder="TEXT.common.fields.contractNo"
clearable
class="filter-input-comp"
/>
</div>
<div class="filter-item-form">
<el-button @click="resetFilters">{{ TEXT.common.actions.reset }}</el-button>
</div>
<div class="filter-spacer"></div>
<el-button type="primary" @click="goNew">
{{ TEXT.modules.financeContracts.newTitle }}
</el-button>
</el-form>
</div>
<div class="unified-section table-section">
<el-table
:data="sortedItems"
v-loading="loading"
style="width: 100%"
class="ctms-table"
@row-click="onRowClick"
:row-class-name="contractRowClass"
table-layout="fixed"
>
<el-table-column prop="site_name" :label="TEXT.common.fields.site" show-overflow-tooltip />
<el-table-column prop="contract_no" :label="TEXT.common.fields.contractNo" show-overflow-tooltip />
<el-table-column prop="signed_date" :label="TEXT.common.fields.signedDate">
<template #default="scope">
{{ displayDate(scope.row.signed_date) }}
</template>
</el-table-column>
<el-table-column :label="TEXT.common.fields.amount">
<template #default="scope">
{{ scope.row.amount }} {{ scope.row.currency || TEXT.common.fields.currencyDefault }}
</template>
</el-table-column>
<el-table-column prop="updated_at" :label="TEXT.common.labels.updatedAt" show-overflow-tooltip>
<template #default="scope">
{{ displayDateTime(scope.row.updated_at) }}
</template>
</el-table-column>
<el-table-column :label="TEXT.common.labels.actions" width="120">
<template #default="scope">
<el-button
link
type="danger"
size="small"
:disabled="isInactiveSite(scope.row.site_name)"
@click.stop="remove(scope.row)"
>
{{ TEXT.common.actions.delete }}
</el-button>
</template>
</el-table-column>
<template #empty>
<div v-if="!loading" class="table-empty">{{ TEXT.modules.financeContracts.empty }}</div>
</template>
</el-table>
</div>
</div>
</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 { useStudyStore } from "../../store/study";
import { listFinanceContracts, deleteFinanceContract } from "../../api/financeContracts";
import { fetchSites } from "../../api/sites";
import { displayDate, displayDateTime } from "../../utils/display";
import { TEXT } from "../../locales";
const router = useRouter();
const study = useStudyStore();
const loading = ref(false);
const items = ref<any[]>([]);
const sites = ref<any[]>([]);
const filters = reactive({
site_name: "",
contract_no: "",
});
const siteActiveMap = computed(() => {
const map: Record<string, boolean> = {};
sites.value.forEach((site) => {
if (site?.name) map[site.name] = !!site.is_active;
});
return map;
});
const isInactiveSite = (siteName?: string) => !!siteName && siteActiveMap.value[siteName] === false;
const contractRowClass = ({ row }: { row: any }) =>
`${row?.id ? "clickable-row" : ""}${isInactiveSite(row?.site_name) ? " row-inactive" : ""}`.trim();
const filteredItems = computed(() => {
const siteKeyword = filters.site_name.trim().toLowerCase();
const contractKeyword = filters.contract_no.trim().toLowerCase();
return items.value.filter((item) => {
if (siteKeyword && !String(item?.site_name || "").toLowerCase().includes(siteKeyword)) return false;
if (contractKeyword && !String(item?.contract_no || "").toLowerCase().includes(contractKeyword)) return false;
return true;
});
});
const sortedItems = computed(() =>
[...filteredItems.value].sort((a, b) => Number(isInactiveSite(a?.site_name)) - Number(isInactiveSite(b?.site_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 () => {
const studyId = study.currentStudy?.id;
if (!studyId) return;
loading.value = true;
try {
const { data } = await listFinanceContracts(studyId, {}) as any;
items.value = Array.isArray(data) ? data : data.items || [];
} catch (e: any) {
ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
} finally {
loading.value = false;
}
};
const resetFilters = () => {
filters.site_name = "";
filters.contract_no = "";
};
const goNew = () => router.push("/finance/contracts/new");
const goDetail = (id: string) => router.push(`/finance/contracts/${id}`);
const onRowClick = (row: any) => {
if (!row?.id) return;
goDetail(row.id);
};
const remove = async (row: any) => {
const studyId = study.currentStudy?.id;
if (!studyId) return;
if (isInactiveSite(row?.site_name)) {
ElMessage.warning("中心已停用");
return;
}
const ok = await ElMessageBox.confirm(TEXT.common.confirm.delete, TEXT.common.labels.tips).catch(() => null);
if (!ok) return;
try {
await deleteFinanceContract(studyId, row.id);
ElMessage.success(TEXT.common.messages.deleteSuccess);
load();
} catch (e: any) {
ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed);
}
};
onMounted(async () => {
await loadSites();
load();
});
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
}
.main-content-flat {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.filter-form {
display: flex;
width: 100%;
gap: 8px;
align-items: center;
}
.filter-item-form {
margin-bottom: 0 !important;
margin-right: 0 !important;
}
.filter-input-comp {
width: 160px;
}
.filter-spacer {
flex: 1;
}
.table-section {
padding-top: 0;
padding-bottom: 0;
}
.ctms-table :deep(.el-table__inner-wrapper::before) {
display: none;
}
.table-empty {
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
color: #8a97ab;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
}
</style>
<style>
.row-inactive td {
color: var(--ctms-text-secondary);
background-color: #fff7d6 !important;
}
.row-inactive .el-tag {
opacity: 0.6;
}
</style>