606 lines
20 KiB
Vue
606 lines
20 KiB
Vue
<template>
|
||
<div class="contract-management">
|
||
<!-- 顶部操作栏 -->
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="flex items-center gap-3">
|
||
<a-input-search
|
||
v-model:value="queryParam.keywords"
|
||
placeholder="搜索合同名称/编号"
|
||
allow-clear
|
||
style="width: 220px"
|
||
@search="handleSearch"
|
||
@change="onKeywordChange"
|
||
/>
|
||
<a-select
|
||
v-model:value="queryParam.contractType"
|
||
placeholder="合同类型"
|
||
allow-clear
|
||
style="width: 140px"
|
||
@change="handleSearch"
|
||
>
|
||
<a-select-option v-for="opt in contractTypeOptions" :key="opt.value" :value="opt.value">
|
||
{{ opt.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
<a-select
|
||
v-model:value="queryParam.status"
|
||
placeholder="合同状态"
|
||
allow-clear
|
||
style="width: 140px"
|
||
@change="handleSearch"
|
||
>
|
||
<a-select-option v-for="opt in contractStatusOptions" :key="opt.value" :value="opt.value">
|
||
{{ opt.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<a-button type="primary" @click="openAddModal">
|
||
<template #icon><PlusOutlined /></template>
|
||
新增合同
|
||
</a-button>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<a-row :gutter="[12, 12]" class="mb-4">
|
||
<a-col :xs="12" :sm="8" :md="4" v-for="stat in statsCards" :key="stat.label">
|
||
<div class="stat-card" :class="stat.cls">
|
||
<div class="stat-value">{{ stat.value }}</div>
|
||
<div class="stat-label">{{ stat.label }}</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<!-- 表格 -->
|
||
<a-card :bordered="false">
|
||
<a-table
|
||
:data-source="contracts"
|
||
:loading="loading"
|
||
:pagination="pagination"
|
||
size="middle"
|
||
:row-key="(r: Contract) => r.contractId!"
|
||
@change="handleTableChange"
|
||
>
|
||
<a-table-column title="合同编号" data-index="contractNo" width="185">
|
||
<template #default="{ record }">
|
||
<span class="font-mono text-sm text-gray-600">{{ record.contractNo || '-' }}</span>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="合同名称" data-index="title" ellipsis>
|
||
<template #default="{ record }">
|
||
<span class="font-medium cursor-pointer text-blue-600 hover:text-blue-400" @click="openDetail(record)">
|
||
{{ record.title }}
|
||
</span>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="合同类型" data-index="contractType" width="110">
|
||
<template #default="{ record }">
|
||
{{ contractTypeText(record.contractType) }}
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="签约方" width="230">
|
||
<template #default="{ record }">
|
||
<div class="text-xs leading-5">
|
||
<div>甲方：{{ record.partyA || '-' }}</div>
|
||
<div>乙方：{{ record.partyB || '-' }}</div>
|
||
</div>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="合同金额" data-index="amount" width="120">
|
||
<template #default="{ record }">
|
||
<span class="text-orange-600 font-semibold">¥{{ formatAmount(record.amount) }}</span>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="有效期" width="210">
|
||
<template #default="{ record }">
|
||
<span v-if="record.startDate && record.endDate" class="text-sm">
|
||
{{ record.startDate }} ~ {{ record.endDate }}
|
||
</span>
|
||
<span v-else class="text-gray-400 text-sm">-</span>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="状态" data-index="status" width="100">
|
||
<template #default="{ record }">
|
||
<a-tag :color="contractStatusInfo(record.status).color">
|
||
{{ contractStatusInfo(record.status).text }}
|
||
</a-tag>
|
||
</template>
|
||
</a-table-column>
|
||
|
||
<a-table-column title="操作" width="180" fixed="right">
|
||
<template #default="{ record }">
|
||
<a-space>
|
||
<a-button size="small" @click="openDetail(record)">查看</a-button>
|
||
<a-button size="small" @click="openEdit(record)">编辑</a-button>
|
||
<a-button danger size="small" @click="confirmRemove(record)">删除</a-button>
|
||
</a-space>
|
||
</template>
|
||
</a-table-column>
|
||
</a-table>
|
||
</a-card>
|
||
|
||
<!-- 新增/编辑弹窗 -->
|
||
<a-modal
|
||
v-model:open="formVisible"
|
||
:title="editingId ? '编辑合同' : '新增合同'"
|
||
:width="660"
|
||
:confirm-loading="formSubmitting"
|
||
@ok="handleFormSubmit"
|
||
@cancel="closeForm"
|
||
>
|
||
<a-form ref="formRef" layout="vertical" :model="formData" :rules="formRules" class="mt-2">
|
||
<a-form-item label="合同名称" name="title">
|
||
<a-input v-model:value="formData.title" placeholder="请输入合同名称" />
|
||
</a-form-item>
|
||
|
||
<a-row :gutter="12">
|
||
<a-col :span="12">
|
||
<a-form-item label="合同类型" name="contractType">
|
||
<a-select v-model:value="formData.contractType" placeholder="请选择合同类型" style="width:100%">
|
||
<a-select-option v-for="opt in contractTypeOptions" :key="opt.value" :value="opt.value">
|
||
{{ opt.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="合同状态" name="status">
|
||
<a-select v-model:value="formData.status" placeholder="请选择状态" style="width:100%">
|
||
<a-select-option v-for="opt in contractStatusOptions" :key="opt.value" :value="opt.value">
|
||
{{ opt.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="12">
|
||
<a-col :span="12">
|
||
<a-form-item label="甲方" name="partyA">
|
||
<a-input v-model:value="formData.partyA" placeholder="请输入甲方名称" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="乙方" name="partyB">
|
||
<a-input v-model:value="formData.partyB" placeholder="请输入乙方名称" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row :gutter="12">
|
||
<a-col :span="8">
|
||
<a-form-item label="合同金额" name="amount">
|
||
<a-input-number
|
||
v-model:value="formData.amount"
|
||
:min="0"
|
||
:precision="2"
|
||
placeholder="金额"
|
||
style="width: 100%"
|
||
>
|
||
<template #prefix>¥</template>
|
||
</a-input-number>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<a-form-item label="开始日期" name="startDate">
|
||
<a-date-picker
|
||
v-model:value="formData.startDate"
|
||
value-format="YYYY-MM-DD"
|
||
placeholder="开始日期"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<a-form-item label="结束日期" name="endDate">
|
||
<a-date-picker
|
||
v-model:value="formData.endDate"
|
||
value-format="YYYY-MM-DD"
|
||
placeholder="结束日期"
|
||
style="width: 100%"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<!-- 合同附件上传 -->
|
||
<a-form-item label="合同附件">
|
||
<a-upload
|
||
:file-list="fileList"
|
||
:max-count="1"
|
||
:before-upload="() => false"
|
||
accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
|
||
@change="handleFileChange"
|
||
>
|
||
<a-button>
|
||
<UploadOutlined /> 上传合同文件
|
||
</a-button>
|
||
<span class="ml-2 text-gray-400 text-xs">支持 PDF、Word、图片，最大 20MB</span>
|
||
</a-upload>
|
||
<div v-if="formData.fileUrl && !fileList.length" class="mt-1">
|
||
<a :href="formData.fileUrl" target="_blank" class="text-blue-500 text-sm">
|
||
<PaperClipOutlined /> {{ formData.fileName || '查看已上传文件' }}
|
||
</a>
|
||
<a-button type="link" danger size="small" class="ml-2" @click="clearFile">移除</a-button>
|
||
</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="备注" name="remark">
|
||
<a-textarea v-model:value="formData.remark" :rows="3" placeholder="备注（选填）" />
|
||
</a-form-item>
|
||
</a-form>
|
||
</a-modal>
|
||
|
||
<!-- 详情弹窗 -->
|
||
<a-modal
|
||
v-model:open="detailVisible"
|
||
title="合同详情"
|
||
:width="700"
|
||
:footer="null"
|
||
>
|
||
<a-descriptions v-if="detail" bordered size="small" :column="2" class="mt-2">
|
||
<a-descriptions-item label="合同编号" :span="2">
|
||
<span class="font-mono">{{ detail.contractNo || '-' }}</span>
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="合同名称" :span="2">{{ detail.title }}</a-descriptions-item>
|
||
<a-descriptions-item label="合同类型">{{ contractTypeText(detail.contractType) }}</a-descriptions-item>
|
||
<a-descriptions-item label="合同状态">
|
||
<a-tag :color="contractStatusInfo(detail.status).color">{{ contractStatusInfo(detail.status).text }}</a-tag>
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="甲方">{{ detail.partyA || '-' }}</a-descriptions-item>
|
||
<a-descriptions-item label="乙方">{{ detail.partyB || '-' }}</a-descriptions-item>
|
||
<a-descriptions-item label="合同金额">
|
||
<span class="text-orange-600 font-semibold">¥{{ formatAmount(detail.amount) }}</span>
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="有效期">
|
||
<span v-if="detail.startDate && detail.endDate">{{ detail.startDate }} ~ {{ detail.endDate }}</span>
|
||
<span v-else class="text-gray-400">-</span>
|
||
</a-descriptions-item>
|
||
<a-descriptions-item label="创建人">{{ detail.userName || '-' }}</a-descriptions-item>
|
||
<a-descriptions-item label="创建时间">{{ detail.createTime || '-' }}</a-descriptions-item>
|
||
<a-descriptions-item label="备注" :span="2">{{ detail.remark || '-' }}</a-descriptions-item>
|
||
<a-descriptions-item v-if="detail.fileUrl" label="合同附件" :span="2">
|
||
<a :href="detail.fileUrl" target="_blank" class="text-blue-500">
|
||
<PaperClipOutlined /> {{ detail.fileName || '查看附件' }}
|
||
</a>
|
||
</a-descriptions-item>
|
||
</a-descriptions>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, onMounted, reactive, ref } from 'vue'
|
||
import { message, Modal } from 'ant-design-vue'
|
||
import { PlusOutlined, UploadOutlined, PaperClipOutlined } from '@ant-design/icons-vue'
|
||
import { uploadFile } from '@/api/system/file'
|
||
import type { UploadChangeParam, UploadFile } from 'ant-design-vue'
|
||
import {
|
||
pageContract,
|
||
addContract,
|
||
updateContract,
|
||
removeContract,
|
||
statsContract,
|
||
contractTypeOptions,
|
||
contractStatusOptions,
|
||
contractTypeText,
|
||
contractStatusInfo,
|
||
type Contract,
|
||
type ContractType,
|
||
type ContractStatus,
|
||
} from '@/api/app/contract'
|
||
|
||
defineOptions({ name: 'ContractManagement' })
|
||
|
||
// ─── 列表 & 分页 ──────────────────────────────────────────────
|
||
const contracts = ref<Contract[]>([])
|
||
const loading = ref(false)
|
||
const total = ref(0)
|
||
const queryParam = reactive<{
|
||
keywords?: string
|
||
contractType?: ContractType
|
||
status?: ContractStatus
|
||
page: number
|
||
limit: number
|
||
}>({
|
||
page: 1,
|
||
limit: 15,
|
||
})
|
||
|
||
const pagination = computed(() => ({
|
||
total: total.value,
|
||
current: queryParam.page,
|
||
pageSize: queryParam.limit,
|
||
showSizeChanger: true,
|
||
showTotal: (t: number) => `共 ${t} 条`,
|
||
pageSizeOptions: ['10', '15', '20', '50'],
|
||
}))
|
||
|
||
async function loadData() {
|
||
loading.value = true
|
||
try {
|
||
const res = await pageContract({
|
||
page: queryParam.page,
|
||
limit: queryParam.limit,
|
||
keywords: queryParam.keywords,
|
||
contractType: queryParam.contractType,
|
||
status: queryParam.status,
|
||
})
|
||
contracts.value = res?.list ?? []
|
||
total.value = res?.total ?? 0
|
||
} catch (e) {
|
||
console.error(e)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function handleSearch() {
|
||
queryParam.page = 1
|
||
loadData()
|
||
}
|
||
|
||
let keywordTimer: ReturnType<typeof setTimeout> | null = null
|
||
function onKeywordChange() {
|
||
if (keywordTimer) clearTimeout(keywordTimer)
|
||
keywordTimer = setTimeout(handleSearch, 400)
|
||
}
|
||
|
||
function handleTableChange(pag: { current?: number; pageSize?: number }) {
|
||
queryParam.page = pag.current ?? 1
|
||
queryParam.limit = pag.pageSize ?? 15
|
||
loadData()
|
||
}
|
||
|
||
// ─── 统计 ─────────────────────────────────────────────────────
|
||
const statsData = ref<Record<string, number>>({})
|
||
|
||
const statsCards = computed(() => [
|
||
{ label: '全部', value: statsData.value.total ?? 0, cls: 'blue' },
|
||
{ label: '生效中', value: statsData.value.active ?? 0, cls: 'green' },
|
||
{ label: '待签署', value: statsData.value.pending ?? 0, cls: 'orange' },
|
||
{ label: '已过期', value: statsData.value.expired ?? 0, cls: 'red' },
|
||
{ label: '草稿', value: statsData.value.draft ?? 0, cls: 'gray' },
|
||
{ label: '已终止', value: statsData.value.terminated ?? 0, cls: 'purple' },
|
||
])
|
||
|
||
async function loadStats() {
|
||
try {
|
||
const res = await statsContract()
|
||
statsData.value = res ?? {}
|
||
} catch {}
|
||
}
|
||
|
||
// ─── 表单 ─────────────────────────────────────────────────────
|
||
const formVisible = ref(false)
|
||
const formSubmitting = ref(false)
|
||
const editingId = ref<number | null>(null)
|
||
const formRef = ref()
|
||
const fileList = ref<UploadFile[]>([])
|
||
const uploading = ref(false)
|
||
|
||
interface FormData {
|
||
title: string
|
||
contractType?: ContractType
|
||
partyA?: string
|
||
partyB?: string
|
||
amount?: number
|
||
startDate?: string
|
||
endDate?: string
|
||
status?: ContractStatus
|
||
remark?: string
|
||
fileUrl?: string
|
||
fileName?: string
|
||
}
|
||
|
||
const formData = reactive<FormData>({
|
||
title: '',
|
||
contractType: undefined,
|
||
partyA: '',
|
||
partyB: '',
|
||
amount: undefined,
|
||
startDate: undefined,
|
||
endDate: undefined,
|
||
status: 'draft',
|
||
remark: '',
|
||
fileUrl: '',
|
||
fileName: '',
|
||
})
|
||
|
||
const formRules = {
|
||
title: [{ required: true, message: '请输入合同名称' }],
|
||
contractType: [{ required: true, message: '请选择合同类型' }],
|
||
status: [{ required: true, message: '请选择合同状态' }],
|
||
}
|
||
|
||
function resetFormData() {
|
||
formData.title = ''
|
||
formData.contractType = undefined
|
||
formData.partyA = ''
|
||
formData.partyB = ''
|
||
formData.amount = undefined
|
||
formData.startDate = undefined
|
||
formData.endDate = undefined
|
||
formData.status = 'draft'
|
||
formData.remark = ''
|
||
formData.fileUrl = ''
|
||
formData.fileName = ''
|
||
fileList.value = []
|
||
editingId.value = null
|
||
}
|
||
|
||
function openAddModal() {
|
||
resetFormData()
|
||
formVisible.value = true
|
||
}
|
||
|
||
function openEdit(record: Contract) {
|
||
resetFormData()
|
||
editingId.value = record.contractId ?? null
|
||
Object.assign(formData, {
|
||
title: record.title,
|
||
contractType: record.contractType,
|
||
partyA: record.partyA ?? '',
|
||
partyB: record.partyB ?? '',
|
||
amount: record.amount,
|
||
startDate: record.startDate,
|
||
endDate: record.endDate,
|
||
status: record.status,
|
||
remark: record.remark ?? '',
|
||
fileUrl: record.fileUrl ?? '',
|
||
fileName: record.fileName ?? '',
|
||
})
|
||
formVisible.value = true
|
||
}
|
||
|
||
function closeForm() {
|
||
formVisible.value = false
|
||
formRef.value?.resetFields()
|
||
resetFormData()
|
||
}
|
||
|
||
// 文件上传
|
||
function handleFileChange({ fileList: list }: UploadChangeParam) {
|
||
fileList.value = list.slice(-1)
|
||
}
|
||
|
||
function clearFile() {
|
||
formData.fileUrl = ''
|
||
formData.fileName = ''
|
||
}
|
||
|
||
async function uploadPendingFile(): Promise<{ url: string; name: string } | null> {
|
||
const raw = fileList.value[0]?.originFileObj
|
||
if (!raw) return null
|
||
uploading.value = true
|
||
try {
|
||
const result = await uploadFile(raw as File)
|
||
return { url: (result as any).url ?? (result as any).fileUrl, name: raw.name }
|
||
} finally {
|
||
uploading.value = false
|
||
}
|
||
}
|
||
|
||
async function handleFormSubmit() {
|
||
try {
|
||
await formRef.value?.validate()
|
||
} catch {
|
||
return
|
||
}
|
||
|
||
formSubmitting.value = true
|
||
try {
|
||
// 如有待上传文件先上传
|
||
if (fileList.value.length > 0) {
|
||
const uploaded = await uploadPendingFile()
|
||
if (uploaded) {
|
||
formData.fileUrl = uploaded.url
|
||
formData.fileName = uploaded.name
|
||
}
|
||
}
|
||
|
||
const payload: Partial<Contract> = { ...formData }
|
||
|
||
if (editingId.value) {
|
||
await updateContract(editingId.value, payload)
|
||
message.success('合同已更新')
|
||
} else {
|
||
await addContract(payload)
|
||
message.success('合同已创建')
|
||
}
|
||
closeForm()
|
||
await loadData()
|
||
await loadStats()
|
||
} catch (e: any) {
|
||
message.error(e?.message || '操作失败')
|
||
} finally {
|
||
formSubmitting.value = false
|
||
}
|
||
}
|
||
|
||
// ─── 详情 ─────────────────────────────────────────────────────
|
||
const detailVisible = ref(false)
|
||
const detail = ref<Contract | null>(null)
|
||
|
||
function openDetail(record: Contract) {
|
||
detail.value = record
|
||
detailVisible.value = true
|
||
}
|
||
|
||
// ─── 删除 ─────────────────────────────────────────────────────
|
||
function confirmRemove(record: Contract) {
|
||
Modal.confirm({
|
||
title: '确认删除该合同？',
|
||
content: '删除后不可恢复。',
|
||
okText: '删除',
|
||
okType: 'danger',
|
||
cancelText: '取消',
|
||
onOk: async () => {
|
||
await removeContract(record.contractId!)
|
||
message.success('已删除')
|
||
if (detail.value?.contractId === record.contractId) {
|
||
detailVisible.value = false
|
||
detail.value = null
|
||
}
|
||
await loadData()
|
||
await loadStats()
|
||
},
|
||
})
|
||
}
|
||
|
||
// ─── 工具函数 ─────────────────────────────────────────────────
|
||
function formatAmount(value?: number | string | null) {
|
||
if (value === null || value === undefined) return '0.00'
|
||
const n = typeof value === 'string' ? parseFloat(value) : value
|
||
return Number.isFinite(n) ? n.toFixed(2) : '0.00'
|
||
}
|
||
|
||
// ─── 初始化 ───────────────────────────────────────────────────
|
||
onMounted(() => {
|
||
loadData()
|
||
loadStats()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.contract-management {
|
||
width: 100%;
|
||
}
|
||
|
||
.stat-card {
|
||
padding: 14px;
|
||
border-radius: 10px;
|
||
border: 1px solid transparent;
|
||
text-align: center;
|
||
transition: box-shadow 0.2s;
|
||
}
|
||
.stat-card:hover {
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.stat-card.blue { background: #eff6ff; border-color: #dbeafe; }
|
||
.stat-card.green { background: #f0fdf4; border-color: #bbf7d0; }
|
||
.stat-card.orange{ background: #fff7ed; border-color: #fed7aa; }
|
||
.stat-card.red { background: #fef2f2; border-color: #fecaca; }
|
||
.stat-card.gray { background: #f9fafb; border-color: #e5e7eb; }
|
||
.stat-card.purple{ background: #faf5ff; border-color: #e9d5ff; }
|
||
|
||
.stat-value {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
line-height: 1;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
margin-top: 4px;
|
||
}
|
||
</style>
|