opt:大屏打印功能-新增打印机管理页面支持多打印机

lms/nladmin-ui/src/views/system/printer/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
+      <crudOperation :permission="permission" />
+      <!--表单组件-->
+      <el-dialog
+        :close-on-click-modal="false"
+        :before-close="crud.cancelCU"
+        :visible.sync="crud.status.cu > 0"
+        :title="crud.status.title"
+        width="550px"
+      >
+        <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="100px">
+          <el-form-item label="打印机名称" prop="name">
+            <el-input v-model="form.name" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="IP地址" prop="ip">
+            <el-input v-model="form.ip" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="端口" prop="port">
+            <el-input v-model="form.port" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="备注" prop="description">
+            <el-input v-model="form.remark" style="width: 380px;" rows="5" type="textarea" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        </div>
+      </el-dialog>
+      <!--表格渲染-->
+      <el-table
+        ref="table"
+        v-loading="crud.loading"
+        :data="crud.data"
+        size="mini"
+        style="width: 100%;"
+        @selection-change="crud.selectionChangeHandler"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column v-if="false" prop="id" label="id" />
+        <el-table-column prop="name" label="打印机名称" min-width="130" show-overflow-tooltip />
+        <el-table-column prop="ip" label="IP地址" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="port" label="端口" min-width="270" show-overflow-tooltip />
+        <el-table-column prop="remark" label="备注" />
+        <el-table-column v-permission="['admin','param:edit','param:del']" label="操作" width="150px" align="center">
+          <template slot-scope="scope">
+            <udOperation
+              :data="scope.row"
+              :permission="permission"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <pagination />
+    </div>
+  </div>
+</template>
+
+<script>
+import crudPrinter from '@/views/system/printer/printer'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import crudOperation from '@crud/CRUD.operation'
+import udOperation from '@crud/UD.operation'
+import pagination from '@crud/Pagination'
+
+const defaultForm = {
+  ip: null,
+  name: null,
+  port: null,
+  remark: null
+}
+export default {
+  name: 'Printer',
+  components: { pagination, crudOperation, rrOperation, udOperation },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  cruds() {
+    return CRUD({ title: '打印机管理', url: 'api/printer', idField: 'id', sort: 'id,desc', crudMethod: { ...crudPrinter },
+      optShow: {
+        add: true,
+        edit: true,
+        del: true,
+        download: false,
+        reset: true
+      }
+    })
+  },
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'printer:add'],
+        edit: ['admin', 'printer:edit'],
+        del: ['admin', 'printer:del']
+      },
+
+      rules: {
+        ip: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        name: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        port: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    // this.webSocket()
+  },
+  methods: {
+    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
+    [CRUD.HOOK.beforeRefresh]() {
+      return true
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

lms/nladmin-ui/src/views/system/printer/printer.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/printer',
+    method: 'post',
+    data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: 'api/printer/',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/printer',
+    method: 'put',
+    data
+  })
+}
+
+export function getValueByCode(code) {
+  return request({
+    url: 'api/printer/getValueByCode/' + code,
+    method: 'post'
+  })
+}
+
+export default { add, edit, del, getValueByCode }

lms/nladmin-ui/src/views/wms/produceScreen/index.vue

@@ -404,6 +404,25 @@
       <div class="pop-h1">确认打印内容</div>
       <div class="filter-items">
         <div class="info-list" style="color: #F0F3F4">
+
+          <div class="info-item">
+            <div class="info-label">打印机</div>
+            <div class="info-value">
+              <el-row class="filter-wraper" style="margin-bottom: 0" type="flex" justify="space-between">
+                <el-col style="width: 100%;" class="select-wraper">
+                  <el-select v-model="printer" :popper-append-to-body="false" placeholder="请选择">
+                    <el-option
+                      v-for="item in printers"
+                      :key="item.name"
+                      :label="item.name"
+                      :value="item.name"
+                      class="option-wraper"
+                    />
+                  </el-select>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
           <!-- 订单号 竖向行 -->
           <div class="info-item">
             <div class="info-label">订单号</div>
