Merge branch 'feature/pay-0704-ch' into msb_test

3 years ago · 40b6116f6c
parent 921be12bc0 84db73c9b3
commit 40b6116f6c
16 changed files with 916 additions and 62 deletions
--- a/src/api/pay/application.js
+++ b/src/api/pay/application.js
@ -2,7 +2,7 @@
 * @Author: ch
 * @Date: 2022-07-04 15:20:02
 * @LastEditors: ch
- * @LastEditTime: 2022-07-06 17:20:08
+ * @LastEditTime: 2022-07-07 11:06:40
 * @Description: file content
 */
 import request from '@/utils/request.js';
@ -34,7 +34,7 @@ export const update = (data) => {
 };
 export const updateStatus = (params) => {
    return request({
-        url: `/payCenter/appInfo/updateStatus`,
+        url: '/payCenter/appInfo/updateStatus',
        method: 'put',
        params,
    });
@ -46,6 +46,13 @@ export const getApplicationList = (params) => {
        params,
    });
 };
+export const getApplicationSelector = (params) => {
+    return request({
+        url: '/payCenter/appInfo/appSelector',
+        method: 'get',
+        params,
+    });
+};
 export const getPayType = () => {
    return request({
        url: '/payCenter/appInfo/payCode',
--- a/src/api/pay/merchant.js
+++ b/src/api/pay/merchant.js
@ -2,7 +2,7 @@
 * @Author: ch
 * @Date: 2022-07-04 15:20:02
 * @LastEditors: ch
- * @LastEditTime: 2022-07-06 14:14:31
+ * @LastEditTime: 2022-07-07 10:10:21
 * @Description: file content
 */
 import request from '@/utils/request.js';
@ -34,7 +34,7 @@ export const update = (data) => {
 };
 export const updateStatus = (params) => {
    return request({
-        url: `/payCenter/mchInfo/updateStatus`,
+        url: '/payCenter/mchInfo/updateStatus',
        method: 'put',
        params,
    });
--- a/src/api/pay/payOrder.js
+++ b/src/api/pay/payOrder.js
@ -0,0 +1,21 @@
+/*
+ * @Author: ch
+ * @Date: 2022-07-04 15:20:02
+ * @LastEditors: ch
+ * @LastEditTime: 2022-07-07 14:55:24
+ * @Description: file content
+ */
+import request from '@/utils/request.js';
+export const detail = (orderId) => {
+    return request({
+        url: `/payCenter/payOrder/${orderId}`,
+        method: 'get',
+    });
+};
+export const getOrderList = (params) => {
+    return request({
+        url: '/payCenter/payOrder/page',
+        method: 'get',
+        params,
+    });
+};
--- a/src/api/pay/refundOrder.js
+++ b/src/api/pay/refundOrder.js
@ -0,0 +1,21 @@
+/*
+ * @Author: ch
+ * @Date: 2022-07-04 15:20:02
+ * @LastEditors: ch
+ * @LastEditTime: 2022-07-07 15:25:01
+ * @Description: file content
+ */
+import request from '@/utils/request.js';
+export const detail = (refundOrderId) => {
+    return request({
+        url: `/payCenter/refundOrder/${refundOrderId}`,
+        method: 'get',
+    });
+};
+export const getOrderList = (params) => {
+    return request({
+        url: '/payCenter/refundOrder/page',
+        method: 'get',
+        params,
+    });
+};
--- a/src/store/modules/pay/payOrder.js
+++ b/src/store/modules/pay/payOrder.js
@ -0,0 +1,114 @@
+/*
+ * @Author: ch
+ * @Date: 2022-07-04 15:21:30
+ * @LastEditors: ch
+ * @LastEditTime: 2022-07-07 11:37:49
+ * @Description: file content
+ */
+import * as appApi from '@/api/pay/application.js';
+import * as mchApi from '@/api/pay/merchant.js';
+import * as api from '@/api/pay/payOrder.js';
+import { ElMessage } from '@/plugins/element-plus';
+const state = {
+    code: 'PayCenterPayOrderManagement',
+    list: [],
+    detail: {},
+    total: 0,
+    opts: {
+        notifyStatus: [
+            {
+                value: 1,
+                label: '未通知',
+            },
+            {
+                value: 2,
+                label: '已通知',
+            },
+            {
+                value: 3,
+                label: '已响应',
+            },
+        ],
+        payStatus: [
+            {
+                value: 1,
+                label: '支付中',
+            },
+            {
+                value: 2,
+                label: '已关闭',
+            },
+            {
+                value: 3,
+                label: '支付成功',
+            },
+            {
+                value: 4,
+                label: '支付失败',
+            },
+            {
+                value: 5,
+                label: '部分退款',
+            },
+            {
+                value: 6,
+                label: '全额退款',
+            },
+        ],
+        merchant: [],
+        payType: [],
+        application: [],
+    },
+};
+const getters = {};
+const mutations = {
+    setList: (state, data) => (state.list = data),
+    setPayType: (state, data) => (state.opts.payType = data),
+    setMerchant: (state, data) => (state.opts.merchant = data),
+    setApplication: (state, data) => (state.opts.application = data),
+    setTotal: (state, data) => (state.total = data),
+};
+const actions = {
+    async search({ rootGetters, commit }, params) {
+        const res = await api.getOrderList({
+            ...rootGetters['local/page'](state.code),
+            ...params,
+        });
+        if (res) {
+            commit('setList', res?.records.map((i) => ({ ...i, isShow: !i.isDisabled })) || []);
+            commit('setTotal', res?.total || 0);
+        }
+    },
+    detail: async (context, id) => {
+        let res = await api.detail(id);
+        if (!res) {
+            ElMessage.error('加载详情失败');
+        }
+        return res;
+    },
+    async getMerchantList({ commit }) {
+        const res = await mchApi.getMerchantSelector();
+        if (res) {
+            commit('setMerchant', res || []);
+        }
+    },
+    async getApplicationList({ commit }) {
+        const res = await appApi.getApplicationSelector();
+        if (res) {
+            commit('setApplication', res || []);
+        }
+    },
+    async getPayType({ commit }) {
+        const res = await appApi.getPayType();
+        if (res) {
+            commit('setPayType', res || []);
+        }
+    },
+};
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions,
+};
--- a/src/store/modules/pay/refundOrder.js
+++ b/src/store/modules/pay/refundOrder.js
@ -0,0 +1,106 @@
+/*
+ * @Author: ch
+ * @Date: 2022-07-04 15:21:30
+ * @LastEditors: ch
+ * @LastEditTime: 2022-07-07 15:25:26
+ * @Description: file content
+ */
+import * as appApi from '@/api/pay/application.js';
+import * as mchApi from '@/api/pay/merchant.js';
+import * as api from '@/api/pay/refundOrder.js';
+import { ElMessage } from '@/plugins/element-plus';
+const state = {
+    code: 'PayCenterRefundOrderManagement',
+    list: [],
+    detail: {},
+    total: 0,
+    opts: {
+        notifyStatus: [
+            {
+                value: 1,
+                label: '未通知',
+            },
+            {
+                value: 2,
+                label: '已通知',
+            },
+            {
+                value: 3,
+                label: '已响应',
+            },
+        ],
+        refundStatus: [
+            {
+                value: 1,
+                label: '退款中',
+            },
+            {
+                value: 2,
+                label: '退款关闭',
+            },
+            {
+                value: 3,
+                label: '退款成功',
+            },
+            {
+                value: 4,
+                label: '退款失败',
+            },
+        ],
+        merchant: [],
+        payType: [],
+        application: [],
+    },
+};
+const getters = {};
+const mutations = {
+    setList: (state, data) => (state.list = data),
+    setPayType: (state, data) => (state.opts.payType = data),
+    setMerchant: (state, data) => (state.opts.merchant = data),
+    setApplication: (state, data) => (state.opts.application = data),
+    setTotal: (state, data) => (state.total = data),
+};
+const actions = {
+    async search({ rootGetters, commit }, params) {
+        const res = await api.getOrderList({
+            ...rootGetters['local/page'](state.code),
+            ...params,
+        });
+        if (res) {
+            commit('setList', res?.records.map((i) => ({ ...i, isShow: !i.isDisabled })) || []);
+            commit('setTotal', res?.total || 0);
+        }
+    },
+    detail: async (context, id) => {
+        let res = await api.detail(id);
+        if (!res) {
+            ElMessage.error('加载详情失败');
+        }
+        return res;
+    },
+    async getMerchantList({ commit }) {
+        const res = await mchApi.getMerchantSelector();
+        if (res) {
+            commit('setMerchant', res || []);
+        }
+    },
+    async getApplicationList({ commit }) {
+        const res = await appApi.getApplicationSelector();
+        if (res) {
+            commit('setApplication', res || []);
+        }
+    },
+    async getPayType({ commit }) {
+        const res = await appApi.getPayType();
+        if (res) {
+            commit('setPayType', res || []);
+        }
+    },
+};
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions,
+};
--- a/src/views/goods/comment/detail/index.vue
+++ b/src/views/goods/comment/detail/index.vue
--- a/src/views/goods/comment/list/index.vue
+++ b/src/views/goods/comment/list/index.vue
--- a/src/views/pay/application/form.vue
+++ b/src/views/pay/application/form.vue
@ -2,12 +2,12 @@
 * @Author: ch
 * @Date: 2022-07-04 16:42:21
 * @LastEditors: ch
- * @LastEditTime: 2022-07-06 19:01:37
+ * @LastEditTime: 2022-07-07 16:26:45
 * @Description: file content
 -->
 <template>
    <div>
-        <el-form ref="formEl" label-width="160px" :model="form" :rules="rules">
+        <el-form class="main" ref="formEl" label-width="120px" :model="form" :rules="rules">
            <el-form-item label="商户平台" prop="mchPrimaryId">
                <el-select v-model="form.mchPrimaryId" @change="handleChangeMch" :disabled="isEdit">
                    <el-option
@ -131,24 +131,27 @@
        return meRules;
    });

