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="{ :theme="{
algorithm: compactFlag ? theme.compactAlgorithm : theme.defaultAlgorithm, algorithm: compactFlag ? theme.compactAlgorithm : theme.defaultAlgorithm,
token: { 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, colorPrimary: themeColors[colorIndex].primaryColor,
colorLink: themeColors[colorIndex].primaryColor, colorLink: themeColors[colorIndex].primaryColor,
colorLinkActive: themeColors[colorIndex].activeColor, colorLinkActive: themeColors[colorIndex].activeColor,
@ -38,63 +39,81 @@
<!---全局loading---> <!---全局loading--->
<a-spin :spinning="spinning" tip="稍等片刻，我在拼命加载中..." size="large"> <a-spin :spinning="spinning" tip="稍等片刻，我在拼命加载中..." size="large">
<!--- 路由 --> <!--- 路由 -->
<RouterView /> <RouterView/>
</a-spin> </a-spin>
</a-config-provider> </a-config-provider>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { computed, h, useSlots } from 'vue'; import {computed, h, useSlots, watch} from 'vue';
import { messages } from '/@/i18n'; import {messages} from '/@/i18n';
import { useAppConfigStore } from '/@/store/modules/system/app-config'; import {useAppConfigStore} from '/@/store/modules/system/app-config';
import { useSpinStore } from '/@/store/modules/system/spin'; import {useSpinStore} from '/@/store/modules/system/spin';
import { theme } from 'ant-design-vue'; import {theme} from 'ant-design-vue';
import { themeColors } from '/@/theme/color.js'; import {themeColors} from '/@/theme/color.js';
import { Popover } from 'ant-design-vue'; import {Popover} from 'ant-design-vue';
import SmartCopyIcon from '/@/components/framework/smart-copy-icon/index.vue'; import SmartCopyIcon from '/@/components/framework/smart-copy-icon/index.vue';
import _ from 'lodash'; import _ from 'lodash';
const slots = useSlots(); const slots = useSlots();
const antdLocale = computed(() => messages[useAppConfigStore().language].antdLocale); const antdLocale = computed(() => messages[useAppConfigStore().language].antdLocale);
const dayjsLocale = computed(() => messages[useAppConfigStore().language].dayjsLocale); const dayjsLocale = computed(() => messages[useAppConfigStore().language].dayjsLocale);
dayjs.locale(dayjsLocale); dayjs.locale(dayjsLocale);
// 全局loading // 全局loading
let spinStore = useSpinStore(); let spinStore = useSpinStore();
const spinning = computed(() => spinStore.loading); const spinning = computed(() => spinStore.loading);
// 是否紧凑 // 是否紧凑
const compactFlag = computed(() => useAppConfigStore().compactFlag); const compactFlag = computed(() => useAppConfigStore().compactFlag);
// 主题颜色 // 主题颜色
const colorIndex = computed(() => { const colorIndex = computed(() => {
return useAppConfigStore().colorIndex; return useAppConfigStore().colorIndex;
}); });
// 圆角 // 圆角
const borderRadius = computed(() => { const borderRadius = computed(() => {
return useAppConfigStore().borderRadius; return useAppConfigStore().borderRadius;
}); });
function transformCellText({ text, column, record, index }) {
function transformCellText({text, column, record, index}) {
if (column && column.textEllipsisFlag === true) { if (column && column.textEllipsisFlag === true) {
return h( return h(
Popover, Popover,
{ placement: 'bottom' }, {placement: 'bottom'},
{ {
default: () => 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: () => content: () =>
h('div', { style: { display: 'flex' } }, [ h('div', {style: {display: 'flex'}}, [
h('div', text), h('div', text),
h(SmartCopyIcon, { value: document.getElementById(`${column.dataIndex}${index}`).innerText }), h(SmartCopyIcon, {value: document.getElementById(`${column.dataIndex}${index}`).innerText}),
]), ]),
} }
); );
} else { } else {
return text; return text;
} }
} }
// 监听主题颜色变化，更新CSS变量
/*watch(() => colorIndex.value, (newVal) => {
document.documentElement.style.setProperty('--primary-color', themeColors[newVal].primaryColor);
}, { immediate: true });*/
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
:deep(.ant-table-column-sorters) { /*:deep(.ant-table-column-sorters) {
align-items: flex-start !important; 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> </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 * @Date: 2024-12-26 15:35:23
* @Copyright 友仓 * @Copyright 友仓
*/ */
import {postRequest, getRequest, getDownload} from '/@/lib/axios'; import {postRequest, getRequest, getDownload2} from '/@/lib/axios';
export const addressApi = { export const addressApi = {
@ -71,8 +71,8 @@ export const addressApi = {
/** /**
* 导出 @author hj * 导出 @author hj
*/ */
exportAddress: (taskId: string) => { exportAddress: (taskId: string,signal?: AbortSignal) => {
return getDownload(`/address/exportAddress/${taskId}`, {}); 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 * @Date: 2024-11-25 17:08:18
* @Copyright 友仓 * @Copyright 友仓
*/ */
import {postRequest, getRequest, getDownload} from '/@/lib/axios'; import {postRequest, getRequest, getDownload2} from '/@/lib/axios';
export const itemApi = { export const itemApi = {
@ -62,8 +62,8 @@ export const itemApi = {
/** /**
* 导出 @author hj * 导出 @author hj
*/ */
exportItems: (taskId: string) => { exportItems: (taskId: string,signal?: AbortSignal) => {
return getDownload(`/item/exportItems/${taskId}`,{}); return getDownload2(`/item/exportItems/${taskId}`,{},signal);
} },
}; };

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

@ -7,12 +7,12 @@
* @Email: lab1024@163.com * @Email: lab1024@163.com
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012 * @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 axios from 'axios';
import { localRead } from '/@/utils/local-util'; import {localRead} from '/@/utils/local-util';
import { useUserStore } from '/@/store/modules/system/user'; import {useUserStore} from '/@/store/modules/system/user';
import { decryptData, encryptData } from './encrypt'; import {decryptData, encryptData} from './encrypt';
import { DATA_TYPE_ENUM } from '../constants/common-const'; import {DATA_TYPE_ENUM} from '../constants/common-const';
import _ from 'lodash'; import _ from 'lodash';
import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js'; import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
@ -132,7 +132,7 @@ smartAxios.interceptors.response.use(
* get请求 * get请求
*/ */
export const getRequest = (url, params) => { 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) => { export const postEncryptRequest = (url, data) => {
return request({ return request({
data: { encryptData: encryptData(data) }, data: {encryptData: encryptData(data)},
url, url,
method: 'post', 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) { function handleDownloadError(error) {
if (error instanceof Blob) { if (error instanceof Blob) {
const fileReader = new FileReader(); 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 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'); let link = document.createElement('a');
link.style.display = 'none'; link.style.display = 'none';
link.href = url; link.href = url;

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

@ -59,7 +59,7 @@
<a-modal <a-modal
v-model:open="open" v-model:open="open"
@cancel="onClose" @cancel="onCancel"
:closable="false" :closable="false"
:maskClosable="false" :maskClosable="false"
:destroyOnClose="true"> :destroyOnClose="true">
@ -75,7 +75,7 @@
</template> </template>
<template #footer> <template #footer>
<a-space> <a-space>
<a-button @click="onClose">关闭</a-button> <a-button @click="onCancel">取消</a-button>
</a-space> </a-space>
</template> </template>
</a-modal> </a-modal>
@ -101,7 +101,7 @@
bordered bordered
:loading="tableLoading" :loading="tableLoading"
:pagination="false" :pagination="false"
:scroll="{ x: 1500, y: 350 }" :scroll="{ x: 1500, y: 450 }"
:row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }" :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
> >
<template #bodyCell="{ text, record, column }"> <template #bodyCell="{ text, record, column }">
@ -443,53 +443,102 @@ async function onImportAddress() {
} }
//导出 //导出
const progressTitle = ref('文件下载中,请稍等...'); const progressTitle = ref('文件下载中,请稍等...');//标题
const progressPercent = ref(0);//进度条初始值 const progressPercent = ref(0);//进度百分比
const progressStatus = ref('active');//进度条状态 const progressStatus = ref('active');
const currentTaskId = ref('');//当前任务ID 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 () => { const onExportAddress = async () => {
if (isExporting.value) return;
try { try {
isExporting.value = true;
abortController.value = new AbortController(); // 创建控制器
open.value = true; open.value = true;
//获取导出任务ID resetProgressState(); // 重置进度状态
// 创建导出任务
const {data: taskId} = await addressApi.createExportTask(); const {data: taskId} = await addressApi.createExportTask();
currentTaskId.value = taskId; currentTaskId.value = taskId;
progressStatus.value = 'active';
//导出 // 发起导出请求
await addressApi.exportAddress(currentTaskId.value);
// 启动轮询
const timer = setInterval(async () => {
try { try {
//获取当前任务的进度条 addressApi.exportAddress(taskId, abortController.value.signal)
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);
}
} catch (error) { } catch (error) {
clearInterval(timer); handleExportError();
progressStatus.value = 'exception'; }
progressPercent.value = 0;
// 清理之前的定时器
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) { } 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; 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); onMounted(queryData);

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

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