<template>
|
<div class="outbound-detail-page">
|
<el-card shadow="never">
|
<template #header>
|
<span>出库单明细 - {{ route.query.orderNo || '' }}</span>
|
</template>
|
|
<el-form :inline="true" :model="queryForm" class="search-form">
|
<el-form-item label="物料编号">
|
<el-input v-model="queryForm.materielCode" placeholder="请输入物料编号" clearable />
|
</el-form-item>
|
<el-form-item label="物料名称">
|
<el-input v-model="queryForm.materielName" placeholder="请输入物料名称" clearable />
|
</el-form-item>
|
<el-form-item label="批次号">
|
<el-input v-model="queryForm.batchNo" placeholder="请输入批次号" clearable />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-table v-loading="loading" :data="tableData" border stripe>
|
<el-table-column prop="materielCode" label="物料编号" min-width="150" show-overflow-tooltip />
|
<el-table-column prop="materielName" label="物料名称" min-width="160" show-overflow-tooltip />
|
<el-table-column prop="batchNo" label="批次号" min-width="120" align="center" />
|
<el-table-column prop="orderQuantity" label="单据数量" min-width="100" align="center" />
|
<el-table-column prop="rowNo" label="行号" min-width="80" align="center" />
|
<el-table-column prop="lockQuantity" label="锁定数量" min-width="120" align="center" />
|
<el-table-column prop="overOutQuantity" label="已出数量" min-width="120" align="center" />
|
<el-table-column prop="orderDetailStatus" label="明细状态" min-width="110" align="center">
|
<template #default="{ row }">
|
{{ getDetailStatusText(row.orderDetailStatus) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="creater" label="创建人" min-width="90" align="center" />
|
<el-table-column prop="createDate" label="创建时间" min-width="160" align="center" />
|
</el-table>
|
|
<el-pagination
|
v-model:current-page="pagination.page"
|
v-model:page-size="pagination.pageSize"
|
:total="pagination.total"
|
:page-sizes="[10, 20, 50, 100]"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
style="margin-top: 16px; justify-content: flex-end"
|
/>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from 'vue';
|
import { useRoute } from 'vue-router';
|
import { ElMessage } from 'element-plus';
|
import { client } from '@/api/client';
|
|
const route = useRoute();
|
const loading = ref(false);
|
const tableData = ref([]);
|
const detailStatusOptions = ref([]);
|
|
const queryForm = reactive({ materielCode: '', materielName: '', batchNo: '' });
|
const pagination = reactive({ page: 1, pageSize: 20, total: 0 });
|
|
async function loadData() {
|
loading.value = true;
|
try {
|
const orderId = route.query.id;
|
const wheres = [{ name: 'orderId', value: String(orderId), displayType: 'int' }];
|
if (queryForm.materielCode) wheres.push({ name: 'materielCode', value: queryForm.materielCode, displayType: 'like' });
|
if (queryForm.materielName) wheres.push({ name: 'materielName', value: queryForm.materielName, displayType: 'like' });
|
if (queryForm.batchNo) wheres.push({ name: 'batchNo', value: queryForm.batchNo, displayType: 'like' });
|
const res = await client.post('/api/OutboundOrderDetail/getPageList', {
|
page: pagination.page, rows: pagination.pageSize, sort: 'id', order: 'asc',
|
wheres: JSON.stringify(wheres),
|
});
|
tableData.value = res?.rows || [];
|
pagination.total = res?.total || 0;
|
} catch { ElMessage.error('加载数据失败'); }
|
finally { loading.value = false; }
|
}
|
|
async function loadDictionary() {
|
try {
|
const res = await client.post('/api/Sys_Dictionary/GetVueDictionary', ['orderDetailStatusEnum']);
|
detailStatusOptions.value = res?.find(item => item.dicNo === 'orderDetailStatusEnum')?.data || [];
|
} catch { detailStatusOptions.value = []; }
|
}
|
|
function handleSearch() { pagination.page = 1; loadData(); }
|
function handleReset() { queryForm.materielCode = ''; queryForm.materielName = ''; queryForm.batchNo = ''; handleSearch(); }
|
function handleSizeChange() { loadData(); }
|
function handlePageChange() { loadData(); }
|
const getDetailStatusText = (val) => detailStatusOptions.value.find(o => `${o.key}` === `${val}`)?.value || val || '-';
|
|
onMounted(() => { loadDictionary(); loadData(); });
|
</script>
|
|
<style scoped>
|
.outbound-detail-page { padding: 16px; }
|
.search-form { margin-bottom: 12px; }
|
</style>
|
