feat: 库存管理三表单与详情页签分组、采购台账分栏、油品联动与电话校验、冻结解冻修复

吴羡

2026-09-12 41c7dd199f1919a01dfc5e04f62359ca8bc3cb2c

 src/views/inventoryManagement/stockManagement/BatchNoQtyDetail.vue

@@ -9,13 +9,17 @@
  >
    <div class="detail-content">
      <div class="detail-table-wrapper">
        <el-table
          :data="tableData"
          border
          v-loading="tableLoading"
          style="width: 100%"
          height="100%"
        >
        <el-tabs v-model="detailTab"
                 class="detail-tabs">
          <el-tab-pane label="库存信息"
                       name="main">
            <el-table
              :data="tableData"
              border
              v-loading="tableLoading"
              style="width: 100%"
              height="100%"
            >
          <el-table-column
            label="产品名称"
            prop="productName"
@@ -93,7 +97,161 @@
              >
            </template>
          </el-table-column>
        </el-table>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="入库信息"
                       name="in">
            <el-table
              :data="tableData"
              border
              v-loading="tableLoading"
              style="width: 100%"
              height="100%"
            >
          <el-table-column label="入库信息"
                           align="center"
                           :header-cell-style="groupHeaderStyle">
            <el-table-column label="油品" prop="oilProduct" min-width="90" 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-table-column label="入库时间" prop="inboundTime" min-width="160" show-overflow-tooltip />
            <el-table-column label="原出厂数量(吨)" prop="originalQuantity" 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="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-column label="卸油操作信息"
                           align="center"
                           :header-cell-style="groupHeaderStyle">
            <el-table-column label="车体/铅封检验" prop="tankInspectionStatus" min-width="120" show-overflow-tooltip />
            <el-table-column label="卸车鹤位" prop="unloadingCranePosition" min-width="100" show-overflow-tooltip />
            <el-table-column label="密度" prop="density" min-width="80" show-overflow-tooltip />
            <el-table-column label="卸油拍照" prop="unloadPhotos" align="center" min-width="90">
              <template #default="scope">
                <el-image
                  v-if="toPhotoArray(scope.row.unloadPhotos).length"
                  :src="getPhotoUrl(toPhotoArray(scope.row.unloadPhotos)[0])"
                  :preview-src-list="getPhotoUrls(scope.row.unloadPhotos)"
                  preview-teleported
                  fit="cover"
                  style="width: 40px; height: 40px; border-radius: 4px"
                />
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="过磅数据"
                           align="center"
                           :header-cell-style="groupHeaderStyle">
            <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.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"
                />
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="出库信息"
                       name="out">
            <el-table
              :data="tableData"
              border
              v-loading="tableLoading"
              style="width: 100%"
              height="100%"
            >
          <el-table-column label="出库信息"
                           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="outDate" min-width="110" show-overflow-tooltip />
            <el-table-column label="油品" prop="outOilProduct" 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>
          <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="loadingPhotos" align="center" min-width="90">
              <template #default="scope">
                <el-image
                  v-if="toPhotoArray(scope.row.loadingPhotos).length"
                  :src="getPhotoUrl(toPhotoArray(scope.row.loadingPhotos)[0])"
                  :preview-src-list="getPhotoUrls(scope.row.loadingPhotos)"
                  preview-teleported
                  fit="cover"
                  style="width: 40px; height: 40px; border-radius: 4px"
                />
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table-column>
          <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">
              <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)"
                  preview-teleported
                  fit="cover"
                  style="width: 40px; height: 40px; border-radius: 4px"
                />
                <span v-else>--</span>
              </template>
            </el-table-column>
          </el-table-column>
          <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>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <pagination
        v-show="total > 0"
@@ -137,6 +295,7 @@
const tableData = ref([]);
const tableLoading = ref(false);
const total = ref(0);
const detailTab = ref("main");
const page = reactive({
  current: 1,
  size: 20,
@@ -163,6 +322,41 @@
    .finally(() => {
      tableLoading.value = false;
    });
};

// 图片列：后端返回为 JSON 字符串，兼容数组/字符串两种形态
const toPhotoArray = (value) => {
  if (!value) {
    return [];
  }
  if (Array.isArray(value)) {
    return value;
  }
  if (typeof value === "string") {
    try {
      const parsed = JSON.parse(value);
      return Array.isArray(parsed) ? parsed : [];
    } catch (e) {
      return [];
    }
  }
  return [];
};

// 图片列：取单张地址（支持字符串或 {url} 对象）
const getPhotoUrl = (photo) =>
  typeof photo === "string" ? photo : photo?.url || photo?.previewURL || "";

// 图片列：取全部地址用于预览
const getPhotoUrls = (photos) =>
  toPhotoArray(photos).map(getPhotoUrl).filter(Boolean);

// 分组父表头样式：区分各分类
const groupHeaderStyle = {
  background: "#e8f3ff",
  color: "#1d6fd8",
  fontWeight: "700",
  fontSize: "13px",
};

const paginationChange = (obj) => {
@@ -217,6 +411,21 @@
  min-height: 0;
}

.detail-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.detail-tabs .el-tabs__content) {
  flex: 1;
  min-height: 0;
}

:deep(.detail-tabs .el-tab-pane) {
  height: 100%;
}

:deep(.batch-no-qty-detail-dialog .el-dialog) {
  max-width: calc(100vw - 48px);
}