| <script setup>  | 
| import { ref, watch, reactive } from 'vue';  | 
| import { useRouter } from "vue-router";  | 
| import { get, post, postBlob } from '@/utils/request.js'  | 
| import { message, Modal } from 'ant-design-vue';  | 
| import { logout } from '@/config.js';  | 
| import { formatMessage } from '@/utils/localeUtils.js';  | 
| import useTableSearch from '@/utils/tableUtils.jsx';  | 
|   | 
| const router = useRouter();  | 
|   | 
| const TABLE_KEY = 'table-order-out-preview';  | 
|   | 
| const emit = defineEmits(['closeParent', 'reload'])  | 
|   | 
| const {  | 
|     getColumnSearchProps,  | 
| } = useTableSearch();  | 
|   | 
| let currentOrder = ref(null);  | 
| let searchInput = ref(null);  | 
| let tableData = ref([]);  | 
| const operationPortList = ref([])  | 
| const globalOperationPort = ref(null)  | 
| const open = ref(false);  | 
| const showWidth = ref("60%")  | 
| const records = ref([])  | 
| const waveId = ref(null)  | 
| const loading = ref(false)  | 
| let tableDataValue = []  | 
| let tableDataColSpan = []  | 
|   | 
| const customColSpanProps = (index) => {  | 
|     let count = tableDataColSpan[index];  | 
|     if (count == null) {  | 
|         count = 0;  | 
|     }  | 
|     return {  | 
|         rowSpan: count,  | 
|     };  | 
| }  | 
|   | 
| let columns = [  | 
|     {  | 
|         title: formatMessage('db.man_order_detl.matnr', '商品编号'),  | 
|         dataIndex: 'matnr',  | 
|         width: 180,  | 
|         ellipsis: true,  | 
|         ...getColumnSearchProps('matnr'),  | 
|         customCell: (_, index) => {  | 
|             return customColSpanProps(index)  | 
|         },  | 
|     },  | 
|     {  | 
|         title: formatMessage('db.man_order_detl.batch', '批号'),  | 
|         dataIndex: 'batch',  | 
|         width: 140,  | 
|         ellipsis: true,  | 
|         ...getColumnSearchProps('batch'),  | 
|         customCell: (_, index) => {  | 
|             return customColSpanProps(index)  | 
|         },  | 
|     },  | 
|     {  | 
|         title: '库位类型',  | 
|         dataIndex: 'type',  | 
|         width: 110,  | 
|         ellipsis: true,  | 
|         ...getColumnSearchProps('type'),  | 
|         customCell: (_, index) => {  | 
|             return customColSpanProps(index)  | 
|         },  | 
|     }  | 
| ];  | 
|   | 
| const state = reactive({  | 
|     selectedRowKeys: [],  | 
| });  | 
| const onSelectChange = selectedRowKeys => {  | 
|     // console.log('selectedRowKeys changed: ', selectedRowKeys);  | 
|     state.selectedRowKeys = selectedRowKeys;  | 
| };  | 
|   | 
| const fieldList = [];  | 
| getColumns();  | 
| //加载扩展字段  | 
| async function getColumns() {  | 
|     let fieldResp = await post('/api/matField/list', {  | 
|         unique: 1,  | 
|     })  | 
|     let fieldResult = fieldResp.data;  | 
|     let tmp = columns;  | 
|     if (fieldResult.code == 200) {  | 
|         let data = fieldResult.data;  | 
|   | 
|         data.forEach((item) => {  | 
|             tmp.push({  | 
|                 title: formatMessage(item.language, item.describe),  | 
|                 name: item.name,  | 
|                 dataIndex: item.name,  | 
|                 key: item.name,  | 
|                 width: 140,  | 
|                 editable: true,  | 
|                 customCell: (_, index) => {  | 
|                     return customColSpanProps(index)  | 
|                 },  | 
|             })  | 
|   | 
|             fieldList.push(item.name);  | 
|         })  | 
|   | 
|         tmp.push({  | 
|             title: formatMessage('db.man_order_detl.anfme', '数量'),  | 
|             dataIndex: 'anfme',  | 
|             width: 60,  | 
|             ellipsis: true,  | 
|             fixed: 'right',  | 
|         })  | 
|         tmp.push({  | 
|             title: formatMessage('db.man_order_detl.locNo', '出库库位'),  | 
|             dataIndex: 'locNo',  | 
|             width: 140,  | 
|             ellipsis: true,  | 
|             fixed: 'right',  | 
|         })  | 
|   | 
|         tmp.push({  | 
|             title: formatMessage('db.man_order_detl.operationPort', '作业口'),  | 
|             dataIndex: 'operationPort',  | 
|             width: 140,  | 
|             ellipsis: true,  | 
|             fixed: 'right',  | 
|         })  | 
|   | 
|         columns = tmp;  | 
|     } else if (result.code === 401) {  | 
|         message.error(result.msg);  | 
|         logout()  | 
|     } else {  | 
|         message.error(result.msg);  | 
|     }  | 
| }  | 
|   | 
| async function getOperationPort() {  | 
|     let resp = await post('/api/operationPort/list', {})  | 
|     let result = resp.data;  | 
|     if (result.code == 200) {  | 
|         let data = result.data;  | 
|         let tmp = []  | 
|         data.forEach((item) => {  | 
|             tmp.push({  | 
|                 label: item.flag,  | 
|                 value: item.id  | 
|             })  | 
|         })  | 
|         operationPortList.value = tmp;  | 
|     } else if (result.code === 401) {  | 
|         message.error(result.msg);  | 
|         logout()  | 
|     } else {  | 
|         message.error(result.msg);  | 
|     }  | 
| }  | 
|   | 
| watch(open, (newVal, oldVal) => {  | 
|     if (newVal) {  | 
|         handleOrderMergePreview()  | 
|     }  | 
| })  | 
|   | 
| const handleOk = () => {  | 
|     let requestParam = {  | 
|         waveId: waveId.value,  | 
|         list: tableData.value  | 
|     };  | 
|   | 
|     post('/api/out/orderOut/merge/wave', requestParam).then((resp) => {  | 
|         let result = resp.data;  | 
|         if (result.code == 200) {  | 
|             message.success(formatMessage('page.add.success', '出库成功'));  | 
|             open.value = false;  | 
|             emit('closeParent', true)  | 
|             emit('reload', true)  | 
|         } else {  | 
|             message.error(result.msg);  | 
|         }  | 
|     })  | 
| }  | 
|   | 
| const handleOrderMergePreview = async () => {  | 
|     loading.value = true;  | 
|   | 
|     await getOperationPort();  | 
|     tableData.value = []  | 
|     tableDataValue = []  | 
|   | 
|     let defaultOperationPort = "";  | 
|     if (operationPortList.value.length > 0) {  | 
|         defaultOperationPort = operationPortList.value[0].value;  | 
|         globalOperationPort.value = defaultOperationPort;  | 
|     }  | 
|   | 
|     post('/api/out/orderOut/wave/preview', {  | 
|         waveId: waveId.value,  | 
|     }).then((resp) => {  | 
|         let result = resp.data;  | 
|         if (result.code == 200) {  | 
|             let tmp = result.data;  | 
|             tableDataValue = tmp;  | 
|   | 
|             let tableDataTmp = []  | 
|             let idx = 0;  | 
|             let colSpan = []  | 
|             tmp.forEach((item) => {  | 
|                 let count = item.locs.length;  | 
|   | 
|                 if (item.locs.length == 0) {  | 
|                     let dataTmp = JSON.parse(JSON.stringify(item));  | 
|   | 
|                     dataTmp.locId = null;  | 
|                     dataTmp.locNo = null;  | 
|                     dataTmp.locDetlId = null;  | 
|                     dataTmp.anfme = item.anfme;  | 
|                     dataTmp.typeId = item.typeId;  | 
|                     dataTmp.workQty = item.workQty;  | 
|                     dataTmp.key = idx;  | 
|                     dataTmp.operationPort = defaultOperationPort;  | 
|   | 
|                     tableDataTmp.push(dataTmp);  | 
|                     count++;  | 
|                 } else {  | 
|                     let isused = item.anfme;  | 
|   | 
|                     for (let i = 0; i < item.locs.length; i++) {  | 
|                         if (isused == 0) {  | 
|                             break;  | 
|                         }  | 
|                         const val = item.locs[i];  | 
|                         let dataTmp = JSON.parse(JSON.stringify(item));  | 
|                         let anfme = isused - val.anfme > 0 ? val.anfme : isused;  | 
|                         isused -= anfme;  | 
|   | 
|                         dataTmp.locId = val.locId;  | 
|                         dataTmp.locNo = val.locNo;  | 
|                         dataTmp.locDetlId = val.locDetlId;  | 
|                         dataTmp.typeId = val.typeId;  | 
|                         dataTmp.workQty = val.workQty;  | 
|                         dataTmp.anfme = anfme;  | 
|                         dataTmp.key = idx;  | 
|                         dataTmp.operationPort = defaultOperationPort;  | 
|   | 
|                         tableDataTmp.push(dataTmp);  | 
|                     }  | 
|   | 
|                     // if (isused > 0) {  | 
|                     //     let dataTmp = JSON.parse(JSON.stringify(item));  | 
|                     //     dataTmp.locId = null;  | 
|                     //     dataTmp.locNo = null;  | 
|                     //     dataTmp.locDetlId = null;  | 
|                     //     dataTmp.typeId = item.typeId;  | 
|                     //     dataTmp.workQty = item.workQty;  | 
|                     //     dataTmp.anfme = isused;  | 
|                     //     dataTmp.key = idx;  | 
|                     //     dataTmp.operationPort = defaultOperationPort;  | 
|   | 
|                     //     tableDataTmp.push(dataTmp);  | 
|                     //     count++;  | 
|                     // }  | 
|                 }  | 
|   | 
|                 colSpan[idx] = count;  | 
|                 idx += count;  | 
|             })  | 
|   | 
|             tableDataColSpan = colSpan;  | 
|             tableData.value = tableDataTmp;  | 
|   | 
|             loading.value = false;  | 
|         } else {  | 
|             message.error(result.msg);  | 
|         }  | 
|     })  | 
| }  | 
|   | 
| const handleGlobalOperationPortChange = () => {  | 
|     if (tableData.value.length > 0) {  | 
|         tableData.value.forEach((item) => {  | 
|             item.operationPort = globalOperationPort.value;  | 
|         })  | 
|     }  | 
| }  | 
|   | 
| const handleOtherLocChange = (index, record) => {  | 
|     let anfme = record.anfme;  | 
|     record.otherLocs.forEach((item) => {  | 
|         if (item.locId == record.locId) {  | 
|             record.locNo = item.locNo;  | 
|             record.locDetlId = item.locDetlId;  | 
|             record.anfme = item.anfme;  | 
|         }  | 
|     })  | 
|   | 
|     let locDetlList = []  | 
|     let tmp = tableData.value;  | 
|     tmp.forEach((item) => {  | 
|         if (item.locDetlId != null) {  | 
|             if (!locDetlList[item.locDetlId]) {  | 
|                 locDetlList[item.locDetlId] = item.anfme;  | 
|             }  | 
|         }  | 
|     })  | 
|   | 
|     // tmp.forEach((item) => {  | 
|     //     if (item.locId == null) {  | 
|     //         item.stockAlarm = true;  | 
|     //     } else {  | 
|     //         let stock = locDetlList[item.locDetlId]  | 
|     //         stock = stock - item.anfme;  | 
|     //         locDetlList[item.locDetlId] = stock;  | 
|     //         if (stock >= 0) {  | 
|     //             item.stockAlarm = false;  | 
|     //         } else {  | 
|     //             item.stockAlarm = true;  | 
|     //         }  | 
|     //     }  | 
|     // })  | 
| }  | 
|   | 
| defineExpose({  | 
|     open,  | 
|     showWidth,  | 
|     waveId,  | 
| })  | 
| </script>  | 
|   | 
| <script>  | 
| export default {  | 
|     name: '预览波次出库'  | 
| }  | 
| </script>  | 
|   | 
| <template>  | 
|     <div>  | 
|         <a-modal v-model:open="open" :width="showWidth"  | 
|             :title="formatMessage('page.orderOutPreview.preview', '预览合并订单出库')" @ok="handleOk">  | 
|             <div>  | 
|                 <span>作业口:</span>  | 
|                 <a-select v-model:value="globalOperationPort" :options="operationPortList"  | 
|                     @change="handleGlobalOperationPortChange"></a-select>  | 
|             </div>  | 
|             <a-table :data-source="tableData" :loading="loading" :defaultExpandAllRows="false" :key="TABLE_KEY"  | 
|                 rowKey="index" :scroll="{ y: 768, scrollToFirstRowOnChange: true }" :columns="columns">  | 
|                 <template #bodyCell="{ column, text, record, index }">  | 
|                     <template v-if="column.dataIndex === 'locNo'">  | 
|                         <div v-if="record.locId != null && record.anfme > 0">  | 
| <!--                             <a-tag color="green">{{ record.locNo }}</a-tag>-->  | 
|                             <a-select v-model:value="record.locNo" :options="record.otherLocs"  | 
|                                 :fieldNames="{ label: 'locNo', value: 'locId' }"  | 
|                                 @change="handleOtherLocChange(index, record)">  | 
|   | 
|                             </a-select>  | 
|                         </div>  | 
|                         <div v-else>  | 
|                             <a-tag color="red">库存不足</a-tag>  | 
|                         </div>  | 
|                     </template>  | 
|   | 
|                     <template v-if="column.dataIndex === 'operationPort'">  | 
|                         <a-select v-model:value="record.operationPort" :options="operationPortList"></a-select>  | 
|                     </template>  | 
|                 </template>  | 
|             </a-table>  | 
|         </a-modal>  | 
|     </div>  | 
| </template>  | 
|   | 
| <style></style>  |