Merge pull request 'main' (#1) from main into devlopment

Reviewed-on: http://pms.dtyx.net:3000/wuxueyu/Industrial-image-management-system---web/pulls/1
This commit is contained in:
admin123 2025-08-06 08:48:40 +08:00
commit 6317d898a3
13 changed files with 1331 additions and 130 deletions

View File

@ -5,7 +5,6 @@ VITE_API_PREFIX = '/dev-api'
# 接口地址
# VITE_API_BASE_URL = 'http://pms.dtyx.net:9158/'
VITE_API_BASE_URL = 'http://localhost:8888/'
# VITE_API_BASE_URL = 'http://10.18.34.213:8888/'
# 接口地址 (WebSocket)
VITE_API_WS_URL = 'ws://localhost:8000'

View File

@ -1,126 +0,0 @@
// @/apis/bussiness/bussiness.js - 根据后端接口重新编写
import http from '@/utils/http';
const { request } = http;
// 获取文件夹列表(分页)
export function getFolderListApi(params) {
return request({
url: '/businessData/folder/list',
method: 'get',
params: {
page: params?.page || 1,
pageSize: params?.pageSize || 10,
folderName: params?.folderName
}
});
}
// 获取文件列表(分页)
export function getFilesApi(params) {
return request({
url: '/businessData/file/list',
method: 'get',
params: {
page: params?.page || 1,
pageSize: params?.pageSize || 10,
folderId: params?.folderId || 0
}
});
}
// 创建文件夹
export function createFolderApi(data) {
return request({
url: '/businessData/folder/creatFolder',
method: 'post',
data: {
name: data.name,
parentId: data.parentId || 0
}
});
}
// 重命名文件夹
export function updateFolderApi(folderId, newName) {
return request({
url: '/businessData/folder/rename',
method: 'put',
params: {
folderId: folderId,
newName: newName
}
});
}
// 删除文件夹
export function deleteFolderApi(folderId) {
return request({
url: '/businessData/folder/delete',
method: 'delete',
params: {
folderId: folderId
}
});
}
// 上传文件
export function uploadFileApi(file, folderId, onUploadProgress, cancelToken) {
const formData = new FormData();
formData.append('file', file);
return request({
url: '/businessData/file/add',
method: 'post',
params: {
folderId: folderId
},
data: formData,
onUploadProgress,
cancelToken,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
// 下载文件
export function downloadFileApi(fileId) {
return request({
url: '/businessData/file/download',
method: 'get',
params: {
fileId: fileId
},
responseType: 'blob'
});
}
// 删除文件
export function deleteFileApi(fileId) {
return request({
url: '/businessData/file/delete',
method: 'delete',
params: {
fileId: fileId
}
});
}
// 预览文件(后端没有提供预览接口,使用下载接口)
export function previewFileApi(fileId) {
return request({
url: '/businessData/file/download',
method: 'get',
params: {
fileId: fileId
},
responseType: 'blob'
});
}
// 重命名文件(后端没有提供重命名接口,需要先删除再上传)
export function updateFileNameApi(fileId, data) {
// 注意后端没有提供文件重命名接口这里返回一个Promise.reject
return Promise.reject(new Error('后端暂不支持文件重命名功能'));
}

View File

@ -0,0 +1,49 @@
import http from '@/utils/http'
import type * as T from '@/types/equipment.d'
const BASE_URL = '/equipment'
/** @desc 分页查询设备列表 */
export function pageEquipment(query: T.EquipmentPageQuery) {
return http.get<T.EquipmentResp[]>(`${BASE_URL}/page`, query)
}
/** @desc 查询设备列表 */
export function listEquipment(query?: T.EquipmentPageQuery) {
return http.get<T.EquipmentResp[]>(`${BASE_URL}/list`, query)
}
/** @desc 查询设备详情 */
export function getEquipmentDetail(equipmentId: string) {
return http.get<T.EquipmentResp>(`${BASE_URL}/detail/${equipmentId}`)
}
/** @desc 新增设备 */
export function createEquipment(data: T.EquipmentReq) {
return http.post(`${BASE_URL}`, data)
}
/** @desc 更新设备 */
export function updateEquipment(equipmentId: string, data: T.EquipmentReq) {
return http.put(`${BASE_URL}/${equipmentId}`, data)
}
/** @desc 删除设备 */
export function deleteEquipment(equipmentId: string) {
return http.del(`${BASE_URL}/${equipmentId}`)
}
/** @desc 设备状态变更 */
export function changeEquipmentStatus(equipmentId: string, status: string) {
return http.put(`${BASE_URL}/${equipmentId}/status`, { status })
}
/** @desc 设备分配 */
export function assignEquipment(equipmentId: string, userId: string) {
return http.put(`${BASE_URL}/${equipmentId}/assign`, { userId })
}
/** @desc 设备归还 */
export function returnEquipment(equipmentId: string) {
return http.put(`${BASE_URL}/${equipmentId}/return`)
}

277
src/apis/equipment/type.ts Normal file
View File

@ -0,0 +1,277 @@
/**
*
*/
export interface EquipmentListReq {
/** 最低价格 */
minPrice?: number
/** 最高价格 */
maxPrice?: number
/** 设备名称 */
equipmentName?: string
/** 设备类型 */
equipmentType?: string
/** 设备状态 */
equipmentStatus?: string
/** 设备序列号 */
equipmentSn?: string
/** 资产编号 */
assetCode?: string
/** 品牌 */
brand?: string
/** 位置状态 */
locationStatus?: string
/** 健康状态 */
healthStatus?: string
/** 负责人 */
responsiblePerson?: string
/** 使用状态 */
useStatus?: string
/** 项目ID */
projectId?: string
/** 使用人ID */
userId?: string
/** 设备型号 */
equipmentModel?: string
/** 配置规格/参数 */
specification?: string
/** 设备当前物理位置 */
physicalLocation?: string
/** 供应商名称 */
supplierName?: string
/** 采购订单号 */
purchaseOrder?: string
/** 维护人员 */
maintenancePerson?: string
/** 次户号 */
accountNumber?: string
/** 数量 */
quantity?: number
/** 单价 */
unitPrice?: number
/** 总价 */
totalPrice?: number
/** 盘点依据 */
inventoryBasis?: string
/** 动态记录 */
dynamicRecord?: string
/** 资产备注 */
assetRemark?: string
/** 采购时间开始 */
purchaseTimeStart?: string
/** 采购时间结束 */
purchaseTimeEnd?: string
/** 入库时间开始 */
inStockTimeStart?: string
/** 入库时间结束 */
inStockTimeEnd?: string
/** 启用时间开始 */
activationTimeStart?: string
/** 启用时间结束 */
activationTimeEnd?: string
/** 当前页码 */
pageNum?: number
/** 每页大小 */
pageSize?: number
/** 排序字段 */
orderBy?: string
/** 排序方向 */
orderDirection?: string
/** 页码 */
page?: number
/** 库存条码 */
inventoryBarcode?: string
}
/**
*
*/
export interface PageResult<T> {
code: number
msg: string
rows: T[]
total: number
}
/**
*
*/
export interface EquipmentResp {
/** 设备ID */
equipmentId: string
/** 资产编号 */
assetCode?: string
/** 设备名称 */
equipmentName: string
/** 设备类型 */
equipmentType: string
/** 设备类型描述 */
equipmentTypeLabel?: string
/** 设备型号 */
equipmentModel: string
/** 设备SN */
equipmentSn: string
/** 品牌 */
brand?: string
/** 配置规格/参数 */
specification?: string
/** 设备状态 */
equipmentStatus: string
/** 设备状态描述 */
equipmentStatusLabel?: string
/** 使用状态 */
useStatus: string
/** 位置状态 */
locationStatus?: string
/** 位置状态描述 */
locationStatusLabel?: string
/** 设备当前物理位置 */
physicalLocation?: string
/** 负责人 */
responsiblePerson?: string
/** 健康状态 */
healthStatus?: string
/** 健康状态描述 */
healthStatusLabel?: string
/** 采购时间 */
purchaseTime?: string
/** 入库时间 */
inStockTime?: string
/** 启用时间 */
activationTime?: string
/** 预计报废时间 */
expectedScrapTime?: string
/** 实际报废时间 */
actualScrapTime?: string
/** 状态变更时间 */
statusChangeTime?: string
/** 采购订单 */
purchaseOrder?: string
/** 供应商名称 */
supplierName?: string
/** 采购价格 */
purchasePrice?: number
/** 当前净值 */
currentNetValue?: number
/** 折旧方法 */
depreciationMethod?: string
/** 折旧年限 */
depreciationYears?: number
/** 残值 */
salvageValue?: number
/** 保修截止日期 */
warrantyExpireDate?: string
/** 上次维护日期 */
lastMaintenanceDate?: string
/** 下次维护日期 */
nextMaintenanceDate?: string
/** 维护人员 */
maintenancePerson?: string
/** 库存条码 */
inventoryBarcode?: string
/** 资产备注 */
assetRemark?: string
/** 项目ID */
projectId?: string
/** 项目名称 */
projectName?: string
/** 使用人ID */
userId?: string
/** 使用人 */
name?: string
/** 创建时间 */
createTime?: string
/** 更新时间 */
updateTime?: string
/** 次户号 */
accountNumber?: string
/** 数量 */
quantity?: number
/** 单价 */
unitPrice?: number
/** 总价 */
totalPrice?: number
/** 盘点依据 */
inventoryBasis?: string
/** 动态记录 */
dynamicRecord?: string
}
/**
*
*/
export interface EquipmentReq {
/** 设备名称 */
equipmentName: string
/** 设备型号 */
equipmentModel: string
/** 设备类型 */
equipmentType: string
/** 设备状态 */
equipmentStatus: string
/** 使用状态 */
useStatus: string
/** 设备序列号 */
equipmentSn: string
/** 资产编号 */
assetCode?: string
/** 品牌 */
brand?: string
/** 配置规格/参数 */
specification?: string
/** 位置状态 */
locationStatus?: string
/** 设备当前物理位置 */
physicalLocation?: string
/** 负责人 */
responsiblePerson?: string
/** 健康状态 */
healthStatus?: string
/** 采购时间 */
purchaseTime?: string
/** 入库时间 */
inStockTime?: string
/** 启用时间 */
activationTime?: string
/** 预计报废时间 */
expectedScrapTime?: string
/** 实际报废时间 */
actualScrapTime?: string
/** 采购订单 */
purchaseOrder?: string
/** 供应商名称 */
supplierName?: string
/** 采购价格 */
purchasePrice?: number
/** 当前净值 */
currentNetValue?: number
/** 折旧方法 */
depreciationMethod?: string
/** 折旧年限 */
depreciationYears?: number
/** 残值 */
salvageValue?: number
/** 保修截止日期 */
warrantyExpireDate?: string
/** 上次维护日期 */
lastMaintenanceDate?: string
/** 下次维护日期 */
nextMaintenanceDate?: string
/** 维护人员 */
maintenancePerson?: string
/** 库存条码 */
inventoryBarcode?: string
/** 资产备注 */
assetRemark?: string
/** 次户号 */
accountNumber?: string
/** 数量 */
quantity?: number
/** 单价 */
unitPrice?: number
/** 总价 */
totalPrice?: number
/** 盘点依据 */
inventoryBasis?: string
/** 动态记录 */
dynamicRecord?: string
}

View File

@ -1050,7 +1050,7 @@ export const systemRoutes: RouteRecordRaw[] = [
children: [
{
path: '/user/profile',
name: 'UserProfile',
name: 'UsersProfile',
component: () => import('@/views/user/profile/index.vue'),
meta: {
title: '个人中心',

View File

@ -70,6 +70,6 @@ declare global {
// for type re-export
declare global {
// @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
import('vue')
}

179
src/types/equipment.d.ts vendored Normal file
View File

@ -0,0 +1,179 @@
export interface EquipmentPageQuery {
equipmentName?: string
equipmentType?: string
equipmentStatus?: string
equipmentSn?: string
assetCode?: string
brand?: string
locationStatus?: string
healthStatus?: string
responsiblePerson?: string
useStatus?: string
projectId?: string
userId?: string
equipmentModel?: string
specification?: string
physicalLocation?: string
supplierName?: string
maintenancePerson?: string
inventoryBarcode?: string
assetRemark?: string
// 新增搜索字段
usingDepartment?: string
invoice?: string
barcode?: string
importer?: string
page?: number
pageSize?: number
orderBy?: string
orderDirection?: string
}
export interface EquipmentReq {
equipmentName: string
equipmentModel: string
equipmentType: string
equipmentStatus: string
useStatus: string
equipmentSn: string
assetCode?: string
brand?: string
specification?: string
locationStatus?: string
physicalLocation?: string
responsiblePerson?: string
healthStatus?: string
purchaseTime?: string
inStockTime?: string
activationTime?: string
expectedScrapTime?: string
actualScrapTime?: string
statusChangeTime?: string
purchaseOrder?: string
supplierName?: string
purchasePrice?: number
currentNetValue?: number
depreciationMethod?: string
depreciationYears?: number
salvageValue?: number
warrantyExpireDate?: string
lastMaintenanceDate?: string
nextMaintenanceDate?: string
maintenancePerson?: string
inventoryBarcode?: string
assetRemark?: string
// 新增字段
usingDepartment?: string
borrowingTime?: string
returnTime?: string
outStockTime?: string
totalUsageTime?: string
depreciationRate?: number
depreciationMethodDesc?: string
invoice?: string
invoiceStatus?: string
attachments?: string
photos?: string
barcode?: string
importer?: string
inventoryTimeStatus1?: string
inventoryTimeStatus2?: string
inventoryTimeStatus3?: string
inventoryCheckTimeStatus1?: string
inventoryCheckTimeStatus2?: string
inventoryCheckTimeStatus3?: string
}
export interface EquipmentResp {
equipmentId: string
assetCode?: string
equipmentName: string
equipmentType: string
equipmentTypeLabel?: string
equipmentModel: string
equipmentSn: string
brand?: string
specification?: string
equipmentStatus: string
equipmentStatusLabel?: string
useStatus: string
locationStatus?: string
locationStatusLabel?: string
physicalLocation?: string
responsiblePerson?: string
healthStatus?: string
healthStatusLabel?: string
purchaseTime?: string
inStockTime?: string
activationTime?: string
expectedScrapTime?: string
actualScrapTime?: string
statusChangeTime?: string
purchaseOrder?: string
supplierName?: string
purchasePrice?: number
currentNetValue?: number
depreciationMethod?: string
depreciationYears?: number
salvageValue?: number
warrantyExpireDate?: string
lastMaintenanceDate?: string
nextMaintenanceDate?: string
maintenancePerson?: string
inventoryBarcode?: string
assetRemark?: string
// 新增字段
usingDepartment?: string
borrowingTime?: string
returnTime?: string
outStockTime?: string
totalUsageTime?: string
depreciationRate?: number
depreciationMethodDesc?: string
invoice?: string
invoiceStatus?: string
attachments?: string
photos?: string
barcode?: string
importer?: string
inventoryTimeStatus1?: string
inventoryTimeStatus2?: string
inventoryTimeStatus3?: string
inventoryCheckTimeStatus1?: string
inventoryCheckTimeStatus2?: string
inventoryCheckTimeStatus3?: string
projectId?: string
projectName?: string
userId?: string
name?: string
createTime?: string
updateTime?: string
}
export interface EquipmentTypeOption {
label: string
value: string
}
export interface EquipmentStatusOption {
label: string
value: string
color: string
}
export interface LocationStatusOption {
label: string
value: string
color: string
}
export interface HealthStatusOption {
label: string
value: string
color: string
}
export interface DepreciationMethodOption {
label: string
value: string
}

View File

@ -73,7 +73,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import type { BiddingDetail } from './types'
import type { BiddingDetail } from '../types'
const props = defineProps<{
visible: boolean

View File

@ -0,0 +1,344 @@
<template>
<div class="project-table-container">
<a-table
:data="data"
:columns="columns"
:loading="loading"
:pagination="false"
:scroll="{ x: '100%', y: '100%' }"
row-key="id"
:stripe="false"
size="large"
>
<!-- 招标项目 -->
<template #projectName="{ record }">
<div class="project-name">
<span class="name-text">{{ record.projectName }}</span>
</div>
</template>
<!-- 招标单位 -->
<template #biddingUnit="{ record }">
<span class="bidding-unit">{{ record.biddingUnit }}</span>
</template>
<!-- 预算金额 -->
<template #budgetAmount="{ record }">
<span class="budget-text">{{ record.budgetAmount }}</span>
</template>
<!-- 截止时间 -->
<template #deadline="{ record }">
<span class="date-text">{{ record.deadline }}</span>
</template>
<!-- 爬取时间 -->
<template #crawlingTime="{ record }">
<span class="date-text">{{ record.crawlingTime }}</span>
</template>
<!-- 来源平台 -->
<template #sourcePlatform="{ record }">
<span class="source-text">{{ record.sourcePlatform }}</span>
</template>
<!-- 招标文件 -->
<template #biddingDocuments="{ record }">
<span class="doc-text">{{ record.biddingDocuments }}</span>
</template>
<!-- 状态 -->
<template #status="{ record }">
<a-tag :color="getStatusColor(record.status)">
{{ getStatusText(record.status) }}
</a-tag>
</template>
<!-- 操作 -->
<template #action="{ record }">
<div class="action-buttons">
<a-button size="small" @click="handleView(record)">
详情
</a-button>
<a-button
type="primary"
size="small"
@click="handleEnter(record)"
>
报名
</a-button>
</div>
</template>
</a-table>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { TableColumnData } from '@arco-design/web-vue'
import type { ProjectData } from '../types'
interface Props {
data: ProjectData[]
loading?: boolean
}
interface Emits {
(e: 'view', project: ProjectData): void
(e: 'enter', project: ProjectData): void
}
const props = withDefaults(defineProps<Props>(), {
loading: false
})
const emit = defineEmits<Emits>()
//
const columns: TableColumnData[] = [
{
title: '招标项目',
dataIndex: 'projectName',
slotName: 'projectName',
width: 300,
ellipsis: true,
tooltip: true
},
{
title: '招标单位',
dataIndex: ' biddingUnit',
slotName: 'biddingUnit',
width: 120,
align: 'center'
},
{
title: '预算金额',
dataIndex: 'budgetAmount',
slotName: 'budgetAmount',
width: 120,
align: 'center'
},
{
title: '截止时间',
dataIndex: 'deadline',
slotName: 'deadline',
width: 150,
align: 'center'
},
{
title: '爬取时间',
dataIndex: 'crawlingTime',
slotName: 'crawlingTime',
width: 150,
align: 'center'
},
{
title: '来源平台',
dataIndex: 'sourcePlatform',
slotName: 'sourcePlatform',
width: 150,
align: 'center'
},
{
title: '招标文件',
dataIndex: ' biddingDocuments',
slotName: 'biddingDocuments',
width: 150,
align: 'center'
},
{
title: '状态',
dataIndex: 'status',
slotName: 'status',
width: 120,
align: 'center'
},
{
title: '操作',
dataIndex: 'action',
slotName: 'action',
width: 150,
align: 'center',
fixed: 'right'
}
]
//
const getStatusColor = (status: string) => {
const colorMap: Record<string, string> = {
'not_started': 'gray',
'in_progress': 'blue',
'completed': 'green',
'paused': 'orange',
'cancelled': 'red'
}
return colorMap[status] || 'gray'
}
//
const getStatusText = (status: string) => {
const textMap: Record<string, string> = {
'not_started': '未开始',
'in_progress': '进行中',
'completed': '已完成',
'paused': '已暂停',
'cancelled': '已取消'
}
return textMap[status] || status
}
//
const getProgressColor = (progress: number) => {
if (progress === 0) return '#d9d9d9'
if (progress === 100) return '#52c41a'
if (progress >= 70) return '#1890ff'
if (progress >= 40) return '#faad14'
return '#ff4d4f'
}
//
const handleView = (record: ProjectData) => {
emit('view', record)
}
const handleEnter = (record: ProjectData) => {
emit('enter', record)
}
</script>
<style scoped lang="less">
.project-table-container {
height: 100%;
background: #fff;
border-radius: 8px;
}
.project-name {
.name-text {
font-weight: 500;
color: #333;
}
}
.unit-count {
font-weight: 600;
color: #1890ff;
}
.date-text {
color: #666;
font-size: 13px;
}
.progress-container {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
.progress-text {
font-size: 12px;
color: #666;
font-weight: 500;
min-width: 35px;
text-align: right;
}
}
.action-buttons {
display: flex;
gap: 8px;
justify-content: center;
}
:deep(.arco-table) {
.arco-table-thead {
.arco-table-th {
background-color: #fafafa;
font-weight: 600;
color: #333;
border-bottom: 1px solid #e8e8e8;
}
}
.arco-table-tbody {
.arco-table-tr {
&:hover {
background-color: #f5f5f5;
}
}
.arco-table-td {
border-bottom: 1px solid #f0f0f0;
padding: 16px 12px;
}
}
}
:deep(.arco-tag) {
border-radius: 4px;
font-size: 12px;
padding: 2px 8px;
}
:deep(.arco-progress-line-outer) {
border-radius: 4px;
}
:deep(.arco-progress-line-inner) {
border-radius: 4px;
transition: all 0.3s ease;
}
//
:deep(.arco-tag-gray) {
background-color: #f5f5f5;
border-color: #d9d9d9;
color: #666;
}
:deep(.arco-tag-blue) {
background-color: #e6f7ff;
border-color: #91d5ff;
color: #1890ff;
}
:deep(.arco-tag-green) {
background-color: #f6ffed;
border-color: #b7eb8f;
color: #52c41a;
}
:deep(.arco-tag-orange) {
background-color: #fff7e6;
border-color: #ffd591;
color: #fa8c16;
}
:deep(.arco-tag-red) {
background-color: #fff1f0;
border-color: #ffccc7;
color: #ff4d4f;
}
//
@media (max-width: 768px) {
:deep(.arco-table-td) {
padding: 12px 8px;
font-size: 14px;
}
.action-buttons {
flex-direction: column;
gap: 4px;
}
.progress-container {
gap: 8px;
.progress-text {
font-size: 11px;
}
}
}
</style>

View File

@ -0,0 +1,415 @@
<template>
<GiPageLayout>
<div class="project-list-container">
<!-- 顶部搜索和操作区域 -->
<div class="header-section">
<div class="search-area">
<a-input-search
v-model="searchKeyword"
placeholder="搜索项目名称"
allow-clear
@search="handleSearch"
@clear="handleClear"
style="width: 300px"
/>
</div>
<div class="action-area">
<a-space>
<a-button type="primary" @click="startCrawler">
<template #icon><icon-play-arrow /></template>
开始爬虫
</a-button>
<a-button @click="refreshData">
<template #icon><icon-refresh /></template>
刷新数据
</a-button>
<a-button @click="exportData">
<template #icon><icon-download /></template>
导出数据
</a-button>
<a-button @click="openCrawlerSettings">
<template #icon><icon-settings /></template>
爬虫设置
</a-button>
</a-space>
</div>
</div>
<!-- 选项卡区域 -->
<div class="tabs-section">
<a-tabs
v-model:active-key="activeTab"
type="line"
size="large"
@change="handleTabChange"
>
<a-tab-pane key="all" tab="信息检索" title="信息检索">
<ProjectTable
:data="pagedData"
:loading="loading"
@view="handleView"
@enter="handleEnter"
/>
<div class="pagination-wrapper">
<a-pagination
v-model:current="currentPage"
v-model:page-size="pageSize"
:total="totalItems"
show-total
show-jumper
show-page-size
:page-size-options="[10, 20, 50, 100]"
@change="handlePageChange"
/>
</div>
</a-tab-pane>
<a-tab-pane key="my" tab="投标响应" title="投标响应">
<ProjectTable
:data="myPagedData"
:loading="loading"
@view="handleView"
@enter="handleEnter"
/>
<div class="pagination-wrapper">
<a-pagination
v-model:current="myCurrentPage"
v-model:page-size="pageSize"
:total="myTotalItems"
show-total
show-jumper
show-page-size
:page-size-options="[10, 20, 50, 100]"
@change="handleMyPageChange"
/>
</div>
</a-tab-pane>
</a-tabs>
</div>
<CrawlerSettings
v-model:visible="crawlerSettingsVisible"
@save="handleSaveSettings"
/>
</div>
</GiPageLayout>
<BiddingDetailModal
v-model:visible="detailVisible"
:detail="currentDetail"
:uploading="uploading"
@upload="handleUploadDocument"
/>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import ProjectTable from './components/InformationTable.vue'
import CrawlerSettings from './components/CrawlerSettings.vue'
import BiddingDetailModal from './components/BiddingDetailModal.vue'
import type { ProjectData, TabKey,BiddingDetail } from './types'
import { ProjectStatus } from './types'
defineOptions({ name: 'ProjectList' })
//
const loading = ref(false)
const activeTab = ref<TabKey>('all')
const searchKeyword = ref('')
const crawlerSettingsVisible = ref(false)
//
const currentPage = ref(1)
const myCurrentPage = ref(1)
const pageSize = ref(10)
//
const detailVisible = ref(false)
const uploading = ref(false)
const currentDetail = ref<BiddingDetail>({
id: 0,
projectName: '',
biddingUnit: '',
budgetAmount: 0,
deadline: '',
crawlingTime: '',
projectLocation: '',
projectDuration: '',
biddingScope: '',
qualificationRequirements: '',
sourcePlatform: '',
biddingDocuments: '',
biddingContent: '',
contentItems: []
})
//
const projectList = ref<ProjectData[]>([
{
id: 1,
projectName: 'A风场2023年检查',
biddingUnit: 15,
budgetAmount:111,
deadline: '2023-10-01',
crawlingTime: '2023-12-31',
sourcePlatform:"中国招标投标网",
biddingDocuments:"333.pdf",
status: ProjectStatus.IN_PROGRESS,
manager: '张三',
isMyProject: true
},
//
...Array.from({ length: 25 }, (_, i) => ({
id: i + 2,
projectName: `项目${i + 2}`,
biddingUnit: Math.floor(Math.random() * 20) + 1,
budgetAmount: Math.floor(Math.random() * 1000) + 100,
deadline: `2023-${(Math.floor(Math.random() * 12) + 1).toString().padStart(2, '0')}-${(Math.floor(Math.random() * 28) + 1).toString().padStart(2, '0')}`,
crawlingTime: `2023-${(Math.floor(Math.random() * 12) + 1).toString().padStart(2, '0')}-${(Math.floor(Math.random() * 28) + 1).toString().padStart(2, '0')}`,
sourcePlatform: "中国招标投标网",
biddingDocuments: `文档${i + 2}.pdf`,
status: Math.random() > 0.5 ? ProjectStatus.IN_PROGRESS : ProjectStatus.COMPLETED,
manager: ['张三', '李四', '王五'][Math.floor(Math.random() * 3)],
isMyProject: Math.random() > 0.7
}))
])
const handleSaveSettings = (settings: any) => {
console.log('Saved settings:', settings)
}
//
const handleView = (project: ProjectData) => {
// ID
currentDetail.value = {
id: project.id,
projectName: project.projectName,
biddingUnit: project.biddingUnit.toString(),
budgetAmount: project.budgetAmount,
deadline: project.deadline,
crawlingTime: project.crawlingTime,
projectLocation: '内蒙古自治区', //
projectDuration: '6个月', //
biddingScope: '风电场50台机组叶片检查服务', //
qualificationRequirements: '具备风电叶片检查资质', //
sourcePlatform: project.sourcePlatform,
biddingDocuments: project.biddingDocuments,
biddingContent: '本项目为某风电场2023年叶片检查服务采购包括但不限于',
contentItems: [
'叶片外观检查',
'无损检测',
'缺陷记录与评估',
'检查报告编制'
]
}
detailVisible.value = true
}
// -
const filteredProjects = computed(() => {
if (!searchKeyword.value) {
return projectList.value
}
return projectList.value.filter(project =>
project.projectName.toLowerCase().includes(searchKeyword.value.toLowerCase())
)
})
// -
const myProjects = computed(() => {
return filteredProjects.value.filter(project => project.isMyProject)
})
//
const totalItems = computed(() => filteredProjects.value.length)
const myTotalItems = computed(() => myProjects.value.length)
const pagedData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
const end = start + pageSize.value
return filteredProjects.value.slice(start, end)
})
const myPagedData = computed(() => {
const start = (myCurrentPage.value - 1) * pageSize.value
const end = start + pageSize.value
return myProjects.value.slice(start, end)
})
//
const handleSearch = (value: string) => {
searchKeyword.value = value
currentPage.value = 1 //
myCurrentPage.value = 1
}
const handleClear = () => {
searchKeyword.value = ''
currentPage.value = 1 //
myCurrentPage.value = 1
}
//
const handleTabChange = (key: string) => {
activeTab.value = key as TabKey
}
//
const handlePageChange = (page: number) => {
currentPage.value = page
}
const handleMyPageChange = (page: number) => {
myCurrentPage.value = page
}
//
const refreshData = async () => {
loading.value = true
try {
// API
await new Promise(resolve => setTimeout(resolve, 800))
Message.success('数据已刷新')
} catch (error) {
Message.error('刷新失败')
} finally {
loading.value = false
}
}
//
const startCrawler = () => {
Message.info('开始爬虫任务')
//
}
//
const exportData = () => {
Message.info('导出数据')
//
}
//
const openCrawlerSettings = () => {
crawlerSettingsVisible.value = true
}
const handleUploadDocument = async (file: File) => {
uploading.value = true
try {
const formData = new FormData()
formData.append('file', file)
formData.append('projectId', currentDetail.value.id.toString())
// API
const response = await uploadBiddingDocument(formData)
Message.success('文件上传成功')
currentDetail.value.biddingDocuments = response.data.fileUrl
} catch (error) {
Message.error(`文件上传失败: ${error.message}`)
} finally {
uploading.value = false
}
}
// API
const uploadBiddingDocument = (formData: FormData) => {
return new Promise((resolve) => {
setTimeout(() => {
const file = formData.get('file') as File
const projectId = formData.get('projectId')
const extension = file.name.split('.').pop()
resolve({
data: {
fileUrl: `https://your-api-domain.com/uploads/${projectId}.${extension}`
}
})
}, 1500)
})
}
onMounted(() => {
//
})
</script>
<style scoped lang="less">
.project-list-container {
height: 100%;
display: flex;
flex-direction: column;
}
.header-section {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 0 4px;
}
.search-area {
flex: 1;
}
.action-area {
display: flex;
gap: 12px;
align-items: center;
}
.tabs-section {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.pagination-wrapper {
margin-top: 16px;
display: flex;
justify-content: flex-end;
}
:deep(.arco-tabs-content) {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
:deep(.arco-tabs-pane) {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
:deep(.arco-tabs-nav-tab) {
font-weight: 500;
font-size: 16px;
}
:deep(.arco-tabs-nav-tab-list) {
padding: 0 4px;
}
//
@media (max-width: 768px) {
.header-section {
flex-direction: column;
gap: 16px;
align-items: stretch;
}
.search-area {
flex: none;
}
.action-area {
justify-content: center;
}
}
</style>

View File

@ -0,0 +1,64 @@
// 项目状态枚举
export enum ProjectStatus {
NOT_STARTED = 'not_started',
IN_PROGRESS = 'in_progress',
COMPLETED = 'completed',
PAUSED = 'paused',
CANCELLED = 'cancelled'
}
// 项目数据接口
export interface ProjectData {
id: number
projectName: string
unitCount: number
startDate: string
endDate: string
status: ProjectStatus
progress: number
manager: string
isMyProject: boolean
description?: string
location?: string
client?: string
budget?: number
team?: string[]
}
// 选项卡类型
export type TabKey = 'all' | 'my' | 'pending'
// 项目筛选条件
export interface ProjectFilter {
keyword?: string
status?: ProjectStatus
manager?: string
dateRange?: [string, string]
}
// 项目统计信息
export interface ProjectStats {
total: number
inProgress: number
completed: number
notStarted: number
myProjects: number
}
// 招标详情
export interface BiddingDetail {
id: number
projectName: string
biddingUnit: string
budgetAmount: number
deadline: string
crawlingTime: string
projectLocation: string
projectDuration: string
biddingScope: string
qualificationRequirements: string
sourcePlatform: string
biddingDocuments: string
biddingContent: string
contentItems?: string[]
}