<template>
|
<div class="main">
|
<div class="out row1 flex">
|
<div class="l">
|
<div class="scan flex">
|
<div class="l">
|
<div class="flex" style="padding-bottom: 15px;">
|
<div class="label">
|
<!-- 二维码扫码区 -->
|
扫码区：
|
</div>
|
<div style="flex:1">
|
<el-input
|
placeholder="MES二维码\条形码"
|
@input="codeChange"
|
type="textarea"
|
v-model.trim="setting.code"
|
rows="3"
|
/>
|
</div>
|
</div>
|
<!-- <div class="flex">
|
<div class="label">
|
条码扫码区
|
</div>
|
<div style="flex:1">
|
<el-input @input="codeChange" v-model="setting.code2" />
|
</div>
|
</div> -->
|
</div>
|
<div class="r">
|
<div class="t">标签打印模块当前参数状态</div>
|
<div class="content">
|
当前打印模式：新增后{{ setting.auto ? '' : '不' }}自动打印
|
<br />
|
当前数据新增模式：
|
{{ setting.cache ? '本地缓存后批量提交' : '不缓存' }}
|
<br />
|
当前打印标签：{{ currentLabel.labelDesc || '待选择' }}
|
</div>
|
</div>
|
</div>
|
<div class="fun flex">
|
<el-button @click="goRePrint" type="primary" size="mini">
|
打印
|
</el-button>
|
<el-checkbox v-model="setting.auto">新增后自动打印</el-checkbox>
|
<el-checkbox v-model="setting.cache">开启本地缓存模式</el-checkbox>
|
<div class="flex">
|
<span style="padding:0 10px 0 30px;">标签</span>
|
<el-select
|
v-model="setting.labelUniqueCode"
|
@change="labelChange"
|
filterable
|
:disabled="cacheList.length > 0"
|
>
|
<el-option
|
v-for="item in labelList"
|
:key="item.labelUniqueCode"
|
:label="item.labelDesc"
|
:value="item.labelUniqueCode"
|
/>
|
</el-select>
|
</div>
|
</div>
|
</div>
|
<div class="r">
|
<div class="t">
|
本地缓存列表
|
</div>
|
<div class="cacheListWrap">
|
<div class="scrollWrap">
|
<div v-if="cacheList.length === 0" class="empty">无缓存</div>
|
<div v-for="(x, i) in cacheList" :key="i" class="list flex">
|
<div>{{ i + 1 }}</div>
|
<div>{{ x.sn }}</div>
|
<div class="del" @click="cacheDel(i)">删除</div>
|
</div>
|
</div>
|
<div class="btnsWrap flex">
|
<el-button
|
:disabled="cacheList.length === 0"
|
@click="goSubmit"
|
type="primary"
|
size="mini"
|
>
|
提交
|
</el-button>
|
<el-button @click="clearCache" size="mini">清空</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="out row2 flex">
|
<div class="l">
|
<ttable
|
:table="table"
|
@handleSelectionChange="handleSelectionChange"
|
@ttRowClick="ttRowClick"
|
:options="options"
|
:ajaxFun="ajaxFun"
|
ref="labelprintprinttable"
|
>
|
<template #toolbar></template>
|
</ttable>
|
</div>
|
<div class="r">
|
<div class="t">标签信息预览</div>
|
<PreviewBox :rowInfo="rowInfo" />
|
</div>
|
</div>
|
<secretFormDialog
|
ref="SecretForm"
|
:currshowlist.sync="showSecretForm"
|
@goOnListPrint="goOnListPrint"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import ttable from '@/views/common/ztt-table.vue'
|
import { fetchList, printLabel, putObj, reprint } from '@/api/print/print'
|
import { fetchList as getLabelList } from '@/api/print/config'
|
import { remote } from '@/api/admin/dict'
|
import secretFormDialog from './secret-form.vue'
|
import PreviewBox from '../PreviewBox'
|
import { judgeLabelMark } from '@/api/warehouse/check'
|
import { goPrintUtil } from './print'
|
export default {
|
components: {
|
ttable,
|
secretFormDialog,
|
PreviewBox
|
},
|
data() {
|
const tt = (prop, label, config) => {
|
const w = (label.length - 1) * 20 + 15
|
return Object.assign(
|
{
|
minWidth: w,
|
// width: w < 140 ? 140 : w,
|
prop,
|
label,
|
sort: true,
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
},
|
config
|
)
|
}
|
return {
|
setting: {
|
// 230411000018N
|
code: null,
|
code2: null,
|
auto: true,
|
cache: true,
|
labelUniqueCode: null
|
},
|
currentLabel: {},
|
labelList: [],
|
cacheList: [],
|
ajaxFun: fetchList,
|
options: {
|
height: 300, // 默认高度-为了表头固定
|
stripe: true, // 是否为斑马纹 table
|
highlightCurrentRow: false, // 是否要高亮当前行
|
border: true, // 是否有纵向边框
|
lazy: false, // 是否需要懒加载
|
fit: true, // 列的宽度是否自撑开
|
multiSelect: true, //
|
seqNo: true,
|
isRefresh: true,
|
isShowHide: true, // 是否显示显影按钮
|
isSearch: false, // 高级查询按钮
|
defaultOrderBy: { column: 'id', direction: 'desc' }
|
},
|
table: {
|
total: 0,
|
currentPage: 1,
|
pageSize: 20,
|
data: [],
|
// 标题
|
column: [
|
tt('labelTypeDesc', '标签类别描述', {
|
searchInfoType: 'select',
|
formatter: (row, column, cellValue) => {
|
const theOne = this.labelTypeOptions.find(
|
(e) => e.value === cellValue
|
)
|
return theOne ? theOne.label : ''
|
},
|
optList: () => {
|
return this.labelTypeOptions
|
}
|
}),
|
tt('labelDesc', '标签描述'),
|
tt('partBatchNo', 'SN号'),
|
tt('ifsBatchNo', 'IFS批次号'),
|
tt('wdr', 'wdr'),
|
tt('labelSize', '标签尺寸'),
|
tt('printCount', '打印次数'),
|
tt('createUser', '创建人'),
|
tt('createTime', '创建时间'),
|
tt('updateUser', '更新人'),
|
tt('updateTime', '更新时间')
|
],
|
operator: [
|
{
|
text: '删除',
|
type: 'text',
|
size: 'small',
|
fun: this.deleteHandle
|
}
|
],
|
operatorConfig: {
|
fixed: 'right',
|
label: '操作',
|
width: 80,
|
minWidth: 80
|
}
|
},
|
multipleSelection: [],
|
rowInfo: {},
|
timer: null,
|
showSecretForm: false,
|
labelTypeOptions: []
|
}
|
},
|
created() {
|
getLabelList({
|
current: 1,
|
size: 999
|
}).then((res) => {
|
this.labelList = res.data.data.records
|
})
|
remote('label_type').then((response) => {
|
if (response.data.code === 0) {
|
this.labelTypeOptions = response.data.data
|
}
|
})
|
},
|
methods: {
|
labelChange() {
|
this.currentLabel = this.labelList.find(
|
(e) => e.labelUniqueCode === this.setting.labelUniqueCode
|
)
|
},
|
codeChange() {
|
if (this.timer) {
|
clearTimeout(this.timer)
|
}
|
if (!this.setting.code) {
|
return
|
}
|
this.timer = setTimeout(() => {
|
if (!this.setting.labelUniqueCode) {
|
this.$message.warning('请先选择标签')
|
this.setting.code = ''
|
return
|
}
|
this.setting.code = this.setting.code.replace(
|
/(^[\r\n\s]*)|([\r\n\s]*$)/g,
|
''
|
)
|
let c
|
if (this.setting.code.indexOf('{') < 0) {
|
c = {
|
sn_no: this.setting.code
|
}
|
} else {
|
c = JSON.parse(this.setting.code)
|
}
|
// {
|
// "part_no": "88.118.1/A0467594",
|
// "lot_batch_no": "230313000229S",
|
// "qty_arrived": 0.16,
|
// "wdr": "检8",
|
// "material_code": "",
|
// "sn_no": "230313000229S"
|
// }
|
const data = {
|
partNo: c.part_no,
|
ifsBatchNo: c.lot_batch_no,
|
qty: c.qty_arrived,
|
wdr: c.wdr,
|
sn: c.sn_no
|
}
|
if (this.setting.cache) {
|
// 开启本地缓存
|
this.cacheList.push(data)
|
} else {
|
this.goPrint([data])
|
}
|
this.setting.code = ''
|
}, 500)
|
},
|
goSubmit() {
|
this.goPrint(this.cacheList)
|
},
|
// 扫码打印
|
goPrint(data) {
|
printLabel({
|
isPrint: this.setting.auto,
|
labelUniqueCode: this.setting.labelUniqueCode,
|
snList: data.map((e) => e.sn)
|
}).then((res) => {
|
this.clearCache()
|
if (this.setting.auto) {
|
this.goOnListPrint(res.data.data)
|
} else {
|
this.getData()
|
}
|
})
|
},
|
// 补打印
|
goRePrint() {
|
if (this.multipleSelection.length) {
|
const theFirstOne = this.multipleSelection[0]
|
if (
|
this.multipleSelection.every((e) => {
|
return e.labelUniqueCode === theFirstOne.labelUniqueCode
|
})
|
) {
|
const idList = this.multipleSelection.map((e) => e.id)
|
reprint({ idList }).then((res) => {
|
if (res.data.data) {
|
this.goOnListPrint()
|
} else {
|
// 需要输入密码
|
this.showSecretForm = true
|
this.$refs.SecretForm.init(idList)
|
}
|
})
|
} else {
|
this.$message.warning('请选择同一种标签描述')
|
}
|
} else {
|
this.$message.warning('请选择打印标签')
|
}
|
},
|
// 去打印
|
goOnListPrint(
|
data = this.multipleSelection.map((e) => {
|
return {
|
labelDesc: e.labelDesc,
|
sn: e.partBatchNo,
|
// ifsBatchNo: e.ifsBatchNo,
|
qualityLabelPrintConfigDetail: JSON.parse(e.labelInfo)
|
.qualityLabelPrintConfigDetail
|
}
|
})
|
) {
|
this.getData()
|
judgeLabelMark(data.map((e) => e.sn)).then((resp) => {
|
data.forEach((e) => {
|
e.markFlag = resp.data.data.includes(e.sn)
|
// e.qualityLabelPrintConfigDetail.push({
|
// caption: 'IFS批次号',
|
// defaultValue: e.ifsBatchNo
|
// })
|
goPrintUtil(e)
|
})
|
})
|
},
|
cacheDel(i) {
|
this.cacheList.splice(i, 1)
|
},
|
clearCache() {
|
this.cacheList = []
|
},
|
// 下半部分
|
getData() {
|
this.$refs.labelprintprinttable.getDataList()
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val
|
},
|
ttRowClick(val) {
|
this.rowInfo = val
|
},
|
// 删除
|
deleteHandle(row) {
|
this.$confirm('是否确认删除SN号为:' + row.partBatchNo, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnClickModal: false,
|
type: 'warning'
|
})
|
.then(function() {
|
return putObj(
|
Object.assign(row, {
|
active: false
|
})
|
)
|
})
|
.then((data) => {
|
this.$message.success('删除成功')
|
this.getData()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.main {
|
padding: 20px;
|
font-size: 14px;
|
background: white;
|
}
|
.flex {
|
display: flex;
|
}
|
.out {
|
> .l {
|
width: calc(100% - 335px);
|
}
|
> .r {
|
width: 320px;
|
margin-left: 15px;
|
}
|
}
|
.row1 {
|
padding-left: 50px;
|
> .l {
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-end;
|
padding-bottom: 20px;
|
}
|
.scan {
|
align-items: flex-end;
|
padding: 20px 0 20px 0px;
|
> .l {
|
width: 320px;
|
padding-right: 40px;
|
> .flex {
|
align-items: center;
|
}
|
.label {
|
white-space: nowrap;
|
padding-right: 10px;
|
}
|
}
|
> .r {
|
flex: 1;
|
.content {
|
color: red;
|
line-height: 25px;
|
font-size: 16px;
|
padding-top: 10px;
|
min-width: 100px;
|
}
|
}
|
}
|
.fun {
|
align-items: center;
|
padding-left: 6.5em;
|
.el-button {
|
margin-right: 30px;
|
}
|
.el-checkbox {
|
margin-right: 20px;
|
color: black;
|
}
|
> .flex {
|
align-items: center;
|
}
|
}
|
> .r {
|
position: relative;
|
.t {
|
position: absolute;
|
left: -100px;
|
}
|
.cacheListWrap {
|
border: 1px solid #ccc;
|
border-radius: 6px;
|
padding: 0 10px;
|
height: 265px;
|
.scrollWrap {
|
height: calc(100% - 55px);
|
overflow: auto;
|
margin: 10px 0;
|
.empty {
|
line-height: 30px;
|
text-align: center;
|
color: #999;
|
}
|
.list {
|
justify-content: space-between;
|
padding: 4px 10px 4px 4px;
|
&:hover {
|
background: #eee;
|
}
|
.del {
|
color: rgb(255, 100, 100);
|
&:hover {
|
cursor: pointer;
|
color: rgb(255, 0, 0);
|
}
|
}
|
}
|
}
|
.btnsWrap {
|
justify-content: space-around;
|
padding: 0 30px;
|
}
|
}
|
}
|
}
|
.row2 {
|
> .r {
|
.t {
|
padding: 40px 0 20px;
|
text-align: center;
|
}
|
}
|
}
|
</style>
|
