初始版本
This commit is contained in:
605
app/components/console/ContractManagement.vue
Normal file
605
app/components/console/ContractManagement.vue
Normal file
@@ -0,0 +1,605 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user