feat(product): 新增商品管理模块

- 添加商品列表查询、新增、修改、删除功能
- 实现商品图片上传与删除逻辑
- 集成商品类型与门店下拉选项
- 支持商品信息导出功能
- 完善商品表单验证规则

src/api/system/physical/product/index.ts

@@ -0,0 +1,69 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { ProductVO, ProductForm, ProductQuery } from '@/api/system/physical/product/types';
+
+/**
+ * 查询商品列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listProduct = (query?: ProductQuery): AxiosPromise<ProductVO[]> => {
+  return request({
+    url: '/physical/product/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询商品详细
+ * @param id
+ */
+export const getProduct = (id: string | number): AxiosPromise<ProductVO> => {
+  return request({
+    url: '/physical/product/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增商品
+ * @param data
+ */
+export const addProduct = (data: ProductForm) => {
+  return request({
+    url: '/physical/product',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改商品
+ * @param data
+ */
+export const updateProduct = (data: ProductForm) => {
+  return request({
+    url: '/physical/product',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除商品
+ * @param id
+ */
+export const delProduct = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/physical/product/' + id,
+    method: 'delete'
+  });
+};
+export const deletePhysicalProductImageByOsId = (osId: string | number) => {
+  return request({
+    url: '/physical/product/deletePhysicalProductImageByOsId/' + osId,
+    method: 'get'
+  });
+};

src/api/system/physical/product/types.ts

@@ -0,0 +1,137 @@
+export interface ProductVO {
+  /**
+   * 主键ID
+   */
+  id: string | number;
+
+  /**
+   * 商品名称，最多50字
+   */
+  name: string;
+
+  /**
+   * 商品类型ID，外键关联product_type
+   */
+  typeId: string | number;
+
+  /**
+   * 门店ID，外键关联store
+   */
+  storeId: string | number;
+
+  /**
+   * 商品说明，最多200字
+   */
+  description: string;
+
+  /**
+   * 剩余库存，最大9999
+   */
+  stock: number;
+
+  /**
+   * 商品价值，最大999
+   */
+  price: number;
+
+  /**
+   * 上架状态：0=下架，1=上架
+   */
+  status: number;
+
+  productImages?: string[];
+  productDetailImg?: string[];
+
+  productImagesOsId?: string[];
+  productDetailImgOsId?: string[];
+}
+
+export interface ProductForm extends BaseEntity {
+  /**
+   * 主键ID
+   */
+  id?: string | number;
+
+  /**
+   * 商品名称，最多50字
+   */
+  name?: string;
+
+  /**
+   * 商品类型ID，外键关联product_type
+   */
+  typeId?: string | number;
+
+  /**
+   * 门店ID，外键关联store
+   */
+  storeId?: string | number;
+
+  /**
+   * 商品说明，最多200字
+   */
+  description?: string;
+
+  /**
+   * 剩余库存，最大9999
+   */
+  stock?: number;
+
+  /**
+   * 商品价值，最大999
+   */
+  price?: number;
+
+  /**
+   * 上架状态：0=下架，1=上架
+   */
+  status?: number;
+  productImages?: string[];
+  productDetailImg?: string[];
+  osId?: string;
+
+  productImagesOsId?: string | string[];
+  productDetailImgOsId?: string | string[];
+}
+
+export interface ProductQuery extends PageQuery {
+  /**
+   * 商品名称，最多50字
+   */
+  name?: string;
+
+  /**
+   * 商品类型ID，外键关联product_type
+   */
+  typeId?: string | number;
+
+  /**
+   * 门店ID，外键关联store
+   */
+  storeId?: string | number;
+
+  /**
+   * 商品说明，最多200字
+   */
+  description?: string;
+
+  /**
+   * 剩余库存，最大9999
+   */
+  stock?: number;
+
+  /**
+   * 商品价值，最大999
+   */
+  price?: number;
+
+  /**
+   * 上架状态：0=下架，1=上架
+   */
+  status?: number;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}

src/api/system/physical/store/index.ts

@@ -61,3 +61,9 @@ export const delStore = (id: string | number | Array<string | number>) => {
     method: 'delete'
   });
 };
+export const selectPhysicalStoreSelList = (): AxiosPromise<StoreVO> => {
+  return request({
+    url: '/physical/store/selectPhysicalStoreSelList',
+    method: 'get'
+  });
+};

src/views/system/business/apiUsers/index.vue

@@ -104,11 +104,11 @@
         <el-table-column label="比赛数" align="center" prop="tournamentCount" />
         <el-table-column label="账号状态" align="center" prop="statusText" />
 
-        <el-table-column label="操作" align="center" width="430" class-name="small-padding fixed-width">
+        <el-table-column label="操作" align="center" width="550" class-name="small-padding fixed-width">
           <template #default="scope">
             <div class="action-container">
               <el-tooltip content="查看" placement="top">
-                <el-button link type="primary" icon="View" @click="handleUpdate(scope.row)" v-hasPermi="['business:user:edit']">查看</el-button>
+                <el-button link type="primary" icon="View" @click="handleUpdate(scope.row)">查看</el-button>
               </el-tooltip>
 
               <!-- 禁用/启用 按钮 -->

src/views/system/physical/product/index.vue

@@ -0,0 +1,564 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="商品名称" prop="name">
+              <el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="商品类型" prop="typeId">
+              <el-input v-model="queryParams.typeId" placeholder="请输入商品类型" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="门店" prop="storeId">
+              <el-input v-model="queryParams.storeId" placeholder="请输入" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="商品说明" prop="description">
+              <el-input v-model="queryParams.description" placeholder="请输入商品说明" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['physical:product:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['physical:product:edit']"
+              >修改</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['physical:product:remove']"
+              >删除</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['physical:product:export']">导出</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="productList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="主键ID" align="center" prop="id" v-if="true" />
+        <el-table-column label="商品名称，最多50字" align="center" prop="name" />
+        <el-table-column label="商品类型ID，外键关联product_type" align="center" prop="typeId" />
+        <el-table-column label="门店ID，外键关联store" align="center" prop="storeId" />
+        <el-table-column label="商品说明，最多200字" align="center" prop="description" />
+        <el-table-column label="剩余库存，最大9999" align="center" prop="stock" />
+        <el-table-column label="商品价值，最大999" align="center" prop="value" />
+        <el-table-column label="上架状态：0=下架，1=上架" align="center" prop="status" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['physical:product:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['physical:product:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改商品对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="productFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="商品名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入商品名称，最多50字" />
+        </el-form-item>
+        <el-form-item label="商品类型" prop="typeId">
+          <el-select v-model="form.typeId" placeholder="选项">
+            <el-option v-for="item in itemOptionsType" :key="item.id" :label="item.label" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="门店" prop="storeId">
+          <el-select v-model="form.storeId" placeholder="选项">
+            <el-option v-for="item in itemOptionsStore" :key="item.id" :label="item.label" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品说明" prop="description">
+          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="商品图片">
+          <imageUpload v-model="form.productImagesOsId" />
+        </el-form-item>
+        <el-form-item label="详情图片">
+          <imageUpload v-model="form.productDetailImgOsId" />
+        </el-form-item>
+        <el-form-item label="剩余库存" prop="stock">
+          <el-input v-model="form.stock" placeholder="请输入剩余库存" />
+        </el-form-item>
+        <el-form-item label="商品价值" prop="price">
+          <el-input v-model="form.price" placeholder="请输入商品价值" />
+        </el-form-item>
+        <el-form-item label="上架状态" prop="status">
+          <el-select v-model="form.status" placeholder="请选择上架状态">
+            <el-option label="下架" :value="0"></el-option>
+            <el-option label="上架" :value="1"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Product" lang="ts">
+import { addProduct, delProduct, getProduct, listProduct, updateProduct, deletePhysicalProductImageByOsId } from '@/api/system/physical/product';
+import { ProductForm, ProductQuery, ProductVO } from '@/api/system/physical/product/types';
+import { selectAllPhysicalTagsSelList } from '@/api/system/physical/tag';
+import { selectPhysicalStoreSelList } from '@/api/system/physical/store';
+import { listByIds } from '@/api/system/oss';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const productList = ref<ProductVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const productFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: ProductForm = {
+  id: undefined,
+  name: undefined,
+  typeId: undefined,
+  storeId: undefined,
+  description: undefined,
+  stock: undefined,
+  price: undefined,
+  status: 1,
+  productImagesOsId: [],
+  productDetailImgOsId: []
+};
+const data = reactive<PageData<ProductForm, ProductQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    name: undefined,
+    typeId: undefined,
+    storeId: undefined,
+    description: undefined,
+    stock: undefined,
+    price: undefined,
+    status: 1,
+    params: {}
+  },
+  rules: {
+    id: [{ required: true, message: '主键ID不能为空', trigger: 'blur' }],
+    name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
+    typeId: [{ required: true, message: '商品类型不能为空', trigger: 'blur' }],
+    storeId: [{ required: true, message: '门店不能为空', trigger: 'blur' }],
+    stock: [{ required: true, message: '剩余库存不能为空', trigger: 'blur' }],
+    price: [{ required: true, message: '商品价值不能为空', trigger: 'blur' }],
+    status: [{ required: true, message: '上架状态', trigger: 'change' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询商品列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listProduct(queryParams.value);
+  productList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  productFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: ProductVO[]) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = '添加商品';
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: ProductVO) => {
+  reset();
+  const _id = row?.id || ids.value[0];
+  const res = await getProduct(_id);
+  Object.assign(form.value, res.data);
+  // 处理商品图片 (productImagesOsId)
+  if (res.data.productImages && Array.isArray(res.data.productImages)) {
+    const imageUrls = await Promise.all(
+      res.data.productImages.map(async (image) => {
+        try {
+          const res = await getIds(image.osId);
+          const firstItem = Array.isArray(res) ? res[0] : res.data?.[0] || res[0];
+          return {
+            url: firstItem?.url || firstItem?.picUrl,
+            ossId: image.osId,
+            name: image.osId
+          };
+        } catch (error) {
+          console.error('获取图片URL失败:', error);
+          return { url: '', ossId: '' };
+        }
+      })
+    );
+    const validImageUrls = imageUrls.filter((item) => item.url !== '');
+    // 将有效的 URL 字符串数组赋值给 form 字段
+    // 注意：这里应该传递 osId 字符串，让 ImageUpload 内部去解析
+    // 修正：传递 osId 列表，而不是 URL 列表
+    form.value.productImagesOsId = validImageUrls.map((item) => item.ossId).join(',');
+  } else {
+    form.value.productImagesOsId = [];
+  }
+
+  // 处理详情图片 (productDetailImgOsId)，逻辑类似
+  if (res.data.productDetailImg && Array.isArray(res.data.productDetailImg)) {
+    const detailImageUrls = await Promise.all(
+      res.data.productDetailImg.map(async (image) => {
+        try {
+          const res = await getIds(image.osId);
+          const firstItem = Array.isArray(res) ? res[0] : res.data?.[0] || res[0];
+          return {
+            url: firstItem?.url || firstItem?.picUrl,
+            ossId: image.osId,
+            name: image.osId
+          };
+        } catch (error) {
+          console.error('获取详情图片URL失败:', error);
+          return { url: '', ossId: '' };
+        }
+      })
+    );
+    const validDetailImageUrls = detailImageUrls.filter((item) => item.url !== '');
+    // 同样传递 osId 列表
+    form.value.productDetailImgOsId = validDetailImageUrls.map((item) => item.ossId).join(',');
+  } else {
+    form.value.productDetailImgOsId = [];
+  }
+  dialog.visible = true;
+  dialog.title = '修改商品';
+};
+/** 提交按钮 */
+const submitForm = () => {
+  productFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      // 处理多个 osId 的情况
+      if (form.value.productImagesOsId) {
+        const osIds = form.value.productImagesOsId
+          .toString()
+          .split(',')
+          .map((id) => id.trim());
+        // 创建一个数组来存储所有图片信息
+        const imageList = [];
+        for (const osId of osIds) {
+          const res = await getIds(osId);
+          const firstItem = Array.isArray(res) ? res[0] : res.data?.[0] || res[0];
+          const picUrl = firstItem?.url || firstItem?.picUrl;
+          // 将每个图片信息添加到列表中
+          imageList.push({
+            osId: osId,
+            imageUrl: picUrl,
+            imageType: 'SHOW'
+          });
+        }
+        // 将图片列表赋值给表单
+        form.value.productImages = imageList;
+      }
+
+      if (form.value.productDetailImgOsId) {
+        const osIds = form.value.productDetailImgOsId
+          .toString()
+          .split(',')
+          .map((id) => id.trim());
+        // 创建一个数组来存储所有图片信息
+        const imageList2 = [];
+        for (const osId of osIds) {
+          const res = await getIds(osId);
+          const firstItem = Array.isArray(res) ? res[0] : res.data?.[0] || res[0];
+          const picUrl = firstItem?.url || firstItem?.picUrl;
+          // 将每个图片信息添加到列表中
+          imageList2.push({
+            osId: osId,
+            imageUrl: picUrl,
+            imageType: 'DETAIL'
+          });
+        }
+        // 将图片列表赋值给表单
+        form.value.productDetailImg = imageList2;
+      }
+
+      // 提交数据
+      if (form.value.id) {
+        await updateProduct(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addProduct(form.value).finally(() => (buttonLoading.value = false));
+      }
+
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+const getIds = async (ids: string | number) => {
+  return await listByIds(ids);
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: ProductVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除商品编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await delProduct(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'physical/product/export',
+    {
+      ...queryParams.value
+    },
+    `product_${new Date().getTime()}.xlsx`
+  );
+};
+const itemOptionsType = ref<{ id: number; label: string }[]>([]);
+const loadItemStructuresOptions = async () => {
+  try {
+    const res = await selectAllPhysicalTagsSelList();
+    if (res.code === 200) {
+      // 使用 unknown 中间类型进行类型转换
+      const data = res.data as unknown as { id: number; serviceName: string }[];
+      const list = [];
+      for (let i = 0; i < data.length; i++) {
+        const item = data[i];
+        list.push({
+          id: item.id,
+          label: item.serviceName
+        });
+      }
+      itemOptionsType.value = list;
+    } else {
+      alert('加载失败：' + res.msg);
+    }
+  } catch (error) {
+    console.error('请求出错:', error);
+  }
+};
+const itemOptionsStore = ref<{ id: number; label: string }[]>([]);
+const loadStoreOptions = async () => {
+  try {
+    const res = await selectPhysicalStoreSelList();
+    if (res.code === 200) {
+      // 使用 unknown 中间类型进行类型转换
+      const data = res.data as unknown as { id: number; serviceName: string }[];
+      const list = [];
+      for (let i = 0; i < data.length; i++) {
+        const item = data[i];
+        list.push({
+          id: item.id,
+          label: item.serviceName
+        });
+      }
+      itemOptionsStore.value = list;
+    } else {
+      alert('加载失败：' + res.msg);
+    }
+  } catch (error) {
+    console.error('请求出错:', error);
+  }
+};
+onMounted(() => {
+  getList();
+  loadItemStructuresOptions();
+  loadStoreOptions();
+});
+// 在 setup 中添加 watch
+watch(
+  () => form.value.productImagesOsId,
+  (newVal, oldVal) => {
+    console.log('商品图片已更新:', newVal);
+    // 将 oldVal 和 newVal 转换为字符串数组
+    const oldIds = Array.isArray(oldVal) ? oldVal : oldVal?.split(',') || [];
+    const newIds = Array.isArray(newVal) ? newVal : newVal?.split(',') || [];
+
+    if (oldIds.length > newIds.length) {
+      const removedIds = oldIds.filter((id) => !newIds.includes(id));
+      if (removedIds.length > 0) {
+        console.log('商品图片被删除:', removedIds);
+        removedIds.forEach((osId) => {
+          deletePhysicalProductImageByOsId(osId);
+        });
+      }
+    }
+  },
+  { deep: true }
+);
+
+watch(
+  () => form.value.productDetailImgOsId,
+  (newVal, oldVal) => {
+    console.log('详情图片已更新:', newVal);
+    // 将 oldVal 和 newVal 转换为字符串数组
+    const oldIds = Array.isArray(oldVal) ? oldVal : oldVal?.split(',') || [];
+    const newIds = Array.isArray(newVal) ? newVal : newVal?.split(',') || [];
+
+    if (oldIds.length > newIds.length) {
+      const removedIds = oldIds.filter((id) => !newIds.includes(id));
+      if (removedIds.length > 0) {
+        console.log('详情图片被删除:', removedIds);
+        removedIds.forEach((osId) => {
+          deletePhysicalProductImageByOsId(osId);
+        });
+      }
+    }
+  },
+  { deep: true }
+);
+
+/*const imageFileList = ref([]);
+const imageUrls = ref([]);
+/!** 处理图片上传 *!/
+const handleImageChange = async (file, fileList) => {
+  imageFileList.value = fileList;
+  // 为新上传的文件生成预览
+  if (file.raw) {
+    try {
+      const rawFile = file.raw;
+      const res = await uploadTournament(rawFile);
+      if (res.code === 200) {
+        // 更新文件状态为成功并保存URL
+        const index = imageFileList.value.findIndex((f) => f.uid === file.uid);
+        if (index !== -1) {
+          imageFileList.value[index] = {
+            ...file,
+            status: 'success',
+            response: res.data.url,
+            url: res.data.url
+          };
+
+          // 更新 imageUrls 数组
+          updateImageUrls();
+        }
+        proxy?.$modal.msgSuccess('上传成功');
+      } else {
+        throw new Error(res.msg);
+      }
+    } catch (error) {
+      // 更新文件状态为失败
+      const index = imageFileList.value.findIndex((f) => f.uid === file.uid);
+      if (index !== -1) {
+        imageFileList.value[index] = {
+          ...file,
+          status: 'fail',
+          error: '上传失败'
+        };
+      }
+      proxy?.$modal.msgError('上传失败，请重试');
+    }
+  } else {
+    // 对于已有文件，直接更新 URLs
+    updateImageUrls();
+  }
+};
+
+/!** 处理图片删除 *!/
+const handleImageRemove = (file, fileList) => {
+  imageFileList.value = fileList;
+  // 更新图片 URLs 数组
+  updateImageUrls();
+
+  // 同步到 form 数据
+  if (form.value.productImagesOsId) {
+    const osIds = form.value.productImagesOsId
+      .toString()
+      .split(',')
+      .map((id) => id.trim());
+    const removedId = file.response || file.url;
+
+    // 过滤掉被删除的图片
+    form.value.productImagesOsId = osIds.filter((osId) => osId !== removedId);
+  }
+};
+
+/!** 图片数量超出限制 *!/
+const handleImageExceed = (files, fileList) => {
+  proxy?.$modal.msgWarning('最多只能上传5张图片');
+};
+
+/!** 更新图片 URLs 数组 *!/
+const updateImageUrls = () => {
+  const urls = imageFileList.value.filter((file) => file.status === 'success' || file.url).map((file) => file.response || file.url);
+  // 确保返回的是字符串数组
+  imageUrls.value = urls as string[];
+  form.value.images = urls as string[];
+};*/
+</script>
+<style scoped>
+.upload-images :deep(.el-upload-list__item) {
+  width: 120px;
+  height: 120px;
+}
+
+.upload-images :deep(.el-upload--picture-card) {
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+}
+</style>