From edd4a3aa3b5c83fcabf0ad005ad5bb9e9e9df04e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Sat, 31 Jul 2021 11:54:49 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=8A=A0=E8=BD=BD=E6=94=AF=E4=BB=98=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../all-order/components/AllOrderTable.vue    | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/views/order/all-order/components/AllOrderTable.vue b/src/views/order/all-order/components/AllOrderTable.vue
index 972b98f..229309d 100644
--- a/src/views/order/all-order/components/AllOrderTable.vue
+++ b/src/views/order/all-order/components/AllOrderTable.vue
@@ -14,9 +14,9 @@
     <div class="table-contain">
       <OrderTable :columns="columns" :row-top="rowTop" :table-data="tableData">
         <template #payMethod="{ data }">
-          <span :style="{ color: orderPayMethod[data || 0].color }">
-            <SafetyOutlined />
-            {{ orderPayMethod[data || 0].text }}
+          <span class="paySpan" :style="{ color: orderPayMethod[data || 0].color }">
+            <component :is="changeIcon(data)" />
+            <span>{{ orderPayMethod[data || 0].text }}</span>
           </span>
         </template>
         <template #productName="{ data }">
@@ -58,17 +58,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, inject, watch, toRefs, ref } from 'vue'
+import { defineComponent, reactive, inject, watch, toRefs, ref, createVNode } from 'vue'
 import { useRoute } from 'vue-router'
 import { ParamsData } from '@/model/order/AllOrder'
-import { SafetyOutlined } from '@ant-design/icons-vue'
 import OrderTable from '@/components/OrderTable/index.vue'
