|
| 1 | +<template> |
| 2 | + <div class="app-container"> |
| 3 | + |
| 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 | + <!-- 列表 --> |
| 40 | + <el-table v-loading="loading" :data="list"> |
| 41 | + <el-table-column label="任务编号" align="center" prop="id" /> |
| 42 | + <el-table-column label="应用编号" align="center" prop="appName" /> |
| 43 | + <el-table-column label="商户订单编号" align="center" prop="merchantOrderId" /> |
| 44 | + <el-table-column label="通知类型" align="center" prop="type"> |
| 45 | + <template v-slot="scope"> |
| 46 | + <dict-tag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="scope.row.type" /> |
| 47 | + </template> |
| 48 | + </el-table-column> |
| 49 | + <el-table-column label="关联编号" align="center" prop="dataId" /> |
| 50 | + <el-table-column label="通知状态" align="center" prop="status"> |
| 51 | + <template v-slot="scope"> |
| 52 | + <dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="scope.row.status" /> |
| 53 | + </template> |
| 54 | + </el-table-column> |
| 55 | + <el-table-column label="最后通知时间" align="center" prop="lastExecuteTime" width="180"> |
| 56 | + <template v-slot="scope"> |
| 57 | + <span>{{ parseTime(scope.row.lastExecuteTime) }}</span> |
| 58 | + </template> |
| 59 | + </el-table-column> |
| 60 | + <el-table-column label="下次通知时间" align="center" prop="nextNotifyTime" width="180"> |
| 61 | + <template v-slot="scope"> |
| 62 | + <span>{{ parseTime(scope.row.nextNotifyTime) }}</span> |
| 63 | + </template> |
| 64 | + </el-table-column> |
| 65 | + <el-table-column label="通知次数" align="center" prop="notifyTimes"> |
| 66 | + <template v-slot="scope"> |
| 67 | + <el-tag size="mini" type="success"> |
| 68 | + {{ scope.row.notifyTimes }} / {{ scope.row.maxNotifyTimes }} |
| 69 | + </el-tag> |
| 70 | + </template> |
| 71 | + </el-table-column> |
| 72 | + <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
| 73 | + <template v-slot="scope"> |
| 74 | + <el-button size="mini" type="text" icon="el-icon-search" @click="handleDetail(scope.row)" |
| 75 | + v-hasPermi="['pay:notify:query']">查看详情 |
| 76 | + </el-button> |
| 77 | + </template> |
| 78 | + </el-table-column> |
| 79 | + </el-table> |
| 80 | + <!-- 分页组件 --> |
| 81 | + <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" |
| 82 | + @pagination="getList"/> |
| 83 | + |
| 84 | + <!-- 对话框(详情) --> |
| 85 | + <el-dialog title="通知详情" :visible.sync="open" width="700px" v-dialogDrag append-to-body> |
| 86 | + <el-descriptions :column="2" label-class-name="desc-label"> |
| 87 | + <el-descriptions-item label="商户订单编号"> |
| 88 | + <el-tag size="small">{{ notifyDetail.merchantOrderId }}</el-tag> |
| 89 | + </el-descriptions-item> |
| 90 | + <el-descriptions-item label="通知状态"> |
| 91 | + <dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="notifyDetail.status" size="small" /> |
| 92 | + </el-descriptions-item> |
| 93 | + </el-descriptions> |
| 94 | + <el-descriptions :column="2" label-class-name="desc-label"> |
| 95 | + <el-descriptions-item label="应用编号">{{ notifyDetail.appId }}</el-descriptions-item> |
| 96 | + <el-descriptions-item label="应用名称">{{ notifyDetail.appName }}</el-descriptions-item> |
| 97 | + </el-descriptions> |
| 98 | + <el-descriptions :column="2" label-class-name="desc-label"> |
| 99 | + <el-descriptions-item label="关联编号">{{ notifyDetail.dataId }}</el-descriptions-item> |
| 100 | + <el-descriptions-item label="通知类型"> |
| 101 | + <dict-tag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="notifyDetail.type" /> |
| 102 | + </el-descriptions-item> |
| 103 | + </el-descriptions> |
| 104 | + <el-descriptions :column="2" label-class-name="desc-label"> |
| 105 | + <el-descriptions-item label="通知次数">{{ notifyDetail.notifyTimes }}</el-descriptions-item> |
| 106 | + <el-descriptions-item label="最大通知次数">{{ notifyDetail.maxNotifyTimes }}</el-descriptions-item> |
| 107 | + </el-descriptions> |
| 108 | + <el-descriptions :column="2" label-class-name="desc-label"> |
| 109 | + <el-descriptions-item label="最后通知时间">{{ parseTime(notifyDetail.lastExecuteTime) }}</el-descriptions-item> |
| 110 | + <el-descriptions-item label="下次通知时间">{{ parseTime(notifyDetail.nextNotifyTime) }}</el-descriptions-item> |
| 111 | + </el-descriptions> |
| 112 | + <el-descriptions :column="2" label-class-name="desc-label"> |
| 113 | + <el-descriptions-item label="创建时间">{{ parseTime(notifyDetail.createTime) }}</el-descriptions-item> |
| 114 | + <el-descriptions-item label="更新时间">{{ parseTime(notifyDetail.updateTime) }}</el-descriptions-item> |
| 115 | + </el-descriptions> |
| 116 | + <!-- 分割线 --> |
| 117 | + <el-divider /> |
| 118 | + <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border> |
| 119 | + <el-descriptions-item label="回调日志"> |
| 120 | + <el-table :data="notifyDetail.logs"> |
| 121 | + <el-table-column label="日志编号" align="center" prop="id" /> |
| 122 | + <el-table-column label="通知状态" align="center" prop="status"> |
| 123 | + <template v-slot="scope"> |
| 124 | + <dict-tag :type="DICT_TYPE.PAY_NOTIFY_STATUS" :value="scope.row.status" /> |
| 125 | + </template> |
| 126 | + </el-table-column> |
| 127 | + <el-table-column label="通知次数" align="center" prop="notifyTimes" /> |
| 128 | + <el-table-column label="通知时间" align="center" prop="lastExecuteTime" width="180"> |
| 129 | + <template v-slot="scope"> |
| 130 | + <span>{{ parseTime(scope.row.createTime) }}</span> |
| 131 | + </template> |
| 132 | + </el-table-column> |
| 133 | + <el-table-column label="响应结果" align="center" prop="response" /> |
| 134 | + </el-table> |
| 135 | + </el-descriptions-item> |
| 136 | + </el-descriptions> |
| 137 | + </el-dialog> |
| 138 | + </div> |
| 139 | +</template> |
| 140 | + |
| 141 | +<script> |
| 142 | +import { getNotifyTaskPage, getNotifyTaskDetail } from "@/api/pay/notify"; |
| 143 | +import { getAppList } from "@/api/pay/app"; |
| 144 | +
|
| 145 | +export default { |
| 146 | + name: "PayNotify", |
| 147 | + data() { |
| 148 | + return { |
| 149 | + // 遮罩层 |
| 150 | + loading: true, |
| 151 | + // 导出遮罩层 |
| 152 | + exportLoading: false, |
| 153 | + // 显示搜索条件 |
| 154 | + showSearch: true, |
| 155 | + // 总条数 |
| 156 | + total: 0, |
| 157 | + // 支付通知列表 |
| 158 | + list: [], |
| 159 | + // 是否显示弹出层 |
| 160 | + open: false, |
| 161 | + // 查询参数 |
| 162 | + queryParams: { |
| 163 | + pageNo: 1, |
| 164 | + pageSize: 10, |
| 165 | + appId: null, |
| 166 | + type: null, |
| 167 | + dataId: null, |
| 168 | + status: null, |
| 169 | + merchantOrderId: null, |
| 170 | + createTime: [], |
| 171 | + }, |
| 172 | +
|
| 173 | + // 支付应用列表集合 |
| 174 | + appList: [], |
| 175 | + // 通知详情 |
| 176 | + notifyDetail: { |
| 177 | + logs: [] |
| 178 | + }, |
| 179 | + }; |
| 180 | + }, |
| 181 | + created() { |
| 182 | + this.getList(); |
| 183 | + // 获得筛选项 |
| 184 | + getAppList().then(response => { |
| 185 | + this.appList = response.data; |
| 186 | + }) |
| 187 | + }, |
| 188 | + methods: { |
| 189 | + /** 查询列表 */ |
| 190 | + getList() { |
| 191 | + this.loading = true; |
| 192 | + // 执行查询 |
| 193 | + getNotifyTaskPage(this.queryParams).then(response => { |
| 194 | + this.list = response.data.list; |
| 195 | + this.total = response.data.total; |
| 196 | + this.loading = false; |
| 197 | + }); |
| 198 | + }, |
| 199 | + /** 搜索按钮操作 */ |
| 200 | + handleQuery() { |
| 201 | + this.queryParams.pageNo = 1; |
| 202 | + this.getList(); |
| 203 | + }, |
| 204 | + /** 重置按钮操作 */ |
| 205 | + resetQuery() { |
| 206 | + this.resetForm("queryForm"); |
| 207 | + this.handleQuery(); |
| 208 | + }, |
| 209 | + /** 详情按钮操作 */ |
| 210 | + handleDetail(row) { |
| 211 | + this.notifyDetail = {}; |
| 212 | + getNotifyTaskDetail(row.id).then(response => { |
| 213 | + // 设置值 |
| 214 | + this.notifyDetail = response.data; |
| 215 | + // 弹窗打开 |
| 216 | + this.open = true; |
| 217 | + }); |
| 218 | + }, |
| 219 | + } |
| 220 | +}; |
| 221 | +</script> |
0 commit comments