Merge remote-tracking branch 'origin/devlopment' into devlopment
This commit is contained in:
Maple
commit
82f749555e
|
|
@ -100,9 +100,12 @@ export const equipmentProcurementApi = {
|
|||
},
|
||||
|
||||
/**
|
||||
* 确认收货
|
||||
* 确认收货（扩展版，支持完整设备数据）
|
||||
*/
|
||||
receiveGoods: (equipmentId: string, data: ReceiptRequest) => {
|
||||
console.log('📦 收货API被调用，设备ID:', equipmentId)
|
||||
console.log('📦 收货数据:', data)
|
||||
|
||||
return http.post<ApiRes<null>>(`/equipment/procurement/receipt/${equipmentId}`, data)
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -410,33 +410,63 @@ export interface EquipmentApprovalResp {
|
|||
}
|
||||
|
||||
/**
|
||||
* 收货请求参数
|
||||
* 收货请求参数（扩展版，包含完整设备信息）
|
||||
*/
|
||||
export interface ReceiptRequest {
|
||||
/** 收货时间 */
|
||||
// 收货特有信息
|
||||
receiptTime: string
|
||||
/** 收货人 */
|
||||
receiptPerson: string
|
||||
/** 收货数量 */
|
||||
receiptQuantity: number
|
||||
/** 收货备注 */
|
||||
receiptRemark?: string
|
||||
/** 外观检查结果 */
|
||||
appearanceCheck: string
|
||||
/** 功能测试结果 */
|
||||
functionTest: string
|
||||
/** 包装完整性 */
|
||||
packageIntegrity: string
|
||||
/** 配件完整性 */
|
||||
accessoryIntegrity: string
|
||||
/** 检查结果 */
|
||||
checkResult: 'PASS' | 'FAIL' | 'CONDITIONAL'
|
||||
/** 检查备注 */
|
||||
checkRemark?: string
|
||||
/** 入库位置 */
|
||||
storageLocation: string
|
||||
/** 库管员 */
|
||||
storageManager: string
|
||||
|
||||
// 设备基本信息（从采购数据继承）
|
||||
equipmentName?: string
|
||||
equipmentModel?: string
|
||||
equipmentType?: string
|
||||
equipmentSn?: string
|
||||
brand?: string
|
||||
specification?: string
|
||||
assetCode?: string
|
||||
|
||||
// 采购信息（从采购数据继承）
|
||||
purchaseOrder?: string
|
||||
supplierName?: string
|
||||
purchasePrice?: number
|
||||
purchaseTime?: string
|
||||
quantity?: number
|
||||
unitPrice?: number
|
||||
totalPrice?: number
|
||||
|
||||
// 入库信息
|
||||
inStockTime?: string
|
||||
physicalLocation?: string
|
||||
locationStatus?: string
|
||||
responsiblePerson?: string
|
||||
inventoryBarcode?: string
|
||||
|
||||
// 状态信息
|
||||
equipmentStatus?: string
|
||||
useStatus?: string
|
||||
healthStatus?: string
|
||||
receiptStatus?: string
|
||||
|
||||
// 其他管理信息
|
||||
depreciationMethod?: string
|
||||
depreciationYears?: number
|
||||
salvageValue?: number
|
||||
currentNetValue?: number
|
||||
|
||||
// 系统字段
|
||||
createTime?: string
|
||||
updateTime?: string
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div class="file-header">
|
||||
<div class="breadcrumbs">
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item
|
||||
v-for="(item, index) in breadcrumbPath"
|
||||
:key="index"
|
||||
:class="{ 'clickable': index < breadcrumbPath.length - 1 }"
|
||||
@click="handleBreadcrumbClick(index)"
|
||||
>
|
||||
{{ item }}
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
@click="handleRefresh"
|
||||
:loading="refreshing"
|
||||
tooltip="刷新数据"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-refresh :spin="refreshing" />
|
||||
</template>
|
||||
</a-button>
|
||||
</div>
|
||||
<a-space>
|
||||
<a-button type="outline" @click="handleUpload">
|
||||
<template #icon><icon-upload /></template>
|
||||
上传文件
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleCreateFolder">
|
||||
<template #icon><icon-plus /></template>
|
||||
新建文件夹
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { IconRefresh, IconUpload, IconPlus } from '@arco-design/web-vue/es/icon';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
breadcrumbPath: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
refreshing: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
// 定义emit事件
|
||||
const emit = defineEmits(['breadcrumb-click', 'refresh', 'upload', 'create-folder']);
|
||||
|
||||
// 处理面包屑点击
|
||||
const handleBreadcrumbClick = (index) => {
|
||||
emit('breadcrumb-click', index);
|
||||
};
|
||||
|
||||
// 处理刷新
|
||||
const handleRefresh = () => {
|
||||
emit('refresh');
|
||||
};
|
||||
|
||||
// 处理上传文件
|
||||
const handleUpload = () => {
|
||||
emit('upload');
|
||||
};
|
||||
|
||||
// 处理新建文件夹
|
||||
const handleCreateFolder = () => {
|
||||
emit('create-folder');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
height: 64px;
|
||||
background: var(--color-bg-1);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
color: var(--color-primary);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.clickable:hover {
|
||||
color: var(--color-primary-light-1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,669 @@
|
|||
<template>
|
||||
<div class="file-list-container">
|
||||
<!-- 文件列表标题和搜索框在同一行 -->
|
||||
<div v-if="currentFolderId" class="file-header-container">
|
||||
<div class="file-title">
|
||||
<span class="file-list-title">文件列表 ({{ files.length }})</span>
|
||||
</div>
|
||||
<div class="file-search-container">
|
||||
<a-input-search
|
||||
v-model="fileSearchKeyword"
|
||||
placeholder="搜索文件名..."
|
||||
class="file-search-input"
|
||||
@search="handleFileSearch"
|
||||
@input="handleFileSearchInput"
|
||||
@clear="handleFileSearchClear"
|
||||
allow-clear
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-divider size="small" v-if="currentFolderId" />
|
||||
|
||||
<template v-if="!currentFolderId">
|
||||
<div class="initial-state">
|
||||
<icon-folder-add class="initial-icon" />
|
||||
<div class="initial-text">请从左侧选择一个文件夹</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 文件列表加载状态 -->
|
||||
<a-skeleton
|
||||
:loading="loading && currentFolderId"
|
||||
:rows="8"
|
||||
v-if="loading && currentFolderId"
|
||||
animation="pulse"
|
||||
>
|
||||
<template #skeleton>
|
||||
<a-row class="table-data-row" v-for="i in 8" :key="i">
|
||||
<a-col :span="10" class="table-column name-column">
|
||||
<div class="file-main">
|
||||
<div class="w-8 h-8 rounded bg-gray-200 mr-3"></div>
|
||||
<div class="file-name-wrap">
|
||||
<div class="h-5 bg-gray-200 rounded w-1/2 mb-1"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-1/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="4" class="table-column type-column">
|
||||
<div class="h-4 bg-gray-200 rounded w-1/3"></div>
|
||||
</a-col>
|
||||
<a-col :span="3" class="table-column size-column">
|
||||
<div class="h-4 bg-gray-200 rounded w-1/2"></div>
|
||||
</a-col>
|
||||
<a-col :span="5" class="table-column time-column">
|
||||
<div class="h-4 bg-gray-200 rounded w-2/3"></div>
|
||||
</a-col>
|
||||
<a-col :span="2" class="table-column action-column">
|
||||
<div class="flex gap-2">
|
||||
<div class="w-6 h-6 rounded bg-gray-200"></div>
|
||||
<div class="w-6 h-6 rounded bg-gray-200"></div>
|
||||
<div class="w-6 h-6 rounded bg-gray-200"></div>
|
||||
<div class="w-6 h-6 rounded bg-gray-200"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-skeleton>
|
||||
|
||||
<!-- 文件表格 -->
|
||||
<div class="file-grid-container" v-if="currentFolderId && !loading">
|
||||
<!-- 表头行 -->
|
||||
<a-row class="table-header-row">
|
||||
<a-col :span="10" class="table-column name-column">
|
||||
<div class="sortable-header" @click="handleSortChange('fileName')">
|
||||
<span>文件名</span>
|
||||
<div class="sort-indicator">
|
||||
<div class="sort-arrow up" :class="{ active: props.sortField === 'file_name' && props.sortOrder === 'asc' }"></div>
|
||||
<div class="sort-arrow down" :class="{ active: props.sortField === 'file_name' && props.sortOrder === 'desc' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="4" class="table-column type-column">
|
||||
<div class="sortable-header" @click="handleSortChange('fileType')">
|
||||
<span>类型</span>
|
||||
<div class="sort-indicator">
|
||||
<div class="sort-arrow up" :class="{ active: props.sortField === 'file_type' && props.sortOrder === 'asc' }"></div>
|
||||
<div class="sort-arrow down" :class="{ active: props.sortField === 'file_type' && props.sortOrder === 'desc' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="3" class="table-column size-column">
|
||||
<div class="sortable-header" @click="handleSortChange('fileSize')">
|
||||
<span>大小</span>
|
||||
<div class="sort-indicator">
|
||||
<div class="sort-arrow up" :class="{ active: props.sortField === 'file_size' && props.sortOrder === 'asc' }"></div>
|
||||
<div class="sort-arrow down" :class="{ active: props.sortField === 'file_size' && props.sortOrder === 'desc' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="5" class="table-column time-column">
|
||||
<div class="sortable-header" @click="handleSortChange('uploadTime')">
|
||||
<span>修改时间</span>
|
||||
<div class="sort-indicator">
|
||||
<div class="sort-arrow up" :class="{ active: props.sortField === 'upload_time' && props.sortOrder === 'asc' }"></div>
|
||||
<div class="sort-arrow down" :class="{ active: props.sortField === 'upload_time' && props.sortOrder === 'desc' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="2" class="table-column action-column">操作</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 数据行 -->
|
||||
<a-row
|
||||
v-for="file in files"
|
||||
:key="file.fileId"
|
||||
class="table-data-row"
|
||||
>
|
||||
<!-- 文件名列 -->
|
||||
<a-col :span="10" class="table-column name-column">
|
||||
<div class="file-main">
|
||||
<icon-file :style="{ color: fileColor(getFileExtension(file.fileName || file.name)) }" class="file-icon-large" />
|
||||
<div class="file-name-wrap">
|
||||
<a-typography-title :heading="6" class="file-name">{{ file.fileName || file.name }}</a-typography-title>
|
||||
<div class="file-name-small">{{ file.fileName || file.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 类型列 -->
|
||||
<a-col :span="4" class="table-column type-column">
|
||||
<div class="cell-content">{{ fileTypeText(getFileExtension(file.fileName || file.name)) }}</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 大小列 -->
|
||||
<a-col :span="3" class="table-column size-column">
|
||||
<div class="cell-content">{{ formatFileListSize(file.fileSize || file.size) }}</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 时间列 -->
|
||||
<a-col :span="5" class="table-column time-column">
|
||||
<div class="cell-content">{{ formatUploadTime(file.uploadTime || file.uploadTime) }}</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<a-col :span="2" class="table-column action-column">
|
||||
<div class="file-actions">
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
tooltip="预览"
|
||||
@click="handlePreview(file)"
|
||||
>
|
||||
<icon-eye />
|
||||
</a-button>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
tooltip="下载"
|
||||
@click="handleDownload(file)"
|
||||
>
|
||||
<icon-download />
|
||||
</a-button>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
tooltip="重命名"
|
||||
@click="handleEditFile(file)"
|
||||
>
|
||||
<icon-edit />
|
||||
</a-button>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
tooltip="删除"
|
||||
@click="handleDelete(file)"
|
||||
class="action-btn delete-btn"
|
||||
>
|
||||
<icon-delete />
|
||||
</a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<a-empty
|
||||
v-if="!loading && currentFolderId && files.length === 0"
|
||||
description="暂无文件"
|
||||
class="empty-state"
|
||||
>
|
||||
<template #image><icon-file /></template>
|
||||
<template #actions>
|
||||
<a-button type="primary" @click="handleUpload">
|
||||
<template #icon><icon-upload /></template>
|
||||
上传文件
|
||||
</a-button>
|
||||
</template>
|
||||
</a-empty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 导入依赖
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import {
|
||||
IconFolder,
|
||||
IconFile,
|
||||
IconMore,
|
||||
IconDownload,
|
||||
IconDelete,
|
||||
IconEdit,
|
||||
IconEye,
|
||||
IconCopy,
|
||||
IconFolderAdd,
|
||||
IconUpload
|
||||
} from '@arco-design/web-vue/es/icon';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
files: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
currentFolderId: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
},
|
||||
sortField: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
sortOrder: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
// 定义emit事件
|
||||
const emit = defineEmits([
|
||||
'file-click',
|
||||
'file-download',
|
||||
'file-delete',
|
||||
'file-edit',
|
||||
'file-preview',
|
||||
'file-copy',
|
||||
'file-more',
|
||||
'file-search',
|
||||
'file-search-input',
|
||||
'file-search-clear',
|
||||
'sort-change',
|
||||
'upload'
|
||||
]);
|
||||
|
||||
// 本地状态
|
||||
const fileSearchKeyword = ref('');
|
||||
|
||||
// 监听排序状态变化
|
||||
watch(() => props.sortField, (newVal, oldVal) => {
|
||||
console.log('👀 FileList组件 - sortField变化:', oldVal, '->', newVal);
|
||||
});
|
||||
|
||||
watch(() => props.sortOrder, (newVal, oldVal) => {
|
||||
console.log('👀 FileList组件 - sortOrder变化:', oldVal, '->', newVal);
|
||||
});
|
||||
|
||||
// 处理文件搜索
|
||||
const handleFileSearch = (value) => {
|
||||
emit('file-search', value);
|
||||
};
|
||||
|
||||
// 处理文件搜索输入
|
||||
const handleFileSearchInput = (value) => {
|
||||
emit('file-search-input', value);
|
||||
};
|
||||
|
||||
// 处理文件搜索清除
|
||||
const handleFileSearchClear = () => {
|
||||
emit('file-search-clear');
|
||||
};
|
||||
|
||||
// 处理排序变化
|
||||
const handleSortChange = (field) => {
|
||||
console.log('🎯 FileList组件 - 排序点击:', field);
|
||||
console.log('🎯 FileList组件 - 当前sortField:', props.sortField);
|
||||
console.log('🎯 FileList组件 - 当前sortOrder:', props.sortOrder);
|
||||
emit('sort-change', field);
|
||||
};
|
||||
|
||||
// 处理预览
|
||||
const handlePreview = (file) => {
|
||||
emit('file-preview', file);
|
||||
};
|
||||
|
||||
// 处理下载
|
||||
const handleDownload = (file) => {
|
||||
emit('file-download', file);
|
||||
};
|
||||
|
||||
// 处理编辑文件
|
||||
const handleEditFile = (file) => {
|
||||
emit('file-edit', file);
|
||||
};
|
||||
|
||||
// 处理删除
|
||||
const handleDelete = (file) => {
|
||||
emit('file-delete', file);
|
||||
};
|
||||
|
||||
// 处理上传
|
||||
const handleUpload = () => {
|
||||
emit('upload');
|
||||
};
|
||||
|
||||
// 工具函数 - 获取文件扩展名
|
||||
const getFileExtension = (filename) => {
|
||||
if (!filename) return '';
|
||||
return filename.split('.').pop().toLowerCase();
|
||||
};
|
||||
|
||||
// 工具函数 - 文件颜色
|
||||
const fileColor = (extension) => {
|
||||
const colorMap = {
|
||||
pdf: '#ff4d4f',
|
||||
doc: '#1890ff',
|
||||
docx: '#1890ff',
|
||||
xls: '#52c41a',
|
||||
xlsx: '#52c41a',
|
||||
ppt: '#fa8c16',
|
||||
pptx: '#fa8c16',
|
||||
zip: '#722ed1',
|
||||
rar: '#722ed1',
|
||||
txt: '#8c8c8c',
|
||||
jpg: '#fadb14',
|
||||
jpeg: '#fadb14',
|
||||
png: '#fadb14',
|
||||
gif: '#fadb14',
|
||||
bmp: '#fadb14',
|
||||
webp: '#fadb14'
|
||||
};
|
||||
return colorMap[extension] || '#8c8c8c';
|
||||
};
|
||||
|
||||
// 工具函数 - 文件类型文本
|
||||
const fileTypeText = (extension) => {
|
||||
const typeMap = {
|
||||
pdf: 'PDF文档',
|
||||
doc: 'Word文档',
|
||||
docx: 'Word文档',
|
||||
xls: 'Excel表格',
|
||||
xlsx: 'Excel表格',
|
||||
ppt: 'PPT演示',
|
||||
pptx: 'PPT演示',
|
||||
zip: '压缩文件',
|
||||
rar: '压缩文件',
|
||||
txt: '文本文件',
|
||||
jpg: '图片文件',
|
||||
jpeg: '图片文件',
|
||||
png: '图片文件',
|
||||
gif: '图片文件',
|
||||
bmp: '图片文件',
|
||||
webp: '图片文件'
|
||||
};
|
||||
return typeMap[extension] || '未知文件';
|
||||
};
|
||||
|
||||
// 工具函数 - 格式化文件大小
|
||||
const formatFileListSize = (bytes) => {
|
||||
if (!bytes || bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
// 工具函数 - 格式化上传时间
|
||||
const formatUploadTime = (time) => {
|
||||
if (!time) return '';
|
||||
const date = new Date(time);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-list-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.file-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.file-list-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.file-search-container {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-search-input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.initial-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 64px 0;
|
||||
color: var(--color-text-3);
|
||||
background-color: var(--color-fill-1);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.initial-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
color: var(--color-text-4);
|
||||
}
|
||||
|
||||
.file-grid-container {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
overflow-y: auto;
|
||||
background-color: var(--color-bg-1);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 0;
|
||||
min-height: 300px;
|
||||
max-height: calc(100vh - 380px);
|
||||
}
|
||||
|
||||
.table-header-row {
|
||||
padding: 0 16px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background-color: var(--color-fill-1);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: 13px;
|
||||
color: var(--color-text-3);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table-data-row {
|
||||
display: flex;
|
||||
padding: 0 16px;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
background-color: var(--color-bg-1);
|
||||
}
|
||||
|
||||
.table-data-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table-data-row:hover {
|
||||
background-color: rgba(22, 93, 255, 0.1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.table-column {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.name-column {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.type-column {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.size-column {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.time-column {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
||||
.action-column {
|
||||
flex: 0.5;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sortable-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.sortable-header:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.sort-indicator {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 4px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.sort-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 3px solid transparent;
|
||||
border-right: 3px solid transparent;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.sort-arrow.up {
|
||||
border-bottom: 3px solid var(--color-text-4);
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.sort-arrow.down {
|
||||
border-top: 3px solid var(--color-text-4);
|
||||
}
|
||||
|
||||
.sort-arrow.active {
|
||||
border-bottom-color: var(--color-primary);
|
||||
border-top-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.file-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-icon-large {
|
||||
font-size: 24px;
|
||||
margin-right: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-name-wrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-1);
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-name-small {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cell-content {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-2);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.table-data-row:hover .file-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.file-actions .action-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: var(--color-text-3);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.file-actions .action-btn:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-fill-3);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.file-actions .delete-btn:hover {
|
||||
color: var(--color-danger);
|
||||
background: var(--color-danger-light-1);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 64px 0;
|
||||
color: var(--color-text-3);
|
||||
background-color: var(--color-fill-1);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.empty-state .arco-btn) {
|
||||
margin-top: 16px;
|
||||
padding: 8px 16px;
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.empty-state .arco-btn:hover) {
|
||||
background-color: var(--color-primary-dark-1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:deep(.empty-state .arco-btn:active) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<div v-if="visible" class="pagination-container">
|
||||
<a-pagination
|
||||
:total="total"
|
||||
:current="current"
|
||||
:page-size="pageSize"
|
||||
:show-total="true"
|
||||
:show-page-size="true"
|
||||
:page-size-options="[10, 20, 50, 100]"
|
||||
:show-jumper="true"
|
||||
:hide-on-single-page="false"
|
||||
size="default"
|
||||
@change="handlePageChange"
|
||||
@page-size-change="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
current: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
|
||||
// 定义emit事件
|
||||
const emit = defineEmits(['page-change', 'page-size-change']);
|
||||
|
||||
// 处理页码变化
|
||||
const handlePageChange = (page) => {
|
||||
emit('page-change', page);
|
||||
};
|
||||
|
||||
// 处理每页条数变化
|
||||
const handlePageSizeChange = (pageSize) => {
|
||||
emit('page-size-change', pageSize);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--color-bg-1);
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.pagination-container :deep(.arco-pagination) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination-container :deep(.arco-pagination-item) {
|
||||
border-radius: 6px;
|
||||
margin: 0 4px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.pagination-container :deep(.arco-pagination-item:hover) {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.pagination-container :deep(.arco-pagination-item-active) {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pagination-container :deep(.arco-pagination-prev),
|
||||
.pagination-container :deep(.arco-pagination-next) {
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.pagination-container :deep(.arco-pagination-prev:hover),
|
||||
.pagination-container :deep(.arco-pagination-next:hover) {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.pagination-container :deep(.arco-pagination-size-changer) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.pagination-container :deep(.arco-pagination-jumper) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.pagination-container :deep(.arco-pagination-total) {
|
||||
color: var(--color-text-2);
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,557 @@
|
|||
<template>
|
||||
<a-modal
|
||||
:visible="visible"
|
||||
title="上传文件"
|
||||
width="620px"
|
||||
:mask-closable="false"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
:confirm-loading="uploading"
|
||||
:ok-disabled="!canUpload"
|
||||
@update:visible="(val) => emit('update:visible', val)"
|
||||
>
|
||||
<a-form :model="uploadForm" ref="uploadFormRef" layout="vertical">
|
||||
<!-- 选择文件 -->
|
||||
<a-form-item
|
||||
label="选择文件"
|
||||
:validate-status="!hasFiles ? 'error' : ''"
|
||||
:help="!hasFiles ? '请选择需要上传的文件' : ''"
|
||||
>
|
||||
<div class="upload-container">
|
||||
<!-- 上传按钮 -->
|
||||
<a-upload
|
||||
ref="uploadRef"
|
||||
:key="visible ? 'upload-open' : 'upload-closed'"
|
||||
:auto-upload="false"
|
||||
:show-file-list="false"
|
||||
@change="handleFileChange"
|
||||
:accept="allowedFileTypes"
|
||||
multiple
|
||||
>
|
||||
<a-button type="primary" class="upload-btn">
|
||||
<icon-upload />
|
||||
点击选择文件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
|
||||
<!-- 文件类型提示 -->
|
||||
<div class="upload-hint">
|
||||
支持 {{ allowedFileTypesText }} 等格式，单个文件不超过 {{ maxFileSizeText }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文件列表 -->
|
||||
<div class="upload-file-list" v-if="fileListTemp.length > 0">
|
||||
<div
|
||||
class="upload-file-item"
|
||||
v-for="file in fileListTemp"
|
||||
:key="file.uid"
|
||||
:class="{ 'file-error': file.error }"
|
||||
>
|
||||
<div class="file-info">
|
||||
<icon-file
|
||||
:style="{ color: fileColor(getFileExtension(file.name)) }"
|
||||
class="file-icon"
|
||||
/>
|
||||
<div class="file-details">
|
||||
<div class="file-name">{{ file.name }}</div>
|
||||
<div class="file-meta">
|
||||
{{ formatFileSize(file.size) }}
|
||||
<span v-if="file.error" class="error-text">{{ file.error }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<div class="file-progress" v-if="file.status === 'uploading'">
|
||||
<a-progress
|
||||
:percent="file.percent || 0"
|
||||
size="small"
|
||||
:status="file.percent === 100 ? 'success' : 'processing'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="file-actions">
|
||||
<a-button
|
||||
v-if="file.status !== 'uploading'"
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
@click="removeFile(file)"
|
||||
class="remove-btn"
|
||||
>
|
||||
<icon-delete />
|
||||
</a-button>
|
||||
<a-button
|
||||
v-else
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
@click="cancelUpload(file)"
|
||||
class="cancel-btn"
|
||||
>
|
||||
<icon-stop />
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<!-- 目标文件夹选择 -->
|
||||
<a-form-item
|
||||
label="上传至目录"
|
||||
field="folderId"
|
||||
:rules="[{ required: true, message: '请选择目标文件夹' }]"
|
||||
>
|
||||
<a-select
|
||||
v-model="uploadForm.folderId"
|
||||
placeholder="请选择目标文件夹"
|
||||
allow-clear
|
||||
>
|
||||
<a-option value="0">根目录</a-option>
|
||||
<a-option
|
||||
v-for="folder in folderList"
|
||||
:key="folder.id"
|
||||
:value="folder.id"
|
||||
>
|
||||
{{ folder.name }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import { IconUpload, IconFile, IconDelete, IconStop } from '@arco-design/web-vue/es/icon'
|
||||
import { uploadFileApi } from '@/apis/bussiness'
|
||||
import axios from 'axios'
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
folderList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
currentFolderId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits([
|
||||
'update:visible',
|
||||
'upload-success'
|
||||
])
|
||||
|
||||
// 响应式数据
|
||||
const uploadForm = reactive({
|
||||
folderId: ''
|
||||
})
|
||||
|
||||
const fileListTemp = ref([])
|
||||
const uploadFormRef = ref(null)
|
||||
const uploadRef = ref(null)
|
||||
const uploading = ref(false)
|
||||
const cancelTokens = ref({})
|
||||
|
||||
// 常量
|
||||
const allowedFileTypes = '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.txt,.jpg,.jpeg,.png,.gif,.bmp,.webp'
|
||||
const allowedFileTypesText = 'PDF, Word, Excel, PPT, 压缩文件, 文本文件, 图片文件'
|
||||
const maxFileSize = 1000 * 1024 * 1024 // 1000MB
|
||||
const maxFileSizeText = '1000MB'
|
||||
|
||||
// 计算属性
|
||||
const hasFiles = computed(() => {
|
||||
const validFiles = fileListTemp.value.filter(file => {
|
||||
return !file.error && file.status !== 'removed' && file.status !== 'canceled'
|
||||
})
|
||||
return validFiles.length > 0
|
||||
})
|
||||
|
||||
const canUpload = computed(() => {
|
||||
return hasFiles.value && !uploading.value && uploadForm.folderId
|
||||
})
|
||||
|
||||
// 监听 visible 变化
|
||||
watch(() => props.visible, (visible) => {
|
||||
if (visible) {
|
||||
// 重置表单
|
||||
uploadForm.folderId = props.currentFolderId || ''
|
||||
fileListTemp.value = []
|
||||
|
||||
// 重置上传组件
|
||||
if (uploadRef.value) {
|
||||
try {
|
||||
uploadRef.value.reset()
|
||||
} catch (error) {
|
||||
console.log('重置上传组件时出错:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 文件变化处理
|
||||
const handleFileChange = (info) => {
|
||||
if (!info || !Array.isArray(info) || !props.visible) {
|
||||
return
|
||||
}
|
||||
|
||||
const fileList = info
|
||||
if (fileList.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
// 获取当前已存在的文件UID列表，用于去重
|
||||
const existingUids = fileListTemp.value.map(f => f.uid)
|
||||
|
||||
// 处理新选择的文件
|
||||
fileList.forEach((file) => {
|
||||
// 检查文件是否已存在（去重）
|
||||
if (existingUids.includes(file.uid)) {
|
||||
return
|
||||
}
|
||||
|
||||
// 确保文件对象有正确的属性
|
||||
const fileObj = {
|
||||
uid: file.uid,
|
||||
name: file.name,
|
||||
size: file.size || file.file?.size || 0,
|
||||
type: file.type || file.file?.type || '',
|
||||
status: 'ready',
|
||||
error: '',
|
||||
originFileObj: file.file || file
|
||||
}
|
||||
|
||||
// 验证文件
|
||||
const isValid = validateFile(fileObj)
|
||||
|
||||
if (isValid) {
|
||||
fileListTemp.value.push(fileObj)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 文件验证
|
||||
const validateFile = (file) => {
|
||||
file.error = ''
|
||||
|
||||
// 验证文件类型
|
||||
const ext = getFileExtension(file.name).toLowerCase()
|
||||
const allowedExts = allowedFileTypes
|
||||
.split(',')
|
||||
.map(type => type.toLowerCase().replace(/^\./, ''))
|
||||
|
||||
if (!allowedExts.includes(ext)) {
|
||||
file.error = `不支持的文件类型，支持: ${allowedFileTypesText}`
|
||||
return false
|
||||
}
|
||||
|
||||
// 验证文件大小
|
||||
if (file.size > maxFileSize) {
|
||||
file.error = `文件过大，最大支持 ${maxFileSizeText}`
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
// 获取文件扩展名
|
||||
const getFileExtension = (fileName) => {
|
||||
const lastDotIndex = fileName.lastIndexOf('.')
|
||||
return lastDotIndex > 0 ? fileName.slice(lastDotIndex + 1) : ''
|
||||
}
|
||||
|
||||
// 获取文件图标颜色
|
||||
const fileColor = (extension) => {
|
||||
const colorMap = {
|
||||
pdf: '#ff4d4f',
|
||||
doc: '#1890ff',
|
||||
docx: '#1890ff',
|
||||
xls: '#52c41a',
|
||||
xlsx: '#52c41a',
|
||||
ppt: '#faad14',
|
||||
pptx: '#faad14',
|
||||
zip: '#722ed1',
|
||||
txt: '#8c8c8c',
|
||||
jpg: '#52c41a',
|
||||
jpeg: '#52c41a',
|
||||
png: '#1890ff',
|
||||
gif: '#faad14',
|
||||
bmp: '#722ed1',
|
||||
webp: '#13c2c2'
|
||||
}
|
||||
return colorMap[extension.toLowerCase()] || 'var(--color-text-3)'
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
const formatFileSize = (fileSize) => {
|
||||
if (fileSize === 0) return '0 B'
|
||||
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
let size = fileSize
|
||||
let unitIndex = 0
|
||||
|
||||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||
size /= 1024
|
||||
unitIndex++
|
||||
}
|
||||
|
||||
return `${size.toFixed(2)} ${units[unitIndex]}`
|
||||
}
|
||||
|
||||
// 移除文件
|
||||
const removeFile = (file) => {
|
||||
fileListTemp.value = fileListTemp.value.filter(f => f.uid !== file.uid)
|
||||
|
||||
// 如果是正在上传的文件，取消请求
|
||||
if (file.status === 'uploading' && cancelTokens.value[file.uid]) {
|
||||
cancelTokens.value[file.uid].cancel('上传已取消')
|
||||
delete cancelTokens.value[file.uid]
|
||||
}
|
||||
}
|
||||
|
||||
// 取消上传
|
||||
const cancelUpload = (file) => {
|
||||
if (cancelTokens.value[file.uid]) {
|
||||
cancelTokens.value[file.uid].cancel('上传已取消')
|
||||
file.status = 'canceled'
|
||||
}
|
||||
}
|
||||
|
||||
// 提交上传
|
||||
const handleSubmit = async () => {
|
||||
// 过滤有效文件
|
||||
const validFiles = fileListTemp.value.filter(file =>
|
||||
!file.error && file.status !== 'removed' && file.status !== 'canceled'
|
||||
)
|
||||
|
||||
if (validFiles.length === 0) {
|
||||
Message.warning('请选择有效的文件')
|
||||
return
|
||||
}
|
||||
|
||||
// 验证文件夹ID
|
||||
if (!uploadForm.folderId) {
|
||||
Message.warning('请选择目标文件夹')
|
||||
return
|
||||
}
|
||||
|
||||
uploading.value = true
|
||||
let hasError = false
|
||||
let hasFileExists = false
|
||||
|
||||
for (const fileItem of validFiles) {
|
||||
// 获取原始File对象
|
||||
const realFile = fileItem.originFileObj || fileItem
|
||||
|
||||
if (!realFile) {
|
||||
hasError = true
|
||||
continue
|
||||
}
|
||||
|
||||
fileItem.status = 'uploading'
|
||||
fileItem.percent = 0
|
||||
|
||||
// 创建取消令牌
|
||||
const source = axios.CancelToken.source()
|
||||
cancelTokens.value[fileItem.uid] = source
|
||||
|
||||
// 调用API
|
||||
const result = await uploadFileApi(
|
||||
realFile,
|
||||
Number(uploadForm.folderId),
|
||||
(progressEvent) => {
|
||||
if (progressEvent.lengthComputable) {
|
||||
fileItem.percent = Math.round((progressEvent.loaded / progressEvent.total) * 100)
|
||||
}
|
||||
},
|
||||
source.token
|
||||
)
|
||||
|
||||
// 检查上传结果
|
||||
if (result.code === 200) {
|
||||
fileItem.status = 'success'
|
||||
fileItem.percent = 100
|
||||
} else if (result.code === 400 && result.msg && result.msg.includes('已存在')) {
|
||||
// 文件已存在的情况
|
||||
fileItem.status = 'error'
|
||||
fileItem.error = '文件已存在'
|
||||
hasFileExists = true
|
||||
} else {
|
||||
fileItem.status = 'error'
|
||||
fileItem.error = result.msg || '上传失败'
|
||||
hasError = true
|
||||
}
|
||||
}
|
||||
|
||||
// 根据结果显示相应的消息
|
||||
if (hasFileExists && !hasError) {
|
||||
Message.warning('文件已存在')
|
||||
} else if (hasError) {
|
||||
Message.error('上传失败')
|
||||
} else {
|
||||
Message.success('上传成功')
|
||||
emit('upload-success')
|
||||
}
|
||||
|
||||
handleCancel()
|
||||
}
|
||||
|
||||
// 取消上传
|
||||
const handleCancel = () => {
|
||||
// 取消所有正在进行的上传
|
||||
Object.values(cancelTokens.value).forEach(source => {
|
||||
source.cancel('上传已取消')
|
||||
})
|
||||
|
||||
// 重置所有状态
|
||||
emit('update:visible', false)
|
||||
uploadForm.folderId = props.currentFolderId || ''
|
||||
fileListTemp.value = []
|
||||
cancelTokens.value = {}
|
||||
uploading.value = false
|
||||
|
||||
// 清空上传组件
|
||||
if (uploadRef.value) {
|
||||
uploadRef.value.reset()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 上传文件相关样式 */
|
||||
.upload-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
align-self: flex-start;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
color: var(--color-text-3);
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
padding: 8px 12px;
|
||||
background: var(--color-fill-2);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--color-primary-light-3);
|
||||
}
|
||||
|
||||
.upload-file-list {
|
||||
margin-top: 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--color-bg-1);
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.upload-file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-fill-1);
|
||||
}
|
||||
|
||||
&.file-error {
|
||||
background: rgba(255, 77, 79, 0.05);
|
||||
border-left: 3px solid #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 500;
|
||||
color: var(--color-text-1);
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #ff4d4f;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-progress {
|
||||
margin: 0 16px;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
color: var(--color-text-3);
|
||||
|
||||
&:hover {
|
||||
color: #ff4d4f;
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
color: var(--color-text-3);
|
||||
|
||||
&:hover {
|
||||
color: #faad14;
|
||||
background: rgba(250, 173, 20, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -48,6 +48,7 @@
|
|||
v-model="formData.receiptTime"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="请选择收货时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
|
|
@ -233,8 +234,9 @@ const emit = defineEmits<{
|
|||
const formRef = ref<FormInstance>()
|
||||
const loading = ref(false)
|
||||
|
||||
// 表单数据
|
||||
// 表单数据 - 使用正确的字段映射
|
||||
const formData = reactive<ReceiptRequest>({
|
||||
// 收货特有信息
|
||||
receiptTime: '',
|
||||
receiptPerson: '',
|
||||
receiptQuantity: 1,
|
||||
|
|
@ -247,6 +249,47 @@ const formData = reactive<ReceiptRequest>({
|
|||
checkRemark: '',
|
||||
storageLocation: '',
|
||||
storageManager: '',
|
||||
|
||||
// 设备基本信息（从采购数据继承）
|
||||
equipmentName: '',
|
||||
equipmentModel: '',
|
||||
equipmentType: '',
|
||||
equipmentSn: '',
|
||||
brand: '',
|
||||
specification: '',
|
||||
assetCode: '',
|
||||
|
||||
// 采购信息（从采购数据继承）
|
||||
purchaseOrder: '',
|
||||
supplierName: '',
|
||||
purchasePrice: 0,
|
||||
purchaseTime: '',
|
||||
quantity: 1,
|
||||
unitPrice: 0,
|
||||
totalPrice: 0,
|
||||
|
||||
// 入库信息
|
||||
inStockTime: '',
|
||||
physicalLocation: '',
|
||||
locationStatus: '',
|
||||
responsiblePerson: '',
|
||||
inventoryBarcode: '',
|
||||
|
||||
// 状态信息
|
||||
equipmentStatus: '',
|
||||
useStatus: '',
|
||||
healthStatus: '',
|
||||
receiptStatus: '',
|
||||
|
||||
// 其他管理信息
|
||||
depreciationMethod: '',
|
||||
depreciationYears: 5,
|
||||
salvageValue: 0,
|
||||
currentNetValue: 0,
|
||||
|
||||
// 系统字段
|
||||
createTime: '',
|
||||
updateTime: ''
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
|
|
@ -287,28 +330,46 @@ const rules = {
|
|||
],
|
||||
}
|
||||
|
||||
// 初始化表单数据
|
||||
const initFormData = () => {
|
||||
if (props.equipmentData) {
|
||||
// 从设备数据中复制相关字段
|
||||
Object.keys(formData).forEach((key) => {
|
||||
const formKey = key as keyof ReceiptRequest
|
||||
const equipmentKey = key as keyof EquipmentResp
|
||||
if (formKey in formData && equipmentKey in props.equipmentData!) {
|
||||
const value = props.equipmentData![equipmentKey]
|
||||
if (value !== undefined) {
|
||||
(formData[formKey] as any) = value
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 设置默认值
|
||||
formData.receiptQuantity = props.equipmentData.quantity || 1
|
||||
formData.storageLocation = props.equipmentData.physicalLocation || ''
|
||||
formData.storageManager = props.equipmentData.responsiblePerson || ''
|
||||
|
||||
// 设置收货时间默认为当前时间
|
||||
formData.receiptTime = formatDateTime(new Date())
|
||||
}
|
||||
}
|
||||
|
||||
// 监听弹窗显示状态
|
||||
watch(() => props.visible, (visible) => {
|
||||
if (visible) {
|
||||
// 重置表单
|
||||
Object.assign(formData, {
|
||||
receiptTime: '',
|
||||
receiptPerson: '',
|
||||
receiptQuantity: props.equipmentData?.quantity || 1,
|
||||
receiptRemark: '',
|
||||
appearanceCheck: '',
|
||||
functionTest: '',
|
||||
packageIntegrity: '',
|
||||
accessoryIntegrity: '',
|
||||
checkResult: 'PASS',
|
||||
checkRemark: '',
|
||||
storageLocation: '',
|
||||
storageManager: '',
|
||||
})
|
||||
initFormData()
|
||||
formRef.value?.clearValidate()
|
||||
}
|
||||
})
|
||||
|
||||
// 监听设备数据变化
|
||||
watch(() => props.equipmentData, () => {
|
||||
if (props.visible && props.equipmentData) {
|
||||
initFormData()
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
|
|
@ -319,17 +380,77 @@ const handleSubmit = async () => {
|
|||
throw new Error('设备ID不能为空')
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const receiptTime = formData.receiptTime ? new Date(formData.receiptTime).toISOString() : new Date().toISOString()
|
||||
|
||||
const requestData: ReceiptRequest = {
|
||||
...formData,
|
||||
receiptTime,
|
||||
console.log('📦 开始提交收货数据...')
|
||||
console.log('📦 设备数据:', props.equipmentData)
|
||||
console.log('📦 表单数据:', formData)
|
||||
|
||||
// 构建收货请求数据
|
||||
const receiptData: ReceiptRequest = {
|
||||
// 收货特有信息
|
||||
receiptTime: formData.receiptTime ? formatDateTime(formData.receiptTime) : formatDateTime(new Date()),
|
||||
receiptPerson: formData.receiptPerson,
|
||||
receiptQuantity: formData.receiptQuantity,
|
||||
receiptRemark: formData.receiptRemark,
|
||||
appearanceCheck: formData.appearanceCheck,
|
||||
functionTest: formData.functionTest,
|
||||
packageIntegrity: formData.packageIntegrity,
|
||||
accessoryIntegrity: formData.accessoryIntegrity,
|
||||
checkResult: formData.checkResult,
|
||||
checkRemark: formData.checkRemark,
|
||||
storageLocation: formData.storageLocation,
|
||||
storageManager: formData.storageManager,
|
||||
|
||||
// 设备基本信息（从采购数据继承）
|
||||
equipmentName: props.equipmentData.equipmentName,
|
||||
equipmentModel: props.equipmentData.equipmentModel,
|
||||
equipmentType: props.equipmentData.equipmentType,
|
||||
equipmentSn: props.equipmentData.equipmentSn,
|
||||
brand: props.equipmentData.brand,
|
||||
specification: props.equipmentData.specification,
|
||||
assetCode: props.equipmentData.assetCode,
|
||||
|
||||
// 采购信息（从采购数据继承）
|
||||
purchaseOrder: props.equipmentData.purchaseOrder,
|
||||
supplierName: props.equipmentData.supplierName,
|
||||
purchasePrice: props.equipmentData.purchasePrice,
|
||||
purchaseTime: props.equipmentData.purchaseTime,
|
||||
quantity: props.equipmentData.quantity,
|
||||
unitPrice: props.equipmentData.unitPrice,
|
||||
totalPrice: props.equipmentData.totalPrice,
|
||||
|
||||
// 入库信息
|
||||
inStockTime: formData.receiptTime ? formatDateTime(formData.receiptTime) : formatDateTime(new Date()),
|
||||
physicalLocation: formData.storageLocation,
|
||||
locationStatus: 'in_stock',
|
||||
responsiblePerson: formData.storageManager,
|
||||
inventoryBarcode: props.equipmentData.inventoryBarcode || generateInventoryBarcode(),
|
||||
|
||||
// 状态信息
|
||||
equipmentStatus: 'normal',
|
||||
useStatus: '0',
|
||||
healthStatus: 'good',
|
||||
receiptStatus: 'RECEIVED',
|
||||
|
||||
// 其他管理信息
|
||||
depreciationMethod: props.equipmentData.depreciationMethod || 'straight_line',
|
||||
depreciationYears: props.equipmentData.depreciationYears || 5,
|
||||
salvageValue: props.equipmentData.salvageValue || 0,
|
||||
currentNetValue: props.equipmentData.purchasePrice || 0,
|
||||
|
||||
// 系统字段
|
||||
createTime: formatDateTime(new Date()),
|
||||
updateTime: formatDateTime(new Date())
|
||||
}
|
||||
|
||||
await equipmentProcurementApi.receiveGoods(props.equipmentData.equipmentId, requestData)
|
||||
console.log('📦 构建的收货数据:', receiptData)
|
||||
|
||||
// 调用收货API
|
||||
await equipmentProcurementApi.receiveGoods(
|
||||
props.equipmentData.equipmentId,
|
||||
receiptData
|
||||
)
|
||||
|
||||
Message.success('收货成功')
|
||||
Message.success('收货成功，设备已自动入库')
|
||||
emit('success')
|
||||
emit('update:visible', false)
|
||||
} catch (error: any) {
|
||||
|
|
@ -340,6 +461,26 @@ const handleSubmit = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 生成库存条码的辅助函数
|
||||
const generateInventoryBarcode = () => {
|
||||
const timestamp = Date.now().toString(36)
|
||||
const random = Math.random().toString(36).substr(2, 5)
|
||||
return `INV-${timestamp}-${random}`.toUpperCase()
|
||||
}
|
||||
|
||||
// 格式化日期时间
|
||||
const formatDateTime = (date: string | Date) => {
|
||||
const d = new Date(date);
|
||||
let month = '' + (d.getMonth() + 1);
|
||||
let day = '' + d.getDate();
|
||||
const year = d.getFullYear();
|
||||
if (month.length < 2)
|
||||
month = '0' + month;
|
||||
if (day.length < 2)
|
||||
day = '0' + day;
|
||||
return [year, month, day].join('-') + ' ' + [d.getHours(), d.getMinutes(), d.getSeconds()].join(':');
|
||||
}
|
||||
|
||||
// 取消
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false)
|
||||
|
|
|
|||
|
|
@ -200,47 +200,51 @@ const handleReject = (taskId: string) => {
|
|||
|
||||
/* 待审批状态样式 */
|
||||
.status-item.pending {
|
||||
border-top-color: #f59e0b;
|
||||
background-color: rgba(245, 158, 11, 0.1); /* 浅橙色背景 */
|
||||
background-color: #f59e0b;
|
||||
background-image: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
}
|
||||
.status-item.pending .count {
|
||||
color: #f59e0b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 已通过状态样式 */
|
||||
.status-item.approved {
|
||||
border-top-color: #10b981;
|
||||
background-color: rgba(16, 185, 129, 0.1); /* 浅绿色背景 */
|
||||
background-color: #10b981;
|
||||
background-image: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
}
|
||||
.status-item.approved .count {
|
||||
color: #10b981;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 已拒绝状态样式 */
|
||||
.status-item.rejected {
|
||||
border-top-color: #ef4444;
|
||||
background-color: rgba(239, 68, 68, 0.1); /* 浅红色背景 */
|
||||
background-color: #ef4444;
|
||||
background-image: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
}
|
||||
.status-item.rejected .count {
|
||||
color: #ef4444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 状态文字样式 */
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 数字样式 */
|
||||
.count {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 激活态样式（可选，点击后高亮） */
|
||||
.status-item.active {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -1,38 +1,711 @@
|
|||
<template>
|
||||
<GiPageLayout>
|
||||
<div class="task-progress-page">
|
||||
<!-- 页面标题 dwadw-->
|
||||
<div class="page-header">
|
||||
<h2>任务跟踪</h2>
|
||||
<p class="page-description">跟踪、监控和评估任务的完成情况</p>
|
||||
<div class="task-tracking-page">
|
||||
<!-- 固定标题和表头容器 -->
|
||||
<div class="sticky-headers">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h2>任务跟踪</h2>
|
||||
<p class="page-description">跟踪、监控和评估任务的完成情况</p>
|
||||
</div>
|
||||
|
||||
<!-- 公共表头（仅显示一次） -->
|
||||
<div class="shared-header">
|
||||
<div class="header-row">
|
||||
<div class="col" style="width: 100px">任务描述</div>
|
||||
<div class="col" style="width: 180px">任务情况总结</div>
|
||||
<div class="col" style="width: 80px">任务执行人</div>
|
||||
<div class="col" style="width: 60px">进展</div>
|
||||
<div class="col" style="width: 120px">开始日期</div>
|
||||
<div class="col" style="width: 120px">预计完成日期</div>
|
||||
<div class="col" style="width: 80px">是否延期</div>
|
||||
<div class="col" style="width: 120px">实际完成日期</div>
|
||||
<div class="col" style="width: 180px">最新进展记录</div>
|
||||
<div class="col" style="width: 100px">重要紧急程度</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分组容器：按重要紧急程度分组 -->
|
||||
<div
|
||||
v-for="(group, groupKey) in groupedTasks"
|
||||
:key="groupKey"
|
||||
class="task-group"
|
||||
>
|
||||
<!-- 分组标题（带专门的折叠/展开按钮） -->
|
||||
<div class="group-header">
|
||||
<span class="group-title-text" :class="groupKey">{{ groupKey }}</span>
|
||||
<button
|
||||
class="toggle-btn"
|
||||
@click="toggleGroup(groupKey)"
|
||||
:aria-expanded="!group.collapsed"
|
||||
>
|
||||
<i class="icon" :class="group.collapsed ? 'el-icon-plus' : 'el-icon-minus'" />
|
||||
<span class="toggle-text">{{ group.collapsed ? '展开' : '收起' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 任务列表：折叠时隐藏，展开时显示 -->
|
||||
<div class="task-list" v-show="!group.collapsed">
|
||||
<div
|
||||
v-for="(task, index) in group.tasks"
|
||||
:key="index"
|
||||
class="task-row"
|
||||
>
|
||||
<!-- 任务描述 -->
|
||||
<div class="col" style="width: 100px">{{ task.taskDesc }}</div>
|
||||
<!-- 任务情况总结（带弹窗） -->
|
||||
<div class="col info-cell" style="width: 180px">
|
||||
<span @click="openPopup($event, task.summaryDetail, '任务情况总结')"
|
||||
@mouseenter="cancelClosePopup"
|
||||
@mouseleave="closePopup">
|
||||
{{ task.summary }}
|
||||
<i class="el-icon-info" />
|
||||
</span>
|
||||
</div>
|
||||
<!-- 任务执行人 -->
|
||||
<div class="col" style="width: 80px">{{ task.executor }}</div>
|
||||
<!-- 进展（标签化） -->
|
||||
<div class="col progress-tag" :class="task.progress" style="width: 60px">
|
||||
{{ task.progress }}
|
||||
</div>
|
||||
<!-- 开始日期 -->
|
||||
<div class="col" style="width: 120px">{{ task.startDate }}</div>
|
||||
<!-- 预计完成日期 -->
|
||||
<div class="col" style="width: 120px">{{ task.expectEndDate }}</div>
|
||||
<!-- 是否延期（标签化） -->
|
||||
<div class="col delay-tag" :class="task.isDelay" style="width: 80px">
|
||||
{{ task.isDelay }}
|
||||
</div>
|
||||
<!-- 实际完成日期 -->
|
||||
<div class="col" style="width: 120px">{{ task.actualEndDate }}</div>
|
||||
<!-- 最新进展记录（带弹窗） -->
|
||||
<div class="col info-cell" style="width: 180px">
|
||||
<span @click="openPopup($event, task.progressDetail, '最新进展记录')"
|
||||
@mouseenter="cancelClosePopup"
|
||||
@mouseleave="closePopup">
|
||||
{{ task.latestProgress }}
|
||||
<i class="el-icon-info" />
|
||||
</span>
|
||||
</div>
|
||||
<!-- 重要紧急程度（标签化） -->
|
||||
<div class="col priority-tag" :class="groupKey" style="width: 100px">
|
||||
{{ groupKey }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全局弹窗：所有详情共用 -->
|
||||
<transition name="popup">
|
||||
<div
|
||||
class="popup"
|
||||
v-if="popupVisible"
|
||||
:style="{
|
||||
top: popupTop + 'px',
|
||||
left: popupLeft + 'px'
|
||||
}"
|
||||
@mouseenter="cancelClosePopup"
|
||||
@mouseleave="closePopup"
|
||||
@click.stop
|
||||
>
|
||||
<div class="popup-title">{{ popupTitle }}</div>
|
||||
<div class="popup-content">{{ popupContent }}</div>
|
||||
<div class="popup-arrow"></div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</GiPageLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
// 定义任务结构
|
||||
interface Task {
|
||||
taskDesc: string;
|
||||
summary: string; // 任务情况总结（简略）
|
||||
summaryDetail: string; // 任务情况总结（详细）
|
||||
executor: string;
|
||||
progress: string; // 进展（如：进行中、已完成）
|
||||
priority: string; // 重要紧急程度（如：重要紧急、紧急不重要等）
|
||||
startDate: string;
|
||||
expectEndDate: string;
|
||||
isDelay: string; // 是否延期（如：已延期、正常）
|
||||
actualEndDate: string;
|
||||
latestProgress: string; // 最新进展（简略）
|
||||
progressDetail: string; // 最新进展（详细）
|
||||
}
|
||||
|
||||
// 定义分组结构
|
||||
interface TaskGroup {
|
||||
collapsed: boolean; // 是否折叠
|
||||
tasks: Task[]; // 该分组下的任务
|
||||
}
|
||||
|
||||
// 原始任务数据（模拟，实际从接口获取）
|
||||
const rawTasks = ref<Task[]>([
|
||||
{
|
||||
taskDesc: '完成年度财务报告',
|
||||
summary: '1. 任务执行人于小宁正...',
|
||||
summaryDetail: '任务执行人于小宁正按流程推进，已梳理数据框架，待最终核算。目前已完成资产负债表初步编制，利润表数据核对中，预计下周完成全部核算工作。',
|
||||
executor: '周北北',
|
||||
progress: '进行中',
|
||||
priority: '重要紧急',
|
||||
startDate: '2023/02/05',
|
||||
expectEndDate: '2024/11/25',
|
||||
isDelay: '已延期',
|
||||
actualEndDate: '',
|
||||
latestProgress: '已经收集了所有必要的财...',
|
||||
progressDetail: '已收集资产负债表、利润表原始数据，待合并现金流量表。本周重点完成了各部门费用核算，正在处理年末调整事项。'
|
||||
},
|
||||
{
|
||||
taskDesc: '更新公司官网内容',
|
||||
summary: '1. 正在收集各部门最新...',
|
||||
summaryDetail: '正在收集各部门最新资料，市场部和销售部已提交更新内容，技术部和人力资源部资料待收。预计下周一开始页面制作。',
|
||||
executor: '李小华',
|
||||
progress: '进行中',
|
||||
priority: '重要紧急',
|
||||
startDate: '2023/11/01',
|
||||
expectEndDate: '2023/11/30',
|
||||
isDelay: '正常',
|
||||
actualEndDate: '',
|
||||
latestProgress: '设计稿已确认，等待内容...',
|
||||
progressDetail: '设计稿已确认，等待各部门内容素材。目前已完成首页和产品页的设计，正在准备关于我们页面的素材。'
|
||||
},
|
||||
{
|
||||
taskDesc: '制定明年培训计划',
|
||||
summary: '1. 已完成需求调研，正...',
|
||||
summaryDetail: '已完成需求调研，正在整理各部门培训需求。调研显示，技术类和管理类培训需求最高，分别占比42%和35%。',
|
||||
executor: '张明明',
|
||||
progress: '进行中',
|
||||
priority: '重要不紧急',
|
||||
startDate: '2023/10/15',
|
||||
expectEndDate: '2023/12/15',
|
||||
isDelay: '正常',
|
||||
actualEndDate: '',
|
||||
latestProgress: '正在分析培训需求数据...',
|
||||
progressDetail: '正在分析培训需求数据，计划11月中旬完成初稿，11月底组织各部门负责人评审。'
|
||||
},
|
||||
{
|
||||
taskDesc: '组织年度员工团建活动',
|
||||
summary: '1. 任务已经完成，因特...',
|
||||
summaryDetail: '活动已落地执行，含团队协作游戏、主题分享环节，反馈良好。参与率达到95%，收集到23条有效反馈，其中85%为正面评价。',
|
||||
executor: '周北北',
|
||||
progress: '已完成',
|
||||
priority: '紧急不重要',
|
||||
startDate: '2023/01/18',
|
||||
expectEndDate: '2024/12/02',
|
||||
isDelay: '正常',
|
||||
actualEndDate: '2023/05/25',
|
||||
latestProgress: '已经确定了活动日期和地...',
|
||||
progressDetail: '选定XX营地，日期2023/05/20，含露营、烧烤、团队挑战。活动预算控制在计划内，实际花费比预算节省8%。'
|
||||
},
|
||||
{
|
||||
taskDesc: '办公室绿植更换',
|
||||
summary: '1. 已联系3家供应商，...',
|
||||
summaryDetail: '已联系3家供应商，正在比较报价和服务。现有绿植约60%需要更换，主要是走廊和公共区域的大型绿植。',
|
||||
executor: '王静静',
|
||||
progress: '待开始',
|
||||
priority: '不紧急不重要',
|
||||
startDate: '2023/11/20',
|
||||
expectEndDate: '2023/11/30',
|
||||
isDelay: '正常',
|
||||
actualEndDate: '',
|
||||
latestProgress: '正在筛选供应商，等待批...',
|
||||
progressDetail: '正在筛选供应商，等待审批。初步选定两家供应商，报价相差约15%，正在核实服务内容差异。'
|
||||
},
|
||||
{
|
||||
taskDesc: '更新员工通讯录',
|
||||
summary: '1. 收集各部门最新联...',
|
||||
summaryDetail: '正在收集各部门最新联系方式，已完成市场部和销售部的信息更新，技术部和人力资源部资料待收。',
|
||||
executor: '李小明',
|
||||
progress: '待开始',
|
||||
priority: '不紧急不重要',
|
||||
startDate: '2023/11/25',
|
||||
expectEndDate: '2023/12/15',
|
||||
isDelay: '正常',
|
||||
actualEndDate: '',
|
||||
latestProgress: '等待各部门提交最新联...',
|
||||
progressDetail: '已发送通知邮件给各部门负责人，要求提供最新员工联系方式，目前收到60%的回复。'
|
||||
},
|
||||
{
|
||||
taskDesc: '整理归档旧项目文档',
|
||||
summary: '1. 开始整理2022年...',
|
||||
summaryDetail: '开始整理2022年度已完成项目的文档，按照项目类型和日期进行分类归档，预计需要两周时间完成。',
|
||||
executor: '张小红',
|
||||
progress: '待开始',
|
||||
priority: '不紧急不重要',
|
||||
startDate: '2023/12/01',
|
||||
expectEndDate: '2023/12/15',
|
||||
isDelay: '正常',
|
||||
actualEndDate: '',
|
||||
latestProgress: '准备归档工具和分类标...',
|
||||
progressDetail: '已准备好归档所需的文件夹和标签，正在制定分类标准，等待主管审批。'
|
||||
}
|
||||
])
|
||||
|
||||
// 分组键（固定四个重要紧急程度）
|
||||
const groupKeys = ref(['重要紧急', '紧急不重要', '重要不紧急', '不紧急不重要'])
|
||||
|
||||
// 分组状态管理
|
||||
const groupCollapseState = ref<Record<string, boolean>>({})
|
||||
|
||||
// 构建分组数据：按重要紧急程度分组
|
||||
const groupedTasks = computed(() => {
|
||||
const groups: Record<string, TaskGroup> = {}
|
||||
|
||||
// 初始化分组
|
||||
groupKeys.value.forEach(key => {
|
||||
// 初始化折叠状态，如果已有状态则使用，否则默认展开(false)
|
||||
groupCollapseState.value[key] = groupCollapseState.value[key] ?? false
|
||||
|
||||
groups[key] = {
|
||||
collapsed: groupCollapseState.value[key],
|
||||
tasks: []
|
||||
}
|
||||
})
|
||||
|
||||
// 将任务分配到对应分组
|
||||
rawTasks.value.forEach(task => {
|
||||
const groupKey = task.priority
|
||||
if (groups[groupKey]) {
|
||||
groups[groupKey].tasks.push(task)
|
||||
}
|
||||
})
|
||||
|
||||
return groups
|
||||
})
|
||||
|
||||
// 折叠/展开分组
|
||||
function toggleGroup(groupKey: string) {
|
||||
groupCollapseState.value[groupKey] = !groupCollapseState.value[groupKey]
|
||||
// 保存状态到本地存储
|
||||
localStorage.setItem('taskGroupCollapse', JSON.stringify(groupCollapseState.value))
|
||||
}
|
||||
|
||||
// 组件挂载时恢复折叠状态
|
||||
onMounted(() => {
|
||||
const savedState = localStorage.getItem('taskGroupCollapse')
|
||||
if (savedState) {
|
||||
groupCollapseState.value = JSON.parse(savedState)
|
||||
}
|
||||
})
|
||||
|
||||
// 弹窗状态
|
||||
const popupVisible = ref(false)
|
||||
const popupTitle = ref('')
|
||||
const popupContent = ref('')
|
||||
const popupTop = ref(0)
|
||||
const popupLeft = ref(0)
|
||||
let popupTimer: number | null = null
|
||||
|
||||
// 打开详情弹窗
|
||||
function openPopup(event: MouseEvent, content: string, title: string) {
|
||||
// 清除之前的关闭计时器
|
||||
if (popupTimer) {
|
||||
clearTimeout(popupTimer)
|
||||
popupTimer = null
|
||||
}
|
||||
|
||||
const target = event.currentTarget as HTMLElement
|
||||
const rect = target.getBoundingClientRect()
|
||||
|
||||
popupVisible.value = true
|
||||
popupTitle.value = title
|
||||
popupContent.value = content
|
||||
|
||||
// 固定居中显示
|
||||
popupTop.value = window.scrollY + window.innerHeight / 2 - 100
|
||||
popupLeft.value = window.innerWidth / 2 - 150
|
||||
}
|
||||
|
||||
// 延迟关闭弹窗（防止鼠标移动时意外关闭）
|
||||
function closePopup() {
|
||||
popupTimer = setTimeout(() => {
|
||||
popupVisible.value = false
|
||||
popupTimer = null
|
||||
}, 200)
|
||||
}
|
||||
|
||||
// 取消延迟关闭
|
||||
function cancelClosePopup() {
|
||||
if (popupTimer) {
|
||||
clearTimeout(popupTimer)
|
||||
popupTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
// 点击页面其他区域关闭弹窗
|
||||
function handleDocumentClick(e: MouseEvent) {
|
||||
const popup = document.querySelector('.popup')
|
||||
const infoCells = document.querySelectorAll('.info-cell')
|
||||
|
||||
// 如果点击的不是弹窗也不是信息单元格，则关闭弹窗
|
||||
if (popup && !popup.contains(e.target as Node) &&
|
||||
!Array.from(infoCells).some(cell => cell.contains(e.target as Node))) {
|
||||
closePopup()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleDocumentClick)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleDocumentClick)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.task-progress-page {
|
||||
height: 100%;
|
||||
/* 页面基础样式 */
|
||||
.task-tracking-page {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-header h2 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
color: #666;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 公共表头 */
|
||||
.shared-header {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #eee;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.header-row .col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border-right: 1px solid #eee;
|
||||
padding: 0 8px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-row .col:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* 分组样式 */
|
||||
.task-group {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 分组标题（带折叠/展开按钮） */
|
||||
.group-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.group-title-text {
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.group-title-text.重要紧急 {
|
||||
background: #dc3545;
|
||||
}
|
||||
|
||||
.group-title-text.紧急不重要 {
|
||||
background: #fd7e14;
|
||||
}
|
||||
|
||||
.group-title-text.重要不紧急 {
|
||||
background: #ffc107;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.group-title-text.不紧急不重要 {
|
||||
background: #28a745;
|
||||
}
|
||||
|
||||
/* 折叠/展开按钮 */
|
||||
.toggle-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
background-color: #e9ecef;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #495057;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
background-color: #dee2e6;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.toggle-btn .icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.toggle-text {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 任务列表（展开时显示） */
|
||||
.task-tracking-page {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
height: calc(100vh - 100px);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sticky-headers {
|
||||
position: sticky;
|
||||
top: -20px; /* 向上移动消除空隙 */
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
padding: 20px 0 10px;
|
||||
margin-top: -20px; /* 消除外部空隙 */
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 20px 0 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.shared-header {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.task-tracking-page::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.task-tracking-page::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.task-tracking-page::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.task-tracking-page::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* 任务行样式 */
|
||||
.task-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 10px 0;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.task-row:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.task-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.task-row .col {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border-right: 1px solid #eee;
|
||||
padding: 0 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.task-row .col:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* 信息单元格（带弹窗） */
|
||||
.info-cell {
|
||||
cursor: pointer;
|
||||
color: #1890ff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.info-cell:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info-cell .el-icon-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 进展标签样式 */
|
||||
.progress-tag {
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.progress-tag.进行中 {
|
||||
background: #ffc107;
|
||||
}
|
||||
|
||||
.progress-tag.已完成 {
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
.progress-tag.待开始 {
|
||||
background: #ff9800;
|
||||
}
|
||||
|
||||
/* 是否延期标签 */
|
||||
.delay-tag {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.delay-tag.正常 {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.delay-tag.已延期 {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
/* 重要紧急程度标签 */
|
||||
.priority-tag {
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.priority-tag.重要紧急 {
|
||||
background: #dc3545;
|
||||
}
|
||||
|
||||
.priority-tag.紧急不重要 {
|
||||
background: #fd7e14;
|
||||
}
|
||||
|
||||
.priority-tag.重要不紧急 {
|
||||
background: #ffc107;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.priority-tag.不紧急不重要 {
|
||||
background: #28a745;
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.popup {
|
||||
/* 定位到页面中间 */
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
max-width: 80vw;
|
||||
background: #fff;
|
||||
border: 1px solid #f70b0b;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
||||
z-index: 999;
|
||||
animation: fadeIn 0.15s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(5px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 弹窗过渡动画 */
|
||||
.popup-enter-active {
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
|
||||
.popup-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
|
||||
.popup-enter-to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -173,6 +173,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import TaskForm from './components/TaskForm.vue';
|
||||
import AssigneeSelector from './components/AssigneeSelector.vue';
|
||||
const taskFormRef = ref<InstanceType<typeof TaskForm> | null>(null);
|
||||
|
|
@ -330,15 +331,15 @@ const resetSearch = () => {
|
|||
|
||||
const handleSubmit = () => {
|
||||
if (!taskFormRef.value?.form.taskName) {
|
||||
alert('请填写任务名称');
|
||||
Message.error('请填写任务名称');
|
||||
return;
|
||||
}
|
||||
if (!taskFormRef.value?.form.dueDate) {
|
||||
alert('请设置截止日期');
|
||||
Message.error('请设置截止日期');
|
||||
return;
|
||||
}
|
||||
if (!assigneeRef.value?.assignees.leader) {
|
||||
alert('请选择任务负责人');
|
||||
Message.error('请选择任务负责人');
|
||||
return;
|
||||
}
|
||||
const taskData = {
|
||||
|
|
@ -361,7 +362,7 @@ const handleSubmit = () => {
|
|||
priority: taskData.priority || 'medium'
|
||||
});
|
||||
console.log('发布任务数据:', taskData);
|
||||
alert('任务发布成功！');
|
||||
Message.success('任务发布成功！');
|
||||
showPublishModal.value = false;
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const filteredUsers = ref<typeof users.value>([]);
|
|||
const filterUsersByDepartment = () => {
|
||||
if (!selectedDepartment.value) {
|
||||
filteredUsers.value = [];
|
||||
assignees.value.leader = '';
|
||||
assignees.value.leader = -1;
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ const filterUsersByDepartment = () => {
|
|||
|
||||
// 如果当前选择的负责人不在筛选后的列表中，则清空选择
|
||||
if (assignees.value.leader && !filteredUsers.value.some(u => u.id === assignees.value.leader)) {
|
||||
assignees.value.leader = '';
|
||||
assignees.value.leader = 0;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -80,7 +80,7 @@ const departments = ref([
|
|||
|
||||
// 分配数据
|
||||
const assignees = ref({
|
||||
leader: ''
|
||||
leader: 0
|
||||
});
|
||||
|
||||
// 暴露分配数据给父组件
|
||||
|
|
|
|||
Loading…
Reference in New Issue