code review：优化收银台的实现，解决 TODO

src/api/pay/app/index.ts

@@ -22,16 +22,6 @@ export interface AppPageReqVO extends PageParam {
   createTime?: Date[]
 }
 
-export interface AppExportReqVO {
-  name?: string
-  status?: number
-  remark?: string
-  payNotifyUrl?: string
-  refundNotifyUrl?: string
-  merchantName?: string
-  createTime?: Date[]
-}
-
 export interface AppUpdateStatusReqVO {
   id: number
   status: number
@@ -67,16 +57,7 @@ export const deleteApp = (id: number) => {
   return request.delete({ url: '/pay/app/delete?id=' + id })
 }
 
-// 导出支付应用
+// 获得支付应用列表
-export const exportApp = (params: AppExportReqVO) => {
-  return request.download({ url: '/pay/app/export-excel', params })
-}
-
-// 根据商ID称搜索应用列表
-export const getAppListByMerchantId = (merchantId: number) => {
-  return request.get({ url: '/pay/app/list-merchant-id', params: { merchantId: merchantId } })
-}
-
 export const getAppList = () => {
   return request.get({
     url: '/pay/app/list'

src/api/pay/notify/index.ts

@@ -1,5 +1,6 @@
 import request from '@/config/axios'
 
+// 获得支付通知明细
 export const getNotifyTaskDetail = (id) => {
   return request.get({
     url: '/pay/notify/get-detail?id=' + id

src/api/pay/order/index.ts

@@ -93,21 +93,11 @@ export const getOrderDetail = async (id: number) => {
   return await request.get({ url: '/pay/order/get-detail?id=' + id })
 }
 
-// 新增支付订单
+// 提交支付订单
-export const createOrder = async (data: OrderVO) => {
+export const submitOrder = async (data: any) => {
   return await request.post({ url: '/pay/order/submit', data })
 }
 
-// 修改支付订单
-export const updateOrder = async (data: OrderVO) => {
-  return await request.put({ url: '/pay/order/update', data })
-}
-
-// 删除支付订单
-export const deleteOrder = async (id: number) => {
-  return await request.delete({ url: '/pay/order/delete?id=' + id })
-}
-
 // 导出支付订单
 export const exportOrder = async (params: OrderExportReqVO) => {
   return await request.download({ url: '/pay/order/export-excel', params })

src/utils/constants.ts

@@ -177,80 +177,6 @@ export const PayOrderStatusEnum = {
   }
 }
 
-/**
- * 支付订单回调状态枚举
- */
-export const PayOrderNotifyStatusEnum = {
-  NO: {
-    status: 0,
-    name: '未通知'
-  },
-  SUCCESS: {
-    status: 10,
-    name: '通知成功'
-  },
-  FAILURE: {
-    status: 20,
-    name: '通知失败'
-  }
-}
-
-/**
- * 支付订单退款状态枚举
- */
-export const PayOrderRefundStatusEnum = {
-  NO: {
-    status: 0,
-    name: '未退款'
-  },
-  SOME: {
-    status: 10,
-    name: '部分退款'
-  },
-  ALL: {
-    status: 20,
-    name: '全部退款'
-  }
-}
-
-/**
- * 支付退款订单状态枚举
- */
-export const PayRefundStatusEnum = {
-  CREATE: {
-    status: 0,
-    name: '退款订单生成'
-  },
-  SUCCESS: {
-    status: 1,
-    name: '退款成功'
-  },
-  FAILURE: {
-    status: 2,
-    name: '退款失败'
-  },
-  PROCESSING_NOTIFY: {
-    status: 3,
-    name: '退款中，渠道通知结果'
-  },
-  PROCESSING_QUERY: {
-    status: 4,
-    name: '退款中，系统查询结果'
-  },
-  UNKNOWN_RETRY: {
-    status: 5,
-    name: '状态未知，请重试'
-  },
-  UNKNOWN_QUERY: {
-    status: 6,
-    name: '状态未知，系统查询结果'
-  },
-  CLOSE: {
-    status: 99,
-    name: '退款关闭'
-  }
-}
-
 /**
  * 商品 SPU 状态
  */

src/utils/dict.ts

@@ -130,13 +130,8 @@ export enum DICT_TYPE {
   BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
 
   // ========== PAY 模块 ==========
-  PAY_CHANNEL_WECHAT_VERSION = 'pay_channel_wechat_version', // 微信渠道版本
-  PAY_CHANNEL_ALIPAY_SIGN_TYPE = 'pay_channel_alipay_sign_type', // 支付渠道支付宝算法类型
-  PAY_CHANNEL_ALIPAY_MODE = 'pay_channel_alipay_mode', // 支付宝公钥类型
-  PAY_CHANNEL_ALIPAY_SERVER_TYPE = 'pay_channel_alipay_server_type', // 支付宝网关地址
   PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型
   PAY_CHANNEL_CODE_TYPE = 'pay_channel_code_type', // 支付渠道编码类型
-  // PAY_ORDER_NOTIFY_STATUS = 'pay_order_notify_status', // 商户支付订单回调状态
   PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
   PAY_ORDER_REFUND_STATUS = 'pay_order_refund_status', // 商户支付订单退款状态
   PAY_REFUND_ORDER_STATUS = 'pay_refund_order_status', // 退款订单状态

src/views/pay/app/components/AppForm.vue

@@ -21,8 +21,8 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="支付结果的回调地址" prop="payNotifyUrl">
+      <el-form-item label="支付结果的回调地址" prop="orderNotifyUrl">
-        <el-input v-model="formData.payNotifyUrl" placeholder="请输入支付结果的回调地址" />
+        <el-input v-model="formData.orderNotifyUrl" placeholder="请输入支付结果的回调地址" />
       </el-form-item>
       <el-form-item label="退款结果的回调地址" prop="refundNotifyUrl">
         <el-input v-model="formData.refundNotifyUrl" placeholder="请输入退款结果的回调地址" />
@@ -66,7 +66,7 @@ const formData = ref({
 const formRules = reactive({
   name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
-  payNotifyUrl: [{ required: true, message: '支付结果的回调地址不能为空', trigger: 'blur' }],
+  orderNotifyUrl: [{ required: true, message: '支付结果的回调地址不能为空', trigger: 'blur' }],
   refundNotifyUrl: [{ required: true, message: '退款结果的回调地址不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
@@ -122,7 +122,7 @@ const resetForm = () => {
     name: undefined,
     status: CommonStatusEnum.ENABLE,
     remark: undefined,
-    payNotifyUrl: undefined,
+    orderNotifyUrl: undefined,
     refundNotifyUrl: undefined
   }
   formRef.value?.resetFields()

src/views/pay/app/index.vue

@@ -54,15 +54,6 @@
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['system:tenant:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -392,20 +383,6 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await AppApi.exportApp(queryParams)
-    download.excel(data, '支付应用信息.xls')
-  } finally {
-    exportLoading.value = false
-  }
-}
-
 /**
  * 根据渠道编码判断渠道列表中是否存在
  *

src/views/pay/cashier/index.vue

@@ -5,15 +5,15 @@
       <el-descriptions-item label="支付单号">{{ payOrder.id }}</el-descriptions-item>
       <el-descriptions-item label="商品标题">{{ payOrder.subject }}</el-descriptions-item>
       <el-descriptions-item label="商品内容">{{ payOrder.body }}</el-descriptions-item>
-      <el-descriptions-item label="支付金额"
+      <el-descriptions-item label="支付金额">
-        >￥{{ (payOrder.price / 100.0).toFixed(2) }}</el-descriptions-item
+        ￥{{ (payOrder.price / 100.0).toFixed(2) }}
-      >
+      </el-descriptions-item>
-      <el-descriptions-item label="创建时间">{{
+      <el-descriptions-item label="创建时间">
-        formatDate(payOrder.createTime)
+        {{ formatDate(payOrder.createTime) }}
-      }}</el-descriptions-item>
+      </el-descriptions-item>
-      <el-descriptions-item label="过期时间">{{
+      <el-descriptions-item label="过期时间">
-        formatDate(payOrder.expireTime)
+        {{ formatDate(payOrder.expireTime) }}
-      }}</el-descriptions-item>
+      </el-descriptions-item>
     </el-descriptions>
   </el-card>
 
@@ -61,7 +61,7 @@
   </el-card>
 
   <!-- 展示形式：二维码 URL -->
-  <el-dialog
+  <Dialog
     :title="qrCode.title"
     v-model="qrCode.visible"
     width="350px"
@@ -69,10 +69,10 @@
     :close-on-press-escape="false"
   >
     <qrcode-vue :value="qrCode.url" :size="310" level="L" />
-  </el-dialog>
+  </Dialog>
 
   <!-- 展示形式：BarCode 条形码 -->
-  <el-dialog
+  <Dialog
     :title="barCode.title"
     v-model="barCode.visible"
     width="500px"
@@ -93,8 +93,9 @@
               type="danger"
               target="_blank"
               href="https://baike.baidu.com/item/条码支付/10711903"
-              >(扫码枪/扫码盒)</el-link
             >
+              (扫码枪/扫码盒)
+            </el-link>
             扫码
           </div>
         </el-col>
@@ -105,21 +106,22 @@
         type="primary"
         @click="submit0(barCode.channelCode)"
         :disabled="barCode.value.length === 0"
-        >确认支付</el-button
       >
+        确认支付
+      </el-button>
       <el-button @click="barCode.visible = false">取 消</el-button>
     </template>
-  </el-dialog>
+  </Dialog>
 </template>
 
-<script setup lang="ts" name="PayCashier">
+<script lang="ts" setup>
 import QrcodeVue from 'qrcode.vue'
-import { getOrder, createOrder } from '@/api/pay/order'
+import { getOrder, submitOrder } from '@/api/pay/order'
 import { PayChannelEnum, PayDisplayModeEnum, PayOrderStatusEnum } from '@/utils/constants'
-import { ref, onMounted } from 'vue'
 import { formatDate } from '@/utils/formatTime'
+import { useTagsViewStore } from '@/store/modules/tagsView'
 
-// TODO: ugly
+// 导入图标
 import svg_alipay_pc from '@/assets/svgs/pay/icon/alipay_pc.svg'
 import svg_alipay_wap from '@/assets/svgs/pay/icon/alipay_wap.svg'
 import svg_alipay_app from '@/assets/svgs/pay/icon/alipay_app.svg'
@@ -132,11 +134,14 @@ import svg_wx_native from '@/assets/svgs/pay/icon/wx_native.svg'
 import svg_wx_bar from '@/assets/svgs/pay/icon/wx_bar.svg'
 import svg_mock from '@/assets/svgs/pay/icon/mock.svg'
 
-const message = useMessage() // 消息弹窗
+defineOptions({ name: 'PayCashier' })
-const route = useRoute()
-const router = useRouter()
 
-const id = ref(undefined) // 请假编号
+const message = useMessage() // 消息弹窗
+const route = useRoute() // 路由
+const { push, currentRoute } = useRouter() // 路由
+const { delView } = useTagsViewStore() // 视图操作
+
+const id = ref(undefined) // 支付单号
 const returnUrl = ref<string | undefined>(undefined) // 支付完的回调地址
 const loading = ref(false) // 支付信息的 loading
 const payOrder = ref({}) // 支付信息
@@ -167,7 +172,6 @@ const channelsAlipay = [
     code: 'alipay_bar'
   }
 ]
-
 const channelsWechat = [
   {
     name: '微信公众号支付',
@@ -195,7 +199,6 @@ const channelsWechat = [
     code: 'wx_bar'
   }
 ]
-
 const channelsMock = [
   {
     name: '模拟支付',
@@ -220,14 +223,6 @@ const barCode = ref({
   visible: false
 })
 
-onMounted(() => {
-  id.value = route.query.id
-  if (route.query.returnUrl) {
-    returnUrl.value = decodeURIComponent(route.query.returnUrl)
-  }
-  getDetail()
-})
-
 /** 获得支付信息 */
 const getDetail = () => {
   // 1.1 未传递订单编号
@@ -297,7 +292,7 @@ const submit = (channelCode) => {
 
 const submit0 = (channelCode) => {
   submitLoading.value = true
-  createOrder({
+  submitOrder({
     id: id.value,
     channelCode: channelCode,
     returnUrl: location.href, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
@@ -308,7 +303,7 @@ const submit0 = (channelCode) => {
       if (data.status === PayOrderStatusEnum.SUCCESS.status) {
         clearQueryInterval()
         message.success('支付成功！')
-        goReturnUrl()
+        goReturnUrl('success')
         return
       }
 
@@ -396,13 +391,13 @@ const createQueryInterval = () => {
       if (data.status === PayOrderStatusEnum.SUCCESS.status) {
         clearQueryInterval()
         message.success('支付成功！')
-        goReturnUrl()
+        goReturnUrl('success')
       }
       // 已取消
       if (data.status === PayOrderStatusEnum.CLOSED.status) {
         clearQueryInterval()
         message.error('支付已关闭！')
-        goReturnUrl()
+        goReturnUrl('close')
       }
     })
   }, 1000 * 2)
@@ -435,8 +430,7 @@ const goReturnUrl = (payResult) => {
 
   // 未配置的情况下，只能关闭
   if (!returnUrl.value) {
-    // TODO: dhb52 需要找到对应 $tab 功能
+    delView(unref(currentRoute))
-    // this.$tab.closePage()
     return
   }
 
@@ -448,14 +442,21 @@ const goReturnUrl = (payResult) => {
   if (returnUrl.value.indexOf('http') === 0) {
     location.href = url
   } else {
-    // TODO: dhb52 需要找到对应 $tab 功能
+    delView(unref(currentRoute))
-    // this.$tab.closePage(() => {
+    push({
-    //   router.push({
+      path: url
-    //     path: url
+    })
-    //   })
-    // })
   }
 }
+
+/** 初始化 */
+onMounted(() => {
+  id.value = route.query.id
+  if (route.query.returnUrl) {
+    returnUrl.value = decodeURIComponent(route.query.returnUrl)
+  }
+  getDetail()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -464,7 +465,7 @@ const goReturnUrl = (payResult) => {
   margin-top: -10px;
 
   .box {
-    width: 130px;
+    width: 160px;
     border: 1px solid #e6ebf5;
     cursor: pointer;
     text-align: center;