295 lines
7.9 KiB
Vue
295 lines
7.9 KiB
Vue
<template>
|
||
<GiPageLayout>
|
||
<GiTable
|
||
row-key="id"
|
||
title="收入合同管理"
|
||
:data="dataList"
|
||
:columns="tableColumns"
|
||
:loading="loading"
|
||
:scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
|
||
:pagination="pagination"
|
||
@page-change="onPageChange"
|
||
@page-size-change="onPageSizeChange"
|
||
@refresh="search"
|
||
>
|
||
<template #top>
|
||
<GiForm
|
||
v-model="searchForm"
|
||
search
|
||
:columns="queryFormColumns"
|
||
size="medium"
|
||
@search="search"
|
||
@reset="reset"
|
||
/>
|
||
</template>
|
||
|
||
<template #toolbar-left>
|
||
<a-space>
|
||
<a-button type="primary" @click="openAddModal">
|
||
<template #icon><icon-plus /></template>
|
||
<template #default>新建合同</template>
|
||
</a-button>
|
||
<a-button @click="exportContract">
|
||
<template #icon><icon-download /></template>
|
||
<template #default>导出合同</template>
|
||
</a-button>
|
||
</a-space>
|
||
</template>
|
||
|
||
<!-- 合同状态 -->
|
||
<template #status="{ record }">
|
||
<a-tag :color="getStatusColor(record.status)">
|
||
{{ getStatusText(record.status) }}
|
||
</a-tag>
|
||
</template>
|
||
|
||
<!-- 合同金额 -->
|
||
<template #contractAmount="{ record }">
|
||
<span class="font-medium text-green-600">￥{{ record.contractAmount.toLocaleString() }}万</span>
|
||
</template>
|
||
|
||
<!-- 已收款金额 -->
|
||
<template #receivedAmount="{ record }">
|
||
<span class="font-medium text-blue-600">￥{{ record.receivedAmount.toLocaleString() }}万</span>
|
||
</template>
|
||
|
||
<!-- 操作列 -->
|
||
<template #action="{ record }">
|
||
<a-space>
|
||
<a-link @click="viewDetail(record)">详情</a-link>
|
||
<a-link @click="editRecord(record)" v-if="record.status === 'draft'">编辑</a-link>
|
||
<a-link @click="approveContract(record)" v-if="record.status === 'pending'">审批</a-link>
|
||
<a-link @click="viewPayment(record)">收款记录</a-link>
|
||
</a-space>
|
||
</template>
|
||
</GiTable>
|
||
</GiPageLayout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import { Message } from '@arco-design/web-vue'
|
||
import type { TableColumnData } from '@arco-design/web-vue'
|
||
|
||
// 搜索表单
|
||
const searchForm = reactive({
|
||
contractName: '',
|
||
contractCode: '',
|
||
client: '',
|
||
status: '',
|
||
signDate: '',
|
||
page: 1,
|
||
size: 10
|
||
})
|
||
|
||
// 查询条件配置
|
||
const queryFormColumns = [
|
||
{
|
||
field: 'contractName',
|
||
label: '合同名称',
|
||
type: 'input' as const,
|
||
props: {
|
||
placeholder: '请输入合同名称'
|
||
}
|
||
},
|
||
{
|
||
field: 'client',
|
||
label: '客户',
|
||
type: 'input' as const,
|
||
props: {
|
||
placeholder: '请输入客户名称'
|
||
}
|
||
},
|
||
{
|
||
field: 'status',
|
||
label: '合同状态',
|
||
type: 'select' as const,
|
||
props: {
|
||
placeholder: '请选择合同状态',
|
||
options: [
|
||
{ label: '草稿', value: 'draft' },
|
||
{ label: '待审批', value: 'pending' },
|
||
{ label: '已签署', value: 'signed' },
|
||
{ label: '执行中', value: 'executing' },
|
||
{ label: '已完成', value: 'completed' },
|
||
{ label: '已终止', value: 'terminated' }
|
||
]
|
||
}
|
||
}
|
||
]
|
||
|
||
// 表格列配置
|
||
const tableColumns: TableColumnData[] = [
|
||
{ title: '合同编号', dataIndex: 'contractCode', width: 150 },
|
||
{ title: '合同名称', dataIndex: 'contractName', width: 250, ellipsis: true, tooltip: true },
|
||
{ title: '客户名称', dataIndex: 'client', width: 200, ellipsis: true, tooltip: true },
|
||
{ title: '合同金额', dataIndex: 'contractAmount', slotName: 'contractAmount', width: 120 },
|
||
{ title: '已收款金额', dataIndex: 'receivedAmount', slotName: 'receivedAmount', width: 120 },
|
||
{ title: '未收款金额', dataIndex: 'pendingAmount', width: 120 },
|
||
{ title: '签署日期', dataIndex: 'signDate', width: 120 },
|
||
{ title: '开始日期', dataIndex: 'startDate', width: 120 },
|
||
{ title: '结束日期', dataIndex: 'endDate', width: 120 },
|
||
{ title: '合同状态', dataIndex: 'status', slotName: 'status', width: 100 },
|
||
{ title: '项目经理', dataIndex: 'projectManager', width: 100 },
|
||
{ title: '销售经理', dataIndex: 'salesManager', width: 100 },
|
||
{ title: '完成进度', dataIndex: 'progress', width: 100 },
|
||
{ title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
|
||
{ title: '操作', slotName: 'action', width: 200, fixed: 'right' }
|
||
]
|
||
|
||
// 数据状态
|
||
const loading = ref(false)
|
||
const dataList = ref([
|
||
{
|
||
id: 1,
|
||
contractCode: 'RC2024001',
|
||
contractName: '华能新能源风电场叶片检测服务合同',
|
||
client: '华能新能源股份有限公司',
|
||
contractAmount: 320,
|
||
receivedAmount: 192,
|
||
pendingAmount: 128,
|
||
signDate: '2024-02-20',
|
||
startDate: '2024-03-01',
|
||
endDate: '2024-04-30',
|
||
status: 'executing',
|
||
projectManager: '张项目经理',
|
||
salesManager: '李销售经理',
|
||
progress: '60%',
|
||
remark: '项目进展顺利，客户满意度高'
|
||
},
|
||
{
|
||
id: 2,
|
||
contractCode: 'RC2024002',
|
||
contractName: '大唐风电场防雷检测项目合同',
|
||
client: '大唐新能源股份有限公司',
|
||
contractAmount: 268,
|
||
receivedAmount: 134,
|
||
pendingAmount: 134,
|
||
signDate: '2024-02-25',
|
||
startDate: '2024-03-05',
|
||
endDate: '2024-04-20',
|
||
status: 'executing',
|
||
projectManager: '王项目经理',
|
||
salesManager: '赵销售经理',
|
||
progress: '45%',
|
||
remark: '按计划执行中'
|
||
},
|
||
{
|
||
id: 3,
|
||
contractCode: 'RC2024003',
|
||
contractName: '中广核风电场设备维护服务合同',
|
||
client: '中广核新能源投资有限公司',
|
||
contractAmount: 450,
|
||
receivedAmount: 450,
|
||
pendingAmount: 0,
|
||
signDate: '2024-01-15',
|
||
startDate: '2024-01-20',
|
||
endDate: '2024-01-31',
|
||
status: 'completed',
|
||
projectManager: '刘项目经理',
|
||
salesManager: '孙销售经理',
|
||
progress: '100%',
|
||
remark: '项目已完成，客户验收通过'
|
||
}
|
||
])
|
||
|
||
const pagination = reactive({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 3,
|
||
showTotal: true,
|
||
showPageSize: true
|
||
})
|
||
|
||
// 获取状态颜色
|
||
const getStatusColor = (status: string) => {
|
||
const colorMap: Record<string, string> = {
|
||
'draft': 'gray',
|
||
'pending': 'orange',
|
||
'signed': 'blue',
|
||
'executing': 'cyan',
|
||
'completed': 'green',
|
||
'terminated': 'red'
|
||
}
|
||
return colorMap[status] || 'gray'
|
||
}
|
||
|
||
// 获取状态文本
|
||
const getStatusText = (status: string) => {
|
||
const textMap: Record<string, string> = {
|
||
'draft': '草稿',
|
||
'pending': '待审批',
|
||
'signed': '已签署',
|
||
'executing': '执行中',
|
||
'completed': '已完成',
|
||
'terminated': '已终止'
|
||
}
|
||
return textMap[status] || status
|
||
}
|
||
|
||
// 搜索和重置
|
||
const search = async () => {
|
||
loading.value = true
|
||
setTimeout(() => {
|
||
loading.value = false
|
||
}, 1000)
|
||
}
|
||
|
||
const reset = () => {
|
||
Object.assign(searchForm, {
|
||
contractName: '',
|
||
contractCode: '',
|
||
client: '',
|
||
status: '',
|
||
signDate: '',
|
||
page: 1,
|
||
size: 10
|
||
})
|
||
pagination.current = 1
|
||
search()
|
||
}
|
||
|
||
// 分页处理
|
||
const onPageChange = (page: number) => {
|
||
searchForm.page = page
|
||
pagination.current = page
|
||
search()
|
||
}
|
||
|
||
const onPageSizeChange = (size: number) => {
|
||
searchForm.size = size
|
||
searchForm.page = 1
|
||
pagination.pageSize = size
|
||
pagination.current = 1
|
||
search()
|
||
}
|
||
|
||
// 操作方法
|
||
const openAddModal = () => {
|
||
Message.info('新建合同功能开发中...')
|
||
}
|
||
|
||
const exportContract = () => {
|
||
Message.info('导出合同功能开发中...')
|
||
}
|
||
|
||
const viewDetail = (record: any) => {
|
||
Message.info(`查看合同详情: ${record.contractName}`)
|
||
}
|
||
|
||
const editRecord = (record: any) => {
|
||
Message.info(`编辑合同: ${record.contractName}`)
|
||
}
|
||
|
||
const approveContract = (record: any) => {
|
||
Message.info(`审批合同: ${record.contractName}`)
|
||
}
|
||
|
||
const viewPayment = (record: any) => {
|
||
Message.info(`查看收款记录: ${record.contractName}`)
|
||
}
|
||
|
||
onMounted(() => {
|
||
search()
|
||
})
|
||
</script> |