-    const formEl = ref();
+    const formEl = ref(null);

-    store.dispatch('application/getMerchantList');
-    store.dispatch('application/getPayType');
-    onActivated(() => {
-        handlelLoadData();
-    });
-    /**
-     * 如果是编辑需要加载初始数据加载
-     */
-    const handlelLoadData = async () => {
+    const init = () => {
+        store.dispatch('application/getMerchantList');
+        store.dispatch('application/getPayType');
+        form.mchInfo = {};
+        formEl.value.resetFields();
        let id = route.params.id;
        if (id && form.id !== id) {
-            let res = await store.dispatch('application/detail', id);
-            res.payCodes = res.payCodes.split(',');
-            Object.assign(form, res);
+            handlelLoadDetail(id);
        }
    };
+    onActivated(init);
+    /**
+     * 编辑加载初始数据加载
+     */
+    const handlelLoadDetail = async (id) => {
+        let res = await store.dispatch('application/detail', id);
+        res.payCodes = res.payCodes.split(',');
+        Object.assign(form, res);
+    };
    /**
     * 切换商户时需要拿到当前商户信息，用来应用判断属于哪个平台
     */
@ -191,9 +194,11 @@
        } catch (e) {}
    };
    const handleCancel = () => {
-        Object.assign(form, defaultForm);
-        formEl.value.resetFields();
        router.push({ name: 'PayApplication' });
    };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+    .main {
+        padding-right: 50px;
+    }
+</style>
--- a/src/views/pay/application/index.vue
+++ b/src/views/pay/application/index.vue
@ -2,7 +2,7 @@
 * @Author: ch
 * @Date: 2022-06-15 17:29:32
 * @LastEditors: ch
