新增打印队列页面

src/api/PrintQueueApi.js

@@ -0,0 +1,24 @@
+import BaseCurdApi from './BaseCurdApi'
+
+class PrintQueueApi extends BaseCurdApi {
+    cancelPrint = (id) => this.api({
+      url: `${this.basePath}/cancel/${id}`,
+      method: 'POST'
+    })
+
+    pausePrint = (id) => this.api({
+      url: `${this.basePath}/pause/${id}`,
+      method: 'POST'
+    })
+
+    continuePrint = (id) => this.api({
+      url: `${this.basePath}/continue/${id}`,
+      method: 'POST'
+    })
+
+    constructor () {
+      super('/print/queue')
+    }
+}
+
+export default new PrintQueueApi()

src/entries/PrintQueue.js

@@ -0,0 +1,32 @@
+import printQueueApi from '@@/api/PrintQueueApi'
+import BaseCurdEntry from './BaseCurdEntry'
+
+export default class PrintQueue extends BaseCurdEntry {
+  id
+
+  orderNo
+
+  materialName
+
+  tagTypeName
+
+  providerName
+
+  serialNumberRange
+  get formatSerialNumberRange () {
+    const { serialNumberRange } = this
+    return serialNumberRange ? serialNumberRange.join('-') : ''
+  }
+
+  number
+
+  status
+
+  static get $$name () {
+    return 'PrintQueue'
+  }
+
+  static get $$api () {
+    return printQueueApi
+  }
+}

src/mock/index.js

@@ -186,4 +186,21 @@ Mock.mock(/\/tag\/code\/page/, 'post', {
     }]
   }
 })
+
+Mock.mock(/\/print\/queue\/page/, 'post', {
+  type: 'success',
+  data: {
+    'count|10-40': 1,
+    'list|1-20': [{
+      id: '1804064389245816833',
+      orderNo: '1804064389245816833',
+      'materielName|1': ['低压熔断器', '螺栓垫圈'],
+      serialNumberRange: ['0000001', '000800'],
+      'providerName|1': ['人民电器集团有限公司', '上海东生供用电器材厂', '上海辉电电力设备工程有限公司'],
+      'tagTypeName|1': ['高性能不干胶标签', '柔性抗金属标签', '扎带标签'],
+      number: 123,
+      'status|1': [0, 1, 2, 3, 4]
+    }]
+  }
+})
 export default Mock

src/router/index.js

@@ -91,6 +91,14 @@ export default new Router({
           permission: 'isAuthenticated'
         },
         component: () => import('@@/views/TagDistribute.vue')
+      }, {
+        path: '/page-in-src/print-queue',
+        name: 'PrintQueue',
+        meta: {
+          title: '打印队列',
+          permission: 'isAuthenticated'
+        },
+        component: () => import('@@/views/PrintQueue.vue')
       }]
     }
   ]

src/views/PrintQueue.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="wrapper flex column layout-gap">
+
+      <el-card
+        shadow="hover"
+        class="z-card flex column flex-1 fit-size"
+      >
+        <div class="wrapper flex column layout-gap">
+
+          <!-- <div class="flex column flex-1 fit-size"></div> -->
+          <div class="flex-1 fit-size">
+            <el-table
+              ref="table"
+              :data="list"
+              stripe
+              border
+              highlight-current-row
+              height="100%"
+              size="small"
+              class="custom-el-table-style"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="60"
+                align="center"
+                fixed
+              ></el-table-column>
+              <el-table-column
+                label="任务编号"
+                prop="id"
+                align="center"
+                min-width="160"
+                header-align="center"
+                fixed
+              ></el-table-column>
+              <el-table-column
+                label="申请订单编号"
+                prop="orderNo"
+                min-width="160"
+                header-align="center"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                label="物料名称"
+                prop="materielName"
+                min-width="130"
+                header-align="center"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                label="标签类型"
+                prop="tagTypeName"
+                min-width="130"
+                header-align="center"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                label="供应商名称"
+                prop="providerName"
+                min-width="200"
+                header-align="center"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                label="流水号范围"
+                prop="formatSerialNumberRange"
+                min-width="120"
+                header-align="center"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                label="打印数量"
+                prop="number"
+                min-width="80"
+                header-align="center"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                label="打印状态"
+                prop="status"
+                min-width="100"
+                header-align="center"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                label="操作栏"
+                min-width="150"
+                header-align="center"
+                align="center"
+              >
+                <template v-slot="{ row }">
+                  <div class="flex center layout-gap">
+                    <!-- 0=打印完成 1= 等待打印 2=正在打印 3=暂停 4=打印失败-->
+                    <edit-button :data="row" icon="el-icon-circle-close" :on-click="onCancelPrintBtnClick" :disabled="row.status === 0">取消</edit-button>
+                    <edit-button v-if="row.status === 3" :data="row" icon="el-icon-video-play" :on-click="onContinuePrintBtnClick">继续</edit-button>
+                    <edit-button v-else :disabled="row.status !== 2" :data="row" icon="el-icon-video-pause" :on-click="onPausePrintBtnClick">暂停</edit-button>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+
+          <my-pagination
+            :total="total"
+            :pagination="pagination"
+            @current-change="currentPageNoChange"
+          />
+        </div>
+      </el-card>
+    </div>
+    </template>
+
+<script>
+import BaseCurdList from '@@/utils/BaseCurdList'
+import PrintQueue from '@@/entries/PrintQueue'
+
+export default {
+  name: 'PrintQueue',
+  extends: BaseCurdList(PrintQueue),
+  data () {
+    return {
+      timerId: null
+    }
+  },
+  mounted () {
+    this.startTimer()
+  },
+  beforeDestroy () {
+    this.clearTimer()
+  },
+  methods: {
+    startTimer () {
+      this.timerId = setInterval(() => {
+        this.loadList()
+      }, 10000)
+    },
+
+    clearTimer () {
+      if (this.timerId) {
+        clearInterval(this.timerId)
+        this.timerId = null
+      }
+    },
+
+    onCancelPrintBtnClick (data) {
+      this.$$request(this.$$api.cancelPrint, data[this.$$Target.$$idProp]).then(data => {
+        this.loadList()
+      }).catch(console.error).finally(() => {})
+    },
+    onPausePrintBtnClick (data) {
+      this.$$request(this.$$api.pausePrint, data[this.$$Target.$$idProp]).then(data => {
+        this.loadList()
+      }).catch(console.error).finally(() => {})
+    },
+    onContinuePrintBtnClick (data) {
+      this.$$request(this.$$api.continuePrint, data[this.$$Target.$$idProp]).then(data => {
+        this.loadList()
+      }).catch(console.error).finally(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>