gaoluyang
2026-05-07 07f9f8657d057a38792c3822acc9b08d83478967
src/views/salesManagement/deliveryLedger/index.vue
@@ -3,15 +3,18 @@
    <div class="search_form">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="销售订单号:">
          <el-input v-model="searchForm.salesContractNo" placeholder="请输入" clearable prefix-icon="Search" style="width: 200px"
          <el-input v-model="searchForm.salesContractNo" placeholder="请输入" clearable prefix-icon="Search"
                    style="width: 200px"
            @change="handleQuery" />
        </el-form-item>
        <el-form-item label="车牌号:">
          <el-input v-model="searchForm.shippingCarNumber" placeholder="请输入" clearable prefix-icon="Search" style="width: 200px"
          <el-input v-model="searchForm.shippingCarNumber" placeholder="请输入" clearable prefix-icon="Search"
                    style="width: 200px"
            @change="handleQuery" />
        </el-form-item>
        <el-form-item label="快递单号:">
          <el-input v-model="searchForm.expressNumber" placeholder="请输入" clearable prefix-icon="Search" style="width: 200px"
          <el-input v-model="searchForm.expressNumber" placeholder="请输入" clearable prefix-icon="Search"
                    style="width: 200px"
            @change="handleQuery" />
        </el-form-item>
        <el-form-item>
@@ -47,33 +50,35 @@
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
        <el-table-column fixed="right" label="操作" width="220" align="center">
          <template #default="scope">
            <el-button 
              link 
              type="primary" 
              size="small"
              :disabled="!isApproved(scope.row.status)"
              @click="openForm('edit', scope.row)">补充发货信息</el-button>
                @click="openForm('edit', scope.row)">补充发货信息
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
                style="color: #67C23A"
              @click="openDetail(scope.row)"
            >详情</el-button>
            >详情
            </el-button>
            <el-button 
              link 
              type="danger" 
              size="small"
              :disabled="isApproving(scope.row.status)"
              @click="handleDeleteSingle(scope.row)">删除</el-button>
                @click="handleDeleteSingle(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper"
        :page="page.current" :limit="page.size" @pagination="paginationChange" />
    </div>
    <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增发货台账' : '编辑发货台账'" width="40%"
    <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '新增发货台账' : '编辑发货台账'"
               width="40%"
      @close="closeDia">
      <el-form :model="form" label-width="120px" label-position="top" :rules="rules" ref="formRef">
        <el-row :gutter="30">
@@ -140,29 +145,7 @@
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="发货图片:">
              <el-upload
                v-model:file-list="deliveryFileList"
                :action="upload.url"
                multiple
                ref="deliveryFileUpload"
                auto-upload
                :headers="upload.headers"
                :data="{ type: 9 }"
                :before-upload="handleDeliveryBeforeUpload"
                :on-error="handleDeliveryUploadError"
                :on-success="handleDeliveryUploadSuccess"
                :on-remove="handleDeliveryRemove"
                list-type="picture-card"
                :limit="9"
                accept="image/png,image/jpeg,image/jpg"
              >
                <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                <template #tip>
                  <div class="el-upload__tip">
                    支持 jpg、jpeg、png 格式,最多上传 9 张,单张大小不超过 10MB
                  </div>
                </template>
              </el-upload>
              <ImageUpload v-model:file-list="deliveryFileList" :limit="9"/>
            </el-form-item>
          </el-col>
        </el-row>
@@ -191,19 +174,29 @@
          <el-descriptions-item label="快递公司">{{ detailRow.expressCompany || '--' }}</el-descriptions-item>
          <el-descriptions-item label="快递单号" :span="2">{{ detailRow.expressNumber || '--' }}</el-descriptions-item>
        </el-descriptions>
        <div class="detail-images" v-if="detailImages.length">
          <div class="detail-images-title">发货图片</div>
          <el-image
            v-for="img in detailImages"
            :key="img.url"
            :src="img.url"
            :preview-src-list="detailImages.map(i => i.url)"
            fit="cover"
            class="detail-image"
          />
        </div>
        <div v-else class="detail-images-empty">暂无发货图片</div>
        <el-table :data="getDeliveryProductInfoList()"
                  border
                  size="small"
                  class="delivery-product-table"
                  style="width: 100%; margin-top: 16px;">
          <el-table-column label="批号"
                           prop="batchNo"
                           min-width="160"
                           show-overflow-tooltip/>
          <el-table-column label="产品名称"
                           prop="productName"
                           min-width="160"
                           show-overflow-tooltip/>
          <el-table-column label="规格型号"
                           prop="specificationModel"
                           min-width="160"
                           show-overflow-tooltip/>
          <el-table-column label="发货数量"
                           prop="deliveryQuantity"
                           min-width="120"
                           align="center"/>
        </el-table>
        <ImagePreview :file-list="detailRow.storageBlobVOs || []" />
      </div>
      <template #footer>
        <div class="dialog-footer">
