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

---
 src/views/oms/order/orderDetail.vue | 1136 +++++++++++++++------------
 1 file changed, 641 insertions(+), 495 deletions(-)

diff --git a/src/views/oms/order/orderDetail.vue b/src/views/oms/order/orderDetail.vue
index c857042..133f1c2 100644
--- a/src/views/oms/order/orderDetail.vue
+++ b/src/views/oms/order/orderDetail.vue
@@ -179,536 +179,682 @@
           </el-col>
         </el-row>
       </div>
-      <div style="margin-top: 20px">
-        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
-        <span class="font-small">操作信息</span>
-      </div>
-      <el-table style="margin-top: 20px;width: 100%"
-                ref="orderHistoryTable"
-                :data="order.historyList" border>
-        <el-table-column label="操作者"  width="120" align="center">
-          <template slot-scope="scope">
+<div style="margin-top: 20px">
+    <!-- 使用 svg-icon 组件展示一个图标，设置图标类名为 "marker"，并指定图标颜色 -->
+    <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
+    <!-- 展示一段文本，应用 "font-small" 类名，用于设置较小字体样式，文本内容为 "操作信息" -->
+    <span class="font-small">操作信息</span>
+</div>
+<!-- 使用 el-table 组件展示表格数据，设置了一些样式属性、引用以及绑定数据等 -->
+<el-table style="margin-top: 20px;width: 100%"
+          ref="orderHistoryTable"
+          :data="order.historyList" border>
+    <!-- 定义表格列，展示 "操作者" 信息，设置列宽度、文本对齐方式，并通过插槽作用域获取对应行数据展示 -->
+    <el-table-column label="操作者"  width="120" align="center">
+        <template slot-scope="scope">
             {{scope.row.operateMan}}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作时间"  width="160" align="center">
-          <template slot-scope="scope">
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "操作时间" 信息，设置列宽度、文本对齐方式，通过调用 formatTime 方法格式化时间后展示 -->
+    <el-table-column label="操作时间"  width="160" align="center">
+        <template slot-scope="scope">
             {{formatTime(scope.row.createTime)}}
-          </template>
-        </el-table-column>
-        <el-table-column label="订单状态"  width="120" align="center">
-          <template slot-scope="scope">
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "订单状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatStatus 过滤器对状态进行格式化后展示 -->
+    <el-table-column label="订单状态"  width="120" align="center">
+        <template slot-scope="scope">
             {{scope.row.orderStatus | formatStatus}}
-          </template>
-        </el-table-column>
-        <el-table-column label="付款状态"  width="120" align="center">
-          <template slot-scope="scope">
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "付款状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatPayStatus 过滤器对付款状态进行格式化后展示 -->
+    <el-table-column label="付款状态"  width="120" align="center">
+        <template slot-scope="scope">
             {{scope.row.orderStatus | formatPayStatus}}
-          </template>
-        </el-table-column>
-        <el-table-column label="发货状态"  width="120" align="center">
-          <template slot-scope="scope">
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "发货状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatDeliverStatus 过滤器对发货状态进行格式化后展示 -->
+    <el-table-column label="发货状态"  width="120" align="center">
+        <template slot-scope="scope">
             {{scope.row.orderStatus | formatDeliverStatus}}
-          </template>
-        </el-table-column>
-        <el-table-column label="备注" align="center">
-          <template slot-scope="scope">
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "备注" 信息，设置文本对齐方式，通过插槽作用域获取对应行的备注数据展示 -->
+    <el-table-column label="备注" align="center">
+        <template slot-scope="scope">
             {{scope.row.note}}
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
+        </template>
+    </el-table-column>
+</el-table>
+<!-- 使用 el-card 组件包裹内容（此处 el-card 结束标签在后面代码中未完整展示，但推测是用于布局和样式统一等作用） -->
+<el-card>
+    <!-- el-dialog 组件用于创建一个对话框，用于修改收货人信息，设置对话框标题、绑定可见性以及宽度等属性 -->
     <el-dialog title="修改收货人信息"
                :visible.sync="receiverDialogVisible"
                width="40%">
-      <el-form :model="receiverInfo"
-               ref="receiverInfoForm"
-               label-width="150px">
-        <el-form-item label="收货人姓名：">
-          <el-input v-model="receiverInfo.receiverName" style="width: 200px"></el-input>
-        </el-form-item>
-        <el-form-item label="手机号码：">
-          <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
-          </el-input>
-        </el-form-item>
-        <el-form-item label="邮政编码：">
-          <el-input v-model="receiverInfo.receiverPostCode" style="width: 200px">
-          </el-input>
-        </el-form-item>
-        <el-form-item label="所在区域：">
-          <v-distpicker :province="receiverInfo.receiverProvince"
-                        :city="receiverInfo.receiverCity"
-                        :area="receiverInfo.receiverRegion"
-                        @selected="onSelectRegion"></v-distpicker>
-        </el-form-item>
-        <el-form-item label="详细地址：">
-          <el-input v-model="receiverInfo.receiverDetailAddress" type="textarea" rows="3">
-          </el-input>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-      <el-button @click="receiverDialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
-      </span>
+        <!-- el-form 组件用于创建表单，绑定数据模型为 receiverInfo，设置表单引用以及标签宽度等属性 -->
+        <el-form :model="receiverInfo"
+                 ref="receiverInfoForm"
+                 label-width="150px">
+            <!-- el-form-item 组件用于定义表单中的一项，此处展示 "收货人姓名" 输入框 -->
+            <el-form-item label="收货人姓名：">
+                <el-input v-model="receiverInfo.receiverName" style="width: 200px"></el-input>
+            </el-form-item>
+            <!-- 类似上述，展示 "手机号码" 输入框 -->
+            <el-form-item label="手机号码：">
+                <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
+                </el-input>
+            </el-form-item>
+            <!-- 展示 "邮政编码" 输入框 -->
+            <el-form-item label="邮政编码：">
+                <el-input v-model="receiverInfo.receiverPostCode" style="width: 200px">
+                </el-input>
+            </el-form-item>
+            <!-- 使用 v-distpicker 组件（可能是用于地区选择的第三方组件），绑定省份、城市、地区数据，并监听 selected 事件 -->
+            <el-form-item label="所在区域：">
+                <v-distpicker :province="receiverInfo.receiverProvince"
+                              :city="receiverInfo.receiverCity"
+                              :area="receiverInfo.receiverRegion"
+                              @selected="onSelectRegion"></v-distpicker>
+            </el-form-item>
+            <!-- 展示 "详细地址" 输入框，设置为文本域类型，指定行数 -->
+            <el-form-item label="详细地址：">
+                <el-input v-model="receiverInfo.receiverDetailAddress" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <!-- 在对话框的 footer 插槽中定义两个按钮，一个用于取消（点击隐藏对话框），一个用于确定（点击调用 handleUpdateReceiverInfo 方法） -->
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="receiverDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
+        </span>
     </el-dialog>
