修改

src/views/order/saleOrder/addOrderStatusLogDrawer.vue

@@ -36,86 +36,8 @@
         </el-form-item>
 
         <el-form-item label="上传图片" prop="images" v-if="form.statusName === '已签收'">
-          <div class="image-selector-wrapper">
-            <!-- 修改点 1: 使用 !selectedImages.length 替代 length === 0，并确保样式一致 -->
-            <div
-              v-if="!selectedImages || selectedImages.length === 0"
-              class="upload-box"
-              @click="showFileSelector = true"
-              style="
-                width: 150px;
-                height: 150px;
-                border: 2px dashed #d9d9d9;
-                border-radius: 4px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                transition: all 0.3s;
-              "
-            >
-              <div style="text-align: center; color: #8c939d">
-                <el-icon :size="40" style="margin-bottom: 8px">
-                  <Plus />
-                </el-icon>
-                <div style="font-size: 14px">点击上传</div>
-              </div>
-            </div>
-
-            <!-- 修改点 2: 列表渲染区域 -->
-            <div v-else class="selected-images-list">
-              <div
-                v-for="(img, index) in selectedImages"
-                :key="img.url || index"
-                style="position: relative; display: inline-block; margin: 0 8px 8px 0"
-              >
-                <!-- 确保 img.url 存在才渲染，防止报错 -->
-                <el-image
-                  v-if="img.url"
-                  :src="img.url"
-                  style="width: 150px; height: 150px"
-                  fit="cover"
-                  :preview-src-list="selectedImages.filter((i) => i.url).map((i) => i.url)"
-                />
-                <el-button
-                  type="danger"
-                  :icon="Delete"
-                  circle
-                  size="small"
-                  style="position: absolute; top: 5px; right: 5px; z-index: 10"
-                  @click="removeImage(index)"
-                />
-              </div>
-
-              <!-- 修改点 3: 如果未满 3 张，显示“继续添加”按钮 -->
-              <div
-                v-if="selectedImages.length < 3"
-                class="upload-box-more"
-                @click="showFileSelector = true"
-                style="
-                  width: 150px;
-                  height: 150px;
-                  border: 2px dashed #d9d9d9;
-                  border-radius: 4px;
-                  display: inline-flex;
-                  align-items: center;
-                  justify-content: center;
-                  cursor: pointer;
-                  transition: all 0.3s;
-                  vertical-align: top;
-                  background-color: #f5f7fa; /* 加个背景色区分 */
-                "
-              >
-                <el-icon :size="30" color="#8c939d">
-                  <Plus />
-                </el-icon>
-              </div>
-            </div>
-          </div>
+          <ImageUpload v-model="form.images" :limit="3" />
         </el-form-item>
-
-        <!-- 文件选择器 -->
-        <FileSelector v-model="showFileSelector" :multiple="true" :allowed-types="[1]" title="选择图片" @confirm="handleImagesSelected" />
       </el-form>
     </div>
 
