| | |
| | | <div class="detail-content"> |
| | | <div class="detail-table-wrapper"> |
| | | <el-tabs v-model="detailTab" |
| | | class="detail-tabs"> |
| | | class="detail-tabs" |
| | | @tab-change="handleTabChange"> |
| | | <el-tab-pane label="库存信息" |
| | | name="main"> |
| | | <el-table |
| | | :data="tableData" |
| | | :data="inventoryData" |
| | | border |
| | | v-loading="tableLoading" |
| | | v-loading="inventoryLoading" |
| | | style="width: 100%" |
| | | height="100%" |
| | | > |
| | |
| | | <el-tab-pane label="入库信息" |
| | | name="in"> |
| | | <el-table |
| | | :data="tableData" |
| | | :data="inboundData" |
| | | border |
| | | v-loading="tableLoading" |
| | | v-loading="inboundLoading" |
| | | style="width: 100%" |
| | | height="100%" |
| | | > |
| | |
| | | align="center" |
| | | :header-cell-style="groupHeaderStyle"> |
| | | <el-table-column label="油品" prop="productName" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="批号" prop="batchNo" min-width="150" show-overflow-tooltip /> |
| | | <el-table-column label="入库数量(吨)" prop="stockInNum" min-width="110" show-overflow-tooltip /> |
| | | <el-table-column label="入库名称" prop="oilDepotName" min-width="130" show-overflow-tooltip /> |
| | | <el-table-column label="入库类别" prop="inboundCategory" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="储罐号" prop="tankNo" min-width="100" show-overflow-tooltip /> |
| | |
| | | <el-tab-pane label="出库信息" |
| | | name="out"> |
| | | <el-table |
| | | :data="tableData" |
| | | :data="outboundData" |
| | | border |
| | | v-loading="tableLoading" |
| | | v-loading="outboundLoading" |
| | | style="width: 100%" |
| | | height="100%" |
| | | > |
| | |
| | | align="center" |
| | | :header-cell-style="groupHeaderStyle"> |
| | | <el-table-column label="出库类别" prop="outCategory" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="储库名称" prop="outOilDepotName" min-width="130" show-overflow-tooltip /> |
| | | <el-table-column label="储罐号" prop="outTankNo" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="批号" prop="batchNo" min-width="150" show-overflow-tooltip /> |
| | | <el-table-column label="储库名称" prop="oilDepotName" min-width="130" show-overflow-tooltip /> |
| | | <el-table-column label="储罐号" prop="tankNo" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="出库日期" prop="outDate" min-width="110" show-overflow-tooltip /> |
| | | <el-table-column label="油品" prop="productName" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="出库吨位(吨)" prop="outTonnage" min-width="110" show-overflow-tooltip /> |
| | | <el-table-column label="客户名称" prop="outCustomerName" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column label="客户对接人" prop="outContactPerson" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="对接人电话" prop="outContactPhone" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column label="客户名称" prop="customerName" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column label="客户对接人" prop="contactPerson" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="对接人电话" prop="contactPhone" min-width="120" show-overflow-tooltip /> |
| | | </el-table-column> |
| | | <el-table-column label="装油操作信息" |
| | | align="center" |
| | | :header-cell-style="groupHeaderStyle"> |
| | | <el-table-column label="装油检验" prop="loadingInspectionStatus" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="装车鹤位" prop="loadingCranePosition" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="密度" prop="outDensity" min-width="80" show-overflow-tooltip /> |
| | | <el-table-column label="密度" prop="density" min-width="80" show-overflow-tooltip /> |
| | | <el-table-column label="装油拍照" prop="loadingPhotos" align="center" min-width="90"> |
| | | <template #default="scope"> |
| | | <el-image |
| | |
| | | <el-table-column label="出库过磅数据" |
| | | align="center" |
| | | :header-cell-style="groupHeaderStyle"> |
| | | <el-table-column label="毛重(吨)" prop="outGrossWeight" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="皮重(吨)" prop="outTareWeight" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="净重(吨)" prop="outNetWeight" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="亏量(吨)" prop="outLossQuantity" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="实际入库体积(升)" prop="outActualVolume" min-width="130" show-overflow-tooltip /> |
| | | <el-table-column label="磅单" prop="outPoundPhotos" align="center" min-width="90"> |
| | | <el-table-column label="毛重(吨)" prop="grossWeight" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="皮重(吨)" prop="tareWeight" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="净重(吨)" prop="netWeight" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="亏量(吨)" prop="lossQuantity" min-width="90" show-overflow-tooltip /> |
| | | <el-table-column label="实际出库体积(升)" prop="actualVolume" min-width="130" show-overflow-tooltip /> |
| | | <el-table-column label="磅单" prop="poundPhotos" align="center" min-width="90"> |
| | | <template #default="scope"> |
| | | <el-image |
| | | v-if="toPhotoArray(scope.row.outPoundPhotos).length" |
| | | :src="getPhotoUrl(toPhotoArray(scope.row.outPoundPhotos)[0])" |
| | | :preview-src-list="getPhotoUrls(scope.row.outPoundPhotos)" |
| | | v-if="toPhotoArray(scope.row.poundPhotos).length" |
| | | :src="getPhotoUrl(toPhotoArray(scope.row.poundPhotos)[0])" |
| | | :preview-src-list="getPhotoUrls(scope.row.poundPhotos)" |
| | | preview-teleported |
| | | fit="cover" |
| | | style="width: 40px; height: 40px; border-radius: 4px" |
| | |
| | | <el-table-column label="出库物流信息" |
| | | align="center" |
| | | :header-cell-style="groupHeaderStyle"> |
| | | <el-table-column label="司机姓名" prop="outDriverName" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="司机电话" prop="outDriverPhone" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column label="押运员姓名" prop="outEscortName" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="押运员电话" prop="outEscortPhone" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column label="车牌号" prop="outTruckPlateNo" min-width="110" show-overflow-tooltip /> |
| | | <el-table-column label="车挂牌号" prop="outTrailerPlateNo" min-width="110" show-overflow-tooltip /> |
| | | <el-table-column label="司机姓名" prop="driverName" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="司机电话" prop="driverPhone" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column label="押运员姓名" prop="escortName" min-width="100" show-overflow-tooltip /> |
| | | <el-table-column label="押运员电话" prop="escortPhone" min-width="120" show-overflow-tooltip /> |
| | | <el-table-column label="车牌号" prop="truckPlateNo" min-width="110" show-overflow-tooltip /> |
| | | <el-table-column label="车挂牌号" prop="trailerPlateNo" min-width="110" show-overflow-tooltip /> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | | <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | v-if="detailTab === 'main'" |
| | | v-show="inventoryTotal > 0" |
| | | :total="inventoryTotal" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="page.current" |
| | | :limit="page.size" |
| | | @pagination="paginationChange" |
| | | :page="inventoryPage.current" |
| | | :limit="inventoryPage.size" |
| | | @pagination="handleInventoryPageChange" |
| | | /> |
| | | <pagination |
| | | v-if="detailTab === 'in'" |
| | | v-show="inboundTotal > 0" |
| | | :total="inboundTotal" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="inboundPage.current" |
| | | :limit="inboundPage.size" |
| | | @pagination="handleInboundPageChange" |
| | | /> |
| | | <pagination |
| | | v-if="detailTab === 'out'" |
| | | v-show="outboundTotal > 0" |
| | | :total="outboundTotal" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :page="outboundPage.current" |
| | | :limit="outboundPage.size" |
| | | @pagination="handleOutboundPageChange" |
| | | /> |
| | | </div> |
| | | </el-dialog> |
| | |
| | | import pagination from "@/components/PIMTable/Pagination.vue"; |
| | | import { computed, reactive, ref, watch } from "vue"; |
| | | import { getStockInventoryBatchNoQty } from "@/api/inventoryManagement/stockInventory.js"; |
| | | import { getStockInRecordListPage } from "@/api/inventoryManagement/stockInRecord.js"; |
| | | import { getStockOutPage } from "@/api/inventoryManagement/stockOut.js"; |
| | | |
| | | const props = defineProps({ |
| | | visible: { |
| | |
| | | }, |
| | | }); |
| | | |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | const total = ref(0); |
| | | // 三个页签各自独立查询、各自分页:库存信息走批号明细,入库/出库走各自的记录列表 |
| | | const detailTab = ref("main"); |
| | | const page = reactive({ |
| | | |
| | | const inventoryData = ref([]); |
| | | const inventoryLoading = ref(false); |
| | | const inventoryTotal = ref(0); |
| | | const inventoryPage = reactive({ |
| | | current: 1, |
| | | size: 20, |
| | | }); |
| | | |
| | | const inboundData = ref([]); |
| | | const inboundLoading = ref(false); |
| | | const inboundTotal = ref(0); |
| | | const inboundPage = reactive({ |
| | | current: 1, |
| | | size: 20, |
| | | }); |
| | | const inboundLoaded = ref(false); |
| | | |
| | | const outboundData = ref([]); |
| | | const outboundLoading = ref(false); |
| | | const outboundTotal = ref(0); |
| | | const outboundPage = reactive({ |
| | | current: 1, |
| | | size: 20, |
| | | }); |
| | | const outboundLoaded = ref(false); |
| | | |
| | | const getList = () => { |
| | | if (!props.record?.productId || !props.record?.productModelId) { |
| | | tableData.value = []; |
| | | total.value = 0; |
| | | inventoryData.value = []; |
| | | inventoryTotal.value = 0; |
| | | return; |
| | | } |
| | | |
| | | tableLoading.value = true; |
| | | inventoryLoading.value = true; |
| | | getStockInventoryBatchNoQty({ |
| | | current: page.current, |
| | | size: page.size, |
| | | current: inventoryPage.current, |
| | | size: inventoryPage.size, |
| | | productId: props.record.productId, |
| | | productModelId: props.record.productModelId, |
| | | }) |
| | | .then((res) => { |
| | | tableData.value = res.data?.records || []; |
| | | total.value = res.data?.total || 0; |
| | | inventoryData.value = res.data?.records || []; |
| | | inventoryTotal.value = res.data?.total || 0; |
| | | }) |
| | | .finally(() => { |
| | | tableLoading.value = false; |
| | | inventoryLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const getInboundList = () => { |
| | | if (!props.record?.productModelId) { |
| | | inboundData.value = []; |
| | | inboundTotal.value = 0; |
| | | return; |
| | | } |
| | | |
| | | inboundLoading.value = true; |
| | | getStockInRecordListPage({ |
| | | current: inboundPage.current, |
| | | size: inboundPage.size, |
| | | productModelId: props.record.productModelId, |
| | | }) |
| | | .then((res) => { |
| | | inboundData.value = res.data?.records || []; |
| | | inboundTotal.value = res.data?.total || 0; |
| | | inboundLoaded.value = true; |
| | | }) |
| | | .finally(() => { |
| | | inboundLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | const getOutboundList = () => { |
| | | if (!props.record?.productModelId) { |
| | | outboundData.value = []; |
| | | outboundTotal.value = 0; |
| | | return; |
| | | } |
| | | |
| | | outboundLoading.value = true; |
| | | getStockOutPage({ |
| | | current: outboundPage.current, |
| | | size: outboundPage.size, |
| | | productModelId: props.record.productModelId, |
| | | }) |
| | | .then((res) => { |
| | | outboundData.value = res.data?.records || []; |
| | | outboundTotal.value = res.data?.total || 0; |
| | | outboundLoaded.value = true; |
| | | }) |
| | | .finally(() => { |
| | | outboundLoading.value = false; |
| | | }); |
| | | }; |
| | | |
| | | // 点哪个页签查哪个:入库/出库首次进入时才请求,避免打开弹窗就发三个请求 |
| | | const handleTabChange = (name) => { |
| | | if (name === "in" && !inboundLoaded.value) { |
| | | getInboundList(); |
| | | } |
| | | if (name === "out" && !outboundLoaded.value) { |
| | | getOutboundList(); |
| | | } |
| | | }; |
| | | |
| | | // 图片列:后端返回为 JSON 字符串,兼容数组/字符串两种形态 |
| | |
| | | fontSize: "13px", |
| | | }; |
| | | |
| | | const paginationChange = (obj) => { |
| | | page.current = obj.page; |
| | | page.size = obj.limit; |
| | | const handleInventoryPageChange = (obj) => { |
| | | inventoryPage.current = obj.page; |
| | | inventoryPage.size = obj.limit; |
| | | getList(); |
| | | }; |
| | | |
| | | const handleInboundPageChange = (obj) => { |
| | | inboundPage.current = obj.page; |
| | | inboundPage.size = obj.limit; |
| | | getInboundList(); |
| | | }; |
| | | |
| | | const handleOutboundPageChange = (obj) => { |
| | | outboundPage.current = obj.page; |
| | | outboundPage.size = obj.limit; |
| | | getOutboundList(); |
| | | }; |
| | | |
| | | const handleSubtract = (row) => { |
| | |
| | | |
| | | const closeModal = () => { |
| | | isShow.value = false; |
| | | page.current = 1; |
| | | page.size = 20; |
| | | tableData.value = []; |
| | | total.value = 0; |
| | | detailTab.value = "main"; |
| | | |
| | | inventoryPage.current = 1; |
| | | inventoryPage.size = 20; |
| | | inventoryData.value = []; |
| | | inventoryTotal.value = 0; |
| | | |
| | | inboundPage.current = 1; |
| | | inboundPage.size = 20; |
| | | inboundData.value = []; |
| | | inboundTotal.value = 0; |
| | | inboundLoaded.value = false; |
| | | |
| | | outboundPage.current = 1; |
| | | outboundPage.size = 20; |
| | | outboundData.value = []; |
| | | outboundTotal.value = 0; |
| | | outboundLoaded.value = false; |
| | | }; |
| | | |
| | | watch( |
| | |
| | | if (!visible) { |
| | | return; |
| | | } |
| | | page.current = 1; |
| | | detailTab.value = "main"; |
| | | inventoryPage.current = 1; |
| | | inboundPage.current = 1; |
| | | outboundPage.current = 1; |
| | | inboundLoaded.value = false; |
| | | outboundLoaded.value = false; |
| | | getList(); |
| | | }, |
| | | { immediate: true } |