商品管理界面编辑商品和添加商品功能完善

src/pages/admin/ProductPage.vue

@@ -88,6 +88,7 @@
         :title="isEditing ? '编辑商品' : '添加商品'"
         v-model="showAddProductDialog"
         width="600px"
+        @close="resetProductForm"
       >
         <el-form
           :model="productForm"
@@ -99,23 +100,42 @@
             <el-input v-model="productForm.name" />
           </el-form-item>
           <el-form-item label="分类" prop="categoryId">
-            <el-select
+            <el-cascader
-              v-model="productForm.categoryId"
+              v-model="selectedCategoryPath"
+              :options="categoriesTree"
+              :props="{ value: 'id', label: 'name', children: 'children' }"
               placeholder="请选择分类"
-            >
+              style="width: 100%; margin-bottom: 10px"
-              <el-option
+              clearable
-                v-for="category in categories"
+              @change="onCategoryChange"
-                :key="category.id"
+            />
-                :label="category.name"
+            <el-button @click="showCategoryDialog = true" type="primary" plain>
-                :value="category.id"
+              <i class="fa fa-plus mr-1"></i> 创建新分类
-              />
+            </el-button>
-            </el-select>
           </el-form-item>
           <el-form-item label="副标题" prop="subtitle">
             <el-input v-model="productForm.subtitle" />
           </el-form-item>
           <el-form-item label="主图" prop="mainImage">
-            <el-input v-model="productForm.mainImage" placeholder="图片URL" />
+            <el-upload
+              class="avatar-uploader"
+              :auto-upload="false"
+              :show-file-list="false"
+              :on-change="handleImageChange"
+              :before-upload="beforeImageUpload"
+              accept="image/*"
+            >
+              <template v-if="productForm.mainImage">
+                <img
+                  :src="productForm.mainImage"
+                  class="avatar"
+                  alt="主图预览"
+                />
+              </template>
+              <template v-else>
+                <el-button type="primary" plain>选择图片</el-button>
+              </template>
+            </el-upload>
           </el-form-item>
           <el-form-item label="价格" prop="price">
             <el-input-number
@@ -141,13 +161,51 @@
         </el-form>
         <template #footer>
           <div class="dialog-footer">
-            <el-button @click="showAddProductDialog = false">取消</el-button>
+            <el-button @click="cancelProductForm">取消</el-button>
             <el-button type="primary" @click="submitProductForm"
               >确定</el-button
             >
           </div>
         </template>
       </el-dialog>
+
+      <!-- 创建分类对话框 -->
+      <el-dialog title="创建新分类" v-model="showCategoryDialog" width="400px">
+        <el-form
+          :model="categoryForm"
+          :rules="categoryFormRules"
+          ref="categoryFormRef"
+          label-width="100px"
+        >
+          <el-form-item label="分类名称" prop="name">
+            <el-input
+              v-model="categoryForm.name"
+              placeholder="请输入分类名称"
+            />
+          </el-form-item>
+          <el-form-item label="父分类">
+            <el-cascader
+              v-model="categoryForm.parentId"
+              :options="categoriesTree"
+              :props="{ value: 'id', label: 'name', children: 'children' }"
+              placeholder="选择父分类（不选则为一级分类）"
+              :clearable="true"
+              style="width: 100%"
+            />
+          </el-form-item>
+          <el-form-item label="排序">
+            <el-input-number v-model="categoryForm.sort" :min="0" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="showCategoryDialog = false">取消</el-button>
+            <el-button type="primary" @click="submitCategoryForm"
+              >创建</el-button
+            >
+          </div>
+        </template>
+      </el-dialog>
     </div>
   </ManageLayout>
 </template>
@@ -162,9 +220,18 @@ import {
   updateProduct,
   updateProductStatus,
   deleteProductAPI,
+  addProductCategory,
+  uploadFile,
+  getProductSubCategories,
+  getProductDetail,
 } from "@/apis/product";
 import { getUserList } from "@/apis/user"; // 导入获取用户列表的API
