diff --git a/mes-ui/mes-ui-admin-vue3/src/views/biz/saledelivery/SaleDeliveryDetail.vue b/mes-ui/mes-ui-admin-vue3/src/views/biz/saledelivery/SaleDeliveryDetail.vue
new file mode 100644
index 0000000..25c8e33
--- /dev/null
+++ b/mes-ui/mes-ui-admin-vue3/src/views/biz/saledelivery/SaleDeliveryDetail.vue
@@ -0,0 +1,269 @@
+<template>
+  <Dialog :title="'销售出库单详情'" v-model="dialogVisible" width="1500px">
+    <el-form
+      :model="formData"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <!-- 基础信息 -->
+      <el-card title="基础信息" class="mb-4">
+        <span>基础信息</span>
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item label="销售订单">
+              <el-input
+                v-model="formData.saleOrdNo"
+                readonly
+                class="cursor-not-allowed"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="单据日期">
+              <el-input v-model="formData.deliveryDate" readonly class="cursor-not-allowed" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="单据状态">
+              <el-tag :type="formData.deliveryStatus === '1' ? 'info' : 'success'">
+                {{ formData.deliveryStatus === '1' ? '已创建' : '已确认' }}
+              </el-tag>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="交货方式">
+              <el-input
+                v-model="deliveryTypeText"
+                readonly
+                class="cursor-not-allowed"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" class="mt-4">
+          <el-col :span="8">
+            <el-form-item label="客户名称">
+              <el-input v-model="formData.custName" readonly class="cursor-not-allowed" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="产品名称">
+              <el-input v-model="formData.materialName" readonly class="cursor-not-allowed" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="规格型号">
+              <el-input v-model="formData.spec" readonly class="cursor-not-allowed" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20" class="mt-4">
+          <el-col :span="6">
+            <el-form-item label="出库单号">
+              <el-input v-model="formData.saleDeliveryNo" readonly class="cursor-not-allowed" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="订单数量">
+              <el-input v-model="formData.ordQty" readonly class="cursor-not-allowed" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="剩余数量">
+              <el-input v-model="formData.remaimQty" readonly class="cursor-not-allowed" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="发货数量">
+              <el-input v-model="formData.deliveriedQty" readonly class="cursor-not-allowed" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row class="mt-4">
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input
+                v-model="formData.remark"
+                type="textarea"
+                readonly
+                :rows="3"
+                class="cursor-not-allowed"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <!-- 收货信息 -->
+      <el-card title="收货信息" class="mb-4">
+        <span>收货信息</span>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="联系人">
+              <el-input v-model="formData.contact" readonly class="cursor-not-allowed" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="联系电话">
+              <el-input v-model="formData.conPhone" readonly class="cursor-not-allowed" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="联系地址">
+              <el-input v-model="formData.conAddress" readonly class="cursor-not-allowed" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <!-- 产品信息 -->
+      <el-card>
+        <template #header>
+          <span>产品信息</span>
+        </template>
+        <el-table :data="productList" show-summary border :summary-method="getSummary">
+          <el-table-column label="序号" type="index" width="60px" align="center" />
+          <el-table-column label="仓库" prop="warehouse" width="150px" align="center" />
+          <el-table-column label="库区" prop="warehouseArea" width="150px" align="center" />
+          <el-table-column label="批次号" prop="batchNo" width="150px" align="center" />
+          <el-table-column label="库存数量" prop="stockQty" width="150px" align="center" />
+          <el-table-column label="库存袋数" prop="stockBag" width="150px" align="center" />
+          <el-table-column label="单袋规格" prop="bagSpec" width="150px" align="center" />
+          <el-table-column label="发货袋数" prop="deliveriedBag" width="120px" align="center" />
+          <el-table-column label="发货数量" prop="deliveriedQty" width="120px" align="center" />
+          <el-table-column label="备注" prop="remark" width="120px" align="center" />
+        </el-table>
+      </el-card>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">关闭</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import * as SaleDeliveryApi from '@/api/biz/saledelivery'
+
+const { t } = useI18n()
+const message = useMessage()
+
+const dialogVisible = ref(false)
+const formLoading = ref(false)
+
+const formData = reactive({
+  id: undefined,
+  saleDeliveryNo: undefined,
+  deliveryDate: undefined,
+  deliveryStatus: undefined,
+  deliveryType: undefined,
+  custId: undefined,
+  custName: undefined,
+  contact: undefined,
+  conPhone: undefined,
+  conAddress: undefined,
+  remark: undefined,
+  saleOrdId: undefined,
+  saleOrdNo: undefined,
+  deliveryEmpId: undefined,
+  deliveryEmpName: undefined,
+  materialId: undefined,
+  materialCode: undefined,
+  materialName: undefined,
+  spec: undefined,
+  unit: undefined,
+  ordQty: undefined,
+  remaimQty: undefined,
+  deliveriedQty: undefined,
+})
+
+const productList = ref<any[]>([])
+
+const totalQty = computed(() => {
+  return productList.value.reduce((sum, item) => sum + (parseFloat(item.deliveriedQty) || 0), 0)
+})
+
+const deliveryTypeText = computed(() => {
+  return formData.deliveryType === '1' ? '发货' : (formData.deliveryType === '2' ? '自提' : '-')
+})
+
+const getSummary = (param: any) => {
+  const { columns, data } = param
+  const sums: any[] = []
+
+  // 确保数据数组有效
+  if (!Array.isArray(data) || data.length === 0) {
+    columns.forEach((column: any, index: number) => {
+      sums[index] = index === 0 ? '合计' : ''
+    })
+    return sums
+  }
+
+  // 计算发货袋数合计
+  const totalDeliveriedBag = data.reduce((sum: number, item: any) => sum + (parseInt(item.deliveriedBag) || 0), 0)
+
+  // 计算发货数量合计
+  const totalDeliveriedQty = data.reduce((sum: number, item: any) => sum + (parseInt(item.deliveriedQty) || 0), 0)
+
+  // 使用列索引来匹配（更可靠）
+  // 列顺序：0-序号, 1-仓库, 2-库区, 3-批次号, 4-库存数量, 5-库存袋数, 6-单袋规格, 7-发货袋数, 8-发货数量, 9-备注
+  columns.forEach((column: any, index: number) => {
+    if (index === 0) {
+      sums[index] = '合计'
+    } else if (index === 7) {
+      // 发货袋数列
+      sums[index] = totalDeliveriedBag
+    } else if (index === 8) {
+      // 发货数量列
+      sums[index] = totalDeliveriedQty
+    } else {
+      sums[index] = ''
+    }
+  })
+  return sums
+}
+
+const open = async (id: number) => {
+  formLoading.value = true
+  dialogVisible.value = true
+
+  try {
+    const data = await SaleDeliveryApi.getSaleDelivery(id)
+    Object.assign(formData, data)
+
+    let itemsData = []
+    if (data.items && data.items.length > 0) {
+      itemsData = data.items
+    } else if (data.detailList && data.detailList.length > 0) {
+      itemsData = data.detailList
+    } else if (data.products && data.products.length > 0) {
+      itemsData = data.products
+    }
+
+    productList.value = itemsData.map((item: any) => ({
+      id: item.id,
+      storeHouseId: item.storeHouseId,
+      storeHouseCd: item.storeHouseCd || '',
+      storeAreaId: item.storeAreaId,
+      storeAreCd: item.storeAreCd || '',
+      warehouse: item.storeHouseName || '',
+      warehouseArea: item.storeAreaName || '',
+      batchNo: item.lotNo || '',
+      stockQty: item.stockQty || '',
+      stockBag: item.stockBag || '',
+      bagSpec: item.bagSpec || '',
+      deliveriedBag: item.deliveriedBagQty || item.deliveriedBag || '',
+      deliveriedQty: item.deliveriedQty || '',
+      remark: item.remark || '',
+    }))
+  } catch (error) {
+    message.error('获取详情失败')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+defineExpose({
+  open,
+})
+</script>