.

src/views/oms/order/deliverOrderList.vue

@@ -1,28 +1,40 @@
-<template> 
+<template>
+    <!-- 创建一个类名为 "app-container" 的 div 作为整体页面的容器 -->
     <div class="app-container">
+        <!-- 使用 el-card 组件创建一个卡片式容器，设置类名为 "operate-container" 并取消阴影效果，用于展示页面相关标题 -->
         <el-card class="operate-container" shadow="never">
+            <!-- 使用一个图标元素（el-icon-tickets）展示一个图标 -->
             <i class="el-icon-tickets"></i>
+            <!-- 展示一段文本，内容为 "发货列表"，用于表明该页面主要展示的内容 -->
             <span>发货列表</span>
         </el-card>
+        <!-- 创建一个类名为 "table-container" 的 div，用于放置展示发货相关信息的表格以及操作按钮等内容 -->
         <div class="table-container">
+            <!-- el-table 组件创建一个表格，设置引用名称、宽度以及绑定数据等属性，同时设置表格显示边框 -->
             <el-table ref="deliverOrderTable"
                       style="width: 100%;"
                       :data="list" border>
+                <!-- 定义表格列，用于展示订单编号信息，设置宽度和文本对齐方式，通过插槽作用域获取对应行数据中的订单编号并展示 -->
                 <el-table-column label="订单编号" width="180" align="center">
                     <template slot-scope="scope">{{scope.row.orderSn}}</template>
                 </el-table-column>
+                <!-- 定义表格列，用于展示收货人信息，设置宽度和文本对齐方式，通过插槽作用域获取对应行数据中的收货人姓名并展示 -->
                 <el-table-column label="收货人" width="180" align="center">
                     <template slot-scope="scope">{{scope.row.receiverName}}</template>
                 </el-table-column>
+                <!-- 定义表格列，用于展示手机号码信息，设置宽度和文本对齐方式，通过插槽作用域获取对应行数据中的手机号码并展示 -->
                 <el-table-column label="手机号码" width="160" align="center">
                     <template slot-scope="scope">{{scope.row.receiverPhone}}</template>
                 </el-table-column>
+                <!-- 定义表格列，用于展示邮政编码信息，设置宽度和文本对齐方式，通过插槽作用域获取对应行数据中的邮政编码并展示 -->
                 <el-table-column label="邮政编码" width="160" align="center">
                     <template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
                 </el-table-column>
+                <!-- 定义表格列，用于展示收货地址信息，设置文本对齐方式，通过插槽作用域获取对应行数据中的收货地址并展示 -->
                 <el-table-column label="收货地址" align="center">
                     <template slot-scope="scope">{{scope.row.address}}</template>
                 </el-table-column>
+                <!-- 定义表格列，用于展示配送方式信息，通过插槽作用域在每个单元格内创建一个下拉选择框，用于选择物流公司，绑定对应行数据中的 deliveryCompany 属性，设置占位提示文本和小尺寸样式，通过循环 companyOptions 数据动态生成下拉选项 -->
                 <el-table-column label="配送方式" width="160" align="center">
                     <template slot-scope="scope">
                         <el-select placeholder="请选择物流公司"
@@ -36,47 +48,67 @@
                         </el-select>
                     </template>
                 </el-table-column>
+                <!-- 定义表格列，用于展示物流单号信息，通过插槽作用域在每个单元格内创建一个小尺寸的输入框，双向绑定对应行数据中的 deliverySn 属性，用于输入物流单号 -->
                 <el-table-column label="物流单号" width="180" align="center">
                     <template slot-scope="scope">
                         <el-input size="small" v-model="scope.row.deliverySn"></el-input>
                     </template>
                 </el-table-column>
             </el-table>
+            <!-- 创建一个 div，设置上边距、文本居中对齐，用于放置操作按钮 -->
             <div style="margin-top: 15px;text-align: center">