+    <!-- 另一个 el-dialog 组件，用于修改费用信息，同样设置标题、可见性绑定和宽度等属性 -->
     <el-dialog title="修改费用信息"
                :visible.sync="moneyDialogVisible"
                width="40%">
-      <div class="table-layout">
-        <el-row>
-          <el-col :span="6" class="table-cell-title">商品合计</el-col>
-          <el-col :span="6" class="table-cell-title">运费</el-col>
-          <el-col :span="6" class="table-cell-title">优惠券</el-col>
-          <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6" class="table-cell">￥{{order.totalAmount}}</el-col>
-          <el-col :span="6" class="table-cell">
-            <el-input v-model.number="moneyInfo.freightAmount" size="mini"><template slot="prepend">￥</template></el-input>
-          </el-col>
-          <el-col :span="6" class="table-cell">-￥{{order.couponAmount}}</el-col>
-          <el-col :span="6" class="table-cell">-￥{{order.integrationAmount}}</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6" class="table-cell-title">活动优惠</el-col>
-          <el-col :span="6" class="table-cell-title">折扣金额</el-col>
-          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
-          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6" class="table-cell">-￥{{order.promotionAmount}}</el-col>
-          <el-col :span="6" class="table-cell">
-            <el-input v-model.number="moneyInfo.discountAmount" size="mini"><template slot="prepend">-￥</template></el-input>
-          </el-col>
-          <el-col :span="6" class="table-cell">
-            <span class="color-danger">￥{{order.totalAmount+moneyInfo.freightAmount}}</span>
-          </el-col>
-          <el-col :span="6" class="table-cell">
-            <span class="color-danger">￥{{order.payAmount+moneyInfo.freightAmount-moneyInfo.discountAmount}}</span>
-          </el-col>
-        </el-row>
-      </div>
-      <span slot="footer" class="dialog-footer">
-      <el-button @click="moneyDialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="handleUpdateMoneyInfo">确 定</el-button>
-      </span>
+        <!-- 内部使用类名为 "table-layout" 的 div 进行布局，通过多个 el-row 和 el-col 组合展示费用相关信息表格形式 -->
+        <div class="table-layout">
+            <el-row>
+                <el-col :span="6" class="table-cell-title">商品合计</el-col>
+                <el-col :span="6" class="table-cell-title">运费</el-col>
+                <el-col :span="6" class="table-cell-title">优惠券</el-col>
+                <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="6" class="table-cell">￥{{order.totalAmount}}</el-col>
+                <el-col :span="6" class="table-cell">
+                    <el-input v-model.number="moneyInfo.freightAmount" size="mini"><template slot="prepend">￥</template></el-input>
+                </el-col>
+                <el-col :span="6" class="table-cell">-￥{{order.couponAmount}}</el-col>
+                <el-col :span="6" class="table-cell">-￥{{order.integrationAmount}}</el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="6" class="table-cell-title">活动优惠</el-col>
+                <el-col :span="6" class="table-cell-title">折扣金额</el-col>
+                <el-col :span="6" class="table-cell-title">订单总金额</el-col>
+                <el-col :span="6" class="table-cell-title">应付款金额</el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="6" class="table-cell">-￥{{order.promotionAmount}}</el-col>
+                <el-col :span="6" class="table-cell">
+                    <el-input v-model.number="moneyInfo.discountAmount" size="mini"><template slot="prepend">-￥</template></el-input>
+                </el-col>
+                <el-col :span="6" class="table-cell">
+                    <span class="color-danger">￥{{order.totalAmount+moneyInfo.freightAmount}}</span>
+                </el-col>
+                <el-col :span="6" class="table-cell">
+                    <span class="color-danger">￥{{order.payAmount+moneyInfo.freightAmount-moneyInfo.discountAmount}}</span>
+                </el-col>
+            </el-row>
+        </div>
+        <!-- 在对话框的 footer 插槽中同样定义取消和确定按钮，确定按钮点击调用 handleUpdateMoneyInfo 方法 -->
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="moneyDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleUpdateMoneyInfo">确 定</el-button>
+        </span>
     </el-dialog>
+    <!-- el-dialog 组件用于发送站内信，设置相关属性 -->
     <el-dialog title="发送站内信"
                :visible.sync="messageDialogVisible"
                width="40%">
