<template>
|
<div class="stock-detail-page">
|
<el-card shadow="never">
|
<template #header>
|
<span>库存明细 - {{ route.query.palletCode || '' }}</span>
|
</template>
|
|
<!-- 搜索 -->
|
<el-form :inline="true" :model="queryForm" class="search-form">
|
<el-form-item label="物料名称">
|
<el-input v-model="queryForm.materielName" placeholder="请输入物料名称" clearable />
|
</el-form-item>
|
<el-form-item label="电芯码">
|
<el-input v-model="queryForm.serialNumber" 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="140" show-overflow-tooltip />
|
<el-table-column prop="materielName" label="物料名称" min-width="160" show-overflow-tooltip />
|
<el-table-column prop="serialNumber" label="电芯码" min-width="180" show-overflow-tooltip />
|
<el-table-column prop="stockQuantity" label="库存数量" min-width="120" align="center" />
|
<el-table-column prop="status" label="状态" min-width="120" align="center">
|
<template #default="{ row }">
|
{{ getStatusText(row.status) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="inboundOrderRowNo" label="通道号" min-width="120" align="center" />
|
<el-table-column prop="creater" label="创建人" min-width="100" 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 stockStatusOptions = ref([]);
|
|
const queryForm = reactive({
|
materielName: '',
|
serialNumber: '',
|
});
|
|
const pagination = reactive({ page: 1, pageSize: 20, total: 0 });
|
|
async function loadData() {
|
loading.value = true;
|
try {
|
const stockId = route.query.id;
|
const wheres = [{ name: 'stockId', value: String(stockId), displayType: 'int' }];
|
if (queryForm.materielName) wheres.push({ name: 'materielName', value: queryForm.materielName, displayType: 'like' });
|
if (queryForm.serialNumber) wheres.push({ name: 'serialNumber', value: queryForm.serialNumber, displayType: 'like' });
|
const res = await client.post('/api/StockInfoDetail/getPageData', {
|
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', ['stockStatusEmun']);
|
const ss = res?.find(item => item.dicNo === 'stockStatusEmun');
|
stockStatusOptions.value = ss?.data || [];
|
} catch {
|
stockStatusOptions.value = [];
|
}
|
}
|
|
function handleSearch() { pagination.page = 1; loadData(); }
|
function handleReset() {
|
queryForm.materielName = '';
|
queryForm.serialNumber = '';
|
handleSearch();
|
}
|
function handleSizeChange() { loadData(); }
|
function handlePageChange() { loadData(); }
|
const getStatusText = (val) => stockStatusOptions.value.find(o => `${o.key}` === `${val}`)?.value || val || '-';
|
|
onMounted(() => { loadDictionary(); loadData(); });
|
</script>
|
|
<style scoped>
|
.stock-detail-page { padding: 16px; }
|
.search-form { margin-bottom: 12px; }
|
</style>
|
