code review：订单列表

src/api/mall/trade/order/index.ts

@@ -1,6 +1,7 @@
 import request from '@/config/axios'
 
 // 获得交易订单分页
+// TODO @xiaobai：改成 getOrderPage
 export const getOrderList = (params: PageParam) => {
   return request.get({ url: '/trade/order/page', params })
 }

src/api/mall/trade/order/type/orderType.ts

@@ -1,3 +1,6 @@
+// TODO @xiaobai：这个放到 order/index.ts  里哈
+// TODO @xiaobai：注释放到变量后面，这样简洁一点
+// TODO @xiaobai：这个改成 TradeOrderRespVO
 export interface TradeOrderPageItemRespVO {
   // 订单编号
   id: number
@@ -85,6 +88,7 @@ export interface TradeOrderPageItemRespVO {
   items: TradeOrderItemBaseVO[]
 }
 
+// TODO @xiaobai：这个改成 TradeOrderItemRespVO
 /**
  * 交易订单项 Base VO，提供给添加、修改、详细的子 VO 使用
  * 如果子 VO 存在差异的字段，请不要添加到这里，影响 Swagger 文档生成

src/utils/dict.ts

@@ -156,6 +156,13 @@ export enum DICT_TYPE {
 
   // ========== MALL - 交易模块 ==========
   EXPRESS_CHARGE_MODE = 'trade_delivery_express_charge_mode', //快递的计费方式
+  TRADE_AFTER_SALE_STATUS = 'trade_after_sale_status', // 售后 - 状态
+  TRADE_AFTER_SALE_WAY = 'trade_after_sale_way', // 售后 - 方式
+  TRADE_AFTER_SALE_TYPE = 'trade_after_sale_type', // 售后 - 类型
+  TRADE_ORDER_TYPE = 'trade_order_type', // 订单 - 类型
+  TRADE_ORDER_STATUS = 'trade_order_status', // 订单 - 状态
+  TRADE_ORDER_ITEM_AFTER_SALE_STATUS = 'trade_order_item_after_sale_status', // 订单项 - 售后状态
+  TERMINAL = 'terminal', // 终端
 
   // ========== MALL - 营销模块 ==========
   PROMOTION_DISCOUNT_TYPE = 'promotion_discount_type', // 优惠类型
@@ -164,16 +171,5 @@ export enum DICT_TYPE {
   PROMOTION_COUPON_STATUS = 'promotion_coupon_status', // 优惠劵的状态
   PROMOTION_COUPON_TAKE_TYPE = 'promotion_coupon_take_type', // 优惠劵的领取方式
   PROMOTION_ACTIVITY_STATUS = 'promotion_activity_status', // 优惠活动的状态
-  PROMOTION_CONDITION_TYPE = 'promotion_condition_type', // 营销的条件类型枚举
-
-  //===add by 20230530====
-  // ========== MALL - ORDER 模块 ==========
-  TRADE_AFTER_SALE_STATUS = 'trade_after_sale_status', // 售后 - 状态
-  TRADE_AFTER_SALE_WAY = 'trade_after_sale_way', // 售后 - 方式
-  TRADE_AFTER_SALE_TYPE = 'trade_after_sale_type', // 售后 - 类型
-  TRADE_ORDER_TYPE = 'trade_order_type', // 订单 - 类型
-  TRADE_ORDER_STATUS = 'trade_order_status', // 订单 - 状态
-  TRADE_ORDER_ITEM_AFTER_SALE_STATUS = 'trade_order_item_after_sale_status', // 订单项 - 售后状态
-
-  TERMINAL = 'terminal'
+  PROMOTION_CONDITION_TYPE = 'promotion_condition_type' // 营销的条件类型枚举
 }

src/views/mall/trade/order/index.vue

@@ -64,9 +64,8 @@
           />
         </el-select>
       </el-form-item>
-
       <el-form-item label="订单搜索" prop="searchValue">
-        <!-- 双item绑定2个变量用于reset时没法重置 -->
+        <!-- 双 item 绑定 2 个变量用于 reset 时没法重置 -->
         <el-form-item class="!w-280px" prop="searchType">
           <el-input
             class="!w-280px"
@@ -101,8 +100,8 @@
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
         </el-button>
-        <!-- v-hasPermi="['trade:order:export']"
-           需要将选中的数据存入orderSelect.multipleSelection中 
+        <!-- v-hasPermi="['trade:order:export']" TODO 待开发
+           需要将选中的数据存入orderSelect.multipleSelection中
           需要考虑全选时数据如何处理-->
         <el-button type="success" plain @click="handleExport" :loading="exportLoading">
           <Icon icon="ep:download" class="mr-5px" /> 导出TODO
@@ -110,9 +109,9 @@
       </el-form-item>
     </el-form>
   </ContentWrap>
-  <!-- 表格 -->
+
+  <!-- 列表 -->
   <ContentWrap>
-    <!-- 表单 -->
     <el-table v-loading="loading" :data="list">
       <el-table-column type="expand" fixed="left">
         <template #default="scope">
@@ -136,7 +135,6 @@
         <template #header>
           <el-dropdown icon="eq:search" @command="handleDropType">
             <el-button link type="primary">全选({{ orderSelect.checkTotal }}) </el-button>
-
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item command="1">当前页</el-dropdown-item>
@@ -162,7 +160,6 @@
           <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="scope.row.type" />
         </template>
       </el-table-column>
-
       <el-table-column label="订单来源" align="center" min-width="100">
         <template #default="scope">
           <dict-tag
@@ -173,8 +170,8 @@
           <span v-else>{{ scope.terminal }}</span>
         </template>
       </el-table-column>
-
-      <el-table-column label="用户信息(id)" align="center" min-width="100">
+      <el-table-column label="用户信息" align="center" min-width="100">
+        <!-- TODO xiaobai：展示昵称，跳转到用户详情 -->
         <template #default="scope">
           <el-button link type="primary" @click="goUserDetail(scope.row)">{{
             scope.row.userId
@@ -207,6 +204,7 @@
             <div v-for="item in scope.row.items" :key="item">
               <div>
                 <p>{{ item.spuName }}</p>
+                <!-- TODO @xiaobai：不用 parseFloat 操作，直接 / 100.0 -->
                 <p>{{
                   '￥ ' + parseFloat(item.payPrice / 100).toFixed(2) + '元 x ' + item.count
                 }}</p>
@@ -215,7 +213,6 @@
           </el-popover>
         </template>
       </el-table-column>
-
       <el-table-column label="实际支付(元)" align="center" prop="payPrice" min-width="100">
         <template #default="scope">
           {{ '￥ ' + parseFloat(scope.row.payPrice / 100).toFixed(2) }}
@@ -228,6 +225,7 @@
         prop="payTime"
         min-width="180"
       />
+      <!-- TODO @xiaobai：增加一个 createTime 时间的展示 -->
       <el-table-column label="支付类型" align="center" min-width="100" prop="payChannelCode">
         <template #default="scope">
           <dict-tag
@@ -239,8 +237,9 @@
       </el-table-column>
       <el-table-column label="订单状态" align="center" prop="status" min-width="100">
         <template #default="scope">
+          <!-- TODO @xiaobai：不用做判断，直接 dict-tag 渲染就好列 -->
           <dict-tag
-            v-if="scope.row.status == ''"
+            v-if="scope.row.status === ''"
             :type="DICT_TYPE.TRADE_ORDER_STATUS"
             :value="scope.row.status"
           />
@@ -249,17 +248,16 @@
       </el-table-column>
       <el-table-column label="操作" align="center" fixed="right" min-width="150">
         <template #default="scope">
-          <el-button v-if="scope.row.status == '0'" link type="primary" @click="sendXX(scope.row)"
-            >待支付</el-button
-          >
-          <el-button v-if="scope.row.status == '10'" link type="primary" @click="sendXX(scope.row)"
-            >发货</el-button
-          >
+          <el-button v-if="scope.row.status === 0" link type="primary" @click="sendXX(scope.row)">
+            待支付
+          </el-button>
+          <el-button v-if="scope.row.status === 10" link type="primary" @click="sendXX(scope.row)">
+            发货
+          </el-button>
           <el-button link type="primary" @click="showOrderDetail(scope.row)">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
-
     <!-- 分页 -->
     <Pagination
       v-model:limit="queryParams.pageSize"
@@ -279,7 +277,8 @@ import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import * as TradeOrderApi from '@/api/mall/trade/order'
 import { dateFormatter, formatDate } from '@/utils/formatTime'
 import download from '@/utils/download'
-// import TradeOrderDetail from './tradeOrderDetail.vue'
+const message = useMessage() // 消息弹窗
+const { push } = useRouter() // 路由
 interface CurrentType {
   checkTotal: number //选中的数量
   currentType: string //页面选中类型, 0-noPage无选中页面 1-currentPage 当前页面 2-allPage所有页面
@@ -295,24 +294,17 @@ const orderSelect: CurrentType = reactive({
   pageNoList: []
 })
 
-const message = useMessage()
-
-const { push } = useRouter()
+const loading = ref(false) // 列表的加载中
+const total = ref(0) // 总记录数
+const list = ref<any>([]) // 表数据
 const queryFormRef = ref() //表单搜索
 const queryParams = ref({
-  pageNo: 1, //首页
-  pageSize: 10, //页面大小
-  tabIndex: 0 //详情页面数据
+  pageNo: 1, // 首页
+  pageSize: 10, // 页面大小
+  tabIndex: 0 // 详情页面数据
 })
-
-const loading = ref(false)
-const exportLoading = ref(false)
-// 总记录数
-const total = ref(0)
-
-//表数据
-const list = ref<any>([])
-//订单搜索
+const exportLoading = ref(false) // 导出按钮的加载中
+// 订单搜索
 const searchList = ref([
   {
     value: 'orderNo',
@@ -323,19 +315,19 @@ const searchList = ref([
     label: '用户UID'
   },
   {
-    value: 'userName',
+    value: 'userName', // TODO @xiaobai：userNickname
     label: '用户姓名'
   },
   {
-    value: 'userTel',
+    value: 'userTel', // TODO @xiaobai：userMobile 改成
     label: '用户电话'
   },
   {
-    value: 'itemName',
+    value: 'itemName', // TODO @xiaobai：不用筛选
     label: '商品名称'
   },
   {
-    value: 'itemCount',
+    value: 'itemCount', // TODO @xiaobai：件数不用筛选好列
     label: '商品件数'
   }
 ])
@@ -344,6 +336,7 @@ const imgViewVisible = ref(false) // 商品图预览
 
 const imageViewerList = ref<string[]>([]) // 商品图预览列表
 
+// TODO @xiaobai：要不全选逻辑先不做？
 /**当前页 所有页  暂不考虑数据本地化 会导致选中当前页 从后台重新拉取数据时出现数据不一致*/
 const handleDropType = (command: string) => {
   orderSelect.currentType = command
@@ -408,24 +401,33 @@ const handcheckclick = (row: any) => {
     orderSelect.checkTotal = orderSelect.checkTotal + 1
   }
 }
-/**
- * 导出数据
- */
 
-const handleExport = async () => {
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
   try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    //TODO导出的数据是后台导出还是从前端中获取数据(全选时数据怎么打印?)
-    download.excel(orderSelect.multipleSelection as any, '订单信息.xls') //
-  } catch {
+    const data = await TradeOrderApi.getOrderList(queryParams.value)
+    list.value = data.list
+    total.value = data.total
+
+    let i = 0
+    //给数组添加选中属性 itemSelect 默认为false 当前状态如果时全选 则新加载的页面都为选中状态
+    if (
+      orderSelect.currentType === '2' || //全选状态加载状态设置为选中
+      orderSelect.pageNoList.indexOf(queryParams.value.pageNo) > -1 //已选择页面加载状态设置为默认选中，会存在选中当前页面后手动取消该页面部分数据，再重新加载该页面时设置为选中状态，但是没有增加选中的数量
+    ) {
+      for (i; i < list.value.length; i++) {
+        list.value[i]['itemSelect'] = true
+      }
+    } else {
+      //还需要判断当前页面是否已经选中了? 而且还要出来选中的数据是否后来手动一行行取消了处理
+      for (i; i < list.value.length; i++) {
+        list.value[i]['itemSelect'] = false //暂定为未选中状态, 实际情况需要考虑已选中状态,后期优化
+      }
+    }
   } finally {
-    exportLoading.value = false
+    loading.value = false
   }
-  //TODO
-  exportLoading.value = false
 }
 
 /** 搜索按钮操作 */