-      <el-form :model="message"
-               ref="receiverInfoForm"
-               label-width="150px">
-        <el-form-item label="标题：">
-          <el-input v-model="message.title" style="width: 200px"></el-input>
-        </el-form-item>
-        <el-form-item label="内容：">
-          <el-input v-model="message.content" type="textarea" rows="3">
-          </el-input>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="messageDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleSendMessage">确 定</el-button>
-      </span>
+        <el-form :model="message"
+                 ref="receiverInfoForm"
+                 label-width="150px">
+            <el-form-item label="标题：">
+                <el-input v-model="message.title" style="width: 200px"></el-input>
+            </el-form-item>
+            <el-form-item label="内容：">
+                <el-input v-model="message.content" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="messageDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleSendMessage">确 定</el-button>
+        </span>
     </el-dialog>
+    <!-- el-dialog 组件用于关闭订单，设置相关属性 -->
     <el-dialog title="关闭订单"
                :visible.sync="closeDialogVisible"
                width="40%">
-      <el-form :model="closeInfo"
-               label-width="150px">
-        <el-form-item label="操作备注：">
-          <el-input v-model="closeInfo.note" type="textarea" rows="3">
-          </el-input>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="closeDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleCloseOrder">确 定</el-button>
-      </span>
+        <el-form :model="closeInfo"
+                 label-width="150px">
+            <el-form-item label="操作备注：">
+                <el-input v-model="closeInfo.note" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="closeDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleCloseOrder">确 定</el-button>
+        </span>
     </el-dialog>
+    <!-- el-dialog 组件用于备注订单，设置相关属性 -->
     <el-dialog title="备注订单"
                :visible.sync="markOrderDialogVisible"
                width="40%">
-      <el-form :model="markInfo"
-               label-width="150px">
-        <el-form-item label="操作备注：">
-          <el-input v-model="markInfo.note" type="textarea" rows="3">
-          </el-input>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="markOrderDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
-      </span>
+        <el-form :model="markInfo"
+                 label-width="150px">
+            <el-form-item label="操作备注：">
+                <el-input v-model="markInfo.note" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="markOrderDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
+        </span>
     </el-dialog>
+    <!-- 使用 logistics-dialog 组件（自定义组件），双向绑定 visible 属性（推测用于控制显示隐藏） -->
     <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
-  </div>
+</el-card>
+</div>
 </template>
