前端完善

This commit is contained in:
2026-05-29 15:26:25 +08:00
parent dcbd86f8f8
commit 2fba4fbba7
12 changed files with 1829 additions and 736 deletions
+260 -218
View File
@@ -10,23 +10,17 @@
<a-row :gutter="16" style="width: 100%">
<a-col :md="6" :sm="24">
<a-form-item label="合同名称">
<a-input
size="small"
v-model:value="queryParam.contractName"
allow-clear
placeholder="请输入合同名称"
/>
<a-input v-model:value="queryParam.contractName" allow-clear placeholder="请输入合同名称" />
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="合同编码">
<a-input
size="small"
v-model:value="queryParam.contractCode"
allow-clear
placeholder="请输入合同编码"
/>
<a-input v-model:value="queryParam.contractCode" allow-clear placeholder="请输入合同编码" />
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-form-item label="合同类型">
<a-input v-model:value="queryParam.contractType" allow-clear placeholder="请输入合同类型编码" />
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
@@ -61,32 +55,10 @@
<vxe-toolbar ref="toolbarRef" custom>
<template #buttons>
<a-space wrap>
<a-button
type="primary"
:icon="h(SearchOutlined)"
@click="handleQuery"
>
查询
</a-button>
<a-button :icon="h(RedoOutlined)" @click="handleReset">
重置
</a-button>
<a-button
type="primary"
ghost
:icon="h(PlusOutlined)"
@click="handleCreate"
>
发起合同
</a-button>
<a-button
danger
:icon="h(DeleteOutlined)"
:disabled="!selectedRowKeys.length"
@click="handleBatchDelete"
>
删除
</a-button>
<a-button type="primary" :icon="h(SearchOutlined)" @click="handleQuery">查询</a-button>
<a-button :icon="h(RedoOutlined)" @click="handleReset">重置</a-button>
<a-button type="primary" ghost :icon="h(PlusOutlined)" @click="handleCreate">发起合同</a-button>
<a-button danger :icon="h(DeleteOutlined)" :disabled="!selectedRowKeys.length" @click="handleBatchDelete">删除</a-button>
</a-space>
</template>
</vxe-toolbar>
@@ -102,91 +74,47 @@
:checkbox-config="{ range: true }"
:data="tableData"
:loading="loading"
:loading-config="{
icon: 'vxe-icon-indicator roll',
text: '正在拼命加载中...',
}"
:loading-config="{ icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...' }"
@checkbox-range-change="selectChangeEvent"
@checkbox-change="selectChangeEvent"
@checkbox-all="selectChangeEvent"
>
<vxe-column type="checkbox" width="56" />
<vxe-column type="seq" title="序号" width="68" />
<vxe-column
field="contractCode"
title="合同编码"
width="150"
show-overflow="title"
/>
<vxe-column
field="contractName"
title="合同名称"
width="220"
show-overflow="title"
/>
<vxe-column
field="contractType"
title="合同类型"
width="110"
show-overflow="title"
/>
<vxe-column
field="templateName"
title="所选模板"
width="150"
show-overflow="title"
/>
<vxe-column
field="counterpartySummary"
title="合同相对方"
width="260"
show-overflow="title"
/>
<vxe-column
field="status"
title="状态"
width="120"
show-overflow="title"
>
<vxe-column field="contractCode" title="合同编码" width="160" show-overflow="title" />
<vxe-column field="lawContractCode" title="法务合同编号" width="160" show-overflow="title" />
<vxe-column field="contractName" title="合同名称" width="220" show-overflow="title" />
<vxe-column field="contractType" title="合同类型" width="160" show-overflow="title">
<template #default="{ row }">
<a-tag :color="getStatusColor(row.status)">
{{ getStatusLabel(row.status) }}
</a-tag>
{{ getContractTypeSimpleLabel(row.contractTypeCode || row.contractType) }}
</template>
</vxe-column>
<vxe-column
field="initiator"
title="发起人"
width="100"
show-overflow="title"
/>
<vxe-column
field="initiatorDept"
title="所属部门"
width="140"
show-overflow="title"
/>
<vxe-column
field="createTime"
title="发起时间"
width="170"
show-overflow="title"
/>
<vxe-column
field="updateTime"
title="最后更新时间"
width="170"
show-overflow="title"
/>
<vxe-column title="操作" width="260" fixed="right">
<vxe-column field="templateName" title="所选模板" width="180" show-overflow="title" />
<vxe-column field="counterpartySummary" title="合同相对方" width="260" show-overflow="title" />
<vxe-column field="status" title="状态" width="120">
<template #default="{ row }">
<a-tag :color="getStatusColor(row.status)">{{ getStatusLabel(row.status) }}</a-tag>
</template>
</vxe-column>
<vxe-column field="approveMessage" title="审批说明" width="220" show-overflow="title" />
<vxe-column field="initiator" title="发起人" width="100" show-overflow="title" />
<vxe-column field="initiatorDept" title="所属部门" width="140" show-overflow="title" />
<vxe-column field="createTime" title="发起时间" width="170" show-overflow="title" />
<vxe-column field="updateTime" title="最后更新时间" width="170" show-overflow="title" />
<vxe-column title="操作" width="520" fixed="right">
<template #default="{ row }">
<div class="table-actions">
<a @click="handleView(row)">查看</a>
<a v-if="canEdit(row)" @click="handleEdit(row)">编辑</a>
<a v-if="canSubmit(row)" @click="handleSubmit(row)">提交法务</a>
<a v-if="canMockApprove(row)" @click="handleMockApprove(row)">测试通过</a>
<a v-if="canMockReject(row)" @click="handleMockReject(row)">测试驳回</a>
<a v-if="canOnlineSign(row)" @click="handleOnlineSign(row)">
{{ row.status === "completed" ? "查看签署" : "在线签订" }}
</a>
<a v-if="canMockFinishSign(row)" @click="handleMockFinishSign(row)">测试签署完成</a>
<a v-if="canCollect(row)" @click="handleMockCollect(row)">测试采集</a>
<a v-if="canArchive(row)" @click="handleArchive(row)">测试归档</a>
<a v-if="canDelete(row)" @click="handleDelete(row)">删除</a>
</div>
</template>
@@ -208,8 +136,8 @@
/>
</a-card>
<ContractPartyPlaceholderModal ref="contractModalRef" />
<MixedSignModal ref="mixedSignModalRef" />
<ContractPartyPlaceholderModal ref="contractModalRef" @save="handleModalSave" />
<MixedSignModal ref="mixedSignModalRef" @business-updated="handleSignBusinessUpdated" />
</section>
</template>
@@ -224,17 +152,32 @@ import {
import { message, Modal } from "ant-design-vue";
import ContractPartyPlaceholderModal from "./components/ContractPartyPlaceholderModal.vue";
import MixedSignModal from "./components/mixedSignModal.vue";
import { deleteLaunchRecord, queryLaunchList } from "./api.js";
import { getContractTypeSimpleLabel } from "./contractLaunchOptions.js";
import {
archiveLaunch,
createLaunchDraft,
deleteLaunchRecord,
getLaunchDetail,
mockApproveLaunch,
mockCollectLaunch,
mockRejectLaunch,
finishLaunchSeal,
queryLaunchList,
submitLaunchRecord,
updateLaunchDraft,
} from "@/api/launch.js";
// 页面内字典(后续可由后端接口替换)
const contractRecordStatusOptions = [
{ label: "草稿", value: "draft" },
{ label: "审批中", value: "reviewing" },
{ label: "审批驳回", value: "rejected" },
{ label: "待签署", value: "pending_sign" },
{ label: "签署中", value: "signing" },
{ label: "待采集", value: "pending_collect" },
{ label: "待归档", value: "pending_archive" },
{ label: "已完成", value: "completed" },
]
{ label: "已终止", value: "terminated" },
];
const formRef = ref(null);
const queryContainer = ref(null);
@@ -250,7 +193,6 @@ const tableHeight = ref(420);
const tableData = ref([]);
const selectedRows = ref([]);
const selectedRowKeys = ref([]);
const allRecords = ref([]);
const queryParam = ref({
pageNo: 1,
@@ -259,8 +201,6 @@ const queryParam = ref({
contractCode: undefined,
contractType: undefined,
status: undefined,
queryScope: undefined,
templateKey: undefined,
dateRange: [],
});
@@ -275,18 +215,16 @@ const tableCardBodyStyle = {
padding: "8px 12px 6px",
};
const templateQueryOptions = [
{ label: "采购合同模板", value: "purchase" },
{ label: "销售合同模板", value: "sales" },
];
const statusLabelMap = {
draft: "草稿",
reviewing: "审批中",
rejected: "审批驳回",
pending_sign: "待签署",
signing: "签署中",
pending_collect: "待采集",
pending_archive: "待归档",
completed: "已完成",
terminated: "已终止",
};
const statusColorMap = {
@@ -295,19 +233,31 @@ const statusColorMap = {
rejected: "error",
pending_sign: "warning",
signing: "purple",
pending_collect: "cyan",
pending_archive: "orange",
completed: "success",
terminated: "default",
};
const scopeLabelMap = {
personal: "个人级",
company: "公司级",
admin: "管理员级",
};
function isSuccessResponse(res) {
return String(res?.code || "") === "0000";
}
function getPageResult(res) {
return res?.result || {};
}
function getDataResult(res) {
return res?.result || null;
}
function getResponseMessage(res, fallback = "操作失败") {
return res?.message || res?.msg || fallback;
}
function connectToolbar() {
const table = tableRef.value;
const toolbar = toolbarRef.value;
if (table && toolbar && table.connect) {
table.connect(toolbar);
}
@@ -321,10 +271,6 @@ function getStatusColor(status) {
return statusColorMap[status] || "default";
}
function getScopeLabel(scope) {
return scopeLabelMap[scope] || scope;
}
function canEdit(row) {
return ["draft", "rejected"].includes(row.status);
}
@@ -333,81 +279,73 @@ function canDelete(row) {
return ["draft", "rejected"].includes(row.status);
}
function canSubmit(row) {
return ["draft", "rejected"].includes(row.status);
}
function canMockApprove(row) {
return row.status === "reviewing";
}
function canMockReject(row) {
return row.status === "reviewing";
}
function canOnlineSign(row) {
return ["pending_sign", "signing", "completed"].includes(row.status);
}
function canMockFinishSign(row) {
return ["pending_sign", "signing"].includes(row.status);
}
function canCollect(row) {
return row.status === "pending_collect";
}
function canArchive(row) {
return row.status === "pending_archive";
}
function selectChangeEvent({ records }) {
selectedRows.value = records;
selectedRowKeys.value = records.map((item) => item.id);
}
function filterRecords(records) {
return records.filter((item) => {
const matchName =
!queryParam.value.contractName ||
item.contractName.includes(queryParam.value.contractName);
const matchCode =
!queryParam.value.contractCode ||
item.contractCode.includes(queryParam.value.contractCode);
const matchType =
!queryParam.value.contractType ||
item.contractType === queryParam.value.contractType;
const matchStatus =
!queryParam.value.status || item.status === queryParam.value.status;
const matchScope =
!queryParam.value.queryScope ||
item.queryScope === queryParam.value.queryScope;
const matchTemplate =
!queryParam.value.templateKey ||
item.templateKey === queryParam.value.templateKey;
const matchDate = (() => {
const range = queryParam.value.dateRange || [];
if (!range.length) {
return true;
}
const day = item.createTime.slice(0, 10);
return day >= range[0] && day <= range[1];
})();
return (
matchName &&
matchCode &&
matchType &&
matchStatus &&
matchScope &&
matchTemplate &&
matchDate
);
});
function buildQueryPayload() {
return {
pageNo: queryParam.value.pageNo,
pageSize: queryParam.value.pageSize,
contractName: queryParam.value.contractName,
contractCode: queryParam.value.contractCode,
contractType: queryParam.value.contractType,
status: queryParam.value.status,
dateStart: queryParam.value.dateRange?.[0],
dateEnd: queryParam.value.dateRange?.[1],
};
}
function getList() {
loading.value = true;
queryLaunchList().then((records) => {
// TODO: 这里后续直接使用合同发起列表接口返回值
allRecords.value = records;
const filtered = filterRecords(allRecords.value);
const start = (queryParam.value.pageNo - 1) * queryParam.value.pageSize;
const end = start + queryParam.value.pageSize;
total.value = filtered.length;
tableData.value = filtered.slice(start, end);
loading.value = false;
nextTick(() => {
connectToolbar();
syncTableHeight();
queryLaunchList(buildQueryPayload())
.then((res) => {
if (!isSuccessResponse(res)) {
tableData.value = [];
total.value = 0;
message.error(getResponseMessage(res, "合同发起列表查询失败"));
return;
}
const pageResult = getPageResult(res);
tableData.value = pageResult.data || [];
total.value = pageResult.totalSize || 0;
})
.finally(() => {
loading.value = false;
nextTick(() => {
connectToolbar();
syncTableHeight();
});
});
});
}
function handleQuery() {
@@ -424,8 +362,6 @@ function handleReset() {
contractCode: undefined,
contractType: undefined,
status: undefined,
queryScope: undefined,
templateKey: undefined,
dateRange: [],
});
getList();
@@ -442,41 +378,144 @@ function handleCreate() {
}
function handleView(row) {
contractModalRef.value?.showModal(row, "view");
getLaunchDetail(row.id).then((res) => {
if (!isSuccessResponse(res) || !getDataResult(res)) {
message.error(getResponseMessage(res, "获取合同详情失败"));
return;
}
contractModalRef.value?.showModal(getDataResult(res), "view");
});
}
function handleEdit(row) {
contractModalRef.value?.showModal(row, "edit");
getLaunchDetail(row.id).then((res) => {
if (!isSuccessResponse(res) || !getDataResult(res)) {
message.error(getResponseMessage(res, "获取合同详情失败"));
return;
}
contractModalRef.value?.showModal(getDataResult(res), "edit");
});
}
function handleSubmit(row) {
submitLaunchRecord(row.id).then((res) => {
if (!isSuccessResponse(res)) {
message.error(getResponseMessage(res, "提交法务失败"));
return;
}
message.success("已提交法务当前为测试环境后续可由法务系统真实审批");
getList();
});
}
function handleMockApprove(row) {
mockApproveLaunch(row.id, {}).then((res) => {
if (!isSuccessResponse(res)) {
message.error(getResponseMessage(res, "模拟审批通过失败"));
return;
}
message.success("测试审批通过完成合同已流转到待签署");
getList();
});
}
function handleMockReject(row) {
mockRejectLaunch(row.id, {}).then((res) => {
if (!isSuccessResponse(res)) {
message.error(getResponseMessage(res, "模拟审批驳回失败"));
return;
}
message.success("测试审批驳回完成合同已流转到审批驳回");
getList();
});
}
function handleMockFinishSign(row) {
finishLaunchSeal(row.id, {
sealContractId: row.sealContractId || `TEST-SEAL-${row.id}`,
sealContractStatus: 2000,
signedFileName: `${row.contractName || "合同"}-测试已签署.pdf`,
signedFilePath: row.contractTextFilePath || `mock-signed/${row.id}.pdf`,
signedFileType: "pdf",
signedFileSize: row.contractTextFileSize || null,
signedOfflineReason: "测试按钮模拟签署完成真实签章接入后可删除此按钮",
}).then((res) => {
if (!isSuccessResponse(res)) {
message.error(getResponseMessage(res, "测试签署完成失败"));
return;
}
message.success("测试签署完成合同已流转到待采集");
getList();
});
}
function handleOnlineSign(row) {
if (!row.sealContractId && !row.signContractId && !row.contractId) {
message.info(
"当前未接入签署详情接口将进入在线签署弹窗并保留合同业务信息你可以继续上传文件后发起签署",
);
}
mixedSignModalRef.value?.showModal(row);
getLaunchDetail(row.id).then((res) => {
if (!isSuccessResponse(res) || !getDataResult(res)) {
message.error(getResponseMessage(res, "获取合同详情失败"));
return;
}
const detail = getDataResult(res);
mixedSignModalRef.value?.showModal({
...detail,
contractId: detail.sealContractId,
});
});
}
function deleteRowsByIds(ids) {
// TODO: 这里后续替换为删除接口后再刷新列表
allRecords.value = allRecords.value.filter((item) => !ids.includes(item.id));
selectedRows.value = [];
selectedRowKeys.value = [];
function handleSignBusinessUpdated() {
getList();
}
function handleModalSave(payload) {
const requestFn = payload.mode === "edit" ? updateLaunchDraft : createLaunchDraft;
requestFn(payload.record).then((res) => {
if (!isSuccessResponse(res)) {
message.error(getResponseMessage(res, "保存合同失败"));
return;
}
message.success(payload.mode === "edit" ? "合同修改成功" : "合同草稿保存成功");
getList();
});
}
function handleMockCollect(row) {
mockCollectLaunch(row.id).then((res) => {
if (!isSuccessResponse(res)) {
message.error(getResponseMessage(res, "模拟合同采集失败"));
return;
}
message.success("测试合同采集完成合同已流转到待归档");
getList();
});
}
function handleArchive(row) {
archiveLaunch(row.id, {}).then((res) => {
if (!isSuccessResponse(res)) {
message.error(getResponseMessage(res, "测试归档失败"));
return;
}
message.success("测试归档完成合同已流转到已完成");
getList();
});
}
function handleDelete(row) {
Modal.confirm({
title: `确认删除合同【${row.contractName}】吗?`,
content: "当前仅删除本地 mock 数据便于后续替换真实接口",
content: "仅草稿或审批驳回状态支持删除",
okText: "删除",
cancelText: "取消",
okType: "danger",
onOk: () => {
deleteLaunchRecord([row.id]).then(() => {
deleteRowsByIds([row.id]);
message.success("删除发起记录");
deleteLaunchRecord(row.id).then((res) => {
if (!isSuccessResponse(res)) {
message.error(getResponseMessage(res, "删除失败"));
return;
}
message.success("删除成功");
getList();
});
},
});
@@ -488,18 +527,20 @@ function handleBatchDelete() {
message.warning("仅草稿或审批驳回状态支持删除请重新选择");
return;
}
Modal.confirm({
title: `确认删除选中的 ${selectedRowKeys.value.length} 条记录吗?`,
content: "当前仅演示本地数据删除后续接入真实接口即可替换",
content: "仅草稿或审批驳回状态支持删除",
okText: "删除",
cancelText: "取消",
okType: "danger",
onOk: () => {
deleteLaunchRecord(selectedRowKeys.value).then(() => {
deleteRowsByIds(selectedRowKeys.value);
message.success("批量删除成功");
});
onOk: async () => {
for (const id of selectedRowKeys.value) {
await deleteLaunchRecord(id);
}
message.success("批量删除成功");
selectedRows.value = [];
selectedRowKeys.value = [];
getList();
},
});
}
@@ -561,6 +602,7 @@ onBeforeUnmount(() => {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.table-pagination {