+                <!-- el-button 组件创建一个按钮，点击时调用 "cancel" 方法，按钮文本为 "取消" -->
                 <el-button @click="cancel">取消</el-button>
+                <!-- el-button 组件创建一个按钮，点击时调用 "confirm" 方法，按钮类型设置为 "primary"（通常表示主要操作按钮，样式上可能会突出显示），按钮文本为 "确定" -->
                 <el-button @click="confirm" type="primary">确定</el-button>
             </div>
         </div>
     </div>
 </template>
+
+
     <script>
-  import {deliveryOrder} from '@/api/order'
+        // 从 '@/api/order' 文件中导入 deliveryOrder 函数，推测该函数用于向服务器发送发货相关的请求，实现发货操作
+        import {deliveryOrder} from '@/api/order';
+
+        // 定义一个常量数组，包含一些常见的物流公司名称，作为默认的物流公司选项
         const defaultLogisticsCompanies = ["顺丰快递", "圆通快递", "中通快递", "韵达快递"];
+
+        // 导出一个 Vue 组件配置对象，用于定义组件的各种属性、数据、方法等内容
         export default {
+            // 组件的名称，用于在 Vue 实例或开发者工具中标识该组件，这里组件名为 "deliverOrderList"
             name: 'deliverOrderList',
             data() {
                 return {
+                    // 用于存储发货列表相关的数据，初始为空数组，后续会通过路由传参等方式获取并填充实际数据
                     list: [],
+                    // 用于存储物流公司选项数据，初始赋值为 defaultLogisticsCompanies 常量数组，用于下拉选择框展示物流公司选项
                     companyOptions: defaultLogisticsCompanies
                 }
             },
             created() {
+                // 在组件被创建时（生命周期钩子函数），从路由查询参数（this.$route.query）中获取名为 "list" 的数据，并赋值给 list 属性，用于初始化表格展示的数据
                 this.list = this.$route.query.list;
-      //当list不为数组时转换为数组
+                // 判断获取到的 list 是否不是数组类型，如果不是，则将 list 重新赋值为空数组，进行数据格式的校验和初始化处理
                 if (this.list instanceof Array === false) {
                     this.list = [];
                 }
             },
             methods: {
+                // 定义名为 "cancel" 的方法，用于处理取消操作，通过 Vue 路由（this.$router）的 back 方法实现返回上一页的功能
                 cancel() {
                     this.$router.back();
-      },
+                }
+                // 定义名为 "confirm" 的方法，用于处理确定发货的操作
                 confirm() {
+                    // 使用 $confirm 方法弹出一个确认框，询问用户是否要进行发货操作，配置了确认按钮文本、取消按钮文本以及提示框的类型为 "warning"（警告类型，通常显示为黄色背景等样式）
                     this.$confirm('是否要进行发货操作?', '提示', {
                         confirmButtonText: '确定',
                         cancelButtonText: '取消',
                         type: 'warning'
                     }).then(() => {
+                        // 如果用户在确认框中点击了 "确定" 按钮，则调用 "deliveryOrder" 函数（向服务器发送发货请求），传入 list 数据（包含要发货的订单相关信息）
+                        // 在请求成功后（通过 then 方法的回调），通过 Vue 路由（this.$router）的 back 方法返回上一页，并使用 $message 方法弹出一个提示框，显示 "发货成功!" 的消息，表示发货操作已成功完成
                         deliveryOrder(this.list).then(response => {
                             this.$router.back();
                             this.$message({
@@ -85,6 +117,7 @@
                             });
                         });
                     }).catch(() => {
+                        // 如果用户在确认框中点击了 "取消" 按钮或者请求出现异常等情况（通过 catch 方法捕获），则使用 $message 方法弹出一个提示框，显示 "已取消发货" 的消息，告知用户发货操作已取消
                         this.$message({
                             type: 'info',
                             message: '已取消发货'
@@ -95,5 +128,3 @@
         }
     </script>
 <style></style>
-
-