wangzhuo

src/views/pms/productAttr/addProductAttr.vue

@@ -1,15 +1,26 @@
 <template>
-  <product-attr-detail :is-edit='false'></product-attr-detail>
+  <!-- 商品属性详情组件 -->
+  <!-- 使用 ProductAttrDetail 组件，传递 is-edit="false" 表示新增模式 -->
+  <product-attr-detail :is-edit="false"></product-attr-detail>
 </template>
 
 <script>
-  import ProductAttrDetail from './components/ProductAttrDetail'
-  export default {
-    name: 'addProductAttr',
-    components: { ProductAttrDetail }
-  }
+/**
+ * 导入 ProductAttrDetail 组件
+ * 该组件用于处理商品属性的新增和编辑功能
+ * 通过传递 `is-edit` 参数来控制组件的操作模式
+ */
+import ProductAttrDetail from './components/ProductAttrDetail';
+
+export default {
+  // 组件名称：用于标识当前页面
+  name: 'addProductAttr',
+  components: {
+    ProductAttrDetail, // 注册 ProductAttrDetail 组件
+  },
+};
 </script>
 
 <style scoped>
-
+/* 样式部分：暂无自定义样式，可根据需求添加 */
 </style>

src/views/pms/productAttr/components/ProductAttrDetail.vue

@@ -1,25 +1,38 @@
 <template>
+  <!-- 属性详情表单卡片 -->
   <el-card class="form-container" shadow="never">
-    <el-form :model="productAttr" :rules="rules" ref="productAttrFrom" label-width="150px">
+    <el-form
+      :model="productAttr"
+      :rules="rules"
+      ref="productAttrFrom"
+      label-width="150px"
+    >
+      <!-- 属性名称 -->
       <el-form-item label="属性名称：" prop="name">
         <el-input v-model="productAttr.name"></el-input>
       </el-form-item>
+
+      <!-- 商品类型选择 -->
       <el-form-item label="商品类型：">
         <el-select v-model="productAttr.productAttributeCategoryId" placeholder="请选择">
           <el-option
             v-for="item in productAttrCateList"
             :key="item.id"
             :label="item.name"
-            :value="item.id">
-          </el-option>
+            :value="item.id"
+          ></el-option>
         </el-select>
       </el-form-item>
+
+      <!-- 分类筛选样式 -->
       <el-form-item label="分类筛选样式:">
         <el-radio-group v-model="productAttr.filterType">
           <el-radio :label="0">普通</el-radio>
           <el-radio :label="1">颜色</el-radio>
         </el-radio-group>
       </el-form-item>
+
+      <!-- 能否进行检索 -->
       <el-form-item label="能否进行检索:">
         <el-radio-group v-model="productAttr.searchType">
           <el-radio :label="0">不需要检索</el-radio>
@@ -27,12 +40,16 @@
           <el-radio :label="2">范围检索</el-radio>
         </el-radio-group>
       </el-form-item>
+
+      <!-- 商品属性关联 -->
       <el-form-item label="商品属性关联:">
         <el-radio-group v-model="productAttr.relatedStatus">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
         </el-radio-group>
       </el-form-item>
+
+      <!-- 属性是否可选 -->
       <el-form-item label="属性是否可选:">
         <el-radio-group v-model="productAttr.selectType">
           <el-radio :label="0">唯一</el-radio>
@@ -40,146 +57,178 @@
           <el-radio :label="2">复选</el-radio>
         </el-radio-group>
       </el-form-item>
+
+      <!-- 属性值的录入方式 -->
       <el-form-item label="属性值的录入方式:">
         <el-radio-group v-model="productAttr.inputType">
           <el-radio :label="0">手工录入</el-radio>
           <el-radio :label="1">从下面列表中选择</el-radio>
         </el-radio-group>
       </el-form-item>
+
+      <!-- 属性值可选值列表 -->
       <el-form-item label="属性值可选值列表:">
-        <el-input :autosize="true" type="textarea" v-model="inputListFormat"></el-input>
+        <el-input
+          :autosize="true"
+          type="textarea"
+          v-model="inputListFormat"
+        ></el-input>
       </el-form-item>
+
+      <!-- 是否支持手动新增 -->
       <el-form-item label="是否支持手动新增:">
         <el-radio-group v-model="productAttr.handAddStatus">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
         </el-radio-group>
       </el-form-item>
+
+      <!-- 排序属性 -->
       <el-form-item label="排序属性：">
         <el-input v-model="productAttr.sort"></el-input>
       </el-form-item>
+
+      <!-- 提交与重置按钮 -->
       <el-form-item>
         <el-button type="primary" @click="onSubmit('productAttrFrom')">提交</el-button>
-        <el-button  v-if="!isEdit" @click="resetForm('productAttrFrom')">重置</el-button>
+        <el-button v-if="!isEdit" @click="resetForm('productAttrFrom')">重置</el-button>
       </el-form-item>
     </el-form>
   </el-card>
 </template>
 
 <script>
-  import {fetchList} from '@/api/productAttrCate'
-  import {createProductAttr,getProductAttr,updateProductAttr} from '@/api/productAttr'
+import { fetchList } from '@/api/productAttrCate'; // 获取商品类型分类API
+import {
+  createProductAttr,
+  getProductAttr,
+  updateProductAttr,
+} from '@/api/productAttr'; // 创建、获取、更新属性API
+
+// 默认商品属性对象
+const defaultProductAttr = {
+  filterType: 0,
+  handAddStatus: 0,
+  inputList: '',
+  inputType: 0,
+  name: '',
+  productAttributeCategoryId: 0,
+  relatedStatus: 0,
+  searchType: 0,
+  selectType: 0,
+  sort: 0,
+  type: 0,
+};
 