- * @LastEditTime: 2022-07-06 16:46:56
+ * @LastEditTime: 2022-07-07 16:32:44
 * @Description: file content
 -->
 <template>
@ -92,10 +92,13 @@
        await store.dispatch('application/search', { ...state.condition });
        loading.value = false;
    };
+    const init = () => {
+        store.dispatch('application/getMerchantList');
+        store.dispatch('application/getPayType');
+        handleSearch();
+    };

-    store.dispatch('application/getMerchantList');
-    store.dispatch('application/getPayType');
-    onActivated(handleSearch);
+    onActivated(init);
    /**
     * 重置
     */
--- a/src/views/pay/merchant/form/index.vue
+++ b/src/views/pay/merchant/form/index.vue
@ -2,12 +2,12 @@
 * @Author: ch
 * @Date: 2022-07-04 16:42:21
 * @LastEditors: ch
- * @LastEditTime: 2022-07-06 11:08:35
+ * @LastEditTime: 2022-07-07 16:30:11
 * @Description: file content
 -->
 <template>
    <div>
-        <el-form ref="formEl" label-width="160px" :model="form" :rules="rules">
+        <el-form class="main" ref="formEl" label-width="160px" :model="form" :rules="rules">
            <el-form-item label="商户平台" prop="mchCode">
                <el-radio-group v-model="form.mchCode" :disabled="idEdit">
                    <el-radio v-for="item in opts.platform" :key="item.code" :label="item.code" border>
