From 7001fd099ff6a27b41beed2991896ed8163011c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Thu, 29 Jul 2021 15:33:31 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=80=E6=AC=BE=E7=BB=B4=E6=9D=83=E9=A1=B5?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E5=AF=BC=E5=87=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 抽取固定数据的表格配置为单独的ts文件
2. 退款维权的批量导出功能实现
---
 src/api/order/order.ts                        |  2 +-
 src/utils/download.ts                         | 52 ++++++++++
 .../after-sale/components/AfterSaleTable.vue  | 53 +---------
 .../after-sale/components/FilterForm.vue      | 96 ++++++-------------
 .../after-sale/components/tableConfig.ts      | 82 ++++++++++++++++
 .../all-order/components/AllOrderTable.vue    | 56 ++---------
 .../order/all-order/components/FilterForm.vue | 47 ++-------
 .../order/all-order/components/tableConfig.ts | 83 ++++++++++++++++
 8 files changed, 268 insertions(+), 203 deletions(-)
 create mode 100644 src/utils/download.ts
 create mode 100644 src/views/order/after-sale/components/tableConfig.ts
 create mode 100644 src/views/order/all-order/components/tableConfig.ts

diff --git a/src/api/order/order.ts b/src/api/order/order.ts
index 761d0fc..5cb29c7 100644
--- a/src/api/order/order.ts
+++ b/src/api/order/order.ts
@@ -4,7 +4,7 @@ import { AfterSaleParams } from '@/model/order/AfterSale'
 
 // 枚举接口地址
 
