|
|
@@ -9,27 +9,37 @@
|
|
|
<template>
|
|
|
<view class="page-list">
|
|
|
<wd-sticky>
|
|
|
- <view class="sticky-box" >
|
|
|
+ <view class="sticky-box">
|
|
|
<!-- TODO: 优化固定的高度 -->
|
|
|
- <view class="printer">{{ `当前打印机:${queryParams.printer || '全部'} ${queryParams.asname ? `(${queryParams.asname})` : ''}` }}</view>
|
|
|
+ <view class="printer">
|
|
|
+ {{
|
|
|
+ `当前打印机:${queryParams.printer || '全部'} ${
|
|
|
+ queryParams.asname ? `(${queryParams.asname})` : ''
|
|
|
+ }`
|
|
|
+ }}
|
|
|
+ </view>
|
|
|
<wd-tabs v-model="queryParams.completed" auto-line-width @change="resetDataList">
|
|
|
- <wd-tab v-for="item of completedList" :key="item.value" :title="item.label" :name="item.value">
|
|
|
- </wd-tab>
|
|
|
+ <wd-tab
|
|
|
+ v-for="item of completedList"
|
|
|
+ :key="item.value"
|
|
|
+ :title="item.label"
|
|
|
+ :name="item.value"
|
|
|
+ ></wd-tab>
|
|
|
</wd-tabs>
|
|
|
<!-- <wd-search
|
|
|
- placeholder="请输入打印任务名称"
|
|
|
- placeholder-left
|
|
|
- hide-cancel
|
|
|
- v-model="queryParams.title"
|
|
|
- @change="onSearch"
|
|
|
- @clear="onSearch"
|
|
|
- >
|
|
|
- <template v-slot:prefix>
|
|
|
- <wd-drop-menu custom-class="search-menu">
|
|
|
- <wd-drop-menu-item v-model="queryParams.completed" :options="completedList" @change="onSearch" />
|
|
|
- </wd-drop-menu>
|
|
|
- </template>
|
|
|
- </wd-search> -->
|
|
|
+ placeholder="请输入打印任务名称"
|
|
|
+ placeholder-left
|
|
|
+ hide-cancel
|
|
|
+ v-model="queryParams.title"
|
|
|
+ @change="onSearch"
|
|
|
+ @clear="onSearch"
|
|
|
+ >
|
|
|
+ <template v-slot:prefix>
|
|
|
+ <wd-drop-menu custom-class="search-menu">
|
|
|
+ <wd-drop-menu-item v-model="queryParams.completed" :options="completedList" @change="onSearch" />
|
|
|
+ </wd-drop-menu>
|
|
|
+ </template>
|
|
|
+ </wd-search> -->
|
|
|
</view>
|
|
|
</wd-sticky>
|
|
|
|
|
|
@@ -55,23 +65,30 @@
|
|
|
</view>
|
|
|
<view v-if="item.statusMsg" class="sub-text">
|
|
|
<view class="label">状态描述:</view>
|
|
|
- <view class="value">{{ item.statusMsg }} </view>
|
|
|
+ <view class="value">{{ item.statusMsg }}</view>
|
|
|
</view>
|
|
|
<view class="sub-text">
|
|
|
<view class="label">创建时间:</view>
|
|
|
- <view class="value">{{ item.createTime }} </view>
|
|
|
+ <view class="value">{{ item.createTime }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="opt-box">
|
|
|
- <view v-if="item.reprint == '1'"
|
|
|
- class="opt-circle-btn"
|
|
|
- @click.stop="handleReprint(item.id)">重打</view>
|
|
|
- <view v-if="['3', '4', '5', '6'].includes(item.jobStatus)"
|
|
|
- class="opt-circle-btn waring"
|
|
|
- @click.stop="handleCancel(item.id)">取消</view>
|
|
|
- <view class="opt-circle-btn danger"
|
|
|
- @click.stop="handleDelete(item)">移除</view>
|
|
|
+ <view
|
|
|
+ v-if="queryParams.completed !== '0'"
|
|
|
+ class="opt-circle-btn"
|
|
|
+ @click.stop="handleReprint(item.id)"
|
|
|
+ >
|
|
|
+ 重打
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-if="['3', '4', '5', '6'].includes(item.jobStatus)"
|
|
|
+ class="opt-circle-btn waring"
|
|
|
+ @click.stop="handleCancel(item.id)"
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <view class="opt-circle-btn danger" @click.stop="handleDelete(item)">移除</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 加载更多 -->
|
|
|
@@ -84,13 +101,17 @@
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { useMessage, useToast } from 'wot-design-uni'
|
|
|
-import { getUserHubJobsPage, reprintUserHubJobs, cancelUserHubJobs, deleteUserHubJobs } from '@/service/api'
|
|
|
-import { getLabel, getLabelColor } from '@/utils'
|
|
|
+import {
|
|
|
+ getUserHubJobsPage,
|
|
|
+ reprintUserHubJobs,
|
|
|
+ cancelUserHubJobs,
|
|
|
+ deleteUserHubJobs,
|
|
|
+} from '@/service/api'
|
|
|
+import { getLabel, getLabelColor, toLoginWait } from '@/utils'
|
|
|
import { debounce } from 'wot-design-uni/components/common/util'
|
|
|
import { useUserStore } from '@/store'
|
|
|
-import { toLoginWait } from '@/utils'
|
|
|
|
|
|
-let socketBaseUrl = import.meta.env.VITE_SOCKET_BASEURL
|
|
|
+const socketBaseUrl = import.meta.env.VITE_SOCKET_BASEURL
|
|
|
const userStore = useUserStore()
|
|
|
const token = userStore.token
|
|
|
const message = useMessage()
|
|
|
@@ -99,16 +120,16 @@ const total = ref(0)
|
|
|
const queryParams: any = reactive({
|
|
|
pageNo: 1,
|
|
|
pageSize: 10,
|
|
|
- completed: "all",
|
|
|
+ completed: 'all',
|
|
|
title: '',
|
|
|
- printer: "",
|
|
|
+ printer: '',
|
|
|
hubId: '',
|
|
|
asname: '', // 打印助手名称
|
|
|
})
|
|
|
const completedList: any = ref([
|
|
|
{ label: '全部', value: 'all' },
|
|
|
{ label: '当前任务', value: '0' },
|
|
|
- { label: '历史任务', value: '1' }
|
|
|
+ { label: '历史任务', value: '1' },
|
|
|
])
|
|
|
// 0连接中 3 等待中 4 已暂停 5 处理中 6已停止 7已取消 8已中止 9已完成
|
|
|
const jobStatus: any = ref([
|
|
|
@@ -152,36 +173,36 @@ defineOptions({
|
|
|
// 允许的文件类型 allowType = ['txt', 'pdf', 'doc', 'docx', 'xlsx', 'xls', 'ppt', 'pptx', 'gif', 'png', 'jpg', 'jpeg', 'webp']
|
|
|
function getFileType(fileName) {
|
|
|
let src = otherSrc
|
|
|
- let fileType = ""
|
|
|
+ let fileType = ''
|
|
|
if (fileName) {
|
|
|
const lastIndex = fileName.lastIndexOf('.')
|
|
|
- if (lastIndex != -1) fileType = fileName.substring(lastIndex + 1)
|
|
|
+ if (lastIndex !== -1) fileType = fileName.substring(lastIndex + 1)
|
|
|
switch (fileType) {
|
|
|
- case "doc":
|
|
|
- case "docx":
|
|
|
+ case 'doc':
|
|
|
+ case 'docx':
|
|
|
src = docSrc
|
|
|
- break;
|
|
|
- case "xls":
|
|
|
- case "xlsx":
|
|
|
- src = xlsSrc;
|
|
|
- break;
|
|
|
- case "ppt":
|
|
|
- case "pptx":
|
|
|
- src = pptSrc;
|
|
|
- break;
|
|
|
- case "png":
|
|
|
- case "jpg":
|
|
|
- case "jpeg":
|
|
|
- case "gif":
|
|
|
- case "webp":
|
|
|
- src = imageSrc;
|
|
|
- break;
|
|
|
- case "txt":
|
|
|
- src = txtSrc;
|
|
|
- break;
|
|
|
- case "pdf":
|
|
|
- src = pdfSrc;
|
|
|
- break;
|
|
|
+ break
|
|
|
+ case 'xls':
|
|
|
+ case 'xlsx':
|
|
|
+ src = xlsSrc
|
|
|
+ break
|
|
|
+ case 'ppt':
|
|
|
+ case 'pptx':
|
|
|
+ src = pptSrc
|
|
|
+ break
|
|
|
+ case 'png':
|
|
|
+ case 'jpg':
|
|
|
+ case 'jpeg':
|
|
|
+ case 'gif':
|
|
|
+ case 'webp':
|
|
|
+ src = imageSrc
|
|
|
+ break
|
|
|
+ case 'txt':
|
|
|
+ src = txtSrc
|
|
|
+ break
|
|
|
+ case 'pdf':
|
|
|
+ src = pdfSrc
|
|
|
+ break
|
|
|
}
|
|
|
}
|
|
|
return src
|
|
|
@@ -199,6 +220,11 @@ function getDataList() {
|
|
|
if (params.completed === '' || params.completed === 'all') delete params.completed
|
|
|
if (!params.printer) delete params.printer
|
|
|
if (!params.hubId) delete params.hubId
|
|
|
+ // 当前任务升序
|
|
|
+ if (params.completed === '0') {
|
|
|
+ params.order = 'asc'
|
|
|
+ params.orderBy = 'create_time'
|
|
|
+ }
|
|
|
getUserHubJobsPage(params)
|
|
|
.then((res: any) => {
|
|
|
if (res.code === 0 && res.body) {
|
|
|
@@ -231,28 +257,30 @@ function toDetail(item: any) {
|
|
|
|
|
|
// 重打任务
|
|
|
function handleReprint(id: string) {
|
|
|
- reprintUserHubJobs({id}).then((res: any) => {
|
|
|
- if (res.code === 0) {
|
|
|
- toast.success('已发送重新打印')
|
|
|
- getDataList()
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.log(error)
|
|
|
- })
|
|
|
+ reprintUserHubJobs({ id })
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ toast.success('已发送重新打印')
|
|
|
+ getDataList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// 取消任务
|
|
|
function handleCancel(id: string) {
|
|
|
- cancelUserHubJobs({id}).then((res: any) => {
|
|
|
- if (res.code === 0) {
|
|
|
- toast.success('取消打印任务成功')
|
|
|
- getDataList()
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((error) => {
|
|
|
- console.log(error)
|
|
|
- })
|
|
|
+ cancelUserHubJobs({ id })
|
|
|
+ .then((res: any) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ toast.success('取消打印任务成功')
|
|
|
+ getDataList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// 移除任务
|
|
|
@@ -263,7 +291,7 @@ function handleDelete(item) {
|
|
|
msg: `是否移除打印任务: ${item.title} ?`,
|
|
|
})
|
|
|
.then(() => {
|
|
|
- deleteUserHubJobs({id: item.id})
|
|
|
+ deleteUserHubJobs({ id: item.id })
|
|
|
.then((res: any) => {
|
|
|
if (res.code === 0) {
|
|
|
toast.success('移除成功')
|
|
|
@@ -340,20 +368,20 @@ function initWebSocket() {
|
|
|
socketTask.value = uni.connectSocket({
|
|
|
url: `${socketBaseUrl}/print/ws`,
|
|
|
header: {
|
|
|
- 'token': token
|
|
|
+ token,
|
|
|
},
|
|
|
success: () => {
|
|
|
- console.log("连接成功");
|
|
|
+ console.log('连接成功')
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
- console.log("连接失败: ", err);
|
|
|
+ console.log('连接失败: ', err)
|
|
|
handleReconnect()
|
|
|
- }
|
|
|
+ },
|
|
|
})
|
|
|
|
|
|
// 监听 WebSocket 连接打开事件
|
|
|
socketTask.value.onOpen(() => {
|
|
|
- console.log('WebSocket 连接已打开');
|
|
|
+ console.log('WebSocket 连接已打开')
|
|
|
|
|
|
// 发送数据到服务器(心跳)
|
|
|
// socketTask.send({
|
|
|
@@ -369,95 +397,95 @@ function initWebSocket() {
|
|
|
|
|
|
// 监听 WebSocket 接收到消息事件
|
|
|
socketTask.value.onMessage((res) => {
|
|
|
- console.log('Received message:', res.data);
|
|
|
+ console.log('Received message:', res.data)
|
|
|
|
|
|
// 处理接收到的数据
|
|
|
- const lines = res.data.split(/\r?\n|\r/).filter(line => line.trim() !== '');
|
|
|
+ const lines = res.data.split(/\r?\n|\r/).filter((line) => line.trim() !== '')
|
|
|
const message = lines.reduce((obj, item) => {
|
|
|
- const [key, value] = item.split(/:(.*)/);
|
|
|
- obj[key] = key == "data" ? JSON.parse(value) : value;
|
|
|
- return obj;
|
|
|
- }, {});
|
|
|
- console.log('解析后的消息:', message);
|
|
|
+ const [key, value] = item.split(/:(.*)/)
|
|
|
+ obj[key] = key === 'data' ? JSON.parse(value) : value
|
|
|
+ return obj
|
|
|
+ }, {})
|
|
|
+ console.log('解析后的消息:', message)
|
|
|
|
|
|
handleWebsocketMessage(message)
|
|
|
})
|
|
|
|
|
|
// 监听 WebSocket 错误事件
|
|
|
socketTask.value.onError((err) => {
|
|
|
- console.error('WebSocket 发生错误', err);
|
|
|
- });
|
|
|
+ console.error('WebSocket 发生错误', err)
|
|
|
+ })
|
|
|
|
|
|
// 监听 WebSocket 连接关闭事件 (线上存在一分钟就断开重连的问题)
|
|
|
socketTask.value.onClose((res) => {
|
|
|
- console.log('WebSocket 连接已关闭:', res); // 异常断开 {code: 1006, reason: "abnormal closure"}
|
|
|
+ console.log('WebSocket 连接已关闭:', res) // 异常断开 {code: 1006, reason: "abnormal closure"}
|
|
|
if (res.code !== 1000) handleReconnect()
|
|
|
- });
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
-// 断开websocket连接
|
|
|
+// 断开websocket连接
|
|
|
function closeWebSocket() {
|
|
|
if (socketTask.value) {
|
|
|
socketTask.value.close({
|
|
|
success: () => {
|
|
|
- console.log('断开 WebSocket 连接成功');
|
|
|
+ console.log('断开 WebSocket 连接成功')
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
- console.error('断开 WebSocket 连接失败', err);
|
|
|
+ console.error('断开 WebSocket 连接失败', err)
|
|
|
},
|
|
|
- });
|
|
|
+ })
|
|
|
socketTask.value = null
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 处理重连机制
|
|
|
function handleReconnect() {
|
|
|
- console.log('reconnectAttempts.value: ', reconnectAttempts.value);
|
|
|
+ console.log('reconnectAttempts.value: ', reconnectAttempts.value)
|
|
|
if (isReconnecting.value || reconnectAttempts.value >= maxReconnectAttempts.value) {
|
|
|
- console.log('已达到最大重连次数,停止重连');
|
|
|
- return;
|
|
|
+ console.log('已达到最大重连次数,停止重连')
|
|
|
+ return
|
|
|
}
|
|
|
|
|
|
isReconnecting.value = true
|
|
|
reconnectAttempts.value = reconnectAttempts.value++
|
|
|
-
|
|
|
+
|
|
|
setTimeout(() => {
|
|
|
- initWebSocket();
|
|
|
- isReconnecting.value = false;
|
|
|
+ initWebSocket()
|
|
|
+ isReconnecting.value = false
|
|
|
}, reconnectInterval)
|
|
|
}
|
|
|
|
|
|
// 处理Websocket消息
|
|
|
function handleWebsocketMessage(message: any) {
|
|
|
switch (message.event) {
|
|
|
- case "job-update":
|
|
|
+ case 'job-update':
|
|
|
handleUpdate(message.data)
|
|
|
- break;
|
|
|
- case "not-verify":
|
|
|
+ break
|
|
|
+ case 'not-verify':
|
|
|
toast.warning('token失效, 请重新登录')
|
|
|
toLoginWait(1500)
|
|
|
- break;
|
|
|
+ break
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 处理更新数据
|
|
|
function handleUpdate(data) {
|
|
|
- if (data.id && dataList.value.findIndex(i => i.id == data.id) !== -1) {
|
|
|
+ if (data.id && dataList.value.findIndex((i) => i.id === data.id) !== -1) {
|
|
|
// 更新状态
|
|
|
- let target: any = dataList.value.find(i => i.id == data.id)
|
|
|
+ const target: any = dataList.value.find((i) => i.id === data.id)
|
|
|
target.jobStatus = String(data.jobStatus)
|
|
|
target.statusMsg = data.statusMsg
|
|
|
// 通知
|
|
|
switch (String(data.jobStatus)) {
|
|
|
- case "9":
|
|
|
+ case '9':
|
|
|
toast.success(`打印完成: ${data.title}`)
|
|
|
- break;
|
|
|
- case "6":
|
|
|
+ break
|
|
|
+ case '6':
|
|
|
toast.error(`打印错误: ${data.title}`)
|
|
|
- break;
|
|
|
+ break
|
|
|
default:
|
|
|
toast.info(`打印信息: ${data.title} ${getLabel(data.jobStatus, jobStatus.value)}`)
|
|
|
- break;
|
|
|
+ break
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -507,7 +535,7 @@ function handleUpdate(data) {
|
|
|
padding: 20rpx 20rpx 0;
|
|
|
}
|
|
|
.page-list {
|
|
|
- background-color: #F5F5F5;
|
|
|
+ background-color: #f5f5f5;
|
|
|
}
|
|
|
// 列表
|
|
|
.list-contain {
|
|
|
@@ -526,8 +554,8 @@ function handleUpdate(data) {
|
|
|
}
|
|
|
.info {
|
|
|
.sub-text {
|
|
|
- color: #666666;
|
|
|
display: flex;
|
|
|
+ color: #666666;
|
|
|
.value {
|
|
|
flex: 1;
|
|
|
}
|
|
|
@@ -535,9 +563,9 @@ function handleUpdate(data) {
|
|
|
}
|
|
|
}
|
|
|
.opt-box {
|
|
|
- border-top: 2rpx solid #EBEBEB;
|
|
|
padding: 20rpx;
|
|
|
margin-top: 0;
|
|
|
+ border-top: 2rpx solid #ebebeb;
|
|
|
}
|
|
|
}
|
|
|
}
|