@@ -131,15 +53,12 @@
 <script setup name="AddOrderStatusLogDrawer" lang="ts">
 import { ref, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
-import { Plus, Delete } from '@element-plus/icons-vue';
 import { addOrderStatusLog } from '@/api/order/orderStatusLog';
-import FileSelector from '@/components/FileSelector/index.vue';
+import ImageUpload from '@/components/ImageUpload/index.vue';
 
 const drawerVisible = ref(false);
 const submitLoading = ref(false);
 const formRef = ref<any>(null);
-const showFileSelector = ref(false);
-const selectedImages = ref<any[]>([]);
 
 // 表单数据
 const form = reactive({
@@ -192,12 +111,6 @@ const openDrawer = (orderData?: any, currentOrderStatus?: string) => {
     form.statusName = currentOrderStatus || '';
     form.images = orderData.images || '';
 
-    selectedImages.value = [];
-    if (form.images) {
-      const urls = form.images.split(',');
-      selectedImages.value = urls.filter((u) => u && u.trim()).map((u) => ({ url: u.trim(), name: 'Image' }));
-    }
-
     currentStatus.value = currentOrderStatus || '';
   }
   drawerVisible.value = true;
@@ -228,56 +141,14 @@ const resetForm = () => {
   form.operateTime = '';
   form.courierPhone = '';
   form.images = '';
-  selectedImages.value = [];
-  showFileSelector.value = false;
   currentStatus.value = '';
 };
 
-// 处理选择的图片 (优化健壮性)
-const handleImagesSelected = (files: any[]) => {
-  if (!files || files.length === 0) {
-    showFileSelector.value = false;
-    return;
-  }
-
-  const remainingSlots = 3 - selectedImages.value.length;
-  if (remainingSlots <= 0) {
-    ElMessage.warning('最多上传 3 张图片');
-    showFileSelector.value = false;
-    return;
-  }
-
-  const filesToAdd = files.slice(0, remainingSlots);
-
-  // 映射为标准格式 { url, name }
-  const newItems = filesToAdd
-    .map((f) => ({
-      url: f.fileUrl || f.url || f.path, // 兼容多种返回字段
-      name: f.fileName || 'Image'
-    }))
-    .filter((item) => item.url); // 过滤掉没有 url 的无效项
-
-  if (newItems.length > 0) {
-    // 重新赋值数组以触发视图更新
-    selectedImages.value = [...selectedImages.value, ...newItems];
-    form.images = selectedImages.value.map((img) => img.url).join(',');
-  }
-
-  showFileSelector.value = false;
-};
-
-// 移除已选择的图片
-const removeImage = (index: number) => {
-  selectedImages.value.splice(index, 1);
-  form.images = selectedImages.value.map((img) => img.url).join(',');
-};
-
 // 状态变化处理
 const handleStatusChange = () => {
   // 当状态变化时,如果不是已签收,清空图片
   if (form.statusName !== '已签收') {
     form.images = '';
-    selectedImages.value = [];
   }
 };
 const handleSubmit = async () => {

src/views/order/saleOrder/index.vue

@@ -46,50 +46,44 @@
 
     <el-card shadow="never">
       <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="13"> 销售订单信息列表 </el-col>
-          <el-col :span="1.5">
+        <el-row :gutter="10" class="mb8" type="flex" justify="space-between" align="middle">
+          <!-- 左侧标题 -->
+          <span style="font-size: 16px; font-weight: 500">销售订单信息列表</span>
+
+          <div style="display: flex; flex-wrap: nowrap; gap: 10px">
             <el-button type="primary" @click="handleCloseOrder()" :disabled="!ids.length" plain>关闭订单</el-button>
-          </el-col>
-          <el-col :span="1.5">
             <el-button type="primary" @click="handleDelete()" :disabled="!ids.length" plain>删除订单</el-button>
-          </el-col>
-          <el-col :span="1.5">
             <el-button type="primary" :disabled="!ids.length" plain>导出订单</el-button>
-          </el-col>
-          <el-col :span="1.5">
             <el-button
               :type="queryParams.orderStatus === undefined ? 'primary' : ''"
               :plain="queryParams.orderStatus !== undefined"
               @click="handleQuery()"
-              >全部订单{{ orderStatusStats.totalCount }}</el-button
+              >全部订单</el-button
             >
-          </el-col>
-          <el-col :span="1.5">
+            <!-- 全部订单{{ orderStatusStats.totalCount }}</el-button
+            > -->
+
             <el-button :type="queryParams.orderStatus === '0' ? 'primary' : ''" :plain="queryParams.orderStatus !== '0'" @click="handleQuery('0')"
-              >待付款{{ orderStatusStats.pendingPaymentCount }}</el-button
+              >待付款</el-button
             >
-          </el-col>
-          <el-col :span="1.5">
+            <!-- {{ orderStatusStats.pendingPaymentCount }} -->
             <el-button :type="queryParams.orderStatus === '2' ? 'primary' : ''" :plain="queryParams.orderStatus !== '2'" @click="handleQuery('2')"
-              >待发货{{ orderStatusStats.pendingShipmentCount }}</el-button
+              >待发货</el-button
             >
-          </el-col>
-          <el-col :span="1.5">
+            <!-- {{ orderStatusStats.pendingShipmentCount }} -->
             <el-button :type="queryParams.orderStatus === '4' ? 'primary' : ''" :plain="queryParams.orderStatus !== '4'" @click="handleQuery('4')"
-              >已发货{{ orderStatusStats.shippedCount }}</el-button
+              >已发货</el-button
             >
-          </el-col>
-          <el-col :span="1.5">
+            <!-- {{ orderStatusStats.shippedCount }} -->
             <el-button :type="queryParams.orderStatus === '5' ? 'primary' : ''" :plain="queryParams.orderStatus !== '5'" @click="handleQuery('5')"
-              >已完成{{ orderStatusStats.completedCount }}</el-button
+              >已完成</el-button
             >
-          </el-col>
-          <el-col :span="1.5">
+            <!-- {{ orderStatusStats.completedCount }} -->
             <el-button :type="queryParams.orderStatus === '6' ? 'primary' : ''" :plain="queryParams.orderStatus !== '6'" @click="handleQuery('6')"
-              >已关闭{{ orderStatusStats.closedCount }}</el-button
+              >已关闭</el-button
             >
-          </el-col>
+            <!-- {{ orderStatusStats.closedCount }} -->
+          </div>
         </el-row>
       </template>