-enum Api {
+export enum Api {
   ORDER_TABLE = '/api/order/page',
   AFTER_SALE_TABLE = '/api/order/afterSale/page',
   AFTER_SALE_EXPORT = '/api/order/afterSale/export',
diff --git a/src/utils/download.ts b/src/utils/download.ts
new file mode 100644
index 0000000..9505881
--- /dev/null
+++ b/src/utils/download.ts
@@ -0,0 +1,52 @@
+/**
+ * @description: 下载文件
+ * @param {string} url 下载地址
+ * @param {Object} params 拼接参数
+ * @return {*}
+ */
+import { getToken } from '@/utils/auth'
+
+export function downloadFile(apiUrl: string, params: any): void {
+  const url = spliceUrl(apiUrl, params)
+  const linkTag: HTMLAnchorElement = document.createElement('a')
+  linkTag.href = url
+  document.body.appendChild(linkTag)
+  linkTag.click()
+  document.body.removeChild(linkTag)
+}
+
+/**
+ * @description: 拼接下载地址
+ * @param {string} apiUrl
+ * @param {any} params
+ * @return {string} url 下载地址
+ */
+function spliceUrl(apiUrl: string, params: any) {
+  // host地址
+  let domainUrl: string
+  switch (import.meta.env.MODE) {
+    case 'development':
+      domainUrl = 'http://139.198.172.231:8490'
+      break
+    case 'production':
+      // domainUrl = import.meta.env.VITE_API_DOMAIN as string
+      domainUrl = 'http://' + window.location.host
+      break
+    default:
+      domainUrl = ''
+      break
+  }
+
+  // api 和 token 拼接
+  const token = getToken()
+  apiUrl += '?token=' + token
+
+  // 参数拼接
+  let queryUrl = ''
+  for (const item in params) {
+    queryUrl += '&' + item + '=' + params[item]
+  }
+  // 下载地址
+  const url: string = domainUrl + apiUrl + queryUrl
+  return url
+}
diff --git a/src/views/order/after-sale/components/AfterSaleTable.vue b/src/views/order/after-sale/components/AfterSaleTable.vue
index b3902d5..5c85896 100644
--- a/src/views/order/after-sale/components/AfterSaleTable.vue
+++ b/src/views/order/after-sale/components/AfterSaleTable.vue
@@ -54,6 +54,7 @@
 <script lang="ts">
 import { defineComponent, reactive, inject, watch, toRefs } from 'vue'
 import { AfterSaleParams, ReimburseParams } from '@/model/order/AfterSale'
+import { columns, filterBtns, tableEnum1, tableEnum2 } from './tableConfig'
 import { judgeReimburse } from '@/api/order/order'
 import { message } from 'ant-design-vue'
 
@@ -68,54 +69,10 @@ export default defineComponent({
   setup(props, { emit }) {
     const params: AfterSaleParams = inject('params')!
     const state = reactive({
-      filterBtns: [
-        { label: '全部', key: 0 },
-        { label: '退款处理中', key: 1 },
-        { label: '退款关闭', key: 2 },
-      ],
-      columns: [
-        { title: '售后编号', dataIndex: 'afterSaleNo', align: 'center' },
-        {
-          title: '售后方式 ',
-          dataIndex: 'manner',
-          width: 100,
-          align: 'center',
-          slots: { customRender: 'manner' },
-        },
-        { title: '订单编号', dataIndex: 'orderNo', align: 'center' },
-        { title: '商品名称', dataIndex: 'productName', align: 'center' },
-        { title: '订单金额', dataIndex: 'orderDetailAmount', align: 'center', width: 100 },
-        { title: '退款金额', dataIndex: 'refundAmount', align: 'center', width: 100 },
-        { title: '申请时间', dataIndex: 'createTime', align: 'center' },
-        {
-          title: '退款状态',
-          dataIndex: 'status',
-          align: 'center',
-          slots: { customRender: 'status' },
-        },
-        {
-          title: '操作',
-          key: 'status',
-          fixed: 'right',
-          width: 130,
-          align: 'center',
-          slots: { customRender: 'action' },
-        },
-      ],
-      afterSaleManner: ['未查询到售后方式', '仅退款', '退货退款', '换货'],
-      afterSaleStatus: [
-        '未查询到售后状态',
-        '售后处理中',
-        '售后申请待商家同意',
-        '商家不同意售后申请，待买家处理',
-        '商家同意售后申请，待买家处理',
-        '买家已退货',
-        '待商家确认收货',
-        '商家拒绝收货，待买家处理',
-        '商家已发货，待买家确认收货',
-        '售后成功',
-        '售后关闭',
-      ],
+      filterBtns: [...filterBtns],
+      columns: [...columns],
+      afterSaleManner: [...tableEnum1],
+      afterSaleStatus: [...tableEnum2],
       activeKey: 0,
       tableData: [],
       total: 0,
diff --git a/src/views/order/after-sale/components/FilterForm.vue b/src/views/order/after-sale/components/FilterForm.vue
index 33c9b88..41909fc 100644
--- a/src/views/order/after-sale/components/FilterForm.vue
+++ b/src/views/order/after-sale/components/FilterForm.vue
@@ -74,52 +74,32 @@
     </a-form>
     <div class="button-box">
       <a-button type="primary" @click="searchData">筛选</a-button>
-      <a-button @click="exportData">批量导出</a-button>
+      <a-button @click="clickExportBtn">批量导出</a-button>
       <a-button>查看已生成报表</a-button>
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import { Moment } from 'moment'
-import { defineComponent, inject, ref, watch } from 'vue'
+import { defineComponent, inject, ref, watch, createVNode, reactive, toRefs } from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import { AfterSaleParams } from '@/model/order/AfterSale'
-import { exportAfterSaleOrder } from '@/api/order/order'
+import { downloadFile } from '@/utils/download'
+import { Api } from '@/api/order/order'
+import { Modal } from 'ant-design-vue'
+import { Moment } from 'moment'
+import { option1, option2, option3, option4 } from './tableConfig'
 
 export default defineComponent({
   emits: ['searchTable'],
   setup(props, { emit }) {
     const params: AfterSaleParams = inject('params')!
-    // 退款类型选项
-    const typeOptions = [
-      { label: '售中退款', value: 1 },
-      { label: '售后退款', value: 2 },
-    ]
-    // 售后状态选项
-    const statusOptions = [
-      { label: '售后处理中', value: 1 },
-      { label: '售后申请待商家同意', value: 2 },
-      { label: '商家不同意售后申请，待买家处理', value: 3 },
-      { label: '商家同意售后申请，待买家处理', value: 4 },
-      { label: '买家已退货', value: 5 },
-      { label: '待商家确认收货', value: 6 },
-      { label: '商家拒绝收货，待买家处理', value: 7 },
-      { label: '商家已发货，待买家确认收货', value: 8 },
-      { label: '售后成功', value: 9 },
-      { label: '售后关闭', value: 10 },
-    ]
-    // 客服介入选项
-    const interveneStatusOptions = [
-      { label: '未介入', value: 1 },
-      { label: '介入中', value: 2 },
-      { label: '介入结束', value: 3 },
-    ]
-    // 售后方式选项
-    const mannerOptions = [
-      { label: '仅退款', value: 1 },
-      { label: '退货退款', value: 2 },
-      { label: '换货', value: 3 },
-    ]
+    const state = reactive({
+      typeOptions: [...option1], // 退款类型选项
+      statusOptions: [...option2], // 售后状态选项
+      interveneStatusOptions: [...option3], // 客服介入选项
+      mannerOptions: [...option4], // 售后方式选项
+    })
     // 定义两个时间选择器变量
     const startDate = ref<Moment | undefined>()
     const endDate = ref<Moment>()
@@ -150,45 +130,25 @@ export default defineComponent({
     const searchData = () => {
       emit('searchTable')
     }
-    const saveFile = (data: any) => {
-      const content = data
-      const blob = new Blob([content])
-      const fileName = '售后表格.xls'
-      // const disposition = data.headers['content-disposition']
-      // const fileName = disposition.split(';')[1].split('filename=')[1]
-      if ('download' in document.createElement('a')) {
-        // 非IE下载
-        const elink = document.createElement('a')
-        elink.download = fileName
-        elink.style.display = 'none'
-        elink.href = URL.createObjectURL(blob)
-        document.body.appendChild(elink)
-        elink.click()
-        URL.revokeObjectURL(elink.href) // 释放URL 对象
-        document.body.removeChild(elink)
-      } else {
-        // IE10+下载
-        navigator.msSaveBlob(blob, fileName)
-      }
-    }
-    const exportData = async () => {
-      try {
-        const data = await exportAfterSaleOrder(params)
-        saveFile(data)
-      } catch (err) {
-        // console.log(err)
-        saveFile(err)
-      }
+    // 导出文件
+    const clickExportBtn = () => {
+      Modal.confirm({
+        title: '提醒',
+        icon: createVNode(ExclamationCircleOutlined),
+        content: '是否导出当前售后报表？',
+        onOk() {
+          const apiUrl = Api.AFTER_SALE_EXPORT
+          downloadFile(apiUrl, params)
+        },
+        onCancel() {},
+      })
     }
     return {
-      typeOptions,
       params,
-      statusOptions,
-      interveneStatusOptions,
-      mannerOptions,
       startDate,
       endDate,
-      exportData,
+      ...toRefs(state),
+      clickExportBtn,
       handleChange,
       searchData,
       checkStartDate,
diff --git a/src/views/order/after-sale/components/tableConfig.ts b/src/views/order/after-sale/components/tableConfig.ts
new file mode 100644
index 0000000..210a156
--- /dev/null
+++ b/src/views/order/after-sale/components/tableConfig.ts
@@ -0,0 +1,82 @@
+// 表格数据配置
+export const columns: Array<object> = [
+  { title: '售后编号', dataIndex: 'afterSaleNo', align: 'center' },
+  {
+    title: '售后方式 ',
+    dataIndex: 'manner',
+    width: 100,
+    align: 'center',
+    slots: { customRender: 'manner' },
+  },
+  { title: '订单编号', dataIndex: 'orderNo', align: 'center' },
+  { title: '商品名称', dataIndex: 'productName', align: 'center' },
+  { title: '订单金额', dataIndex: 'orderDetailAmount', align: 'center', width: 100 },
+  { title: '退款金额', dataIndex: 'refundAmount', align: 'center', width: 100 },
+  { title: '申请时间', dataIndex: 'createTime', align: 'center' },
+  {
+    title: '退款状态',
+    dataIndex: 'status',
+    align: 'center',
+    slots: { customRender: 'status' },
+  },
+  {
+    title: '操作',
+    key: 'status',
+    fixed: 'right',
+    width: 130,
+    align: 'center',
+    slots: { customRender: 'action' },
+  },
+]
+
+// 表格显示枚举
+export const tableEnum1: Array<string> = ['未查询到售后方式', '仅退款', '退货退款', '换货']
+
+export const tableEnum2: Array<string> = [
+  '未查询到售后状态',
+  '售后处理中',
+  '售后申请待商家同意',
+  '商家不同意售后申请，待买家处理',
+  '商家同意售后申请，待买家处理',
+  '买家已退货',
+  '待商家确认收货',
+  '商家拒绝收货，待买家处理',
+  '商家已发货，待买家确认收货',
+  '售后成功',
+  '售后关闭',
+]
+
+// 切换退款状态按钮选项
+export const filterBtns: Array<object> = [
+  { label: '全部', key: 0 },
+  { label: '退款处理中', key: 1 },
+  { label: '退款关闭', key: 2 },
+]
+
+// select固定option选项配置
+export const option1: Array<object> = [
+  { label: '售中退款', value: 1 },
+  { label: '售后退款', value: 2 },
+]
+export const option2: Array<object> = [
+  { label: '售后处理中', value: 1 },
+  { label: '售后申请待商家同意', value: 2 },
+  { label: '商家不同意售后申请，待买家处理', value: 3 },
+  { label: '商家同意售后申请，待买家处理', value: 4 },
+  { label: '买家已退货', value: 5 },
+  { label: '待商家确认收货', value: 6 },
+  { label: '商家拒绝收货，待买家处理', value: 7 },
+  { label: '商家已发货，待买家确认收货', value: 8 },
+  { label: '售后成功', value: 9 },
+  { label: '售后关闭', value: 10 },
+]
+export const option3: Array<object> = [
+  { label: '未介入', value: 1 },
+  { label: '介入中', value: 2 },
+  { label: '介入结束', value: 3 },
+]
+export const option4: Array<object> = [
+  { label: '仅退款', value: 1 },
+  { label: '退货退款', value: 2 },
+  { label: '换货', value: 3 },
+]
diff --git a/src/views/order/all-order/components/AllOrderTable.vue b/src/views/order/all-order/components/AllOrderTable.vue
index ff3e1e8..f654e8d 100644
--- a/src/views/order/all-order/components/AllOrderTable.vue
+++ b/src/views/order/all-order/components/AllOrderTable.vue
@@ -60,9 +60,10 @@
 <script lang="ts">
 import { defineComponent, reactive, inject, watch, toRefs, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { ParamsData, tableColumns } from '@/model/order/AllOrder'
+import { ParamsData } from '@/model/order/AllOrder'
 import { SafetyOutlined } from '@ant-design/icons-vue'
 import OrderTable from '@/components/OrderTable/index.vue'
+import { columns, filterBtns, rowTop, tableEnum1, tableEnum2, tableEnum3 } from './tableConfig'
 
 export default defineComponent({
   components: {
@@ -79,36 +80,12 @@ export default defineComponent({
   setup(props, { emit }) {
     const route = useRoute()
     const state = reactive({
-      filterBtns: [
-        // 1:待付款2:待发货3:已发货4:已完成5:已关闭6:售后中7:退款中8:订单关闭
-        { label: '全部', key: 0 },
-        { label: '待付款', key: 1 },
-        { label: '待发货', key: 2 },
-        { label: '已发货', key: 3 },
-        { label: '已完成', key: 4 },
-        { label: '已关闭', key: 5 },
-        { label: '售后中', key: 6 },
-        { label: '退款中', key: 7 },
-      ],
-      orderPayMethod: [
-        { text: '未查询到支付信息', color: 'red' },
-        { text: '支付宝支付', color: '#3a78f6' },
-        { text: '微信支付', color: '#63c742' },
-        { text: '银联支付', color: '#ce4646' },
-        { text: '其他', color: '#efefef' },
-      ],
-      orderStatus: [
-        '未获取到订单状态',
-        '待付款',
-        '待发货',
-        '已发货',
-        '已完成',
-        '已关闭',
-        '售后中',
-        '退款中',
-        '订单关闭',
-      ],
-      orderRights: ['未获取到售后信息', '未维权', '维权中', '维权结束'],
+      filterBtns: [...filterBtns],
+      orderPayMethod: [...tableEnum1],
+      orderStatus: [...tableEnum2],
+      orderRights: [...tableEnum3],
+      columns: [...columns],
+      rowTop: [...rowTop],
       activeKey: 0,
       tableData: [],
       total: 0,
@@ -119,21 +96,6 @@ export default defineComponent({
       slotName: 'name1',
     })
     const starOrder = ref(false)
-    const columns: tableColumns[] = [
-      { title: '商品', key: 'productName', width: 300 },
-      { title: '单价/数量', key: 'qty' },
-      { title: '售后', key: 'rightsProtectionStatus' },
-      { title: '买家', key: 'receiverName' },
-      { title: '下单时间', key: 'createTime' },
-      { title: '订单状态', key: 'status' },
-      { title: '实付金额', key: 'paidAmount' },
-    ]
-    const rowTop: tableColumns[] = [
-      { title: '订单号', key: 'orderNo' },
-      { title: '', key: 'payMethod' },
-      { title: '外部订单号', key: 'externalPayNo' },
-      { title: '支付流水号', key: 'externalPayNo' },
-    ]
     const orderParams: ParamsData = inject('orderParams')!
     const filterOrderType = (key: number) => {
       if (key) {
@@ -197,8 +159,6 @@ export default defineComponent({
       },
     )
     return {
-      columns,
-      rowTop,
       starOrder,
       ...toRefs(state),
       filterOrderType,
diff --git a/src/views/order/all-order/components/FilterForm.vue b/src/views/order/all-order/components/FilterForm.vue
index a1e9c13..8b49c73 100644
--- a/src/views/order/all-order/components/FilterForm.vue
+++ b/src/views/order/all-order/components/FilterForm.vue
@@ -78,46 +78,20 @@
 
 <script lang="ts">
 import { Moment } from 'moment'
-import { defineComponent, inject, ref, watch } from 'vue'
+import { defineComponent, inject, reactive, ref, toRefs, watch } from 'vue'
 import { ParamsData } from '@/model/order/AllOrder'
+import { option1, option2, option3, option4 } from './tableConfig'
 
 export default defineComponent({
   emits: ['searchTable'],
   setup(props, { emit }) {
     const orderParams: ParamsData = inject('orderParams')!
-    // 订单类型选项
-    const typeOptions = [
-      { label: '普通订单', value: 1 },
-      { label: '代付订单', value: 2 },
-      { label: '送礼订单', value: 3 },
-      { label: '送礼社群版订单', value: 4 },
-      { label: '心愿订单', value: 5 },
-      { label: '扫码付款', value: 6 },
-      { label: '酒店订单', value: 7 },
-      { label: '维权订单', value: 8 },
-      { label: '周期购订单', value: 9 },
-      { label: '多人拼团订单', value: 10 },
-      { label: '知识付费订单', value: 11 },
-    ]
-    // 维权状态选项
-    const rightOptions = [
-      { label: '未维权', value: 1 },
-      { label: '维权中', value: 2 },
-      { label: '维权结束', value: 3 },
-    ]
-    // 配送方式选项
-    const deliveryOptions = [
-      { label: '快递发货', value: 1 },
-      { label: '上门自提', value: 2 },
-      { label: '同城配送', value: 3 },
-    ]
-    // 付款方式选项
-    const payOptions = [
-      { label: '支付宝', value: 1 },
-      { label: '微信', value: 2 },
-      { label: '银联', value: 3 },
-      { label: '其他', value: 4 },
-    ]
+    const state = reactive({
+      typeOptions: [...option1], // 订单类型选项
+      rightOptions: [...option2], // 维权状态选项
+      deliveryOptions: [...option3], // 配送方式选项
+      payOptions: [...option4], // 付款方式选项
+    })
     // 定义两个时间选择器变量
     const startDate = ref<Moment | undefined>()
     const endDate = ref<Moment>()
@@ -149,13 +123,10 @@ export default defineComponent({
       emit('searchTable')
     }
     return {
-      typeOptions,
       orderParams,
-      rightOptions,
-      deliveryOptions,
-      payOptions,
       startDate,
       endDate,
+      ...toRefs(state),
       handleChange,
       searchData,
       checkStartDate,
diff --git a/src/views/order/all-order/components/tableConfig.ts b/src/views/order/all-order/components/tableConfig.ts
new file mode 100644
index 0000000..66e3db5
--- /dev/null
+++ b/src/views/order/all-order/components/tableConfig.ts
@@ -0,0 +1,83 @@
+import { tableColumns } from '@/model/order/AllOrder'
+// 付款状态 切换表格按钮
+export const filterBtns: Array<Object> = [
+  { label: '全部', key: 0 },
+  { label: '待付款', key: 1 },
+  { label: '待发货', key: 2 },
+  { label: '已发货', key: 3 },
+  { label: '已完成', key: 4 },
+  { label: '已关闭', key: 5 },
+  { label: '售后中', key: 6 },
+  { label: '退款中', key: 7 },
+]
+
+// 表格显示的枚举信息
+export const tableEnum1: Array<Object> = [
+  { text: '未查询到支付信息', color: 'red' },
+  { text: '支付宝支付', color: '#3a78f6' },
+  { text: '微信支付', color: '#63c742' },
+  { text: '银联支付', color: '#ce4646' },
+  { text: '其他', color: '#efefef' },
+]
+export const tableEnum2: Array<string> = [
+  '未获取到订单状态',
+  '待付款',
+  '待发货',
+  '已发货',
+  '已完成',
+  '已关闭',
+  '售后中',
+  '退款中',
+  '订单关闭',
+]
+export const tableEnum3: Array<string> = ['未获取到售后信息', '未维权', '维权中', '维权结束']
+
+// 自定义表单组件参数
+// 列参数
+export const columns: Array<tableColumns> = [
+  { title: '商品', key: 'productName', width: 300 },
+  { title: '单价/数量', key: 'qty' },
+  { title: '售后', key: 'rightsProtectionStatus' },
+  { title: '买家', key: 'receiverName' },
+  { title: '下单时间', key: 'createTime' },
+  { title: '订单状态', key: 'status' },
+  { title: '实付金额', key: 'paidAmount' },
+]
+// 顶部信息参数
+export const rowTop: Array<tableColumns> = [
+  { title: '订单号', key: 'orderNo' },
+  { title: '', key: 'payMethod' },
+  { title: '外部订单号', key: 'externalPayNo' },
+  { title: '支付流水号', key: 'externalPayNo' },
+]
+
+// select的option选项
+export const option1: Array<Object> = [
+  { label: '普通订单', value: 1 },
+  { label: '代付订单', value: 2 },
+  { label: '送礼订单', value: 3 },
+  { label: '送礼社群版订单', value: 4 },
+  { label: '心愿订单', value: 5 },
+  { label: '扫码付款', value: 6 },
+  { label: '酒店订单', value: 7 },
+  { label: '维权订单', value: 8 },
+  { label: '周期购订单', value: 9 },
+  { label: '多人拼团订单', value: 10 },
+  { label: '知识付费订单', value: 11 },
+]
+export const option2: Array<Object> = [
+  { label: '未维权', value: 1 },
+  { label: '维权中', value: 2 },
+  { label: '维权结束', value: 3 },
+]
+export const option3: Array<Object> = [
+  { label: '快递发货', value: 1 },
+  { label: '上门自提', value: 2 },
+  { label: '同城配送', value: 3 },
+]
+export const option4: Array<Object> = [
+  { label: '支付宝', value: 1 },
+  { label: '微信', value: 2 },
+  { label: '银联', value: 3 },
+  { label: '其他', value: 4 },
+]
-- 
Gitee