From 46fd154e3a77189b9ad748e57e13ab7f2b6aae93 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 3 Sep 2023 01:44:22 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=92=8C=E5=94=AE=E5=90=8E=E9=80=80=E6=AC=BE?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/trade/order/index.ts             |  3 +-
 src/utils/dict.ts                             | 20 +++--
 .../mall/trade/afterSale/detail/index.vue     | 78 +++++++++++++++++--
 src/views/mall/trade/order/detail/index.vue   | 74 +++++++++++++++++-
 4 files changed, 161 insertions(+), 14 deletions(-)

diff --git a/src/api/mall/trade/order/index.ts b/src/api/mall/trade/order/index.ts
index d4a22944..b2e4001e 100644
--- a/src/api/mall/trade/order/index.ts
+++ b/src/api/mall/trade/order/index.ts
@@ -51,12 +51,13 @@ export interface OrderVO {
     avatar?: string
   }
   // 订单操作日志
-  orderLog: orderLog[]
+  orderLog?: orderLog[]
 }
 
 export interface orderLog {
   content?: string
   createTime?: Date
+  userType?: number
 }
 
 export interface OrderItemRespVO {
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 6b163628..661d83a1 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -60,13 +60,20 @@ export const getBoolDictOptions = (dictType: string) => {
   return dictOption
 }
 
-export const getDictObj = (dictType: string, value: any) => {
+/**
+ * 获取指定字典类型的指定值对应的字典对象
+ * @param dictType 字典类型
+ * @param value 字典值
+ * @return DictDataType 字典对象
+ */
+export const getDictObj = (dictType: string, value: any): DictDataType | undefined => {
   const dictOptions: DictDataType[] = getDictOptions(dictType)
-  dictOptions.forEach((dict: DictDataType) => {
-    if (dict.value === value.toString()) {
+  console.log(dictOptions)
+  for (const dict of dictOptions) {
+    if (dict.value === value + '') {
       return dict
     }
-  })
+  }
 }
 
 /**
@@ -74,12 +81,13 @@ export const getDictObj = (dictType: string, value: any) => {
  *
  * @param dictType 字典类型
  * @param value 字典数据的值
+ * @return 字典名称
  */
-export const getDictLabel = (dictType: string, value: any) => {
+export const getDictLabel = (dictType: string, value: any): string => {
   const dictOptions: DictDataType[] = getDictOptions(dictType)
   const dictLabel = ref('')
   dictOptions.forEach((dict: DictDataType) => {
-    if (dict.value === value) {
+    if (dict.value === value + '') {
       dictLabel.value = dict.label
     }
   })
diff --git a/src/views/mall/trade/afterSale/detail/index.vue b/src/views/mall/trade/afterSale/detail/index.vue
index 190a4b33..fa4d0f91 100644
--- a/src/views/mall/trade/afterSale/detail/index.vue
+++ b/src/views/mall/trade/afterSale/detail/index.vue
@@ -131,9 +131,7 @@
             :timestamp="formatDate(saleLog.createTime)"
             placement="top"
           >
-            <el-card>
-              <span>用户类型：</span>
-              <dict-tag :type="DICT_TYPE.USER_TYPE" :value="saleLog.userType" class="mr-10px" />
+            <div class="el-timeline-right-content">
               <span>售后状态(之前)：</span>
               <dict-tag
                 :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS"
@@ -147,7 +145,15 @@
                 class="mr-10px"
               />
               <span>操作明细：{{ saleLog.content }}</span>
-            </el-card>
+            </div>
+            <template #dot>
+              <span
+                :style="{ backgroundColor: updateStyles(saleLog.userType) }"
+                class="dot-node-style"
+              >
+                {{ getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] }}
+              </span>
+            </template>
           </el-timeline-item>
         </el-timeline>
       </el-descriptions-item>
@@ -160,7 +166,7 @@
 <script lang="ts" setup>
 import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
 import { floatToFixed2 } from '@/utils'
-import { DICT_TYPE } from '@/utils/dict'
+import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import UpdateAuditReasonForm from '@/views/mall/trade/afterSale/form/AfterSaleDisagreeForm.vue'
 import { createImageViewer } from '@/components/ImageViewer'
@@ -177,6 +183,21 @@ const formData = ref({
 })
 const updateAuditReasonFormRef = ref() // 拒绝售后表单 Ref
 
+const updateStyles = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type)
+  switch (dict?.colorType) {
+    case 'success':
+      return '#67C23A'
+    case 'info':
+      return '#909399'
+    case 'warning':
+      return '#E6A23C'
+    case 'danger':
+      return '#F56C6C'
+  }
+  return '#409EFF'
+}
+
 /** 获得详情 */
 const getDetail = async () => {
   const id = params.orderId as unknown as number
@@ -277,4 +298,51 @@ onMounted(async () => {
     }
   }
 }
+
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0px 0px 160px;
+
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+
+  .el-timeline-right-content {
+    display: flex;
+    align-items: center;
+    min-height: 30px;
+    padding: 10px;
+    background-color: #f7f8fa;
+
+    &::before {
+      content: ''; /* 必须设置 content 属性 */
+      position: absolute;
+      top: 10px;
+      left: 13px; /* 将伪元素水平居中 */
+      border-width: 8px; /* 调整尖角大小 */
+      border-style: solid;
+      border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
+    }
+  }
+
+  .dot-node-style {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    left: -5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 10px;
+  }
+}
 </style>
diff --git a/src/views/mall/trade/order/detail/index.vue b/src/views/mall/trade/order/detail/index.vue
index a823fef5..232e1008 100644
--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@@ -155,8 +155,16 @@
             v-for="(log, index) in formData.orderLog"
             :key="index"
             :timestamp="formatDate(log.createTime!)"
+            placement="top"
           >
-            {{ log.content }}
+            <div class="el-timeline-right-content">
+              {{ log.content }}
+            </div>
+            <template #dot>
+              <span :style="{ backgroundColor: updateStyles(log.userType) }" class="dot-node-style">
+                {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
+              </span>
+            </template>
           </el-timeline-item>
         </el-timeline>
       </el-descriptions-item>
@@ -173,7 +181,7 @@
 import * as TradeOrderApi from '@/api/mall/trade/order'
 import { floatToFixed2 } from '@/utils'
 import { formatDate } from '@/utils/formatTime'
-import { DICT_TYPE } from '@/utils/dict'
+import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
 import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'
 import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.vue'
 import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAddressForm.vue'
@@ -184,6 +192,21 @@ defineOptions({ name: 'TradeOrderDetail' })
 
 const message = useMessage() // 消息弹窗
 
+const updateStyles = (type: number) => {
+  const dict = getDictObj(DICT_TYPE.USER_TYPE, type)
+  switch (dict?.colorType) {
+    case 'success':
+      return '#67C23A'
+    case 'info':
+      return '#909399'
+    case 'warning':
+      return '#E6A23C'
+    case 'danger':
+      return '#F56C6C'
+  }
+  return '#409EFF'
+}
+
 // 订单详情
 const formData = ref<TradeOrderApi.OrderVO>({
   orderLog: [] // TODO @puhui999：orderLogs
@@ -267,4 +290,51 @@ onMounted(async () => {
     }
   }
 }
+
+// 时间线样式调整
+:deep(.el-timeline) {
+  margin: 10px 0px 0px 160px;
+
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: -20px;
+
+    .el-timeline-item__timestamp {
+      position: absolute !important;
+      top: 10px;
+      left: -150px;
+    }
+  }
+
+  .el-timeline-right-content {
+    display: flex;
+    align-items: center;
+    min-height: 30px;
+    padding: 10px;
+    background-color: #f7f8fa;
+
+    &::before {
+      content: ''; /* 必须设置 content 属性 */
+      position: absolute;
+      top: 10px;
+      left: 13px; /* 将伪元素水平居中 */
+      border-width: 8px; /* 调整尖角大小 */
+      border-style: solid;
+      border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
+    }
+  }
+
+  .dot-node-style {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    left: -5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    color: #fff;
+    font-size: 10px;
+  }
+}
 </style>

From 73628d39309854e7c086a660efe7dc866a7faceb Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 6 Sep 2023 11:23:16 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=92=8C=E5=94=AE=E5=90=8E=E9=80=80=E6=AC=BE?=
 =?UTF-8?q?=20TODO=20=E6=8F=90=E5=88=B0=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/trade/order/index.ts             |  4 +-
 src/config/axios/service.ts                   |  4 ++
 src/utils/dict.ts                             |  1 -
 .../promotion/components/SpuAndSkuList.vue    |  2 +-
 .../mall/trade/afterSale/detail/index.vue     | 26 +++++++---
 src/views/mall/trade/order/detail/index.vue   | 52 ++++++++++---------
 src/views/mall/trade/order/index.vue          |  4 +-
 7 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/src/api/mall/trade/order/index.ts b/src/api/mall/trade/order/index.ts
index b2e4001e..730a57a6 100644
--- a/src/api/mall/trade/order/index.ts
+++ b/src/api/mall/trade/order/index.ts
@@ -51,10 +51,10 @@ export interface OrderVO {
     avatar?: string
   }
   // 订单操作日志
-  orderLog?: orderLog[]
+  logs?: logs[]
 }
 
-export interface orderLog {
+export interface logs {
   content?: string
   createTime?: Date
   userType?: number
diff --git a/src/config/axios/service.ts b/src/config/axios/service.ts
index 1a4741b6..f126f26d 100644
--- a/src/config/axios/service.ts
+++ b/src/config/axios/service.ts
@@ -191,6 +191,10 @@ service.interceptors.response.use(
       }
       return Promise.reject('error')
     } else {
+      // 前端处理 data 为 null 的情况，进行提示
+      if (data.msg !== '') {
+        ElNotification.error({ title: msg })
+      }
       return data
     }
   },
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 661d83a1..5dd54c8e 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -68,7 +68,6 @@ export const getBoolDictOptions = (dictType: string) => {
  */
 export const getDictObj = (dictType: string, value: any): DictDataType | undefined => {
   const dictOptions: DictDataType[] = getDictOptions(dictType)
-  console.log(dictOptions)
   for (const dict of dictOptions) {
     if (dict.value === value + '') {
       return dict
diff --git a/src/views/mall/promotion/components/SpuAndSkuList.vue b/src/views/mall/promotion/components/SpuAndSkuList.vue
index db29de2d..1f8041bb 100644
--- a/src/views/mall/promotion/components/SpuAndSkuList.vue
+++ b/src/views/mall/promotion/components/SpuAndSkuList.vue
@@ -41,7 +41,7 @@ import { SpuProperty } from '@/views/mall/promotion/components/index'
 defineOptions({ name: 'PromotionSpuAndSkuList' })
 
 const props = defineProps<{
-  spuList: T[] // TODO 为了方便兼容后续可能有需要展示多个 spu 的情况暂时保持，如果后续都是只操作一个 spu 的话则可更改为接受一个 spu 或保持
+  spuList: T[]
   ruleConfig: RuleConfig[]
   spuPropertyListP: SpuProperty<T>[]
 }>()
diff --git a/src/views/mall/trade/afterSale/detail/index.vue b/src/views/mall/trade/afterSale/detail/index.vue
index fa4d0f91..643d2775 100644
--- a/src/views/mall/trade/afterSale/detail/index.vue
+++ b/src/views/mall/trade/afterSale/detail/index.vue
@@ -126,7 +126,7 @@
       <el-descriptions-item labelClassName="no-colon">
         <el-timeline>
           <el-timeline-item
-            v-for="saleLog in formData.afterSaleLog"
+            v-for="saleLog in formData.logs"
             :key="saleLog.id"
             :timestamp="formatDate(saleLog.createTime)"
             placement="top"
@@ -151,7 +151,7 @@
                 :style="{ backgroundColor: updateStyles(saleLog.userType) }"
                 class="dot-node-style"
               >
-                {{ getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] }}
+                {{ getDictLabel(DICT_TYPE.USER_TYPE, saleLog.userType)[0] || '系' }}
               </span>
             </template>
           </el-timeline-item>
@@ -171,15 +171,17 @@ import { formatDate } from '@/utils/formatTime'
 import UpdateAuditReasonForm from '@/views/mall/trade/afterSale/form/AfterSaleDisagreeForm.vue'
 import { createImageViewer } from '@/components/ImageViewer'
 import { isArray } from '@/utils/is'
+import { useTagsViewStore } from '@/store/modules/tagsView'
 
 defineOptions({ name: 'TradeAfterSaleDetail' })
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { params } = useRoute() // 查询参数
+const { push, currentRoute } = useRouter() // 路由
 const formData = ref({
   order: {},
-  afterSaleLog: []
+  logs: []
 })
 const updateAuditReasonFormRef = ref() // 拒绝售后表单 Ref
 
@@ -202,7 +204,12 @@ const updateStyles = (type: number) => {
 const getDetail = async () => {
   const id = params.orderId as unknown as number
   if (id) {
-    formData.value = await AfterSaleApi.getAfterSale(id)
+    const res = await AfterSaleApi.getAfterSale(id)
+    // 没有表单信息则关闭页面返回
+    if (res === null) {
+      close()
+    }
+    formData.value = res
   }
 }
 
@@ -261,7 +268,12 @@ const imagePreview = (args) => {
     urlList
   })
 }
-
+const { delView } = useTagsViewStore() // 视图操作
+/** 关闭 tag */
+const close = () => {
+  delView(unref(currentRoute))
+  push({ name: 'TradeAfterSale' })
+}
 onMounted(async () => {
   await getDetail()
 })
@@ -322,10 +334,10 @@ onMounted(async () => {
     background-color: #f7f8fa;
 
     &::before {
-      content: ''; /* 必须设置 content 属性 */
+      content: '';
       position: absolute;
       top: 10px;
-      left: 13px; /* 将伪元素水平居中 */
+      left: 13px;
       border-width: 8px; /* 调整尖角大小 */
       border-style: solid;
       border-color: transparent #f7f8fa transparent transparent; /* 尖角颜色，左侧朝向 */
diff --git a/src/views/mall/trade/order/detail/index.vue b/src/views/mall/trade/order/detail/index.vue
index 232e1008..23a82525 100644
--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@@ -40,12 +40,17 @@
       <el-descriptions-item label="订单状态: ">
         <dict-tag :type="DICT_TYPE.TRADE_ORDER_STATUS" :value="formData.status!" />
       </el-descriptions-item>
-      <!-- TODO @puhui999：根据状态，进行展示按钮 -->
       <el-descriptions-item label-class-name="no-colon">
-        <el-button type="primary" @click="openForm('updatePrice')">调整价格</el-button>
-        <el-button type="primary" @click="openForm('remark')">备注</el-button>
-        <el-button type="primary" @click="openForm('delivery')">发货</el-button>
-        <el-button type="primary" @click="openForm('updateAddress')">修改地址</el-button>
+        <el-button v-if="formData.status! === 0" type="primary" @click="updatePrice">
+          调整价格
+        </el-button>
+        <el-button type="primary" @click="remark">备注</el-button>
+        <el-button v-if="formData.status! === 10" type="primary" @click="delivery">
+          发货
+        </el-button>
+        <el-button v-if="formData.status! === 10" type="primary" @click="updateAddress">
+          修改地址
+        </el-button>
       </el-descriptions-item>
       <el-descriptions-item>
         <template #label><span style="color: red">提醒: </span></template>
@@ -152,7 +157,7 @@
       <el-descriptions-item labelClassName="no-colon">
         <el-timeline>
           <el-timeline-item
-            v-for="(log, index) in formData.orderLog"
+            v-for="(log, index) in formData.logs"
             :key="index"
             :timestamp="formatDate(log.createTime!)"
             placement="top"
@@ -161,7 +166,10 @@
               {{ log.content }}
             </div>
             <template #dot>
-              <span :style="{ backgroundColor: updateStyles(log.userType) }" class="dot-node-style">
+              <span
+                :style="{ backgroundColor: updateStyles(log.userType!) }"
+                class="dot-node-style"
+              >
                 {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
               </span>
             </template>
@@ -209,31 +217,25 @@ const updateStyles = (type: number) => {
 
 // 订单详情
 const formData = ref<TradeOrderApi.OrderVO>({
-  orderLog: [] // TODO @puhui999：orderLogs
+  logs: []
 })
 
-// TODO @puhui999：这个最好也拆掉哈
 const deliveryFormRef = ref() // 发货表单 Ref
 const updateRemarkForm = ref() // 订单备注表单 Ref
 const updateAddressFormRef = ref() // 收货地址表单 Ref
 const updatePriceFormRef = ref() // 订单调价表单 Ref
-const openForm = (type: string) => {
-  switch (type) {
-    case 'remark':
-      updateRemarkForm.value?.open(formData.value)
-      break
-    case 'delivery':
-      deliveryFormRef.value?.open(formData.value)
-      break
-    case 'updateAddress':
-      updateAddressFormRef.value?.open(formData.value)
-      break
-    case 'updatePrice':
-      updatePriceFormRef.value?.open(formData.value)
-      break
-  }
+const remark = () => {
+  updateRemarkForm.value?.open(formData.value)
+}
+const delivery = () => {
+  deliveryFormRef.value?.open(formData.value)
+}
+const updateAddress = () => {
+  updateAddressFormRef.value?.open(formData.value)
+}
+const updatePrice = () => {
+  updatePriceFormRef.value?.open(formData.value)
 }
-
 /** 获得详情 */
 const { params } = useRoute() // 查询参数
 const getDetail = async () => {
diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index 1f89e1de..d0f1b682 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -100,7 +100,7 @@
           />
         </el-select>
       </el-form-item>
-      <!-- TODO 聚合搜索等售后结束后实现-->
+      <!-- TODO puhui 聚合搜索等售后结束后实现-->
       <el-form-item label="聚合搜索">
         <el-input
           v-show="true"
@@ -139,7 +139,7 @@
     <el-table v-loading="loading" :data="list">
       <el-table-column class-name="order-table-col">
         <template #header>
-          <!-- TODO @phui999：小屏幕下，会有偏移，后续看看 -->
+          <!-- TODO @puhui999：小屏幕下，会有偏移，后续看看 -->
           <div class="flex items-center" style="width: 100%">
             <div class="ml-100px mr-200px">商品信息</div>
             <div class="mr-60px">单价(元)/数量</div>

From b3639977a719ff103f98e165b14f6190a32ace47 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 8 Sep 2023 01:01:50 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/trade/order/detail/index.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/views/mall/trade/order/detail/index.vue b/src/views/mall/trade/order/detail/index.vue
index 23a82525..236c7f2e 100644
--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@@ -195,6 +195,7 @@ import OrderDeliveryForm from '@/views/mall/trade/order/form/OrderDeliveryForm.v
 import OrderUpdateAddressForm from '@/views/mall/trade/order/form/OrderUpdateAddressForm.vue'
 import OrderUpdatePriceForm from '@/views/mall/trade/order/form/OrderUpdatePriceForm.vue'
 import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
+import { useTagsViewStore } from '@/store/modules/tagsView'
 
 defineOptions({ name: 'TradeOrderDetail' })
 
@@ -242,10 +243,20 @@ const getDetail = async () => {
   const id = params.orderId as unknown as number
   if (id) {
     const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
+    // 没有表单信息则关闭页面返回
+    if (res === null) {
+      close()
+    }
     formData.value = res
   }
 }
-
+const { delView } = useTagsViewStore() // 视图操作
+const { push, currentRoute } = useRouter() // 路由
+/** 关闭 tag */
+const close = () => {
+  delView(unref(currentRoute))
+  push({ name: 'TradeAfterSale' })
+}
 /** 复制 */
 const clipboardSuccess = () => {
   message.success('复制成功')