+import { Attention, Alipay, Wechat, BankCard, Funds } from '@icon-park/vue-next'
 import { columns, filterBtns, rowTop, tableEnum1, tableEnum2, tableEnum3 } from './tableConfig'
 
 export default defineComponent({
   components: {
     OrderTable,
-    SafetyOutlined,
+    Attention,
+    Alipay,
+    Wechat,
+    BankCard,
+    Funds,
   },
   props: {
     tableRes: {
@@ -109,6 +113,12 @@ export default defineComponent({
       state.pageParams.size = size
       state.pageParams.current = 1
     }
+    // 根据数据动态显示图标组件
+    const icons = [Attention, Alipay, Wechat, BankCard, Funds]
+    const iconProps = { size: 14, theme: 'filled' }
+    const changeIcon = (data: number) => {
+      return createVNode(icons[data], iconProps)
+    }
     // 监听router区分加星订单页面
     watch(
       () => route.name,
@@ -157,6 +167,7 @@ export default defineComponent({
     return {
       starOrder,
       ...toRefs(state),
+      changeIcon,
       filterOrderType,
       handlePageChange,
       handleSizeChange,
@@ -190,18 +201,16 @@ export default defineComponent({
       background: #fff;
     }
   }
+  .table-contain {
+    .paySpan {
+      .i-icon {
+        // border: 1px solid red;
+      }
+    }
+  }
   .table-bottom {
     text-align: right;
   }
-  .alipay-color {
-    color: #3a78f6;
-  }
-  .wechat-color {
-    color: #63c742;
-  }
-  .bank-color {
-    color: #ce4646;
-  }
   .frist-td {
     display: flex;
     width: 100%;
-- 
Gitee


From 962eae6c17ebea48a7674d6d91082b24f42af13f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Tue, 3 Aug 2021 14:47:17 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9icon=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=EF=BC=8C=E4=BD=BF=E5=85=B6=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=97antd=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Icon/index.vue                 | 59 ++++++++++++++++++-
 src/interface/icon.ts                         |  8 +++
 .../all-order/components/AllOrderTable.vue    | 24 +++-----
 3 files changed, 74 insertions(+), 17 deletions(-)
 create mode 100644 src/interface/icon.ts

diff --git a/src/components/Icon/index.vue b/src/components/Icon/index.vue
index 57da369..b0c2585 100644
--- a/src/components/Icon/index.vue
+++ b/src/components/Icon/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, reactive, UnwrapRef } from 'vue'
+import { IconOption } from '@/interface/icon'
 import * as Icons from '@ant-design/icons-vue'
 
 export default defineComponent({
@@ -9,9 +10,63 @@ export default defineComponent({
       type: String,
       default: () => '',
     },
+    style: {
+      type: Object,
+      default: () => null,
+    },
+    option: {
+      type: Object,
+      default: () => {},
+    },
+    spin: {
+      type: Boolean,
+      default: () => false,
+    },
+    rotate: {
+      type: Number,
+      default: () => null,
+    },
+    twoToneColor: {
+      type: String,
+      default: () => '',
+    },
+  },
+  setup(props) {
+    const params: UnwrapRef<IconOption> = reactive(props.option || {})
+    const optionKeys: string[] = Object.keys(props)
+    const setParams = () => {
+      optionKeys.forEach((key: string) => {
+        if (props[key]) {
+          params[key] = props[key]
+        }
+      })
+    }
+    const checkParams = () => {
+      const { rotate, twoToneColor } = params
+      if (rotate && (rotate < 0 || rotate > 360)) {
+        delete params.rotate
+        console.log(
+          '%c [ 警告, icon旋转参数错误 ]',
+          'font-size:13px; background:pink; color:#bf2c9f;',
+        )
+      }
+      const colorReg = /^#([a-fA-F\d]{6}|[a-fA-F\d]{3})$/
+      if (twoToneColor && !colorReg.test(twoToneColor)) {
+        delete params.twoToneColor
+        console.log(
+          '%c [ 警告, icon参数"twoToneColor"格式错误 ]',
+          'font-size:13px; background:pink; color:#bf2c9f;',
+        )
+      }
+    }
+    setParams()
+    checkParams()
+    return {
+      params,
+    }
   },
   render() {
-    return h(Icons[this.type])
+    return h(Icons[this.type], this.params)
   },
 })
 </script>
diff --git a/src/interface/icon.ts b/src/interface/icon.ts
new file mode 100644
index 0000000..e32c086
--- /dev/null
+++ b/src/interface/icon.ts
@@ -0,0 +1,8 @@
+export interface IconOption {
+  type?: string // 图标类型
+  style?: object // 图标的样式
+  spin?: boolean // 旋转动画
+  rotate?: number // 旋转角度
+  twoToneColor?: string // 十六进制字符串 双色图标主要颜色
+  [propName: string]: any // 动态类型
+}
diff --git a/src/views/order/all-order/components/AllOrderTable.vue b/src/views/order/all-order/components/AllOrderTable.vue
index 229309d..71fb7b7 100644
--- a/src/views/order/all-order/components/AllOrderTable.vue
+++ b/src/views/order/all-order/components/AllOrderTable.vue
@@ -15,7 +15,7 @@
       <OrderTable :columns="columns" :row-top="rowTop" :table-data="tableData">
         <template #payMethod="{ data }">
           <span class="paySpan" :style="{ color: orderPayMethod[data || 0].color }">
-            <component :is="changeIcon(data)" />
+            <icon :type="icons[data]" :style="{ fontSize: '14px' }" />
             <span>{{ orderPayMethod[data || 0].text }}</span>
           </span>
         </template>
@@ -58,21 +58,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, inject, watch, toRefs, ref, createVNode } from 'vue'
+import { defineComponent, reactive, inject, watch, toRefs, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { ParamsData } from '@/model/order/AllOrder'
 import OrderTable from '@/components/OrderTable/index.vue'
-import { Attention, Alipay, Wechat, BankCard, Funds } from '@icon-park/vue-next'
 import { columns, filterBtns, rowTop, tableEnum1, tableEnum2, tableEnum3 } from './tableConfig'
 
 export default defineComponent({
   components: {
     OrderTable,
-    Attention,
-    Alipay,
-    Wechat,
-    BankCard,
-    Funds,
   },
   props: {
     tableRes: {
@@ -97,6 +91,13 @@ export default defineComponent({
         current: 1,
         size: 5,
       },
+      icons: [
+        'ExclamationCircleFilled',
+        'AlipayCircleFilled',
+        'WechatFilled',
+        'CreditCardFilled',
+        'TransactionFilled',
+      ],
       slotName: 'name1',
     })
     const starOrder = ref(false)
@@ -113,12 +114,6 @@ export default defineComponent({
       state.pageParams.size = size
       state.pageParams.current = 1
     }
-    // 根据数据动态显示图标组件
-    const icons = [Attention, Alipay, Wechat, BankCard, Funds]
-    const iconProps = { size: 14, theme: 'filled' }
-    const changeIcon = (data: number) => {
-      return createVNode(icons[data], iconProps)
-    }
     // 监听router区分加星订单页面
     watch(
       () => route.name,
@@ -167,7 +162,6 @@ export default defineComponent({
     return {
       starOrder,
       ...toRefs(state),
-      changeIcon,
       filterOrderType,
       handlePageChange,
       handleSizeChange,
-- 
Gitee


From 55b70ca96cd1e9c7e6dbfaa701c95dde2226807f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Tue, 3 Aug 2021 16:42:39 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=85=AC=E5=85=B1icon=E6=89=A9=E5=B1=95ico?=
 =?UTF-8?q?npark?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

标签内填写 icon=“park”即可使用iconpark图标及其所有配置参数
---
 src/components/Icon/index.vue | 108 +++++++++++++++++++---------------
 1 file changed, 62 insertions(+), 46 deletions(-)

diff --git a/src/components/Icon/index.vue b/src/components/Icon/index.vue
index b0c2585..a742e87 100644
--- a/src/components/Icon/index.vue
+++ b/src/components/Icon/index.vue
@@ -2,38 +2,51 @@
 import { defineComponent, h, reactive, UnwrapRef } from 'vue'
 import { IconOption } from '@/interface/icon'
 import * as Icons from '@ant-design/icons-vue'
+import * as IconPark from '@icon-park/vue-next'
 
 export default defineComponent({
   name: 'Icon',
   props: {
-    type: {
-      type: String,
-      default: () => '',
-    },
-    style: {
-      type: Object,
-      default: () => null,
-    },
-    option: {
-      type: Object,
-      default: () => {},
-    },
-    spin: {
-      type: Boolean,
-      default: () => false,
-    },
-    rotate: {
-      type: Number,
-      default: () => null,
-    },
-    twoToneColor: {
-      type: String,
-      default: () => '',
-    },
+    // 共有参数
+    icon: { type: String, default: () => 'antd' },
+    type: { type: String, default: () => '', required: true },
+    spin: { type: Boolean, default: () => false },
+    option: { type: Object, default: () => {} },
+    // antd图标参数
+    style: { type: Object, default: () => null },
+    rotate: { type: Number, default: () => null },
+    twoToneColor: { type: String, default: () => '' },
+    // icon-park参数
+    size: { type: Number, default: () => null },
+    theme: { type: Number, default: () => null },
+    strokeWidth: { type: Number, default: () => null },
+    strokeLinecap: { type: String, default: () => null },
+    strokeLinejoin: { type: String, default: () => null },
+    fill: { type: String, default: () => null },
   },
   setup(props) {
-    const params: UnwrapRef<IconOption> = reactive(props.option || {})
-    const optionKeys: string[] = Object.keys(props)
+    const antdKeys: string[] = ['type', 'style', 'rotate', 'twoToneColor', 'spin']
+    const parkKeys: string[] = ['size', 'theme', 'strokeWidth', 'strokeLinecap', 'spin']
+    const params: UnwrapRef<IconOption> = reactive(props.option || {}) // 最终参数
+    let iconCompontent: any = Icons
+    let optionKeys: string[] = []
+    // 初始化图标库参数
+    const initIconFrame = () => {
+      switch (props.icon) {
+        case 'antd':
+          optionKeys = antdKeys
+          iconCompontent = Icons
+          break
+        case 'park':
+          optionKeys = parkKeys
+          iconCompontent = IconPark
+          break
+        default:
+          optionKeys = antdKeys
+          iconCompontent = Icons
+      }
+    }
+    // 标签参数获取
     const setParams = () => {
       optionKeys.forEach((key: string) => {
         if (props[key]) {
@@ -41,32 +54,35 @@ export default defineComponent({
         }
       })
     }
-    const checkParams = () => {
-      const { rotate, twoToneColor } = params
-      if (rotate && (rotate < 0 || rotate > 360)) {
-        delete params.rotate
-        console.log(
-          '%c [ 警告, icon旋转参数错误 ]',
-          'font-size:13px; background:pink; color:#bf2c9f;',
-        )
-      }
-      const colorReg = /^#([a-fA-F\d]{6}|[a-fA-F\d]{3})$/
-      if (twoToneColor && !colorReg.test(twoToneColor)) {
-        delete params.twoToneColor
-        console.log(
-          '%c [ 警告, icon参数"twoToneColor"格式错误 ]',
-          'font-size:13px; background:pink; color:#bf2c9f;',
-        )
-      }
-    }
+    // 校验参数，抛出错误
+    // const checkParams = () => {
+    //   const { rotate, twoToneColor } = params
+    //   if (rotate && (rotate < 0 || rotate > 360)) {
+    //     delete params.rotate
+    //     console.log(
+    //       '%c [ 警告, icon旋转参数错误 ]',
+    //       'font-size:13px; background:pink; color:#bf2c9f;',
+    //     )
+    //   }
+    //   const colorReg = /^#([a-fA-F\d]{6}|[a-fA-F\d]{3})$/
+    //   if (twoToneColor && !colorReg.test(twoToneColor)) {
+    //     delete params.twoToneColor
+    //     console.log(
+    //       '%c [ 警告, icon参数"twoToneColor"格式错误 ]',
+    //       'font-size:13px; background:pink; color:#bf2c9f;',
+    //     )
+    //   }
+    // }
+    initIconFrame()
     setParams()
-    checkParams()
+    // checkParams()
     return {
       params,
+      iconCompontent,
     }
   },
   render() {
-    return h(Icons[this.type], this.params)
+    return h(this.iconCompontent[this.type], this.params)
   },
 })
 </script>
-- 
Gitee


From 6742821651263dc0c79e4ab7136a24f7a86316cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= <hanlei001@wondertek.com.cn>
Date: Tue, 3 Aug 2021 16:43:18 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../all-order/components/AllOrderTable.vue    | 40 ++++++-------------
 .../order/all-order/components/FilterForm.vue |  1 +
 .../order/all-order/components/tableConfig.ts | 12 +++---
 3 files changed, 19 insertions(+), 34 deletions(-)

diff --git a/src/views/order/all-order/components/AllOrderTable.vue b/src/views/order/all-order/components/AllOrderTable.vue
index 71fb7b7..3fc49e6 100644
--- a/src/views/order/all-order/components/AllOrderTable.vue
+++ b/src/views/order/all-order/components/AllOrderTable.vue
@@ -15,7 +15,7 @@
       <OrderTable :columns="columns" :row-top="rowTop" :table-data="tableData">
         <template #payMethod="{ data }">
           <span class="paySpan" :style="{ color: orderPayMethod[data || 0].color }">
-            <icon :type="icons[data]" :style="{ fontSize: '14px' }" />
+            <icon :type="orderPayMethod[data || 0].icon" :style="{ fontSize: '14px' }" />
             <span>{{ orderPayMethod[data || 0].text }}</span>
           </span>
         </template>
@@ -41,8 +41,8 @@
       </OrderTable>
       <div class="table-bottom">
         <a-pagination
-          v-model:current="pageParams.current"
-          v-model:pageSize="pageParams.size"
+          v-model:current="orderParams.current"
+          v-model:pageSize="orderParams.size"
           size="small"
           :total="total"
           :page-size-options="['5', '10', '15', '20']"
@@ -87,32 +87,22 @@ export default defineComponent({
       activeKey: 0,
       tableData: [],
       total: 0,
-      pageParams: {
-        current: 1,
-        size: 5,
-      },
-      icons: [
-        'ExclamationCircleFilled',
-        'AlipayCircleFilled',
-        'WechatFilled',
-        'CreditCardFilled',
-        'TransactionFilled',
-      ],
       slotName: 'name1',
     })
     const starOrder = ref(false)
     const orderParams: ParamsData = inject('orderParams')!
     const filterOrderType = (key: number) => {
       orderParams.orderStatus = key
+      orderParams.current = 1
       state.activeKey = key
       emit('getTable')
     }
     const handlePageChange = (page: number, pageSize: number) => {
-      state.pageParams.size = pageSize
+      orderParams.size = pageSize
     }
     const handleSizeChange = (current: number, size: number) => {
-      state.pageParams.size = size
-      state.pageParams.current = 1
+      orderParams.size = size
+      orderParams.current = 1
     }
     // 监听router区分加星订单页面
     watch(
@@ -149,10 +139,10 @@ export default defineComponent({
       },
     )
     watch(
-      () => state.pageParams,
-      (newVal) => {
-        orderParams.size = newVal.size
-        orderParams.current = newVal.current
+      () => [orderParams.current, orderParams.size],
+      ([currentVal, sizeVal]) => {
+        orderParams.size = sizeVal
+        orderParams.current = currentVal
         emit('getTable')
       },
       {
@@ -161,6 +151,7 @@ export default defineComponent({
     )
     return {
       starOrder,
+      orderParams,
       ...toRefs(state),
       filterOrderType,
       handlePageChange,
@@ -195,13 +186,6 @@ export default defineComponent({
       background: #fff;
     }
   }
-  .table-contain {
-    .paySpan {
-      .i-icon {
-        // border: 1px solid red;
-      }
-    }
-  }
   .table-bottom {
     text-align: right;
   }
diff --git a/src/views/order/all-order/components/FilterForm.vue b/src/views/order/all-order/components/FilterForm.vue
index ff5f1ca..ceff017 100644
--- a/src/views/order/all-order/components/FilterForm.vue
+++ b/src/views/order/all-order/components/FilterForm.vue
@@ -124,6 +124,7 @@ export default defineComponent({
       orderParams.productName = ''
       orderParams.deliveryMethod = 0
       orderParams.type = 0
+      orderParams.current = 1
       orderParams.rightProtectionStatus = 0
       orderParams.payMethod = 0
       orderParams.createTimeStart = undefined
diff --git a/src/views/order/all-order/components/tableConfig.ts b/src/views/order/all-order/components/tableConfig.ts
index 1b0fe3f..2ff68d1 100644
--- a/src/views/order/all-order/components/tableConfig.ts
+++ b/src/views/order/all-order/components/tableConfig.ts
@@ -33,11 +33,11 @@ const opt3: string[] = ['全部', '快递发货', '上门自提', '同城配送'
 const opt4: string[] = ['全部', '支付宝', '微信', '银联', '其他']
 // 表格显示的枚举信息配置
 export const tableEnum1: Array<Object> = [
-  { text: '未查询到支付信息', color: 'red' },
-  { text: '支付宝支付', color: '#3a78f6' },
-  { text: '微信支付', color: '#63c742' },
-  { text: '银联支付', color: '#ce4646' },
-  { text: '其他', color: '#efefef' },
+  { text: '未查询到支付信息', color: 'red', icon: 'ExclamationCircleFilled' },
+  { text: '支付宝支付', color: '#3a78f6', icon: 'AlipayCircleFilled' },
+  { text: '微信支付', color: '#63c742', icon: 'WechatFilled' },
+  { text: '银联支付', color: '#ce4646', icon: 'CreditCardFilled' },
+  { text: '其他', color: '#efefef', icon: 'TransactionFilled' },
 ]
 export const tableEnum2: Array<string> = [
   '未获取到订单状态',
@@ -72,7 +72,7 @@ export const rowTop: Array<tableColumns> = [
 ]
 
 // get请求筛选参数
-export const filterKeys = [
+export const filterKeys: string[] = [
   'rightProtectionStatus',
   'type',
   'deliveryMethod',
-- 
Gitee