-<script>
-  import {getOrderDetail,updateReceiverInfo,updateMoneyInfo,closeOrder,updateOrderNote,deleteOrder} from '@/api/order';
-  import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
-  import {formatDate} from '@/utils/date';
-  import VDistpicker from 'v-distpicker';
-  const defaultReceiverInfo = {
-    orderId:null,
-    receiverName:null,
-    receiverPhone:null,
-    receiverPostCode:null,
-    receiverDetailAddress:null,
-    receiverProvince:null,
-    receiverCity:null,
-    receiverRegion:null,
-    status:null
-  };
-  export default {
-    name: 'orderDetail',
-    components: { VDistpicker, LogisticsDialog},
-    data() {
-      return {
-        id: null,
-        order: {},
-        receiverDialogVisible:false,
-        receiverInfo:Object.assign({},defaultReceiverInfo),
-        moneyDialogVisible:false,
-        moneyInfo:{orderId:null, freightAmount:0, discountAmount:0,status:null},
-        messageDialogVisible:false,
-        message: {title:null, content:null},
-        closeDialogVisible:false,
-        closeInfo:{note:null,id:null},
-        markOrderDialogVisible:false,
-        markInfo:{note:null},
-        logisticsDialogVisible:false
-      }
-    },
-    created() {
-      this.id = this.list = this.$route.query.id;
-      getOrderDetail(this.id).then(response => {
-        this.order = response.data;
-      });
-    },
-    filters: {
-      formatNull(value) {
-        if(value===undefined||value===null||value===''){
-          return '暂无';
-        }else{
-          return value;
-        }
-      },
-      formatLongText(value) {
-        if(value===undefined||value===null||value===''){
-          return '暂无';
-        }else if(value.length>8){
-          return value.substr(0, 8) + '...';
-        }else{
-          return value;
-        }
-      },
-      formatPayType(value) {
-        if (value === 1) {
-          return '支付宝';
-        } else if (value === 2) {
-          return '微信';
-        } else {
-          return '未支付';
-        }
-      },
-      formatSourceType(value) {
-        if (value === 1) {
-          return 'APP订单';
-        } else {
-          return 'PC订单';
-        }
-      },
-      formatOrderType(value) {
-        if (value === 1) {
-          return '秒杀订单';
-        } else {
-          return '正常订单';
-        }
-      },
-      formatAddress(order) {
-        let str = order.receiverProvince;
-        if (order.receiverCity != null) {
-          str += "  " + order.receiverCity;
-        }
-        str += "  " + order.receiverRegion;
-        str += "  " + order.receiverDetailAddress;
-        return str;
-      },
-      formatStatus(value) {
-        if (value === 1) {
-          return '待发货';
-        } else if (value === 2) {
-          return '已发货';
-        } else if (value === 3) {
-          return '已完成';
-        } else if (value === 4) {
-          return '已关闭';
-        } else if (value === 5) {
-          return '无效订单';
-        } else {
-          return '待付款';
-        }
-      },
-      formatPayStatus(value) {
-        if (value === 0) {
-          return '未支付';
-        } else if(value===4){
-          return '已退款';
-        }else{
-          return '已支付';
-        }
-      },
-      formatDeliverStatus(value) {
-        if (value === 0||value === 1) {
-          return '未发货';
-        } else {
-          return '已发货';
-        }
-      },
-      formatProductAttr(value){
-        if(value==null){
-          return '';
-        }else{
-          let attr = JSON.parse(value);
-          let result='';
-          for(let i=0;i<attr.length;i++){
-            result+=attr[i].key;
-            result+=":";
-            result+=attr[i].value;
-            result+=";";
-          }
-          return result;
-        }
-      }
-    },
-    methods: {
-      onSelectRegion(data){
-        this.receiverInfo.receiverProvince=data.province.value;
-        this.receiverInfo.receiverCity=data.city.value;
-        this.receiverInfo.receiverRegion=data.area.value;
-      },
-      formatTime(time) {
-        if (time == null || time === '') {
-          return '';
-        }
-        let date = new Date(time);
-        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-      },
-      formatStepStatus(value) {
-        if (value === 1) {
-          //待发货
-          return 2;
-        } else if (value === 2) {
-          //已发货
-          return 3;
-        } else if (value === 3) {
-          //已完成
-          return 4;
-        }else {
-          //待付款、已关闭、无限订单
-          return 1;
-        }
-      },
-      showUpdateReceiverDialog(){
-        this.receiverDialogVisible=true;
-        this.receiverInfo={
-          orderId:this.order.id,
-          receiverName:this.order.receiverName,
-          receiverPhone:this.order.receiverPhone,
-          receiverPostCode:this.order.receiverPostCode,
-          receiverDetailAddress:this.order.receiverDetailAddress,
-          receiverProvince:this.order.receiverProvince,
-          receiverCity:this.order.receiverCity,
-          receiverRegion:this.order.receiverRegion,
-          status:this.order.status
-        }
-      },
-      handleUpdateReceiverInfo(){
-        this.$confirm('是否要修改收货信息?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          updateReceiverInfo(this.receiverInfo).then(response=>{
-            this.receiverDialogVisible=false;
-            this.$message({
-              type: 'success',
-              message: '修改成功!'
-            });
-            getOrderDetail(this.id).then(response => {
-              this.order = response.data;
-            });
-          });
-        });
-      },
-      showUpdateMoneyDialog(){
-        this.moneyDialogVisible=true;
-        this.moneyInfo.orderId=this.order.id;
-        this.moneyInfo.freightAmount=this.order.freightAmount;
-        this.moneyInfo.discountAmount=this.order.discountAmount;
-        this.moneyInfo.status=this.order.status;
-      },
-      handleUpdateMoneyInfo(){
-        this.$confirm('是否要修改费用信息?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          updateMoneyInfo(this.moneyInfo).then(response=>{
-            this.moneyDialogVisible=false;
-            this.$message({
-              type: 'success',
-              message: '修改成功!'
-            });
-            getOrderDetail(this.id).then(response => {
-              this.order = response.data;
-            });
-          });
-        });
-      },
-      showMessageDialog(){
-        this.messageDialogVisible=true;
-        this.message.title=null;
-        this.message.content=null;
-      },
-      handleSendMessage(){
-        this.$confirm('是否要发送站内信?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.messageDialogVisible=false;
-          this.$message({
-            type: 'success',
-            message: '发送成功!'
-          });
-        });
-      },
-      showCloseOrderDialog(){
-        this.closeDialogVisible=true;
-        this.closeInfo.note=null;
-        this.closeInfo.id=this.id;
-      },
-      handleCloseOrder(){
-        this.$confirm('是否要关闭?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-            let params = new URLSearchParams();
-            params.append("ids",[this.closeInfo.id]);
-            params.append("note",this.closeInfo.note);
-            closeOrder(params).then(response=>{
-              this.closeDialogVisible=false;
-              this.$message({
-                type: 'success',
-                message: '订单关闭成功!'
+<div style="margin-top: 20px">
+    <!-- 使用 svg-icon 组件展示一个图标，设置图标类名为 "marker"，并指定图标颜色 -->
+    <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
+    <!-- 展示一段文本，应用 "font-small" 类名，用于设置较小字体样式，文本内容为 "操作信息" -->
+    <span class="font-small">操作信息</span>
+</div>
+<!-- 使用 el-table 组件展示表格数据，设置了一些样式属性、引用以及绑定数据等 -->
+<el-table style="margin-top: 20px;width: 100%"
+          ref="orderHistoryTable"
+          :data="order.historyList" border>
+    <!-- 定义表格列，展示 "操作者" 信息，设置列宽度、文本对齐方式，并通过插槽作用域获取对应行数据展示 -->
+    <el-table-column label="操作者"  width="120" align="center">
+        <template slot-scope="scope">
+            {{scope.row.operateMan}}
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "操作时间" 信息，设置列宽度、文本对齐方式，通过调用 formatTime 方法格式化时间后展示 -->
+    <el-table-column label="操作时间"  width="160" align="center">
+        <template slot-scope="scope">
+            {{formatTime(scope.row.createTime)}}
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "订单状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatStatus 过滤器对状态进行格式化后展示 -->
+    <el-table-column label="订单状态"  width="120" align="center">
+        <template slot-scope="scope">
+            {{scope.row.orderStatus | formatStatus}}
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "付款状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatPayStatus 过滤器对付款状态进行格式化后展示 -->
+    <el-table-column label="付款状态"  width="120" align="center">
+        <template slot-scope="scope">
+            {{scope.row.orderStatus | formatPayStatus}}
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "发货状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatDeliverStatus 过滤器对发货状态进行格式化后展示 -->
+    <el-table-column label="发货状态"  width="120" align="center">
+        <template slot-scope="scope">
+            {{scope.row.orderStatus | formatDeliverStatus}}
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "备注" 信息，设置文本对齐方式，通过插槽作用域获取对应行的备注数据展示 -->
+    <el-table-column label="备注" align="center">
+        <template slot-scope="scope">
+            {{scope.row.note}}
+        </template>
+    </el-table-column>
+</el-table>
+<!-- 使用 el-card 组件包裹内容（此处 el-card 结束标签在后面代码中未完整展示，但推测是用于布局和样式统一等作用） -->
+<el-card>
+    <!-- el-dialog 组件用于创建一个对话框，用于修改收货人信息，设置对话框标题、绑定可见性以及宽度等属性 -->
+    <el-dialog title="修改收货人信息"
+               :visible.sync="receiverDialogVisible"
+               width="40%">
+        <!-- el-form 组件用于创建表单，绑定数据模型为 receiverInfo，设置表单引用以及标签宽度等属性 -->
+        <el-form :model="receiverInfo"
+                 ref="receiverInfoForm"
+                 label-width="150px">
+            <!-- el-form-item 组件用于定义表单中的一项，此处展示 "收货人姓名" 输入框 -->
+            <el-form-item label="收货人姓名：">
+                <el-input v-model="receiverInfo.receiverName" style="width: 200px"></el-input>
+            </el-form-item>
+            <!-- 类似上述，展示 "手机号码" 输入框 -->
+            <el-form-item label="手机号码：">
+                <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
+                </el-input>
+            </el-form-item>
+            <!-- 展示 "邮政编码" 输入框 -->
+            <el-form-item label="邮政编码：">
+                <el-input v-model="receiverInfo.receiverPostCode" style="width: 200px">
+                </el-input>
+            </el-form-item>
+            <!-- 使用 v-distpicker 组件（可能是用于地区选择的第三方组件），绑定省份、城市、地区数据，并监听 selected 事件 -->
+            <el-form-item label="所在区域：">
+                <v-distpicker :province="receiverInfo.receiverProvince"
+                              :city="receiverInfo.receiverCity"
+                              :area="receiverInfo.receiverRegion"
+                              @selected="onSelectRegion"></v-distpicker>
+            </el-form-item>
+            <!-- 展示 "详细地址" 输入框，设置为文本域类型，指定行数 -->
+            <el-form-item label="详细地址：">
+                <el-input v-model="receiverInfo.receiverDetailAddress" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <!-- 在对话框的 footer 插槽中定义两个按钮，一个用于取消（点击隐藏对话框），一个用于确定（点击调用 handleUpdateReceiverInfo 方法） -->
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="receiverDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
+        </span>
+    </el-dialog>
+    <!-- 另一个 el-dialog 组件，用于修改费用信息，同样设置标题、可见性绑定和宽度等属性 -->
+    <el-dialog title="修改费用信息"
+               :visible.sync="moneyDialogVisible"
+               width="40%">
+        <!-- 内部使用类名为 "table-layout" 的 div 进行布局，通过多个 el-row 和 el-col 组合展示费用相关信息表格形式 -->
+        <div class="table-layout">
+            <el-row>
+                <el-col :span="6" class="table-cell-title">商品合计</el-col>
+                <el-col :span="6" class="table-cell-title">运费</el-col>
+                <el-col :span="6" class="table-cell-title">优惠券</el-col>
+                <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="6" class="table-cell">￥{{order.totalAmount}}</el-col>
+                <el-col :span="6" class="table-cell">
+                    <el-input v-model.number="moneyInfo.freightAmount" size="mini"><template slot="prepend">￥</template></el-input>
+                </el-col>
+                <el-col :span="6" class="table-cell">-￥{{order.couponAmount}}</el-col>
+                <el-col :span="6" class="table-cell">-￥{{order.integrationAmount}}</el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="6" class="table-cell-title">活动优惠</el-col>
+                <el-col :span="6" class="table-cell-title">折扣金额</el-col>
+                <el-col :span="6" class="table-cell-title">订单总金额</el-col>
+                <el-col :span="6" class="table-cell-title">应付款金额</el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="6" class="table-cell">-￥{{order.promotionAmount}}</el-col>
+                <el-col :span="6" class="table-cell">
+                    <el-input v-model.number="moneyInfo.discountAmount" size="mini"><template slot="prepend">-￥</template></el-input>
+                </el-col>
+                <el-col :span="6" class="table-cell">
+                    <span class="color-danger">￥{{order.totalAmount+moneyInfo.freightAmount}}</span>
+                </el-col>
+                <el-col :span="6" class="table-cell">
+                    <span class="color-danger">￥{{order.payAmount+moneyInfo.freightAmount-moneyInfo.discountAmount}}</span>
+                </el-col>
+            </el-row>
+        </div>
+        <!-- 在对话框的 footer 插槽中同样定义取消和确定按钮，确定按钮点击调用 handleUpdateMoneyInfo 方法 -->
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="moneyDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleUpdateMoneyInfo">确 定</el-button>
+        </span>
+    </el-dialog>
+    <!-- el-dialog 组件用于发送站内信，设置相关属性 -->
+    <el-dialog title="发送站内信"
+               :visible.sync="messageDialogVisible"
+               width="40%">
+        <el-form :model="message"
+                 ref="receiverInfoForm"
+                 label-width="150px">
+            <el-form-item label="标题：">
+                <el-input v-model="message.title" style="width: 200px"></el-input>
+            </el-form-item>
+            <el-form-item label="内容：">
+                <el-input v-model="message.content" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="messageDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleSendMessage">确 定</el-button>
+        </span>
+    </el-dialog>
+    <!-- el-dialog 组件用于关闭订单，设置相关属性 -->
+    <el-dialog title="关闭订单"
+               :visible.sync="closeDialogVisible"
+               width="40%">
+        <el-form :model="closeInfo"
+                 label-width="150px">
+            <el-form-item label="操作备注：">
+                <el-input v-model="closeInfo.note" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="closeDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleCloseOrder">确 定</el-button>
+        </span>
+    </el-dialog>
+    <!-- el-dialog 组件用于备注订单，设置相关属性 -->
+    <el-dialog title="备注订单"
+               :visible.sync="markOrderDialogVisible"
+               width="40%">
+        <el-form :model="markInfo"
+                 label-width="150px">
+            <el-form-item label="操作备注：">
+                <el-input v-model="markInfo.note" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="markOrderDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
+        </span>
+    </el-dialog>
+    <!-- 使用 logistics-dialog 组件（自定义组件），双向绑定 visible 属性（推测用于控制显示隐藏） -->
+    <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
+</el-card>
+</div>
+</template>
+
+  <script>
+      {
+          // 定义一个对象（可能是某个 Vue 组件实例相关的方法集合等，从代码结构推测）
+          showUpdateReceiverDialog() {
+              // 将 receiverDialogVisible 属性设置为 true，表示显示更新收货信息的对话框（可能用于控制界面显示隐藏）
+              this.receiverDialogVisible = true;
+              // 构建 receiverInfo 对象，将当前订单（this.order）的各项收货相关信息赋值给它
+              this.receiverInfo = {
+                  orderId: this.order.id,
+                  receiverName: this.order.receiverName,
+                  receiverPhone: this.order.receiverPhone,
+                  receiverPostCode: this.order.receiverPostCode,
+                  receiverDetailAddress: this.order.receiverDetailAddress,
+                  receiverProvince: this.order.receiverProvince,
+                  receiverCity: this.order.receiverCity,
+                  receiverRegion: this.order.receiverRegion,
+                  status: this.order.status
+              }
+          },
+          handleUpdateReceiverInfo() {
+              // 弹出一个确认框，询问用户是否要修改收货信息，设置确认按钮文本、取消按钮文本以及提示框类型为警告类型
+              this.$confirm('是否要修改收货信息?', '提示', {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'warning'
+              }).then(() => {
+                  // 调用 updateReceiverInfo 函数（假设是用于向服务器发送修改收货信息请求的函数），传入 receiverInfo 对象
+                  // 并在请求成功后执行 then 回调函数中的逻辑
+                  updateReceiverInfo(this.receiverInfo).then(response => {
+                      // 将 receiverDialogVisible 属性设置为 false，隐藏更新收货信息的对话框
+                      this.receiverDialogVisible = false;
+                      // 弹出一个消息提示框，显示修改成功的提示信息，类型为成功类型
+                      this.$message({
+                          type: 'success',
+                          message: '修改成功!'
+                      });
+                      // 调用 getOrderDetail 函数（假设是用于获取订单详细信息的函数），传入当前订单的 id
+                      // 并在获取成功后将返回的数据赋值给 this.order，用于更新页面展示的订单信息
+                      getOrderDetail(this.id).then(response => {
+                          this.order = response.data;
+                      });
+                  });
+              });
+          },
+          showUpdateMoneyDialog() {
+              // 将 moneyDialogVisible 属性设置为 true，表示显示更新费用信息的对话框（同样可能用于控制界面显示隐藏）
+              this.moneyDialogVisible = true;
+              // 设置 moneyInfo 对象中的 orderId 属性为当前订单的 id
+              this.moneyInfo.orderId = this.order.id;
+              // 设置 moneyInfo 对象中的 freightAmount 属性为当前订单的运费金额
+              this.moneyInfo.freightAmount = this.order.freightAmount;
+              // 设置 moneyInfo 对象中的 discountAmount 属性为当前订单的折扣金额
+              this.moneyInfo.discountAmount = this.order.discountAmount;
+              // 设置 moneyInfo 对象中的 status 属性为当前订单的状态
+              this.moneyInfo.status = this.order.status;
+          },
+          handleUpdateMoneyInfo() {
+              // 弹出确认框，询问用户是否要修改费用信息，设置相关按钮文本和提示框类型
+              this.$confirm('是否要修改费用信息?', '提示', {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'warning'
+              }).then(() => {
+                  // 调用 updateMoneyInfo 函数（推测用于向服务器发送修改费用信息请求），传入 moneyInfo 对象
+                  // 在请求成功后的 then 回调中执行后续逻辑
+                  updateMoneyInfo(this.moneyInfo).then(response => {
+                      // 将 moneyDialogVisible 属性设置为 false，隐藏更新费用信息的对话框
+                      this.moneyDialogVisible = false;
+                      // 弹出成功消息提示框，显示修改成功信息
+                      this.$message({
+                          type: 'success',
+                          message: '修改成功!'
+                      });
+                      // 调用 getOrderDetail 函数获取订单详细信息，成功后更新 this.order
+                      getOrderDetail(this.id).then(response => {
+                          this.order = response.data;
+                      });
+                  });
               });
-              getOrderDetail(this.id).then(response => {
-                this.order = response.data;
+          },
+          showMessageDialog() {
+              // 将 messageDialogVisible 属性设置为 true，用于显示消息对话框（可能是发送站内信相关的对话框）
+              this.messageDialogVisible = true;
+              // 将 message 对象中的 title 属性设置为 null，可能用于初始化或清空标题内容
+              this.message.title = null;
+              // 将 message 对象中的 content 属性设置为 null，可能用于初始化或清空内容
+              this.message.content = null;
+          },
+          handleSendMessage() {
+              // 弹出确认框，询问用户是否要发送站内信，配置相关按钮文本和提示框类型
+              this.$confirm('是否要发送站内信?', '提示', {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'warning'
+              }).then(() => {
+                  // 将 messageDialogVisible 属性设置为 false，隐藏消息对话框
+                  this.messageDialogVisible = false;
+                  // 弹出成功消息提示框，显示发送成功的提示信息
+                  this.$message({
+                      type: 'success',
+                      message: '发送成功!'
+                  });
               });
-            });
-        });
-      },
-      showMarkOrderDialog(){
-        this.markOrderDialogVisible=true;
-        this.markInfo.id=this.id;
-        this.closeOrder.note=null;
-      },
-      handleMarkOrder(){
-        this.$confirm('是否要备注订单?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          let params = new URLSearchParams();
-          params.append("id",this.markInfo.id);
-          params.append("note",this.markInfo.note);
-          params.append("status",this.order.status);
-          updateOrderNote(params).then(response=>{
-            this.markOrderDialogVisible=false;
-            this.$message({
-              type: 'success',
-              message: '订单备注成功!'
-            });
-            getOrderDetail(this.id).then(response => {
-              this.order = response.data;
-            });
-          });
-        });
-      },
-      handleDeleteOrder(){
-        this.$confirm('是否要进行该删除操作?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          let params = new URLSearchParams();
-          params.append("ids",[this.id]);
-          deleteOrder(params).then(response=>{
-            this.$message({
-              message: '删除成功！',
-              type: 'success',
-              duration: 1000
-            });
-            this.$router.back();
-          });
-        })
-      },
-      showLogisticsDialog(){
-        this.logisticsDialogVisible=true;
+          },
+          showCloseOrderDialog() {
+              // 将 closeDialogVisible 属性设置为 true，用于显示关闭订单的对话框
+              this.closeDialogVisible = true;
+              // 将 closeInfo 对象中的 note 属性设置为 null，可能用于初始化备注内容（关闭订单相关备注）
+              this.closeInfo.note = null;
+              // 将 closeInfo 对象中的 id 属性设置为当前的 id（推测是订单 id）
+              this.closeInfo.id = this.id;
+          },
+          handleCloseOrder() {
+              // 弹出确认框，询问用户是否要关闭订单，配置按钮文本和提示框类型
+              this.$confirm('是否要关闭?', '提示', {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'warning'
+              }).then(() => {
+                  // 创建一个 URLSearchParams 对象，用于构建查询参数（可能用于向服务器传递关闭订单相关参数）
+                  let params = new URLSearchParams();
+                  // 向 params 中添加参数 "ids"，值为包含当前订单 id 的数组（这里格式可能要根据后端要求，可能是用于批量操作订单关闭的参数形式）
+                  params.append("ids", [this.closeInfo.id]);
+                  // 向 params 中添加参数 "note"，值为 closeInfo 对象中的 note（关闭订单的备注内容）
+                  params.append("note", this.closeInfo.note);
+                  // 调用 closeOrder 函数（推测用于向服务器发送关闭订单请求），传入构建好的参数对象
+                  // 在请求成功后的 then 回调中执行后续逻辑
+                  closeOrder(params).then(response => {
+                      // 将 closeDialogVisible 属性设置为 false，隐藏关闭订单的对话框
+                      this.closeDialogVisible = false;
+                      // 弹出成功消息提示框，显示订单关闭成功的提示信息
+                      this.$message({
+                          type: 'success',
+                          message: '订单关闭成功!'
+                      });
+                      // 调用 getOrderDetail 函数获取订单详细信息，成功后更新 this.order
+                      getOrderDetail(this.id).then(response => {
+                          this.order = response.data;
+                      });
+                  });
+              });
+          },
+          showMarkOrderDialog() {
+              // 将 markOrderDialogVisible 属性设置为 true，用于显示备注订单的对话框
+              this.markOrderDialogVisible = true;
+              // 将 markInfo 对象中的 id 属性设置为当前订单的 id
+              this.markInfo.id = this.id;
+              // 将 closeOrder 对象（这里可能是笔误，也许应该是 markInfo）中的 note 属性设置为 null，初始化备注内容
+              this.closeOrder.note = null;
+          },
+          handleMarkOrder() {
+              // 弹出确认框，询问用户是否要备注订单，配置相关按钮文本和提示框类型
+              this.$confirm('是否要备注订单?', '提示', {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'warning'
+              }).then(() => {
+                  // 创建一个 URLSearchParams 对象，用于构建向服务器传递备注订单相关参数的对象
+                  let params = new URLSearchParams();
+                  // 向 params 中添加参数 "id"，值为 markInfo 对象中的 id（订单 id）
+                  params.append("id", this.markInfo.id);
+                  // 向 params 中添加参数 "note"，值为 markInfo 对象中的 note（备注内容）
+                  params.append("note", this.markInfo.note);
+                  // 向 params 中添加参数 "status"，值为当前订单的状态
+                  params.append("status", this.order.status);
+                  // 调用 updateOrderNote 函数（推测用于向服务器发送备注订单请求），传入构建好的参数对象
+                  // 在请求成功后的 then 回调中执行后续逻辑
+                  updateOrderNote(params).then(response => {
+                      // 将 markOrderDialogVisible 属性设置为 false，隐藏备注订单的对话框
+                      this.markOrderDialogVisible = false;
+                      // 弹出成功消息提示框，显示订单备注成功的提示信息
+                      this.$message({
+                          type: 'success',
+                          message: '订单备注成功!'
+                      });
+                      // 调用 getOrderDetail 函数获取订单详细信息，成功后更新 this.order
+                      getOrderDetail(this.id).then(response => {
+                          this.order = response.data;
+                      });
+                  });
+              });
+          },
+          handleDeleteOrder() {
+              // 弹出确认框，询问用户是否要进行删除订单操作，配置相关按钮文本和提示框类型
+              this.$confirm('是否要进行该删除操作?', '提示', {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'warning'
+              }).then(() => {
+                  // 创建一个 URLSearchParams 对象，用于构建向服务器传递删除订单相关参数的对象
+                  let params = new URLSearchParams();
+                  // 向 params 中添加参数 "ids"，值为包含当前订单 id 的数组（同样可能用于批量操作，这里单订单就是只含一个 id）
+                  params.append("ids", [this.id]);
+                  // 调用 deleteOrder 函数（推测用于向服务器发送删除订单请求），传入构建好的参数对象
+                  // 在请求成功后的 then 回调中执行后续逻辑
+                  deleteOrder(params).then(response => {
+                      // 弹出成功消息提示框，显示删除成功的提示信息，并设置提示框显示时长为 1000 毫秒（1 秒）
+                      this.$message({
+                          message: '删除成功！',
+                          type: 'success',
+                          duration: 1000
+                      });
+                      // 使用路由对象（this.$router）返回上一页（可能是回到订单列表页等相关页面）
+                      this.$router.back();
+                  });
+              })
+          },
+          showLogisticsDialog() {
+              // 将 logisticsDialogVisible 属性设置为 true，用于显示物流相关的对话框（可能展示物流信息等）
+              this.logisticsDialogVisible = true;
+          }
       }
-    }
-  }
-</script>
+  </script>
 <style scoped>
