From c93faf8e2d912027129f64688a09f87a27010102 Mon Sep 17 00:00:00 2001
From: dwj <2793858211@qq.com>
Date: Wed, 18 Dec 2024 17:22:25 +0800
Subject: [PATCH] .

---
 src/views/oms/order/deliverOrderList.vue | 221 +++++++++++++----------
 1 file changed, 126 insertions(+), 95 deletions(-)

diff --git a/src/views/oms/order/deliverOrderList.vue b/src/views/oms/order/deliverOrderList.vue
index cc89b2f..029535e 100644
--- a/src/views/oms/order/deliverOrderList.vue
+++ b/src/views/oms/order/deliverOrderList.vue
@@ -1,99 +1,130 @@
-<template> 
-  <div class="app-container">
-    <el-card class="operate-container" shadow="never">
-      <i class="el-icon-tickets"></i>
-      <span>发货列表</span>
-    </el-card>
-    <div class="table-container">
-      <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>
-        <el-table-column label="配送方式" width="160" align="center">
-          <template slot-scope="scope">
-            <el-select placeholder="请选择物流公司"
-                       v-model="scope.row.deliveryCompany"
-                       size="small">
-              <el-option v-for="item in companyOptions"
-                         :key="item"
-                         :label="item"
-                         :value="item">
-              </el-option>
-            </el-select>
-          </template>
-        </el-table-column>
-        <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 style="margin-top: 15px;text-align: center">
-        <el-button @click="cancel">取消</el-button>
-        <el-button @click="confirm" type="primary">确定</el-button>
-      </div>
+<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="请选择物流公司"
+                                   v-model="scope.row.deliveryCompany"
+                                   size="small">
+                            <el-option v-for="item in companyOptions"
+                                       :key="item"
+                                       :label="item"
+                                       :value="item">
+                            </el-option>
+                        </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>
-  </div>
 </template>
-<script>
-  import {deliveryOrder} from '@/api/order'
-  const defaultLogisticsCompanies=["顺丰快递","圆通快递","中通快递","韵达快递"];
-  export default {
-    name: 'deliverOrderList',
-    data() {
-      return {
-        list:[],
-        companyOptions:defaultLogisticsCompanies
-      }
-    },
-    created(){
-      this.list= this.$route.query.list;
-      //当list不为数组时转换为数组
-      if(this.list instanceof Array===false){
-        this.list=[];
-      }
-    },
-    methods:{
-      cancel(){
-        this.$router.back();
-      },
-      confirm(){
-        this.$confirm('是否要进行发货操作?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          deliveryOrder(this.list).then(response=>{
-            this.$router.back();
-            this.$message({
-              type: 'success',
-              message: '发货成功!'
-            });
-          });
-        }).catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消发货'
-          });
-        });
-      }
-    }
-  }
-</script>
-<style></style>
 
 
+    <script>
+        // 从 '@/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 重新赋值为空数组，进行数据格式的校验和初始化处理
+                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({
+                                type: 'success',
+                                message: '发货成功!'
+                            });
+                        });
+                    }).catch(() => {
+                        // 如果用户在确认框中点击了 "取消" 按钮或者请求出现异常等情况（通过 catch 方法捕获），则使用 $message 方法弹出一个提示框，显示 "已取消发货" 的消息，告知用户发货操作已取消
+                        this.$message({
+                            type: 'info',
+                            message: '已取消发货'
+                        });
+                    });
+                }
+            }
+        }
+    </script>
+<style></style>