print-label.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <div>
  3. <el-dialog
  4. title="标签打印"
  5. width="40%"
  6. :close-on-click-modal="false"
  7. :visible.sync="visible">
  8. <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
  9. <el-collapse v-model="activeNames">
  10. <el-collapse-item title="物料信息:" name="1">
  11. <el-form-item label="编码" prop="id">
  12. <el-input v-model="dataForm.id" disabled placeholder="编码不可修改"></el-input>
  13. </el-form-item>
  14. <el-form-item label="名称" prop="materialName">
  15. <el-input v-model="dataForm.materialName" placeholder="名称"></el-input>
  16. </el-form-item>
  17. <el-form-item label="图号" prop="mapNumber">
  18. <el-input v-model="dataForm.mapNumber" placeholder="图号"></el-input>
  19. </el-form-item>
  20. <el-form-item label="规格" prop="productSpec">
  21. <el-input v-model="dataForm.productSpec" placeholder="规格"></el-input>
  22. </el-form-item>
  23. <el-form-item label="批次" prop="batchNumber">
  24. <el-input v-model="dataForm.batchNumber" placeholder="批次"></el-input>
  25. </el-form-item>
  26. <el-form-item label="数量" prop="cnt">
  27. <el-input-number v-model="dataForm.cnt" :min="1" label="数量"></el-input-number>
  28. </el-form-item>
  29. </el-collapse-item>
  30. <el-collapse-item title="打印设置:" name="2">
  31. <el-row>
  32. <el-form-item label="通信模式">
  33. <el-select v-model="conModel" placeholder="请选择通信模式" @change="modelChange">
  34. <el-option v-for="item in models" :key="item.value" :disabled="item.disabled"
  35. :label="item.label" :value="item.value">
  36. </el-option>
  37. </el-select>
  38. </el-form-item>
  39. </el-row>
  40. <el-row>
  41. <el-form-item label="端口信息" v-show="isPortModel">
  42. <el-col style="width: 300px">
  43. <el-input type="text" placeholder="请选择端口" :disable="true" v-model="form.selectName" :readonly="true" />
  44. </el-col>
  45. <el-col style="width: 100px;margin-left: 20px;">
  46. <el-button type="primary" @click="choicePort">选择端口</el-button>
  47. </el-col>
  48. </el-form-item>
  49. </el-row>
  50. </el-collapse-item>
  51. </el-collapse>
  52. </el-form>
  53. <span slot="footer">
  54. <el-button @click="onChose">取消</el-button>
  55. <el-button type="primary" @click="dataFormSubmit()" v-reClick>确定</el-button>
  56. </span>
  57. </el-dialog>
  58. </div>
  59. </template>
  60. <script>
  61. import {createNew} from '@/utils/print-js/tsc'
  62. import {getDataView} from '@/utils/print-js/function'
  63. export default {
  64. name: 'print-label',
  65. data () {
  66. return {
  67. visible: false,
  68. activeNames: ['1', '2'],
  69. dataForm: { },
  70. conModel: 'USB',
  71. isPortModel: true,
  72. connected: false,
  73. /** 网口配置 */
  74. websock: null,
  75. /** USB配置 */
  76. webusb: null,
  77. /** 串口配置 */
  78. webserial: null,
  79. form: {
  80. selectName: '未连接',
  81. socketAddr: '127.0.0.1',
  82. socketPort: 8003,
  83. printData: ''
  84. },
  85. models: [{ 'value': 'USB', 'label': 'USB', 'disabled': false }],
  86. dataRule: { }
  87. }
  88. },
  89. methods: {
  90. async init (row) {
  91. this.visible = true
  92. this.dataForm = {
  93. ...row,
  94. productSpec: row.productSpec ? row.productSpec : '/',
  95. batchNumber: row.batchNumber ? row.batchNumber : '/',
  96. mapNumber: row.mapNumber ? row.mapNumber : '/',
  97. cnt: row.cnt ? row.cnt : 0
  98. }
  99. // this.models.push({ 'value': 'USB', 'label': 'USB', 'disabled': false })
  100. },
  101. validateField (type) {
  102. this.$refs.dataForm.validateField(type)
  103. },
  104. onChose () {
  105. this.visible = false
  106. this.$emit('onChose')
  107. },
  108. async modelChange (value) {
  109. const that = this
  110. if (value === 'USB') {
  111. that.isPortModel = true
  112. // 添加事件监听
  113. await navigator.usb.addEventListener('connect', event => {
  114. // 重新连接成功
  115. this.webusb = event.device
  116. that.form.selectName = event.device.productName
  117. that.$message.success('USB连接成功')
  118. that.openWebUsb()
  119. })
  120. await navigator.usb.addEventListener('disconnect', event => {
  121. // 断开连接成功
  122. that.form.selectName = '未连接'
  123. that.connected = false
  124. that.$message.error('USB连接断开')
  125. })
  126. await navigator.usb.getDevices().then(devices => {
  127. if (devices.length > 0) {
  128. // 找到前面选择的一个USB
  129. that.webusb = devices[0]
  130. that.form.selectName = devices[0].productName
  131. // 打开usb
  132. that.openWebUsb()
  133. }
  134. })
  135. } else {
  136. this.isPortModel = false
  137. }
  138. },
  139. async openWebUsb () {
  140. await this.webusb.open()
  141. await this.webusb.selectConfiguration(1)
  142. await this.webusb.claimInterface(0)
  143. console.log('USB准备就绪,可以进行读写')
  144. this.connected = true
  145. },
  146. async choicePort () {
  147. const that = this
  148. if (that.conModel === 'USB') {
  149. await navigator.usb.requestDevice({ filters: [] })
  150. .then(usb => {
  151. // 业务逻辑处理
  152. that.webusb = usb
  153. that.form.selectName = usb.productName
  154. that.openWebUsb()
  155. }).catch(error => {
  156. console.error('choicePort:' + error)
  157. })
  158. } else {
  159. that.$message.error('请选择通信模式')
  160. }
  161. },
  162. async sendPrint () {
  163. // 标签模式
  164. const command = createNew()
  165. // console.log(command)
  166. command.setSize(43, 30)
  167. command.setGap(20, 0)
  168. command.setCls()
  169. let start = 5
  170. let len = 28
  171. // command.setText(50, 10, "TSS24.BF2", 0, 0, "打印测试") // 文本
  172. command.setText(50, start, 'TSS24.BF2', 0, 0, '名称:' + this.dataForm.materialName) // 文本
  173. command.setText(50, start + len, 'TSS24.BF2', 0, 0, '图号:' + this.dataForm.mapNumber) // 文本
  174. command.setText(50, start + 2 * len, 'TSS24.BF2', 0, 0, '规格:' + this.dataForm.productSpec) // 文本
  175. command.setText(50, start + 3 * len, 'TSS24.BF2', 0, 0, '批次:' + this.dataForm.batchNumber) // 文本
  176. command.setText(50, start + 4 * len, 'TSS24.BF2', 0, 0, '数量:' + this.dataForm.cnt) // 文本
  177. // command.setText(50, 130, "TSS24.BF2", 0, 0, "检 字 号:101029") // 文本
  178. // command.setText(50, 180, "TSS24.BF2", 0, 0, "原材料炉批号:YXL-83829") // 文本
  179. // command.setText(50, 170, "TSS24.BF2", 0, 0, "备注:这是一个备注") // 文本
  180. // command.setBar(50, start + 5 * len, '128', 64, 1, 2, 4, this.dataForm.id) // 条形码
  181. command.setQR(50, start + 5 * len, 'H', 3, 'A', this.dataForm.id.toString()) // 二维码
  182. command.setPagePrint()
  183. await this.writePrintData(getDataView(command.getData()))
  184. },
  185. async writePrintData (encodedCmds) {
  186. if (this.conModel === 'USB') {
  187. try {
  188. await this.webusb.transferOut(
  189. this.webusb.configuration.interfaces[0].alternate.endpoints.find(obj => obj.direction === 'out').endpointNumber, encodedCmds
  190. )
  191. } catch (error) {
  192. this.$message.error('发送失败,请确认是否正常链接打印机')
  193. // 如果任何操作失败,我们可以认为设备连接可能存在问题
  194. console.error('sendPrint:', error)
  195. }
  196. }
  197. this.$message.success('发送打印成功')
  198. },
  199. // 表单提交
  200. dataFormSubmit () {
  201. this.$refs['dataForm'].validate((valid) => {
  202. if (valid) {
  203. // 打印
  204. this.sendPrint()
  205. this.onChose()
  206. this.$emit('addOne', this.dataForm)
  207. }
  208. })
  209. }
  210. }
  211. }
  212. </script>
  213. <style scoped>
  214. </style>