|
|
@@ -140,36 +140,17 @@
|
|
|
</wd-cell-group>
|
|
|
|
|
|
<view class="form-footer">
|
|
|
- <!-- <wd-button type="success" size="large" block @click="connectSSE()">测试SSE</wd-button> -->
|
|
|
<wd-button type="primary" size="large" block @click="handleSubmit()">确认打印</wd-button>
|
|
|
</view>
|
|
|
- </wd-form>
|
|
|
-
|
|
|
- <!-- 当前打印任务 及 实时状态 -->
|
|
|
- <!-- 连接SSE: /print/see/connection -->
|
|
|
+ </wd-form>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { useToast, useMessage } from 'wot-design-uni'
|
|
|
-import { getUserHubPrints, getUserHubAttr, getInvoiceInfo, getInvoiceBatch } from '@/service/api'
|
|
|
+import { getUserHubPrints, getUserHubAttr, getInvoiceBatch } from '@/service/api'
|
|
|
import { getEnvBaseUrl, redirectToUpload, reLaunchToHome } from '@/utils'
|
|
|
import { useUserStore } from '@/store'
|
|
|
-// 基于小程序的 uni.request 方式改造 --- 可行
|
|
|
-// 基于 renderjs 仅支持APP和h5
|
|
|
-// import { uniEventSource } from '@/utils/eventSourceRequest.js'
|
|
|
-
|
|
|
-// 开源项目js文件 给不支持该对象的浏览器提供兼容 v1.0.31
|
|
|
-// 编译报错 "EventSourcePolyfill" is not exported by "src/utils/eventsource.min.js"
|
|
|
-// import { EventSourcePolyfill } from "@/utils/eventsource.js";
|
|
|
-
|
|
|
-// 开源项目的 npm包管理 eventsource-polyfill v0.9.6
|
|
|
-// 报错 Cannot read property 'XDomainRequest' of undefined
|
|
|
-// import { EventSourcePolyfill } from 'eventsource-polyfill';
|
|
|
-
|
|
|
-// event-source-polyfill v1.0.31
|
|
|
-// 小程序环境缺少 xmlhttprequest
|
|
|
-// import { EventSourcePolyfill } from 'event-source-polyfill';
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
const token = userStore.token
|
|
|
@@ -214,10 +195,10 @@ const srcMap = {
|
|
|
'pdf': pdfSrc,
|
|
|
}
|
|
|
|
|
|
-// SSE连接
|
|
|
-const finishList = ref([])
|
|
|
-const info = ref({})
|
|
|
-const eventSource: any = ref({})
|
|
|
+// 上传成功的任务
|
|
|
+const successPrint = ref([])
|
|
|
+// 上传失败的任务
|
|
|
+const failedFiles = ref([])
|
|
|
|
|
|
defineOptions({
|
|
|
name: 'Print',
|
|
|
@@ -240,6 +221,10 @@ function getPrinterList() {
|
|
|
|
|
|
// 处理更换打印机
|
|
|
function handlePrinterChange(item: any) {
|
|
|
+ printerOptions.value = []
|
|
|
+ formData.value = {
|
|
|
+ printer: item.value
|
|
|
+ }
|
|
|
let obj = printerList.value.find(i => i.id == item.value) || {}
|
|
|
let params = {
|
|
|
id: obj.userHubId,
|
|
|
@@ -327,13 +312,13 @@ function selectFile() {
|
|
|
console.log('chooseImage res: ', res);
|
|
|
if (res.errMsg == "chooseImage:ok") {
|
|
|
let failList = []
|
|
|
- res.tempFiles.forEach(item => {
|
|
|
+ res.tempFiles.forEach((item, index) => {
|
|
|
if (item.size > maxSize) {
|
|
|
failList.push(item)
|
|
|
} else {
|
|
|
fileList.value.push({
|
|
|
// name: item.path.substring(item.path.lastIndexOf("/") + 1),
|
|
|
- name: `图片-${new Date().getTime()}.${getFileType(item.path)}`,
|
|
|
+ name: `图片-${new Date().getTime() + index}.${getFileType(item.path)}`,
|
|
|
filePath: item.path,
|
|
|
})
|
|
|
}
|
|
|
@@ -420,7 +405,7 @@ function removeFile(index) {
|
|
|
fileList.value.splice(index, 1)
|
|
|
if (accept.value == "all" && fileList.value.length == 0) {
|
|
|
message.confirm({
|
|
|
- msg: "文件已全部移除, 是否重新上传?",
|
|
|
+ msg: "文件已全部移除, 是否重新选择?",
|
|
|
closeOnClickModal: false,
|
|
|
}).then(() => {
|
|
|
redirectToUpload()
|
|
|
@@ -430,75 +415,145 @@ function removeFile(index) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 打印文件 (单个打印任务)
|
|
|
-function handlePrint(filePath) {
|
|
|
- // 构造提交数据
|
|
|
- let params = {
|
|
|
- id: formData.value.userHubId,
|
|
|
- printer: formData.value.printerName,
|
|
|
+// 批量打印文件
|
|
|
+async function handleBatchPrint() {
|
|
|
+ try {
|
|
|
+ failedFiles.value = []; // 记录上传失败的文件
|
|
|
+
|
|
|
+ for (let i = 0; i < fileList.value.length; i++) {
|
|
|
+ const fileName = fileList.value[i].name;
|
|
|
+ const filePath = fileList.value[i].filePath;
|
|
|
+ toast.loading({
|
|
|
+ loadingType: 'ring',
|
|
|
+ msg: `开始上传文件 ${i + 1}: ${fileName}`
|
|
|
+ })
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 上传文件并监听进度
|
|
|
+ const uploadRes = await handlePrint(filePath, (progress) => {
|
|
|
+ toast.loading({
|
|
|
+ loadingType: 'ring',
|
|
|
+ msg: `文件 ${i + 1} 上传进度: ${progress}%`
|
|
|
+ })
|
|
|
+ });
|
|
|
+ toast.success(`文件 ${i + 1} 上传成功`)
|
|
|
+ } catch (error) {
|
|
|
+ toast.error(`文件 ${i + 1} 上传失败`)
|
|
|
+ failedFiles.value.push(fileList.value[i]); // 记录失败的文件
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查是否有失败的文件
|
|
|
+ if (failedFiles.value.length > 0) {
|
|
|
+ message.confirm({
|
|
|
+ title: '上传失败',
|
|
|
+ msg: `有 ${failedFiles.value.length} 个文件上传失败，是否重新上传？`,
|
|
|
+ closeOnClickModal: false,
|
|
|
+ }).then(async () => {
|
|
|
+ await retryUploadFiles(failedFiles.value); // 重新上传失败的文件
|
|
|
+ }).catch((error) => {
|
|
|
+ msgConfirm("上传完成", "取消重新上传, 其余文件已上传成功!")
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ toast.success("所有文件上传成功")
|
|
|
+ msgConfirm("上传完成", "所有文件上传成功")
|
|
|
+ }
|
|
|
+ } catch(error) {
|
|
|
+ console.log("上传过程中发生错误", error);
|
|
|
}
|
|
|
- printerOptions.value.forEach(option => {
|
|
|
- switch(option.type) {
|
|
|
- case "rang":
|
|
|
- // 打印页数范围不传
|
|
|
- // params[option.key] = formData.value[option.key].join(",")
|
|
|
- break;
|
|
|
- default:
|
|
|
- params[option.key] = formData.value[option.key]
|
|
|
+}
|
|
|
+
|
|
|
+async function retryUploadFiles(failedFiles) {
|
|
|
+ const newFailedFiles = []; // 记录重新上传失败的文件
|
|
|
+
|
|
|
+ // 逐个重新上传失败的文件
|
|
|
+ for (let i = 0; i < failedFiles.length; i++) {
|
|
|
+ const fileName = failedFiles[i].name;
|
|
|
+ const filePath = failedFiles[i].filePath;
|
|
|
+ toast.loading({
|
|
|
+ loadingType: 'ring',
|
|
|
+ msg: `重新上传文件 ${i + 1}: ${fileName}`
|
|
|
+ })
|
|
|
+
|
|
|
+ try {
|
|
|
+ const uploadRes = await handlePrint(filePath, (progress) => {
|
|
|
+ toast.loading({
|
|
|
+ loadingType: 'ring',
|
|
|
+ msg: `文件 ${i + 1} 上传进度: ${progress}%`
|
|
|
+ })
|
|
|
+ });
|
|
|
+ toast.success(`文件 ${i + 1} 重新上传成功`)
|
|
|
+ } catch (error) {
|
|
|
+ toast.error(`文件 ${i + 1} 重新上传成功`)
|
|
|
+ newFailedFiles.push(failedFiles[i]); // 记录重新上传失败的文件
|
|
|
}
|
|
|
- })
|
|
|
- const queryParams = Object.entries(params).map(([key, value]) => {
|
|
|
- return `${key}=${encodeURIComponent(value)}`;
|
|
|
- }).join('&');
|
|
|
-
|
|
|
- uni.showLoading({
|
|
|
- title: '上传中...'
|
|
|
- });
|
|
|
- uni.uploadFile({
|
|
|
- url: `${baseUrl}/sys/wx/userHub/print?${queryParams}`,
|
|
|
- filePath: filePath,
|
|
|
- name: 'file', // 这里根据后端需要的字段来定义
|
|
|
- success: (res: any) => {
|
|
|
- if (fileList.value.length == 1) {
|
|
|
- // 单个打印完成
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查是否还有失败的文件
|
|
|
+ if (newFailedFiles.length > 0) {
|
|
|
+ // 修改当前文件列表
|
|
|
+ fileList.value = newFailedFiles
|
|
|
+ message.alert({
|
|
|
+ title: '重新上传失败',
|
|
|
+ msg: `有 ${newFailedFiles.length} 个文件重新上传失败，请检查网络或文件后重试。`,
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ toast.success("所有失败文件重新上传成功")
|
|
|
+ msgConfirm("上传完成", "所有失败文件重新上传成功!")
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 打印文件 (单个打印任务)
|
|
|
+function handlePrint(filePath, onProgress) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ // 构造提交数据
|
|
|
+ let params = {
|
|
|
+ id: formData.value.userHubId,
|
|
|
+ printer: formData.value.printerName,
|
|
|
+ }
|
|
|
+ printerOptions.value.forEach(option => {
|
|
|
+ switch(option.type) {
|
|
|
+ case "rang":
|
|
|
+ // 打印页数范围不传
|
|
|
+ // params[option.key] = formData.value[option.key].join(",")
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ params[option.key] = formData.value[option.key]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const queryParams = Object.entries(params).map(([key, value]) => {
|
|
|
+ return `${key}=${encodeURIComponent(value)}`;
|
|
|
+ }).join('&');
|
|
|
+
|
|
|
+ const uploadTask = uni.uploadFile({
|
|
|
+ url: `${baseUrl}/sys/wx/userHub/print?${queryParams}`, // 上传接口地址
|
|
|
+ filePath: filePath,
|
|
|
+ name: 'file', // 文件对应的 key
|
|
|
+ formData: {
|
|
|
+ // 其他表单数据
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
if (res.statusCode === 200 && JSON.parse(res.data).code === 0) {
|
|
|
- message.confirm({
|
|
|
- msg: "打印成功, 是否继续打印?",
|
|
|
- closeOnClickModal: false,
|
|
|
- }).then(() => {
|
|
|
- fileList.value = []
|
|
|
- printerOptions.value = []
|
|
|
- formData.value = {
|
|
|
- printer: ""
|
|
|
- }
|
|
|
- if (accept.value == "all") {
|
|
|
- redirectToUpload()
|
|
|
- }
|
|
|
- }).catch((error) => {
|
|
|
- reLaunchToHome()
|
|
|
- })
|
|
|
+ resolve(res.data);
|
|
|
} else {
|
|
|
- console.log("打印异常 res", res);
|
|
|
- toast.warning('上传打印异常, 请重试')
|
|
|
+ reject(new Error(`上传失败，状态码: ${res.statusCode}`));
|
|
|
}
|
|
|
- } else {
|
|
|
- // 批量打印 完成一个
|
|
|
- finishList.value.push({
|
|
|
- filePath,
|
|
|
- })
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ reject(err);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 监听上传进度
|
|
|
+ uploadTask.onProgressUpdate((res) => {
|
|
|
+ if (onProgress) {
|
|
|
+ onProgress(res.progress); // 回调上传进度
|
|
|
}
|
|
|
- },
|
|
|
- fail: (error) => {
|
|
|
- console.log('打印失败 error: ', error);
|
|
|
- toast.error('上传打印失败, 请重试')
|
|
|
- },
|
|
|
- complete: () => {
|
|
|
- uni.hideLoading()
|
|
|
- }
|
|
|
- })
|
|
|
+ });
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
-// 处理提交打印 (支持批量)
|
|
|
+// 处理提交打印
|
|
|
function handleSubmit() {
|
|
|
if (fileList.value.length == 0) {
|
|
|
toast.warning('请先上传文件')
|
|
|
@@ -506,32 +561,34 @@ function handleSubmit() {
|
|
|
}
|
|
|
form.value.validate().then(({ valid }) => {
|
|
|
if (valid) {
|
|
|
- // TODO: 批量打印提示
|
|
|
- finishList.value = []
|
|
|
- if (fileList.value.length == 1) {
|
|
|
- handlePrint(fileList.value[0].filePath)
|
|
|
- } else {
|
|
|
- message.confirm({
|
|
|
- // msg: `本次打印文件 ${fileList.value.length} 个, ${fileList.value.length == finishList.value.length ? '已全部上传' : `正在上传第 ${finishList.value.length + 1} 个, 是否继续打印?`}`,
|
|
|
- msg: `本次打印文件 ${fileList.value.length} 个, 是否继续打印?`,
|
|
|
- closeOnClickModal: false,
|
|
|
- }).then(() => {
|
|
|
- fileList.value = []
|
|
|
- printerOptions.value = []
|
|
|
- formData.value = {
|
|
|
- printer: ""
|
|
|
- }
|
|
|
- if (accept.value == "all") {
|
|
|
- redirectToUpload()
|
|
|
- }
|
|
|
- }).catch((error) => {
|
|
|
- reLaunchToHome()
|
|
|
- })
|
|
|
+ // 不区分单个/批量, 以批量打印处理
|
|
|
+ handleBatchPrint()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- fileList.value.forEach(item => {
|
|
|
- handlePrint(item.filePath)
|
|
|
- })
|
|
|
- }
|
|
|
+// 打印完成后提示词
|
|
|
+function msgConfirm(title="提示", msg="文件已上传成功!") {
|
|
|
+ message.confirm({
|
|
|
+ title,
|
|
|
+ msg,
|
|
|
+ confirmButtonText: "查看任务",
|
|
|
+ cancelButtonText: "继续打印",
|
|
|
+ }).then(() => {
|
|
|
+ // 查看任务
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/pages/print/job?tab=0`,
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ // 继续打印
|
|
|
+ failedFiles.value = []
|
|
|
+ fileList.value = []
|
|
|
+ printerOptions.value = []
|
|
|
+ formData.value = {
|
|
|
+ printer: ""
|
|
|
+ }
|
|
|
+ if (accept.value == "all") {
|
|
|
+ redirectToUpload()
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
@@ -555,99 +612,15 @@ function base64ToTempFilePath(fileName, base64Data, success, fail) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-// 连接SSE
|
|
|
-function connectSSE() {
|
|
|
- // 基于库 import { EventSourcePolyfill } from 'event-source-polyfill';
|
|
|
- // 报错 小程序没有 xmlhttprequest
|
|
|
- // const url = `https://service.1ai.ltd/maoer-api/print/see/connection?token=${token}`
|
|
|
- // const eventSource = new EventSourcePolyfill(url);
|
|
|
-
|
|
|
- // eventSource.onopen = (event) =>{
|
|
|
- // console.log("连接成功", event);
|
|
|
- // };
|
|
|
- // // 监听自定义事件 'update'
|
|
|
- // eventSource.addEventListener('update', (event) => {
|
|
|
- // console.log('Update event:', event.data);
|
|
|
- // });
|
|
|
-
|
|
|
- // // 监听默认的 'message' 事件
|
|
|
- // eventSource.onmessage = (event) => {
|
|
|
- // console.log('Message event:', event.data);
|
|
|
- // };
|
|
|
-
|
|
|
- // // 监听错误事件
|
|
|
- // eventSource.onerror = (error) => {
|
|
|
- // console.error('EventSource encountered an error:', error);
|
|
|
- // };
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // 基于 .js / min.js 中的 EventSourcePolyfill
|
|
|
- // 仅支持APP + H5 ?
|
|
|
- // let url = `https://service.1ai.ltd/maoer-api/print/see/connection?token=${token}`
|
|
|
- // eventSource.value = new EventSourcePolyfill(url, {
|
|
|
- // headers: {
|
|
|
- // "X-ACCESS-TOKEN": token,
|
|
|
- // "Content-Type": "text/event-stream;charset=UTF-8",
|
|
|
- // "Cache-Control": "no-cache",
|
|
|
- // Connection: "keep-alive",
|
|
|
- // },
|
|
|
- // //重连时间间隔，单位：毫秒，默认45000毫秒，这里设置为10分钟
|
|
|
- // heartbeatTimeout: 10 * 60 * 1000,
|
|
|
- // });
|
|
|
-
|
|
|
- // eventSource.value.onopen = () => {
|
|
|
- // console.log("建立连接");
|
|
|
- // };
|
|
|
- // eventSource.value.onmessage = (e) => {
|
|
|
- // console.log("接收到消息:", e);
|
|
|
- // };
|
|
|
- // eventSource.value.onerror = (e) => {
|
|
|
- // if (e.readyState == EventSource.CLOSED) {
|
|
|
- // console.log("连接关闭:", e);
|
|
|
- // } else if (eventSource.value.readyState == EventSource.CONNECTING) {
|
|
|
- // console.log("正在重连:", e);
|
|
|
- // } else {
|
|
|
- // console.log("其他异常:", e);
|
|
|
- // }
|
|
|
- // };
|
|
|
-
|
|
|
-
|
|
|
- // 基于 renderjs 兼容性仅支持APP(vue) H5
|
|
|
- // const eventSource = new EventSource(`https://service.1ai.ltd/maoer-api/print/see/connection?token=${token}`); // 确保这是你的服务器地址和端口
|
|
|
- // eventSource.onmessage = (event) => {
|
|
|
- // const data = JSON.parse(event.data);
|
|
|
- // console.log('data: ', data);
|
|
|
- // // msgList.push(data); // 将接收到的消息添加到数据数组中
|
|
|
- // };
|
|
|
- // eventSource.onerror = (error) => {
|
|
|
- // console.error('EventSource failed:', error);
|
|
|
- // eventSource.close(); // 关闭连接并重新尝试连接等逻辑可以放在这里
|
|
|
- // };
|
|
|
-
|
|
|
- // 基于 uni.request
|
|
|
- // let data = ""
|
|
|
- // let format = ""
|
|
|
- // let eventSource = uniEventSource({
|
|
|
- // url: `https://service.1ai.ltd/maoer-api/print/see/connection?token=${token}`,
|
|
|
- // data: {
|
|
|
- // data: data,
|
|
|
- // format: format
|
|
|
- // },
|
|
|
- // onopen: () => {
|
|
|
- // console.log("SERVER OPEN")
|
|
|
- // },
|
|
|
- // onmessage: (res) => {
|
|
|
- // console.log(res, "onMessage")
|
|
|
- // },
|
|
|
- // onerror: (err) => {
|
|
|
- // console.error(err)
|
|
|
- // },
|
|
|
- // onclose: () => {
|
|
|
- // console.log("SERVER CLOSE")
|
|
|
- // }
|
|
|
- // })
|
|
|
- // console.log("EVENTSOURCE::", eventSource)
|
|
|
+// 打开SSE webview页面
|
|
|
+function openWebViewSSE() {
|
|
|
+ // let list = JSON.stringify(fileList.value.map(item => item.name).join(",") || "")
|
|
|
+ console.log('list: ', fileList.value);
|
|
|
+ let list = JSON.stringify(fileList.value)
|
|
|
+ const url = `https://service.1ai.ltd/webview-sse/index.html?token=${token}&list=${list}&t=${new Date().getTime()}`
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/webview/sse?url=${encodeURIComponent(url)}`,
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
onLoad((option) => {
|