@@ -449,6 +468,25 @@
       <div class="pop-h1">自定义打印</div>
       <div class="filter-items">
         <div class="info-list" style="color: #F0F3F4">
+          <!-- 订单号 竖向行 -->
+          <div class="info-item">
+            <div class="info-label">打印机</div>
+            <div class="info-value">
+                <el-row class="filter-wraper" style="margin-bottom: 0" type="flex" justify="space-between">
+                  <el-col style="width: 100%;" class="select-wraper">
+                    <el-select v-model="printer" :popper-append-to-body="false" placeholder="请选择">
+                      <el-option
+                        v-for="item in printers"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.name"
+                        class="option-wraper"
+                      />
+                    </el-select>
+                  </el-col>
+                </el-row>
+            </div>
+          </div>
           <!-- 订单号 竖向行 -->
           <div class="info-item">
             <div class="info-label">订单号</div>
@@ -493,7 +531,7 @@
 </template>
 
 <script>
-import crudProduceScreen from './produceScreen'
+import crudProduceScreen, {getAllPrinter, sendPrint} from './produceScreen'
 import {getAgvStatus} from '@/api/agv_alarm'
 // import crudProduceScreen from './mork'
 
@@ -527,6 +565,8 @@ export default {
       printShow: false,
       customPrintShow: false,
       printData: {},
+      printers: [],
+      printer: '',
       customPrintData: {
         order_code: '',
         create_time: new Date().toLocaleString() || '',
@@ -637,23 +677,43 @@ export default {
     },
     doPrint(row) {
       console.log(row)
+      this.getAllPrinter()
       this.printShow = true
       this.printData = row
       this.printData.username = JSON.parse(localStorage.getItem('screenData')).username || ''
     },
     confirmCustomPrint() {
       console.log(this.customPrintData)
+      this.sendPrint(this.customPrintData)
       this.customPrintShow = false
     },
     confirmPrint() {
       console.log(this.printData)
+      this.sendPrint(this.printData)
       this.printShow = false
       this.printData = {}
     },
     customPrint() {
+      this.getAllPrinter()
       this.customPrintData.create_time = new Date().toLocaleString()
       this.customPrintShow = true
     },
+    sendPrint(data) {
+      console.log(this.printer)
+      const printer = this.printers.filter(item => item.name === this.printer)
+      console.log(printer)
+      data.ip = printer[0].ip
+      data.port = printer[0].port
+      sendPrint(data).then(res => {
+        console.log(res)
+      })
+    },
+    getAllPrinter() {
+      getAllPrinter().then(res => {
+        console.log(res)
+        this.printers = res
+      })
+    },
     handleCurrentChange(val) {
       if (val) {
         if (val.is_lock === '1') { // 如果点击的是占用状态的行，重置相关数据
@@ -1165,6 +1225,7 @@ export default {
   display: flex;
   align-items: flex-start;
   gap: 12px;
+  align-items: center;
 }
 
 /* 左侧标签区 - 固定宽度，整洁 */

lms/nladmin-ui/src/views/wms/produceScreen/produceScreen.js

@@ -143,6 +143,21 @@ export function getExceptionMessage(deviceCode) {
     method: 'get'
   })
 }
+//17.打印标签
+export function sendPrint(data) {
+  return request({
+    url: 'api/handheld/print',
+    method: 'post',
+    data
+  })
+}
+//18.获取所有打印机
+export function getAllPrinter() {
+  return request({
+    url: 'api/printer/all',
+    method: 'get'
+  })
+}
 
 export default {
   authLogin, getUserOrDevice, deviceInLogin, regionOrder, fabMaterial, callMater, callEmp, fabOrders, sendMater, sendVehicle, getPointVehicle, loginOut, selectMaterialAndJpg, selectCacheTask, deletevehiclemessage, getExceptionMessage