Răsfoiți Sursa

feat(product): 优化商品管理界面交互与数据展示

- 将商品类型和门店字段从输入框改为下拉选择器
- 商品列表增加类型名称和门店名称显示
- 修改价格字段展示为商品价值
- 上架状态字段增加状态标签显示(上架/下架/未知)
- 导出文件名格式化为包含时间戳的商品列表
- 增加删除图片时的空值校验判断
- 引入日期工具函数用于文件命名
fugui001 4 zile în urmă
părinte
comite
a933b75b65
1 a modificat fișierele cu 28 adăugiri și 14 ștergeri
  1. 28 14
      src/views/system/physical/product/index.vue

+ 28 - 14
src/views/system/physical/product/index.vue

@@ -8,10 +8,14 @@
               <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-select v-model="queryParams.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-input v-model="queryParams.storeId" placeholder="请输入" clearable @keyup.enter="handleQuery" />
+              <el-select v-model="queryParams.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="queryParams.description" placeholder="请输入商品说明" clearable @keyup.enter="handleQuery" />
@@ -50,14 +54,20 @@
 
       <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" prop="id" v-if="true" />
+        <el-table-column label="商品名称" align="center" prop="name" />
+        <el-table-column label="商品类型" align="center" prop="typeName" />
+        <el-table-column label="门店" align="center" prop="storeName" />
+        <el-table-column label="商品说明" align="center" prop="description" />
+        <el-table-column label="剩余库存" align="center" prop="stock" />
+        <el-table-column label="商品价值" align="center" prop="price" />
+        <el-table-column label="上架状态" align="center" width="120">
+          <template #default="scope">
+            <span v-if="scope.row.status === 0">下架</span>
+            <span v-else-if="scope.row.status === 1">上架</span>
+            <span v-else>未知</span>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <el-tooltip content="修改" placement="top">
@@ -126,7 +136,7 @@ import { ProductForm, ProductQuery, ProductVO } from '@/api/system/physical/prod
 import { selectAllPhysicalTagsSelList } from '@/api/system/physical/tag';
 import { selectPhysicalStoreSelList } from '@/api/system/physical/store';
 import { listByIds } from '@/api/system/oss';
-
+import { parseTime } from '@/utils/dateUtils';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const productList = ref<ProductVO[]>([]);
@@ -375,7 +385,7 @@ const handleExport = () => {
     {
       ...queryParams.value
     },
-    `product_${new Date().getTime()}.xlsx`
+    `商品列表${parseTime(new Date(), '{y}{m}{d}{h}{i}{s}')}.xlsx`
   );
 };
 const itemOptionsType = ref<{ id: number; label: string }[]>([]);
@@ -443,7 +453,9 @@ watch(
       if (removedIds.length > 0) {
         console.log('商品图片被删除:', removedIds);
         removedIds.forEach((osId) => {
-          deletePhysicalProductImageByOsId(osId);
+          if (osId && typeof osId === 'string' && osId.trim() !== '') {
+            deletePhysicalProductImageByOsId(osId);
+          }
         });
       }
     }
@@ -464,7 +476,9 @@ watch(
       if (removedIds.length > 0) {
         console.log('详情图片被删除:', removedIds);
         removedIds.forEach((osId) => {
-          deletePhysicalProductImageByOsId(osId);
+          if (osId && typeof osId === 'string' && osId.trim() !== '') {
+            deletePhysicalProductImageByOsId(osId);
+          }
         });
       }
     }