<template>
|
<div class="mod-config">
|
<basic-container>
|
<el-row>
|
<el-col :span="11">
|
<ttable
|
:table="table"
|
:isShowHide="true"
|
:prelang="prelang"
|
:ajaxFun="ajaxFun"
|
:options="options"
|
@handleSelectionChange="handleSelectionChange"
|
ref="processconfiguration"
|
>
|
<template #toolbar></template>
|
</ttable>
|
</el-col>
|
<el-col :span="13" style="padding-left: 10px">
|
<el-card>
|
<div slot="header">
|
<el-row>
|
<el-col :span="6">
|
<span>装箱明细</span>
|
</el-col>
|
<el-col :span="8" :offset="4">
|
<!-- <el-button
|
style="float: right; padding: 3px 0"
|
type="text"
|
@click="beginItemLayOut"
|
>
|
布局
|
</el-button> -->
|
</el-col>
|
<el-col :span="2">
|
<el-button
|
v-if="!isCheck && permissions.quality_packaging_ledger_info_add"
|
style="float: right; padding: 3px 6px;color:#fff;background-color: #9f7b95;"
|
type="text"
|
@click="handleCheck"
|
>核对
|
</el-button>
|
</el-col>
|
<el-col :span="2">
|
<el-button
|
v-if="!isCheck && permissions.quality_packaging_ledger_info_add"
|
style="float: right; padding: 3px 0"
|
type="text"
|
@click="addpreserve"
|
>保存
|
</el-button>
|
</el-col>
|
<el-col :span="2">
|
<el-button
|
v-if="!isCheck && permissions.quality_packaging_ledger_info_add"
|
style="float: right; padding: 3px 0"
|
type="text"
|
@click="relateOperationParam()"
|
>添加
|
</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<el-table
|
:data="testStandardParams"
|
id="testStandardParamTable"
|
ref="testStandardParam"
|
|
highlight-current-row
|
height="700"
|
style="width: 100%"
|
class="l-mes-table"
|
border
|
stripe
|
>
|
<el-table-column
|
type ="index"
|
label="序号"
|
align="center"
|
width="50"
|
/>
|
<el-table-column
|
label="产品"
|
prop="product"
|
show-overflow-tooltip
|
align="center"
|
/>
|
<el-table-column
|
label="产品编号"
|
prop="productNo"
|
show-overflow-tooltip
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
label="批次号"
|
prop="outBatchNo"
|
show-overflow-tooltip
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
label="规格型号"
|
prop="specs"
|
show-overflow-tooltip
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
label="单位"
|
prop="unit"
|
show-overflow-tooltip
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
label="数量"
|
prop="number"
|
align="center"
|
show-overflow-tooltip
|
width="80"
|
></el-table-column>
|
<el-table-column
|
v-if="permissions.quality_packaging_ledger_info_operate"
|
fixed="right"
|
label="操作"
|
align="center"
|
width="80">
|
<template slot-scope="scope">
|
<el-button type="text" @click="deleteadd(scope.row)" icon="el-icon-delete" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<!-- 新增 -->
|
<packfrom
|
:currshowlist.sync="addOrUpdateVisible"
|
@refreshDataList="getData">
|
</packfrom>
|
<packfromadd
|
:currshowlist.sync="increase"
|
:packageBoxIddata ="packageBoxId"
|
@handleSelectionChange = "preserve"
|
>
|
</packfromadd>
|
</basic-container>
|
<el-dialog title="标签列表" top="5vh" :visible.sync="diaPrintTab" width="500px">
|
<div style="width:100%;height: 400px;overflow-y: auto;">
|
<div class="dia_body" id="qrCard">
|
<el-card v-for="(item, i) in qrData" :key="i" >
|
<div>
|
<table border="2px" class="x1111116">
|
<tr class="x1111113">
|
<td class="x1111114" colspan=6>
|
<div style="height: 60px;display: flex;margin-top: 4px;">
|
<div style="margin-top: 5px;">
|
<img width="150" height="48" src="../../../../public/img/image001.jpg" alt="IMG_256">
|
</div>
|
<div style="margin-left: 45px;margin-top: 15px ;">
|
<span lang="EN-US" class="x1111111">中天海洋科技有限公司</span>
|
</div>
|
</div>
|
</td>
|
</tr>
|
<tr class="x1111117">
|
<td class="x1111114">
|
<span style="font-family: 宋体;text-align: center;">包 装 人:</span>
|
</td>
|
<td class="x1111114" colspan=4 >{{ item.createUser }} </td>
|
<td class="x1111114" rowspan=3 >
|
<div style="padding: 1px;">
|
<vueQr :text=str+item.packageBoxId :size="110" :margin="1"></vueQr>
|
</div>
|
</td>
|
</tr>
|
<tr class="x1111117">
|
<td class="x1111114">
|
<span style="font-family: 宋体;text-align: center;">包 装 编号：</span>
|
</td>
|
<td class="x1111114" colspan=4>{{ item.packageNo }}</td>
|
</tr>
|
<tr class="x1111117">
|
<td class="x1111114">
|
<span style="font-family: 宋体;text-align: center;">合 同 号：</span>
|
</td>
|
<td class="x1111114" colspan=4>{{ item.contractNo }}</td>
|
</tr>
|
<tr class="x1111113">
|
<td class="x1111114" colspan=6>
|
<div style="height: 75px;" >
|
<p><span lang="EN-US" class="x1111112">地址：江苏省南通经济技术开发区常兴路96号</span></p>
|
<p><span lang="EN-US" class="x1111112">电话/传真：0513—89191125</span></p>
|
</div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
<!-- <el-row>
|
<el-col :span="10" :offset="3">序号：</el-col>
|
<el-col :span="10" style="font-weight: bold;">{{ i + 1 }}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="10" :offset="3">包装编号：</el-col>
|
<el-col :span="10" style="font-weight: bold;">{{ item.packageNo }}</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="10" :offset="3">包装台账二维码：</el-col>
|
<el-col :span="10">
|
<vueQr :text=str+item.packageBoxId :size="110" :margin="1"></vueQr>
|
</el-col>
|
</el-row>
|
<div style="background-color: blueviolet;height: 80px;">
|
1111
|
</div> -->
|
</el-card>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="diaPrintTab = false">取 消</el-button>
|
<el-button type="primary" @click="printFun">打 印</el-button>
|
</span>
|
</el-dialog>
|
<input type="password" id="ScanCodeInfo" v-model="codeInfo" @keyup.enter="keyup" style="opacity: 0;height: 0px;margin: 0px;padding: 0px;position: absolute;top: 0;"></input>
|
<el-dialog title="核对列表" top="5vh" :visible.sync="checkShow" width="800px">
|
<el-table
|
:data="testStandardParams"
|
id="testStandardParamTable"
|
ref="testStandardParam"
|
|
highlight-current-row
|
height="700"
|
style="width: 100%"
|
class="l-mes-table"
|
border
|
stripe
|
>
|
<el-table-column
|
type ="index"
|
label="序号"
|
align="center"
|
width="50"
|
/>
|
<el-table-column
|
label="产品编号"
|
prop="productNo"
|
show-overflow-tooltip
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
label="产品名称"
|
prop="product"
|
show-overflow-tooltip
|
align="center"
|
/>
|
<el-table-column
|
label="批次号"
|
prop="outBatchNo"
|
show-overflow-tooltip
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
label="核对"
|
prop="isCheck"
|
align="center"
|
show-overflow-tooltip
|
width="80"
|
>
|
<template slot-scope="scope">
|
<i class="el-icon-check" v-if="scope.row.isCheck"></i>
|
<i v-else></i>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { pagedata,dropById,list,saveList,deledata,sAuditstatus,qualityPackageBoxDetail,qualityPackageBox} from '@/api/quality/Packaging_ledger'
|
import ttable from '@/views/common/ztt-table.vue'
|
import packfrom from './pack-from.vue'
|
import packfromadd from './pack-fromadd.vue'
|
import vueQr from 'vue-qr'
|
import PrintJS from 'print-js'
|
import { mapGetters } from 'vuex'
|
export default {
|
data(){
|
return {
|
str:"https://ztms-mes.chinaztt.cn/#/pack?id=",
|
qrData:[],
|
diaPrintTab: false,
|
checkShow:false,
|
multipleSelection: [],
|
isCheck: false,
|
dataway:{},
|
datalist:[],
|
testStandardParams: [],
|
packageBoxId:{},
|
prelang: 'operation',
|
dataListLoading: false,
|
ajaxFun: pagedata,
|
increase:false,
|
addOrUpdateVisible:false,
|
options: {
|
height: 300, // 默认高度-为了表头固定
|
stripe: true, // 是否为斑马纹 table
|
highlightCurrentRow: false, // 是否要高亮当前行
|
border: true, // 是否有纵向边框
|
lazy: false, // 是否需要懒加载
|
fit: true, // 列的宽度是否自撑开
|
multiSelect: true, //
|
isEdit:false,
|
seqNo: true,
|
isShowHide: true, // 是否显示显影按钮
|
isRefresh: true, // 是否显示刷新按钮
|
isSearch: true, // 高级查询按钮
|
defaultOrderBy: { column: 'createTime', direction: 'desc' }
|
},
|
table: {
|
total: 0,
|
currentPage: 1,
|
pageSize: 20,
|
data: [],
|
// 标题
|
column: [
|
{
|
minWidth: 'code',
|
prop: 'state',
|
label: '状态',
|
sort: true,
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
},
|
{
|
minWidth: '140',
|
prop: 'packageNo',
|
label: '包装编号',
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text',
|
},{
|
minWidth: '140',
|
prop: 'createUser',
|
label: '创建人',
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text',
|
},{
|
minWidth: '140',
|
prop: 'contractNo',
|
label: '合同号',
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text',
|
},
|
{
|
minWidth: '140',
|
prop: 'updateUser',
|
label: '更新人',
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text',
|
},
|
{
|
minWidth: '130',
|
width: '150',
|
prop: 'updateTime',
|
label: '更新日期',
|
sort: true,
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'datetimerange',
|
},
|
{
|
minWidth: '130',
|
width: '150',
|
prop: 'createTime',
|
label: '创建日期',
|
sort: true,
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'datetimerange',
|
},
|
],
|
toolbar: [],
|
operator: null,
|
operatorConfig: {
|
fixed: 'right',
|
label: '操作',
|
width: 120,
|
minWidth: 120
|
}
|
},
|
codeInfo:null,
|
startTime: null,
|
}
|
},
|
components: {
|
ttable,
|
packfrom,
|
packfromadd,
|
vueQr
|
},
|
created(){
|
if(this.permissions.quality_packaging_ledger_add){
|
this.table.toolbar.push({
|
text: '新增',
|
type: 'primary',
|
fun: this.addOrUpdateHandle
|
})
|
}
|
if(this.permissions.quality_packaging_ledger_labelprint){
|
this.table.toolbar.push({
|
text: '标签打印',
|
type: 'primary',
|
fun: this.printLabel
|
})
|
this.table.toolbar.push({
|
text: '下载装箱清单',
|
type: 'primary',
|
fun: this.downOrder
|
})
|
}
|
let arr = []
|
if(this.permissions.quality_packaging_ledger_inspect){
|
arr.push({
|
text: '检验',
|
icon: 'el-icon-position',
|
type: 'text',
|
size: 'small',
|
fun: this.check,
|
show: {
|
val: [
|
'草稿',
|
'未报检',
|
],
|
key: 'state'
|
}
|
})
|
}
|
if(this.permissions.quality_packaging_ledger_del){
|
arr.push({
|
text: '删除',
|
icon: 'el-icon-delete',
|
type: 'text',
|
size: 'small',
|
fun: this.deleteHandle
|
})
|
}
|
this.table.operator = arr.length>0 ? arr : null
|
},
|
computed:{
|
...mapGetters(['permissions'])
|
},
|
watch: {
|
diaPrintTab(newVal){
|
if(!newVal){
|
this.qrData = []
|
}
|
},
|
checkShow(newVal){
|
if(newVal){
|
// this.$message.success('扫码：打开')
|
let input = document.getElementById('ScanCodeInfo');
|
input.focus();
|
this.startTime = setInterval(()=>{
|
input.focus()
|
},1000)
|
}else{
|
this.$message.warning('扫码：关闭')
|
clearInterval(this.startTime)
|
}
|
}
|
},
|
methods: {
|
//包装详情
|
|
//打印按钮
|
printFun() {
|
this.diaPrintTab = false;
|
PrintJS({
|
printable: 'qrCard',//页面
|
type: "html",//文档类型
|
maxWidth:450,
|
targetStyles:['*'],
|
style: `@page {
|
margin:0;
|
padding: 0;
|
size: 323px 210px landscape;
|
}
|
html{
|
zoom:100%;
|
}
|
@media print{
|
width: 323px;
|
height: 210px;
|
margin:7cm 0mm 0mm 0mm;
|
padding: 0mm 10mm;
|
}`,
|
onPrintDialogClose: this.erexcel=false,
|
targetStyles: ["*"], // 使用dom的所有样式，很重要
|
font_size: '',
|
});
|
},
|
handleSelectionChange(val){
|
this.multipleSelection = val
|
let lastRow = val[val.length - 1]
|
this.handleCurrentChange(lastRow)
|
},
|
printLabel(){
|
if(this.multipleSelection.length==0){
|
this.$message.warning('请选择一条数据')
|
return
|
}
|
console.log(this.multipleSelection)
|
this.diaPrintTab = true
|
this.multipleSelection.forEach(item=>{
|
const obj = {
|
packageNo: item.packageNo,
|
contractNo: item.contractNo,
|
packageBoxId:item.id,
|
createUser:item.createUser
|
}
|
this.qrData.push(obj)
|
})
|
},
|
// 获取数据列表
|
getData() {
|
this.$refs.processconfiguration.refreshData()
|
},
|
wayRenovate(){
|
this.getData()
|
},
|
//add
|
addOrUpdateHandle(){
|
this.addOrUpdateVisible = true
|
},
|
//删除
|
deleteHandle(row){
|
dropById({id:row.id}).then((res) =>{
|
this.getData()
|
this.$message.success('删除成功')
|
})
|
},
|
handleCurrentChange(row){
|
if(row.state=='未报检'){
|
this.isCheck = false
|
}else{
|
this.isCheck = true
|
}
|
this.dataway = row
|
this.packageBoxId = {
|
packageBoxId:row.id
|
}
|
this.rightquery()
|
},
|
rightquery(){
|
list({packageBoxId:this.packageBoxId.packageBoxId}).then((res) =>{
|
this.testStandardParams = res.data.data
|
})
|
},
|
//详情添加
|
relateOperationParam(){
|
if (this.dataway.state == "未报检") {
|
this.increase = true
|
}else{
|
this.$message.error('请先选择包装项目')
|
}
|
},
|
preserve(datalist){
|
this.testStandardParams = this.testStandardParams.concat(datalist);
|
console.log(this.testStandardParams,"---------start");
|
this.datalist = datalist
|
},
|
//右边保存
|
addpreserve(){
|
this.datalist.forEach(el => {
|
el.packageBoxId =this.packageBoxId.packageBoxId
|
});
|
console.log(this.datalist);
|
// return
|
saveList(this.datalist).then((res) =>{
|
if(res.status===200){
|
this.$message.success('保存成功')
|
this.datalist = null
|
this.rightquery()
|
}
|
}).catch(error=>{
|
console.error(error);
|
})
|
},
|
// 核对
|
handleCheck(){
|
if(this.testStandardParams.length>0){
|
this.checkShow = true;
|
}else{
|
this.$message.warning('暂无核对明细')
|
}
|
},
|
keyup(e){
|
var code = ''
|
var str = {}
|
var that = this;
|
try{
|
code = JSON.parse(this.codeInfo)
|
if(code.moNo2==null||code.moNo2==undefined||code.moNo2==''){
|
this.$message.error('该二维码有误')
|
}else{
|
str = {
|
moNo2: code.moNo2,
|
}
|
qualityPackageBoxDetail({
|
outBatchNo:str.moNo2,
|
packageBoxId:that.packageBoxId.packageBoxId
|
}).then(res=>{
|
if(res.data.data){
|
that.rightquery()
|
}else{
|
that.$message.error('该批次号不在装箱清单内')
|
}
|
})
|
}
|
}catch(e){
|
this.$message.error('该二维码有误')
|
}
|
this.codeInfo = null
|
},
|
//删除
|
deleteadd(row){
|
deledata({id:row.id}).then((res)=>{
|
this.$message.success('删除成功')
|
this.rightquery()
|
})
|
},
|
//审核
|
check(row){
|
let packageBox = {
|
id:row.id,
|
packageNo:row.packageNo,
|
contractNo:row.contractNo,
|
customerId:row.customerId,
|
}
|
sAuditstatus(packageBox).then((res) =>{
|
this.getData()
|
this.$message.success('检验成功')
|
})
|
},
|
downOrder(){
|
if(this.multipleSelection.length==0){
|
this.$message.warning('请选择一条数据')
|
return
|
}else{
|
qualityPackageBox({id:this.multipleSelection[this.multipleSelection.length-1].id}).then(response=>{
|
console.log(response)
|
// 处理返回的文件流
|
const blob = response.data
|
const link = document.createElement('a')
|
link.href = URL.createObjectURL(blob)
|
const disposition = response.headers['content-disposition']
|
let temp = disposition.substring(disposition.lastIndexOf('=') + 1)
|
link.download = decodeURI(temp)
|
document.body.appendChild(link)
|
link.click()
|
window.setTimeout(function () {
|
URL.revokeObjectURL(blob)
|
document.body.removeChild(link)
|
}, 0)
|
}).catch((error) => {
|
console.error(error)
|
})
|
}
|
}
|
},
|
}
|
</script>
|
<style>
|
.x1111111{
|
color: black;
|
font-size: 18pt;
|
font-family: 黑体;
|
justify-content: center;
|
text-align: center;
|
}
|
.x1111113{
|
border: 1px solid black;
|
height: 40px;
|
}
|
.x1111117{
|
border: 1px solid black;
|
height: 40px;
|
}
|
.x1111116{
|
border: 1px solid black;
|
height: 200px;
|
width: 445px;
|
}
|
.x1111114{
|
border: 1px solid black;
|
width: 80px;
|
}
|
.x1111115{
|
border: 1px solid black;
|
}
|
.x1111112{
|
color: black;
|
font-size: 12pt;
|
font-family: 宋体;
|
}
|
</style>
|