-  .detail-container {
-    width: 80%;
-    padding: 20px 20px 20px 20px;
-    margin: 20px auto;
-  }
+    /* 定义类名为 detail-container 的样式规则，用于设置某个容器的样式 */
+   .detail-container {
+        /* 设置宽度为页面宽度的 80% */
+        width: 80%;
+        /* 设置内边距，上下左右均为 20 像素 */
+        padding: 20px 20px 20px 20px;
+        /* 设置外边距，上下为 20 像素，左右自动居中 */
+        margin: 20px auto;
+    }
 
-  .operate-container {
-    background: #F2F6FC;
-    height: 80px;
-    margin: -20px -20px 0;
-    line-height: 80px;
-  }
+    /* 定义类名为 operate-container 的样式规则，用于设置操作相关容器的样式 */
+   .operate-container {
+        /* 设置背景颜色 */
+        background: #F2F6FC;
+        /* 设置高度为 80 像素 */
+        height: 80px;
+        /* 设置外边距，上外边距为 -20 像素，左右外边距为 -20 像素，下外边距为 0 像素 */
+        margin: -20px -20px 0;
+        /* 设置行高为 80 像素，用于垂直居中内容 */
+        line-height: 80px;
+    }
 
-  .operate-button-container {
-    float: right;
-    margin-right: 20px
-  }
+    /* 定义类名为 operate-button-container 的样式规则，用于设置操作按钮容器的样式 */
+   .operate-button-container {
+        /* 让容器向右浮动 */
+        float: right;
+        /* 设置右外边距为 20 像素 */
+        margin-right: 20px
+    }
 
