From 859d732d9d3f3871be7ce59069f87ea00e0e24cb Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 17 三月 2026 16:53:44 +0800
Subject: [PATCH] 军泰伟业 1.仓储物流需要加上库位,库位暂时分为外购、自制、委外三种类型 2.生产订单加上库存数量,方便实时查看 3.产品发货后,若部分产品退回,可修改订单发货数量(减去退回的产品数量),若订单产品全部退回,可对发货的订单进行取消撤回操作

---
 src/views/salesManagement/deliveryLedger/index.vue |  982 +++++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 713 insertions(+), 269 deletions(-)

diff --git a/src/views/salesManagement/deliveryLedger/index.vue b/src/views/salesManagement/deliveryLedger/index.vue
index 52e14cb..efd32a7 100644
--- a/src/views/salesManagement/deliveryLedger/index.vue
+++ b/src/views/salesManagement/deliveryLedger/index.vue
@@ -6,12 +6,8 @@
           <el-input v-model="searchForm.salesContractNo" placeholder="璇疯緭鍏�" clearable prefix-icon="Search" style="width: 200px"
             @change="handleQuery" />
         </el-form-item>
-        <el-form-item label="杞︾墝鍙凤細">
-          <el-input v-model="searchForm.shippingCarNumber" placeholder="璇疯緭鍏�" clearable prefix-icon="Search" style="width: 200px"
-            @change="handleQuery" />
-        </el-form-item>
-        <el-form-item label="蹇�掑崟鍙凤細">
-          <el-input v-model="searchForm.expressNumber" placeholder="璇疯緭鍏�" clearable prefix-icon="Search" style="width: 200px"
+        <el-form-item label="瀹㈡埛鍚嶇О锛�">
+          <el-input v-model="searchForm.customerName" placeholder="璇疯緭鍏�" clearable prefix-icon="Search" style="width: 200px"
             @change="handleQuery" />
         </el-form-item>
         <el-form-item>
@@ -34,25 +30,36 @@
         <el-table-column label="閿�鍞鍗�" prop="salesContractNo" show-overflow-tooltip />
         <el-table-column label="鍙戣揣璁㈠崟鍙�" prop="shippingNo" show-overflow-tooltip />
         <el-table-column label="瀹㈡埛鍚嶇О" prop="customerName" show-overflow-tooltip />
