From 00d8be3208fdf39bcdf01a8d1c4d492cc9adf2a6 Mon Sep 17 00:00:00 2001
From: zhongwenkai <3478244299@qq.com>
Date: Wed, 24 Jun 2026 14:32:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=89=A9=E6=96=99?=
 =?UTF-8?q?=E5=87=BA=E5=85=A5=E5=BA=93=E8=AF=A6=E7=BB=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mes/materialInbound.js                |   9 +
 src/pages.json                                |   7 +
 .../pages/materialInbound/create.vue          | 660 +++++-------------
 .../pages/materialInbound/detail.vue          | 158 +++++
 .../pages/materialInbound/index.vue           |   8 +-
 .../pages/materialOutbound/create.vue         | 485 +++----------
 .../pages/materialOutbound/detail.vue         | 326 +++------
 7 files changed, 570 insertions(+), 1083 deletions(-)
 create mode 100644 src/pages_function/pages/materialInbound/detail.vue

diff --git a/src/api/mes/materialInbound.js b/src/api/mes/materialInbound.js
index 40b6533..0f0c67b 100644
--- a/src/api/mes/materialInbound.js
+++ b/src/api/mes/materialInbound.js
@@ -43,3 +43,12 @@ export function deleteMaterialInbound(id) {
     params: { ids: String(id) }
   })
 }
