<template>
|
<div class="table-header">
|
<div style="display: flex;padding: 10px;">
|
<div style="margin-right: 10px;">
|
<a-input v-model:value="searchParam.pickNo"
|
placeholder="请输拣货单编号"
|
style="width: 200px;margin-right: 10px;"/>
|
<a-input v-model:value="searchParam.waveNo" placeholder="请输入波次号"
|
style="width: 200px;" />
|
<a-button @click="queryPickSheets" type="primary" style="margin-left: 35px">查询</a-button>
|
</div>
|
</div>
|
|
</div>
|
<a-table :columns="columns"
|
:data-source="datasource" bordered
|
:defaultExpandAllRows="false"
|
:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
|
:scroll="{y: columns.length * 140}"
|
style="margin: 5px"
|
>
|
<template #bodyCell="{column, record, index}">
|
<template v-if="column.key === 'number'">
|
{{ index + 1 }}
|
</template>
|
<template v-if="column.key === 'operate'">
|
<a-button @click="viewDetail(column, record)" type="link">
|
{{ "查看明细" }}
|
</a-button>
|
<a-button @click="handlePrint(column, record)" type="link">打印</a-button>
|
<a-button @click="showDeleteConfirm(record)" danger type="link">{{ "删除" }}</a-button>
|
</template>
|
<template v-if="column.key === 'status'">
|
<a-tag :color="record.status === 1 ? 'green' : 'volcano'">
|
{{ record.status === 1 ? "正常" : "禁用" }}
|
</a-tag>
|
</template>
|
</template>
|
</a-table>
|
<a-modal ref="sheetDetl" v-model:open="show" :width="'80%'" title="拣货单明细" @ok="handleOk" @cancel="cancel"
|
:okText="isPrint ? '打印' : '确认'" cancel-text="关闭">
|
<div id="pcik-detl">
|
<div class="component-header">
|
<div>
|
<h3>
|
拣货单号：{{ selectDetl.pickNo }}
|
</h3>
|
<h3>
|
波次：{{ selectDetl.waveNo }}
|
</h3>
|
</div>
|
<div class="qrcode">
|
<a-qrcode :value="selectDetl.pickNo" :size="100" :bordered="false"/>
|
</div>
|
</div>
|
<a-table :columns="childNodes"
|
:data-source="childList"
|
bordered
|
:pagination="{hideOnSinglePage: true}"
|
>
|
<template #bodyCell="{column, record, index}">
|
<template v-if="column.key === 'number'">
|
{{ index + 1 }}
|
</template>
|
<template v-if="column.key === 'status'">
|
<a-tag :color="record.status === 1 ? 'green' : 'volcano'">
|
{{ record.status === 1 ? "正常" : "禁用" }}
|
</a-tag>
|
</template>
|
</template>
|
</a-table>
|
</div>
|
</a-modal>
|
</template>
|
|
<script>
|
import {post, get} from "@/utils/request.js";
|
import {message, Modal} from "ant-design-vue";
|
import {createVNode} from 'vue';
|
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
|
import printJS from 'print-js'
|
|
|
export default {
|
name: "out-stock-flat",
|
data() {
|
return {
|
searchParam: {
|
pickNo: '',
|
waveNo:''
|
},
|
state: {
|
selectedRowKeys: []
|
},
|
searchInput: '',
|
columns: [
|
{key: 'number', title: '序号', dataIndex: 'number', align: 'center', width: '65px'},
|
{key: 'pickNo', title: '单号', dataIndex: 'pickNo', align: 'center', width: '205px'},
|
{key: 'waveNo', title: '波次号', dataIndex: 'waveNo', align: 'center', width: '155px'},
|
{key: 'anfme', title: '数量', dataIndex: 'anfme', align: 'center', width: '85px'},
|
{key: 'status', title: '单据状态', dataIndex: 'status', align: 'center', width: '105px'},
|
{key: 'createdTime', title: '创建时间', dataIndex: 'createdTime', align: 'center', width: '185px'},
|
{key: 'updatedTime', title: '修改时间', dataIndex: 'updatedTime', align: 'center', width: '185px'},
|
{key: 'memo', title: '备注', dataIndex: '', align: 'center'},
|
{
|
key: 'operate',
|
title: '操作',
|
dataIndex: 'operate',
|
fixed: 'right',
|
align: 'center',
|
width: '155px'
|
}
|
],
|
childNodes: [
|
{key: 'number', title: '序号', dataIndex: 'number'},
|
{key: 'maktx', title: '物料名称', dataIndex: 'maktx'},
|
{key: 'matnr', title: '物料编码', dataIndex: 'matnr'},
|
{key: 'batch', title: '批号', dataIndex: 'batch'},
|
{key: 'locNo', title: '库位', dataIndex: 'locNo'},
|
{key: 'barcode', title: '拖盘码', dataIndex: 'barcode'},
|
{key: 'anfme', title: '数量', dataIndex: 'anfme'},
|
{key: 'memo', title: '备注', dataIndex: ''},
|
{key: 'status', title: '单据状态', dataIndex: 'status'},
|
// {key: 'operate', title: '操作', dataIndex: 'operate'}
|
],
|
datasource: [],
|
childList: [],
|
show: false,
|
isPrint: false,
|
selectDetl: {},
|
}
|
},
|
mounted() {
|
//获取拣货单数据源
|
this.getOutFlatSheet();
|
},
|
|
methods: {
|
queryPickSheets() {
|
this.getOutFlatSheet()
|
},
|
|
handleOk() {
|
if (this.isPrint) {
|
printJS('pcik-detl', 'html')
|
}
|
},
|
|
cancel() {
|
this.isPrint = false
|
},
|
onSelectChange(selectedRowKeys) {
|
state.selectedRowKeys = selectedRowKeys;
|
|
},
|
/**
|
* 打印
|
*/
|
handlePrint(column, record) {
|
this.show = true
|
this.isPrint = true
|
this.selectDetl = record
|
this.getSheetDetl(record)
|
},
|
/**
|
* 搜索
|
*/
|
onSearch() {
|
console.log(this)
|
},
|
|
showDeleteConfirm(record) {
|
let that = this
|
Modal.confirm({
|
title: '是否确认删除当前拣货单',
|
icon: createVNode(ExclamationCircleOutlined),
|
content: '连同明细一起删除',
|
okText: '确认',
|
okType: 'danger',
|
cancelText: '取消',
|
onOk() {
|
that.removeRow(record)
|
},
|
onCancel() {
|
console.log('Cancel');
|
},
|
});
|
},
|
|
//删除当前行
|
removeRow(record) {
|
let that = this
|
get('/api/pick/flat/remove/' + record.id).then((resp) => {
|
let result = resp.data;
|
if (result.code == 200) {
|
that.getOutFlatSheet()
|
message.success(formatMessage('page.delete.success', '删除成功'));
|
} else {
|
message.error(result.msg);
|
}
|
})
|
},
|
//查看明细
|
viewDetail(column, record) {
|
this.show = !this.show
|
this.isPrint = false
|
this.selectDetl = record
|
this.getSheetDetl(record)
|
},
|
getOutFlatSheet() {
|
let that = this
|
post('/api/pick/flat/page', {page: {currnt: 1, size: 10}, params: {pickNo: this.searchParam.pickNo, waveNo: this.searchParam.waveNo}}).then((resp) => {
|
let result = resp.data;
|
if (result.code == 200) {
|
// message.success(formatMessage('page.add.success', '成功'));
|
that.datasource = result.data
|
} else {
|
message.error(result.msg);
|
}
|
})
|
},
|
getSheetDetl(record) {
|
let that = this
|
post('/api/pick/flat/detl/page', {
|
page: {currnt: 1, size: 10},
|
params: {pickId: record.id}
|
}).then((resp) => {
|
let result = resp.data;
|
if (result.code == 200) {
|
// message.success(formatMessage('page.add.success', '成功'));
|
that.childList = result.data
|
} else {
|
message.error(result.msg);
|
}
|
})
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.component-header {
|
display: flex;
|
}
|
|
.component-header > div {
|
flex: 1;
|
}
|
|
|
.qrcode {
|
display: flex;
|
justify-content: flex-end;
|
margin-right: 30px;
|
}
|
</style>
|
