282 lines
7.6 KiB
Vue
282 lines
7.6 KiB
Vue
<template>
|
||
<GiPageLayout>
|
||
<GiTable
|
||
row-key="id"
|
||
title="中标通知书管理"
|
||
:data="dataList"
|
||
:columns="tableColumns"
|
||
:loading="loading"
|
||
:scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
|
||
: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="generateNotice">
|
||
<template #icon><icon-plus /></template>
|
||
<template #default>生成通知书</template>
|
||
</a-button>
|
||
<a-button @click="batchSend">
|
||
<template #icon><icon-send /></template>
|
||
<template #default>批量发送</template>
|
||
</a-button>
|
||
</a-space>
|
||
</template>
|
||
|
||
<!-- 发送状态 -->
|
||
<template #sendStatus="{ record }">
|
||
<a-tag :color="getSendStatusColor(record.sendStatus)">
|
||
{{ getSendStatusText(record.sendStatus) }}
|
||
</a-tag>
|
||
</template>
|
||
|
||
<!-- 中标金额 -->
|
||
<template #winningAmount="{ record }">
|
||
<span class="font-medium text-green-600">￥{{ record.winningAmount.toLocaleString() }}万</span>
|
||
</template>
|
||
|
||
<!-- 操作列 -->
|
||
<template #action="{ record }">
|
||
<a-space>
|
||
<a-link @click="viewDetail(record)">查看</a-link>
|
||
<a-link @click="downloadNotice(record)">下载</a-link>
|
||
<a-link @click="sendNotice(record)" v-if="record.sendStatus === 'not_sent'">发送</a-link>
|
||
<a-link @click="signContract(record)" v-if="record.sendStatus === 'sent'">签署合同</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({
|
||
projectName: '',
|
||
noticeCode: '',
|
||
sendStatus: '',
|
||
noticeDate: '',
|
||
page: 1,
|
||
size: 10
|
||
})
|
||
|
||
// 查询条件配置
|
||
const queryFormColumns = [
|
||
{
|
||
field: 'projectName',
|
||
label: '项目名称',
|
||
type: 'input' as const,
|
||
props: {
|
||
placeholder: '请输入项目名称'
|
||
}
|
||
},
|
||
{
|
||
field: 'noticeCode',
|
||
label: '通知书编号',
|
||
type: 'input' as const,
|
||
props: {
|
||
placeholder: '请输入通知书编号'
|
||
}
|
||
},
|
||
{
|
||
field: 'sendStatus',
|
||
label: '发送状态',
|
||
type: 'select' as const,
|
||
props: {
|
||
placeholder: '请选择发送状态',
|
||
options: [
|
||
{ label: '未发送', value: 'not_sent' },
|
||
{ label: '已发送', value: 'sent' },
|
||
{ label: '已确认', value: 'confirmed' },
|
||
{ label: '已签约', value: 'contracted' }
|
||
]
|
||
}
|
||
}
|
||
]
|
||
|
||
// 表格列配置
|
||
const tableColumns: TableColumnData[] = [
|
||
{ title: '通知书编号', dataIndex: 'noticeCode', width: 150 },
|
||
{ title: '项目名称', dataIndex: 'projectName', width: 300, ellipsis: true, tooltip: true },
|
||
{ title: '中标单位', dataIndex: 'winningCompany', width: 200, ellipsis: true, tooltip: true },
|
||
{ title: '招标单位', dataIndex: 'tenderUnit', width: 200, ellipsis: true, tooltip: true },
|
||
{ title: '中标金额', dataIndex: 'winningAmount', slotName: 'winningAmount', width: 120 },
|
||
{ title: '工期要求', dataIndex: 'duration', width: 100 },
|
||
{ title: '通知日期', dataIndex: 'noticeDate', width: 120 },
|
||
{ title: '有效期', dataIndex: 'validUntil', width: 120 },
|
||
{ title: '发送状态', dataIndex: 'sendStatus', slotName: 'sendStatus', width: 100 },
|
||
{ title: '发送时间', dataIndex: 'sendTime', width: 160 },
|
||
{ title: '确认时间', dataIndex: 'confirmTime', width: 160 },
|
||
{ title: '联系人', dataIndex: 'contactPerson', width: 100 },
|
||
{ title: '联系电话', dataIndex: 'contactPhone', width: 120 },
|
||
{ 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,
|
||
noticeCode: 'WN2024001',
|
||
projectName: '华能新能源风电场叶片检测服务项目',
|
||
winningCompany: '我公司',
|
||
tenderUnit: '华能新能源股份有限公司',
|
||
winningAmount: 320,
|
||
duration: '60天',
|
||
noticeDate: '2024-02-16',
|
||
validUntil: '2024-02-26',
|
||
sendStatus: 'contracted',
|
||
sendTime: '2024-02-16 14:30:00',
|
||
confirmTime: '2024-02-17 10:15:00',
|
||
contactPerson: '李经理',
|
||
contactPhone: '13800138001',
|
||
remark: '已成功签署合同'
|
||
},
|
||
{
|
||
id: 2,
|
||
noticeCode: 'WN2024002',
|
||
projectName: '大唐风电场防雷检测项目',
|
||
winningCompany: '我公司',
|
||
tenderUnit: '大唐新能源股份有限公司',
|
||
winningAmount: 268,
|
||
duration: '45天',
|
||
noticeDate: '2024-02-21',
|
||
validUntil: '2024-03-03',
|
||
sendStatus: 'confirmed',
|
||
sendTime: '2024-02-21 09:00:00',
|
||
confirmTime: '2024-02-22 11:30:00',
|
||
contactPerson: '王经理',
|
||
contactPhone: '13800138002',
|
||
remark: '等待签署正式合同'
|
||
},
|
||
{
|
||
id: 3,
|
||
noticeCode: 'WN2024003',
|
||
projectName: '国电投风电场设备检修项目',
|
||
winningCompany: '我公司',
|
||
tenderUnit: '国家电力投资集团',
|
||
winningAmount: 450,
|
||
duration: '30天',
|
||
noticeDate: '2024-02-28',
|
||
validUntil: '2024-03-10',
|
||
sendStatus: 'sent',
|
||
sendTime: '2024-02-28 16:45:00',
|
||
confirmTime: '',
|
||
contactPerson: '张经理',
|
||
contactPhone: '13800138003',
|
||
remark: '已发送，等待对方确认'
|
||
}
|
||
])
|
||
|
||
const pagination = reactive({
|
||
current: 1,
|
||
pageSize: 10,
|
||
total: 3,
|
||
showTotal: true,
|
||
showPageSize: true
|
||
})
|
||
|
||
// 获取发送状态颜色
|
||
const getSendStatusColor = (status: string) => {
|
||
const colorMap: Record<string, string> = {
|
||
'not_sent': 'gray',
|
||
'sent': 'blue',
|
||
'confirmed': 'orange',
|
||
'contracted': 'green'
|
||
}
|
||
return colorMap[status] || 'gray'
|
||
}
|
||
|
||
// 获取发送状态文本
|
||
const getSendStatusText = (status: string) => {
|
||
const textMap: Record<string, string> = {
|
||
'not_sent': '未发送',
|
||
'sent': '已发送',
|
||
'confirmed': '已确认',
|
||
'contracted': '已签约'
|
||
}
|
||
return textMap[status] || status
|
||
}
|
||
|
||
// 搜索和重置
|
||
const search = async () => {
|
||
loading.value = true
|
||
setTimeout(() => {
|
||
loading.value = false
|
||
}, 1000)
|
||
}
|
||
|
||
const reset = () => {
|
||
Object.assign(searchForm, {
|
||
projectName: '',
|
||
noticeCode: '',
|
||
sendStatus: '',
|
||
noticeDate: '',
|
||
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 generateNotice = () => {
|
||
Message.info('生成通知书功能开发中...')
|
||
}
|
||
|
||
const batchSend = () => {
|
||
Message.info('批量发送功能开发中...')
|
||
}
|
||
|
||
const viewDetail = (record: any) => {
|
||
Message.info(`查看中标通知书: ${record.projectName}`)
|
||
}
|
||
|
||
const downloadNotice = (record: any) => {
|
||
Message.info(`下载中标通知书: ${record.projectName}`)
|
||
}
|
||
|
||
const sendNotice = (record: any) => {
|
||
Message.info(`发送中标通知书: ${record.projectName}`)
|
||
}
|
||
|
||
const signContract = (record: any) => {
|
||
Message.info(`签署合同: ${record.projectName}`)
|
||
}
|
||
|
||
onMounted(() => {
|
||
search()
|
||
})
|
||
</script> |