+
+// 物料入库单详情
+export function getMaterialInboundDetail(id) {
+  return request({
+    url: '/admin-api/erp/stock-in/get',
+    method: 'get',
+    params: { id }
+  })
+}
diff --git a/src/pages.json b/src/pages.json
index fcf3eea..b715290 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -633,6 +633,13 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "materialInbound/detail",
+          "style": {
+            "navigationBarTitleText": "物料入库详情",
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "materialInbound/materialSelect",
           "style": {
diff --git a/src/pages_function/pages/materialInbound/create.vue b/src/pages_function/pages/materialInbound/create.vue
index a711380..746bad0 100644
--- a/src/pages_function/pages/materialInbound/create.vue
+++ b/src/pages_function/pages/materialInbound/create.vue
@@ -2,8 +2,8 @@
   <view class="page-container">
     <NavBar :title="'新增物料入库'" />
 
-    <!-- 操作按钮区 -->
-    <view class="action-row">
+    <!-- 扫码/选择物料 - 固定在页面最上方 -->
+    <view class="top-action-bar">
       <view class="scan-input-row">
         <input
           id="material-inbound-scan-input"
@@ -14,122 +14,124 @@
           @confirm="onScanInputConfirm"
         />
       </view>
-      <view class="action-btn select-btn" @click="handleSelectMaterial">
+      <view class="scan-btn" @click="handleSelectMaterial">
         <text class="btn-text">选择物料</text>
       </view>
     </view>
 
-    <!-- 入库信息 -->
-    <view class="form-section">
-      <!-- 入库时间 -->
-      <view class="section-title-bar">
-        <view class="section-bar-line"></view>
-        <text class="section-title"><text class="required">*</text>入库时间</text>
-      </view>
-      <picker mode="date" :value="inboundDate" @change="handleDateChange">
-        <view class="form-row-card">
-          <text :class="{ placeholder: !inboundDate }">{{ inboundDate || '请选择入库时间' }}</text>
-          <text class="form-row-arrow">▼</text>
-        </view>
-      </picker>
-
-      <!-- 经办人 -->
-      <view class="section-title-bar" style="padding-top: 24rpx;">
-        <view class="section-bar-line"></view>
-        <text class="section-title"><text class="required">*</text>经办人</text>
-      </view>
-      <view class="form-row-card" @click="goSelectOperator">
-        <text :class="{ placeholder: !selectedOperatorName }">
-          {{ selectedOperatorName || '请选择经办人' }}
-        </text>
-        <text class="form-row-arrow">▶</text>
-      </view>
+    <scroll-view scroll-y class="detail-scroll">
+      <view class="content-section">
+        <!-- 入库信息卡片 -->
+        <view class="section-card">
+          <view class="section-header">
+            <view class="section-icon">
+              <uni-icons type="compose" size="24" color="#1f7cff"></uni-icons>
+            </view>
+            <text class="section-title">入库信息</text>
+          </view>
 
-      <!-- 备注 -->
-      <view class="section-title-bar" style="padding-top: 24rpx;">
-        <view class="section-bar-line"></view>
-        <text class="section-title">备注</text>
-      </view>
-      <view class="form-row-card remark-card">
-        <textarea
-          v-model="remark"
-          class="remark-textarea"
-          placeholder="请输入备注信息"
-          placeholder-class="remark-placeholder"
-          :maxlength="500"
-          auto-height
-        />
-      </view>
+          <view class="form-field">
+            <text class="form-label">入库时间<text class="required-star">*</text></text>
+            <picker mode="date" :value="inboundDate" @change="handleDateChange">
+              <view class="select-field">
+                <text :class="['select-text', inboundDate ? '' : 'placeholder']">{{ inboundDate || '请选择入库时间' }}</text>
+                <uni-icons type="calendar" size="18" color="#9ca3af"></uni-icons>
+              </view>
+            </picker>
+          </view>
 
-      <!-- 附件 -->
-      <view class="section-title-bar" style="padding-top: 24rpx;">
-        <view class="section-bar-line"></view>
-        <text class="section-title">附件</text>
-      </view>
-      <view class="attachment-area">
-        <view class="attachment-list">
-          <view v-for="(file, idx) in attachmentList" :key="idx" class="attachment-file-item">
-            <view class="file-icon">
-              <text class="file-icon-text">{{ getFileIcon(file.name) }}</text>
+          <view class="form-field">
+            <text class="form-label">经办人<text class="required-star">*</text></text>
+            <view class="select-field" @click="goSelectOperator">
+              <text :class="['select-text', selectedOperatorName ? '' : 'placeholder']">{{ selectedOperatorName || '请选择经办人' }}</text>
+              <uni-icons type="right" size="18" color="#9ca3af"></uni-icons>
             </view>
-            <view class="file-info">
-              <text class="file-name" :title="file.name">{{ file.name }}</text>
-              <text class="file-size">{{ formatFileSize(file.size) }}</text>
+          </view>
+
+          <view class="form-field">
+            <text class="form-label">备注</text>
+            <textarea v-model="remark" class="form-textarea" placeholder="请输入备注信息" placeholder-class="placeholder-text" maxlength="500" />
+          </view>
+
+          <view class="form-field">
+            <text class="form-label">附件</text>
+            <view class="attachment-upload" @click="handleAddAttachment">
+              <uni-icons type="paperclip" size="20" color="#1f7cff"></uni-icons>
+              <text>选取文件</text>
             </view>
-            <view class="file-delete" @click="removeAttachment(idx)">
-              <text class="delete-icon-sm">✕</text>
+            <view v-if="attachmentList.length" class="attachment-list">
+              <view v-for="(file, idx) in attachmentList" :key="idx" class="attachment-item">
+                <view class="attachment-main">
+                  <uni-icons type="paperclip" size="16" color="#64748b"></uni-icons>
+                  <text class="attachment-name">{{ file.name }}</text>
+                </view>
+                <view class="attachment-delete" @click="removeAttachment(idx)">
+                  <uni-icons type="closeempty" size="18" color="#ef4444"></uni-icons>
+                </view>
+              </view>
             </view>
           </view>
-          <view class="attachment-add-file" @click="handleAddAttachment">
-            <text class="add-text">选取文件</text>
-          </view>
         </view>
-      </view>
-    </view>
-
-    <!-- 已选物料列表 -->
-    <view class="material-section">
-      <view class="section-title-bar">
-        <view class="section-bar-line"></view>
-        <text class="section-title">入库清单（{{ itemList.length }}）</text>
-      </view>
 
-      <view v-if="itemList.length" class="item-list">
-        <view v-for="(item, idx) in itemList" :key="idx" class="item-card">
-          <view class="item-delete-top" @click="removeItem(idx)"><text class="delete-icon">✕</text></view>
-          <view class="item-left">
-            <view class="item-image-wrap">
-              <image
-                v-if="item._material && getItemImage(item._material)"
-                :src="getItemImage(item._material)"
-                class="item-image"
-                mode="aspectFill"
-              />
-              <text v-else class="item-image-empty">📦</text>
+        <!-- 入库清单卡片 -->
+        <view class="section-card">
+          <view class="section-header list-header">
+            <view class="section-title-wrap">
+              <view class="section-icon">
+                <uni-icons type="list" size="24" color="#1f7cff"></uni-icons>
+              </view>
+              <text class="section-title">入库清单（{{ itemList.length }}）</text>
             </view>
-            <view class="item-info">
-              <text class="item-name">{{ item.productName }}</text>
-              <text class="item-spec">{{ item.productBarCode || '-' }}</text>
+            <view class="add-product-btn" @click="handleSelectMaterial">
+              <uni-icons type="plusempty" size="16" color="#1f7cff"></uni-icons>
+              <text>添加物料</text>
             </view>
           </view>
-          <view class="item-right">
-            <view class="item-qty-row">
-              <text class="item-qty-label">入库数量</text>
-              <text class="item-qty-value">{{ item.inputCount }}{{ item.purchaseUnitName }}</text>
+
+          <view v-if="itemList.length" class="item-list">
+            <view v-for="(item, idx) in itemList" :key="idx" class="item-card">
+              <view class="image-box">
+                <image
+                  v-if="item._material && getItemImage(item._material)"
+                  :src="getItemImage(item._material)"
+                  class="item-image"
+                  mode="aspectFill"
+                />
+                <uni-icons v-else type="image" size="34" color="#cbd5e1"></uni-icons>
+              </view>
+              <view class="item-info">
+                <view class="item-header">
+                  <text class="item-name">{{ textValue(item.productName) }}</text>
+                  <view class="delete-btn" @click="removeItem(idx)">
+                    <uni-icons type="trash" size="18" color="#ef4444"></uni-icons>
+                  </view>
+                </view>
+                <view class="info-grid">
+                  <view class="info-cell">
+                    <text class="info-label">编码</text>
+                    <text class="info-value">{{ item.productBarCode || '-' }}</text>
+                  </view>
+                  <view class="info-cell">
+                    <text class="info-label">入库数量</text>
+                    <text class="info-value">{{ item.inputCount }}{{ item.purchaseUnitName }}</text>
+                  </view>
+                </view>
+              </view>
             </view>
           </view>
-        </view>
-      </view>
 
-      <view v-else class="empty-wrap">
-        <text class="empty-text">请扫码或选择物料</text>
+          <view v-else class="empty-card" @click="handleSelectMaterial">
+            <uni-icons type="plusempty" size="30" color="#94a3b8"></uni-icons>
+            <text>请扫码或选择物料</text>
+          </view>
+        </view>
       </view>
-    </view>
+    </scroll-view>
 
     <!-- 底部操作栏 -->
-    <view class="bottom-actions">
-      <view class="bottom-btn cancel-btn" @click="handleCancel">取消</view>
-      <view class="bottom-btn confirm-btn" @click="handleSubmit">确认入库</view>
+    <view class="action-bar">
+      <view class="action-btn back-btn" @click="handleCancel">取消</view>
+      <view class="action-btn submit-btn" @click="handleSubmit">确认入库</view>
     </view>
 
     <sv-focus-no-keyboard ref="focusNoKeyboardRef"></sv-focus-no-keyboard>
@@ -138,439 +140,151 @@
 
 <script setup>
 import { ref, nextTick } from 'vue'
-import { onReady, onShow, onHide } from '@dcloudio/uni-app'
+import { onReady, onShow } from '@dcloudio/uni-app'
 import NavBar from '@/components/common/NavBar.vue'
 import { createMaterialInbound } from '@/api/mes/materialInbound'
 import { getProductDetail } from '@/api/mes/sparepart'
 
 const itemList = ref([])
 const scanCodeInput = ref('')
+const inboundDate = ref(formatDate(new Date()))
+const selectedOperatorId = ref(null)
+const selectedOperatorName = ref('')
+const remark = ref('')
+const attachmentList = ref([])
 
-// 聚焦阻止键盘弹出
 const focusNoKeyboardRef = ref(null)
 const keywordInputSelector = '#material-inbound-scan-input input, input#material-inbound-scan-input'
 
-function focusKeywordNoKeyboard() {
-  nextTick(() => {
-    setTimeout(() => {
-      focusNoKeyboardRef.value?.focus(keywordInputSelector)
-    }, 80)
-  })
+function textValue(v) {
+  if (v === 0) return '0'
+  if (v == null) return '-'
+  const s = String(v).trim()
+  return s || '-'
 }
+function formatDate(date) { const y = date.getFullYear(); const m = String(date.getMonth() + 1).padStart(2, '0'); const d = String(date.getDate()).padStart(2, '0'); return `${y}-${m}-${d}` }
+function handleDateChange(e) { inboundDate.value = e.detail.value }
+function getItemImage(material) { if (!material.images) return ''; if (Array.isArray(material.images)) return String(material.images[0] || ''); return String(material.images).split(',')[0]?.trim() || '' }
 
-// 红外扫码或手动输入物料码确认
-function onScanInputConfirm() {
-  const code = scanCodeInput.value.trim()
-  if (!code) return
-  handleScanCode(code)
-}
+function focusKeywordNoKeyboard() { nextTick(() => { setTimeout(() => { focusNoKeyboardRef.value?.focus(keywordInputSelector) }, 80) }) }
+function handleCancel() { getApp().globalData._materialInboundItems = []; uni.navigateBack() }
+function handleSelectMaterial() { getApp().globalData._materialSelectFrom = 'inbound'; uni.navigateTo({ url: '/pages_function/pages/materialInbound/materialSelect?from=inbound' }) }
 
+function onScanInputConfirm() { const code = scanCodeInput.value.trim(); if (!code) return; handleScanCode(code) }
 async function handleScanCode(code) {
   let materialId = null
-  if (code.toUpperCase().startsWith('MATERIAL-')) {
-    materialId = code.replace(/MATERIAL-/i, '')
-  } else {
-    const idMatch = code.match(/(\d+)$/)
-    if (idMatch) materialId = idMatch[1]
-  }
-  if (!materialId) {
-    uni.showToast({ title: '无法识别物料码', icon: 'none' })
-    return
-  }
+  if (code.toUpperCase().startsWith('MATERIAL-')) materialId = code.replace(/MATERIAL-/i, '')
+  else { const idMatch = code.match(/(\d+)$/); if (idMatch) materialId = idMatch[1] }
+  if (!materialId) { uni.showToast({ title: '无法识别物料码', icon: 'none' }); return }
   try {
     const apiRes = await getProductDetail(materialId)
     const detail = apiRes?.data || apiRes
     if (detail && detail.id) {
       getApp().globalData._materialFromScan = true
       getApp().globalData._materialBeforeConfirm = detail
-      uni.navigateTo({
-        url: '/pages_function/pages/materialInbound/materialConfirm'
-      })
-    } else {
-      uni.showToast({ title: '未找到物料: ' + materialId, icon: 'none' })
-    }
-  } catch (e) {
-    console.error('[物料入库] 扫码查询物料失败:', e)
-    uni.showToast({ title: '扫码失败', icon: 'none' })
-  }
-}
-
-// 入库时间
-const inboundDate = ref(formatDate(new Date()))
-
-// 经办人
-const selectedOperatorId = ref(null)
-const selectedOperatorName = ref('')
-
-// 备注
-const remark = ref('')
-
-// 附件
-const attachmentList = ref([])
-
-function formatDate(date) {
-  const y = date.getFullYear()
-  const m = String(date.getMonth() + 1).padStart(2, '0')
-  const d = String(date.getDate()).padStart(2, '0')
-  return `${y}-${m}-${d}`
-}
-
-function handleDateChange(e) {
-  inboundDate.value = e.detail.value
-}
-
-function getItemImage(material) {
-  const images = material.images
-  if (!images) return ''
-  if (Array.isArray(images)) return String(images[0] || '')
-  return String(images).split(',')[0]?.trim() || ''
-}
-
-function handleCancel() {
-  getApp().globalData._materialInboundItems = []
-  uni.navigateBack()
-}
-
-function handleSelectMaterial() {
-  getApp().globalData._materialSelectFrom = 'inbound'
-  uni.navigateTo({
-    url: '/pages_function/pages/materialInbound/materialSelect?from=inbound'
-  })
-}
-
-function handleScan() {
-  uni.scanCode({
-    onlyFromCamera: false,
-    scanType: ['barCode', 'qrCode'],
-    success: (res) => {
-      const code = (res.result || '').trim()
-      if (!code) return
-      scanCodeInput.value = code
-      handleScanCode(code)
-    },
-    fail: () => {
-      uni.showToast({ title: '扫码失败', icon: 'none' })
-    }
-  })
-}
-
-function removeItem(idx) {
-  itemList.value.splice(idx, 1)
-  getApp().globalData._materialInboundItems = [...itemList.value]
-}
-
-// 经办人
-function goSelectOperator() {
-  getApp().globalData._materialInboundUserFrom = 'materialInbound'
-  uni.navigateTo({
-    url: '/pages_function/pages/moldRepair/userSelect?field=operator&from=materialInbound'
-  })
-}
-
-// 附件
-function getFileIcon(fileName) {
-  const ext = (fileName || '').split('.').pop()?.toLowerCase()
-  const iconMap = {
-    pdf: '📄', doc: '📝', docx: '📝', xls: '📊', xlsx: '📊',
-    ppt: '📽', pptx: '📽', txt: '📃', zip: '📦', rar: '📦',
-    jpg: '🖼', jpeg: '🖼', png: '🖼', gif: '🖼', webp: '🖼'
-  }
-  return iconMap[ext] || '📎'
-}
-
-function formatFileSize(bytes) {
-  if (!bytes) return '0 B'
-  if (bytes < 1024) return bytes + ' B'
-  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
-  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+      uni.navigateTo({ url: '/pages_function/pages/materialInbound/materialConfirm' })
+    } else { uni.showToast({ title: '未找到物料: ' + materialId, icon: 'none' }) }
+  } catch (e) { console.error(e); uni.showToast({ title: '扫码失败', icon: 'none' }) }
 }
+function removeItem(idx) { itemList.value.splice(idx, 1); getApp().globalData._materialInboundItems = [...itemList.value] }
+function goSelectOperator() { getApp().globalData._materialInboundUserFrom = 'materialInbound'; uni.navigateTo({ url: '/pages_function/pages/moldRepair/userSelect?field=operator&from=materialInbound' }) }
 
 function handleAddAttachment() {
   // #ifdef APP-PLUS
-  plus.gallery.pick(
-    (res) => {
-      const files = (res?.files || []).map(f => ({
-        name: f.name || 'unknown',
-        size: f.size || 0,
-        path: f
-      }))
-      attachmentList.value.push(...files)
-    },
-    (e) => {
-      console.log('选择文件失败:', e)
-    },
-    { filter: 'all', multiple: true, maximum: 9 - attachmentList.value.length }
-  )
+  plus.gallery.pick((res) => { const files = (res?.files || []).map(f => ({ name: f.name || 'unknown', size: f.size || 0, path: f })); attachmentList.value.push(...files) }, () => {}, { filter: 'all', multiple: true, maximum: 9 - attachmentList.value.length })
   // #endif
   // #ifndef APP-PLUS
-  uni.chooseImage({
-    count: 9 - attachmentList.value.length,
-    sizeType: ['compressed'],
-    sourceType: ['album', 'camera'],
-    success: (res) => {
-      res.tempFilePaths.forEach(path => {
-        const parts = path.split('/')
-        const name = parts[parts.length - 1] || 'image.jpg'
-        attachmentList.value.push({ name, size: 0, path })
-      })
-    }
-  })
+  uni.chooseImage({ count: 9 - attachmentList.value.length, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: (res) => { res.tempFilePaths.forEach(path => { const parts = path.split('/'); attachmentList.value.push({ name: parts[parts.length - 1] || 'image.jpg', size: 0, path }) }) } })
   // #endif
 }
-
-function removeAttachment(idx) {
-  attachmentList.value.splice(idx, 1)
-}
+function removeAttachment(idx) { attachmentList.value.splice(idx, 1) }
 
 async function handleSubmit() {
-  if (!itemList.value.length) {
-    uni.showToast({ title: '请先添加物料', icon: 'none' })
-    return
-  }
-  if (!inboundDate.value) {
-    uni.showToast({ title: '请选择入库时间', icon: 'none' })
-    return
-  }
-  if (!selectedOperatorId.value) {
-    uni.showToast({ title: '请选择经办人', icon: 'none' })
-    return
-  }
+  if (!itemList.value.length) { uni.showToast({ title: '请先添加物料', icon: 'none' }); return }
+  if (!inboundDate.value) { uni.showToast({ title: '请选择入库时间', icon: 'none' }); return }
+  if (!selectedOperatorId.value) { uni.showToast({ title: '请选择经办人', icon: 'none' }); return }
 
   let totalCount = 0
   const items = itemList.value.map(item => {
     totalCount += item.count || 0
-    return {
-      warehouseId: item.warehouseId,
-      areaId: item.areaId,
-      productId: item.productId,
-      productName: item.productName,
-      productBarCode: item.productBarCode,
-      productUnitName: item.productUnitName,
-      purchaseUnitName: item.purchaseUnitName,
-      purchaseUnitConvertQuantity: item.purchaseUnitConvertQuantity,
-      inputCount: item.inputCount,
-      count: item.count
-    }
+    return { warehouseId: item.warehouseId, areaId: item.areaId, productId: item.productId, productName: item.productName, productBarCode: item.productBarCode, productUnitName: item.productUnitName, purchaseUnitName: item.purchaseUnitName, purchaseUnitConvertQuantity: item.purchaseUnitConvertQuantity, inputCount: item.inputCount, count: item.count }
   })
 
   const now = new Date()
   const [y, m, d] = inboundDate.value.split('-').map(Number)
   const inTime = new Date(y, m - 1, d, now.getHours(), now.getMinutes(), now.getSeconds()).getTime()
 
-  const submitData = {
-    isCode: true,
-    inTime: inTime,
-    stockUserId: String(selectedOperatorId.value),
-    supplierId: itemList.value[0]?.supplierId,
-    status: 0,
-    totalCount: totalCount,
-    totalPrice: 0,
-    remark: remark.value,
-    items: items
-  }
-
-  if (attachmentList.value.length) {
-    submitData.attachments = attachmentList.value.map(f => f.path || f)
-  }
-
-  console.log('提交数据:', JSON.stringify(submitData))
+  const submitData = { isCode: true, inTime, stockUserId: String(selectedOperatorId.value), supplierId: itemList.value[0]?.supplierId, status: 0, totalCount, totalPrice: 0, remark: remark.value, items }
+  if (attachmentList.value.length) { submitData.attachments = attachmentList.value.map(f => f.path || f) }
 
   uni.showLoading({ title: '提交中...', mask: true })
   try {
     await createMaterialInbound(submitData)
-    uni.hideLoading()
-    getApp().globalData._materialInboundItems = []
+    uni.hideLoading(); getApp().globalData._materialInboundItems = []
     uni.showToast({ title: '入库成功', icon: 'success' })
-    setTimeout(() => {
-      uni.navigateBack()
-    }, 1500)
+    setTimeout(() => uni.navigateBack(), 1500)
   } catch (e) {
-    uni.hideLoading()
-    const msg = e?.message || e?.data?.msg || e?.response?.data?.msg || '保存失败'
-    console.error('入库提交失败:', e)
+    uni.hideLoading(); const msg = e?.message || e?.data?.msg || e?.response?.data?.msg || '保存失败'
     uni.showToast({ title: String(msg).substring(0, 50), icon: 'none' })
   }
 }
 
-onReady(() => {
-  focusKeywordNoKeyboard()
-})
-
+onReady(() => { focusKeywordNoKeyboard() })
 onShow(() => {
   const items = getApp().globalData?._materialInboundItems
-  if (Array.isArray(items)) {
-    itemList.value = [...items]
-  }
-  // 读取用户选择页返回的经办人
+  if (Array.isArray(items)) itemList.value = [...items]
   const userResult = getApp().globalData?._materialInboundUserSelectResult
-  if (userResult) {
-    selectedOperatorId.value = userResult.user.id
-    selectedOperatorName.value = userResult.user.nickname || userResult.user.userName || userResult.user.name || ''
-    getApp().globalData._materialInboundUserSelectResult = null
-  }
+  if (userResult) { selectedOperatorId.value = userResult.user.id; selectedOperatorName.value = userResult.user.nickname || userResult.user.userName || userResult.user.name || ''; getApp().globalData._materialInboundUserSelectResult = null }
 })
-
-onHide(() => {})
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  min-height: 100vh;
-  background: #f5f6f8;
-  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
-}
-
-/* 操作按钮区 */
-.action-row {
-  display: flex;
-  align-items: center;
-  gap: 16rpx;
-  padding: 20rpx 24rpx;
-}
-
-.scan-input-row {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  height: 72rpx;
-  border-radius: 10rpx;
-  overflow: hidden;
-}
-.scan-input {
-  flex: 1;
-  height: 72rpx;
-  padding: 0 20rpx;
-  font-size: 26rpx;
-  color: #333;
-  background: #fff;
-  border: 1rpx solid #d0d5dd;
-  border-radius: 10rpx;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 72rpx;
-  padding: 0 24rpx;
-  border-radius: 10rpx;
-  background: #1f4b79;
-  color: #fff;
-  font-size: 26rpx;
-  font-weight: 600;
-  white-space: nowrap;
-
-  .btn-text { font-size: 26rpx; font-weight: 600; color: #fff; }
-}
-
-/* 物料列表 */
-.material-section { padding: 0; }
-
-.section-title-bar {
-  display: flex; align-items: center; gap: 10rpx;
-  padding: 24rpx 24rpx 18rpx;
-}
-.section-bar-line {
-  width: 6rpx; height: 32rpx; border-radius: 3rpx;
-  background: #2563eb; flex-shrink: 0;
-}
-.section-title { font-size: 30rpx; font-weight: 700; color: #1a1a1a; }
-.required { color: #ef4444; margin-right: 2rpx; }
-
-.item-list { padding: 0 24rpx; }
-
-.item-card {
-  position: relative; display: flex; align-items: center; justify-content: space-between;
-  background: #fff; border-radius: 14rpx; padding: 20rpx; margin-bottom: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(15, 23, 42, 0.04);
-}
-.item-delete-top { position: absolute; top: 10rpx; right: 10rpx; width: 40rpx; height: 40rpx; border-radius: 20rpx; background: #fee2e2; display: flex; align-items: center; justify-content: center; z-index: 1; .delete-icon { font-size: 20rpx; color: #dc2626; } }
-
-.item-left { display: flex; align-items: center; flex: 1; min-width: 0; padding-right: 36rpx; }
-.item-image-wrap {
-  width: 80rpx; height: 80rpx; border-radius: 10rpx; overflow: hidden;
-  background: #f8fafc; border: 1rpx solid #f0f0f0; flex-shrink: 0;
-  display: flex; align-items: center; justify-content: center;
-}
+.page-container { min-height: 100vh; background: #f5f7fb; }
+.top-action-bar { display: flex; align-items: center; gap: 16rpx; padding: 20rpx 24rpx; background: #ffffff; border-bottom: 1rpx solid #eef2f7; }
+.detail-scroll { height: calc(100vh - 172rpx - 116rpx); }
+.content-section { padding: 20rpx 24rpx 28rpx; }
+.section-card { background: #ffffff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 20rpx; border: 1rpx solid #eef2f7; box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.04); }
+.section-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 22rpx; padding-bottom: 18rpx; border-bottom: 1rpx solid #f1f5f9; }
+.section-icon { width: 40rpx; height: 40rpx; border-radius: 10rpx; background: #eff6ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.section-title { font-size: 32rpx; font-weight: 600; color: #1f2937; }
+.section-title-wrap { display: flex; align-items: center; gap: 12rpx; min-width: 0; }
+.list-header { justify-content: space-between; gap: 16rpx; }
+.form-field { display: flex; flex-direction: column; gap: 12rpx; }
+.form-field + .form-field { margin-top: 24rpx; }
+.form-label { font-size: 26rpx; color: #4b5563; font-weight: 500; }
+.required-star { color: #ef4444; font-size: 28rpx; margin-left: 4rpx; }
+.select-field { display: flex; align-items: center; justify-content: space-between; padding: 0 24rpx; height: 76rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; box-sizing: border-box; }
+.select-text { flex: 1; min-width: 0; font-size: 28rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.placeholder, .placeholder-text { color: #9ca3af; }
+.form-textarea { width: 100%; min-height: 120rpx; background: #f8fafc; border-radius: 14rpx; padding: 18rpx 24rpx; font-size: 28rpx; color: #374151; box-sizing: border-box; }
+.attachment-upload { height: 76rpx; border-radius: 14rpx; border: 1rpx dashed #bfdbfe; background: #eff6ff; color: #1f7cff; display: flex; align-items: center; justify-content: center; gap: 10rpx; font-size: 26rpx; font-weight: 600; }
+.attachment-list { margin-top: 12rpx; display: flex; flex-direction: column; gap: 10rpx; }
+.attachment-item { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; padding: 16rpx 18rpx; background: #f8fafc; border-radius: 12rpx; }
+.attachment-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10rpx; }
+.attachment-name { flex: 1; min-width: 0; font-size: 24rpx; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.attachment-delete { width: 44rpx; height: 44rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.add-product-btn { height: 60rpx; padding: 0 18rpx; border-radius: 999rpx; border: 1rpx solid #bfdbfe; background: #eff6ff; color: #1f7cff; font-size: 24rpx; font-weight: 600; display: flex; align-items: center; gap: 8rpx; flex-shrink: 0; }
+
+.scan-input-row { flex: 1; }
+.scan-input { width: 100%; height: 76rpx; padding: 0 20rpx; font-size: 26rpx; color: #333; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; box-sizing: border-box; }
+.scan-btn { display: flex; align-items: center; justify-content: center; height: 76rpx; padding: 0 24rpx; border-radius: 14rpx; background: #1f4b79; white-space: nowrap; flex-shrink: 0; }
+.btn-text { font-size: 26rpx; font-weight: 600; color: #fff; }
+
+.item-list { display: flex; flex-direction: column; gap: 18rpx; }
+.item-card { display: flex; gap: 18rpx; padding: 20rpx; background: #ffffff; border: 1rpx solid #eef2f7; border-radius: 18rpx; box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.04); }
+.image-box { width: 128rpx; height: 128rpx; border-radius: 16rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
 .item-image { width: 100%; height: 100%; }
-.item-image-empty { font-size: 36rpx; opacity: 0.3; }
-.item-info { margin-left: 16rpx; flex: 1; min-width: 0; }
-.item-name {
-  font-size: 28rpx; font-weight: 600; color: #1a1a1a; display: block;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.item-spec { font-size: 24rpx; color: #9ca3af; margin-top: 6rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-.item-right { display: flex; flex-direction: column; align-items: flex-end; margin-left: 16rpx; flex-shrink: 0; padding-right: 50rpx; }
-.item-qty-row { display: flex; flex-direction: column; align-items: flex-end; }
-.item-qty-label { font-size: 22rpx; color: #9ca3af; }
-.item-qty-value { font-size: 28rpx; font-weight: 700; color: #2563eb; margin-top: 4rpx; }
-
-.empty-wrap { padding: 160rpx 0; text-align: center; }
-.empty-text { font-size: 28rpx; color: #94a3b8; }
-
-/* 入库信息区 */
-.form-section { padding-bottom: 16rpx; }
-
-.form-row-card {
-  position: relative;
-  display: flex; align-items: center; justify-content: space-between;
-  background: #fff; border-radius: 16rpx; padding: 26rpx 24rpx; margin: 0 24rpx 16rpx;
-  box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.04);
-  font-size: 28rpx; color: #374151;
-  .placeholder { color: #9ca3af; }
-}
-.form-row-arrow { font-size: 20rpx; color: #999; flex-shrink: 0; }
-
-/* 备注 */
-.remark-card { padding: 20rpx 24rpx; }
-.remark-textarea { width: 100%; min-height: 120rpx; font-size: 27rpx; color: #374151; line-height: 1.6; box-sizing: border-box; }
-.remark-placeholder { color: #bbb; }
-
-/* 附件 */
-.attachment-area { padding: 0 24rpx 16rpx; }
-.attachment-list { display: flex; flex-direction: column; gap: 12rpx; }
-
-.attachment-file-item {
-  display: flex; align-items: center; gap: 16rpx;
-  background: #fff; border-radius: 12rpx; padding: 18rpx 20rpx;
-  box-shadow: 0 2rpx 8rpx rgba(15, 23, 42, 0.03);
-}
-.file-icon {
-  width: 72rpx; height: 72rpx; border-radius: 10rpx;
-  background: #f1f5f9; display: flex; align-items: center; justify-content: center;
-  flex-shrink: 0;
-}
-.file-icon-text { font-size: 36rpx; }
-.file-info { flex: 1; min-width: 0; }
-.file-name {
-  font-size: 26rpx; color: #1f2937; display: block;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.file-size { font-size: 22rpx; color: #9ca3af; margin-top: 4rpx; display: block; }
-.file-delete {
-  width: 48rpx; height: 48rpx; border-radius: 24rpx;
-  background: #fee2e2; display: flex; align-items: center; justify-content: center;
-  flex-shrink: 0;
-}
-.delete-icon-sm { font-size: 22rpx; color: #dc2626; }
-
-.attachment-add-file {
-  display: flex; align-items: center; justify-content: center; gap: 10rpx;
-  height: 88rpx; background: #fff; border: 2rpx dashed #cbd5e1;
-  border-radius: 12rpx;
-}
-.add-text { font-size: 26rpx; color: #6b7280; }
-
-/* 底部操作栏 */
-.bottom-actions {
-  position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 18rpx;
-  padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));
-  background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(15, 23, 42, 0.06); z-index: 99;
-}
-.bottom-btn { flex: 1; height: 84rpx; line-height: 84rpx; text-align: center; border-radius: 16rpx; font-size: 30rpx; font-weight: 600;
-  &:active { opacity: 0.85; }
-}
-.cancel-btn { background: #eef2f7; color: #475569; }
-.confirm-btn { background: #1f4b79; color: #ffffff; }
+.item-info { flex: 1; min-width: 0; }
+.item-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 14rpx; }
+.item-name { flex: 1; min-width: 0; font-size: 30rpx; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.delete-btn { width: 48rpx; height: 48rpx; border-radius: 24rpx; background: #fef2f2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; }
+.info-cell { min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
+.info-label { font-size: 22rpx; color: #9ca3af; }
+.info-value { font-size: 26rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.empty-card { min-height: 220rpx; border: 2rpx dashed #d7dde8; border-radius: 18rpx; background: #f8fafc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14rpx; color: #94a3b8; font-size: 27rpx; }
+.action-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 18rpx; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(15, 23, 42, 0.06); z-index: 99; }
+.action-btn { flex: 1; height: 84rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; }
+.back-btn { background: #eef2f7; color: #475569; }
+.submit-btn { background: #1f4b79; color: #ffffff; }
 </style>
diff --git a/src/pages_function/pages/materialInbound/detail.vue b/src/pages_function/pages/materialInbound/detail.vue
new file mode 100644
index 0000000..df3b838
--- /dev/null
+++ b/src/pages_function/pages/materialInbound/detail.vue
@@ -0,0 +1,158 @@
+<template>
+  <view class="page-container">
+    <NavBar :title="'物料入库详情'" />
+
+    <scroll-view scroll-y class="detail-scroll">
+      <view class="content-section">
+        <view class="section-card">
+          <view class="section-header">
+            <view class="section-icon"><uni-icons type="compose" size="24" color="#1f7cff"></uni-icons></view>
+            <text class="section-title">入库信息</text>
+            <text :class="['status-tag', statusClass(detail.status)]">{{ statusText(detail.status) }}</text>
+          </view>
+          <view v-if="loading" class="loading-card">加载中...</view>
+          <template v-else>
+            <view class="readonly-grid">
+              <view class="readonly-item"><text class="readonly-label">单据号</text><text class="readonly-value">{{ textValue(detail.no) }}</text></view>
+              <view class="readonly-item"><text class="readonly-label">入库类型</text><text class="readonly-value">{{ textValue(detail.inType) }}</text></view>
+              <view class="readonly-item"><text class="readonly-label">入库时间</text><text class="readonly-value">{{ formatDateTime(detail.inTime || detail.createTime) }}</text></view>
+              <view class="readonly-item"><text class="readonly-label">经办人</text><text class="readonly-value">{{ textValue(detail.stockUserName) }}</text></view>
+              <view class="readonly-item"><text class="readonly-label">入库数量</text><text class="readonly-value highlight">{{ textValue(detail.totalCount) }}{{ detail.totalCount != null ? ' 个' : '' }}</text></view>
+              <view class="readonly-item"><text class="readonly-label">审核人</text><text class="readonly-value">{{ textValue(detail.auditUserName) }}</text></view>
+            </view>
+            <view class="form-field"><text class="form-label">备注</text><view class="readonly-box">{{ textValue(detail.remark) }}</view></view>
+            <view v-if="attachmentList.length" class="form-field">
+              <text class="form-label">附件</text>
+              <view class="attachment-list">
+                <view v-for="(file, idx) in attachmentList" :key="idx" class="attachment-item">
+                  <uni-icons type="paperclip" size="16" color="#64748b"></uni-icons>
+                  <text class="attachment-name">{{ textValue(getAttachmentName(file, idx)) }}</text>
+                </view>
+              </view>
+            </view>
+          </template>
+        </view>
+
+        <view class="section-card">
+          <view class="section-header list-header">
+            <view class="section-title-wrap"><view class="section-icon"><uni-icons type="list" size="24" color="#1f7cff"></uni-icons></view><text class="section-title">入库清单</text></view>
+            <text class="count-badge">{{ itemList.length }} 项</text>
+          </view>
+          <view v-if="itemList.length" class="summary-strip">
+            <view class="summary-item"><text class="summary-value">{{ itemList.length }}</text><text class="summary-label">物料</text></view>
+            <view class="summary-item"><text class="summary-value">{{ totalPieceCount }} 个</text><text class="summary-label">总数量</text></view>
+          </view>
+          <view v-if="itemList.length" class="item-list">
+            <view v-for="(item, idx) in itemList" :key="item.id || idx" class="item-card">
+              <view class="item-header"><text class="item-name">{{ textValue(item.productName) }}</text><text class="item-code">{{ textValue(item.productBarCode) }}</text></view>
+              <view class="info-grid">
+                <view class="info-cell"><text class="info-label">仓库</text><text class="info-value">{{ textValue(item.warehouseName || warehouseMap[item.warehouseId]) }}</text></view>
+                <view class="info-cell"><text class="info-label">库区</text><text class="info-value">{{ textValue(item.areaName) }}</text></view>
+                <view class="info-cell"><text class="info-label">数量</text><text class="info-value">{{ textValue(item.count) }}{{ getUnitData(item).unitName && ' ' + getUnitData(item).unitName }}</text></view>
+                <view class="info-cell"><text class="info-label">换算关系</text><text class="info-value">{{ textValue(getUnitData(item).packagingRule) }}</text></view>
+              </view>
+            </view>
+          </view>
+          <view v-else class="empty-card">{{ loading ? '加载中...' : '暂无入库清单' }}</view>
+        </view>
+      </view>
+    </scroll-view>
+    <view class="action-bar"><view class="action-btn back-btn" @click="handleBack">返回</view></view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import NavBar from '@/components/common/NavBar.vue'
+import { getMaterialInboundDetail } from '@/api/mes/materialInbound'
+import { getProductDetail } from '@/api/mes/sparepart'
+import { getWarehouseSimpleList } from '@/api/mes/moldget'
+
+const detailId = ref(null)
+const detail = ref({})
+const loading = ref(false)
+const productMap = ref({})
+const warehouseMap = ref({})
+
+const itemList = computed(() => { const l = detail.value?.items || detail.value?.itemList || detail.value?.stockInItems || []; return Array.isArray(l) ? l : [] })
+const attachmentList = computed(() => { const r = detail.value?.fileUrl || detail.value?.attachments || detail.value?.attachmentList; if (!r) return []; if (Array.isArray(r)) return r; return typeof r === 'object' ? [r] : String(r).split(',').map(s => s.trim()).filter(Boolean) })
+const totalPieceCount = computed(() => itemList.value.reduce((s, i) => s + (Number(i.count) || 0), 0))
+
+function getUnitData(item) {
+  const p = productMap.value[item.productId]
+  const puN = p?.purchaseUnitName || item.purchaseUnitName || ''
+  const puQ = p?.purchaseUnitConvertQuantity || item.purchaseUnitConvertQuantity
+  const uN = p?.unitName || p?.productUnitName || item.unitName || item.productUnitName || '个'
+  let pr = p?.packagingRule || item.packagingRule || ''
+  if (!pr && puN && puQ) pr = `1${puN}=${puQ}${uN}`
+  return { packagingRule: pr || '-', unitName: uN }
+}
+function textValue(v) { if (v === 0) return '0'; if (v == null) return '-'; return String(v).trim() || '-' }
+function formatDateTime(v) { if (!v) return '-'; const r = typeof v === 'string' && /^\d+$/.test(v) ? Number(v) : v; const d = new Date(r); if (Number.isNaN(d.getTime())) return String(v); const p = n => String(n).padStart(2, '0'); return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}` }
+function statusText(s) { const m = { 0: '待入库', 10: '待审核', 20: '已入库', 1: '已驳回' }; return m[Number(s)] || textValue(s) }
+function statusClass(s) { const m = { 0: 'text-primary', 10: 'text-warning', 20: 'text-success', 1: 'text-danger' }; return m[Number(s)] || '' }
+function getAttachmentName(f, i) { if (f?.name) return f.name; if (f?.fileName) return f.fileName; const t = String(f?.url || f?.fileUrl || f || ''); const n = t.split('/').pop(); return n || `附件${i+1}` }
+
+async function loadDetail() {
+  if (!detailId.value) return; loading.value = true
+  try {
+    const res = await getMaterialInboundDetail(detailId.value)
+    detail.value = res?.data !== undefined ? res.data : res
+    try { const wR = await getWarehouseSimpleList(); const wD = Array.isArray(wR) ? wR : (Array.isArray(wR?.data) ? wR.data : []); const m = {}; wD.forEach(w => { m[w.id] = w.name || String(w.id) }); warehouseMap.value = m } catch(e){}
+    const its = itemList.value
+    if (its.length) { const ids = [...new Set(its.map(i => i.productId).filter(Boolean))]; const m2 = {}; await Promise.all(ids.map(async id => { try { const r = await getProductDetail(id); const d = r?.data || r; if (d) m2[id] = d } catch(e){} })); productMap.value = m2 }
+  } catch(e) { uni.showToast({ title: '加载详情失败', icon: 'none' }) }
+  finally { loading.value = false }
+}
+function handleBack() { uni.navigateBack() }
+onLoad((o) => { detailId.value = o?.id || null; loadDetail() })
+</script>
+
+<style lang="scss" scoped>
+.page-container { min-height: 100vh; background: #f5f7fb; }
+.detail-scroll { height: calc(100vh - 172rpx); }
+.content-section { padding: 20rpx 24rpx 28rpx; }
+.section-card { background: #ffffff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 20rpx; border: 1rpx solid #eef2f7; box-shadow: 0 6rpx 18rpx rgba(15,23,42,0.04); }
+.section-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 22rpx; padding-bottom: 18rpx; border-bottom: 1rpx solid #f1f5f9; }
+.section-icon { width: 40rpx; height: 40rpx; border-radius: 10rpx; background: #eff6ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.section-title { font-size: 32rpx; font-weight: 600; color: #1f2937; }
+.section-title-wrap { display: flex; align-items: center; gap: 12rpx; min-width: 0; }
+.list-header { justify-content: space-between; gap: 16rpx; }
+.count-badge { flex-shrink: 0; padding: 6rpx 16rpx; border-radius: 999rpx; background: #eff6ff; color: #1f7cff; font-size: 22rpx; font-weight: 600; }
+.status-tag { margin-left: auto; flex-shrink: 0; padding: 8rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; line-height: 1; background: #e2e8f0; color: #64748b; }
+.status-tag.text-success { color: #15803d; background: #dcfce7; }
+.status-tag.text-danger { color: #dc2626; background: #fee2e2; }
+.status-tag.text-warning { color: #d97706; background: #fef3c7; }
+.status-tag.text-primary { color: #1d4ed8; background: #dbeafe; }
+.loading-card, .empty-card { min-height: 180rpx; border: 2rpx dashed #d7dde8; border-radius: 18rpx; background: #f8fafc; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 27rpx; }
+.readonly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #ffffff; border: 1rpx solid #eef2f7; border-radius: 14rpx; overflow: hidden; }
+.readonly-item { min-width: 0; display: flex; flex-direction: column; gap: 8rpx; padding: 18rpx 20rpx; border-right: 1rpx solid #f1f5f9; border-bottom: 1rpx solid #f1f5f9; }
+.readonly-item:nth-child(2n) { border-right: 0; }
+.readonly-label { font-size: 23rpx; color: #8a94a6; }
+.readonly-value { font-size: 27rpx; color: #334155; line-height: 1.35; word-break: break-all; }
+.readonly-value.highlight { color: #1f4b79; font-weight: 700; }
+.form-field { display: flex; flex-direction: column; gap: 12rpx; margin-top: 24rpx; }
+.form-label { font-size: 26rpx; color: #4b5563; font-weight: 500; }
+.readonly-box { min-height: 70rpx; padding: 18rpx 24rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; box-sizing: border-box; font-size: 28rpx; color: #374151; line-height: 1.45; }
+.attachment-list { display: flex; flex-direction: column; gap: 10rpx; }
+.attachment-item { display: flex; align-items: center; gap: 10rpx; padding: 16rpx 18rpx; background: #f8fafc; border-radius: 12rpx; }
+.attachment-name { flex: 1; min-width: 0; font-size: 24rpx; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.summary-strip { display: grid; grid-template-columns: repeat(2, 1fr); background: #f8fafc; border: 1rpx solid #e8eef6; border-radius: 16rpx; overflow: hidden; margin-bottom: 18rpx; }
+.summary-item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6rpx; padding: 16rpx 8rpx; border-right: 1rpx solid #eef2f7; }
+.summary-item:last-child { border-right: 0; }
+.summary-value { max-width: 100%; font-size: 30rpx; font-weight: 700; color: #1f4b79; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.summary-label { font-size: 22rpx; color: #8a94a6; }
+.item-list { display: flex; flex-direction: column; gap: 18rpx; }
+.item-card { padding: 20rpx; background: #ffffff; border: 1rpx solid #eef2f7; border-radius: 18rpx; box-shadow: 0 6rpx 18rpx rgba(15,23,42,0.04); }
+.item-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 14rpx; }
+.item-name { flex: 1; min-width: 0; font-size: 30rpx; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.item-code { flex-shrink: 0; max-width: 240rpx; font-size: 24rpx; color: #8a94a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; }
+.info-cell { min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
+.info-label { font-size: 22rpx; color: #9ca3af; }
+.info-value { font-size: 26rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.action-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 18rpx; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(15,23,42,0.06); z-index: 99; }
+.action-btn { flex: 1; height: 84rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; }
+.back-btn { background: #1f4b79; color: #ffffff; }
+</style>
diff --git a/src/pages_function/pages/materialInbound/index.vue b/src/pages_function/pages/materialInbound/index.vue
index c52fe04..b56699c 100644
--- a/src/pages_function/pages/materialInbound/index.vue
+++ b/src/pages_function/pages/materialInbound/index.vue
@@ -303,10 +303,10 @@ function openDetail(item) {
     uni.showToast({ title: '无法查看详情', icon: 'none' })
     return
   }
-  // 跳转到备件入库详情（共用同一个详情页）
-  uni.navigateTo({
-    url: `/pages_function/pages/sparepartInbound/detail?id=${encodeURIComponent(String(item.id))}`
-  })
+    // 跳转到物料入库详情
+    uni.navigateTo({
+      url: `/pages_function/pages/materialInbound/detail?id=${encodeURIComponent(String(item.id))}`
+    })
 }
 
 async function handleApprove(item) {
diff --git a/src/pages_function/pages/materialOutbound/create.vue b/src/pages_function/pages/materialOutbound/create.vue
index 6e3bdab..afe64dd 100644
--- a/src/pages_function/pages/materialOutbound/create.vue
+++ b/src/pages_function/pages/materialOutbound/create.vue
@@ -2,430 +2,139 @@
   <view class="page-container">
     <NavBar :title="t('materialOutbound.createTitle')" />
 
-    <!-- 操作按钮区 -->
-    <view class="action-row">
+    <view class="top-action-bar">
       <view class="scan-input-row">
-        <input
-          id="material-outbound-scan-input"
-          class="scan-input"
-          v-model="scanCodeInput"
-          placeholder="红外扫码或输入物料码"
-          confirm-type="done"
-          @confirm="onScanInputConfirm"
-        />
-      </view>
-      <view class="action-btn select-btn" @click="handleSelectMaterial">
-        <text class="btn-text">选择物料</text>
+        <input id="material-outbound-scan-input" class="scan-input" v-model="scanCodeInput" placeholder="红外扫码或输入物料码" confirm-type="done" @confirm="onScanInputConfirm" />
       </view>
+      <view class="scan-btn" @click="handleSelectMaterial"><text class="btn-text">选择物料</text></view>
     </view>
 
-    <!-- 出库信息 -->
-    <view class="form-section">
-      <!-- 出库时间 -->
-      <view class="section-title-bar">
-        <view class="section-bar-line"></view>
-        <text class="section-title"><text class="required">*</text>出库时间</text>
-      </view>
-      <picker mode="date" :value="outboundDate" @change="handleDateChange">
-        <view class="form-row-card">
-          <text :class="{ placeholder: !outboundDate }">{{ outboundDate || '请选择出库时间' }}</text>
-          <text class="form-row-arrow">▼</text>
-        </view>
-      </picker>
-
-      <!-- 经办人 -->
-      <view class="section-title-bar" style="padding-top: 24rpx;">
-        <view class="section-bar-line"></view>
-        <text class="section-title"><text class="required">*</text>经办人</text>
-      </view>
-      <view class="form-row-card" @click="goSelectOperator">
-        <text :class="{ placeholder: !selectedOperatorName }">{{ selectedOperatorName || '请选择经办人' }}</text>
-        <text class="form-row-arrow">▶</text>
-      </view>
-
-      <!-- 备注 -->
-      <view class="section-title-bar" style="padding-top: 24rpx;">
-        <view class="section-bar-line"></view>
-        <text class="section-title">备注</text>
-      </view>
-      <view class="form-row-card remark-card">
-        <textarea v-model="remark" class="remark-textarea" placeholder="请输入备注信息" placeholder-class="remark-placeholder" :maxlength="500" auto-height />
-      </view>
-
-      <!-- 附件 -->
-      <view class="section-title-bar" style="padding-top: 24rpx;">
-        <view class="section-bar-line"></view>
-        <text class="section-title">附件</text>
-      </view>
-      <view class="attachment-area">
-        <view v-if="attachmentFileName" class="attachment-file-item">
-          <view class="file-icon">
-            <text class="file-icon-text">{{ getFileIcon(attachmentFileName) }}</text>
-          </view>
-          <view class="file-info">
-            <text class="file-name" :title="attachmentFileName">{{ attachmentFileName }}</text>
-            <text v-if="attachmentFileSize" class="file-size">{{ formatFileSize(attachmentFileSize) }}</text>
-          </view>
-          <view v-if="uploadLoading" class="file-uploading">
-            <text class="uploading-text">上传中...</text>
-          </view>
-          <view v-else class="file-delete" @click="removeAttachment">
-            <text class="delete-icon-sm">✕</text>
+    <scroll-view scroll-y class="detail-scroll">
+      <view class="content-section">
+        <view class="section-card">
+          <view class="section-header"><view class="section-icon"><uni-icons type="compose" size="24" color="#1f7cff"></uni-icons></view><text class="section-title">出库信息</text></view>
+          <view class="form-field"><text class="form-label">出库时间<text class="required-star">*</text></text><picker mode="date" :value="outboundDate" @change="handleDateChange"><view class="select-field"><text :class="['select-text', outboundDate ? '' : 'placeholder']">{{ outboundDate || '请选择出库时间' }}</text><uni-icons type="calendar" size="18" color="#9ca3af"></uni-icons></view></picker></view>
+          <view class="form-field"><text class="form-label">经办人<text class="required-star">*</text></text><view class="select-field" @click="goSelectOperator"><text :class="['select-text', selectedOperatorName ? '' : 'placeholder']">{{ selectedOperatorName || '请选择经办人' }}</text><uni-icons type="right" size="18" color="#9ca3af"></uni-icons></view></view>
+          <view class="form-field"><text class="form-label">备注</text><textarea v-model="remark" class="form-textarea" placeholder="请输入备注信息" placeholder-class="placeholder-text" maxlength="500" /></view>
+          <view class="form-field"><text class="form-label">附件</text><view class="attachment-upload" @click="handleAddAttachment"><uni-icons type="paperclip" size="20" color="#1f7cff"></uni-icons><text>选取文件</text></view>
+            <view v-if="attachmentList.length" class="attachment-list"><view v-for="(file, idx) in attachmentList" :key="idx" class="attachment-item"><view class="attachment-main"><uni-icons type="paperclip" size="16" color="#64748b"></uni-icons><text class="attachment-name">{{ file.name }}</text></view><view class="attachment-delete" @click="removeAttachment(idx)"><uni-icons type="closeempty" size="18" color="#ef4444"></uni-icons></view></view></view>
           </view>
         </view>
-        <view class="attachment-add-file" @click="handleAddAttachment" v-if="!attachmentFileName">
-          <text class="add-text">选取文件</text>
+        <view class="section-card">
+          <view class="section-header list-header"><view class="section-title-wrap"><view class="section-icon"><uni-icons type="list" size="24" color="#1f7cff"></uni-icons></view><text class="section-title">出库清单（{{ itemList.length }}）</text></view><view class="add-product-btn" @click="handleSelectMaterial"><uni-icons type="plusempty" size="16" color="#1f7cff"></uni-icons><text>添加物料</text></view></view>
+          <view v-if="itemList.length" class="item-list"><view v-for="(item, idx) in itemList" :key="idx" class="item-card">
+            <view class="image-box"><image v-if="item._material && getItemImage(item._material)" :src="getItemImage(item._material)" class="item-image" mode="aspectFill" /><uni-icons v-else type="image" size="34" color="#cbd5e1"></uni-icons></view>
+            <view class="item-info"><view class="item-header"><text class="item-name">{{ textValue(item.productName) }}</text><view class="delete-btn" @click="removeItem(idx)"><uni-icons type="trash" size="18" color="#ef4444"></uni-icons></view></view><view class="info-grid"><view class="info-cell"><text class="info-label">编码</text><text class="info-value">{{ item.productBarCode || '-' }}</text></view><view class="info-cell"><text class="info-label">出库数量</text><text class="info-value">{{ item.inputCount || item.count }}{{ item.purchaseUnitName }}</text></view></view></view>
+          </view></view>
+          <view v-else class="empty-card" @click="handleSelectMaterial"><uni-icons type="plusempty" size="30" color="#94a3b8"></uni-icons><text>请扫码或选择物料</text></view>
         </view>
       </view>
-    </view>
-
-    <!-- 出库清单 -->
-    <view class="material-section">
-      <view class="section-title-bar">
-        <view class="section-bar-line"></view>
-        <text class="section-title">出库清单（{{ itemList.length }}）</text>
-      </view>
-      <view v-if="itemList.length" class="item-list">
-        <view v-for="(item, idx) in itemList" :key="idx" class="item-card">
-          <view class="item-delete-top" @click="removeItem(idx)"><text class="delete-icon">✕</text></view>
-          <view class="item-left">
-            <view class="item-image-wrap">
-              <image v-if="item._material && getItemImage(item._material)" :src="getItemImage(item._material)" class="item-image" mode="aspectFill" />
-              <text v-else class="item-image-empty">📦</text>
-            </view>
-            <view class="item-info">
-              <text class="item-name">{{ item.productName }}</text>
-              <text class="item-spec">{{ item.productBarCode || '-' }}</text>
-            </view>
-          </view>
-          <view class="item-right">
-            <view class="item-qty-row">
-              <text class="item-qty-label">出库数量</text>
-              <text class="item-qty-value">{{ item.inputCount }}{{ item.purchaseUnitName }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-      <view v-else class="empty-wrap"><text class="empty-text">请扫码或选择物料</text></view>
-    </view>
-
-    <!-- 底部操作栏 -->
-    <view class="bottom-actions">
-      <view class="bottom-btn cancel-btn" @click="handleCancel">取消</view>
-      <view class="bottom-btn confirm-btn" @click="handleSubmit">确认出库</view>
-    </view>
-
+    </scroll-view>
+    <view class="action-bar"><view class="action-btn back-btn" @click="handleCancel">取消</view><view class="action-btn submit-btn" @click="handleSubmit">确认出库</view></view>
     <sv-focus-no-keyboard ref="focusNoKeyboardRef"></sv-focus-no-keyboard>
   </view>
 </template>
 
 <script setup>
 import { ref, nextTick } from 'vue'
-import { onReady, onShow, onHide } from '@dcloudio/uni-app'
+import { onReady, onShow } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import NavBar from '@/components/common/NavBar.vue'
 import { createMaterialOutbound } from '@/api/mes/materialOutbound'
 import { getProductDetail } from '@/api/mes/sparepart'
-import { getBaseUrl } from '@/utils/request'
-import { getToken } from '@/utils/auth'
 
 const { t } = useI18n()
+const itemList = ref([]); const outboundDate = ref(formatDate(new Date()))
+const selectedOperatorId = ref(null); const selectedOperatorName = ref(''); const remark = ref(''); const attachmentList = ref([])
+const scanCodeInput = ref(''); const focusNoKeyboardRef = ref(null)
+const keywordInputSelector = '#material-outbound-scan-input input, input#material-outbound-scan-input'
 
-const itemList = ref([])
-const outboundDate = ref(formatDate(new Date()))
-const selectedOperatorId = ref(null)
-const selectedOperatorName = ref('')
-const remark = ref('')
-// 附件（单文件）
-const fileUrl = ref('')
-const attachmentFileName = ref('')
-const attachmentFileSize = ref(0)
-const uploadLoading = ref(false)
-
-function formatDate(date) { const y = date.getFullYear(); const m = String(date.getMonth() + 1).padStart(2, '0'); const d = String(date.getDate()).padStart(2, '0'); return `${y}-${m}-${d}` }
+function textValue(v) { if (v === 0) return '0'; if (v == null) return '-'; return String(v).trim() || '-' }
+function formatDate(d) { const y = d.getFullYear(); const m = String(d.getMonth()+1).padStart(2,'0'); const d2 = String(d.getDate()).padStart(2,'0'); return `${y}-${m}-${d2}` }
 function handleDateChange(e) { outboundDate.value = e.detail.value }
-function getItemImage(material) { if (!material.images) return ''; if (Array.isArray(material.images)) return String(material.images[0] || ''); return String(material.images).split(',')[0]?.trim() || '' }
-
+function getItemImage(m) { if (!m.images) return ''; if (Array.isArray(m.images)) return String(m.images[0]||''); return String(m.images).split(',')[0]?.trim() || '' }
+function focusKeywordNoKeyboard() { nextTick(()=>{ setTimeout(()=>{ focusNoKeyboardRef.value?.focus(keywordInputSelector) },80) }) }
 function handleCancel() { getApp().globalData._materialOutboundItems = []; uni.navigateBack() }
-
-function handleSelectMaterial() {
-  getApp().globalData._materialSelectFrom = 'outbound'
-  uni.navigateTo({ url: '/pages_function/pages/materialInbound/materialSelect?from=outbound' })
-}
-
-const scanCodeInput = ref('')
-
-// 聚焦阻止键盘弹出
-const focusNoKeyboardRef = ref(null)
-const keywordInputSelector = '#material-outbound-scan-input input, input#material-outbound-scan-input'
-
-function focusKeywordNoKeyboard() {
-  nextTick(() => {
-    setTimeout(() => {
-      focusNoKeyboardRef.value?.focus(keywordInputSelector)
-    }, 80)
-  })
-}
-
-function onScanInputConfirm() {
-  const code = scanCodeInput.value.trim()
-  if (!code) return
-  handleScanCode(code)
-}
-
+function handleSelectMaterial() { getApp().globalData._materialSelectFrom = 'outbound'; uni.navigateTo({ url: '/pages_function/pages/materialInbound/materialSelect?from=outbound' }) }
+function onScanInputConfirm() { const c = scanCodeInput.value.trim(); if (!c) return; handleScanCode(c) }
 async function handleScanCode(code) {
-  let materialId = null
-  if (code.toUpperCase().startsWith('SPARE-')) materialId = code.replace(/SPARE-/i, '')
-  else { const idMatch = code.match(/(\d+)$/); if (idMatch) materialId = idMatch[1] }
-  if (!materialId) { uni.showToast({ title: '无法识别物料码', icon: 'none' }); return }
-  try {
-    const apiRes = await getProductDetail(materialId)
-    const detail = apiRes?.data || apiRes
-    if (detail && detail.id) {
-      getApp().globalData._materialFromScan = true
-      getApp().globalData._materialBeforeConfirm = detail
-      uni.navigateTo({ url: '/pages_function/pages/materialOutbound/materialConfirm' })
-    } else { uni.showToast({ title: '未找到物料: ' + materialId, icon: 'none' }) }
-  } catch (e) { console.error(e); uni.showToast({ title: '扫码失败', icon: 'none' }) }
+  let id = null; if (code.toUpperCase().startsWith('SPARE-')) id = code.replace(/SPARE-/i,''); else { const m = code.match(/(\d+)$/); if (m) id = m[1] }
+  if (!id) { uni.showToast({ title: '无法识别物料码', icon: 'none' }); return }
+  try { const r = await getProductDetail(id); const d = r?.data || r; if (d?.id) { getApp().globalData._materialFromScan = true; getApp().globalData._materialBeforeConfirm = d; uni.navigateTo({ url: '/pages_function/pages/materialOutbound/materialConfirm' }) } else { uni.showToast({ title: '未找到物料: '+id, icon: 'none' }) } } catch(e) { uni.showToast({ title: '扫码失败', icon: 'none' }) }
 }
-
-function handleScan() {
-  uni.scanCode({
-    onlyFromCamera: false, scanType: ['barCode', 'qrCode'],
-    success: (res) => {
-      const code = (res.result || '').trim()
-      if (!code) return
-      scanCodeInput.value = code
-      handleScanCode(code)
-    },
-    fail: () => { uni.showToast({ title: '扫码失败', icon: 'none' }) }
-  })
-}
-
-function removeItem(idx) { itemList.value.splice(idx, 1); getApp().globalData._materialOutboundItems = [...itemList.value] }
-
-// 经办人
-function goSelectOperator() {
-  getApp().globalData._materialOutboundUserFrom = 'outbound'
-  uni.navigateTo({
-    url: '/pages_function/pages/moldRepair/userSelect?field=operator&from=materialOutbound'
-  })
-}
-
-// 附件
-function getFileIcon(fileName) {
-  const ext = (fileName || '').split('.').pop()?.toLowerCase()
-  const iconMap = { pdf: '📄', doc: '📝', docx: '📝', xls: '📊', xlsx: '📊', ppt: '📽', pptx: '📽', txt: '📃', zip: '📦', rar: '📦', jpg: '🖼', jpeg: '🖼', png: '🖼', gif: '🖼', webp: '🖼' }
-  return iconMap[ext] || '📎'
-}
-function formatFileSize(bytes) {
-  if (!bytes) return '0 B'
-  if (bytes < 1024) return bytes + ' B'
-  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'
-  return (bytes / 1048576).toFixed(1) + ' MB'
-}
-
-const ALLOWED_EXTS = ['png', 'jpg', 'jpeg', 'doc', 'xls', 'ppt', 'txt', 'pdf']
-const MAX_FILE_SIZE = 100 * 1024 * 1024
-
+function removeItem(idx) { itemList.value.splice(idx,1); getApp().globalData._materialOutboundItems = [...itemList.value] }
+function goSelectOperator() { getApp().globalData._materialOutboundUserFrom = 'outbound'; uni.navigateTo({ url: '/pages_function/pages/moldRepair/userSelect?field=operator&from=materialOutbound' }) }
 function handleAddAttachment() {
   // #ifdef APP-PLUS
-  plus.gallery.pick(
-    (res) => {
-      const file = res?.files?.[0]
-      if (!file) return
-      const ext = (file.name || '').split('.').pop()?.toLowerCase()
-      if (!ALLOWED_EXTS.includes(ext)) { uni.showToast({ title: '不支持的文件类型：.' + (ext || '未知'), icon: 'none' }); return }
-      if (file.size > MAX_FILE_SIZE) { uni.showToast({ title: '文件大小不能超过100MB', icon: 'none' }); return }
-      uploadFile(file)
-    },
-    (e) => { console.log('选择文件失败:', e) },
-    { filter: 'all', multiple: false }
-  )
+  plus.gallery.pick((r)=>{ const fs = (r?.files||[]).map(f=>({ name: f.name||'unknown', size: f.size||0, path: f })); attachmentList.value.push(...fs) }, ()=>{}, { filter: 'all', multiple: true, maximum: 9-attachmentList.value.length })
   // #endif
   // #ifndef APP-PLUS
-  uni.chooseFile({
-    count: 1, type: 'all',
-    success: (res) => {
-      const tempFile = res.tempFiles?.[0]
-      if (!tempFile) return
-      const ext = (tempFile.name || '').split('.').pop()?.toLowerCase()
-      if (!ALLOWED_EXTS.includes(ext)) { uni.showToast({ title: '不支持的文件类型：.' + (ext || '未知'), icon: 'none' }); return }
-      if (tempFile.size > MAX_FILE_SIZE) { uni.showToast({ title: '文件大小不能超过100MB', icon: 'none' }); return }
-      uploadFile(tempFile)
-    },
-    fail: () => {
-      uni.chooseImage({
-        count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'],
-        success: (imgRes) => {
-          const path = imgRes.tempFilePaths?.[0]
-          if (!path) return
-          const parts = path.split('/')
-          uploadFile({ path, name: parts[parts.length - 1] || 'image.jpg', size: 0 })
-        }
-      })
-    }
-  })
+  uni.chooseImage({ count: 9-attachmentList.value.length, sizeType:['compressed'], sourceType:['album','camera'], success:(r)=>{ r.tempFilePaths.forEach(p=>{ const ps = p.split('/'); attachmentList.value.push({ name: ps[ps.length-1]||'image.jpg', size:0, path:p }) }) } })
   // #endif
 }
-
-async function uploadFile(file) {
-  uploadLoading.value = true
-  attachmentFileName.value = file.name || 'unknown'
-  attachmentFileSize.value = file.size || 0
-  try {
-    const res = await new Promise((resolve, reject) => {
-      uni.uploadFile({
-        url: getBaseUrl() + '/admin-api/infra/file/upload',
-        filePath: file.path,
-        name: 'file',
-        header: { 'Authorization': 'Bearer ' + (getToken() || ''), 'tenantId': '1' },
-        success: (uploadRes) => {
-          if (uploadRes.statusCode === 200) {
-            try { resolve(JSON.parse(uploadRes.data)) }
-            catch (e) { reject(new Error('解析上传结果失败')) }
-          } else { reject(new Error('上传失败，状态码：' + uploadRes.statusCode)) }
-        },
-        fail: (err) => { reject(err) }
-      })
-    })
-    if (res.code === 0 && res.data) {
-      const { fileName, fileUrl: url } = res.data
-      fileUrl.value = JSON.stringify({ fileName: fileName || file.name, fileUrl: url })
-      attachmentFileName.value = fileName || file.name
-      uni.showToast({ title: '上传成功', icon: 'success' })
-    } else {
-      throw new Error(res.msg || '上传失败')
-    }
-  } catch (e) {
-    attachmentFileName.value = ''; attachmentFileSize.value = 0; fileUrl.value = ''
-    uni.showToast({ title: String(e?.message || '上传失败').substring(0, 50), icon: 'none' })
-  } finally {
-    uploadLoading.value = false
-  }
-}
-
-function removeAttachment() {
-  attachmentFileName.value = ''; attachmentFileSize.value = 0; fileUrl.value = ''
-}
+function removeAttachment(idx) { attachmentList.value.splice(idx,1) }
 
 async function handleSubmit() {
-  if (!itemList.value.length) { uni.showToast({ title: '请先添加物料', icon: 'none' }); return }
-  if (!outboundDate.value) { uni.showToast({ title: '请选择出库时间', icon: 'none' }); return }
-  if (!selectedOperatorId.value) { uni.showToast({ title: '请选择经办人', icon: 'none' }); return }
-
-  const now = new Date()
-  const [y, m, d] = outboundDate.value.split('-').map(Number)
-  const outTime = new Date(y, m - 1, d, now.getHours(), now.getMinutes(), now.getSeconds()).getTime()
-
-  let totalCount = 0
-  const items = itemList.value.map(item => {
-    totalCount += Number(item.count) || 0
-    const it = {
-      warehouseId: item.warehouseId || null,
-      areaId: item.areaId || null,
-      productId: item.productId,
-      count: Number(item.count) || 0
-    }
-    return it
-  })
-
-  const submitData = {
-    isCode: true,
-    outTime: outTime,
-    stockUserId: String(selectedOperatorId.value),
-    responserId: Number(selectedOperatorId.value),
-    status: 0,
-    totalCount: totalCount,
-    totalPrice: 0,
-    remark: remark.value || '',
-    items: items
-  }
-
-  if (fileUrl.value) { submitData.fileUrl = fileUrl.value }
-
-  console.log('=== 出库提交 ===')
-  console.log(JSON.stringify(submitData))
-
-  uni.showLoading({ title: '提交中...', mask: true })
-  try {
-    await createMaterialOutbound(submitData)
-    uni.hideLoading(); getApp().globalData._materialOutboundItems = []
-    uni.showToast({ title: t('functionCommon.createSuccess'), icon: 'success' })
-    setTimeout(() => uni.navigateBack(), 1500)
-  } catch (e) {
-    uni.hideLoading(); const msg = e?.message || e?.data?.msg || e?.response?.data?.msg || t('functionCommon.saveFailed')
-    console.error('出库提交失败:', e, JSON.stringify(e))
-    uni.showToast({ title: String(msg).substring(0, 50), icon: 'none' })
-  }
+  if (!itemList.value.length) { uni.showToast({ title:'请先添加物料', icon:'none' }); return }
+  if (!outboundDate.value) { uni.showToast({ title:'请选择出库时间', icon:'none' }); return }
+  if (!selectedOperatorId.value) { uni.showToast({ title:'请选择经办人', icon:'none' }); return }
+  const now = new Date(); const [y,m,d] = outboundDate.value.split('-').map(Number); const outTime = new Date(y,m-1,d,now.getHours(),now.getMinutes(),now.getSeconds()).getTime()
+  let totalCount = 0; const items = itemList.value.map(i => { totalCount += Number(i.count)||0; return { warehouseId: i.warehouseId||null, areaId: i.areaId||null, productId: i.productId, count: Number(i.count)||0 } })
+  const sd = { isCode:true, outTime, stockUserId: String(selectedOperatorId.value), responserId: Number(selectedOperatorId.value), status:0, totalCount, totalPrice:0, remark: remark.value||'', items }
+  if (attachmentList.value.length) sd.attachments = attachmentList.value.map(f=>f.path||f)
+  uni.showLoading({ title:'提交中...', mask:true })
+  try { await createMaterialOutbound(sd); uni.hideLoading(); getApp().globalData._materialOutboundItems = []; uni.showToast({ title: t('functionCommon.createSuccess'), icon:'success' }); setTimeout(()=>uni.navigateBack(),1500) }
+  catch(e) { uni.hideLoading(); const msg = e?.message||e?.data?.msg||e?.response?.data?.msg||t('functionCommon.saveFailed'); uni.showToast({ title: String(msg).substring(0,50), icon:'none' }) }
 }
-
-onReady(() => { focusKeywordNoKeyboard() })
-
-onShow(() => { const items = getApp().globalData?._materialOutboundItems; if (Array.isArray(items)) itemList.value = [...items]; const userResult = getApp().globalData?._materialOutboundUserSelectResult; if (userResult) { selectedOperatorId.value = userResult.user.id; selectedOperatorName.value = userResult.user.nickname || userResult.user.userName || userResult.user.name || ''; getApp().globalData._materialOutboundUserSelectResult = null } })
-onHide(() => {})
+onReady(()=>{ focusKeywordNoKeyboard() })
+onShow(()=>{ const its = getApp().globalData?._materialOutboundItems; if (Array.isArray(its)) itemList.value = [...its]; const ur = getApp().globalData?._materialOutboundUserSelectResult; if (ur) { selectedOperatorId.value = ur.user.id; selectedOperatorName.value = ur.user.nickname||ur.user.userName||ur.user.name||''; getApp().globalData._materialOutboundUserSelectResult = null } })
 </script>
 
 <style lang="scss" scoped>
-.page-container { min-height: 100vh; background: #f5f6f8; padding-bottom: calc(120rpx + env(safe-area-inset-bottom)); }
-.action-row { display: flex; align-items: center; gap: 16rpx; padding: 20rpx 24rpx; }
-.scan-input-row { flex: 1; display: flex; align-items: center; height: 72rpx; border-radius: 10rpx; overflow: hidden; }
-.scan-input { flex: 1; height: 72rpx; padding: 0 20rpx; font-size: 26rpx; color: #333; background: #fff; border: 1rpx solid #d0d5dd; border-radius: 10rpx; }
-.action-btn { display: flex; align-items: center; justify-content: center; height: 72rpx; padding: 0 24rpx; border-radius: 10rpx; background: #1f4b79; color: #fff; font-size: 26rpx; font-weight: 600; white-space: nowrap; .btn-icon-wrap { width: 44rpx; height: 44rpx; display: flex; align-items: center; justify-content: center; } .btn-icon { font-size: 36rpx; color: #fff; } .btn-text { font-size: 26rpx; font-weight: 600; color: #fff; } }
-.form-section { padding-bottom: 16rpx; }
-.section-title-bar { display: flex; align-items: center; gap: 10rpx; padding: 24rpx 24rpx 18rpx; }
-.section-bar-line { width: 6rpx; height: 32rpx; border-radius: 3rpx; background: #2563eb; flex-shrink: 0; }
-.section-title { font-size: 30rpx; font-weight: 700; color: #1a1a1a; }
-.required { color: #ef4444; margin-right: 2rpx; }
-.form-row-card { position: relative; display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 16rpx; padding: 26rpx 24rpx; margin: 0 24rpx 16rpx; box-shadow: 0 4rpx 16rpx rgba(15,23,42,0.04); font-size: 28rpx; color: #374151; .placeholder { color: #9ca3af; } }
-.form-row-arrow { font-size: 20rpx; color: #999; flex-shrink: 0; }
-
-.dropdown-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; margin-top: 4rpx; background: #fff; border: 1rpx solid #e0e0e0; border-radius: 12rpx; box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.1); overflow: hidden; }
-.dropdown-scroll { max-height: 360rpx; overflow-y: auto; }
-.dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 24rpx; border-bottom: 1rpx solid #f0f0f0; &:last-child { border-bottom: 0; } &.active { background: #f0f5ff; } }
-.dropdown-item-text { font-size: 27rpx; color: #333; }
-.dropdown-check { font-size: 28rpx; color: #2563eb; font-weight: 700; }
-.dropdown-empty { padding: 32rpx; text-align: center; color: #999; font-size: 26rpx; }
-
-.remark-card { padding: 20rpx 24rpx; }
-.remark-textarea { width: 100%; min-height: 120rpx; font-size: 27rpx; color: #374151; line-height: 1.6; box-sizing: border-box; }
-.remark-placeholder { color: #bbb; }
-
-.attachment-area { padding: 0 24rpx 16rpx; }
-.attachment-list { display: flex; flex-direction: column; gap: 12rpx; }
-.attachment-file-item { display: flex; align-items: center; gap: 16rpx; background: #fff; border-radius: 12rpx; padding: 18rpx 20rpx; box-shadow: 0 2rpx 8rpx rgba(15,23,42,0.03); }
-.file-icon { width: 72rpx; height: 72rpx; border-radius: 10rpx; background: #f1f5f9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
-.file-icon-text { font-size: 36rpx; }
-.file-info { flex: 1; min-width: 0; }
-.file-name { font-size: 26rpx; color: #1f2937; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.file-size { font-size: 22rpx; color: #9ca3af; margin-top: 4rpx; display: block; }
-.file-delete { width: 48rpx; height: 48rpx; border-radius: 24rpx; background: #fee2e2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
-.delete-icon-sm { font-size: 22rpx; color: #dc2626; }
-.file-uploading { flex-shrink: 0; .uploading-text { font-size: 22rpx; color: #2563eb; } }
-.attachment-add-file { display: flex; align-items: center; justify-content: center; height: 88rpx; background: #fff; border: 2rpx dashed #cbd5e1; border-radius: 12rpx; }
-.add-text { font-size: 26rpx; color: #6b7280; }
-
-.material-section { padding: 0; }
-.item-list { padding: 0 24rpx; }
-.item-card { position: relative; display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 14rpx; padding: 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 12rpx rgba(15,23,42,0.04); }
-.item-delete-top { position: absolute; top: 10rpx; right: 10rpx; width: 40rpx; height: 40rpx; border-radius: 20rpx; background: #fee2e2; display: flex; align-items: center; justify-content: center; z-index: 1; .delete-icon { font-size: 20rpx; color: #dc2626; } }
-.item-left { display: flex; align-items: center; flex: 1; min-width: 0; padding-right: 36rpx; }
-.item-image-wrap { width: 80rpx; height: 80rpx; border-radius: 10rpx; overflow: hidden; background: #f8fafc; border: 1rpx solid #f0f0f0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
+.page-container { min-height: 100vh; background: #f5f7fb; }
+.top-action-bar { display: flex; align-items: center; gap: 16rpx; padding: 20rpx 24rpx; background: #ffffff; border-bottom: 1rpx solid #eef2f7; }
+.detail-scroll { height: calc(100vh - 172rpx - 116rpx); }
+.content-section { padding: 20rpx 24rpx 28rpx; }
+.section-card { background: #ffffff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 20rpx; border: 1rpx solid #eef2f7; box-shadow: 0 6rpx 18rpx rgba(15,23,42,0.04); }
+.section-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 22rpx; padding-bottom: 18rpx; border-bottom: 1rpx solid #f1f5f9; }
+.section-icon { width: 40rpx; height: 40rpx; border-radius: 10rpx; background: #eff6ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.section-title { font-size: 32rpx; font-weight: 600; color: #1f2937; }
+.section-title-wrap { display: flex; align-items: center; gap: 12rpx; min-width: 0; }
+.list-header { justify-content: space-between; gap: 16rpx; }
+.form-field { display: flex; flex-direction: column; gap: 12rpx; }
+.form-field + .form-field { margin-top: 24rpx; }
+.form-label { font-size: 26rpx; color: #4b5563; font-weight: 500; }
+.required-star { color: #ef4444; font-size: 28rpx; margin-left: 4rpx; }
+.select-field { display: flex; align-items: center; justify-content: space-between; padding: 0 24rpx; height: 76rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; box-sizing: border-box; }
+.select-text { flex: 1; min-width: 0; font-size: 28rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.placeholder, .placeholder-text { color: #9ca3af; }
+.form-textarea { width: 100%; min-height: 120rpx; background: #f8fafc; border-radius: 14rpx; padding: 18rpx 24rpx; font-size: 28rpx; color: #374151; box-sizing: border-box; }
+.attachment-upload { height: 76rpx; border-radius: 14rpx; border: 1rpx dashed #bfdbfe; background: #eff6ff; color: #1f7cff; display: flex; align-items: center; justify-content: center; gap: 10rpx; font-size: 26rpx; font-weight: 600; }
+.attachment-list { margin-top: 12rpx; display: flex; flex-direction: column; gap: 10rpx; }
+.attachment-item { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; padding: 16rpx 18rpx; background: #f8fafc; border-radius: 12rpx; }
+.attachment-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10rpx; }
+.attachment-name { flex: 1; min-width: 0; font-size: 24rpx; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.attachment-delete { width: 44rpx; height: 44rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.add-product-btn { height: 60rpx; padding: 0 18rpx; border-radius: 999rpx; border: 1rpx solid #bfdbfe; background: #eff6ff; color: #1f7cff; font-size: 24rpx; font-weight: 600; display: flex; align-items: center; gap: 8rpx; flex-shrink: 0; }
+.scan-input-row { flex: 1; }
+.scan-input { width: 100%; height: 76rpx; padding: 0 20rpx; font-size: 26rpx; color: #333; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; box-sizing: border-box; }
+.scan-btn { display: flex; align-items: center; justify-content: center; height: 76rpx; padding: 0 24rpx; border-radius: 14rpx; background: #1f4b79; white-space: nowrap; flex-shrink: 0; }
+.btn-text { font-size: 26rpx; font-weight: 600; color: #fff; }
+.item-list { display: flex; flex-direction: column; gap: 18rpx; }
+.item-card { display: flex; gap: 18rpx; padding: 20rpx; background: #ffffff; border: 1rpx solid #eef2f7; border-radius: 18rpx; box-shadow: 0 6rpx 18rpx rgba(15,23,42,0.04); }
+.image-box { width: 128rpx; height: 128rpx; border-radius: 16rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
 .item-image { width: 100%; height: 100%; }
-.item-image-empty { font-size: 36rpx; opacity: 0.3; }
-.item-info { margin-left: 16rpx; flex: 1; min-width: 0; }
-.item-name { font-size: 28rpx; font-weight: 600; color: #1a1a1a; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.item-spec { font-size: 24rpx; color: #9ca3af; margin-top: 6rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.item-right { display: flex; flex-direction: column; align-items: flex-end; margin-left: 16rpx; flex-shrink: 0; padding-right: 50rpx; }
-.item-qty-row { display: flex; flex-direction: column; align-items: flex-end; }
-.item-qty-label { font-size: 22rpx; color: #9ca3af; }
-.item-qty-value { font-size: 28rpx; font-weight: 700; color: #2563eb; margin-top: 4rpx; }
-.empty-wrap { padding: 160rpx 0; text-align: center; }
-.empty-text { font-size: 28rpx; color: #94a3b8; }
-
-.bottom-actions { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 18rpx; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8rpx 24rpx rgba(15,23,42,0.06); z-index: 99; }
-.bottom-btn { flex: 1; height: 84rpx; line-height: 84rpx; text-align: center; border-radius: 16rpx; font-size: 30rpx; font-weight: 600; &:active { opacity: 0.85; } }
-.cancel-btn { background: #eef2f7; color: #475569; }
-.confirm-btn { background: #1f4b79; color: #ffffff; }
+.item-info { flex: 1; min-width: 0; }
+.item-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 14rpx; }
+.item-name { flex: 1; min-width: 0; font-size: 30rpx; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.delete-btn { width: 48rpx; height: 48rpx; border-radius: 24rpx; background: #fef2f2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; }
+.info-cell { min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
+.info-label { font-size: 22rpx; color: #9ca3af; }
+.info-value { font-size: 26rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.empty-card { min-height: 220rpx; border: 2rpx dashed #d7dde8; border-radius: 18rpx; background: #f8fafc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14rpx; color: #94a3b8; font-size: 27rpx; }
+.action-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 18rpx; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(15,23,42,0.06); z-index: 99; }
+.action-btn { flex: 1; height: 84rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; }
+.back-btn { background: #eef2f7; color: #475569; }
+.submit-btn { background: #1f4b79; color: #ffffff; }
 </style>
-
diff --git a/src/pages_function/pages/materialOutbound/detail.vue b/src/pages_function/pages/materialOutbound/detail.vue
index 3dbe876..554c1fb 100644
--- a/src/pages_function/pages/materialOutbound/detail.vue
+++ b/src/pages_function/pages/materialOutbound/detail.vue
@@ -1,235 +1,125 @@
 <template>
   <view class="page-container">
-    <NavBar title="物料出库详情" />
-
-    <view v-if="loading" class="hint">加载中...</view>
-    <view v-else-if="!detail.id" class="hint">暂无详情</view>
-    <view v-else class="content">
-      <view class="summary-card">
-        <view class="summary-header">
-          <text class="summary-no">{{ textValue(detail.no) }}</text>
-          <text :class="['status-tag', statusClass(detail.status)]">{{ statusText(detail.status) }}</text>
+    <NavBar :title="'物料出库详情'" />
+    <scroll-view scroll-y class="detail-scroll">
+      <view class="content-section">
+        <view class="section-card">
+          <view class="section-header"><view class="section-icon"><uni-icons type="compose" size="24" color="#1f7cff"></uni-icons></view><text class="section-title">出库信息</text><text :class="['status-tag', statusClass(detail.status)]">{{ statusText(detail.status) }}</text></view>
+          <view v-if="loading" class="loading-card">加载中...</view>
+          <template v-else>
+            <view class="readonly-grid">
+              <view class="readonly-item"><text class="readonly-label">单据号</text><text class="readonly-value">{{ textValue(detail.no) }}</text></view>
+              <view class="readonly-item"><text class="readonly-label">出库类型</text><text class="readonly-value">{{ textValue(detail.outType) }}</text></view>
+              <view class="readonly-item"><text class="readonly-label">出库时间</text><text class="readonly-value">{{ formatDateTime(detail.outTime || detail.createTime) }}</text></view>
+              <view class="readonly-item"><text class="readonly-label">经办人</text><text class="readonly-value">{{ textValue(detail.responserName || detail.stockUserName || detail.creatorName || detail.creator) }}</text></view>
+              <view class="readonly-item"><text class="readonly-label">出库数量</text><text class="readonly-value highlight">{{ textValue(detail.totalCount) }}{{ detail.totalCount != null ? ' 个' : '' }}</text></view>
+              <view class="readonly-item"><text class="readonly-label">审核人</text><text class="readonly-value">{{ textValue(detail.auditUserName) }}</text></view>
+            </view>
+            <view class="form-field"><text class="form-label">备注</text><view class="readonly-box">{{ textValue(detail.remark) }}</view></view>
+          </template>
         </view>
-        <view class="row"><text class="label">出库时间</text><text class="value">{{ formatDateTime(detail.outTime || detail.createTime) }}</text></view>
-        <view class="row"><text class="label">经办人</text><text class="value">{{ textValue(detail.responserName || detail.stockUserName || detail.creatorName || detail.creator) }}</text></view>
-        <view class="row"><text class="label">审核人</text><text class="value">{{ textValue(detail.auditUserName) }}</text></view>
-        <view class="row"><text class="label">总数量</text><text class="value highlight">{{ textValue(detail.totalCount) }}</text></view>
-        <view class="row"><text class="label">备注</text><text class="value">{{ textValue(detail.remark) }}</text></view>
-      </view>
-
-      <view class="section-title-bar">
-        <view class="section-bar-line"></view>
-        <text class="section-title">出库明细</text>
-      </view>
-      <view v-if="items.length" class="item-list">
-        <view v-for="(item, index) in items" :key="item.id || index" class="item-card">
-          <view class="item-title">{{ textValue(item.productName || item.name) }}</view>
-          <view class="row"><text class="label">物料编码</text><text class="value">{{ textValue(item.productBarCode || item.barCode) }}</text></view>
-          <view class="row"><text class="label">仓库/库区</text><text class="value">{{ warehouseAreaText(item) }}</text></view>
-          <view class="row"><text class="label">出库数量</text><text class="value highlight">{{ textValue(item.inputCount || item.count) }}{{ textUnit(item.purchaseUnitName || item.productUnitName) }}</text></view>
-          <view class="row"><text class="label">库存数量</text><text class="value">{{ textValue(item.count) }}{{ textUnit(item.productUnitName) }}</text></view>
+        <view class="section-card">
+          <view class="section-header list-header"><view class="section-title-wrap"><view class="section-icon"><uni-icons type="list" size="24" color="#1f7cff"></uni-icons></view><text class="section-title">出库清单</text></view><text class="count-badge">{{ items.length }} 项</text></view>
+          <view v-if="items.length" class="summary-strip"><view class="summary-item"><text class="summary-value">{{ items.length }}</text><text class="summary-label">物料</text></view><view class="summary-item"><text class="summary-value">{{ totalCount }} 个</text><text class="summary-label">总数量</text></view></view>
+          <view v-if="items.length" class="item-list"><view v-for="(item, idx) in items" :key="item.id || idx" class="item-card">
+            <view class="item-header"><text class="item-name">{{ textValue(item.productName || item.name) }}</text><text class="item-code">{{ textValue(item.productBarCode || item.barCode) }}</text></view>
+            <view class="info-grid">
+              <view class="info-cell"><text class="info-label">仓库</text><text class="info-value">{{ textValue(item.warehouseName || warehouseMap[item.warehouseId]) }}</text></view>
+              <view class="info-cell"><text class="info-label">库区</text><text class="info-value">{{ textValue(item.areaName) }}</text></view>
+              <view class="info-cell"><text class="info-label">数量</text><text class="info-value">{{ textValue(item.count) }}{{ getUnitData(item).unitName && ' ' + getUnitData(item).unitName }}</text></view>
+              <view class="info-cell"><text class="info-label">换算关系</text><text class="info-value">{{ textValue(getUnitData(item).packagingRule) }}</text></view>
+            </view>
+          </view></view>
+          <view v-else class="empty-card">{{ loading ? '加载中...' : '暂无出库清单' }}</view>
         </view>
       </view>
-      <view v-else class="hint">暂无明细</view>
-    </view>
+    </scroll-view>
+    <view class="action-bar"><view class="action-btn back-btn" @click="handleBack">返回</view></view>
   </view>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import NavBar from '@/components/common/NavBar.vue'
 import { getMaterialOutbound } from '@/api/mes/materialOutbound'
-
-const loading = ref(false)
-const detail = ref({})
-
-const items = computed(() => {
-  const source = detail.value.items || detail.value.itemList || detail.value.details || detail.value.detailList || []
-  return Array.isArray(source) ? source : []
-})
-
-function textValue(value) {
-  if (value === 0) return '0'
-  if (value == null) return '-'
-  const text = String(value).trim()
-  return text || '-'
-}
-
-function textUnit(value) {
-  if (value === 0) return '0'
-  if (value == null) return ''
-  return String(value).trim()
-}
-
-function formatDateTime(value) {
-  if (!value) return '-'
-  if (Array.isArray(value) && value.length >= 3) {
-    const [year, month, day] = value
-    const pad = (n) => String(n).padStart(2, '0')
-    return `${year}-${pad(month)}-${pad(day)}`
-  }
-  const date = new Date(Number(value))
-  if (Number.isNaN(date.getTime())) return String(value)
-  const pad = (n) => String(n).padStart(2, '0')
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
-}
-
-const STATUS_MAP = {
-  0: '待出库',
-  1: '已驳回',
-  10: '待审核',
-  20: '已出库'
-}
-
-function statusText(status) {
-  return STATUS_MAP[Number(status)] || textValue(status)
-}
-
-function statusClass(status) {
-  const value = Number(status)
-  if (value === 0) return 'pending'
-  if (value === 10) return 'auditing'
-  if (value === 20) return 'success'
-  if (value === 1) return 'danger'
-  return ''
-}
-
-function warehouseAreaText(item) {
-  const warehouse = item.warehouseName || item.warehouse?.name || ''
-  const area = item.areaName || item.area?.name || ''
-  return [warehouse, area].filter(Boolean).join(' / ') || '-'
-}
-
-async function loadDetail(id) {
-  if (!id) return
-  loading.value = true
+import { getProductDetail } from '@/api/mes/sparepart'
+import { getWarehouseSimpleList } from '@/api/mes/moldget'
+
+const id = ref(null); const detail = ref({}); const loading = ref(false)
+const productMap = ref({}); const warehouseMap = ref({})
+
+const items = computed(() => { const l = detail.value?.items || detail.value?.itemList || detail.value?.stockOutItems || []; return Array.isArray(l) ? l : [] })
+const totalCount = computed(() => items.value.reduce((s,i) => s + (Number(i.count)||0), 0))
+
+function getUnitData(item) {
+  const p = productMap.value[item.productId]
+  const puN = p?.purchaseUnitName || item.purchaseUnitName || ''
+  const puQ = p?.purchaseUnitConvertQuantity || item.purchaseUnitConvertQuantity
+  const uN = p?.unitName || p?.productUnitName || item.unitName || item.productUnitName || '个'
+  let pr = p?.packagingRule || item.packagingRule || ''
+  if (!pr && puN && puQ) pr = `1${puN}=${puQ}${uN}`
+  return { packagingRule: pr || '-', unitName: uN }
+}
+function textValue(v) { if (v === 0) return '0'; if (v == null) return '-'; return String(v).trim() || '-' }
+function formatDateTime(v) { if (!v) return '-'; const r = typeof v === 'string' && /^\d+$/.test(v) ? Number(v) : v; const d = new Date(r); if (Number.isNaN(d.getTime())) return String(v); const p = n => String(n).padStart(2,'0'); return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}` }
+function statusText(s) { const m = { 0: '待出库', 10: '待审核', 20: '已出库', 1: '已驳回' }; return m[Number(s)] || textValue(s) }
+function statusClass(s) { const m = { 0: 'text-primary', 10: 'text-warning', 20: 'text-success', 1: 'text-danger' }; return m[Number(s)] || '' }
+
+async function loadDetail() {
+  if (!id.value) return; loading.value = true
   try {
-    const res = await getMaterialOutbound(id)
-    detail.value = res?.data || res || {}
-  } catch (error) {
-    detail.value = {}
-    uni.showToast({ title: '加载失败', icon: 'none' })
-  } finally {
-    loading.value = false
-  }
-}
-
-onLoad((options) => {
-  loadDetail(options?.id)
-})
+    const res = await getMaterialOutbound(id.value); detail.value = res?.data !== undefined ? res.data : res
+    try { const wR = await getWarehouseSimpleList(); const wD = Array.isArray(wR) ? wR : (Array.isArray(wR?.data) ? wR.data : []); const m = {}; wD.forEach(w => { m[w.id] = w.name || String(w.id) }); warehouseMap.value = m } catch(e){}
+    const its = items.value
+    if (its.length) { const ids = [...new Set(its.map(i => i.productId).filter(Boolean))]; const m2 = {}; await Promise.all(ids.map(async pid => { try { const r = await getProductDetail(pid); const d = r?.data || r; if (d) m2[pid] = d } catch(e){} })); productMap.value = m2 }
+  } catch(e) { uni.showToast({ title: '加载详情失败', icon: 'none' }) } finally { loading.value = false }
+}
+function handleBack() { uni.navigateBack() }
+onLoad((o) => { id.value = o?.id || null; loadDetail() })
 </script>
 
 <style lang="scss" scoped>
-.page-container {
-  min-height: 100vh;
-  background: #f4f5f7;
-  padding-bottom: 32rpx;
-}
-
-.content {
-  padding: 20rpx 24rpx 32rpx;
-}
-
-.summary-card,
-.item-card {
-  background: #ffffff;
-  border-radius: 14rpx;
-  padding: 24rpx;
-  box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.04);
-}
-
-.summary-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 18rpx;
-  margin-bottom: 14rpx;
-  border-bottom: 1rpx solid #eef2f7;
-}
-
-.summary-no {
-  font-size: 32rpx;
-  font-weight: 700;
-  color: #111827;
-}
-
-.status-tag {
-  padding: 6rpx 16rpx;
-  border-radius: 999rpx;
-  font-size: 24rpx;
-  color: #2563eb;
-  background: #eff6ff;
-}
-
-.status-tag.auditing { color: #d97706; background: #fffbeb; }
-.status-tag.success { color: #16a34a; background: #f0fdf4; }
-.status-tag.danger { color: #dc2626; background: #fef2f2; }
-
-.row {
-  display: flex;
-  align-items: flex-start;
-  gap: 18rpx;
-  padding: 10rpx 0;
-}
-
-.label {
-  width: 150rpx;
-  flex-shrink: 0;
-  font-size: 26rpx;
-  color: #6b7280;
-}
-
-.value {
-  flex: 1;
-  min-width: 0;
-  font-size: 26rpx;
-  color: #374151;
-  word-break: break-all;
-}
-
-.highlight {
-  color: #1f4b79;
-  font-weight: 700;
-}
-
-.section-title-bar {
-  display: flex;
-  align-items: center;
-  gap: 10rpx;
-  padding: 28rpx 0 18rpx;
-}
-
-.section-bar-line {
-  width: 6rpx;
-  height: 28rpx;
-  border-radius: 4rpx;
-  background: #1f4b79;
-}
-
-.section-title {
-  font-size: 30rpx;
-  font-weight: 700;
-  color: #1f2937;
-}
-
-.item-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16rpx;
-}
-
-.item-title {
-  margin-bottom: 12rpx;
-  font-size: 30rpx;
-  font-weight: 700;
-  color: #111827;
-}
-
-.hint {
-  padding: 96rpx 24rpx;
-  text-align: center;
-  font-size: 28rpx;
-  color: #9ca3af;
-}
+.page-container { min-height: 100vh; background: #f5f7fb; }
+.detail-scroll { height: calc(100vh - 172rpx); }
+.content-section { padding: 20rpx 24rpx 28rpx; }
+.section-card { background: #ffffff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 20rpx; border: 1rpx solid #eef2f7; box-shadow: 0 6rpx 18rpx rgba(15,23,42,0.04); }
+.section-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 22rpx; padding-bottom: 18rpx; border-bottom: 1rpx solid #f1f5f9; }
+.section-icon { width: 40rpx; height: 40rpx; border-radius: 10rpx; background: #eff6ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.section-title { font-size: 32rpx; font-weight: 600; color: #1f2937; }
+.section-title-wrap { display: flex; align-items: center; gap: 12rpx; min-width: 0; }
+.list-header { justify-content: space-between; gap: 16rpx; }
+.count-badge { flex-shrink: 0; padding: 6rpx 16rpx; border-radius: 999rpx; background: #eff6ff; color: #1f7cff; font-size: 22rpx; font-weight: 600; }
+.status-tag { margin-left: auto; flex-shrink: 0; padding: 8rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; line-height: 1; background: #e2e8f0; color: #64748b; }
+.status-tag.text-success { color: #15803d; background: #dcfce7; }
+.status-tag.text-danger { color: #dc2626; background: #fee2e2; }
+.status-tag.text-warning { color: #d97706; background: #fef3c7; }
+.status-tag.text-primary { color: #1d4ed8; background: #dbeafe; }
+.loading-card, .empty-card { min-height: 180rpx; border: 2rpx dashed #d7dde8; border-radius: 18rpx; background: #f8fafc; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 27rpx; }
+.readonly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #ffffff; border: 1rpx solid #eef2f7; border-radius: 14rpx; overflow: hidden; }
+.readonly-item { min-width: 0; display: flex; flex-direction: column; gap: 8rpx; padding: 18rpx 20rpx; border-right: 1rpx solid #f1f5f9; border-bottom: 1rpx solid #f1f5f9; }
+.readonly-item:nth-child(2n) { border-right: 0; }
+.readonly-label { font-size: 23rpx; color: #8a94a6; }
+.readonly-value { font-size: 27rpx; color: #334155; line-height: 1.35; word-break: break-all; }
+.readonly-value.highlight { color: #1f4b79; font-weight: 700; }
+.form-field { display: flex; flex-direction: column; gap: 12rpx; margin-top: 24rpx; }
+.form-label { font-size: 26rpx; color: #4b5563; font-weight: 500; }
+.readonly-box { min-height: 70rpx; padding: 18rpx 24rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; box-sizing: border-box; font-size: 28rpx; color: #374151; line-height: 1.45; }
+.summary-strip { display: grid; grid-template-columns: repeat(2, 1fr); background: #f8fafc; border: 1rpx solid #e8eef6; border-radius: 16rpx; overflow: hidden; margin-bottom: 18rpx; }
+.summary-item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6rpx; padding: 16rpx 8rpx; border-right: 1rpx solid #eef2f7; }
+.summary-item:last-child { border-right: 0; }
+.summary-value { max-width: 100%; font-size: 30rpx; font-weight: 700; color: #1f4b79; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.summary-label { font-size: 22rpx; color: #8a94a6; }
+.item-list { display: flex; flex-direction: column; gap: 18rpx; }
+.item-card { padding: 20rpx; background: #ffffff; border: 1rpx solid #eef2f7; border-radius: 18rpx; box-shadow: 0 6rpx 18rpx rgba(15,23,42,0.04); }
+.item-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 14rpx; }
+.item-name { flex: 1; min-width: 0; font-size: 30rpx; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.item-code { flex-shrink: 0; max-width: 240rpx; font-size: 24rpx; color: #8a94a6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; }
+.info-cell { min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
+.info-label { font-size: 22rpx; color: #9ca3af; }
+.info-value { font-size: 26rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.action-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 18rpx; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(15,23,42,0.06); z-index: 99; }
+.action-btn { flex: 1; height: 84rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; }
+.back-btn { background: #1f4b79; color: #ffffff; }
 </style>