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