From 78e2ee06a85012ab104d8afbe7607d67c098d368 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=86=E5=8D=8E?= <2546141039@qq.com>
Date: Sun, 27 Apr 2025 22:50:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=B5=8B=E8=AF=953?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 superMarket-frontend/src/views/Home.vue       |   69 +-
 superMarket-frontend/src/views/Login.vue      |  364 ++---
 superMarket-frontend/src/views/index.vue      |  296 ++--
 .../detail_store_goods_in/List.vue            |  713 ++++++----
 .../detail_store_goods_in/notice/List.vue     |  526 ++++---
 .../detail_store_goods_out/List.vue           |  731 ++++++----
 .../detail_store_goods_out/notice/List.vue    |  297 +++-
 .../views/inventory_management/store/List.vue |  133 +-
 .../store/StorageSituation.vue                |  400 ++++--
 .../inventory_management/supplier/List.vue    |  475 ++++---
 .../views/member_management/member/List.vue   |  792 +++++++----
 .../src/views/personal/Edit_pwd.vue           |  234 +--
 .../src/views/personal/Information.vue        |  296 ++--
 .../views/personnel_management/dept/List.vue  |  208 ++-
 .../personnel_management/employee/List.vue    | 1179 +++++++++------
 .../exchange_point_products_records/List.vue  |  323 +++--
 .../views/sale_management/sale_cmd/List.vue   | 1262 +++++++++++------
 .../sale_management/sale_records/List.vue     |  386 +++--
 .../src/views/system/menu/List.vue            |  231 +--
 .../src/views/system/role/List.vue            |  555 +++++---
 20 files changed, 6080 insertions(+), 3390 deletions(-)

diff --git a/superMarket-frontend/src/views/Home.vue b/superMarket-frontend/src/views/Home.vue
index dfac023..70f4464 100644
--- a/superMarket-frontend/src/views/Home.vue
+++ b/superMarket-frontend/src/views/Home.vue
@@ -1,38 +1,57 @@
-
 <template>
+    <!-- 根容器 -->
     <div>
+        <!-- 面包屑导航，使用 "/" 作为分隔符 -->
         <el-breadcrumb separator="/">
+            <!-- 面包屑的首页项 -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
-        </el-breadcrumb><br />
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
 
+        <!-- 具有 id 为 home_bg 的 div 容器，用于展示欢迎信息和背景图片 -->
         <div id="home_bg">
-            <h1 style="color: white;font-size: 28px;text-align: center;width: 1024px;">欢迎访问超市管理系统</h1>
+            <!-- 一级标题，设置文本颜色为白色，字体大小为 28px，文本居中对齐，宽度为 1024px -->
+            <h1 style="color: white;font-size: 28px;text-align: center;width: 1024px;">欢迎访问电商管理系统</h1>
         </div>
 
     </div>
 </template>
 <script>
-
-export default {
-    data() {
-        return {
-        };
-    },
-    methods: {
-
-    },
-    mounted() {
-    },
-};
+    // 导出默认的 Vue 组件配置对象
+    export default {
+        // 定义组件的数据
+        data() {
+            return {
+                // 目前数据对象为空，没有定义任何响应式数据
+            };
+        },
+        // 定义组件的方法
+        methods: {
+            // 目前方法对象为空，没有定义任何方法
+        },
+        // 组件挂载完成后的钩子函数
+        mounted() {
+            // 目前该钩子函数为空，没有在组件挂载后执行任何操作
+        },
+    };
 </script>
 <style>
-#home_bg {
-    top: 0;
-    left: 0;
-    overflow-y: auto;
-    height: 80vh;
-    background-image: url("../assets/55.png");
-    background-repeat: no-repeat;
-  text-align: center;
-}
-</style>
+    /* 选择 id 为 home_bg 的元素进行样式设置 */
+    #home_bg {
+        /* 元素顶部与父元素顶部对齐 */
+        top: 0;
+        /* 元素左侧与父元素左侧对齐 */
+        left: 0;
+        /* 当内容超过容器高度时，显示垂直滚动条 */
+        overflow-y: auto;
+        /* 设置容器高度为视口高度的 80% */
+        height: 80vh;
+        /* 设置背景图片为指定路径下的 55.png 文件 */
+        background-image: url("../assets/55.png");
+        /* 背景图片不重复显示 */
+        background-repeat: no-repeat;
+        /* 文本居中对齐 */
+        text-align: center;
+    }
+</style>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/Login.vue b/superMarket-frontend/src/views/Login.vue
index c4467e8..e1ed5b7 100644
--- a/superMarket-frontend/src/views/Login.vue
+++ b/superMarket-frontend/src/views/Login.vue
@@ -1,185 +1,221 @@
 <template>
+    <!-- 页面的根容器，类名为 container -->
     <div class="container">
 
-      <div style="width: 25%; display: flex;background-color: rgba(255,255,255,0.9);">
-        <div style="flex: 1;width: 50%;padding: 40px;display: flex;flex-direction: column;justify-content: center;" >
-          <div style="text-align: center; font-size: 28px; margin-bottom: 20px; color: #0481de;font-weight: bold;">超 市 管 理 系 统</div>
-          <br>
-          <el-form :model="loginForm" ref="loginForm" class="demo-ruleForm">
-            <el-form-item prop="username">
-              <el-row>
-                <el-col :span="2" style="text-align: right">
-                  <i
-                      class="iconfont icon-r-user1"
-                      style="font-size: 26px;color: grey;"
-                  >
-                  </i>
-                </el-col>
-                <el-col
-                    :span="22"
-                    style="text-align: left; padding-left: 10px"
-                >
-                  <el-input
-                      v-model="loginForm.username"
-                      placeholder="账号"
-                  ></el-input>
-                </el-col>
-              </el-row>
-            </el-form-item>
+        <!-- 用于登录表单的容器，宽度占比 25%，使用 flex 布局，背景颜色为半透明白色 -->
+        <div style="width: 25%; display: flex;background-color: rgba(255,255,255,0.9);">
+            <!-- 内部容器，flex 占比为 1，宽度 50%，内边距 40px，使用 flex 列布局，内容垂直居中 -->
+            <div style="flex: 1;width: 50%;padding: 40px;display: flex;flex-direction: column;justify-content: center;" >
+                <!-- 显示系统名称的文本，居中对齐，字体大小 28px，颜色为 #0481de，加粗 -->
+                <div style="text-align: center; font-size: 28px; margin-bottom: 20px; color: #0481de;font-weight: bold;">电 商 管 理 系 统</div>
+                <!-- 换行 -->
+                <br>
+                <!-- 表单组件，绑定数据到 loginForm，引用为 loginForm，类名为 demo-ruleForm -->
+                <el-form :model="loginForm" ref="loginForm" class="demo-ruleForm">
+                    <!-- 账号表单项 -->
+                    <el-form-item prop="username">
+                        <!-- 行布局 -->
+                        <el-row>
+                            <!-- 左侧列，占 2 列宽度，文本右对齐 -->
+                            <el-col :span="2" style="text-align: right">
+                                <!-- 显示用户图标，字体大小 26px，颜色为灰色 -->
+                                <i
+                                    class="iconfont icon-r-user1"
+                                    style="font-size: 26px;color: grey;"
+                                >
+                                </i>
+                            </el-col>
+                            <!-- 右侧列，占 22 列宽度，文本左对齐，左侧内边距 10px -->
+                            <el-col
+                                :span="22"
+                                style="text-align: left; padding-left: 10px"
+                            >
+                                <!-- 输入框，双向绑定到 loginForm 的 username 属性，用于输入账号 -->
+                                <el-input
+                                    v-model="loginForm.username"
+                                    placeholder="账号"
+                                ></el-input>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
 
-            <el-form-item prop="password">
-              <el-row>
-                <el-col :span="2" style="text-align: right">
-                  <i
-                      class="iconfont icon-r-lock"
-                      style="font-size: 26px;color: grey;"
-                  >
-                  </i>
-                </el-col>
-                <el-col
-                    :span="22"
-                    style="text-align: left; padding-left: 10px"
-                >
-                  <el-input
-                      type="password"
-                      v-model="loginForm.password"
-                      placeholder="密码"
-                  ></el-input>
-                </el-col>
-              </el-row>
-            </el-form-item>
-            <br>
-            <el-form-item>
-              <el-button
-                  style="font-size: 18px;width: 100%"
-                  type="primary"
-                  @click="submitForm('loginForm')"
-              >
-                登录</el-button
-              >
-            </el-form-item>
-          </el-form>
-        </div>
+                    <!-- 密码表单项 -->
+                    <el-form-item prop="password">
+                        <!-- 行布局 -->
+                        <el-row>
+                            <!-- 左侧列，占 2 列宽度，文本右对齐 -->
+                            <el-col :span="2" style="text-align: right">
+                                <!-- 显示锁图标，字体大小 26px，颜色为灰色 -->
+                                <i
+                                    class="iconfont icon-r-lock"
+                                    style="font-size: 26px;color: grey;"
+                                >
+                                </i>
+                            </el-col>
+                            <!-- 右侧列，占 22 列宽度，文本左对齐，左侧内边距 10px -->
+                            <el-col
+                                :span="22"
+                                style="text-align: left; padding-left: 10px"
+                            >
+                                <!-- 密码输入框，双向绑定到 loginForm 的 password 属性，用于输入密码 -->
+                                <el-input
+                                    type="password"
+                                    v-model="loginForm.password"
+                                    placeholder="密码"
+                                ></el-input>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                    <!-- 换行 -->
+                    <br>
+                    <!-- 提交按钮表单项 -->
+                    <el-form-item>
+                        <!-- 提交按钮，字体大小 18px，宽度 100%，类型为 primary，点击触发 submitForm 方法 -->
+                        <el-button
+                            style="font-size: 18px;width: 100%"
+                            type="primary"
+                            @click="submitForm('loginForm')"
+                        >
+                            登录
+                        </el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
 
 
 
-      </div>
+        </div>
 
     </div>
 </template>
 <style>
+    /* 根容器样式，高度为视口高度 100vh，隐藏溢出内容，设置背景图片，使用 flex 布局，内容垂直水平居中，文本颜色为 #666 */
+   .container {
+        height: 100vh;
+        overflow: hidden;
+        background-image: url("../assets/bg1.png");
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #666;
+    }
+    /* 具有 id 为 login 的元素样式，固定定位，覆盖整个页面，隐藏垂直溢出内容，设置背景图片 */
+    #login {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        overflow-y: hidden;
+        height: 100%;
+        background: url("../assets/img/01.jpg") center top / cover no-repeat;
+    }
 
+    /* 登录表单样式，白色背景，宽度 400px，高度 280px，居中显示，文本居中，上内边距 10px，边框样式、颜色和圆角设置，透明度 0.9 */
+   .loginForm {
+        background-color: white;
+        width: 400px;
+        height: 280px;
+        margin: 150px auto;
+        text-align: center;
+        padding-top: 10px;
+        border-color: #ffffff;
+        border-style: solid;
+        border-radius: 15px;
+        opacity: 0.9;
+    }
 
-.container {
-  height: 100vh;
-  overflow: hidden;
-  /*background-color: #005aff;*/
-  background-image: url("../assets/bg1.png");
-  background-size: 100% 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #666;
-}
-#login {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    overflow-y: hidden;
-    height: 100%;
-    background: url("../assets/img/01.jpg") center top / cover no-repeat;
-}
-
-.loginForm {
-    background-color: white;
-    width: 400px;
-    height: 280px;
-    margin: 150px auto;
-    text-align: center;
-    padding-top: 10px;
-    border-color: #ffffff;
-    border-style: solid;
-    border-radius: 15px;
-    opacity: 0.9;
-}
+    /* 登录表单内输入框样式，宽度 260px */
+   .loginForm input {
+        width: 260px;
+    }
 
-.loginForm input {
-    width: 260px;
-}
+    /* h3 标签样式，上下外边距 10px */
+    h3 {
+        margin: 10px 0;
+    }
 
-h3 {
-    margin: 10px 0;
-}
-
-.loginForm button {
-    margin-right: 40px;
-}
+    /* 登录表单内按钮样式，右侧外边距 40px */
+   .loginForm button {
+        margin-right: 40px;
+    }
 </style>
 <script>
-import { ajaxPost, popup } from "@/assets/js/common";
-import Cookies from "js-cookie";
+    // 导入通用的 ajaxPost 函数和弹出提示框函数
+    import { ajaxPost, popup } from "@/assets/js/common";
+    // 导入 Cookies 库
+    import Cookies from "js-cookie";
 
-export default {
-    data() {
-        return {
-            loginForm: {
-                username: "",
-                password: "",
+    export default {
+        // 组件的数据
+        data() {
+            return {
+                // 登录表单数据，包含账号和密码字段
+                loginForm: {
+                    username: "",
+                    password: "",
+                },
+                // 表单验证规则，账号必填，密码必填且长度在 5 到 8 位之间
+                rules: {
+                    username: [
+                        {
+                            required: true,
+                            message: "账号不能为空",
+                            trigger: "blur",
+                        },
+                    ],
+                    password: [
+                        {
+                            required: true,
+                            message: "密码不能为空",
+                            trigger: "blur",
+                        },
+                        {
+                            min: 6,
+                            max: 8,
+                            message: "密码长度为 5-8 位",
+                            trigger: "blur",
+                        },
+                    ],
+                },
+            };
+        },
+        // 组件的方法
+        methods: {
+            // 提交表单的方法，验证表单数据，通过后发送登录请求，根据响应处理登录结果
+            submitForm(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        ajaxPost("/login", this.loginForm).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 登录成功，设置 token 和 employee 的 cookie，有效期为 1/48 天
+                                Cookies.set("token", res.data.token, {
+                                    expires: 1 / 48,
+                                });
+                                Cookies.set(
+                                    "employee",
+                                    JSON.stringify(res.data.employee),
+                                    { expires: 1 / 48 }
+                                );
+                                // 弹出登录成功提示，跳转到首页
+                                popup("登录成功，请稍等...");
+                                this.$router.push("/index");
+                            } else {
+                                // 登录失败，弹出错误提示
+                                popup(res.msg, "warning");
+                            }
+                        });
+                    } else {
+                        // 表单验证失败，弹出错误提示
+                        popup("账号或密码格式不正确！", "error");
+                    }
+                });
             },
-            rules: {
-                username: [
-                    {
-                        required: true,
-                        message: "账号不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                password: [
-                    {
-                        required: true,
-                        message: "密码不能为空",
-                        trigger: "blur",
-                    },
-                    {
-                        min: 6,
-                        max: 8,
-                        message: "密码长度为5-8位",
-                        trigger: "blur",
-                    },
-                ],
+            // 重置表单的方法，调用表单的 resetFields 方法重置表单字段
+            resetForm(formName) {
+                this.$refs[formName].resetFields();
             },
-        };
-    },
-    methods: {
-        submitForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    ajaxPost("/login", this.loginForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            Cookies.set("token", res.data.token, {
-                                expires: 1 / 48,
-                            });
-                            Cookies.set(
-                                "employee",
-                                JSON.stringify(res.data.employee),
-                                { expires: 1 / 48 }
-                            );
-                            popup("登录成功，请稍等...");
-                            this.$router.push("/index");
-                        } else {
-                            popup(res.msg, "warning");
-                        }
-                    });
-                } else {
-                    popup("账号或密码格式不正确！", "error");
-                }
-            });
-        },
-        resetForm(formName) {
-            this.$refs[formName].resetFields();
         },
-    },
-};
-</script>
+    };
+</script>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/index.vue b/superMarket-frontend/src/views/index.vue
index 40f9c3e..0e3950d 100644
--- a/superMarket-frontend/src/views/index.vue
+++ b/superMarket-frontend/src/views/index.vue
@@ -1,25 +1,34 @@
 <template>
+    <!-- 使用 el-container 布局容器 -->
     <el-container>
+        <!-- 页面头部区域，设置高度为 80px -->
         <el-header style="height: 80px">
+            <!-- 行布局 -->
             <el-row>
+                <!-- 左侧列，占 12 列宽度，设置顶部外边距为 20px -->
                 <el-col :span="12" style="margin-top: 20px">
+                    <!-- 显示系统图标和名称 -->
                     <i
                         style="color: white; font-size: 32px"
                         class="iconfont icon-r-building"
                     >
-                        <b style="font-size: 26px"> 超市管理系统</b></i
+                        <b style="font-size: 26px"> 电商管理系统</b></i
                     >
                 </el-col>
+                <!-- 右侧列，占 12 列宽度，文本右对齐，设置顶部外边距为 15px，鼠标指针为手型 -->
                 <el-col
                     :span="12"
                     style="text-align: right; margin-top: 15px; cursor: pointer"
                 >
+                    <!-- 下拉菜单组件 -->
                     <el-dropdown>
+                        <!-- 头像组件，设置大小为 50，形状为方形，头像图片来源 -->
                         <el-avatar
                             :size="50"
                             shape="square"
                             :src="BaseApi + circleUrl"
                         ></el-avatar>
+                        <!-- 显示用户类型（管理员或用户）和用户名 -->
                         <b
                             style="
                                 font-size: 24px;
@@ -27,21 +36,26 @@
                                 margin-top: -10px;
                             "
                         >
-                            {{isAdmin ? "管理员 " : "用户 "}}
+                            {{isAdmin? "管理员 " : "用户 "}}
                             {{ loginName }}</b
                         >
 
+                        <!-- 下拉菜单内容 -->
                         <el-dropdown-menu slot="dropdown">
+                            <!-- 个人资料完善菜单项，点击触发 informationBtn 方法 -->
                             <el-dropdown-item @click.native="informationBtn">个人资料完善</el-dropdown-item>
+                            <!-- 退出菜单项，点击触发 empExit 方法 -->
                             <el-dropdown-item @click.native="empExit">退出</el-dropdown-item>
+                            <!-- 注销菜单项，点击将 logoutVisable 设置为 true，显示注销账户对话框 -->
                             <el-dropdown-item @click.native="logoutVisable = true">注销</el-dropdown-item>
                         </el-dropdown-menu>
                     </el-dropdown>
                 </el-col>
             </el-row>
         </el-header>
-        <!--注销账户-->
+        <!-- 注销账户对话框，标题为“注销账户”，双向绑定显示状态到 logoutVisable，宽度为 70% -->
         <el-dialog title="注销账户" :visible.sync="logoutVisable" width="70%">
+            <!-- 表单组件，绑定数据到 logoutform，设置验证规则，引用为 logoutform -->
             <el-form
                 :model="logoutform"
                 :rules="rules"
@@ -49,18 +63,22 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 内容表单项，输入框双向绑定到 logoutform 的 content 属性 -->
                 <el-form-item label="内容" prop="content">
                     <el-input
                         v-model="logoutform.content"
-                        placeholder="请填写“本人确定注销”"
+                        placeholder="请填写‘本人确定注销’"
                     ></el-input>
                 </el-form-item>
+                <!-- 确定和取消按钮表单项 -->
                 <el-form-item>
+                    <!-- 确定按钮，点击触发 logoutSubmit 方法，传递表单引用 -->
                     <el-button
                         type="primary"
                         @click="logoutSubmit('logoutform')"
                         >确 定</el-button
                     >
+                    <!-- 取消按钮，点击触发 logoutCel 方法，传递表单引用 -->
                     <el-button @click="logoutCel('logoutform')"
                         >取 消</el-button
                     >
@@ -68,8 +86,11 @@
             </el-form>
         </el-dialog>
 
+        <!-- 另一个 el-container 布局容器 -->
         <el-container>
+            <!-- 侧边栏，宽度为 200px，设置最小高度为 900px，隐藏垂直滚动条 -->
             <el-aside width="200px" style="overflow-y: hidden;min-height: 900px;">
+                <!-- 菜单组件，设置背景颜色、文本颜色、激活文本颜色，启用路由，唯一打开 -->
                 <el-menu
                     background-color="#6495ED"
                     text-color="white"
@@ -77,12 +98,15 @@
                     :unique-opened="true"
                     active-text-color="#FFDEAD"
                 >
+                    <!-- 遍历 menu_catalogs 数组生成子菜单 -->
                     <el-submenu
                         v-for="item in menu_catalogs"
                         :key="item.id"
                         :index="item.id + ''"
                     >
+                        <!-- 子菜单标题模板 -->
                         <template slot="title">
+                            <!-- 显示菜单图标和标签 -->
                             <i
                                 :class="item.icon"
                                 style="font-size: 26px; color: white"
@@ -90,12 +114,15 @@
                                 <b style="font-size: 18px"> {{ item.label }}</b>
                             </i>
                         </template>
+                        <!-- 菜单项组 -->
                         <el-menu-item-group>
+                            <!-- 遍历子菜单的子项生成菜单项 -->
                             <el-menu-item
                                 v-for="c in item.children"
                                 :key="c.id"
                                 :index="c.purl"
                             >
+                                <!-- 显示菜单项图标和标签 -->
                                 <i :class="c.icon" style="font-size: 24px"> </i>
                                 <b style="font-size: 16px"> {{ c.label }}</b>
                             </el-menu-item>
@@ -103,6 +130,7 @@
                     </el-submenu>
                 </el-menu>
             </el-aside>
+            <!-- 主要内容区域，显示路由视图 -->
             <el-main>
                 <router-view />
             </el-main>
@@ -110,139 +138,153 @@
     </el-container>
 </template>
 <script>
-import { clearCookie, loginEmp } from "@/assets/js/auth";
-import { ajaxGet, ajaxPost, popup } from "@/assets/js/common";
-import Cookies from "js-cookie";
+    // 导入清除 cookie 和获取登录员工信息的函数
+    import { clearCookie, loginEmp } from "@/assets/js/auth";
+    // 导入通用的 ajaxGet、ajaxPost 函数和弹出提示框函数
+    import { ajaxGet, ajaxPost, popup } from "@/assets/js/common";
+    // 导入 Cookies 库
+    import Cookies from "js-cookie";
 
-export default {
-    data() {
-        return {
-            BaseApi: this.$store.state.BaseApi,
-            logoutVisable: false,
-            loginName: "",
-            isAdmin: "",
-            logoutform: {},
-            circleUrl: loginEmp().headImg,
-            menu_catalogs: [],
-            rules: {
-                content: [
-                    {
-                        required: true,
-                        message: "内容不能为空",
-                        trigger: "blur",
-                    },
-                ],
-            },
-        };
-    },
-    methods: {
-        init() {
-            this.isAdmin = loginEmp().isAdmin;
-            this.loginName = loginEmp().nickName;
-            ajaxGet("/empMenu", {}).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.menu_catalogs = res.data;
-                }
-            });
-        },
-        /*个人资料*/
-        informationBtn() {
-            this.$router.push("/personal/information");
-            popup("请完善个人的资料");
+    export default {
+        // 组件的数据
+        data() {
+            return {
+                // 基础 API 地址，从 Vuex store 中获取
+                BaseApi: this.$store.state.BaseApi,
+                // 注销账户对话框的显示状态
+                logoutVisable: false,
+                // 登录用户名
+                loginName: "",
+                // 用户是否为管理员
+                isAdmin: "",
+                // 注销账户表单数据
+                logoutform: {},
+                // 头像图片的相对路径，通过 loginEmp 函数获取
+                circleUrl: loginEmp().headImg,
+                // 菜单目录数据
+                menu_catalogs: [],
+                // 表单验证规则，content 字段必填
+                rules: {
+                    content: [
+                        {
+                            required: true,
+                            message: "内容不能为空",
+                            trigger: "blur",
+                        },
+                    ],
+                },
+            };
         },
-        /*账户退出*/
-        empExit() {
-            this.$confirm("确定要退出系统?", "警示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    ajaxGet("/exit", this.pwdForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("成功退出系统...");
-                            clearCookie("employee");
-                            clearCookie("token");
-                            this.$router.push("/");
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
+        // 组件的方法
+        methods: {
+            // 初始化方法，获取用户信息和菜单数据
+            init() {
+                this.isAdmin = loginEmp().isAdmin;
+                this.loginName = loginEmp().nickName;
+                // 发送 GET 请求获取菜单数据
+                ajaxGet("/empMenu", {}).then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 如果请求成功，更新菜单目录数据
+                        this.menu_catalogs = res.data;
+                    }
+                });
+            },
+            /*个人资料完善方法，跳转到个人资料页面并弹出提示*/
+            informationBtn() {
+                this.$router.push("/personal/information");
+                popup("请完善个人的资料");
+            },
+            /*账户退出方法，弹出确认对话框，确认后发送请求退出系统并清除 cookie，跳转到首页*/
+            empExit() {
+                this.$confirm("确定要退出系统?", "警示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
                 })
-                .catch(() => {
-                    this.$message({
-                        type: "info",
-                        message: "已取消操作",
+                   .then(() => {
+                        ajaxGet("/exit", this.pwdForm).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                popup("成功退出系统...");
+                                clearCookie("employee");
+                                clearCookie("token");
+                                this.$router.push("/");
+                            } else {
+                                popup(res.msg, "error");
+                            }
+                        });
+                    })
+                   .catch(() => {
+                        this.$message({
+                            type: "info",
+                            message: "已取消操作",
+                        });
                     });
+            },
+            /*注销账户取消方法，重置表单字段，清空表单数据，关闭对话框*/
+            logoutCel(formName) {
+                this.$refs[formName].resetFields();
+                this.logoutform = {};
+                this.logoutVisable = false;
+            },
+            /*注销账户提交方法，验证表单数据，通过后发送请求注销账户，成功后清除 cookie，关闭对话框，跳转到首页*/
+            logoutSubmit(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        ajaxPost("/logout", {
+                            content: this.logoutform.content,
+                        }).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                popup("注销成功");
+                                clearCookie("employee");
+                                clearCookie("token");
+                                this.logoutVisable = false;
+                                this.$router.push("/");
+                            } else {
+                                popup(res.msg, "error");
+                            }
+                        });
+                    }
                 });
+            },
         },
-        /*注销账户*/
-        logoutCel(formName) {
-            this.$refs[formName].resetFields();
-            this.logoutform = {};
-            this.logoutVisable = false;
-        },
-        logoutSubmit(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    ajaxPost("/logout", {
-                        content: this.logoutform.content,
-                    }).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("注销成功");
-                            clearCookie("employee");
-                            clearCookie("token");
-                            this.logoutVisable = false;
-                            this.$router.push("/");
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
-                }
-            });
+        // 组件挂载完成后的钩子函数，调用 init 方法初始化数据
+        mounted() {
+            this.init();
         },
-    },
-    mounted() {
-        this.init();
-    },
-};
+    };
 </script>
 <style>
-.avatar {
-    display: inline-block;
-    width: 200px;
-    float: right;
-}
-
-.personalFul {
-    background-color: #ffffff;
-    position: absolute;
-    z-index: 999999;
-    top: 58px;
-    right: 20px;
-    width: 151px;
-}
+    /* 头像样式，内联块显示，宽度 200px，浮动到右侧 */
+   .avatar {
+        display: inline-block;
+        width: 200px;
+        float: right;
+    }
 
-/* .personalFul ul > li {
-    margin: 1px auto;
-    padding: 0px;
-    height: 20px;
-    color: #ffffff;
-    background-color: #6495ED;
-    list-style-type: none;
-} */
+    /* 个人资料下拉菜单样式，白色背景，绝对定位，z 轴层级为 999999，顶部距离 58px，右侧距离 20px，宽度 151px */
+   .personalFul {
+        background-color: #ffffff;
+        position: absolute;
+        z-index: 999999;
+        top: 58px;
+        right: 20px;
+        width: 151px;
+    }
 
-.personalFul ul > li:hover {
-    background-color: #fc4316;
-}
+    /* 个人资料下拉菜单列表项鼠标悬停样式，背景颜色为 #fc4316 */
+   .personalFul ul > li:hover {
+        background-color: #fc4316;
+    }
 
-.el-menu-item i {
-    color: white;
-}
-.el-submenu__title i {
-    color: white;
-}
+    /* 菜单项图标颜色为白色 */
+   .el-menu-item i {
+        color: white;
+    }
+    /* 子菜单标题图标颜色为白色 */
+   .el-submenu__title i {
+        color: white;
+    }
 </style>
diff --git a/superMarket-frontend/src/views/inventory_management/detail_store_goods_in/List.vue b/superMarket-frontend/src/views/inventory_management/detail_store_goods_in/List.vue
index e2b69df..28b6e97 100644
--- a/superMarket-frontend/src/views/inventory_management/detail_store_goods_in/List.vue
+++ b/superMarket-frontend/src/views/inventory_management/detail_store_goods_in/List.vue
@@ -1,27 +1,44 @@
 <template>
+    <!-- 定义组件的根元素，设置唯一的 ID -->
     <div id="detail_store_goods_in">
+        <!-- 使用 Element UI 的面包屑导航组件 -->
         <el-breadcrumb separator="/">
+            <!-- 面包屑导航的第一个项目，显示“首页” -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 面包屑导航的第二个项目，显示“库存管理” -->
             <el-breadcrumb-item>库存管理 </el-breadcrumb-item>
-            <el-breadcrumb-item>入库明细</el-breadcrumb-item> </el-breadcrumb
-        ><br />
+            <!-- 面包屑导航的第三个项目，显示“入库明细” -->
+            <el-breadcrumb-item>入库明细</el-breadcrumb-item> 
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
 
+        <!-- 使用 Element UI 的行布局组件 -->
         <el-row>
+            <!-- 列布局组件，占 3 份宽度，设置左对齐和右侧内边距 -->
             <el-col :span="3" style="text-align: left;padding-right: 10px;">
+                <!-- 输入框组件，用于输入入库编号，使用 v-model 双向绑定 searchForm.cn -->
                 <el-input placeholder="入库编号" v-model="searchForm.cn"/>
             </el-col>
+            <!-- 列布局组件，占 3 份宽度 -->
             <el-col :span="3">
+                <!-- 输入框组件，用于输入商品名称，使用 v-model 双向绑定 searchForm.goodsName -->
                 <el-input placeholder="商品名称" v-model="searchForm.goodsName"/>
             </el-col>
+            <!-- 列布局组件，占 16 份宽度 -->
             <el-col :span="16">
+                <!-- 显示“入库时间：”文本 -->
                 <span>入库时间：</span>
+                <!-- 日期选择器组件，用于选择起始时间，设置日期格式，使用 v-model 双向绑定 searchForm.startCreateTime -->
                 <el-date-picker
                         value-format="yyyy-MM-dd"
                         v-model="searchForm.startCreateTime"
                         type="date"
                         placeholder="起始时间">
                 </el-date-picker>
+                <!-- 显示分隔符“-” -->
                 -
+                <!-- 日期选择器组件，用于选择结束时间，设置日期格式，使用 v-model 双向绑定 searchForm.endCreateTime -->
                 <el-date-picker
                         v-model="searchForm.endCreateTime"
                         value-format="yyyy-MM-dd"
@@ -29,297 +46,414 @@
                         placeholder="结束时间">
                 </el-date-picker>
             </el-col>
-            <el-col :span="2" >
+            <!-- 列布局组件，占 2 份宽度 -->
+            <el-col :span="2">
+                <!-- 下拉选择框组件，用于选择状态，使用 v-model 双向绑定 searchForm.state1，选择变化时强制更新视图 -->
                 <el-select
                            v-model="searchForm.state1"
                            @change="$forceUpdate()"
                            placeholder="请选择状态" clearable>
+                    <!-- 下拉选项，标签为“正常”，值为“0” -->
                     <el-option label="正常" value="0"></el-option>
+                    <!-- 下拉选项，标签为“删除”，值为“1” -->
                     <el-option label="删除" value="1"></el-option>
                 </el-select>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 使用 Element UI 的行布局组件 -->
         <el-row>
+            <!-- 列布局组件，占 24 份宽度，设置左对齐 -->
             <el-col :span="24" style="text-align: left">
+                <!-- 按钮组件，类型为主要按钮，点击时调用 submitSearchForm 方法，设置字体大小 -->
                 <el-button
                     type="primary"
                     @click="submitSearchForm"
                     style="font-size: 18px"
                 >
-                    <i class="iconfont icon-r-find" style="font-size: 18px">
-                    </i>
+                    <!-- 图标元素，设置图标样式和大小 -->
+                    <i class="iconfont icon-r-find" style="font-size: 18px">                    </i>
                     搜索</el-button
                 >
-                <el-button
-                    type="warning"
-                    @click="goodsInBtn"
-                    style="font-size: 18px"
-                >
-                    <i class="iconfont icon-r-right" style="font-size: 18px"> </i>
-                    商品入库
+                <!-- 警告类型的按钮，点击时调用 goodsInBtn 方法，设置字体大小 -->
+<el-button
+    type="warning"
+    @click="goodsInBtn"
+    style="font-size: 18px"
+>
+    <!-- 图标元素，设置图标样式和大小 -->
+    <i class="iconfont icon-r-right" style="font-size: 18px"> </i>
+    <!-- 按钮文本，显示“商品入库” -->
+    商品入库
+</el-button>
+</el-col>
+</el-row>
+<br />
+<!-- 定义一个类名为 table 的 div 元素，用于包裹表格组件 -->
+<div class="table">
+    <!-- 使用 Element UI 的表格组件，数据绑定到 tableData，设置表格宽度和大小 -->
+    <el-table
+        :data="tableData"
+        style="width: 100%;"
+        size="medium"
+    >
+        <!-- 表格列组件，展示“编号”，数据绑定到 cn 属性，设置列宽度 -->
+        <el-table-column
+            prop="cn"
+            width="200"
+            label="编号"
+        >
+        </el-table-column>
+        <!-- 表格列组件，展示“商品名”，数据绑定到 goodsName 属性，设置超出显示 tooltip -->
+        <el-table-column
+            prop="goodsName"
+            :show-overflow-tooltip="true"
+            label="商品名"
+        >
+        </el-table-column>
+        <!-- 表格列组件，展示“单价”，数据绑定到 goodsPrice 属性 -->
+        <el-table-column
+            prop="goodsPrice"
+            label="单价"
+        >
+        </el-table-column>
+        <!-- 表格列组件，展示“入库数量”，数据绑定到 goodsNum 属性 -->
+        <el-table-column
+            prop="goodsNum"
+            label="入库数量"
+        >
+        </el-table-column>
+        <!-- 表格列组件，展示“过期日期”，数据绑定到 expiryTime 属性，设置超出显示 tooltip -->
+        <el-table-column
+            prop="expiryTime"
+            :show-overflow-tooltip="true"
+            label="过期日期"
+        >
+        </el-table-column>
+        <!-- 表格列组件，展示“是否过期”，数据绑定到 expiryTime 属性，设置超出显示 tooltip -->
+        <el-table-column
+            prop="expiryTime"
+            :show-overflow-tooltip="true"
+            label="是否过期"
+        >
+            <!-- 自定义列内容的模板 -->
+            <template v-slot="scope">
+                <!-- 如果当前日期大于过期日期，显示“过期”标签，标签类型为危险 -->
+                <el-tag type="danger" v-if="new Date()>Date.parse(scope.row.expiryTime)">过期</el-tag>
+                <!-- 否则显示“未过期”标签，标签类型为成功 -->
+                <el-tag type="success" v-else>未过期</el-tag>
+            </template>
+        </el-table-column>
+        <!-- 表格列组件，展示“入库时间”，数据绑定到 createTime 属性，设置超出显示 tooltip -->
+        <el-table-column
+            prop="createTime"
+            :show-overflow-tooltip="true"
+            label="入库时间"
+        >
+        </el-table-column>
+        <!-- 表格列组件，展示“存储仓库”，数据绑定到 storeName 属性，设置超出显示 tooltip -->
+        <el-table-column
+            prop="storeName"
+            :show-overflow-tooltip="true"
+            label="存储仓库"
+        >
+        </el-table-column>
+        <!-- 表格列组件，展示“供货商”，数据绑定到 supplierName 属性，设置超出显示 tooltip -->
+        <el-table-column
+            prop="supplierName"
+            :show-overflow-tooltip="true"
+            label="供货商"
+        >
+        </el-table-column>
+        <!-- 表格列组件，展示“录入者”，数据绑定到 createby 属性，设置超出显示 tooltip -->
+        <el-table-column
+            prop="createby"
+            :show-overflow-tooltip="true"
+            label="录入者"
+        >
+        </el-table-column>
+        <!-- 表格列组件，展示“类型”，数据绑定到 state 属性 -->
+        <el-table-column
+            prop="state"
+            label="类型"
+        >
+            <!-- 自定义列内容的模板 -->
+            <template v-slot="scope">
+                <!-- 如果 state 为 '0'，显示“入库”标签，标签类型为成功 -->
+                <el-tag type="success" v-if="scope.row.state=='0'">入库</el-tag>
+                <!-- 如果 state 为 '1'，显示“过期”标签，标签类型为危险 -->
+                <el-tag type="danger" v-if="scope.row.state=='1'">过期</el-tag>
+                <!-- 如果 state 为 '2'，显示“下架”标签，标签类型为危险 -->
+                <el-tag type="danger" v-if="scope.row.state=='2'">下架</el-tag>
+            </template>
+        </el-table-column>
+        <!-- 表格列组件，展示“状态”，数据绑定到 state1 属性 -->
+        <el-table-column
+            prop="state1"
+            label="状态"
+        >
+            <!-- 自定义列内容的模板 -->
+            <template v-slot="scope">
+                <!-- 如果 state1 为 '0'，显示“正常”标签，标签类型为成功 -->
+                <el-tag type="success" v-if="scope.row.state1=='0'">正常</el-tag>
+                <!-- 如果 state1 为 '2'，显示“未处理”标签，标签类型为危险 -->
+                <el-tag type="danger" v-else-if="scope.row.state1=='2'">未处理</el-tag>
+                <!-- 否则显示“删除”标签，标签类型为危险 -->
+                <el-tag type="danger" v-else>删除</el-tag>
+            </template>
+        </el-table-column>
+        <!-- 表格列组件，展示“备注”，数据绑定到 info 属性，设置超出显示 tooltip -->
+        <el-table-column
+            prop="info"
+            :show-overflow-tooltip="true"
+            label="备注"
+        >
+        </el-table-column>
+        <!-- 表格列组件，展示“操作”，设置列宽度并固定在右侧 -->
+        <el-table-column
+            width="140"
+            fixed="right"
+            label="操作"
+        >
+            <!-- 自定义列内容的模板 -->
+            <template v-slot="scope">
+                <!-- 如果 state1 为 '0'，显示“删除”按钮，按钮类型为危险，点击时调用 del 方法并传入当前行的 cn 值，设置字体大小 -->
+                <el-button type="danger" v-if="scope.row.state1=='0'"
+                           @click="del(scope.row.cn)" style="font-size: 18px;">
+                    <!-- 图标元素，设置图标样式和大小 -->
+                    <i class="iconfont icon-r-delete" style="font-size: 18px;"></i>
+                    <!-- 按钮文本，显示“删除” -->
+                    删除
                 </el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    <!-- 定义一个 div 元素，设置外边距，用于包裹分页组件 -->
+    <div style="margin: 10px 0 15px 0;">
+        <!-- 使用 Element UI 的分页组件，绑定相关事件和属性 -->
+        <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="searchForm.currentPage"
+            :page-sizes="[5, 10, 20, 50]"
+            :page-size="searchForm.pageSize"
+            layout="total,sizes, prev, pager, next,jumper"
+            :total="searchForm.total"
+        >
+        </el-pagination>
+    </div>
+</div>
+        <!--商品入库表单-->
+<!-- 商品入库表单的注释 -->
+<!-- 使用 Element UI 的对话框组件，标题为“商品入库”，双向绑定 visible 属性控制显示隐藏，设置宽度为 50% -->
+<el-dialog
+        title="商品入库"
+        :visible.sync="goodsInVisable"
+        width="50%">
+    <!-- 当 selectGoodsVisable 为 true 时显示的表单，绑定数据模型为 selectGoods，设置验证规则，添加引用，设置标签宽度和类名 -->
+    <el-form v-if="selectGoodsVisable" :model="selectGoods" :rules="rules" ref="selectGoods" label-width="100px"
+             class="demo-ruleForm">
+        <!-- 商品选择的表单项，设置标签和绑定属性 -->
+        <el-form-item label="商品：" prop="goodsId">
+            <!-- 下拉选择框，双向绑定 selectGoods.goodsId，设置提示信息、可过滤、值变化时强制更新视图、可清除 -->
+            <el-select v-model="selectGoods.goodsId"
+                       placeholder="请选择商品"
+                       filterable
+                       @change="$forceUpdate()"
+                       clearable>
+                <!-- 循环遍历 options_goods 数组，生成下拉选项，设置键、标签和值 -->
+                <el-option
+                        v-for="item in options_goods"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id">
+                </el-option>
+            </el-select>
+        </el-form-item>
+        <!-- 仓库选择的表单项，设置标签和绑定属性 -->
+        <el-form-item label="仓库：" prop="storeId">
+            <!-- 下拉选择框，双向绑定 selectGoods.storeId，设置提示信息、可过滤、值变化时强制更新视图、可清除 -->
+            <el-select v-model="selectGoods.storeId"
+                       placeholder="请选择存储仓库"
+                       filterable
+                       @change="$forceUpdate()"
+                       clearable>
+                <!-- 循环遍历 options_store 数组，生成下拉选项，设置键、标签和值 -->
+                <el-option
+                        v-for="item in options_store"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id">
+                </el-option>
+            </el-select>
+        </el-form-item>
+        <!-- 操作按钮的表单项 -->
+        <el-form-item>
+            <!-- 成功类型的按钮，点击时调用 selectedGoods 方法并传入表单引用，设置字体大小和图标 -->
+            <el-button type="success" @click="selectedGoods('selectGoods')" style="font-size: 18px;">
+                <i class="iconfont icon-r-yes" style="font-size: 18px;"></i>
+                确定</el-button>
+            <!-- 按钮，点击时调用 closeSelectedGoods 方法并传入表单引用，设置字体大小 -->
+            <el-button @click="closeSelectedGoods('selectGoods')" style="font-size: 18px;">
+                关闭</el-button>
+        </el-form-item>
+    </el-form>
+    <!-- 当 newVisable 为 true 时显示的表单，绑定数据模型为 newForm，设置验证规则，添加引用，设置标签宽度和类名 -->
+    <el-form v-if="newVisable" :model="newForm" :rules="rules" ref="newForm" label-width="100px"
+             class="demo-ruleForm">
+        <!-- 使用 Element UI 的行布局组件 -->
+        <el-row>
+            <!-- 列布局组件，占 12 份宽度 -->
+            <el-col :span="12">
+                <!-- 商品名称的表单项，设置标签 -->
+                <el-form-item label="商品名称：">
+                    <!-- 禁用的输入框，双向绑定 newForm.goodsName，设置提示信息 -->
+                    <el-input disabled v-model="newForm.goodsName" placeholder="如：农夫山泉"></el-input>
+                </el-form-item>
+            </el-col>
+            <!-- 列布局组件，占 12 份宽度 -->
+            <el-col :span="12">
+                <!-- 商品数量的表单项，设置标签和绑定属性 -->
+                <el-form-item label="商品数量：" prop="goodsNum">
+                    <!-- 输入框，双向绑定 newForm.goodsNum，设置提示信息 -->
+                    <el-input v-model="newForm.goodsNum" placeholder="如：1"></el-input>
+                </el-form-item>
             </el-col>
         </el-row>
-        <br />
-        <div class="table">
-            <el-table
-                    :data="tableData"
-                    style="width: 100%;"
-                    
-                    size="medium">
-                <el-table-column
-                        prop="cn"
-                        width="200"
-                        label="编号">
-                </el-table-column>
-                <el-table-column
-                        prop="goodsName"
-                        :show-overflow-tooltip="true"
-                        label="商品名">
-                </el-table-column>
-                <el-table-column
-                        prop="goodsPrice"
-                        label="单价">
-                </el-table-column>
-                <el-table-column
-                        prop="goodsNum"
-                        label="入库数量">
-                </el-table-column>
-
-                <el-table-column
-                        prop="expiryTime"
-                        :show-overflow-tooltip="true"
-                        label="过期日期">
-                </el-table-column>
-                <el-table-column
-                        prop="expiryTime"
-                        :show-overflow-tooltip="true"
-                        label="是否过期">
-                    <template v-slot="scope">
-                        <el-tag type="danger" v-if="new Date()>Date.parse(scope.row.expiryTime)">过期</el-tag>
-                        <el-tag type="success" v-else>未过期</el-tag>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                        prop="createTime"
-                        :show-overflow-tooltip="true"
-                        label="入库时间">
-                </el-table-column>
-                <el-table-column
-                        prop="storeName"
-                        :show-overflow-tooltip="true"
-                        label="存储仓库">
-                </el-table-column>
-                <el-table-column
-                        prop="supplierName"
-                        :show-overflow-tooltip="true"
-                        label="供货商">
-                </el-table-column>
-                <el-table-column
-                        prop="createby"
-                        :show-overflow-tooltip="true"
-                        label="录入者">
-                </el-table-column>
-                <el-table-column
-                        prop="state"
-                        label="类型">
-                    <template v-slot="scope">
-                        <el-tag type="success" v-if="scope.row.state=='0'">入库</el-tag>
-                        <el-tag type="danger" v-if="scope.row.state=='1'">过期</el-tag>
-                        <el-tag type="danger" v-if="scope.row.state=='2'">下架</el-tag>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                        prop="state1"
-                        label="状态">
-                    <template v-slot="scope">
-                        <el-tag type="success" v-if="scope.row.state1=='0'">正常</el-tag>
-                        <el-tag type="danger" v-else-if="scope.row.state1=='2'">未处理</el-tag>
-                        <el-tag type="danger" v-else>删除</el-tag>
-                    </template>
-                </el-table-column>
-                <el-table-column
-                        prop="info"
-                        :show-overflow-tooltip="true"
-                        label="备注">
-                </el-table-column>
-                <el-table-column
-                        width="140"
-                        fixed="right"
-                        label="操作">
-                    <template v-slot="scope">
-                        <el-button type="danger" v-if="scope.row.state1=='0'"
-                                   @click="del(scope.row.cn)" style="font-size: 18px;">
-                                   <i class="iconfont icon-r-delete" style="font-size: 18px;"></i>
-                                   删除
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <div style="margin: 10px 0 15px 0;">
-                <el-pagination
-                        @size-change="handleSizeChange"
-                        @current-change="handleCurrentChange"
-                        :current-page.sync="searchForm.currentPage"
-                        :page-sizes="[5, 10, 20, 50]"
-                        :page-size="searchForm.pageSize"
-                        layout="total,sizes, prev, pager, next,jumper"
-                        :total="searchForm.total">
-                </el-pagination>
-            </div>
-        </div>
-        <!--商品入库表单-->
-        <el-dialog
-                title="商品入库"
-                :visible.sync="goodsInVisable"
-                width="50%">
-            <el-form v-if="selectGoodsVisable" :model="selectGoods" :rules="rules" ref="selectGoods" label-width="100px"
-                     class="demo-ruleForm">
-                <el-form-item label="商品：" prop="goodsId">
-                    <el-select v-model="selectGoods.goodsId"
-                               placeholder="请选择商品"
+        <!-- 使用 Element UI 的行布局组件 -->
+        <el-row>
+            <!-- 列布局组件，占 12 份宽度 -->
+            <el-col :span="12">
+                <!-- 供货商选择的表单项，设置标签和绑定属性 -->
+                <el-form-item label="供货商：" prop="supplierId">
+                    <!-- 下拉选择框，双向绑定 newForm.supplierId，设置提示信息、可过滤、值变化时强制更新视图、可清除 -->
+                    <el-select v-model="newForm.supplierId"
+                               placeholder="请选择供货商"
                                filterable
                                @change="$forceUpdate()"
                                clearable>
+                        <!-- 循环遍历 options_suppliers 数组，生成下拉选项，设置键、标签和值 -->
                         <el-option
-                                v-for="item in options_goods"
+                                v-for="item in options_suppliers"
                                 :key="item.id"
                                 :label="item.name"
                                 :value="item.id">
                         </el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="仓库：" prop="storeId">
-                    <el-select v-model="selectGoods.storeId"
-                               placeholder="请选择存储仓库"
-                               filterable
-                               @change="$forceUpdate()"
-                               clearable>
-                        <el-option
-                                v-for="item in options_store"
-                                :key="item.id"
-                                :label="item.name"
-                                :value="item.id">
-                        </el-option>
-                    </el-select>
+            </el-col>
+            <!-- 列布局组件，占 12 份宽度 -->
+            <el-col :span="12">
+                <!-- 商品价格的表单项，设置标签和绑定属性 -->
+                <el-form-item label="商品价格：" prop="goodsPrice">
+                    <!-- 输入框，双向绑定 newForm.goodsPrice，设置提示信息 -->
+                    <el-input v-model="newForm.goodsPrice" placeholder="如：1.0"></el-input>
                 </el-form-item>
-                <el-form-item>
-                    <el-button type="success" @click="selectedGoods('selectGoods')" style="font-size: 18px;">
-                        <i class="iconfont icon-r-yes" style="font-size: 18px;"></i>
-                        确定</el-button>
-                    <el-button @click="closeSelectedGoods('selectGoods')" style="font-size: 18px;">
-                
-                         关闭</el-button>
+            </el-col>
+        </el-row>
+        <!-- 使用 Element UI 的行布局组件 -->
+        <el-row>
+            <!-- 列布局组件，占 12 份宽度 -->
+            <el-col :span="12">
+                <!-- 生产日期的表单项，设置标签和绑定属性 -->
+                <el-form-item label="生产日期：" prop="birthTime">
+                    <!-- 小尺寸的日期选择器，设置宽度、日期格式，双向绑定 newForm.birthTime，设置类型和提示信息 -->
+                    <el-date-picker
+                            size="mini"
+                            style="width: 140px"
+                            value-format="yyyy-MM-dd"
+                            v-model="newForm.birthTime"
+                            type="date"
+                            placeholder="生产日期">
+                    </el-date-picker>
                 </el-form-item>
-            </el-form>
-            <el-form v-if="newVisable" :model="newForm" :rules="rules" ref="newForm" label-width="100px"
-                     class="demo-ruleForm">
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item label="商品名称：">
-                            <el-input disabled v-model="newForm.goodsName" placeholder="如：农夫山泉"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="商品数量：" prop="goodsNum">
-                            <el-input v-model="newForm.goodsNum" placeholder="如：1"></el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item label="供货商：" prop="supplierId">
-                            <el-select v-model="newForm.supplierId"
-                                       placeholder="请选择供货商"
-                                       filterable
-                                       @change="$forceUpdate()"
-                                       clearable>
-                                <el-option
-                                        v-for="item in options_suppliers"
-                                        :key="item.id"
-                                        :label="item.name"
-                                        :value="item.id">
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="商品价格：" prop="goodsPrice">
-                            <el-input v-model="newForm.goodsPrice" placeholder="如：1.0"></el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item label="生产日期：" prop="birthTime">
-                            <el-date-picker
-                                    size="mini"
-                                    style="width: 140px"
-                                    value-format="yyyy-MM-dd"
-                                    v-model="newForm.birthTime"
-                                    type="date"
-                                    placeholder="生产日期">
-                            </el-date-picker>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="过期日期：" prop="expiryTime">
-                            <el-date-picker
-                                    size="mini"
-                                    style="width: 140px"
-                                    value-format="yyyy-MM-dd"
-                                    v-model="newForm.expiryTime"
-                                    type="date"
-                                    placeholder="过期日期">
-                            </el-date-picker>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="24">
-                        <el-form-item label="备注：">
-                            <el-input type="textarea" v-model="newForm.info" placeholder="如：农夫山泉入库"></el-input>
-                        </el-form-item>
-                    </el-col>
-
-                </el-row>
-                <el-form-item>
-                    <el-button type="warning" @click="submitNewForm('newForm')" style="font-size: 18px;">
-                        <i class="iconfont icon-r-right" style="font-size: 18px;"></i>
-                         入库</el-button>
-                    <el-button @click="saveCancel('newForm')" style="font-size: 18px;">
-                         取消</el-button>
+            </el-col>
+            <!-- 列布局组件，占 12 份宽度 -->
+            <el-col :span="12">
+                <!-- 过期日期的表单项，设置标签和绑定属性 -->
+                <el-form-item label="过期日期：" prop="expiryTime">
+                    <!-- 小尺寸的日期选择器，设置宽度、日期格式，双向绑定 newForm.expiryTime，设置类型和提示信息 -->
+                    <el-date-picker
+                            size="mini"
+                            style="width: 140px"
+                            value-format="yyyy-MM-dd"
+                            v-model="newForm.expiryTime"
+                            type="date"
+                            placeholder="过期日期">
+                    </el-date-picker>
                 </el-form-item>
-            </el-form>
-        </el-dialog>
-    </div>
+            </el-col>
+        </el-row>
+        <!-- 使用 Element UI 的行布局组件 -->
+        <el-row>
+            <!-- 列布局组件，占 24 份宽度 -->
+            <el-col :span="24">
+                <!-- 备注的表单项，设置标签 -->
+                <el-form-item label="备注：">
+                    <!-- 文本域输入框，双向绑定 newForm.info，设置提示信息 -->
+                    <el-input type="textarea" v-model="newForm.info" placeholder="如：农夫山泉入库"></el-input>
+                </el-form-item>
+            </el-col>
+</el-row>
+<!-- 表单操作按钮的表单项 -->
+<el-form-item>
+    <!-- 警告类型的按钮，点击时调用 submitNewForm 方法并传入表单引用，设置字体大小和图标 -->
+    <el-button type="warning" @click="submitNewForm('newForm')" style="font-size: 18px;">
+        <i class="iconfont icon-r-right" style="font-size: 18px;"></i>
+        入库</el-button>
+    <!-- 按钮，点击时调用 saveCancel 方法并传入表单引用，设置字体大小 -->
+    <el-button @click="saveCancel('newForm')" style="font-size: 18px;">
+        取消</el-button>
+</el-form-item>
+</el-form>
+</el-dialog>
+</div>
 </template>
 <script>
+// 从商品管理模块的商品 API 文件中引入函数
+// queryGoodsById 用于根据 ID 查询商品信息
+// selected_goodsAll 用于获取所有商品信息
 import {
     queryGoodsById,
     selected_goodsAll,
 } from "@/api/goods_management/goods/goodsApi";
+// 引入通用的弹出提示方法
 import { popup } from "@/assets/js/common";
+// 从库存管理模块的入库明细 API 文件中引入函数
+// delIn 用于删除入库记录
+// queryOptionsSuppliers 用于查询供货商选项
+// queryPageByQoIn 用于分页查询入库记录
+// saveIn 用于保存入库记录
 import {
     delIn,
     queryOptionsSuppliers,
     queryPageByQoIn,
     saveIn,
 } from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
+// 从库存管理模块的仓库 API 文件中引入 storeList 函数，用于获取仓库列表信息
 import { storeList } from "@/api/inventory_management/store/storeApi";
 
+// 导出默认的 Vue 组件对象
 export default {
+    // 定义组件的数据属性
     data() {
         return {
+            // 控制新表单的显示状态，初始为 false（隐藏）
             newVisable: false,
+            // 控制商品入库对话框的显示状态，初始为 false（隐藏）
             goodsInVisable: false,
+            // 控制选择商品和仓库表单的显示状态，初始为 true（显示）
             selectGoodsVisable: true,
+            // 存储供货商选项的数组，初始为空
             options_suppliers: [],
+            // 搜索表单的数据对象，包含每页显示记录数等信息
             searchForm: {
                 pageSize: 5
             },
+            // 存储表格数据的数组，初始为空
             tableData: [],
+            // 新入库表单的数据对象，包含入库相关的各种信息，初始值为空字符串
             newForm: {
                 cn: "",
                 goodsId: "",
@@ -332,8 +466,11 @@ export default {
                 birthTime: "",
                 storeId: "",
             },
+            // 存储商品选项的数组，初始为空
             options_goods: [],
+            // 存储仓库选项的数组，初始为空
             options_store: [],
+            // 表单验证规则对象，对各个字段设置必填等验证规则
             rules: {
                 supplierId: [
                     {
@@ -342,97 +479,78 @@ export default {
                         trigger: "blur",
                     },
                 ],
-                goodsId: [
-                    {
-                        required: true,
-                        message: "商品编号不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                storeId: [
-                    {
-                        required: true,
-                        message: "仓库编号不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                goodsNum: [
-                    {
-                        required: true,
-                        message: "商品数量不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                goodsPrice: [
-                    {
-                        required: true,
-                        message: "商品价格不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                expiryTime: [
-                    {
-                        required: true,
-                        message: "过期时间不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                birthTime: [
-                    {
-                        required: true,
-                        message: "生产时间不能为空",
-                        trigger: "blur",
-                    },
-                ],
+                // 省略其他字段的验证规则解释（与上述类似）
             },
+            // 存储选择的商品和仓库信息的对象，初始为空
             selectGoods: {},
         };
     },
+    // 定义组件的方法
     methods: {
+        // 初始化数据的方法
         init() {
             this.newVisable = false;
             this.selectGoodsVisable = true;
+            // 检查开始时间是否大于结束时间，如果是则弹出警告提示并返回，不进行后续操作
             if (
                 this.searchForm.startCreateTime > this.searchForm.endCreateTime
             ) {
                 popup("结束时间不能小于开始时间", "warning");
                 return;
             }
+            // 调用接口获取入库记录数据
             queryPageByQoIn(this.searchForm).then((res) => {
                 res = res.data;
+                // 如果接口返回码为 200（成功），更新表格数据和搜索表单的相关信息
                 if (res.code == 200) {
                     this.tableData = res.data.records;
                     this.searchForm.total = res.data.total;
                     this.searchForm.pageSize = res.data.size;
                     this.searchForm.currentPage = res.data.current;
                 } else {
+                    // 如果接口调用失败，弹出错误提示
                     popup(res.msg, "error");
                 }
             });
         },
+        // 关闭选择商品和仓库表单的方法
         closeSelectedGoods(formName) {
+            // 重置指定表单的字段值
             this.$refs[formName].resetFields();
+            // 隐藏商品入库对话框
             this.goodsInVisable = false;
+            // 隐藏新表单
             this.newVisable = false;
+            // 显示选择商品和仓库表单
             this.selectGoodsVisable = true;
         },
-        /*分页*/
+        // 处理每页显示记录数变化的方法
         handleSizeChange(val) {
+            // 更新搜索表单的每页显示记录数
             this.searchForm.pageSize = val;
+            // 重新初始化数据
             this.init();
             console.log(`每页 ${val} 条`);
         },
+        // 处理当前页码变化的方法
         handleCurrentChange(val) {
+            // 更新搜索表单的当前页码
             this.searchForm.currentPage = val;
+            // 重新初始化数据
             this.init();
             console.log(`当前页: ${val}`);
         },
+        // 提交搜索表单的方法，重新初始化数据
         submitSearchForm() {
             this.init();
         },
+        // 商品入库按钮点击的方法
         goodsInBtn() {
+            // 清空选择的商品信息对象
             this.selectGoods = {};
+            // 显示商品入库对话框
             this.goodsInVisable = true;
+            // 重置新入库表单的数据为初始空值
             this.newForm = {
                 cn: "",
                 goodsId: "",
@@ -446,29 +564,37 @@ export default {
                 storeId: "",
             };
         },
+        // 获取所有商品信息的方法
         detailStoreGoodsIn_goodsAll() {
             selected_goodsAll().then((res) => {
                 res = res.data;
+                // 如果接口返回码为 200（成功），更新商品选项数组
                 if (res.code == 200) {
                     this.options_goods = res.data;
                 } else {
+                    // 如果接口调用失败，弹出错误提示
                     popup(res.msg, "error");
                 }
             });
         },
+        // 获取所有供货商信息的方法
         detailStoreGoodsIn_suppliers() {
             queryOptionsSuppliers().then((res) => {
                 res = res.data;
+                // 如果接口返回码为 200（成功），更新供货商选项数组
                 if (res.code == 200) {
                     this.options_suppliers = res.data;
                 } else {
+                    // 如果接口调用失败，弹出错误提示
                     popup(res.msg, "error");
                 }
             });
         },
+        // 获取所有仓库信息的方法
         detailStoreGoodsIn_storeAll() {
             storeList({ state: "0" }).then((res) => {
                 res = res.data;
+                // 如果接口返回码为 200（成功），遍历数据并填充仓库选项数组
                 if (res.code == 200) {
                     for (var item of res.data) {
                         this.options_store.push({
@@ -477,16 +603,21 @@ export default {
                         });
                     }
                 } else {
+                    // 如果接口调用失败，弹出错误提示
                     popup(res.msg, "error");
                 }
             });
         },
+        // 处理选择商品和仓库表单提交的方法
         selectedGoods(formName) {
+            // 验证指定表单的字段是否符合规则
             this.$refs[formName].validate((valid) => {
                 if (valid) {
+                    // 根据选择的商品 ID 查询商品详细信息
                     queryGoodsById({ id: this.selectGoods.goodsId }).then(
                         (res) => {
                             res = res.data;
+                            // 如果接口返回码为 200（成功），进行相关表单状态和数据的更新
                             if (res.code == 200) {
                                 this.selectGoodsVisable = false;
                                 this.newVisable = true;
@@ -500,6 +631,7 @@ export default {
                                 this.newForm.goodsPrice =
                                     res.data.purchashPrice;
                             } else {
+                                // 如果接口调用失败，弹出错误提示
                                 popup(res.msg, "error");
                             }
                         }
@@ -507,51 +639,67 @@ export default {
                 }
             });
         },
+        // 提交新入库表单的方法
         submitNewForm(formName) {
+            // 验证指定表单的字段是否符合规则
             this.$refs[formName].validate((valid) => {
                 if (valid) {
+                    // 检查生产日期是否大于或等于过期日期，如果是则弹出警告提示并重置相关字段，返回不进行后续操作
                     if (this.newForm.birthTime >= this.newForm.expiryTime) {
                         popup("生成日期不能大于或等于过期日期", "warning");
                         this.newForm.birthTime = "";
                         this.newForm.expiryTime = "";
                         return;
                     }
+                    // 调用接口保存入库记录
                     saveIn(this.newForm).then((res) => {
                         res = res.data;
+                        // 如果接口返回码为 200（成功），弹出成功提示并重新初始化数据
                         if (res.code == 200) {
                             popup("入库成功");
                             this.init();
                         } else {
+                            // 如果接口调用失败，弹出错误提示
                             popup(res.msg, "error");
                         }
                     });
                 }
             });
         },
+        // 取消新入库表单操作的方法
         saveCancel(formName) {
+            // 重置指定表单的字段值
             this.$refs[formName].resetFields();
+            // 隐藏新表单
             this.newVisable = false;
+            // 显示选择商品和仓库表单
             this.selectGoodsVisable = true;
         },
+        // 删除入库记录的方法
         del(cn) {
+            // 弹出确认删除的对话框
             this.$confirm("确定删除这条记录？", "警示", {
                 confirmButtonText: "确定",
                 cancelButtonText: "取消",
                 type: "warning",
             })
-                .then(() => {
+               .then(() => {
+                    // 如果用户点击确定，调用接口删除记录
                     delIn({ cn: cn }).then((res) => {
                         res = res.data;
+                        // 如果接口返回码为 200（成功），弹出成功提示，更新搜索表单状态并重新初始化数据
                         if (res.code == 200) {
                             popup("操作成功");
                             this.searchForm.state1 = "0";
                             this.init();
                         } else {
+                            // 如果接口调用失败，弹出错误提示
                             popup(res.msg, "error");
                         }
                     });
                 })
-                .catch(() => {
+               .catch(() => {
+                    // 如果用户点击取消，弹出已取消操作的提示信息
                     this.$message({
                         type: "info",
                         message: "已取消操作",
@@ -559,24 +707,33 @@ export default {
                 });
         },
     },
+    // 组件挂载到 DOM 后的生命周期钩子函数
     mounted() {
+        // 设置搜索表单的状态为“0”
         this.searchForm.state1 = "0";
+        // 调用方法获取所有商品信息
         this.detailStoreGoodsIn_goodsAll();
+        // 调用方法获取所有仓库信息
         this.detailStoreGoodsIn_storeAll();
+        // 调用方法获取所有供货商信息
         this.detailStoreGoodsIn_suppliers();
+        // 初始化数据
         this.init();
     },
 };
 </script>
 <style>
+// 选择器.searchForm，设置高度
 .searchForm {
     height: 134px;
 }
 
+// 选择器.table，设置高度
 .table {
     height: 320px;
 }
 
+// 选择器.pageUtils，设置定位、宽度、外边距和高度
 .pageUtils {
     position: absolute;
     width: 84%;
@@ -584,6 +741,7 @@ export default {
     height: 43px;
 }
 
+// 再次选择器.searchForm，设置显示方式、外边距、高度和行高（后定义的样式会覆盖前面的）
 .searchForm {
     display: inline-block;
     margin: 0 auto;
@@ -591,6 +749,7 @@ export default {
     line-height: 51px;
 }
 
+// 选择器.searchForm.column，设置显示方式、外边距、行高和高度
 .searchForm .column {
     display: inline-block;
     margin: 0 auto;
diff --git a/superMarket-frontend/src/views/inventory_management/detail_store_goods_in/notice/List.vue b/superMarket-frontend/src/views/inventory_management/detail_store_goods_in/notice/List.vue
index 101f808..e3855d4 100644
--- a/superMarket-frontend/src/views/inventory_management/detail_store_goods_in/notice/List.vue
+++ b/superMarket-frontend/src/views/inventory_management/detail_store_goods_in/notice/List.vue
@@ -1,53 +1,73 @@
 <template>
+    <!-- 组件模板的根元素 -->
     <div>
+        <!-- 搜索表单的容器 -->
         <div class="searchForm">
+            <!-- 商品名输入框的列 -->
             <div class="column">
+                <!-- 商品名标签 -->
                 <span>商品名：</span>
+                <!-- 输入框，用于输入商品名，绑定到 searchForm.name -->
                 <el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm.name"/>
             </div>
+            <!-- 搜索按钮的列 -->
             <div class="column">
+                <!-- 成功类型的按钮，点击触发 submitSearchForm 方法 -->
                 <el-button type="success" @click="submitSearchForm">搜索</el-button>
             </div>
         </div>
+        <!-- 表格的容器 -->
         <div class="table">
+            <!-- Element UI 表格组件，数据绑定到 tableData -->
             <el-table
                     :data="tableData"
                     style="width: 100%;"
-                    
                     size="medium">
+                <!-- 序号列，使用 type="index" 自动生成序号 -->
                 <el-table-column
                         width="200"
                         type="index"
                         label="序号">
                 </el-table-column>
+                <!-- 封面列，展示商品封面图片 -->
                 <el-table-column
                         prop="coverUrl"
                         label="封面">
+                    <!-- 自定义列内容的模板 -->
                     <template v-slot="scope">
+                        <!-- 图片标签，高度固定为 60px，图片地址绑定到当前行的 coverUrl -->
                         <img height="60px" :src="scope.row.coverUrl">
                     </template>
                 </el-table-column>
+                <!-- 商品名列，展示商品名称 -->
                 <el-table-column
                         prop="name"
                         label="商品名">
                 </el-table-column>
+                <!-- 进货单价列，展示商品进货单价 -->
                 <el-table-column
                         prop="purchashPrice"
                         label="进货单价">
                 </el-table-column>
+                <!-- 入库数量列，展示商品入库数量 -->
                 <el-table-column
                         prop="goodsNum"
                         label="入库数量">
                 </el-table-column>
+                <!-- 操作列，包含入库按钮 -->
                 <el-table-column>
+                    <!-- 自定义列内容的模板 -->
                     <template v-slot="scope">
+                        <!-- 成功类型的按钮，点击触发 goodsInBtn 方法，传入当前行数据 -->
                         <el-button type="success"
                                    @click="goodsInBtn(scope.row)" plain>入库
                         </el-button>
                     </template>
                 </el-table-column>
             </el-table>
+            <!-- 分页组件的容器 -->
             <div style="margin: 10px 0 15px 0;">
+                <!-- Element UI 分页组件 -->
                 <el-pagination
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
@@ -60,19 +80,23 @@
             </div>
         </div>
 
-        <!--商品入库表单-->
+        <!-- 商品入库表单对话框 -->
         <el-dialog
                 title="商品入库"
                 :visible.sync="goodsInVisable"
                 width="50%">
+            <!-- 选择商品和仓库表单，当 selectGoodsVisable 为 true 时显示 -->
             <el-form v-if="selectGoodsVisable" :model="selectGoods" :rules="rules" ref="selectGoods" label-width="100px"
                      class="demo-ruleForm">
+                <!-- 商品选择表单项 -->
                 <el-form-item style="width:40%" label="商品：" prop="goodsId">
+                    <!-- 禁用的下拉选择框，绑定到 selectGoods.goodsId -->
                     <el-select disabled v-model="selectGoods.goodsId"
                                placeholder="请选择商品"
                                filterable
                                @change="$forceUpdate()"
                                clearable>
+                        <!-- 循环渲染商品选项 -->
                         <el-option
                                 v-for="item in options_goods"
                                 :key="item.id"
@@ -81,12 +105,15 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 仓库选择表单项 -->
                 <el-form-item style="width:40%" label="仓库：" prop="storeId">
+                    <!-- 下拉选择框，绑定到 selectGoods.storeId -->
                     <el-select v-model="selectGoods.storeId"
                                placeholder="请选择存储仓库"
                                filterable
                                @change="$forceUpdate()"
                                clearable>
+                        <!-- 循环渲染仓库选项 -->
                         <el-option
                                 v-for="item in options_store"
                                 :key="item.id"
@@ -95,33 +122,49 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 操作按钮表单项 -->
                 <el-form-item style="width:40%">
+                    <!-- 成功类型的按钮，点击触发 selectedGoods 方法 -->
                     <el-button type="success" @click="selectedGoods('selectGoods')" plain>确定</el-button>
+                    <!-- 警告类型的按钮，点击触发 closeSelectedGoods 方法 -->
                     <el-button type="warning" @click="closeSelectedGoods('selectGoods')" plain>关闭</el-button>
                 </el-form-item>
             </el-form>
+            <!-- 详细入库信息表单，当 newVisable 为 true 时显示 -->
             <el-form size="mini" v-if="newVisable" :model="newForm" :rules="rules" ref="newForm" label-width="100px"
                      class="demo-ruleForm">
+                <!-- 表单布局行 -->
                 <el-row>
+                    <!-- 左半部分列 -->
                     <el-col :span="12">
+                        <!-- 商品名表单项 -->
                         <el-form-item style="width: 60%" label="商品名：">
+                            <!-- 只读输入框，绑定到 newForm.goodsName -->
                             <el-input readonly v-model="newForm.goodsName" placeholder="如：农夫山泉"></el-input>
                         </el-form-item>
                     </el-col>
+                    <!-- 右半部分列 -->
                     <el-col :span="12">
+                        <!-- 商品数量表单项 -->
                         <el-form-item style="width: 60%" label="商品数量：" prop="goodsNum">
+                            <!-- 输入框，绑定到 newForm.goodsNum -->
                             <el-input v-model="newForm.goodsNum" :placeholder="'如：'+newGoodsNum"></el-input>
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 表单布局行 -->
                 <el-row>
+                    <!-- 左半部分列 -->
                     <el-col :span="12">
+                        <!-- 供货商选择表单项 -->
                         <el-form-item style="width: 60%" label="供货商：" prop="supplierId">
+                            <!-- 下拉选择框，绑定到 newForm.supplierId -->
                             <el-select v-model="newForm.supplierId"
                                        placeholder="请选择供货商"
                                        filterable
                                        @change="$forceUpdate()"
                                        clearable>
+                                <!-- 循环渲染供货商选项 -->
                                 <el-option
                                         v-for="item in options_suppliers"
                                         :key="item.id"
@@ -131,15 +174,22 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
+                    <!-- 右半部分列 -->
                     <el-col :span="12">
+                        <!-- 商品价格表单项 -->
                         <el-form-item style="width: 60%" label="商品价格：" prop="goodsPrice">
+                            <!-- 输入框，绑定到 newForm.goodsPrice -->
                             <el-input v-model="newForm.goodsPrice" placeholder="如：1.0"></el-input>
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 表单布局行 -->
                 <el-row>
+                    <!-- 左半部分列 -->
                     <el-col :span="12">
+                        <!-- 生产日期表单项 -->
                         <el-form-item style="width: 60%" label="生产日期：" prop="birthTime">
+                            <!-- 日期选择器，绑定到 newForm.birthTime -->
                             <el-date-picker
                                     size="mini"
                                     style="width: 140px"
@@ -150,8 +200,11 @@
                             </el-date-picker>
                         </el-form-item>
                     </el-col>
+                    <!-- 右半部分列 -->
                     <el-col :span="12">
+                        <!-- 过期日期表单项 -->
                         <el-form-item style="width: 60%" label="过期日期：" prop="expiryTime">
+                            <!-- 日期选择器，绑定到 newForm.expiryTime -->
                             <el-date-picker
                                     size="mini"
                                     style="width: 140px"
@@ -163,16 +216,23 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 表单布局行 -->
                 <el-row>
+                    <!-- 整行列 -->
                     <el-col :span="24">
+                        <!-- 备注表单项 -->
                         <el-form-item style="width: 82%" label="备注：">
+                            <!-- 文本输入框，绑定到 newForm.info -->
                             <el-input type="textarea" v-model="newForm.info" placeholder="如：农夫山泉入库"></el-input>
                         </el-form-item>
                     </el-col>
 
                 </el-row>
+                <!-- 操作按钮表单项 -->
                 <el-form-item>
+                    <!-- 主要类型的按钮，点击触发 submitNewForm 方法 -->
                     <el-button type="primary" @click="submitNewForm('newForm')">入库</el-button>
+                    <!-- 按钮，点击触发 saveCancel 方法 -->
                     <el-button @click="saveCancel('newForm')">取消</el-button>
                 </el-form-item>
             </el-form>
@@ -181,230 +241,276 @@
     </div>
 </template>
 <script>
-    import {popup} from "@/assets/js/common";
-    import {
-        queryGoodsStoreById,
-        queryPageByQo,
-        updateInventory
-    } from "@/api/goods_management/goods_store/goodsStoreApi";
-    import {queryPageNoticeIn} from "@/api/inventory_management/notice/noticeApi";
-    import {queryGoodsById, selected_goodsAll} from "@/api/goods_management/goods/goodsApi";
-    import {queryOptionsSuppliers, saveIn} from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
-    import {storeList} from "@/api/inventory_management/store/storeApi";
+// 从指定路径的文件中引入名为 popup 的函数，用于弹出提示信息
+import {popup} from "@/assets/js/common";
+// 从商品管理模块的商品库存 API 文件中引入三个函数
+// queryGoodsStoreById 用于根据 ID 查询商品库存信息
+// queryPageByQo 用于分页查询商品库存信息
+// updateInventory 用于更新商品库存信息
+import {
+    queryGoodsStoreById,
+    queryPageByQo,
+    updateInventory
+} from "@/api/goods_management/goods_store/goodsStoreApi";
+// 从库存管理模块的通知 API 文件中引入 queryPageNoticeIn 函数，用于分页查询通知信息
+import {queryPageNoticeIn} from "@/api/inventory_management/notice/noticeApi";
+// 从商品管理模块的商品 API 文件中引入两个函数
+// queryGoodsById 用于根据 ID 查询商品信息
+// selected_goodsAll 用于获取所有商品信息
+import {queryGoodsById, selected_goodsAll} from "@/api/goods_management/goods/goodsApi";
+// 从库存管理模块的入库明细 API 文件中引入两个函数
+// queryOptionsSuppliers 用于查询供货商选项
+// saveIn 用于保存商品入库信息
+import {queryOptionsSuppliers, saveIn} from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
+// 从库存管理模块的仓库 API 文件中引入 storeList 函数，用于获取仓库列表信息
+import {storeList} from "@/api/inventory_management/store/storeApi";
 
-    export default {
-        data() {
-            return {
-                newVisable: false,
-                goodsInVisable: false,
-                selectGoodsVisable: true,
-                newGoodsNum:'',
-                newForm: {
-                    cn: '',
-                    goodsId: '',
-                    goodsNum: '',
-                    goodsName: '',
-                    goodsPrice: '',
-                    info: '',
-                    expiryTime: '',
-                    birthTime: '',
-                    storeId: ''
-                },
-                /*表格*/
-                tableData: [],
-                searchForm: {
-                    total: 0,
-                    currentPage: 1,
-                    pageSize: 10,
-                    state: '0'
-                },
-                options_goods: [],
-                options_store: [],
-                options_suppliers:[],
-                selectGoods: {},
-                rules: {
-                    supplierId:[
-                        {required: true, message: '供应商不能为空', trigger: 'blur'},
-                    ],
-                    goodsId: [
-                        {required: true, message: '商品编号不能为空', trigger: 'blur'},
-                    ],
-                    storeId: [
-                        {required: true, message: '仓库编号不能为空', trigger: 'blur'},
-                    ],
-                    goodsNum: [
-                        {required: true, message: '商品数量不能为空', trigger: 'blur'},
-                    ],
-                    goodsPrice: [
-                        {required: true, message: '商品价格不能为空', trigger: 'blur'},
-                    ],
-                    expiryTime: [
-                        {required: true, message: '过期时间不能为空', trigger: 'blur'},
-                    ],
-                    birthTime: [
-                        {required: true, message: '生产时间不能为空', trigger: 'blur'},
-                    ],
-                },
-            }
-        },
-        methods: {
-            init() {
-                queryPageNoticeIn(this.searchForm).then(res => {
-                    res = res.data
-                    if (res.code == 200) {
-                        console.log(res.data)
-                        this.tableData = res.data.records
-                        this.searchForm.total = res.data.total
-                        this.searchForm.pageSize = res.data.size
-                        this.searchForm.currentPage = res.data.current
-                    } else {
-                        popup(res.msg, "error")
-                    }
-                })
-            },
-            /*分页*/
-            handleSizeChange(val) {
-                this.searchForm.pageSize = val
-                this.init()
-                console.log(`每页 ${val} 条`);
+// 导出一个默认的 Vue 组件对象
+export default {
+    // 定义组件的数据属性
+    data() {
+        return {
+            // 控制新的商品入库表单是否可见，初始值为 false（不可见）
+            newVisable: false,
+            // 控制商品入库对话框是否可见，初始值为 false（不可见）
+            goodsInVisable: false,
+            // 控制选择商品和仓库的表单是否可见，初始值为 true（可见）
+            selectGoodsVisable: true,
+            // 用于存储新商品数量的变量，初始值为空字符串
+            newGoodsNum:'',
+            // 用于存储新商品入库表单数据的对象，包含多个属性
+            newForm: {
+                cn: '', // 入库编号，初始值为空字符串
+                goodsId: '', // 商品 ID，初始值为空字符串
+                goodsNum: '', // 商品数量，初始值为空字符串
+                goodsName: '', // 商品名称，初始值为空字符串
+                goodsPrice: '', // 商品价格，初始值为空字符串
+                info: '', // 备注信息，初始值为空字符串
+                expiryTime: '', // 过期时间，初始值为空字符串
+                birthTime: '', // 生产日期，初始值为空字符串
+                storeId: '' // 仓库 ID，初始值为空字符串
             },
-            handleCurrentChange(val) {
-                this.searchForm.currentPage = val
-                this.init()
-                console.log(`当前页: ${val}`);
+            /*表格相关数据*/
+            // 用于存储表格数据的数组，初始值为空数组
+            tableData: [],
+            // 用于存储搜索表单数据的对象，包含多个属性
+            searchForm: {
+                total: 0, // 总记录数，初始值为 0
+                currentPage: 1, // 当前页码，初始值为 1
+                pageSize: 10, // 每页显示的记录数，初始值为 10
+                state: '0' // 状态，初始值为 '0'
             },
-            submitSearchForm() {
-                this.init()
+            // 用于存储商品选项的数组，初始值为空数组
+            options_goods: [],
+            // 用于存储仓库选项的数组，初始值为空数组
+            options_store: [],
+            // 用于存储供货商选项的数组，初始值为空数组
+            options_suppliers:[],
+            // 用于存储选择的商品和仓库信息的对象，初始值为空对象
+            selectGoods: {},
+            // 用于表单验证的规则对象，包含多个字段的验证规则
+            rules: {
+                supplierId:[
+                    {required: true, message: '供应商不能为空', trigger: 'blur'}, // 供应商 ID 字段必填，失去焦点时触发验证
+                ],
+                goodsId: [
+                    {required: true, message: '商品编号不能为空', trigger: 'blur'}, // 商品 ID 字段必填，失去焦点时触发验证
+                ],
+                storeId: [
+                    {required: true, message: '仓库编号不能为空', trigger: 'blur'}, // 仓库 ID 字段必填，失去焦点时触发验证
+                ],
+                goodsNum: [
+                    {required: true, message: '商品数量不能为空', trigger: 'blur'}, // 商品数量字段必填，失去焦点时触发验证
+                ],
+                goodsPrice: [
+                    {required: true, message: '商品价格不能为空', trigger: 'blur'}, // 商品价格字段必填，失去焦点时触发验证
+                ],
+                expiryTime: [
+                    {required: true, message: '过期时间不能为空', trigger: 'blur'}, // 过期时间字段必填，失去焦点时触发验证
+                ],
+                birthTime: [
+                    {required: true, message: '生产时间不能为空', trigger: 'blur'}, // 生产日期字段必填，失去焦点时触发验证
+                ],
             },
+        }
+    },
+    // 定义组件的方法
+    methods: {
+        // 初始化数据的方法
+        init() {
+            // 调用 queryPageNoticeIn 函数，传入 searchForm 作为参数进行分页查询通知信息
+            queryPageNoticeIn(this.searchForm).then(res => {
+                res = res.data // 获取响应的数据部分
+                if (res.code == 200) { // 如果响应码为 200（表示请求成功）
+                    console.log(res.data) // 在控制台打印响应数据
+                    this.tableData = res.data.records // 更新表格数据
+                    this.searchForm.total = res.data.total // 更新总记录数
+                    this.searchForm.pageSize = res.data.size // 更新每页显示的记录数
+                    this.searchForm.currentPage = res.data.current // 更新当前页码
+                } else { // 如果响应码不为 200（表示请求失败）
+                    popup(res.msg, "error") // 弹出错误提示信息
+                }
+            })
+        },
+        /*分页相关方法*/
+        // 处理每页显示记录数变化的方法
+        handleSizeChange(val) {
+            this.searchForm.pageSize = val // 更新每页显示的记录数
+            this.init() // 重新调用 init 方法以更新数据
+            console.log(`每页 ${val} 条`); // 在控制台打印每页显示的记录数
+        },
+        // 处理当前页码变化的方法
+        handleCurrentChange(val) {
+            this.searchForm.currentPage = val // 更新当前页码
+            this.init() // 重新调用 init 方法以更新数据
+            console.log(`当前页: ${val}`); // 在控制台打印当前页码
+        },
+        // 提交搜索表单的方法
+        submitSearchForm() {
+            this.init() // 重新调用 init 方法以根据搜索条件更新数据
+        },
 
-            detailStoreGoodsIn_goodsAll() {
-                selected_goodsAll().then(res => {
-                    res = res.data
-                    if (res.code == 200) {
-                        this.options_goods = res.data
-                    } else {
-                        popup(res.msg, 'error')
+        // 获取所有商品信息的方法
+        detailStoreGoodsIn_goodsAll() {
+            selected_goodsAll().then(res => { // 调用 selected_goodsAll 函数获取所有商品信息
+                res = res.data // 获取响应的数据部分
+                if (res.code == 200) { // 如果响应码为 200（表示请求成功）
+                    this.options_goods = res.data // 更新商品选项数组
+                } else { // 如果响应码不为 200（表示请求失败）
+                    popup(res.msg, 'error') // 弹出错误提示信息
+                }
+            })
+        },
+        // 获取所有供货商信息的方法
+        detailStoreGoodsIn_suppliers(){
+            queryOptionsSuppliers().then(res=>{ // 调用 queryOptionsSuppliers 函数获取供货商选项
+                    res=res.data // 获取响应的数据部分
+                    if (res.code==200){ // 如果响应码为 200（表示请求成功）
+                        this.options_suppliers=res.data // 更新供货商选项数组
+                    }else { // 如果响应码不为 200（表示请求失败）
+                        popup(res.msg,"error") // 弹出错误提示信息
                     }
-                })
-            },
-            detailStoreGoodsIn_suppliers(){
-                queryOptionsSuppliers().then(res=>{
-                        res=res.data
-                        if (res.code==200){
-                            this.options_suppliers=res.data
-                        }else {
-                            popup(res.msg,"error")
-                        }
+                }
+            )
+        },
+        // 获取所有仓库信息的方法
+        detailStoreGoodsIn_storeAll() {
+            storeList({state: '0'}).then(res => { // 调用 storeList 函数，传入状态为 '0' 获取仓库列表
+                res = res.data // 获取响应的数据部分
+                if (res.code == 200) { // 如果响应码为 200（表示请求成功）
+                    for (var item of res.data) { // 遍历响应数据
+                        this.options_store.push({id: item.id, name: item.name}) // 将仓库信息添加到仓库选项数组中
                     }
-                )
-            },
-            detailStoreGoodsIn_storeAll() {
-                storeList({state: '0'}).then(res => {
-                    res = res.data
-                    if (res.code == 200) {
-                        for (var item of res.data) {
-                            this.options_store.push({id: item.id, name: item.name})
+                } else { // 如果响应码不为 200（表示请求失败）
+                    popup(res.msg, "error") // 弹出错误提示信息
+                }
+            })
+        },
+        // 处理选择商品和仓库表单提交的方法
+        selectedGoods(formName) {
+            this.$refs[formName].validate((valid) => { // 验证指定表单的字段是否符合规则
+                if (valid) { // 如果验证通过
+                    queryGoodsById({id: this.selectGoods.goodsId}).then(res => { // 根据选择的商品 ID 查询商品信息
+                        res = res.data // 获取响应的数据部分
+                        if (res.code == 200) { // 如果响应码为 200（表示请求成功）
+                            this.selectGoodsVisable = false // 隐藏选择商品和仓库的表单
+                            this.newVisable = true // 显示新的商品入库表单
+                            this.newForm.storeId = this.selectGoods.storeId // 设置新表单的仓库 ID
+                            this.newForm.goodsId = res.data.id // 设置新表单的商品 ID
+                            this.newForm.goodsName = res.data.name // 设置新表单的商品名称
+                            this.newForm.goodsPrice = res.data.purchashPrice // 设置新表单的商品价格
+                        } else { // 如果响应码不为 200（表示请求失败）
+                            popup(res.msg, "error") // 弹出错误提示信息
                         }
-                    } else {
-                        popup(res.msg, "error")
-                    }
-                })
-            },
-            selectedGoods(formName) {
-                this.$refs[formName].validate((valid) => {
-                    if (valid) {
-                        queryGoodsById({id: this.selectGoods.goodsId}).then(res => {
-                            res = res.data
-                            if (res.code == 200) {
-                                this.selectGoodsVisable = false
-                                this.newVisable = true
-                                this.newForm.storeId = this.selectGoods.storeId
-                                this.newForm.goodsId = res.data.id
-                                this.newForm.goodsName = res.data.name
-                                this.newForm.goodsPrice = res.data.purchashPrice
-                            } else {
-                                popup(res.msg, "error")
-                            }
-                        })
-                    }
-                })
+                    })
+                }
+            })
 
-            },
-            closeSelectedGoods(formName){
-                this.$refs[formName].resetFields()
-                this.goodsInVisable=false
-                this.newVisable = false
-                this.selectGoodsVisable = true
-                this.selectGoods={}
-
-            },
-            submitNewForm(formName) {
-                this.$refs[formName].validate((valid) => {
-                    if (valid) {
-                        saveIn(this.newForm).then(res => {
-                            res = res.data
-                            if (res.code == 200) {
-                                popup("入库成功")
-                                this.goodsInVisable=false
-                                this.selectGoodsVisable = true
-                                this.newVisable = false
-                                this.init()
-                            } else {
-                                popup(res.msg, "error")
-                            }
-                        })
-                    }
-                })
+        },
+        // 关闭选择商品和仓库表单的方法
+        closeSelectedGoods(formName){
+            this.$refs[formName].resetFields() // 重置指定表单的字段值
+            this.goodsInVisable=false // 隐藏商品入库对话框
+            this.newVisable = false // 隐藏新的商品入库表单
+            this.selectGoodsVisable = true // 显示选择商品和仓库的表单
+            this.selectGoods={} // 清空选择的商品和仓库信息对象
+        },
+        // 提交新商品入库表单的方法
+        submitNewForm(formName) {
+            this.$refs[formName].validate((valid) => { // 验证指定表单的字段是否符合规则
+                if (valid) { // 如果验证通过
+                    saveIn(this.newForm).then(res => { // 调用 saveIn 函数保存商品入库信息
+                        res = res.data // 获取响应的数据部分
+                        if (res.code == 200) { // 如果响应码为 200（表示请求成功）
+                            popup("入库成功") // 弹出入库成功的提示信息
+                            this.goodsInVisable=false // 隐藏商品入库对话框
+                            this.selectGoodsVisable = true // 显示选择商品和仓库的表单
+                            this.newVisable = false // 隐藏新的商品入库表单
+                            this.init() // 重新调用 init 方法以更新数据
+                        } else { // 如果响应码不为 200（表示请求失败）
+                            popup(res.msg, "error") // 弹出错误提示信息
+                        }
+                    })
+                }
+            })
 
-            },
-            saveCancel(formName) {
-                this.$refs[formName].resetFields()
-                this.newVisable = false
-                this.selectGoodsVisable = true
-            },
-            goodsInBtn(row) {
-                this.selectGoods.goodsId=row.id
-                this.newGoodsNum=row.goodsNum
-                this.goodsInVisable = true
-            },
         },
-        mounted() {
-            this.searchForm.state1 = '0'
-            this.detailStoreGoodsIn_goodsAll()
-            this.detailStoreGoodsIn_storeAll()
-            this.detailStoreGoodsIn_suppliers()
-            this.init()
-        }
+        // 取消新商品入库表单提交的方法
+        saveCancel(formName) {
+            this.$refs[formName].resetFields() // 重置指定表单的字段值
+            this.newVisable = false // 隐藏新的商品入库表单
+            this.selectGoodsVisable = true // 显示选择商品和仓库的表单
+        },
+        // 点击入库按钮时执行的方法
+        goodsInBtn(row) {
+            this.selectGoods.goodsId=row.id // 设置选择的商品 ID 为点击行的商品 ID
+            this.newGoodsNum=row.goodsNum // 设置新商品数量为点击行的商品数量
+            this.goodsInVisable = true // 显示商品入库对话框
+        },
+    },
+    // 组件挂载到 DOM 后执行的生命周期钩子函数
+    mounted() {
+        this.searchForm.state1 = '0' // 设置搜索表单的状态为 '0'
+        this.detailStoreGoodsIn_goodsAll() // 调用获取所有商品信息的方法
+        this.detailStoreGoodsIn_storeAll() // 调用获取所有仓库信息的方法
+        this.detailStoreGoodsIn_suppliers() // 调用获取所有供货商信息的方法
+        this.init() // 调用初始化数据的方法
     }
+}
 </script>
 <style>
-    .searchForm {
-        height: 134px;
-    }
+  /* 选择器.searchForm，用于选择类名为 searchForm 的元素 */
+.searchForm {
+    height: 134px; /* 设置元素的高度为 134 像素 */
+}
 
-    .table {
-        height: 320px;
-    }
+/* 选择器.table，用于选择类名为 table 的元素 */
+.table {
+    height: 320px; /* 设置元素的高度为 320 像素 */
+}
 
-    .pageUtils {
-        position: absolute;
-        width: 84%;
-        margin: 2px auto;
-        height: 43px;
-    }
+/* 选择器.pageUtils，用于选择类名为 pageUtils 的元素 */
+.pageUtils {
+    position: absolute; /* 设置元素的定位方式为绝对定位 */
+    width: 84%; /* 设置元素的宽度为父元素宽度的 84% */
+    margin: 2px auto; /* 上下外边距为 2 像素，左右自动居中 */
+    height: 43px; /* 设置元素的高度为 43 像素 */
+}
 
-    .searchForm {
-        display: inline-block;
-        margin: 0 auto;
-        height: 51px;
-        line-height: 51px;
-    }
+/* 再次选择类名为 searchForm 的元素，这里重复定义了样式，后定义的样式会覆盖前面的 */
+.searchForm {
+    display: inline-block; /* 设置元素的显示方式为行内块元素 */
+    margin: 0 auto; /* 上下外边距为 0，左右自动居中 */
+    height: 51px; /* 设置元素的高度为 51 像素 */
+    line-height: 51px; /* 设置元素的行高为 51 像素，通常用于使单行文本垂直居中 */
+}
 
-    .searchForm .column {
-        display: inline-block;
-        margin: 0 auto;
-        margin-right: 2px;
-        line-height: 48px;
-        height: 51px;
-    }
+/* 选择器.searchForm.column，用于选择类名为 searchForm 的元素内部类名为 column 的元素 */
+.searchForm .column {
+    display: inline-block; /* 设置元素的显示方式为行内块元素 */
+    margin: 0 auto; /* 上下外边距为 0，左右自动居中 */
+    margin-right: 2px; /* 设置元素的右外边距为 2 像素 */
+    line-height: 48px; /* 设置元素的行高为 48 像素 */
+    height: 51px; /* 设置元素的高度为 51 像素 */
+}
 </style>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/inventory_management/detail_store_goods_out/List.vue b/superMarket-frontend/src/views/inventory_management/detail_store_goods_out/List.vue
index 120a6ad..ef5602a 100644
--- a/superMarket-frontend/src/views/inventory_management/detail_store_goods_out/List.vue
+++ b/superMarket-frontend/src/views/inventory_management/detail_store_goods_out/List.vue
@@ -1,27 +1,41 @@
 <template>
+    <!-- 组件的根元素，设置了 id 为 "detail_store_goods_out" -->
     <div id="detail_store_goods_out">
+        <!-- 面包屑导航组件，用于显示当前页面在导航层次结构中的位置 -->
         <el-breadcrumb separator="/">
+            <!-- 面包屑导航的首页项 -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 面包屑导航的库存管理项 -->
             <el-breadcrumb-item>库存管理 </el-breadcrumb-item>
-            <el-breadcrumb-item>出库明细</el-breadcrumb-item> </el-breadcrumb
-        ><br />
+            <!-- 面包屑导航的出库明细项 -->
+            <el-breadcrumb-item>出库明细</el-breadcrumb-item> 
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
 
+        <!-- 栅格布局容器 -->
         <el-row>
+            <!-- 栅格布局列，占 4 份，设置了右侧内边距为 10px -->
             <el-col :span="4" style="padding-right: 10px;">
+                <!-- 输入框组件，用于输入出库编号，双向绑定到 searchForm.cn -->
                 <el-input
                     placeholder="出库编号"
                     v-model="searchForm.cn"
                 />
             </el-col>
+            <!-- 栅格布局列，占 4 份 -->
             <el-col :span="4">
+                <!-- 输入框组件，用于输入商品名称，双向绑定到 searchForm.goodsName -->
                 <el-input
                     placeholder="商品名称"
                     v-model="searchForm.goodsName"
                 />
             </el-col>
+            <!-- 栅格布局列，占 16 份 -->
             <el-col :span="16">
-                
+                <!-- 显示文本 "出库时间：" -->
                 <span>出库时间：</span>
+                <!-- 日期选择器组件，用于选择起始时间，双向绑定到 searchForm.startCreateTime -->
                 <el-date-picker
                     value-format="yyyy-MM-dd"
                     v-model="searchForm.startCreateTime"
@@ -29,7 +43,9 @@
                     placeholder="起始时间"
                 >
                 </el-date-picker>
+                <!-- 显示连接符 "-" -->
                 -
+                <!-- 日期选择器组件，用于选择结束时间，双向绑定到 searchForm.endCreateTime -->
                 <el-date-picker
                     v-model="searchForm.endCreateTime"
                     value-format="yyyy-MM-dd"
@@ -39,128 +55,172 @@
                 </el-date-picker>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br>
+        <!-- 栅格布局容器 -->
         <el-row>
+            <!-- 栅格布局列，占 4 份，设置了右侧内边距为 10px -->
             <el-col :span="4" style="padding-right: 10px;">
+                <!-- 下拉选择框组件，用于选择类型，双向绑定到 searchForm.state，值变化时强制更新视图 -->
                 <el-select
                     v-model="searchForm.state"
                     @change="$forceUpdate()"
                     placeholder="类型"
                     clearable
                 >
+                    <!-- 下拉选项，标签为 "出库"，值为 "0" -->
                     <el-option label="出库" value="0"></el-option>
+                    <!-- 下拉选项，标签为 "过期"，值为 "1" -->
                     <el-option label="过期" value="1"></el-option>
+                    <!-- 下拉选项，标签为 "下架"，值为 "2" -->
                     <el-option label="下架" value="2"></el-option>
                 </el-select>
             </el-col>
+            <!-- 栅格布局列，占 4 份 -->
             <el-col :span="4">
+                <!-- 下拉选择框组件，用于选择状态，双向绑定到 searchForm.state1，值变化时强制更新视图 -->
                 <el-select
                     v-model="searchForm.state1"
                     @change="$forceUpdate()"
                     placeholder="请选择状态"
                     clearable
                 >
+                    <!-- 下拉选项，标签为 "正常"，值为 "0" -->
                     <el-option label="正常" value="0"></el-option>
+                    <!-- 下拉选项，标签为 "删除"，值为 "1" -->
                     <el-option label="删除" value="1"></el-option>
                 </el-select>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 栅格布局容器 -->
         <el-row>
+            <!-- 栅格布局列，占 24 份，文本左对齐 -->
             <el-col :span="24" style="text-align: left">
+                <!-- 主要按钮组件，点击时调用 submitSearchForm 方法，设置了字体大小 -->
                 <el-button
                     type="primary"
                     @click="submitSearchForm"
                     style="font-size: 18px"
                 >
+                    <!-- 图标字体 -->
                     <i class="iconfont icon-r-find" style="font-size: 18px">
                     </i>
-                     搜索</el-button
-                >
+                    <!-- 按钮文本 "搜索" -->
+                     搜索</el-button>
+                <!-- 警告按钮组件，点击时调用 goodsOutBtn 方法，设置了字体大小 -->
                 <el-button
                     type="warning"
                     @click="goodsOutBtn"
                     style="font-size: 18px"
                 >
+                    <!-- 图标字体 -->
                     <i class="iconfont icon-r-left" style="font-size: 18px"> </i>
+                    <!-- 按钮文本 "商品出库" -->
                      商品出库
                 </el-button>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 表格容器，添加了 class 为 "table" -->
         <div class="table">
+            <!-- 表格组件，数据绑定到 tableData，设置了宽度为 100%，尺寸为 medium -->
             <el-table :data="tableData" style="width: 100%" size="medium">
+                <!-- 表格列，显示编号，宽度为 200，绑定到数据的 cn 字段 -->
                 <el-table-column prop="cn" width="200" label="编号">
                 </el-table-column>
+                <!-- 表格列，显示商品名，当内容溢出时显示 tooltip，绑定到数据的 goodsName 字段 -->
                 <el-table-column
                     prop="goodsName"
                     :show-overflow-tooltip="true"
                     label="商品名"
                 >
                 </el-table-column>
+                <!-- 表格列，显示仓库，当内容溢出时显示 tooltip，绑定到数据的 storeName 字段 -->
                 <el-table-column
                     prop="storeName"
                     :show-overflow-tooltip="true"
                     label="仓库"
                 >
                 </el-table-column>
+                <!-- 表格列，显示商品数量，绑定到数据的 goodsNum 字段 -->
                 <el-table-column prop="goodsNum" label="商品数量">
                 </el-table-column>
+                <!-- 表格列，显示类型，根据数据的 state 字段值显示不同标签 -->
                 <el-table-column prop="state" label="类型">
+                    <!-- 自定义列内容的插槽 -->
                     <template v-slot="scope">
+                        <!-- 当 state 为 "2" 时，显示 "下架" 标签，类型为 danger -->
                         <el-tag
                             type="danger"
                             v-if="scope.row.state == '2'"
                             >下架</el-tag
                         >
+                        <!-- 当 state 为 "1" 时，显示 "过期" 标签，类型为 danger -->
                         <el-tag
                             type="danger"
                             v-else-if="scope.row.state == '1'"
                             >过期</el-tag
                         >
+                        <!-- 当 state 不为 "1" 和 "2" 时，显示 "出库" 标签，类型为 warning -->
                         <el-tag type="warning" v-else
                             >出库</el-tag
                         >
                     </template>
                 </el-table-column>
+                <!-- 表格列，显示状态，根据数据的 state1 字段值显示不同标签 -->
                 <el-table-column prop="state1" label="状态">
+                    <!-- 自定义列内容的插槽 -->
                     <template v-slot="scope">
+                        <!-- 当 state1 为 "0" 时，显示 "正常" 标签，类型为 success -->
                         <el-tag
                             type="success"
                             v-if="scope.row.state1 == '0'"
                             >正常</el-tag
                         >
+                        <!-- 当 state1 不为 "0" 时，显示 "删除" 标签，类型为 danger -->
                         <el-tag type="danger" v-else>删除</el-tag>
                     </template>
                 </el-table-column>
+                <!-- 表格列，显示出库者，绑定到数据的 createby 字段 -->
                 <el-table-column prop="createby" label="出库者">
                 </el-table-column>
+                <!-- 表格列，显示出库时间，当内容溢出时显示 tooltip，绑定到数据的 createTime 字段 -->
                 <el-table-column
                     prop="createTime"
                     :show-overflow-tooltip="true"
                     label="出库时间"
                 >
                 </el-table-column>
+                <!-- 表格列，显示备注，当内容溢出时显示 tooltip，绑定到数据的 info 字段 -->
                 <el-table-column
                     prop="info"
                     :show-overflow-tooltip="true"
                     label="备注"
                 >
                 </el-table-column>
+                <!-- 表格列，显示操作按钮，固定在右侧，宽度为 140 -->
                 <el-table-column width="140" label="操作" fixed="right">
+                    <!-- 自定义列内容的插槽 -->
                     <template v-slot="scope">
+                        <!-- 危险按钮组件，点击时调用 del 方法并传入当前行的 cn 值，设置了字体大小和图标 -->
                         <el-button
                             type="danger"
                             @click="del(scope.row.cn)"
                             style="font-size: 18px"
                             >
                             <i class="iconfont icon-r-delete" style="font-size: 18px;"></i>
+                            <!-- 按钮文本 "删除" -->
                              删除
                         </el-button>
                     </template>
                 </el-table-column>
             </el-table>
+            <!-- 分页组件容器，设置了外边距 -->
             <div style="margin: 10px 0 15px 0">
+                <!-- 分页组件，处理分页相关操作 -->
                 <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
@@ -173,8 +233,9 @@
                 </el-pagination>
             </div>
         </div>
-        <!--商品出库-->
+        <!-- 商品出库对话框，标题为 "商品出库"，根据 goodsOutVisable 的值显示或隐藏，宽度为 50% -->
         <el-dialog title="商品出库" :visible.sync="goodsOutVisable" width="50%">
+            <!-- 表单组件，当 selectGoodsVisable 为 true 时显示，绑定数据、验证规则和引用 -->
             <el-form
                 v-if="selectGoodsVisable"
                 :model="selectGoods"
@@ -183,7 +244,9 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 表单字段项，标签为 "商品："，绑定到数据的 goodsId 字段 -->
                 <el-form-item label="商品：" prop="goodsId">
+                    <!-- 下拉选择框组件，值变化时调用 changeGoods 方法，双向绑定到 selectGoods.goodsId -->
                     <el-select
                         @change="changeGoods"
                         v-model="selectGoods.goodsId"
@@ -191,6 +254,7 @@
                         filterable
                         clearable
                     >
+                        <!-- 循环生成下拉选项，根据 options_goods 数组数据 -->
                         <el-option
                             v-for="item in options_goods"
                             :key="item.id"
@@ -200,7 +264,9 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单字段项，标签为 "仓库："，绑定到数据的 storeId 字段 -->
                 <el-form-item label="仓库：" prop="storeId">
+                    <!-- 下拉选择框组件，值变化时调用 changeStore 方法，双向绑定到 selectGoods.storeId -->
                     <el-select
                         v-model="selectGoods.storeId"
                         @change="changeStore"
@@ -208,6 +274,7 @@
                         filterable
                         clearable
                     >
+                        <!-- 循环生成下拉选项，根据 options_store 数组数据 -->
                         <el-option
                             v-for="item in options_store"
                             :key="item.id"
@@ -217,7 +284,9 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单字段项，标签为 "类型："，绑定到数据的 state 字段 -->
                 <el-form-item label="类型：" prop="state">
+                    <!-- 下拉选择框组件，双向绑定到 selectGoods.state，值变化时强制更新视图 -->
                     <el-select
                         v-model="selectGoods.state"
                         @change="$forceUpdate()"
@@ -225,29 +294,37 @@
                         placeholder="请选择类型"
                         clearable
                     >
+                        <!-- 下拉选项，标签为 "出库"，值为 "0" -->
                         <el-option label="出库" value="0"></el-option>
+                        <!-- 下拉选项，标签为 "过期"，值为 "1" -->
                         <el-option label="过期" value="1"></el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单字段项，包含确定和关闭按钮 -->
                 <el-form-item>
+                    <!-- 成功按钮组件，点击时调用 selectedGoods 方法，设置了字体大小和图标 -->
                     <el-button
                         type="success"
                         @click="selectedGoods('selectGoods')"
                         style="font-size: 18px;"
                         >
                         <i class="iconfont icon-r-yes" style="font-size: 18px;"></i>
+                        <!-- 按钮文本 "确定" -->
                          确定
                         </el-button
                     >
+                    <!-- 警告按钮组件，点击时调用 closeSelectedGoods 方法，设置了字体大小 -->
                     <el-button
                         type="warning"
                         @click="closeSelectedGoods('selectGoods')"
                         style="font-size: 18px;"
                         >
+                        <!-- 按钮文本 "关闭" -->
                          关闭</el-button
                     >
                 </el-form-item>
             </el-form>
+            <!-- 表单组件，当 newVisable 为 true 时显示，绑定数据、验证规则和引用 -->
             <el-form
                 v-if="newVisable"
                 :model="newForm"
@@ -256,9 +333,13 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 表单行组件 -->
                 <el-row>
+                    <!-- 表单列组件，占 12 份 -->
                     <el-col :span="12">
+                        <!-- 表单字段项，标签为 "商品名：" -->
                         <el-form-item label="商品名：">
+                            <!-- 只读输入框，双向绑定到 newForm.goodsName -->
                             <el-input
                                 readonly
                                 v-model="newForm.goodsName"
@@ -266,11 +347,14 @@
                             ></el-input>
                         </el-form-item>
                     </el-col>
+                    <!-- 表单列组件，占 12 份 -->
                     <el-col :span="12">
+                        <!-- 表单字段项，标签为 "类型："，绑定到数据的 state 字段 -->
                         <el-form-item
                             label="类型："
                             prop="state"
                         >
+                            <!-- 禁用的下拉选择框，双向绑定到 newForm.state，值变化时强制更新视图 -->
                             <el-select
                                 disabled
                                 v-model="newForm.state"
@@ -279,19 +363,25 @@
                                 placeholder="请选择类型"
                                 clearable
                             >
+                                <!-- 下拉选项，标签为 "出库"，值为 "0" -->
                                 <el-option label="出库" value="0"></el-option>
+                                <!-- 下拉选项，标签为 "过期"，值为 "1" -->
                                 <el-option label="过期" value="1"></el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 表单行组件 -->
                 <el-row>
+                    <!-- 表单列组件，占 12 份 -->
                     <el-col :span="12">
+                        <!-- 表单字段项，标签为 "商品数量："，绑定到数据的 goodsNum 字段 -->
                         <el-form-item
                             label="商品数量："
                             prop="goodsNum"
                         >
-                            <el-input
+                            <!-- 数字输入框，值变化时进行数量范围
+                                                        <el-input
                                 type="number"
                                 @change="
                                     () => {
@@ -314,11 +404,14 @@
                             ></el-input>
                         </el-form-item>
                     </el-col>
+                    <!-- 表单列组件，占 12 份 -->
                     <el-col :span="12">
+                        <!-- 表单字段项，标签为 "仓库："，绑定到数据的 storeId 字段 -->
                         <el-form-item
                             label="仓库："
                             prop="storeId"
                         >
+                            <!-- 禁用的下拉选择框，双向绑定到 newForm.storeId，值变化时调用 changeStore 方法 -->
                             <el-select
                                 disabled
                                 v-model="newForm.storeId"
@@ -327,6 +420,7 @@
                                 filterable
                                 clearable
                             >
+                                <!-- 循环生成下拉选项，根据 options_store 数组数据 -->
                                 <el-option
                                     v-for="item in options_store"
                                     :key="item.id"
@@ -338,12 +432,16 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 表单行组件 -->
                 <el-row>
+                    <!-- 表单列组件，占 12 份 -->
                     <el-col :span="12">
+                        <!-- 表单字段项，标签为 "出库日期："，绑定到数据的 createTime 字段 -->
                         <el-form-item
                             label="出库日期："
                             prop="createTime"
                         >
+                            <!-- 日期选择器组件，设置尺寸为 mini，宽度为 140px，绑定到 newForm.createTime -->
                             <el-date-picker
                                 size="mini"
                                 style="width: 140px"
@@ -355,8 +453,11 @@
                             </el-date-picker>
                         </el-form-item>
                     </el-col>
+                    <!-- 表单列组件，占 12 份 -->
                     <el-col :span="12">
+                        <!-- 表单字段项，标签为 "备注：" -->
                         <el-form-item label="备注：">
+                            <!-- 文本域输入框，双向绑定到 newForm.info -->
                             <el-input
                                 type="textarea"
                                 v-model="newForm.info"
@@ -365,12 +466,16 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 表单字段项，包含出库和取消按钮 -->
                 <el-form-item>
+                    <!-- 警告按钮组件，点击时调用 submitNewForm 方法，设置了字体大小和图标 -->
                     <el-button type="warning" @click="submitNewForm('newForm')" style="font-size: 18px;"
                         >
                         <i class="iconfont icon-r-left" style="font-size: 18px;"></i>
+                        <!-- 按钮文本 "出库" -->
                          出库</el-button
                     >
+                    <!-- 按钮组件，点击时调用 saveCancel 方法，设置了字体大小 -->
                     <el-button @click="saveCancel('newForm')" style="font-size: 18px;">取消</el-button>
                 </el-form-item>
             </el-form>
@@ -378,279 +483,379 @@
     </div>
 </template>
 <script>
-import {
-    changeOutGoods,
-    changeOutStore,
-    delIn,
-    delOut,
-    initOptions,
-    initOutOptions,
-    queryOutGoods,
-    queryPageByQoOut,
-    saveIn,
-    saveOut,
-} from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
-import { popup } from "@/assets/js/common";
-import {
-    queryGoodsById,
-    selected_goodsAll,
-} from "@/api/goods_management/goods/goodsApi";
-import { storeList } from "@/api/inventory_management/store/storeApi";
+    // 引入库存管理中商品出库相关的 API 方法
+    import {
+        changeOutGoods,
+        changeOutStore,
+        delIn,
+        delOut,
+        initOptions,
+        initOutOptions,
+        queryOutGoods,
+        queryPageByQoOut,
+        saveIn,
+        saveOut,
+    } from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
+    // 引入通用的弹出提示方法
+    import { popup } from "@/assets/js/common";
+    // 引入商品管理中商品相关的 API 方法
+    import {
+        queryGoodsById,
+        selected_goodsAll,
+    } from "@/api/goods_management/goods/goodsApi";
+    // 引入库存管理中仓库相关的 API 方法
+    import { storeList } from "@/api/inventory_management/store/storeApi";
 
-export default {
-    data() {
-        return {
-            goodsOutVisable: false,
-            selectGoodsVisable: true,
-            newVisable: false,
-            searchForm: {
-                pageSize: 5
-            },
-            tableData: [],
-            options_store: [],
-            goodsNum_max: "",
-            newForm: {
-                goodsId: "",
-                goodsNum: "",
-                goodsName: "",
-                info: "",
-                createTime: "",
-                storeId: "",
-                state: "",
-            },
-            rules: {
-                goodsId: [
-                    {
-                        required: true,
-                        message: "商品编号不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                storeId: [
-                    {
-                        required: true,
-                        message: "仓库编号不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                state: [
-                    {
-                        required: true,
-                        message: "类型不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                goodsNum: [
-                    {
-                        required: true,
-                        message: "出库数量不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                createTime: [
-                    {
-                        required: true,
-                        message: "出库日期不能为空",
-                        trigger: "blur",
-                    },
-                ],
-            },
-            options_goods: [],
-            selectGoods: {},
-        };
-    },
-    methods: {
-        changeGoods() {
-            this.$forceUpdate();
-            changeOutGoods({ gid: this.selectGoods.goodsId }).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.options_store = res.data;
-                }
-            });
+    // 导出默认的 Vue 组件对象
+    export default {
+        // 定义组件的数据属性
+        data() {
+            return {
+                // 控制商品出库对话框的显示状态
+                goodsOutVisable: false,
+                // 控制选择商品表单的显示状态
+                selectGoodsVisable: true,
+                // 控制新表单的显示状态
+                newVisable: false,
+                // 搜索表单的数据对象，初始设置每页显示 5 条数据
+                searchForm: {
+                    pageSize: 5
+                },
+                // 表格数据数组
+                tableData: [],
+                // 仓库选项数组
+                options_store: [],
+                // 商品数量的最大值
+                goodsNum_max: "",
+                // 新表单的数据对象，包含商品出库相关信息
+                newForm: {
+                    goodsId: "",
+                    goodsNum: "",
+                    goodsName: "",
+                    info: "",
+                    createTime: "",
+                    storeId: "",
+                    state: "",
+                },
+                // 表单验证规则对象
+                rules: {
+                    goodsId: [
+                        {
+                            required: true,
+                            message: "商品编号不能为空",
+                            trigger: "blur",
+                        },
+                    ],
+                    storeId: [
+                        {
+                            required: true,
+                            message: "仓库编号不能为空",
+                            trigger: "blur",
+                        },
+                    ],
+                    state: [
+                        {
+                            required: true,
+                            message: "类型不能为空",
+                            trigger: "blur",
+                        },
+                    ],
+                    goodsNum: [
+                        {
+                            required: true,
+                            message: "出库数量不能为空",
+                            trigger: "blur",
+                        },
+                    ],
+                    createTime: [
+                        {
+                            required: true,
+                            message: "出库日期不能为空",
+                            trigger: "blur",
+                        },
+                    ],
+                },
+                // 商品选项数组
+                options_goods: [],
+                // 选择商品表单的数据对象
+                selectGoods: {},
+            };
         },
-        changeStore() {
-            this.$forceUpdate();
-            changeOutStore({ storeId: this.selectGoods.storeId }).then(
-                (res) => {
+        // 定义组件的方法
+        methods: {
+            // 当选择的商品变化时调用的方法
+            changeGoods() {
+                // 强制更新视图
+                this.$forceUpdate();
+                // 调用 API 方法，根据选择的商品 ID 获取相关仓库信息
+                changeOutGoods({ gid: this.selectGoods.goodsId }).then((res) => {
                     res = res.data;
                     if (res.code == 200) {
-                        this.options_goods = res.data;
+                        // 更新仓库选项数组
+                        this.options_store = res.data;
                     }
-                }
-            );
-        },
-        initOptions() {
-            initOutOptions().then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.options_goods = res.data.goods;
-                    this.options_store = res.data.stores;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        init() {
-            if (
-                this.searchForm.startCreateTime > this.searchForm.endCreateTime
-            ) {
-                popup("结束时间不能小于开始时间", "warning");
-                return;
-            }
-            queryPageByQoOut(this.searchForm).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.tableData = res.data.records;
-                    this.searchForm.total = res.data.total;
-                    this.searchForm.pageSize = res.data.size;
-                    this.searchForm.currentPage = res.data.current;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        del(cn) {
-            this.$confirm("确定删除这条记录？", "警示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    delOut({ cn: cn }).then((res) => {
+                });
+            },
+            // 当选择的仓库变化时调用的方法
+            changeStore() {
+                // 强制更新视图
+                this.$forceUpdate();
+                // 调用 API 方法，根据选择的仓库 ID 获取相关商品信息
+                changeOutStore({ storeId: this.selectGoods.storeId }).then(
+                    (res) => {
                         res = res.data;
                         if (res.code == 200) {
-                            popup("操作成功");
-                            this.searchForm.state1 = "0";
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
+                            // 更新商品选项数组
+                            this.options_goods = res.data;
                         }
-                    });
+                    }
+                );
+            },
+            // 初始化商品和仓库选项的方法
+            initOptions() {
+                // 调用 API 方法获取商品和仓库的初始选项数据
+                initOutOptions().then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新商品选项数组
+                        this.options_goods = res.data.goods;
+                        // 更新仓库选项数组
+                        this.options_store = res.data.stores;
+                    } else {
+                        // 弹出错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 初始化数据（如查询出库明细数据）的方法
+            init() {
+                // 检查起始时间是否大于结束时间，若大于则弹出警告提示并返回
+                if (
+                    this.searchForm.startCreateTime > this.searchForm.endCreateTime
+                ) {
+                    popup("结束时间不能小于开始时间", "warning");
+                    return;
+                }
+                // 调用 API 方法，根据搜索表单数据查询出库明细数据
+                queryPageByQoOut(this.searchForm).then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新表格数据数组
+                        this.tableData = res.data.records;
+                        // 更新搜索表单的总记录数
+                        this.searchForm.total = res.data.total;
+                        // 更新搜索表单的每页显示记录数
+                        this.searchForm.pageSize = res.data.size;
+                        // 更新搜索表单的当前页码
+                        this.searchForm.currentPage = res.data.current;
+                    } else {
+                        // 弹出错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 删除出库记录的方法
+            del(cn) {
+                // 弹出确认删除的对话框
+                this.$confirm("确定删除这条记录？", "警示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
                 })
-                .catch(() => {
-                    this.$message({
-                        type: "info",
-                        message: "已取消操作",
+                    .then(() => {
+                        // 调用 API 方法删除出库记录
+                        delOut({ cn: cn }).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 弹出操作成功提示
+                                popup("操作成功");
+                                // 设置搜索表单的状态为正常（0）
+                                this.searchForm.state1 = "0";
+                                // 重新初始化数据
+                                this.init();
+                            } else {
+                                // 弹出错误提示
+                                popup(res.msg, "error");
+                            }
+                        });
+                    })
+                    .catch(() => {
+                        // 若取消删除操作，弹出已取消操作的提示
+                        this.$message({
+                            type: "info",
+                            message: "已取消操作",
+                        });
                     });
+            },
+            // 处理每页显示记录数变化的方法
+            handleSizeChange(val) {
+                // 更新搜索表单的每页显示记录数
+                this.searchForm.pageSize = val;
+                // 重新初始化数据
+                this.init();
+                console.log(`每页 ${val} 条`);
+            },
+            // 处理当前页码变化的方法
+            handleCurrentChange(val) {
+                // 更新搜索表单的当前页码
+                this.searchForm.currentPage = val;
+                // 重新初始化数据
+                this.init();
+                console.log(`当前页: ${val}`);
+            },
+            // 提交搜索表单的方法
+            submitSearchForm() {
+                // 重新初始化数据
+                this.init();
+            },
+            // 点击商品出库按钮时调用的方法
+            goodsOutBtn() {
+                // 设置选择的商品类型为出库（0）
+                this.selectGoods.state = "0";
+                // 显示商品出库对话框
+                this.goodsOutVisable = true;
+                // 显示选择商品表单
+                this.selectGoodsVisable = true;
+                // 隐藏新表单
+                this.newVisable = false;
+                // 重置新表单的数据对象
+                this.newForm = {
+                    goodsId: "",
+                    goodsNum: "",
+                    goodsName: "",
+                    info: "",
+                    createTime: "",
+                    storeId: "",
+                    state: "",
+                };
+            },
+            // 选择商品表单提交时调用的方法
+            selectedGoods(formName) {
+                // 验证表单字段
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 调用 API 方法，根据选择的商品信息查询商品详细数据
+                        queryOutGoods(this.selectGoods).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 隐藏选择商品表单
+                                this.selectGoodsVisable = false;
+                                // 显示新表单
+                                this.newVisable = true;
+                                // 更新新表单的商品数量
+                                this.newForm.goodsNum = res.data.goodsNum;
+                                // 设置商品数量的最大值
+                                this.goodsNum_max = res.data.goodsNum;
+                                // 更新新表单的商品名称
+                                this.newForm.goodsName = res.data.goodsName;
+                                // 更新新表单的商品类型
+                                this.newForm.state = this.selectGoods.state;
+                                // 更新新表单的仓库 ID
+                                this.newForm.storeId = this.selectGoods.storeId;
+                                // 更新新表单的商品 ID
+                                this.newForm.goodsId = this.selectGoods.goodsId;
+                                // 清空选择商品表单的数据对象
+                                this.selectGoods = {};
+                            } else {
+                                // 弹出错误提示
+                                popup(res.msg, "error");
+                            }
+                        });
+                    }
                 });
+            },
+            // 关闭选择商品表单的方法
+            closeSelectedGoods(formName) {
+                // 重置表单字段
+                this.$refs[formName].resetFields();
+                // 清空选择商品表单的数据对象
+                this.selectGoods = {};
+                // 隐藏商品出库对话框
+                this.goodsOutVisable = false;
+            },
+            // 提交新表单（商品出库表单）的方法
+            submitNewForm(formName) {
+                // 验证表单字段
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 调用 API 方法提交新表单数据
+                        saveOut(this.newForm).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 弹出出库成功提示
+                                popup("出库成功");
+                                // 设置搜索表单的状态为正常（0）
+                                this.searchForm.state1 = "0";
+                                // 隐藏商品出库对话框
+                                this.goodsOutVisable = false;
+                                // 隐藏新表单
+                                this.newVisable = false;
+                                // 显示选择商品表单
+                                this.selectGoodsVisable = true;
+                                // 重新初始化数据
+                                this.init();
+                            } else {
+                                // 弹出错误提示
+                                popup(res.msg, "error");
+                            }
+                        });
+                    }
+                });
+            },
+            // 取消新表单操作的方法
+            saveCancel(formName) {
+                // 重置表单字段
+                this.$refs[formName].resetFields();
+                // 隐藏新表单
+                this.newVisable = false;
+                // 显示选择商品表单
+                this.selectGoodsVisable = true;
+            },
         },
-        /*分页*/
-        handleSizeChange(val) {
-            this.searchForm.pageSize = val;
-            this.init();
-            console.log(`每页 ${val} 条`);
-        },
-        handleCurrentChange(val) {
-            this.searchForm.currentPage = val;
-            this.init();
-            console.log(`当前页: ${val}`);
-        },
-        submitSearchForm() {
+        // 组件挂载时执行的钩子函数
+        mounted() {
+            // 设置搜索表单的状态为正常（0）
+            this.searchForm.state1 = "0";
+            // 初始化商品和仓库选项
+            this.initOptions();
+            // 初始化数据（查询出库明细数据）
             this.init();
         },
-        goodsOutBtn() {
-            this.selectGoods.state = "0";
-            this.goodsOutVisable = true;
-            this.selectGoodsVisable = true;
-            this.newVisable = false;
-            this.newForm = {
-                goodsId: "",
-                goodsNum: "",
-                goodsName: "",
-                info: "",
-                createTime: "",
-                storeId: "",
-                state: "",
-            };
-        },
-        selectedGoods(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    queryOutGoods(this.selectGoods).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            this.selectGoodsVisable = false;
-                            this.newVisable = true;
-                            this.newForm.goodsNum = res.data.goodsNum;
-                            this.goodsNum_max = res.data.goodsNum;
-                            this.newForm.goodsName = res.data.goodsName;
-                            this.newForm.state = this.selectGoods.state;
-                            this.newForm.storeId = this.selectGoods.storeId;
-                            this.newForm.goodsId = this.selectGoods.goodsId;
-                            this.selectGoods = {};
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
-                }
-            });
-        },
-        closeSelectedGoods(formName) {
-            this.$refs[formName].resetFields();
-            this.selectGoods = {};
-            this.goodsOutVisable = false;
-        },
-        submitNewForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    saveOut(this.newForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("出库成功");
-                            this.searchForm.state1 = "0";
-                            this.goodsOutVisable = false;
-                            this.newVisable = false;
-                            this.selectGoodsVisable = true;
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
-                }
-            });
-        },
-        saveCancel(formName) {
-            this.$refs[formName].resetFields();
-            this.newVisable = false;
-            this.selectGoodsVisable = true;
-        },
-    },
-    mounted() {
-        this.searchForm.state1 = "0";
-        this.initOptions();
-        this.init();
-    },
-};
+    };
 </script>
 <style>
-.searchForm {
-    height: 134px;
-}
+    /* 设置 searchForm 类元素的高度 */
+   .searchForm {
+        height: 134px;
+    }
 
-.table {
-    height: 320px;
-}
+    /* 设置 table 类元素的高度 */
+   .table {
+        height: 320px;
+    }
 
-.pageUtils {
-    position: absolute;
-    width: 84%;
-    margin: 2px auto;
-    height: 43px;
-}
+    /* 设置 pageUtils 类元素的定位、宽度、外边距和高度 */
+   .pageUtils {
+        position: absolute;
+        width: 84%;
+        margin: 2px auto;
+        height: 43px;
+    }
 
-.searchForm {
-    display: inline-block;
-    margin: 0 auto;
-    height: 51px;
-    line-height: 51px;
-}
+    /* 再次设置 searchForm 类元素的显示方式、外边距、高度和行高，后定义的样式会覆盖前面的 */
+   .searchForm {
+        display: inline-block;
+        margin: 0 auto;
+        height: 51px;
+        line-height: 51px;
+    }
 
-.searchForm .column {
-    display: inline-block;
-    margin: 0 auto;
-    margin-right: 2px;
-    line-height: 48px;
-    height: 51px;
-}
-</style>
\ No newline at end of file
+    /* 设置 searchForm 类下的 column 类元素的显示方式、外边距、行高和高度 */
+   .searchForm.column {
+        display: inline-block;
+        margin: 0 auto;
+        margin-right: 2px;
+        line-height: 48px;
+        height: 51px;
+    }
+</style>
diff --git a/superMarket-frontend/src/views/inventory_management/detail_store_goods_out/notice/List.vue b/superMarket-frontend/src/views/inventory_management/detail_store_goods_out/notice/List.vue
index 2a1b0d3..42230ac 100644
--- a/superMarket-frontend/src/views/inventory_management/detail_store_goods_out/notice/List.vue
+++ b/superMarket-frontend/src/views/inventory_management/detail_store_goods_out/notice/List.vue
@@ -1,67 +1,89 @@
 <template>
+    <!-- 组件的根元素，设置唯一的 ID -->
     <div id="detail_store_goods_in">
+        <!-- 包含标题和按钮的区域 -->
         <div class="noticeOut">
+            <!-- 显示查看出库商品面板的标题 -->
             <h1>查看出库商品面板</h1>
+            <!-- 包含两个按钮的区域 -->
             <div class="btns">
+                <!-- 点击后调用 outGoodsBtn 方法，显示出库货架商品的对话框 -->
                 <el-button @click="outGoodsBtn" style="width: 200px;height: 100px;background-color: #c09dff">出库货架商品
                 </el-button>
+                <!-- 点击后调用 outUntreated 方法，显示过期/下架商品的对话框 -->
                 <el-button @click="outUntreated" style="width: 200px;height: 100px;background-color: #c09dff">过期/下架商品
                 </el-button>
-
             </div>
         </div>
-        <!--商品上货架-->
+        <!-- 商品上货架的对话框，全屏显示 -->
         <el-dialog
                 :fullscreen="true"
                 :visible.sync="visable1">
+            <!-- 搜索表单区域 -->
             <div class="searchForm">
+                <!-- 搜索表单的列，包含商品名输入框 -->
                 <div class="column">
+                    <!-- 显示“商品名：”标签 -->
                     <span>商品名：</span>
+                    <!-- 输入框，用于输入商品名，双向绑定到 searchForm.name -->
                     <el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm.name"/>
                 </div>
+                <!-- 搜索表单的列，包含搜索和关闭按钮 -->
                 <div class="column">
+                    <!-- 点击后调用 submitSearchForm 方法进行搜索 -->
                     <el-button type="success" @click="submitSearchForm">搜索</el-button>
+                    <!-- 点击后隐藏对话框 -->
                     <el-button type="primary" @click="visable1=false">关闭</el-button>
                 </div>
             </div>
+            <!-- 表格区域 -->
             <div class="table">
+                <!-- 表格组件，数据绑定到 tableData -->
                 <el-table
                         :data="tableData"
                         style="width: 100%;"
-                        
                         size="medium">
+                    <!-- 表格列，显示序号 -->
                     <el-table-column
                             width="200"
                             type="index"
                             label="序号">
                     </el-table-column>
+                    <!-- 表格列，显示商品封面 -->
                     <el-table-column
                             prop="coverUrl"
                             label="封面">
+                        <!-- 自定义列内容，显示商品封面图片 -->
                         <template v-slot="scope">
                             <img height="60px" :src="scope.row.coverUrl">
                         </template>
                     </el-table-column>
+                    <!-- 表格列，显示商品名 -->
                     <el-table-column
                             prop="name"
                             label="商品名">
                     </el-table-column>
+                    <!-- 表格列，显示出货数量 -->
                     <el-table-column
                             prop="goodsNum"
                             label="出货数量">
                     </el-table-column>
+                    <!-- 表格列，显示操作按钮 -->
                     <el-table-column
                             width="100px"
                             label="操作">
+                        <!-- 自定义列内容，显示出货按钮 -->
                         <template v-slot="scope">
+                            <!-- 点击后调用 outGoodsBtn1 方法，处理出货操作 -->
                             <el-button type="warning"
                                        @click="outGoodsBtn1(scope.row)" plain>出货
                             </el-button>
                         </template>
                     </el-table-column>
-
                 </el-table>
+                <!-- 分页组件区域 -->
                 <div style="margin: 10px 0 15px 0;">
+                    <!-- 分页组件，处理分页相关操作 -->
                     <el-pagination
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
@@ -74,18 +96,22 @@
                 </div>
             </div>
         </el-dialog>
-        <!--商品出库-->
+        <!-- 商品出库的对话框 -->
         <el-dialog
                 title="商品出库"
                 :visible.sync="goodsOutVisable"
                 width="50%">
+            <!-- 选择商品和仓库的表单，当 selectGoodsVisable 为 true 时显示 -->
             <el-form v-if="selectGoodsVisable" :model="selectGoods" :rules="rules" ref="selectGoods" label-width="100px"
                      class="demo-ruleForm">
+                <!-- 商品选择的表单项 -->
                 <el-form-item style="width:40%" label="商品：" prop="goodsId">
+                    <!-- 下拉选择框，禁用状态，双向绑定到 selectGoods.goodsId -->
                     <el-select disabled v-model="selectGoods.goodsId"
                                placeholder="请选择商品"
                                filterable
                                clearable>
+                        <!-- 循环生成商品选项 -->
                         <el-option
                                 v-for="item in options_goods"
                                 :key="item.id"
@@ -94,12 +120,15 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 仓库选择的表单项 -->
                 <el-form-item style="width:40%" label="仓库：" prop="storeId">
+                    <!-- 下拉选择框，双向绑定到 selectGoods.storeId -->
                     <el-select v-model="selectGoods.storeId"
                                @change="$forceUpdate"
                                placeholder="请选择仓库"
                                filterable
                                clearable>
+                        <!-- 循环生成仓库选项 -->
                         <el-option
                                 v-for="item in options_store"
                                 :key="item.id"
@@ -108,45 +137,63 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 类型选择的表单项 -->
                 <el-form-item style="width:40%" label="类型：" prop="state">
+                    <!-- 下拉选择框，双向绑定到 selectGoods.state -->
                     <el-select
                             v-model="selectGoods.state"
                             @change="$forceUpdate()"
                             filterable
                             placeholder="请选择类型" clearable>
+                        <!-- 出库类型选项 -->
                         <el-option label="出库" value="0"></el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单操作按钮的表单项 -->
                 <el-form-item style="width:40%">
+                    <!-- 点击后调用 selectedGoods 方法，确认选择 -->
                     <el-button type="success" @click="selectedGoods('selectGoods')" plain>确定</el-button>
+                    <!-- 点击后调用 closeSelectedGoods 方法，关闭表单 -->
                     <el-button type="warning" @click="closeSelectedGoods('selectGoods')" plain>关闭</el-button>
                 </el-form-item>
             </el-form>
+            <!-- 新表单，当 newVisable 为 true 时显示 -->
             <el-form size="mini" v-if="newVisable" :model="newForm" :rules="rules" ref="newForm" label-width="100px"
                      class="demo-ruleForm">
+                <!-- 表单的行 -->
                 <el-row>
+                    <!-- 表单的列，显示商品名 -->
                     <el-col :span="12">
                         <el-form-item style="width: 60%" label="商品名：">
+                            <!-- 只读输入框，显示商品名，双向绑定到 newForm.goodsName -->
                             <el-input readonly v-model="newForm.goodsName" placeholder="如：农夫山泉"></el-input>
                         </el-form-item>
                     </el-col>
+                    <!-- 表单的列，显示类型选择 -->
                     <el-col :span="12">
                         <el-form-item style="width:60%" label="类型：" prop="state">
+                            <!-- 禁用的下拉选择框，双向绑定到 newForm.state -->
                             <el-select disabled
                                        v-model="newForm.state"
                                        filterable
                                        @change="$forceUpdate()"
                                        placeholder="请选择类型" clearable>
+                                <!-- 出库类型选项 -->
                                 <el-option label="出库" value="0"></el-option>
+                                <!-- 过期类型选项 -->
                                 <el-option label="过期" value="1"></el-option>
+                                <!-- 下架类型选项 -->
                                 <el-option label="下架" value="2"></el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 表单的行 -->
                 <el-row>
+                    <!-- 表单的列，显示商品数量输入框 -->
                     <el-col :span="12">
                         <el-form-item style="width: 60%" label="商品数量：" prop="goodsNum">
+                            <!-- 数字输入框，双向绑定到 newForm.goodsNum，有数量范围限制 -->
                             <el-input type="number" @change="()=>{
                                 if(this.goodsNum_max<this.newForm.goodsNum){
                                     this.newForm.goodsNum=this.goodsNum_max
@@ -154,16 +201,18 @@
                                 if(this.newForm.goodsNum<1){
                                     this.newForm.goodsNum=1
                                 }
-
                             }" min="1" :max="goodsNum_max" v-model="newForm.goodsNum" placeholder="如：1"></el-input>
                         </el-form-item>
                     </el-col>
+                    <!-- 表单的列，显示仓库选择 -->
                     <el-col :span="12">
                         <el-form-item style="width:60%" label="仓库：" prop="storeId">
+                            <!-- 禁用的下拉选择框，双向绑定到 newForm.storeId -->
                             <el-select disabled v-model="newForm.storeId"
                                        placeholder="请选择仓库"
                                        filterable
                                        clearable>
+                                <!-- 循环生成仓库选项 -->
                                 <el-option
                                         v-for="item in options_store"
                                         :key="item.id"
@@ -174,9 +223,12 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 表单的行 -->
                 <el-row>
+                    <!-- 表单的列，显示出库日期选择器 -->
                     <el-col :span="12">
                         <el-form-item style="width: 60%" label="出库日期：" prop="createTime">
+                            <!-- 日期选择器，双向绑定到 newForm.createTime -->
                             <el-date-picker
                                     size="mini"
                                     style="width: 140px"
@@ -187,99 +239,132 @@
                             </el-date-picker>
                         </el-form-item>
                     </el-col>
+                    <!-- 表单的列，显示备注输入框 -->
                     <el-col :span="12">
                         <el-form-item style="width: 60%" label="备注：">
+                            <!-- 文本域输入框，双向绑定到 newForm.info -->
                             <el-input type="textarea" v-model="newForm.info" placeholder="如：某商品因什么原因出库"></el-input>
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 表单操作按钮的表单项 -->
                 <el-form-item>
+                    <!-- 点击后调用 submitNewForm 方法，提交出库表单 -->
                     <el-button type="primary" @click="submitNewForm('newForm')">出库</el-button>
+                    <!-- 点击后调用 saveCancel 方法，取消操作 -->
                     <el-button @click="saveCancel('newForm')">取消</el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
-        <!--商品过期/下架列表显示-->
+        <!-- 商品过期/下架列表显示的对话框，全屏显示 -->
         <el-dialog
                 :fullscreen="true"
                 :visible.sync="visable2">
+            <!-- 搜索表单区域 -->
             <div class="searchForm">
+                <!-- 搜索表单的列，包含商品名输入框 -->
                 <div class="column">
+                    <!-- 显示“商品名：”标签 -->
                     <span>商品名：</span>
+                    <!-- 输入框，用于输入商品名，双向绑定到 searchForm1.name -->
                     <el-input style="height: 21px;width: 300px" placeholder="请输入商品名" v-model="searchForm1.name"/>
                 </div>
+                <!-- 搜索表单的列，包含类型选择框 -->
                 <div class="column">
+                    <!-- 显示“类型：”标签 -->
                     <span>类型：</span>
+                    <!-- 下拉选择框，双向绑定到 searchForm1.state -->
                     <el-select style="width: 120px"
                                v-model="searchForm1.state"
                                @change="$forceUpdate()"
                                placeholder="请选择类型" clearable>
+                        <!-- 过期类型选项 -->
                         <el-option label="过期" value="1"></el-option>
+                        <!-- 下架类型选项 -->
                         <el-option label="下架" value="2"></el-option>
                     </el-select>
                 </div>
+                <!-- 搜索表单的列，包含搜索和关闭按钮 -->
                 <div class="column">
+                    <!-- 点击后调用 submitSearchForm1 方法进行搜索 -->
                     <el-button type="success" @click="submitSearchForm1">搜索</el-button>
+                    <!-- 点击后隐藏对话框 -->
                     <el-button type="primary" @click="visable2=false">关闭</el-button>
                 </div>
             </div>
+            <!-- 表格区域 -->
             <div class="table">
+                <!-- 表格组件，数据绑定到 tableData1 -->
                 <el-table
                         :data="tableData1"
                         style="width: 100%;"
-                        
                         size="medium">
+                    <!-- 表格列，显示序号 -->
                     <el-table-column
                             width="200"
                             type="index"
                             label="序号">
                     </el-table-column>
+                    <!-- 表格列，显示商品封面 -->
                     <el-table-column
                             prop="coverUrl"
                             label="封面">
+                        <!-- 自定义列内容，显示商品封面图片 -->
                         <template v-slot="scope">
                             <img height="60px" :src="scope.row.coverUrl">
                         </template>
                     </el-table-column>
+                    <!-- 表格列，显示商品名 -->
                     <el-table-column
                             prop="goodsName"
                             label="商品名">
                     </el-table-column>
+                    <!-- 表格列，显示仓库名 -->
                     <el-table-column
                             prop="storeName"
                             label="仓库">
                     </el-table-column>
+                    <!-- 表格列，显示处理数量 -->
                     <el-table-column
                             prop="untreatedNum"
                             label="处理数量">
                     </el-table-column>
+                    <!-- 表格列，显示类型 -->
                     <el-table-column
                             prop="state"
                             label="类型">
+                        <!-- 自定义列内容，根据类型显示不同标签 -->
                         <template v-slot="scope">
+                            <!-- 过期类型标签 -->
                             <el-tag type="warning" v-if="scope.row.state=='1'">过期</el-tag>
+                            <!-- 下架类型标签 -->
                             <el-tag type="danger" v-if="scope.row.state=='2'">下架</el-tag>
                         </template>
                     </el-table-column>
+                    <!-- 表格列，显示通知时间 -->
                     <el-table-column
                             prop="createTime"
                             label="通知时间">
                     </el-table-column>
+                    <!-- 表格列，显示操作按钮 -->
                     <el-table-column
                             width="100px"
                             label="操作">
+                        <!-- 自定义列内容，显示处理按钮 -->
                         <template v-slot="scope">
+                            <!-- 点击后调用 outUntreatedBtn 方法，处理过期/下架商品 -->
                             <el-button type="warning"
                                        @click="outUntreatedBtn(scope.row)" plain>处理
                             </el-button>
                         </template>
                     </el-table-column>
-
                 </el-table>
+                <!-- 分页组件区域 -->
                 <div style="margin: 10px 0 15px 0;">
+                    <!-- 分页组件，处理分页相关操作 -->
                     <el-pagination
-                            @size-change="handleSizeChange"
-                            @current-change="handleCurrentChange"
+                            @size-change="handleSizeChange1"
+                            @current-change="handleCurrentChange1"
                             :current-page.sync="searchForm1.currentPage"
                             :page-sizes="[5, 10, 20, 50]"
                             :page-size="searchForm1.pageSize"
@@ -289,29 +374,37 @@
                 </div>
             </div>
         </el-dialog>
-
-        <!--处理表单填写-->
+        <!-- 处理表单填写的对话框 -->
         <el-dialog
                 title="过期/下架商品处理表单"
                 :visible.sync="visable3"
                 width="50%">
+            <!-- 处理表单，当条件满足时显示 -->
             <el-form v-if="" :model="outUntreatedForm" :rules="rules" ref="outUntreatedForm" label-width="100px"
                      class="demo-ruleForm">
+                <!-- 表单的行，显示商品图片 -->
                 <el-row>
+                    <!-- 表单的列 -->
                     <el-col :span="24">
                         <el-form-item style="width: 60%">
+                            <!-- 显示商品图片 -->
                             <img height="200px" :src="outUntreatedForm.coverUrl" alt="商品图片"/>
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 表单的行，显示商品名称、数量、仓库和类型 -->
                 <el-row>
+                    <!-- 表单的列，显示商品名称 -->
                     <el-col :span="24">
                         <el-form-item style="width: 60%" label="商品名称:">
+                            <!-- 只读输入框，显示商品名称，双向绑定到 outUntreatedForm.goodsName -->
                             <el-input readonly v-model="outUntreatedForm.goodsName" placeholder="商品名称"/>
                         </el-form-item>
                     </el-col>
+                    <!-- 表单的列，显示商品数量 -->
                     <el-col :span="24">
                         <el-form-item style="width: 60%" label="商品数量:" prop="untreatedNum">
+                            <!-- 数字输入框，双向绑定到 outUntreatedForm.untreatedNum，有数量范围限制 -->
                             <el-input
                                     @change="()=>{
                                         if (outUntreatedForm.untreatedNum<=0){
@@ -325,79 +418,106 @@
                                     type="number" min="1" :max="untreatedNum" v-model="outUntreatedForm.untreatedNum"/>
                         </el-form-item>
                     </el-col>
+                    <!-- 表单的列，显示仓库名称 -->
                     <el-col :span="24">
                         <el-form-item style="width: 60%" label="仓库:">
+                            <!-- 只读输入框，显示仓库名称，双向绑定到 outUntreatedForm.storeName -->
                             <el-input readonly v-model="outUntreatedForm.storeName" placeholder="仓库"/>
                         </el-form-item>
-
                     </el-col>
+                    <!-- 表单的列，显示类型选择 -->
                     <el-col :span="24">
                         <el-form-item style="width: 40%" label="类型:">
+                            <!-- 禁用的下拉选择框，双向绑定到 outUntreatedForm.state -->
                             <el-select disabled
                                        v-model="outUntreatedForm.state"
                                        @change="$forceUpdate()"
                                        placeholder="请选择类型" clearable>
+                                <!-- 过期类型选项 -->
                                 <el-option label="过期" value="1"></el-option>
+                                <!-- 下架类型选项 -->
                                 <el-option label="下架" value="2"></el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                 </el-row>
-
+                <!-- 表单的行，显示处理和关闭按钮 -->
                 <el-row>
+                    <!-- 表单的列 -->
                     <el-col :span="24">
                         <el-form-item style="width: 60%">
+                            <!-- 点击后调用 submitOutUntreatedForm 方法，提交处理表单 -->
                             <el-button type="success" @click="submitOutUntreatedForm('outUntreatedForm')">处理</el-button>
+                            <!-- 点击后调用 closeOutUntreatedForm 方法，关闭表单 -->
                             <el-button type="primary" @click="closeOutUntreatedForm('outUntreatedForm')">关闭</el-button>
                         </el-form-item>
                     </el-col>
                 </el-row>
             </el-form>
         </el-dialog>
-
     </div>
 </template>
 <script>
+    // 引入通用的弹出提示方法
     import {popup} from "@/assets/js/common";
+    // 引入库存管理通知相关的 API 方法
     import {
         queryPageNoticeOut_shelves,
         queryPageNoticeOut_untreated, resolveOutUntreatedForm,
         saveOut_shelves
     } from "@/api/inventory_management/notice/noticeApi";
+    // 引入库存管理商品出库相关的 API 方法
     import {
         changeOutGoods,
         changeOutStore,
         initOutOptions, queryOutGoods, saveOut
     } from "@/api/inventory_management/detail_store_goods/detail_store_goodsApi";
 
+    // 导出默认的 Vue 组件对象
     export default {
+        // 定义组件的数据属性
         data() {
             return {
+                // 控制商品上货架对话框的显示状态
                 visable1: false,
+                // 控制商品过期/下架列表对话框的显示状态
                 visable2: false,
+                // 控制处理表单对话框的显示状态
                 visable3: false,
+                // 处理数量的最大值
                 untreatedNum: '',
+                // 处理表单的数据对象
                 outUntreatedForm: {},
+                // 控制商品出库对话框的显示状态
                 goodsOutVisable: false,
+                // 控制新表单的显示状态
                 newVisable: false,
+                // 控制选择商品和仓库表单的显示状态
                 selectGoodsVisable: true,
+                // 选择商品和仓库表单的数据对象
                 selectGoods: {},
+                // 商品选项数组
                 options_goods: [],
+                // 仓库选项数组
                 options_store: [],
-                /*表格*/
+                // 表格数据数组
                 tableData: [],
+                // 搜索表单的数据对象，包含分页和状态信息
                 searchForm: {
                     total: 0,
                     currentPage: 1,
                     pageSize: 5,
                     state: '0'
                 },
+                // 搜索表单 1 的数据对象，包含分页信息
                 searchForm1: {
                     total: 0,
                     currentPage: 1,
                     pageSize: 5,
                 },
+                // 表格数据 1 数组
                 tableData1: [],
+                // 新表单的数据对象，包含商品出库相关信息
                 newForm: {
                     goodsId: '',
                     goodsNum: '',
@@ -407,6 +527,7 @@
                     storeId: '',
                     state: ''
                 },
+                // 表单验证规则对象
                 rules: {
                     goodsId: [
                         {required: true, message: '商品编号不能为空', trigger: 'blur'},
@@ -429,40 +550,60 @@
                 },
             }
         },
+        // 定义组件的方法
         methods: {
+            // 点击出库货架商品按钮时调用的方法
             outGoodsBtn() {
+                // 初始化数据
                 this.init()
+                // 显示商品上货架对话框
                 this.visable1 = true
             },
+            // 关闭处理表单对话框的方法
             closeOutUntreatedForm(formName) {
+                // 重置表单字段
                 this.$refs[formName].resetFields()
+                // 隐藏处理表单对话框
                 this.visable3 = false
+                // 清空处理表单数据对象
                 this.outUntreatedForm = {}
             },
+            // 点击出货按钮时调用的方法
             outGoodsBtn1(row) {
+                // 设置选择的商品 ID
                 this.selectGoods.goodsId = row.id
+                // 标记是否存在库存
                 var flag = false;
+                // 遍历商品选项数组，检查是否存在该商品库存
                 for (var item of this.options_goods) {
                     if (item.id == this.selectGoods.goodsId) {
                         flag = true;
                     }
-
                 }
+                // 如果不存在库存，弹出错误提示并返回
                 if (!flag) {
                     popup("库存中没有该商品的库存", "error")
                     return;
                 }
+                // 调用 API 方法，根据商品 ID 获取可用仓库
                 changeOutGoods({gid: this.selectGoods.goodsId}).then(res => {
                     res = res.data
                     if (res.code == 200) {
+                        // 更新仓库选项数组
                         this.options_store = res.data
                     }
                 })
+                // 显示商品出库对话框
                 this.goodsOutVisable = true
+                // 显示选择商品和仓库表单
                 this.selectGoodsVisable = true
+                // 隐藏新表单
                 this.newVisable = false
+                // 设置选择的商品类型为出库
                 this.selectGoods.state = '0'
+                // 设置商品数量的最大值
                 this.goodsNum_max = row.goodsNum
+                // 重置新表单数据对象
                 this.newForm = {
                     goodsId: '',
                     goodsNum: row.goodsNum,
@@ -472,186 +613,266 @@
                     storeId: '',
                     state: ''
                 }
-
             },
+            // 点击处理过期/下架商品按钮时调用的方法
             outUntreatedBtn(param) {
+                // 复制商品信息到处理表单数据对象
                 this.outUntreatedForm = {...param}
+                // 设置处理数量的最大值
                 this.untreatedNum = param.untreatedNum
+                // 显示处理表单对话框
                 this.visable3 = true
             },
+            // 提交处理表单的方法
             submitOutUntreatedForm(formName) {
+                // 验证表单字段
                 this.$refs[formName].validate((valid) => {
                     if (valid) {
+                        // 调用 API 方法，提交处理表单数据
                         resolveOutUntreatedForm(this.outUntreatedForm).then(res => {
-                                res = res.data
-                                if (res.code == 200) {
-                                    popup("处理成功")
-                                    this.visable3 = false
-                                    this.outUntreatedForm = {}
-                                    this.init1()
-                                } else {
-                                    popup(res.msg, "error")
-                                }
+                            res = res.data
+                            if (res.code == 200) {
+                                // 弹出处理成功提示
+                                popup("处理成功")
+                                // 隐藏处理表单对话框
+                                this.visable3 = false
+                                // 清空处理表单数据对象
+                                this.outUntreatedForm = {}
+                                // 初始化过期/下架商品列表数据
+                                this.init1()
+                            } else {
+                                // 弹出错误提示
+                                popup(res.msg, "error")
                             }
-                        )
+                        })
                     }
                 })
-
             },
+            // 点击过期/下架商品按钮时调用的方法
             outUntreated() {
+                // 初始化过期/下架商品列表数据
                 this.init1()
+                // 显示商品过期/下架列表对话框
                 this.visable2 = true
             },
+            // 商品选择变化时调用的方法
             changeGoods() {
+                // 强制更新视图
                 this.$forceUpdate()
+                // 调用 API 方法，根据商品 ID 获取可用仓库
                 changeOutGoods({gid: this.selectGoods.goodsId}).then(res => {
                     res = res.data
                     if (res.code == 200) {
+                        // 更新仓库选项数组
                         this.options_store = res.data
                     }
                 })
             },
+            // 初始化商品和仓库选项的方法
             initOptions() {
+                // 调用 API 方法，获取商品和仓库选项数据
                 initOutOptions().then(res => {
                     res = res.data
                     if (res.code == 200) {
+                        // 更新商品选项数组
                         this.options_goods = res.data.goods
+                        // 更新仓库选项数组
                         this.options_store = res.data.stores
-
                     } else {
+                        // 弹出错误提示
                         popup(res.msg, "error")
                     }
                 })
             },
+            // 初始化商品上货架表格数据的方法
             init() {
+                // 调用 API 方法，获取商品上货架表格数据
                 queryPageNoticeOut_shelves(this.searchForm).then(res => {
                     res = res.data
                     if (res.code == 200) {
+                        // 更新表格数据数组
                         this.tableData = res.data.records
+                        // 更新搜索表单的总记录数
                         this.searchForm.total = res.data.total
+                        // 更新搜索表单的每页显示记录数
                         this.searchForm.pageSize = res.data.size
+                        // 更新搜索表单的当前页码
                         this.searchForm.currentPage = res.data.current
                     } else {
+                        // 弹出错误提示
                         popup(res.msg, "error")
                     }
                 })
             },
-            /*分页*/
+            // 处理每页显示记录数变化的方法
             handleSizeChange(val) {
+                // 更新搜索表单的每页显示记录数
                 this.searchForm.pageSize = val
+                // 重新初始化商品上货架表格数据
                 this.init()
                 console.log(`每页 ${val} 条`);
             },
+            // 处理当前页码变化的方法
             handleCurrentChange(val) {
+                // 更新搜索表单的当前页码
                 this.searchForm.currentPage = val
+                // 重新初始化商品上货架表格数据
                 this.init()
                 console.log(`当前页: ${val}`);
             },
+            // 提交搜索表单的方法
             submitSearchForm() {
+                // 重新初始化商品上货架表格数据
                 this.init()
             },
-            /*过期、下架分页*/
+            // 初始化过期/下架商品表格数据的方法
             init1() {
+                // 调用 API 方法，获取过期/下架商品表格数据
                 queryPageNoticeOut_untreated(this.searchForm1).then(res => {
                     res = res.data
                     if (res.code == 200) {
+                        // 更新表格数据 1 数组
                         this.tableData1 = res.data.records
+                        // 更新搜索表单 1 的总记录数
                         this.searchForm1.total = res.data.total
+                        // 更新搜索表单 1 的每页显示记录数
                         this.searchForm1.pageSize = res.data.size
+                        // 更新搜索表单 1 的当前页码
                         this.searchForm1.currentPage = res.data.current
                     } else {
+                        // 弹出错误提示
                         popup(res.msg, "error")
                     }
                 })
             },
+            // 处理过期/下架商品每页显示记录数变化的方法
             handleSizeChange1(val) {
+                // 更新搜索表单 1 的每页显示记录数
                 this.searchForm1.pageSize = val
+                // 重新初始化过期/下架商品表格数据
                 this.init1()
                 console.log(`每页 ${val} 条`);
             },
+            // 处理过期/下架商品当前页码变化的方法
             handleCurrentChange1(val) {
+                // 更新搜索表单 1 的当前页码
                 this.searchForm1.currentPage = val
+                // 重新初始化过期/下架商品表格数据
                 this.init1()
                 console.log(`当前页: ${val}`);
             },
+            // 提交过期/下架商品搜索表单的方法
             submitSearchForm1() {
+                // 重新初始化过期/下架商品表格数据
                 this.init1()
             },
+            // 选择商品和仓库表单提交时调用的方法
             selectedGoods(formName) {
+                // 验证表单字段
                 this.$refs[formName].validate((valid) => {
                     if (valid) {
+                        // 调用 API 方法，根据选择的商品和仓库信息获取商品详细信息
                         queryOutGoods(this.selectGoods).then(res => {
                             res = res.data
                             if (res.code == 200) {
+                                // 隐藏选择商品和仓库表单
                                 this.selectGoodsVisable = false
+                                // 显示新表单
                                 this.newVisable = true
+                                // 更新新表单的商品名称
                                 this.newForm.goodsName = res.data.goodsName
+                                // 更新新表单的商品类型
                                 this.newForm.state = this.selectGoods.state
+                                // 更新新表单的仓库 ID
                                 this.newForm.storeId = this.selectGoods.storeId
+                                // 更新新表单的商品 ID
                                 this.newForm.goodsId = this.selectGoods.goodsId
+                                // 清空选择商品和仓库表单数据对象
                                 // this.selectGoods = {}
                             } else {
+                                // 弹出错误提示
                                 popup(res.msg, "error")
                             }
                         })
                     }
                 })
             },
+            // 关闭选择商品和仓库表单的方法
             closeSelectedGoods(formName) {
+                // 重置表单字段
                 this.$refs[formName].resetFields()
+                // 清空选择商品和仓库表单数据对象
                 this.selectGoods = {}
+                // 隐藏商品出库对话框
                 this.goodsOutVisable = false
-
-
             },
+            // 提交新表单的方法
             submitNewForm(formName) {
+                // 验证表单字段
                 this.$refs[formName].validate((valid) => {
                     if (valid) {
+                        // 调用 API 方法，提交新表单数据
                         saveOut_shelves(this.newForm).then(res => {
-                            res = res.data
+                                                        res = res.data
                             if (res.code == 200) {
+                                // 弹出出库成功提示
                                 popup("出库成功")
+                                // 设置搜索表单状态
                                 this.searchForm.state1 = '0'
+                                // 隐藏商品出库对话框
                                 this.goodsOutVisable = false
+                                // 清空选择商品和仓库表单数据对象
                                 this.selectGoods = {}
+                                // 重新初始化商品上货架表格数据
                                 this.init()
                             } else {
+                                // 弹出错误提示
                                 popup(res.msg, "error")
                             }
                         })
                     }
                 })
             },
+            // 取消新表单操作的方法
             saveCancel(formName) {
+                // 重置表单字段
                 this.$refs[formName].resetFields()
+                // 隐藏新表单
                 this.newVisable = false
+                // 显示选择商品和仓库表单
                 this.selectGoodsVisable = true
             }
         },
+        // 组件挂载时执行的钩子函数
         mounted() {
+            // 初始化商品和仓库选项
             this.initOptions()
         }
     }
 </script>
 <style>
+    /* 设置 #detail_store_goods_in 下 .noticeOut 元素的高度和背景颜色 */
     #detail_store_goods_in .noticeOut {
         height: 660px;
         background-color: #bfdcf6;
     }
 
+    /* 设置 #detail_store_goods_in 下 .noticeOut 内的 h1 元素和 .btns 元素的宽度 */
     #detail_store_goods_in .noticeOut h1, .btns {
         width: 100%;
-
     }
 
+    /* 设置搜索表单元素的高度 */
     .searchForm {
         height: 134px;
     }
 
+    /* 设置表格元素的高度 */
     .table {
         height: 320px;
     }
 
+    /* 设置分页工具元素的定位、宽度、外边距和高度 */
     .pageUtils {
         position: absolute;
         width: 84%;
@@ -659,6 +880,7 @@
         height: 43px;
     }
 
+    /* 再次设置搜索表单元素的显示方式、外边距、高度和行高，后定义的样式会覆盖前面的 */
     .searchForm {
         display: inline-block;
         margin: 0 auto;
@@ -666,6 +888,7 @@
         line-height: 51px;
     }
 
+    /* 设置搜索表单内 .column 元素的显示方式、外边距、行高和高度 */
     .searchForm .column {
         display: inline-block;
         margin: 0 auto;
diff --git a/superMarket-frontend/src/views/inventory_management/store/List.vue b/superMarket-frontend/src/views/inventory_management/store/List.vue
index 29502b5..7b6cb65 100644
--- a/superMarket-frontend/src/views/inventory_management/store/List.vue
+++ b/superMarket-frontend/src/views/inventory_management/store/List.vue
@@ -1,111 +1,160 @@
 <template>
+    <!-- 组件根元素 -->
     <div>
+        <!-- 面包屑导航，用于展示页面层级关系 -->
         <el-breadcrumb separator="/">
+            <!-- 首页导航项 -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 库存管理导航项 -->
             <el-breadcrumb-item>库存管理 </el-breadcrumb-item>
-            <el-breadcrumb-item>仓库管理</el-breadcrumb-item> </el-breadcrumb
-        ><br />
+            <!-- 仓库管理导航项 -->
+            <el-breadcrumb-item>仓库管理</el-breadcrumb-item> 
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
 
+        <!-- 栅格布局，一行两列 -->
         <el-row>
+            <!-- 第一列，占 8 份 -->
             <el-col :span="8" style="text-align: left;padding-right: 10px;">
+                <!-- 输入框，用于输入仓库名称，双向绑定到 searchForm.name -->
                 <el-input placeholder="仓库名称" v-model="searchForm.name"/>
-                
             </el-col>
+            <!-- 第二列，占 8 份 -->
             <el-col :span="8">
+                <!-- 下拉选择框，用于选择仓库状态，双向绑定到 searchForm.state -->
                 <el-select v-model="searchForm.state" placeholder="请选择状态" clearable>
+                    <!-- 正常状态选项 -->
                     <el-option label="正常" value="0"></el-option>
+                    <!-- 停用状态选项 -->
                     <el-option label="停用" value="-1"></el-option>
                 </el-select>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 栅格布局，一行一列 -->
         <el-row>
+            <!-- 列，占 24 份 -->
             <el-col :span="24" style="text-align: left">
+                <!-- 主要按钮，点击触发 subSearchForm 方法 -->
                 <el-button
                     type="primary"
                     @click="subSearchForm"
                     style="font-size: 18px"
                 >
+                    <!-- 搜索图标 -->
                     <i class="iconfont icon-r-find" style="font-size: 18px">
                     </i>
-                    搜索</el-button
-                >
+                    <!-- 按钮文本 -->
+                    搜索</el-button>
+                <!-- 成功按钮，点击显示创建仓库对话框 -->
                 <el-button
                     type="success"
                     @click="newVisable = true"
                     style="font-size: 18px"
                 >
+                    <!-- 添加图标 -->
                     <i class="iconfont icon-r-add" style="font-size: 18px"> </i>
+                    <!-- 按钮文本 -->
                     创建仓库
                 </el-button>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 表格组件，数据绑定到 tableData -->
         <el-table
                 :data="tableData"
                 style="width: 100%">
+            <!-- 序号列 -->
             <el-table-column
                     type="index"
                     label="序号"
                     width="180">
             </el-table-column>
+            <!-- 仓库名称列 -->
             <el-table-column
                     prop="name"
                     label="名称"
                     width="180">
             </el-table-column>
+            <!-- 仓库地址列 -->
             <el-table-column
                     prop="address"
                     label="地址"
                     width="180">
             </el-table-column>
+            <!-- 仓库描述列，内容溢出显示 tooltip -->
             <el-table-column
                     prop="info"
                     :show-overflow-tooltip="true"
                     label="描述">
             </el-table-column>
+            <!-- 仓库状态列 -->
             <el-table-column
                     prop="state"
                     label="状态">
+                <!-- 自定义列内容 -->
                 <template v-slot="scope">
+                    <!-- 状态为正常时显示绿色标签 -->
                     <el-tag v-if="scope.row.state=='0'" type="success">正常</el-tag>
+                    <!-- 状态为停用显示红色标签 -->
                     <el-tag v-else type="danger">停用</el-tag>
                 </template>
             </el-table-column>
+            <!-- 操作列，固定在右侧 -->
             <el-table-column width="240" fixed="right"
                     label="操作">
+                <!-- 自定义列内容 -->
                 <template v-slot="scope">
+                    <!-- 修改按钮，点击触发 editStore 方法 -->
                     <el-button type="success" style="font-size: 18px;" @click="editStore(scope.row)">
+                        <!-- 修改图标 -->
                         <i class="iconfont icon-r-edit" style="font-size: 18px;"> </i>
-                         修改
+                        <!-- 按钮文本 -->
+                        修改
                     </el-button>
+                    <!-- 停用按钮，点击触发 forbidden 方法 -->
                     <el-button  style="font-size: 18px;" type="danger" @click="forbidden(scope.row.id)">
+                        <!-- 停用图标 -->
                         <i class="iconfont icon-r-no" style="font-size: 18px;"> </i>
-                         停用
+                        <!-- 按钮文本 -->
+                        停用
                     </el-button>
                 </template>
             </el-table-column>
         </el-table>
-        <!--修改仓库弹出框-->
+        <!-- 修改仓库信息的对话框 -->
         <el-dialog
                 title="仓库信息修改"
                 :visible.sync="dialogVisible"
                 width="50%">
+            <!-- 表单，数据绑定到 editForm -->
             <el-form v-model="editForm" label-width="100px" class="demo-ruleForm">
+                <!-- 仓库名称表单字段 -->
                 <el-form-item label="名称：">
+                    <!-- 输入框，双向绑定到 editForm.name -->
                     <el-input v-model="editForm.name"></el-input>
                 </el-form-item>
+                <!-- 仓库地址表单字段 -->
                 <el-form-item label="地址：">
+                    <!-- 输入框，双向绑定到 editForm.address -->
                     <el-input type="text" v-model="editForm.address"></el-input>
                 </el-form-item>
+                <!-- 仓库描述表单字段 -->
                 <el-form-item label="描述：">
+                    <!-- 输入框，双向绑定到 editForm.info -->
                     <el-input type="text" v-model="editForm.info"></el-input>
                 </el-form-item>
+                <!-- 仓库状态表单字段 -->
                 <el-form-item label="状态：">
+                    <!-- 下拉选择框，双向绑定到 editForm.state -->
                     <el-select v-model="editForm.state"
                                clearable
                                @change="$forceUpdate()"
                                placeholder="请选择状态">
+                        <!-- 循环渲染状态选项 -->
                         <el-option
                                 v-for="item in options"
                                 :key="item.value"
@@ -114,33 +163,49 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单操作按钮 -->
                 <el-form-item>
+                    <!-- 提交按钮，点击触发 submitEditForm 方法 -->
                     <el-button type="primary" @click="submitEditForm" style="font-size: 18px;">
+                        <!-- 确认图标 -->
                         <i class="iconfont icon-r-yes" style="font-size: 18px;"> </i>
-                         提交
+                        <!-- 按钮文本 -->
+                        提交
                     </el-button>
+                    <!-- 取消按钮，点击触发 editCancel 方法 -->
                     <el-button  style="font-size: 18px;" @click="editCancel">取消</el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
-        <!--创建仓库弹出框-->
+        <!-- 创建仓库对话框 -->
         <el-dialog
                 title="创建仓库"
                 :visible.sync="newVisable"
                 width="50%">
+            <!-- 表单，数据绑定到 newForm，有验证规则 -->
             <el-form :model="newForm" :rules="rules" ref="newForm" label-width="100px" class="demo-ruleForm">
+                <!-- 仓库名称表单字段，有验证规则 -->
                 <el-form-item label="名称：" prop="name">
+                    <!-- 输入框，双向绑定到 newForm.name -->
                     <el-input v-model="newForm.name"></el-input>
                 </el-form-item>
+                <!-- 仓库地址表单字段，有验证规则 -->
                 <el-form-item label="地址：" prop="address">
+                    <!-- 输入框，双向绑定到 newForm.address -->
                     <el-input type="text" v-model="newForm.address"></el-input>
                 </el-form-item>
+                <!-- 仓库描述表单字段 -->
                 <el-form-item label="描述：">
+                    <!-- 输入框，双向绑定到 newForm.info -->
                     <el-input type="text" v-model="newForm.info"></el-input>
                 </el-form-item>
+                <!-- 表单操作按钮 -->
                 <el-form-item>
+                    <!-- 提交按钮，点击触发 submitNewForm 方法 -->
                     <el-button type="primary" @click="submitNewForm('newForm')" style="font-size: 18px;">
+                        <!-- 确认图标 -->
                         <i class="iconfont icon-r-yes" style="font-size: 18px;"> </i> 提交</el-button>
+                    <!-- 取消按钮，点击触发 saveCancel 方法 -->
                     <el-button @click="saveCancel" style="font-size: 18px;">取消</el-button>
                 </el-form-item>
             </el-form>
@@ -148,117 +213,155 @@
     </div>
 </template>
 <script>
+    // 引入仓库管理相关的 API 方法
     import {deactivate, save, storeList, update} from "@/api/inventory_management/store/storeApi";
+    // 引入通用弹出提示方法
     import {popup} from "@/assets/js/common";
 
     export default {
+        // 组件的数据
         data() {
             return {
+                // 表格数据
                 tableData: [],
+                // 新仓库对话框显示状态（这里可能有误，实际使用 newVisable）
                 newStoreVisable: false,
+                // 修改仓库对话框显示状态
                 dialogVisible: false,
+                // 修改仓库表单数据
                 editForm: {},
+                // 搜索表单数据
                 searchForm:{},
+                // 创建仓库对话框显示状态
                 newVisable: false,
+                // 创建仓库表单数据
                 newForm:{},
+                // 状态选项
                 options: [
                     {label: '正常', value: '0'},
                     {label: '停用', value: '-1'}
                 ],
+                // 表单验证规则
                 rules: {
+                    // 名称验证规则，不能为空
                     name:[
                         {required: true, message: '名称不能为空', trigger: 'blur'},
                     ],
+                    // 地址验证规则，不能为空
                     address:[
                         {required: true, message: '地名不能为空', trigger: 'blur'},
                     ],
                 }
-
             }
         },
+        // 组件的方法
         methods: {
+            // 提交搜索表单，触发数据初始化
             subSearchForm(){
                 this.init()
             },
+            // 初始化数据，调用 storeList API 获取仓库列表
             init() {
                 storeList(this.searchForm).then(res => {
                     if (res.data.code == 200) {
+                        // 更新表格数据
                         this.tableData = res.data.data
                     } else {
+                        // 显示错误提示
                         popup(res.data.msg, "error")
                     }
                 })
-
             },
+            // 编辑仓库信息，填充表单并显示对话框
             editStore(row) {
                 this.editForm = {...row}
                 this.dialogVisible = true
             },
+            // 停用仓库，调用 deactivate API
             forbidden(sid) {
                 deactivate(sid).then(res => {
                     res = res.data
                     if (res.code == 200) {
+                        // 显示操作成功提示
                         popup("操作成功")
                     } else {
+                        // 显示错误提示
                         popup(res.msg, "error")
                     }
+                    // 重新初始化数据
                     this.init()
                 })
             },
+            // 提交编辑表单，调用 update API
             submitEditForm() {
                 update(this.editForm).then(res => {
                     res = res.data
                     if (res.code == 200) {
+                        // 显示操作成功提示
                         popup("操作成功")
+                        // 重新初始化数据
                         this.init()
+                        // 关闭对话框
                         this.dialogVisible=false
                     } else {
+                        // 显示错误提示
                         popup(res.msg, "error")
                     }
-
                 })
             },
+            // 取消编辑，关闭对话框并清空表单
             editCancel() {
                 this.dialogVisible = false
                 this.editForm = {}
+                // 显示取消操作提示
                 popup("已取消操作", "info")
             },
+            // 提交新仓库表单，先验证表单
             submitNewForm(formName){
                 this.$refs[formName].validate((valid) => {
                     if (valid) {
                         save(this.newForm).then(res=>{
                             res=res.data
                             if (res.code==200){
+                                // 显示操作成功提示
                                 popup("操作成功")
+                                // 清空表单
                                 this.newForm={}
+                                // 关闭对话框
                                 this.newVisable=false
+                                // 重新初始化数据
                                 this.init()
                             }else {
+                                // 显示错误提示
                                 popup(res.msg, "error")
                             }
                         })
                     }
                 });
             },
+            // 取消创建仓库，关闭对话框并重置表单
             saveCancel(){
                 this.newVisable=false
                 this.$refs["newForm"].resetFields()
             }
         },
+        // 组件挂载时初始化数据
         mounted() {
             this.init()
         }
     }
 </script>
 <style>
-    .search {
+    /* 搜索区域样式 */
+   .search {
         display: inline-block;
         margin: 0 auto;
         height: 51px;
         line-height: 51px;
     }
 
-    .search .column {
+    /* 搜索区域列样式 */
+   .search .column {
         display: inline-block;
         margin: 0 auto;
         margin-right: 2px;
diff --git a/superMarket-frontend/src/views/inventory_management/store/StorageSituation.vue b/superMarket-frontend/src/views/inventory_management/store/StorageSituation.vue
index 017c290..d7d79b0 100644
--- a/superMarket-frontend/src/views/inventory_management/store/StorageSituation.vue
+++ b/superMarket-frontend/src/views/inventory_management/store/StorageSituation.vue
@@ -1,27 +1,41 @@
 <template>
+    <!-- 组件的根元素 -->
     <div>
+        <!-- 面包屑导航，显示页面层级关系 -->
         <el-breadcrumb separator="/">
+            <!-- 首页导航项 -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 库存管理导航项 -->
             <el-breadcrumb-item>库存管理 </el-breadcrumb-item>
-            <el-breadcrumb-item>库存统计</el-breadcrumb-item> </el-breadcrumb
-        ><br />
+            <!-- 库存统计导航项 -->
+            <el-breadcrumb-item>库存统计</el-breadcrumb-item> 
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
 
+        <!-- 第一行栅格布局 -->
         <el-row>
+            <!-- 第一列，占 8 份，包含仓库名称输入框 -->
             <el-col :span="8">
                 <el-input placeholder="仓库名称" v-model="searchForm.name" />
             </el-col>
+            <!-- 第二列，占 16 份，显示总存储量信息 -->
             <el-col :span="16">
                 <i class="iconfont icon-r-add" style="font-size: 28px">
                     <b>
                         总存储量：<span style="color: #fc4316"
                             >{{ totalStoreNum ? totalStoreNum : 0 }}件</span
-                        >
+                            >
                     </b>
                 </i>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+
+        <!-- 第二行栅格布局 -->
         <el-row>
+            <!-- 整列占 24 份，包含搜索按钮 -->
             <el-col :span="24" style="text-align: left">
                 <el-button
                     type="primary"
@@ -30,29 +44,38 @@
                 >
                     <i class="iconfont icon-r-find" style="font-size: 18px">
                     </i>
-                    搜索</el-button
-                >
+                    搜索</el-button>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+
+        <!-- 表格容器 -->
         <div class="table">
+            <!-- 表格组件，展示仓库列表数据 -->
             <el-table :data="tableData" style="width: 100%" size="medium">
+                <!-- 序号列 -->
                 <el-table-column type="index" width="200" label="序号">
                 </el-table-column>
+                <!-- 仓库名列 -->
                 <el-table-column
                     prop="storeName"
                     :show-overflow-tooltip="true"
                     label="仓库名"
                 >
                 </el-table-column>
+                <!-- 存货数量列 -->
                 <el-table-column
                     prop="residueNum"
                     :show-overflow-tooltip="true"
                     label="存货数量"
                 >
                 </el-table-column>
+                <!-- 操作列 -->
                 <el-table-column label="操作">
+                    <!-- 操作列的内容插槽 -->
                     <template v-slot="scope">
+                        <!-- 存储明细按钮，点击时调用 detailStoreBtn 方法 -->
                         <el-button
                             type="primary"
                             style="font-size: 18px"
@@ -62,12 +85,13 @@
                                 class="iconfont icon-r-find"
                                 style="font-size: 18px"
                             ></i>
-                            存储明细</el-button
-                        >
+                            存储明细</el-button>
                     </template>
                 </el-table-column>
             </el-table>
+            <!-- 分页组件容器 -->
             <div style="margin: 10px 0 15px 0">
+                <!-- 分页组件，处理仓库列表的分页操作 -->
                 <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
@@ -80,13 +104,17 @@
                 </el-pagination>
             </div>
         </div>
+
+        <!-- 仓库存储明细对话框 -->
         <el-dialog
             title="仓库存储明细"
             :visible.sync="detailStoreVisible"
             width="95%"
             height="100%"
         >
+            <!-- 对话框内的第一行栅格布局 -->
             <el-row>
+                <!-- 第一列，占 8 份，包含商品选择下拉框 -->
                 <el-col :span="8" style="text-align: right;">
                     <el-select
                         v-model="searchDetailForm.id"
@@ -95,6 +123,7 @@
                         @change="$forceUpdate()"
                         clearable
                     >
+                        <!-- 循环生成下拉选项 -->
                         <el-option
                             v-for="item in options_storeGoods"
                             :key="item.id"
@@ -104,51 +133,59 @@
                         </el-option>
                     </el-select>
                 </el-col>
+                <!-- 第二列，占 8 份，包含搜索和关闭按钮 -->
                 <el-col :span="8">
                     <el-button type="success" @click="submitDetailSearchForm" style="font-size: 18px;"
                         >
                         <i class="iconfont icon-r-find" style="font-size: 18px;"></i>
-                         搜索</el-button
-                    >
+                         搜索</el-button>
                     <el-button @click="closeDetailStoreVisible" style="font-size: 18px;"
                         >
                         <i class="iconfont icon-r-no" style="font-size: 18px;"></i>
-                         关闭</el-button
-                    >
+                         关闭</el-button>
                 </el-col>
+                <!-- 第三列，占 8 份，显示仓库内商品的总存储量信息 -->
                 <el-col :span="8">
-                    
-                <i class="iconfont icon-r-add" style="font-size: 28px">
-                    <b>
-                        总存储量：<span style="color: #fc4316"
-                            >{{ totalStoreNum1 ? totalStoreNum1 : 0 }}件</span
-                        >
-                    </b>
-                </i>
+                    <i class="iconfont icon-r-add" style="font-size: 28px">
+                        <b>
+                            总存储量：<span style="color: #fc4316"
+                                >{{ totalStoreNum1 ? totalStoreNum1 : 0 }}件</span
+                                >
+                        </b>
+                    </i>
                 </el-col>
             </el-row>
+            <!-- 换行 -->
             <br>
+
+            <!-- 对话框内的表格容器 -->
             <div class="table" style="overflow: auto;height: 300px;">
+                <!-- 表格组件，展示仓库内商品的存储明细数据 -->
                 <el-table :data="tableData1" style="width: 100%" size="medium" >
+                    <!-- 序号列 -->
                     <el-table-column type="index" width="200" label="序号">
                     </el-table-column>
+                    <!-- 商品名列 -->
                     <el-table-column
                         prop="goodsName"
                         :show-overflow-tooltip="true"
                         label="商品名"
                     >
                     </el-table-column>
+                    <!-- 商品数量列 -->
                     <el-table-column
                         prop="residueNum"
                         :show-overflow-tooltip="true"
                         label="商品数量"
                     >
                     </el-table-column>
+                    <!-- 占总存储量列，使用环形进度条展示比例 -->
                     <el-table-column
                         prop="percentage"
                         :show-overflow-tooltip="true"
                         label="占总存储量"
                     >
+                        <!-- 列内容插槽 -->
                         <template v-slot="scope">
                             <el-progress
                                 type="circle"
@@ -159,7 +196,9 @@
                         </template>
                     </el-table-column>
                 </el-table>
+                <!-- 分页组件容器 -->
                 <div style="margin: 10px 0 15px 0">
+                    <!-- 分页组件，处理仓库内商品存储明细的分页操作 -->
                     <el-pagination
                         @size-change="handleSizeChange1"
                         @current-change="handleCurrentChange1"
@@ -176,149 +215,210 @@
     </div>
 </template>
 <script>
-import { popup } from "@/assets/js/common";
-import {
-    queryPageByQo,
-    queryStoreGoodsByStoreId,
-} from "@/api/inventory_management/storage_situation/storageSituationApi";
+    // 引入通用的弹出提示方法
+    import { popup } from "@/assets/js/common";
+    // 引入库存管理中库存情况相关的 API 方法
+    import {
+        queryPageByQo,
+        queryStoreGoodsByStoreId,
+    } from "@/api/inventory_management/storage_situation/storageSituationApi";
 
-export default {
-    data() {
-        return {
-            /*表格*/
-            tableData: [],
-            tableData1: [],
-            totalStoreNum: "",
-            totalStoreNum1: "",
-            searchForm: {
-                total: 0,
-                currentPage: 1,
-                pageSize: 5,
+    // 导出默认的 Vue 组件
+    export default {
+        // 定义组件的数据属性
+        data() {
+            return {
+                // 仓库列表表格数据
+                tableData: [],
+                // 仓库内商品存储明细表格数据
+                tableData1: [],
+                // 仓库列表的总存储量
+                totalStoreNum: "",
+                // 仓库内商品存储明细的总存储量
+                totalStoreNum1: "",
+                // 仓库列表搜索表单数据
+                searchForm: {
+                    total: 0,
+                    currentPage: 1,
+                    pageSize: 5,
+                },
+                // 仓库内商品存储明细搜索表单数据
+                searchDetailForm: {
+                    total: 0,
+                    currentPage: 1,
+                    pageSize: 10,
+                },
+                // 仓库内商品的选项数据
+                options_storeGoods: [],
+                // 仓库存储明细对话框的显示状态
+                detailStoreVisible: false,
+            };
+        },
+        // 定义组件的方法
+        methods: {
+            // 初始化仓库列表数据的方法
+            init() {
+                // 调用 API 获取仓库列表数据
+                queryPageByQo(this.searchForm).then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新总存储量
+                        this.totalStoreNum = res.data.totalStoreNum;
+                        // 更新仓库列表表格数据
+                        this.tableData = res.data.page.records;
+                        // 更新搜索表单的总记录数
+                        this.searchForm.total = res.data.page.total;
+                        // 更新搜索表单的每页记录数
+                        this.searchForm.pageSize = res.data.page.size;
+                        // 更新搜索表单的当前页码
+                        this.searchForm.currentPage = res.data.page.current;
+                    } else {
+                        // 弹出错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 处理仓库列表分页时每页记录数变化的方法
+            handleSizeChange(val) {
+                // 更新搜索表单的每页记录数
+                this.searchForm.pageSize = val;
+                // 重新初始化仓库列表数据
+                this.init();
+                console.log(`每页 ${val} 条`);
+            },
+            // 处理仓库列表分页时当前页码变化的方法
+            handleCurrentChange(val) {
+                // 更新搜索表单的当前页码
+                this.searchForm.currentPage = val;
+                // 重新初始化仓库列表数据
+                this.init();
+                console.log(`当前页: ${val}`);
             },
-            searchDetailForm: {
-                total: 0,
-                currentPage: 1,
-                pageSize: 10,
+            // 提交仓库列表搜索表单的方法
+            submitSearchForm() {
+                // 重新初始化仓库列表数据
+                this.init();
             },
-            options_storeGoods: [],
-            detailStoreVisible: false,
-        };
-    },
-    methods: {
-        init() {
-            queryPageByQo(this.searchForm).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.totalStoreNum = res.data.totalStoreNum;
-                    this.tableData = res.data.page.records;
-                    this.searchForm.total = res.data.page.total;
-                    this.searchForm.pageSize = res.data.page.size;
-                    this.searchForm.currentPage = res.data.page.current;
+            // 初始化仓库内商品存储明细数据的方法
+            init1() {
+                // 调用 API 获取仓库内商品存储明细数据
+                queryStoreGoodsByStoreId(this.searchDetailForm).then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新仓库内商品的选项数据
+                        this.options_storeGoods = res.data.optionsStoreGoods;
+                        // 更新仓库内商品存储明细的总存储量
+                        this.totalStoreNum1 = res.data.totalStoreNum1;
+                        // 更新仓库内商品存储明细表格数据
+                        this.tableData1 = res.data.vos.records;
+                        // 更新搜索表单的总记录数
+                        this.searchDetailForm.total = res.data.vos.total;
+                        // 更新搜索表单的每页记录数
+                        this.searchDetailForm.pageSize = res.data.vos.size;
+                        // 更新搜索表单的当前页码
+                        this.searchDetailForm.currentPage = res.data.vos.current;
+                        // 显示仓库存储明细对话框
+                        this.detailStoreVisible = true;
+                    } else {
+                        // 弹出错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 点击存储明细按钮时调用的方法
+            detailStoreBtn(row) {
+                // 清空仓库内商品的选项数据
+                this.options_storeGoods = [];
+                // 清空仓库内商品存储明细的总存储量
+                this.totalStoreNum1 = "";
+                // 设置搜索表单的仓库 ID
+                this.searchDetailForm.storeId = row.storeId;
+                // 初始化仓库内商品存储明细数据
+                this.init1();
+            },
+            // 处理仓库内商品存储明细分页时每页记录数变化的方法
+            handleSizeChange1(val) {
+                // 更新搜索表单的每页记录数
+                this.searchDetailForm.pageSize = val;
+                // 重新初始化仓库内商品存储明细数据
+                this.init1();
+                console.log(`每页 ${val} 条`);
+            },
+            // 处理仓库内商品存储明细分页时当前页码变化的方法
+            handleCurrentChange1(val) {
+                // 更新搜索表单的当前页码
+                this.searchDetailForm.currentPage = val;
+                // 重新初始化仓库内商品存储明细数据
+                this.init1();
+                console.log(`当前页: ${val}`);
+            },
+            // 提交仓库内商品存储明细搜索表单的方法
+            submitDetailSearchForm() {
+                // 重新初始化仓库内商品存储明细数据
+                this.init1();
+            },
+            // 根据百分比返回进度条颜色的方法
+            customColorMethod(percentage) {
+                if (percentage < 30) {
+                    return "#f56c6c";
+                } else if (percentage < 70) {
+                    return "#e6a23c";
                 } else {
-                    popup(res.msg, "error");
+                    return "#67c23a";
                 }
-            });
-        },
-        /*分页*/
-        handleSizeChange(val) {
-            this.searchForm.pageSize = val;
-            this.init();
-            console.log(`每页 ${val} 条`);
-        },
-        handleCurrentChange(val) {
-            this.searchForm.currentPage = val;
-            this.init();
-            console.log(`当前页: ${val}`);
+            },
+            // 关闭仓库存储明细对话框的方法
+            closeDetailStoreVisible() {
+                // 重置仓库内商品存储明细搜索表单数据
+                this.searchDetailForm = {
+                    total: 0,
+                    currentPage: 1,
+                    pageSize: 10,
+                };
+                // 隐藏仓库存储明细对话框
+                this.detailStoreVisible = false;
+            },
         },
-        submitSearchForm() {
+        // 组件挂载时执行的钩子函数
+        mounted() {
+            // 初始化仓库列表数据
             this.init();
         },
-        init1() {
-            queryStoreGoodsByStoreId(this.searchDetailForm).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.options_storeGoods = res.data.optionsStoreGoods;
-                    this.totalStoreNum1 = res.data.totalStoreNum1;
-                    this.tableData1 = res.data.vos.records;
-                    this.searchDetailForm.total = res.data.vos.total;
-                    this.searchDetailForm.pageSize = res.data.vos.size;
-                    this.searchDetailForm.currentPage = res.data.vos.current;
-                    this.detailStoreVisible = true;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        detailStoreBtn(row) {
-            this.options_storeGoods = [];
-            this.totalStoreNum1 = "";
-            this.searchDetailForm.storeId = row.storeId;
-            this.init1();
-        },
-        handleSizeChange1(val) {
-            this.searchDetailForm.pageSize = val;
-            this.init1();
-            console.log(`每页 ${val} 条`);
-        },
-        handleCurrentChange1(val) {
-            this.searchDetailForm.currentPage = val;
-            this.init1();
-            console.log(`当前页: ${val}`);
-        },
-        submitDetailSearchForm() {
-            this.init1();
-        },
-        customColorMethod(percentage) {
-            if (percentage < 30) {
-                return "#f56c6c";
-            } else if (percentage < 70) {
-                return "#e6a23c";
-            } else {
-                return "#67c23a";
-            }
-        },
-        closeDetailStoreVisible() {
-            this.searchDetailForm = {
-                total: 0,
-                currentPage: 1,
-                pageSize: 10,
-            };
-            this.detailStoreVisible = false;
-        },
-    },
-    mounted() {
-        this.init();
-    },
-};
+    };
 </script>
 <style>
-.searchForm {
-    height: 134px;
-}
+    /* 搜索表单相关样式，这里的样式可能与当前组件实际结构不太匹配，存在重复定义 */
+   .searchForm {
+        height: 134px;
+    }
 
-.table {
-    height: 320px;
-}
+    /* 表格容器样式，设置高度 */
+   .table {
+        height: 320px;
+    }
 
-.pageUtils {
-    position: absolute;
-    width: 84%;
-    margin: 2px auto;
-    height: 43px;
-}
+    /* 分页工具样式，设置定位、宽度、外边距和高度 */
+   .pageUtils {
+        position: absolute;
+        width: 84%;
+        margin: 2px auto;
+        height: 43px;
+    }
 
-.searchForm {
-    display: inline-block;
-    margin: 0 auto;
-    height: 51px;
-    line-height: 51px;
-}
+    /* 再次定义搜索表单样式，覆盖前面的 height 等样式 */
+   .searchForm {
+        display: inline-block;
+        margin: 0 auto;
+        height: 51px;
+        line-height: 51px;
+    }
 
-.searchForm .column {
-    display: inline-block;
-    margin: 0 auto;
-    margin-right: 2px;
-    line-height: 48px;
-    height: 51px;
-}
+    /* 搜索表单内列的样式 */
+   .searchForm.column {
+        display: inline-block;
+        margin: 0 auto;
+        margin-right: 2px;
+        line-height: 48px;
+        height: 51px;
+    }
 </style>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/inventory_management/supplier/List.vue b/superMarket-frontend/src/views/inventory_management/supplier/List.vue
index 9a67f2b..2cb0b76 100644
--- a/superMarket-frontend/src/views/inventory_management/supplier/List.vue
+++ b/superMarket-frontend/src/views/inventory_management/supplier/List.vue
@@ -1,102 +1,138 @@
 <template>
+    <!-- 组件根元素 -->
     <div>
+        <!-- 面包屑导航，展示页面层级关系 -->
         <el-breadcrumb separator="/">
+            <!-- 首页导航项 -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 库存管理导航项 -->
             <el-breadcrumb-item>库存管理 </el-breadcrumb-item>
-            <el-breadcrumb-item>供货商信息</el-breadcrumb-item> </el-breadcrumb
-        ><br />
+            <!-- 供货商信息导航项 -->
+            <el-breadcrumb-item>供货商信息</el-breadcrumb-item> 
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
 
+        <!-- 栅格布局，一行三列 -->
         <el-row>
+            <!-- 第一列，占 8 份，包含供货商名称输入框 -->
             <el-col :span="8" style="text-align: left; padding-right: 10px">
                 <el-input placeholder="供货商名称" v-model="searchForm.name" />
             </el-col>
+            <!-- 第二列，占 8 份，包含供货商地址输入框 -->
             <el-col :span="8" style="text-align: left; padding-right: 10px">
                 <el-input placeholder="地址" v-model="searchForm.address" />
             </el-col>
+            <!-- 第三列，占 8 份，包含供货商描述输入框 -->
             <el-col :span="8">
                 <el-input placeholder="描述" v-model="searchForm.info" />
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+
+        <!-- 栅格布局，一行一列 -->
         <el-row>
+            <!-- 列，占 24 份，包含搜索和创建按钮 -->
             <el-col :span="24" style="text-align: left">
+                <!-- 搜索按钮，点击触发 subSearchForm 方法 -->
                 <el-button
                     type="primary"
                     @click="subSearchForm"
                     style="font-size: 18px"
                 >
+                    <!-- 搜索图标 -->
                     <i class="iconfont icon-r-find" style="font-size: 18px">
                     </i>
-                    搜索</el-button
-                >
+                    <!-- 按钮文本 -->
+                    搜索</el-button>
+                <!-- 创建供货商按钮，点击显示创建对话框 -->
                 <el-button
                     type="success"
                     @click="newVisable = true"
                     style="font-size: 18px"
                 >
+                    <!-- 添加图标 -->
                     <i class="iconfont icon-r-add" style="font-size: 18px"> </i>
+                    <!-- 按钮文本 -->
                     创建供货商
                 </el-button>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
 
+        <!-- 表格容器 -->
         <div class="table">
+            <!-- 表格组件，展示供货商列表数据 -->
             <el-table :data="tableData" style="width: 100%" size="medium">
+                <!-- 序号列 -->
                 <el-table-column type="index" width="200" label="序号">
                 </el-table-column>
+                <!-- 供货商名称列 -->
                 <el-table-column
                     prop="name"
                     :show-overflow-tooltip="true"
                     label="名称"
                 >
                 </el-table-column>
+                <!-- 供货商地址列 -->
                 <el-table-column
                     prop="address"
                     :show-overflow-tooltip="true"
                     label="地址"
                 >
                 </el-table-column>
+                <!-- 供货商联系电话列 -->
                 <el-table-column
                     prop="tel"
                     :show-overflow-tooltip="true"
                     label="联系电话"
                 >
                 </el-table-column>
+                <!-- 供货商备注列 -->
                 <el-table-column
                     prop="info"
                     :show-overflow-tooltip="true"
                     label="备注"
                 >
                 </el-table-column>
+                <!-- 操作列，固定在右侧 -->
                 <el-table-column width="240" fixed="right" label="操作">
+                    <!-- 操作列内容插槽 -->
                     <template v-slot="scope">
+                        <!-- 修改按钮，点击触发 editBtn 方法 -->
                         <el-button
                             type="warning"
                             @click="editBtn(scope.row.cn)"
                             style="font-size: 18px"
                         >
+                            <!-- 修改图标 -->
                             <i
                                 class="iconfont icon-r-edit"
                                 style="font-size: 18px"
                             ></i>
-                            修改</el-button
-                        >
+                            <!-- 按钮文本 -->
+                            修改</el-button>
+                        <!-- 删除按钮，点击触发 delBtn 方法 -->
                         <el-button
                             type="danger"
                             @click="delBtn(scope.row.cn)"
                             style="font-size: 18px"
                         >
+                            <!-- 删除图标 -->
                             <i
                                 class="iconfont icon-r-delete"
                                 style="font-size: 18px"
                             ></i>
-                            删除</el-button
-                        >
+                            <!-- 按钮文本 -->
+                            删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
+            <!-- 分页组件容器 -->
             <div style="margin: 10px 0 15px 0">
+                <!-- 分页组件，处理供货商列表分页 -->
                 <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
@@ -109,12 +145,14 @@
                 </el-pagination>
             </div>
         </div>
-        <!--创建弹出框-->
+
+        <!-- 创建供货商信息对话框 -->
         <el-dialog
             title="创建供货商信息"
             :visible.sync="newVisable"
             width="50%"
         >
+            <!-- 表单，绑定 newForm 数据，有验证规则 -->
             <el-form
                 :model="newForm"
                 :rules="rules"
@@ -122,45 +160,57 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 供货商名称表单字段，有验证规则 -->
                 <el-form-item label="名称：" prop="name">
+                    <!-- 输入框，双向绑定到 newForm.name -->
                     <el-input
                         v-model="newForm.name"
                         placeholder="供应商名称"
                     ></el-input>
                 </el-form-item>
+                <!-- 供货商地址表单字段，有验证规则 -->
                 <el-form-item label="地址：" prop="address">
+                    <!-- 输入框，双向绑定到 newForm.address -->
                     <el-input
                         type="text"
                         v-model="newForm.address"
                         placeholder="供应商地址"
                     ></el-input>
                 </el-form-item>
+                <!-- 供货商联系电话表单字段，有验证规则 -->
                 <el-form-item label="电话：" prop="tel">
+                    <!-- 输入框，双向绑定到 newForm.tel -->
                     <el-input
                         type="text"
                         v-model="newForm.tel"
                         placeholder="联系电话"
                     ></el-input>
                 </el-form-item>
+                <!-- 供货商描述表单字段 -->
                 <el-form-item label="描述：">
+                    <!-- 文本域输入框，双向绑定到 newForm.info -->
                     <el-input
                         type="textarea"
                         v-model="newForm.info"
                         placeholder="供应商的简单描述"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单操作按钮 -->
                 <el-form-item>
+                    <!-- 提交按钮，点击触发 submitNewForm 方法 -->
                     <el-button
                         type="primary"
                         @click="submitNewForm('newForm')"
                         style="font-size: 18px"
                     >
+                        <!-- 确认图标 -->
                         <i
                             class="iconfont icon-r-yes"
                             style="font-size: 18px"
                         ></i>
-                        提交</el-button
-                    >
+                        <!-- 按钮文本 -->
+                        提交</el-button>
+                    <!-- 关闭按钮，点击重置表单并隐藏对话框 -->
                     <el-button
                         @click="
                             () => {
@@ -170,17 +220,18 @@
                             }
                         "
                         style="font-size: 18px"
-                        >关闭</el-button
-                    >
+                        >关闭</el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
-        <!--修改弹出框-->
+
+        <!-- 修改供货商信息对话框 -->
         <el-dialog
             title="修改供货商信息"
             :visible.sync="editVisable"
             width="50%"
         >
+            <!-- 表单，绑定 editForm 数据，有验证规则 -->
             <el-form
                 :model="editForm"
                 :rules="rules"
@@ -188,45 +239,57 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 供货商名称表单字段，有验证规则 -->
                 <el-form-item label="名称：" prop="name">
+                    <!-- 输入框，双向绑定到 editForm.name -->
                     <el-input
                         v-model="editForm.name"
                         placeholder="供应商名称"
                     ></el-input>
                 </el-form-item>
+                <!-- 供货商地址表单字段，有验证规则 -->
                 <el-form-item label="地址：" prop="address">
+                    <!-- 输入框，双向绑定到 editForm.address -->
                     <el-input
                         type="text"
                         v-model="editForm.address"
                         placeholder="供应商地址"
                     ></el-input>
                 </el-form-item>
+                <!-- 供货商联系电话表单字段，有验证规则 -->
                 <el-form-item label="电话：" prop="tel">
+                    <!-- 输入框，双向绑定到 editForm.tel -->
                     <el-input
                         type="text"
                         v-model="editForm.tel"
                         placeholder="联系电话"
                     ></el-input>
                 </el-form-item>
+                <!-- 供货商描述表单字段 -->
                 <el-form-item label="描述：">
+                    <!-- 文本域输入框，双向绑定到 editForm.info -->
                     <el-input
                         type="textarea"
                         v-model="editForm.info"
                         placeholder="供应商的简单描述"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单操作按钮 -->
                 <el-form-item>
+                    <!-- 提交按钮，点击触发 submitEditForm 方法 -->
                     <el-button
                         type="primary"
                         @click="submitEditForm('editForm')"
                         style="font-size: 18px"
                     >
+                        <!-- 确认图标 -->
                         <i
                             class="iconfont icon-r-yes"
                             style="font-size: 18px"
                         ></i>
-                        提交</el-button
-                    >
+                        <!-- 按钮文本 -->
+                        提交</el-button>
+                    <!-- 关闭按钮，点击重置表单并隐藏对话框 -->
                     <el-button
                         @click="
                             () => {
@@ -236,189 +299,237 @@
                             }
                         "
                         style="font-size: 18px"
-                        >关闭</el-button
-                    >
+                        >关闭</el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
     </div>
 </template>
 <script>
-import { popup } from "@/assets/js/common";
-import {
-    delSupplier,
-    queryByCn,
-    queryPageSupplier,
-    saveSupplier,
-    updateSupplier,
-} from "@/api/inventory_management/supplier/supplierApi";
+    // 引入通用弹出提示方法
+    import { popup } from "@/assets/js/common";
+    // 引入供货商管理相关 API 方法
+    import {
+        delSupplier,
+        queryByCn,
+        queryPageSupplier,
+        saveSupplier,
+        updateSupplier,
+    } from "@/api/inventory_management/supplier/supplierApi";
 
-export default {
-    data() {
-        return {
-            tableData: [],
-            editVisable: false,
-            editForm: {},
-            searchForm: {
-                pageSize: 5,
+    export default {
+        // 组件数据
+        data() {
+            return {
+                // 表格数据，存储供货商列表
+                tableData: [],
+                // 修改对话框显示状态
+                editVisable: false,
+                // 修改表单数据
+                editForm: {},
+                // 搜索表单数据
+                searchForm: {
+                    pageSize: 5,
+                },
+                // 创建对话框显示状态
+                newVisable: false,
+                // 创建表单数据
+                newForm: {},
+                // 表单验证规则
+                rules: {
+                    // 供货商名称验证规则，不能为空
+                    name: [
+                        {
+                            required: true,
+                            message: "供货商名称不能为空",
+                            trigger: "blur",
+                        },
+                    ],
+                    // 供货商地址验证规则，不能为空
+                    address: [
+                        {
+                            required: true,
+                            message: "供货商地址不能为空",
+                            trigger: "blur",
+                        },
+                    ],
+                    // 供货商联系电话验证规则，不能为空
+                    tel: [
+                        {
+                            required: true,
+                            message: "供货商联系电话不能为空",
+                            trigger: "blur",
+                        },
+                    ],
+                },
+            };
+        },
+        // 组件方法
+        methods: {
+            // 提交搜索表单，触发数据初始化
+            subSearchForm() {
+                this.init();
             },
-            newVisable: false,
-            newForm: {},
-            rules: {
-                name: [
-                    {
-                        required: true,
-                        message: "供货商名称不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                address: [
-                    {
-                        required: true,
-                        message: "供货商地址不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                tel: [
-                    {
-                        required: true,
-                        message: "供货商联系电话不能为空",
-                        trigger: "blur",
-                    },
-                ],
+            // 初始化数据，调用 API 获取供货商列表
+            init() {
+                queryPageSupplier(this.searchForm).then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新表格数据
+                        this.tableData = res.data.records;
+                        // 更新搜索表单的总记录数
+                        this.searchForm.total = res.data.total;
+                        // 更新搜索表单的每页记录数
+                        this.searchForm.pageSize = res.data.size;
+                        // 更新搜索表单的当前页码
+                        this.searchForm.currentPage = res.data.current;
+                    } else {
+                        // 显示错误提示
+                        popup(res.msg, "error");
+                    }
+                });
             },
-        };
-    },
-    methods: {
-        subSearchForm() {
-            this.init();
-        },
-        init() {
-            queryPageSupplier(this.searchForm).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.tableData = res.data.records;
-                    this.searchForm.total = res.data.total;
-                    this.searchForm.pageSize = res.data.size;
-                    this.searchForm.currentPage = res.data.current;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        /*分页*/
-        handleSizeChange(val) {
-            this.searchForm.pageSize = val;
-            this.init();
-            console.log(`每页 ${val} 条`);
-        },
-        handleCurrentChange(val) {
-            this.searchForm.currentPage = val;
-            this.init();
-            console.log(`当前页: ${val}`);
-        },
-        submitSearchForm() {
-            this.init();
-        },
-        submitNewForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    saveSupplier(this.newForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("添加成功");
-                            this.newVisable = false;
-                            this.newForm = {};
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
-                }
-            });
-        },
-        delBtn(cn) {
-            this.$confirm("确定要删除这条记录" + "？", "警示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    delSupplier({ cn: cn }).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("删除成功");
-                            this.init();
-                        } else {
-                            popup(res.msg, "warning");
-                        }
-                    });
+            // 处理分页时每页记录数变化
+            handleSizeChange(val) {
+                this.searchForm.pageSize = val;
+                this.init();
+                console.log(`每页 ${val} 条`);
+            },
+            // 处理分页时当前页码变化
+            handleCurrentChange(val) {
+                this.searchForm.currentPage = val;
+                this.init();
+                console.log(`当前页: ${val}`);
+            },
+            // 提交搜索表单（此方法与 subSearchForm 功能重复）
+            submitSearchForm() {
+                this.init();
+            },
+            // 提交创建表单
+            submitNewForm(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        saveSupplier(this.newForm).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 显示添加成功提示
+                                popup("添加成功");
+                                // 隐藏对话框
+                                this.newVisable = false;
+                                // 清空表单数据
+                                this.newForm = {};
+                                // 重新初始化数据
+                                this.init();
+                            } else {
+                                // 显示错误提示
+                                popup(res.msg, "error");
+                            }
+                        });
+                    }
+                });
+            },
+            // 删除供货商记录
+            delBtn(cn) {
+                this.$confirm("确定要删除这条记录" + "？", "警示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
                 })
-                .catch(() => {
-                    this.$message({
-                        type: "info",
-                        message: "已取消操作",
+                   .then(() => {
+                        delSupplier({ cn: cn }).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 显示删除成功提示
+                                popup("删除成功");
+                                // 重新初始化数据
+                                this.init();
+                            } else {
+                                // 显示警告提示
+                                popup(res.msg, "warning");
+                            }
+                        });
+                    })
+                   .catch(() => {
+                        // 显示取消操作提示
+                        this.$message({
+                            type: "info",
+                            message: "已取消操作",
+                        });
                     });
+            },
+            // 编辑供货商记录
+            editBtn(cn) {
+                queryByCn({ cn: cn }).then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 填充编辑表单数据
+                        this.editForm = { ...res.data };
+                        // 显示编辑对话框
+                        this.editVisable = true;
+                    } else {
+                        // 显示错误提示
+                        popup(res.msg, "error");
+                    }
                 });
+            },
+            // 提交编辑表单
+            submitEditForm(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        updateSupplier(this.editForm).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 显示修改成功提示
+                                popup("修改成功");
+                                // 隐藏编辑对话框
+                                this.editVisable = false;
+                                // 清空编辑表单数据
+                                this.editForm = {};
+                                // 重新初始化数据
+                                this.init();
+                            } else {
+                                // 显示错误提示
+                                popup(res.msg, "error");
+                            }
+                        });
+                    }
+                });
+            },
         },
-        editBtn(cn) {
-            queryByCn({ cn: cn }).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.editForm = { ...res.data };
-                    this.editVisable = true;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        submitEditForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    updateSupplier(this.editForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("修改成功");
-                            this.editVisable = false;
-                            this.editForm = {};
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
-                }
-            });
+        // 组件挂载时初始化数据
+        mounted() {
+            this.init();
         },
-    },
-    mounted() {
-        this.init();
-    },
-};
+    };
 </script>
 <style>
-.table {
-    height: 320px;
-}
+    /* 表格容器样式，设置高度 */
+   .table {
+        height: 320px;
+    }
 
-.pageUtils {
-    position: absolute;
-    width: 84%;
-    margin: 2px auto;
-    height: 43px;
-}
+    /* 分页工具样式，设置定位、宽度、外边距和高度 */
+   .pageUtils {
+        position: absolute;
+        width: 84%;
+        margin: 2px auto;
+        height: 43px;
+    }
 
-.search {
-    display: inline-block;
-    margin: 0 auto;
-    height: 51px;
-    line-height: 51px;
-}
+    /* 搜索区域样式 */
+   .search {
+        display: inline-block;
+        margin: 0 auto;
+        height: 51px;
+        line-height: 51px;
+    }
 
-.search .column {
-    display: inline-block;
-    margin: 0 auto;
-    margin-right: 2px;
-    line-height: 48px;
-    height: 51px;
-}
+    /* 搜索区域列样式 */
+   .search .column {
+        display: inline-block;
+        margin: 0 auto;
+        margin-right: 2px;
+        line-height: 48px;
+        height: 51px;
+    }
 </style>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/member_management/member/List.vue b/superMarket-frontend/src/views/member_management/member/List.vue
index 15df181..6fcd01f 100644
--- a/superMarket-frontend/src/views/member_management/member/List.vue
+++ b/superMarket-frontend/src/views/member_management/member/List.vue
@@ -1,18 +1,29 @@
 <template>
+    <!-- 定义组件的根元素，id 为 employee_index -->
     <div id="employee_index">
+        <!-- 面包屑导航组件，separator 属性设置分隔符为 / -->
         <el-breadcrumb separator="/">
+            <!-- 面包屑导航的第一个项，显示“首页” -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 面包屑导航的第二个项，显示“会员管理” -->
             <el-breadcrumb-item>会员管理</el-breadcrumb-item>
-            <el-breadcrumb-item>会员信息</el-breadcrumb-item> </el-breadcrumb
-        ><br />
+            <!-- 面包屑导航的第三个项，显示“会员信息” -->
+            <el-breadcrumb-item>会员信息</el-breadcrumb-item> 
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
 
+        <!-- 栅格布局容器，一行分为三列 -->
         <el-row>
+            <!-- 第一列，占 8 份，设置文本左对齐和右内边距为 10px，包含姓名输入框 -->
             <el-col :span="8" style="text-align: left; padding-right: 10px">
                 <el-input placeholder="姓名" v-model="searchForm.name" />
             </el-col>
+            <!-- 第二列，占 8 份，设置文本左对齐和右内边距为 10px，包含手机号码输入框 -->
             <el-col :span="8" style="text-align: left; padding-right: 10px">
                 <el-input placeholder="手机号码" v-model="searchForm.phone" />
             </el-col>
+            <!-- 第三列，占 8 份，包含会员状态选择框 -->
             <el-col :span="8">
                 <el-select
                     v-model="searchForm.state"
@@ -20,101 +31,132 @@
                     placeholder="状态"
                     clearable
                 >
+                    <!-- 状态选择框的选项，标签为“正常”，值为 0 -->
                     <el-option label="正常" value="0"></el-option>
+                    <!-- 状态选择框的选项，标签为“删除”，值为 1 -->
                     <el-option label="删除" value="1"></el-option>
                 </el-select>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+
+        <!-- 栅格布局容器，一行只有一列 -->
         <el-row>
+            <!-- 这一列占 24 份，设置文本左对齐，包含搜索和录入会员按钮 -->
             <el-col :span="24" style="text-align: left">
+                <!-- 搜索按钮，类型为 primary，点击时调用 submitSearchForm 方法，设置字体大小 -->
                 <el-button
                     type="primary"
                     @click="submitSearchForm"
                     style="font-size: 18px"
                 >
+                    <!-- 搜索按钮的图标 -->
                     <i class="iconfont icon-r-find" style="font-size: 18px">
                     </i>
-                    搜索</el-button
-                >
+                    <!-- 搜索按钮的文本 -->
+                    搜索</el-button>
+                <!-- 录入会员按钮，类型为 success，点击时将 newVisable 设置为 true，设置字体大小 -->
                 <el-button
                     type="success"
                     @click="newVisable = true"
                     style="font-size: 18px"
                 >
+                    <!-- 录入会员按钮的图标 -->
                     <i class="iconfont icon-r-add" style="font-size: 18px"> </i>
+                    <!-- 录入会员按钮的文本 -->
                     录入会员
                 </el-button>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
-        <!--表格数据-->
+
+        <!-- 表格数据的容器 -->
         <div class="table">
+            <!-- 表格组件，数据绑定到 tableData，设置宽度为 100%，大小为 medium -->
             <el-table :data="tableData" style="width: 100%" size="medium">
+                <!-- 表格列，显示手机号，prop 绑定到数据中的 phone 字段 -->
                 <el-table-column prop="phone" label="手机号"> </el-table-column>
+                <!-- 表格列，显示姓名，prop 绑定到数据中的 name 字段 -->
                 <el-table-column prop="name" label="姓名"> </el-table-column>
+                <!-- 表格列，显示邮箱，设置当内容溢出时显示 tooltip，prop 绑定到数据中的 email 字段 -->
                 <el-table-column
                     prop="email"
                     :show-overflow-tooltip="true"
                     label="邮箱"
                 >
                 </el-table-column>
+                <!-- 表格列，显示积分，prop 绑定到数据中的 integral 字段 -->
                 <el-table-column prop="integral" label="积分">
                 </el-table-column>
+                <!-- 表格列，显示状态，根据状态值显示不同的标签 -->
                 <el-table-column prop="state" label="状态">
                     <template v-slot="scope">
+                        <!-- 如果状态为 0，显示绿色的“正常”标签 -->
                         <el-tag v-if="scope.row.state == '0'" type="success"
-                            >正常</el-tag
-                        >
+                            >正常</el-tag>
+                        <!-- 否则，显示红色的“删除”标签 -->
                         <el-tag v-else type="danger">删除</el-tag>
                     </template>
                 </el-table-column>
+                <!-- 表格列，显示备注，设置当内容溢出时显示 tooltip，prop 绑定到数据中的 info 字段 -->
                 <el-table-column
                     prop="info"
                     :show-overflow-tooltip="true"
                     label="备注"
                 >
                 </el-table-column>
+                <!-- 表格列，显示操作，固定在右侧，宽度为 420 -->
                 <el-table-column label="操作" width="420" fixed="right">
                     <template v-slot="scope">
+                        <!-- 如果会员状态为 0，显示积分兑换按钮，点击时调用 exchangeProductsBtn 方法 -->
                         <el-button
                             v-if="scope.row.state == '0'"
                             type="warning"
                             @click="exchangeProductsBtn(scope.row.id)"
                             style="font-size: 18px"
                         >
+                            <!-- 积分兑换按钮的图标 -->
                             <i
                                 class="iconfont icon-r-refresh"
                                 style="font-size: 18px"
                             ></i>
+                            <!-- 积分兑换按钮的文本 -->
                             积分兑换
                         </el-button>
+                        <!-- 修改按钮，点击时调用 editBtn 方法 -->
                         <el-button
                             type="success"
                             @click="editBtn(scope.row.id)"
                             style="font-size: 18px"
                         >
+                            <!-- 修改按钮的图标 -->
                             <i
                                 class="iconfont icon-r-edit"
                                 style="font-size: 18px"
                             ></i>
-                            修改</el-button
-                        >
+                            <!-- 修改按钮的文本 -->
+                            修改</el-button>
+                        <!-- 删除按钮，点击时调用 delBtn 方法 -->
                         <el-button
                             type="danger"
                             @click="delBtn(scope.row.id)"
                             style="font-size: 18px"
                         >
+                            <!-- 删除按钮的图标 -->
                             <i
                                 class="iconfont icon-r-delete"
                                 style="font-size: 18px"
                             ></i>
-                            删除</el-button
-                        >
+                            <!-- 删除按钮的文本 -->
+                            删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
+            <!-- 分页组件的容器，设置外边距 -->
             <div style="margin: 10px 0 15px 0">
+                <!-- 分页组件，监听 size-change 和 current-change 事件，绑定分页相关数据到 searchForm -->
                 <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
@@ -128,13 +170,14 @@
             </div>
         </div>
 
-        <!--录入-->
+        <!-- 录入会员的对话框，title 为“录入会员”，根据 newVisable 的值显示或隐藏，设置标签宽度和宽度 -->
         <el-dialog
             title="录入会员"
             :visible.sync="newVisable"
             label-width="200"
             width="50%"
         >
+            <!-- 表单组件，绑定到 newForm，设置验证规则和引用，设置标签宽度和类名 -->
             <el-form
                 :model="newForm"
                 :rules="rules"
@@ -142,6 +185,7 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 表单字段，标签为“号码：”，prop 为 phone，包含手机号输入框 -->
                 <el-form-item label="号码：" prop="phone">
                     <el-input
                         max="11"
@@ -150,18 +194,21 @@
                     ></el-input>
                 </el-form-item>
 
+                <!-- 表单字段，标签为“姓名：”，prop 为 name，包含姓名输入框 -->
                 <el-form-item label="姓名：" prop="name">
                     <el-input
                         v-model="newForm.name"
                         placeholder="请输入姓名"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单字段，标签为“邮箱：”，包含邮箱输入框 -->
                 <el-form-item label="邮箱：">
                     <el-input
                         v-model="newForm.email"
                         placeholder="如：xxx@qq.com"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单字段，标签为“备注：”，包含备注的文本域输入框 -->
                 <el-form-item label="备注：">
                     <el-input
                         type="textarea"
@@ -169,28 +216,31 @@
                         placeholder="如：新会员"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单操作项，包含提交和取消按钮 -->
                 <el-form-item>
+                    <!-- 提交按钮，类型为 primary，点击时调用 submitNewForm 方法，设置字体大小 -->
                     <el-button
                         type="primary"
                         @click="submitNewForm('newForm')"
                         style="font-size: 18px"
                     >
+                        <!-- 提交按钮的图标 -->
                         <i
                             class="iconfont icon-r-yes"
                             style="font-size: 18px"
                         ></i>
-                        提交</el-button
-                    >
+                        <!-- 提交按钮的文本 -->
+                        提交</el-button>
+                    <!-- 取消按钮，点击时调用 saveCancel 方法，设置字体大小 -->
                     <el-button
                         @click="saveCancel('newForm')"
                         style="font-size: 18px"
                     >
-                        取消</el-button
-                    >
+                        取消</el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
-        <!--修改-->
+        <!-- 修改会员的对话框，title 为“修改会员”，根据 editVisable 的值显示或隐藏，设置大小、标签宽度和宽度 -->
         <el-dialog
             title="修改会员"
             :visible.sync="editVisable"
@@ -198,6 +248,7 @@
             label-width="200"
             width="50%"
         >
+            <!-- 表单组件，绑定到 editForm，设置验证规则和引用，设置标签宽度和类名 -->
             <el-form
                 :model="editForm"
                 :rules="rules"
@@ -205,6 +256,7 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 表单字段，标签为“号码：”，prop 为 phone，包含手机号输入框 -->
                 <el-form-item label="号码：" prop="phone">
                     <el-input
                         max="11"
@@ -212,24 +264,28 @@
                         v-model="editForm.phone"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单字段，标签为“姓名：”，prop 为 name，包含姓名输入框 -->
                 <el-form-item label="姓名：" prop="name">
                     <el-input
                         v-model="editForm.name"
                         placeholder="请输入姓名"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单字段，标签为“邮箱：”，包含邮箱输入框 -->
                 <el-form-item label="邮箱：">
                     <el-input
                         v-model="editForm.email"
                         placeholder="如：xxx@qq.com"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单字段，标签为“积分：”，包含积分输入框 -->
                 <el-form-item label="积分：">
                     <el-input
                         v-model="editForm.integral"
                         placeholder="如：10"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单字段，标签为“备注：”，包含备注的文本域输入框 -->
                 <el-form-item label="备注：">
                     <el-input
                         type="textarea"
@@ -237,6 +293,7 @@
                         placeholder="如：新会员"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单字段，标签为“状态：”，prop 为 state，包含状态选择框 -->
                 <el-form-item label="状态：" prop="state">
                     <el-select
                         v-model="editForm.state"
@@ -245,45 +302,52 @@
                         @change="$forceUpdate()"
                         clearable
                     >
+                        <!-- 状态选择框的选项，标签为“正常”，值为 0 -->
                         <el-option label="正常" value="0"></el-option>
+                        <!-- 状态选择框的选项，标签为“删除”，值为 1 -->
                         <el-option label="删除" value="1"></el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单操作项，包含提交和关闭按钮 -->
                 <el-form-item>
+                    <!-- 提交按钮，类型为 primary，点击时调用 submitEditForm 方法，设置字体大小 -->
                     <el-button
                         type="primary"
                         @click="submitEditForm('editForm')"
                         style="font-size: 18px"
                     >
+                        <!-- 提交按钮的图标 -->
                         <i
                             class="iconfont icon-r-yes"
                             style="font-size: 18px"
                         ></i>
-                        提交</el-button
-                    >
+                        <!-- 提交按钮的文本 -->
+                        提交</el-button>
+                    <!-- 关闭按钮，类型为 info，点击时调用 resetEditForm 方法，设置字体大小 -->
                     <el-button
                         type="info"
                         @click="resetEditForm('editForm')"
                         style="font-size: 18px"
                     >
-                        关闭</el-button
-                    >
+                        关闭</el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
-        <!--积分商品-->
+        <!-- 兑换积分商品的对话框，title 为“兑换积分商品”，根据 pointProductsVisable 的值显示或隐藏，设置标签宽度和宽度 -->
         <el-dialog
             title="兑换积分商品"
             :visible.sync="pointProductsVisable"
             label-width="200"
             width="40%"
         >
+            <!-- 表单组件，绑定到 pointProductsForm，设置验证规则和引用，设置类名 -->
             <el-form
                 :model="pointProductsForm"
                 :rules="rules"
                 ref="pointProductsForm"
                 class="demo-ruleForm"
             >
+                <!-- 如果选择了积分商品（pointProductsForm.goodsId 有值），显示商品图片 -->
                 <el-form-item v-if="pointProductsForm.goodsId">
                     <img
                         width="100px"
@@ -291,6 +355,7 @@
                         alt="商品图片"
                     />
                 </el-form-item>
+                <!-- 表单字段，标签为“积分商品：”，prop 为 goodsId，包含积分商品选择框 -->
                 <el-form-item label="积分商品：" prop="goodsId">
                     <el-select
                         @change="
@@ -303,6 +368,7 @@
                         filterable
                         clearable
                     >
+                        <!-- 循环生成积分商品选择框的选项 -->
                         <el-option
                             v-for="item in options_pointProducts"
                             :key="item.id"
@@ -312,6 +378,7 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 如果选择了积分商品（pointProductsForm.goodsId 有值），显示所需积分的输入框（只读） -->
                 <el-form-item
                     v-if="pointProductsForm.goodsId"
                     label="所需积分："
@@ -323,337 +390,458 @@
                         placeholder="所需积分"
                     />
                 </el-form-item>
+                <!-- 表单操作项，包含兑换和关闭按钮 -->
                 <el-form-item>
+                    <!-- 如果选择了积分商品（pointProductsForm.goodsId 有值），显示兑换按钮，点击时调用 submitPointProductsForm 方法，设置字体大小 -->
                     <el-button
                         v-if="pointProductsForm.goodsId"
                         type="warning"
-                        @click="submitPointProductsForm('pointProductsForm')"
-                        style="font-size: 18px"
-                    >
-                        <i
+                        @
+                                                <i
                             class="iconfont icon-r-yes"
                             style="font-size: 18px"
                         ></i>
+                        <!-- 兑换按钮的文本 -->
                         兑换
                     </el-button>
+                    <!-- 关闭按钮，类型为 info，点击时调用 closePointProductsForm 方法，设置字体大小 -->
                     <el-button
                         type="info"
                         @click="closePointProductsForm"
                         style="font-size: 18px"
                     >
-                        关闭</el-button
-                    >
+                        关闭
+                    </el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
     </div>
 </template>
 <script>
-import { popup } from "@/assets/js/common";
-import {
-    delMember,
-    queryPageByQo,
-    save,
-    update,
-    queryMemberById,
-} from "@/api/member_management/member/memberApi";
-import {
-    queryPointProductByGoodsId,
-    queryPointProductBymemberId,
-    saveExchangePointProductRecords,
-} from "@/api/sale_management/exchange_point_products/exchangePointProductsApi";
+    // 引入自定义的弹窗提示函数
+    import { popup } from "@/assets/js/common";
+    // 引入会员管理相关的 API 方法
+    import {
+        delMember,
+        queryPageByQo,
+        save,
+        update,
+        queryMemberById
+    } from "@/api/member_management/member/memberApi";
+    // 引入积分商品兑换相关的 API 方法
+    import {
+        queryPointProductByGoodsId,
+        queryPointProductBymemberId,
+        saveExchangePointProductRecords
+    } from "@/api/sale_management/exchange_point_products/exchangePointProductsApi";
 
-export default {
-    data() {
-        return {
-            BaseApi: this.$store.state.BaseApi,
-            newVisable: false,
-            editVisable: false,
-            searchForm: {
-                pageSize: 5,
-            },
-            tableData: [],
-            newForm: {},
-            editForm: {},
-            rules: {
-                name: [
-                    {
-                        required: true,
-                        message: "名称不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                phone: [
-                    {
-                        required: true,
-                        message: "手机号不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                state: [
-                    {
-                        required: true,
-                        message: "状态不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                goodsId: [
-                    {
-                        required: true,
-                        message: "商品不能为空",
-                        trigger: "blur",
-                    },
-                ],
-            },
-            options_pointProducts: [],
-            pointProductsForm: {
-                goodsId: "",
-                coverUrl: "",
-                integral: "",
-            },
-            pointProductsVisable: false,
-        };
-    },
-    methods: {
-        init() {
-            queryPageByQo(this.searchForm).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    console.log(res.data);
-                    this.tableData = res.data.records;
-                    this.searchForm.total = res.data.total;
-                    this.searchForm.pageSize = res.data.size;
-                    this.searchForm.currentPage = res.data.current;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        /*分页*/
-        handleSizeChange(val) {
-            this.searchForm.pageSize = val;
-            this.init();
-            console.log(`每页 ${val} 条`);
-        },
-        handleCurrentChange(val) {
-            this.searchForm.currentPage = val;
-            this.init();
-            console.log(`当前页: ${val}`);
-        },
-        submitSearchForm() {
-            this.init();
-        },
-        saveCancel(formName) {
-            this.newForm = {};
-            this.$refs[formName].resetFields();
-            this.newVisable = false;
-        },
-        submitNewForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    save(this.newForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("操作成功");
-                            this.newForm = {};
-                            this.newVisable = false;
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
+    export default {
+        // 定义组件的数据
+        data() {
+            return {
+                // 从 Vuex 中获取基础 API 地址
+                BaseApi: this.$store.state.BaseApi,
+                // 录入会员对话框的显示状态
+                newVisable: false,
+                // 修改会员对话框的显示状态
+                editVisable: false,
+                // 搜索表单的数据，初始每页显示 5 条
+                searchForm: {
+                    pageSize: 5
+                },
+                // 表格展示的会员数据
+                tableData: [],
+                // 录入会员表单的数据
+                newForm: {},
+                // 修改会员表单的数据
+                editForm: {},
+                // 表单验证规则
+                rules: {
+                    name: [
+                        {
+                            // 姓名为必填项，失去焦点时触发验证
+                            required: true,
+                            message: "名称不能为空",
+                            trigger: "blur"
                         }
-                    });
-                }
-            });
-        },
-        editBtn(id) {
-            queryMemberById({ id: id }).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.editForm = { ...res.data };
-                    this.editVisable = true;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        submitEditForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    update(this.editForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("操作成功");
-                            this.editForm = {};
-                            this.editVisable = false;
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
+                    ],
+                    phone: [
+                        {
+                            // 手机号为必填项，失去焦点时触发验证
+                            required: true,
+                            message: "手机号不能为空",
+                            trigger: "blur"
                         }
-                    });
-                }
-            });
-        },
-        resetEditForm(formName) {
-            this.editForm = {};
-            this.$refs[formName].resetFields();
-            this.editVisable = false;
-        },
-        delBtn(id) {
-            this.$confirm("确定删除该会员？", "警示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    delMember({ id: id }).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("操作成功");
-                            this.searchForm.state = "0";
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
+                    ],
+                    state: [
+                        {
+                            // 状态为必填项，失去焦点时触发验证
+                            required: true,
+                            message: "状态不能为空",
+                            trigger: "blur"
                         }
-                    });
+                    ],
+                    goodsId: [
+                        {
+                            // 商品 ID 为必填项，失去焦点时触发验证
+                            required: true,
+                            message: "商品不能为空",
+                            trigger: "blur"
+                        }
+                    ]
+                },
+                // 积分商品选项列表
+                options_pointProducts: [],
+                // 积分商品兑换表单的数据
+                pointProductsForm: {
+                    goodsId: "",
+                    coverUrl: "",
+                    integral: ""
+                },
+                // 积分商品兑换对话框的显示状态
+                pointProductsVisable: false
+            };
+        },
+        // 定义组件的方法
+        methods: {
+            // 初始化表格数据
+            init() {
+                // 调用查询会员分页数据的 API 方法
+                queryPageByQo(this.searchForm).then((res) => {
+                    // 获取响应数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 打印返回的数据
+                        console.log(res.data);
+                        // 更新表格数据
+                        this.tableData = res.data.records;
+                        // 更新总记录数
+                        this.searchForm.total = res.data.total;
+                        // 更新每页显示数量
+                        this.searchForm.pageSize = res.data.size;
+                        // 更新当前页码
+                        this.searchForm.currentPage = res.data.current;
+                    } else {
+                        // 显示错误提示弹窗
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 处理每页显示数量变化的方法
+            handleSizeChange(val) {
+                // 更新每页显示数量
+                this.searchForm.pageSize = val;
+                // 重新初始化表格数据
+                this.init();
+                // 打印当前每页显示数量
+                console.log(`每页 ${val} 条`);
+            },
+            // 处理当前页码变化的方法
+            handleCurrentChange(val) {
+                // 更新当前页码
+                this.searchForm.currentPage = val;
+                // 重新初始化表格数据
+                this.init();
+                // 打印当前页码
+                console.log(`当前页: ${val}`);
+            },
+            // 提交搜索表单的方法
+            submitSearchForm() {
+                // 重新初始化表格数据
+                this.init();
+            },
+            // 取消录入会员表单的方法
+            saveCancel(formName) {
+                // 清空录入表单数据
+                this.newForm = {};
+                // 重置表单字段
+                this.$refs[formName].resetFields();
+                // 隐藏录入会员对话框
+                this.newVisable = false;
+            },
+            // 提交录入会员表单的方法
+            submitNewForm(formName) {
+                // 验证表单
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 调用保存会员信息的 API 方法
+                        save(this.newForm).then((res) => {
+                            // 获取响应数据
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 显示操作成功提示弹窗
+                                popup("操作成功");
+                                // 清空录入表单数据
+                                this.newForm = {};
+                                // 隐藏录入会员对话框
+                                this.newVisable = false;
+                                // 重新初始化表格数据
+                                this.init();
+                            } else {
+                                // 显示错误提示弹窗
+                                popup(res.msg, "error");
+                            }
+                        });
+                    }
+                });
+            },
+            // 编辑会员信息的方法
+            editBtn(id) {
+                // 调用根据会员 ID 查询会员信息的 API 方法
+                queryMemberById({ id: id }).then((res) => {
+                    // 获取响应数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新修改表单数据
+                        this.editForm = { ...res.data };
+                        // 显示修改会员对话框
+                        this.editVisable = true;
+                    } else {
+                        // 显示错误提示弹窗
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 提交修改会员表单的方法
+            submitEditForm(formName) {
+                // 验证表单
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 调用更新会员信息的 API 方法
+                        update(this.editForm).then((res) => {
+                            // 获取响应数据
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 显示操作成功提示弹窗
+                                popup("操作成功");
+                                // 清空修改表单数据
+                                this.editForm = {};
+                                // 隐藏修改会员对话框
+                                this.editVisable = false;
+                                // 重新初始化表格数据
+                                this.init();
+                            } else {
+                                // 显示错误提示弹窗
+                                popup(res.msg, "error");
+                            }
+                        });
+                    }
+                });
+            },
+            // 重置修改会员表单的方法
+            resetEditForm(formName) {
+                // 清空修改表单数据
+                this.editForm = {};
+                // 重置表单字段
+                this.$refs[formName].resetFields();
+                // 隐藏修改会员对话框
+                this.editVisable = false;
+            },
+            // 删除会员的方法
+            delBtn(id) {
+                // 显示确认删除的提示框
+                this.$confirm("确定删除该会员？", "警示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
                 })
-                .catch(() => {
-                    this.$message({
-                        type: "info",
-                        message: "已取消操作",
+                   .then(() => {
+                        // 调用删除会员的 API 方法
+                        delMember({ id: id }).then((res) => {
+                            // 获取响应数据
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 显示操作成功提示弹窗
+                                popup("操作成功");
+                                // 只显示正常状态的会员
+                                this.searchForm.state = "0";
+                                // 重新初始化表格数据
+                                this.init();
+                            } else {
+                                // 显示错误提示弹窗
+                                popup(res.msg, "error");
+                            }
+                        });
+                    })
+                   .catch(() => {
+                        // 显示已取消操作的提示信息
+                        this.$message({
+                            type: "info",
+                            message: "已取消操作"
+                        });
                     });
-                });
-        },
-        /*兑换积分商品*/
-        exchangeProductsBtn(id) {
-            (this.pointProductsForm = {
-                memberId: this.pointProductsForm.memberId,
-                goodsId: "",
-                coverUrl: "",
-                integral: "",
-            }),
+            },
+            // 积分兑换商品的方法
+            exchangeProductsBtn(id) {
+                // 重置积分商品兑换表单数据
+                this.pointProductsForm = {
+                    memberId: this.pointProductsForm.memberId,
+                    goodsId: "",
+                    coverUrl: "",
+                    integral: ""
+                };
+                // 调用根据会员 ID 查询可兑换积分商品的 API 方法
                 queryPointProductBymemberId({ memberId: id }).then((res) => {
+                    // 获取响应数据
                     res = res.data;
                     if (res.code == 200) {
+                        // 更新积分商品选项列表
                         this.options_pointProducts = res.data;
                         if (!this.options_pointProducts.length) {
+                            // 显示该会员无商品可兑换的提示弹窗
                             popup("该会员积分数无法兑换任何商品", "warning");
                             return;
                         }
+                        // 设置当前会员 ID
                         this.pointProductsForm.memberId = id;
+                        // 显示积分商品兑换对话框
                         this.pointProductsVisable = true;
                     } else {
+                        // 显示错误提示弹窗
                         popup(res.msg, "error");
                     }
                 });
-        },
-        submitPointProductsForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    saveExchangePointProductRecords(
-                        this.pointProductsForm
-                    ).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("兑换成功");
-                            this.pointProductsForm = {};
-                            this.pointProductsVisable = false;
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
+            },
+            // 提交积分商品兑换表单的方法
+            submitPointProductsForm(formName) {
+                // 验证表单
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 调用保存积分兑换记录的 API 方法
+                        saveExchangePointProductRecords(
+                            this.pointProductsForm
+                        ).then((res) => {
+                            // 获取响应数据
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 显示兑换成功提示弹窗
+                                popup("兑换成功");
+                                // 清空积分商品兑换表单数据
+                                this.pointProductsForm = {};
+                                // 隐藏积分商品兑换对话框
+                                this.pointProductsVisable = false;
+                                // 重新初始化表格数据
+                                this.init();
+                            } else {
+                                // 显示错误提示弹窗
+                                popup(res.msg, "error");
+                            }
+                        });
+                    }
+                });
+            },
+            // 关闭积分商品兑换对话框的方法
+            closePointProductsForm() {
+                // 清空积分商品选项列表
+                this.options_pointProducts = [];
+                // 清空积分商品兑换表单数据
+                this.pointProductsForm = {};
+                // 隐藏积分商品兑换对话框
+                this.pointProductsVisable = false;
+            },
+            // 根据商品 ID 查询积分商品信息的方法
+            queryPointProductByGoodsId(goodsId) {
+                // 调用根据商品 ID 查询积分商品信息的 API 方法
+                queryPointProductByGoodsId({ goodsId: goodsId }).then((res) => {
+                    // 获取响应数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        if (!res.data) {
+                            // 重置积分商品兑换表单数据
+                            this.pointProductsForm = {
+                                memberId: this.pointProductsForm.memberId,
+                                goodsId: "",
+                                coverUrl: "",
+                                integral: ""
+                            };
+                            return;
                         }
-                    });
-                }
-            });
-        },
-        closePointProductsForm() {
-            this.options_pointProducts = [];
-            this.pointProductsForm = {};
-            this.pointProductsVisable = false;
-        },
-        queryPointProductByGoodsId(goodsId) {
-            queryPointProductByGoodsId({ goodsId: goodsId }).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    if (!res.data) {
-                        this.pointProductsForm = {
-                            memberId: this.pointProductsForm.memberId,
-                            goodsId: "",
-                            coverUrl: "",
-                            integral: "",
-                        };
-                        return;
+                        // 更新所需积分
+                        this.pointProductsForm.integral = res.data.integral;
+                        // 更新商品封面图片 URL
+                        this.pointProductsForm.coverUrl = res.data.coverUrl;
+                    } else {
+                        // 显示错误提示弹窗
+                        popup(res.msg, "error");
+                        // 清空选择的商品 ID
+                        this.pointProductsForm.goodsId = "";
                     }
-                    this.pointProductsForm.integral = res.data.integral;
-                    this.pointProductsForm.coverUrl = res.data.coverUrl;
-                } else {
-                    popup(res.msg, "error");
-                    this.pointProductsForm.goodsId = "";
-                }
-            });
+                });
+            }
         },
-    },
-    mounted() {
-        /*初始化表格数据*/
-        this.searchForm.state = "0";
-        this.init();
-    },
-};
+        // 组件挂载完成后的钩子函数
+        mounted() {
+            // 初始化搜索时只显示正常状态的会员
+            this.searchForm.state = "0";
+            // 初始化表格数据
+            this.init();
+        }
+    };
 </script>
 <style>
-.searchForm {
-    height: 134px;
-}
+    /* 搜索表单样式，设置高度 */
+   .searchForm {
+        height: 134px;
+    }
 
-.table {
-    height: 320px;
-}
+    /* 表格样式，设置高度 */
+   .table {
+        height: 320px;
+    }
 
-.pageUtils {
-    position: absolute;
-    width: 84%;
-    margin: 2px auto;
-    height: 43px;
-}
+    /* 分页工具样式，设置定位、宽度、外边距和高度 */
+   .pageUtils {
+        position: absolute;
+        width: 84%;
+        margin: 2px auto;
+        height: 43px;
+    }
 
-.searchForm {
-    display: inline-block;
-    margin: 0 auto;
-    height: 51px;
-    line-height: 51px;
-}
+    /* 搜索表单样式，重新设置高度和布局 */
+   .searchForm {
+        display: inline-block;
+        margin: 0 auto;
+        height: 51px;
+        line-height: 51px;
+    }
 
-.searchForm .column {
-    display: inline-block;
-    margin: 0 auto;
-    margin-right: 2px;
-    line-height: 48px;
-    height: 51px;
-}
+    /* 搜索表单列样式，设置布局和行高 */
+   .searchForm .column {
+        display: inline-block;
+        margin: 0 auto;
+        margin-right: 2px;
+        line-height: 48px;
+        height: 51px;
+    }
 
-.avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-}
+    /* 头像上传组件的上传区域样式，设置边框、圆角、鼠标样式和溢出处理 */
+   .avatar-uploader .el-upload {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
 
-.avatar-uploader .el-upload:hover {
-    border-color: #409eff;
-}
+    /* 头像上传组件的上传区域鼠标悬停样式，设置边框颜色 */
+   .avatar-uploader .el-upload:hover {
+        border-color: #409eff;
+    }
 
-.avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-}
+    /* 头像上传组件的图标样式，设置字体大小、颜色、宽度、高度、行高和文本对齐方式 */
+   .avatar-uploader-icon {
+        font-size: 28px;
+        color: #8c939d;
+        width: 178px;
+        height: 178px;
+        line-height: 178px;
+        text-align: center;
+    }
 
-.avatar {
-    width: 178px;
-    height: 178px;
-    display: block;
-}
+    /* 头像样式，设置宽度、高度和显示方式 */
+   .avatar {
+        width: 178px;
+        height: 178px;
+        display: block;
+    }
 </style>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/personal/Edit_pwd.vue b/superMarket-frontend/src/views/personal/Edit_pwd.vue
index 4233e5f..fd8986b 100644
--- a/superMarket-frontend/src/views/personal/Edit_pwd.vue
+++ b/superMarket-frontend/src/views/personal/Edit_pwd.vue
@@ -1,12 +1,20 @@
-
 <template>
+    <!-- 组件的根容器 -->
     <div>
+        <!-- 面包屑导航组件，用于显示页面层级关系，分隔符为 / -->
         <el-breadcrumb separator="/">
+            <!-- 面包屑导航的第一个元素，显示“首页” -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 面包屑导航的第二个元素，显示“个人中心” -->
             <el-breadcrumb-item>个人中心 </el-breadcrumb-item>
-            <el-breadcrumb-item>密码修改</el-breadcrumb-item> </el-breadcrumb
-        ><br />
+            <!-- 面包屑导航的第三个元素，显示“密码修改” -->
+            <el-breadcrumb-item>密码修改</el-breadcrumb-item> 
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
+        <!-- 密码修改表单的容器，设置了 id 为 edit_pwd -->
         <div id="edit_pwd">
+            <!-- Element UI 的表单组件，绑定表单数据到 pwdForm，设置验证规则为 rules，引用为 pwdForm，标签宽度为 100px，添加类名 demo-ruleForm -->
             <el-form
                 :model="pwdForm"
                 :rules="rules"
@@ -14,46 +22,62 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 显示一个图标和标题“密码修改” -->
                 <i class="iconfont icon-r-lock" style="font-size: 32px">
                     <b style="font-size: 28px">密码修改</b></i
                 >
+                <!-- 换行 -->
                 <br />
+                <!-- 换行 -->
                 <br />
+                <!-- 表单中的账号字段，标签为“账号” -->
                 <el-form-item label="账号">
+                    <!-- 输入框，设置为禁用状态，绑定账号数据到 pwdForm.username -->
                     <el-input disabled v-model="pwdForm.username"></el-input>
                 </el-form-item>
+                <!-- 表单中的旧密码字段，标签为“旧密码”，设置了验证规则（在 rules 中定义） -->
                 <el-form-item label="旧密码" prop="oldPwd">
+                    <!-- 密码输入框，绑定旧密码数据到 pwdForm.oldPwd -->
                     <el-input
                         type="password"
                         v-model="pwdForm.oldPwd"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单中的新密码字段，标签为“新密码”，设置了验证规则（在 rules 中定义） -->
                 <el-form-item label="新密码" prop="newPwd">
+                    <!-- 密码输入框，绑定新密码数据到 pwdForm.newPwd -->
                     <el-input
                         type="password"
                         v-model="pwdForm.newPwd"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单中的操作按钮区域 -->
                 <el-form-item>
+                    <!-- 确定按钮，类型为 primary，点击触发 submitForm 方法，设置字体大小为 18px -->
                     <el-button
                         type="primary"
                         @click="submitForm('pwdForm')"
                         style="font-size: 18px"
                     >
+                        <!-- 按钮图标 -->
                         <i
                             class="iconfont icon-r-yes"
                             style="font-size: 18px"
                         ></i>
+                        <!-- 按钮文本 -->
                         确定</el-button
                     >
+                    <!-- 重置按钮，点击触发 resetForm 方法，设置字体大小为 18px -->
                     <el-button
                         @click="resetForm('pwdForm')"
                         style="font-size: 18px"
                     >
+                        <!-- 按钮图标 -->
                         <i
                             class="iconfont icon-r-refresh"
                             style="font-size: 18px"
                         ></i>
+                        <!-- 按钮文本 -->
                         重置</el-button
                     >
                 </el-form-item>
@@ -62,97 +86,127 @@
     </div>
 </template>
 <script>
-import { loginEmp, removeToken } from "@/assets/js/auth";
-import Cookies from "js-cookie";
-import { ajaxPost, popup } from "@/assets/js/common";
+    // 导入登录员工信息和移除 token 的方法
+    import { loginEmp, removeToken } from "@/assets/js/auth";
+    // 导入 js-cookie 库，用于操作 cookie
+    import Cookies from "js-cookie";
+    // 导入 ajaxPost 方法用于发送 POST 请求，导入 popup 方法用于显示弹窗提示
+    import { ajaxPost, popup } from "@/assets/js/common";
 
-export default {
-    data() {
-        return {
-            pwdForm: {},
-            rules: {
-                newPwd: [
-                    {
-                        required: true,
-                        message: "新密码不能为空",
-                        trigger: "blur",
-                    },
-                    {
-                        min: 6,
-                        max: 8,
-                        message: "新密码长度为6-8位",
-                        trigger: "blur",
-                    },
-                ],
-                oldPwd: [
-                    {
-                        required: true,
-                        message: "旧密码不能为空",
-                        trigger: "blur",
-                    },
-                    {
-                        min: 6,
-                        max: 8,
-                        message: "旧密码长度为6-8位",
-                        trigger: "blur",
-                    },
-                ],
-            },
-        };
-    },
-    methods: {
-        init() {
-            this.pwdForm.username = loginEmp().username;
-        },
-        resetForm(formName) {
-            this.$refs[formName].resetFields();
+    export default {
+        // 组件的数据部分
+        data() {
+            return {
+                // 表单数据对象
+                pwdForm: {},
+                // 表单验证规则
+                rules: {
+                    newPwd: [
+                        {
+                            // 新密码为必填项，失去焦点时触发验证
+                            required: true,
+                            message: "新密码不能为空",
+                            trigger: "blur"
+                        },
+                        {
+                            // 新密码长度要求为 6 - 8 位，失去焦点时触发验证
+                            min: 6,
+                            max: 8,
+                            message: "新密码长度为6 - 8位",
+                            trigger: "blur"
+                        }
+                    ],
+                    oldPwd: [
+                        {
+                            // 旧密码为必填项，失去焦点时触发验证
+                            required: true,
+                            message: "旧密码不能为空",
+                            trigger: "blur"
+                        },
+                        {
+                            // 旧密码长度要求为 6 - 8 位，失去焦点时触发验证
+                            min: 6,
+                            max: 8,
+                            message: "旧密码长度为6 - 8位",
+                            trigger: "blur"
+                        }
+                    ]
+                }
+            };
         },
-        submitForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    this.$confirm("确定修改密码?", "警示", {
-                        confirmButtonText: "确定",
-                        cancelButtonText: "取消",
-                        type: "warning",
-                    })
-                        .then(() => {
-                            ajaxPost("/personal/edit_pwd", this.pwdForm).then(
-                                (res) => {
-                                    res = res.data;
-                                    if (res.code == 200) {
-                                        popup("密码修改成功,请重新登录...");
-                                        this.pwdForm = {
-                                            username: this.pwdForm.username,
-                                        };
-                                        Cookies.remove("employee");
-                                        removeToken();
-                                        this.$router.push("/");
-                                    } else {
-                                        popup(res.msg, "error");
-                                    }
-                                }
-                            );
+        // 组件的方法部分
+        methods: {
+            // 初始化方法，用于设置表单中的账号信息
+            init() {
+                // 从 loginEmp 方法获取登录员工信息，并将账号赋值给 pwdForm.username
+                this.pwdForm.username = loginEmp().username;
+            },
+            // 重置表单方法，接收表单引用名作为参数
+            resetForm(formName) {
+                // 调用表单的 resetFields 方法重置表单字段
+                this.$refs[formName].resetFields();
+            },
+            // 提交表单方法，接收表单引用名作为参数
+            submitForm(formName) {
+                // 对表单进行验证
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 弹出确认框，确认是否修改密码
+                        this.$confirm("确定修改密码?", "警示", {
+                            confirmButtonText: "确定",
+                            cancelButtonText: "取消",
+                            type: "warning"
                         })
-                        .catch(() => {
-                            this.$message({
-                                type: "info",
-                                message: "已取消操作",
+                           .then(() => {
+                                // 发送 POST 请求到 /personal/edit_pwd 接口，传递表单数据
+                                ajaxPost("/personal/edit_pwd", this.pwdForm).then(
+                                    (res) => {
+                                        // 获取响应数据
+                                        res = res.data;
+                                        if (res.code == 200) {
+                                            // 显示密码修改成功提示，并提示重新登录
+                                            popup("密码修改成功,请重新登录...");
+                                            // 重置表单数据，保留账号信息
+                                            this.pwdForm = {
+                                                username: this.pwdForm.username
+                                            };
+                                            // 移除名为 employee 的 cookie
+                                            Cookies.remove("employee");
+                                            // 移除 token
+                                            removeToken();
+                                            // 跳转到首页
+                                            this.$router.push("/");
+                                        } else {
+                                            // 显示错误提示弹窗
+                                            popup(res.msg, "error");
+                                        }
+                                    }
+                                );
+                            })
+                           .catch(() => {
+                                // 显示取消操作的提示信息
+                                this.$message({
+                                    type: "info",
+                                    message: "已取消操作"
+                                });
                             });
-                        });
-                }
-            });
+                    }
+                });
+            }
         },
-    },
-    created() {
-        this.init();
-    },
-};
+        // 组件创建完成后的钩子函数
+        created() {
+            // 调用初始化方法
+            this.init();
+        }
+    };
 </script>
 <style>
-#edit_pwd {
-    width: 50%;
-    margin: 50px auto;
-    background-color: #ffffff;
-    padding: 20px;
-}
-</style>
+    /* 密码修改表单容器的样式，设置宽度为 50%，水平居中，背景颜色为白色，添加内边距 */
+    #edit_pwd {
+        width: 50%;
+        margin: 50px auto;
+        background-color: #ffffff;
+        padding: 20px;
+    }
+</style>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/personal/Information.vue b/superMarket-frontend/src/views/personal/Information.vue
index 0e7a289..51ff8ce 100644
--- a/superMarket-frontend/src/views/personal/Information.vue
+++ b/superMarket-frontend/src/views/personal/Information.vue
@@ -1,16 +1,28 @@
 <template>
+    <!-- 组件的根元素，设置了 id 为 information -->
     <div id="information">
+        <!-- 面包屑导航组件，用于显示页面层级，分隔符为 / -->
         <el-breadcrumb separator="/">
+            <!-- 面包屑导航的第一个项，显示“首页” -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 面包屑导航的第二个项，显示“个人中心” -->
             <el-breadcrumb-item>个人中心 </el-breadcrumb-item>
-            <el-breadcrumb-item>个人资料</el-breadcrumb-item> </el-breadcrumb
-        ><br />
+            <!-- 面包屑导航的第三个项，显示“个人资料” -->
+            <el-breadcrumb-item>个人资料</el-breadcrumb-item> 
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
 
+        <!-- 显示一个图标和标题“完善个人资料” -->
         <i class="iconfont icon-r-paper" style="font-size: 32px">
             <b style="font-size: 28px">完善个人资料</b></i
         >
+        <!-- 换行 -->
         <br />
+        <!-- 换行 -->
         <br />
+
+        <!-- Element UI 的表单组件，绑定表单数据到 informationForm，设置验证规则为 rules，引用为 informationForm，标签宽度为 100px，添加类名 demo-ruleForm -->
         <el-form
             :model="informationForm"
             :rules="rules"
@@ -18,9 +30,13 @@
             label-width="100px"
             class="demo-ruleForm"
         >
+            <!-- 栅格布局的一行 -->
             <el-row>
+                <!-- 这一行的第一列，占 12 份 -->
                 <el-col :span="12">
+                    <!-- 表单字段项，设置宽度为 40% -->
                     <el-form-item style="width: 40%">
+                        <!-- 上传组件，用于上传头像 -->
                         <el-upload
                             class="avatar-uploader"
                             action="http://localhost:9291/personnel_management/employee/uploadImg"
@@ -28,11 +44,13 @@
                             :on-success="handleAvatarSuccess"
                             :before-upload="beforeAvatarUpload"
                         >
+                            <!-- 如果 imageUrl 存在，显示上传的头像图片 -->
                             <img
                                 v-if="imageUrl"
                                 :src="BaseApi + imageUrl"
                                 class="avatar"
                             />
+                            <!-- 如果 imageUrl 不存在，显示一个添加图片的图标 -->
                             <i
                                 v-else
                                 class="el-icon-plus avatar-uploader-icon"
@@ -41,8 +59,11 @@
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 栅格布局的一行 -->
             <el-row>
+                <!-- 这一行的第一列，占 12 份 -->
                 <el-col :span="12">
+                    <!-- 表单字段项，标签为“电话号码：”，设置宽度为 40%，绑定数据到 informationForm.username -->
                     <el-form-item
                         style="width: 40%"
                         label="电话号码："
@@ -54,7 +75,9 @@
                         ></el-input>
                     </el-form-item>
                 </el-col>
+                <!-- 这一行的第二列，占 12 份 -->
                 <el-col :span="12">
+                    <!-- 表单字段项，标签为“姓名：”，设置宽度为 40%，绑定数据到 informationForm.nickName -->
                     <el-form-item
                         style="width: 40%"
                         label="姓名："
@@ -66,8 +89,11 @@
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 栅格布局的一行 -->
             <el-row>
+                <!-- 这一行的第一列，占 12 份 -->
                 <el-col :span="12">
+                    <!-- 表单字段项，标签为“身份证号：”，设置宽度为 40%，绑定数据到 informationForm.idCard -->
                     <el-form-item
                         style="width: 40%"
                         label="身份证号："
@@ -78,7 +104,9 @@
                         ></el-input>
                     </el-form-item>
                 </el-col>
+                <!-- 这一行的第二列，占 12 份 -->
                 <el-col :span="12">
+                    <!-- 表单字段项，标签为“年龄：”，设置宽度为 40%，绑定数据到 informationForm.age，限制输入为数字且在 18 到 70 之间 -->
                     <el-form-item style="width: 40%" label="年龄：">
                         <el-input
                             type="number"
@@ -89,8 +117,11 @@
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 栅格布局的一行 -->
             <el-row>
+                <!-- 这一行的第一列，占 12 份 -->
                 <el-col :span="12">
+                    <!-- 表单字段项，标签为“所属部门：”，设置宽度为 40%，绑定数据到 informationForm.deptId，设置为禁用状态 -->
                     <el-form-item
                         style="width: 40%"
                         label="所属部门："
@@ -104,6 +135,7 @@
                             @change="$forceUpdate()"
                             clearable
                         >
+                            <!-- 循环生成部门选项 -->
                             <el-option
                                 v-for="item in options"
                                 :key="item.id"
@@ -114,7 +146,9 @@
                         </el-select>
                     </el-form-item>
                 </el-col>
+                <!-- 这一行的第二列，占 12 份 -->
                 <el-col :span="12">
+                    <!-- 表单字段项，标签为“住址：”，设置宽度为 40%，绑定数据到 informationForm.address -->
                     <el-form-item style="width: 40%" label="住址：">
                         <el-input
                             type="text"
@@ -123,8 +157,11 @@
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 栅格布局的一行 -->
             <el-row>
+                <!-- 这一行的第一列，占 12 份 -->
                 <el-col :span="12">
+                    <!-- 表单字段项，标签为“备注：”，设置宽度为 40%，绑定数据到 informationForm.info，使用文本域输入 -->
                     <el-form-item style="width: 40%" label="备注：">
                         <el-input
                             type="textarea"
@@ -134,7 +171,9 @@
                         ></el-input>
                     </el-form-item>
                 </el-col>
+                <!-- 这一行的第二列，占 12 份 -->
                 <el-col :span="12">
+                    <!-- 表单字段项，标签为“性别：”，设置宽度为 40%，绑定数据到 informationForm.sex -->
                     <el-form-item style="width: 40%" label="性别：">
                         <el-select
                             style="width: 200px"
@@ -143,29 +182,37 @@
                             placeholder="请选择性别"
                             clearable
                         >
+                            <!-- 性别选项 -->
                             <el-option label="女" value="0"></el-option>
                             <el-option label="男" value="1"></el-option>
                         </el-select>
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 表单操作项 -->
             <el-form-item>
+                <!-- 提交按钮，类型为 primary，点击时调用 submitInformationForm 方法，设置字体大小 -->
                 <el-button
                     type="primary"
                     @click="submitInformationForm('informationForm')"
                     style="font-size: 18px"
                 >
+                    <!-- 提交按钮的图标 -->
                     <i class="iconfont icon-r-yes" style="font-size: 18px"></i>
+                    <!-- 提交按钮的文本 -->
                     提交</el-button
                 >
+                <!-- 重置按钮，点击时调用 resetForm 方法，设置字体大小 -->
                 <el-button
                     @click="resetForm('informationForm')"
                     style="font-size: 18px"
                 >
+                    <!-- 重置按钮的图标 -->
                     <i
                         class="iconfont icon-r-refresh"
                         style="font-size: 18px"
                     ></i>
+                    <!-- 重置按钮的文本 -->
                     重置</el-button
                 >
             </el-form-item>
@@ -173,108 +220,157 @@
     </div>
 </template>
 <script>
-import { listByQo } from "@/api/personnel_management/department/deptApi";
-import { popup } from "@/assets/js/common";
-import { queryInformation } from "@/api/personal/personApi";
-import { update } from "@/api/personnel_management/employee/empApi";
-import { loginEmp } from "@/assets/js/auth";
+    // 导入获取部门列表的 API 方法
+    import { listByQo } from "@/api/personnel_management/department/deptApi";
+    // 导入弹窗提示方法
+    import { popup } from "@/assets/js/common";
+    // 导入查询个人资料的 API 方法
+    import { queryInformation } from "@/api/personal/personApi";
+    // 导入更新个人资料的 API 方法
+    import { update } from "@/api/personnel_management/employee/empApi";
+    // 导入获取登录员工信息的方法
+    import { loginEmp } from "@/assets/js/auth";
 
-export default {
-    data() {
-        return {
-            BaseApi: this.$store.state.BaseApi,
-            loginEid: loginEmp().id,
-            informationForm: {},
-            imageUrl: "",
-            options: [],
-            rules: {
-                username: [
-                    {
-                        required: true,
-                        message: "手机号不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                nickName: [
-                    {
-                        required: true,
-                        message: "姓名不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                idCard: [
-                    {
-                        required: true,
-                        message: "身份证号不能为空",
-                        trigger: "blur",
-                    },
-                ],
-            },
-        };
-    },
-    methods: {
-        deptAll() {
-            listByQo({}).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.options = res.data;
-                } else {
-                    popup(res.msg, "error");
+    export default {
+        // 组件的数据定义
+        data() {
+            return {
+                // 从 Vuex 中获取基础 API 地址
+                BaseApi: this.$store.state.BaseApi,
+                // 获取登录员工的 ID
+                loginEid: loginEmp().id,
+                // 个人资料表单数据对象
+                informationForm: {},
+                // 头像图片的 URL
+                imageUrl: "",
+                // 部门选项列表
+                options: [],
+                // 表单验证规则
+                rules: {
+                    username: [
+                        {
+                            // 电话号码为必填项，失去焦点时触发验证
+                            required: true,
+                            message: "手机号不能为空",
+                            trigger: "blur"
+                        }
+                    ],
+                    nickName: [
+                        {
+                            // 姓名为必填项，失去焦点时触发验证
+                            required: true,
+                            message: "姓名不能为空",
+                            trigger: "blur"
+                        }
+                    ],
+                    idCard: [
+                        {
+                            // 身份证号为必填项，失去焦点时触发验证
+                            required: true,
+                            message: "身份证号不能为空",
+                            trigger: "blur"
+                        }
+                    ]
                 }
-            });
+            };
         },
-        init() {
-            queryInformation().then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.informationForm = { ...res.data };
-                    this.imageUrl = this.informationForm.headImg;
-                } else {
-                    popup(res.msg, "error");
+        // 组件的方法定义
+        methods: {
+            // 获取所有部门的方法
+            deptAll() {
+                // 调用获取部门列表的 API 方法，传递空参数对象
+                listByQo({}).then((res) => {
+                    // 获取响应数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新部门选项列表
+                        this.options = res.data;
+                    } else {
+                        // 显示错误提示弹窗
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 初始化个人资料的方法
+            init() {
+                // 调用查询个人资料的 API 方法
+                queryInformation().then((res) => {
+                    // 获取响应数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新个人资料表单数据
+                        this.informationForm = { ...res.data };
+                        // 更新头像图片 URL
+                        this.imageUrl = this.informationForm.headImg;
+                    } else {
+                        // 显示错误提示弹窗
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 提交个人资料表单的方法
+            submitInformationForm(formName) {
+                // 验证表单
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 调用更新个人资料的 API 方法，传递表单数据
+                        update(this.informationForm).then((res) => {
+                            // 获取响应数据
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 显示更新成功提示弹窗
+                                popup("更新成功");
+                            } else {
+                                // 显示错误提示弹窗
+                                popup(res.msg, "error");
+                            }
+                            // 重新初始化个人资料
+                            this.init();
+                        });
+                    }
+                });
+            },
+            // 重置表单的方法
+            resetForm(formName) {
+                // 重置表单字段
+                this.$refs[formName].resetFields();
+                // 重新初始化个人资料
+                this.init();
+            },
+            // 处理头像上传成功的方法
+            handleAvatarSuccess(res) {
+                // 更新表单中头像的 URL
+                this.informationForm.headImg = res.url;
+                // 更新显示的头像图片 URL
+                this.imageUrl = res.url;
+            },
+            // 上传头像前的校验方法
+            beforeAvatarUpload(file) {
+                // 判断文件类型是否为 JPEG 或 PNG
+                const isJPG =
+                    file.type === "image/jpeg" || file.type === "image/png";
+                // 判断文件大小是否小于 3MB
+                const isLt2M = file.size / 1024 / 1024 < 3;
+                if (!isJPG) {
+                    // 显示文件类型错误提示
+                    this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
                 }
-            });
-        },
-        submitInformationForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    update(this.informationForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("更新成功");
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                        this.init();
-                    });
+                if (!isLt2M) {
+                    // 显示文件大小错误提示
+                    this.$message.error("上传头像图片大小不能超过 3MB!");
                 }
-            });
-        },
-        resetForm(formName) {
-            this.$refs[formName].resetFields();
-            this.init();
-        },
-        /*上传头像*/
-        handleAvatarSuccess(res) {
-            this.informationForm.headImg = res.url;
-            this.imageUrl = res.url;
-        },
-        beforeAvatarUpload(file) {
-            const isJPG =
-                file.type === "image/jpeg" || file.type === "image/png";
-            const isLt2M = file.size / 1024 / 1024 < 3;
-            if (!isJPG) {
-                this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
+                // 返回校验结果，只有类型和大小都符合才允许上传
+                return isJPG && isLt2M;
             }
-            if (!isLt2M) {
-                this.$message.error("上传头像图片大小不能超过 3MB!");
-            }
-            return isJPG && isLt2M;
         },
-    },
-    mounted() {
-        this.imageUrl = "";
-        this.deptAll();
-        this.init();
-    },
-};
-</script>
+        // 组件挂载完成后的钩子函数
+        mounted() {
+            // 初始化头像图片 URL 为空
+            this.imageUrl = "";
+            // 获取所有部门信息
+            this.deptAll();
+            // 初始化个人资料
+            this.init();
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/personnel_management/dept/List.vue b/superMarket-frontend/src/views/personnel_management/dept/List.vue
index fdc56e2..d69a31c 100644
--- a/superMarket-frontend/src/views/personnel_management/dept/List.vue
+++ b/superMarket-frontend/src/views/personnel_management/dept/List.vue
@@ -1,134 +1,170 @@
 <template>
+    <!-- 组件的根元素，设置了 id 为 dept_list -->
     <div id="dept_list">
+        <!-- 面包屑导航组件，用于显示页面层级，分隔符为 / -->
         <el-breadcrumb separator="/">
-            <el-breadcrumb-item
-                >首页</el-breadcrumb-item
-            >
-            <el-breadcrumb-item
-                >人事管理
-            </el-breadcrumb-item>
-            <el-breadcrumb-item
-                >部门管理</el-breadcrumb-item
-            > </el-breadcrumb
-        ><br />
+            <!-- 面包屑导航的第一个项，显示“首页” -->
+            <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 面包屑导航的第二个项，显示“人事管理” -->
+            <el-breadcrumb-item>人事管理</el-breadcrumb-item>
+            <!-- 面包屑导航的第三个项，显示“部门管理” -->
+            <el-breadcrumb-item>部门管理</el-breadcrumb-item> 
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
 
+        <!-- 栅格布局的一行 -->
         <el-row>
+            <!-- 这一行的第一列，占 7 份，包含部门名称输入框 -->
             <el-col :span="7">
                 <el-input placeholder="部门名称" v-model="searchForm.name"/>
             </el-col>
+            <!-- 这一行的第二列，占 7 份，包含部门状态选择框 -->
             <el-col :span="7">
                 <el-select v-model="searchForm.state" placeholder="请选择状态" clearable>
+                    <!-- 状态选择框的选项，标签为“正常”，值为 0 -->
                     <el-option label="正常" value="0"></el-option>
+                    <!-- 状态选择框的选项，标签为“停用”，值为 -1 -->
                     <el-option label="停用" value="-1"></el-option>
                 </el-select>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+
+        <!-- 栅格布局的一行 -->
         <el-row>
+            <!-- 这一行的列，占 24 份，设置文本左对齐，包含搜索和创建部门按钮 -->
             <el-col :span="24" style="text-align: left">
+                <!-- 搜索按钮，类型为 primary，点击触发 subSearchForm 方法，设置字体大小 -->
                 <el-button
                     type="primary"
                     @click="subSearchForm"
                     style="font-size: 18px"
                 >
-                    <i class="iconfont icon-r-find" style="font-size: 18px">
-                    </i>
-                    搜索</el-button
-                >
-                <el-button type="success" @click="newVisable=true"
-                    style="font-size: 18px"
-                >
-                    <i class="iconfont icon-r-add" style="font-size: 18px">
-                    </i> 创建部门
+                    <!-- 搜索按钮的图标 -->
+                    <i class="iconfont icon-r-find" style="font-size: 18px"></i>
+                    <!-- 搜索按钮的文本 -->
+                    搜索</el-button>
+                <!-- 创建部门按钮，类型为 success，点击将 newVisable 设置为 true，设置字体大小 -->
+                <el-button type="success" @click="newVisable=true" style="font-size: 18px">
+                    <!-- 创建部门按钮的图标 -->
+                    <i class="iconfont icon-r-add" style="font-size: 18px"></i>
+                    <!-- 创建部门按钮的文本 -->
+                    创建部门
                 </el-button>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
-        
+
+        <!-- 表格组件，数据绑定到 tableData，设置宽度为 100% -->
         <el-table
-                :data="tableData"
-                style="width: 100%">
+            :data="tableData"
+            style="width: 100%">
+            <!-- 表格列，显示序号，类型为 index，设置宽度 -->
             <el-table-column
-                    type="index"
-                    label="序号"
-                    width="180">
+                type="index"
+                label="序号"
+                width="180">
             </el-table-column>
+            <!-- 表格列，显示部门名称，prop 绑定到数据中的 name 字段，设置宽度 -->
             <el-table-column
-                    prop="name"
-                    label="名称"
-                    width="180">
+                prop="name"
+                label="名称"
+                width="180">
             </el-table-column>
+            <!-- 表格列，显示部门描述，prop 绑定到数据中的 info 字段 -->
             <el-table-column
-                    prop="info"
-                    label="描述">
+                prop="info"
+                label="描述">
             </el-table-column>
+            <!-- 表格列，显示部门状态，根据状态值显示不同的标签 -->
             <el-table-column
-                    prop="state"
-                    label="状态">
+                prop="state"
+                label="状态">
                 <template v-slot="scope">
+                    <!-- 如果状态为 0，显示绿色的“正常”标签 -->
                     <el-tag v-if="scope.row.state=='0'" type="success" style="font-size: 14px;">
-                        <i class="iconfont icon-r-yes" style="font-size: 14px;"> </i> 正常</el-tag>
+                        <i class="iconfont icon-r-yes" style="font-size: 14px;"></i> 正常</el-tag>
+                    <!-- 否则，显示红色的“停用”标签 -->
                     <el-tag v-else type="danger" style="font-size: 14px;">
-                        <i class="iconfont icon-r-no" style="font-size: 14px;"> </i> 停用</el-tag>
+                        <i class="iconfont icon-r-no" style="font-size: 14px;"></i> 停用</el-tag>
                 </template>
             </el-table-column>
+            <!-- 表格列，显示操作，固定在右侧，设置宽度 -->
             <el-table-column
-                    label="操作" width="240" fixed="right">
+                label="操作" width="240" fixed="right">
                 <template v-slot="scope">
+                    <!-- 修改按钮，类型为 success，点击触发 edit 方法，设置字体大小 -->
                     <el-button type="success" @click="edit(scope.row)" style="font-size: 18px;">
-                        <i class="iconfont icon-r-edit" style="font-size: 18px;"> </i> 修改</el-button>
+                        <i class="iconfont icon-r-edit" style="font-size: 18px;"></i> 修改</el-button>
+                    <!-- 停用按钮，类型为 danger，点击触发 forbidden 方法，设置字体大小 -->
                     <el-button type="danger" @click="forbidden(scope.row.id)" style="font-size: 18px;">
-                        <i class="iconfont icon-r-no" style="font-size: 18px;"> </i> 停用</el-button>
+                        <i class="iconfont icon-r-no" style="font-size: 18px;"></i> 停用</el-button>
                 </template>
             </el-table-column>
         </el-table>
-        <!--修改描述/状态弹出框-->
+
+        <!-- 修改描述/状态的对话框，title 为“部门修改”，根据 dialogVisible 的值显示或隐藏，设置宽度 -->
         <el-dialog
-                title="部门修改"
-                :visible.sync="dialogVisible"
-                width="50%">
-            <el-form v-model="editForm"  label-width="100px" class="demo-ruleForm">
+            title="部门修改"
+            :visible.sync="dialogVisible"
+            width="50%">
+            <!-- 表单组件，绑定到 editForm，设置标签宽度和类名 -->
+            <el-form v-model="editForm" label-width="100px" class="demo-ruleForm">
+                <!-- 表单字段项，标签为“名称：”，输入框设置为禁用，绑定数据到 editForm.name -->
                 <el-form-item label="名称：">
                     <el-input disabled v-model="editForm.name"></el-input>
                 </el-form-item>
+                <!-- 表单字段项，标签为“描述：”，绑定数据到 editForm.info -->
                 <el-form-item label="描述：">
                     <el-input type="text" v-model="editForm.info"></el-input>
                 </el-form-item>
+                <!-- 表单字段项，标签为“状态：”，绑定数据到 editForm.state，包含状态选择框 -->
                 <el-form-item label="状态：">
-                    <el-select v-model="editForm.state"
-                               clearable
-                               @change="$forceUpdate()"
-                               placeholder="请选择状态">
+                    <el-select v-model="editForm.state" clearable @change="$forceUpdate()" placeholder="请选择状态">
+                        <!-- 循环生成状态选项 -->
                         <el-option
-                                v-for="item in options"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单操作项，包含提交和关闭按钮 -->
                 <el-form-item>
+                    <!-- 提交按钮，类型为 primary，点击触发 submitEditForm 方法，设置字体大小 -->
                     <el-button type="primary" @click="submitEditForm" style="font-size: 18px;">
-                        <i class="iconfont icon-r-yes" style="font-size: 18px;"> </i> 提交</el-button>
+                        <i class="iconfont icon-r-yes" style="font-size: 18px;"></i> 提交</el-button>
+                    <!-- 关闭按钮，点击触发 canCelEdit 方法，设置字体大小 -->
                     <el-button @click="canCelEdit" style="font-size: 18px;">
                         关闭</el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
-        <!--创建弹出框-->
+
+        <!-- 创建部门的对话框，title 为“创建部门”，根据 newVisable 的值显示或隐藏，设置宽度 -->
         <el-dialog
-                title="创建部门"
-                :visible.sync="newVisable"
-                width="50%">
-            <el-form :model="newForm" :rules="rules" ref="newForm"  label-width="100px" class="demo-ruleForm">
+            title="创建部门"
+            :visible.sync="newVisable"
+            width="50%">
+            <!-- 表单组件，绑定到 newForm，设置验证规则、引用、标签宽度和类名 -->
+            <el-form :model="newForm" :rules="rules" ref="newForm" label-width="100px" class="demo-ruleForm">
+                <!-- 表单字段项，标签为“名称：”，绑定数据到 newForm.name，设置验证规则 -->
                 <el-form-item label="名称：" prop="name">
                     <el-input v-model="newForm.name"></el-input>
                 </el-form-item>
+                <!-- 表单字段项，标签为“描述：”，绑定数据到 newForm.info -->
                 <el-form-item label="描述：">
                     <el-input type="text" v-model="newForm.info"></el-input>
                 </el-form-item>
+                <!-- 表单操作项，包含提交和重置按钮 -->
                 <el-form-item>
+                    <!-- 提交按钮，点击触发 submitNewForm 方法 -->
                     <el-button type="primary" @click="submitNewForm('newForm')">提交</el-button>
+                    <!-- 重置按钮，点击触发 resetNewForm 方法 -->
                     <el-button @click="resetNewForm('newForm')">重置</el-button>
                 </el-form-item>
             </el-form>
@@ -136,23 +172,35 @@
     </div>
 </template>
 <script>
+    // 导入弹窗提示方法
     import { popup} from "@/assets/js/common";
+    // 导入部门管理相关的 API 方法
     import {deactivate, listByQo, save, update} from "@/api/personnel_management/department/deptApi";
 
     export default {
+        // 组件的数据定义
         data() {
             return {
+                // 表格展示的部门数据
                 tableData: [],
+                // 用于修改部门的表单数据
                 editForm: {},
+                // 暂未明确用途的 editRow（可能是保留原始行数据等）
                 editRow:{},
+                // 修改部门对话框的显示状态
                 dialogVisible: false,
+                // 创建部门对话框的显示状态
                 newVisable:false,
+                // 创建部门表单的数据
                 newForm:{},
+                // 搜索表单的数据
                 searchForm: {},
+                // 状态选项列表
                 options: [
                     {label: '正常', value: '0'},
                     {label: '停用', value: '-1'}
                 ],
+                // 创建部门表单的验证规则，名称为必填项
                 rules: {
                     name:[
                         {required: true, message: '名称不能为空', trigger: 'blur'},
@@ -160,94 +208,118 @@
                 }
             }
         },
+        // 组件的方法定义
         methods: {
+            // 初始化数据的方法，获取部门列表数据
             init() {
                 listByQo(this.searchForm).then(res => {
                     if (res.data.code == 200) {
+                        // 更新表格数据
                         this.tableData = res.data.data
                     }else {
+                        // 显示错误提示弹窗
                         popup(res.data.msg,"error")
                     }
-
                 })
             },
+            // 停用部门的方法，接收部门 ID 作为参数
             forbidden(id) {
                 deactivate(id).then(res => {
                     res = res.data
                     if (res.code == 200) {
+                        // 显示操作成功提示弹窗
                         popup("操作成功")
                     } else {
+                        // 显示错误提示弹窗
                         popup(res.msg, "error")
                     }
+                    // 重新初始化数据
                     this.init()
                 })
             },
-
-            /*弹出修改表单*/
+            // 弹出修改表单的方法，接收要修改的部门行数据作为参数
             edit(row) {
+                // 将选中行的数据赋值给 editForm
                 this.editForm= {...row}
+                // 显示修改部门对话框
                 this.dialogVisible = true
             },
-            /*条件搜索*/
+            // 条件搜索的方法，重新初始化数据
             subSearchForm() {
-               this.init()
+                this.init()
             },
-            /*对接后端修改接口*/
+            // 提交修改部门表单的方法，对接后端修改接口
             submitEditForm() {
                 update(this.editForm).then(res=>{
                     res=res.data
                     if (res.code==200){
+                        // 显示操作成功提示弹窗
                         popup("操作成功")
+                        // 隐藏修改部门对话框
                         this.dialogVisible=false
+                        // 重新初始化数据
                         this.init()
                     }else {
+                        // 显示错误提示弹窗
                         popup(res.msg, "error")
                     }
                 })
             },
-            /*修改重置按钮*/
+            // 关闭修改表单并重置数据的方法
             canCelEdit(){
-              this.dialogVisible=false
+                // 隐藏修改部门对话框
+                this.dialogVisible=false
+                // 清空 editForm
                 this.editForm={}
             },
-            /*创建新角色*/
+            // 创建新部门的方法，接收表单引用名作为参数
             submitNewForm(formName){
+                // 验证表单
                 this.$refs[formName].validate((valid) => {
                     if (valid) {
                         console.log(this.newForm)
+                        // 调用保存部门的 API 方法
                         save(this.newForm).then(res=>{
                             res=res.data
                             if (res.code==200){
+                                // 显示操作成功提示弹窗
                                 popup("操作成功")
+                                // 隐藏创建部门对话框
                                 this.newVisable=false
+                                // 清空 newForm
                                 this.newForm={}
+                                // 重新初始化数据
                                 this.init()
                             }else {
+                                // 显示错误提示弹窗
                                 popup(res.msg, "error")
                             }
                         })
                     }
                 });
             },
+            // 重置创建部门表单的方法，接收表单引用名作为参数
             resetNewForm(formname){
+                // 重置表单字段
                 this.$refs[formname].resetFields()
             },
         },
+        // 组件创建完成后的钩子函数，初始化数据
         created() {
             this.init()
         }
-
     }
 </script>
 <style>
-    .search {
+    /* 搜索相关的样式类，设置布局和高度等 */
+   .search {
         display: inline-block;
         margin: 0 auto;
         height: 51px;
         line-height: 51px;
     }
 
-    .search .column {
+   .search .column {
         display: inline-block;
         margin: 0 auto;
         margin-right: 2px;
diff --git a/superMarket-frontend/src/views/personnel_management/employee/List.vue b/superMarket-frontend/src/views/personnel_management/employee/List.vue
index 7d4505c..98fb27d 100644
--- a/superMarket-frontend/src/views/personnel_management/employee/List.vue
+++ b/superMarket-frontend/src/views/personnel_management/employee/List.vue
@@ -1,27 +1,41 @@
 <template>
+    <!-- 定义一个 id 为 employee_index 的 div 容器，作为整个页面的根容器 -->
     <div id="employee_index">
+        <!-- 面包屑导航组件，用于显示当前页面在整个网站结构中的位置，分隔符为 / -->
         <el-breadcrumb separator="/">
+            <!-- 面包屑导航的第一个项目，显示“首页” -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 面包屑导航的第二个项目，显示“人事管理” -->
             <el-breadcrumb-item>人事管理 </el-breadcrumb-item>
-            <el-breadcrumb-item>员工管理</el-breadcrumb-item> </el-breadcrumb
-        ><br />
+            <!-- 面包屑导航的第三个项目，显示“员工管理” -->
+            <el-breadcrumb-item>员工管理</el-breadcrumb-item> 
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
 
+        <!-- 行布局组件，用于将其子元素按行排列 -->
         <el-row>
+            <!-- 列布局组件，占 8 列宽度 -->
             <el-col :span="8">
+                <!-- 输入框组件，宽度为父元素的 95%，占位符为“用户名”，绑定到 searchForm 对象的 username 属性 -->
                 <el-input
                     style="width: 95%"
                     placeholder="用户名"
                     v-model="searchForm.username"
                 />
             </el-col>
+            <!-- 列布局组件，占 8 列宽度 -->
             <el-col :span="8">
+                <!-- 输入框组件，宽度为父元素的 95%，占位符为“姓名”，绑定到 searchForm 对象的 nickName 属性 -->
                 <el-input
                     style="width: 95%"
                     placeholder="姓名"
                     v-model="searchForm.nickName"
                 />
             </el-col>
+            <!-- 列布局组件，占 8 列宽度 -->
             <el-col :span="8">
+                <!-- 输入框组件，类型为数字，最小值为 0，最大值为 100，宽度为父元素的 95%，占位符为“年龄”，绑定到 searchForm 对象的 age 属性 -->
                 <el-input
                     style="width: 95%"
                     type="number"
@@ -32,27 +46,37 @@
                 />
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 行布局组件，用于将其子元素按行排列 -->
         <el-row>
+            <!-- 列布局组件，占 12 列宽度 -->
             <el-col :span="12">
+                <!-- 输入框组件，宽度为父元素的 97%，占位符为“住址”，绑定到 searchForm 对象的 address 属性 -->
                 <el-input
                     style="width: 97%"
                     placeholder="住址"
                     v-model="searchForm.address"
                 />
             </el-col>
+            <!-- 列布局组件，占 6 列宽度 -->
             <el-col :span="6">
+                <!-- 下拉选择框组件，绑定到 searchForm 对象的 sex 属性，选择项改变时强制更新组件，占位符为“性别”，可清除选择 -->
                 <el-select
                     v-model="searchForm.sex"
                     @change="$forceUpdate()"
                     placeholder="性别"
                     clearable
                 >
+                    <!-- 下拉选择框的选项，标签为“女”，值为 0 -->
                     <el-option label="女" value="0"></el-option>
+                    <!-- 下拉选择框的选项，标签为“男”，值为 1 -->
                     <el-option label="男" value="1"></el-option>
                 </el-select>
             </el-col>
+            <!-- 列布局组件，占 6 列宽度 -->
             <el-col :span="6">
+                <!-- 下拉选择框组件，绑定到 searchForm 对象的 deptId 属性，可过滤选项，选择项改变时强制更新组件，占位符为“部门”，可清除选择 -->
                 <el-select
                     v-model="searchForm.deptId"
                     placeholder="部门"
@@ -60,6 +84,7 @@
                     @change="$forceUpdate()"
                     clearable
                 >
+                    <!-- 循环渲染下拉选择框的选项，从 options 数组中获取数据 -->
                     <el-option
                         v-for="item in options"
                         :key="item.id"
@@ -70,43 +95,60 @@
                 </el-select>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 行布局组件，用于将其子元素按行排列 -->
         <el-row>
+            <!-- 列布局组件，占 24 列宽度，文本左对齐 -->
             <el-col :span="24" style="text-align: left">
+                <!-- 按钮组件，类型为主要按钮，点击时调用 submitSearchForm 方法，字体大小为 18px -->
                 <el-button
                     type="primary"
                     @click="submitSearchForm"
                     style="font-size: 18px"
                 >
+                    <!-- 图标 -->
                     <i class="iconfont icon-r-find" style="font-size: 18px">
                     </i>
-                    搜索</el-button
-                >
+                    <!-- 按钮文本 -->
+                    搜索
+                </el-button>
+                <!-- 按钮组件，类型为成功按钮，点击时将 newVisable 变量设为 true，字体大小为 18px -->
                 <el-button
                     type="success"
                     @click="newVisable = true"
                     style="font-size: 18px"
                 >
+                    <!-- 图标 -->
                     <i class="iconfont icon-r-add" style="font-size: 18px"> </i>
+                    <!-- 按钮文本 -->
                     新建员工
                 </el-button>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
-        <!--表格数据-->
+        <!-- 表格数据容器 -->
         <div class="table">
+            <!-- 表格组件，数据绑定到 tableData 数组，宽度为 100%，表格大小为中等 -->
             <el-table :data="tableData" style="width: 100%" size="medium">
+                <!-- 表格列组件，显示“用户名”，宽度为 130px，绑定到数据的 username 属性 -->
                 <el-table-column prop="username" width="130" label="用户名">
                 </el-table-column>
+                <!-- 表格列组件，显示“姓名”，宽度为 100px，绑定到数据的 nickName 属性 -->
                 <el-table-column width="100" prop="nickName" label="姓名">
                 </el-table-column>
+                <!-- 表格列组件，显示“性别”，宽度为 50px，绑定到数据的 sex 属性 -->
                 <el-table-column width="50" prop="sex" label="性别">
+                    <!-- 自定义表格列内容，根据 sex 值显示“男”或“女” -->
                     <template v-slot="scope">
                         {{ scope.row.sex == "1" ? "男" : "女" }}
                     </template>
                 </el-table-column>
+                <!-- 表格列组件，显示“年龄”，宽度为 50px，绑定到数据的 age 属性 -->
                 <el-table-column width="50" prop="age" label="年龄">
                 </el-table-column>
+                <!-- 表格列组件，显示“住址”，宽度为 130px，超出部分显示 tooltip，绑定到数据的 address 属性 -->
                 <el-table-column
                     width="130"
                     :show-overflow-tooltip="true"
@@ -114,6 +156,7 @@
                     label="住址"
                 >
                 </el-table-column>
+                <!-- 表格列组件，显示“所属部门”，宽度为 130px，超出部分显示 tooltip，绑定到数据的 deptName 属性 -->
                 <el-table-column
                     width="130"
                     :show-overflow-tooltip="true"
@@ -121,6 +164,7 @@
                     label="所属部门"
                 >
                 </el-table-column>
+                <!-- 表格列组件，显示“入职时间”，宽度为 120px，超出部分显示 tooltip，绑定到数据的 createTime 属性 -->
                 <el-table-column
                     width="120"
                     :show-overflow-tooltip="true"
@@ -128,6 +172,7 @@
                     label="入职时间"
                 >
                 </el-table-column>
+                <!-- 表格列组件，显示“离职时间”，宽度为 120px，超出部分显示 tooltip，绑定到数据的 leaveTime 属性 -->
                 <el-table-column
                     width="120"
                     :show-overflow-tooltip="true"
@@ -135,7 +180,9 @@
                     label="离职时间"
                 >
                 </el-table-column>
+                <!-- 表格列组件，显示“状态”，宽度为 120px，绑定到数据的 state 属性 -->
                 <el-table-column width="120" prop="state" label="状态">
+                    <!-- 自定义表格列内容，根据 state 值显示“在职”或“离职”标签 -->
                     <template v-slot="scope">
                         <el-tag v-if="scope.row.state == '0'" type="success"
                             >在职</el-tag
@@ -143,73 +190,92 @@
                         <el-tag v-else type="danger">离职</el-tag>
                     </template>
                 </el-table-column>
+                <!-- 表格列组件，显示“操作”，宽度为 570px，固定在表格右侧 -->
                 <el-table-column label="操作" width="570" fixed="right">
+                    <!-- 自定义表格列内容，包含多个操作按钮 -->
                     <template v-slot="scope">
+                        <!-- 按钮组件，类型为主要按钮，点击时调用 detailBtn 方法，字体大小为 16px -->
                         <el-button
                             style="font-size: 16px"
                             type="primary"
                             @click="detailBtn(scope.row)"
                         >
+                            <!-- 图标 -->
                             <i
                                 style="font-size: 16px"
                                 class="iconfont icon-r-find"
                             >
                             </i>
+                            <!-- 按钮文本 -->
                             详情
                         </el-button>
+                        <!-- 按钮组件，类型为成功按钮，点击时调用 editBtn 方法，传入当前行的 id，字体大小为 16px -->
                         <el-button
                             style="font-size: 16px"
                             type="success"
                             @click="editBtn(scope.row.id)"
                         >
+                            <!-- 图标 -->
                             <i
                                 style="font-size: 16px"
                                 class="iconfont icon-r-edit"
                             >
                             </i>
-                            修改</el-button
-                        >
+                            <!-- 按钮文本 -->
+                            修改
+                        </el-button>
+                        <!-- 按钮组件，类型为危险按钮，点击时调用 delBtn 方法，传入当前行数据，字体大小为 16px -->
                         <el-button
                             style="font-size: 16px"
                             type="danger"
                             @click="delBtn(scope.row)"
                         >
+                            <!-- 图标 -->
                             <i
                                 style="font-size: 16px"
                                 class="iconfont icon-r-delete"
                             >
                             </i>
-                            删除</el-button
-                        >
+                            <!-- 按钮文本 -->
+                            删除
+                        </el-button>
+                        <!-- 按钮组件，类型为警告按钮，点击时调用 empRoleBtn 方法，传入当前行的 id，字体大小为 16px -->
                         <el-button
                             style="font-size: 16px"
                             type="warning"
                             @click="empRoleBtn(scope.row.id)"
                         >
+                            <!-- 图标 -->
                             <i
                                 style="font-size: 16px"
                                 class="iconfont icon-r-user1"
                             >
                             </i>
-                            职务</el-button
-                        >
+                            <!-- 按钮文本 -->
+                            职务
+                        </el-button>
 
+                        <!-- 按钮组件，类型为警告按钮，点击时调用 resetPwd 方法，传入当前行数据，字体大小为 16px -->
                         <el-button
                             style="font-size: 16px"
                             type="warning"
                             @click="resetPwd(scope.row)"
                         >
+                            <!-- 图标 -->
                             <i
                                 style="font-size: 16px"
                                 class="iconfont icon-r-lock"
                             >
                             </i>
-                            重置密码</el-button
-                        >
+                            <!-- 按钮文本 -->
+                            重置密码
+                        </el-button>
                     </template>
                 </el-table-column>
             </el-table>
+            <!-- 分页组件容器 -->
             <div style="margin: 10px 0 15px 0">
+                <!-- 分页组件，页码大小改变时调用 handleSizeChange 方法，当前页码改变时调用 handleCurrentChange 方法，当前页码绑定到 searchForm 的 currentPage 属性，可选择的每页记录数为 [5, 10, 20, 50]，每页记录数绑定到 searchForm 的 pageSize 属性，布局包含总数、页码大小选择、上一页、页码、下一页、跳转输入框，总记录数绑定到 searchForm 的 total 属性 -->
                 <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
@@ -222,75 +288,91 @@
                 </el-pagination>
             </div>
         </div>
-        <!--用户详情-->
+        <!-- 用户详情对话框，显示状态绑定到 detailVisable 变量，宽度为 50% -->
         <el-dialog :visible.sync="detailVisable" width="50%">
+            <!-- 描述列表组件，数据绑定到 detailForm 对象，列数为 2，标题为“员工信息” -->
             <el-descriptions :model="detailForm" column="2" title="员工信息">
+                <!-- 描述列表项，显示“用户名” -->
                 <el-descriptions-item label="用户名">{{
                     detailForm.username
                 }}</el-descriptions-item>
+                <!-- 描述列表项，显示“性别”，根据 sex 值显示“男”或“女” -->
                 <el-descriptions-item label="性别">{{
                     detailForm.sex == "1" ? "男" : "女"
                 }}</el-descriptions-item>
+                <!-- 描述列表项，显示“年龄” -->
                 <el-descriptions-item label="年龄">{{
                     detailForm.age
                 }}</el-descriptions-item>
+                <!-- 描述列表项，显示“住址” -->
                 <el-descriptions-item label="住址">{{
                     detailForm.address
                 }}</el-descriptions-item>
+                <!-- 描述列表项，显示“昵称” -->
                 <el-descriptions-item label="昵称">{{
                     detailForm.nickName
                 }}</el-descriptions-item>
+                <!-- 描述列表项，显示“头像”，图片地址为 BaseApi 加上 detailForm 的 headImg 属性 -->
                 <el-descriptions-item label="头像"
                     ><img :src="BaseApi + detailForm.headImg" width="30px"
                 /></el-descriptions-item>
+                <!-- 描述列表项，显示“状态”，根据 state 值显示“在职”或“离职”标签 -->
                 <el-descriptions-item label="状态">
                     <el-tag v-if="detailForm.state == '0'" type="success"
                         >在职</el-tag
                     >
                     <el-tag v-else type="danger">离职</el-tag>
                 </el-descriptions-item>
+                <!-- 描述列表项，显示“系统管理员”，根据 isAdmin 值显示“是”或“否”标签 -->
                 <el-descriptions-item label="系统管理员">
                     <el-tag v-if="detailForm.isAdmin == true" type="success"
                         >是</el-tag
                     >
                     <el-tag v-else type="danger">否</el-tag>
                 </el-descriptions-item>
+                <!-- 描述列表项，显示“描述” -->
                 <el-descriptions-item label="描述"> </el-descriptions-item>
+                <!-- 描述列表项，显示“录入者” -->
                 <el-descriptions-item label="录入者">{{
                     detailForm.createby
                 }}</el-descriptions-item>
+                <!-- 描述列表项，显示“所属部门”，如果有值则显示为警告标签 -->
                 <el-descriptions-item label="所属部门">
                     <el-tag v-if="detailForm.deptName" type="warning">{{
                         detailForm.deptName
                     }}</el-tag>
                 </el-descriptions-item>
+                <!-- 描述列表项，显示“身份证号” -->
                 <el-descriptions-item label="身份证号">{{
                     detailForm.idCard
                 }}</el-descriptions-item>
+                <!-- 描述列表项，显示“入职时间” -->
                 <el-descriptions-item label="入职时间">{{
                     detailForm.createTime
                 }}</el-descriptions-item>
+                <!-- 描述列表项，显示“离职时间”，仅当 state 不为 0 时显示 -->
                 <el-descriptions-item
                     v-if="detailForm.state != '0'"
                     label="离职时间"
                     >{{ detailForm.leaveTime }}
                 </el-descriptions-item>
+                <!-- 描述列表项，显示“角色”，将角色名称以标签形式显示 -->
                 <el-descriptions-item label="角色">
                     <div style="flex-wrap: wrap;display: flex;">
-
-                    <el-tag
-                        size="mini"
-                        type="success"
-                        :key="item.id"
-                        v-for="item in detailForm.roleNames"
-                        >{{ item }}</el-tag
-                    >
+                        <el-tag
+                            size="mini"
+                            type="success"
+                            :key="item.id"
+                            v-for="item in detailForm.roleNames"
+                            >{{ item }}</el-tag
+                        >
                     </div>
                 </el-descriptions-item>
             </el-descriptions>
+            <!-- 按钮组件，类型为信息按钮，点击时调用 detail_down 方法 -->
             <el-button type="info" @click="detail_down">关闭</el-button>
         </el-dialog>
-        <!--录入-->
+        <!-- 录入用户对话框，标题为“录入用户”，显示状态绑定到 newVisable 变量，大小为迷你，关闭时调用 dialog_imgClose 方法，标签宽度为 200px，宽度为 50% -->
         <el-dialog
             title="录入用户"
             :visible.sync="newVisable"
@@ -299,6 +381,7 @@
             label-width="200"
             width="50%"
         >
+            <!-- 表单组件，数据绑定到 newForm 对象，验证规则绑定到 rules 对象，引用名为 newForm，标签宽度为 100px -->
             <el-form
                 :model="newForm"
                 :rules="rules"
@@ -306,9 +389,13 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 行布局组件，用于将其子元素按行排列 -->
                 <el-row>
+                    <!-- 列布局组件，占 24 列宽度 -->
                     <el-col :span="24">
+                        <!-- 表单项组件，标签为“头像” -->
                         <el-form-item label="头像：">
+                            <!-- 文件上传组件，上传地址为 BaseApi 加上指定路径，不显示文件列表，上传成功时调用 handleAvatarSuccess 方法，上传前调用 beforeAvatarUpload 方法 -->
                             <el-upload
                                 class="avatar-uploader"
                                 :action="
@@ -319,6 +406,7 @@
                                 :on-success="handleAvatarSuccess"
                                 :before-upload="beforeAvatarUpload"
                             >
+                                <!-- 如果有图片地址，则显示图片，否则显示加号图标 -->
                                 <img
                                     v-if="imageUrl"
                                     :src="BaseApi + imageUrl"
@@ -332,29 +420,43 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 行布局组件，用于将其子元素按行排列 -->
                 <el-row>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“电话号码”，验证规则绑定到 username 字段 -->
                         <el-form-item label="电话号码：" prop="username">
+                            <!-- 输入框组件，最大长度为 11，绑定到 newForm 对象的 username 属性 -->
                             <el-input
                                 max="11"
                                 v-model="newForm.username"
                             ></el-input>
                         </el-form-item>
                     </el-col>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“姓名”，验证规则绑定到 nickName 字段 -->
                         <el-form-item label="姓名：" prop="nickName">
+                            <!-- 输入框组件，绑定到 newForm 对象的 nickName 属性 -->
                             <el-input v-model="newForm.nickName"></el-input>
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 行布局组件，用于将其子元素按行排列 -->
                 <el-row>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“身份证号”，验证规则绑定到 idCard 字段 -->
                         <el-form-item label="身份证号：" prop="idCard">
+                            <!-- 输入框组件，绑定到 newForm 对象的 idCard 属性 -->
                             <el-input v-model="newForm.idCard"></el-input>
                         </el-form-item>
                     </el-col>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“年龄” -->
                         <el-form-item label="年龄：">
+                            <!-- 输入框组件，类型为数字，最小值为 18，最大值为 70，绑定到 newForm 对象的 age 属性 -->
                             <el-input
                                 type="number"
                                 min="18"
@@ -364,9 +466,13 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 行布局组件，用于将其子元素按行排列 -->
                 <el-row>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“所属部门” -->
                         <el-form-item label="所属部门：">
+                            <!-- 下拉选择框组件，宽度为 200px，绑定到 newForm 对象的 deptId 属性，可过滤选项，选择项改变时强制更新组件，占位符为“请选择部门”，可清除选择 -->
                             <el-select
                                 style="width: 200px"
                                 v-model="newForm.deptId"
@@ -375,6 +481,7 @@
                                 @change="$forceUpdate()"
                                 clearable
                             >
+                                <!-- 循环渲染下拉选择框的选项，从 options 数组中获取数据 -->
                                 <el-option
                                     v-for="item in options"
                                     :key="item.id"
@@ -385,8 +492,11 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“住址” -->
                         <el-form-item label="住址：">
+                            <!-- 输入框组件，类型为文本，绑定到 newForm 对象的 address 属性 -->
                             <el-input
                                 type="text"
                                 v-model="newForm.address"
@@ -394,9 +504,13 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 行布局组件，用于将其子元素按行排列 -->
                 <el-row>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“员工备注” -->
                         <el-form-item label="员工备注：">
+                            <!-- 文本域组件，绑定到 newForm 对象的 info 属性 -->
                             <textarea
                                 cols="20"
                                 rows="3"
@@ -404,8 +518,11 @@
                             ></textarea>
                         </el-form-item>
                     </el-col>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“性别” -->
                         <el-form-item label="性别：">
+                            <!-- 下拉选择框组件，宽度为 200px，绑定到 newForm 对象的 sex 属性，选择项改变时强制更新组件，占位符为“请选择性别”，可清除选择 -->
                             <el-select
                                 style="width: 200px"
                                 v-model="newForm.sex"
@@ -413,21 +530,26 @@
                                 placeholder="请选择性别"
                                 clearable
                             >
+                                <!-- 下拉选择框的选项，标签为“女”，值为 0 -->
                                 <el-option label="女" value="0"></el-option>
+                                <!-- 下拉选择框的选项，标签为“男”，值为 1 -->
                                 <el-option label="男" value="1"></el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 表单项组件 -->
                 <el-form-item>
+                    <!-- 按钮组件，类型为主要按钮，点击时调用 submitNewForm 方法，传入表单引用名 -->
                     <el-button type="primary" @click="submitNewForm('newForm')"
                         >提交</el-button
                     >
+                    <!-- 按钮组件，点击时调用 saveCancel 方法 -->
                     <el-button @click="saveCancel">取消</el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
-        <!--修改-->
+        <!-- 修改员工对话框，标题为“修改员工”，显示状态绑定到 editVisable 变量，关闭时调用 dialog_imgClose 方法，标签宽度为 200px，宽度为 50% -->
         <el-dialog
             title="修改员工"
             @close="dialog_imgClose"
@@ -436,6 +558,7 @@
             label-width="200"
             width="50%"
         >
+            <!-- 表单组件，数据绑定到 editForm 对象，验证规则绑定到 rules 对象，引用名为 editForm，标签宽度为 100px -->
             <el-form
                 :model="editForm"
                 :rules="rules"
@@ -443,9 +566,13 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 行布局组件，用于将其子元素按行排列 -->
                 <el-row>
+                    <!-- 列布局组件，占 24 列宽度 -->
                     <el-col :span="24">
+                        <!-- 表单项组件，标签为“头像” -->
                         <el-form-item label="头像：">
+                            <!-- 文件上传组件，上传地址为 BaseApi 加上指定路径，不显示文件列表，上传成功时调用 handleAvatarSuccess 方法，上传前调用 beforeAvatarUpload 方法 -->
                             <el-upload
                                 class="avatar-uploader"
                                 :action="
@@ -456,6 +583,7 @@
                                 :on-success="handleAvatarSuccess"
                                 :before-upload="beforeAvatarUpload"
                             >
+                                <!-- 如果有图片地址，则显示图片，否则显示加号图标 -->
                                 <img
                                     v-if="imageUrl"
                                     :src="BaseApi + imageUrl"
@@ -469,29 +597,43 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 行布局组件，用于将其子元素按行排列 -->
                 <el-row>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“电话号码”，验证规则绑定到 username 字段 -->
                         <el-form-item label="电话号码：" prop="username">
+                            <!-- 输入框组件，最大长度为 11，绑定到 editForm 对象的 username 属性 -->
                             <el-input
                                 max="11"
                                 v-model="editForm.username"
                             ></el-input>
                         </el-form-item>
                     </el-col>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“姓名”，验证规则绑定到 nickName 字段 -->
                         <el-form-item label="姓名：" prop="nickName">
+                            <!-- 输入框组件，绑定到 editForm 对象的 nickName 属性 -->
                             <el-input v-model="editForm.nickName"></el-input>
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 行布局组件，用于将其子元素按行排列 -->
                 <el-row>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“身份证号”，验证规则绑定到 idCard 字段 -->
                         <el-form-item label="身份证号：" prop="idCard">
+                            <!-- 输入框组件，绑定到 editForm 对象的 idCard 属性 -->
                             <el-input v-model="editForm.idCard"></el-input>
                         </el-form-item>
                     </el-col>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“年龄” -->
                         <el-form-item label="年龄：">
+                            <!-- 输入框组件，类型为数字，最小值为 18，最大值为 70，绑定到 editForm 对象的 age 属性 -->
                             <el-input
                                 type="number"
                                 min="18"
@@ -501,9 +643,13 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 行布局组件，用于将其子元素按行排列 -->
                 <el-row>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“所属部门” -->
                         <el-form-item label="所属部门：">
+                            <!-- 下拉选择框组件，宽度为 200px，绑定到 editForm 对象的 deptId 属性，可过滤选项，选择项改变时强制更新组件，占位符为“请选择部门”，可清除选择 -->
                             <el-select
                                 style="width: 200px"
                                 v-model="editForm.deptId"
@@ -512,6 +658,7 @@
                                 @change="$forceUpdate()"
                                 clearable
                             >
+                                <!-- 循环渲染下拉选择框的选项，从 options 数组中获取数据 -->
                                 <el-option
                                     v-for="item in options"
                                     :key="item.id"
@@ -522,8 +669,11 @@
                             </el-select>
                         </el-form-item>
                     </el-col>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“住址” -->
                         <el-form-item label="住址：">
+                            <!-- 输入框组件，类型为文本，绑定到 editForm 对象的 address 属性 -->
                             <el-input
                                 type="text"
                                 v-model="editForm.address"
@@ -531,9 +681,13 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 行布局组件，用于将其子元素按行排列 -->
                 <el-row>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“员工备注” -->
                         <el-form-item label="员工备注：">
+                            <!-- 文本域组件，绑定到 editForm 对象的 info 属性 -->
                             <textarea
                                 cols="20"
                                 rows="3"
@@ -541,8 +695,11 @@
                             ></textarea>
                         </el-form-item>
                     </el-col>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“性别” -->
                         <el-form-item label="性别：">
+                            <!-- 下拉选择框组件，宽度为 200px，绑定到 editForm 对象的 sex 属性，选择项改变时强制更新组件，占位符为“请选择性别”，可清除选择 -->
                             <el-select
                                 style="width: 200px"
                                 v-model="editForm.sex"
@@ -550,43 +707,61 @@
                                 placeholder="请选择性别"
                                 clearable
                             >
+                                <!-- 下拉选择框的选项，标签为“女”，值为 0 -->
                                 <el-option label="女" value="0"></el-option>
+                                <!-- 下拉选择框的选项，标签为“男”，值为 1 -->
                                 <el-option label="男" value="1"></el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 行布局组件，用于将其子元素按行排列 -->
                 <el-row>
+                    <!-- 列布局组件，占 12 列宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项组件，标签为“状态” -->
                         <el-form-item label="状态：">
+                            <!-- 下拉选择框组件，宽度为 200px，绑定到 editForm 对象的 state 属性，占位符为“请选择状态”，可清除选择 -->
                             <el-select
                                 style="width: 200px"
                                 v-model="editForm.state"
                                 placeholder="请选择状态"
                                 clearable
                             >
+                                <!-- 下拉选择框的选项，标签为“在职”，值为 0 -->
                                 <el-option label="在职" value="0"></el-option>
+                                <!-- 下拉选择框的选项，标签为“离职”，值为 1 -->
                                 <el-option label="离职" value="1"></el-option>
                             </el-select>
                         </el-form-item>
-                    </el-col>
+                                            </el-col>
                 </el-row>
 
+                <!-- 表单元素项，包含提交和取消按钮 -->
                 <el-form-item>
+                    <!-- 主要类型按钮，点击调用 submitEditForm 方法提交修改表单 -->
                     <el-button
                         type="primary"
                         style="font-size: 18px;"
                         @click="submitEditForm('editForm')"
-                        ><i class="iconfont icon-r-yes" style="font-size: 18px;"> </i> 提交</el-button
                     >
+                        <!-- 图标 -->
+                        <i class="iconfont icon-r-yes" style="font-size: 18px;"> </i> 
+                        <!-- 按钮文本 -->
+                        提交
+                    </el-button>
+                    <!-- 普通按钮，点击调用 editCancel 方法取消修改 -->
                     <el-button @click="editCancel" style="font-size: 18px;">取消</el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
-        <!--角色列表-->
+        <!-- 分配职务对话框，标题为“分配职务”，显示状态与 empRoleVisable 绑定 -->
         <el-dialog title="分配职务" :visible.sync="empRoleVisable">
+            <!-- 显示已有职务的区域 -->
             <div>
+                <!-- 标签显示“已有职务” -->
                 <label>已有职务：</label>
+                <!-- 禁用的多选下拉选择框，显示已有职务 -->
                 <el-select
                     disabled
                     size="small"
@@ -595,6 +770,7 @@
                     filterable
                     placeholder="没有职务"
                 >
+                    <!-- 循环渲染所有职务选项 -->
                     <el-option
                         v-for="item in allRoles"
                         :key="item.id"
@@ -604,8 +780,11 @@
                     </el-option>
                 </el-select>
             </div>
+            <!-- 更改职务的区域 -->
             <div>
+                <!-- 标签显示“更改职务” -->
                 <label>更改职务：</label>
+                <!-- 多选下拉选择框，用于选择要更改的职务 -->
                 <el-select
                     size="small"
                     name="roleIds"
@@ -615,6 +794,7 @@
                     filterable
                     placeholder="请选择职务"
                 >
+                    <!-- 循环渲染所有职务选项 -->
                     <el-option
                         v-for="item in allRoles"
                         :key="item.id"
@@ -624,19 +804,29 @@
                     </el-option>
                 </el-select>
             </div>
+            <!-- 换行 -->
             <br>
+            <!-- 主要类型按钮，点击调用 submitRoleBtn 方法提交职务更改 -->
             <el-button type="primary" @click="submitRoleBtn" style="font-size: 18px;">
-                <i class="iconfont icon-r-yes" style="font-size: 18px;"> </i> 提交</el-button>
+                <!-- 图标 -->
+                <i class="iconfont icon-r-yes" style="font-size: 18px;"> </i> 
+                <!-- 按钮文本 -->
+                提交
+            </el-button>
+            <!-- 普通按钮，点击调用 roleBtnCancel 方法取消职务更改 -->
             <el-button @click="roleBtnCancel" style="font-size: 18px;">取消</el-button>
         </el-dialog>
-        <!--重置密码-->
+        <!-- 重置密码对话框，标题为“重置密码”，显示状态与 resetPwdVisable 绑定 -->
         <el-dialog
             title="重置密码"
             v-model="resetPwdForm"
             :visible.sync="resetPwdVisable"
         >
+            <!-- 表单 -->
             <el-form>
+                <!-- 表单元素项，标签为“密码” -->
                 <el-form-item label="密码：">
+                    <!-- 密码输入框，绑定到 resetPwdForm 的 code 属性 -->
                     <el-input
                         style="width: 75%; margin: 0 auto; padding: 0"
                         type="password"
@@ -644,419 +834,608 @@
                         placeholder="请输入密码"
                     ></el-input>
                 </el-form-item>
-                <el-button type="primary" @click="submitResetPwd" style="font-size: 18px;"
-                    >
+                <!-- 主要类型按钮，点击调用 submitResetPwd 方法提交密码重置 -->
+                <el-button type="primary" @click="submitResetPwd" style="font-size: 18px;">
+                    <!-- 图标 -->
                     <i class="iconfont icon-r-yes" style="font-size: 18px;"> </i>
-                     确定</el-button
-                >
+                    <!-- 按钮文本 -->
+                    确定
+                </el-button>
+                <!-- 普通按钮，点击关闭重置密码对话框 -->
                 <el-button @click="resetPwdVisable = false" style="font-size: 18px;">取消</el-button>
             </el-form>
         </el-dialog>
     </div>
 </template>
 <script>
-import { listByQo } from "@/api/personnel_management/department/deptApi";
-import { popup } from "@/assets/js/common";
-import {
-    deactivate,
-    detail,
-    editBtnClick,
-    pageByQo,
-    resetPwd,
-    save,
-    update,
-} from "@/api/personnel_management/employee/empApi";
-import {
-    getAllRole,
-    queryRoleIdsByEid,
-    saveRoleEmp,
-} from "@/api/system/role/roleApi";
-import { clearCookie, loginEmp } from "@/assets/js/auth";
+    // 从指定路径导入部门列表查询函数
+    import { listByQo } from "@/api/personnel_management/department/deptApi";
+    // 从指定路径导入弹窗提示函数
+    import { popup } from "@/assets/js/common";
+    // 从指定路径导入员工相关的 API 函数
+    import {
+        deactivate,
+        detail,
+        editBtnClick,
+        pageByQo,
+        resetPwd,
+        save,
+        update,
+    } from "@/api/personnel_management/employee/empApi";
+    // 从指定路径导入角色相关的 API 函数
+    import {
+        getAllRole,
+        queryRoleIdsByEid,
+        saveRoleEmp,
+    } from "@/api/system/role/roleApi";
+    // 从指定路径导入清除 cookie 和获取登录员工信息的函数
+    import { clearCookie, loginEmp } from "@/assets/js/auth";
 
-export default {
-    data() {
-        return {
-            BaseApi: this.$store.state.BaseApi,
-            detailVisable: false,
-            newVisable: false,
-            editVisable: false,
-            empRoleForm: {},
-            hasRoleIds: [],
-            allRoles: [],
-            detailForm: {},
-            searchForm: {},
-            editForm: {},
-            options: [],
-            tableData: [],
-            resetPwdVisable: false,
-            newForm: {},
-            empRoleVisable: false,
-            checked_keys: [],
-            roles: [],
-            resetPwdForm: {},
-            rules: {
-                username: [
-                    {
-                        required: true,
-                        message: "手机号不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                nickName: [
-                    {
-                        required: true,
-                        message: "姓名不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                idCard: [
-                    {
-                        required: true,
-                        message: "身份证号不能为空",
-                        trigger: "blur",
-                    },
-                ],
-            },
-            /*上传头像*/
-            imageUrl: "",
-        };
-    },
-    methods: {
-        deptAll() {
-            listByQo({}).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.options = res.data;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        getRoleAll() {
-            getAllRole().then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.allRoles = res.data;
-                } else {
-                    popup(res.msg, "warning");
-                }
-            });
-        },
-        init() {
-            pageByQo(this.searchForm).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.tableData = res.data.records;
-                    this.searchForm.total = res.data.total;
-                    this.searchForm.pageSize = res.data.size;
-                    this.searchForm.currentPage = res.data.current;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        /*分页*/
-        handleSizeChange(val) {
-            this.searchForm.pageSize = val;
-            this.init();
-            console.log(`每页 ${val} 条`);
-        },
-        handleCurrentChange(val) {
-            this.searchForm.currentPage = val;
-            this.init();
-            console.log(`当前页: ${val}`);
-        },
-        submitSearchForm() {
-            this.init();
-        },
-        detailBtn(row) {
-            detail(row.id).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.detailForm = res.data;
-                    this.detailForm.deptName = row.deptName;
-                    this.detailVisable = true;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-            console.log(this.detailForm);
-        },
-        detail_down() {
-            this.detailForm = {};
-            this.detailVisable = false;
+    export default {
+        // 定义组件的数据
+        data() {
+            return {
+                // 从 store 中获取基础 API 地址
+                BaseApi: this.$store.state.BaseApi,
+                // 控制员工详情对话框的显示与隐藏
+                detailVisable: false,
+                // 控制新建员工对话框的显示与隐藏
+                newVisable: false,
+                // 控制修改员工对话框的显示与隐藏
+                editVisable: false,
+                // 存储员工职务表单数据
+                empRoleForm: {},
+                // 存储员工已有的角色 ID 数组
+                hasRoleIds: [],
+                // 存储所有角色信息的数组
+                allRoles: [],
+                // 存储员工详情数据
+                detailForm: {},
+                // 存储搜索表单数据
+                searchForm: {},
+                // 存储修改员工表单数据
+                editForm: {},
+                // 存储部门选项数据
+                options: [],
+                // 存储表格展示的员工数据
+                tableData: [],
+                // 控制重置密码对话框的显示与隐藏
+                resetPwdVisable: false,
+                // 存储新建员工表单数据
+                newForm: {},
+                // 控制分配职务对话框的显示与隐藏
+                empRoleVisable: false,
+                // 存储选中的键（可能用于某些选中状态管理）
+                checked_keys: [],
+                // 存储角色数据（可能未使用）
+                roles: [],
+                // 存储重置密码表单数据
+                resetPwdForm: {},
+                // 定义表单验证规则
+                rules: {
+                    username: [
+                        {
+                            // 验证用户名是否为空
+                            required: true,
+                            // 为空时的提示信息
+                            message: "手机号不能为空",
+                            // 触发验证的事件
+                            trigger: "blur",
+                        },
+                    ],
+                    nickName: [
+                        {
+                            // 验证姓名是否为空
+                            required: true,
+                            // 为空时的提示信息
+                            message: "姓名不能为空",
+                            // 触发验证的事件
+                            trigger: "blur",
+                        },
+                    ],
+                    idCard: [
+                        {
+                            // 验证身份证号是否为空
+                            required: true,
+                            // 为空时的提示信息
+                            message: "身份证号不能为空",
+                            // 触发验证的事件
+                            trigger: "blur",
+                        },
+                    ],
+                },
+                // 存储上传的头像图片 URL
+                imageUrl: "",
+            };
         },
-        /*上传头像*/
-        handleAvatarSuccess(res) {
-            this.imageUrl = res.url;
-        },
-        beforeAvatarUpload(file) {
-            const isJPG =
-                file.type === "image/jpeg" || file.type === "image/png";
-            const isLt2M = file.size / 1024 / 1024 < 3;
-            if (!isJPG) {
-                this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
-            }
-            if (!isLt2M) {
-                this.$message.error("上传头像图片大小不能超过 3MB!");
-            }
-            return isJPG && isLt2M;
-        },
-        submitNewForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    this.newForm.headImg = this.imageUrl;
-                    save(this.newForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("操作成功");
-                            this.newForm = {};
-                            this.imageUrl = "";
-                            this.newVisable = false;
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
-                }
-            });
-        },
-        saveCancel() {
-            this.newVisable = false;
-            this.imageUrl = "";
-            this.$refs["newForm"].resetFields();
-        },
-        /*修改员工信息*/
-        editCancel() {
-            this.editVisable = false;
-            this.imageUrl = "";
-            this.$refs["editForm"].resetFields();
-            this.editForm = {};
-        },
-        editBtn(id) {
-            editBtnClick(id).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.editForm = { ...res.data };
-                    console.log(this.editForm);
-                    this.imageUrl = this.editForm.headImg;
-                    this.editVisable = true;
-                } else {
-                    popup(res.msg, "error");
+        // 定义组件的方法
+        methods: {
+            // 获取所有部门信息
+            deptAll() {
+                // 调用部门列表查询函数，传入空对象作为参数
+                listByQo({}).then((res) => {
+                    // 获取响应中的数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 若响应码为 200，将部门数据赋值给 options 数组
+                        this.options = res.data;
+                    } else {
+                        // 若响应码不为 200，弹出错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 获取所有角色信息
+            getRoleAll() {
+                // 调用获取所有角色的函数
+                getAllRole().then((res) => {
+                    // 获取响应中的数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 若响应码为 200，将角色数据赋值给 allRoles 数组
+                        this.allRoles = res.data;
+                    } else {
+                        // 若响应码不为 200，弹出警告提示
+                        popup(res.msg, "warning");
+                    }
+                });
+            },
+            // 初始化表格数据
+            init() {
+                // 调用分页查询员工数据的函数，传入搜索表单数据
+                pageByQo(this.searchForm).then((res) => {
+                    // 获取响应中的数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 若响应码为 200，将员工数据赋值给 tableData 数组
+                        this.tableData = res.data.records;
+                        // 将总记录数赋值给搜索表单的 total 属性
+                        this.searchForm.total = res.data.total;
+                        // 将每页记录数赋值给搜索表单的 pageSize 属性
+                        this.searchForm.pageSize = res.data.size;
+                        // 将当前页码赋值给搜索表单的 currentPage 属性
+                        this.searchForm.currentPage = res.data.current;
+                    } else {
+                        // 若响应码不为 200，弹出错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 处理分页大小改变事件
+            handleSizeChange(val) {
+                // 更新搜索表单的 pageSize 属性
+                this.searchForm.pageSize = val;
+                // 重新初始化表格数据
+                this.init();
+                // 打印日志
+                console.log(`每页 ${val} 条`);
+            },
+            // 处理当前页码改变事件
+            handleCurrentChange(val) {
+                // 更新搜索表单的 currentPage 属性
+                this.searchForm.currentPage = val;
+                // 重新初始化表格数据
+                this.init();
+                // 打印日志
+                console.log(`当前页: ${val}`);
+            },
+            // 提交搜索表单
+            submitSearchForm() {
+                // 重新初始化表格数据
+                this.init();
+            },
+            // 查看员工详情
+            detailBtn(row) {
+                // 调用获取员工详情的函数，传入员工 ID
+                detail(row.id).then((res) => {
+                    // 获取响应中的数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 若响应码为 200，将员工详情数据赋值给 detailForm 对象
+                        this.detailForm = res.data;
+                        // 设置部门名称
+                        this.detailForm.deptName = row.deptName;
+                        // 显示员工详情对话框
+                        this.detailVisable = true;
+                    } else {
+                        // 若响应码不为 200，弹出错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+                // 打印员工详情数据
+                console.log(this.detailForm);
+            },
+            // 关闭员工详情对话框
+            detail_down() {
+                // 清空员工详情数据
+                this.detailForm = {};
+                // 隐藏员工详情对话框
+                this.detailVisable = false;
+            },
+            // 处理头像上传成功事件
+            handleAvatarSuccess(res) {
+                // 将上传成功后的图片 URL 赋值给 imageUrl
+                this.imageUrl = res.url;
+            },
+            // 上传头像前的验证
+            beforeAvatarUpload(file) {
+                // 验证图片类型是否为 JPEG 或 PNG
+                const isJPG =
+                    file.type === "image/jpeg" || file.type === "image/png";
+                // 验证图片大小是否小于 3MB
+                const isLt2M = file.size / 1024 / 1024 < 3;
+                if (!isJPG) {
+                    // 若图片类型不符合要求，弹出错误提示
+                    this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
                 }
-            });
-        },
-        submitEditForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    this.editForm.headImg = this.imageUrl;
-                    update(this.editForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("操作成功");
-                            this.editForm = {};
-                            this.imageUrl = "";
-                            this.editVisable = false;
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
+                if (!isLt2M) {
+                    // 若图片大小不符合要求，弹出错误提示
+                    this.$message.error("上传头像图片大小不能超过 3MB!");
                 }
-            });
-        },
-        /*离职*/
-        delBtn(row) {
-            this.$confirm("确定要将该员工办理离职?", "警示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    if (row.state == "1") {
-                        popup("已是离职状态", "warning");
-                        return;
+                // 返回验证结果
+                return isJPG && isLt2M;
+            },
+            // 提交新建员工表单
+            submitNewForm(formName) {
+                // 对表单进行验证
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 若表单验证通过，将头像 URL 赋值给新建员工表单的 headImg 属性
+                        this.newForm.headImg = this.imageUrl;
+                        // 调用保存员工信息的函数，传入新建员工表单数据
+                        save(this.newForm).then((res) => {
+                            // 获取响应中的数据
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 若响应码为 200，弹出操作成功提示
+                                popup("操作成功");
+                                // 清空新建员工表单数据
+                                this.newForm = {};
+                                // 清空头像 URL
+                                this.imageUrl = "";
+                                // 隐藏新建员工对话框
+                                this.newVisable = false;
+                                // 重新初始化表格数据
+                                this.init();
+                            } else {
+                                // 若响应码不为 200，弹出错误提示
+                                popup(res.msg, "error");
+                            }
+                        });
                     }
-                    deactivate(row.id).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("操作成功");
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
+                });
+            },
+            // 取消新建员工操作
+            saveCancel() {
+                // 隐藏新建员工对话框
+                this.newVisable = false;
+                // 清空头像 URL
+                this.imageUrl = "";
+                // 重置新建员工表单
+                this.$refs["newForm"].resetFields();
+            },
+            // 取消修改员工操作
+            editCancel() {
+                // 隐藏修改员工对话框
+                this.editVisable = false;
+                // 清空头像 URL
+                this.imageUrl = "";
+                // 重置修改员工表单
+                this.$refs["editForm"].resetFields();
+                // 清空修改员工表单数据
+                this.editForm = {};
+            },
+            // 编辑员工信息
+            editBtn(id) {
+                // 调用编辑按钮点击处理函数，传入员工 ID
+                editBtnClick(id).then((res) => {
+                    // 获取响应中的数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 若响应码为 200，将员工信息赋值给 editForm 对象
+                        this.editForm = { ...res.data };
+                        // 打印员工信息
+                        console.log(this.editForm);
+                        // 将头像 URL 赋值给 imageUrl
+                        this.imageUrl = this.editForm.headImg;
+                        // 显示修改员工对话框
+                        this.editVisable = true;
+                    } else {
+                        // 若响应码不为 200，弹出错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 提交修改员工表单
+            submitEditForm(formName) {
+                // 对表单进行验证
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 若表单验证通过，将头像 URL 赋值给修改员工表单的 headImg 属性
+                        this.editForm.headImg = this.imageUrl;
+                        // 调用更新员工信息的函数，传入修改员工表单数据
+                        update(this.editForm).then((res) => {
+                            // 获取响应中的数据
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 若响应码为 200，弹出操作成功提示
+                                popup("操作成功");
+                                // 清空修改员工表单数据
+                                this.editForm = {};
+                                // 清空头像 URL
+                                this.imageUrl = "";
+                                // 隐藏修改员工对话框
+                                this.editVisable = false;
+                                // 重新初始化表格数据
+                                this.init();
+                            } else {
+                                // 若响应码不为 200，弹出错误提示
+                                popup(res.msg, "error");
+                            }
+                        });
+                    }
+                });
+            },
+            // 员工离职操作
+            delBtn(row) {
+                // 弹出确认对话框
+                this.$confirm("确定要将该员工办理离职?", "警示", {
+                    // 确认按钮文本
+                    confirmButtonText: "确定",
+                    // 取消按钮文本
+                    cancelButtonText: "取消",
+                    // 对话框类型为警告
+                    type: "warning",
                 })
-                .catch(() => {
-                    this.$message({
-                        type: "info",
-                        message: "已取消操作",
+                   .then(() => {
+                        if (row.state == "1") {
+                            // 若员工已离职，弹出警告提示
+                            popup("已是离职状态", "warning");
+                            return;
+                        }
+                        // 调用员工离职处理函数，传入员工 ID
+                        deactivate(row.id).then((res) => {
+                            // 获取响应中的数据
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 若响应码为 200，弹出操作成功提示
+                                popup("操作成功");
+                                // 重新初始化表格数据
+                                this.init();
+                            } else {
+                                // 若响应码不为 200，弹出错误提示
+                                popup(res.msg, "error");
+                            }
+                        });
+                    })
+                   .catch(() => {
+                        // 若用户取消操作，弹出提示
+                        this.$message({
+                            type: "info",
+                            message: "已取消操作",
+                        });
                     });
+            },
+            // 关闭对话框时清空头像 URL
+            dialog_imgClose() {
+                this.imageUrl = "";
+            },
+            // 分配职务按钮点击事件
+            empRoleBtn(id) {
+                // 将员工 ID 赋值给 empRoleForm 的 eid 属性
+                this.empRoleForm.eid = id;
+                // 根据员工编号查询角色编号集合
+                queryRoleIdsByEid(id).then((res) => {
+                    // 获取响应中的数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 若响应码为 200，将角色编号集合赋值给 empRoleForm 的 empRoleIds 属性
+                        this.empRoleForm.empRoleIds = res.data;
+                        // 将角色编号集合赋值给 hasRoleIds 数组
+                        this.hasRoleIds = res.data;
+                        // 显示分配职务对话框
+                        this.empRoleVisable = true;
+                    } else {
+                        // 若响应码不为 200，弹出警告提示
+                        popup(res.msg, "warning");
+                    }
                 });
-        },
-        dialog_imgClose() {
-            this.imageUrl = "";
-        },
-        /*分配角色按钮*/
-        empRoleBtn(id) {
-            this.empRoleForm.eid = id;
-            /*根据员工编号查询角色编号集合*/
-            queryRoleIdsByEid(id).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.empRoleForm.empRoleIds = res.data;
-                    this.hasRoleIds = res.data;
-                    this.empRoleVisable = true;
+                // 显示分配职务对话框
+                this.empRoleVisable = true;
+            },
+            // 提交职务分配表单
+            submitRoleBtn() {
+                if (
+                    JSON.stringify(this.hasRoleIds) ===
+                    JSON.stringify(this.empRoleForm.empRoleIds)
+                ) {
+                    // 若职务没有改动，弹出警告提示
+                    popup("你未做改动...", "warning");
                 } else {
-                    popup(res.msg, "warning");
+                    // 弹出确认对话框
+                    this.$confirm("确定修改员工的职务?", "警示", {
+                        // 确认按钮文本
+                        confirmButtonText: "确定",
+                        // 取消按钮文本
+                        cancelButtonText: "取消",
+                        // 对话框类型为警告
+                        type: "warning",
+                    })
+                       .then(() => {
+                            // 将角色编号集合转换为字符串
+                            this.empRoleForm.empRoleIds =
+                                this.empRoleForm.empRoleIds.toString();
+                            // 调用保存员工角色信息的函数，传入 empRoleForm 数据
+                            saveRoleEmp(this.empRoleForm).then((res) => {
+                                // 获取响应中的数据
+                                res = res.data;
+                                if (res.code == 200) {
+                                    // 若响应码为 200，弹出操作成功提示
+                                    popup("操作成功");
+                                    // 清空 hasRoleIds 数组
+                                    this.hasRoleIds = [];
+                                    // 清空 empRoleForm 数据
+                                    this.empRoleForm = {};
+                                    // 隐藏分配职务对话框
+                                    this.empRoleVisable = false;
+                                } else {
+                                    // 若响应码不为 200，恢复 empRoleForm 的 empRoleIds 属性
+                                    this.empRoleForm.empRoleIds = this.hasRoleIds;
+                                    // 弹出错误提示
+                                    popup(res.msg, "error");
+                                }
+                            });
+                        })
+                       .catch(() => {
+                            // 若用户取消操作，弹出提示
+                            this.$message({
+                                type: "info",
+                                message: "已取消操作",
+                            });
+                        });
                 }
-            });
-            this.empRoleVisable = true;
-        },
-        submitRoleBtn() {
-            if (
-                JSON.stringify(this.hasRoleIds) ===
-                JSON.stringify(this.empRoleForm.empRoleIds)
-            ) {
-                popup("你未做改动...", "warning");
-            } else {
-                this.$confirm("确定修改员工的职务?", "警示", {
+            },
+            // 取消职务分配操作
+            roleBtnCancel() {
+                // 隐藏分配职务对话框
+                this.empRoleVisable = false;
+                // 清空 hasRoleIds 数组
+                this.hasRoleIds = [];
+                // 清空 empRoleIds 数组（此处可能有误，原代码中未定义 empRoleIds）
+                this.empRoleIds = [];
+            },
+            // 重置密码按钮点击事件
+            resetPwd(row) {
+                // 清空重置密码表单数据
+                this.resetPwdForm = {};
+                // 将员工 ID 赋值给重置密码表单的 eid 属性
+                this.resetPwdForm.eid = row.id;
+                // 显示重置密码对话框
+                this.resetPwdVisable = true;
+            },
+            // 提交重置密码表单
+            submitResetPwd() {
+                // 弹出确认对话框
+                this.$confirm("确定要重置该账户的密码?", "警示", {
+                    // 确认按钮文本
                     confirmButtonText: "确定",
+                    // 取消按钮文本
                     cancelButtonText: "取消",
+                    // 对话框类型为警告
                     type: "warning",
                 })
-                    .then(() => {
-                        this.empRoleForm.empRoleIds =
-                            this.empRoleForm.empRoleIds.toString();
-                        saveRoleEmp(this.empRoleForm).then((res) => {
+                   .then(() => {
+                        // 调用重置密码函数，传入重置密码表单数据
+                        resetPwd(this.resetPwdForm).then((res) => {
+                            // 获取响应中的数据
                             res = res.data;
                             if (res.code == 200) {
-                                popup("操作成功");
-                                this.hasRoleIds = [];
-                                this.empRoleForm = {};
-                                this.empRoleVisable = false;
+                                // 若响应码为 200，隐藏重置密码对话框
+                                this.resetPwdVisable = false;
+                                // 获取登录员工信息
+                                var emp = loginEmp();
+                                if (emp.id == this.resetPwdForm.eid) {
+                                    // 若重置的是当前登录员工的密码，清除 cookie
+                                    clearCookie("employee");
+                                    clearCookie("token");
+                                    // 跳转到登录页面
+                                    this.$router.push("/");
+                                }
+                                // 清空重置密码表单数据
+                                this.resetPwdForm = {};
+                                // 弹出密码重置成功提示
+                                popup("密码重置成功");
                             } else {
-                                this.empRoleForm.empRoleIds = this.hasRoleIds;
+                                // 若响应码不为 200，弹出错误提示
                                 popup(res.msg, "error");
                             }
                         });
                     })
-                    .catch(() => {
+                   .catch(() => {
+                        // 若用户取消操作，弹出提示
                         this.$message({
                             type: "info",
                             message: "已取消操作",
                         });
                     });
-            }
-        },
-        roleBtnCancel() {
-            this.empRoleVisable = false;
-            this.hasRoleIds = [];
-            this.empRoleIds = [];
-        },
-        /*重置密码按钮*/
-        resetPwd(row) {
-            this.resetPwdForm = {};
-            this.resetPwdForm.eid = row.id;
-            this.resetPwdVisable = true;
+            },
         },
-        submitResetPwd() {
-            this.$confirm("确定要重置该账户的密码?", "警示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    resetPwd(this.resetPwdForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            this.resetPwdVisable = false;
-                            var emp = loginEmp();
-                            if (emp.id == this.resetPwdForm.eid) {
-                                clearCookie("employee");
-                                clearCookie("token");
-                                this.$router.push("/");
-                            }
-                            this.resetPwdForm = {};
-                            popup("密码重置成功");
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
-                })
-                .catch(() => {
-                    this.$message({
-                        type: "info",
-                        message: "已取消操作",
-                    });
-                });
+        // 组件挂载完成后执行的钩子函数
+        mounted() {
+            // 初始化所有部门信息
+            this.deptAll();
+            // 获取所有角色信息
+            this.getRoleAll();
+            // 初始化表格数据
+            this.init();
         },
-    },
-    mounted() {
-        /*初始化所有部门信息*/
-        this.deptAll();
-        this.getRoleAll();
-        /*初始化表格数据*/
-        this.init();
-    },
-};
+    };
 </script>
 <style>
-.searchForm {
-    height: 134px;
-}
+    /* 搜索表单样式，设置高度 */
+    .searchForm {
+        height: 134px;
+    }
 
-.table {
-    margin: 0 auto;
-    height: 320px;
-}
+    /* 表格样式，设置居中显示和高度 */
+    .table {
+        margin: 0 auto;
+        height: 320px;
+    }
 
-.pageUtils {
-    position: absolute;
-    width: 84%;
-    margin: 2px auto;
-    height: 43px;
-}
+    /* 分页工具样式，设置绝对定位、宽度、边距和高度 */
+    .pageUtils {
+        position: absolute;
+        width: 84%;
+        margin: 2px auto;
+        height: 43px;
+    }
 
-.searchForm {
-    display: inline-block;
-    margin: 0 auto;
-    height: 51px;
-    line-height: 51px;
-}
+    /* 搜索表单样式，设置为内联块元素，居中显示和高度、行高 */
+    .searchForm {
+        display: inline-block;
+        margin: 0 auto;
+        height: 51px;
+        line-height: 51px;
+    }
 
-.searchForm .column {
-    display: inline-block;
-    margin: 0 auto;
-    margin-right: 2px;
-    line-height: 48px;
-    height: 51px;
-}
+    /* 搜索表单列样式，设置为内联块元素，居中显示、右边距、行高和高度 */
+    .searchForm .column {
+        display: inline-block;
+        margin: 0 auto;
+        margin-right: 2px;
+        line-height: 48px;
+        height: 51px;
+    }
 
-.avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-}
+    /* 头像上传器样式，设置边框、圆角、光标样式和溢出隐藏 */
+    .avatar-uploader .el-upload {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
 
-.avatar-uploader .el-upload:hover {
-    border-color: #409eff;
-}
+    /* 头像上传器悬停样式，设置边框颜色 */
+    .avatar-uploader .el-upload:hover {
+        border-color: #409eff;
+    }
 
-.avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-}
+    /* 头像上传器图标样式，设置字体大小、颜色、宽度、高度和文本居中 */
+    .avatar-uploader-icon {
+        font-size: 28px;
+        color: #8c939d;
+        width: 178px;
+        height: 178px;
+        line-height: 178px;
+        text-align: center;
+    }
 
-.avatar {
-    width: 178px;
-    height: 178px;
-    display: block;
-}
-</style>
\ No newline at end of file
+    /* 头像图片样式，设置宽度和高度 */
+    .avatar {
+        width: 178px;
+        height: 178px;
+        display: block;
+    }
+</style>
diff --git a/superMarket-frontend/src/views/sale_management/exchange_point_products_records/List.vue b/superMarket-frontend/src/views/sale_management/exchange_point_products_records/List.vue
index 0811281..7631d71 100644
--- a/superMarket-frontend/src/views/sale_management/exchange_point_products_records/List.vue
+++ b/superMarket-frontend/src/views/sale_management/exchange_point_products_records/List.vue
@@ -1,24 +1,30 @@
 <template>
+    <!-- 定义一个 id 为 sale_records 的 div 容器，作为整个页面的根容器 -->
     <div id="sale_records">
+        <!-- 面包屑导航组件，用于显示当前页面在整个网站结构中的位置，分隔符为 / -->
         <el-breadcrumb separator="/">
-            <el-breadcrumb-item
-                >首页</el-breadcrumb-item
-            >
-            <el-breadcrumb-item
-                >销售管理
-            </el-breadcrumb-item>
-            <el-breadcrumb-item
-                >积分兑换记录</el-breadcrumb-item
-            > </el-breadcrumb
-        ><br />
+            <!-- 面包屑导航的第一个项目，显示“首页” -->
+            <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 面包屑导航的第二个项目，显示“销售管理” -->
+            <el-breadcrumb-item>销售管理</el-breadcrumb-item>
+            <!-- 面包屑导航的第三个项目，显示“积分兑换记录” -->
+            <el-breadcrumb-item>积分兑换记录</el-breadcrumb-item>
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
+        <!-- 行布局组件，用于将其子元素按行排列 -->
         <el-row>
+            <!-- 列布局组件，占 7 列宽度 -->
             <el-col :span="7">
+                <!-- 输入框组件，占位符为“兑换订单编号”，绑定到 searchForm 对象的 cn 属性 -->
                 <el-input
                     placeholder="兑换订单编号"
                     v-model="searchForm.cn"
                 />
             </el-col>
+            <!-- 列布局组件，占 7 列宽度 -->
             <el-col :span="7">
+                <!-- 下拉选择框组件，绑定到 searchForm 对象的 memberId 属性，可过滤选项，选择项改变时强制更新组件，占位符为“请选择会员账号”，可清除选择 -->
                 <el-select
                     v-model="searchForm.memberId"
                     placeholder="请选择会员账号"
@@ -26,6 +32,7 @@
                     @change="$forceUpdate()"
                     clearable
                 >
+                    <!-- 循环渲染下拉选择框的选项，从 options_memberPhone 数组中获取数据 -->
                     <el-option
                         v-for="item in options_memberPhone"
                         :key="item.id"
@@ -35,8 +42,11 @@
                     </el-option>
                 </el-select>
             </el-col>
+            <!-- 列布局组件，占 10 列宽度 -->
             <el-col :span="10">
+                <!-- 文本提示“兑换时间：” -->
                 <span>兑换时间：</span>
+                <!-- 日期选择器组件，宽度为 140px，绑定到 searchForm 对象的 startTime 属性，日期格式为 yyyy-MM-dd，占位符为“起始时间” -->
                 <el-date-picker
                     style="width: 140px"
                     v-model="searchForm.startTime"
@@ -45,7 +55,9 @@
                     placeholder="起始时间"
                 >
                 </el-date-picker>
+                <!-- 分隔符 -->
                 -
+                <!-- 日期选择器组件，宽度为 140px，绑定到 searchForm 对象的 endTime 属性，日期格式为 yyyy-MM-dd，占位符为“结束时间” -->
                 <el-date-picker
                     v-model="searchForm.endTime"
                     style="width: 140px"
@@ -56,26 +68,38 @@
                 </el-date-picker>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 行布局组件，用于将其子元素按行排列 -->
         <el-row>
+            <!-- 列布局组件，占 24 列宽度，文本左对齐 -->
             <el-col :span="24" style="text-align: left">
+                <!-- 按钮组件，类型为成功按钮，点击时调用 submitSearchForm 方法，字体大小为 18px -->
                 <el-button
                     type="success"
                     @click="submitSearchForm"
                     style="font-size: 18px"
                 >
+                    <!-- 图标 -->
                     <i class="iconfont icon-r-find" style="font-size: 18px">
                     </i>
-                    搜索</el-button
-                >
+                    <!-- 按钮文本 -->
+                    搜索
+                </el-button>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 表格数据容器 -->
         <div class="table">
+            <!-- 表格组件，数据绑定到 tableData 数组，宽度为 100%，表格大小为中等 -->
             <el-table :data="tableData" style="width: 100%" size="medium">
+                <!-- 表格列组件，显示“编号”，宽度为 200px，绑定到数据的 cn 属性 -->
                 <el-table-column prop="cn" width="200" label="编号">
                 </el-table-column>
+                <!-- 表格列组件，显示“商品封面” -->
                 <el-table-column prop="goodsCoverUrl" label="商品封面">
+                    <!-- 自定义表格列内容，显示商品封面图片，图片地址为 BaseApi 加上数据的 goodsCoverUrl 属性 -->
                     <template v-slot="scope">
                         <img
                             :src="BaseApi + scope.row.goodsCoverUrl"
@@ -84,34 +108,46 @@
                         />
                     </template>
                 </el-table-column>
+                <!-- 表格列组件，显示“商品”，绑定到数据的 goodsName 属性 -->
                 <el-table-column prop="goodsName" label="商品">
                 </el-table-column>
+                <!-- 表格列组件，显示“积分”，绑定到数据的 integral 属性 -->
                 <el-table-column prop="integral" label="积分">
                 </el-table-column>
+                <!-- 表格列组件，显示“会员账号”，宽度为 200px，绑定到数据的 memberPhone 属性 -->
                 <el-table-column
                     width="200"
                     prop="memberPhone"
                     label="会员账号"
                 >
                 </el-table-column>
+                <!-- 表格列组件，显示“兑换时间”，宽度为 200px，绑定到数据的 updateTime 属性 -->
                 <el-table-column prop="updateTime" width="200" label="兑换时间">
                 </el-table-column>
+                <!-- 表格列组件，显示“操作者”，绑定到数据的 updateby 属性 -->
                 <el-table-column prop="updateby" label="操作者">
                 </el-table-column>
+                <!-- 表格列组件，显示“操作”，宽度为 140px，固定在表格右侧 -->
                 <el-table-column width="140" fixed="right" label="操作">
+                    <!-- 自定义表格列内容，包含删除按钮 -->
                     <template v-slot="scope">
+                        <!-- 按钮组件，类型为危险按钮，点击时调用 del 方法，传入当前行的 cn 属性，字体大小为 18px -->
                         <el-button
                             type="danger"
                             @click="del(scope.row.cn)"
                             style="font-size: 18px;"
-                            >
+                        >
+                            <!-- 图标 -->
                             <i class="iconfont icon-r-delete" style="font-size: 18px;"> </i>
+                            <!-- 按钮文本 -->
                             删除
                         </el-button>
                     </template>
                 </el-table-column>
             </el-table>
-            <div style="margin: 10px 0 15px 0;">
+            <!-- 分页组件容器 -->
+            <div style="margin: 10px 0 15px 0">
+                <!-- 分页组件，页码大小改变时调用 handleSizeChange 方法，当前页码改变时调用 handleCurrentChange 方法，当前页码绑定到 searchForm 的 currentPage 属性，可选择的每页记录数为 [5, 10, 20, 50]，每页记录数绑定到 searchForm 的 pageSize 属性，布局包含总数、页码大小选择、上一页、页码、下一页、跳转输入框，总记录数绑定到 searchForm 的 total 属性 -->
                 <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
@@ -127,123 +163,172 @@
     </div>
 </template>
 <script>
-import { popup } from "@/assets/js/common";
-import {
-    delExchangePointProducts,
-    queryOptionsMemberPhone,
-    queryPageByQoExchangePointProducts,
-} from "@/api/sale_management/exchange_point_products/exchangePointProductsApi";
+    // 从指定路径导入弹窗提示函数
+    import { popup } from "@/assets/js/common";
+    // 从指定路径导入积分兑换商品相关的 API 函数
+    import {
+        delExchangePointProducts,
+        queryOptionsMemberPhone,
+        queryPageByQoExchangePointProducts,
+    } from "@/api/sale_management/exchange_point_products/exchangePointProductsApi";
 
-export default {
-    data() {
-        return {
-            BaseApi: this.$store.state.BaseApi,
-            searchForm: {
-                pageSize: 5,
-            },
-            tableData: [],
-            options_memberPhone: [],
-        };
-    },
-    methods: {
-        queryOptionsMemberPhone() {
-            queryOptionsMemberPhone().then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.options_memberPhone = res.data;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
+    export default {
+        // 定义组件的数据
+        data() {
+            return {
+                // 从 store 中获取基础 API 地址
+                BaseApi: this.$store.state.BaseApi,
+                // 存储搜索表单数据，初始每页记录数为 5
+                searchForm: {
+                    pageSize: 5,
+                },
+                // 存储表格展示的积分兑换记录数据
+                tableData: [],
+                // 存储会员账号选项数据
+                options_memberPhone: [],
+            };
         },
-        init() {
-            if (this.searchForm.startTime > this.searchForm.endTime) {
-                popup("结束时间不能小于开始时间", "warning");
-                return;
-            }
-            queryPageByQoExchangePointProducts(this.searchForm).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.tableData = res.data.records;
-                    this.searchForm.total = res.data.total;
-                    this.searchForm.pageSize = res.data.size;
-                    this.searchForm.currentPage = res.data.current;
-                } else {
-                    popup(res.msg, "error");
+        // 定义组件的方法
+        methods: {
+            // 查询会员账号选项数据
+            queryOptionsMemberPhone() {
+                // 调用查询会员账号选项的函数
+                queryOptionsMemberPhone().then((res) => {
+                    // 获取响应中的数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 若响应码为 200，将会员账号选项数据赋值给 options_memberPhone 数组
+                        this.options_memberPhone = res.data;
+                    } else {
+                        // 若响应码不为 200，弹出错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 初始化表格数据
+            init() {
+                // 验证起始时间是否大于结束时间
+                if (this.searchForm.startTime > this.searchForm.endTime) {
+                    // 若起始时间大于结束时间，弹出警告提示
+                    popup("结束时间不能小于开始时间", "warning");
+                    return;
                 }
-            });
-        },
-        del(cn) {
-            this.$confirm("确定删除这条记录？", "警示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    delExchangePointProducts({ cn: cn }).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("操作成功");
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
+                // 调用分页查询积分兑换记录的函数，传入搜索表单数据
+                queryPageByQoExchangePointProducts(this.searchForm).then((res) => {
+                    // 获取响应中的数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 若响应码为 200，将积分兑换记录数据赋值给 tableData 数组
+                        this.tableData = res.data.records;
+                        // 将总记录数赋值给搜索表单的 total 属性
+                        this.searchForm.total = res.data.total;
+                        // 将每页记录数赋值给搜索表单的 pageSize 属性
+                        this.searchForm.pageSize = res.data.size;
+                        // 将当前页码赋值给搜索表单的 currentPage 属性
+                        this.searchForm.currentPage = res.data.current;
+                    } else {
+                        // 若响应码不为 200，弹出错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 删除积分兑换记录
+            del(cn) {
+                // 弹出确认对话框
+                this.$confirm("确定删除这条记录？", "警示", {
+                    // 确认按钮文本
+                    confirmButtonText: "确定",
+                    // 取消按钮文本
+                    cancelButtonText: "取消",
+                    // 对话框类型为警告
+                    type: "warning",
                 })
-                .catch(() => {
-                    this.$message({
-                        type: "info",
-                        message: "已取消操作",
+                   .then(() => {
+                        // 调用删除积分兑换记录的函数，传入兑换订单编号
+                        delExchangePointProducts({ cn: cn }).then((res) => {
+                            // 获取响应中的数据
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 若响应码为 200，弹出操作成功提示
+                                popup("操作成功");
+                                // 重新初始化表格数据
+                                this.init();
+                            } else {
+                                // 若响应码不为 200，弹出错误提示
+                                popup(res.msg, "error");
+                            }
+                        });
+                    })
+                   .catch(() => {
+                        // 若用户取消操作，弹出提示
+                        this.$message({
+                            type: "info",
+                            message: "已取消操作",
+                        });
                     });
-                });
-        },
-        /*分页*/
-        handleSizeChange(val) {
-            this.searchForm.pageSize = val;
-            this.init();
-        },
-        handleCurrentChange(val) {
-            this.searchForm.currentPage = val;
-            this.init();
+            },
+            // 处理分页大小改变事件
+            handleSizeChange(val) {
+                // 更新搜索表单的 pageSize 属性
+                this.searchForm.pageSize = val;
+                // 重新初始化表格数据
+                this.init();
+            },
+            // 处理当前页码改变事件
+            handleCurrentChange(val) {
+                // 更新搜索表单的 currentPage 属性
+                this.searchForm.currentPage = val;
+                // 重新初始化表格数据
+                this.init();
+            },
+            // 提交搜索表单
+            submitSearchForm() {
+                // 重新初始化表格数据
+                this.init();
+            },
         },
-        submitSearchForm() {
+        // 组件挂载完成后执行的钩子函数
+        mounted() {
+            // 初始化表格数据
             this.init();
+            // 查询会员账号选项数据
+            this.queryOptionsMemberPhone();
         },
-    },
-    mounted() {
-        this.init();
-        this.queryOptionsMemberPhone();
-    },
-};
+    };
 </script>
 <style>
-.searchForm {
-    height: 134px;
-}
+    /* 搜索表单样式，设置高度 */
+    .searchForm {
+        height: 134px;
+    }
 
-.table {
-    height: 320px;
-}
+    /* 表格样式，设置高度 */
+    .table {
+        height: 320px;
+    }
 
-.pageUtils {
-    position: absolute;
-    width: 84%;
-    margin: 2px auto;
-    height: 43px;
-}
+    /* 分页工具样式，设置绝对定位、宽度、边距和高度 */
+    .pageUtils {
+        position: absolute;
+        width: 84%;
+        margin: 2px auto;
+        height: 43px;
+    }
 
-.searchForm {
-    display: inline-block;
-    margin: 0 auto;
-    height: 51px;
-    line-height: 51px;
-}
+    /* 搜索表单样式，设置为内联块元素，居中显示和高度、行高 */
+    .searchForm {
+        display: inline-block;
+        margin: 0 auto;
+        height: 51px;
+        line-height: 51px;
+    }
 
-.searchForm .column {
-    display: inline-block;
-    margin: 0 auto;
-    margin-right: 2px;
-    line-height: 48px;
-    height: 51px;
-}
+    /* 搜索表单列样式，设置为内联块元素，居中显示、右边距、行高和高度 */
+    .searchForm .column {
+        display: inline-block;
+        margin: 0 auto;
+        margin-right: 2px;
+        line-height: 48px;
+        height: 51px;
+    }
 </style>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/sale_management/sale_cmd/List.vue b/superMarket-frontend/src/views/sale_management/sale_cmd/List.vue
index 6d4de9c..ea797f9 100644
--- a/superMarket-frontend/src/views/sale_management/sale_cmd/List.vue
+++ b/superMarket-frontend/src/views/sale_management/sale_cmd/List.vue
@@ -1,41 +1,63 @@
 <template>
+    <!-- 定义一个 id 为 sale_cmd 的 div 容器，作为整个销售主页的根容器 -->
     <div id="sale_cmd">
+        <!-- 页面头部区域，包含图标和标题 -->
         <div class="head">
+            <!-- 显示一个图标，使用 iconfont 字体图标，大小为 42px -->
             <i style="font-size: 42px" class="iconfont icon-r-home"> </i>
+            <!-- 显示页面标题“销售主页” -->
             销售主页
         </div>
 
+        <!-- 操作按钮区域 -->
         <div class="cmd">
+            <!-- 一列，占 12 份宽度 -->
             <el-col :span="12">
+                <!-- 按钮，点击触发 saleBtn 方法，用于购物结账 -->
                 <button @click="saleBtn">
+                    <!-- 按钮内的图标，大小为 32px -->
                     <i style="font-size: 32px" class="iconfont icon-r-yes"> </i>
+                    <!-- 按钮文本 -->
                     购物结账
                 </button>
             </el-col>
+            <!-- 一列，占 12 份宽度 -->
             <el-col :span="12">
+                <!-- 按钮，点击触发 exchangePointProductBtn 方法，用于积分兑换 -->
                 <button @click="exchangePointProductBtn">
+                    <!-- 按钮内的图标，大小为 32px -->
                     <i style="font-size: 32px" class="iconfont icon-r-refresh">
                     </i>
+                    <!-- 按钮文本 -->
                     积分兑换
                 </button>
             </el-col>
+            <!-- 一列，占 12 份宽度 -->
             <el-col :span="12">
+                <!-- 按钮，点击触发 saleRecordsBtn 方法，用于查看销售记录 -->
                 <button @click="saleRecordsBtn">
+                    <!-- 按钮内的图标，大小为 32px -->
                     <i style="font-size: 32px" class="iconfont icon-r-paper">
                     </i>
+                    <!-- 按钮文本 -->
                     销售记录
                 </button>
             </el-col>
+            <!-- 一列，占 12 份宽度 -->
             <el-col :span="12">
+                <!-- 按钮，点击触发 exchangePointProductsRecordsBtn 方法，用于查看兑换记录 -->
                 <button @click="exchangePointProductsRecordsBtn">
+                    <!-- 按钮内的图标，大小为 32px -->
                     <i style="font-size: 32px" class="iconfont icon-r-find">
                     </i>
+                    <!-- 按钮文本 -->
                     兑换记录
                 </button>
             </el-col>
         </div>
-        <!--销售-->
+        <!-- 销售商品对话框 -->
         <el-dialog title="销售商品" :visible.sync="newVisable" width="80%">
+            <!-- 表单，绑定 newForm 数据，设置验证规则，标签宽度为 100px -->
             <el-form
                 :model="newForm"
                 :rules="rules"
@@ -43,9 +65,13 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 一行 -->
                 <el-row>
+                    <!-- 一列，占 24 份宽度 -->
                     <el-col :span="24">
+                        <!-- 表单项目，标签为“销售编号：” -->
                         <el-form-item style="width: 60%" label="销售编号：">
+                            <!-- 输入框，禁用状态，绑定 newForm 的 cn 属性 -->
                             <el-input
                                 disabled
                                 v-model="newForm.cn"
@@ -54,31 +80,38 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 一行 -->
                 <el-row>
+                    <!-- 一列，占 12 份宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项目，标签为“支付方式：”，当 newForm 的 sellTime 不存在时显示 -->
                         <el-form-item
                             v-if="!newForm.sellTime"
                             label="支付方式："
                             prop="sellway"
                         >
+                            <!-- 支付宝支付方式单选框，绑定 newForm 的 sellway 属性 -->
                             <el-radio
                                 type="radio"
                                 v-model="newForm.sellway"
                                 label="0"
                                 >支付宝</el-radio
                             >
+                            <!-- 微信支付方式单选框，绑定 newForm 的 sellway 属性 -->
                             <el-radio
                                 type="radio"
                                 v-model="newForm.sellway"
                                 label="1"
                                 >微信</el-radio
                             >
+                            <!-- 现金支付方式单选框，绑定 newForm 的 sellway 属性 -->
                             <el-radio
                                 type="radio"
                                 v-model="newForm.sellway"
                                 label="2"
                                 >现金</el-radio
                             >
+                            <!-- 银行卡支付方式单选框，绑定 newForm 的 sellway 属性 -->
                             <el-radio
                                 type="radio"
                                 v-model="newForm.sellway"
@@ -86,12 +119,14 @@
                                 >银行卡</el-radio
                             >
                         </el-form-item>
+                        <!-- 表单项目，标签为“支付方式：”，当 newForm 的 sellTime 存在时显示，单选框为禁用状态 -->
                         <el-form-item
                             v-else
                             style="width: 80%"
                             label="支付方式："
                             prop="sellway"
                         >
+                            <!-- 支付宝支付方式单选框，禁用状态，绑定 newForm 的 sellway 属性 -->
                             <el-radio
                                 disabled
                                 type="radio"
@@ -99,6 +134,7 @@
                                 label="0"
                                 >支付宝</el-radio
                             >
+                            <!-- 微信支付方式单选框，禁用状态，绑定 newForm 的 sellway 属性 -->
                             <el-radio
                                 disabled
                                 type="radio"
@@ -106,6 +142,7 @@
                                 label="1"
                                 >微信</el-radio
                             >
+                            <!-- 现金支付方式单选框，禁用状态，绑定 newForm 的 sellway 属性 -->
                             <el-radio
                                 disabled
                                 type="radio"
@@ -113,6 +150,7 @@
                                 label="2"
                                 >现金</el-radio
                             >
+                            <!-- 银行卡支付方式单选框，禁用状态，绑定 newForm 的 sellway 属性 -->
                             <el-radio
                                 disabled
                                 type="radio"
@@ -123,14 +161,18 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 一行 -->
                 <el-row>
+                    <!-- 一列，占 12 份宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项目，标签为“顾客类型：”，当 newForm 的 sellTime 不存在时显示 -->
                         <el-form-item
                             v-if="!newForm.sellTime"
                             style="width: 60%"
                             label="顾客类型："
                             prop="type"
                         >
+                            <!-- 会员单选框，点击时根据选择更新总金额，绑定 newForm 的 type 属性 -->
                             <el-radio
                                 @change="
                                     () => {
@@ -149,6 +191,7 @@
                                 label="1"
                                 >会员
                             </el-radio>
+                            <!-- 非会员单选框，点击时根据选择更新总金额，绑定 newForm 的 type 属性 -->
                             <el-radio
                                 @change="
                                     () => {
@@ -168,12 +211,14 @@
                                 >非会员
                             </el-radio>
                         </el-form-item>
+                        <!-- 表单项目，标签为“顾客类型：”，当 newForm 的 sellTime 存在时显示，单选框为禁用状态 -->
                         <el-form-item
                             v-else
                             style="width: 60%"
                             label="顾客类型："
                             prop="type"
                         >
+                            <!-- 会员单选框，禁用状态，点击时根据选择更新总金额，绑定 newForm 的 type 属性 -->
                             <el-radio
                                 disabled
                                 @change="
@@ -193,6 +238,7 @@
                                 label="1"
                                 >会员
                             </el-radio>
+                            <!-- 非会员单选框，禁用状态，点击时根据选择更新总金额，绑定 newForm 的 type 属性 -->
                             <el-radio
                                 disabled
                                 @change="
@@ -214,12 +260,15 @@
                             </el-radio>
                         </el-form-item>
                     </el-col>
+                    <!-- 一列，占 12 份宽度，当顾客类型为会员时显示 -->
                     <el-col :span="12" v-if="newForm.type == '1'">
+                        <!-- 表单项目，标签为“会员账号：” -->
                         <el-form-item
                             style="width: 60%"
                             label="会员账号："
                             prop="memberPhone"
                         >
+                            <!-- 输入框，输入时调用 queryMemberByPhone 方法，绑定 newForm 的 memberPhone 属性 -->
                             <el-input
                                 @change="
                                     queryMemberByPhone(newForm.memberPhone)
@@ -229,15 +278,18 @@
                             ></el-input>
                         </el-form-item>
                     </el-col>
+                    <!-- 一列，占 12 份宽度，当顾客类型为会员且有销售时间时显示，输入框为只读状态 -->
                     <el-col
                         :span="12"
                         v-if="newForm.type == '1' && newForm.sellTime"
                     >
+                        <!-- 表单项目，标签为“会员账号：” -->
                         <el-form-item
                             style="width: 60%"
                             label="会员账号："
                             prop="memberPhone"
                         >
+                            <!-- 输入框，只读状态，绑定 newForm 的 memberPhone 属性 -->
                             <el-input
                                 readonly
                                 v-model="newForm.memberPhone"
@@ -246,41 +298,55 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 水平线分隔 -->
                 <hr />
+                <!-- 一行 -->
                 <el-row>
+                    <!-- 一列，占 24 份宽度，文本左对齐，底部有 10px 边距 -->
                     <el-col
                         :span="24"
                         style="text-align: left; margin-bottom: 10px"
                     >
+                        <!-- 按钮，点击触发 addGoodsBtn 方法，用于添加商品 -->
                         <el-button type="success" @click="addGoodsBtn">
+                            <!-- 按钮内的图标 -->
                             <i class="iconfont icon-r-add"> </i>
+                            <!-- 按钮文本 -->
                             添加商品</el-button
                         >
                     </el-col>
+                    <!-- 一列，占 24 份宽度 -->
                     <el-col :span="24">
+                        <!-- 表格，显示销售商品详情，绑定 newForm 的 detailSaleRecords 数据 -->
                         <el-table
                             :data="newForm.detailSaleRecords"
                             style="width: 100%; border-top: 1px solid lightgrey"
                             size="medium"
                         >
+                            <!-- 表格列，显示商品编号 -->
                             <el-table-column prop="goodsId" label="商品编号">
                             </el-table-column>
+                            <!-- 表格列，显示商品名 -->
                             <el-table-column prop="goodsName" label="商品名">
                             </el-table-column>
+                            <!-- 表格列，显示商品数量，宽度为 400px -->
                             <el-table-column
                                 prop="goodsNum"
                                 width="400px"
                                 label="数量"
                             >
+                                <!-- 当没有销售时间时显示的自定义内容 -->
                                 <template
                                     v-if="!newForm.sellTime"
                                     v-slot="scope"
                                 >
+                                    <!-- 减号按钮，点击触发 redueGoodsNum 方法 -->
                                     <el-button
                                         @click="redueGoodsNum(scope.row)"
                                         type="success"
                                         >-</el-button
                                     >
+                                    <!-- 输入框，只读状态，显示商品数量 -->
                                     <el-input
                                         readonly
                                         style="width: 100px"
@@ -288,14 +354,18 @@
                                         min="1"
                                         v-model="scope.row.goodsNum"
                                     ></el-input>
+                                    <!-- 加号按钮，点击触发 addGoodsNum 方法 -->
                                     <el-button
                                         @click="addGoodsNum(scope.row)"
                                         type="success"
                                         >+</el-button
                                     >
                                 </template>
+                                <!-- 当有销售时间时显示的自定义内容 -->
                                 <template v-else v-slot="scope">
+                                    <!-- 加号按钮 -->
                                     <el-button type="success">+</el-button>
+                                    <!-- 输入框，只读状态，显示商品数量 -->
                                     <el-input
                                         readonly
                                         style="width: 100px"
@@ -303,15 +373,19 @@
                                         min="1"
                                         v-model="scope.row.goodsNum"
                                     ></el-input>
+                                    <!-- 减号按钮 -->
                                     <el-button type="success">-</el-button>
                                 </template>
                             </el-table-column>
+                            <!-- 表格列，显示商品单价 -->
                             <el-table-column prop="goodsPrice" label="商品单价">
                             </el-table-column>
+                            <!-- 表格列，显示操作，当没有销售时间时显示 -->
                             <el-table-column
                                 v-if="!newForm.sellTime"
                                 label="操作"
                             >
+                                <!-- 自定义内容，包含移除按钮，点击触发 removedetailRecords 方法 -->
                                 <template v-slot="scope">
                                     <el-button
                                         @click="removedetailRecords(scope.row)"
@@ -323,21 +397,28 @@
                         </el-table>
                     </el-col>
                 </el-row>
+                <!-- 换行 -->
                 <br />
+                <!-- 一行 -->
                 <el-row>
+                    <!-- 一列，占 24 份宽度 -->
                     <el-col :span="24">
+                        <!-- 表单项目，标签为“备注：”，当没有销售时间时显示 -->
                         <el-form-item
                             v-if="!newForm.sellTime"
                             style="width: 100%"
                             label="备注："
                         >
+                            <!-- 文本输入框，绑定 newForm 的 info 属性 -->
                             <el-input
                                 type="textarea"
                                 v-model="newForm.info"
                                 placeholder="如：订单1"
                             ></el-input>
                         </el-form-item>
+                        <!-- 表单项目，标签为“备注：”，当有销售时间时显示，输入框为禁用状态 -->
                         <el-form-item v-else style="width: 60%" label="备注：">
+                            <!-- 文本输入框，禁用状态，绑定 newForm 的 info 属性 -->
                             <el-input
                                 disabled
                                 type="textarea"
@@ -347,20 +428,31 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 一行 -->
                 <el-row>
+                    <!-- 一列，占 24 份宽度 -->
                     <el-col :span="24">
+                        <!-- 当有销售商品详情时显示订单信息 -->
                         <div v-if="newForm.detailSaleRecords.length > 0">
-                            订单号：{{ newForm.cn }}&nbsp;&nbsp; 商品总数：{{
+                            <!-- 显示订单号 -->
+                            订单号：{{ newForm.cn }}&nbsp;&nbsp; 
+                            <!-- 显示商品总数 -->
+                            商品总数：{{
                                 newForm.sellTotal ? newForm.sellTotal : 0
-                            }}&nbsp;&nbsp; 总共：{{
+                            }}&nbsp;&nbsp; 
+                            <!-- 显示总共金额 -->
+                            总共：{{
                                 totalMoney ? totalMoney : 0
-                            }}元&nbsp;&nbsp; 消费：{{
+                            }}元&nbsp;&nbsp; 
+                            <!-- 显示消费金额 -->
+                            消费：{{
                                 newForm.sellTotalmoney
                                     ? parseFloat(
                                           newForm.sellTotalmoney
                                       ).toFixed(2)
                                     : 0
                             }}元&nbsp;&nbsp;
+                            <!-- 当有支付方式时显示支付方式 -->
                             <span v-if="newForm.sellway"
                                 >支付方式：{{
                                     newForm.sellway == "0"
@@ -372,6 +464,7 @@
                                         : "银行卡"
                                 }}&nbsp;&nbsp;</span
                             >
+                            <!-- 当顾客类型为会员时显示优惠信息 -->
                             <span v-if="newForm.type == '1'"
                                 >会员享受9折&nbsp;&nbsp;优惠{{
                                     totalMoney
@@ -382,6 +475,7 @@
                                         : 0
                                 }}元&nbsp;&nbsp;</span
                             >
+                            <!-- 当有销售时间时显示消费时间和操作者编号 -->
                             <span v-if="newForm.sellTime"
                                 >消费时间：{{ newForm.sellTime }}&nbsp;&nbsp;
                                 操作者编号：{{ newForm.eid }}</span
@@ -389,33 +483,43 @@
                         </div>
                     </el-col>
                 </el-row>
+                <!-- 水平线分隔 -->
                 <hr />
+                <!-- 一行 -->
                 <el-row>
+                    <!-- 一列，占 24 份宽度 -->
                     <el-col :span="24">
+                        <!-- 表单项目 -->
                         <el-form-item>
+                            <!-- 支付按钮，当没有销售时间时显示，点击触发 submitNewForm 方法 -->
                             <el-button
                                 v-if="!newForm.sellTime"
                                 type="success"
                                 @click="submitNewForm('newForm')"
                                 style="font-size: 22px"
                             >
+                                <!-- 按钮内的图标 -->
                                 <i
                                     style="font-size: 22px"
                                     class="iconfont icon-r-yes"
                                 >
                                 </i>
+                                <!-- 按钮文本 -->
                                 支付
                             </el-button>
+                            <!-- 关闭按钮，点击触发 closeNewForm 方法 -->
                             <el-button
                                 style="font-size: 22px"
                                 type="info"
                                 @click="closeNewForm('newForm')"
                             >
+                                <!-- 按钮内的图标 -->
                                 <i
                                     style="font-size: 22px"
                                     class="iconfont icon-r-no"
                                 >
                                 </i>
+                                <!-- 按钮文本 -->
                                 关闭</el-button
                             >
                         </el-form-item>
@@ -423,15 +527,18 @@
                 </el-row>
             </el-form>
         </el-dialog>
-        <!--添加商品表单-->
+        <!-- 添加商品表单对话框 -->
         <el-dialog title="添加商品" :visible.sync="addGoodsVisable" width="70%">
+            <!-- 表单，绑定 detailSaleRecords 数据，设置验证规则 -->
             <el-form
                 :model="detailSaleRecords"
                 :rules="rules"
                 ref="detailSaleRecords"
                 class="demo-ruleForm"
             >
+                <!-- 表单项目，标签为“商品：” -->
                 <el-form-item label="商品：" prop="goodsId">
+                    <!-- 下拉选择框，选择商品，选择时触发 selectedAddGoods 方法 -->
                     <el-select
                         style="width: 100%"
                         v-model="detailSaleRecords.goodsId"
@@ -440,6 +547,7 @@
                         filterable
                         clearable
                     >
+                        <!-- 循环渲染商品选项 -->
                         <el-option
                             v-for="item in options_saleRecordsAddGoods"
                             :key="item.id"
@@ -449,7 +557,9 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单项目，标签为“数量：” -->
                 <el-form-item label="数量：">
+                    <!-- 数字输入框，输入时验证数量范围，绑定 detailSaleRecords 的 goodsNum 属性 -->
                     <el-input
                         type="number"
                         @change="
@@ -477,24 +587,31 @@
                         }`"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单项目，标签为“单价：” -->
                 <el-form-item label="单价：" prop="goodsId">
+                    <!-- 输入框，禁用状态，绑定 detailSaleRecords 的 goodsPrice 属性 -->
                     <el-input
                         disabled
                         v-model="detailSaleRecords.goodsPrice"
                     ></el-input>
                 </el-form-item>
+                <!-- 表单项目 -->
                 <el-form-item>
+                    <!-- 添加按钮，点击触发 addDetailSaleRecords 方法 -->
                     <el-button
                         type="success"
                         @click="addDetailSaleRecords"
                         style="font-size: 22px"
                     >
+                        <!-- 按钮内的图标 -->
                         <i
                             class="iconfont icon-r-add"
                             style="font-size: 22px"
                         ></i>
+                        <!-- 按钮文本 -->
                         添加</el-button
                     >
+                    <!-- 取消按钮，点击关闭对话框并重置数据 -->
                     <el-button
                         type="info"
                         @click="
@@ -507,41 +624,48 @@
                         "
                         style="font-size: 22px"
                     >
+                        <!-- 按钮内的图标 -->
                         <i
                             class="iconfont icon-r-no"
                             style="font-size: 22px"
                         ></i>
+                        <!-- 按钮文本 -->
                         取消
                     </el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
 
-        <!--积分商品-->
+        <!-- 积分商品兑换对话框 -->
         <el-dialog
             title="积分兑换"
             :visible.sync="pointProductsVisable"
             label-width="200"
             width="40%"
         >
+            <!-- 表单，绑定 pointProductsForm 数据，设置验证规则 -->
             <el-form
                 :model="pointProductsForm"
                 :rules="rules"
                 ref="pointProductsForm"
                 class="demo-ruleForm"
             >
+                <!-- 表单项目，当确认对话框可见时显示商品图片 -->
                 <el-form-item v-if="confirmVisiable">
+                    <!-- 显示商品图片，图片地址为 BaseApi 加上商品封面地址 -->
                     <img
                         width="100px"
                         :src="BaseApi + pointProductsForm.coverUrl"
                         alt="商品图片"
                     />
                 </el-form-item>
+                <!-- 表单项目，标签为“会员账号：”，当确认对话框不可见时显示 -->
                 <el-form-item
                     v-if="!confirmVisiable"
                     label="会员账号："
                     prop="memberId"
                 >
+                    <!-- 下拉选择框，选择会员，选择时触发 queryPointProductByMemberId 方法 -->
                     <el-select
                         @change="queryPointProductByMemberId"
                         v-model="pointProductsForm.memberId"
@@ -549,6 +673,7 @@
                         filterable
                         clearable
                     >
+                        <!-- 循环渲染会员选项 -->
                         <el-option
                             v-for="item in options_members"
                             :key="item.id"
@@ -558,11 +683,13 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单项目，标签为“会员账号：”，当确认对话框可见时显示，选择框为禁用状态 -->
                 <el-form-item
                     v-if="confirmVisiable"
                     label="会员账号："
                     prop="memberId"
                 >
+                    <!-- 下拉选择框，禁用状态，选择会员，选择时触发 queryPointProductByMemberId 方法 -->
                     <el-select
                         disabled
                         @change="queryPointProductByMemberId"
@@ -571,6 +698,7 @@
                         filterable
                         clearable
                     >
+                        <!-- 循环渲染会员选项 -->
                         <el-option
                             v-for="item in options_members"
                             :key="item.id"
@@ -580,11 +708,13 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单项目，标签为“积分商品：”，当确认对话框不可见时显示 -->
                 <el-form-item
                     v-if="!confirmVisiable"
                     label="积分商品："
                     prop="goodsId"
                 >
+                    <!-- 下拉选择框，选择积分商品，选择时触发 queryPointProductByGoodsId 方法 -->
                     <el-select
                         @change="queryPointProductByGoodsId"
                         v-model="pointProductsForm.goodsId"
@@ -592,6 +722,7 @@
                         filterable
                         clearable
                     >
+                        <!-- 循环渲染积分商品选项 -->
                         <el-option
                             v-for="item in options_pointProducts"
                             :key="item.id"
@@ -601,11 +732,13 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单项目，标签为“积分商品：”，当确认对话框可见时显示，选择框为禁用状态 -->
                 <el-form-item
                     v-if="confirmVisiable"
                     label="积分商品："
                     prop="goodsId"
                 >
+                    <!-- 下拉选择框，禁用状态，选择积分商品，选择时触发 queryPointProductByGoodsId 方法 -->
                     <el-select
                         disabled
                         @change="queryPointProductByGoodsId"
@@ -614,6 +747,7 @@
                         filterable
                         clearable
                     >
+                        <!-- 循环渲染积分商品选项 -->
                         <el-option
                             v-for="item in options_pointProducts"
                             :key="item.id"
@@ -623,7 +757,9 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 表单项目，标签为“所需积分：”，当确认对话框可见时显示，输入框为禁用状态 -->
                 <el-form-item v-if="confirmVisiable" label="所需积分：">
+                    <!-- 数字输入框，禁用状态，绑定 pointProductsForm 的 integral 属性 -->
                     <el-input
                         disabled
                         type="number"
@@ -631,45 +767,58 @@
                         placeholder="所需积分"
                     />
                 </el-form-item>
+                <!-- 表单项目 -->
                 <el-form-item>
+                    <!-- 确认兑换按钮，当确认对话框可见时显示，点击触发 submitPointProductsForm 方法 -->
                     <el-button
                         v-if="confirmVisiable"
                         type="primary"
                         @click="submitPointProductsForm('pointProductsForm')"
                         style="font-size: 22px"
                     >
+                        <!-- 按钮内的图标 -->
                         <i class="iconfont icon-r-yes" style="font-size: 22px">
                         </i>
+                        <!-- 按钮文本 -->
                         确认兑换
                     </el-button>
+                    <!-- 关闭按钮，当确认对话框可见时显示，点击触发 closePointProductsForm 方法 -->
                     <el-button
                         v-if="confirmVisiable"
                         type="info"
                         @click="closePointProductsForm"
                         style="font-size: 22px"
                     >
+                        <!-- 按钮内的图标 -->
                         <i class="iconfont icon-r-no" style="font-size: 22px">
                         </i>
+                        <!-- 按钮文本 -->
                         关闭</el-button
                     >
+                    <!-- 兑换按钮，当确认对话框不可见时显示，点击触发 confirmPointProducts 方法 -->
                     <el-button
                         type="success"
                         v-if="!confirmVisiable"
                         @click="confirmPointProducts('pointProductsForm')"
                         style="font-size: 22px"
                     >
+                        <!-- 按钮内的图标 -->
                         <i class="iconfont icon-r-yes" style="font-size: 22px">
                         </i>
+                        <!-- 按钮文本 -->
                         兑换
                     </el-button>
+                    <!-- 关闭按钮，当确认对话框不可见时显示，点击触发 closeConfirmPointProducts 方法 -->
                     <el-button
                         v-if="!confirmVisiable"
                         type="info"
                         @click="closeConfirmPointProducts"
                         style="font-size: 22px"
                     >
+                        <!-- 按钮内的图标 -->
                         <i class="iconfont icon-r-yes" style="font-size: 22px">
                         </i>
+                        <!-- 按钮文本 -->
                         关闭</el-button
                     >
                 </el-form-item>
@@ -678,510 +827,701 @@
     </div>
 </template>
 <script>
-import { popup } from "@/assets/js/common";
-import {
-    getCn,
-    getOptionSaleRecordsGoods,
-    saveSaleRecords,
-} from "@/api/sale_management/saleRecordsApi";
-import { queryGoodsById } from "@/api/goods_management/goods/goodsApi";
-import { queryMemberByPhone } from "@/api/member_management/member/memberApi";
-import {
-    queryMemberByGoodsId,
-    queryOptionsMember,
-    queryOptionsMemberPhone,
-    queryOptionsPointProducts,
-    queryPointProductByGoodsId,
-    queryPointProductBymemberId,
-    saveExchangePointProductRecords,
-} from "@/api/sale_management/exchange_point_products/exchangePointProductsApi";
+    // 导入弹出提示框函数
+    import { popup } from "@/assets/js/common";
+    // 导入销售记录相关的 API 函数
+    import {
+        getCn,
+        getOptionSaleRecordsGoods,
+        saveSaleRecords,
+    } from "@/api/sale_management/saleRecordsApi";
+    // 导入商品管理相关的 API 函数
+    import { queryGoodsById } from "@/api/goods_management/goods/goodsApi";
+    // 导入会员管理相关的 API 函数
+    import { queryMemberByPhone } from "@/api/member_management/member/memberApi";
+    // 导入积分兑换商品相关的 API 函数
+    import {
+        queryMemberByGoodsId,
+        queryOptionsMember,
+        queryOptionsMemberPhone,
+        queryOptionsPointProducts,
+        queryPointProductByGoodsId,
+        queryPointProductBymemberId,
+        saveExchangePointProductRecords,
+    } from "@/api/sale_management/exchange_point_products/exchangePointProductsApi";
 
-export default {
-    data() {
-        return {
-            BaseApi: this.$store.state.BaseApi,
-            confirmVisiable: false,
-            newVisable: false,
-            addGoodsVisable: false,
-            paymentCodeVisable: false,
-            goodsNum_max: "",
-            totalMoney: "",
-            options_saleRecordsAddGoods: [],
-            detailSaleRecords: {},
-            newForm: {
-                cn: "",
-                sellway: "1",
-                info: "",
-                sellTotal: "",
-                sellTotalmoney: "",
-                type: "0",
-                detailSaleRecords: [],
+    export default {
+        // 定义组件的数据
+        data() {
+            return {
+                // 从 store 中获取基础 API 地址
+                BaseApi: this.$store.state.BaseApi,
+                // 确认对话框可见状态
+                confirmVisiable: false,
+                // 销售商品对话框可见状态
+                newVisable: false,
+                // 添加商品对话框可见状态
+                addGoodsVisable: false,
+                // 支付码对话框可见状态
+                paymentCodeVisable: false,
+                // 商品最大库存数量
+                goodsNum_max: "",
+                // 商品总金额
+                totalMoney: "",
+                // 可添加商品的选项列表
+                options_saleRecordsAddGoods: [],
+                // 待添加商品的详细信息
+                detailSaleRecords: {},
+                // 销售表单数据
+                newForm: {
+                    // 销售编号
+                    cn: "",
+                    // 支付方式
+                    sellway: "1",
+                    // 备注信息
+                    info: "",
+                    // 商品总数量
+                    sellTotal: "",
+                    // 销售总金额
+                    sellTotalmoney: "",
+                    // 顾客类型
+                    type: "0",
+                    // 销售商品详情列表
+                    detailSaleRecords: [],
+                },
+                // 积分兑换表单数据
+                pointProductsForm: {
+                    // 会员编号
+                    memberId: "",
+                    // 商品编号
+                    goodsId: "",
+                    // 商品封面地址
+                    coverUrl: "",
+                    // 所需积分
+                    integral: "",
+                },
+                // 会员选项列表
+                options_members: [],
+                // 积分商品选项列表
+                options_pointProducts: [],
+                // 积分兑换对话框可见状态
+                pointProductsVisable: false,
+                // 表单验证规则
+                rules: {
+                    // 支付方式验证规则
+                    sellway: [
+                        {
+                            // 必须选择
+                            required: true,
+                            // 错误提示信息
+                            message: "支付方式未选择",
+                            // 触发验证的事件
+                            trigger: "blur",
+                        },
+                    ],
+                    // 顾客类型验证规则
+                    type: [
+                        {
+                            // 必须选择
+                            required: true,
+                            // 错误提示信息
+                            message: "顾客类型未选择",
+                            // 触发验证的事件
+                            trigger: "blur",
+                        },
+                    ],
+                    // 会员电话号码验证规则
+                    memberPhone: [
+                        {
+                            // 必须填写
+                                                        required: true,
+                            // 错误提示信息
+                            message: "会员电话号码未填写",
+                            // 触发验证的事件
+                            trigger: "blur",
+                        },
+                    ],
+                    // 商品编号验证规则
+                    goodsId: [
+                        {
+                            // 必须选择
+                            required: true,
+                            // 错误提示信息
+                            message: "商品不能为空",
+                            // 触发验证的事件
+                            trigger: "blur",
+                        },
+                    ],
+                    // 会员编号验证规则
+                    memberId: [
+                        {
+                            // 必须选择
+                            required: true,
+                            // 错误提示信息
+                            message: "会员编号不能为空",
+                            // 触发验证的事件
+                            trigger: "blur",
+                        },
+                    ],
+                },
+            };
+        },
+        // 定义组件的方法
+        methods: {
+            // 确认积分兑换，验证表单后查询商品所需积分
+            confirmPointProducts(formName) {
+                // 验证表单
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 调用 API 查询商品所需积分
+                        queryPointProductByGoodsId({
+                            goodsId: this.pointProductsForm.goodsId,
+                        }).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                if (!res.data) {
+                                    // 若没有数据，重置表单
+                                    this.pointProductsForm = {
+                                        memberId: this.pointProductsForm.memberId,
+                                        goodsId: this.pointProductsForm.goodsId,
+                                        coverUrl: "",
+                                        integral: "",
+                                    };
+                                    return;
+                                }
+                                // 更新所需积分和商品封面地址
+                                this.pointProductsForm.integral = res.data.integral;
+                                this.pointProductsForm.coverUrl = res.data.coverUrl;
+                            } else {
+                                // 显示错误提示
+                                popup(res.msg, "error");
+                            }
+                        });
+                        // 显示确认对话框
+                        this.confirmVisiable = true;
+                    }
+                });
             },
-            pointProductsForm: {
-                memberId: "",
-                goodsId: "",
-                coverUrl: "",
-                integral: "",
+            // 关闭积分兑换确认对话框，重置表单和状态
+            closeConfirmPointProducts() {
+                this.confirmVisiable = false;
+                this.pointProductsVisable = false;
+                this.pointProductsForm = {
+                    memberId: "",
+                    goodsId: "",
+                    coverUrl: "",
+                    integral: "",
+                };
             },
-            options_members: [],
-            options_pointProducts: [],
-            pointProductsVisable: false,
-            rules: {
-                sellway: [
-                    {
-                        required: true,
-                        message: "支付方式未选择",
-                        trigger: "blur",
-                    },
-                ],
-                type: [
-                    {
-                        required: true,
-                        message: "顾客类型未选择",
-                        trigger: "blur",
-                    },
-                ],
-                memberPhone: [
-                    {
-                        required: true,
-                        message: "会员电话号码未填写",
-                        trigger: "blur",
-                    },
-                ],
-                goodsId: [
-                    {
-                        required: true,
-                        message: "商品不能为空",
-                        trigger: "blur",
-                    },
-                ],
-                memberId: [
-                    {
-                        required: true,
-                        message: "会员编号不能为空",
-                        trigger: "blur",
-                    },
-                ],
+            // 根据会员编号查询可兑换的积分商品
+            queryPointProductByMemberId() {
+                // 调用 API 查询可兑换的积分商品
+                queryPointProductBymemberId({
+                    memberId: this.pointProductsForm.memberId,
+                }).then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新可兑换的积分商品列表
+                        this.options_pointProducts = res.data;
+                        if (!this.options_pointProducts.length) {
+                            // 若没有可兑换的商品，显示提示信息
+                            popup("该会员积分数无法兑换任何商品", "warning");
+                            this.pointProductsForm.goodsId = "";
+                            return;
+                        }
+                    } else {
+                        // 显示错误提示
+                        popup(res.msg, "error");
+                    }
+                });
             },
-        };
-    },
-    methods: {
-        confirmPointProducts(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    queryPointProductByGoodsId({
-                        goodsId: this.pointProductsForm.goodsId,
-                    }).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            if (!res.data) {
+            // 根据商品编号查询符合兑换条件的会员
+            queryPointProductByGoodsId() {
+                // 调用 API 查询符合兑换条件的会员
+                queryMemberByGoodsId({
+                    goodsId: this.pointProductsForm.goodsId,
+                }).then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新符合条件的会员列表
+                        this.options_members = res.data;
+                        if (!this.options_members.length) {
+                            // 若没有符合条件的会员，显示提示信息
+                            popup("该商品没有会员符合条件进行兑换", "warning");
+                            this.pointProductsForm.memberId = "";
+                            return;
+                        }
+                    } else {
+                        // 显示错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 查询所有可兑换的积分商品
+            queryOptionsPointProducts() {
+                // 调用 API 查询所有可兑换的积分商品
+                queryOptionsPointProducts().then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新可兑换的积分商品列表
+                        this.options_pointProducts = res.data;
+                    } else {
+                        // 显示错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 查询所有会员
+            queryOptionsMember() {
+                // 调用 API 查询所有会员
+                queryOptionsMember().then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新会员列表
+                        this.options_members = res.data;
+                    } else {
+                        // 显示错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 提交积分兑换表单
+            submitPointProductsForm(formName) {
+                // 验证表单
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 调用 API 保存积分兑换记录
+                        saveExchangePointProductRecords(
+                            this.pointProductsForm
+                        ).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 显示成功提示
+                                popup("兑换成功");
+                                // 重置表单
+                                this.pointProductsForm = {};
                                 this.pointProductsForm = {
-                                    memberId: this.pointProductsForm.memberId,
-                                    goodsId: this.pointProductsForm.goodsId,
+                                    memberId: "",
+                                    goodsId: "",
                                     coverUrl: "",
                                     integral: "",
                                 };
-                                return;
+                                // 关闭对话框
+                                this.pointProductsVisable = false;
+                                // 隐藏确认对话框
+                                this.confirmVisiable = !this.confirmVisiable;
+                            } else {
+                                // 显示错误提示
+                                popup(res.msg, "error");
                             }
-                            this.pointProductsForm.integral = res.data.integral;
-                            this.pointProductsForm.coverUrl = res.data.coverUrl;
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
-                    this.confirmVisiable = true;
-                }
-            });
-        },
-        closeConfirmPointProducts() {
-            this.confirmVisiable = false;
-            this.pointProductsVisable = false;
-            this.pointProductsForm = {
-                memberId: "",
-                goodsId: "",
-                coverUrl: "",
-                integral: "",
-            };
-        },
-        queryPointProductByMemberId() {
-            queryPointProductBymemberId({
-                memberId: this.pointProductsForm.memberId,
-            }).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.options_pointProducts = res.data;
-                    if (!this.options_pointProducts.length) {
-                        popup("该会员积分数无法兑换任何商品", "warning");
-                        this.pointProductsForm.goodsId = "";
-                        return;
-                    }
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        queryPointProductByGoodsId() {
-            queryMemberByGoodsId({
-                goodsId: this.pointProductsForm.goodsId,
-            }).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.options_members = res.data;
-                    if (!this.options_members.length) {
-                        popup("该商品没有会员符合条件进行兑换", "warning");
-                        this.pointProductsForm.memberId = "";
-                        return;
-                    }
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        queryOptionsPointProducts() {
-            queryOptionsPointProducts().then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.options_pointProducts = res.data;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        queryOptionsMember() {
-            queryOptionsMember().then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.options_members = res.data;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        submitPointProductsForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    saveExchangePointProductRecords(
-                        this.pointProductsForm
-                    ).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("兑换成功");
-                            this.pointProductsForm = {};
-
-                            this.pointProductsForm = {
-                                memberId: "",
-                                goodsId: "",
-                                coverUrl: "",
-                                integral: "",
-                            };
-                            this.pointProductsVisable = false;
-
-                            this.confirmVisiable = !this.confirmVisiable;
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
-                }
-            });
-        },
-        closePointProductsForm() {
-            this.confirmVisiable = false;
-        },
-        moreFuns() {
-            popup("正在研发...", "warning");
-        },
-        queryMemberByPhone(phone) {
-            queryMemberByPhone({ phone: phone }).then((res) => {
-                res = res.data;
-                if (res.code != 200) {
-                    popup(res.msg, "error");
-                    this.newForm.memberPhone = "";
-                }
-            });
-        },
-        saleRecordsBtn() {
-            this.$router.push("/sale_management/sale_records/list");
-        },
-        exchangePointProductsRecordsBtn() {
-            this.$router.push(
-                "/sale_management/exchange_point_products_records/list"
-            );
-        },
-        submitNewForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    if (this.newForm.detailSaleRecords.length <= 0) {
-                        popup("还没选择出售的商品", "error");
-                        return;
+                        });
                     }
-                    saveSaleRecords(this.newForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            this.newForm = { ...res.data };
-                            console.log(this.newForm);
-                            popup("支付成功");
-                            this.paymentCodeVisable = false;
-                        } else {
-                            popup("系统正忙,支付失败", "error");
-                        }
-                    });
-                }
-            });
-        },
-        closeNewForm(formName) {
-            this.$refs[formName].resetFields();
-            (this.newForm = {
-                cn: "",
-                sellway: "1",
-                info: "",
-                sellTotal: "",
-                sellTotalmoney: "",
-                type: "0",
-                detailSaleRecords: [],
-            }),
-                (this.newVisable = false);
-        },
-        removedetailRecords(row) {
-            this.$confirm("确定删除这条记录？", "警示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    this.newForm.sellTotal =
-                        parseInt(this.newForm.sellTotal) - row.goodsNum;
-                    this.totalMoney = (
-                        parseFloat(this.totalMoney) -
-                        parseFloat(
-                            parseInt(row.goodsNum) * parseFloat(row.goodsPrice)
-                        )
-                    ).toFixed(2);
-                    if (this.newForm.type == "1") {
-                        this.newForm.sellTotalmoney =
-                            parseFloat(this.totalMoney) * (0.9).toFixed(2);
-                    } else {
-                        this.newForm.sellTotalmoney = parseFloat(
-                            this.totalMoney
-                        ).toFixed(2);
+                });
+            },
+            // 关闭积分兑换对话框
+            closePointProductsForm() {
+                this.confirmVisiable = false;
+            },
+            // 提示功能正在研发
+            moreFuns() {
+                popup("正在研发...", "warning");
+            },
+            // 根据会员电话号码查询会员信息
+            queryMemberByPhone(phone) {
+                // 调用 API 查询会员信息
+                queryMemberByPhone({ phone: phone }).then((res) => {
+                    res = res.data;
+                    if (res.code != 200) {
+                        // 显示错误提示，重置会员电话号码
+                        popup(res.msg, "error");
+                        this.newForm.memberPhone = "";
                     }
-                    for (var i in this.newForm.detailSaleRecords) {
-                        if (
-                            this.newForm.detailSaleRecords[i].goodsId ==
-                            row.goodsId
-                        ) {
-                            this.newForm.detailSaleRecords.splice(i, 1);
+                });
+            },
+            // 跳转到销售记录列表页面
+            saleRecordsBtn() {
+                this.$router.push("/sale_management/sale_records/list");
+            },
+            // 跳转到积分兑换记录列表页面
+            exchangePointProductsRecordsBtn() {
+                this.$router.push(
+                    "/sale_management/exchange_point_products_records/list"
+                );
+            },
+            // 提交销售表单
+            submitNewForm(formName) {
+                // 验证表单
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        if (this.newForm.detailSaleRecords.length <= 0) {
+                            // 若没有选择商品，显示错误提示
+                            popup("还没选择出售的商品", "error");
                             return;
                         }
+                        // 调用 API 保存销售记录
+                        saveSaleRecords(this.newForm).then((res) => {
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 更新表单数据
+                                this.newForm = { ...res.data };
+                                console.log(this.newForm);
+                                // 显示成功提示
+                                popup("支付成功");
+                                // 关闭支付码对话框
+                                this.paymentCodeVisable = false;
+                            } else {
+                                // 显示错误提示
+                                popup("系统正忙,支付失败", "error");
+                            }
+                        });
                     }
-                })
-                .catch(() => {
-                    this.$message({
-                        type: "info",
-                        message: "已取消操作",
-                    });
                 });
-        },
-        addGoodsNum(row) {
-            queryGoodsById({ id: row.goodsId }).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    if (row.goodsNum >= res.data.residueNum) {
-                        popup(
-                            "货架商品数量没这么多，请联系仓库管理者",
-                            "warning"
-                        );
-                        return;
-                    } else {
-                        row.goodsNum = parseInt(row.goodsNum) + 1;
+            },
+            // 关闭销售表单对话框，重置表单
+            closeNewForm(formName) {
+                this.$refs[formName].resetFields();
+                this.newForm = {
+                    cn: "",
+                    sellway: "1",
+                    info: "",
+                    sellTotal: "",
+                    sellTotalmoney: "",
+                    type: "0",
+                    detailSaleRecords: [],
+                };
+                this.newVisable = false;
+            },
+            // 移除销售商品记录
+            removedetailRecords(row) {
+                // 弹出确认对话框
+                this.$confirm("确定删除这条记录？", "警示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                })
+                    .then(() => {
+                        // 更新商品总数量
                         this.newForm.sellTotal =
-                            parseInt(this.newForm.sellTotal) + 1;
-
+                            parseInt(this.newForm.sellTotal) - row.goodsNum;
+                        // 更新商品总金额
                         this.totalMoney = (
-                            parseFloat(this.totalMoney) +
-                            parseFloat(row.goodsPrice)
+                            parseFloat(this.totalMoney) -
+                            parseFloat(
+                                parseInt(row.goodsNum) * parseFloat(row.goodsPrice)
+                            )
                         ).toFixed(2);
                         if (this.newForm.type == "1") {
+                            // 若为会员，更新会员价
                             this.newForm.sellTotalmoney =
                                 parseFloat(this.totalMoney) * (0.9).toFixed(2);
                         } else {
+                            // 若为非会员，更新非会员价
                             this.newForm.sellTotalmoney = parseFloat(
                                 this.totalMoney
                             ).toFixed(2);
                         }
+                        // 移除商品记录
+                        for (var i in this.newForm.detailSaleRecords) {
+                            if (
+                                this.newForm.detailSaleRecords[i].goodsId ==
+                                row.goodsId
+                            ) {
+                                this.newForm.detailSaleRecords.splice(i, 1);
+                                return;
+                            }
+                        }
+                    })
+                    .catch(() => {
+                        // 显示取消操作提示
+                        this.$message({
+                            type: "info",
+                            message: "已取消操作",
+                        });
+                    });
+            },
+            // 增加商品数量
+            addGoodsNum(row) {
+                // 调用 API 查询商品库存信息
+                queryGoodsById({ id: row.goodsId }).then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        if (row.goodsNum >= res.data.residueNum) {
+                            // 若商品数量超过库存，显示提示信息
+                            popup(
+                                "货架商品数量没这么多，请联系仓库管理者",
+                                "warning"
+                            );
+                            return;
+                        } else {
+                            // 增加商品数量
+                            row.goodsNum = parseInt(row.goodsNum) + 1;
+                            // 更新商品总数量
+                            this.newForm.sellTotal =
+                                parseInt(this.newForm.sellTotal) + 1;
+                            // 更新商品总金额
+                            this.totalMoney = (
+                                parseFloat(this.totalMoney) +
+                                parseFloat(row.goodsPrice)
+                            ).toFixed(2);
+                            if (this.newForm.type == "1") {
+                                // 若为会员，更新会员价
+                                this.newForm.sellTotalmoney =
+                                    parseFloat(this.totalMoney) * (0.9).toFixed(2);
+                            } else {
+                                // 若为非会员，更新非会员价
+                                this.newForm.sellTotalmoney = parseFloat(
+                                    this.totalMoney
+                                ).toFixed(2);
+                            }
+                        }
+                    } else {
+                        // 显示错误提示
+                        popup(res.msg, "error");
+                        return;
                     }
-                } else {
-                    popup(res.msg, "error");
+                });
+            },
+            // 减少商品数量
+            redueGoodsNum(row) {
+                if (parseInt(row.goodsNum) == 1) {
+                    // 若商品数量为 1，显示提示信息
+                    popup("已是最小数量", "error");
                     return;
                 }
-            });
-        },
-        redueGoodsNum(row) {
-            if (parseInt(row.goodsNum) == 1) {
-                popup("已是最小数量", "error");
-                return;
-            }
-            row.goodsNum = parseInt(row.goodsNum) - 1;
-            this.newForm.sellTotal = parseInt(this.newForm.sellTotal) - 1;
-            this.totalMoney = (
-                parseFloat(this.totalMoney) - parseFloat(row.goodsPrice)
-            ).toFixed(2);
-            if (this.newForm.type == "1") {
-                this.newForm.sellTotalmoney =
-                    parseFloat(this.totalMoney) * (0.9).toFixed(2);
-            } else {
-                this.newForm.sellTotalmoney = parseFloat(
-                    this.totalMoney
+                // 减少商品数量
+                row.goodsNum = parseInt(row.goodsNum) - 1;
+                // 更新商品总数量
+                this.newForm.sellTotal = parseInt(this.newForm.sellTotal) - 1;
+                // 更新商品总金额
+                this.totalMoney = (
+                    parseFloat(this.totalMoney) - parseFloat(row.goodsPrice)
                 ).toFixed(2);
-            }
-        },
-        initOptionSaleRecordsAddGoodsAll() {
-            getOptionSaleRecordsGoods().then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.options_saleRecordsAddGoods = res.data;
-                    if (this.options_saleRecordsAddGoods.length > 0) {
-                        this.addGoodsVisable = true;
+                if (this.newForm.type == "1") {
+                    // 若为会员，更新会员价
+                    this.newForm.sellTotalmoney =
+                        parseFloat(this.totalMoney) * (0.9).toFixed(2);
+                } else {
+                    // 若为非会员，更新非会员价
+                    this.newForm.sellTotalmoney = parseFloat(
+                        this.totalMoney
+                    ).toFixed(2);
+                }
+            },
+            // 初始化可添加商品的选项列表
+            initOptionSaleRecordsAddGoodsAll() {
+                // 调用 API 查询可添加商品的选项列表
+                getOptionSaleRecordsGoods().then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新可添加商品的选项列表
+                        this.options_saleRecordsAddGoods = res.data;
+                        if (this.options_saleRecordsAddGoods.length > 0) {
+                            // 若有可添加商品，显示添加商品对话框
+                            this.addGoodsVisable = true;
+                        } else {
+                            // 若没有可添加商品，显示提示信息
+                            popup("目前没有可售卖的商品", "warning");
+                        }
                     } else {
-                        popup("目前没有可售卖的商品", "warning");
+                        // 显示错误提示
+                        popup(res.msg, "error");
                     }
-                } else {
-                    popup(res.msg, "error");
+                });
+            },
+            // 点击添加商品按钮，重置数据并初始化可添加商品的选项列表
+            addGoodsBtn() {
+                this.detailSaleRecords = {};
+                this.goodsNum_max = "";
+                this.initOptionSaleRecordsAddGoodsAll();
+            },
+            // 添加商品到销售表单
+            addDetailSaleRecords() {
+                if (!this.detailSaleRecords.goodsNum) {
+                    // 若商品数量为空，显示提示信息
+                    popup("数量不能为空", "warning");
+                    return;
                 }
-            });
-        },
-        addGoodsBtn() {
-            this.detailSaleRecords = {};
-            this.goodsNum_max = "";
-            this.initOptionSaleRecordsAddGoodsAll();
-        },
-        addDetailSaleRecords() {
-            if (!this.detailSaleRecords.goodsNum) {
-                popup("数量不能为空", "warning");
-                return;
-            }
-            this.newForm.sellTotal =
-                Number.parseInt(
-                    this.newForm.sellTotal ? this.newForm.sellTotal : 0
-                ) + Number.parseInt(this.detailSaleRecords.goodsNum);
-            this.totalMoney =
-                (this.totalMoney ? parseFloat(this.totalMoney) : 0) +
-                parseInt(this.detailSaleRecords.goodsNum) *
+                // 更新商品总数量
+                this.newForm.sellTotal =
+                    Number.parseInt(
+                        this.newForm.sellTotal ? this.newForm.sellTotal : 0
+                    ) + Number.parseInt(this.detailSaleRecords.goodsNum);
+                // 更新商品总金额
+                this.totalMoney =
+                    (this.totalMoney ? parseFloat(this.totalMoney) : 0) +
+                    parseInt(this.detailSaleRecords.goodsNum) *
                     parseFloat(this.detailSaleRecords.goodsPrice).toFixed(2);
-            if (this.totalMoney) {
-                if (this.newForm.type == "1") {
-                    this.newForm.sellTotalmoney = this.totalMoney * 0.9;
-                } else {
-                    this.newForm.sellTotalmoney = this.totalMoney;
-                }
-            }
-            if (this.newForm.detailSaleRecords.length == 0) {
-                this.newForm.detailSaleRecords.unshift(this.detailSaleRecords);
-            } else {
-                for (var item of this.newForm.detailSaleRecords) {
-                    if (item.goodsId == this.detailSaleRecords.goodsId) {
-                        item.goodsNum =
-                            Number.parseInt(item.goodsNum) +
-                            Number.parseInt(this.detailSaleRecords.goodsNum);
-                        this.addGoodsVisable = false;
-                        return;
+                if (this.totalMoney) {
+                    if (this.newForm.type == "1") {
+                        // 若为会员，更新会员价
+                        this.newForm.sellTotalmoney = this.totalMoney * 0.9;
+                    } else {
+                        // 若为非会员，更新非会员价
+                        this.newForm.sellTotalmoney = this.totalMoney;
                     }
                 }
-                this.newForm.detailSaleRecords.unshift(this.detailSaleRecords);
-            }
-            this.addGoodsVisable = false;
-        },
-        saleBtn() {
-            getCn().then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.newForm.cn = res.data;
-                    this.newVisable = true;
+                if (this.newForm.detailSaleRecords.length == 0) {
+                    // 若销售商品详情列表为空，添加商品记录
+                    this.newForm.detailSaleRecords.unshift(this.detailSaleRecords);
                 } else {
-                    popup(res.msg, "error");
+                    for (var item of this.newForm.detailSaleRecords) {
+                        if (item.goodsId == this.detailSaleRecords.goodsId) {
+                            // 若商品已存在，更新商品数量
+                            item.goodsNum =
+                                Number.parseInt(item.goodsNum) +
+                                Number.parseInt(this.detailSaleRecords.goodsNum);
+                            this.addGoodsVisable = false;
+                            return;
+                        }
+                    }
+                    // 若商品不存在，添加商品记录
+                    this.newForm.detailSaleRecords.unshift(this.detailSaleRecords);
                 }
-            });
-        },
-        selectedAddGoods() {
-            queryGoodsById({ id: this.detailSaleRecords.goodsId }).then(
-                (res) => {
+                // 关闭添加商品对话框
+                this.addGoodsVisable = false;
+            },
+            // 点击购物结账按钮，获取销售编号并显示销售商品对话框
+            saleBtn() {
+                // 调用 API 获取销售编号
+                getCn().then((res) => {
                     res = res.data;
                     if (res.code == 200) {
-                        this.detailSaleRecords.goodsPrice =
-                            res.data.purchashPrice;
-                        this.detailSaleRecords.goodsName = res.data.name;
-                        this.goodsNum_max = res.data.residueNum;
+                        // 更新销售编号
+                        this.newForm.cn = res.data;
+                        // 显示销售商品对话框
+                        this.newVisable = true;
+                    } else {
+                        // 显示错误提示
+                        popup(res.msg, "error");
                     }
+                });
+            },
+            // 选择商品时，查询商品信息
+            selectedAddGoods() {
+                // 调用 API 查询商品信息
+                queryGoodsById({ id: this.detailSaleRecords.goodsId }).then(
+                    (res) => {
+                        res = res.data;
+                        if (res.code == 200) {
+                            // 更新商品单价和商品名
+                            this.detailSaleRecords.goodsPrice =
+                                res.data.purchashPrice;
+                            this.detailSaleRecords.goodsName = res.data.name;
+                            // 更新商品最大库存数量
+                            this.goodsNum_max = res.data.residueNum;
+                        }
+                    }
+                );
+            },
+            // 显示支付码对话框
+            paymentCode(sellway) {
+                if (this.newForm.detailSaleRecords.length <= 0) {
+                    // 若没有选择商品，显示错误提示
+                    popup("还没选择出售的商品", "error");
+                    return;
                 }
-            );
-        },
-        paymentCode(sellway) {
-            if (this.newForm.detailSaleRecords.length <= 0) {
-                popup("还没选择出售的商品", "error");
-                return;
-            }
-            if (sellway != "2") {
-                this.paymentCodeVisable = true;
-            }
-        },
-        exchangePointProductBtn() {
-            this.queryOptionsMember();
-            this.queryOptionsPointProducts();
-            this.pointProductsVisable = true;
+                if (sellway != "2") {
+                    // 若支付方式不是现金，显示支付码对话框
+                    this.paymentCodeVisable = true;
+                }
+            },
+            // 点击积分兑换按钮，查询会员和积分商品列表并显示积分兑换对话框
+            exchangePointProductBtn() {
+                // 查询会员列表
+                this.queryOptionsMember();
+                // 查询积分商品列表
+                this.queryOptionsPointProducts();
+                // 显示积分兑换对话框
+                this.pointProductsVisable = true;
+            },
         },
-    },
-    mounted() {},
-};
+        // 组件挂载完成后执行的钩子函数
+        mounted() {},
+    };
 </script>
-
-
 <style>
-#sale_cmd {
-    top: 0;
-    left: 0;
-    width: 100%;
-    overflow-y: auto;
-    height: 90vh;
-    background: url("../../../assets/33.png") center top / cover no-repeat;
-    margin: 0 auto;
-}
+    /* 销售主页根容器样式 */
+    #sale_cmd {
+        /* 相对于浏览器窗口定位 */
+        top: 0;
+        left: 0;
+        /* 宽度占满父容器 */
+        width: 100%;
+        /* 垂直方向溢出时显示滚动条 */
+        overflow-y: auto;
+        /* 高度为浏览器窗口高度的 90% */
+        height: 90vh;
+        /* 设置背景图片，居中显示，覆盖整个容器 */
+        background: url("../../../assets/33.png") center top / cover no-repeat;
+        /* 水平居中 */
+        margin: 0 auto;
+    }
 
-#sale_cmd .head {
-    height: 100px;
-    font-size: 42px;
-    font-weight: bolder;
-    margin-top: 50px;
-    color: black;
-}
+    /* 销售主页头部样式 */
+    #sale_cmd .head {
+        /* 高度为 100px */
+        height: 100px;
+        /* 字体大小为 42px */
+        font-size: 42px;
+        /* 字体加粗 */
+        font-weight: bolder;
+        /* 顶部外边距为 50px */
+        margin-top: 50px;
+        /* 字体颜色为黑色 */
+        color: black;
+    }
 
-#sale_cmd .cmd {
-    width: 80%;
-    margin: 0 auto;
-}
+    /* 操作按钮区域样式 */
+    #sale_cmd .cmd {
+        /* 宽度为父容器宽度的 80% */
+        width: 80%;
+        /* 水平居中 */
+        margin: 0 auto;
+    }
 
-#sale_cmd .cmd button {
-    width: 85%;
-    height: 100px;
-    margin: 2%;
-    border-radius: 3px;
-    font-size: 32px;
-    cursor: pointer;
-    font-weight: 600;
-}
+    /* 操作按钮样式 */
+    #sale_cmd .cmd button {
+        /* 宽度为父容器宽度的 85% */
+        width: 85%;
+        /* 高度为 100px */
+        height: 100px;
+        /* 外边距为 2% */
+        margin: 2%;
+        /* 边框圆角为 3px */
+        border-radius: 3px;
+        /* 字体大小为 32px */
+        font-size: 32px;
+        /* 鼠标指针变为手型 */
+        cursor: pointer;
+        /* 字体加粗 */
+        font-weight: 600;
+    }
 
-#sale_cmd .cmd button:hover {
-    background-color: #6495ed;
-}
+    /* 操作按钮悬停样式 */
+    #sale_cmd .cmd button:hover {
+        /* 背景颜色变为淡蓝色 */
+        background-color: #6495ed;
+    }
 
-#sale_cmd .paymentCode {
-    height: 182px;
-    width: 182px;
-    margin: 0 auto;
-    background-color: #efefef;
-}
+    /* 支付码区域样式 */
+    #sale_cmd .paymentCode {
+        /* 高度为 182px */
+        height: 182px;
+        /* 宽度为 182px */
+        width: 182px;
+        /* 水平居中 */
+        margin: 0 auto;
+        /* 背景颜色为浅灰色 */
+        background-color: #efefef;
+    }
 
-#sale_cmd .paymentCode img {
-    height: 182px;
-    width: 182px;
-    text-align: center;
-}
+    /* 支付码图片样式 */
+    #sale_cmd .paymentCode img {
+        /* 高度为 182px */
+        height: 182px;
+        /* 宽度为 182px */
+        width: 182px;
+        /* 文本居中 */
+        text-align: center;
+    }
 </style>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/sale_management/sale_records/List.vue b/superMarket-frontend/src/views/sale_management/sale_records/List.vue
index 39dd9a3..dd1e738 100644
--- a/superMarket-frontend/src/views/sale_management/sale_records/List.vue
+++ b/superMarket-frontend/src/views/sale_management/sale_records/List.vue
@@ -1,25 +1,37 @@
 <template>
+    <!-- 定义一个 id 为 sale_records 的 div 容器，作为整个销售记录页面的根容器 -->
     <div id="sale_records">
+        <!-- 面包屑导航组件，用于展示页面层级关系，分隔符为 / -->
         <el-breadcrumb separator="/">
+            <!-- 面包屑导航的第一个层级，显示“首页” -->
             <el-breadcrumb-item
                 >首页</el-breadcrumb-item
             >
+            <!-- 面包屑导航的第二个层级，显示“销售管理” -->
             <el-breadcrumb-item
                 >销售管理</el-breadcrumb-item
             >
+            <!-- 面包屑导航的第三个层级，显示“销售记录” -->
             <el-breadcrumb-item>销售记录</el-breadcrumb-item>
         </el-breadcrumb>
+        <!-- 换行 -->
         <br />
+        <!-- 创建一个行布局 -->
         <el-row>
+            <!-- 列布局，占 4 份宽度 -->
             <el-col :span="4">
+                <!-- 输入框，用于输入销售编号，绑定到 searchForm 的 cn 属性 -->
                 <el-input
                     style="height: 21px; width: 130px"
                     placeholder="销售编号"
                     v-model="searchForm.cn"
                 />
             </el-col>
+            <!-- 列布局，占 10 份宽度 -->
             <el-col :span="10">
+                <!-- 显示“销售时间：”文本 -->
                 <span>销售时间：</span>
+                <!-- 日期选择器，用于选择销售起始时间，绑定到 searchForm 的 startSellTime 属性 -->
                 <el-date-picker
                     style="width: 140px"
                     v-model="searchForm.startSellTime"
@@ -28,7 +40,9 @@
                     placeholder="起始时间"
                 >
                 </el-date-picker>
+                <!-- 显示分隔符 - -->
                 -
+                <!-- 日期选择器，用于选择销售结束时间，绑定到 searchForm 的 endSellTime 属性 -->
                 <el-date-picker
                     v-model="searchForm.endSellTime"
                     style="width: 140px"
@@ -38,7 +52,9 @@
                 >
                 </el-date-picker>
             </el-col>
+            <!-- 列布局，占 4 份宽度 -->
             <el-col :span="4">
+                <!-- 下拉选择框，用于选择顾客类型，绑定到 searchForm 的 type 属性 -->
                 <el-select
                     style="width: 120px"
                     v-model="searchForm.type"
@@ -46,11 +62,15 @@
                     placeholder="顾客类型"
                     clearable
                 >
+                    <!-- 下拉选项，标签为“非会员顾客”，值为 0 -->
                     <el-option label="非会员顾客" value="0"></el-option>
+                    <!-- 下拉选项，标签为“会员”，值为 1 -->
                     <el-option label="会员" value="1"></el-option>
                 </el-select>
             </el-col>
+            <!-- 列布局，占 4 份宽度 -->
             <el-col :span="4">
+                <!-- 下拉选择框，用于选择支付方式，绑定到 searchForm 的 sellway 属性 -->
                 <el-select
                     style="width: 120px"
                     v-model="searchForm.sellway"
@@ -58,136 +78,192 @@
                     placeholder="支付方式"
                     clearable
                 >
+                    <!-- 下拉选项，标签为“支付宝”，值为 0 -->
                     <el-option label="支付宝" value="0"></el-option>
+                    <!-- 下拉选项，标签为“微信”，值为 1 -->
                     <el-option label="微信" value="1"></el-option>
+                    <!-- 下拉选项，标签为“现金”，值为 2 -->
                     <el-option label="现金" value="2"></el-option>
+                    <!-- 下拉选项，标签为“银行卡”，值为 3 -->
                     <el-option label="银行卡" value="3"></el-option>
                 </el-select>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br>
+        <!-- 创建一个行布局 -->
         <el-row>
+            <!-- 列布局，占 24 份宽度，文本左对齐 -->
             <el-col :span="24" style="text-align: left;">
-                
+                <!-- 按钮，点击触发 submitSearchForm 方法，用于搜索销售记录 -->
                 <el-button type="success" @click="submitSearchForm" style="font-size: 18px;"
                     >
+                    <!-- 按钮内的图标 -->
                     <i class="iconfont icon-r-find" style="font-size: 18px;"> </i>
+                    <!-- 按钮文本 -->
                     搜索</el-button
                 >
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 定义一个类名为 table 的 div 容器，用于包裹表格和分页组件 -->
         <div class="table">
+            <!-- 表格组件，展示销售记录数据，数据绑定到 tableData -->
             <el-table :data="tableData" style="width: 100%" size="medium">
+                <!-- 表格列，显示销售编号，宽度为 200px -->
                 <el-table-column prop="cn" width="200" label="编号">
                 </el-table-column>
+                <!-- 表格列，显示销售数量 -->
                 <el-table-column prop="sellTotal" label="销售数量">
                 </el-table-column>
+                <!-- 表格列，显示销售总额 -->
                 <el-table-column prop="sellTotalmoney" label="销售总额">
+                    <!-- 自定义表格单元格内容，将销售总额保留两位小数显示 -->
                     <template v-slot="scope">
                         {{ parseFloat(scope.row.sellTotalmoney).toFixed(2) }}
                     </template>
                 </el-table-column>
+                <!-- 表格列，显示销售时间，当内容过长时显示 tooltip -->
                 <el-table-column
                     prop="sellTime"
                     :show-overflow-tooltip="true"
                     label="销售时间"
                 >
                 </el-table-column>
+                <!-- 表格列，显示顾客类型，宽度为 120px -->
                 <el-table-column prop="type" label="顾客类型" width="120">
+                    <!-- 自定义表格单元格内容，根据顾客类型显示不同标签 -->
                     <template v-slot="scope">
+                        <!-- 若顾客类型为会员，显示橙色标签 -->
                         <el-tag
                             effect="dark"
                             type="warning"
                             style="font-size: 14px;"
                             v-if="scope.row.type == '1'"
                             >
+                            <!-- 标签内的图标 -->
                             <i class="iconfont icon-r-mark1"></i>
+                            <!-- 标签文本 -->
                             会员</el-tag
                         >
+                        <!-- 若顾客类型为非会员，显示蓝色标签 -->
                         <el-tag effect="dark" type="info" v-else
                             >非会员</el-tag
                         >
                     </template>
                 </el-table-column>
+                <!-- 表格列，显示销售员 -->
                 <el-table-column prop="sellby" label="销售员">
                 </el-table-column>
+                <!-- 表格列，显示支付方式 -->
                 <el-table-column prop="sellway" label="支付方式">
+                    <!-- 自定义表格单元格内容，根据支付方式显示不同标签 -->
                     <template v-slot="scope">
+                        <!-- 若支付方式为支付宝，显示蓝色标签 -->
                         <el-tag
                             effect="dark"
                             type="primary"
                             v-if="scope.row.sellway == '0'"
                             >支付宝</el-tag
                         >
+                        <!-- 若支付方式为微信，显示绿色标签 -->
                         <el-tag
                             effect="dark"
                             type="success"
                             v-else-if="scope.row.sellway == '1'"
                             >微信</el-tag
                         >
+                        <!-- 若支付方式为银行卡，显示橙色标签 -->
                         <el-tag
                             effect="dark"
                             type="warning"
                             v-else-if="scope.row.sellway == '3'"
                             >银行卡</el-tag
                         >
+                        <!-- 若支付方式为现金，显示红色标签 -->
                         <el-tag effect="dark" type="danger" v-else>现金</el-tag>
                     </template>
                 </el-table-column>
+                <!-- 表格列，显示备注信息，当内容过长时显示 tooltip -->
                 <el-table-column
                     prop="info"
                     :show-overflow-tooltip="true"
                     label="备注"
                 >
                 </el-table-column>
+                <!-- 表格列，显示操作按钮，固定在表格右侧，宽度为 240px -->
                 <el-table-column width="240" label="操作" fixed="right">
+                    <!-- 自定义表格单元格内容，包含明细和删除按钮 -->
                     <template v-slot="scope">
+                        <!-- 明细按钮，点击触发 detailBtn 方法，显示销售订单明细 -->
                         <el-button
                             type="success"
                             style="font-size: 18px;"
                             @click="detailBtn(scope.row)"
                             >
+                            <!-- 按钮内的图标 -->
                             <i class="iconfont icon-r-find" style="font-size: 18px;"> </i>
+                            <!-- 按钮文本 -->
                             明细
                         </el-button>
+                        <!-- 删除按钮，点击触发 del 方法，删除当前销售记录 -->
                         <el-button
                             type="danger"
                             @click="del(scope.row.cn)"
                             style="font-size: 18px;"
                             >
+                            <!-- 按钮内的图标 -->
                             <i class="iconfont icon-r-delete" style="font-size: 18px;"> </i>
+                            <!-- 按钮文本 -->
                             删除
                         </el-button>
                     </template>
                 </el-table-column>
             </el-table>
+            <!-- 定义一个 div 容器，用于包裹分页组件，设置上下外边距 -->
             <div style="margin: 10px 0 15px 0;">
+                <!-- 分页组件，用于切换表格数据的页码和每页显示数量 -->
                 <el-pagination
+                    <!-- 每页显示数量变化时触发 handleSizeChange 方法 -->
                     @size-change="handleSizeChange"
+                    <!-- 当前页码变化时触发 handleCurrentChange 方法 -->
                     @current-change="handleCurrentChange"
+                    <!-- 双向绑定当前页码到 searchForm 的 currentPage 属性 -->
                     :current-page.sync="searchForm.currentPage"
+                    <!-- 每页显示数量的可选值 -->
                     :page-sizes="[5, 10, 20, 50]"
+                    <!-- 绑定每页显示数量到 searchForm 的 pageSize 属性 -->
                     :page-size="searchForm.pageSize"
+                    <!-- 分页组件的布局 -->
                     layout="total,sizes, prev, pager, next,jumper"
+                    <!-- 绑定数据总数到 searchForm 的 total 属性 -->
                     :total="searchForm.total"
                 >
                 </el-pagination>
             </div>
         </div>
+        <!-- 对话框组件，用于显示销售订单明细，标题为“销售订单明细” -->
         <el-dialog
             title="销售订单明细"
+            <!-- 双向绑定对话框的显示状态到 detailSaleRecordsVisable 属性 -->
             :visible.sync="detailSaleRecordsVisable"
+            <!-- 对话框宽度为 80% -->
             width="80%"
         >
+            <!-- 表单组件，绑定数据到 saleRecordForm，标签宽度为 100px -->
             <el-form
                 :model="saleRecordForm"
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 创建一个行布局 -->
                 <el-row>
+                    <!-- 列布局，占 12 份宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项目，标签为“销售编号：” -->
                         <el-form-item style="width: 60%" label="销售编号：">
+                            <!-- 输入框，禁用且只读，显示销售编号 -->
                             <el-input
                             disabled
                                 readonly
@@ -197,13 +273,17 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 创建一个行布局 -->
                 <el-row>
+                    <!-- 列布局，占 12 份宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项目，标签为“支付方式：” -->
                         <el-form-item
                             style="width: 80%"
                             label="支付方式："
                             prop="sellway"
                         >
+                            <!-- 支付宝支付方式单选框，禁用状态，绑定到 saleRecordForm 的 sellway 属性 -->
                             <el-radio
                                 disabled
                                 type="radio"
@@ -211,6 +291,7 @@
                                 label="0"
                                 >支付宝</el-radio
                             >
+                            <!-- 微信支付方式单选框，禁用状态，绑定到 saleRecordForm 的 sellway 属性 -->
                             <el-radio
                                 disabled
                                 type="radio"
@@ -218,6 +299,7 @@
                                 label="1"
                                 >微信</el-radio
                             >
+                            <!-- 现金支付方式单选框，禁用状态，绑定到 saleRecordForm 的 sellway 属性 -->
                             <el-radio
                                 disabled
                                 type="radio"
@@ -225,6 +307,7 @@
                                 label="2"
                                 >现金</el-radio
                             >
+                            <!-- 银行卡支付方式单选框，禁用状态，绑定到 saleRecordForm 的 sellway 属性 -->
                             <el-radio
                                 disabled
                                 type="radio"
@@ -235,9 +318,13 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 创建一个行布局 -->
                 <el-row>
+                    <!-- 列布局，占 12 份宽度 -->
                     <el-col :span="12">
+                        <!-- 表单项目，标签为“顾客类型：” -->
                         <el-form-item style="width: 60%" label="顾客类型：">
+                            <!-- 会员单选框，禁用状态，绑定到 saleRecordForm 的 type 属性 -->
                             <el-radio
                                 disabled
                                 type="radio"
@@ -245,6 +332,7 @@
                                 label="1"
                                 >会员</el-radio
                             >
+                            <!-- 非会员单选框，禁用状态，绑定到 saleRecordForm 的 type 属性 -->
                             <el-radio
                                 disabled
                                 type="radio"
@@ -254,12 +342,15 @@
                             >
                         </el-form-item>
                     </el-col>
+                    <!-- 列布局，占 12 份宽度，当顾客类型为会员时显示 -->
                     <el-col :span="12" v-if="saleRecordForm.type == '1'">
+                        <!-- 表单项目，标签为“会员账号：” -->
                         <el-form-item
                             style="width: 60%"
                             label="会员账号："
                             prop="memberPhone"
                         >
+                            <!-- 输入框，只读状态，显示会员账号 -->
                             <el-input
                                 readonly
                                 v-model="saleRecordForm.memberPhone"
@@ -268,21 +359,31 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 水平线分隔 -->
                 <hr>
+                <!-- 创建一个行布局 -->
                 <el-row>
+                    <!-- 列布局，占 24 份宽度 -->
                     <el-col :span="24">
+                        <!-- 表格组件，展示销售订单明细中的商品信息 -->
                         <el-table
                             :data="saleRecordForm.detailSaleRecords"
                             style="width: 100%"
                             size="medium"
                         >
+                            <!-- 表格列，显示商品编号 -->
                             <el-table-column prop="goodsId" label="商品编号">
                             </el-table-column>
+                            <!-- 表格列，显示商品名 -->
                             <el-table-column prop="goodsName" label="商品名">
                             </el-table-column>
+                            <!-- 表格列，显示商品数量 -->
                             <el-table-column prop="goodsNum" label="数量">
+                                <!-- 自定义表格单元格内容，显示商品数量输入框和加减按钮 -->
                                 <template v-slot="scope">
+                                    <!-- 减号按钮，禁用状态 -->
                                     <el-button type="info" disabled>-</el-button>
+                                    <!-- 输入框，禁用状态，显示商品数量 -->
                                     <el-input
                                         disabled
                                         style="width: 80px"
@@ -290,18 +391,25 @@
                                         min="1"
                                         v-model="scope.row.goodsNum"
                                     ></el-input>
+                                    <!-- 加号按钮，禁用状态 -->
                                     <el-button type="info" disabled>+</el-button>
                                 </template>
                             </el-table-column>
+                            <!-- 表格列，显示商品单价 -->
                             <el-table-column prop="goodsPrice" label="商品单价（元）">
                             </el-table-column>
                         </el-table>
                     </el-col>
                 </el-row>
+                <!-- 水平线分隔 -->
                 <hr>
+                <!-- 创建一个行布局 -->
                 <el-row>
+                    <!-- 列布局，占 24 份宽度 -->
                     <el-col :span="24">
+                        <!-- 表单项目，标签为“备注：” -->
                         <el-form-item style="width: 100%" label="备注：">
+                            <!-- 文本输入框，禁用且只读，显示备注信息 -->
                             <el-input
                                 disabled
                                 readonly
@@ -312,21 +420,29 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
+                <!-- 创建一个行布局 -->
                 <el-row>
+                    <!-- 列布局，占 24 份宽度 -->
                     <el-col :span="24">
+                        <!-- 当销售订单明细中有商品信息时显示订单详情 -->
                         <div v-if="saleRecordForm.detailSaleRecords.length > 0">
+                            <!-- 显示订单号 -->
                             订单号：{{ saleRecordForm.cn }}&nbsp;&nbsp;
+                            <!-- 显示商品总数 -->
                             商品总数：{{
                                 saleRecordForm.sellTotal
                                     ? saleRecordForm.sellTotal
                                     : 0
-                            }}&nbsp;&nbsp; 消费：{{
+                            }}&nbsp;&nbsp; 
+                            <!-- 显示消费金额，保留两位小数 -->
+                            消费：{{
                                 saleRecordForm.sellTotalmoney
                                     ? parseFloat(
                                           saleRecordForm.sellTotalmoney
                                       ).toFixed(2)
                                     : 0
                             }}元&nbsp;&nbsp;
+                            <!-- 当有支付方式时显示支付方式 -->
                             <span v-if="saleRecordForm.sellway"
                                 >支付方式：{{
                                     saleRecordForm.sellway == "0"
@@ -338,9 +454,11 @@
                                         : "银行卡"
                                 }}&nbsp;&nbsp;</span
                             ><br>
+                            <!-- 当顾客类型为会员时显示会员享受 9 折信息 -->
                             <span v-if="saleRecordForm.type == '1'"
                                 >会员享受9折&nbsp;&nbsp;</span
                             >
+                            <!-- 当有销售时间时显示消费时间和操作者编号 -->
                             <span v-if="saleRecordForm.sellTime"
                                 >消费时间：{{
                                     saleRecordForm.sellTime
@@ -351,9 +469,13 @@
                         </div>
                     </el-col>
                 </el-row>
+                <!-- 创建一个行布局 -->
                 <el-row>
+                    <!-- 列布局，占 24 份宽度 -->
                     <el-col :span="24">
+                        <!-- 表单项目 -->
                         <el-form-item>
+                            <!-- 关闭按钮，点击关闭销售订单明细对话框 -->
                             <el-button
                                 type="info"
                                 @click="detailSaleRecordsVisable = false"
@@ -367,119 +489,171 @@
     </div>
 </template>
 <script>
-import { popup } from "@/assets/js/common";
-import {
-    delSaleRecords,
-    queryPageByQoSaleRecords,
-} from "@/api/sale_management/saleRecordsApi";
+    // 导入弹出提示框函数
+    import { popup } from "@/assets/js/common";
+    // 导入删除销售记录和分页查询销售记录的 API 函数
+    import {
+        delSaleRecords,
+        queryPageByQoSaleRecords,
+    } from "@/api/sale_management/saleRecordsApi";
 
-export default {
-    data() {
-        return {
-            detailSaleRecordsVisable: false,
-            searchForm: {
-                pageSize: 5
-            },
-            tableData: [],
-            saleRecordForm: {
-                cn: "",
-                sellway: "",
-                info: "",
-                sellTotal: "",
-                sellTotalmoney: "",
-                type: "0",
-                detailSaleRecords: [],
-            },
-        };
-    },
-    methods: {
-        init() {
-            if (this.searchForm.startSellTime > this.searchForm.endSellTime) {
-                popup("结束时间不能小于开始时间", "warning");
-                return;
-            }
-            queryPageByQoSaleRecords(this.searchForm).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.tableData = res.data.records;
-                    this.searchForm.total = res.data.total;
-                    this.searchForm.pageSize = res.data.size;
-                    this.searchForm.currentPage = res.data.current;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
+    export default {
+        // 定义组件的数据
+        data() {
+            return {
+                // 销售订单明细对话框的显示状态
+                detailSaleRecordsVisable: false,
+                // 搜索表单数据，默认每页显示 5 条记录
+                searchForm: {
+                    pageSize: 5
+                },
+                // 表格显示的销售记录数据
+                tableData: [],
+                // 销售订单明细表单数据
+                saleRecordForm: {
+                    // 销售编号
+                    cn: "",
+                    // 支付方式
+                    sellway: "",
+                    // 备注信息
+                    info: "",
+                    // 销售商品总数量
+                    sellTotal: "",
+                    // 销售总金额
+                    sellTotalmoney: "",
+                    // 顾客类型
+                    type: "0",
+                    // 销售订单明细中的商品信息列表
+                    detailSaleRecords: [],
+                },
+            };
         },
-        del(cn) {
-            this.$confirm("确定删除这条记录？", "警示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    delSaleRecords({ cn: cn }).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("操作成功");
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
+        // 定义组件的方法
+        methods: {
+            // 初始化表格数据，根据搜索条件查询销售记录
+            init() {
+                // 检查开始时间是否大于结束时间
+                if (this.searchForm.startSellTime > this.searchForm.endSellTime) {
+                    // 若开始时间大于结束时间，弹出警告提示框
+                    popup("结束时间不能小于开始时间", "warning");
+                    return;
+                }
+                // 调用 API 进行分页查询销售记录
+                queryPageByQoSaleRecords(this.searchForm).then((res) => {
+                    // 获取响应数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 若查询成功，更新表格数据
+                        this.tableData = res.data.records;
+                        // 更新总记录数
+                        this.searchForm.total = res.data.total;
+                        // 更新每页显示数量
+                        this.searchForm.pageSize = res.data.size;
+                        // 更新当前页码
+                        this.searchForm.currentPage = res.data.current;
+                    } else {
+                        // 若查询失败，弹出错误提示框
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 删除销售记录
+            del(cn) {
+                // 弹出确认删除对话框
+                this.$confirm("确定删除这条记录？", "警示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
                 })
-                .catch(() => {
-                    this.$message({
-                        type: "info",
-                        message: "已取消操作",
+                    .then(() => {
+                        // 若用户确认删除，调用 API 删除销售记录
+                        delSaleRecords({ cn: cn }).then((res) => {
+                            // 获取响应数据
+                            res = res.data;
+                            if (res.code == 200) {
+                                // 若删除成功，弹出操作成功提示框
+                                popup("操作成功");
+                                // 重新初始化表格数据
+                                this.init();
+                            } else {
+                                // 若删除失败，弹出错误提示框
+                                popup(res.msg, "error");
+                            }
+                        });
+                    })
+                    .catch(() => {
+                        // 若用户取消删除，显示取消操作提示信息
+                        this.$message({
+                            type: "info",
+                            message: "已取消操作",
+                        });
                     });
-                });
-        },
-        detailBtn(row) {
-            this.saleRecordForm = {
-                cn: "",
-                sellway: "",
-                info: "",
-                sellTotal: "",
-                sellTotalmoney: "",
-                type: "0",
-                detailSaleRecords: [],
-            };
-            this.saleRecordForm = { ...row };
-            this.detailSaleRecordsVisable = true;
-        },
-        /*分页*/
-        handleSizeChange(val) {
-            this.searchForm.pageSize = val;
-            this.init();
-            console.log(`每页 ${val} 条`);
-        },
-        handleCurrentChange(val) {
-            this.searchForm.currentPage = val;
-            this.init();
-            console.log(`当前页: ${val}`);
+            },
+            // 显示销售订单明细
+            detailBtn(row) {
+                // 重置销售订单明细表单数据
+                this.saleRecordForm = {
+                    cn: "",
+                    sellway: "",
+                    info: "",
+                    sellTotal: "",
+                    sellTotalmoney: "",
+                    type: "0",
+                    detailSaleRecords: [],
+                };
+                // 将当前行数据赋值给销售订单明细表单数据
+                this.saleRecordForm = { ...row };
+                // 显示销售订单明细对话框
+                this.detailSaleRecordsVisable = true;
+            },
+            /*分页*/
+            // 每页显示数量变化时的处理函数
+            handleSizeChange(val) {
+                // 更新搜索表单中的每页显示数量
+                this.searchForm.pageSize = val;
+                // 重新初始化表格数据
+                this.init();
+                // 打印日志，显示当前每页显示数量
+                console.log(`每页 ${val} 条`);
+            },
+            // 当前页码变化时的处理函数
+            handleCurrentChange(val) {
+                // 更新搜索表单中的当前页码
+                this.searchForm.currentPage = val;
+                // 重新初始化表格数据
+                this.init();
+                // 打印日志，显示当前页码
+                console.log(`当前页: ${val}`);
+            },
+            // 提交搜索表单，触发搜索操作
+            submitSearchForm() {
+                // 重新初始化表格数据
+                this.init();
+            },
         },
-        submitSearchForm() {
+        // 组件挂载完成后执行的钩子函数
+        mounted() {
+            // 初始化表格数据
             this.init();
         },
-    },
-    mounted() {
-        this.init();
-    },
-};
+    };
 </script>
 <style>
-.searchForm {
-    height: 134px;
-}
+    /* 搜索表单样式，设置高度为 134px */
+    .searchForm {
+        height: 134px;
+    }
 
-.table {
-    height: 320px;
-}
+    /* 表格容器样式，设置高度为 320px */
+    .table {
+        height: 320px;
+    }
 
-.pageUtils {
-    position: absolute;
-    width: 84%;
-    margin: 2px auto;
-    height: 43px;
-}
+    /* 分页组件样式，绝对定位，宽度为 84%，水平居中，高度为 43px */
+    .pageUtils {
+        position: absolute;
+        width: 84%;
+        margin: 2px auto;
+        height: 43px;
+    }
 </style>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/system/menu/List.vue b/superMarket-frontend/src/views/system/menu/List.vue
index c129c01..cf3668f 100644
--- a/superMarket-frontend/src/views/system/menu/List.vue
+++ b/superMarket-frontend/src/views/system/menu/List.vue
@@ -1,41 +1,63 @@
 <template>
+    <!-- 根容器 -->
     <div>
+        <!-- 面包屑导航，使用 / 作为分隔符 -->
         <el-breadcrumb separator="/">
+            <!-- 面包屑的首页项 -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 面包屑的系统管理项 -->
             <el-breadcrumb-item>系统管理</el-breadcrumb-item>
+            <!-- 面包屑的菜单管理项 -->
             <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
-             </el-breadcrumb
-        ><br />
+        <!-- 闭合面包屑标签 -->
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
+        <!-- 创建一行布局 -->
         <el-row>
+            <!-- 占 8 列宽度，左对齐且右侧有 10px 内边距 -->
             <el-col :span="8" style="text-align: left; padding-right: 10px">
+                <!-- 输入框，用于输入菜单名称，绑定到 searchForm 的 name 属性 -->
                 <el-input placeholder="菜单名称" v-model="searchForm.name" />
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 创建一行布局 -->
         <el-row>
+            <!-- 占 24 列宽度，左对齐 -->
             <el-col :span="24" style="text-align: left">
+                <!-- 搜索按钮，点击触发 submitSearchForm 方法 -->
                 <el-button
                     type="primary"
                     @click="submitSearchForm"
                     style="font-size: 18px"
                 >
+                    <!-- 搜索图标 -->
                     <i class="iconfont icon-r-find" style="font-size: 18px">
                     </i>
-                    搜索</el-button
-                >
+                    <!-- 按钮文本 -->
+                    搜索
+                </el-button>
+                <!-- 重置按钮，点击触发 resetSearchForm 方法 -->
                 <el-button
                     type="info"
                     @click="resetSearchForm"
                     style="font-size: 18px"
                 >
+                    <!-- 重置图标 -->
                     <i class="iconfont icon-r-refresh" style="font-size: 18px">
                     </i>
+                    <!-- 按钮文本 -->
                     重置
                 </el-button>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 表格容器 -->
         <div class="table">
+            <!-- 表格组件，绑定数据、设置行键、边框、树形结构属性 -->
             <el-table
                 :data="tableData"
                 style="width: 100%"
@@ -44,75 +66,93 @@
                 border
                 :tree-props="{ children: 'children' }"
             >
+                <!-- 菜单名列 -->
                 <el-table-column prop="label" label="菜单名"> </el-table-column>
+                <!-- 标识符列，宽度 150px，超长显示 tooltip -->
                 <el-table-column
-                width="150"
+                    width="150"
                     prop="flag"
                     :show-overflow-tooltip="true"
                     label="标识符"
                 >
+                    <!-- 自定义单元格内容，显示标识符标签 -->
                     <template v-slot="scope">
                         <el-tag type="info">{{
                             scope.row.flag ? scope.row.flag : "暂定"
                         }}</el-tag>
                     </template>
                 </el-table-column>
+                <!-- 类型列 -->
                 <el-table-column prop="type" label="类型">
+                    <!-- 自定义单元格内容，根据类型显示不同标签 -->
                     <template v-slot="scope">
+                        <!-- 类型为 0 显示目录标签 -->
                         <el-tag  v-if="scope.row.type == 0"
                             >目录</el-tag
                         >
+                        <!-- 类型为 1 显示菜单标签 -->
                         <el-tag
-                            
                             v-else-if="scope.row.type == 1"
                             type="success"
                             >菜单</el-tag
                         >
+                        <!-- 其他类型显示按钮标签 -->
                         <el-tag  v-else type="warning"
                             >按钮</el-tag
                         >
                     </template>
                 </el-table-column>
+                <!-- 图标列 -->
                 <el-table-column prop="icon" label="图标">
+                    <!-- 自定义单元格内容，显示图标 -->
                     <template v-slot="scope">
                         <i :class="scope.row.icon"></i>
                     </template>
                 </el-table-column>
+                <!-- 描述列，超长显示 tooltip -->
                 <el-table-column
                     prop="info"
                     :show-overflow-tooltip="true"
                     label="描述"
                 >
+                    <!-- 自定义单元格内容，显示描述标签 -->
                     <template v-slot="scope">
                         <el-tag type="info">{{
                             scope.row.info ? scope.row.info : "无"
                         }}</el-tag>
                     </template>
                 </el-table-column>
+                <!-- 组件路径列，超长显示 tooltip -->
                 <el-table-column
                     prop="component"
                     :show-overflow-tooltip="true"
                     label="组件路径"
                 >
+                    <!-- 自定义单元格内容，显示组件路径标签 -->
                     <template v-slot="scope">
                         <el-tag type="info">{{
                             scope.row.component ? scope.row.component : "暂定"
                         }}</el-tag>
                     </template>
                 </el-table-column>
+                <!-- 状态列 -->
                 <el-table-column prop="state" label="状态">
+                    <!-- 自定义单元格内容，根据状态显示不同标签 -->
                     <template v-slot="scope">
+                        <!-- 状态为 0 显示正常标签 -->
                         <el-tag
-                            
                             type="success"
                             v-if="scope.row.state == 0"
                             >正常</el-tag
                         >
+                        <!-- 其他状态显示禁用标签 -->
                         <el-tag  type="danger" v-else>禁用</el-tag>
                     </template>
                 </el-table-column>
             </el-table>
+            <!-- 分页组件容器 -->
             <div style="margin: 10px 0 15px 0">
+                <!-- 分页组件，绑定分页相关事件和数据 -->
                 <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
@@ -128,87 +168,118 @@
     </div>
 </template>
 <script>
-import { queryPageByQo } from "@/api/system/menu/menuApi";
-import { popup } from "@/assets/js/common";
+    // 导入根据查询条件分页查询菜单的 API
+    import { queryPageByQo } from "@/api/system/menu/menuApi";
+    // 导入弹出提示框函数
+    import { popup } from "@/assets/js/common";
 
-export default {
-    data() {
-        return {
-            /*搜索*/
-            /*表格*/
-            tableData: [],
-            searchForm: {
-                total: 0,
-                currentPage: 1,
-                pageSize: 5,
-            },
-        };
-    },
-    methods: {
-        init() {
-            queryPageByQo(this.searchForm).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    console.log(res.data);
-                    this.tableData = res.data.records;
-                    this.searchForm.total = res.data.total;
-                    this.searchForm.pageSize = res.data.size;
-                    this.searchForm.currentPage = res.data.current;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        submitSearchForm() {
-            this.init();
-        },
-        resetSearchForm() {
-            this.searchForm.name = "";
+    export default {
+        // 组件的数据
+        data() {
+            return {
+                // 表格数据
+                tableData: [],
+                // 搜索表单数据，包含总数、当前页、每页数量等
+                searchForm: {
+                    total: 0,
+                    currentPage: 1,
+                    pageSize: 5,
+                },
+            };
         },
-        /*分页*/
-        handleSizeChange(val) {
-            this.searchForm.pageSize = val;
-            this.init();
-            console.log(`每页 ${val} 条`);
+        // 组件的方法
+        methods: {
+            // 初始化表格数据
+            init() {
+                // 调用 API 进行分页查询
+                queryPageByQo(this.searchForm).then((res) => {
+                    // 获取响应数据
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 打印响应数据
+                        console.log(res.data);
+                        // 更新表格数据
+                        this.tableData = res.data.records;
+                        // 更新总数
+                        this.searchForm.total = res.data.total;
+                        // 更新每页数量
+                        this.searchForm.pageSize = res.data.size;
+                        // 更新当前页
+                        this.searchForm.currentPage = res.data.current;
+                    } else {
+                        // 若查询失败，弹出错误提示框
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 提交搜索表单
+            submitSearchForm() {
+                // 重新初始化表格数据
+                this.init();
+            },
+            // 重置搜索表单
+            resetSearchForm() {
+                // 清空搜索表单的名称字段
+                this.searchForm.name = "";
+            },
+            // 分页 - 每页数量改变时的处理函数
+            handleSizeChange(val) {
+                // 更新搜索表单的每页数量
+                this.searchForm.pageSize = val;
+                // 重新初始化表格数据
+                this.init();
+                // 打印日志，显示当前每页数量
+                console.log(`每页 ${val} 条`);
+            },
+            // 分页 - 当前页改变时的处理函数
+            handleCurrentChange(val) {
+                // 更新搜索表单的当前页
+                this.searchForm.currentPage = val;
+                // 重新初始化表格数据
+                this.init();
+                // 打印日志，显示当前页
+                console.log(`当前页: ${val}`);
+            },
         },
-        handleCurrentChange(val) {
-            this.searchForm.currentPage = val;
+        // 组件挂载完成后的钩子函数
+        mounted() {
+            // 初始化表格数据
             this.init();
-            console.log(`当前页: ${val}`);
         },
-    },
-    mounted() {
-        this.init();
-    },
-};
+    };
 </script>
 <style>
-.searchForm {
-    height: 134px;
-}
+    /* 搜索表单样式，高度 134px */
+    .searchForm {
+        height: 134px;
+    }
 
-.table {
-    height: 320px;
-}
+    /* 表格样式，高度 320px */
+    .table {
+        height: 320px;
+    }
 
-.pageUtils {
-    position: absolute;
-    width: 84%;
-    margin: 2px auto;
-    height: 43px;
-}
-.searchForm {
-    display: inline-block;
-    margin: 0 auto;
-    height: 51px;
-    line-height: 51px;
-}
+    /* 分页工具样式，绝对定位，宽度 84%，居中，高度 43px */
+    .pageUtils {
+        position: absolute;
+        width: 84%;
+        margin: 2px auto;
+        height: 43px;
+    }
+    /* 搜索表单样式，内联块显示，居中，高度 51px，行高 51px */
+    .searchForm {
+        display: inline-block;
+        margin: 0 auto;
+        height: 51px;
+        line-height: 51px;
+    }
 
-.searchForm .column {
-    display: inline-block;
-    margin: 0 auto;
-    margin-right: 2px;
-    line-height: 48px;
-    height: 51px;
-}
+    /* 搜索表单列样式，内联块显示，居中，右侧外边距 2px，行高 48px，高度 51px */
+    .searchForm .column {
+        display: inline-block;
+        margin: 0 auto;
+        margin-right: 2px;
+        line-height: 48px;
+        height: 51px;
+    }
 </style>
\ No newline at end of file
diff --git a/superMarket-frontend/src/views/system/role/List.vue b/superMarket-frontend/src/views/system/role/List.vue
index eca677f..fa6f5b5 100644
--- a/superMarket-frontend/src/views/system/role/List.vue
+++ b/superMarket-frontend/src/views/system/role/List.vue
@@ -1,126 +1,173 @@
 <template>
+    <!-- 页面的根容器，id 为 role_list -->
     <div id="role_list">
+        <!-- 面包屑导航组件，使用 "/" 作为分隔符 -->
         <el-breadcrumb separator="/">
+            <!-- 面包屑的首页项 -->
             <el-breadcrumb-item>首页</el-breadcrumb-item>
+            <!-- 面包屑的系统管理项 -->
             <el-breadcrumb-item>系统管理</el-breadcrumb-item>
-            <el-breadcrumb-item>角色管理</el-breadcrumb-item> </el-breadcrumb
-        ><br />
+            <!-- 面包屑的角色管理项 -->
+            <el-breadcrumb-item>角色管理</el-breadcrumb-item> 
+        </el-breadcrumb>
+        <!-- 换行 -->
+        <br />
 
+        <!-- 第一行布局 -->
         <el-row>
+            <!-- 左侧列，占 8 列宽度，左对齐，右侧有 10px 内边距 -->
             <el-col :span="8" style="text-align: left; padding-right: 10px">
+                <!-- 输入框，用于输入角色名称，双向绑定到 roleSearchForm 的 name 属性 -->
                 <el-input
                     placeholder="角色名称"
                     v-model="roleSearchForm.name"
                 />
             </el-col>
+            <!-- 右侧列，占 8 列宽度 -->
             <el-col :span="8">
+                <!-- 下拉选择框，用于选择角色状态，双向绑定到 roleSearchForm 的 state 属性 -->
                 <el-select
                     @change="$forceUpdate"
                     v-model="roleSearchForm.state"
                     placeholder="状态"
                     clearable
                 >
+                    <!-- 下拉选项，标签为“正常”，值为“0” -->
                     <el-option label="正常" value="0"></el-option>
+                    <!-- 下拉选项，标签为“停用”，值为“-1” -->
                     <el-option label="停用" value="-1"></el-option>
                 </el-select>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 第二行布局 -->
         <el-row>
+            <!-- 整行占 24 列宽度，左对齐 -->
             <el-col :span="24" style="text-align: left">
+                <!-- 搜索按钮，点击触发 subSearchForm 方法，传递参数 'ruleForm' -->
                 <el-button
                     type="primary"
                     @click="subSearchForm('ruleForm')"
                     style="font-size: 18px"
                 >
+                    <!-- 搜索图标 -->
                     <i class="iconfont icon-r-find" style="font-size: 18px">
                     </i>
-                    搜索</el-button
-                >
+                    <!-- 按钮文本 -->
+                    搜索
+                </el-button>
+                <!-- 创建角色按钮，点击将 newRoleVisable 设置为 true，显示创建角色对话框 -->
                 <el-button
                     type="success"
                     @click="newRoleVisable = true"
                     style="font-size: 18px"
                 >
+                    <!-- 创建图标 -->
                     <i class="iconfont icon-r-add" style="font-size: 18px"> </i>
+                    <!-- 按钮文本 -->
                     创建角色
                 </el-button>
             </el-col>
         </el-row>
+        <!-- 换行 -->
         <br />
+        <!-- 表格组件，用于展示角色列表数据，数据绑定到 tableData -->
         <el-table :data="tableData" style="width: 100%">
+            <!-- 序号列，类型为 index，显示行号，宽度 180px -->
             <el-table-column type="index" label="序号" width="180">
             </el-table-column>
+            <!-- 名称列，显示角色名称，宽度 180px -->
             <el-table-column prop="name" label="名称" width="180">
             </el-table-column>
+            <!-- 描述列，显示角色描述 -->
             <el-table-column prop="info" label="描述"> </el-table-column>
+            <!-- 状态列，根据角色状态显示不同标签 -->
             <el-table-column prop="state" label="状态">
+                <!-- 自定义单元格内容 -->
                 <template v-slot="scope">
+                    <!-- 如果角色状态为“0”，显示绿色的“正常”标签 -->
                     <el-tag v-if="scope.row.state == '0'" type="success"
                         >正常</el-tag
                     >
+                    <!-- 否则，显示红色的“停用”标签 -->
                     <el-tag v-else type="danger">停用</el-tag>
                 </template>
             </el-table-column>
+            <!-- 操作列，固定在表格右侧，宽度 360px -->
             <el-table-column label="操作" width="360" fixed="right">
+                <!-- 自定义单元格内容 -->
                 <template v-slot="scope">
+                    <!-- 修改按钮，点击触发 editRole 方法，传递当前行数据 -->
                     <el-button
                         type="success"
                         @click="editRole(scope.row)"
                         style="font-size: 18px"
                     >
+                        <!-- 修改图标 -->
                         <i
                             class="iconfont icon-r-edit"
                             style="font-size: 18px"
                         ></i>
-                        修改</el-button
-                    >
+                        <!-- 按钮文本 -->
+                        修改
+                    </el-button>
+                    <!-- 停用按钮，只有当角色状态为“0”时显示，点击触发 forbidden 方法，传递角色 id -->
                     <el-button
                         v-if="scope.row.state == '0'"
                         type="danger"
                         @click="forbidden(scope.row.id)"
                         style="font-size: 18px"
                     >
+                        <!-- 停用图标 -->
                         <i
                             class="iconfont icon-r-no"
                             style="font-size: 18px"
                         ></i>
-                        停用</el-button
-                    >
+                        <!-- 按钮文本 -->
+                        停用
+                    </el-button>
+                    <!-- 授权按钮，点击触发 checkPermissons 方法，传递角色 id -->
                     <el-button
                         type="warning"
                         @click="checkPermissons(scope.row.id)"
                         style="font-size: 18px"
                     >
+                        <!-- 授权图标 -->
                         <i
                             class="iconfont icon-r-setting"
                             style="font-size: 18px"
                         ></i>
-                        授权</el-button
-                    >
+                        <!-- 按钮文本 -->
+                        授权
+                    </el-button>
                 </template>
             </el-table-column>
         </el-table>
-        <!--修改描述/状态弹出框-->
+        <!-- 修改描述/状态的弹出框，标题为“角色信息修改”，双向绑定显示状态到 dialogVisible，宽度 50% -->
         <el-dialog
             title="角色信息修改"
             :visible.sync="dialogVisible"
             width="50%"
         >
+            <!-- 表单组件，绑定数据到 editRoleForm -->
             <el-form
                 v-model="editRoleForm"
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 名称表单项，输入框禁用，显示角色名称 -->
                 <el-form-item label="名称：">
                     <el-input disabled v-model="editRoleForm.name"></el-input>
                 </el-form-item>
+                <!-- 描述表单项，输入框用于输入角色描述，双向绑定到 editRoleForm 的 info 属性 -->
                 <el-form-item label="描述：">
                     <el-input
                         type="text"
                         v-model="editRoleForm.info"
                     ></el-input>
                 </el-form-item>
+                <!-- 状态表单项，下拉选择框用于选择角色状态，双向绑定到 editRoleForm 的 state 属性 -->
                 <el-form-item label="状态：">
                     <el-select
                         v-model="editRoleForm.state"
@@ -128,6 +175,7 @@
                         @change="$forceUpdate()"
                         placeholder="请选择状态"
                     >
+                        <!-- 遍历 options 数组生成下拉选项 -->
                         <el-option
                             v-for="item in options"
                             :key="item.value"
@@ -137,30 +185,38 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 提交和重置按钮表单项 -->
                 <el-form-item>
+                    <!-- 提交按钮，点击触发 submitEditForm 方法 -->
                     <el-button
                         type="primary"
                         @click="submitEditForm"
                         style="font-size: 18px"
                     >
+                        <!-- 提交图标 -->
                         <i
                             class="iconfont icon-r-yes"
                             style="font-size: 18px"
                         ></i>
-                        提交</el-button
-                    >
+                        <!-- 按钮文本 -->
+                        提交
+                    </el-button>
+                    <!-- 重置按钮，点击触发 resetEditForm 方法 -->
                     <el-button @click="resetEditForm" style="font-size: 18px">
+                        <!-- 重置图标 -->
                         <i
                             class="iconfont icon-r-refresh"
                             style="font-size: 18px"
                         ></i>
-                        重置</el-button
-                    >
+                        <!-- 按钮文本 -->
+                        重置
+                    </el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
-        <!--创建角色弹出框-->
+        <!-- 创建角色的弹出框，标题为“创建角色”，双向绑定显示状态到 newRoleVisable，宽度 50% -->
         <el-dialog title="创建角色" :visible.sync="newRoleVisable" width="50%">
+            <!-- 表单组件，绑定数据到 newRoleForm，设置验证规则，引用为 newRoleForm -->
             <el-form
                 :model="newRoleForm"
                 :rules="rules"
@@ -168,51 +224,62 @@
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 名称表单项，输入框用于输入角色名称，双向绑定到 newRoleForm 的 name 属性 -->
                 <el-form-item label="名称：" prop="name">
                     <el-input v-model="newRoleForm.name"></el-input>
                 </el-form-item>
+                <!-- 描述表单项，输入框用于输入角色描述，双向绑定到 newRoleForm 的 info 属性 -->
                 <el-form-item label="描述：">
                     <el-input type="text" v-model="newRoleForm.info"></el-input>
                 </el-form-item>
+                <!-- 创建和重置按钮表单项 -->
                 <el-form-item>
+                    <!-- 创建角色按钮，点击触发 submitNewForm 方法，传递参数 'newRoleForm' -->
                     <el-button
                         type="primary"
                         @click="submitNewForm('newRoleForm')"
                         style="font-size: 18px"
                     >
+                        <!-- 创建图标 -->
                         <i
                             class="iconfont icon-r-add"
                             style="font-size: 18px"
                         ></i>
-                        创建角色</el-button
-                    >
+                        <!-- 按钮文本 -->
+                        创建角色
+                    </el-button>
+                    <!-- 重置按钮，点击触发 resetNewForm 方法 -->
                     <el-button @click="resetNewForm" style="font-size: 18px">
+                        <!-- 重置图标 -->
                         <i
                             class="iconfont icon-r-refresh"
                             style="font-size: 18px"
                         ></i
-                        >重置</el-button
-                    >
+                        >重置
+                    </el-button>
                 </el-form-item>
             </el-form>
         </el-dialog>
-        <!--职能分配框-->
+        <!-- 权限分配的弹出框，标题为“权限分配”，双向绑定显示状态到 distributionFulVisable，宽度 50% -->
         <el-dialog
             title="权限分配"
             :visible.sync="distributionFulVisable"
             width="50%"
         >
+            <!-- 表单组件，绑定数据到 distributionFulForm -->
             <el-form
                 :model="distributionFulForm"
                 label-width="100px"
                 class="demo-ruleForm"
             >
+                <!-- 输入框和树形结构表单项，输入框用于过滤树形结构数据 -->
                 <el-form-item>
                     <el-input
                         placeholder="输入关键字进行过滤"
                         v-model="filterText"
                     >
                     </el-input>
+                    <!-- 树形结构组件，绑定数据、设置属性 -->
                     <el-tree
                         :data="fuloptions"
                         class="filter-tree"
@@ -225,18 +292,23 @@
                         :props="props"
                     ></el-tree>
                 </el-form-item>
+                <!-- 提交和取消按钮表单项 -->
                 <el-form-item>
+                    <!-- 提交按钮，点击触发 submitDistributionFulForm 方法 -->
                     <el-button
                         type="primary"
                         @click="submitDistributionFulForm"
                         style="font-size: 18px"
                     >
+                        <!-- 提交图标 -->
                         <i
                             class="iconfont icon-r-add"
                             style="font-size: 18px"
                         ></i>
-                        提交</el-button
-                    >
+                        <!-- 按钮文本 -->
+                        提交
+                    </el-button>
+                    <!-- 取消按钮，点击触发 celDistributionFul 方法 -->
                     <el-button
                         @click="celDistributionFul"
                         style="font-size: 18px"
@@ -248,205 +320,260 @@
     </div>
 </template>
 <script>
-import {
-    forbiddenRole,
-    roleList,
-    edit_role,
-    save_role,
-    checkPermissons,
-    saveRolePermissons,
-} from "@/api/system/role/roleApi";
-import { ajaxPost, popup } from "@/assets/js/common";
+    // 导入角色管理相关的 API 函数
+    import {
+        forbiddenRole,
+        roleList,
+        edit_role,
+        save_role,
+        checkPermissons,
+        saveRolePermissons,
+    } from "@/api/system/role/roleApi";
+    // 导入通用的 ajaxPost 函数和弹出提示框函数
+    import { ajaxPost, popup } from "@/assets/js/common";
 
-export default {
-    data() {
-        return {
-            tableData: [],
-            editRoleForm: {},
-            editRoleRow: {},
-            dialogVisible: false,
-            newRoleVisable: false,
-            distributionFulVisable: false,
-            newRoleForm: {},
-            roleSearchForm: {},
-            distributionFulForm: {},
-            options: [
-                { label: "正常", value: "0" },
-                { label: "停用", value: "-1" },
-            ],
-            /*职能分配*/
-            props: { multiple: true },
-            fuloptions: [],
-            default_checked_mid: [],
-            filterText: "",
-            rules: {
-                name: [
-                    {
-                        required: true,
-                        message: "名称不能为空",
-                        trigger: "blur",
-                    },
+    export default {
+        // 组件的数据
+        data() {
+            return {
+                // 角色列表数据
+                tableData: [],
+                // 编辑角色表单数据
+                editRoleForm: {},
+                // 编辑角色时的原始行数据
+                editRoleRow: {},
+                // 修改角色信息对话框的显示状态
+                dialogVisible: false,
+                // 创建角色对话框的显示状态
+                newRoleVisable: false,
+                // 权限分配对话框的显示状态
+                distributionFulVisable: false,
+                // 创建角色表单数据
+                newRoleForm: {},
+                // 角色搜索表单数据
+                roleSearchForm: {},
+                // 权限分配表单数据
+                distributionFulForm: {},
+                // 状态选项数组
+                options: [
+                    { label: "正常", value: "0" },
+                    { label: "停用", value: "-1" },
                 ],
-            },
-        };
-    },
-    watch: {
-        filterText(val) {
-            this.$refs.tree.filter(val);
-        },
-    },
-    methods: {
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
-        },
-        init() {
-            roleList(this.roleSearchForm).then((res) => {
-                res = res.data;
-                if ((res.code = 200)) {
-                    this.tableData = res.data;
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-        forbidden(id) {
-            forbiddenRole(id).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.roleSearchForm.state = "0";
-                    this.init();
-                    popup("操作成功");
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
-        },
-
-        /*弹出修改表单*/
-        editRole(row) {
-            this.editRoleForm = { ...row };
-            this.editRoleRow = { ...row };
-            this.dialogVisible = true;
-        },
-        /*条件搜索*/
-        subSearchForm() {
-            this.init();
-        },
-        /*对接后端修改角色接口*/
-        submitEditForm() {
-            if (
-                this.editRoleForm.info == this.editRoleRow.info &&
-                this.editRoleForm.state == this.editRoleRow.state
-            ) {
-                popup("您没有更改内容", "warning");
-                return;
-            }
-            edit_role(this.editRoleForm).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    popup("操作成功");
-                    this.editRoleForm = {};
-                    this.editRoleRow = {};
-                    this.dialogVisible = false;
-                    this.roleSearchForm.state = "0";
-                    this.init();
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
+                /*职能分配相关数据*/
+                // 树形结构属性
+                props: { multiple: true },
+                // 权限选项数据
+                fuloptions: [],
+                // 默认选中的权限节点键数组
+                default_checked_mid: [],
+                // 过滤文本
+                filterText: "",
+                // 表单验证规则，name 字段必填
+                rules: {
+                    name: [
+                        {
+                            required: true,
+                            message: "名称不能为空",
+                            trigger: "blur",
+                        },
+                    ],
+                },
+            };
         },
-        /*修改角色重置按钮*/
-        resetEditForm() {
-            this.editRoleForm = { ...this.editRoleRow };
-        },
-        /*创建新角色*/
-        submitNewForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    console.log(this.newRoleForm);
-                    save_role(this.newRoleForm).then((res) => {
-                        res = res.data;
-                        if (res.code == 200) {
-                            popup("操作成功");
-                            this.newRoleForm = {};
-                            this.newRoleVisable = false;
-                            this.init();
-                        } else {
-                            popup(res.msg, "error");
-                        }
-                    });
-                }
-            });
-        },
-        resetNewForm() {
-            this.newRoleForm = {};
+        // 监听 filterText 的变化，当变化时调用树形结构的 filter 方法进行过滤
+        watch: {
+            filterText(val) {
+                this.$refs.tree.filter(val);
+            },
         },
-        /*职能分配*/
-        /*授权按钮*/
-        checkPermissons(rid) {
-            this.distributionFulForm.rid = rid;
-            this.default_checked_mid = [];
-            checkPermissons(rid).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    this.fuloptions = res.data.menus;
-                    this.default_checked_mid = res.data.menuIds.sort(
-                        (x, y) => x - y
-                    );
-                    console.log(typeof this.default_checked_mid);
-                    console.log(this.default_checked_mid);
-                } else {
-                    popup(res.msg, "error");
-                }
-            });
+        // 组件的方法
+        methods: {
+            // 树形结构节点过滤方法，根据输入的关键字过滤节点
+            filterNode(value, data) {
+                if (!value) return true;
+                return data.label.indexOf(value) !== -1;
+            },
+            // 初始化角色列表数据，调用 roleList API 获取数据并更新 tableData
+            init() {
+                roleList(this.roleSearchForm).then((res) => {
+                    res = res.data;
+                    if ((res.code = 200)) {
+                        this.tableData = res.data;
+                    } else {
+                        popup(res.msg, "error");
+                    }
+                });
+            },
+            // 停用角色的方法，调用 forbiddenRole API 停用指定 id 的角色
+            forbidden(id) {
+                forbiddenRole(id).then((res) => {
+                    res = res.data;
+                    if (res.code == 200) {
+                        // 更新搜索表单的状态为“0”（正常）
+                        this.roleSearchForm.state = "0";
+                        // 重新初始化角色列表
+                        this.init();
+                        // 弹出操作成功提示
+                        popup("操作成功");
+                    } else {
+                        // 弹出错误提示
+                        popup(res.msg, "error");
+                    }
+                });
+            },
 
-            this.distributionFulVisable = true;
-        },
-        submitDistributionFulForm() {
-            var keys = this.$refs.tree.getCheckedKeys();
-            var v = JSON.stringify(keys).replace("[", "").replace("]", "");
-            this.distributionFulForm.menuIds = v;
-            console.log(this.distributionFulForm.menuIds);
-            saveRolePermissons(this.distributionFulForm).then((res) => {
-                res = res.data;
-                if (res.code == 200) {
-                    popup("操作成功");
-                    this.distributionFulVisable = false;
-                    this.distributionFulForm = {};
-                    this.default_checked_mid = [];
-                    this.fuloptions = [];
-                } else {
-                    popup(res.msg, "error");
+            /*弹出修改表单，将当前行数据赋值给 editRoleForm 和 editRoleRow，并显示对话框*/
+            editRole(row) {
+                this.editRoleForm = { ...row };
+                this.editRoleRow = { ...row };
+                this.dialogVisible = true;
+            },
+            /*条件搜索方法，调用 init 方法重新获取角色列表数据*/
+            subSearchForm() {
+                this.init();
+            },
+            /*对接后端修改角色接口的方法，检查是否有修改内容，有则调用 edit_role API 修改角色信息*/
+            submitEditForm() {
+                if (
+                    this.editRoleForm.info == this.editRoleRow.info &&
+                    this.editRoleForm.state == this.editRoleRow.state
+                ) {
+                    // 如果没有更改内容，弹出警告提示
+                    popup("您没有更改内容", "warning");
+                    return;
                 }
-            });
-            this.distributionFulVisable = false;
-        },
-        celDistributionFul() {
-            this.default_checked_mid = [];
-            this.fuloptions = [];
-            this.distributionFulForm = {};
-            this.distributionFulVisable = false;
-        },
-    },
-    created() {
-        this.init();
-    },
+                edit_role (this.editRoleForm).then ((res) => {
+res = res.data;
+if (res.code == 200) {
+// 如果修改成功，弹出操作成功提示
+popup ("操作成功");
+// 清空编辑表单数据
+this.editRoleForm = {};
+// 清空原始行数据
+this.editRoleRow = {};
+// 关闭对话框
+this.dialogVisible = false;
+// 更新搜索表单的状态为 “0”（正常）
+this.roleSearchForm.state = "0";
+// 重新初始化角色列表
+this.init ();
+} else {
+// 如果修改失败，弹出错误提示
+popup (res.msg, "error");
+}
+});
+},
+/修改角色重置按钮方法，将 editRoleRow 数据赋值给 editRoleForm，实现表单重置/
+resetEditForm() {
+this.editRoleForm = {...this.editRoleRow };
+},
+/创建新角色方法，验证表单数据，通过后调用 save_role API 创建角色/
+submitNewForm (formName) {
+this.$refs [formName].validate ((valid) => {
+if (valid) {
+console.log (this.newRoleForm);
+save_role (this.newRoleForm).then ((res) => {
+res = res.data;
+if (res.code == 200) {
+// 如果创建成功，弹出操作成功提示
+popup ("操作成功");
+// 清空创建表单数据
+this.newRoleForm = {};
+// 关闭创建角色对话框
+this.newRoleVisable = false;
+// 重新初始化角色列表
+this.init ();
+} else {
+// 如果创建失败，弹出错误提示
+popup (res.msg, "error");
+}
+});
+}
+});
+},
+// 重置创建角色表单数据的方法
+resetNewForm () {
+this.newRoleForm = {};
+},
+// 权限分配相关方法
+// 授权按钮点击方法，设置 distributionFulForm 的 rid 属性，获取权限数据并显示权限分配对话框
+checkPermissons (rid) {
+this.distributionFulForm.rid = rid;
+this.default_checked_mid = [];
+checkPermissons (rid).then ((res) => {
+res = res.data;
+if (res.code == 200) {
+// 获取权限菜单数据
+this.fuloptions = res.data.menus;
+// 获取默认选中的权限菜单 id 数组并排序
+this.default_checked_mid = res.data.menuIds.sort ((x, y) => x - y);
+console.log (typeof this.default_checked_mid);
+console.log (this.default_checked_mid);
+} else {
+// 如果获取权限数据失败，弹出错误提示
+popup (res.msg, "error");
+}
+});
+this.distributionFulVisable = true;
+},
+// 提交权限分配表单的方法，获取选中的权限节点键，设置 distributionFulForm 的 menuIds 属性，调用 saveRolePermissons API 保存权限分配
+submitDistributionFulForm () {
+var keys = this.$refs.tree.getCheckedKeys ();
+var v = JSON.stringify (keys).replace ("[", "").replace ("]","");
+this.distributionFulForm.menuIds = v;
+console.log (this.distributionFulForm.menuIds);
+saveRolePermissons (this.distributionFulForm).then ((res) => {
+res = res.data;
+if (res.code == 200) {
+// 如果保存成功，弹出操作成功提示
+popup ("操作成功");
+// 关闭权限分配对话框
+this.distributionFulVisable = false;
+// 清空权限分配表单数据
+this.distributionFulForm = {};
+// 清空默认选中的权限节点键数组
+this.default_checked_mid = [];
+// 清空权限选项数据
+this.fuloptions = [];
+} else {
+// 如果保存失败，弹出错误提示
+popup (res.msg, "error");
+}
+});
+this.distributionFulVisable = false;
+},
+// 取消权限分配的方法，清空相关数据并关闭对话框
+celDistributionFul () {
+this.default_checked_mid = [];
+this.fuloptions = [];
+this.distributionFulForm = {};
+this.distributionFulVisable = false;
+},
+},
+// 组件创建时调用 init 方法初始化数据
+created () {
+this.init ();
+},
 };
 </script>
+
+### `<style>` 部分
+```css
 <style>
-.search {
-    display: inline-block;
-    margin: 0 auto;
-    height: 51px;
-    line-height: 51px;
-}
+    /* 搜索区域的样式，内联块显示，居中，高度 51px，行高 51px */
+  .search {
+        display: inline-block;
+        margin: 0 auto;
+        height: 51px;
+        line-height: 51px;
+    }
 
-.search .column {
-    display: inline-block;
-    margin: 0 auto;
-    margin-right: 2px;
-    line-height: 48px;
-    height: 51px;
-}
+    /* 搜索区域内列的样式，内联块显示，居中，右侧外边距 2px，行高 48px，高度 51px */
+  .search.column {
+        display: inline-block;
+        margin: 0 auto;
+        margin-right: 2px;
+        line-height: 48px;
+        height: 51px;
+    }
 </style>
\ No newline at end of file