3 changed files with 422 additions and 0 deletions
@ -0,0 +1,11 @@ |
|||||
|
import {createAPI} from '../../utils/httpRequest' |
||||
|
|
||||
|
export const exportPallet = (data) => createAPI(`/catch/pallet/export`,'post',data,'download') |
||||
|
|
||||
|
export const savePallet = (data) => createAPI(`/catch/pallet/save`,'post',data) |
||||
|
export const saveBatchPallet = (data) => createAPI(`/catch/pallet/save/batch`,'post',data) |
||||
|
export const removePallet = (data) => createAPI(`/catch/pallet/remove`,'post',data) |
||||
|
export const removeAllPallet = (data) => createAPI(`/catch/pallet/remove/all`,'post',data) |
||||
|
export const removePalletById = (data) => createAPI(`/catch/pallet/remove/${data.id}`,'post',data) |
||||
|
export const queryPallet = (data) => createAPI(`/catch/pallet/list`,'post',data) |
||||
|
export const queryPalletPage = (data) => createAPI(`/catch/pallet/${data.no}/${data.size}`,'post',data) |
||||
@ -0,0 +1,403 @@ |
|||||
|
<script> |
||||
|
import { |
||||
|
exportPallet, |
||||
|
queryPalletPage, removeAllPallet, |
||||
|
removePallet, |
||||
|
removePalletById, |
||||
|
saveBatchPallet, |
||||
|
savePallet |
||||
|
} from '../../../api/pallet' |
||||
|
|
||||
|
export default { |
||||
|
name: 'pallet', |
||||
|
data(){ |
||||
|
return{ |
||||
|
span:3, |
||||
|
queryParams:{ |
||||
|
palletNo:'', |
||||
|
type:'add', |
||||
|
no:1, |
||||
|
size:50, |
||||
|
}, |
||||
|
dataList:[], |
||||
|
queryLoading:false, |
||||
|
total:0, |
||||
|
palletList:[], |
||||
|
batchVisible:false, |
||||
|
batchParams:{ |
||||
|
palletNo:'', |
||||
|
}, |
||||
|
saveLoading:false, |
||||
|
columnList:[ |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 40000, |
||||
|
serialNumber: '40000TablePalletNo', |
||||
|
tableId: "40000Table", |
||||
|
tableName: "Pallet Table", |
||||
|
columnProp: "palletNo", |
||||
|
headerAlign: "center", |
||||
|
align: "center", |
||||
|
columnLabel: "Pallet Label", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 80 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 40000, |
||||
|
serialNumber: '40000TableSN', |
||||
|
tableId: "40000Table", |
||||
|
tableName: "Pallet Table", |
||||
|
columnProp: "sn", |
||||
|
headerAlign: "center", |
||||
|
align: "center", |
||||
|
columnLabel: "SN", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 100 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 40000, |
||||
|
serialNumber: '40000TableSKU', |
||||
|
tableId: "40000Table", |
||||
|
tableName: "Pallet Table", |
||||
|
columnProp: "sku", |
||||
|
headerAlign: "center", |
||||
|
align: "left", |
||||
|
columnLabel: "SKU", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 80 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 40000, |
||||
|
serialNumber: '40000TablePartDesc', |
||||
|
tableId: "40000Table", |
||||
|
tableName: "Pallet Table", |
||||
|
columnProp: "partDesc", |
||||
|
headerAlign: "center", |
||||
|
align: "left", |
||||
|
columnLabel: "Part Description", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 10, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 120 |
||||
|
}, |
||||
|
], |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
handleScanPallet(){ |
||||
|
if (this.queryParams.type === 'add'){ |
||||
|
this.handleSave(); |
||||
|
}else { |
||||
|
this.handleRemove(); |
||||
|
} |
||||
|
}, |
||||
|
handleSave(){ |
||||
|
let params = { |
||||
|
site:this.$store.state.user.site, |
||||
|
palletNo:this.queryParams.palletNo, |
||||
|
createBy:this.$store.state.user.name, |
||||
|
} |
||||
|
savePallet(params).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.$message.success('success') |
||||
|
this.handleQuery(); |
||||
|
}else { |
||||
|
this.$message.warning(data.msg); |
||||
|
} |
||||
|
this.queryParams.palletNo = ''; |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error) |
||||
|
this.queryParams.palletNo = ''; |
||||
|
}) |
||||
|
}, |
||||
|
handleRemove(){ |
||||
|
let params = { |
||||
|
site:this.$store.state.user.site, |
||||
|
palletNo:this.queryParams.palletNo, |
||||
|
createBy:this.$store.state.user.name, |
||||
|
} |
||||
|
removePallet(params).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.$message.success('success') |
||||
|
this.handleQuery(); |
||||
|
}else { |
||||
|
this.$message.warning(data.msg); |
||||
|
} |
||||
|
this.queryParams.palletNo = ''; |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error) |
||||
|
this.queryParams.palletNo = ''; |
||||
|
}) |
||||
|
}, |
||||
|
handleRemoveById(row){ |
||||
|
this.$confirm(`Are you sure you want to remove Pallet Label?`, 'Tips', { |
||||
|
confirmButtonText: 'Yes', |
||||
|
cancelButtonText: 'No', |
||||
|
type: 'warning' |
||||
|
}).then(()=>{ |
||||
|
let params = { |
||||
|
id: row.id, |
||||
|
} |
||||
|
this.queryLoading = true; |
||||
|
removePalletById(params).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.$message.success('success') |
||||
|
this.handleQuery(); |
||||
|
}else { |
||||
|
this.$message.warning(data.msg); |
||||
|
this.queryLoading = false; |
||||
|
} |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error) |
||||
|
this.queryLoading = false; |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
handleRemoveAll(){ |
||||
|
this.$confirm(`Are you sure you want to remove Pallet Label?`, 'Tips', { |
||||
|
confirmButtonText: 'Yes', |
||||
|
cancelButtonText: 'No', |
||||
|
type: 'warning' |
||||
|
}).then(()=>{ |
||||
|
let params = { |
||||
|
site:this.$store.state.user.site, |
||||
|
createBy:this.$store.state.user.name, |
||||
|
} |
||||
|
removeAllPallet(params).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.$message.success('success') |
||||
|
this.handleQuery(); |
||||
|
}else { |
||||
|
this.$message.warning(data.msg); |
||||
|
} |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error) |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
handleExport(){ |
||||
|
if (this.dataList.length === 0){ |
||||
|
this.$message.warning('Pallet Label data does not exist') |
||||
|
return |
||||
|
} |
||||
|
exportPallet({}).then(response => { |
||||
|
const blob = new Blob([response.data], { type: response.headers['content-type'] }); |
||||
|
const url = window.URL.createObjectURL(blob); |
||||
|
const a = document.createElement('a'); |
||||
|
a.href = url; |
||||
|
// 解析后端返回的文件名 |
||||
|
//const contentDisposition = response.headers['content-disposition']; |
||||
|
//const fileName = contentDisposition ? decodeURIComponent(contentDisposition.split('filename*=utf-8')[1]) : 'pallet_data.xlsx'; |
||||
|
a.download = "Pallet Label.xlsx"; |
||||
|
document.body.appendChild(a); |
||||
|
a.click(); |
||||
|
document.body.removeChild(a); |
||||
|
URL.revokeObjectURL(url); |
||||
|
}) |
||||
|
}, |
||||
|
handleQuery(){ |
||||
|
let params = { |
||||
|
site:this.$store.state.user.site, |
||||
|
createBy:this.$store.state.user.name, |
||||
|
no:this.queryParams.no, |
||||
|
size:this.queryParams.size, |
||||
|
} |
||||
|
this.queryLoading = true; |
||||
|
queryPalletPage(params).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.dataList = data.rows |
||||
|
this.total = data.total |
||||
|
}else { |
||||
|
this.$message.warning(data.msg); |
||||
|
} |
||||
|
this.queryLoading = false; |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error); |
||||
|
this.queryLoading = false; |
||||
|
}) |
||||
|
}, |
||||
|
handleCurrentChange(val){ |
||||
|
this.queryParams.no = val; |
||||
|
this.handleQuery(); |
||||
|
}, |
||||
|
handleSizeChange(val){ |
||||
|
this.queryParams.size = val; |
||||
|
this.handleQuery(); |
||||
|
}, |
||||
|
handleBatchProcessing(){ |
||||
|
this.batchVisible = true |
||||
|
this.$nextTick(()=>{ |
||||
|
this.$refs.batchPalletNo.focus(); |
||||
|
}) |
||||
|
}, |
||||
|
handleScanBatchPallet(){ |
||||
|
if (!this.batchParams.palletNo || this.batchParams.palletNo.trim().length === 0){ |
||||
|
this.$message.warning('please input Pallet Label') |
||||
|
return |
||||
|
} |
||||
|
if (this.palletList.some(item=>item.palletNo === this.batchParams.palletNo)){ |
||||
|
this.batchParams.palletNo = '' |
||||
|
this.$message.warning('The Pallet Label already exists') |
||||
|
return |
||||
|
} |
||||
|
let params = { |
||||
|
...this.batchParams, |
||||
|
site:this.$store.state.user.site, |
||||
|
createBy:this.$store.state.user.name, |
||||
|
} |
||||
|
this.palletList.unshift(params) |
||||
|
this.batchParams.palletNo = '' |
||||
|
this.$refs.batchPalletNo.focus(); |
||||
|
this.$message.success('success') |
||||
|
}, |
||||
|
removePalletList(i){ |
||||
|
this.palletList.splice(i,1); |
||||
|
this.$message.success('success') |
||||
|
}, |
||||
|
saveBatchPallet(){ |
||||
|
if (this.palletList.length === 0){ |
||||
|
this.$message.warning('please scan Pallet Label') |
||||
|
return |
||||
|
} |
||||
|
this.saveLoading = true; |
||||
|
saveBatchPallet(this.palletList).then(({data})=>{ |
||||
|
if (data && data.code === 0){ |
||||
|
this.$message.success('success') |
||||
|
this.batchVisible = false; |
||||
|
this.handleQuery(); |
||||
|
}else { |
||||
|
this.$message.warning(data.msg); |
||||
|
} |
||||
|
this.saveLoading = false |
||||
|
}).catch((error)=>{ |
||||
|
this.$message.error(error) |
||||
|
this.saveLoading = false |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
'queryParams.type'(newVal,oldVal){ |
||||
|
this.$refs.scanPallet.focus() |
||||
|
}, |
||||
|
batchVisible(newVal,oldVal){ |
||||
|
if (newVal === false){ |
||||
|
this.palletList = []; |
||||
|
this.$refs.scanPallet.focus() |
||||
|
} |
||||
|
}, |
||||
|
saveLoading(newVal,oldVal){ |
||||
|
if (newVal === true){ |
||||
|
setTimeout(()=>{ |
||||
|
this.saveLoading = false |
||||
|
},3000) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.$refs.scanPallet.focus() |
||||
|
this.handleQuery(); |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="box-container"> |
||||
|
<el-form label-position="top" :model="queryParams" @submit.native.prevent style="max-width: 1200px"> |
||||
|
<el-row :gutter="10"> |
||||
|
<el-col :span="span+1"> |
||||
|
<el-input ref="scanPallet" v-model="queryParams.palletNo" @keydown.enter.native="handleScanPallet" placeholder="Please scan Pallet Label"></el-input> |
||||
|
</el-col> |
||||
|
<el-col :span="span*3"> |
||||
|
<el-button type="primary" @click="handleBatchProcessing">Batch Processing</el-button> |
||||
|
<el-button type="primary" @click="handleRemoveAll">Clear All Data</el-button> |
||||
|
<el-button type="primary" @click="handleExport">Export</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="10" style="margin-top: 5px"> |
||||
|
<el-col :span="span-2"> |
||||
|
<el-checkbox v-model="queryParams.type" label="Add" true-label="add" false-label="remove"></el-checkbox> |
||||
|
</el-col> |
||||
|
<el-col :span="span-2"> |
||||
|
<el-checkbox v-model="queryParams.type" label="Remove" true-label="remove" false-label="add"></el-checkbox> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
|
||||
|
<div style="height: calc(100% - 100px);margin-top: 5px"> |
||||
|
<el-table :data="dataList" border height="100%" v-loading="queryLoading"> |
||||
|
<el-table-column label="Actions" align="center" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<a style="cursor:pointer;" @click="handleRemoveById(scope.row)">Delete</a> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
v-for="(item,index) in columnList" :key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed==''?false:item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span> |
||||
|
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" |
||||
|
style="width: 100px; height: 80px"/></span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<el-pagination |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page.sync="queryParams.no" |
||||
|
:page-sizes="[50,100, 200, 300, 400]" |
||||
|
:page-size="queryParams.size" |
||||
|
layout="total,sizes, prev, pager, next" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
|
||||
|
<el-dialog :visible.sync="batchVisible" v-drag title="Batch Processing - Add" width="500px" :close-on-click-modal="false"> |
||||
|
<el-input v-model="batchParams.palletNo" ref="batchPalletNo" placeholder="Please scan Pallet Label" @keydown.enter.native="handleScanBatchPallet"></el-input> |
||||
|
|
||||
|
<el-table :data="palletList" border height="220px"> |
||||
|
<el-table-column align="center" width="100" label="Actions"> |
||||
|
<template slot-scope="scope"> |
||||
|
<a @click="removePalletList(scope.$index)">Delete</a> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" label="Pallet Label" prop="palletNo"></el-table-column> |
||||
|
</el-table> |
||||
|
<div slot="footer"> |
||||
|
<el-button type="primary" :loading="saveLoading" @click="saveBatchPallet">Save</el-button> |
||||
|
<el-button @click="batchVisible = false">Cancel</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue