10 changed files with 971 additions and 462 deletions
-
9public/static/config.js
-
15src/api/home/alarm/index.js
-
27src/main.js
-
523src/views/archivesManage/caseManage/caseList/index-oldPrint.vue
-
68src/views/archivesManage/caseManage/caseList/index.vue
-
234src/views/archivesManage/caseManage/caseList/module/print.vue
-
10src/views/components/WarehouseWarning.vue
-
4src/views/components/echarts/lendAcross.vue
-
485src/views/environmentalScreen/index.vue
-
58src/views/storeManage/warehouse3D/archivesStorage/index.vue
@ -1,6 +1,11 @@ |
|||||
window.g = { |
window.g = { |
||||
AXIOS_TIMEOUT: 10000, |
AXIOS_TIMEOUT: 10000, |
||||
ApiUrl: 'http://192.168.99.100:7080', // 配置服务器地址
|
|
||||
|
ApiUrl: 'http://192.168.99.72:7080', // 配置服务器地址
|
||||
ApiWebRtcServerUrl: '127.0.0.1:8000', // 配置监控视频服务器地址
|
ApiWebRtcServerUrl: '127.0.0.1:8000', // 配置监控视频服务器地址
|
||||
sDevID:'D003' // 桌面式RFID读写器
|
|
||||
|
sDevID:'D003', // 桌面式RFID读写器,
|
||||
|
ZMINConfig:{ // 标签打印机
|
||||
|
ip:'127.0.0.1', |
||||
|
port:'1808', |
||||
|
filePath:'/home/it0/zmin/新标签01.lsf' |
||||
|
} |
||||
} |
} |
||||
@ -0,0 +1,523 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container"> |
||||
|
<crudOperation :permission="permission"> |
||||
|
<template v-slot:right> |
||||
|
<el-button icon="el-icon-delete" size="mini" :disabled="!crud.selections.length" @click="handleDel(crud.selections)">删除</el-button> |
||||
|
<el-select v-model="stateType" clearable size="small" class="filter-item" style="width: 100px; margin:0 0 0 10px;" @change="crud.toQuery"> |
||||
|
<el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
<el-input v-model="crud.query[inputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;margin-left:10px" class="input-prepend filter-item" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery"> |
||||
|
<el-select slot="prepend" v-model="inputSelect" style="width: 90px"> |
||||
|
<el-option v-for="item in queryOptions" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-input> |
||||
|
<rrOperation /> |
||||
|
</template> |
||||
|
<template v-slot:rightButtonGroup> |
||||
|
<div class="archives-handler-btn"> |
||||
|
<el-button :loading="codeLoading" class="warehousing-btn iconfont" type="primary" :disabled="crud.selections.length === 0" @click="onPrint(crud.selections)"><svg-icon icon-class="print" class="svg-arc-style" />批量打印条形码</el-button> |
||||
|
<el-button :loading="contentLoading" class="part-btn iconfont" type="primary" :disabled="crud.selections.length !== 1" @click="getPrintData"><svg-icon icon-class="print" class="svg-arc-style" />打印目录</el-button> |
||||
|
<el-button class="packing-btn iconfont icon-chaihe-fanbai" type="primary" :disabled="crud.selections.length === 0" @click="openCase(crud.selections)">拆盒</el-button> |
||||
|
<el-button class="binding-btn iconfont icon-bangding-fanbai" type="primary" :disabled="crud.selections.length !== 1" @click="bindingTag(crud.selections)">绑定标签</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
</div> |
||||
|
|
||||
|
<!-- <div class="app-container container-wrap"> --> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<!--表格渲染--> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
v-loading="crud.loading" |
||||
|
:cell-class-name="cell" |
||||
|
:data="crud.data" |
||||
|
style="width: 100%;" |
||||
|
height="calc(100vh - 375px)" |
||||
|
@row-dblclick="handleDbClick" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
@row-click="clickRowHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" align="center" /> |
||||
|
<el-table-column type="index" label="序号" width="55" align="center" /> |
||||
|
<el-table-column prop="storageType" label="入库" align="center" min-width="56"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span class="clear" style="width:56px">{{ scope.row.storageType | storageTypeStatus }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="depositNum" label="已装" align="center" min-width="56" /> |
||||
|
<el-table-column prop="caseName" label="盒名称" :show-overflow-tooltip="true" align="center" min-width="150" /> |
||||
|
<el-table-column prop="tid" label="TID" align="center" min-width="180" /> |
||||
|
<el-table-column prop="barcode" label="条形码" align="center" min-width="120" /> |
||||
|
<el-table-column label="存放位置" align="center" min-width="300"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="!scope.row.folderLocationDetails">-</span> |
||||
|
<span v-else> |
||||
|
<el-tag effect="dark">{{ scope.row.folderLocationDetails }}</el-tag> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="update_time" width="175" label="操作时间" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.update_time | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--新增编辑表单渲染--> |
||||
|
<eForm /> |
||||
|
<binding-tag-dlg ref="bindingTag" :binding-id="crud.selections[0] && crud.selections[0].id" :binding-type="2" binding-txt="档案盒" @refresh="crud.refresh" /> |
||||
|
<open-case-dlg ref="openCase" @refresh="crud.refresh" /> |
||||
|
<pagination /> |
||||
|
<!-- </div> --> |
||||
|
<!-- 档案盒详情 --> |
||||
|
<detailDialog ref="detailDom" /> |
||||
|
<!-- 删除弹框 --> |
||||
|
<el-dialog title="确认删除" :visible.sync="deleteVisible"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<p><span style="color:#fff;">确定删除当前档案盒吗？</span></p> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleDelConfirm(crud.selections)">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<!-- 待入/已入 禁拆盒 --> |
||||
|
<el-dialog title="提示" :visible.sync="msgVisible"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<p><span style="color:#fff;font-size:16px">当前档案盒已入库，请先出库</span></p> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<div v-show="isHidden" id="print" ref="printId" class="intoExamine"> |
||||
|
<h3 style="text-align: center; margin:20px 0; font-size: 24px;">归档文件目录</h3> |
||||
|
<el-table :data="printData" border> |
||||
|
<el-table-column type="index" label="序号" width="55" align="center" /> |
||||
|
<!-- <el-table-column label="件号" prop="pieceNo" width="55" align="center" /> --> |
||||
|
<el-table-column label="档号" prop="archiveNo" align="center" width="180px" /> |
||||
|
<el-table-column label="文号" prop="docNo" align="center" width="160" /> |
||||
|
<el-table-column label="责任者" prop="responsibleby" align="center" /> |
||||
|
<el-table-column label="题名" prop="maintitle" align="center" width="200px" /> |
||||
|
<el-table-column label="日期" prop="create_time" align="center" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ parseTime(scope.row.create_time, '{y}-{m}-{d}') }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="密级" prop="securityClass" align="center" /> |
||||
|
<el-table-column label="页数" prop="pageQty" align="center" width="60" /> |
||||
|
<el-table-column label="备注" prop="remarks" align="center" width="100px" /> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<div ref="printDiv" style="display: none;"> |
||||
|
<div v-for="item in selectedRows" :key="item.barcode" style="page-break-after:always; margin-top: 8px; margin-left: 20px;"> |
||||
|
<div> |
||||
|
<img :src="item.barcode | creatBarCode(item.barcode, item.title)" style="border: 1px solid #000; width: 160px;"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<iframe ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import caseCrudMethod from '@/api/archivesManage/caseManage' |
||||
|
import { del, printCaseBarcode } from '@/api/archivesManage/caseManage' |
||||
|
import BindingTagDlg from '@/views/components/BindingTagDlg' |
||||
|
import eForm from './module/form' |
||||
|
import openCaseDlg from './module/openCaseDlg' |
||||
|
import CRUD, { presenter, crud } from '@crud/crud' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import detailDialog from './module/detailDialog' |
||||
|
|
||||
|
import JsBarcode from 'jsbarcode' |
||||
|
import html2canvas from 'html2canvas' |
||||
|
import printJS from 'print-js' |
||||
|
export default { |
||||
|
name: 'CaseList', |
||||
|
filters: { |
||||
|
storageTypeStatus(val) { |
||||
|
switch (val) { |
||||
|
case 0: |
||||
|
return '未入' |
||||
|
case 1: |
||||
|
return '待入' |
||||
|
case 2: |
||||
|
return '已入' |
||||
|
case 3: |
||||
|
return '待出' |
||||
|
} |
||||
|
}, |
||||
|
creatBarCode(barCodeData, codePrintData, barCodeText) { |
||||
|
// console.log('触发条码生成事件') |
||||
|
console.log('codePrintData', codePrintData) |
||||
|
console.log('barCodeText', barCodeText) |
||||
|
const canvas = document.createElement('canvas') |
||||
|
// 'fantasy', // 设置文本的字体 |
||||
|
JsBarcode(canvas, barCodeData, { |
||||
|
format: 'CODE128', |
||||
|
displayValue: true, |
||||
|
text: barCodeText, |
||||
|
fontOptions: 'bold', // 使文字加粗体或变斜体 |
||||
|
font: 'arial', |
||||
|
margin: 15, |
||||
|
height: 120, |
||||
|
width: 5, |
||||
|
fontSize: 36, |
||||
|
textMargin: 6, |
||||
|
textPosition: 'top' |
||||
|
}) |
||||
|
return canvas.toDataURL('image/png') |
||||
|
} |
||||
|
}, |
||||
|
components: { eForm, crudOperation, rrOperation, pagination, BindingTagDlg, openCaseDlg, detailDialog }, |
||||
|
mixins: [presenter(), crud()], |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
url: 'api/case/initCaseList', |
||||
|
crudMethod: caseCrudMethod, |
||||
|
title: '档案盒', |
||||
|
optShow: { |
||||
|
add: true, |
||||
|
edit: true, |
||||
|
del: false, |
||||
|
download: false, |
||||
|
group: false |
||||
|
} |
||||
|
// sort: ['case_name,asc'] |
||||
|
}) |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
codeLoading: false, |
||||
|
selectedRows: [], |
||||
|
codePrintData: [], |
||||
|
isHidden: false, |
||||
|
contentLoading: false, |
||||
|
printData: [], |
||||
|
permission: { |
||||
|
add: ['admin', 'caseManage:add'], |
||||
|
edit: ['admin', 'caseManage:edit'], |
||||
|
del: ['admin', 'caseManage:del'] |
||||
|
}, |
||||
|
msgVisible: false, |
||||
|
deleteVisible: false, |
||||
|
verifyDialVisible: false, |
||||
|
stateType: '全部', |
||||
|
stateOptions: [ |
||||
|
{ |
||||
|
label: '全部', |
||||
|
value: '全部' |
||||
|
}, |
||||
|
{ |
||||
|
label: '未入', |
||||
|
value: '0' |
||||
|
}, |
||||
|
{ |
||||
|
label: '待入', |
||||
|
value: '1' |
||||
|
}, |
||||
|
{ |
||||
|
label: '已入', |
||||
|
value: '2' |
||||
|
}, |
||||
|
{ |
||||
|
label: '待出', |
||||
|
value: '3' |
||||
|
} |
||||
|
], |
||||
|
inputSelect: 'caseName', |
||||
|
queryOptions: [ |
||||
|
{ |
||||
|
label: '盒名称', |
||||
|
value: 'caseName' |
||||
|
}, |
||||
|
{ |
||||
|
label: 'TID', |
||||
|
value: 'tid' |
||||
|
}, |
||||
|
{ |
||||
|
label: '条形码', |
||||
|
value: 'barcode' |
||||
|
}, |
||||
|
{ |
||||
|
label: '地址码', |
||||
|
value: 'folderLocation' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
// 打印条码 |
||||
|
onPrint(data) { |
||||
|
this.codeLoading = true |
||||
|
const params = data.map(item => { |
||||
|
return item.id |
||||
|
}) |
||||
|
printCaseBarcode(params).then(res => { |
||||
|
if (res && res.length !== 0) { |
||||
|
this.selectedRows = res |
||||
|
} else { |
||||
|
this.selectedRows = [] |
||||
|
this.$message({ |
||||
|
message: '无相关可打印条码数据!', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
} |
||||
|
this.$nextTick(() => { |
||||
|
this.codePrintData.count = this.selectedRows.length |
||||
|
var printIframe = this.$refs.printIframe |
||||
|
var html = this.$refs.printDiv.innerHTML |
||||
|
printIframe.setAttribute('srcdoc', html) |
||||
|
printIframe.onload = function() { |
||||
|
console.log(printIframe.contentWindow) |
||||
|
// 去掉iframe里面的dom的body的padding margin的默认数值 |
||||
|
printIframe.contentWindow.document.body.style.padding = '0px' |
||||
|
printIframe.contentWindow.document.body.style.margin = '0px' |
||||
|
// 开始打印 |
||||
|
printIframe.contentWindow.focus() |
||||
|
printIframe.contentWindow.print() |
||||
|
} |
||||
|
}) |
||||
|
this.crud.refresh() |
||||
|
this.codeLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 打印目录 |
||||
|
getPrintData() { |
||||
|
this.contentLoading = true |
||||
|
const params = { |
||||
|
caseId: this.crud.selections[0].id |
||||
|
} |
||||
|
this.crud.crudMethod.findInCase(params).then(res => { |
||||
|
if (res) { |
||||
|
this.printData = res.archives |
||||
|
} |
||||
|
this.isHidden = true |
||||
|
this.$nextTick(() => { |
||||
|
this.printFn() |
||||
|
this.isHidden = false |
||||
|
}) |
||||
|
this.contentLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
printFn() { |
||||
|
const printContent = this.$refs.printId |
||||
|
// 获取dom 宽度 高度 |
||||
|
const width = printContent.clientWidth |
||||
|
const height = printContent.clientHeight |
||||
|
// 创建一个canvas节点 |
||||
|
const canvas = document.createElement('canvas') |
||||
|
|
||||
|
const scale = 4 // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。 |
||||
|
canvas.width = width * scale // 定义canvas 宽度 * 缩放 |
||||
|
canvas.height = height * scale // 定义canvas高度 *缩放 |
||||
|
canvas.style.width = width * scale + 'px' |
||||
|
canvas.style.height = height * scale + 'px' |
||||
|
canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale |
||||
|
|
||||
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取滚动轴滚动的长度 |
||||
|
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft // 获取水平滚动轴的长度 |
||||
|
|
||||
|
html2canvas(printContent, { |
||||
|
canvas, |
||||
|
backgroundColor: null, |
||||
|
useCORS: true, |
||||
|
windowHeight: document.body.scrollHeight, |
||||
|
scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全 |
||||
|
scrollY: -scrollTop |
||||
|
}).then((canvas) => { |
||||
|
const url = canvas.toDataURL('image/png') |
||||
|
printJS({ |
||||
|
printable: url, |
||||
|
type: 'image', |
||||
|
documentTitle: '', // 标题 |
||||
|
style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}' // 去除页眉页脚 |
||||
|
}) |
||||
|
}).catch(err => { |
||||
|
console.error(err) |
||||
|
}) |
||||
|
}, |
||||
|
// 获取数据前的处理 |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
this.crud.query.storageType = null |
||||
|
if (this.stateType === '全部') { |
||||
|
this.crud.query.storageType = null |
||||
|
} else { |
||||
|
this.crud.query.storageType = this.stateType |
||||
|
} |
||||
|
// this.crud.query.caseName = null |
||||
|
// this.crud.query.tid = null |
||||
|
// this.crud.query.barcode = null |
||||
|
// this.crud.query[this.caseLogSelect] = this.caseQuery[this.caseLogSelect] |
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
bindingTag(data) { |
||||
|
if (data[0].tid) { |
||||
|
this.$refs.bindingTag.isBinding = true |
||||
|
this.$refs.bindingTag.tidCode = data[0].tid |
||||
|
} |
||||
|
this.$refs.bindingTag.bindingVisible = true |
||||
|
}, |
||||
|
openCase(data) { |
||||
|
const isBool = data.every(item => item.storageType === 0) |
||||
|
if (isBool) { |
||||
|
const bool = data.some(item => item.depositNum === 0) |
||||
|
if (bool) { |
||||
|
this.$message({ |
||||
|
message: '存在空档案盒不可拆盒!', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
} else { |
||||
|
this.$refs.openCase.openCaseVisible = true |
||||
|
this.$refs.openCase.caseData = data |
||||
|
} |
||||
|
} else { |
||||
|
this.msgVisible = true |
||||
|
} |
||||
|
}, |
||||
|
// 表格双击 |
||||
|
handleDbClick(row) { |
||||
|
this.$refs.detailDom.rowData = row |
||||
|
const params = { |
||||
|
caseId: row.id |
||||
|
} |
||||
|
this.crud.crudMethod.findInCase(params).then(res => { |
||||
|
if (res) { |
||||
|
this.$refs.detailDom.tableData = res.archives |
||||
|
} |
||||
|
}) |
||||
|
this.$refs.detailDom.detailVisible = true |
||||
|
}, |
||||
|
// 单元格样式 |
||||
|
cell({ row, columnIndex }) { |
||||
|
if (row.storageType === 0) { // 未入 |
||||
|
return 'fail-clear' |
||||
|
} else if (row.storageType === 1) { // 待入 |
||||
|
return 'no-clear' |
||||
|
} else if (row.storageType === 2) { // 已入 |
||||
|
return 'have-clear' |
||||
|
} else if (row.storageType === 3) { // 待出 |
||||
|
return 'other-clear' |
||||
|
} |
||||
|
}, |
||||
|
// 删除 |
||||
|
handleDel(data) { |
||||
|
const boolDeposit = data.every(item => item.depositNum === 0) |
||||
|
const boolStorage = data.every(item => item.storageType === 0) |
||||
|
|
||||
|
if (boolStorage) { |
||||
|
if (boolDeposit) { |
||||
|
this.deleteVisible = true |
||||
|
} else { |
||||
|
this.$message.error('请清空档案盒后再删除!') |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error('请操作出库并清空档案盒后才可删除盒!') |
||||
|
} |
||||
|
}, |
||||
|
// 确认删除 |
||||
|
handleDelConfirm(data) { |
||||
|
const params = data.map(item => { |
||||
|
return item.id |
||||
|
}) |
||||
|
del(params).then(res => { |
||||
|
if (res.doDel.length === 0) { |
||||
|
this.$message.error('删除失败') |
||||
|
} else { |
||||
|
if (res.doDel.length === data.length) { |
||||
|
this.$message.success('全部删除成功') |
||||
|
} else { |
||||
|
this.$message.success('部分删除成功') |
||||
|
} |
||||
|
} |
||||
|
this.deleteVisible = false |
||||
|
this.crud.refresh() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
@import '~@/assets/styles/lend-manage.scss'; |
||||
|
@import "~@/assets/styles/archives-manage.scss"; |
||||
|
::v-deep div.el-dialog__footer { |
||||
|
text-align: center; |
||||
|
} |
||||
|
.app-container{ |
||||
|
margin: 0 20px 20px; |
||||
|
} |
||||
|
.container-wrap{ |
||||
|
min-height: calc(100vh - 242px); |
||||
|
} |
||||
|
.packing-btn{ |
||||
|
width: 76px; |
||||
|
height: 30px; |
||||
|
padding-left: 13px !important; |
||||
|
} |
||||
|
.binding-btn{ |
||||
|
width: 106px; |
||||
|
height: 30px; |
||||
|
padding-left: 13px !important; |
||||
|
} |
||||
|
.crud-opts{ |
||||
|
display: flex; |
||||
|
} |
||||
|
.intoExamine{ |
||||
|
position: fixed; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%,-50%); |
||||
|
// width: 980px; |
||||
|
background-color: #fff; |
||||
|
z-index: 99; |
||||
|
::v-deep .el-table--group, .el-table--border{ |
||||
|
border: 1px solid #000; |
||||
|
border-bottom: none; |
||||
|
border-top: none; |
||||
|
} |
||||
|
::v-deep .el-table__header{ |
||||
|
border-bottom: 1px solid #000;; |
||||
|
} |
||||
|
::v-deep .el-table .el-table__header-wrapper th.el-table__cell, .el-table .el-table__header th.el-table__cell{ |
||||
|
color: #000; |
||||
|
background-color: #fff; |
||||
|
border-bottom: none; |
||||
|
&>.cell{ |
||||
|
color: #000; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-table .el-table__body-wrapper td.el-table__cell, .el-table .el-table__fixed-right td.el-table__cell{ |
||||
|
color: #000; |
||||
|
border-bottom: 1px solid #000; |
||||
|
padding: 0; |
||||
|
} |
||||
|
::v-deep .el-table__body tr.el-table__row:hover>td.el-table__cell, .el-table__body tr.el-table__row:focus>td.el-table__cell, .el-table__body tr.current-row:hover>td.el-table__cell, .el-table__body tr.current-row:focus>td.el-table__cell{ |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
::v-deep .el-table--border .el-table__cell{ |
||||
|
border-right: 1px solid #000; |
||||
|
} |
||||
|
} |
||||
|
@media print { |
||||
|
/*最外层打印节点*/ |
||||
|
html,body{ |
||||
|
height: inherit; |
||||
|
} |
||||
|
.intoExamine{ |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,234 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<el-row :gutter="10"> |
||||
|
<div> |
||||
|
<el-button type="primary" @click="connectprinter">连接打印服务</el-button> |
||||
|
<el-input v-model="printerstatus" style="width: 400px;" readonly placeholder="打印机状态" /> |
||||
|
<el-button type="primary" @click="previewlabel">标签预览</el-button> |
||||
|
<el-button type="primary" @click="printstart">打印标签</el-button> |
||||
|
</div> |
||||
|
</el-row> |
||||
|
<div style="margin: 16px 0; color: #fff;">标签预览（只预览第一张）</div> |
||||
|
<img style="width: 300px; height: auto" :src="pvimg" alt="标签预览"> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
printList: { |
||||
|
type: Array, |
||||
|
default: function() { |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
wsocket: null, |
||||
|
// 打印服务所安装的电脑的ip |
||||
|
serverIP: '127.0.0.1', |
||||
|
// 打印服务开启的端口 |
||||
|
serverPort: '1808', |
||||
|
jsonstring: { |
||||
|
Printer: { |
||||
|
printerinterface: 'USB', |
||||
|
printerdpi: '300', |
||||
|
printSpeed: '4', |
||||
|
printDarkness: '15' |
||||
|
}, |
||||
|
Operate: 'print', |
||||
|
// 电脑上模板地址的路径 |
||||
|
lsfFilePath: '/home/it0/zmin/新标签01.lsf', |
||||
|
// 打印内容 |
||||
|
labels: [] |
||||
|
}, |
||||
|
printerstatus: '', |
||||
|
pvimg: |
||||
|
'data:image/png;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCADsAk8DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3+iiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP//Z', |
||||
|
numberPrintneed: 1, |
||||
|
numberPrinted: 0 |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
printList: { |
||||
|
immediate: true, |
||||
|
handler(newVal) { |
||||
|
if (newVal && newVal.length > 0) { |
||||
|
this.jsonstring.labels = newVal |
||||
|
this.numberPrintneed = newVal.length // 打印数量等于选中的档案盒数量 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
const ZMINConfig = process.env.NODE_ENV === 'production' ? window.g.ZMINConfig : { ip: '127.0.0.1', port: '1808', filePath: '/home/it0/zmin/新标签01.lsf' } |
||||
|
console.log('ZMINConfig', ZMINConfig) |
||||
|
|
||||
|
this.serverIP = ZMINConfig.ip |
||||
|
this.serverPort = ZMINConfig.port |
||||
|
this.jsonstring.lsfFilePath = ZMINConfig.filePath |
||||
|
this.jsonstring.labels = this.printList |
||||
|
console.log('this.jsonstring.labels', this.jsonstring.labels) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 链接打印服务 |
||||
|
connection() { |
||||
|
// 定义 WebSocket 服务器地址 |
||||
|
const wsserver = `ws://${this.serverIP}:${this.serverPort}/` |
||||
|
|
||||
|
// 检查浏览器是否支持 WebSocket |
||||
|
// if ('WebSocket' in window) { |
||||
|
// // 创建 WebSocket 连接 |
||||
|
// this.wsocket = new WebSocket(wsserver) |
||||
|
// } else if ('MozWebSocket' in window) { |
||||
|
// // 兼容旧版 Firefox 浏览器 |
||||
|
// this.wsocket = new MozWebSocket(wsserver) |
||||
|
// } else { |
||||
|
// // 如果浏览器不支持 WebSocket，显示错误消息 |
||||
|
// this.$message.error('不支持当前浏览器！') |
||||
|
// return |
||||
|
// } |
||||
|
// 替换原来的浏览器兼容判断 |
||||
|
if ('WebSocket' in window) { |
||||
|
this.wsocket = new WebSocket(wsserver) |
||||
|
} else { |
||||
|
this.$message.error('当前浏览器不支持 WebSocket！') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// WebSocket 连接成功时的回调函数 |
||||
|
this.wsocket.onopen = () => { |
||||
|
// 更新打印机状态为“连接打印服务成功！” |
||||
|
this.printerstatus = '连接打印服务成功！' |
||||
|
} |
||||
|
|
||||
|
// WebSocket 连接关闭时的回调函数 |
||||
|
this.wsocket.onclose = () => { |
||||
|
// 更新打印机状态为“与打印服务断开连接！” |
||||
|
this.printerstatus = '与打印服务断开连接！' |
||||
|
} |
||||
|
|
||||
|
// WebSocket 连接发生错误时的回调函数 |
||||
|
this.wsocket.onerror = () => { |
||||
|
// 显示错误消息“数据传输错误，请检查打印服务是否已经运行！” |
||||
|
this.$message.error('数据传输错误，请检查打印服务是否已经运行！') |
||||
|
} |
||||
|
|
||||
|
// WebSocket 接收到消息时的回调函数 |
||||
|
this.wsocket.onmessage = (receiveMsg) => { |
||||
|
// 获取接收到的消息内容 |
||||
|
const receivecontent = receiveMsg.data |
||||
|
console.log('receiveMsg', receiveMsg) |
||||
|
// 检查消息是否以 "PrinterStatus_USB:" 开头 |
||||
|
if (receivecontent.indexOf('PrinterStatus_USB:') === 0) { |
||||
|
// 提取打印机状态码 |
||||
|
const printerstatus = parseInt( |
||||
|
receivecontent.replace('PrinterStatus_USB:', '') |
||||
|
) |
||||
|
|
||||
|
// 如果打印机状态码不为 0，表示有异常 |
||||
|
if (printerstatus !== 0) { |
||||
|
let statusmsg = '' |
||||
|
|
||||
|
// 根据不同的状态码设置相应的错误消息 |
||||
|
if (printerstatus === 88) { statusmsg = '打印机已经暂停，请按[暂停]按键，再重新打印!' } else if (printerstatus === 82) { |
||||
|
statusmsg = |
||||
|
'打印机碳带错误，请重新安装碳带后按[取消]按键，再重新打印!' |
||||
|
} else if (printerstatus === 83) { |
||||
|
statusmsg = |
||||
|
'打印机标签错误，请重新安装标签后按[取消]按键，再重新打印!' |
||||
|
} else if (printerstatus === 89) { statusmsg = '标签纸用完了，请安装新标签！' } else if (printerstatus === 90) { statusmsg = 'RFID标签读写错误，请按[取消]按键，再重新打印!' } else if (printerstatus === 91 || printerstatus === 92) { statusmsg = 'RFID标签校准错误，请按[取消]按键，再重新打印!' } else if (printerstatus === -1007) { statusmsg = '打印机端口异常，请检查打印机是否正常连接且已开机。' } else { |
||||
|
// 如果状态码不在预定义范围内，显示通用错误消息 |
||||
|
this.printerstatus = `打印机状态异常，错误代码：${printerstatus}` |
||||
|
this.$message.error(`打印机状态异常，错误代码：${printerstatus}`) |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// 更新打印机状态为错误消息 |
||||
|
this.printerstatus = `打印机状态异常：${statusmsg}` |
||||
|
// 显示错误消息 |
||||
|
this.$message.error(`打印机状态异常：${statusmsg}`) |
||||
|
return |
||||
|
} else { |
||||
|
// 如果状态码为 0，表示打印机正常 |
||||
|
if (this.numberPrinted < this.numberPrintneed) { |
||||
|
// 如果已打印数量小于需要打印的数量，继续打印 |
||||
|
this.printlabel() |
||||
|
} else { |
||||
|
// 如果已打印数量达到需要打印的数量，显示成功消息并重置计数 |
||||
|
this.$message.success(`已打印完 ${this.numberPrinted} 张标签。`) |
||||
|
this.numberPrinted = 0 |
||||
|
} |
||||
|
} |
||||
|
} else if (receivecontent.indexOf('打印完成') === 0) { |
||||
|
// 如果消息以 "打印完成" 开头，表示一张标签打印完成 |
||||
|
this.numberPrinted++ |
||||
|
// 更新打印机状态为已打印的数量 |
||||
|
this.printerstatus = `${this.numberPrinted} 张标签打印完成。` |
||||
|
// 如果已打印数量小于需要打印的数量，继续获取打印机状态 |
||||
|
if (this.numberPrinted < this.numberPrintneed) { this.wsocket.send('ZM_GetPrinterStatus_USB|500') } |
||||
|
} else if (receivecontent.indexOf('ZM_PrintLabel_Preview:') === 0) { |
||||
|
// 如果消息以 "ZM_PrintLabel_Preview:" 开头，表示标签预览完成 |
||||
|
const imagebase64string = receivecontent.replace( |
||||
|
'ZM_PrintLabel_Preview:', |
||||
|
'' |
||||
|
) |
||||
|
console.log('imagebase64string', imagebase64string) |
||||
|
// 如果预览图像数据不为空，更新预览图像 |
||||
|
if (imagebase64string.length > 0) this.pvimg = imagebase64string |
||||
|
console.log('imagebase64string2', imagebase64string) |
||||
|
} else { |
||||
|
// 如果消息不匹配任何已知类型，直接更新打印机状态为消息内容 |
||||
|
this.printerstatus = receivecontent |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 链接打印服务 |
||||
|
connectprinter() { |
||||
|
if (this.wsocket != null) { |
||||
|
this.wsocket.close() |
||||
|
this.wsocket = null |
||||
|
} |
||||
|
this.connection() |
||||
|
setTimeout(() => { |
||||
|
// 获取打印机序列号 |
||||
|
this.wsocket.send('ZM_GetPrinterNameAndSN') |
||||
|
}, 500) |
||||
|
}, |
||||
|
|
||||
|
// 打印标签按钮触发 |
||||
|
printstart() { |
||||
|
if (this.wsocket == null) { |
||||
|
this.$message.error('请先连接打印服务') |
||||
|
return |
||||
|
} |
||||
|
this.numberPrinted = 0 |
||||
|
this.wsocket.send('ZM_GetPrinterStatus_USB|500') |
||||
|
}, |
||||
|
|
||||
|
// 标签打印 |
||||
|
printlabel() { |
||||
|
this.jsonstring.Operate = 'print' |
||||
|
const newjsonstring = JSON.stringify(this.jsonstring) |
||||
|
console.log('标签打印newjsonstring', newjsonstring) |
||||
|
this.wsocket.send(newjsonstring) |
||||
|
}, |
||||
|
|
||||
|
// 标签预览 |
||||
|
previewlabel() { |
||||
|
this.jsonstring.Operate = 'preview' |
||||
|
const newjsonstring = JSON.stringify(this.jsonstring) |
||||
|
console.log('标签预览this.jsonstring', this.jsonstring) |
||||
|
console.log('标签预览newjsonstring', newjsonstring) |
||||
|
this.wsocket.send(newjsonstring) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style rel="stylesheet/scss" lang="scss" scoped> |
||||
|
@import '~@/assets/styles/lend-manage.scss'; |
||||
|
@import "~@/assets/styles/archives-manage.scss"; |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue