277 lines
7.1 KiB
Vue
277 lines
7.1 KiB
Vue
<template>
|
|
<GiPageLayout>
|
|
<GiTable
|
|
row-key="id"
|
|
title="招标文件管理"
|
|
:data="dataList"
|
|
:columns="tableColumns"
|
|
:loading="loading"
|
|
:scroll="{ x: '100%', y: '100%', minWidth: 1400 }"
|
|
: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="batchDownload">
|
|
<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 #budget="{ record }">
|
|
<span class="font-medium text-green-600">￥{{ record.budget.toLocaleString() }}万</span>
|
|
</template>
|
|
|
|
<!-- 操作列 -->
|
|
<template #action="{ record }">
|
|
<a-space>
|
|
<a-link @click="viewDetail(record)">查看</a-link>
|
|
<a-link @click="downloadFile(record)">下载</a-link>
|
|
<a-link @click="editRecord(record)" v-if="record.status === 'draft'">编辑</a-link>
|
|
<a-link @click="publishTender(record)" v-if="record.status === 'draft'">发布</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: '',
|
|
tenderCode: '',
|
|
status: '',
|
|
publishDate: '',
|
|
page: 1,
|
|
size: 10
|
|
})
|
|
|
|
// 查询条件配置
|
|
const queryFormColumns = [
|
|
{
|
|
field: 'projectName',
|
|
label: '项目名称',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入项目名称'
|
|
}
|
|
},
|
|
{
|
|
field: 'tenderCode',
|
|
label: '招标编号',
|
|
type: 'input' as const,
|
|
props: {
|
|
placeholder: '请输入招标编号'
|
|
}
|
|
},
|
|
{
|
|
field: 'status',
|
|
label: '状态',
|
|
type: 'select' as const,
|
|
props: {
|
|
placeholder: '请选择状态',
|
|
options: [
|
|
{ label: '草稿', value: 'draft' },
|
|
{ label: '已发布', value: 'published' },
|
|
{ label: '投标中', value: 'bidding' },
|
|
{ label: '已截止', value: 'closed' },
|
|
{ label: '已废标', value: 'cancelled' }
|
|
]
|
|
}
|
|
}
|
|
]
|
|
|
|
// 表格列配置
|
|
const tableColumns: TableColumnData[] = [
|
|
{ title: '招标编号', dataIndex: 'tenderCode', width: 150 },
|
|
{ title: '项目名称', dataIndex: 'projectName', width: 250, ellipsis: true, tooltip: true },
|
|
{ title: '招标单位', dataIndex: 'tenderUnit', width: 200, ellipsis: true, tooltip: true },
|
|
{ title: '项目类型', dataIndex: 'projectType', width: 120 },
|
|
{ title: '预算金额', dataIndex: 'budget', slotName: 'budget', width: 120 },
|
|
{ title: '发布日期', dataIndex: 'publishDate', width: 120 },
|
|
{ title: '截止日期', dataIndex: 'deadline', width: 120 },
|
|
{ title: '开标日期', dataIndex: 'openDate', width: 120 },
|
|
{ title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
|
|
{ title: '报名企业', dataIndex: 'registeredCompanies', width: 100 },
|
|
{ title: '联系人', dataIndex: 'contactPerson', width: 100 },
|
|
{ title: '联系电话', dataIndex: 'contactPhone', width: 120 },
|
|
{ title: '操作', slotName: 'action', width: 200, fixed: 'right' }
|
|
]
|
|
|
|
// 数据状态
|
|
const loading = ref(false)
|
|
const dataList = ref([
|
|
{
|
|
id: 1,
|
|
tenderCode: 'TD2024001',
|
|
projectName: '华能新能源风电场叶片检测服务项目',
|
|
tenderUnit: '华能新能源股份有限公司',
|
|
projectType: '技术服务',
|
|
budget: 350,
|
|
publishDate: '2024-01-10',
|
|
deadline: '2024-02-10',
|
|
openDate: '2024-02-15',
|
|
status: 'bidding',
|
|
registeredCompanies: 15,
|
|
contactPerson: '李经理',
|
|
contactPhone: '13800138001'
|
|
},
|
|
{
|
|
id: 2,
|
|
tenderCode: 'TD2024002',
|
|
projectName: '大唐风电场防雷检测项目',
|
|
tenderUnit: '大唐新能源股份有限公司',
|
|
projectType: '检测服务',
|
|
budget: 280,
|
|
publishDate: '2024-01-15',
|
|
deadline: '2024-02-15',
|
|
openDate: '2024-02-20',
|
|
status: 'published',
|
|
registeredCompanies: 8,
|
|
contactPerson: '王经理',
|
|
contactPhone: '13800138002'
|
|
},
|
|
{
|
|
id: 3,
|
|
tenderCode: 'TD2024003',
|
|
projectName: '国电投海上风电智能监测系统',
|
|
tenderUnit: '国家电力投资集团',
|
|
projectType: '设备采购',
|
|
budget: 1200,
|
|
publishDate: '2024-01-05',
|
|
deadline: '2024-01-25',
|
|
openDate: '2024-01-30',
|
|
status: 'closed',
|
|
registeredCompanies: 22,
|
|
contactPerson: '张经理',
|
|
contactPhone: '13800138003'
|
|
}
|
|
])
|
|
|
|
const pagination = reactive({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 3,
|
|
showTotal: true,
|
|
showPageSize: true
|
|
})
|
|
|
|
// 获取状态颜色
|
|
const getStatusColor = (status: string) => {
|
|
const colorMap: Record<string, string> = {
|
|
'draft': 'gray',
|
|
'published': 'blue',
|
|
'bidding': 'green',
|
|
'closed': 'orange',
|
|
'cancelled': 'red'
|
|
}
|
|
return colorMap[status] || 'gray'
|
|
}
|
|
|
|
// 获取状态文本
|
|
const getStatusText = (status: string) => {
|
|
const textMap: Record<string, string> = {
|
|
'draft': '草稿',
|
|
'published': '已发布',
|
|
'bidding': '投标中',
|
|
'closed': '已截止',
|
|
'cancelled': '已废标'
|
|
}
|
|
return textMap[status] || status
|
|
}
|
|
|
|
// 搜索和重置
|
|
const search = async () => {
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1000)
|
|
}
|
|
|
|
const reset = () => {
|
|
Object.assign(searchForm, {
|
|
projectName: '',
|
|
tenderCode: '',
|
|
status: '',
|
|
publishDate: '',
|
|
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 batchDownload = () => {
|
|
Message.info('批量下载功能开发中...')
|
|
}
|
|
|
|
const viewDetail = (record: any) => {
|
|
Message.info(`查看招标详情: ${record.projectName}`)
|
|
}
|
|
|
|
const downloadFile = (record: any) => {
|
|
Message.info(`下载招标文件: ${record.projectName}`)
|
|
}
|
|
|
|
const editRecord = (record: any) => {
|
|
Message.info(`编辑招标文件: ${record.projectName}`)
|
|
}
|
|
|
|
const publishTender = (record: any) => {
|
|
Message.info(`发布招标: ${record.projectName}`)
|
|
}
|
|
|
|
onMounted(() => {
|
|
search()
|
|
})
|
|
</script> |