优化商务数据库信息模块
This commit is contained in:
parent
9be59bee8a
commit
9a4d9232fc
|
@ -17,7 +17,7 @@ import type {
|
|||
RenameFileParams
|
||||
} from './type'
|
||||
|
||||
const { request } = http
|
||||
const { request, requestRaw } = http
|
||||
|
||||
// 导出类型定义
|
||||
export type {
|
||||
|
@ -108,7 +108,7 @@ export function uploadFileApi(
|
|||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
return request({
|
||||
return requestRaw({
|
||||
url: '/businessData/file/add',
|
||||
method: 'post',
|
||||
params: {
|
||||
|
@ -120,7 +120,16 @@ export function uploadFileApi(
|
|||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
})
|
||||
}).then(response => response.data)
|
||||
.catch(error => {
|
||||
// 确保错误不会抛出,而是返回一个错误对象
|
||||
console.error('上传文件API错误:', error)
|
||||
return {
|
||||
code: 500,
|
||||
msg: error.message || '上传失败',
|
||||
success: false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 下载文件
|
||||
|
|
|
@ -161,6 +161,32 @@ const requestNative = async <T = unknown>(config: AxiosRequestConfig): Promise<A
|
|||
.catch((err: { msg: string }) => Promise.reject(err))
|
||||
}
|
||||
|
||||
// 完全绕过拦截器的请求方法
|
||||
const requestRaw = async <T = unknown>(config: AxiosRequestConfig): Promise<AxiosResponse> => {
|
||||
// 创建一个新的axios实例,不包含拦截器
|
||||
const rawAxios = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_PREFIX ?? import.meta.env.VITE_API_BASE_URL,
|
||||
timeout: 30 * 1000,
|
||||
})
|
||||
|
||||
// 只添加请求拦截器来设置token,不添加响应拦截器
|
||||
rawAxios.interceptors.request.use(
|
||||
(config: AxiosRequestConfig) => {
|
||||
const token = getToken()
|
||||
if (token) {
|
||||
if (!config.headers) {
|
||||
config.headers = {}
|
||||
}
|
||||
config.headers.Authorization = `${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => Promise.reject(error),
|
||||
)
|
||||
|
||||
return rawAxios.request<T>(config)
|
||||
}
|
||||
|
||||
const createRequest = (method: string) => {
|
||||
return <T = any>(url: string, params?: object, config?: AxiosRequestConfig): Promise<ApiRes<T>> => {
|
||||
return request({
|
||||
|
@ -196,5 +222,6 @@ export default {
|
|||
del: createRequest('delete'),
|
||||
request,
|
||||
requestNative,
|
||||
requestRaw,
|
||||
download,
|
||||
}
|
||||
|
|
|
@ -64,34 +64,37 @@
|
|||
@click="handleFolderClick(folder.id)"
|
||||
:tooltip="sidebarCollapsed ? folder.name : ''"
|
||||
>
|
||||
<div class="folder-icon-wrapper">
|
||||
<IconFolder class="folder-icon" :style="{ color: folderColor }" />
|
||||
<!-- 第一行:文件夹图标和名称 -->
|
||||
<div class="folder-main-info">
|
||||
<div class="folder-icon-wrapper">
|
||||
<IconFolder class="folder-icon" :style="{ color: folderColor }" />
|
||||
</div>
|
||||
<span v-if="!sidebarCollapsed" class="folder-name">{{ folder.name }}</span>
|
||||
</div>
|
||||
<span v-if="!sidebarCollapsed">{{ folder.name }}</span>
|
||||
|
||||
<!-- 文件夹操作按钮 -->
|
||||
<div v-if="!sidebarCollapsed" class="folder-actions">
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
@click.stop="handleRenameFolder(folder, folder.id, folder.name)"
|
||||
tooltip="重命名"
|
||||
class="action-btn"
|
||||
>
|
||||
<icon-edit />
|
||||
</a-button>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
@click.stop="handleDeleteFolder(folder)"
|
||||
tooltip="删除"
|
||||
status="danger"
|
||||
class="action-btn"
|
||||
>
|
||||
<icon-delete />
|
||||
</a-button>
|
||||
<!-- 第二行:文件夹操作按钮 -->
|
||||
<div v-if="!sidebarCollapsed" class="folder-actions-row">
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
@click.stop="handleRenameFolder(folder, folder.id, folder.name)"
|
||||
tooltip="重命名"
|
||||
class="action-btn"
|
||||
>
|
||||
<icon-edit />
|
||||
</a-button>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
size="small"
|
||||
@click.stop="handleDeleteFolder(folder)"
|
||||
tooltip="删除"
|
||||
status="danger"
|
||||
class="action-btn"
|
||||
>
|
||||
<icon-delete />
|
||||
</a-button>
|
||||
</div>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
|
@ -610,6 +613,10 @@ const canUpload = computed(() => {
|
|||
return hasFiles.value && !uploading.value && uploadForm.folderId;
|
||||
});
|
||||
|
||||
// 搜索相关
|
||||
const searchKeyword = ref('');
|
||||
const searchTimeout = ref(null);
|
||||
|
||||
// 初始化文件夹数据
|
||||
const initData = async () => {
|
||||
try {
|
||||
|
@ -688,10 +695,6 @@ const handlePageSizeChange = (current, size) => {
|
|||
initData();
|
||||
};
|
||||
|
||||
// 搜索相关
|
||||
const searchKeyword = ref('');
|
||||
const searchTimeout = ref(null);
|
||||
|
||||
const handleFolderSearch = () => {
|
||||
console.log('=== 执行搜索 ===');
|
||||
console.log('搜索关键词:', searchKeyword.value);
|
||||
|
@ -1111,9 +1114,6 @@ const handleUploadSubmit = async () => {
|
|||
!file.error && file.status !== 'removed' && file.status !== 'canceled'
|
||||
);
|
||||
|
||||
console.log('提交上传 - 所有文件:', fileListTemp.value);
|
||||
console.log('提交上传 - 有效文件:', validFiles);
|
||||
|
||||
if (validFiles.length === 0) {
|
||||
Message.warning('请选择有效的文件');
|
||||
return;
|
||||
|
@ -1126,16 +1126,15 @@ const handleUploadSubmit = async () => {
|
|||
}
|
||||
|
||||
uploading.value = true;
|
||||
let successCount = 0;
|
||||
let totalFiles = validFiles.length;
|
||||
let hasError = false;
|
||||
let hasFileExists = false;
|
||||
|
||||
try {
|
||||
for (const fileItem of validFiles) {
|
||||
for (const fileItem of validFiles) {
|
||||
// 获取原始File对象
|
||||
const realFile = fileItem.originFileObj || fileItem;
|
||||
|
||||
if (!realFile) {
|
||||
fileItem.error = '文件数据无效';
|
||||
hasError = true;
|
||||
continue;
|
||||
}
|
||||
|
||||
|
@ -1146,56 +1145,50 @@ const handleUploadSubmit = async () => {
|
|||
const source = axios.CancelToken.source();
|
||||
cancelTokens.value[fileItem.uid] = source;
|
||||
|
||||
try {
|
||||
// 调用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 === 0 && result.success) {
|
||||
fileItem.status = 'success';
|
||||
fileItem.percent = 100;
|
||||
successCount++;
|
||||
} else {
|
||||
fileItem.status = 'error';
|
||||
fileItem.error = result.msg || '上传失败';
|
||||
}
|
||||
} catch (error) {
|
||||
if (!axios.isCancel(error)) {
|
||||
fileItem.status = 'error';
|
||||
fileItem.error = error.message || '上传失败';
|
||||
}
|
||||
// 调用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 (successCount === totalFiles) {
|
||||
Message.success('所有文件上传成功');
|
||||
resetUpload();
|
||||
// 根据结果显示相应的消息
|
||||
if (hasFileExists && !hasError) {
|
||||
Message.warning('文件已存在');
|
||||
} else if (hasError) {
|
||||
Message.error('上传失败');
|
||||
} else {
|
||||
Message.success('上传成功');
|
||||
// 刷新当前文件夹文件列表
|
||||
if (currentFolderId.value === uploadForm.folderId) {
|
||||
loadFiles(currentFolderId.value);
|
||||
}
|
||||
} else if (successCount >= 0) {
|
||||
Message.warning(`${successCount}/${totalFiles} 个文件上传成功`);
|
||||
resetUpload();
|
||||
} else {
|
||||
Message.error('所有文件上传失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传过程出错:', error);
|
||||
Message.error('上传过程出错');
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
}
|
||||
|
||||
resetUpload();
|
||||
|
||||
uploading.value = false;
|
||||
};
|
||||
|
||||
// 重置上传表单
|
||||
|
@ -1431,7 +1424,7 @@ onMounted(() => {
|
|||
|
||||
.folder-content {
|
||||
padding: 16px 0;
|
||||
height: calc(100vh - 280px); /* 为底部分页控件留出空间 */
|
||||
height: calc(100vh - 320px); /* 为底部分页控件留出更多空间,因为文件夹项现在更高 */
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
|
@ -1471,7 +1464,8 @@ onMounted(() => {
|
|||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
|
@ -1490,17 +1484,35 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
/* 文件夹操作按钮样式 */
|
||||
.folder-actions {
|
||||
display: none;
|
||||
gap: 6px;
|
||||
/* 文件夹主要信息样式 */
|
||||
.folder-main-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.folder-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 文件夹操作按钮样式 */
|
||||
.folder-actions-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.folder-list-item:hover .folder-actions {
|
||||
display: flex;
|
||||
.folder-list-item:hover .folder-actions-row {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
@ -1518,13 +1530,7 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
|
||||
.folder-list-item span {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 8px;
|
||||
}
|
||||
/* 删除旧的span样式,因为现在使用.folder-name */
|
||||
|
||||
/* 顶部导航样式 */
|
||||
.file-header {
|
||||
|
@ -2128,7 +2134,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
/* 确保在折叠状态下不显示操作按钮 */
|
||||
:deep(.folder-sidebar.collapsed) .folder-actions {
|
||||
:deep(.folder-sidebar.collapsed) .folder-actions-row {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue