<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 :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
|
:data-source="tableData.records" :defaultExpandAllRows="false" :key="TABLE_KEY" rowKey="id"
|
:pagination="{ total: tableData.total, onChange: onPageChange }"
|
:scroll="{ y: 768, scrollToFirstRowOnChange: true }" :columns="columns" @resizeColumn="handleResizeColumn"
|
:loading="state.loading"> -->
|
<a-table :columns="columns" :data-source="tableData.records" bordered :defaultExpandAllRows="false"
|
:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
|
:pagination="{ total: tableData.total, onChange: onPageChange }" :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: '205px' },
|
{ key: 'type$', title: '类型', dataIndex: 'type$', 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: [],
|
tableData: {},
|
current: 1,
|
pageSize: 10,
|
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');
|
},
|
});
|
},
|
|
onPageChange(page, size) {
|
this.current = page;
|
this.pageSize = size;
|
this.getOutFlatSheet();
|
},
|
|
|
//删除当前行
|
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: { current: this.current, size: this.pageSize }, 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', '成功'));
|
this.tableData = result.data;
|
console.log(result);
|
// 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>
|