-  const defaultProductAttr = {
-    filterType: 0,
-    handAddStatus: 0,
-    inputList: '',
-    inputType: 0,
-    name: '',
-    productAttributeCategoryId: 0,
-    relatedStatus: 0,
-    searchType: 0,
-    selectType: 0,
-    sort: 0,
-    type: 0
-  };
-  export default {
-    name: "ProductAttrDetail",
-    props: {
-      isEdit: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  name: 'ProductAttrDetail', // 组件名称
+  props: {
+    isEdit: {
+      type: Boolean, // 是否编辑模式
+      default: false,
     },
-    data() {
-      return {
-        productAttr: Object.assign({}, defaultProductAttr),
-        rules: {
-          name: [
-            {required: true, message: '请输入属性名称', trigger: 'blur'},
-            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
-          ]
-        },
-        productAttrCateList: null,
-        inputListFormat:null
-      }
+  },
+  data() {
+    return {
+      productAttr: Object.assign({}, defaultProductAttr), // 商品属性对象
+      rules: {
+        // 表单验证规则
+        name: [
+          { required: true, message: '请输入属性名称', trigger: 'blur' },
+          { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
+        ],
+      },
+      productAttrCateList: null, // 商品分类列表
+      inputListFormat: null, // 格式化的输入列表
+    };
+  },
+  created() {
+    if (this.isEdit) {
+      // 编辑模式：获取商品属性数据
+      getProductAttr(this.$route.query.id).then((response) => {
+        this.productAttr = response.data;
+        // 将逗号分隔的属性值转换为换行符格式
+        this.inputListFormat = this.productAttr.inputList.replace(/,/g, '\n');
+      });
+    } else {
+      // 新增模式：初始化商品属性
+      this.resetProductAttr();
+    }
+    this.getCateList(); // 获取商品分类列表
+  },
+  watch: {
+    // 监听输入列表变化，将换行符替换为逗号分隔
+    inputListFormat(newValue) {
+      newValue = newValue.replace(/\n/g, ',');
+      this.productAttr.inputList = newValue;
     },
-    created() {
-      if(this.isEdit){
-        getProductAttr(this.$route.query.id).then(response => {
-          this.productAttr = response.data;
-          this.inputListFormat = this.productAttr.inputList.replace(/,/g,'\n');
-        });
-      }else{
-        this.resetProductAttr();
-      }
-      this.getCateList();
+  },
+  methods: {
+    // 获取商品分类列表
+    getCateList() {
+      let listQuery = { pageNum: 1, pageSize: 100 };
+      fetchList(listQuery).then((response) => {
+        this.productAttrCateList = response.data.list;
+      });
     },
-    watch:{
-      inputListFormat: function (newValue, oldValue) {
-        newValue = newValue.replace(/\n/g,',');
-        this.productAttr.inputList = newValue;
-      }
+    // 重置商品属性对象
+    resetProductAttr() {
+      this.productAttr = Object.assign({}, defaultProductAttr);
+      this.productAttr.productAttributeCategoryId = Number(this.$route.query.cid);
+      this.productAttr.type = Number(this.$route.query.type);
     },
-    methods: {
-      getCateList() {
-        let listQuery = {pageNum: 1, pageSize: 100};
-        fetchList(listQuery).then(response => {
-          this.productAttrCateList = response.data.list;
-        });
-      },
-      resetProductAttr() {
-        this.productAttr = Object.assign({}, defaultProductAttr);
-        this.productAttr.productAttributeCategoryId = Number(this.$route.query.cid);
-        this.productAttr.type = Number(this.$route.query.type);
-      },
-      onSubmit(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.$confirm('是否提交数据', '提示', {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning'
-            }).then(() => {
-              if(this.isEdit){
-                updateProductAttr(this.$route.query.id,this.productAttr).then(response=>{
-                  this.$message({
-                    message: '修改成功',
-                    type: 'success',
-                    duration: 1000
-                  });
-                  this.$router.back();
+    // 提交表单
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 弹窗确认
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }).then(() => {
+            if (this.isEdit) {
+              // 编辑模式：更新数据
+              updateProductAttr(this.$route.query.id, this.productAttr).then(() => {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000,
                 });
-              }else{
-                createProductAttr(this.productAttr).then(response=>{
-                  this.$message({
-                    message: '提交成功',
-                    type: 'success',
-                    duration: 1000
-                  });
-                  this.resetForm('productAttrFrom');
+                this.$router.back();
+              });
+            } else {
+              // 新增模式：创建数据
+              createProductAttr(this.productAttr).then(() => {
+                this.$message({
+                  message: '提交成功',
+                  type: 'success',
+                  duration: 1000,
                 });
-              }
-            });
-
-          } else {
-            this.$message({
-              message: '验证失败',
-              type: 'error',
-              duration: 1000
-            });
-            return false;
-          }
-        });
-      },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
-        this.resetProductAttr();
-      }
+                this.resetForm(formName);
+              });
+            }
+          });
+        } else {
+          // 表单验证失败
+          this.$message({
+            message: '验证失败',
+            type: 'error',
+            duration: 1000,
+          });
+          return false;
+        }
+      });
     },
-  }
+    // 重置表单
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+      this.resetProductAttr();
+    },
+  },
+};
 </script>
 
 <style scoped>
-
+/* 样式部分：可以根据需求添加自定义样式 */
 </style>

src/views/pms/productAttr/index.vue

@@ -1,82 +1,103 @@
-<template> 
+<template>
+  <!-- 商品属性分类管理页面 -->
   <div class="app-container">
+    <!-- 操作栏：包含添加按钮 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
-      <el-button
-        class="btn-add"
-        @click="addProductAttrCate()"
-        size="mini">
-        添加
-      </el-button>
+      <!-- 添加商品属性分类按钮 -->
+      <el-button class="btn-add" @click="addProductAttrCate()" size="mini">添加</el-button>
     </el-card>
+
+    <!-- 数据表格区域 -->
     <div class="table-container">
-      <el-table ref="productAttrCateTable"
-                style="width: 100%"
-                :data="list"
-                v-loading="listLoading"
-                border>
+      <el-table
+        ref="productAttrCateTable"
+        style="width: 100%"
+        :data="list"
+        v-loading="listLoading"
+        border
+      >
+        <!-- 列：编号 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.id}}</template>
+          <template slot-scope="scope">{{ scope.row.id }}</template>
         </el-table-column>
+
+        <!-- 列：类型名称 -->
         <el-table-column label="类型名称" align="center">
-          <template slot-scope="scope">{{scope.row.name}}</template>
+          <template slot-scope="scope">{{ scope.row.name }}</template>
         </el-table-column>
+
+        <!-- 列：属性数量 -->
         <el-table-column label="属性数量" width="200" align="center">
-          <template slot-scope="scope">{{scope.row.attributeCount==null?0:scope.row.attributeCount}}</template>
+          <template slot-scope="scope">
+            {{ scope.row.attributeCount == null ? 0 : scope.row.attributeCount }}
+          </template>
         </el-table-column>
+
+        <!-- 列：参数数量 -->
         <el-table-column label="参数数量" width="200" align="center">
-          <template slot-scope="scope">{{scope.row.paramCount==null?0:scope.row.paramCount}}</template>
+          <template slot-scope="scope">
+            {{ scope.row.paramCount == null ? 0 : scope.row.paramCount }}
+          </template>
         </el-table-column>
+
+        <!-- 列：设置 -->
         <el-table-column label="设置" width="200" align="center">
           <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="getAttrList(scope.$index, scope.row)">属性列表
+            <!-- 属性列表按钮 -->
+            <el-button size="mini" @click="getAttrList(scope.$index, scope.row)">
+              属性列表
             </el-button>
-            <el-button
-              size="mini"
-              @click="getParamList(scope.$index, scope.row)">参数列表
+            <!-- 参数列表按钮 -->
+            <el-button size="mini" @click="getParamList(scope.$index, scope.row)">
+              参数列表
             </el-button>
           </template>
         </el-table-column>
