skyouc
2025-07-03 db2c3d7fe3d1e89b49b9628f408ba883dc75dc51
zy-asrs-admin/src/components/orderOut/orderOutBatchPreview/index.vue
@@ -1,237 +1,295 @@
<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 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: '',
            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);
        }
    })
}
const handleOrderOutPreview = () => {
    loading.value = true;
    tableData.value = []
    post('/api/out/orderOut/batch/preview', {
        orderDetlIds: records.value,
    }).then((resp) => {
        let result = resp.data;
        if (result.code == 200) {
            tableData.value = result.data;
            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;
            }
        }
    })
}
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">
            <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>
            </a-table>
        </a-modal>
    </div>
</template>
<style></style>
<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>