code review：订单列表

e3f250ff · YunaiV · 867c47de · e3f250ff · e3f250ff · e3f250ff
Commit e3f250ff authored Jun 17, 2023 by YunaiV
Show whitespace changes
Inline Side-by-side

Showing with 91 additions and 90 deletions

src/api/mall/trade/order/index.ts
+1 -0

src/api/mall/trade/order/type/orderType.ts
+4 -0

src/utils/dict.ts
+8 -12

src/views/mall/trade/order/index.vue
+78 -78

No files found.
--- a/src/api/mall/trade/order/index.ts
+++ b/src/api/mall/trade/order/index.ts
 import request from '@/config/axios'
 // 获得交易订单分页
+// TODO @xiaobai：改成 getOrderPage
 export const getOrderList = (params: PageParam) => {
  return request.get({ url: '/trade/order/page', params })
 }

--- a/src/api/mall/trade/order/type/orderType.ts
+++ b/src/api/mall/trade/order/type/orderType.ts
+// 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 文档生成

--- a/src/utils/dict.ts
+++ b/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', // 营销的条件类型枚举
+  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'
 }
--- a/src/views/mall/trade/order/index.vue
+++ b/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,7 +100,7 @@
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
-        <!-- v-hasPermi="['trade:order:export']"
+        <!-- v-hasPermi="['trade:order:export']" TODO 待开发
           需要将选中的数据存入orderSelect.multipleSelection中
          需要考虑全选时数据如何处理-->
        <el-button type="success" plain @click="handleExport" :loading="exportLoading">
@@ -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="用户信息" align="center" min-width="100">
-      <el-table-column label="用户信息(id)" 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 v-if="scope.row.status === 0" link type="primary" @click="sendXX(scope.row)">
-            >待支付</el-button
+            待支付
-          >
+          </el-button>
-          <el-button v-if="scope.row.status == '10'" link type="primary" @click="sendXX(scope.row)"
+          <el-button v-if="scope.row.status === 10" link type="primary" @click="sendXX(scope.row)">
-            >发货</el-button
+            发货
-          >
+          </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 loading = ref(false) // 列表的加载中
+const total = ref(0) // 总记录数
-const { push } = useRouter()
+const list = ref<any>([]) // 表数据
 const queryFormRef = ref() //表单搜索
 const queryParams = ref({
-  pageNo: 1, //首页
+  pageNo: 1, // 首页
-  pageSize: 10, //页面大小
+  pageSize: 10, // 页面大小
-  tabIndex: 0 //详情页面数据
+  tabIndex: 0 // 详情页面数据
 })
+const exportLoading = ref(false) // 导出按钮的加载中
-const loading = ref(false)
+// 订单搜索
-const exportLoading = ref(false)
-// 总记录数
-const total = ref(0)
-//表数据
-const list = ref<any>([])
-//订单搜索
 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 {
-    // 导出的二次确认
+    const data = await TradeOrderApi.getOrderList(queryParams.value)
-    await message.exportConfirm()
+    list.value = data.list
-    // 发起导出
+    total.value = data.total
-    exportLoading.value = true
-    //TODO导出的数据是后台导出还是从前端中获取数据(全选时数据怎么打印?)
+    let i = 0
-    download.excel(orderSelect.multipleSelection as any, '订单信息.xls') //
+    //给数组添加选中属性 itemSelect 默认为false 当前状态如果时全选 则新加载的页面都为选中状态
-  } catch {
+    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
+    await message.exportConfirm()
-    total.value = data.total
+    // 发起导出
+    exportLoading.value = true
-    let i = 0
+    //TODO导出的数据是后台导出还是从前端中获取数据(全选时数据怎么打印?)
-    //给数组添加选中属性 itemSelect 默认为false 当前状态如果时全选 则新加载的页面都为选中状态
+    download.excel(orderSelect.multipleSelection as any, '订单信息.xls') //
-    if (
+  } catch {
-      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 {
-    loading.value = false
+    exportLoading.value = false
  }
+  //TODO
+  exportLoading.value = false
 }
 /**
 * 跳转订单详情
 */
 const showOrderDetail = (row: any) => {
-  console.log('TODO Order Detail: ' + row.id)
+  push({
-  push({ name: 'TradeOrderDetail', query: { id: row.id } })
+    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