+
+        <!-- 列：操作 -->
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handleUpdate(scope.$index, scope.row)">编辑
-            </el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)">删除
+            <!-- 编辑按钮 -->
+            <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
+            <!-- 删除按钮 -->
+            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
+              删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
+
+    <!-- 分页组件 -->
     <div class="pagination-container">
       <el-pagination
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        layout="total, sizes,prev, pager, next,jumper"
+        layout="total, sizes, prev, pager, next, jumper"
         :page-size="listQuery.pageSize"
-        :page-sizes="[5,10,15]"
+        :page-sizes="[5, 10, 15]"
         :current-page.sync="listQuery.pageNum"
-        :total="total">
-      </el-pagination>
+        :total="total"
+      ></el-pagination>
     </div>
+
+    <!-- 弹出框：添加/编辑商品属性分类 -->
     <el-dialog
       :title="dialogTitle"
       :visible.sync="dialogVisible"
-      :before-close="handleClose()"
-      width="30%">
-      <el-form ref="productAttrCatForm":model="productAttrCate" :rules="rules" label-width="120px">
+      :before-close="handleClose"
+      width="30%"
+    >
+      <!-- 表单：输入类型名称 -->
+      <el-form ref="productAttrCatForm" :model="productAttrCate" :rules="rules" label-width="120px">
         <el-form-item label="类型名称" prop="name">
           <el-input v-model="productAttrCate.name" auto-complete="off"></el-input>
         </el-form-item>
       </el-form>
+      <!-- 弹窗底部操作按钮 -->
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="handleConfirm('productAttrCatForm')">确 定</el-button>
@@ -84,127 +105,155 @@
     </el-dialog>
   </div>
 </template>
+
 <script>
-  import {fetchList,createProductAttrCate,deleteProductAttrCate,updateProductAttrCate} from '@/api/productAttrCate'
-
-  export default {
-    name: 'productAttrCateList',
-    data() {
-      return {
-        list: null,
-        total: null,
-        listLoading: true,
-        listQuery: {
-          pageNum: 1,
-          pageSize: 5
-        },
-        dialogVisible: false,
-        dialogTitle:'',
-        productAttrCate:{
-          name:'',
-          id:null
-        },
-        rules: {
-          name: [
-            { required: true, message: '请输入类型名称', trigger: 'blur' }
-          ]
-        }
-      }
-    },
-    created() {
-      this.getList();
-    },
-    methods: {
-      getList() {
-        this.listLoading = true;
-        fetchList(this.listQuery).then(response => {
-          this.listLoading = false;
-          this.list = response.data.list;
-          this.total = response.data.total;
-        });
-      },
-      addProductAttrCate() {
-        this.dialogVisible = true;
-        this.dialogTitle = "添加类型";
+/**
+ * 导入商品属性分类相关的 API
+ */
+import {
+  fetchList,
+  createProductAttrCate,
+  deleteProductAttrCate,
+  updateProductAttrCate,
+} from '@/api/productAttrCate';
+
+export default {
+  name: 'productAttrCateList', // 组件名称
+  data() {
+    return {
+      list: null, // 数据列表
+      total: null, // 数据总条数
+      listLoading: true, // 加载状态
+      listQuery: {
+        pageNum: 1,
+        pageSize: 5,
       },
-      handleSizeChange(val) {
-        this.listQuery.pageNum = 1;
-        this.listQuery.pageSize = val;
-        this.getList();
+      dialogVisible: false, // 控制弹窗的显示
+      dialogTitle: '', // 弹窗标题
+      productAttrCate: {
+        name: '',
+        id: null,
       },
-      handleCurrentChange(val) {
-        this.listQuery.pageNum = val;
-        this.getList();
+      rules: {
+        name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
       },
-      handleDelete(index, row) {
-        this.$confirm('是否要删除该品牌', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          deleteProductAttrCate(row.id).then(response=>{
-            this.$message({
-              message: '删除成功',
-              type: 'success',
-              duration:1000
-            });
-            this.getList();
+    };
+  },
+  created() {
+    // 页面加载时获取数据列表
+    this.getList();
+  },
+  methods: {
+    // 获取数据列表
+    getList() {
+      this.listLoading = true;
+      fetchList(this.listQuery).then((response) => {
+        this.listLoading = false;
+        this.list = response.data.list;
+        this.total = response.data.total;
+      });
+    },
+
+    // 添加商品属性分类
+    addProductAttrCate() {
+      this.dialogVisible = true;
+      this.dialogTitle = '添加类型';
+      this.productAttrCate = { name: '', id: null };
+    },
+
+    // 处理分页大小变化
+    handleSizeChange(val) {
+      this.listQuery.pageNum = 1;
+      this.listQuery.pageSize = val;
+      this.getList();
+    },
+
+    // 处理页码变化
+    handleCurrentChange(val) {
+      this.listQuery.pageNum = val;
+      this.getList();
+    },
+
+    // 删除商品属性分类
+    handleDelete(index, row) {
+      this.$confirm('是否要删除该分类？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => {
+        deleteProductAttrCate(row.id).then(() => {
+          this.$message({
+            message: '删除成功',
+            type: 'success',
+            duration: 1000,
           });
+          this.getList();
         });
-      },
-      handleUpdate(index, row) {
-        this.dialogVisible = true;
-        this.dialogTitle = "编辑类型";
-        this.productAttrCate.name = row.name;
-        this.productAttrCate.id = row.id;
-      },
-      getAttrList(index, row) {
-        this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:0}})
-      },
-      getParamList(index, row) {
-        this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:1}})
-      },
-      handleConfirm(formName){
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            let data = new URLSearchParams();
-            data.append("name",this.productAttrCate.name);
-            if(this.dialogTitle==="添加类型"){
-              createProductAttrCate(data).then(response=>{
-                this.$message({
-                  message: '添加成功',
-                  type: 'success',
-                  duration:1000
-                });
-                this.dialogVisible = false;
-                this.getList();
-              });
-            }else{
-              updateProductAttrCate(this.productAttrCate.id,data).then(response=>{
-                this.$message({
-                  message: '修改成功',
-                  type: 'success',
-                  duration:1000
-                });
-                this.dialogVisible = false;
-                this.getList();
-              });
-            }
+      });
+    },
+
+    // 编辑商品属性分类
+    handleUpdate(index, row) {
+      this.dialogVisible = true;
+      this.dialogTitle = '编辑类型';
+      this.productAttrCate.name = row.name;
+      this.productAttrCate.id = row.id;
+    },
+
+    // 跳转到属性列表
+    getAttrList(index, row) {
+      this.$router.push({
+        path: '/pms/productAttrList',
+        query: { cid: row.id, cname: row.name, type: 0 },
+      });
+    },
+
+    // 跳转到参数列表
+    getParamList(index, row) {
+      this.$router.push({
+        path: '/pms/productAttrList',
+        query: { cid: row.id, cname: row.name, type: 1 },
+      });
+    },
+
+    // 确认弹窗提交
+    handleConfirm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          const data = new URLSearchParams();
+          data.append('name', this.productAttrCate.name);
+
+          if (this.dialogTitle === '添加类型') {
+            // 添加类型
+            createProductAttrCate(data).then(() => {
+              this.$message({ message: '添加成功', type: 'success', duration: 1000 });
+              this.dialogVisible = false;
+              this.getList();
+            });
           } else {
-            console.log('error submit!!');
-            return false;
+            // 修改类型
+            updateProductAttrCate(this.productAttrCate.id, data).then(() => {
+              this.$message({ message: '修改成功', type: 'success', duration: 1000 });
+              this.dialogVisible = false;
+              this.getList();
+            });
           }
-        });
-      },
-      handleClose(){
-        if (!this.dialogVisible && this.$refs.productAttrCatForm) {
-          this.$refs.productAttrCatForm.clearValidate()
         }
+      });
+    },
+
+    // 关闭弹窗时清除表单校验
+    handleClose() {
+      if (this.$refs.productAttrCatForm) {
+        this.$refs.productAttrCatForm.clearValidate();
       }
-    }
-  }
+    },
+  },
+};
 </script>
