dengmy 1 рік тому
батько
коміт
ff80cb2094
5 змінених файлів з 659 додано та 521 видалено
  1. 1 1
      env/.env
  2. 1 1
      src/manifest.json
  3. 8 8
      src/pages/personal/setting.vue
  4. 502 392
      src/pages/print/index.vue
  5. 147 119
      src/pages/print/job.vue

+ 1 - 1
env/.env

@@ -2,7 +2,7 @@ VITE_APP_TITLE = 'printer-miniapp'
 VITE_APP_PORT = 9000
 
 VITE_UNI_APPID = '__UNI__DD53B81'
-VITE_WX_APPID = 'wx3b8d4805a9249482'
+VITE_WX_APPID = 'wx46467fc3f5573a68'
 
 # h5部署网站的base,配置到 manifest.config.ts 里的 h5.router.base
 VITE_APP_PUBLIC_BASE = /printer-h5/

+ 1 - 1
src/manifest.json

@@ -83,7 +83,7 @@
   },
   "quickapp": {},
   "mp-weixin": {
-    "appid": "wx3b8d4805a9249482",
+    "appid": "wx46467fc3f5573a68",
     "setting": {
       "urlCheck": false
     },

+ 8 - 8
src/pages/personal/setting.vue

@@ -8,7 +8,7 @@
 </route>
 <template>
   <view class="page-form">
-    <view class="full-btn">登录其他账号</view>
+    <view class="full-btn" @click="handleLogout">登录其他账号</view>
     <view class="full-btn" @click="handleLogout">退出登录</view>
   </view>
 </template>
@@ -30,23 +30,23 @@ function handleLogout() {
   toast.success('退出登录成功')
   toLoginWait(1500)
 }
-
-onLoad((option) => {
-})
 </script>
 
 <style lang="scss" scoped>
 .page-form {
-  padding: 20rxp;
+  min-height: calc(100vh - 40rpx);
+  padding: 20rpx;
+  background-color: #f1f1f1;
 }
 .full-btn {
   width: 100%;
-  text-align: center;
-  font-size: 28rpx;
-  line-height: 40rpx;
   padding: 30rpx 0;
   margin-bottom: 20rpx;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  text-align: center;
   background-color: #fff;
+  border-bottom: 1px solid #f1f1f1;
   border-radius: 20rpx;
 }
 </style>

Різницю між файлами не показано, бо вона завелика
+ 502 - 392
src/pages/print/index.vue


+ 147 - 119
src/pages/print/job.vue

@@ -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;
     }
   }
 }