code review：优化支付通知的实现

src/views/pay/notify/NotifyDetail.vue

@@ -0,0 +1,89 @@
+<template>
+  <Dialog v-model="dialogVisible" title="通知详情" width="50%">
+    <el-descriptions :column="2">
+      <el-descriptions-item label="商户订单编号">
+        <el-tag>{{ detailData.merchantOrderId }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="通知状态">
+        <dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="detailData.status" />
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-descriptions :column="2">
+      <el-descriptions-item label="应用编号">{{ detailData.appId }}</el-descriptions-item>
+      <el-descriptions-item label="应用名称">{{ detailData.appName }}</el-descriptions-item>
+    </el-descriptions>
+    <el-descriptions :column="2">
+      <el-descriptions-item label="关联编号">{{ detailData.dataId }}</el-descriptions-item>
+      <el-descriptions-item label="通知类型">
+        <dict-tag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="detailData.type" />
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-descriptions :column="2">
+      <el-descriptions-item label="通知次数">{{ detailData.notifyTimes }}</el-descriptions-item>
+      <el-descriptions-item label="最大通知次数">
+        {{ detailData.maxNotifyTimes }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-descriptions :column="2">
+      <el-descriptions-item label="最后通知时间">
+        {{ formatDate(detailData.lastExecuteTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="下次通知时间">
+        {{ formatDate(detailData.nextNotifyTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-descriptions :column="2">
+      <el-descriptions-item label="创建时间">
+        {{ formatDate(detailData.createTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="更新时间">
+        {{ formatDate(detailData.updateTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <!-- 分割线 -->
+    <el-divider />
+    <el-descriptions :column="1" direction="vertical" border>
+      <el-descriptions-item label="回调日志">
+        <el-table :data="detailData.logs">
+          <el-table-column label="日志编号" align="center" prop="id" />
+          <el-table-column label="通知状态" align="center" prop="status">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column label="通知次数" align="center" prop="notifyTimes" />
+          <el-table-column label="通知时间" align="center" prop="lastExecuteTime" width="180">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="响应结果" align="center" prop="response" />
+        </el-table>
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import * as PayNotifyApi from '@/api/pay/notify'
+import { formatDate } from '@/utils/formatTime'
+
+defineOptions({ name: 'PayNotifyDetail' })
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({})
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = await PayNotifyApi.getNotifyTaskDetail(id)
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>

src/views/pay/notify/index.vue

@@ -4,19 +4,30 @@
   <!-- 搜索工作栏 -->
   <ContentWrap>
     <el-form
+      class="-mb-15px"
       :model="queryParams"
       ref="queryFormRef"
       :inline="true"
-      v-show="showSearch"
       label-width="100px"
     >
       <el-form-item label="应用编号" prop="appId">
-        <el-select clearable v-model="queryParams.appId" filterable placeholder="请选择应用信息">
+        <el-select
+          v-model="queryParams.appId"
+          placeholder="请选择应用信息"
+          clearable
+          filterable
+          class="!w-240px"
+        >
           <el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
       <el-form-item label="通知类型" prop="type">
-        <el-select v-model="queryParams.type" placeholder="请选择通知类型" clearable size="small">
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请选择通知类型"
+          clearable
+          class="!w-240px"
+        >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.PAY_NOTIFY_TYPE)"
             :key="dict.value"
@@ -31,10 +42,16 @@
           placeholder="请输入关联编号"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="通知状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择通知状态" clearable>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择通知状态"
+          clearable
+          class="!w-240px"
+        >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.PAY_NOTIFY_STATUS)"
             :key="dict.value"
@@ -49,6 +66,7 @@
           placeholder="请输入商户订单编号"
           clearable
           @keyup.enter="handleQuery"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
@@ -61,6 +79,7 @@
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
         />
       </el-form-item>
       <el-form-item>
@@ -111,19 +130,18 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
           <el-button
-            size="small"
-            type="text"
-            icon="el-icon-search"
-            @click="handleDetail(scope.row)"
+            link
+            type="primary"
+            @click="openDetail(scope.row.id)"
             v-hasPermi="['pay:notify:query']"
-            >查看详情
+          >
+            查看详情
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
-    <pagination
-      v-show="total > 0"
+    <Pagination
       :total="total"
       v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
@@ -131,89 +149,22 @@
     />
   </ContentWrap>
 
-  <!-- 对话框(详情) -->
-  <el-dialog title="通知详情" v-model:visible="open" width="700px" append-to-body destroy-on-close>
-    <el-descriptions :column="2" label-class-name="desc-label">
-      <el-descriptions-item label="商户订单编号">
-        <el-tag size="small">{{ notifyDetail.merchantOrderId }}</el-tag>
-      </el-descriptions-item>
-      <el-descriptions-item label="通知状态">
-        <dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="notifyDetail.status" size="small" />
-      </el-descriptions-item>
-    </el-descriptions>
-    <el-descriptions :column="2" label-class-name="desc-label">
-      <el-descriptions-item label="应用编号">{{ notifyDetail.appId }}</el-descriptions-item>
-      <el-descriptions-item label="应用名称">{{ notifyDetail.appName }}</el-descriptions-item>
-    </el-descriptions>
-    <el-descriptions :column="2" label-class-name="desc-label">
-      <el-descriptions-item label="关联编号">{{ notifyDetail.dataId }}</el-descriptions-item>
-      <el-descriptions-item label="通知类型">
-        <dict-tag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="notifyDetail.type" />
-      </el-descriptions-item>
-    </el-descriptions>
-    <el-descriptions :column="2" label-class-name="desc-label">
-      <el-descriptions-item label="通知次数">{{ notifyDetail.notifyTimes }}</el-descriptions-item>
-      <el-descriptions-item label="最大通知次数">{{
-        notifyDetail.maxNotifyTimes
-      }}</el-descriptions-item>
-    </el-descriptions>
-    <el-descriptions :column="2" label-class-name="desc-label">
-      <el-descriptions-item label="最后通知时间">{{
-        formatDate(notifyDetail.lastExecuteTime)
-      }}</el-descriptions-item>
-      <el-descriptions-item label="下次通知时间">{{
-        formatDate(notifyDetail.nextNotifyTime)
-      }}</el-descriptions-item>
-    </el-descriptions>
-    <el-descriptions :column="2" label-class-name="desc-label">
-      <el-descriptions-item label="创建时间">{{
-        formatDate(notifyDetail.createTime)
-      }}</el-descriptions-item>
-      <el-descriptions-item label="更新时间">{{
-        formatDate(notifyDetail.updateTime)
-      }}</el-descriptions-item>
-    </el-descriptions>
-    <!-- 分割线 -->
-    <el-divider />
-    <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
-      <el-descriptions-item label="回调日志">
-        <el-table :data="notifyDetail.logs">
-          <el-table-column label="日志编号" align="center" prop="id" />
-          <el-table-column label="通知状态" align="center" prop="status">
-            <template #default="scope">
-              <dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="scope.row.status" />
-            </template>
-          </el-table-column>
-          <el-table-column label="通知次数" align="center" prop="notifyTimes" />
-          <el-table-column label="通知时间" align="center" prop="lastExecuteTime" width="180">
-            <template #default="scope">
-              <span>{{ formatDate(scope.row.createTime) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="响应结果" align="center" prop="response" />
-        </el-table>
-      </el-descriptions-item>
-    </el-descriptions>
-  </el-dialog>
+  <!-- 表单弹窗：预览 -->
+  <NotifyDetail ref="detailRef" />
 </template>
 
-<script lang="ts" setup name="PayNotify">
-import { getNotifyTaskPage, getNotifyTaskDetail } from '@/api/pay/notify'
-import { getAppList } from '@/api/pay/app'
+<script lang="ts" setup>
+import * as PayNotifyApi from '@/api/pay/notify'
+import * as PayAppApi from '@/api/pay/app'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
+import NotifyDetail from './NotifyDetail.vue'
 
-// 遮罩层
-const loading = ref(true)
-// 显示搜索条件
-const showSearch = ref(true)
-// 总条数
-const total = ref(0)
-// 支付通知列表
-const list = ref([])
-// 是否显示弹出层
-const open = ref(false)
-// 查询参数
+defineOptions({ name: 'PayNotify' })
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref() // 列表的数据
 const queryParams = ref({
   pageNo: 1,
   pageSize: 10,
@@ -224,39 +175,34 @@ const queryParams = ref({
   merchantOrderId: null,
   createTime: []
 })
-
-// 支付应用列表集合
-const appList = ref([])
+const queryFormRef = ref() // 搜索的表单
+const appList = ref([]) // 支付应用列表集合
+// 是否显示弹出层
+const open = ref(false)
 // 通知详情
 const notifyDetail = ref<any>({
   logs: []
 })
 
-const queryFormRef = ref()
-
-onMounted(async () => {
-  await getList()
-  // 获得筛选项
-  const data = await getAppList()
-  appList.value = data
-})
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  // 执行查询
-  const data = await getNotifyTaskPage(queryParams.value)
-  list.value = data.list
-  total.value = data.total
-  loading.value = false
-}
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNo = 1
   getList()
 }
 
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await PayNotifyApi.getNotifyTaskPage(queryParams.value)
+    list.value = data.list
+    total.value = data.total
+    loading.value = false
+  } finally {
+    loading.value = false
+  }
+}
+
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
@@ -264,12 +210,15 @@ const resetQuery = () => {
 }
 
 /** 详情按钮操作 */
-const handleDetail = async (row: any) => {
-  notifyDetail.value = {}
-  const data = await getNotifyTaskDetail(row.id)
-  // 设置值
-  notifyDetail.value = data
-  // 弹窗打开
-  open.value = true
+const detailRef = ref()
+const openDetail = (id: number) => {
+  detailRef.value.open(id)
 }
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 获得筛选项
+  appList.value = await PayAppApi.getAppList()
+})
 </script>

src/views/pay/order/index.vue

@@ -221,7 +221,6 @@
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
-// import * as MerchantApi from '@/api/pay/merchant'
 import * as OrderApi from '@/api/pay/order'
 import OrderDetail from './OrderDetail.vue'
 import download from '@/utils/download'