作者 朱兆平

条形码

... ... @@ -37,6 +37,7 @@
"vue": "^2.5.2",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.14.0",
"vue-print-nb": "^1.7.5",
"vue-quill-editor": "^3.0.6",
"vue-router": "^2.3.0",
"vuex": "^3.6.2",
... ...
<template>
<div>
<el-button type='primary' @click='printClick'>打印</el-button>
<!-- 打印 start -->
<div style="display: none;">
<el-button id="trueBtn" v-print="printObj" type="info" size="mini" icon="el-icon-printer">打印</el-button>
<!-- <div style="display: none"> -->
<div v-if="printFlag" id="printId" style="width: 100%;">
<!-- 打印 (打印元素有边距时,会打印出2张纸;使用svg或img)start-->
<div class="print-box" style='margin-bottom: 50px;'>
<div class="flex align-center border-bottom">
<div class="title">单证号</div>
<div class="flex-1 center">
<span>{{wmsInfo.waybill}}</span><span v-if="wmsInfo.billfhl">_{{wmsInfo.billfhl}}</span>
</div>
</div>
<div class="flex align-center border-bottom">
<div class="title">件数</div>
<div class="flex-1 center">{{wmsInfo.pcs}}</div>
</div>
<div class="flex align-center border-bottom">
<div class="title">重量</div>
<div class="flex-1 center">{{wmsInfo.billweight}}</div>
</div>
<div class="flex align-center border-bottom">
<div class="title">计费重量</div>
<div class="flex-1 center">{{wmsInfo.feeweight}}</div>
</div>
<div class="flex justify-center py-1">
<barcode
:value="wmsInfo.serialnumber"
:options="barcodeOptions1"
>
条形码显示失败时的内容
</barcode>
</div>
</div>
<!-- 打印单个 end -->
<!-- 打印多个,一张纸一个 start-->
<!-- <div class="print-box" style='margin-bottom: 50px;page-break-after: always' v-for="(item, index) in selection" :key="index">-->
<!-- <div class="flex align-center border-bottom">-->
<!-- <div class="title">模具编码</div>-->
<!-- <div class="flex-1 center">{{item.moldCode}}</div>-->
<!-- </div>-->
<!-- <div class="flex align-center border-bottom">-->
<!-- <div class="title">规格</div>-->
<!-- <div class="flex-1 center">{{item.moldSpec}}</div>-->
<!-- </div>-->
<!-- <div class="flex justify-center py-1">-->
<!-- <img :id="'barcodeId' + index" class="img-print"></img>-->
<!-- <VueBarcode-->
<!-- value="172-12345678"-->
<!-- :options="{ widht:100,height:50,background:'rgba(255,255,255,.0)'}"-->
<!-- >-->
<!-- 条形码显示失败时的内容-->
<!-- </VueBarcode>-->
<!-- </div>-->
<!-- </div>-->
<!-- 打印多个 end -->
</div>
<!-- </div> -->
</div>
<!-- 打印 end -->
</div>
</template>
<script>
import jsutil from "@/common/js/util";
export default {
components: {
},
props:['wmsInfo'],
data() {
return {
printFlag: false,
printObj: {
id: "printId",
popTitle: "打印条形码", //页眉,不传文字默认显示项目名
extraCss: "https://www.google.com,https://www.google.com",
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style>html{ margin:0},body:{margin:0} <style>',
},
barcodeOptions: {
format: "CODE39",
height: 60,
displayValue: true,
// text: barCode,
font: "fantasy",
textAlign: "center",
textPosition: "bottom",
textMargin: 10,
fontSize: 14,
// width:100,
// background: "#eee",
lineColor: "#333333",
margin: 20
},
barcodeOptions1:{
widht:100,
height:50,
background:'rgba(255,255,255,.0)',
margin: 20
},
wmsData:{},
// 条形码长度是6位数
selection:[
{
moldCode:'000001',
moldSpec:'56*22'
},
{
moldCode:'000002',
moldSpec:'26*20'
},
{
moldCode:'000003',
moldSpec:'56*22'
},
{
moldCode:'000004',
moldSpec:'26*20'
},
{
moldCode:'000005',
moldSpec:'56*22'
},
{
moldCode:'000006',
moldSpec:'26*20'
},
]
}
},
mounted() {
let itemAttr = "{\"材质\":\"3\",\"厚\":\"4\",\"宽\":\"56\",\"长\":\"1\"}";
let data = JSON.parse(itemAttr)
let list1 = Object.entries(data)
// console.log(2, list1)
let list = [];
for (let key in data) {
list.push({
name: key,
value: data[key]
})
}
// console.log(1, list)
},
methods: {
printClick() {
this.printFlag = true;
//多个
// this.$nextTick(() => {
// this.selection.forEach((v,index)=>{
// let options = {
// format: 'CODE39',
// height: 30,
// displayValue:true,
// text:v.moldCode,
// font:"fantasy",
// textAlign:"center",
// textPosition:"bottom",
// textMargin:2,
// fontSize:12,
// background:"#eee",
// lineColor:"#333333",
// // margin:20
// }
// // JsBarcode('#barcodeId' + index, v.moldCode,options)
// })
// })
// 单个
let barCode = this.selection[0].moldCode;
let options = {
format: "CODE39",
height: 60,
displayValue: true,
text: barCode,
font: "fantasy",
textAlign: "center",
textPosition: "bottom",
textMargin: 10,
fontSize: 14,
background: "#eee",
lineColor: "#333333",
margin: 20
}
this.$nextTick(() => {
// JsBarcode("#barcodeId", barCode, options);
});
setTimeout(() => {
document.getElementById("trueBtn").click();
this.printFlag = false;
}, 1000);
},
},
watch: {
wmsInfo(value) {
if (jsutil.checkNull(value)){
this.wmsData = value;
}
console.log("仓库数据已传递:"+value)
}
}
}
</script>
<style media="print">
@page {
size: auto;
margin: 0;
padding: 0;
}
html {
/* margin: 0; */
}
#printId {
margin: 0;
padding: 0;
height: 98%;
}
body {
/* margin: 0; */
}
</style>
<style scoped>
/* 大小可根据打印纸调整 */
.flex{
display: flex;
}
.align-center{
align-items: center;
}
.justify-center{
justify-content: center;
}
.center{
text-align: center;
}
.flex-1{
flex: 1;
}
.py-1{
/* padding: 4px 0; */
}
.print-box {
margin: 0 !important;
padding: 0 !important;
width: 330px;
border: 1px solid black;
font-size: 12px;
transform: scale(0.7);
}
.img-print{
transform: scale(0.8);
}
.title {
width: 90px;
height: 20px;
font-size: 12px;
line-height: 20px;
text-align: center;
border-right: 1px solid black;
}
.border-bottom {
border-bottom: 1px solid black;
}
</style>
... ...
... ... @@ -15,8 +15,7 @@ import 'font-awesome/css/font-awesome.min.css'
import * as socketApi from './api/socket'
import '@/styles/index.scss'
import sys_init from '@/common/init/sys_init'
import Print from 'vue-print-nb'
// 条形组件
import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件
Vue.component('barcode', VueBarcode);
... ... @@ -42,6 +41,7 @@ Vue.use(ElementUI,
// 注册组件库
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(Print)
Vue.prototype.$axios = axios;
//NProgress.configure({ showSpinner: false });
... ...
... ... @@ -566,8 +566,8 @@
watch: {
parentHouseId(value) {
if (jsutil.checkNull(this.parentHouseId)){
this.queryInfo.houseid = this.parentHouseId;
if (jsutil.checkNull(value)){
this.queryInfo.houseid = value;
}
this.getList();
}
... ...
... ... @@ -109,6 +109,20 @@
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label=" " :label-width="formLabelWidth" prop="remark1">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">备&emsp;&emsp;注</div>
<el-input v-model="addForm.remark1"
type="textarea"
autosize
placeholder="备注信息"
style="float: left;width:calc(100% - 89px)"
>
</el-input>
</div>
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="left"><i class="el-icon-house"></i> 入库相关</el-divider>
<el-row>
... ... @@ -166,7 +180,7 @@
:fetch-suggestions="crmQuerySearch"
placeholder="请输入客户代码"
:trigger-on-focus="false"
value-key = "roleName"
value-key = "departmentid"
clearable
highlight-first-item
style="width: 100%"
... ... @@ -267,18 +281,19 @@
<!-- </el-row>-->
<el-divider content-position="left"><i class="el-icon-picture-outline"></i>图像操作</el-divider>
<el-row>
<el-col :span="6">
<el-col :span="12">
<el-form-item label=" " :label-width="formLabelWidth" prop="annex">
<el-input v-model="addForm.annex" autocomplete="off" suffix-icon="el-icon-document" clearable>
<template slot="prepend">图片地址</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-button type="success" icon="el-icon-edit" @click="imgdrawerVisible = true">入库图像</el-button>
</el-col>
<el-col :span="6">
<el-col :span="12">
<el-button-group style="float:right">
<el-button type="success" icon="el-icon-camera" @click="imgdrawerVisible = true">入库图像采集</el-button>
<el-button type="warning" icon="el-icon-edit" @click="otherDrawerVisible = true">其他入库信息</el-button>
</el-button-group>
</el-col>
<!-- <el-col :span="8">-->
... ... @@ -312,31 +327,12 @@
</el-col>
</el-row>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="apply_dialog.addDialog = false" >取 消</el-button>
<el-button type="primary" @click="dialogApply==='create'?add():edit()" >提 交</el-button>
</div>
</el-row>
<!-- 搜索区域-->
<el-row :gutter="10" class="toolbar">
<el-col :span="5.5">
<el-input v-model="queryInfo.waybill" prefix-icon="el-icon-search"
placeholder="货物单号" clearable>
<template slot="prepend">货物单号</template>
</el-input>
</el-col>
<el-col :span="5.5" :offset="1">
<el-input v-model="queryInfo.serialnumber" prefix-icon="el-icon-search"
placeholder="流水" clearable>
<template slot="prepend">流&emsp;&emsp;水</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" icon="el-icon-search" @click="getList()">
查询
</el-button>
<el-button type="success" icon="el-icon-edit" @click="applyAdd()">直接入库</el-button>
<el-button type="success" icon="el-icon-edit" @click="batchAdd()">批量入库</el-button>
<el-row class="toolbar">
<el-col :span="24">
<el-button type="success" icon="el-icon-download" @click="batchAdd()">批量入库</el-button>
<el-button type="primary" icon="el-icon-right" @click="nextBill()" style="float:right">下一票</el-button>
</el-col>
</el-row>
<!-- 列表区域-->
... ... @@ -384,12 +380,12 @@
<el-table-column
prop="pcs"
label="入库件数"
width="60">
width="70">
</el-table-column>
<el-table-column
prop="billweight"
label="入库重量"
width="60">
width="70">
</el-table-column>
<el-table-column
prop="feeweight"
... ... @@ -404,7 +400,7 @@
<el-table-column
prop="goodsvol"
label="入库体积"
width="60">
width="100">
</el-table-column>
<!-- <el-table-column-->
<!-- prop="area"-->
... ... @@ -488,24 +484,32 @@
fixed="right"
label="操作"
width="160">
<template slot="header" slot-scope="scope">
<el-button type="success" icon="el-icon-check" @click="applyAdd()">入&emsp;&emsp;库</el-button>
</template>
<template slot-scope="scope">
<el-row>
<Print :wmsInfo = "scope.row"></Print>
</el-row>
<el-row>
<el-button type="success" size="mini" @click="applyEdit(scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="applyDel(scope.$index,scope.row)">删除</el-button>
<el-button type="danger" size="mini" @click="applyDel(scope.$index,scope.row)">移除</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row style="margin-top: 10px" class="toolbar">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pageNum"
:page-size="queryInfo.pageSize"
:page-sizes="[10, 50, 100, 500]"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-row>
<!-- <el-row style="margin-top: 10px" class="toolbar">-->
<!-- <el-pagination-->
<!-- @size-change="handleSizeChange"-->
<!-- @current-change="handleCurrentChange"-->
<!-- :current-page="queryInfo.pageNum"-->
<!-- :page-size="queryInfo.pageSize"-->
<!-- :page-sizes="[10, 50, 100, 500]"-->
<!-- layout="total, sizes, prev, pager, next, jumper"-->
<!-- :total="total">-->
<!-- </el-pagination>-->
<!-- </el-row>-->
</el-card>
<el-drawer
title="我是标题"
... ... @@ -646,10 +650,12 @@
import packge from '@/api/nmms/packge'
import unusualOP from '@/api/wms/unusualOptions'
import damageOP from '@/api/wms/damageOptions'
import Print from '@/components/Print'
export default {
name: "inventroyrecord",
components:{Print},
data() {
var checkInputArea = (rule, value, callback) => {
let err = {
... ... @@ -720,7 +726,7 @@
otherDrawerVisible: false,
addForm: {
area: '',
feeweight: '',
feeweight: 0,
custel: '',
customer: '',
custcode: '',
... ... @@ -730,7 +736,7 @@
location:'',
opter:'',
opttime: '',
pcs: '',
pcs: 0,
totalpcs:0,
serialnumber: '',
station: '',
... ... @@ -841,7 +847,6 @@
const _this = this
selectInventroyrecords(this.queryInfo).then((response) => {
const res = response.data
console.log(response.data)
if (res.code !== '200') {
return _this.$message.error('获取消息收发记录,失败!')
}
... ... @@ -868,6 +873,7 @@
}
// 添加,成功
this.$message.success(res.msg);
this.tableData = [];
}).catch(error => {
this.$message.error(error.toString());
}).finally(()=>{
... ... @@ -879,9 +885,9 @@
// 未通过,表单预校验
if (!valid) return;
const wmslog = Object.assign({},this.addForm)
wmslog.opttime = new Date().format('yyyy-MM-dd hh:mm:ss')
this.tableData.push(wmslog)
this.addForm.serialnumber = this.serialNumber()
console.log(JSON.stringify(wmslog))
})
},
// 添加功能
... ... @@ -1226,6 +1232,12 @@
this.$message.error("合并体积录入数据出错")
}
},
nextBill(){
this.$refs.addForm.resetFields()
this.initUserInfo()
this.tableData = []
},
getSummaries(param) {
const { columns, data } = param;
const sums = [];
... ... @@ -1245,7 +1257,8 @@
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
const r = Number(prev) + Number(curr)
return new Number(r).toFixed(2);
} else {
return prev;
}
... ... @@ -1257,21 +1270,65 @@
});
return sums;
}
},
mounted() {
this.getAreaList();
this.getLocationList();
this.getRoles();
this.getSPHCode()
this.addForm.serialnumber = this.serialNumber()
initUserInfo(){
let userinfo = loginedUserInfo();
if (!jsutil.checkNull(userinfo) && !jsutil.checkNull(userinfo.username)){
this.$message.error("获取用户信息出错")
}else{
this.addForm.opter = userinfo.username
}
}
},
mounted() {
this.addForm = {
area: '',
feeweight: 22.68,
custel: '',
customer: '',
custcode: 'APX',
goodstype: '运单',
house:'',
ietype:'I',
location:'hx001',
opter:'wuliu',
opttime: '',
pcs: 17,
totalpcs:113,
serialnumber: '',
station: '',
status: '',
licenseplate: '豫A61CR7',
transtype:'销售入库',
goodssize:'120x230x78x17',
goodsvol:36.60,
waybill:'172-12345678',
billfhl:'FILE788',
//随货文件
hasFiles:false,
hasUnusual:false,
unusuals:[],
files:[],
damages:[],
sphCodes:[],
billweight:12.34,
totalweight:2573,
packingid:'PK',
remark:'',
remark1:'备注',
remark2:'',
remark3:'',
remark4:'',
remark5:'',
annex:''
}
this.getAreaList();
this.getLocationList();
this.getRoles();
this.getSPHCode()
this.addForm.serialnumber = this.serialNumber()
this.initUserInfo()
},
computed: {
},
... ...