-        <el-table-column label="鍙戣揣鏃堕棿" prop="shippingDate" show-overflow-tooltip />
-        <el-table-column label="鍙戣揣杞︾墝鍙�" prop="shippingCarNumber" show-overflow-tooltip />
-        <el-table-column label="蹇�掑叕鍙�" prop="expressCompany" show-overflow-tooltip />
-        <el-table-column label="蹇�掑崟鍙�" prop="expressNumber" show-overflow-tooltip />
-        <el-table-column label="瀹℃牳鐘舵��" prop="status" align="center" width="120">
+        <el-table-column label="鍙戣揣杩涘害" align="center" width="150">
+          <template #default="scope">
+            <el-progress 
+              :percentage="getShippingProgress(scope.row)" 
+              :color="getProgressColor(scope.row)"
+              :stroke-width="8"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="鐘舵��" prop="status" align="center" width="120">
           <template #default="scope">
             <el-tag :type="getApprovalStatusType(scope.row.status)">
               {{ getApprovalStatusText(scope.row.status) }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column fixed="right" label="鎿嶄綔" width="150" align="center">
+        <el-table-column fixed="right" label="鎿嶄綔" width="200" align="center">
           <template #default="scope">
             <el-button 
               link 
-              type="primary" 
+              type="primary"  
               size="small" 
-              :disabled="isApproving(scope.row.status)"
-              @click="openForm('edit', scope.row)">琛ュ厖鍙戣揣淇℃伅</el-button>
+              :disabled="(scope.row.waitShippingTotal || 0) <= 0 || isRevoked(scope.row.status)"
+              @click="openForm('edit', scope.row)">鍒嗘壒鍙戣揣</el-button>
+            <el-button
+              link
+              type="primary"
+              size="small"
+              @click="openDetail(scope.row)"
+            >璇︽儏</el-button>
             <el-button 
               link 
               type="danger" 
@@ -65,85 +72,237 @@
       <pagination v-show="total > 0" :total="total" layout="total, sizes, prev, pager, next, jumper"
         :page="page.current" :limit="page.size" @pagination="paginationChange" />
     </div>
-    <el-dialog v-model="dialogFormVisible" :title="operationType === 'add' ? '鏂板鍙戣揣鍙拌处' : '缂栬緫鍙戣揣鍙拌处'" width="40%"
-      @close="closeDia">
-      <el-form :model="form" label-width="120px" label-position="top" :rules="rules" ref="formRef">
-        <el-row :gutter="30">
-          <el-col :span="24">
-            <el-form-item label="鍙戣揣绫诲瀷锛�" prop="type">
-              <el-select
-                v-model="form.type"
-                placeholder="璇烽�夋嫨鍙戣揣绫诲瀷"
+    
+    <!-- 鍙戣揣璇︽儏/鍒嗘壒鍙戣揣寮圭獥 -->
+    <el-dialog 
+      v-model="dialogFormVisible" 
+      :title="dialogMode === 'edit' ? '鍒嗘壒鍙戣揣绠$悊' : '鍙戣揣鍙拌处璇︽儏'" 
+      width="90%" 
+      @close="closeDia" 
+      class="batch-shipping-dialog"
+    >
+      <div v-if="currentShippingOrder" class="shipping-dialog-container">
+        <el-row :gutter="24">
+          <el-col :span="7">
+            <el-card shadow="never" class="order-info-card">
+              <template #header>
+                <div class="card-header">
+                  <span>璁㈠崟淇℃伅</span>
+                  <el-tag :type="getProgressColor(currentShippingOrder) === '#67C23A' ? 'success' : 'warning'" effect="dark">
+                    {{ getShippingProgress(currentShippingOrder) }}%
+                  </el-tag>
+                </div>
+              </template>
+              <div class="order-info-content">
+                <div class="info-item">
+                  <span class="label">閿�鍞鍗�</span>
+                  <span class="value">{{ currentShippingOrder.salesContractNo || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">瀹㈡埛鍚嶇О</span>
+                  <span class="value">{{ currentShippingOrder.customerName || '--' }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">鍙戣揣璁㈠崟鍙�</span>
+                  <span class="value">{{ currentShippingOrder.shippingNo || '--' }}</span>
+                </div>
+                <el-divider />
+                <div class="quantity-summary">
+                  <div class="summary-item">
+                    <div class="summary-label">鎬诲彂璐ф暟閲�</div>
+                    <div class="summary-value total">{{ currentShippingOrder.shippingTotal || 0 }}</div>
+                  </div>
+                  <div class="summary-item">
+                    <div class="summary-label">宸插彂璐ф暟閲�</div>
+                    <div class="summary-value shipped">{{ currentShippingOrder.shippingSuccessTotal || 0 }}</div>
+                  </div>
+                  <div class="summary-item">
+                    <div class="summary-label">宸查��璐ф暟閲�</div>
+                    <div class="summary-value returned">{{ currentShippingOrder.returnedQuantity || 0 }}</div>
+                  </div>
+                  <div class="summary-item">
+                    <div class="summary-label">寰呭彂璐ф暟閲�</div>
+                    <div class="summary-value waiting">{{ currentShippingOrder.waitShippingTotal || 0 }}</div>
+                  </div>
+                </div>
+                <div class="progress-wrapper">
+                  <el-progress 
+                    :percentage="getShippingProgress(currentShippingOrder)" 
+                    :color="getProgressColor(currentShippingOrder)"
+                    :stroke-width="12"
+                    :show-text="false"
+                  />
+                </div>
+              </div>
+              <div class="action-buttons" v-if="dialogMode === 'edit'">
+                <el-button type="primary" size="large" @click="showAddShippingForm" :disabled="!canAddShipping()" style="width: 100%">
+                  <el-icon><Plus /></el-icon> 鏂板鍙戣揣
+                </el-button>
+              </div>
+            </el-card>
+          </el-col>
+          
+          <el-col :span="17">
+            <el-card shadow="never" class="shipping-records-card">
+              <template #header>
+                <div class="card-header">
+                  <span>鍙戣揣璁板綍</span>
+                  <div class="header-actions">
+                    <span class="record-count">鍏� {{ shippingRecords.length }} 鏉¤褰�</span>
+                  </div>
+                </div>
+              </template>
+              
+              <div v-if="shippingRecords.length === 0" class="empty-state">
+                <el-empty description="鏆傛棤鍙戣揣璁板綍" />
+              </div>
+              
+              <div v-else class="shipping-records-list">
+                <div v-for="(record, index) in shippingRecords" :key="record.id || index" class="shipping-record-item">
+                  <div class="record-header">
+                    <div class="record-title">
+                      <el-tag :type="record.type === '璐ц溅' ? 'primary' : 'success'" size="small">
+                        {{ record.type }}
+                      </el-tag>
+                    </div>
+                    <div class="record-date">{{ record.shippingDate }}</div>
+                  </div>
+                  <div class="record-body">
+                    <div class="record-info">
+                      <div class="info-row">
+                        <span class="info-label">鍙戣揣鏁伴噺</span>
+                        <span class="info-value quantity">{{ record.shippingNum }}</span>
+                      </div>
+                      <div class="info-row">
+                        <span class="info-label">閫�璐ф暟閲�</span>
+                        <span class="info-value returned">{{ record.returnNum || 0 }}</span>
+                      </div>
+                      <div class="info-row" v-if="record.type === '璐ц溅'">
+                        <span class="info-label">杞︾墝鍙�</span>
+                        <span class="info-value">{{ record.shippingCarNumber || '--' }}</span>
+                      </div>
+                      <div class="info-row" v-else>
+                        <span class="info-label">蹇�掑叕鍙�</span>
+                        <span class="info-value">{{ record.expressCompany || '--' }}</span>
+                      </div>
+                      <div class="info-row" v-if="record.type === '蹇��'">
+                        <span class="info-label">蹇�掑崟鍙�</span>
+                        <span class="info-value">{{ record.expressNumber || '--' }}</span>
+                      </div>
+                      <div class="info-row" v-if="record.commonFileList && record.commonFileList.length > 0">
+                        <span class="info-label">鍙戣揣鍥剧墖</span>
+                        <div class="record-images">
+                          <el-image
+                            v-for="(file, imgIndex) in record.commonFileList"
+                            :key="imgIndex"
+                            :src="normalizeFileUrl(file?.url)"
+                            :preview-src-list="record.commonFileList.map(f => normalizeFileUrl(f?.url))"
+                            fit="cover"
+                            class="record-image"
+                            preview-teleported
+                          />
+                        </div>
+                      </div>
+                      <div class="record-actions" v-if="canRevokeShipping(record)">
+                        <el-button 
+                          type="danger" 
+                          size="small" 
+                          @click="handleRevokeShipping(record)">
+                          鎾ら攢鍙戣揣
+                        </el-button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeDia">鍏抽棴</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 鏂板鍙戣揣璁板綍寮圭獥 -->
+    <el-dialog v-model="showAddForm" title="鏂板鍙戣揣璁板綍" width="600px" @close="hideAddShippingForm">
+      <el-alert 
+        :title="`鍙彂璐ф暟閲忥細${getMaxShippingQuantity()}`" 
+        type="info" 
+        :closable="false" 
+        show-icon
+        style="margin-bottom: 20px"
+      />
+      <el-form :model="shippingForm" label-width="100px" :rules="shippingRules" ref="shippingFormRef">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="鍙戣揣鏁伴噺" prop="shippingNum">
+              <el-input-number
+                v-model="shippingForm.shippingNum"
+                :min="1"
+                :max="getMaxShippingQuantity()"
+                :precision="0"
+                placeholder="璇疯緭鍏ュ彂璐ф暟閲�"
                 style="width: 100%"
-                @change="handleShippingTypeChange"
-              >
-                <el-option label="璐ц溅" value="璐ц溅" />
-                <el-option label="蹇��" value="蹇��" />
-              </el-select>
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="鍙戣揣绫诲瀷" prop="type">
+              <el-radio-group v-model="shippingForm.type">
+                <el-radio label="璐ц溅">璐ц溅</el-radio>
+                <el-radio label="蹇��">蹇��</el-radio>
+              </el-radio-group>
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="30">
+        <el-row :gutter="20">
           <el-col :span="24">
-            <el-form-item label="鍙戣揣鏃ユ湡锛�" prop="shippingDate">
-              <el-date-picker
+            <el-form-item label="鍙戣揣鏃ユ湡" prop="shippingDate">
+              <el-date-picker 
+                v-model="shippingForm.shippingDate" 
+                value-format="YYYY-MM-DD HH:mm:ss" 
+                type="datetime" 
+                placeholder="璇烽�夋嫨"
                 style="width: 100%"
-                v-model="form.shippingDate"
-                value-format="YYYY-MM-DD"
-                format="YYYY-MM-DD"
-                type="date"
-                placeholder="璇烽�夋嫨鍙戣揣鏃ユ湡"
-                clearable
               />
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="30">
-          <el-col :span="24" v-if="form.type === '璐ц溅'">
-            <el-form-item label="鍙戣揣杞︾墝鍙凤細" prop="shippingCarNumber">
-              <el-input
-                v-model="form.shippingCarNumber"
-                placeholder="璇疯緭鍏ュ彂璐ц溅鐗屽彿"
-                clearable
-              />
+        <el-row :gutter="20">
+          <el-col :span="24" v-if="shippingForm.type === '璐ц溅'">
+            <el-form-item label="鍙戣揣杞︾墝鍙�" prop="shippingCarNumber">
+              <el-input v-model="shippingForm.shippingCarNumber" placeholder="璇疯緭鍏ュ彂璐ц溅鐗屽彿" />
             </el-form-item>
           </el-col>
           <el-col :span="24" v-else>
-            <el-form-item label="蹇�掑叕鍙革細" prop="expressCompany">
-              <el-input
-                v-model="form.expressCompany"
-                placeholder="璇疯緭鍏ュ揩閫掑叕鍙�"
-                clearable
-              />
+            <el-form-item label="蹇�掑叕鍙�" prop="expressCompany">
+              <el-input v-model="shippingForm.expressCompany" placeholder="璇疯緭鍏ュ揩閫掑叕鍙�" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" v-if="shippingForm.type === '蹇��'">
+            <el-form-item label="蹇�掑崟鍙�" prop="expressNumber">
+              <el-input v-model="shippingForm.expressNumber" placeholder="璇疯緭鍏ュ揩閫掑崟鍙�" />
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="30" v-if="form.type === '蹇��'">
+        <el-row>
           <el-col :span="24">
-            <el-form-item label="蹇�掑崟鍙凤細" prop="expressNumber">
-              <el-input
-                v-model="form.expressNumber"
-                placeholder="璇疯緭鍏ュ揩閫掑崟鍙�"
-                clearable
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="30">
-          <el-col :span="24">
-            <el-form-item label="鍙戣揣鍥剧墖锛�">
+            <el-form-item label="鍙戣揣鍥剧墖">
               <el-upload 
-                v-model:file-list="deliveryFileList" 
+                v-model:file-list="shippingFileList" 
                 :action="upload.url" 
                 multiple 
-                ref="deliveryFileUpload" 
+                ref="shippingFileUpload" 
                 auto-upload
                 :headers="upload.headers" 
                 :data="{ type: 9 }"
                 :before-upload="handleDeliveryBeforeUpload" 
                 :on-error="handleDeliveryUploadError"
                 :on-success="handleDeliveryUploadSuccess" 
-                :on-remove="handleDeliveryRemove"
+                :on-remove="handleShippingRemove"
                 list-type="picture-card"
                 :limit="9"
                 accept="image/png,image/jpeg,image/jpg"
@@ -151,7 +310,7 @@
                 <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                 <template #tip>
                   <div class="el-upload__tip">
-                    鏀寔 jpg銆乯peg銆乸ng 鏍煎紡锛屾渶澶氫笂浼� 9 寮狅紝鍗曞紶澶у皬涓嶈秴杩� 10MB
+                    鏀寔 jpg銆乯peg銆乸ng 鏍煎紡锛屾渶澶氫笂浼� 9 寮�
                   </div>
                 </template>
               </el-upload>
@@ -161,8 +320,8 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">纭</el-button>
-          <el-button @click="closeDia">鍙栨秷</el-button>
+          <el-button type="primary" @click="submitShipping" :loading="shippingRecordsLoading">纭鍙戣揣</el-button>
+          <el-button @click="hideAddShippingForm">鍙栨秷</el-button>
         </div>
       </template>
     </el-dialog>
@@ -180,6 +339,10 @@
 	deliveryLedgerListPage,
 	addOrUpdateDeliveryLedger,
 	delDeliveryLedger, deductStock,
+	shippingInfoDetailListPage,
+	addShippingInfoDetail,
+	updateShippingInfoDetail,
+	delShippingInfoDetail,
 } from "@/api/salesManagement/deliveryLedger.js";
 import { delLedgerFile } from "@/api/salesManagement/salesLedger.js";
  
@@ -188,61 +351,75 @@
 const tableData = ref([]);
 const selectedRows = ref([]);
 const tableLoading = ref(false);
-const salesOrderOptions = ref([]);
 const page = reactive({
   current: 1,
   size: 100,
 });
 const total = ref(0);
-const deliveryFileList = ref([]);
 const javaApi = proxy.javaApi;
+
+// 鍙戣揣璇︽儏/鍒嗘壒鍙戣揣寮规
+const dialogFormVisible = ref(false);
+const dialogMode = ref('view');
+const currentShippingOrder = ref(null);
+const shippingRecords = ref([]);
+const shippingRecordsLoading = ref(false);
+const showAddForm = ref(false);
+const shippingForm = ref({
+  shippingNum: null,
+  type: "璐ц溅",
+  shippingDate: getCurrentDate(),
+  shippingCarNumber: "",
+  expressCompany: "",
+  expressNumber: "",
+});
+const shippingRules = {
+  shippingNum: [{ required: true, message: "璇疯緭鍏ュ彂璐ф暟閲�", trigger: "blur" }],
+  type: [{ required: true, message: "璇烽�夋嫨鍙戣揣绫诲瀷", trigger: "change" }],
+  shippingDate: [{ required: true, message: "璇烽�夋嫨鍙戣揣鏃ユ湡", trigger: "change" }],
+  shippingCarNumber: [
+    { validator: (_, value, callback) => validateShippingCarNumber(value, callback), trigger: "blur" }
+  ],
+  expressCompany: [
+    { validator: (_, value, callback) => validateExpressCompany(value, callback), trigger: "blur" }
+  ],
+};
+const shippingFileList = ref([]);
+
+const normalizeFileUrl = (rawUrl = '') => {
+  let fileUrl = rawUrl || '';
+  if (fileUrl && fileUrl.indexOf('\\') > -1) {
+    const uploadsIndex = fileUrl.toLowerCase().indexOf('uploads');
+    if (uploadsIndex > -1) {
+      const relativePath = fileUrl.substring(uploadsIndex).replace(/\\/g, '/');
+      fileUrl = '/' + relativePath;
+    } else {
+      const parts = fileUrl.split('\\');
+      const fileName = parts[parts.length - 1];
+      fileUrl = '/uploads/' + fileName;
+    }
+  }
+  if (fileUrl && !fileUrl.startsWith('http')) {
+    if (!fileUrl.startsWith('/')) fileUrl = '/' + fileUrl;
+    fileUrl = javaApi + fileUrl;
+  }
+  return fileUrl;
+};
 
 // 涓婁紶閰嶇疆
 const upload = reactive({
-  // 涓婁紶鐨勫湴鍧�
   url: import.meta.env.VITE_APP_BASE_API + "/file/upload",
-  // 璁剧疆涓婁紶鐨勮姹傚ご閮�
   headers: { Authorization: "Bearer " + getToken() },
 });
 
-// 鐢ㄦ埛淇℃伅琛ㄥ崟寮规鏁版嵁
-const operationType = ref("");
-const dialogFormVisible = ref(false);
+// 鎼滅储琛ㄥ崟鏁版嵁
 const data = reactive({
   searchForm: {
-    salesContractNo: "", // 閿�鍞鍗曞彿
-    shippingCarNumber: "", // 杞︾墝鍙�
-    expressNumber: "", // 蹇�掑崟鍙�
-  },
-  form: {
-    id: null,
     salesContractNo: "",
     customerName: "",
-    type: "璐ц溅", // 璐ц溅, 蹇��
-    shippingDate: "",
-    shippingCarNumber: "",
-    expressCompany: "",
-    expressNumber: "", // 蹇�掑崟鍙�
-  },
-  rules: {
-    salesContractNo: [{ required: true, message: "璇烽�夋嫨閿�鍞鍗�", trigger: "change" }],
-    customerName: [{ required: true, message: "璇疯緭鍏ュ鎴峰悕绉�", trigger: "blur" }],
-    type: [
-      { required: true, message: "璇烽�夋嫨鍙戣揣绫诲瀷", trigger: "change" }
-    ],
-    shippingDate: [{ required: true, message: "璇烽�夋嫨鍙戣揣鏃堕棿", trigger: "change" }],
-    shippingCarNumber: [
-      { validator: (_, value, callback) => validateShippingCarNumber(value, callback), trigger: "blur" }
-    ],
-    expressCompany: [
-      { validator: (_, value, callback) => validateExpressCompany(value, callback), trigger: "blur" }
-    ],
   },
 });
-const { form, rules } = toRefs(data);
 const { searchForm } = toRefs(data);
-
- 
 
 // 鏌ヨ鍒楄〃
 const handleQuery = () => {
@@ -269,143 +446,184 @@
     });
 };
 
-// 閿�鍞鍗曞彉鍖栨椂鑷姩濉厖瀹㈡埛鍚嶇О
-const handleSalesOrderChange = (value) => {
-  const selectedOrder = salesOrderOptions.value.find(item => item.salesContractNo === value);
-  if (selectedOrder) {
-    form.value.customerName = selectedOrder.customerName;
-  }
-};
-
 // 琛ㄦ牸閫夋嫨鏁版嵁
 const handleSelectionChange = (selection) => {
   selectedRows.value = selection;
 };
 
-// 鎵撳紑寮规
+// 鎵撳紑鍙戣揣寮规
 const openForm = async (type, row) => {
-  // 缂栬緫鏃舵鏌ュ鏍哥姸鎬侊紝鍙湁瀹℃牳涓笉鑳界紪杈�
-  if (type === 'edit' && row && isApproving(row.status)) {
-    proxy.$modal.msgWarning("瀹℃牳涓殑鏁版嵁涓嶈兘缂栬緫");
+  if (type === 'edit' && row && (row.waitShippingTotal || 0) <= 0) {
+    proxy.$modal.msgWarning("娌℃湁寰呭彂璐ф暟閲忥紝鏃犳硶鍒嗘壒鍙戣揣");
     return;
   }
   
-  operationType.value = type;
-  const baseUrl = import.meta.env.VITE_APP_BASE_API;
-  
-  if (type === 'edit' && row) {
-    form.value = {
-      id: row.id ?? null,
-      salesContractNo: row.salesContractNo ?? "",
-      customerName: row.customerName ?? "",
-      type: row.type || "璐ц溅",
-      shippingDate: row.shippingDate || getCurrentDate(),
-      shippingCarNumber: row.shippingCarNumber ?? "",
-      expressCompany: row.expressCompany ?? "",
-      expressNumber: row.expressNumber ?? "",
-    };
-    // 濡傛灉鏈夊浘鐗囷紝灏� commonFileList 杞崲涓烘枃浠跺垪琛ㄦ牸寮�
-    if (row.commonFileList && Array.isArray(row.commonFileList) && row.commonFileList.length > 0) {
-      deliveryFileList.value = row.commonFileList.map((file, index) => {
-        // 澶勭悊 URL锛氬皢 Windows 璺緞杞崲涓哄彲璁块棶鐨� URL
-        let fileUrl = file.url || '';
-        console.log('鍘熷 URL:', fileUrl);
-        
-        // 濡傛灉 URL 鏄� Windows 璺緞鏍煎紡锛堝寘鍚弽鏂滄潬锛夛紝闇�瑕佽浆鎹�
-        if (fileUrl && fileUrl.indexOf('\\') > -1) {
-          // 鏌ユ壘 uploads 鍏抽敭瀛楃殑浣嶇疆锛屼粠閭i噷寮�濮嬫彁鍙栫浉瀵硅矾寰�
-          const uploadsIndex = fileUrl.toLowerCase().indexOf('uploads');
-          if (uploadsIndex > -1) {
-            // 浠� uploads 寮�濮嬫彁鍙栬矾寰勶紝骞跺皢鍙嶆枩鏉犳浛鎹负姝f枩鏉�
-            const relativePath = fileUrl.substring(uploadsIndex).replace(/\\/g, '/');
-            fileUrl = '/' + relativePath;
-            console.log('杞崲鍚庣殑鐩稿璺緞:', fileUrl);
-          } else {
-            // 濡傛灉娌℃湁鎵惧埌 uploads锛屾彁鍙栨渶鍚庝竴涓洰褰曞拰鏂囦欢鍚�
-            const parts = fileUrl.split('\\');
-            const fileName = parts[parts.length - 1];
-            fileUrl = '/uploads/' + fileName;
-            console.log('鏈壘鍒� uploads锛屼娇鐢ㄦ枃浠跺悕:', fileUrl);
-          }
-        }
-        
-        // 纭繚鎵�鏈夐潪 http 寮�澶寸殑 URL 閮芥嫾鎺� baseUrl
-        if (fileUrl && !fileUrl.startsWith('http')) {
-          // 纭繚璺緞浠� / 寮�澶�
-          if (!fileUrl.startsWith('/')) {
-            fileUrl = '/' + fileUrl;
-          }
-          // 鎷兼帴 baseUrl
-          fileUrl = javaApi + fileUrl;
-          console.log('鏈�缁堟嫾鎺ョ殑 URL:', fileUrl);
-        }
-        
-        return {
-          uid: file.id || Date.now() + index,
-          name: file.name || `image_${index + 1}.jpg`,
-          url: fileUrl,
-          status: 'success',
-          response: {
-            code: 200,
-            data: {
-              tempId: file.id,
-              url: fileUrl
-            }
-          },
-          tempId: file.id // 淇濆瓨鏂囦欢ID锛岀敤浜庢彁浜ゆ椂浣跨敤
-        };
-      });
-    } else {
-      deliveryFileList.value = [];
-    }
-  } else {
-    form.value = {
-      id: null,
-      salesContractNo: "",
-      customerName: "",
-      type: "璐ц溅",
-      shippingDate: getCurrentDate(),
-      shippingCarNumber: "",
-      expressCompany: "",
-      expressNumber: "",
-    };
-    deliveryFileList.value = [];
+  if (type === 'edit' && isRevoked(row.status)) {
+    proxy.$modal.msgWarning("宸叉挙閿�鐘舵�佷笉鑳藉垎鎵瑰彂璐�");
+    return;
   }
   
+  dialogMode.value = type === 'edit' ? 'edit' : 'view';
+  currentShippingOrder.value = row;
+  showAddForm.value = false;
+  shippingForm.value = {
+    shippingNum: null,
+    type: "璐ц溅",
+    shippingDate: getCurrentDate(),
+    shippingCarNumber: "",
+    expressCompany: "",
+    expressNumber: "",
+  };
+  shippingFileList.value = [];
+  
+  await loadShippingRecords(row.id);
   dialogFormVisible.value = true;
 };
 
-// 鎻愪氦琛ㄥ崟
-const submitForm = () => {
-  proxy.$refs["formRef"].validate((valid) => {
+// 鎵撳紑璇︽儏寮规
+const openDetail = (row) => {
+  openForm('view', row);
+};
+
+// 鍔犺浇鍙戣揣璁板綍
+const loadShippingRecords = async (shippingInfoId) => {
+  shippingRecordsLoading.value = true;
+  try {
+    const res = await shippingInfoDetailListPage({ shippingInfoId, current: 1, size: 100 });
+    shippingRecords.value = res.data.records || [];
+  } catch (error) {
+    shippingRecords.value = [];
+  } finally {
+    shippingRecordsLoading.value = false;
+  }
+};
+
+// 鏄剧ず鏂板鍙戣揣琛ㄥ崟
+const showAddShippingForm = () => {
+  showAddForm.value = true;
+  shippingForm.value = {
+    shippingNum: null,
+    type: "璐ц溅",
+    shippingDate: getCurrentDate(),
+    shippingCarNumber: "",
+    expressCompany: "",
+    expressNumber: "",
+  };
+  shippingFileList.value = [];
+};
+
+// 闅愯棌鏂板鍙戣揣琛ㄥ崟
+const hideAddShippingForm = () => {
+  showAddForm.value = false;
+  shippingForm.value = {
+    shippingNum: null,
+    type: "璐ц溅",
+    shippingDate: getCurrentDate(),
+    shippingCarNumber: "",
+    expressCompany: "",
+    expressNumber: "",
+  };
+  shippingFileList.value = [];
+};
+
+// 鑾峰彇鏈�澶у彲鍙戣揣鏁伴噺
+const getMaxShippingQuantity = () => {
+  if (!currentShippingOrder.value) return 0;
+  const waitShipping = currentShippingOrder.value.waitShippingTotal || 0;
+  return Math.max(0, waitShipping);
+};
+
+// 鏄惁鍙互鏂板鍙戣揣
+const canAddShipping = () => {
+  if (!currentShippingOrder.value) return false;
+  const waitShipping = currentShippingOrder.value.waitShippingTotal || 0;
+  return waitShipping > 0;
+};
+
+// 鏄惁鍙互鎾ら攢鍙戣揣
+const canRevokeShipping = (record) => {
+  const shippingNum = record.shippingNum || 0;
+  const returnNum = record.returnNum || 0;
+  return shippingNum > 0 && returnNum > 0 && shippingNum === returnNum;
+};
+
+// 鎾ら攢鍙戣揣
+const handleRevokeShipping = (record) => {
+  ElMessageBox.confirm("姝ゆ搷浣滃皢鎾ら攢璇ュ彂璐ц褰曪紝鏄惁纭锛�", "鎾ら攢鍙戣揣", {
+    confirmButtonText: "纭",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+    .then(() => {
+      updateShippingInfoDetail({ ...record, status: 3 }).then((res) => {
+        proxy.$modal.msgSuccess("鎾ら攢鎴愬姛");
+        loadShippingRecords(currentShippingOrder.value.id);
+        getList();
+      });
+    })
+    .catch(() => {});
+};
+
+// 鎻愪氦鍙戣揣
+const submitShipping = () => {
+  proxy.$refs["shippingFormRef"].validate((valid) => {
     if (valid) {
       let tempFileIds = [];
-      if (deliveryFileList.value !== null && deliveryFileList.value.length > 0) {
-        tempFileIds = deliveryFileList.value.map((item) => item.tempId);
+      if (shippingFileList.value !== null && shippingFileList.value.length > 0) {
+        tempFileIds = shippingFileList.value.map((item) => item.tempId);
       }
       const payload = {
-        id: form.value.id,
-        type: form.value.type,
-        shippingDate: form.value.shippingDate,
-        shippingCarNumber: form.value.type === "璐ц溅" ? form.value.shippingCarNumber : "",
-        expressCompany: form.value.type === "蹇��" ? form.value.expressCompany : "",
-        expressNumber: form.value.type === "蹇��" ? form.value.expressNumber : "",
+        shippingInfoId: currentShippingOrder.value.id,
+        salesLedgerId: currentShippingOrder.value.salesLedgerId,
+        salesLedgerProductId: currentShippingOrder.value.salesLedgerProductId,
+        shippingTotal: currentShippingOrder.value.shippingTotal,
+        shippingNum: shippingForm.value.shippingNum,
+        type: shippingForm.value.type,
+        shippingDate: shippingForm.value.shippingDate,
+        shippingCarNumber: shippingForm.value.type === "璐ц溅" ? shippingForm.value.shippingCarNumber : "",
+        expressCompany: shippingForm.value.type === "蹇��" ? shippingForm.value.expressCompany : "",
+        expressNumber: shippingForm.value.type === "蹇��" ? shippingForm.value.expressNumber : "",
         tempFileIds: tempFileIds,
       };
-			deductStock(payload).then((res) => {
-        proxy.$modal.msgSuccess("鎿嶄綔鎴愬姛");
-        closeDia();
+      addShippingInfoDetail(payload).then((res) => {
+        proxy.$modal.msgSuccess("鍙戣揣鎴愬姛");
+        hideAddShippingForm();
+        loadShippingRecords(currentShippingOrder.value.id);
         getList();
       });
     }
   });
 };
 
+// 鍒犻櫎鍙戣揣璁板綍
+const deleteShippingRecord = (row) => {
+  if (isApproving(row.status)) {
+    proxy.$modal.msgWarning("瀹℃牳涓殑鏁版嵁涓嶈兘鍒犻櫎");
+    return;
+  }
+  ElMessageBox.confirm("姝ゆ搷浣滃皢鍒犻櫎璇ュ彂璐ц褰曪紝鏄惁纭锛�", "鍒犻櫎", {
+    confirmButtonText: "纭",
+    cancelButtonText: "鍙栨秷",
+    type: "warning",
+  })
+    .then(() => {
+      delShippingInfoDetail([row.id]).then((res) => {
+        proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+        loadShippingRecords(currentShippingOrder.value.id);
+        getList();
+      });
+    })
+    .catch(() => {
+      proxy.$modal.msg("宸插彇娑�");
+    });
+};
+
 // 鍏抽棴寮规
 const closeDia = () => {
-  proxy.resetForm("formRef");
-  deliveryFileList.value = []; // 娓呯┖鏂囦欢鍒楄〃
   dialogFormVisible.value = false;
+  currentShippingOrder.value = null;
+  shippingRecords.value = [];
+  showAddForm.value = false;
 };
 
 // 瀵煎嚭
@@ -430,7 +648,6 @@
     return;
   }
   
-  // 妫�鏌ラ�変腑鐨勮鏄惁鏈�"瀹℃牳涓�"鐘舵��
   const approvingRows = selectedRows.value.filter(row => isApproving(row.status));
   if (approvingRows.length > 0) {
     proxy.$modal.msgWarning("瀹℃牳涓殑鏁版嵁涓嶈兘鍒犻櫎");
@@ -456,7 +673,6 @@
 
 // 鍗曚釜鍒犻櫎
 const handleDeleteSingle = (row) => {
-  // 妫�鏌ユ槸鍚︿负"瀹℃牳涓�"鐘舵��
   if (isApproving(row.status)) {
     proxy.$modal.msgWarning("瀹℃牳涓殑鏁版嵁涓嶈兘鍒犻櫎");
     return;
@@ -478,15 +694,15 @@
     });
 };
 
-// 鍙戣揣绫诲瀷鏍¢獙锛氳揣杞︽椂瑕佹眰杞︾墝锛屽揩閫掓椂瑕佹眰蹇�掑叕鍙�
+// 鍙戣揣绫诲瀷鏍¢獙
 const validateShippingCarNumber = (value, callback) => {
-  if (form.value.type === "璐ц溅") {
+  if (shippingForm.value.type === "璐ц溅") {
     if (!value) return callback(new Error("璇疯緭鍏ュ彂璐ц溅鐗屽彿"));
   }
   callback();
 };
 const validateExpressCompany = (value, callback) => {
-  if (form.value.type === "蹇��") {
+  if (shippingForm.value.type === "蹇��") {
     if (!value) return callback(new Error("璇疯緭鍏ュ揩閫掑叕鍙�"));
   }
   callback();
@@ -494,13 +710,11 @@
 
 // 鍙戣揣鍥剧墖涓婁紶鍓嶆牎妫�
 function handleDeliveryBeforeUpload(file) {
-  // 鏍℃鏂囦欢绫诲瀷
   const isImage = file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg';
   if (!isImage) {
     proxy.$modal.msgError("鍙兘涓婁紶 jpg銆乯peg銆乸ng 鏍煎紡鐨勫浘鐗�!");
     return false;
   }
-  // 鏍℃鏂囦欢澶у皬
   const isLt10M = file.size / 1024 / 1024 < 10;
   if (!isLt10M) {
     proxy.$modal.msgError("涓婁紶鍥剧墖澶у皬涓嶈兘瓒呰繃 10MB!");
@@ -509,11 +723,13 @@
   proxy.$modal.loading("姝e湪涓婁紶鍥剧墖锛岃绋嶅��...");
   return true;
 }
+
 // 鍙戣揣鍥剧墖涓婁紶澶辫触
 function handleDeliveryUploadError(err) {
   proxy.$modal.msgError("涓婁紶鍥剧墖澶辫触");
   proxy.$modal.closeLoading();
 }
+
 // 鍙戣揣鍥剧墖涓婁紶鎴愬姛鍥炶皟
 function handleDeliveryUploadSuccess(res, file, uploadFiles) {
   proxy.$modal.closeLoading();
@@ -522,43 +738,32 @@
     proxy.$modal.msgSuccess("涓婁紶鎴愬姛");
   } else {
     proxy.$modal.msgError(res.msg);
-    proxy.$refs.deliveryFileUpload.handleRemove(file);
-  }
-}
-// 绉婚櫎鍙戣揣鍥剧墖
-function handleDeliveryRemove(file) {
-  console.log('file--', file)
-  // 濡傛灉鏄紪杈戞ā寮忎笖鏂囦欢鏈� id锛岄渶瑕佽皟鐢ㄦ帴鍙e垹闄�
-  if (operationType.value === "edit") {
-    let ids = [];
-    ids.push(file.uid);
-    delLedgerFile(ids).then((res) => {
-      proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
-      // 浠庢枃浠跺垪琛ㄤ腑绉婚櫎
-      const index = deliveryFileList.value.findIndex(item => item.uid === file.uid);
-      if (index > -1) {
-        deliveryFileList.value.splice(index, 1);
-      }
-    }).catch(() => {
-      proxy.$modal.msgError("鍒犻櫎澶辫触");
-    });
-  } else {
-    // 鏂板妯″紡鎴栨病鏈� id 鐨勬枃浠讹紝鐩存帴浠庡垪琛ㄤ腑绉婚櫎
-    const index = deliveryFileList.value.findIndex(item => item.uid === file.uid);
-    if (index > -1) {
-      deliveryFileList.value.splice(index, 1);
-    }
+    proxy.$refs.shippingFileUpload.handleRemove(file);
   }
 }
 
-// 鍙戣揣绫诲瀷鍒囨崲鏃舵竻绌哄搴斿瓧娈�
-const handleShippingTypeChange = (val) => {
-  if (val === "璐ц溅") {
-    form.value.expressCompany = "";
-    form.value.expressNumber = "";
-  } else {
-    form.value.shippingCarNumber = "";
+// 绉婚櫎鍙戣揣鍥剧墖
+function handleShippingRemove(file) {
+  if (file.uid) {
+    delLedgerFile([file.uid]).then(() => {
+      proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+    });
   }
+}
+
+const getShippingProgress = (row) => {
+  const shipped = row.shippingSuccessTotal || 0;
+  const total = shipped + (row.waitShippingTotal || 0);
+  if (total === 0) return 0;
+  return Math.round((shipped / total) * 100);
+};
+
+// 鑾峰彇杩涘害鏉¢鑹�
+const getProgressColor = (row) => {
+  const progress = getShippingProgress(row);
+  if (progress === 100) return '#67C23A';
+  if (progress >= 50) return '#E6A23C';
+  return '#409EFF';
 };
 
 // 鑾峰彇瀹℃牳鐘舵�佹枃鏈�
@@ -566,7 +771,6 @@
   if (status === null || status === undefined || status === '') {
     return '寰呭鏍�';
   }
-  // 濡傛灉鏄暟瀛�
   if (typeof status === 'number') {
     const statusMap = {
       0: '寰呭鏍�',
@@ -576,13 +780,13 @@
     };
     return statusMap[status] || '寰呭鏍�';
   }
-  // 濡傛灉鏄瓧绗︿覆锛岀洿鎺ヨ繑鍥炴垨鏄犲皠
   const statusStr = String(status).trim();
   const statusTextMap = {
     '寰呭鏍�': '寰呭鏍�',
     '瀹℃牳涓�': '瀹℃牳涓�',
     '瀹℃牳鎷掔粷': '瀹℃牳鎷掔粷',
     '瀹℃牳閫氳繃': '瀹℃牳閫氳繃',
+    '宸叉挙閿�': '宸叉挙閿�',
     '0': '寰呭鏍�',
     '1': '瀹℃牳涓�',
     '2': '瀹℃牳鎷掔粷',
@@ -591,28 +795,27 @@
   return statusTextMap[statusStr] || statusStr || '寰呭鏍�';
 };
 
-// 鑾峰彇瀹℃牳鐘舵�佹爣绛剧被鍨嬶紙棰滆壊锛�
+// 鑾峰彇瀹℃牳鐘舵�佹爣绛剧被鍨�
 const getApprovalStatusType = (status) => {
   if (status === null || status === undefined || status === '') {
     return 'info';
   }
-  // 濡傛灉鏄暟瀛�
   if (typeof status === 'number') {
     const typeMap = {
-      0: 'info',      // 寰呭鏍� - 鐏拌壊
-      1: 'warning',   // 瀹℃牳涓� - 榛勮壊
-      2: 'danger',    // 瀹℃牳鎷掔粷 - 绾㈣壊
-      3: 'success'    // 瀹℃牳閫氳繃 - 缁胯壊
+      0: 'info',
+      1: 'warning',
+      2: 'danger',
+      3: 'success'
     };
     return typeMap[status] || 'info';
   }
-  // 濡傛灉鏄瓧绗︿覆
   const statusStr = String(status).trim();
   const typeTextMap = {
     '寰呭鏍�': 'info',
     '瀹℃牳涓�': 'warning',
     '瀹℃牳鎷掔粷': 'danger',
     '瀹℃牳閫氳繃': 'success',
+    '宸叉挙閿�': 'warning',
     '0': 'info',
     '1': 'warning',
     '2': 'danger',
@@ -626,11 +829,9 @@
   if (status === null || status === undefined || status === '') {
     return false;
   }
-  // 濡傛灉鏄暟瀛楋紝3 琛ㄧず瀹℃牳閫氳繃
   if (typeof status === 'number') {
     return status === 3;
   }
-  // 濡傛灉鏄瓧绗︿覆
   const statusStr = String(status).trim();
   return statusStr === '瀹℃牳閫氳繃' || statusStr === '3';
 };
@@ -640,13 +841,23 @@
   if (status === null || status === undefined || status === '') {
     return false;
   }
-  // 濡傛灉鏄暟瀛楋紝1 琛ㄧず瀹℃牳涓�
   if (typeof status === 'number') {
     return status === 1;
   }
-  // 濡傛灉鏄瓧绗︿覆
   const statusStr = String(status).trim();
   return statusStr === '瀹℃牳涓�' || statusStr === '1';
+};
+
+// 妫�鏌ョ姸鎬佹槸鍚︿负"宸叉挙閿�"
+const isRevoked = (status) => {
+  if (status === null || status === undefined || status === '') {
+    return false;
+  }
+  if (typeof status === 'number') {
+    return status === 3;
+  }
+  const statusStr = String(status).trim();
+  return statusStr === '宸叉挙閿�' || statusStr === '3';
 };
 
 onMounted(() => {
@@ -665,11 +876,244 @@
   margin-bottom: 10px;
 }
 
-// 闅愯棌鍥剧墖涓婁紶缁勪欢鐨勯瑙堟寜閽紙鏀惧ぇ闀滐級
 :deep(.el-upload-list--picture-card .el-upload-list__item-actions) {
   .el-upload-list__item-preview {
     display: none;
   }
 }
-</style>
 
+.batch-shipping-dialog {
+  .shipping-dialog-container {
+    min-height: 500px;
+  }
+  
+  .order-info-card {
+    height: 100%;
+    
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: bold;
+    }
+    
+    .order-info-content {
+      .info-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 8px 0;
+        
+        .label {
+          color: #606266;
+          font-size: 14px;
+        }
+        
+        .value {
+          color: #303133;
+          font-weight: 500;
+          font-size: 14px;
+        }
+      }
+      
+      .quantity-summary {
+        display: flex;
+        justify-content: space-between;
+        margin: 16px 0;
+        
+        .summary-item {
+          text-align: center;
+          flex: 1;
+          
+          .summary-label {
+            font-size: 12px;
+            color: #909399;
+            margin-bottom: 8px;
+          }
+          
+          .summary-value {
+            font-size: 20px;
+            font-weight: bold;
+            
+            &.total {
+              color: #409EFF;
+            }
+            
+            &.shipped {
+              color: #67C23A;
+            }
+            
+            &.returned {
+              color: #F56C6C;
+            }
+            
+            &.waiting {
+              color: #E6A23C;
+            }
+          }
+        }
+      }
+      
+      .progress-wrapper {
+        margin-top: 16px;
+      }
+    }
+    
+    .action-buttons {
+      margin-top: 20px;
+    }
+  }
+  
+  .shipping-records-card {
+    height: 100%;
+    
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: bold;
+      
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        
+        .record-count {
+          font-size: 12px;
+          color: #909399;
+          font-weight: normal;
+        }
+      }
+      
+      .record-count {
+        font-size: 12px;
+        color: #909399;
+        font-weight: normal;
+      }
+    }
+    
+    .empty-state {
+      padding: 40px 0;
+    }
+    
+    .shipping-records-list {
+      .shipping-record-item {
+        border: 1px solid #EBEEF5;
+        border-radius: 4px;
+        padding: 16px;
+        margin-bottom: 12px;
+        transition: all 0.3s;
+        
+        &:hover {
+          border-color: #409EFF;
+          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        }
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+        
+        .record-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 12px;
+          padding-bottom: 12px;
+          border-bottom: 1px solid #F5F7FA;
+          
+          .record-title {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+          }
+          
+          .record-date {
+            font-size: 12px;
+            color: #909399;
+          }
+        }
+        
+        .record-body {
+          .record-info {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 24px;
+            
+            .info-row {
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              
+              .info-label {
+                font-size: 12px;
+                color: #909399;
+              }
+              
+              .info-value {
+                font-size: 14px;
+                color: #303133;
+                
+                &.quantity {
+                  font-weight: bold;
+                  color: #409EFF;
+                  font-size: 16px;
+                }
+                
+                &.returned {
+                  font-weight: bold;
+                  color: #F56C6C;
+                  font-size: 16px;
+                }
+              }
+            }
+            
+            .record-actions {
+              margin-top: 12px;
+              padding-top: 12px;
+              border-top: 1px solid #EBEEF5;
+            }
+            
+            .record-images {
+              display: flex;
+              gap: 8px;
+              flex-wrap: wrap;
+              
+              .record-image {
+                width: 60px;
+                height: 60px;
+                border-radius: 4px;
+                cursor: pointer;
+                transition: all 0.3s;
+                
+                &:hover {
+                  transform: scale(1.05);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.shipping-detail-wrapper {
+  .detail-images {
+    margin-top: 20px;
+    
+    .detail-images-title {
+      font-size: 14px;
+      font-weight: bold;
+      margin-bottom: 12px;
+    }
+    
+    .detail-image {
+      width: 120px;
+      height: 120px;
+      margin-right: 12px;
+      margin-bottom: 12px;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

--
Gitblit v1.9.3