迁移合同费用通用附件
1、删除旧费用附件 API、CRUD、模型和专用前端面板，统一改用通用附件能力。 2、调整合同费用接口为 study_id 语义，并补充合同、凭证、发票等附件类型的权限映射。 3、将合同费用新建和编辑改为抽屉流程，详情页与列表页复用同一编辑组件。 4、补充数据库迁移、附件列表、合同费用抽屉和权限场景测试，覆盖旧权限移除与新流程。
This commit is contained in:
Cheng Zhou
@@ -0,0 +1,65 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
|
||||
const readDetail = () => readFileSync(resolve(__dirname, "./ContractFeeDetail.vue"), "utf8");
|
||||
|
||||
describe("ContractFeeDetail permissions", () => {
|
||||
it("suppresses optional site lookup permission errors on the detail page", () => {
|
||||
const source = readDetail();
|
||||
|
||||
expect(source).toContain('fetchSites(studyId.value, { limit: 500 }, { suppressErrorMessage: true })');
|
||||
});
|
||||
|
||||
it("opens the edit drawer on the detail page without navigating back to the list", () => {
|
||||
const source = readDetail();
|
||||
|
||||
expect(source).toContain("<ContractFeeEditorDrawer");
|
||||
expect(source).toContain("editorVisible.value = true");
|
||||
expect(source).toContain("const handleEditorSaved = () =>");
|
||||
expect(source).not.toContain('router.push({ path: "/fees/contracts"');
|
||||
expect(source).not.toContain("editContractId");
|
||||
});
|
||||
|
||||
it("renders contract fee attachments as one aggregated table with attachment type labels", () => {
|
||||
const source = readDetail();
|
||||
|
||||
expect(source).toContain("<AttachmentList");
|
||||
expect(source).toContain(":entity-groups=\"attachmentGroups\"");
|
||||
expect(source).toContain(":refresh-key=\"attachmentRefreshKey\"");
|
||||
expect(source).toContain("attachmentRefreshKey.value += 1");
|
||||
expect(source).not.toContain("<FeeAttachmentPanel");
|
||||
expect(source).toContain('entityType: "contract_fee_contract"');
|
||||
expect(source).toContain('entityType: "contract_fee_voucher"');
|
||||
expect(source).toContain('entityType: "contract_fee_invoice"');
|
||||
});
|
||||
|
||||
it("does not show attachment group descriptions on the detail page", () => {
|
||||
const source = readDetail();
|
||||
|
||||
expect(source).not.toContain("attachmentContractDesc");
|
||||
expect(source).not.toContain("attachmentVoucherDesc");
|
||||
expect(source).not.toContain("attachmentInvoiceDesc");
|
||||
});
|
||||
|
||||
it("keeps payment table columns evenly distributed with clear labels", () => {
|
||||
const source = readDetail();
|
||||
|
||||
expect(source).toContain(':label="TEXT.modules.feeContracts.paymentSeqColumn"');
|
||||
expect(source).not.toContain('width="20%"');
|
||||
expect(source.match(/min-width="180"/g)).toHaveLength(5);
|
||||
expect(source).not.toContain(".payment-table :deep(col:nth-child(-n + 5))");
|
||||
expect(source).toContain(':label="TEXT.common.fields.amount" align="left" header-align="left" min-width="180"');
|
||||
});
|
||||
|
||||
it("uses ten-thousand yuan as the only amount unit and hides currency", () => {
|
||||
const source = readDetail();
|
||||
|
||||
expect(source).toContain("formatAmountWan(detail.contract_amount)");
|
||||
expect(source).toContain("formatAmountWan(scope.row.amount)");
|
||||
expect(source).toContain('<span class="amount-unit">万</span>');
|
||||
expect(source).not.toContain("TEXT.common.fields.currency");
|
||||
expect(source).not.toContain("detail.currency");
|
||||
expect(source).not.toContain("currencyDefault");
|
||||
});
|
||||
});
|
||||
@@ -14,42 +14,43 @@
|
||||
<div class="card-header actions-header">
|
||||
<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-button v-if="canWrite" type="primary" :disabled="isReadOnly" @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>
|
||||
</template>
|
||||
<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>
|
||||
<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.common.fields.currency" label-class-name="desc-label">
|
||||
{{ detail.currency || TEXT.common.fields.currencyDefault }}
|
||||
</el-descriptions-item>
|
||||
<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>
|
||||
<div class="info-grid">
|
||||
<div class="info-item info-item--highlight">
|
||||
<span class="info-label">{{ TEXT.modules.feeContracts.contractAmount }}</span>
|
||||
<span class="info-value amount-value">{{ formatAmountWan(detail.contract_amount) }}<span class="amount-unit">万</span></span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">{{ TEXT.common.fields.site }}</span>
|
||||
<span class="info-value">{{ centerName || TEXT.common.fallback }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">{{ TEXT.common.fields.contractNo }}</span>
|
||||
<span class="info-value">{{ detail.contract_no || TEXT.common.fallback }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">{{ TEXT.common.fields.signedDate }}</span>
|
||||
<span class="info-value">{{ displayDate(detail.signed_date) }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">{{ TEXT.modules.feeContracts.contractCases }}</span>
|
||||
<span class="info-value">{{ detail.contract_cases ?? TEXT.common.fallback }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">{{ TEXT.modules.feeContracts.actualCases }}</span>
|
||||
<span class="info-value">{{ detail.actual_cases ?? TEXT.common.fallback }}</span>
|
||||
</div>
|
||||
<div class="info-item info-item--full">
|
||||
<span class="info-label">{{ TEXT.common.fields.remark }}</span>
|
||||
<span class="info-value">{{ detail.remark || TEXT.common.fallback }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="section-card unified-shell" shadow="never">
|
||||
@@ -59,17 +60,17 @@
|
||||
</div>
|
||||
</template>
|
||||
<el-table :data="detail.payments" style="width: 100%" :header-cell-style="{ background: '#f8f9fb' }" table-layout="fixed">
|
||||
<el-table-column :label="TEXT.modules.feeContracts.paymentSeq">
|
||||
<el-table-column :label="TEXT.modules.feeContracts.paymentSeqColumn" min-width="180">
|
||||
<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" align="right">
|
||||
<el-table-column :label="TEXT.common.fields.amount" align="left" header-align="left" min-width="180">
|
||||
<template #default="scope">
|
||||
<span class="amount-text">{{ formatAmountWan(scope.row.amount) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeContracts.paidFlag">
|
||||
<el-table-column :label="TEXT.modules.feeContracts.paidFlag" min-width="180">
|
||||
<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>
|
||||
@@ -78,7 +79,7 @@
|
||||
<span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeContracts.verifiedFlag">
|
||||
<el-table-column :label="TEXT.modules.feeContracts.verifiedFlag" min-width="180">
|
||||
<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>
|
||||
@@ -87,7 +88,7 @@
|
||||
<span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.common.fields.remark" show-overflow-tooltip>
|
||||
<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>
|
||||
<template #empty>
|
||||
@@ -102,21 +103,31 @@
|
||||
<span class="header-title">{{ TEXT.modules.feeContracts.attachmentTitle }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<FeeAttachmentPanel
|
||||
<AttachmentList
|
||||
v-if="contractId"
|
||||
:entity-type="'contract_fee'"
|
||||
:study-id="studyId"
|
||||
entity-type="contract_fee"
|
||||
:entity-id="contractId"
|
||||
:groups="attachmentGroups"
|
||||
:entity-groups="attachmentGroups"
|
||||
:readonly="isReadOnly"
|
||||
:hide-uploader="true"
|
||||
:refresh-key="attachmentRefreshKey"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<ContractFeeEditorDrawer
|
||||
v-model="editorVisible"
|
||||
:contract-id="contractId"
|
||||
:sites="sites"
|
||||
@saved="handleEditorSaved"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useRoute } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Edit } from "@element-plus/icons-vue";
|
||||
import { getContractFee } from "../../api/feeContracts";
|
||||
@@ -126,23 +137,25 @@ import { usePermission } from "../../utils/permission";
|
||||
import { displayDate } from "../../utils/display";
|
||||
import StateError from "../../components/StateError.vue";
|
||||
import StateLoading from "../../components/StateLoading.vue";
|
||||
import FeeAttachmentPanel from "../../components/fees/FeeAttachmentPanel.vue";
|
||||
import AttachmentList from "../../components/attachments/AttachmentList.vue";
|
||||
import ContractFeeEditorDrawer from "./ContractFeeEditorDrawer.vue";
|
||||
import { TEXT } from "../../locales";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
const { can } = usePermission();
|
||||
const canWrite = computed(() => can("fees.contract.update"));
|
||||
|
||||
const contractId = route.params.contractId as string;
|
||||
const studyId = computed(() => study.currentStudy?.id || "");
|
||||
const loading = ref(false);
|
||||
const editorVisible = ref(false);
|
||||
const errorMessage = ref("");
|
||||
const attachmentRefreshKey = ref(0);
|
||||
const detail = reactive<any>({
|
||||
contract_no: "",
|
||||
signed_date: "",
|
||||
contract_amount: 0,
|
||||
currency: "CNY",
|
||||
remark: "",
|
||||
contract_cases: 0,
|
||||
actual_cases: null,
|
||||
@@ -162,20 +175,20 @@ const attachmentGroups = [
|
||||
{
|
||||
key: "contract",
|
||||
label: TEXT.modules.feeContracts.attachmentContract,
|
||||
description: TEXT.modules.feeContracts.attachmentContractDesc,
|
||||
emptyText: TEXT.modules.feeContracts.attachmentContractEmpty,
|
||||
entityType: "contract_fee_contract",
|
||||
},
|
||||
{
|
||||
key: "voucher",
|
||||
label: TEXT.modules.feeContracts.attachmentVoucher,
|
||||
description: TEXT.modules.feeContracts.attachmentVoucherDesc,
|
||||
emptyText: TEXT.modules.feeContracts.attachmentVoucherEmpty,
|
||||
entityType: "contract_fee_voucher",
|
||||
},
|
||||
{
|
||||
key: "invoice",
|
||||
label: TEXT.modules.feeContracts.attachmentInvoice,
|
||||
description: TEXT.modules.feeContracts.attachmentInvoiceDesc,
|
||||
emptyText: TEXT.modules.feeContracts.attachmentInvoiceEmpty,
|
||||
entityType: "contract_fee_invoice",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -185,10 +198,9 @@ const centerName = computed(() => {
|
||||
});
|
||||
|
||||
const loadSites = async () => {
|
||||
const studyId = study.currentStudy?.id;
|
||||
if (!studyId) return;
|
||||
if (!studyId.value) return;
|
||||
try {
|
||||
const { data } = await fetchSites(studyId, { limit: 500 });
|
||||
const { data } = await fetchSites(studyId.value, { limit: 500 }, { suppressErrorMessage: true });
|
||||
sites.value = Array.isArray(data) ? data : data.items || [];
|
||||
} catch {
|
||||
sites.value = [];
|
||||
@@ -203,11 +215,11 @@ const load = async () => {
|
||||
const { data } = await getContractFee(contractId);
|
||||
Object.assign(detail, data?.data || {});
|
||||
if (!Array.isArray(detail.payments)) detail.payments = [];
|
||||
|
||||
// 同步中心名称到面包屑
|
||||
if (centerName.value) {
|
||||
study.setViewContext({ siteName: centerName.value });
|
||||
}
|
||||
const siteName = centerName.value || TEXT.common.fallback;
|
||||
study.setViewContext({
|
||||
siteName,
|
||||
pageTitle: detail.contract_no || TEXT.menu.feeContracts,
|
||||
});
|
||||
} catch (e: any) {
|
||||
errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
|
||||
} finally {
|
||||
@@ -222,13 +234,21 @@ const formatAmountWan = (value: any) => {
|
||||
};
|
||||
|
||||
const goEdit = () => {
|
||||
if (!canWrite.value) {
|
||||
ElMessage.warning("权限不足");
|
||||
return;
|
||||
}
|
||||
if (isReadOnly.value) {
|
||||
ElMessage.warning("中心已停用");
|
||||
return;
|
||||
}
|
||||
router.push(`/fees/contracts/${contractId}/edit`);
|
||||
editorVisible.value = true;
|
||||
};
|
||||
|
||||
const handleEditorSaved = () => {
|
||||
load();
|
||||
attachmentRefreshKey.value += 1;
|
||||
};
|
||||
const goBack = () => router.push("/fees/contracts");
|
||||
|
||||
onMounted(async () => {
|
||||
await loadSites();
|
||||
@@ -240,7 +260,8 @@ onMounted(async () => {
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
gap: 16px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@@ -249,14 +270,14 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.header-action-btn {
|
||||
height: 36px;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.detail-card, .section-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ctms-border-color);
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--unified-shell-divider, #eaf0f8);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -275,23 +296,72 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--ctms-text-main);
|
||||
border-left: 4px solid var(--el-color-primary);
|
||||
padding-left: 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--unified-title-color, #0f2345);
|
||||
border-left: 3px solid var(--el-color-primary);
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.custom-descriptions :deep(.desc-label) {
|
||||
background-color: var(--ctms-bg-color-page) !important;
|
||||
color: var(--ctms-text-secondary);
|
||||
width: 150px;
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 8px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.info-item:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.info-item--highlight {
|
||||
background: linear-gradient(135deg, #f0f6ff 0%, #eef3fb 100%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.info-item--highlight:hover {
|
||||
background: linear-gradient(135deg, #e8f1ff 0%, #e6edfa 100%);
|
||||
}
|
||||
|
||||
.info-item--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--unified-muted-color, #6f84a8);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.amount-text {
|
||||
font-family: var(--el-font-family);
|
||||
font-weight: 600;
|
||||
.info-value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--ctms-text-main);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.amount-unit {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--unified-muted-color, #6f84a8);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.seq-tag {
|
||||
@@ -313,17 +383,31 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--ctms-text-placeholder);
|
||||
color: var(--ctms-text-placeholder, #94a3b8);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.table-empty {
|
||||
min-height: 220px;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #8a97ab;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.info-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
|
||||
const readDrawer = () => readFileSync(resolve(__dirname, "./ContractFeeEditorDrawer.vue"), "utf8");
|
||||
const readLocale = () => readFileSync(resolve(__dirname, "../../locales/zh-CN.ts"), "utf8");
|
||||
|
||||
describe("ContractFeeEditorDrawer attachments", () => {
|
||||
it("uses upload-card mode for attachments instead of the detail table", () => {
|
||||
const source = readDrawer();
|
||||
|
||||
expect(source).toContain('ref="attachmentPanelRef"');
|
||||
expect(source).toContain("<AttachmentList");
|
||||
expect(source).toContain(":entity-groups=\"attachmentGroups\"");
|
||||
expect(source).not.toContain("PendingAttachmentUpload");
|
||||
expect(source).not.toContain("FeeAttachmentPanel");
|
||||
expect(source).not.toContain("attachmentContractDesc");
|
||||
expect(source).not.toContain("attachmentVoucherDesc");
|
||||
expect(source).not.toContain("attachmentInvoiceDesc");
|
||||
});
|
||||
|
||||
it("uploads selected attachments only after the form save succeeds", () => {
|
||||
const source = readDrawer();
|
||||
|
||||
expect(source).toContain("const attachmentPanelRef = ref<InstanceType<typeof AttachmentList> | null>(null)");
|
||||
expect(source).toContain("await attachmentPanelRef.value?.uploadPending(savedId)");
|
||||
expect(source).toContain("attachments: attachmentPanelRef.value?.pendingSnapshot() || []");
|
||||
expect(source.indexOf("await attachmentPanelRef.value?.uploadPending(savedId)")).toBeLessThan(
|
||||
source.indexOf('emit("update:modelValue", false)')
|
||||
);
|
||||
});
|
||||
|
||||
it("shows attachment upload cards while creating a new contract fee", () => {
|
||||
const source = readDrawer();
|
||||
|
||||
expect(source).toContain('class="form-group attachment-form-group"');
|
||||
expect(source).toContain(':entity-id="form.id"');
|
||||
expect(source).toContain("<AttachmentList");
|
||||
expect(source).not.toContain('<div v-if="form.id" class="form-group">');
|
||||
});
|
||||
|
||||
it("labels the section as attachments instead of contract attachments", () => {
|
||||
const source = readLocale();
|
||||
|
||||
expect(source).toContain('attachmentTitle: "附件"');
|
||||
expect(source).not.toContain('attachmentTitle: "合同附件"');
|
||||
});
|
||||
|
||||
it("uses a payment grid that keeps date pickers inside their columns", () => {
|
||||
const source = readDrawer();
|
||||
|
||||
expect(source).toContain('class="payment-grid"');
|
||||
expect(source).toContain('class="payment-field payment-field--amount"');
|
||||
expect(source).toContain('class="payment-field payment-field--status"');
|
||||
expect(source).toContain('class="payment-field payment-field--remark"');
|
||||
expect(source).toContain("grid-template-columns: minmax(180px, 0.9fr) repeat(2, minmax(220px, 1fr));");
|
||||
expect(source).toContain("min-width: 0;");
|
||||
expect(source).toContain(".status-picker :deep(.el-date-editor.el-input)");
|
||||
});
|
||||
|
||||
it("uses ten-thousand yuan as the only amount unit and removes currency selection", () => {
|
||||
const source = readDrawer();
|
||||
|
||||
expect(source).toContain(':label="`${TEXT.modules.feeContracts.contractAmount}（万元）`"');
|
||||
expect(source).toContain(':label="`${TEXT.common.fields.amount}（万元）`"');
|
||||
expect(source).toContain("contract_amount: Number(detail.contract_amount || 0) / 10000");
|
||||
expect(source).toContain("amount: Number(payment.amount || 0) / 10000");
|
||||
expect(source).toContain("contract_amount: Number(form.contract_amount || 0) * 10000");
|
||||
expect(source).toContain("amount: Number(payment.amount || 0) * 10000");
|
||||
expect(source).not.toContain("prop=\"currency\"");
|
||||
expect(source).not.toContain("form.currency");
|
||||
expect(source).not.toContain("payload.currency");
|
||||
expect(source).not.toContain("currency:");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,795 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
v-if="modelValue"
|
||||
:model-value="modelValue"
|
||||
direction="rtl"
|
||||
size="720px"
|
||||
:close-on-click-modal="true"
|
||||
:before-close="drawerDirtyGuard.beforeClose"
|
||||
:show-close="false"
|
||||
class="contract-fee-editor-drawer"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
>
|
||||
<template #header>
|
||||
<div class="editor-header">
|
||||
<div class="editor-title">{{ contractId ? TEXT.modules.feeContracts.editTitle : TEXT.modules.feeContracts.newTitle }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<StateError v-if="drawerErrorMessage" :description="drawerErrorMessage">
|
||||
<template #action>
|
||||
<el-button type="primary" @click="reloadEditingDetail">{{ TEXT.common.actions.retry }}</el-button>
|
||||
</template>
|
||||
</StateError>
|
||||
|
||||
<StateLoading v-else-if="drawerLoading" :rows="6" />
|
||||
|
||||
<el-form v-else ref="formRef" :model="form" :rules="rules" label-position="top" class="contract-fee-form">
|
||||
<div class="form-group">
|
||||
<div class="form-group-title">
|
||||
<span class="group-dot group-dot-basic"></span>
|
||||
{{ TEXT.modules.feeContracts.contractInfoTitle }}
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.common.fields.site" prop="center_id">
|
||||
<el-select
|
||||
v-model="form.center_id"
|
||||
:disabled="!!contractId || isFormReadOnly"
|
||||
: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"
|
||||
:disabled="!site.is_active"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.common.fields.contractNo" prop="contract_no">
|
||||
<el-input v-model="form.contract_no" :disabled="isFormReadOnly" :placeholder="TEXT.common.placeholders.input" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="TEXT.common.fields.signedDate" prop="signed_date">
|
||||
<el-date-picker
|
||||
v-model="form.signed_date"
|
||||
:disabled="isFormReadOnly"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="TEXT.common.placeholders.select"
|
||||
class="full-width"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="`${TEXT.modules.feeContracts.contractAmount}（万元）`" prop="contract_amount">
|
||||
<el-input-number
|
||||
v-model="form.contract_amount"
|
||||
:disabled="isFormReadOnly"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="1"
|
||||
class="full-width"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.contractCases" prop="contract_cases">
|
||||
<el-input-number v-model="form.contract_cases" :disabled="isFormReadOnly" :min="0" :step="1" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.actualCases" prop="actual_cases">
|
||||
<el-input-number v-model="form.actual_cases" :disabled="isFormReadOnly" :min="0" :step="1" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item :label="TEXT.common.fields.remark" prop="remark">
|
||||
<el-input v-model="form.remark" :disabled="isFormReadOnly" type="textarea" :rows="3" :placeholder="TEXT.common.placeholders.input" />
|
||||
</el-form-item>
|
||||
<div v-if="selectedSiteInactive" class="inactive-hint">
|
||||
<span class="hint-icon">!</span>
|
||||
<span>中心已停用，当前记录不可编辑</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group-title action-title">
|
||||
<span>
|
||||
<span class="group-dot group-dot-payment"></span>
|
||||
{{ TEXT.modules.feeContracts.paymentTitle }}
|
||||
</span>
|
||||
<el-button type="primary" size="small" :disabled="isFormReadOnly" @click="addPayment">
|
||||
<el-icon class="el-icon--left"><Plus /></el-icon>
|
||||
{{ TEXT.common.actions.add }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="payments.length === 0" class="section-empty">
|
||||
{{ TEXT.modules.feeContracts.paymentEmpty }}
|
||||
</div>
|
||||
|
||||
<div v-else class="payment-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" :disabled="isFormReadOnly" @click="removePayment(index)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="payment-grid">
|
||||
<div class="payment-field payment-field--amount">
|
||||
<el-form-item :label="`${TEXT.common.fields.amount}（万元）`" :error="paymentErrors[index]?.amount">
|
||||
<el-input-number v-model="payment.amount" :disabled="isFormReadOnly" :min="0" :precision="2" class="full-width" controls-position="right" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="payment-field payment-field--status">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.paidFlag" :error="paymentErrors[index]?.paid_date">
|
||||
<div class="status-control">
|
||||
<el-checkbox v-model="payment.is_paid" :disabled="isFormReadOnly" @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"
|
||||
:disabled="isFormReadOnly"
|
||||
class="status-picker"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="payment-field payment-field--status">
|
||||
<el-form-item :label="TEXT.modules.feeContracts.verifiedFlag" :error="paymentErrors[index]?.verified_date">
|
||||
<div class="status-control">
|
||||
<el-checkbox v-model="payment.is_verified" :disabled="isFormReadOnly" @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"
|
||||
:disabled="isFormReadOnly"
|
||||
class="status-picker"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="payment-field payment-field--remark">
|
||||
<el-form-item :label="TEXT.common.fields.remark" class="mb-0">
|
||||
<el-input v-model="payment.remark" :disabled="isFormReadOnly" type="textarea" :rows="2" :placeholder="TEXT.common.placeholders.input" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="paymentErrors[index]?.verification" class="payment-error">
|
||||
{{ paymentErrors[index].verification }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group attachment-form-group">
|
||||
<div class="form-group-title">
|
||||
<span class="group-dot group-dot-attachment"></span>
|
||||
{{ TEXT.modules.feeContracts.attachmentTitle }}
|
||||
</div>
|
||||
<AttachmentList
|
||||
ref="attachmentPanelRef"
|
||||
:study-id="currentStudyId"
|
||||
:entity-type="'contract_fee'"
|
||||
:entity-id="form.id"
|
||||
:entity-groups="attachmentGroups"
|
||||
:mode="'upload'"
|
||||
:readonly="isFormReadOnly"
|
||||
/>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="drawer-footer">
|
||||
<el-button @click="emit('update:modelValue', false)">{{ TEXT.common.actions.cancel }}</el-button>
|
||||
<el-button type="primary" :loading="saving" :disabled="isFormReadOnly || drawerLoading" @click="saveForm">{{ TEXT.common.actions.save }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from "vue";
|
||||
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
||||
import { Delete, Plus } from "@element-plus/icons-vue";
|
||||
import {
|
||||
createContractFee,
|
||||
createContractPayment,
|
||||
deleteContractPayment,
|
||||
getContractFee,
|
||||
updateContractFee,
|
||||
updateContractPayment,
|
||||
} from "../../api/feeContracts";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import { usePermission } from "../../utils/permission";
|
||||
import { useDrawerDirtyGuard } from "../../utils/drawerDirtyGuard";
|
||||
import AttachmentList from "../../components/attachments/AttachmentList.vue";
|
||||
import StateError from "../../components/StateError.vue";
|
||||
import StateLoading from "../../components/StateLoading.vue";
|
||||
import { TEXT } from "../../locales";
|
||||
|
||||
type ContractFormModel = {
|
||||
id: string;
|
||||
study_id: string;
|
||||
center_id: string;
|
||||
contract_no: string;
|
||||
signed_date: string;
|
||||
contract_amount: number;
|
||||
remark: string;
|
||||
contract_cases: number;
|
||||
actual_cases: number | null;
|
||||
};
|
||||
|
||||
type PaymentFormModel = {
|
||||
id?: string;
|
||||
tempId: string;
|
||||
amount: number;
|
||||
paid_date: string;
|
||||
verified_date: string;
|
||||
is_paid: boolean;
|
||||
is_verified: boolean;
|
||||
remark: string;
|
||||
};
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
contractId?: string;
|
||||
sites: any[];
|
||||
initialCenterId?: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
"update:modelValue": [value: boolean];
|
||||
saved: [contractId: string];
|
||||
}>();
|
||||
|
||||
const study = useStudyStore();
|
||||
const { can } = usePermission();
|
||||
const canCreate = computed(() => can("fees.contract.create"));
|
||||
const canUpdate = computed(() => can("fees.contract.update"));
|
||||
const currentStudyId = computed(() => study.currentStudy?.id || "");
|
||||
const drawerLoading = ref(false);
|
||||
const drawerErrorMessage = ref("");
|
||||
const saving = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
const attachmentPanelRef = ref<InstanceType<typeof AttachmentList> | null>(null);
|
||||
|
||||
const siteActiveMap = computed(() => {
|
||||
const map: Record<string, boolean> = {};
|
||||
props.sites.forEach((site) => {
|
||||
if (site?.id) map[site.id] = !!site.is_active;
|
||||
});
|
||||
return map;
|
||||
});
|
||||
|
||||
const defaultForm: ContractFormModel = {
|
||||
id: "",
|
||||
study_id: "",
|
||||
center_id: "",
|
||||
contract_no: "",
|
||||
signed_date: "",
|
||||
contract_amount: 0,
|
||||
remark: "",
|
||||
contract_cases: 0,
|
||||
actual_cases: null,
|
||||
};
|
||||
|
||||
const form = reactive<ContractFormModel>({ ...defaultForm });
|
||||
const payments = ref<PaymentFormModel[]>([]);
|
||||
const removedPaymentIds = ref<string[]>([]);
|
||||
const paymentErrors = ref<Record<string, string>[]>([]);
|
||||
const drawerDirtyGuard = useDrawerDirtyGuard(() => ({
|
||||
form,
|
||||
payments: payments.value,
|
||||
removedPaymentIds: removedPaymentIds.value,
|
||||
attachments: attachmentPanelRef.value?.pendingSnapshot() || [],
|
||||
}));
|
||||
const selectedSiteInactive = computed(() => !!props.contractId && !!form.center_id && siteActiveMap.value[form.center_id] === false);
|
||||
const isFormReadOnly = computed(() => (props.contractId ? !canUpdate.value : !canCreate.value) || selectedSiteInactive.value);
|
||||
|
||||
const attachmentGroups = [
|
||||
{
|
||||
entityType: "contract_fee_contract",
|
||||
label: TEXT.modules.feeContracts.attachmentContract,
|
||||
},
|
||||
{
|
||||
entityType: "contract_fee_voucher",
|
||||
label: TEXT.modules.feeContracts.attachmentVoucher,
|
||||
},
|
||||
{
|
||||
entityType: "contract_fee_invoice",
|
||||
label: TEXT.modules.feeContracts.attachmentInvoice,
|
||||
},
|
||||
];
|
||||
|
||||
const rules: FormRules<ContractFormModel> = {
|
||||
center_id: [{ required: true, message: TEXT.common.messages.required, trigger: "change" }],
|
||||
contract_amount: [{ required: true, type: "number", message: TEXT.common.messages.required, trigger: "change" }],
|
||||
contract_cases: [{ required: true, type: "number", message: TEXT.common.messages.required, trigger: "change" }],
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
Object.assign(form, { ...defaultForm, study_id: study.currentStudy?.id || "", center_id: props.initialCenterId || "" });
|
||||
payments.value = [];
|
||||
removedPaymentIds.value = [];
|
||||
paymentErrors.value = [];
|
||||
drawerErrorMessage.value = "";
|
||||
formRef.value?.clearValidate();
|
||||
};
|
||||
|
||||
const normalizePayment = (payment: any): PaymentFormModel => ({
|
||||
id: payment.id,
|
||||
tempId: payment.id || `${Date.now()}-${Math.random()}`,
|
||||
amount: Number(payment.amount || 0) / 10000,
|
||||
paid_date: payment.paid_date || "",
|
||||
verified_date: payment.verified_date || "",
|
||||
is_paid: !!payment.is_paid,
|
||||
is_verified: !!payment.is_verified,
|
||||
remark: payment.remark || "",
|
||||
});
|
||||
|
||||
const loadEditingDetail = async (id: string) => {
|
||||
drawerLoading.value = true;
|
||||
drawerErrorMessage.value = "";
|
||||
try {
|
||||
const { data } = await getContractFee(id);
|
||||
const detail = data?.data || {};
|
||||
Object.assign(form, {
|
||||
id: detail.id || id,
|
||||
study_id: detail.study_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,
|
||||
remark: detail.remark || "",
|
||||
contract_cases: Number(detail.contract_cases || 0),
|
||||
actual_cases: detail.actual_cases ?? null,
|
||||
});
|
||||
payments.value = (detail.payments || []).map(normalizePayment);
|
||||
removedPaymentIds.value = [];
|
||||
paymentErrors.value = [];
|
||||
formRef.value?.clearValidate();
|
||||
drawerDirtyGuard.syncBaseline();
|
||||
} catch (e: any) {
|
||||
drawerErrorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
|
||||
} finally {
|
||||
drawerLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const reloadEditingDetail = () => {
|
||||
if (props.contractId) loadEditingDetail(props.contractId);
|
||||
};
|
||||
|
||||
const addPayment = () => {
|
||||
if (isFormReadOnly.value) {
|
||||
ElMessage.warning(selectedSiteInactive.value ? "中心已停用" : "权限不足");
|
||||
return;
|
||||
}
|
||||
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) => {
|
||||
if (isFormReadOnly.value) {
|
||||
ElMessage.warning(selectedSiteInactive.value ? "中心已停用" : "权限不足");
|
||||
return;
|
||||
}
|
||||
const payment = payments.value[index];
|
||||
if (payment?.id) {
|
||||
removedPaymentIds.value.push(payment.id);
|
||||
}
|
||||
payments.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const onPaidToggle = (payment: PaymentFormModel) => {
|
||||
if (isFormReadOnly.value) return;
|
||||
if (!payment.is_paid) {
|
||||
payment.paid_date = "";
|
||||
payment.is_verified = false;
|
||||
payment.verified_date = "";
|
||||
}
|
||||
};
|
||||
|
||||
const onVerifiedToggle = (payment: PaymentFormModel) => {
|
||||
if (isFormReadOnly.value) return;
|
||||
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 saveForm = async () => {
|
||||
const studyId = study.currentStudy?.id;
|
||||
if (!studyId) return;
|
||||
if (isFormReadOnly.value) {
|
||||
ElMessage.warning(selectedSiteInactive.value ? "中心已停用" : "权限不足");
|
||||
return;
|
||||
}
|
||||
if (form.center_id && siteActiveMap.value[form.center_id] === false) {
|
||||
ElMessage.warning("中心已停用");
|
||||
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 = {
|
||||
study_id: studyId,
|
||||
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,
|
||||
remark: form.remark || null,
|
||||
contract_cases: Number(form.contract_cases || 0),
|
||||
actual_cases: form.actual_cases === null ? null : Number(form.actual_cases),
|
||||
};
|
||||
const updatePayload = {
|
||||
contract_amount: payload.contract_amount,
|
||||
contract_no: payload.contract_no,
|
||||
signed_date: payload.signed_date,
|
||||
remark: payload.remark,
|
||||
contract_cases: payload.contract_cases,
|
||||
actual_cases: payload.actual_cases,
|
||||
};
|
||||
|
||||
let savedId = props.contractId || form.id;
|
||||
if (props.contractId && 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) * 10000,
|
||||
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;
|
||||
payment.tempId = payment.id || payment.tempId;
|
||||
}
|
||||
}
|
||||
await attachmentPanelRef.value?.uploadPending(savedId);
|
||||
}
|
||||
|
||||
drawerDirtyGuard.syncBaseline();
|
||||
emit("update:modelValue", false);
|
||||
emit("saved", savedId || "");
|
||||
ElMessage.success(TEXT.common.messages.saveSuccess);
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || e?.message || TEXT.common.messages.saveFailed);
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
async (visible) => {
|
||||
if (!visible) return;
|
||||
resetForm();
|
||||
if (props.contractId) {
|
||||
await loadEditingDetail(props.contractId);
|
||||
} else {
|
||||
drawerDirtyGuard.syncBaseline();
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.contract-fee-editor-drawer > .el-drawer__header) {
|
||||
margin-bottom: 0;
|
||||
padding: 22px 20px 8px;
|
||||
}
|
||||
|
||||
:deep(.contract-fee-editor-drawer > .el-drawer__body) {
|
||||
padding: 0 20px 4px;
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.contract-fee-form {
|
||||
padding: 0 4px 0 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
border: 1px solid #e8eef6;
|
||||
border-radius: 10px;
|
||||
padding: 16px 18px 8px;
|
||||
background: #fbfcfe;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.form-group:hover {
|
||||
border-color: #d0dced;
|
||||
}
|
||||
|
||||
.form-group + .form-group {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.form-group-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
color: #1a3560;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-title {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.action-title > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.group-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.group-dot-basic {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
.group-dot-payment {
|
||||
background: #f0ad2c;
|
||||
}
|
||||
|
||||
.group-dot-attachment {
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.inactive-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: #fff7d6;
|
||||
border: 1px solid #fde68a;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #92400e;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hint-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #f59e0b;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-empty {
|
||||
padding: 28px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #8a97ab;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.payment-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.payment-item {
|
||||
border: 1px solid #e8eef6;
|
||||
border-radius: 8px;
|
||||
padding: 18px 20px 16px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
|
||||
box-shadow: 0 8px 20px rgba(38, 73, 119, 0.05);
|
||||
}
|
||||
|
||||
.payment-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.payment-seq {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.seq-circle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background-color: #3f5f7a;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.seq-text {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--ctms-text-main);
|
||||
}
|
||||
|
||||
.payment-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 0.9fr) repeat(2, minmax(220px, 1fr));
|
||||
gap: 14px 18px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.payment-field {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.payment-field--remark {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.status-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.status-picker {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.status-picker :deep(.el-date-editor.el-input),
|
||||
.status-picker :deep(.el-input__wrapper) {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.payment-error {
|
||||
color: var(--ctms-danger);
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.contract-fee-form :deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.contract-fee-form :deep(.el-form-item__label) {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #4a6283;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.payment-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.payment-field--remark {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +0,0 @@
|
||||
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;");
|
||||
});
|
||||
});
|
||||
@@ -1,693 +0,0 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<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 unified-shell" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header actions-header">
|
||||
<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 :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"
|
||||
:disabled="isEdit || isReadOnly"
|
||||
: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"
|
||||
:disabled="!site.is_active"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<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"
|
||||
:disabled="isReadOnly"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="1000"
|
||||
class="full-width"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<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 :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 :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="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>
|
||||
</el-card>
|
||||
|
||||
<el-card class="form-card section-margin attachment-card unified-shell" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header actions-header">
|
||||
<span class="header-title">{{ TEXT.modules.feeContracts.paymentTitle }}</span>
|
||||
<el-button type="primary" :disabled="isReadOnly" @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">
|
||||
{{ 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" :disabled="isReadOnly" @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" :disabled="isReadOnly" :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" :disabled="isReadOnly" @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"
|
||||
:disabled="isReadOnly"
|
||||
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" :disabled="isReadOnly" @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"
|
||||
:disabled="isReadOnly"
|
||||
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" :disabled="isReadOnly" 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 unified-shell" 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"
|
||||
:readonly="isReadOnly"
|
||||
/>
|
||||
|
||||
<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" :disabled="isReadOnly" @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 { 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);
|
||||
const errorMessage = ref("");
|
||||
const sites = ref<any[]>([]);
|
||||
const siteActiveMap = computed(() => {
|
||||
const map: Record<string, boolean> = {};
|
||||
sites.value.forEach((site) => {
|
||||
if (site?.id) map[site.id] = !!site.is_active;
|
||||
});
|
||||
return map;
|
||||
});
|
||||
const formRef = ref();
|
||||
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,
|
||||
});
|
||||
|
||||
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 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]);
|
||||
});
|
||||
const isReadOnly = computed(() => !canMutate.value || (isEdit.value && !!form.center_id && siteActiveMap.value[form.center_id] === false));
|
||||
|
||||
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_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,
|
||||
});
|
||||
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 = () => {
|
||||
if (isReadOnly.value) {
|
||||
ElMessage.warning("中心已停用");
|
||||
return;
|
||||
}
|
||||
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) => {
|
||||
if (isReadOnly.value) {
|
||||
ElMessage.warning("中心已停用");
|
||||
return;
|
||||
}
|
||||
const payment = payments.value[index];
|
||||
if (payment?.id) {
|
||||
removedPaymentIds.value.push(payment.id);
|
||||
}
|
||||
payments.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const onPaidToggle = (payment: any) => {
|
||||
if (isReadOnly.value) return;
|
||||
if (!payment.is_paid) {
|
||||
payment.paid_date = "";
|
||||
payment.is_verified = false;
|
||||
payment.verified_date = "";
|
||||
}
|
||||
};
|
||||
|
||||
const onVerifiedToggle = (payment: any) => {
|
||||
if (isReadOnly.value) return;
|
||||
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;
|
||||
if (!canMutate.value) {
|
||||
ElMessage.warning("权限不足");
|
||||
return;
|
||||
}
|
||||
if (isReadOnly.value) {
|
||||
ElMessage.warning("中心已停用");
|
||||
return;
|
||||
}
|
||||
if (form.center_id && siteActiveMap.value[form.center_id] === false) {
|
||||
ElMessage.warning("中心已停用");
|
||||
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_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),
|
||||
};
|
||||
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,
|
||||
};
|
||||
|
||||
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: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--ctms-border-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-margin {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.attachment-card :deep(.el-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.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: 28px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #8a97ab;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.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,13 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { TEXT } from "../../locales";
|
||||
|
||||
describe("contract fee attachment labels", () => {
|
||||
it("uses a concise attachment section title", () => {
|
||||
expect(TEXT.modules.feeContracts.attachmentTitle).toBe("附件");
|
||||
});
|
||||
|
||||
it("uses a clear payment sequence column label", () => {
|
||||
expect(TEXT.modules.feeContracts.paymentSeqColumn).toBe("付款期次");
|
||||
expect(TEXT.modules.feeContracts.paymentSeq).toBe("第");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
|
||||
const read = (relativePath: string) => readFileSync(resolve(__dirname, relativePath), "utf8");
|
||||
|
||||
describe("Contract fee project permissions", () => {
|
||||
it("hides list create/delete controls when the matching backend operation is not allowed", () => {
|
||||
const source = read("./ContractFees.vue");
|
||||
|
||||
expect(source).toContain('v-if="canCreate"');
|
||||
expect(source).toContain('v-if="canDelete"');
|
||||
expect(source).toContain("if (!canCreate.value)");
|
||||
expect(source).toContain("if (!canDelete.value)");
|
||||
expect(source).not.toContain(':disabled="!canCreate"');
|
||||
expect(source).not.toContain(':disabled="!canDelete || isInactiveSite(scope.row.center_id)"');
|
||||
});
|
||||
|
||||
it("hides detail edit controls and blocks direct navigation without update permission", () => {
|
||||
const source = read("./ContractFeeDetail.vue");
|
||||
|
||||
expect(source).toContain('v-if="canWrite"');
|
||||
expect(source).toContain("if (!canWrite.value)");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
|
||||
const readSource = () => readFileSync(resolve(__dirname, "./ContractFees.vue"), "utf8");
|
||||
|
||||
describe("ContractFees.vue", () => {
|
||||
it("keeps the contract fee table full-width with evenly distributed columns", () => {
|
||||
const source = readSource();
|
||||
|
||||
expect(source).toContain('style="width: 100%"');
|
||||
expect(source).toContain('table-layout="fixed"');
|
||||
expect(source).toContain('prop="center_name" :label="TEXT.common.fields.site" show-overflow-tooltip');
|
||||
expect(source).toContain(':label="TEXT.modules.feeContracts.contractAmount" align="left"');
|
||||
expect(source).not.toContain(':label="TEXT.modules.feeContracts.contractAmount" align="right"');
|
||||
expect(source).toContain(':label="TEXT.modules.feeContracts.caseProgress" align="center"');
|
||||
expect(source).toContain(':label="TEXT.modules.feeContracts.paidSummary"');
|
||||
expect(source).toContain(':label="TEXT.modules.feeContracts.verifySummary"');
|
||||
expect(source).toContain(':label="TEXT.modules.feeContracts.recentDates"');
|
||||
expect(source).toContain(':label="TEXT.common.labels.actions" align="center"');
|
||||
expect(source).not.toContain('width="170"');
|
||||
expect(source).not.toContain('width="150"');
|
||||
expect(source).not.toContain('width="190"');
|
||||
expect(source).not.toContain('width="110"');
|
||||
});
|
||||
|
||||
it("uses the material drawer pattern for creating and editing contract fees", () => {
|
||||
const source = readSource();
|
||||
|
||||
expect(source).toContain("<ContractFeeEditorDrawer");
|
||||
expect(source).toContain('import ContractFeeEditorDrawer from "./ContractFeeEditorDrawer.vue"');
|
||||
expect(source).toContain('@click="openCreate"');
|
||||
expect(source).toContain('@click.stop="openEdit(scope.row)"');
|
||||
expect(source).not.toContain("useDrawerDirtyGuard");
|
||||
expect(source).not.toContain('router.push("/fees/contracts/new")');
|
||||
expect(source).not.toContain("`/fees/contracts/${contractId.value}`");
|
||||
});
|
||||
});
|
||||
@@ -80,7 +80,7 @@
|
||||
<el-button @click="resetFilters">{{ TEXT.common.actions.reset }}</el-button>
|
||||
</div>
|
||||
<div class="filter-spacer"></div>
|
||||
<el-button type="primary" :disabled="!canCreate" @click="goNew" class="header-action-btn">
|
||||
<el-button v-if="canCreate" type="primary" @click="openCreate" class="header-action-btn">
|
||||
<el-icon class="el-icon--left"><Plus /></el-icon>
|
||||
{{ TEXT.modules.feeContracts.newTitle }}
|
||||
</el-button>
|
||||
@@ -95,26 +95,26 @@
|
||||
class="contract-table"
|
||||
table-layout="fixed"
|
||||
>
|
||||
<el-table-column prop="center_name" :label="TEXT.common.fields.site" width="170" show-overflow-tooltip>
|
||||
<el-table-column prop="center_name" :label="TEXT.common.fields.site" show-overflow-tooltip>
|
||||
<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="150" align="right">
|
||||
<el-table-column :label="TEXT.modules.feeContracts.contractAmount" align="left">
|
||||
<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" width="170" align="center">
|
||||
<el-table-column :label="TEXT.modules.feeContracts.caseProgress" 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" width="190">
|
||||
<el-table-column :label="TEXT.modules.feeContracts.paidSummary">
|
||||
<template #default="scope">
|
||||
<div class="summary-line">
|
||||
<span>{{ TEXT.modules.feeContracts.paidTotal }}</span>
|
||||
@@ -127,7 +127,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeContracts.verifySummary" width="190">
|
||||
<el-table-column :label="TEXT.modules.feeContracts.verifySummary">
|
||||
<template #default="scope">
|
||||
<div class="summary-line">
|
||||
<span>{{ TEXT.modules.feeContracts.verifiedTotal }}</span>
|
||||
@@ -140,7 +140,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.modules.feeContracts.recentDates" width="170">
|
||||
<el-table-column :label="TEXT.modules.feeContracts.recentDates">
|
||||
<template #default="scope">
|
||||
<div class="date-line">
|
||||
<span class="date-label">{{ TEXT.modules.feeContracts.lastPaid }}</span>
|
||||
@@ -152,13 +152,24 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="TEXT.common.labels.actions" width="110">
|
||||
<el-table-column v-if="canUpdate || canDelete" :label="TEXT.common.labels.actions" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-if="canUpdate"
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
:disabled="isInactiveSite(scope.row.center_id)"
|
||||
@click.stop="openEdit(scope.row)"
|
||||
>
|
||||
{{ TEXT.common.actions.edit }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="canDelete"
|
||||
link
|
||||
type="danger"
|
||||
size="small"
|
||||
:disabled="!canDelete || isInactiveSite(scope.row.center_id)"
|
||||
:disabled="isInactiveSite(scope.row.center_id)"
|
||||
@click.stop="remove(scope.row)"
|
||||
>
|
||||
{{ TEXT.common.actions.delete }}
|
||||
@@ -171,6 +182,14 @@
|
||||
</el-table>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<ContractFeeEditorDrawer
|
||||
v-model="drawerVisible"
|
||||
:contract-id="editingId || undefined"
|
||||
:sites="sites"
|
||||
:initial-center-id="study.currentSite?.id || ''"
|
||||
@saved="handleEditorSaved"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -187,18 +206,22 @@ import { displayDate } from "../../utils/display";
|
||||
import StateLoading from "../../components/StateLoading.vue";
|
||||
import StateError from "../../components/StateError.vue";
|
||||
import KpiCard from "../../components/KpiCard.vue";
|
||||
import ContractFeeEditorDrawer from "./ContractFeeEditorDrawer.vue";
|
||||
import { TEXT } from "../../locales";
|
||||
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
const { can } = usePermission();
|
||||
const canCreate = computed(() => can("fees.contract.create"));
|
||||
const canUpdate = computed(() => can("fees.contract.update"));
|
||||
const canDelete = computed(() => can("fees.contract.delete"));
|
||||
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref("");
|
||||
const contracts = ref<any[]>([]);
|
||||
const sites = ref<any[]>([]);
|
||||
const drawerVisible = ref(false);
|
||||
const editingId = ref("");
|
||||
const siteActiveMap = computed(() => {
|
||||
const map: Record<string, boolean> = {};
|
||||
sites.value.forEach((site) => {
|
||||
@@ -269,12 +292,12 @@ const loadSites = async () => {
|
||||
};
|
||||
|
||||
const load = async () => {
|
||||
const projectId = study.currentStudy?.id;
|
||||
if (!projectId) return;
|
||||
const studyId = study.currentStudy?.id;
|
||||
if (!studyId) return;
|
||||
loading.value = true;
|
||||
errorMessage.value = "";
|
||||
try {
|
||||
const { data } = await listContractFees({ projectId });
|
||||
const { data } = await listContractFees({ study_id: studyId });
|
||||
contracts.value = data?.data || [];
|
||||
} catch (e: any) {
|
||||
errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
|
||||
@@ -288,7 +311,29 @@ const resetFilters = () => {
|
||||
filters.q = "";
|
||||
};
|
||||
|
||||
const goNew = () => router.push("/fees/contracts/new");
|
||||
const openCreate = () => {
|
||||
if (!canCreate.value) {
|
||||
ElMessage.warning("权限不足");
|
||||
return;
|
||||
}
|
||||
editingId.value = "";
|
||||
drawerVisible.value = true;
|
||||
};
|
||||
|
||||
const openEdit = async (row: any) => {
|
||||
if (!row?.id) return;
|
||||
if (!canUpdate.value) {
|
||||
ElMessage.warning("权限不足");
|
||||
return;
|
||||
}
|
||||
if (isInactiveSite(row?.center_id)) {
|
||||
ElMessage.warning("中心已停用");
|
||||
return;
|
||||
}
|
||||
editingId.value = row.id;
|
||||
drawerVisible.value = true;
|
||||
};
|
||||
|
||||
const goDetail = (id: string) => router.push(`/fees/contracts/${id}`);
|
||||
const onRowClick = (row: any) => {
|
||||
if (!row?.id) return;
|
||||
@@ -296,7 +341,11 @@ const onRowClick = (row: any) => {
|
||||
};
|
||||
|
||||
const remove = async (row: any) => {
|
||||
if (!row?.id || !canDelete.value) return;
|
||||
if (!row?.id) return;
|
||||
if (!canDelete.value) {
|
||||
ElMessage.warning("权限不足");
|
||||
return;
|
||||
}
|
||||
if (isInactiveSite(row?.center_id)) {
|
||||
ElMessage.warning("中心已停用");
|
||||
return;
|
||||
@@ -312,6 +361,10 @@ const remove = async (row: any) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditorSaved = async () => {
|
||||
await load();
|
||||
};
|
||||
|
||||
const displayCases = (contractCases: any, actualCases: any) => {
|
||||
const contractValue = Number(contractCases ?? 0);
|
||||
const actualValue = Number(actualCases ?? 0);
|
||||
@@ -340,6 +393,17 @@ watch(() => study.currentSite, (newSite: any) => {
|
||||
filters.centerId = newSite?.id || "";
|
||||
});
|
||||
|
||||
watch(
|
||||
() => study.currentStudy?.id,
|
||||
async () => {
|
||||
filters.centerId = study.currentSite?.id || "";
|
||||
filters.q = "";
|
||||
drawerVisible.value = false;
|
||||
await loadSites();
|
||||
await load();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await loadSites();
|
||||
load();
|
||||
@@ -457,6 +521,7 @@ onMounted(async () => {
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user