huojin
/
YouChain_WMS_Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

main
HUOJIN\霍先森 2025-05-10 14:43:49 +08:00
parent 316d40908d
commit efb8bc00f8
7 changed files with 454 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
nc_wms_web/src/App.vue
View File

@ -14,7 +14,8 @@
:theme="{
algorithm: compactFlag ? theme.compactAlgorithm : theme.defaultAlgorithm,
token: {
fontFamily: '微软雅黑, Arial, sans-serif',
fontFamily:'-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
fontsize: '14px',
colorPrimary: themeColors[colorIndex].primaryColor,
colorLink: themeColors[colorIndex].primaryColor,
colorLinkActive: themeColors[colorIndex].activeColor,
@ -38,63 +39,81 @@
<!---全局loading--->
<a-spin :spinning="spinning" tip="稍等片刻，我在拼命加载中..." size="large">
<!--- 路由 -->
<RouterView />
<RouterView/>
</a-spin>
</a-config-provider>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import { computed, h, useSlots } from 'vue';
import { messages } from '/@/i18n';
import { useAppConfigStore } from '/@/store/modules/system/app-config';
import { useSpinStore } from '/@/store/modules/system/spin';
import { theme } from 'ant-design-vue';
import { themeColors } from '/@/theme/color.js';
import { Popover } from 'ant-design-vue';
import SmartCopyIcon from '/@/components/framework/smart-copy-icon/index.vue';
import _ from 'lodash';
import dayjs from 'dayjs';
import {computed, h, useSlots, watch} from 'vue';
import {messages} from '/@/i18n';
import {useAppConfigStore} from '/@/store/modules/system/app-config';
import {useSpinStore} from '/@/store/modules/system/spin';
import {theme} from 'ant-design-vue';
import {themeColors} from '/@/theme/color.js';
import {Popover} from 'ant-design-vue';
import SmartCopyIcon from '/@/components/framework/smart-copy-icon/index.vue';
import _ from 'lodash';
const slots = useSlots();
const antdLocale = computed(() => messages[useAppConfigStore().language].antdLocale);
const dayjsLocale = computed(() => messages[useAppConfigStore().language].dayjsLocale);
dayjs.locale(dayjsLocale);
const slots = useSlots();
const antdLocale = computed(() => messages[useAppConfigStore().language].antdLocale);
const dayjsLocale = computed(() => messages[useAppConfigStore().language].dayjsLocale);
dayjs.locale(dayjsLocale);
// 全局loading
let spinStore = useSpinStore();
const spinning = computed(() => spinStore.loading);
// 是否紧凑
const compactFlag = computed(() => useAppConfigStore().compactFlag);
// 主题颜色
const colorIndex = computed(() => {
// 全局loading
let spinStore = useSpinStore();
const spinning = computed(() => spinStore.loading);
// 是否紧凑
const compactFlag = computed(() => useAppConfigStore().compactFlag);
// 主题颜色
const colorIndex = computed(() => {
return useAppConfigStore().colorIndex;
});
// 圆角
const borderRadius = computed(() => {
});
// 圆角
const borderRadius = computed(() => {
return useAppConfigStore().borderRadius;
});
function transformCellText({ text, column, record, index }) {
});
function transformCellText({text, column, record, index}) {
if (column && column.textEllipsisFlag === true) {
return h(
Popover,
{ placement: 'bottom' },
{placement: 'bottom'},
{
default: () =>
h('div', { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, id: `${column.dataIndex}${index}` }, text),
h('div', {
style: {whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'},
id: `${column.dataIndex}${index}`
}, text),
content: () =>
h('div', { style: { display: 'flex' } }, [
h('div', {style: {display: 'flex'}}, [
h('div', text),
h(SmartCopyIcon, { value: document.getElementById(`${column.dataIndex}${index}`).innerText }),
h(SmartCopyIcon, {value: document.getElementById(`${column.dataIndex}${index}`).innerText}),
]),
}
);
} else {
return text;
}
}
}
// 监听主题颜色变化，更新CSS变量
/*watch(() => colorIndex.value, (newVal) => {
document.documentElement.style.setProperty('--primary-color', themeColors[newVal].primaryColor);
}, { immediate: true });*/
</script>
<style scoped lang="less">
:deep(.ant-table-column-sorters) {
/*:deep(.ant-table-column-sorters) {
align-items: flex-start !important;
}
}*/
/*:deep(.ant-table-thead > tr > th) {
background-color: var(--primary-color) !important;
color: black !important;
}*/
:deep(.ant-table-thead > tr > th) {
background-color: #FAFAFA !important;
}
</style>

6
nc_wms_web/src/api/business/wms/base/address/address-api.ts
View File

@ -5,7 +5,7 @@
* @Date: 2024-12-26 15:35:23
* @Copyright 友仓
*/
import {postRequest, getRequest, getDownload} from '/@/lib/axios';
import {postRequest, getRequest, getDownload2} from '/@/lib/axios';
export const addressApi = {
@ -71,8 +71,8 @@ export const addressApi = {
/**
* 导出 @author hj
*/
exportAddress: (taskId: string) => {
return getDownload(`/address/exportAddress/${taskId}`, {});
exportAddress: (taskId: string,signal?: AbortSignal) => {
return getDownload2(`/address/exportAddress/${taskId}`, {},signal);
}
};

8
nc_wms_web/src/api/business/wms/base/item/item-api.ts
View File

@ -5,7 +5,7 @@
* @Date: 2024-11-25 17:08:18
* @Copyright 友仓
*/
import {postRequest, getRequest, getDownload} from '/@/lib/axios';
import {postRequest, getRequest, getDownload2} from '/@/lib/axios';
export const itemApi = {
@ -62,8 +62,8 @@ export const itemApi = {
/**
* 导出 @author hj
*/
exportItems: (taskId: string) => {
return getDownload(`/item/exportItems/${taskId}`,{});
}
exportItems: (taskId: string,signal?: AbortSignal) => {
return getDownload2(`/item/exportItems/${taskId}`,{},signal);
},
};

32
nc_wms_web/src/lib/axios.ts
View File

@ -7,12 +7,12 @@
* @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
*/
import { message, Modal } from 'ant-design-vue';
import {message, Modal} from 'ant-design-vue';
import axios from 'axios';
import { localRead } from '/@/utils/local-util';
import { useUserStore } from '/@/store/modules/system/user';
import { decryptData, encryptData } from './encrypt';
import { DATA_TYPE_ENUM } from '../constants/common-const';
import {localRead} from '/@/utils/local-util';
import {useUserStore} from '/@/store/modules/system/user';
import {decryptData, encryptData} from './encrypt';
import {DATA_TYPE_ENUM} from '../constants/common-const';
import _ from 'lodash';
import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
@ -132,7 +132,7 @@ smartAxios.interceptors.response.use(
* get请求
*/
export const getRequest = (url, params) => {
return request({ url, method: 'get', params });
return request({url, method: 'get', params});
};
/**
@ -161,7 +161,7 @@ export const postRequest = (url, data) => {
*/
export const postEncryptRequest = (url, data) => {
return request({
data: { encryptData: encryptData(data) },
data: {encryptData: encryptData(data)},
url,
method: 'post',
});
@ -202,6 +202,22 @@ export const getDownload = function (url, params) {
});
};
export const getDownload2 = function (url: string, params: any, signal?: AbortSignal) {
request({
method: 'get',
url,
params,
responseType: 'blob',
signal // 注入取消信号
})
.then((data) => {
handleDownloadData(data);
})
.catch((error) => {
message.success('取消成功');
});
};
function handleDownloadError(error) {
if (error instanceof Blob) {
const fileReader = new FileReader();
@ -227,7 +243,7 @@ function handleDownloadData(response) {
let contentType = _.isUndefined(response.headers['content-type']) ? response.headers['Content-Type'] : response.headers['content-type'];
// 构建下载数据
let url = window.URL.createObjectURL(new Blob([response.data], { type: contentType }));
let url = window.URL.createObjectURL(new Blob([response.data], {type: contentType}));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;

115
nc_wms_web/src/views/business/wms/base/address/address-list.vue
View File

@ -59,7 +59,7 @@
<a-modal
v-model:open="open"
@cancel="onClose"
@cancel="onCancel"
:closable="false"
:maskClosable="false"
:destroyOnClose="true">
@ -75,7 +75,7 @@
</template>
<template #footer>
<a-space>
<a-button @click="onClose">关闭</a-button>
<a-button @click="onCancel">取消</a-button>
</a-space>
</template>
</a-modal>
@ -101,7 +101,7 @@
bordered
:loading="tableLoading"
:pagination="false"
:scroll="{ x: 1500, y: 350 }"
:scroll="{ x: 1500, y: 450 }"
:row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
>
<template #bodyCell="{ text, record, column }">
@ -443,53 +443,102 @@ async function onImportAddress() {
}
//导出
const progressTitle = ref('文件下载中,请稍等...');
const progressPercent = ref(0);//进度条初始值
const progressStatus = ref('active');//进度条状态
const progressTitle = ref('文件下载中,请稍等...');//标题
const progressPercent = ref(0);//进度百分比
const progressStatus = ref('active');
const currentTaskId = ref('');//当前任务ID
const open = ref<boolean>(false);//显示模态框
const open = ref(false);//打开进度条窗口
const timerId = ref<NodeJS.Timeout | null>(null); // 定时器引用
const isExporting = ref(false); // 防止重复提交
const abortController = ref<AbortController | null>(null);// 用于取消请求
const onExportAddress = async () => {
if (isExporting.value) return;
try {
isExporting.value = true;
abortController.value = new AbortController(); // 创建控制器
open.value = true;
//获取导出任务ID
resetProgressState(); // 重置进度状态
// 创建导出任务
const {data: taskId} = await addressApi.createExportTask();
currentTaskId.value = taskId;
progressStatus.value = 'active';
//导出
await addressApi.exportAddress(currentTaskId.value);
// 启动轮询
const timer = setInterval(async () => {
// 发起导出请求
try {
//获取当前任务的进度条
const {data: progress} = await addressApi.getExportProgress(currentTaskId.value);
progressPercent.value = progress;
if (progress >= 100) {
clearInterval(timer);
progressStatus.value = 'success';
progressTitle.value = '文件下载完成';
// 2秒后重置状态
setTimeout(() => {
open.value = false;
progressPercent.value = 0;
progressTitle.value = '文件下载中,请稍等...';
}, 2000);
}
addressApi.exportAddress(taskId, abortController.value.signal)
} catch (error) {
clearInterval(timer);
progressStatus.value = 'exception';
progressPercent.value = 0;
handleExportError();
}
// 清理之前的定时器
if (timerId.value) {
clearInterval(timerId.value);
}
// 启动轮询
timerId.value = setInterval(async () => {
try {
const {data: progress} = await addressApi.getExportProgress(currentTaskId.value);
progressPercent.value = progress;
if (progress >= 100) {
handleExportSuccess();
}
}, 1000); // 每秒轮询一次
} catch (error) {
message.error('导出失败');
handleExportError();
}
}, 1000);
} catch (error) {
handleExportError();
} finally {
isExporting.value = false;
}
};
const onClose = () => {
// 处理导出成功
const handleExportSuccess = () => {
if (timerId.value) {
clearInterval(timerId.value);
}
progressStatus.value = 'success';
progressTitle.value = '文件下载完成';
setTimeout(() => {
open.value = false;
resetProgressState();
}, 1000);
};
// 处理导出失败
const handleExportError = () => {
if (timerId.value) clearInterval(timerId.value);
progressStatus.value = 'exception';
progressPercent.value = 0;
open.value = false;
resetProgressState();
};
// 重置进度状态
const resetProgressState = () => {
progressPercent.value = 0;
progressStatus.value = 'active';
progressTitle.value = '文件下载中,请稍等...';
currentTaskId.value = '';
};
//取消
const onCancel = () => {
// 中止进行中的请求
open.value = false;
if (abortController.value) {
abortController.value.abort();
abortController.value = null;
}
};
onMounted(queryData);

138
nc_wms_web/src/views/business/wms/base/item/item-list.vue
View File

@ -65,7 +65,7 @@
<a-modal
v-model:open="open"
@cancel="onClose"
@cancel="onCancel"
:closable="false"
:maskClosable="false"
:destroyOnClose="true">
@ -81,7 +81,7 @@
</template>
<template #footer>
<a-space>
<a-button @click="onClose">关闭</a-button>
<a-button @click="onCancel">取消</a-button>
</a-space>
</template>
</a-modal>
@ -498,96 +498,102 @@ async function onImportItems() {
}
//导出
const progressTitle = ref('文件下载中,请稍等...');
const progressPercent = ref(0);
const progressTitle = ref('文件下载中,请稍等...');//标题
const progressPercent = ref(0);//进度百分比
const progressStatus = ref('active');
const currentTaskId = ref('');
const open = ref(false);
const pollTimer = ref<NodeJS.Timeout>(); // 使用ref保存定时器引用
const currentTaskId = ref('');//当前任务ID
const open = ref(false);//打开进度条窗口
const timerId = ref<NodeJS.Timeout | null>(null); // 定时器引用
const isExporting = ref(false); // 防止重复提交
const abortController = ref<AbortController | null>(null);// 用于取消请求
// 重置所有进度状态
const resetProgress = () => {
progressPercent.value = 0;
progressStatus.value = 'active';
progressTitle.value = '文件下载中,请稍等...';
};
const onExportItems = async () => {
if (isExporting.value) return;
// 轮询检查进度
const startProgressPolling = async (taskId: string) => {
try {
// 启动轮询（调整为更合理的1秒间隔）
pollTimer.value = setInterval(async () => {
isExporting.value = true;
abortController.value = new AbortController(); // 创建控制器
open.value = true;
resetProgressState(); // 重置进度状态
// 创建导出任务
const {data: taskId} = await addressApi.createExportTask();
currentTaskId.value = taskId;
// 发起导出请求
try {
const { data: progress } = await addressApi.getExportProgress(taskId);
itemApi.exportItems(taskId, abortController.value.signal)
} catch (error) {
handleExportError();
}
// 清理之前的定时器
if (timerId.value) {
clearInterval(timerId.value);
}
// 启动轮询
timerId.value = setInterval(async () => {
try {
const {data: progress} = await addressApi.getExportProgress(currentTaskId.value);
progressPercent.value = progress;
if (progress >= 100) {
handleComplete();
clearInterval(pollTimer.value);
handleExportSuccess();
}
} catch (error) {
handlePollingError();
clearInterval(pollTimer.value);
handleExportError();
}
}, 200); // 调整为1秒减少请求压力
}, 1000);
} catch (error) {
handlePollingError();
handleExportError();
} finally {
isExporting.value = false;
}
};
// 处理完成状态
const handleComplete = () => {
// 处理导出成功
const handleExportSuccess = () => {
if (timerId.value) {
clearInterval(timerId.value);
}
progressStatus.value = 'success';
progressTitle.value = '文件下载完成';
// 立即关闭模态框，使用提示告知用户
setTimeout(() => {
open.value = false;
resetProgress();
resetProgressState();
}, 1000);
};
// 处理轮询错误
const handlePollingError = () => {
// 处理导出失败
const handleExportError = () => {
if (timerId.value) clearInterval(timerId.value);
progressStatus.value = 'exception';
progressPercent.value = 0;
progressTitle.value = '获取进度失败';
};
const onExportItems = async () => {
try {
// 清除已有定时器防止重复请求
if (pollTimer.value) clearInterval(pollTimer.value);
// 重置状态（包括清除旧任务ID）
resetProgress();
currentTaskId.value = '';
open.value = true;
// 获取任务ID
const { data: taskId } = await addressApi.createExportTask();
currentTaskId.value = taskId;
// 启动导出（添加超时处理）
await Promise.race([
itemApi.exportItems(taskId),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('导出超时')), 30_000)
)
]);
// 开始轮询进度
await startProgressPolling(taskId);
} catch (error: any) {
open.value = false;
message.error('导出失败: ' + error.message);
// 异常时清除定时器
if (pollTimer.value) clearInterval(pollTimer.value);
resetProgress();
}
resetProgressState();
};
const onClose = () => {
resetProgress();
// 重置进度状态
const resetProgressState = () => {
progressPercent.value = 0;
progressStatus.value = 'active';
progressTitle.value = '文件下载中,请稍等...';
currentTaskId.value = '';
};
//取消
const onCancel = () => {
// 中止进行中的请求
open.value = false;
if (abortController.value) {
abortController.value.abort();
abortController.value = null;
}
};
onMounted(queryData);