@ -62,34 +62,38 @@
    const aliFormEl = ref();
    const wxFormEl = ref();

-    store.dispatch('merchant/getMerchantPlatform');
-    onActivated(() => {
-        handlelLoadData();
-    });
+    const init = () => {
+        store.dispatch('merchant/getMerchantPlatform');
+        formEl.value.resetFields();
+        wxFormEl.value && wxFormEl.value.resetFields();
+        aliFormEl.value && aliFormEl.value.resetFields();
+        let id = route.params.id;
+        if (id && form.id !== id) {
+            handlelLoadDetail();
+        }
+    };
+    onActivated(init);
    /**
     * 如果是编辑需要加载初始数据加载
     */
-    const handlelLoadData = async () => {
-        let id = route.params.id;
-        if (id && form.id !== id) {
-            let res = await store.dispatch('merchant/detail', id);
-            if (res.mchCode === 'alipay') {
-                const publicKey = res.aliMchData.publicKey;
-                if (publicKey) {
-                    res.aliMchData.hasPublicKey = publicKey;
-                    delete res.aliMchData.publicKey;
-                }
-            } else {
-                const { apiKey, apiKeyV3, serialNo } = res.wxMchData;
-                res.wxMchData.hasApiKey = apiKey;
-                delete res.wxMchData.apiKey;
-                res.wxMchData.hasApiKeyV3 = apiKeyV3;
-                delete res.wxMchData.apiKeyV3;
-                res.wxMchData.hasSerialNo = serialNo;
-                delete res.wxMchData.serialNo;
+    const handlelLoadDetail = async () => {
+        let res = await store.dispatch('merchant/detail', id);
+        if (res.mchCode === 'alipay') {
+            const publicKey = res.aliMchData.publicKey;
+            if (publicKey) {
+                res.aliMchData.hasPublicKey = publicKey;
+                delete res.aliMchData.publicKey;
            }
-            Object.assign(form, res);
+        } else {
+            const { apiKey, apiKeyV3, serialNo } = res.wxMchData;
+            res.wxMchData.hasApiKey = apiKey;
+            delete res.wxMchData.apiKey;
+            res.wxMchData.hasApiKeyV3 = apiKeyV3;
+            delete res.wxMchData.apiKeyV3;
+            res.wxMchData.hasSerialNo = serialNo;
+            delete res.wxMchData.serialNo;
        }
+        Object.assign(form, res);
    };
    const handleSave = async () => {
        let validate = false;
@ -108,17 +112,11 @@
            .catch(() => {});
    };
    const handleCancel = () => {
-        Object.assign(form, defaultForm);
-        wxFormEl.value && wxFormEl.value.resetFields();
-        aliFormEl.value && aliFormEl.value.resetFields();
-        formEl.value.resetFields();
        router.push({ name: 'PayMerchant' });
    };
 </script>
 <style lang="less" scoped>
-    .form-container {
-        .el-form {
-            // width: 100%;
-        }
+    .main {
+        padding-right: 50px;
    }
 </style>
--- a/src/views/pay/merchant/index.vue
+++ b/src/views/pay/merchant/index.vue
@ -2,7 +2,7 @@
 * @Author: ch
 * @Date: 2022-06-15 17:29:32
 * @LastEditors: ch
- * @LastEditTime: 2022-07-06 14:34:01
+ * @LastEditTime: 2022-07-07 16:31:04
 * @Description: file content
 -->
 <template>
@ -72,6 +72,11 @@
    const state = reactive({
        condition: { ..._condition },
    });
+    const init = () => {
+        store.dispatch('merchant/getMerchantPlatform');
+        handleSearch();
+    };
+    onActivated(init);

    /**
     * 搜索
@ -82,8 +87,6 @@
        loading.value = false;
    };

-    store.dispatch('merchant/getMerchantPlatform');
-    onActivated(handleSearch);
    /**
     * 重置
     */
--- a/src/views/pay/payOrder/detail.vue
+++ b/src/views/pay/payOrder/detail.vue
@ -0,0 +1,58 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-07-07 14:29:36
+ * @LastEditors: ch
+ * @LastEditTime: 2022-07-07 15:22:53
+ * @Description: file content
+-->
+<template>
+    <div class="main">
+        <el-descriptions title="支付订单信息" border :column="2">
+            <el-descriptions-item label="所属商户">{{ detail.mchInfo?.mchName }}</el-descriptions-item>
+            <el-descriptions-item label="所属应用">{{ detail.appInfo?.appName }}</el-descriptions-item>
+            <el-descriptions-item label="支付订单号">{{ detail.payOrderNo }}</el-descriptions-item>
+            <el-descriptions-item label="订单金额">{{ detail.amount }}</el-descriptions-item>
+            <el-descriptions-item label="商品标题">{{ detail.subject }}</el-descriptions-item>
+            <el-descriptions-item label="商品描述">{{ detail.body }}</el-descriptions-item>
+            <el-descriptions-item label="支付方式">{{ detail.payCodeText }}</el-descriptions-item>
+            <el-descriptions-item label="下单时间">{{ detail.createTime }}</el-descriptions-item>
+            <el-descriptions-item label="订单状态">{{ detail.payStatusText }}</el-descriptions-item>
+            <el-descriptions-item label="支付时间">{{ detail.successTime }}</el-descriptions-item>
+            <el-descriptions-item label="通知状态">{{ detail.notifyStatusText }}</el-descriptions-item>
+            <el-descriptions-item label="通知地址">{{ detail.notifyUrl }}</el-descriptions-item>
+            <el-descriptions-item label="已退款金额">{{ detail.refundAmount }}</el-descriptions-item>
+            <el-descriptions-item label="退款次数">{{ detail.refundTimes }}</el-descriptions-item>
+            <el-descriptions-item label="支付渠道订单">{{ detail.channelPayOrderNo }}</el-descriptions-item>
+            <el-descriptions-item label="支付渠道用户ID">{{ detail.channelUserId }}</el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions title="渠道订单信息" :column="1" class="channel">
+            <el-descriptions-item label="发起支付参数">
+                <el-input type="textarea" rows="2" v-model="detail.channelRequest" readonly />
+            </el-descriptions-item>
+            <el-descriptions-item label="发起支付响应">
+                <el-input type="textarea" v-model="detail.channelResponse" readonly />
+            </el-descriptions-item>
+            <el-descriptions-item label="渠道支付回调">
+                <el-input type="textarea" v-model="detail.channelNotify" readonly />
+            </el-descriptions-item>
+        </el-descriptions>
+    </div>
+</template>
+<script setup>
+    const store = useStore();
+    const route = useRoute();
+    const detail = reactive({});
+    const getDetail = async () => {
+        const res = await store.dispatch('payOrder/detail', route.params.id);
+        detail = Object.assign(detail, res);
+    };
+    onActivated(getDetail);
+</script>
+<style lang="less" scoped>
+    .main {
+        padding: 30px !important;
+    }
+    .channel {
+        padding: 30px 0;
+    }
+</style>
--- a/src/views/pay/payOrder/list.vue
+++ b/src/views/pay/payOrder/list.vue
@ -0,0 +1,232 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-06-15 17:29:32
+ * @LastEditors: ch
+ * @LastEditTime: 2022-07-07 16:34:27
+ * @Description: file content
+-->
+<template>
+    <table-list
+        v-loading="loading"
+        :code="code"
+        :config="config"
+        :data="list"
+        :operation="['search']"
+        :reset="handleReset"
+        :total="total"
+        @search="handleSearch"
+    >
+        <template #search>
+            <el-form inline>
+                <el-form-item label="支付订单号">
+                    <el-input v-model="state.condition.payOrderNo" />
+                </el-form-item>
+                <el-form-item label="所属商户">
+                    <el-select v-model="state.condition.mchPrimaryId">
+                        <el-option
+                            v-for="item in opts.merchant"
+                            :key="item.mchPrimaryId"
+                            :label="item.mchName"
+                            :value="item.mchPrimaryId"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="所属应用">
+                    <el-select v-model="state.condition.appPrimaryId">
+                        <el-option
+                            v-for="item in opts.application"
+                            :key="item.appPrimaryId"
+                            :label="item.appName"
+                            :value="item.appPrimaryId"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="支付方式">
+                    <el-select v-model="state.condition.payCode">
+                        <el-option
+                            v-for="(item, idx) in opts.payType"
+                            :key="idx"
+                            :label="item.text"
+                            :value="item.code"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="订单状态">
+                    <el-select v-model="state.condition.payStatus">
+                        <el-option
+                            v-for="(item, idx) in opts.payStatus"
+                            :key="idx"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="通知状态">
+                    <el-select v-model="state.condition.notifyStatus">
+                        <el-option
+                            v-for="(item, idx) in opts.notifyStatus"
+                            :key="idx"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="下单时间" prop="dateRange">
+                    <el-date-picker
+                        v-model="state.condition.dateRange"
+                        :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
+                        type="datetimerange"
+                        value-format="YYYY-MM-DD HH:mm:ss"
+                    />
+                </el-form-item>
+            </el-form>
+        </template>
+    </table-list>
+</template>
+<script setup lang="jsx">
+    import ElButton from '@/components/extra/ElButton.vue';
+    import ElSwitch from '@/components/extra/ElSwitch.vue';
+    const router = useRouter();
+    const store = useStore();
+    const loading = ref(false);
+    // 页面字典表数据
+    const opts = computed(() => store.state.payOrder.opts);
+    // 表格数据
+    const code = computed(() => store.state.payOrder.code);
+    const list = computed(() => _.cloneDeep(store.state.payOrder.list));
+    const total = computed(() => store.state.payOrder.total);
+    // 表格查询参数
+    const _condition = {
+        mchPrimaryId: '',
+        appPrimaryId: '',
+        payOrderNo: '',
+        payCode: '',
+        payStatus: '',
+        notifyStatus: '',
+        dateRange: '',
+    };
+    const state = reactive({
+        condition: { ..._condition },
+    });
+
+    store.dispatch('payOrder/getPayType');
+    const init = () => {
+        store.dispatch('payOrder/getMerchantList');
+        store.dispatch('payOrder/getApplicationList');
+        handleSearch();
+    };
+    onActivated(init);
+
+    /**
+     * 搜索
+     */
+    const handleSearch = async () => {
+        loading.value = true;
+        let par = { ...state.condition };
+        if (par.dateRange?.length) {
+            par.startTime = par.dateRange[0];
+            par.endTime = par.dateRange[1];
+            delete par.dateRange;
+        }
+        await store.dispatch('payOrder/search', par);
+        loading.value = false;
+    };
+    /**
+     * 重置
+     */
+    const handleReset = () => {
+        state.condition = { ..._condition };
+    };
+    const handleDetail = (id) => {
+        router.push({
+            name: 'PayOrderDetail',
+            params: {
+                id,
+            },
+        });
+    };
+    const config = reactive({
+        columns: [
+            {
+                label: '所属商户',
+                align: 'left',
+                slots: {
+                    default: ({ row }) => <span class="row-ellipsis">{row.mchInfo?.mchName}</span>,
+                },
+            },
+            {
+                label: '所属应用',
+                align: 'left',
+                slots: {
+                    default: ({ row }) => <span class="row-ellipsis">{row.appInfo?.appName}</span>,
+                },
+            },
+            {
+                label: '支付订单号',
+                minWidth: 110,
+                prop: 'payOrderNo',
+                slots: {
+                    default: ({ row }) => <span>{row.payOrderNo}</span>,
+                },
+            },
+            {
+                label: '支付方式',
+                width: 150,
+                prop: 'payCodeText',
+            },
+            {
+                label: '订单金额',
+                prop: 'amount',
+                width: 90,
+            },
+            {
+                label: '订单状态',
+                width: 90,
+                prop: 'payStatusText',
+            },
+            {
+                label: '通知状态',
+                width: 90,
+                prop: 'notifyStatusText',
+            },
+            {
+                label: '下单时间',
+                prop: 'createTime',
+                minWidth: 100,
+                slots: {
+                    default: ({ row }) => <span>{row.createTime}</span>,
+                },
+            },
+            {
+                label: '操作',
+                width: 60,
+                slots: {
+                    default: ({ row }) => (
+                        <div>
+                            <ElButton type="text" onClick={() => handleDetail(row.payOrderId)}>
+                                详情
+                            </ElButton>
+                        </div>
+                    ),
+                },
+            },
+        ],
+    });
+</script>
+<style lang="less" scoped>
+    .batch-show-hide {
+        margin-left: 20px;
+    }
+    :deep(.row-ellipsis) {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+    :deep(.ctx-link) {
+        cursor: pointer;
+        &:hover {
+            color: var(--el-color-primary);
+        }
+    }
+</style>
--- a/src/views/pay/refundOrder/detail.vue
+++ b/src/views/pay/refundOrder/detail.vue
@ -0,0 +1,55 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-07-07 14:29:36
+ * @LastEditors: ch
+ * @LastEditTime: 2022-07-07 15:42:44
+ * @Description: file content
+-->
+<template>
+    <div class="main">
+        <el-descriptions title="退款订单信息" border :column="2">
+            <el-descriptions-item label="所属商户">{{ detail.mchInfo?.mchName }}</el-descriptions-item>
+            <el-descriptions-item label="所属应用">{{ detail.appInfo?.appName }}</el-descriptions-item>
+            <el-descriptions-item label="支付订单号">{{ detail.payOrderInfo?.payOrderNo }}</el-descriptions-item>
+            <el-descriptions-item label="退款订单号">{{ detail.refundOrderNo }}</el-descriptions-item>
+            <el-descriptions-item label="订单金额">{{ detail.payOrderInfo?.amount }}</el-descriptions-item>
+            <el-descriptions-item label="退款金额">{{ detail.refundAmount }}</el-descriptions-item>
+            <el-descriptions-item label="退款状态">{{ detail.refundStatusText }}</el-descriptions-item>
+            <el-descriptions-item label="申请时间">{{ detail.createTime }}</el-descriptions-item>
+            <el-descriptions-item label="通知状态">{{ detail.notifyStatusText }}</el-descriptions-item>
+            <el-descriptions-item label="通知地址">{{ detail.notifyUrl }}</el-descriptions-item>
+            <el-descriptions-item label="退款渠道订单">
+                {{ detail.channelRefundOrderNo }}
+            </el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions title="渠道订单信息" :column="1" class="channel">
+            <el-descriptions-item label="发起退款参数">
+                <el-input type="textarea" rows="2" v-model="detail.channelRequest" readonly />
+            </el-descriptions-item>
+            <el-descriptions-item label="发起退款响应">
+                <el-input type="textarea" v-model="detail.channelResponse" readonly />
+            </el-descriptions-item>
+            <el-descriptions-item label="渠道退款回调">
+                <el-input type="textarea" v-model="detail.channelNotify" readonly />
+            </el-descriptions-item>
+        </el-descriptions>
+    </div>
+</template>
+<script setup>
+    const store = useStore();
+    const route = useRoute();
+    const detail = reactive({});
+    const getDetail = async () => {
+        const res = await store.dispatch('refundOrder/detail', route.params.id);
+        detail = Object.assign(detail, res);
+    };
+    onActivated(getDetail);
+</script>
+<style lang="less" scoped>
+    .main {
+        padding: 30px !important;
+    }
+    .channel {
+        padding: 30px 0;
+    }
+</style>
--- a/src/views/pay/refundOrder/list.vue
+++ b/src/views/pay/refundOrder/list.vue
@ -0,0 +1,231 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-06-15 17:29:32
+ * @LastEditors: ch
+ * @LastEditTime: 2022-07-07 16:33:53
+ * @Description: file content
+-->
+<template>
+    <table-list
+        v-loading="loading"
+        :code="code"
+        :config="config"
+        :data="list"
+        :operation="['search']"
+        :reset="handleReset"
+        :total="total"
+        @search="handleSearch"
+    >
+        <template #search>
+            <el-form inline>
+                <el-form-item label="支付订单号">
+                    <el-input v-model="state.condition.payOrderNo" />
+                </el-form-item>
+                <el-form-item label="退款订单号">
+                    <el-input v-model="state.condition.refundOrderNo" />
+                </el-form-item>
+                <el-form-item label="所属商户">
+                    <el-select v-model="state.condition.mchPrimaryId">
+                        <el-option
+                            v-for="item in opts.merchant"
+                            :key="item.mchPrimaryId"
+                            :label="item.mchName"
+                            :value="item.mchPrimaryId"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="所属应用">
+                    <el-select v-model="state.condition.appPrimaryId">
+                        <el-option
+                            v-for="item in opts.application"
+                            :key="item.appPrimaryId"
+                            :label="item.appName"
+                            :value="item.appPrimaryId"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="退款状态">
+                    <el-select v-model="state.condition.refundStatus">
+                        <el-option
+                            v-for="(item, idx) in opts.refundStatus"
+                            :key="idx"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="通知状态">
+                    <el-select v-model="state.condition.notifyStatus">
+                        <el-option
+                            v-for="(item, idx) in opts.notifyStatus"
+                            :key="idx"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="申请时间" prop="dateRange">
+                    <el-date-picker
+                        v-model="state.condition.dateRange"
+                        :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
+                        type="datetimerange"
+                        value-format="YYYY-MM-DD HH:mm:ss"
+                    />
+                </el-form-item>
+            </el-form>
+        </template>
+    </table-list>
+</template>
+<script setup lang="jsx">
+    import ElButton from '@/components/extra/ElButton.vue';
+    import ElSwitch from '@/components/extra/ElSwitch.vue';
+    const router = useRouter();
+    const store = useStore();
+    const loading = ref(false);
+    // 页面字典表数据
+    const opts = computed(() => store.state.refundOrder.opts);
+    // 表格数据
+    const code = computed(() => store.state.refundOrder.code);
+    const list = computed(() => _.cloneDeep(store.state.refundOrder.list));
+    const total = computed(() => store.state.refundOrder.total);
+    // 表格查询参数
+    const _condition = {
+        mchPrimaryId: '',
+        appPrimaryId: '',
+        payOrderNo: '',
+        refundOrderNo: '',
+        refundStatus: '',
+        notifyStatus: '',
+        dateRange: '',
+    };
+    const state = reactive({
+        condition: { ..._condition },
+    });
+
+    store.dispatch('refundOrder/getPayType');
+    const init = () => {
+        store.dispatch('refundOrder/getMerchantList');
+        store.dispatch('refundOrder/getApplicationList');
+        handleSearch();
+    };
+    onActivated(init);
+
+    /**
+     * 搜索
+     */
+    const handleSearch = async () => {
+        loading.value = true;
+        let par = { ...state.condition };
+        if (par.dateRange?.length) {
+            par.startTime = par.dateRange[0];
+            par.endTime = par.dateRange[1];
+            delete par.dateRange;
+        }
+        await store.dispatch('refundOrder/search', par);
+        loading.value = false;
+    };
+
+    /**
+     * 重置
+     */
+    const handleReset = () => {
+        state.condition = { ..._condition };
+    };
+    const handleDetail = (id) => {
+        router.push({
+            name: 'RefundOrderDetail',
+            params: {
+                id,
+            },
+        });
+    };
+    const config = reactive({
+        columns: [
+            {
+                label: '所属商户',
+                align: 'left',
+                slots: {
+                    default: ({ row }) => <span class="row-ellipsis">{row.mchInfo?.mchName}</span>,
+                },
+            },
+            {
+                label: '所属应用',
+                align: 'left',
+                slots: {
+                    default: ({ row }) => <span class="row-ellipsis">{row.appInfo?.appName}</span>,
+                },
+            },
+            {
+                label: '支付订单号',
+                minWidth: 110,
+                slots: {
+                    default: ({ row }) => <span>{row.payOrderInfo?.payOrderNo}</span>,
+                },
+            },
+            {
+                label: '退款订单号',
+                minWidth: 110,
+                slots: {
+                    default: ({ row }) => <span>{row.refundOrderNo}</span>,
+                },
+            },
+            {
+                label: '订单金额',
+                width: 90,
+                slots: {
+                    default: ({ row }) => <span>{row.payOrderInfo.amount}</span>,
+                },
+            },
+            {
+                label: '退款金额',
+                prop: 'refundAmount',
+                width: 90,
+            },
+            {
+                label: '退款状态',
+                width: 90,
+                prop: 'refundStatusText',
+            },
+            {
+                label: '通知状态',
+                width: 90,
+                prop: 'notifyStatusText',
+            },
+            {
+                label: '申请时间',
+                prop: 'createTime',
+                minWidth: 100,
+                slots: {
+                    default: ({ row }) => <span>{row.createTime}</span>,
+                },
+            },
+            {
+                label: '操作',
+                width: 60,
+                slots: {
+                    default: ({ row }) => (
+                        <div>
+                            <ElButton type="text" onClick={() => handleDetail(row.refundOrderId)}>
+                                详情
+                            </ElButton>
+                        </div>
+                    ),
+                },
+            },
+        ],
+    });
+</script>
+<style lang="less" scoped>
+    :deep(.row-ellipsis) {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+    }
+    :deep(.ctx-link) {
+        cursor: pointer;
+        &:hover {
+            color: var(--el-color-primary);
+        }
+    }
+</style>