index.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <div class="app-container">
  3. <doc-alert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
  4. <!-- 搜索工作栏 -->
  5. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
  6. <el-form-item label="应用编号" prop="appId">
  7. <el-select clearable v-model="queryParams.appId" filterable placeholder="请选择应用信息">
  8. <el-option v-for="item in appList" :key="item.id" :label="item.name" :value="item.id" />
  9. </el-select>
  10. </el-form-item>
  11. <el-form-item label="通知类型" prop="type">
  12. <el-select v-model="queryParams.type" placeholder="请选择通知类型" clearable size="small">
  13. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PAY_NOTIFY_TYPE)"
  14. :key="dict.value" :label="dict.label" :value="dict.value"/>
  15. </el-select>
  16. </el-form-item>
  17. <el-form-item label="关联编号" prop="dataId">
  18. <el-input v-model="queryParams.dataId" placeholder="请输入关联编号" clearable @keyup.enter.native="handleQuery"/>
  19. </el-form-item>
  20. <el-form-item label="通知状态" prop="status">
  21. <el-select v-model="queryParams.status" placeholder="请选择通知状态" clearable size="small">
  22. <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PAY_NOTIFY_STATUS)"
  23. :key="dict.value" :label="dict.label" :value="dict.value"/>
  24. </el-select>
  25. </el-form-item>
  26. <el-form-item label="商户订单编号" prop="merchantOrderId">
  27. <el-input v-model="queryParams.merchantOrderId" placeholder="请输入商户订单编号" clearable @keyup.enter.native="handleQuery"/>
  28. </el-form-item>
  29. <el-form-item label="创建时间" prop="createTime">
  30. <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
  31. range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
  32. </el-form-item>
  33. <el-form-item>
  34. <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
  35. <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  36. </el-form-item>
  37. </el-form>
  38. <!-- 列表 -->
  39. <el-table v-loading="loading" :data="list">
  40. <el-table-column label="任务编号" align="center" prop="id" />
  41. <el-table-column label="应用编号" align="center" prop="appName" />
  42. <el-table-column label="商户订单编号" align="center" prop="merchantOrderId" />
  43. <el-table-column label="通知类型" align="center" prop="type">
  44. <template v-slot="scope">
  45. <dict-tag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="scope.row.type" />
  46. </template>
  47. </el-table-column>
  48. <el-table-column label="关联编号" align="center" prop="dataId" />
  49. <el-table-column label="通知状态" align="center" prop="status">
  50. <template v-slot="scope">
  51. <dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="scope.row.status" />
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="最后通知时间" align="center" prop="lastExecuteTime" width="180">
  55. <template v-slot="scope">
  56. <span>{{ parseTime(scope.row.lastExecuteTime) }}</span>
  57. </template>
  58. </el-table-column>
  59. <el-table-column label="下次通知时间" align="center" prop="nextNotifyTime" width="180">
  60. <template v-slot="scope">
  61. <span>{{ parseTime(scope.row.nextNotifyTime) }}</span>
  62. </template>
  63. </el-table-column>
  64. <el-table-column label="通知次数" align="center" prop="notifyTimes">
  65. <template v-slot="scope">
  66. <el-tag size="mini" type="success">
  67. {{ scope.row.notifyTimes }} / {{ scope.row.maxNotifyTimes }}
  68. </el-tag>
  69. </template>
  70. </el-table-column>
  71. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  72. <template v-slot="scope">
  73. <el-button size="mini" type="text" icon="el-icon-search" @click="handleDetail(scope.row)"
  74. v-hasPermi="['pay:notify:query']">查看详情
  75. </el-button>
  76. </template>
  77. </el-table-column>
  78. </el-table>
  79. <!-- 分页组件 -->
  80. <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
  81. @pagination="getList"/>
  82. <!-- 对话框(详情) -->
  83. <el-dialog title="通知详情" :visible.sync="open" width="700px" v-dialogDrag append-to-body>
  84. <el-descriptions :column="2" label-class-name="desc-label">
  85. <el-descriptions-item label="商户订单编号">
  86. <el-tag size="small">{{ notifyDetail.merchantOrderId }}</el-tag>
  87. </el-descriptions-item>
  88. <el-descriptions-item label="通知状态">
  89. <dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="notifyDetail.status" size="small" />
  90. </el-descriptions-item>
  91. </el-descriptions>
  92. <el-descriptions :column="2" label-class-name="desc-label">
  93. <el-descriptions-item label="应用编号">{{ notifyDetail.appId }}</el-descriptions-item>
  94. <el-descriptions-item label="应用名称">{{ notifyDetail.appName }}</el-descriptions-item>
  95. </el-descriptions>
  96. <el-descriptions :column="2" label-class-name="desc-label">
  97. <el-descriptions-item label="关联编号">{{ notifyDetail.dataId }}</el-descriptions-item>
  98. <el-descriptions-item label="通知类型">
  99. <dict-tag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="notifyDetail.type" />
  100. </el-descriptions-item>
  101. </el-descriptions>
  102. <el-descriptions :column="2" label-class-name="desc-label">
  103. <el-descriptions-item label="通知次数">{{ notifyDetail.notifyTimes }}</el-descriptions-item>
  104. <el-descriptions-item label="最大通知次数">{{ notifyDetail.maxNotifyTimes }}</el-descriptions-item>
  105. </el-descriptions>
  106. <el-descriptions :column="2" label-class-name="desc-label">
  107. <el-descriptions-item label="最后通知时间">{{ parseTime(notifyDetail.lastExecuteTime) }}</el-descriptions-item>
  108. <el-descriptions-item label="下次通知时间">{{ parseTime(notifyDetail.nextNotifyTime) }}</el-descriptions-item>
  109. </el-descriptions>
  110. <el-descriptions :column="2" label-class-name="desc-label">
  111. <el-descriptions-item label="创建时间">{{ parseTime(notifyDetail.createTime) }}</el-descriptions-item>
  112. <el-descriptions-item label="更新时间">{{ parseTime(notifyDetail.updateTime) }}</el-descriptions-item>
  113. </el-descriptions>
  114. <!-- 分割线 -->
  115. <el-divider />
  116. <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
  117. <el-descriptions-item label="回调日志">
  118. <el-table :data="notifyDetail.logs">
  119. <el-table-column label="日志编号" align="center" prop="id" />
  120. <el-table-column label="通知状态" align="center" prop="status">
  121. <template v-slot="scope">
  122. <dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="scope.row.status" />
  123. </template>
  124. </el-table-column>
  125. <el-table-column label="通知次数" align="center" prop="notifyTimes" />
  126. <el-table-column label="通知时间" align="center" prop="lastExecuteTime" width="180">
  127. <template v-slot="scope">
  128. <span>{{ parseTime(scope.row.createTime) }}</span>
  129. </template>
  130. </el-table-column>
  131. <el-table-column label="响应结果" align="center" prop="response" />
  132. </el-table>
  133. </el-descriptions-item>
  134. </el-descriptions>
  135. </el-dialog>
  136. </div>
  137. </template>
  138. <script>
  139. import { getNotifyTaskPage, getNotifyTaskDetail } from "@/api/pay/notify";
  140. import { getAppList } from "@/api/pay/app";
  141. export default {
  142. name: "PayNotify",
  143. data() {
  144. return {
  145. // 遮罩层
  146. loading: true,
  147. // 导出遮罩层
  148. exportLoading: false,
  149. // 显示搜索条件
  150. showSearch: true,
  151. // 总条数
  152. total: 0,
  153. // 支付通知列表
  154. list: [],
  155. // 是否显示弹出层
  156. open: false,
  157. // 查询参数
  158. queryParams: {
  159. pageNo: 1,
  160. pageSize: 10,
  161. appId: null,
  162. type: null,
  163. dataId: null,
  164. status: null,
  165. merchantOrderId: null,
  166. createTime: [],
  167. },
  168. // 支付应用列表集合
  169. appList: [],
  170. // 通知详情
  171. notifyDetail: {
  172. logs: []
  173. },
  174. };
  175. },
  176. created() {
  177. this.getList();
  178. // 获得筛选项
  179. getAppList().then(response => {
  180. this.appList = response.data;
  181. })
  182. },
  183. methods: {
  184. /** 查询列表 */
  185. getList() {
  186. this.loading = true;
  187. // 执行查询
  188. getNotifyTaskPage(this.queryParams).then(response => {
  189. this.list = response.data.list;
  190. this.total = response.data.total;
  191. this.loading = false;
  192. });
  193. },
  194. /** 搜索按钮操作 */
  195. handleQuery() {
  196. this.queryParams.pageNo = 1;
  197. this.getList();
  198. },
  199. /** 重置按钮操作 */
  200. resetQuery() {
  201. this.resetForm("queryForm");
  202. this.handleQuery();
  203. },
  204. /** 详情按钮操作 */
  205. handleDetail(row) {
  206. this.notifyDetail = {};
  207. getNotifyTaskDetail(row.id).then(response => {
  208. // 设置值
  209. this.notifyDetail = response.data;
  210. // 弹窗打开
  211. this.open = true;
  212. });
  213. },
  214. }
  215. };
  216. </script>