From cfff9aa1fd2927e42a936b49c2a9b941ae08e95f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Fri, 30 Jul 2021 16:10:16 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E6=89=80=E6=9C=89=E8=AE=A2=E5=8D=95=E9=A1=B5=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 抽取公共方法用于设置组件option
2. 剥离Moment.js 引入dayjs替代
3. 修复select改变参数不变的bug
4. 增加筛选参数重置按钮
---
 package.json                                  |  1 -
 src/model/order/AllOrder.ts                   |  8 +-
 src/utils/formMethod.ts                       |  6 ++
 .../order/all-order/components/FilterForm.vue | 50 +++++++-----
 .../order/all-order/components/tableConfig.ts | 78 +++++++++----------
 src/views/order/all-order/index.vue           | 18 +----
 6 files changed, 80 insertions(+), 81 deletions(-)
 create mode 100644 src/utils/formMethod.ts

diff --git a/package.json b/package.json
index 39faf5d..5724666 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
     "ant-design-vue": "^2.2.0-beta.6",
     "dayjs": "^1.10.5",
     "js-cookie": "^2.2.1",
-    "moment": "^2.29.1",
     "nprogress": "^0.2.0",
     "qs": "^6.10.1",
     "screenfull": "^5.1.0",
diff --git a/src/model/order/AllOrder.ts b/src/model/order/AllOrder.ts
index 387d357..b8f38f0 100644
--- a/src/model/order/AllOrder.ts
+++ b/src/model/order/AllOrder.ts
@@ -1,9 +1,9 @@
 // 订单请求 筛选条件参数
 export interface ParamsData {
-  orderNo: string // 订单编号
-  externalPayNo: string // 外部支付编号
-  receiverName: string // 收货人姓名
-  receiverPhone: string // 收货人手机号
+  orderNo?: string // 订单编号
+  externalPayNo?: string // 外部支付编号
+  receiverName?: string // 收货人姓名
+  receiverPhone?: string // 收货人手机号
   receiverPhoneLastFour?: string // 收货人手机号后四位
   createTimeStart?: string // 下单开始时间
   createTimeEnd?: string // 下单结束时间
diff --git a/src/utils/formMethod.ts b/src/utils/formMethod.ts
new file mode 100644
index 0000000..b20c0ec
--- /dev/null
+++ b/src/utils/formMethod.ts
@@ -0,0 +1,6 @@
+export const createOptions = (list: Array<string>, props?: string) => {
+  const propName = props || 'value'
+  return list.map((item: string, index: number): object => {
+    return { label: item, [propName]: index++ }
+  })
+}
diff --git a/src/views/order/all-order/components/FilterForm.vue b/src/views/order/all-order/components/FilterForm.vue
index 8b49c73..718f85b 100644
--- a/src/views/order/all-order/components/FilterForm.vue
+++ b/src/views/order/all-order/components/FilterForm.vue
@@ -13,34 +13,28 @@
         <a-input v-model:value="orderParams.productName" allow-clear />
       </a-form-item>
       <a-form-item label="订单类型">
-        <a-select v-model="orderParams.type" @change="(val) => handleChange(val, 'type')">
+        <a-select v-model:value="orderParams.type">
           <a-select-option v-for="item in typeOptions" :key="item.value" :value="item.value">
             {{ item.label }}
           </a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="维权状态">
-        <a-select
-          v-model="orderParams.rightProtectionStatus"
-          @change="(val) => handleChange(val, 'rightProtectionStatus')"
-        >
+        <a-select v-model:value="orderParams.rightProtectionStatus">
           <a-select-option v-for="item in rightOptions" :key="item.value" :value="item.value">
             {{ item.label }}
           </a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="物流方式">
-        <a-select
-          v-model="orderParams.deliveryMethod"
-          @change="(val) => handleChange(val, 'deliveryMethod')"
-        >
+        <a-select v-model:value="orderParams.deliveryMethod">
           <a-select-option v-for="item in deliveryOptions" :key="item.value" :value="item.value">
             {{ item.label }}
           </a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="付款方式">
-        <a-select v-model="orderParams.payMethod" @change="(val) => handleChange(val, 'payMethod')">
+        <a-select v-model:value="orderParams.payMethod">
           <a-select-option v-for="item in payOptions" :key="item.value" :value="item.value">
             {{ item.label }}
           </a-select-option>
@@ -70,6 +64,7 @@
     </a-form>
     <div class="button-box">
       <a-button type="primary" @click="searchData">筛选</a-button>
+      <a-button @click="resetData">重置</a-button>
       <a-button>批量导出</a-button>
       <a-button>查看已生成报表</a-button>
     </div>
@@ -77,7 +72,7 @@
 </template>
 
 <script lang="ts">
-import { Moment } from 'moment'
+import { Dayjs } from 'dayjs'
 import { defineComponent, inject, reactive, ref, toRefs, watch } from 'vue'
 import { ParamsData } from '@/model/order/AllOrder'
 import { option1, option2, option3, option4 } from './tableConfig'
@@ -93,8 +88,8 @@ export default defineComponent({
       payOptions: [...option4], // 付款方式选项
     })
     // 定义两个时间选择器变量
-    const startDate = ref<Moment | undefined>()
-    const endDate = ref<Moment>()
+    const startDate = ref<Dayjs | undefined>()
+    const endDate = ref<Dayjs>()
     watch(startDate, () => {
       orderParams.createTimeStart = startDate.value?.format('YYYY-MM-DD')
     })
@@ -102,33 +97,48 @@ export default defineComponent({
       orderParams.createTimeEnd = endDate.value?.format('YYYY-MM-DD')
     })
     // 时间校验规则
-    const checkStartDate = (startDate: Moment) => {
+    const checkStartDate = (startDate: Dayjs) => {
       if (!startDate || !endDate.value) {
         return false
       }
       return startDate.valueOf() > endDate.value.valueOf()
     }
-    const checkEndDate = (endDate: Moment) => {
+    const checkEndDate = (endDate: Dayjs) => {
       if (!endDate || !startDate.value) {
         return false
       }
       return startDate.value.valueOf() >= endDate.valueOf()
     }
-    // 选择框变化函数
-    const handleChange = (value: number, attr: string) => {
-      orderParams[attr] = value
-    }
+    // // 选择框变化函数
+    // const handleChange = (value: number, attr: string) => {
+    //   console.log(value)
+    //   orderParams[attr] = value
+    // }
     // 筛选按钮
     const searchData = () => {
       emit('searchTable')
     }
+    // 重置按钮
+    const resetData = () => {
+      orderParams.orderNo = ''
+      orderParams.productName = ''
+      orderParams.deliveryMethod = 0
+      orderParams.type = 0
+      orderParams.rightProtectionStatus = 0
+      orderParams.payMethod = 0
+      orderParams.createTimeStart = undefined
+      orderParams.createTimeEnd = undefined
+      startDate.value = undefined
+      endDate.value = undefined
+      emit('searchTable')
+    }
     return {
       orderParams,
       startDate,
       endDate,
       ...toRefs(state),
-      handleChange,
       searchData,
+      resetData,
       checkStartDate,
       checkEndDate,
     }
diff --git a/src/views/order/all-order/components/tableConfig.ts b/src/views/order/all-order/components/tableConfig.ts
index 66e3db5..7e2698b 100644
--- a/src/views/order/all-order/components/tableConfig.ts
+++ b/src/views/order/all-order/components/tableConfig.ts
@@ -1,17 +1,37 @@
 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 },
+import { createOptions } from '@/utils/formMethod'
+
+// 付款状态 切换表格按钮配置数组
+const filterArr: string[] = [
+  '全部',
+  '待付款',
+  '待发货',
+  '已发货',
+  '已完成',
+  '已关闭',
+  '售后中',
+  '退款中',
 ]
 
-// 表格显示的枚举信息
+// select的option选项配置数组
+const opt1: string[] = [
+  '全部',
+  '普通订单',
+  '代付订单',
+  '送礼订单',
+  '送礼社群版订单',
+  '心愿订单',
+  '扫码付款',
+  '酒店订单',
+  '维权订单',
+  '周期购订单',
+  '多人拼团订单',
+  '知识付费订单',
+]
+const opt2: string[] = ['全部', '未维权', '维权中', '维权结束']
+const opt3: string[] = ['全部', '快递发货', '上门自提', '同城配送']
+const opt4: string[] = ['全部', '支付宝', '微信', '银联', '其他']
+// 表格显示的枚举信息配置
 export const tableEnum1: Array<Object> = [
   { text: '未查询到支付信息', color: 'red' },
   { text: '支付宝支付', color: '#3a78f6' },
@@ -50,34 +70,8 @@ export const rowTop: Array<tableColumns> = [
   { 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 },
-]
+export const option1: Array<Object> = createOptions(opt1)
+export const option2: Array<Object> = createOptions(opt2)
+export const option3: Array<Object> = createOptions(opt3)
+export const option4: Array<Object> = createOptions(opt4)
+export const filterBtns: Array<Object> = createOptions(filterArr, 'key')
diff --git a/src/views/order/all-order/index.vue b/src/views/order/all-order/index.vue
index cba4179..84246c5 100644
--- a/src/views/order/all-order/index.vue
+++ b/src/views/order/all-order/index.vue
@@ -19,20 +19,10 @@ export default defineComponent({
   setup() {
     const state = reactive({
       orderParams: {
-        orderNo: '',
-        externalPayNo: '',
-        receiverName: '',
-        receiverPhone: '',
-        receiverPhoneLastFour: '',
-        createTimeStart: '',
-        createTimeEnd: '',
-        productName: '',
-        orderStatus: undefined,
-        rightProtectionStatus: undefined,
-        type: undefined,
-        source: undefined,
-        deliveryMethod: undefined,
-        payMethod: undefined,
+        rightProtectionStatus: 0,
+        type: 0,
+        deliveryMethod: 0,
+        payMethod: 0,
         payStarredStatus: 1,
         current: 1,
         size: 5,
-- 
Gitee


From e274cfa93b1a0b3da389cf1d3072e266d5bcf24a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Fri, 30 Jul 2021 16:49:43 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E6=89=80=E6=9C=89=E8=AE=A2=E5=8D=95/?=
 =?UTF-8?q?=E5=8A=A0=E6=98=9F=E8=AE=A2=E5=8D=95=E6=89=B9=E9=87=8F=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/order/order.ts                        |  1 +
 .../order/all-order/components/FilterForm.vue | 27 ++++++++++++++-----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/api/order/order.ts b/src/api/order/order.ts
index 5cb29c7..b2082db 100644
--- a/src/api/order/order.ts
+++ b/src/api/order/order.ts
@@ -6,6 +6,7 @@ import { AfterSaleParams } from '@/model/order/AfterSale'
 
 export enum Api {
   ORDER_TABLE = '/api/order/page',
+  ORDER_EXPORT = '/api/order/export',
   AFTER_SALE_TABLE = '/api/order/afterSale/page',
   AFTER_SALE_EXPORT = '/api/order/afterSale/export',
   AFTER_SALE_REIMBURSE = '/api/order/afterSale/reimburse',
diff --git a/src/views/order/all-order/components/FilterForm.vue b/src/views/order/all-order/components/FilterForm.vue
index 718f85b..631cd0b 100644
--- a/src/views/order/all-order/components/FilterForm.vue
+++ b/src/views/order/all-order/components/FilterForm.vue
@@ -65,7 +65,7 @@
     <div class="button-box">
       <a-button type="primary" @click="searchData">筛选</a-button>
       <a-button @click="resetData">重置</a-button>
-      <a-button>批量导出</a-button>
+      <a-button @click="clickExportBtn">批量导出</a-button>
       <a-button>查看已生成报表</a-button>
     </div>
   </section>
@@ -73,9 +73,13 @@
 
 <script lang="ts">
 import { Dayjs } from 'dayjs'
-import { defineComponent, inject, reactive, ref, toRefs, watch } from 'vue'
+import { downloadFile } from '@/utils/download'
+import { Api } from '@/api/order/order'
+import { Modal } from 'ant-design-vue'
 import { ParamsData } from '@/model/order/AllOrder'
 import { option1, option2, option3, option4 } from './tableConfig'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode, defineComponent, inject, reactive, ref, toRefs, watch } from 'vue'
 
 export default defineComponent({
   emits: ['searchTable'],
@@ -109,11 +113,6 @@ export default defineComponent({
       }
       return startDate.value.valueOf() >= endDate.valueOf()
     }
-    // // 选择框变化函数
-    // const handleChange = (value: number, attr: string) => {
-    //   console.log(value)
-    //   orderParams[attr] = value
-    // }
     // 筛选按钮
     const searchData = () => {
       emit('searchTable')
@@ -132,6 +131,19 @@ export default defineComponent({
       endDate.value = undefined
       emit('searchTable')
     }
+    // 导出文件
+    const clickExportBtn = () => {
+      Modal.confirm({
+        title: '提醒',
+        icon: createVNode(ExclamationCircleOutlined),
+        content: '是否导出当前售后报表？',
+        onOk() {
+          const apiUrl = Api.ORDER_EXPORT
+          downloadFile(apiUrl, orderParams)
+        },
+        onCancel() {},
+      })
+    }
     return {
       orderParams,
       startDate,
@@ -139,6 +151,7 @@ export default defineComponent({
       ...toRefs(state),
       searchData,
       resetData,
+      clickExportBtn,
       checkStartDate,
       checkEndDate,
     }
-- 
Gitee


From 90156b007b9c6f3c63b82a0d0620aff4ffd2e32a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Fri, 30 Jul 2021 17:50:33 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=89=80=E6=9C=89?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E8=A1=A8=E5=8D=95=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 修复所有订单、星级订单筛选区域显示效果
2. 处理参数，正确传参，提取删选参数函数复用
---
 src/utils/formMethod.ts                       | 21 +++++++++++++++++++
 .../order/all-order/components/FilterForm.vue |  7 +++++--
 src/views/order/all-order/index.vue           |  6 +++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/utils/formMethod.ts b/src/utils/formMethod.ts
index b20c0ec..d20098b 100644
--- a/src/utils/formMethod.ts
+++ b/src/utils/formMethod.ts
@@ -1,6 +1,27 @@
+import { ParamsData } from '@/model/order/AllOrder'
+
+/**
+ * @description: 创建options选项
+ * @param {Array} list
+ * @param {string} props
+ * @return {*}
+ */
 export const createOptions = (list: Array<string>, props?: string) => {
   const propName = props || 'value'
   return list.map((item: string, index: number): object => {
     return { label: item, [propName]: index++ }
   })
 }
+/**
+ * @description: 筛选get请求参数不存在0的情况
+ * @param {Array} keys
+ * @param {ParamsData} params
+ * @return {*}
+ */
+export const filterParams = (keys: Array<string>, params: ParamsData): ParamsData => {
+  const result = Object.assign({}, params)
+  keys.forEach((key: string) => {
+    if (!result[key]) delete result[key]
+  })
+  return result
+}
diff --git a/src/views/order/all-order/components/FilterForm.vue b/src/views/order/all-order/components/FilterForm.vue
index 631cd0b..9bca430 100644
--- a/src/views/order/all-order/components/FilterForm.vue
+++ b/src/views/order/all-order/components/FilterForm.vue
@@ -80,6 +80,7 @@ import { ParamsData } from '@/model/order/AllOrder'
 import { option1, option2, option3, option4 } from './tableConfig'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import { createVNode, defineComponent, inject, reactive, ref, toRefs, watch } from 'vue'
+import { filterParams } from '@/utils/formMethod'
 
 export default defineComponent({
   emits: ['searchTable'],
@@ -90,6 +91,7 @@ export default defineComponent({
       rightOptions: [...option2], // 维权状态选项
       deliveryOptions: [...option3], // 配送方式选项
       payOptions: [...option4], // 付款方式选项
+      keys: ['rightProtectionStatus', 'type', 'deliveryMethod', 'payMethod'], // 过滤参数key
     })
     // 定义两个时间选择器变量
     const startDate = ref<Dayjs | undefined>()
@@ -136,10 +138,11 @@ export default defineComponent({
       Modal.confirm({
         title: '提醒',
         icon: createVNode(ExclamationCircleOutlined),
-        content: '是否导出当前售后报表？',
+        content: '是否导出当前订单报表？',
         onOk() {
           const apiUrl = Api.ORDER_EXPORT
-          downloadFile(apiUrl, orderParams)
+          const exportParams = filterParams(state.keys, orderParams)
+          downloadFile(apiUrl, exportParams)
         },
         onCancel() {},
       })
diff --git a/src/views/order/all-order/index.vue b/src/views/order/all-order/index.vue
index 84246c5..e01c4f5 100644
--- a/src/views/order/all-order/index.vue
+++ b/src/views/order/all-order/index.vue
@@ -8,6 +8,7 @@
 <script lang="ts">
 import { defineComponent, reactive, provide, toRefs } from 'vue'
 import { getOrderTableData } from '@/api/order/order'
+import { filterParams } from '@/utils/formMethod'
 import FilterForm from './components/FilterForm.vue'
 import AllOrderTable from './components/AllOrderTable.vue'
 
@@ -27,11 +28,14 @@ export default defineComponent({
         current: 1,
         size: 5,
       },
+      keys: ['rightProtectionStatus', 'type', 'deliveryMethod', 'payMethod'],
       orderTableRes: {},
     })
+    // 因为select选项0值不存在，所以筛选参数，删除属性
     const getOrderTable = async () => {
+      const params = filterParams(state.keys, state.orderParams)
       try {
-        const data = await getOrderTableData(state.orderParams)
+        const data = await getOrderTableData(params)
         state.orderTableRes = data
       } catch (err) {
         throw err
-- 
Gitee


From d8cfe7bb80d41c565c71749df3bd16a821466622 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Fri, 30 Jul 2021 17:54:31 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E6=89=80=E6=9C=89=E8=AE=A2=E5=8D=95=20?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E8=A1=A8=E6=A0=BC=E9=83=A8=E5=88=86=E5=86=99?=
 =?UTF-8?q?=E6=B3=95=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/all-order/components/AllOrderTable.vue | 6 +-----
 src/views/order/all-order/components/FilterForm.vue    | 2 +-
 src/views/order/all-order/index.vue                    | 2 +-
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/views/order/all-order/components/AllOrderTable.vue b/src/views/order/all-order/components/AllOrderTable.vue
index f654e8d..972b98f 100644
--- a/src/views/order/all-order/components/AllOrderTable.vue
+++ b/src/views/order/all-order/components/AllOrderTable.vue
@@ -98,11 +98,7 @@ export default defineComponent({
     const starOrder = ref(false)
     const orderParams: ParamsData = inject('orderParams')!
     const filterOrderType = (key: number) => {
-      if (key) {
-        orderParams.orderStatus = key
-      } else {
-        delete orderParams.orderStatus
-      }
+      orderParams.orderStatus = key
       state.activeKey = key
       emit('getTable')
     }
diff --git a/src/views/order/all-order/components/FilterForm.vue b/src/views/order/all-order/components/FilterForm.vue
index 9bca430..39f5e4f 100644
--- a/src/views/order/all-order/components/FilterForm.vue
+++ b/src/views/order/all-order/components/FilterForm.vue
@@ -91,7 +91,7 @@ export default defineComponent({
       rightOptions: [...option2], // 维权状态选项
       deliveryOptions: [...option3], // 配送方式选项
       payOptions: [...option4], // 付款方式选项
-      keys: ['rightProtectionStatus', 'type', 'deliveryMethod', 'payMethod'], // 过滤参数key
+      keys: ['rightProtectionStatus', 'type', 'deliveryMethod', 'payMethod', 'orderStatus'], // 过滤参数key
     })
     // 定义两个时间选择器变量
     const startDate = ref<Dayjs | undefined>()
diff --git a/src/views/order/all-order/index.vue b/src/views/order/all-order/index.vue
index e01c4f5..5fd52bf 100644
--- a/src/views/order/all-order/index.vue
+++ b/src/views/order/all-order/index.vue
@@ -28,7 +28,7 @@ export default defineComponent({
         current: 1,
         size: 5,
       },
-      keys: ['rightProtectionStatus', 'type', 'deliveryMethod', 'payMethod'],
+      keys: ['rightProtectionStatus', 'type', 'deliveryMethod', 'payMethod', 'orderStatus'],
       orderTableRes: {},
     })
     // 因为select选项0值不存在，所以筛选参数，删除属性
-- 
Gitee


From 9f05ad020cd0d30cb46b735e669f6ce334e44e40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Fri, 30 Jul 2021 18:31:31 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=80=80=E6=AC=BE?=
 =?UTF-8?q?=E9=A1=B5=E4=BB=A3=E7=A0=81=EF=BC=8C=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../after-sale/components/FilterForm.vue      | 49 +++++++++-------
 .../after-sale/components/tableConfig.ts      | 56 +++++++++----------
 src/views/order/after-sale/index.vue          |  9 ++-
 .../order/all-order/components/FilterForm.vue |  5 +-
 .../order/all-order/components/tableConfig.ts |  9 +++
 src/views/order/all-order/index.vue           |  4 +-
 6 files changed, 77 insertions(+), 55 deletions(-)

diff --git a/src/views/order/after-sale/components/FilterForm.vue b/src/views/order/after-sale/components/FilterForm.vue
index 41909fc..88a5167 100644
--- a/src/views/order/after-sale/components/FilterForm.vue
+++ b/src/views/order/after-sale/components/FilterForm.vue
@@ -16,24 +16,21 @@
         <a-input v-model:value="params.productName" allow-clear />
       </a-form-item>
       <a-form-item label="退款类型">
-        <a-select v-model="params.refundType" @change="(val) => handleChange(val, 'refundType')">
+        <a-select v-model:value="params.refundType">
           <a-select-option v-for="item in typeOptions" :key="item.value" :value="item.value">
             {{ item.label }}
           </a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="售后状态">
-        <a-select v-model="params.status" @change="(val) => handleChange(val, 'status')">
+        <a-select v-model:value="params.status">
           <a-select-option v-for="item in statusOptions" :key="item.value" :value="item.value">
             {{ item.label }}
           </a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="客服介入">
-        <a-select
-          v-model="params.interveneStatus"
-          @change="(val) => handleChange(val, 'interveneStatus')"
-        >
+        <a-select v-model:value="params.interveneStatus">
           <a-select-option
             v-for="item in interveneStatusOptions"
             :key="item.value"
@@ -44,7 +41,7 @@
         </a-select>
       </a-form-item>
       <a-form-item label="售后方式">
-        <a-select v-model="params.manner" @change="(val) => handleChange(val, 'manner')">
+        <a-select v-model:value="params.manner">
           <a-select-option v-for="item in mannerOptions" :key="item.value" :value="item.value">
             {{ item.label }}
           </a-select-option>
@@ -74,6 +71,7 @@
     </a-form>
     <div class="button-box">
       <a-button type="primary" @click="searchData">筛选</a-button>
+      <a-button @click="resetData">重置</a-button>
       <a-button @click="clickExportBtn">批量导出</a-button>
       <a-button>查看已生成报表</a-button>
     </div>
@@ -87,8 +85,9 @@ import { AfterSaleParams } from '@/model/order/AfterSale'
 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'
+import { Dayjs } from 'dayjs'
+import { option1, option2, option3, option4, filterKeys } from './tableConfig'
+import { filterParams } from '@/utils/formMethod'
 
 export default defineComponent({
   emits: ['searchTable'],
@@ -101,8 +100,8 @@ export default defineComponent({
       mannerOptions: [...option4], // 售后方式选项
     })
     // 定义两个时间选择器变量
-    const startDate = ref<Moment | undefined>()
-    const endDate = ref<Moment>()
+    const startDate = ref<Dayjs | undefined>()
+    const endDate = ref<Dayjs>()
     watch(startDate, () => {
       params.createStart = startDate.value?.format('YYYY-MM-DD')
     })
@@ -110,26 +109,37 @@ export default defineComponent({
       params.createEnd = endDate.value?.format('YYYY-MM-DD')
     })
     // 时间校验规则
-    const checkStartDate = (startDate: Moment) => {
+    const checkStartDate = (startDate: Dayjs) => {
       if (!startDate || !endDate.value) {
         return false
       }
       return startDate.valueOf() > endDate.value.valueOf()
     }
-    const checkEndDate = (endDate: Moment) => {
+    const checkEndDate = (endDate: Dayjs) => {
       if (!endDate || !startDate.value) {
         return false
       }
       return startDate.value.valueOf() >= endDate.valueOf()
     }
-    // 选择框变化函数
-    const handleChange = (value: number, attr: string) => {
-      params[attr] = value
-    }
     // 筛选按钮
     const searchData = () => {
       emit('searchTable')
     }
+    // 重置按钮
+    const resetData = () => {
+      params.refundType = 0
+      params.status = 0
+      params.interveneStatus = 0
+      params.manner = 0
+      params.orderNo = ''
+      params.afterSaleNo = ''
+      params.productName = ''
+      params.createStart = undefined
+      params.createEnd = undefined
+      startDate.value = undefined
+      endDate.value = undefined
+      emit('searchTable')
+    }
     // 导出文件
     const clickExportBtn = () => {
       Modal.confirm({
@@ -138,7 +148,8 @@ export default defineComponent({
         content: '是否导出当前售后报表？',
         onOk() {
           const apiUrl = Api.AFTER_SALE_EXPORT
-          downloadFile(apiUrl, params)
+          const exportParams = filterParams(filterKeys, params)
+          downloadFile(apiUrl, exportParams)
         },
         onCancel() {},
       })
@@ -149,8 +160,8 @@ export default defineComponent({
       endDate,
       ...toRefs(state),
       clickExportBtn,
-      handleChange,
       searchData,
+      resetData,
       checkStartDate,
       checkEndDate,
     }
diff --git a/src/views/order/after-sale/components/tableConfig.ts b/src/views/order/after-sale/components/tableConfig.ts
index 210a156..6702ed6 100644
--- a/src/views/order/after-sale/components/tableConfig.ts
+++ b/src/views/order/after-sale/components/tableConfig.ts
@@ -1,3 +1,4 @@
+import { createOptions } from '@/utils/formMethod'
 // 表格数据配置
 export const columns: Array<object> = [
   { title: '售后编号', dataIndex: 'afterSaleNo', align: 'center' },
@@ -47,36 +48,31 @@ export const tableEnum2: Array<string> = [
 ]
 
 // 切换退款状态按钮选项
-export const filterBtns: Array<object> = [
-  { label: '全部', key: 0 },
-  { label: '退款处理中', key: 1 },
-  { label: '退款关闭', key: 2 },
-]
+const filterArr: string[] = ['全部', '退款处理中', '退款关闭']
 
 // 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 },
+const opt1: string[] = ['全部', '售中退款', '售后退款']
+const opt2: string[] = [
+  '全部',
+  '售后处理中',
+  '售后申请待商家同意',
+  '商家不同意售后申请，待买家处理',
+  '商家同意售后申请，待买家处理',
+  '买家已退货',
+  '待商家确认收货',
+  '商家拒绝收货，待买家处理',
+  '商家已发货，待买家确认收货',
+  '售后成功',
+  '售后关闭',
 ]
+const opt3 = ['全部', '未介入', '介入中', '介入结束']
+const opt4 = ['全部', '仅退款', '退货退款', '换货']
+
+// 筛选数据参数
+export const filterKeys = ['refundType', 'status', 'interveneStatus', 'manner']
+
+export const option1: Array<object> = createOptions(opt1)
+export const option2: Array<object> = createOptions(opt2)
+export const option3: Array<object> = createOptions(opt3)
+export const option4: Array<object> = createOptions(opt4)
+export const filterBtns: Array<object> = createOptions(filterArr, 'key')
diff --git a/src/views/order/after-sale/index.vue b/src/views/order/after-sale/index.vue
index 1000270..d6f6860 100644
--- a/src/views/order/after-sale/index.vue
+++ b/src/views/order/after-sale/index.vue
@@ -7,9 +7,11 @@
 
 <script lang="ts">
 import { defineComponent, reactive, provide, toRefs, onMounted } from 'vue'
+import { filterKeys } from './components/tableConfig'
 import { getAfterSaleTableData } from '@/api/order/order'
 import FilterForm from './components/FilterForm.vue'
 import AfterSaleTable from './components/AfterSaleTable.vue'
+import { filterParams } from '@/utils/formMethod'
 
 export default defineComponent({
   components: {
@@ -21,12 +23,17 @@ export default defineComponent({
       params: {
         current: 1,
         size: 5,
+        refundType: 0,
+        status: 0,
+        interveneStatus: 0,
+        manner: 0,
       },
       tableRes: {},
     })
     const getAfterSaleTable = async () => {
       try {
-        const data = await getAfterSaleTableData(state.params)
+        const params = filterParams(filterKeys, state.params)
+        const data = await getAfterSaleTableData(params)
         state.tableRes = data
       } catch (err) {
         throw err
diff --git a/src/views/order/all-order/components/FilterForm.vue b/src/views/order/all-order/components/FilterForm.vue
index 39f5e4f..ff5f1ca 100644
--- a/src/views/order/all-order/components/FilterForm.vue
+++ b/src/views/order/all-order/components/FilterForm.vue
@@ -77,7 +77,7 @@ import { downloadFile } from '@/utils/download'
 import { Api } from '@/api/order/order'
 import { Modal } from 'ant-design-vue'
 import { ParamsData } from '@/model/order/AllOrder'
-import { option1, option2, option3, option4 } from './tableConfig'
+import { option1, option2, option3, option4, filterKeys } from './tableConfig'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import { createVNode, defineComponent, inject, reactive, ref, toRefs, watch } from 'vue'
 import { filterParams } from '@/utils/formMethod'
@@ -91,7 +91,6 @@ export default defineComponent({
       rightOptions: [...option2], // 维权状态选项
       deliveryOptions: [...option3], // 配送方式选项
       payOptions: [...option4], // 付款方式选项
-      keys: ['rightProtectionStatus', 'type', 'deliveryMethod', 'payMethod', 'orderStatus'], // 过滤参数key
     })
     // 定义两个时间选择器变量
     const startDate = ref<Dayjs | undefined>()
@@ -141,7 +140,7 @@ export default defineComponent({
         content: '是否导出当前订单报表？',
         onOk() {
           const apiUrl = Api.ORDER_EXPORT
-          const exportParams = filterParams(state.keys, orderParams)
+          const exportParams = filterParams(filterKeys, orderParams)
           downloadFile(apiUrl, exportParams)
         },
         onCancel() {},
diff --git a/src/views/order/all-order/components/tableConfig.ts b/src/views/order/all-order/components/tableConfig.ts
index 7e2698b..1b0fe3f 100644
--- a/src/views/order/all-order/components/tableConfig.ts
+++ b/src/views/order/all-order/components/tableConfig.ts
@@ -70,6 +70,15 @@ export const rowTop: Array<tableColumns> = [
   { title: '外部订单号', key: 'externalPayNo' },
   { title: '支付流水号', key: 'externalPayNo' },
 ]
+
+// get请求筛选参数
+export const filterKeys = [
+  'rightProtectionStatus',
+  'type',
+  'deliveryMethod',
+  'payMethod',
+  'orderStatus',
+]
 export const option1: Array<Object> = createOptions(opt1)
 export const option2: Array<Object> = createOptions(opt2)
 export const option3: Array<Object> = createOptions(opt3)
diff --git a/src/views/order/all-order/index.vue b/src/views/order/all-order/index.vue
index 5fd52bf..cfd9183 100644
--- a/src/views/order/all-order/index.vue
+++ b/src/views/order/all-order/index.vue
@@ -9,6 +9,7 @@
 import { defineComponent, reactive, provide, toRefs } from 'vue'
 import { getOrderTableData } from '@/api/order/order'
 import { filterParams } from '@/utils/formMethod'
+import { filterKeys } from './components/tableConfig'
 import FilterForm from './components/FilterForm.vue'
 import AllOrderTable from './components/AllOrderTable.vue'
 
@@ -28,13 +29,12 @@ export default defineComponent({
         current: 1,
         size: 5,
       },
-      keys: ['rightProtectionStatus', 'type', 'deliveryMethod', 'payMethod', 'orderStatus'],
       orderTableRes: {},
     })
     // 因为select选项0值不存在，所以筛选参数，删除属性
     const getOrderTable = async () => {
-      const params = filterParams(state.keys, state.orderParams)
       try {
+        const params = filterParams(filterKeys, state.orderParams)
         const data = await getOrderTableData(params)
         state.orderTableRes = data
       } catch (err) {
-- 
Gitee