@@ -218,15 +211,16 @@
import pagination from "@/components/PIMTable/Pagination.vue";
import { onMounted, ref, reactive, toRefs, getCurrentInstance } from "vue";
import { ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { getToken } from "@/utils/auth";
import { getCurrentDate } from "@/utils/index.js";
import {
   deliveryLedgerListPage,
   addOrUpdateDeliveryLedger,
   delDeliveryLedger, deductStock,
  delDeliveryLedger,
  deductStock,
  getDeliveryDetail,
} from "@/api/salesManagement/deliveryLedger.js";
import { delLedgerFile } from "@/api/salesManagement/salesLedger.js";
import ImageUpload from "@/components/AttachmentUpload/image/index.vue";
import ImagePreview from "@/components/AttachmentPreview/image/index.vue";
 
const { proxy } = getCurrentInstance();
@@ -240,40 +234,10 @@
});
const total = ref(0);
const deliveryFileList = ref([]);
const javaApi = proxy.javaApi;
// 详情弹框
const detailDialogVisible = ref(false);
const detailRow = ref(null);
const detailImages = ref([]);
const normalizeFileUrl = (rawUrl = '') => {
  let fileUrl = rawUrl || '';
  // Windows 路径转 URL
  if (fileUrl && fileUrl.indexOf('\\') > -1) {
    const uploadsIndex = fileUrl.toLowerCase().indexOf('uploads');
    if (uploadsIndex > -1) {
      const relativePath = fileUrl.substring(uploadsIndex).replace(/\\/g, '/');
      fileUrl = '/' + relativePath;
    } else {
      const parts = fileUrl.split('\\');
      const fileName = parts[parts.length - 1];
      fileUrl = '/uploads/' + fileName;
    }
  }
  if (fileUrl && !fileUrl.startsWith('http')) {
    if (!fileUrl.startsWith('/')) fileUrl = '/' + fileUrl;
    fileUrl = javaApi + fileUrl;
  }
  return fileUrl;
};
// 上传配置
const upload = reactive({
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/file/upload",
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
});
const detailProductList = ref([]);
// 用户信息表单弹框数据
const operationType = ref("");
@@ -313,7 +277,6 @@
});
const { form, rules } = toRefs(data);
const { searchForm } = toRefs(data);
 