-import { ProductListItem, ProductCategory, ProductDTO } from "@/types/product";
+import {
+  ProductListItem,
+  ProductCategory,
+  ProductDTO,
+  ProductCategoryDTO,
+} from "@/types/product";
 import { UserDTO } from "@/types/user"; // 导入用户类型
 import ManageLayout from "@/layouts/ManageLayout.vue";
 import { useRouter } from "vue-router";
@@ -178,8 +245,11 @@ const router = useRouter();
 const loading = ref(false);
 const searchKeyword = ref("");
 const showAddProductDialog = ref(false);
+const showCategoryDialog = ref(false);
 const isEditing = ref(false);
 const productFormRef = ref();
+const categoryFormRef = ref();
+const pendingImageFile = ref<File | null>(null); // 新增：暂存待上传的图片文件
 
 // 分页数据
 const currentPage = ref(1);
@@ -198,11 +268,25 @@ const productForm = ref<ProductDTO>({
   sort: 0,
 });
 
+// 分类表单
+const categoryForm = ref({
+  name: "",
+  parentId: 0, // 修改为数字类型，支持级联选择
+  sort: 0,
+});
+
 // 所有商品数据
 const products = ref<ProductListItem[]>([]);
 
-// 商品分类
+// 所有分类
-const categories = ref<ProductCategory[]>([]);
+const allCategories = ref<ProductCategory[]>([]);
+const categoriesTree = ref<
+  (ProductCategory & { children?: ProductCategory[] })[]
+>([]); // 新增：树形结构的分类数据
+
+// 当前选中的分类
+const selectedCategory = ref<number | null>(null);
+const selectedCategoryPath = ref<number[]>([]); // 新增：选中的分类路径（用于级联选择器）
 
 // 所有用户数据（用于获取商家名称）
 const users = ref<UserDTO[]>([]);
@@ -229,6 +313,19 @@ const productFormRules = reactive({
   ],
 });
 
