<template>
|
<div class="addOperation">
|
<div class="addOperation-main">
|
<el-row type="flex" align="middle" class="main-top">
|
<el-col :span="2"><el-button icon="el-icon-plus" type="primary" @click="addOperation">新增入库</el-button></el-col>
|
<el-col :span="20">
|
<TableSearch :show="true" :excel-name="'入库表'" :file="file" :get-list="getList" :search-data="searchData" :search-params="searchModel" :options="options" />
|
</el-col>
|
<el-col :span="2"><el-button icon="iconfont icon-24px " @click="printFormVisible = true">条码打印</el-button></el-col>
|
</el-row>
|
<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"
|
:data="tableData"
|
:border="true"
|
header-row-class-name="table-header"
|
>
|
<el-table-column
|
label="序号"
|
>
|
<template v-slot="scope">
|
{{ (addPageParams.pageNo-1) * addPageParams.pageSize + scope.$index + 1 }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-for="(item, index) in getKeys()"
|
v-if="item.show"
|
:key="index"
|
:prop="item.prop"
|
:label="item.name"
|
/>
|
</el-table>
|
<div class="addOperation-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="addFormVisible" @close="addFormClose">
|
<el-form :model="addParams" 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.addTable.slice(0, addPageParams.pageSize)"
|
>
|
<!-- <el-table-column property="addPerson" label="序号" >
|
</el-table-column> -->
|
<el-table-column property="productCode" label="产品编码" />
|
<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-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="addPageParams.pageNo"
|
:page-sizes="[3, 4, 5, 6]"
|
:page-size="addPageParams.pageSize"
|
layout="->, total, sizes, prev, pager, next, jumper"
|
:total="addTable.length"
|
@size-change="inHandleSizeChange"
|
@current-change="inHandleCurrentChange"
|
/>
|
</div>
|
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="storage">确 定</el-button>
|
<el-button @click="addFormVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog title="条码打印" :visible.sync="printFormVisible">
|
<el-form :model="printParams" label-position="left">
|
<el-row :gutter="20">
|
<el-col>
|
<el-form-item label="产品名称/规格:" :label-width="formLabelWidth">
|
<el-cascader
|
v-model="chooseTypeName"
|
:options="scanTypeNameOptions"
|
@change="handleChange"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col>
|
<el-form-item label="产品编码:" :label-width="formLabelWidth">
|
<el-input :value="printParams.productCode" :disabled="true" 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="printParams.unit" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="入库数量:" :label-width="formLabelWidth">
|
<el-input v-model="printParams.incomingQuantity" type="number" autocomplete="off" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="print">确 定</el-button>
|
<el-button @click="printFormVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog :visible.sync="printVisible" @close="printFormClose">
|
<div class="printMian">
|
<div id="printMe">
|
<vue-barcode :height="50" :width="2" :value="code" />
|
<div>
|
<div>{{ printParams.productName }}</div>
|
<div>{{ printParams.incomingQuantity }}</div>
|
<div>{{ printParams.unit }}</div>
|
</div>
|
<div>
|
<div :style="{flex:'2', paddingRight:'1px'}">2022-01-01 10:00</div>
|
<div>{{ printParams.productModel }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="btn" :style="{display: 'flex',justifyContent: 'center'}">
|
<el-button v-print="printObj" :style="{width:'8cm',margin:'10px'}" type="primary">打印</el-button>
|
|
</div>
|
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getList, file, addCache, selectCache, add } from '@/api/addOperation'
|
import { selectAllName } from '@/api/productName'
|
import { selectAllModel } from '@/api/productModel'
|
import { mapGetters } from 'vuex'
|
import TableSearch from '@/components/TableSearch'
|
import VueBarcode from 'vue-barcode'
|
|
export default {
|
filters: {
|
statusFilter(status) {
|
const statusMap = {
|
published: 'success',
|
draft: 'gray',
|
deleted: 'danger'
|
}
|
return statusMap[status]
|
}
|
},
|
data() {
|
return {
|
printObj: {
|
id: 'printMe', // 打印的区域
|
// preview: false, // 预览工具是否启用
|
previewTitle: '打印条码', // 预览页面的标题
|
popTitle: '', // 打印页面的页眉
|
previewBeforeOpenCallback(vue) {
|
console.log('正在加载预览窗口')
|
},
|
previewOpenCallback(vue) {
|
console.log('已经加载完预览窗口')
|
},
|
clickMounted: (vue) => {
|
console.log('触发点击打印回调')
|
// vue.isShowPrint = true // 弹框显示条码
|
},
|
beforeOpenCallback(vue) {
|
console.log('打开之前', vue.barcodeNum)
|
},
|
openCallback(vue) {
|
// vue.isShowPrint = false // 关闭条码显示弹框
|
// 清空条码打印数据
|
vue.printFormVisible = false
|
vue.printVisible = false
|
vue.chooseTypeName = ''
|
for (const key in vue.printParams) {
|
vue.printParams[key] = ''
|
}
|
console.log('执行了打印', vue.barcodeNum)
|
}
|
},
|
printVisible: false,
|
file,
|
getList,
|
options: [],
|
chooseTypeName: {},
|
scanData: {},
|
scanTypeNameOptions: [],
|
total: 0,
|
searchModel: {
|
pageNo: 1,
|
pageSize: 10,
|
endTime: '',
|
productModel: '',
|
startTime: ''
|
},
|
tableData: [],
|
addFormVisible: false,
|
printFormVisible: false,
|
printParams: {
|
addPerson: '',
|
incomingQuantity: '',
|
productModelId: '',
|
productNameId: '',
|
unit: '',
|
productCode: ''
|
},
|
showAddTable: [],
|
addTable: [],
|
addCodeTable: [],
|
addParams: {
|
name: '', // 产品名称
|
specs: '', // 产品规格
|
unit: '', // 单位
|
number: '', // 数量
|
depositor: '', // 入库人，可以为入库人id
|
date: '' // 时间
|
},
|
formLabelWidth: '120px',
|
addPageParams: {
|
pageNo: 1,
|
pageSize: 3
|
},
|
code: ''
|
}
|
},
|
computed: {
|
...mapGetters([
|
'sidebar',
|
'avatar',
|
'name',
|
'addTab'
|
])
|
},
|
watch: {
|
addFormVisible(to) {
|
if (!to) {
|
this.addTable = []
|
this.addCodeTable = []
|
window.document.onkeypress = undefined
|
}
|
}
|
|
},
|
created() {
|
this.fetchData()
|
this.setOptions()
|
// console.log(this.$route,this.$router)
|
},
|
components: {
|
TableSearch,
|
VueBarcode
|
},
|
mounted() {
|
console.log(this.addTab[0])
|
},
|
beforeDestroy() {
|
window.document.onkeypress = null
|
},
|
methods: {
|
getKeys() {
|
return this.$store.state.tableKey.allTab[0].keys
|
},
|
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) { // 键盘回车事件
|
console.log(new Date().getTime())
|
if (new Date().getTime() - this.lastTime > 40) {
|
return this.$message.error('扫码时不可通过键盘输入')
|
}
|
// if (this.code.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
|
console.log('扫码结束,条形码：', this.code)
|
// 发送请求
|
if (this.addCodeTable.includes(this.code)) {
|
this.$message.error('请勿重复扫描')
|
this.handleSubmitScanning()
|
return
|
}
|
selectCache({ code: this.code }).then(res => {
|
// 通过扫描条码查询产品信息加入入库数组中
|
this.$message.success(`${this.code}扫描成功`)
|
res.data.addPerson = this.name
|
console.log(res, this.addCodeTable)
|
this.addTable.push(res.data)
|
this.addCodeTable.push(this.code)
|
})
|
|
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
|
}
|
},
|
// 关闭扫描入库弹窗
|
addFormClose() {
|
console.log('清空数据')
|
// 清空数据
|
this.addTable = []
|
this.addCodeTable = []
|
},
|
// 点击新增入库
|
addOperation() {
|
this.addFormVisible = true
|
this.addScanMonitor()
|
},
|
printFormClose() {
|
for (const key in this.printParams) {
|
this.printParams[key] = ''
|
}
|
this.chooseTypeName = ''
|
},
|
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 })
|
// console.log(data)
|
this.options = [...this.options, ...data.models]
|
nameItem.children = data.models.map(item => {
|
return { value: item.id, label: item.productModel, productCode: item.productCode }
|
})
|
}
|
|
this.options = this.options.map(item => {
|
return { label: item.productModel, value: item.productModel, productCode: item.productCode }
|
})
|
this.scanTypeNameOptions = nameArr
|
// console.log(this.options)
|
// console.log(nameArr)
|
},
|
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
|
},
|
handleChange(value) {
|
console.log(value)
|
this.printParams.productNameId = value[0]
|
this.printParams.productModelId = value[1]
|
console.log(this.scanTypeNameOptions)
|
const nameObj = this.scanTypeNameOptions.filter(item => item.value === value[0])
|
console.log(nameObj[0].label)
|
this.printParams.productName = nameObj[0].label
|
const children = nameObj[0].children
|
this.printParams.productCode = children.filter(item => item.value === value[1])[0].productCode
|
console.log(children.filter(item => item.value === value[1])[0].label)
|
this.printParams.productModel = children.filter(item => item.value === value[1])[0].label
|
},
|
onTableRowClassName({ row, rowIndex }) {
|
if (rowIndex % 2 != 0) {
|
return 'onAcitve'
|
} else {
|
return ''
|
}
|
},
|
storage() {
|
// 输出入库参数
|
if (this.addCodeTable.length === 0) return this.$message.error('请先扫描数据入库')
|
add({ code: this.addCodeTable, addPerson: this.name }).then(() => {
|
this.addTable = []
|
this.addCodeTable = []
|
this.fetchData()
|
this.addFormVisible = false
|
this.$message.success('入库成功')
|
})
|
},
|
async print() {
|
console.log('生成条码')
|
this.printParams.addPerson = this.name
|
console.log(this.printParams)
|
const res = await addCache(this.printParams)
|
this.code = res.message
|
this.printFormVisible = false
|
// for( key in this.printParams){
|
// this.printParams[key] = ''
|
// }
|
this.printVisible = true
|
},
|
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])
|
console.log(obj)
|
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}`)
|
this.searchModel.pageNo = val
|
this.fetchData()
|
},
|
inHandleSizeChange(val) {
|
console.log(`每页 ${val} 条`)
|
},
|
inHandleCurrentChange(val) {
|
console.log(`当前页: ${val}`)
|
this.addPageParams.pageNo = val
|
// console.log(this.addTable.slice((this.addPageParams.pageSize * (val - 1)), (this.addPageParams.pageSize * (val - 1)) + this.addPageParams.pageSize))
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.printMian{
|
display: flex;
|
justify-content: center;
|
.btn{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
.el-button{
|
width: 100%;
|
}
|
}
|
}
|
@import '../../styles/variables.scss';
|
#printMe{
|
// height: 4cm;
|
// visibility:hidden;
|
width: 8cm;
|
display: flex;
|
flex-direction: column;
|
text-align: center;
|
img{
|
align-items: center;
|
display: inline-block;
|
text-align: center;
|
width: 8cm;
|
height: 1.5cm;
|
}
|
>div{
|
width: 100%;
|
display: flex;
|
>div{
|
flex: 1;
|
// height: 30px;
|
border: 1px solid #ddd;
|
padding: 2px;
|
}
|
}
|
}
|
@media print {
|
@page {
|
size: 8cm 4cm !important;
|
// margin: 0cm;
|
// padding: 0cm;
|
// size: portrait;
|
// border: 1px solid #ddd;
|
|
}
|
|
}
|
.addOperation {
|
min-height: calc(100vh - 100px);
|
max-height: calc(100vh - 100px);
|
padding: 25px;
|
// margin: 25px;
|
background: $mainBg;
|
display: flex;
|
flex-direction: column;
|
|
.dialog-footer{
|
text-align: center;
|
|
}
|
.addOperation-main{
|
background: #fff;
|
padding: 20px;
|
flex: 80%;
|
display: flex;
|
flex-direction: column;
|
.main-top{}
|
.table-header{
|
background: #6095FB;
|
}
|
::v-deep .el-table{
|
flex: 1;
|
::v-deep .onAcitve td{
|
background-color: #F2F2F2 !important;
|
}
|
}
|
.addOperation-foot{
|
// flex: 20%;
|
margin-top: 25px;
|
.el-pagination{
|
display: flex;
|
justify-content: right;
|
}
|
}
|
}
|
|
}
|
</style>
|