// 查询列表
@@ -363,7 +326,6 @@
  }
  
  operationType.value = type;
  const baseUrl = import.meta.env.VITE_APP_BASE_API;
  
  if (type === 'edit' && row) {
    form.value = {
@@ -376,69 +338,99 @@
      expressCompany: row.expressCompany ?? "",
      expressNumber: row.expressNumber ?? "",
    };
    // 如果有图片,将 commonFileList 转换为文件列表格式
    if (row.commonFileList && Array.isArray(row.commonFileList) && row.commonFileList.length > 0) {
      deliveryFileList.value = row.commonFileList.map((file, index) => {
        const fileUrl = normalizeFileUrl(file.url || '');
        return {
          uid: file.id || Date.now() + index,
          name: file.name || `image_${index + 1}.jpg`,
          url: fileUrl,
          status: 'success',
          response: {
            code: 200,
            data: {
              tempId: file.id,
              url: fileUrl
            }
          },
          tempId: file.id // 保存文件ID,用于提交时使用
        };
      });
    } else {
      deliveryFileList.value = [];
    }
  } else {
    form.value = {
      id: null,
      salesContractNo: "",
      customerName: "",
      type: "货车",
      shippingDate: getCurrentDate(),
      shippingCarNumber: "",
      expressCompany: "",
      expressNumber: "",
    };
    deliveryFileList.value = [];
    deliveryFileList.value = row.storageBlobVOs || [];
  }
  
  dialogFormVisible.value = true;
};
// 打开详情弹框
const openDetail = (row) => {
const openDetail = async (row) => {
  detailRow.value = row || null;
  const list = Array.isArray(row?.commonFileList) ? row.commonFileList : [];
  detailImages.value = list
    .map((f) => ({ url: normalizeFileUrl(f?.url || '') }))
    .filter((i) => !!i.url);
  detailProductList.value = [];
  detailDialogVisible.value = true;
  if (!row?.id) return;
  try {
    const res = await getDeliveryDetail(row.id);
    const detailData = res?.data;
    detailRow.value = {
      ...row,
      ...(Array.isArray(detailData) ? {} : detailData || {}),
    };
    detailProductList.value = resolveDeliveryDetailList(detailData);
  } catch (error) {
    proxy.$modal.msgError("加载发货台账详情失败");
  }
};
const resolveDeliveryDetailList = data => {
  if (Array.isArray(data)) return data;
  if (!data || typeof data !== "object") return [];
  return [
    data.batchNoDetailList,
    data.batchNoList,
    data.shippingBatchList,
    data.shippingInfoDetailList,
    data.detailList,
    data.batchDetailList,
    data.rows,
    data.records,
    data.list,
    data.data,
  ].find(value => Array.isArray(value) && value.length) || [];
};
const getDeliveryProductInfoList = () => {
  const row = detailRow.value;
  if (!row) return [];
  const normalizeBatchNoList = value => {
    if (Array.isArray(value)) return value;
    if (typeof value === "string" && value.includes(",")) {
      return value.split(",").map(item => item.trim()).filter(Boolean);
    }
    return value ? [value] : [];
  };
  const detailList = detailProductList.value.length ? detailProductList.value : [
    row.batchNoDetailList,
    row.batchNoList,
    row.shippingBatchList,
    row.shippingInfoDetailList,
    row.detailList,
    row.batchDetailList,
  ].find(value => Array.isArray(value) && value.length);
  const batchNoList = normalizeBatchNoList(row.batchNo);
  const toTableRow = (item = {}) => ({
    batchNo:
        typeof item === "string" || typeof item === "number"
            ? item
            : item.batchNo ?? item.batchNumber ?? row.batchNo ?? "--",
    productName: item.productName ?? row.productName ?? "--",
    specificationModel:
        item.specificationModel ?? item.model ?? row.specificationModel ?? "--",
    deliveryQuantity:
        item.deliveryQuantity ??
        item.quantity ??
        item.shippingQuantity ??
        row.deliveryQuantity ??
        row.quantity ??
        "--",
  });
  if (detailList?.length) {
    return detailList.map(toTableRow);
  }
  if (batchNoList.length) {
    return batchNoList.map(batchNo => toTableRow({batchNo}));
  }
  return [toTableRow()];
};
const closeDetail = () => {
  detailDialogVisible.value = false;
  detailRow.value = null;
  detailImages.value = [];
  detailProductList.value = [];
};
// 提交表单
const submitForm = () => {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      let tempFileIds = [];
      if (deliveryFileList.value !== null && deliveryFileList.value.length > 0) {
        tempFileIds = deliveryFileList.value.map((item) => item.tempId);
      }
      const payload = {
        id: form.value.id,
        type: form.value.type,
@@ -446,7 +438,7 @@
        shippingCarNumber: form.value.type === "货车" ? form.value.shippingCarNumber : "",
        expressCompany: form.value.type === "快递" ? form.value.expressCompany : "",
        expressNumber: form.value.type === "快递" ? form.value.expressNumber : "",
        tempFileIds: tempFileIds,
        storageBlobDTOs: deliveryFileList.value || [],
      };
         deductStock(payload).then((res) => {
        proxy.$modal.msgSuccess("操作成功");
@@ -565,11 +557,13 @@
  proxy.$modal.loading("正在上传图片,请稍候...");
  return true;
}
// 发货图片上传失败
function handleDeliveryUploadError(err) {
  proxy.$modal.msgError("上传图片失败");
  proxy.$modal.closeLoading();
}
// 发货图片上传成功回调
function handleDeliveryUploadSuccess(res, file, uploadFiles) {
  proxy.$modal.closeLoading();
@@ -581,6 +575,7 @@
    proxy.$refs.deliveryFileUpload.handleRemove(file);
  }
}
// 移除发货图片
function handleDeliveryRemove(file) {
  console.log('file--', file)
@@ -729,17 +724,21 @@
    display: none;
  }
}
.detail-wrapper {
  padding: 8px 0;
}
.detail-images {
  margin-top: 16px;
}
.detail-images-title {
  font-weight: 600;
  margin-bottom: 10px;
  color: #303133;
}
.detail-image {
  width: 120px;
  height: 120px;
@@ -747,6 +746,7 @@
  margin-bottom: 10px;
  border-radius: 6px;
}
.detail-images-empty {
  margin-top: 16px;
  color: #909399;