-<style rel="stylesheet/scss" lang="scss" scoped>
-</style>
-
 
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+</style>

src/views/pms/productAttr/productAttrList.vue

@@ -1,219 +1,248 @@
-<template> 
+<template>
+  <!-- 商品属性列表页面 -->
   <div class="app-container">
+    <!-- 操作栏：包含添加按钮 -->
     <el-card class="operate-container" shadow="never">
-
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
-      <el-button
-        class="btn-add"
-        @click="addProductAttr()"
-        size="mini">
-        添加
-      </el-button>
+      <!-- 添加按钮：跳转到添加商品属性页面 -->
+      <el-button class="btn-add" @click="addProductAttr()" size="mini">添加</el-button>
     </el-card>
+
+    <!-- 数据表格区域 -->
     <div class="table-container">
-      <el-table ref="productAttrTable"
-                :data="list"
-                style="width: 100%"
-                @selection-change="handleSelectionChange"
-                v-loading="listLoading"
-                border>
+      <el-table
+        ref="productAttrTable"
+        :data="list"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+        v-loading="listLoading"
+        border
+      >
+        <!-- 多选框 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
+
+        <!-- 编号列 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.id}}</template>
+          <template slot-scope="scope">{{ scope.row.id }}</template>
         </el-table-column>
+
+        <!-- 属性名称列 -->
         <el-table-column label="属性名称" width="140" align="center">
-          <template slot-scope="scope">{{scope.row.name}}</template>
+          <template slot-scope="scope">{{ scope.row.name }}</template>
         </el-table-column>
+
+        <!-- 商品类型列 -->
         <el-table-column label="商品类型" width="140" align="center">
-          <template slot-scope="scope">{{$route.query.cname}}</template>
+          <template slot-scope="scope">{{ $route.query.cname }}</template>
         </el-table-column>
+
+        <!-- 属性是否可选列 -->
         <el-table-column label="属性是否可选" width="120" align="center">
-          <template slot-scope="scope">{{scope.row.selectType|selectTypeFilter}}</template>
+          <template slot-scope="scope">{{ scope.row.selectType | selectTypeFilter }}</template>
         </el-table-column>
+
+        <!-- 属性值录入方式列 -->
         <el-table-column label="属性值的录入方式" width="150" align="center">
-          <template slot-scope="scope">{{scope.row.inputType|inputTypeFilter}}</template>
+          <template slot-scope="scope">{{ scope.row.inputType | inputTypeFilter }}</template>
         </el-table-column>
+
+        <!-- 可选值列表列 -->
         <el-table-column label="可选值列表" align="center">
-          <template slot-scope="scope">{{scope.row.inputList}}</template>
+          <template slot-scope="scope">{{ scope.row.inputList }}</template>
         </el-table-column>
+
+        <!-- 排序列 -->
         <el-table-column label="排序" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.sort}}</template>
+          <template slot-scope="scope">{{ scope.row.sort }}</template>
         </el-table-column>
+
+        <!-- 操作列 -->
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handleUpdate(scope.$index, scope.row)">编辑
-            </el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)">删除
-            </el-button>
+            <!-- 编辑按钮 -->
+            <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
+            <!-- 删除按钮 -->
+            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
+
+    <!-- 批量操作栏 -->
     <div class="batch-operate-container">
-      <el-select
-        size="small"
-        v-model="operateType" placeholder="批量操作">
+      <el-select size="small" v-model="operateType" placeholder="批量操作">
         <el-option
           v-for="item in operates"
           :key="item.value"
           :label="item.label"
-          :value="item.value">
-        </el-option>
+          :value="item.value"
+        ></el-option>
       </el-select>
       <el-button
         style="margin-left: 20px"
         class="search-button"
         @click="handleBatchOperate()"
         type="primary"
-        size="small">
+        size="small"
+      >
         确定
       </el-button>
     </div>
+
+    <!-- 分页组件 -->
     <div class="pagination-container">
       <el-pagination
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        layout="total, sizes,prev, pager, next,jumper"
+        layout="total, sizes, prev, pager, next, jumper"
         :page-size="listQuery.pageSize"
-        :page-sizes="[5,10,15]"
+        :page-sizes="[5, 10, 15]"
         :current-page.sync="listQuery.pageNum"
-        :total="total">
-      </el-pagination>
+        :total="total"
+      ></el-pagination>
     </div>
   </div>
 </template>
+
 <script>
