| <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(['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 loading = ref(false)  | 
|   | 
| let columns = [  | 
|     {  | 
|         title: formatMessage('db.man_order_detl.order_no', '订单编号'),  | 
|         dataIndex: ['orderDetl$', 'orderNo'],  | 
|         width: 140,  | 
|         ellipsis: true,  | 
|         ...getColumnSearchProps('orderNo'),  | 
|     },  | 
|     {  | 
|         title: formatMessage('db.man_order_detl.matnr', '商品编号'),  | 
|         dataIndex: ['orderDetl$', 'mat$', 'matnr'],  | 
|         width: 140,  | 
|         ellipsis: true,  | 
|         ...getColumnSearchProps('matnr'),  | 
|     },  | 
|     {  | 
|         title: formatMessage('db.man_order_detl.batch', '批号'),  | 
|         dataIndex: ['orderDetl$', 'batch'],  | 
|         width: 140,  | 
|         ellipsis: true,  | 
|         ...getColumnSearchProps('batch'),  | 
|     },  | 
|     {  | 
|         title: formatMessage('db.man_order_detl.anfme', '数量'),  | 
|         dataIndex: 'anfme',  | 
|         width: 140,  | 
|         ellipsis: true,  | 
|         ...getColumnSearchProps('anfme'),  | 
|     },  | 
|     {  | 
|         title: formatMessage('db.man_order_detl.stock', '库存'),  | 
|         dataIndex: 'stock',  | 
|         width: 140,  | 
|         ellipsis: true,  | 
|         ...getColumnSearchProps('stock'),  | 
|     },  | 
| ];  | 
|   | 
| 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,  | 
|             })  | 
|   | 
|             fieldList.push(item.name);  | 
|         })  | 
|   | 
|         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',  | 
|         })  | 
|   | 
|         tmp.push({  | 
|             title: '',  | 
|             dataIndex: 'handleStatus',  | 
|             width: 100,  | 
|             ellipsis: true,  | 
|             fixed: 'right',  | 
|         })  | 
|   | 
|         columns = tmp;  | 
|     } else if (result.code === 401) {  | 
|         message.error(result.msg);  | 
|         logout()  | 
|     } else {  | 
|         message.error(result.msg);  | 
|     }  | 
| }  | 
|   | 
| watch(open, (newVal, oldVal) => {  | 
|     if (newVal) {  | 
|         handleOrderOutPreview()  | 
|     }  | 
| })  | 
|   | 
| const handleOk = () => {  | 
|     post('/api/out/orderOut/batch', tableData.value).then((resp) => {  | 
|         let result = resp.data;  | 
|         if (result.code == 200) {  | 
|             message.success(formatMessage('page.add.success', '出库成功'));  | 
|             open.value = false;  | 
|             emit('reload', true)  | 
|         } 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);  | 
|     }  | 
| }  | 
|   | 
| const handleOrderOutPreview = async () => {  | 
|     await getOperationPort();  | 
|     loading.value = true;  | 
|     tableData.value = []  | 
|   | 
|     let defaultOperationPort = "";  | 
|     if (operationPortList.value.length > 0) {  | 
|         defaultOperationPort = operationPortList.value[0].value;  | 
|         globalOperationPort.value = defaultOperationPort;  | 
|     }  | 
|   | 
|     post('/api/out/orderOut/batch/preview', {  | 
|         orderDetlIds: records.value,  | 
|     }).then((resp) => {  | 
|         let result = resp.data;  | 
|         if (result.code == 200) {  | 
|             let tmp = result.data;  | 
|             tmp.forEach((item) => {  | 
|                 item.operationPort = defaultOperationPort;  | 
|             })  | 
|             tableData.value = tmp;  | 
|             loading.value = false;  | 
|         }  | 
|     })  | 
| }  | 
|   | 
| const handleOtherLocChange = (index, record) => {  | 
|     let stock = record.stock;  | 
|     record.otherLoc.forEach((item) => {  | 
|         if (item.locId == record.locId) {  | 
|             record.locNo = item.locNo;  | 
|             record.locDetlId = item.locDetlId;  | 
|             record.stock = item.stock;  | 
|         }  | 
|     })  | 
|   | 
|     let locDetlList = []  | 
|     let tmp = tableData.value;  | 
|     tmp.forEach((item) => {  | 
|         if (!locDetlList[item.locDetlId]) {  | 
|             locDetlList[item.locDetlId] = item.stock;  | 
|         }  | 
|     })  | 
|   | 
|     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;  | 
|             }  | 
|         }  | 
|     })  | 
| }  | 
|   | 
| const handleGlobalOperationPortChange = () => {  | 
|     if(tableData.value.length > 0) {  | 
|         tableData.value.forEach((item) => {  | 
|             item.operationPort = globalOperationPort.value;  | 
|         })  | 
|     }  | 
| }  | 
|   | 
| defineExpose({  | 
|     open,  | 
|     showWidth,  | 
|     records,  | 
| })  | 
|   | 
| </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="id" :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">  | 
|                             <a-select v-model:value="record.locId" :options="record.otherLoc"  | 
|                                 :fieldNames="{ label: 'locNo', value: 'locId' }"  | 
|                                 @change="handleOtherLocChange(index, record)"></a-select>  | 
|                         </div>  | 
|                     </template>  | 
|   | 
|                     <template v-if="column.dataIndex === 'handleStatus'">  | 
|                         <div v-if="record.locId == null">  | 
|                             <a-tag color="error">库存不足</a-tag>  | 
|                         </div>  | 
|                         <div v-else>  | 
|                             <div v-if="record.stockAlarm != null && record.stockAlarm">  | 
|                                 <a-tag color="error">库存不足</a-tag>  | 
|                             </div>  | 
|                         </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>  |