新增财务中心退款申请-骑行订单退款申请页面,路由菜单树渲染逻辑修改优化

This commit is contained in:
dzl 2025-05-14 17:20:30 +08:00
parent ee8c372e9b
commit 0a169f8661
3 changed files with 775 additions and 16 deletions

View File

@ -98,6 +98,25 @@ const pages = [
isMenu: true
}
]
},
{
icon: () => h(GatewayOutlined),
path: '/FinanCecenter',
name: '财务中心',
children: [
{
path: '/RefundApplication',
name: '退款申请',
isMenu: true,
children: [
{
path: '/CyclingOrder',
name: '骑行订单',
isMenu: true
}
]
}
]
}
]
@ -116,17 +135,25 @@ const getRouters = () => {
component: component, // 动态导入组件
};
if (item.children) {
item.children.forEach((child) => {
let cpath = ipath + child.path;
route.children = route.children || [];
const component = modules['./views' + cpath + '/index.vue'];
route.children.push({
path: cpath,
name: child.name,
component: component, // 动态导入组件
})
route.children = [];
_menuList(item.children)
}
function _menuList(node) {
node.forEach((child) => {
if (child.children) {
ipath = ipath + child.path;
_menuList(child.children)
} else {
let cpath = ipath + child.path;
const component = modules['./views' + cpath + '/index.vue'];
route.children.push({
path: cpath,
name: child.name,
component: component, // 动态导入组件
})
}
})
};
}
routes.push(route);
});
return routes;
@ -162,7 +189,12 @@ const getMenus = () => {
if (permcodes.some(item => item.includes(ipermcode)) || ikey.toLowerCase() === 'home') {
menus.push(menu)
if (item.children) {
item.children.forEach((child) => {
menu.children = [];
menu.children = _menuList(item.children)
}
function _menuList(node) {
const childrenList = []
node.forEach((child) => {
let cpath = ipath + child.path;
let ckey = child.key;
if (ckey === undefined) {
@ -171,17 +203,23 @@ const getMenus = () => {
ckey = 'Home'
}
}
menu.children = menu.children || [];
let cpermcode = permcode + '.' + ckey.toLowerCase().replace(/-/g, '.');
if (child['isMenu'] && permcodes.some(item => item.includes(cpermcode))) {
menu.children.push({
const itemMenu = {
key: ckey,
label: child.name,
title: child.name,
path: cpath
})
}
if (child.children) {
ipath = ipath + child.path;
itemMenu.children = []
itemMenu.children = _menuList(child.children);
}
childrenList.push(itemMenu)
}
})
return childrenList;
}
}
});

View File

@ -0,0 +1,721 @@
<template>
<a-tabs
@change="changeTab"
v-model:activeKey="activeKey"
>
<a-tab-pane
key="1"
tab="申请中"
></a-tab-pane>
<a-tab-pane
key="2"
tab="处理中"
></a-tab-pane>
<a-tab-pane
key="3"
tab="已处理"
></a-tab-pane>
<a-tab-pane
key="4"
tab="已关闭"
></a-tab-pane>
</a-tabs>
<a-form
:label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
:wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
>
<a-row :gutter="24">
<a-col
:xl="6"
:lg="12"
:md="12"
:sm="24"
:xs="24"
>
<a-form-item label="骑行订单号">
<a-input
v-model:value.trim="queryform.cyclingOrder"
placeholder="请输入骑行订单号"
allow-clear
></a-input>
</a-form-item>
</a-col>
<a-col
:xl="6"
:lg="12"
:md="12"
:sm="24"
:xs="24"
>
<a-form-item label="用户手机">
<a-input
v-model:value.trim="queryform.phoneNumber"
placeholder="请输入用户手机"
allow-clear
></a-input>
</a-form-item>
</a-col>
<a-col
:xl="6"
:lg="12"
:md="12"
:sm="24"
:xs="24"
v-if="activeKey == '3'"
>
<a-form-item label="退款时间">
<a-range-picker
valueFormat="YYYY-MM-DD HH:mm"
v-model:value="queryform.reTime"
:placeholder="['请选择退款时间起', '请选择退款时间止']"
/>
</a-form-item>
</a-col>
<a-col
:xl="6"
:lg="12"
:md="12"
:sm="24"
:xs="24"
>
<a-form-item
class="ele-text-right"
:wrapper-col="{ span: 24 }"
>
<a-space>
<a-button
type="primary"
style="background-color: #5cc750"
@click="search"
>查询</a-button>
<a-button @click="reset">重置</a-button>
<a-button @click="exportOrder">导出</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- 数据操作 -->
<a-space style="margin-bottom: 10px">
<a-button
style="background-color: #5cc750"
type="primary"
class="ele-btn-icon"
@click="handleAdd('新增账号')"
>
<template #icon>
<plus-outlined />
</template>
<span>新增</span>
</a-button>
</a-space>
<a-table
bordered
:pagination="pagination"
:columns="columns"
:dataSource="dataSource"
:scroll="{ x: 'max-content' }"
>
<template #bodyCell="{ column }">
<template v-if="column.key === 'action'">
</template>
</template>
</a-table>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import { message } from 'ant-design-vue'
import { callUser } from '@/apis/call.js'
import config from '@/utils/config.js'
const activeKey = ref(1)
const columns = ref([
{
title: '申请时间',
dataIndex: 'zoneName',
width: 200,
key: 'zoneName',
align: 'center'
},
{
title: '运营区域',
dataIndex: 'username',
width: 200,
key: 'username',
align: 'center'
},
{
title: '用户手机',
dataIndex: 'phone',
width: 200,
key: 'phone',
align: 'center'
},
{
title: '骑行订单号',
dataIndex: 'roleName',
width: 200,
key: 'roleName',
align: 'center'
},
{
title: '本次申请退款(元)',
dataIndex: 'state',
width: 200,
key: 'state',
align: 'center'
},
{
title: '实付金额(元)',
dataIndex: 'appletCount',
width: 200,
key: 'appletCount',
align: 'center'
},
{
title: '累计已退款(元)',
dataIndex: 'appletCount',
width: 200,
key: 'appletCount',
align: 'center'
},
{
title: '支付方式',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '支付时间',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '申请原因',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '来源',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '申请人',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center',
fixed: 'right',
}
]);
const queryform = ref({
state: "",
cyclingOrder: '',
phoneNumber: '',
pageNum: config.pageParam.pageNum,
pageSize: config.pageParam.pageSize
})
//
const dataSource = ref([])
let pagination = reactive({
total: dataSource.value.length,
current: config.pageParam.pageNum,
pageSize: config.pageParam.pageSize,
showSizeChanger: true,
pageSizeOptions: config.pageParam.pageSizeOptions,
showQuickJumper: true
})
onMounted(() => {
getData();
})
const search = () => {
getData()
}
const reset = () => {
queryform.value = {
cyclingOrder: '',
phoneNumber: '',
pageNum: config.pageParam.pageNum,
pageSize: config.pageParam.pageSize
}
getData()
}
const getData = async () => {
callUser("/staff/pageQueryStaffs", queryform.value).then((res) => {
if (res.code != 200) {
message.error(res.message)
dataSource.value = []
return
}
dataSource.value = res.data.records
});
}
const changeTab = (key) => {
switch (key) {
case "1":
columns.value = [
{
title: '申请时间',
dataIndex: 'zoneName',
width: 200,
key: 'zoneName',
align: 'center'
},
{
title: '运营区域',
dataIndex: 'username',
width: 200,
key: 'username',
align: 'center'
},
{
title: '用户手机',
dataIndex: 'phone',
width: 200,
key: 'phone',
align: 'center'
},
{
title: '骑行订单号',
dataIndex: 'roleName',
width: 200,
key: 'roleName',
align: 'center'
},
{
title: '本次申请退款(元)',
dataIndex: 'state',
width: 200,
key: 'state',
align: 'center'
},
{
title: '实付金额(元)',
dataIndex: 'appletCount',
width: 200,
key: 'appletCount',
align: 'center'
},
{
title: '累计已退款(元)',
dataIndex: 'appletCount',
width: 200,
key: 'appletCount',
align: 'center'
},
{
title: '支付方式',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '支付时间',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '申请原因',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '来源',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '申请人',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center',
fixed: 'right',
}
]
break
case "2":
columns.value = [
{
title: '申请时间',
dataIndex: 'zoneName',
width: 200,
key: 'zoneName',
align: 'center'
},
{
title: '运营区域',
dataIndex: 'username',
width: 200,
key: 'username',
align: 'center'
},
{
title: '用户手机',
dataIndex: 'phone',
width: 200,
key: 'phone',
align: 'center'
},
{
title: '骑行订单号',
dataIndex: 'roleName',
width: 200,
key: 'roleName',
align: 'center'
},
{
title: '实付金额(元)',
dataIndex: 'state',
width: 200,
key: 'state',
align: 'center'
},
{
title: '退款金额(元)',
dataIndex: 'appletCount',
width: 200,
key: 'appletCount',
align: 'center'
},
{
title: '退款方式',
dataIndex: 'appletCount',
width: 200,
key: 'appletCount',
align: 'center'
},
{
title: '累计已退款(元)',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '支付方式',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '支付时间',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '申请原因',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '来源',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '申请人',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center',
fixed: 'right',
}
]
break
case "3":
columns.value = [
{
title: '申请时间',
dataIndex: 'zoneName',
width: 200,
key: 'zoneName',
align: 'center'
},
{
title: '运营区域',
dataIndex: 'username',
width: 200,
key: 'username',
align: 'center'
},
{
title: '用户手机',
dataIndex: 'phone',
width: 200,
key: 'phone',
align: 'center'
},
{
title: '骑行订单号',
dataIndex: 'roleName',
width: 200,
key: 'roleName',
align: 'center'
},
{
title: '审核时间',
dataIndex: 'state',
width: 200,
key: 'state',
align: 'center'
},
{
title: '审核人',
dataIndex: 'appletCount',
width: 200,
key: 'appletCount',
align: 'center'
},
{
title: '实付金额(元)',
dataIndex: 'appletCount',
width: 200,
key: 'appletCount',
align: 'center'
},
{
title: '退款金额(元)',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '到账状态',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '退款到账时间',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '退款方式',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '累计已退款(元)',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '支付方式',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '交易流水号',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '支付时间',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '申请原因',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '来源',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '申请人',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '操作',
key: 'action',
width: 200,
align: 'center',
fixed: 'right',
}
]
break
case "4":
columns.value = [
{
title: '申请时间',
dataIndex: 'zoneName',
width: 200,
key: 'zoneName',
align: 'center'
},
{
title: '运营区域',
dataIndex: 'username',
width: 200,
key: 'username',
align: 'center'
},
{
title: '用户手机',
dataIndex: 'phone',
width: 200,
key: 'phone',
align: 'center'
},
{
title: '骑行订单号',
dataIndex: 'roleName',
width: 200,
key: 'roleName',
align: 'center'
},
{
title: '驳回时间',
dataIndex: 'state',
width: 200,
key: 'state',
align: 'center'
},
{
title: '驳回原因',
dataIndex: 'appletCount',
width: 200,
key: 'appletCount',
align: 'center'
},
{
title: '实付金额(元)',
dataIndex: 'appletCount',
width: 200,
key: 'appletCount',
align: 'center'
},
{
title: '本次申请退款(元)',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '累计已退款(元)',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '支付方式',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '支付时间',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '申请原因',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '来源',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
},
{
title: '申请人',
dataIndex: 'createdAt',
width: 200,
key: 'createdAt',
align: 'center'
}
]
break
default: break
}
getData()
}
const exportOrder = () => {
}
</script>

View File

@ -228,7 +228,7 @@ const onOperationClick = (e) => {
.trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
padding: 0px 24px;
cursor: pointer;
transition: color 0.3s;
}
@ -259,7 +259,7 @@ const onOperationClick = (e) => {
color: #fff;
}
.el-avatar {
margin: 0 20px;
margin: 0px 20px;
}
.logoutLink {
text-decoration: none;