<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="8">
|
<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 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 id="qrCard" class="dia_body">
|
<el-card class="box-card" v-for="(item, i) in qrData" :key="i" style="margin-bottom: 10px;">
|
<div style="padding: 5px;">
|
<table border="2px" class="x1111116">
|
<tr class="x1111113">
|
<td class="x1111114" colspan=6>
|
<div style="height: 75px;display: flex;margin-top: 2px;">
|
<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 >{{ i + 1 }} </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>
|
</div>
|
</template>
|
|
<script>
|
import { pagedata,dropById,list,saveList,deledata,sAuditstatus} 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,
|
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
|
}
|
},
|
}
|
},
|
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
|
})
|
}
|
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 = []
|
}
|
}
|
},
|
methods: {
|
//包装详情
|
|
//打印按钮
|
printFun() {
|
this.diaPrintTab = false;
|
PrintJS({
|
printable: 'qrCard',//页面
|
type: "html",//文档类型
|
maxWidth:450,
|
targetStyles:['*'],
|
style: `@page {
|
margin:0;
|
padding: 0;
|
size: 360px 170px;
|
}
|
html{
|
zoom:100%;
|
}
|
@media print{
|
width: 360px;
|
height: 170px;
|
margin:0;
|
padding: 0;
|
}`,
|
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
|
}
|
this.diaPrintTab = true
|
this.multipleSelection.forEach(item=>{
|
let obj = {
|
packageNo: item.packageNo,
|
contractNo: item.contractNo,
|
packageBoxId:item.id
|
}
|
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);
|
})
|
},
|
//删除
|
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('检验成功')
|
})
|
},
|
},
|
}
|
</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: 220px;
|
width: 450px;
|
}
|
.x1111114{
|
border: 1px solid black;
|
width: 80px;
|
}
|
.x1111115{
|
border: 1px solid black;
|
}
|
.x1111112{
|
color: black;
|
font-size: 12pt;
|
font-family: 宋体;
|
}
|
</style>
|
