trade：【交易售后】查询分页列表的前端

yudao-ui-admin/src/api/mall/trade/afterSale.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+// 获得交易售后
+export function getAfterSale(id) {
+  return request({
+    url: '/trade/after-sale/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得交易售后分页
+export function getAfterSalePage(query) {
+  return request({
+    url: '/trade/after-sale/page',
+    method: 'get',
+    params: query
+  })
+}

yudao-ui-admin/src/router/index.js

@@ -216,12 +216,6 @@ export const constantRoutes = [
         hidden: true,
         meta: { title: '订单详情' },
         component: (resolve) => require(['@/views/mall/trade/order/detail'], resolve)
-      },
-      {
-        path: '/mall/trade/orderrefund',
-        name: '退款维权',
-        meta: { title: '退款维权' },
-        component: (resolve) => require(['@/views/mall/trade/orderrefund'], resolve)
       }
     ]
   }

yudao-ui-admin/src/utils/constants.js

@@ -3,6 +3,37 @@
  *
  * 枚举类
  */
+import {beginOfDay, endOfDay} from "@/utils/dateUtils";
+
+export const datePickerOptions = {
+  shortcuts: [{
+    text: '最近一周',
+    onClick(picker) {
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      const end = new Date();
+      picker.$emit('pick', [beginOfDay(start), endOfDay(end)]);
+    }
+  }, {
+    text: '最近一个月',
+    onClick(picker) {
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      const end = new Date();
+      picker.$emit('pick', [beginOfDay(start), endOfDay(end)]);
+    }
+  }, {
+    text: '最近三个月',
+    onClick(picker) {
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      const end = new Date();
+      picker.$emit('pick', [beginOfDay(start), endOfDay(end)]);
+    }
+  }]
+}
+
+// ========== 静态变量 ==========
 
 /**
  * 全局通用状态枚举

yudao-ui-admin/src/utils/dateUtils.js

@@ -24,3 +24,11 @@ export function getDate(ms) {
     return 0 + "秒";
   }
 }
+
+export function beginOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+export function endOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+}

yudao-ui-admin/src/utils/dict.js

@@ -60,6 +60,11 @@ export const DICT_TYPE = {
   // ========== MALL - PRODUCT 模块 ==========
   PRODUCT_SPU_STATUS: 'product_spu_status', // 商品 SPU 状态
 
+  // ========== 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', // 售后 - 类型
+
   // ========== MALL - PROMOTION 模块 ==========
   PROMOTION_DISCOUNT_TYPE: 'promotion_discount_type', // 优惠类型
   PROMOTION_PRODUCT_SCOPE: 'promotion_product_scope', // 营销的商品范围

yudao-ui-admin/src/views/mall/trade/afterSale/bak.vue

@@ -3,42 +3,6 @@
     <!-- 搜索工作栏 -->
     <el-row :gutter="20">
       <el-form :model="queryParams" label-width="68px" size="small">
-        <el-col :span="6" :xs="24">
-          <el-form-item label="商品名称">
-            <el-input v-model="queryParams.name" style="width: 240px"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" :xs="24">
-          <el-form-item label="订单编号">
-            <el-input v-model="queryParams.No" style="width: 240px"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" :xs="24">
-          <el-form-item label="退款编号">
-            <el-input v-model="queryParams.refundNo" style="width: 240px"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" :xs="24">
-          <el-form-item label="退款状态">
-            <el-select v-model="queryParams.refundStatus" clearable style="width: 240px">
-              <el-option v-for="dict in dicData.refundStatus" v-bind="dict" :key="dict.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" :xs="24">
-          <el-form-item label="退款方式">
-            <el-select v-model="queryParams.refundWay" clearable style="width: 240px">
-              <el-option v-for="dict in dicData.refundWay" v-bind="dict" :key="dict.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6" :xs="24">
-          <el-form-item label="维权类型">
-            <el-select v-model="queryParams.refundType" clearable style="width: 240px">
-              <el-option v-for="dict in dicData.refundType" v-bind="dict" :key="dict.value"/>
-            </el-select>
-          </el-form-item>
-        </el-col>
         <el-col :span="6" :xs="24">
           <el-form-item label="下单时间">
             <el-date-picker v-model="queryParams.date" type="daterange" range-separator="至"
@@ -60,12 +24,6 @@
         <el-table :data="tableData" :show-header="false" class="table-wrapper">
           <el-table-column>
             <template slot-scope="{ row }">
-              <div class="table-header">
-                退款编号：{{row.tkbh}}
-                <el-button type="text" style="margin-left: 10px">
-                  订单编号：{{row.ddbh}}
-                </el-button>
-              </div>
               <!-- 订单下的商品 -->
               <el-table :data="row.goods" border>
                 <el-table-column label="商品信息" prop="spxx" header-align="center" width="auto" min-width="300">
@@ -114,33 +72,7 @@ const dicData = {
     { label: '售后退款', value: 'shtk' }
   ]
 }
-const rangePickerOptions = {
-  shortcuts: [{
-    text: '最近一周',
-    onClick(picker) {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-      picker.$emit('pick', [start, end]);
-    }
-  }, {
-    text: '最近一个月',
-    onClick(picker) {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-      picker.$emit('pick', [start, end]);
-    }
-  }, {
-    text: '最近三个月',
-    onClick(picker) {
-      const end = new Date();
-      const start = new Date();
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-      picker.$emit('pick', [start, end]);
-    }
-  }]
-}
+
 export default {
     name: "index",
     data () {
@@ -164,15 +96,6 @@ export default {
             tkbh: '20221026220424001',
             ddbh: '20221026220424001',
             goods: [
-              {
-                name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
-                img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
-                ddje: '199',
-                mj: '张三',
-                tkje: 460,
-                sqsj: '2022-11-19',
-                tkzt: '申请维权(仅退款)'
-              },
               {
                 name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
                 img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
@@ -188,15 +111,6 @@ export default {
             tkbh: '20221026220424001',
             ddbh: '20221026220424001',
             goods: [
-              {
-                name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
-                img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
-                ddje: '199',
-                mj: '张三',
-                tkje: 460,
-                sqsj: '2022-11-19',
-                tkzt: '申请维权(仅退款)'
-              },
               {
                 name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
                 img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
@@ -212,15 +126,6 @@ export default {
             tkbh: '20221026220424001',
             ddbh: '20221026220424001',
             goods: [
-              {
-                name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
-                img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
-                ddje: '199',
-                mj: '张三',
-                tkje: 460,
-                sqsj: '2022-11-19',
-                tkzt: '申请维权(仅退款)'
-              },
               {
                 name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
                 img: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
@@ -242,48 +147,3 @@ export default {
     }
   }
 </script>
-
-<style lang="scss" scoped>
-  ::v-deep .table-wrapper{
-    border-bottom: none;
-    &::before{
-      height: 0;
-    }
-    .table-header{
-      line-height: 36px;
-    }
-    .el-table__row{
-      .el-table__cell{
-        border-bottom: none;
-        .cell{
-          .el-table {
-            .el-table__row{
-              >.el-table__cell{
-                .goods-info{
-                  display: flex;
-                  img{
-                    margin-right: 10px;
-                    width: 60px;
-                    height: 60px;
-                    border: 1px solid #e2e2e2;
-                  }
-                }
-                .ellipsis-2{
-                  display: -webkit-box;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                  white-space: normal;
-                  -webkit-line-clamp: 2; /* 要显示的行数 */
-                  -webkit-box-orient: vertical;
-                  word-break: break-all;
-                  line-height: 22px !important;
-                  max-height: 44px !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-</style>

yudao-ui-admin/src/views/mall/trade/afterSale/index.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="app-container">
+
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="商品名称" prop="spuName">
+        <el-input v-model="queryParams.spuName" placeholder="请输入商品 SPU 名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="退款编号" prop="no">
+        <el-input v-model="queryParams.no" placeholder="请输入退款编号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="订单编号" prop="orderNo">
+        <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="售后状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择售后状态" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.TRADE_AFTER_SALE_STATUS)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="售后方式" prop="way">
+        <el-select v-model="queryParams.way" placeholder="请选择售后方式" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.TRADE_AFTER_SALE_WAY)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="售后类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择售后类型" clearable size="small">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.TRADE_AFTER_SALE_TYPE)"
+                     :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+                        :picker-options="datePickerOptions" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作工具栏 -->
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="退款编号" align="center" prop="no" />
+      <el-table-column label="订单编号" align="center" prop="orderNo" />
+      <el-table-column label="订单编号" align="center" prop="orderNo" />
+      <el-table-column label="商品信息" align="center" prop="status" width="auto" min-width="300">
+        <!-- TODO @小红：样式不太对，辛苦改改 -->
+<!--        <div slot-scope="{ row }" class="goods-info">-->
+<!--          <img :src="row.picUrl"/>-->
+<!--          <span class="ellipsis-2" :title="row.name">{{row.name}}</span>-->
+<!--        </div>-->
+      </el-table-column>
+      <el-table-column label="订单金额" align="center" prop="refundPrice" />
+      <el-table-column label="买家" align="center" prop="userId" />
+      <el-table-column label="申请时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="售后状态" align="center">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="售后方式" align="center">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="scope.row.way" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+<!--          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"-->
+<!--                     v-hasPermi="['trade:after-sale:update']">修改</el-button>-->
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import { getAfterSalePage } from "@/api/mall/trade/afterSale";
+import { datePickerOptions } from "@/utils/constants";
+
+export default {
+  name: "AfterSale",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 交易售后列表
+      list: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        no: null,
+        status: null,
+        orderNo: null,
+        spuName: null,
+        createTime: [],
+        way: null,
+        type: null,
+      },
+      // 静态变量
+      datePickerOptions: datePickerOptions
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      // 执行查询
+      getAfterSalePage(this.queryParams).then(response => {
+        this.list = response.data.list;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .table-wrapper {
+  .el-table__row{
+    .el-table__cell {
+      border-bottom: none;
+      .cell{
+        .el-table {
+          .el-table__row {
+            >.el-table__cell {
+              .goods-info{
+                display: flex;
+                img{
+                  margin-right: 10px;
+                  width: 60px;
+                  height: 60px;
+                  border: 1px solid #e2e2e2;
+                }
+              }
+              .ellipsis-2 {
+                display: -webkit-box;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: normal;
+                -webkit-line-clamp: 2; /* 要显示的行数 */
+                -webkit-box-orient: vertical;
+                word-break: break-all;
+                line-height: 22px !important;
+                max-height: 44px !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>