<template>
|
<div class="outOperation">
|
<div class="outOperation-main">
|
<el-row type="flex" align="middle" class="main-top">
|
<el-col :span="2"><el-button type="primary" icon="iconfont icon-saoyisao" @click="scan">新增出库</el-button></el-col>
|
<el-col :span="20">
|
<TableSearch :show="true" :excel-name="'库存表'" :file="outFile" :get-list="getList" :search-data="searchData" :search-params="searchModel" :options="options" />
|
</el-col>
|
<!-- <el-col :span="2"><el-button type="primary" @click="printOrder ">打印押运单</el-button></el-col> -->
|
<el-col :span="2"><el-button type="primary" :disabled="outTable.length==0" @click="printOrder ">打印押运单</el-button></el-col>
|
</el-row>
|
<el-table
|
class="tableData"
|
:row-class-name="onTableRowClassName"
|
:row-style="{height:0+'px'}"
|
:cell-style="{padding:8+'px',textAlign: 'center'}"
|
:header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}"
|
:stripe="true"
|
:data="tableData"
|
:border="true"
|
header-row-class-name="table-header"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column
|
label="多选"
|
type="selection"
|
width="55"
|
>
|
<!-- <el-checkbox></el-checkbox> -->
|
</el-table-column>
|
<el-table-column
|
prop="productCode"
|
label="产品编码"
|
/>
|
<el-table-column
|
prop="productName"
|
label="产品名称"
|
/>
|
<el-table-column
|
prop="productModel"
|
label="规格型号"
|
>
|
<template slot="header" slot-scope="scope">
|
<span>规格型号</span>
|
<span :class="isMerge?'el-icon-sort-up':'el-icon-sort-down'" :style="{marginLeft:'5px'}" @click="merge" />
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="unit"
|
label="单位"
|
/>
|
<el-table-column
|
prop="incomingQuantity"
|
label="入库数量"
|
/>
|
<el-table-column
|
prop="addPerson"
|
label="入库人"
|
/>
|
<el-table-column
|
v-if="!isMerge"
|
prop="createTime"
|
label="出库日期"
|
/>
|
</el-table>
|
<div class="outOperation-foot">
|
<el-pagination
|
:current-page="searchModel.pageNo"
|
:page-sizes="[10, 15, 20, 25]"
|
:page-size="searchModel.pageSize"
|
layout="->, total, sizes, prev, pager, next, jumper"
|
:total="total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
|
<el-dialog title="扫描出库" :visible.sync="outFormVisible">
|
<el-form :model="outParams" label-position="left">
|
<el-table
|
:height="250"
|
:max-height="250"
|
:row-class-name="onTableRowClassName"
|
:row-style="{height:0+'px'}"
|
:cell-style="{padding:8+'px',textAlign: 'center'}"
|
:header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}"
|
:stripe="true"
|
:border="true"
|
header-row-class-name="table-header"
|
:data="this.outTable.slice(0,outPageParams.length)"
|
>
|
<el-table-column property="addPerson" label="序号" />
|
<el-table-column property="productCode" label="产品编码" />
|
<el-table-column property="productNameId" label="产品名称" />
|
<el-table-column property="productModelId" label="规格型号" />
|
<el-table-column property="unit" label="单位" />
|
<el-table-column property="incomingQuantity" label="入库数量" />
|
<el-table-column property="addPerson" label="入库人" />
|
<!-- <el-table-column property="address" label="入库日期"></el-table-column> -->
|
</el-table>
|
<div :style="{display: 'flex',justifyContent:'center',marginTop: '10px'}">
|
<el-pagination
|
:current-page="outPageParams.pageNo"
|
:page-sizes="[3, 4, 5, 6]"
|
:page-size="outPageParams.pageSize"
|
layout="->, total, sizes, prev, pager, next, jumper"
|
:total="outTable.length"
|
@size-change="outHandleSizeChange"
|
@current-change="outHandleCurrentChange"
|
/>
|
</div>
|
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="orderFormVisible = true">生成押运单</el-button>
|
<el-button @click="outFormVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog title="押运单打印" :visible.sync="orderFormVisible" @close="orderFormClose">
|
<div id="order">
|
<el-form label-position="right" :model="orderParams">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="订单号:" :label-width="formLabelWidth">
|
<el-input v-model="orderParams.orderNumber" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="押运单编号:" :label-width="formLabelWidth">
|
<el-input v-model="orderParams.escortNoteNumber" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="客户订单号:" :label-width="formLabelWidth">
|
<el-input v-model="orderParams.customerOrderNumber" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="发货日期:" :label-width="formLabelWidth">
|
<el-date-picker
|
v-model="orderParams.createTime"
|
format="yyyy-MM-dd HH:mm"
|
type="datetime"
|
placeholder="选择日期时间"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="客户名称:" :label-width="formLabelWidth">
|
<el-input v-model="orderParams.customerName" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="发货人:" :label-width="formLabelWidth">
|
<el-input v-model="orderParams.consignor" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col>
|
<el-form-item label="到货地址:" :label-width="formLabelWidth">
|
<el-input v-model="orderParams.arrivalAddress" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col>
|
<el-form-item label="收货联系人:" :label-width="formLabelWidth">
|
<el-input v-model="orderParams.receivingContact" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col>
|
<el-form-item label="手机号:" :label-width="formLabelWidth">
|
<el-input v-model="orderParams.cellPhoneNumber" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col>
|
|
<el-form-item>
|
<el-table
|
:row-class-name="onTableRowClassName"
|
:row-style="{height:0+'px'}"
|
:cell-style="{padding:8+'px',textAlign: 'center'}"
|
:header-cell-style="{borderRight:'0px',textAlign: 'center',background:'#52626F',color:'#fff', height:'10px', padding:'0px'}"
|
:stripe="true"
|
:border="true"
|
:data="outTable"
|
>
|
<el-table-column property="productName" label="产品名称" />
|
<el-table-column property="productModel" label="规格型号" />
|
<el-table-column property="unit" label="单位" />
|
<el-table-column property="incomingQuantity" label="发库数量" />
|
</el-table>
|
</el-form-item>
|
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="goToPrint">打 印</el-button>
|
<el-button @click="orderFormVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog title="押运单打印" :visible.sync="templateOrderVisible" @close="templateOrderClose">
|
<div id="templateOrder" class="templateOrder">
|
<h3>押运单</h3>
|
<div class="templateOrder-main">
|
<div class="main-row">
|
<div class="flex-2">订单号：</div>
|
<div class="flex-8">{{ orderParams.orderNumber }}</div>
|
<div class="flex-2">押运单编号：</div>
|
<div class="flex-8">{{ orderParams.escortNoteNumber }}</div>
|
</div>
|
<div class="main-row">
|
<div class="flex-2">客户订单号：</div>
|
<div class="flex-8">{{ orderParams.customerOrderNumber }}</div>
|
<div class="flex-2">发货日期：</div>
|
<div class="flex-8">{{ orderParams.createTime }}</div>
|
</div>
|
<div class="main-row">
|
<div class="flex-2">客户名称：</div>
|
<div class="flex-8">{{ orderParams.customerName }}</div>
|
<div class="flex-2">发货人：</div>
|
<div class="flex-8">{{ orderParams.consignor }}</div>
|
</div>
|
<div class="main-row">
|
<div class="flex-2">到货地址：</div>
|
<div class="flex-18">{{ orderParams.arrivalAddress }}</div>
|
</div>
|
<div class="main-row">
|
<div class="flex-2">收货联系人：</div>
|
<div class="flex-18">{{ orderParams.receivingContact }}</div>
|
</div>
|
<div class="main-row">
|
<div class="flex-2">手机号：</div>
|
<div class="flex-18">{{ orderParams.cellPhoneNumber }}</div>
|
</div>
|
<div class="main-row">
|
<!-- <div class="flex-2">手机号</div> -->
|
<div class="flex-18" :style="{'textAlign': 'center'}">
|
<h4>产品列表</h4>
|
</div>
|
</div>
|
<div class="main-row">
|
<div class="flex-4">产品名称</div>
|
<div class="flex-4">规格型号</div>
|
<div class="flex-4">单位</div>
|
<div class="flex-4">发货数量</div>
|
</div>
|
<div v-for="item in outTable" :key="item.id" class="main-row">
|
<div class="flex-4">{{ item.productName }}</div>
|
<div class="flex-4">{{ item.productModel }}</div>
|
<div class="flex-4">{{ item.unit }}</div>
|
<div class="flex-4">{{ item.incomingQuantity }}</div>
|
</div>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button v-print="printObj" type="primary">按模板打印</el-button>
|
<el-button @click="templateOrderVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
import { getList, selectCacheOfIn, outOperation, outFile } from '@/api/addOperation'
|
import { selectAllName } from '@/api/productName'
|
import { selectAllModel } from '@/api/productModel'
|
import TableSearch from '@/components/TableSearch'
|
import { mapGetters } from 'vuex'
|
export default {
|
filters: {
|
statusFilter(status) {
|
const statusMap = {
|
published: 'success',
|
draft: 'gray',
|
deleted: 'danger'
|
}
|
return statusMap[status]
|
}
|
},
|
components: {
|
TableSearch
|
},
|
data() {
|
return {
|
templateOrderVisible: false,
|
outFile,
|
printObj: {
|
id: 'templateOrder', // 打印的区域
|
// preview: true, // 预览工具是否启用
|
previewTitle: '打印押运单', // 预览页面的标题
|
previewBeforeOpenCallback(vue) {
|
console.log('正在加载预览窗口')
|
},
|
previewOpenCallback(vue) {
|
console.log('已经加载完预览窗口')
|
},
|
clickMounted: (vue) => {
|
console.log('触发点击打印回调')
|
vue.isShowPrint = true // 弹框显示条码
|
},
|
beforeOpenCallback(vue) {
|
console.log('打开之前', vue.barcodeNum)
|
},
|
openCallback(vue) {
|
// let time =vue.orderParams.createTime
|
// vue.orderParams.createTime = `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}`
|
// vue.orderParams.listId = vue.outCodeTable
|
// vue.orderParams.outPerson = vue.name
|
// outOperation(vue.orderParams).then((res) => {
|
// vue.$message.success("成功出库")
|
// vue.isShowPrint = false // 关闭条码显示弹框
|
// })
|
console.log('执行了打印', vue.barcodeNum)
|
},
|
clickMounted(vue) {
|
console.log(1111)
|
console.log(vue.orderParams.createTime)
|
outOperation({ ...vue.orderParams, outPerson: vue.name, listCode: vue.outCodeTable }).then((res) => {
|
vue.orderFormVisible = false
|
vue.outCodeTable = []
|
vue.outTable = []
|
vue.tableData = []
|
vue.fetchData()
|
console.log('清空数据，同时刷新数据')
|
vue.$message.success('成功出库')
|
vue.fetchData()
|
vue.isShowPrint = false // 关闭条码显示弹框
|
}, () => {
|
vue.$message.err('请重新打印')
|
}).finally(() => {
|
vue.templateOrderVisible = false
|
vue.orderParams = {}
|
})
|
|
console.log('执行了打印', vue.barcodeNum)
|
}
|
},
|
outPageParams: {
|
pageNo: 1,
|
pageSize: 3
|
},
|
isMerge: false,
|
outTable: [],
|
outCodeTable: [],
|
outParams: {},
|
outFormVisible: false,
|
getList,
|
total: 0,
|
options: [],
|
searchModel: {
|
pageNo: 1,
|
pageSize: 10,
|
productModel: '',
|
endTime: '',
|
startTime: ''
|
},
|
formLabelWidth: '120px',
|
orderFormVisible: false,
|
orderParams: {
|
orderNumber: '',
|
escortNoteNumber: '',
|
customerOrderNumber: '',
|
createTime: '',
|
customerName: '',
|
consignor: '',
|
arrivalAddress: '',
|
receivingContact: '',
|
cellPhoneNumber: ''
|
},
|
total: 0,
|
tableData: [],
|
contentTable: [],
|
isScan: false
|
}
|
},
|
watch: {
|
isScan(to) {
|
|
}
|
},
|
created() {
|
|
this.fetchData()
|
this.setOptions()
|
},
|
beforeDestroy() {
|
window.document.onkeypress = null
|
},
|
methods: {
|
templateOrderClose() {
|
this.orderFormClose()
|
},
|
orderFormClose() {
|
// 关闭打印押运单输入弹窗清空数据
|
for (const key in this.orderParams) {
|
this.orderParams[key] = ''
|
}
|
// this.outTable = []
|
},
|
goToPrint() {
|
let ok = false
|
for (const key in this.orderParams) {
|
if (!this.orderParams[key]) {
|
ok = true
|
}
|
}
|
if (ok) {
|
return this.$message.error('请填写完整参数')
|
}
|
|
console.log('需要打印的参数', this.orderParams)
|
const time = this.orderParams.createTime
|
this.orderParams.createTime = `${time.getFullYear()}-${time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1}-${time.getDate() < 10 ? '0' + time.getDate() : time.getDate()} ${time.getHours() < 10 ? '0' + time.getHours() : time.getHours()}:${time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()}`
|
console.log('需要打印的东西==>', this.outTable)
|
// this.orderFormVisible = false
|
this.templateOrderVisible = true
|
},
|
merge() {
|
this.isMerge = !this.isMerge
|
if (this.isMerge) {
|
this.contentTable = JSON.parse(JSON.stringify(this.tableData))
|
} else {
|
this.tableData = JSON.parse(JSON.stringify(this.contentTable))
|
return
|
}
|
|
this.tableData = this.tableData.reduce((arr, next) => {
|
for (const item of arr) {
|
if (item.productModel === next.productModel) {
|
item.children.push(next.id)
|
item.incomingQuantity = item.incomingQuantity + next.incomingQuantity
|
return arr
|
}
|
}
|
next.children = [next.id]
|
arr.push(next)
|
return arr
|
// arr.push(next)
|
}, [])
|
console.log(this.tableData)
|
},
|
printOrder() {
|
console.log(this.outCodeTable, this.outTable)
|
this.orderFormVisible = true
|
},
|
addScanMonitor() {
|
window.document.onkeypress = e => {
|
console.log(e)
|
if (window.event) { // IE
|
this.nextCode = e.keyCode
|
} else if (e.which) { // Netscape/Firefox/Opera
|
this.nextCode = e.which
|
}
|
|
if (e.which === 13) { // 键盘回车事件
|
// if (this.code.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
|
console.log(new Date().getTime())
|
if (new Date().getTime() - this.lastTime > 30) {
|
return this.$message.error('扫码时不可通过键盘输入')
|
}
|
// if (this.code.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
|
console.log('扫码结束,条形码：', this.code)
|
for (const item of this.tableData) {
|
if (item.id == this.code) {
|
this.$message.error('请勿重复扫描')
|
this.handleSubmitScanning()
|
return
|
}
|
}
|
// 发送请求
|
selectCacheOfIn({ code: this.code }).then(res => {
|
this.$message.success(`${this.code}扫描成功`)
|
const { data } = res
|
if (data) this.tableData.push(data)
|
})
|
this.scanningForm.scanCode = this.code
|
this.lastCode = ''
|
this.lastTime = ''
|
this.handleSubmitScanning()
|
return
|
}
|
|
this.nextTime = new Date().getTime()
|
if (!this.lastTime && !this.lastCode) {
|
this.code = '' // 清空上次的条形码
|
// 继续扫描一下条前关闭弹窗
|
// this.handleCloseTipsVisible()
|
this.code = this.code + '' + e.key
|
console.log('扫码开始---', this.code)
|
}
|
if (this.lastCode && this.lastTime && this.nextTime - this.lastTime > 500) { // 当扫码前有keypress事件时,防止首字缺失
|
this.code = e.key
|
console.log('防止首字缺失。。。', this.code)
|
} else if (this.lastCode && this.lastTime) {
|
this.code = this.code + '' + e.key
|
console.log('扫码中。。。', this.code)
|
}
|
this.lastCode = this.nextCode
|
this.lastTime = this.nextTime
|
}
|
},
|
handleSelectionChange(val) {
|
if (this.isMerge) {
|
console.log(val)
|
const arrChildren = val.map((item) => item.children)
|
console.log(arrChildren)
|
this.outCodeTable = arrChildren.reduce((arr, next) => {
|
arr = [...arr, ...next]
|
return arr
|
}, [])
|
console.log(this.contentTable, this.outCodeTable)
|
this.contentTable.forEach(item => {
|
if (this.outCodeTable.indexOf(item.id) > -1) {
|
this.outTable.push(item)
|
}
|
})
|
} else {
|
this.outTable = val
|
this.outCodeTable = this.outTable.map(item => item.id)
|
}
|
console.log(this.outTable, this.outCodeTable)
|
},
|
scan(e) {
|
console.log('开始扫码出库')
|
this.$message.success('请开始扫码出库')
|
this.tableData = []
|
this.addScanMonitor()
|
e.srcElement.blur()
|
},
|
async setOptions() {
|
const { data: nameRes } = await selectAllName()
|
// console.log(nameRes)
|
const nameArr = nameRes.productNames.map(item => {
|
return { value: item.id, label: item.productName }
|
})
|
for (const nameItem of nameArr) {
|
const { data } = await selectAllModel({ productNameId: nameItem.value })
|
|
this.options = [...this.options, ...data.models]
|
/* nameItem.children = data.models.map(item => {
|
return { value: item.id, label: item.productModel }
|
}) */
|
}
|
this.options = this.options.map(item => {
|
return { label: item.productModel, value: item.productModel, productCode: item.productCode }
|
})
|
// console.log(this.options)
|
},
|
searchData(res) {
|
console.log(res)
|
const { row, total, productModel, startTime, endTime } = res
|
this.tableData = row
|
this.total = total
|
this.searchModel.productModel = productModel
|
this.searchModel.startTime = startTime
|
this.searchModel.endTime = endTime
|
window.document.onkeypress = undefined
|
},
|
onTableRowClassName({ row, rowIndex }) {
|
if (rowIndex % 2 != 0) {
|
return 'onAcitve'
|
} else {
|
return ''
|
}
|
},
|
fetchData() {
|
this.listLoading = true
|
const obj = {}
|
const arr = Object.keys(this.searchModel).filter(key => this.searchModel[key])
|
arr.forEach(item => obj[item] = this.searchModel[item])
|
getList(obj).then(response => {
|
this.tableData = response.data.row
|
this.total = response.data.total
|
this.listLoading = false
|
// console.log(this.tableData)
|
})
|
},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`)
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`)
|
},
|
outHandleSizeChange(val) {
|
console.log(`每页 ${val} 条`)
|
},
|
outHandleCurrentChange(val) {
|
console.log(`当前页: ${val}`)
|
this.outPageParams.pageNo = val
|
// this.fetchData()
|
// console.log()
|
|
// console.log(this.addTable.slice((this.outPageParams.pageSize * (val - 1)), (this.outPageParams.pageSize * (val - 1)) + this.outPageParams.pageSize))
|
}
|
},
|
computed: {
|
...mapGetters([
|
'sidebar',
|
'avatar',
|
'name',
|
'allTab'
|
])
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../styles/variables.scss';
|
::v-deep .el-table__header .el-checkbox{
|
display:none;
|
}
|
::v-deep .tableData .el-table__header th:nth-child(1) .cell::before{
|
content: '多选';
|
}
|
.templateOrder{
|
border: 1px solid #000;
|
padding: 8px;
|
>h3{
|
text-align: center;
|
}
|
&-main{
|
border-top: 1px solid #000;
|
border-left: 1px solid #000;
|
.main-row{
|
display: flex;
|
font-size: 12px;
|
>div{
|
border-bottom: 1px solid #000;
|
border-right: 1px solid #000;
|
height: 40px;
|
line-height: 20px;
|
padding: 10px;
|
// margin: 24px;
|
>h4{
|
margin: 0;
|
}
|
}
|
.flex-2{
|
min-width: 110px;
|
max-width: 110px;
|
text-align: right;
|
padding: 10px 6px;
|
}
|
.flex-4{
|
flex: 1;
|
text-align: center;
|
}
|
.flex-8{
|
flex: 8;
|
}
|
.flex-18{
|
flex: 18;
|
}
|
}
|
|
}
|
}
|
|
.outOperation {
|
min-height: calc(100vh - 100px);
|
padding: 25px;
|
background: $mainBg;
|
display: flex;
|
flex-direction: column;
|
.dialog-footer{
|
text-align: center;
|
display: flex;
|
justify-content: space-around;
|
}
|
.outOperation-main{
|
background: #fff;
|
padding: 20px;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.main-top{}
|
.table-header{
|
background: #6095FB;
|
}
|
::v-deep .el-table{
|
flex: 1;
|
// display: flex;
|
// flex-direction: column;
|
::v-deep .onAcitve td{
|
background-color: #F2F2F2 !important;
|
}
|
}
|
.outOperation-foot{
|
margin-top: 25px;
|
.el-pagination{
|
display: flex;
|
justify-content: right;
|
}
|
}
|
}
|
}
|
</style>
|