@@ -436,6 +438,7 @@ const handleQuery = () => {
   orderSelect.multipleSelection = []
   orderSelect.pageNoList = []
   orderSelect.selectAll = false
+  // queryParams.pageNo = 1 TODO @xiaobai：缺了个
 
   getList()
 }
@@ -453,54 +456,51 @@ const resetQuery = () => {
   handleQuery()
 }
 
-const getList = async () => {
-  loading.value = true
+/**
+ * 导出数据
+ */
+const handleExport = async () => {
   try {
-    const data = await TradeOrderApi.getOrderList(queryParams.value)
-    list.value = data.list
-    total.value = data.total
-
-    let i = 0
-    //给数组添加选中属性 itemSelect 默认为false 当前状态如果时全选 则新加载的页面都为选中状态
-    if (
-      orderSelect.currentType === '2' || //全选状态加载状态设置为选中
-      orderSelect.pageNoList.indexOf(queryParams.value.pageNo) > -1 //已选择页面加载状态设置为默认选中，会存在选中当前页面后手动取消该页面部分数据，再重新加载该页面时设置为选中状态，但是没有增加选中的数量
-    ) {
-      for (i; i < list.value.length; i++) {
-        list.value[i]['itemSelect'] = true
-      }
-    } else {
-      //还需要判断当前页面是否已经选中了? 而且还要出来选中的数据是否后来手动一行行取消了处理
-      for (i; i < list.value.length; i++) {
-        list.value[i]['itemSelect'] = false //暂定为未选中状态, 实际情况需要考虑已选中状态,后期优化
-      }
-    }
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    //TODO导出的数据是后台导出还是从前端中获取数据(全选时数据怎么打印?)
+    download.excel(orderSelect.multipleSelection as any, '订单信息.xls') //
+  } catch {
   } finally {
-    loading.value = false
+    exportLoading.value = false
   }
+  //TODO
+  exportLoading.value = false
 }
 
 /**
  * 跳转订单详情
  */
 const showOrderDetail = (row: any) => {
-  console.log('TODO Order Detail: ' + row.id)
-  push({ name: 'TradeOrderDetail', query: { id: row.id } })
+  push({
+    name: 'TradeOrderDetail',
+    query: {
+      id: row.id
+    }
+  })
 }
 
 /**
- * 跳转用户详情
+ * 跳转用户详情 TODO
  */
 const goUserDetail = (row: any) => {
   console.log('TODO User Detail: ' + row.userId)
 }
 /**
- * 发货
+ * 发货 TODO
  */
 const sendXX = (row: any) => {
   console.log('TODO Send XX: ' + row.no)
 }
 
+// TOPDO @xiaobai：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/image-viewer.html 使用这个组件哈
 /**
  * 商品图预览
  * @param imgUrl