-  import {fetchList, deleteProductAttr} from '@/api/productAttr'
-
-  export default {
-    name: 'productAttrList',
-    data() {
-      return {
-        list: null,
-        total: null,
-        listLoading: true,
-        listQuery: {
-          pageNum: 1,
-          pageSize: 5,
-          type: this.$route.query.type
-        },
-        operateType: null,
-        multipleSelection: [],
-        operates: [
-          {
-            label: "删除",
-            value: "deleteProductAttr"
-          }
-        ]
+/**
+ * 导入商品属性相关 API
+ */
+import { fetchList, deleteProductAttr } from '@/api/productAttr';
+
+export default {
+  name: 'productAttrList', // 组件名称
+  data() {
+    return {
+      list: null, // 商品属性数据列表
+      total: null, // 数据总条数
+      listLoading: true, // 加载状态
+      listQuery: {
+        pageNum: 1,
+        pageSize: 5,
+        type: this.$route.query.type, // 查询参数，来源于路由
+      },
+      operateType: null, // 批量操作类型
+      multipleSelection: [], // 多选的属性集合
+      operates: [
+        { label: '删除', value: 'deleteProductAttr' }, // 批量操作选项
+      ],
+    };
+  },
+  created() {
+    this.getList(); // 页面加载时获取数据列表
+  },
+  methods: {
+    // 获取商品属性列表
+    getList() {
+      this.listLoading = true;
+      fetchList(this.$route.query.cid, this.listQuery).then((response) => {
+        this.listLoading = false;
+        this.list = response.data.list;
+        this.total = response.data.total;
+      });
+    },
+
+    // 添加商品属性
+    addProductAttr() {
+      this.$router.push({
+        path: '/pms/addProductAttr',
+        query: { cid: this.$route.query.cid, type: this.$route.query.type },
+      });
+    },
+
+    // 处理多选操作
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    // 批量操作处理
+    handleBatchOperate() {
+      if (this.multipleSelection.length < 1) {
+        this.$message({
+          message: '请选择至少一条记录',
+          type: 'warning',
+          duration: 1000,
+        });
+        return;
       }
+      if (this.operateType !== 'deleteProductAttr') {
+        this.$message({
+          message: '请选择批量操作类型',
+          type: 'warning',
+          duration: 1000,
+        });
+        return;
+      }
+
+      const ids = this.multipleSelection.map((item) => item.id);
+      this.handleDeleteProductAttr(ids);
     },
-    created() {
+
+    // 页码大小变化
+    handleSizeChange(val) {
+      this.listQuery.pageNum = 1;
+      this.listQuery.pageSize = val;
       this.getList();
     },
-    methods: {
-      getList() {
-        this.listLoading = true;
-        fetchList(this.$route.query.cid, this.listQuery).then(response => {
-          this.listLoading = false;
-          this.list = response.data.list;
-          this.total = response.data.total;
-        });
-      },
-      addProductAttr() {
-        this.$router.push({path:'/pms/addProductAttr',query:{cid:this.$route.query.cid,type:this.$route.query.type}});
-      },
-      handleSelectionChange(val) {
-        this.multipleSelection = val;
-      },
-      handleBatchOperate() {
-        if (this.multipleSelection < 1) {
-          this.$message({
-            message: '请选择一条记录',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
-        }
-        if (this.operateType !== 'deleteProductAttr') {
+
+    // 页码切换
+    handleCurrentChange(val) {
+      this.listQuery.pageNum = val;
+      this.getList();
+    },
+
+    // 跳转到编辑页面
+    handleUpdate(index, row) {
+      this.$router.push({ path: '/pms/updateProductAttr', query: { id: row.id } });
+    },
+
+    // 删除商品属性
+    handleDeleteProductAttr(ids) {
+      this.$confirm('是否要删除选中的属性？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => {
+        const data = new URLSearchParams();
+        data.append('ids', ids);
+        deleteProductAttr(data).then(() => {
           this.$message({
-            message: '请选择批量操作类型',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
-        }
-        let ids = [];
-        for (let i = 0; i < this.multipleSelection.length; i++) {
-          ids.push(this.multipleSelection[i].id);
-        }
-        this.handleDeleteProductAttr(ids);
-      },
-      handleSizeChange(val) {
-        this.listQuery.pageNum = 1;
-        this.listQuery.pageSize = val;
-        this.getList();
-      },
-      handleCurrentChange(val) {
-        this.listQuery.pageNum = val;
-        this.getList();
-      },
-      handleUpdate(index, row) {
-        this.$router.push({path:'/pms/updateProductAttr',query:{id:row.id}});
-      },
-      handleDeleteProductAttr(ids) {
-        this.$confirm('是否要删除该属性', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          let data = new URLSearchParams();
-          data.append("ids", ids);
-          deleteProductAttr(data).then(response => {
-            this.$message({
-              message: '删除成功',
-              type: 'success',
-              duration: 1000
-            });
-            this.getList();
+            message: '删除成功',
+            type: 'success',
+            duration: 1000,
           });
+          this.getList();
         });
-      },
-      handleDelete(index, row) {
-        let ids = [];
-        ids.push(row.id);
-        this.handleDeleteProductAttr(ids);
-      },
+      });
     },
-    filters: {
-      inputTypeFilter(value) {
-        if (value === 1) {
-          return '从列表中选取';
-        } else {
-          return '手工录入'
-        }
-      },
-      selectTypeFilter(value) {
-        if (value === 1) {
-          return '单选';
-        } else if (value === 2) {
-          return '多选';
-        } else {
-          return '唯一'
-        }
-      },
-    }
-  }
-</script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+    // 删除单个商品属性
+    handleDelete(index, row) {
+      const ids = [row.id];
+      this.handleDeleteProductAttr(ids);
+    },
+  },
+  filters: {
+    // 过滤器：属性值的录入方式
+    inputTypeFilter(value) {
+      return value === 1 ? '从列表中选取' : '手工录入';
+    },
+    // 过滤器：属性是否可选
+    selectTypeFilter(value) {
+      if (value === 1) return '单选';
+      if (value === 2) return '多选';
+      return '唯一';
+    },
+  },
+};
+</script>
 
+<style scoped>
+/* 自定义样式区域 */
+.app-container {
+  padding: 20px;
+}
 </style>
-
-

src/views/pms/productAttr/updateProductAttr.vue

@@ -1,15 +1,20 @@
 <template>
-  <product-attr-detail :is-edit='true'></product-attr-detail>
+  <!-- 引入商品属性详情组件，编辑模式下展示 -->
+  <product-attr-detail :is-edit="true"></product-attr-detail>
 </template>
 
 <script>
-  import ProductAttrDetail from './components/ProductAttrDetail'
+  // 引入商品属性详情组件
+  import ProductAttrDetail from './components/ProductAttrDetail';
+
   export default {
-    name: 'updateProductAttr',
-    components: { ProductAttrDetail }
-  }
+    name: 'updateProductAttr', // 组件名称
+    components: {
+      ProductAttrDetail, // 注册 ProductAttrDetail 组件
+    },
+  };
 </script>
 
 <style scoped>
-
+/* scoped 表示样式只会应用于当前组件 */
 </style>

src/views/pms/productCate/add.vue

@@ -1,14 +1,20 @@
-<template> 
-  <product-cate-detail :is-edit='false'></product-cate-detail>
+<template>
+  <!-- 渲染分类详情组件，is-edit 为 false 表示“添加模式” -->
+  <product-cate-detail :is-edit="false"></product-cate-detail>
 </template>
+
 <script>
-  import ProductCateDetail from './components/ProductCateDetail'
+  // 导入分类详情组件
+  import ProductCateDetail from './components/ProductCateDetail';
+
   export default {
-    name: 'addProductCate',
-    components: { ProductCateDetail }
-  }
+    name: 'addProductCate', // 组件名称
+    components: {
+      ProductCateDetail, // 注册子组件 ProductCateDetail
+    },
+  };
 </script>
+
 <style>
+/* 样式作用域：默认留空，可以根据需要添加样式 */
 </style>
-
-

src/views/pms/productCate/components/ProductCateDetail.vue

@@ -1,15 +1,19 @@
 <template>
+  <!-- 分类详情表单，使用 Element UI -->
   <el-card class="form-container" shadow="never">
     <el-form :model="productCate"
              :rules="rules"
              ref="productCateFrom"
              label-width="150px">
+
+      <!-- 分类名称输入框 -->
       <el-form-item label="分类名称：" prop="name">
         <el-input v-model="productCate.name"></el-input>
       </el-form-item>
+
+      <!-- 上级分类选择框 -->
       <el-form-item label="上级分类：">
-        <el-select v-model="productCate.parentId"
-                   placeholder="请选择分类">
+        <el-select v-model="productCate.parentId" placeholder="请选择分类">
           <el-option
             v-for="item in selectProductCateList"
             :key="item.id"
@@ -18,47 +22,67 @@
           </el-option>
         </el-select>
       </el-form-item>
+
+      <!-- 数量单位输入框 -->
       <el-form-item label="数量单位：">
         <el-input v-model="productCate.productUnit"></el-input>
       </el-form-item>
+
+      <!-- 排序输入框 -->
       <el-form-item label="排序：">
         <el-input v-model="productCate.sort"></el-input>
       </el-form-item>
+
+      <!-- 是否显示单选按钮 -->
       <el-form-item label="是否显示：">
         <el-radio-group v-model="productCate.showStatus">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
         </el-radio-group>
       </el-form-item>
+
+      <!-- 是否显示在导航栏 -->
       <el-form-item label="是否显示在导航栏：">
         <el-radio-group v-model="productCate.navStatus">
           <el-radio :label="1">是</el-radio>
           <el-radio :label="0">否</el-radio>
         </el-radio-group>
       </el-form-item>
+
+      <!-- 分类图标上传组件 -->
       <el-form-item label="分类图标：">
         <single-upload v-model="productCate.icon"></single-upload>
       </el-form-item>
+
+      <!-- 筛选属性列表 -->
       <el-form-item v-for="(filterProductAttr, index) in filterProductAttrList"
                     :label="index | filterLabelFilter"
-                    :key="filterProductAttr.key"
-      >
+                    :key="filterProductAttr.key">
         <el-cascader
           clearable
           v-model="filterProductAttr.value"
           :options="filterAttrs">
         </el-cascader>
+        <!-- 删除按钮 -->
         <el-button style="margin-left: 20px" @click.prevent="removeFilterAttr(filterProductAttr)">删除</el-button>
       </el-form-item>
+
+      <!-- 新增筛选属性按钮 -->
       <el-form-item>
         <el-button size="small" type="primary" @click="handleAddFilterAttr()">新增</el-button>
       </el-form-item>
+
+      <!-- 关键词输入框 -->
       <el-form-item label="关键词：">
         <el-input v-model="productCate.keywords"></el-input>
       </el-form-item>
+
+      <!-- 分类描述输入框 -->
       <el-form-item label="分类描述：">
         <el-input type="textarea" :autosize="true" v-model="productCate.description"></el-input>
       </el-form-item>
+
+      <!-- 提交和重置按钮 -->
       <el-form-item>
         <el-button type="primary" @click="onSubmit('productCateFrom')">提交</el-button>
         <el-button v-if="!isEdit" @click="resetForm('productCateFrom')">重置</el-button>
@@ -68,6 +92,7 @@
 </template>
 
 <script>
+  // API 引入
   import {fetchList, createProductCate, updateProductCate, getProductCate} from '@/api/productCate';
   import {fetchListWithAttr} from '@/api/productAttrCate';
   import {getProductAttrInfo} from '@/api/productAttr';
@@ -85,9 +110,10 @@
     sort: 0,
     productAttributeIdList: []
   };
+
   export default {
     name: "ProductCateDetail",
-    components: {SingleUpload},
+    components: { SingleUpload },
     props: {
       isEdit: {
         type: Boolean,
@@ -97,168 +123,114 @@
     data() {
       return {
         productCate: Object.assign({}, defaultProductCate),
-        selectProductCateList: [],
+        selectProductCateList: [], // 上级分类列表
         rules: {
           name: [
-            {required: true, message: '请输入品牌名称', trigger: 'blur'},
-            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+            { required: true, message: '请输入品牌名称', trigger: 'blur' },
+            { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' }
           ]
         },
-        filterAttrs: [],
-        filterProductAttrList: [{
-          value: []
-        }]
-      }
+        filterAttrs: [], // 筛选属性列表
+        filterProductAttrList: [{ value: [] }] // 已选筛选属性
+      };
     },
     created() {
       if (this.isEdit) {
+        // 编辑模式下，获取分类详情数据
         getProductCate(this.$route.query.id).then(response => {
           this.productCate = response.data;
         });
+        // 获取筛选属性数据
         getProductAttrInfo(this.$route.query.id).then(response => {
           if (response.data != null && response.data.length > 0) {
-            this.filterProductAttrList = [];
-            for (let i = 0; i < response.data.length; i++) {
-              this.filterProductAttrList.push({
-                key: Date.now() + i,
-                value: [response.data[i].attributeCategoryId, response.data[i].attributeId]
-              })
-            }
+            this.filterProductAttrList = response.data.map((item, index) => ({
+              key: Date.now() + index,
+              value: [item.attributeCategoryId, item.attributeId]
+            }));
           }
         });
-      } else {
-        this.productCate = Object.assign({}, defaultProductCate);
       }
       this.getSelectProductCateList();
       this.getProductAttrCateList();
     },
     methods: {
+      // 获取上级分类列表
       getSelectProductCateList() {
-        fetchList(0, {pageSize: 100, pageNum: 1}).then(response => {
+        fetchList(0, { pageSize: 100, pageNum: 1 }).then(response => {
           this.selectProductCateList = response.data.list;
-          this.selectProductCateList.unshift({id: 0, name: '无上级分类'});
+          this.selectProductCateList.unshift({ id: 0, name: '无上级分类' });
         });
       },
+      // 获取筛选属性分类及其属性
       getProductAttrCateList() {
         fetchListWithAttr().then(response => {
-          let list = response.data;
-          for (let i = 0; i < list.length; i++) {
-            let productAttrCate = list[i];
-            let children = [];
-            if (productAttrCate.productAttributeList != null && productAttrCate.productAttributeList.length > 0) {
-              for (let j = 0; j < productAttrCate.productAttributeList.length; j++) {
-                children.push({
-                  label: productAttrCate.productAttributeList[j].name,
-                  value: productAttrCate.productAttributeList[j].id
-                })
-              }
-            }
-            this.filterAttrs.push({label: productAttrCate.name, value: productAttrCate.id, children: children});
-          }
+          this.filterAttrs = response.data.map(category => ({
+            label: category.name,
+            value: category.id,
+            children: category.productAttributeList.map(attr => ({
+              label: attr.name,
+              value: attr.id
+            }))
+          }));
         });
       },
-      getProductAttributeIdList() {
-        //获取选中的筛选商品属性
-        let productAttributeIdList = [];
-        for (let i = 0; i < this.filterProductAttrList.length; i++) {
-          let item = this.filterProductAttrList[i];
-          if (item.value !== null && item.value.length === 2) {
-            productAttributeIdList.push(item.value[1]);
-          }
-        }
-        return productAttributeIdList;
-      },
+      // 提交表单数据
       onSubmit(formName) {
-        this.$refs[formName].validate((valid) => {
+        this.$refs[formName].validate(valid => {
           if (valid) {
-            this.$confirm('是否提交数据', '提示', {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning'
-            }).then(() => {
+            this.$confirm('是否提交数据', '提示', { type: 'warning' }).then(() => {
+              this.productCate.productAttributeIdList = this.getProductAttributeIdList();
               if (this.isEdit) {
-                this.productCate.productAttributeIdList = this.getProductAttributeIdList();
-                updateProductCate(this.$route.query.id, this.productCate).then(response => {
-                  this.$message({
-                    message: '修改成功',
-                    type: 'success',
-                    duration: 1000
-                  });
+                updateProductCate(this.$route.query.id, this.productCate).then(() => {
+                  this.$message.success('修改成功');
                   this.$router.back();
                 });
               } else {
-                this.productCate.productAttributeIdList = this.getProductAttributeIdList();
-                createProductCate(this.productCate).then(response => {
-                  this.$refs[formName].resetFields();
+                createProductCate(this.productCate).then(() => {
                   this.resetForm(formName);
-                  this.$message({
-                    message: '提交成功',
-                    type: 'success',
-                    duration: 1000
-                  });
+                  this.$message.success('提交成功');
                 });
               }
             });
-
           } else {
-            this.$message({
-              message: '验证失败',
-              type: 'error',
-              duration: 1000
-            });
-            return false;
+            this.$message.error('验证失败');
           }
         });
       },
+      // 重置表单
       resetForm(formName) {
         this.$refs[formName].resetFields();
         this.productCate = Object.assign({}, defaultProductCate);
-        this.getSelectProductCateList();
-        this.filterProductAttrList = [{
-          value: []
-        }];
       },
-      removeFilterAttr(productAttributeId) {
-        if (this.filterProductAttrList.length === 1) {
-          this.$message({
-            message: '至少要留一个',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
-        }
-        var index = this.filterProductAttrList.indexOf(productAttributeId);
-        if (index !== -1) {
-          this.filterProductAttrList.splice(index, 1)
-        }
+      // 获取选中的筛选属性ID列表
+      getProductAttributeIdList() {
+        return this.filterProductAttrList
+          .filter(item => item.value.length === 2)
+          .map(item => item.value[1]);
+      },
+      // 删除筛选属性
+      removeFilterAttr(filterAttr) {
+        const index = this.filterProductAttrList.indexOf(filterAttr);
+        if (index > -1) this.filterProductAttrList.splice(index, 1);
       },
+      // 添加筛选属性
       handleAddFilterAttr() {
-        if (this.filterProductAttrList.length === 3) {
-          this.$message({
-            message: '最多添加三个',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
+        if (this.filterProductAttrList.length < 3) {
+          this.filterProductAttrList.push({ value: [], key: Date.now() });
+        } else {
+          this.$message.warning('最多添加三个');
         }
-        this.filterProductAttrList.push({
-          value: null,
-          key: Date.now()
-        });
       }
     },
     filters: {
+      // 自定义过滤器，为第一个筛选属性设置标签
       filterLabelFilter(index) {
-        if (index === 0) {
-          return '筛选属性：';
-        } else {
-          return '';
-        }
+        return index === 0 ? '筛选属性：' : '';
       }
     }
-  }
+  };
 </script>
 
 <style scoped>
-
+/* 本地样式，样式只对当前组件生效 */
 </style>

src/views/pms/productCate/index.vue

@@ -1,35 +1,53 @@
 <template>
+  <!-- 页面主容器 -->
   <div class="app-container">
+    <!-- 操作栏，包含“添加”按钮 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
       <el-button
         class="btn-add"
-        @click="handleAddProductCate()"
+        @click="handleAddProductCate"
         size="mini">
         添加
       </el-button>
     </el-card>
+
+    <!-- 表格数据容器 -->
     <div class="table-container">
-      <el-table ref="productCateTable"
-                style="width: 100%"
-                :data="list"
-                v-loading="listLoading" border>
+      <el-table
+        ref="productCateTable"
+        style="width: 100%"
+        :data="list"
+        v-loading="listLoading"
+        border>
+
+        <!-- 列：编号 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.id}}</template>
+          <template slot-scope="scope">{{ scope.row.id }}</template>
         </el-table-column>
+
+        <!-- 列：分类名称 -->
         <el-table-column label="分类名称" align="center">
-          <template slot-scope="scope">{{scope.row.name}}</template>
+          <template slot-scope="scope">{{ scope.row.name }}</template>
         </el-table-column>
+
+        <!-- 列：级别 -->
         <el-table-column label="级别" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.level | levelFilter}}</template>
+          <template slot-scope="scope">{{ scope.row.level | levelFilter }}</template>
         </el-table-column>
+
+        <!-- 列：商品数量 -->
         <el-table-column label="商品数量" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.productCount }}</template>
+          <template slot-scope="scope">{{ scope.row.productCount }}</template>
         </el-table-column>
+
+        <!-- 列：数量单位 -->
         <el-table-column label="数量单位" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.productUnit }}</template>
+          <template slot-scope="scope">{{ scope.row.productUnit }}</template>
         </el-table-column>
+
+        <!-- 列：导航栏显示状态 -->
         <el-table-column label="导航栏" width="100" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -40,6 +58,8 @@
             </el-switch>
           </template>
         </el-table-column>
+
+        <!-- 列：是否显示 -->
         <el-table-column label="是否显示" width="100" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -50,9 +70,13 @@
             </el-switch>
           </template>
         </el-table-column>
+
+        <!-- 列：排序 -->
         <el-table-column label="排序" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.sort }}</template>
+          <template slot-scope="scope">{{ scope.row.sort }}</template>
         </el-table-column>
+
+        <!-- 列：设置操作 -->
         <el-table-column label="设置" width="200" align="center">
           <template slot-scope="scope">
             <el-button
@@ -66,6 +90,8 @@
             </el-button>
           </template>
         </el-table-column>
+
+        <!-- 列：操作 -->
         <el-table-column label="操作" width="200" align="center">
           <template slot-scope="scope">
             <el-button
@@ -81,14 +107,16 @@
         </el-table-column>
       </el-table>
     </div>
+
+    <!-- 分页组件 -->
     <div class="pagination-container">
       <el-pagination
         background
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        layout="total, sizes,prev, pager, next,jumper"
+        layout="total, sizes, prev, pager, next, jumper"
         :page-size="listQuery.pageSize"
-        :page-sizes="[5,10,15]"
+        :page-sizes="[5, 10, 15]"
         :current-page.sync="listQuery.pageNum"
         :total="total">
       </el-pagination>
@@ -97,44 +125,46 @@
 </template>
 
 <script>
-  import {fetchList,deleteProductCate,updateShowStatus,updateNavStatus} from '@/api/productCate'
+  // API 引入
+  import {
+    fetchList,
+    deleteProductCate,
+    updateShowStatus,
+    updateNavStatus
+  } from '@/api/productCate';
 
   export default {
     name: "productCateList",
     data() {
       return {
-        list: null,
-        total: null,
-        listLoading: true,
-        listQuery: {
+        list: null, // 数据列表
+        total: null, // 数据总数
+        listLoading: true, // 加载状态
+        listQuery: { // 查询条件
           pageNum: 1,
           pageSize: 5
         },
-        parentId: 0
-      }
+        parentId: 0 // 当前父级分类ID
+      };
     },
     created() {
       this.resetParentId();
       this.getList();
     },
     watch: {
-      $route(route) {
+      // 监听路由变化，重新获取列表
+      $route() {
         this.resetParentId();
         this.getList();
       }
     },
     methods: {
-      resetParentId(){
+      // 重置父级分类ID
+      resetParentId() {
         this.listQuery.pageNum = 1;
-        if (this.$route.query.parentId != null) {
-          this.parentId = this.$route.query.parentId;
-        } else {
-          this.parentId = 0;
-        }
-      },
-      handleAddProductCate() {
-        this.$router.push('/pms/addProductCate');
+        this.parentId = this.$route.query.parentId || 0;
       },
+      // 获取数据列表
       getList() {
         this.listLoading = true;
         fetchList(this.parentId, this.listQuery).then(response => {
@@ -143,88 +173,77 @@
           this.total = response.data.total;
         });
       },
-      handleSizeChange(val) {
-        this.listQuery.pageNum = 1;
-        this.listQuery.pageSize = val;
-        this.getList();
-      },
-      handleCurrentChange(val) {
-        this.listQuery.pageNum = val;
-        this.getList();
+      // 添加分类
+      handleAddProductCate() {
+        this.$router.push('/pms/addProductCate');
       },
+      // 修改导航栏状态
       handleNavStatusChange(index, row) {
         let data = new URLSearchParams();
-        let ids=[];
-        ids.push(row.id)
-        data.append('ids',ids);
-        data.append('navStatus',row.navStatus);
-        updateNavStatus(data).then(response=>{
-          this.$message({
-            message: '修改成功',
-            type: 'success',
-            duration: 1000
-          });
+        data.append('ids', row.id);
+        data.append('navStatus', row.navStatus);
+        updateNavStatus(data).then(() => {
+          this.$message.success('修改成功');
         });
       },
+      // 修改显示状态
       handleShowStatusChange(index, row) {
         let data = new URLSearchParams();
-        let ids=[];
-        ids.push(row.id)
-        data.append('ids',ids);
-        data.append('showStatus',row.showStatus);
-        updateShowStatus(data).then(response=>{
-          this.$message({
-            message: '修改成功',
-            type: 'success',
-            duration: 1000
-          });
+        data.append('ids', row.id);
+        data.append('showStatus', row.showStatus);
+        updateShowStatus(data).then(() => {
+          this.$message.success('修改成功');
         });
       },
+      // 查看下级分类
       handleShowNextLevel(index, row) {
-        this.$router.push({path: '/pms/productCate', query: {parentId: row.id}})
-      },
-      handleTransferProduct(index, row) {
-        console.log('handleAddProductCate');
+        this.$router.push({ path: '/pms/productCate', query: { parentId: row.id } });
       },
+      // 编辑分类
       handleUpdate(index, row) {
-        this.$router.push({path:'/pms/updateProductCate',query:{id:row.id}});
+        this.$router.push({ path: '/pms/updateProductCate', query: { id: row.id } });
       },
+      // 删除分类
       handleDelete(index, row) {
-        this.$confirm('是否要删除该品牌', '提示', {
+        this.$confirm('是否要删除该分类？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
-          deleteProductCate(row.id).then(response => {
-            this.$message({
-              message: '删除成功',
-              type: 'success',
-              duration: 1000
-            });
+          deleteProductCate(row.id).then(() => {
+            this.$message.success('删除成功');
             this.getList();
           });
         });
+      },
+      // 分页大小变更
+      handleSizeChange(val) {
+        this.listQuery.pageSize = val;
+        this.getList();
+      },
+      // 当前页码变更
+      handleCurrentChange(val) {
+        this.listQuery.pageNum = val;
+        this.getList();
+      },
+      // 商品转移操作
+      handleTransferProduct() {
+        this.$message.info('功能待实现');
       }
     },
     filters: {
+      // 级别过滤器
       levelFilter(value) {
-        if (value === 0) {
-          return '一级';
-        } else if (value === 1) {
-          return '二级';
-        }
+        return value === 0 ? '一级' : '二级';
       },
+      // 禁用下级按钮过滤器
       disableNextLevel(value) {
-        if (value === 0) {
-          return false;
-        } else {
-          return true;
-        }
+        return value !== 0;
       }
     }
-  }
+  };
 </script>
 
 <style scoped>
-
+/* 样式留空，按需添加 */
 </style>

src/views/pms/productCate/update.vue

@@ -1,14 +1,20 @@
-<template> 
-  <product-cate-detail :is-edit='true'></product-cate-detail>
+<template>
+  <!-- 渲染分类详情组件，is-edit 为 true 表示“编辑模式” -->
+  <product-cate-detail :is-edit="true"></product-cate-detail>
 </template>
+
 <script>
-  import ProductCateDetail from './components/ProductCateDetail'
+  // 导入分类详情组件
+  import ProductCateDetail from './components/ProductCateDetail';
+
   export default {
-    name: 'updateProductCate',
-    components: { ProductCateDetail }
-  }
+    name: 'updateProductCate', // 组件名称，用于编辑商品分类页面
+    components: {
+      ProductCateDetail, // 注册子组件 ProductCateDetail
+    },
+  };
 </script>
+
 <style>
+/* 样式部分留空，便于后续根据页面需求自定义样式 */
 </style>
-
-