+// 分类表单验证规则
+const categoryFormRules = reactive({
+  name: [
+    { required: true, message: "请输入分类名称", trigger: "blur" },
+    {
+      min: 1,
+      max: 20,
+      message: "分类名称长度应在1-20个字符之间",
+      trigger: "blur",
+    },
+  ],
+});
+
 // 计算属性：根据搜索关键词过滤商品
 const filteredProducts = computed(() => {
   if (!searchKeyword.value) return products.value;
@@ -272,9 +369,39 @@ const fetchProducts = async () => {
 // 获取商品分类
 const fetchCategories = async () => {
   try {
+    // 获取所有顶级分类
     const response = await getProductCategories();
     if (response.code === 200) {
-      categories.value = response.data || [];
+      const topLevelCategories = response.data || [];
+
+      // 递归获取子分类
+      const allCategoryData: ProductCategory[] = [...topLevelCategories];
+      const treeData = [...topLevelCategories] as CategoryTreeNode[];
+
+      const fetchSubCategories = async (categories: CategoryTreeNode[]) => {
+        for (const category of categories) {
+          try {
+            const subResponse = await getProductSubCategories(category.id);
+            if (subResponse.code === 200) {
+              const subCategories = subResponse.data || [];
+              if (subCategories.length > 0) {
+                allCategoryData.push(...subCategories);
+
+                // 将子分类添加到父分类的子分类数组中
+                category.children = subCategories as CategoryTreeNode[];
+
+                await fetchSubCategories(category.children); // 递归获取子分类
+              }
+            }
+          } catch (error) {
+            console.error(`获取分类 ${category.id} 的子分类失败:`, error);
+          }
+        }
+      };
+
+      await fetchSubCategories(treeData);
+      allCategories.value = [...allCategoryData];
+      categoriesTree.value = [...treeData]; // 用于树形选择器
     }
   } catch (error) {
     console.error("获取商品分类错误:", error);
@@ -311,18 +438,73 @@ const handleCurrentChange = (page: number) => {
   currentPage.value = page;
 };
 
+// 为树形结构定义类型
+type CategoryTreeNode = ProductCategory & { children?: CategoryTreeNode[] };
+
+// 递归查找分类路径
+const findCategoryPath = (
+  categories: CategoryTreeNode[],
+  targetId: number,
+  path: number[] = [],
+): number[] | null => {
+  for (const category of categories) {
+    const currentPath = [...path, category.id];
+    if (category.id === targetId) {
+      return currentPath;
+    }
+    if (category.children && category.children.length > 0) {
+      const result = findCategoryPath(category.children, targetId, currentPath);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+};
+
 // 编辑商品
-const editProduct = (product: ProductListItem) => {
+const editProduct = async (product: ProductListItem) => {
   isEditing.value = true;
+
+  // 首先尝试从列表数据获取，如果categoryId为空则获取详细信息
+  let fullProduct = product;
+  if (!product.categoryId) {
+    try {
+      // 获取商品详细信息以获取完整的分类ID
+      const detailResponse = await getProductDetail(product.id);
+      if (detailResponse.code === 200) {
+        fullProduct = detailResponse.data as ProductListItem;
+      }
+    } catch (error) {
+      console.error("获取商品详情失败:", error);
+      ElMessage.error("获取商品详情失败");
+    }
+  }
+
   // 复制商品数据，处理可能的undefined值
   productForm.value = {
-    id: product.id,
+    id: fullProduct.id,
-    categoryId: product.categoryId || 0, // 确保是number类型
+    categoryId: fullProduct.categoryId || 0, // 确保是number类型
-    name: product.name,
+    name: fullProduct.name,
-    mainImage: product.mainImage,
+    mainImage: fullProduct.mainImage,
-    price: product.price,
+    price: fullProduct.price,
-    stock: product.stock || 0,
+    stock: fullProduct.stock || 0,
+    subtitle: fullProduct.subtitle || "",
+    description: fullProduct.description || "",
+    sort: fullProduct.sort || 0,
   };
+
+  // 设置选中的分类路径 - 仿照分类管理页面的方式
+  if (fullProduct.categoryId) {
+    selectedCategory.value = fullProduct.categoryId;
+    // 根据商品的分类ID找到对应的分类路径
+    const path = findCategoryPath(categoriesTree.value, fullProduct.categoryId);
+    selectedCategoryPath.value = path || [fullProduct.categoryId];
+  } else {
+    selectedCategory.value = null;
+    selectedCategoryPath.value = [];
+  }
+
   showAddProductDialog.value = true;
 };
 
@@ -406,9 +588,31 @@ const submitProductForm = async () => {
 
     await form.validate();
 
+    // 设置分类ID
+    const finalProductData = { ...productForm.value };
+    finalProductData.categoryId = selectedCategory.value || 0;
+
+    // 如果有待上传的图片文件，先上传
+    if (pendingImageFile.value) {
+      try {
+        const response = await uploadFile(pendingImageFile.value);
+        if (response.code === 200) {
+          finalProductData.mainImage = response.data.fileUrl;
+          ElMessage.success("图片上传成功");
+        } else {
+          ElMessage.error(response.message || "图片上传失败");
+          return;
+        }
+      } catch (error) {
+        console.error("图片上传错误:", error);
+        ElMessage.error("图片上传失败");
+        return;
+      }
+    }
+
     if (isEditing.value) {
       // 更新商品
-      const response = await updateProduct(productForm.value);
+      const response = await updateProduct(finalProductData);
 
       if (response.code === 200) {
         // 更新本地数据 - 重新获取商品列表以确保数据同步
@@ -421,8 +625,8 @@ const submitProductForm = async () => {
     } else {
       // 添加新商品
       const response = await saveProduct({
-        ...productForm.value,
+        ...finalProductData,
-        userId: userStore.userInfo?.id, // 假设当前用户为商家
+        userId: userStore.userInfo?.id, // 当前用户为商家
       });
 
       if (response.code === 200) {
@@ -434,6 +638,7 @@ const submitProductForm = async () => {
     }
 
     showAddProductDialog.value = false;
+    resetProductForm(); // 关闭对话框后重置表单
     fetchProducts(); // 重新获取商品列表
   } catch (error) {
     console.error("提交商品表单错误:", error);
@@ -445,6 +650,124 @@ const submitProductForm = async () => {
   }
 };
 
+// 重置商品表单
+const resetProductForm = () => {
+  productForm.value = {
+    id: undefined,
+    categoryId: 0,
+    name: "",
+    subtitle: "",
+    mainImage: "",
+    description: "",
+    price: 0,
+    stock: 0,
+    sort: 0,
+  };
+  selectedCategory.value = null;
+  selectedCategoryPath.value = []; // 重置路径
+  isEditing.value = false;
+  pendingImageFile.value = null; // 清除暂存的文件
+};
+
+// 取消添加/编辑商品
+const cancelProductForm = () => {
+  showAddProductDialog.value = false;
+  resetProductForm(); // 取消时也重置表单
+};
+
+// 提交分类表单
+const submitCategoryForm = async () => {
+  try {
+    // 验证表单
+    const form = categoryFormRef.value;
+    if (!form) return;
+
+    await form.validate();
+
+    // 添加新分类 - 创建符合 ProductCategoryDTO 类型的对象
+    const newCategory: ProductCategoryDTO = {
+      name: categoryForm.value.name,
+      sort: categoryForm.value.sort,
+      parentId: categoryForm.value.parentId || 0, // 使用级联选择器的值
+      level: 1, // 初始设置为1，后端会根据父分类自动计算
+    };
+
+    const response = await addProductCategory(newCategory);
+
+    if (response.code === 200) {
+      ElMessage.success("分类创建成功");
+
+      // 重新获取分类列表
+      await fetchCategories();
+
+      // 选中新创建的分类
+      const newCategoryItem = allCategories.value.find(
+        (cat) =>
+          cat.name === categoryForm.value.name &&
+          cat.parentId === (categoryForm.value.parentId || 0),
+      );
+      if (newCategoryItem) {
+        selectedCategory.value = newCategoryItem.id;
+        const path = findCategoryPath(categoriesTree.value, newCategoryItem.id);
+        selectedCategoryPath.value = path || [newCategoryItem.id];
+      }
+
+      // 清空表单并关闭对话框
+      categoryForm.value = {
+        name: "",
+        parentId: 0,
+        sort: 0,
+      };
+      showCategoryDialog.value = false;
+    } else {
+      ElMessage.error(response.message || "分类创建失败");
+    }
+  } catch (error) {
+    console.error("提交分类表单错误:", error);
+    ElMessage.error("提交失败");
+  }
+};
+
+// 分类选择改变事件
+const onCategoryChange = (value: number[]) => {
+  if (value && value.length > 0) {
+    // 获取路径中最后一个ID作为实际选中的分类ID
+    selectedCategory.value = value[value.length - 1];
+    productForm.value.categoryId = selectedCategory.value;
+  } else {
+    selectedCategory.value = null;
+    productForm.value.categoryId = 0;
+  }
+};
+
+// 上传图片前的钩子
+const beforeImageUpload = (file: File) => {
+  const isImage = file.type.startsWith("image/");
+  const isLt2M = file.size / 1024 / 1024 < 2;
+
+  if (!isImage) {
+    ElMessage.error("上传图片只能是图片格式!");
+  }
+  if (!isLt2M) {
+    ElMessage.error("上传图片大小不能超过 2MB!");
+  }
+  return isImage && isLt2M;
+};
+
+// 处理图片选择变化
+const handleImageChange = async (file: { raw: File }) => {
+  if (!beforeImageUpload(file.raw)) {
+    return;
+  }
+
+  // 暂存文件，等待提交时上传
+  pendingImageFile.value = file.raw;
+
+  // 创建预览URL用于显示
+  const previewUrl = URL.createObjectURL(file.raw);
+  productForm.value.mainImage = previewUrl;
+};
+
 // 初始化
 onMounted(() => {
   if (userStore.userInfo?.isAdmin !== 1) {
@@ -468,4 +791,11 @@ onMounted(() => {
 .dialog-footer {
   text-align: right;
 }
+
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+  object-fit: cover;
+}
 </style>