-  .table-layout {
-    margin-top: 20px;
-    border-left: 1px solid #DCDFE6;
-    border-top: 1px solid #DCDFE6;
-  }
+    /* 定义类名为 table-layout 的样式规则，可能用于设置表格布局相关的样式 */
+   .table-layout {
+        /* 设置上外边距为 20 像素 */
+        margin-top: 20px;
+        /* 设置左边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
+        border-left: 1px solid #DCDFE6;
+        /* 设置上边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
+        border-top: 1px solid #DCDFE6;
+    }
 
-  .table-cell {
-    height: 60px;
-    line-height: 40px;
-    border-right: 1px solid #DCDFE6;
-    border-bottom: 1px solid #DCDFE6;
-    padding: 10px;
-    font-size: 14px;
-    color: #606266;
-    text-align: center;
-    overflow: hidden;
-  }
+    /* 定义类名为 table-cell 的样式规则，可能用于设置表格单元格的样式 */
+   .table-cell {
+        /* 设置高度为 60 像素 */
+        height: 60px;
+        /* 设置行高为 40 像素，用于控制单元格内文本的垂直对齐等 */
+        line-height: 40px;
+        /* 设置右边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
+        border-right: 1px solid #DCDFE6;
+        /* 设置下边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
+        border-bottom: 1px solid #DCDFE6;
+        /* 设置内边距为 10 像素 */
+        padding: 10px;
+        /* 设置字体大小为 14 像素 */
+        font-size: 14px;
+        /* 设置字体颜色 */
+        color: #606266;
+        /* 设置文本水平居中 */
+        text-align: center;
+        /* 当内容超出单元格范围时，隐藏超出部分 */
+        overflow: hidden;
+    }
 
-  .table-cell-title {
-    border-right: 1px solid #DCDFE6;
-    border-bottom: 1px solid #DCDFE6;
-    padding: 10px;
-    background: #F2F6FC;
-    text-align: center;
-    font-size: 14px;
-    color: #303133;
-  }
+    /* 定义类名为 table-cell-title 的样式规则，可能用于设置表格标题单元格的样式 */
+   .table-cell-title {
+        /* 设置右边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
+        border-right: 1px solid #DCDFE6;
+        /* 设置下边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
+        border-bottom: 1px solid #DCDFE6;
+        /* 设置内边距为 10 像素 */
+        padding: 10px;
+        /* 设置背景颜色 */
+        background: #F2F6FC;
+        /* 设置文本水平居中 */
+        text-align: center;
+        /* 设置字体大小为 14 像素 */
+        font-size: 14px;
+        /* 设置字体颜色 */
+        color: #303133;
+    }
 </style>
-
-