feature/0723/ZR #1
+15
-12
@@ -1,14 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="六个羽友赛事运营平台" />
|
||||
<title>六个羽友赛事运营平台</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="六个羽友赛事运营平台" />
|
||||
<title>六羽赛事运营平台</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -18,7 +18,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@yp-component/root": "^0.0.48",
|
||||
"ant-design-vue": "^4.0.0",
|
||||
"china-area-data": "^5.0.1",
|
||||
"dayjs": "^1.11.21",
|
||||
"express": "^5.2.1",
|
||||
"html2canvas": "^1.4.1",
|
||||
"qs": "^6.15.0",
|
||||
|
||||
Generated
+4461
File diff suppressed because it is too large
Load Diff
+4
-1
@@ -1,7 +1,10 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { ConfigProvider } from 'ant-design-vue';
|
||||
import zhCN from 'ant-design-vue/es/locale/zh_CN';
|
||||
import zhCN from 'ant-design-vue/locale/zh_CN';
|
||||
import { RouterView } from 'vue-router';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
dayjs.locale('zh-cn');
|
||||
|
||||
/**
|
||||
* 根组件
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
import { get } from '@/utils/request';
|
||||
import type { OssUploadTypeValue } from '@/utils/oss';
|
||||
|
||||
/** OSS 签名数据 */
|
||||
export interface OssSignData {
|
||||
host: string;
|
||||
dir: string;
|
||||
policy: string;
|
||||
signature: string;
|
||||
x_oss_credential: string;
|
||||
x_oss_date: string;
|
||||
security_token: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取 OSS 上传签名
|
||||
* @param type 上传类型（参见 OssUploadType）
|
||||
*/
|
||||
export async function fetchOssSign(type: OssUploadTypeValue): Promise<OssSignData> {
|
||||
// 后端签名接口地址（待对接时调整）
|
||||
const res: any = await get('/sys/oss/getUploadSign', { type });
|
||||
const data = res?.data as OssSignData;
|
||||
if (!data?.host) {
|
||||
throw new Error(res?.msg || '获取上传凭证失败');
|
||||
}
|
||||
return data;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784966818945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1689" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M424.19 675.833l64.823 64.823 229.869-229.869-229.869-229.869-64.823 64.823 118.612 119.072H98.236v91.948h444.567L424.19 675.833zM833.817 97.022H190.183c-51.031 0-91.948 41.376-91.948 91.948v183.895h91.948V188.97h643.633v643.633H190.183V648.708H98.236v183.895c0 50.571 40.917 91.948 91.948 91.948h643.633c50.571 0 91.948-41.376 91.948-91.948V188.97c-0.001-50.571-41.377-91.948-91.948-91.948z" p-id="1690"></path></svg>
|
||||
|
After Width: | Height: | Size: 749 B |
@@ -55,3 +55,61 @@ a {
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
// ===== 页面布局公共类 =====
|
||||
|
||||
// 页面容器:纵向 flex,占满高度;筛选区与表格区作为直接子元素
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 页面筛选区域:横向 flex,可换行
|
||||
.page-filter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
column-gap: 16px;
|
||||
row-gap: 12px;
|
||||
flex-shrink: 0;
|
||||
padding: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
// 筛选区域操作按钮组:横向 flex
|
||||
.page-filter-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// 表格显示区域:纵向 flex,占据剩余高度。
|
||||
// overflow: hidden 防止子元素撑开容器，滚动由 Table 的 scroll.x/y 接管。
|
||||
// 分页组件作为独立子元素置于 Table 下方，不占用 Table 的 scroll 空间。
|
||||
.page-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
margin-top: 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.page-pagination {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 14px;
|
||||
}
|
||||
// ===== antd 组件覆盖 =====
|
||||
|
||||
// Tag 默认 margin-right: 8px，会挤开表格列或卡片内间距，统一去掉
|
||||
.ant-tag {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* 修改密码弹窗 - 表单域控制器
|
||||
*
|
||||
* 集中管理弹窗内的所有规则与提示文案。
|
||||
*/
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import { isValidPassword } from '@/utils/form';
|
||||
|
||||
// ============================================================
|
||||
// 文案
|
||||
// ============================================================
|
||||
|
||||
/** 弹窗底部提示 */
|
||||
export const TIPS_TEXT = '修改后立即生效，请妥善保管新密码';
|
||||
|
||||
// ============================================================
|
||||
// 表单规则
|
||||
// ============================================================
|
||||
|
||||
/** 新密码规则：必填 + 至少 8 位 + 字母 + 数字 */
|
||||
export const newPasswordRules: Rule[] = [
|
||||
{ required: true, message: '请输入新密码' },
|
||||
{
|
||||
validator: (_rule: unknown, value: string) => {
|
||||
if (!value) return Promise.resolve();
|
||||
if (!isValidPassword(value)) {
|
||||
return Promise.reject(new Error('密码至少8位，需包含字母与数字'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/** 确认密码规则：必填 + 必须与新密码一致 */
|
||||
export function confirmNewPasswordRules(getPassword: () => string): Rule[] {
|
||||
return [
|
||||
{ required: true, message: '请再次输入新密码' },
|
||||
{
|
||||
validator: (_rule: unknown, value: string) => {
|
||||
if (!value) return Promise.resolve();
|
||||
if (value !== getPassword()) {
|
||||
return Promise.reject(new Error('两次输入的密码不一致'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { defineComponent, ref, reactive } from 'vue';
|
||||
import { useEffect } from '@/hooks';
|
||||
import { Modal, Form, Input, Button, message } from 'ant-design-vue';
|
||||
import { TIPS_TEXT, newPasswordRules, confirmNewPasswordRules } from './controller';
|
||||
import styles from './style.module.less';
|
||||
|
||||
interface ChangePasswordModalProps {
|
||||
visible: boolean;
|
||||
submitting?: boolean;
|
||||
onClose: () => void;
|
||||
/** 提交回调：父组件负责调用 API，loading 状态由 submitting 控制 */
|
||||
onSave: (payload: { newPassword: string }) => void;
|
||||
}
|
||||
|
||||
/** 默认表单数据 */
|
||||
const getDefaultForm = () => ({
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ChangePasswordModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
submitting: { type: Boolean, default: false },
|
||||
onClose: { type: Function, required: true },
|
||||
onSave: { type: Function, required: true },
|
||||
},
|
||||
setup(props: ChangePasswordModalProps) {
|
||||
const formRef = ref<any>();
|
||||
const formData = reactive(getDefaultForm());
|
||||
|
||||
/** 监听 visible 重置表单 */
|
||||
useEffect(() => {
|
||||
if (props.visible) {
|
||||
Object.assign(formData, getDefaultForm());
|
||||
setTimeout(() => formRef.value?.clearValidate(), 0);
|
||||
}
|
||||
}, [() => props.visible]);
|
||||
|
||||
/** 提交 */
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
props.onSave({ newPassword: formData.newPassword });
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
props.onClose();
|
||||
};
|
||||
|
||||
return () => (
|
||||
<Modal
|
||||
title="修改密码"
|
||||
visible={props.visible}
|
||||
onCancel={handleClose}
|
||||
width={420}
|
||||
destroyOnClose
|
||||
footer={null}
|
||||
centered
|
||||
class={styles.modal}
|
||||
>
|
||||
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
|
||||
<Form.Item label="新密码" name="newPassword" rules={newPasswordRules}>
|
||||
<Input.Password
|
||||
placeholder="至少8位，含字母+数字"
|
||||
allowClear
|
||||
v-model:value={formData.newPassword}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="确认新密码"
|
||||
name="confirmPassword"
|
||||
rules={confirmNewPasswordRules(() => formData.newPassword)}
|
||||
>
|
||||
<Input.Password
|
||||
placeholder="再次输入新密码"
|
||||
allowClear
|
||||
v-model:value={formData.confirmPassword}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<div class={styles.tip}>{TIPS_TEXT}</div>
|
||||
</Form>
|
||||
|
||||
{/* 底部按钮 */}
|
||||
<div class={styles.footer}>
|
||||
<Button onClick={handleClose}>取消</Button>
|
||||
<Button type="primary" loading={props.submitting} onClick={handleSubmit}>
|
||||
确认修改
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
.form {
|
||||
:global {
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.ant-form-item-explain-error {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部提示文案 */
|
||||
.tip {
|
||||
margin-top: -4px;
|
||||
margin-bottom: 24px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 底部按钮 */
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 微调 Modal 内部样式 */
|
||||
.modal {
|
||||
:global {
|
||||
.ant-modal-body {
|
||||
padding: 16px 24px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,3 +3,4 @@
|
||||
* 在业务中可通过 `import { HelloWorld } from '@/components'` 使用
|
||||
*/
|
||||
export { default as HelloWorld } from './HelloWorld';
|
||||
export { default as ChangePasswordModal } from './ChangePasswordModal';
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
import type { MenuNode } from '@/types';
|
||||
|
||||
/**
|
||||
* ====== 兜底路由配置 ======
|
||||
*
|
||||
* 当后端菜单接口不可用时，使用此配置作为降级方案。
|
||||
* 数据格式与后端 `/menu/tree` 接口返回完全一致，
|
||||
* 因此可以直接通过 transformMenuToRoutes / transformMenuNode 复用同一套处理逻辑。
|
||||
*
|
||||
* ## 后端应返回的数组格式示例
|
||||
*
|
||||
* ```json
|
||||
* [
|
||||
* { "id": "dashboard", "name": "工作台", "path": "dashboard", "component": "dashboard", "icon": "DashboardOutlined" },
|
||||
* {
|
||||
* "id": "events", "name": "赛事管理", "path": "events", "icon": "TrophyOutlined",
|
||||
* "children": [
|
||||
* { "id": "events_list", "name": "赛事列表", "path": "events/list", "component": "events/list" },
|
||||
* { "id": "events_orders", "name": "订单管理", "path": "events/orders", "component": "events/orders" }
|
||||
* ]
|
||||
* }
|
||||
* ]
|
||||
* ```
|
||||
*
|
||||
* ### 字段说明
|
||||
* | 字段 | 类型 | 必填 | 说明 |
|
||||
* |------|------|------|------|
|
||||
* | id | number\|string | 是 | 唯一标识 |
|
||||
* | name | string | 是 | 菜单名称/路由 name |
|
||||
* | path | string | 是 | 路由相对路径（不带 / 前缀） |
|
||||
* | component | string | 否 | 组件路径（映射 src/pages/ 下目录，如 "events/list"） |
|
||||
* | icon | string | 否 | antd 图标名（如 DashboardOutlined） |
|
||||
* | sort | number | 否 | 排序权重（越小越前） |
|
||||
* | hideInMenu | boolean | 否 | 是否在菜单中隐藏 |
|
||||
* | externalLink | string | 否 | 外链地址 |
|
||||
* | activeMenu | string | 否 | 高亮菜单路径 |
|
||||
* | disabled | boolean | 否 | 禁用标记（禁用后路由不注册、菜单不显示） |
|
||||
* | children | MenuNode[] | 否 | 子路由 |
|
||||
*
|
||||
* ### 关于 routes → menuItems 的转换
|
||||
* `menuStore.ts` 中的 `transformMenuNode()` 已完成此功能，
|
||||
* 它将 MenuNode[] 递归转换为 antd Menu 组件所需的 MenuItemRaw[] 格式。
|
||||
*/
|
||||
|
||||
export const FALLBACK_MENU_NODES: MenuNode[] = [
|
||||
{
|
||||
id: 'events',
|
||||
name: '赛事管理',
|
||||
path: 'events',
|
||||
icon: 'TrophyOutlined',
|
||||
children: [
|
||||
{
|
||||
id: 'events_list',
|
||||
name: '赛事列表',
|
||||
path: 'events/list',
|
||||
component: 'events/list',
|
||||
},
|
||||
{
|
||||
id: 'events_orders',
|
||||
name: '订单管理',
|
||||
path: 'events/orders',
|
||||
component: 'events/orders',
|
||||
},
|
||||
{
|
||||
id: 'events_users',
|
||||
name: '用户列表',
|
||||
path: 'events/users',
|
||||
component: 'events/users',
|
||||
},
|
||||
{
|
||||
id: 'events_banner',
|
||||
name: 'Banner配置',
|
||||
path: 'events/banner',
|
||||
component: 'events/banner',
|
||||
},
|
||||
{
|
||||
id: 'events_logs',
|
||||
name: '赛事操作日志',
|
||||
path: 'events/logs',
|
||||
component: 'events/logs',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'finance',
|
||||
name: '账务管理',
|
||||
path: 'finance',
|
||||
icon: 'TransactionOutlined',
|
||||
children: [
|
||||
{
|
||||
id: 'finance_withdraw',
|
||||
name: '提现申请',
|
||||
path: 'finance/withdraw',
|
||||
component: 'finance/withdraw',
|
||||
},
|
||||
{
|
||||
id: 'finance_wallet',
|
||||
name: '用户钱包',
|
||||
path: 'finance/wallet',
|
||||
component: 'finance/wallet',
|
||||
},
|
||||
{
|
||||
id: 'finance_payments',
|
||||
name: '支付流水',
|
||||
path: 'finance/payments',
|
||||
component: 'finance/payments',
|
||||
},
|
||||
{
|
||||
id: 'finance_reports',
|
||||
name: '账务报表',
|
||||
path: 'finance/reports',
|
||||
component: 'finance/reports',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'system',
|
||||
name: '系统管理',
|
||||
path: 'system',
|
||||
icon: 'SettingOutlined',
|
||||
children: [
|
||||
{
|
||||
id: 'system_users',
|
||||
name: '用户管理',
|
||||
path: 'system/users',
|
||||
component: 'system/users',
|
||||
},
|
||||
{
|
||||
id: 'system_roles',
|
||||
name: '角色权限',
|
||||
path: 'system/roles',
|
||||
component: 'system/roles',
|
||||
},
|
||||
{
|
||||
id: 'system_logs',
|
||||
name: '操作日志',
|
||||
path: 'system/logs',
|
||||
component: 'system/logs',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -7,4 +7,6 @@ export * from './useAuth';
|
||||
export * from './useWebSocket';
|
||||
export * from './useBasicLayout';
|
||||
export * from './useBreadcrumb';
|
||||
export * from './useThrottleFn';
|
||||
export * from './useContainerSize';
|
||||
export * from './useContext';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// src/hooks/useAuth.ts
|
||||
import { useState } from './useState';
|
||||
import { watch } from 'vue';
|
||||
import { useEffect } from './useEffect';
|
||||
import { useMenuStore } from '@/stores/menuStore';
|
||||
import { usePermissionStore } from '@/stores/permissionStore';
|
||||
import router from '@/router';
|
||||
@@ -10,13 +10,14 @@ const TOKEN_KEY = 'MY_APP_AUTH_TOKEN';
|
||||
function createAuth() {
|
||||
const [token, setToken] = useState<string | null>(window.localStorage.getItem(TOKEN_KEY));
|
||||
|
||||
watch(token, (newToken) => {
|
||||
useEffect(() => {
|
||||
const newToken = token.value;
|
||||
if (newToken) {
|
||||
window.localStorage.setItem(TOKEN_KEY, newToken);
|
||||
} else {
|
||||
window.localStorage.removeItem(TOKEN_KEY);
|
||||
}
|
||||
});
|
||||
}, [token]);
|
||||
|
||||
const isLoggedIn = () => !!token.value;
|
||||
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import { ref, onMounted, onUnmounted, type Ref } from 'vue';
|
||||
|
||||
/**
|
||||
* 监听容器尺寸变化，返回动态 width/height 给 Table 的 scroll 属性使用。
|
||||
*
|
||||
* 基于 ResizeObserver，窗口缩放 / 侧边栏收起展开 / 筛选区折叠 等任何导致
|
||||
* 容器尺寸变化的行为都会自动触发重新计算，无需额外处理。
|
||||
*
|
||||
* 用法：
|
||||
* ```ts
|
||||
* const { containerRef, width, height } = useContainerSize();
|
||||
* // <div ref={containerRef}>
|
||||
* // <Table scroll={{ x: width.value, y: height.value }} />
|
||||
* // </div>
|
||||
* ```
|
||||
*
|
||||
* @param headerOffset 从容器高度中扣除的表头偏移量，默认 55
|
||||
*/
|
||||
export function useContainerSize(options?: { headerOffset?: number }) {
|
||||
const { headerOffset = 55 } = options ?? {};
|
||||
|
||||
const containerRef = ref<HTMLElement | null>(null) as Ref<HTMLElement | null>;
|
||||
const width = ref(0);
|
||||
const height = ref(0);
|
||||
|
||||
let observer: ResizeObserver | null = null;
|
||||
|
||||
const updateSize = () => {
|
||||
const el = containerRef.value;
|
||||
if (!el) return;
|
||||
width.value = el.clientWidth;
|
||||
height.value = Math.max(el.clientHeight - headerOffset, 200);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
updateSize();
|
||||
const el = containerRef.value;
|
||||
if (!el) return;
|
||||
|
||||
observer = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const w = entry.contentRect.width;
|
||||
const h = entry.contentRect.height;
|
||||
if (w !== width.value) width.value = w;
|
||||
if (h !== height.value) height.value = Math.max(h - headerOffset, 200);
|
||||
}
|
||||
});
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
onUnmounted(() => observer?.disconnect());
|
||||
|
||||
return { containerRef, width, height };
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
// src/hooks/useDebounce.ts
|
||||
import { watch, onUnmounted } from 'vue';
|
||||
import { onUnmounted, Ref } from 'vue';
|
||||
import { useState } from './useState';
|
||||
import { useEffect } from './useEffect';
|
||||
|
||||
export interface UseDebounceOptions {
|
||||
delay?: number;
|
||||
@@ -8,14 +9,11 @@ export interface UseDebounceOptions {
|
||||
maxWait?: number;
|
||||
}
|
||||
|
||||
export function useDebounce<T>(
|
||||
source: any, // Ref<T>
|
||||
options: number | UseDebounceOptions = {},
|
||||
) {
|
||||
export function useDebounce<T>(source: Ref<T>, options: number | UseDebounceOptions = {}) {
|
||||
const config = typeof options === 'number' ? { delay: options } : options;
|
||||
const { delay = 300, immediate = false, maxWait } = config;
|
||||
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(source.value);
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(source.value as T);
|
||||
const [isPending, setIsPending] = useState(false);
|
||||
|
||||
let timer: any = null;
|
||||
@@ -43,7 +41,7 @@ export function useDebounce<T>(
|
||||
isFirstCall = true;
|
||||
};
|
||||
|
||||
watch(source, () => {
|
||||
useEffect(() => {
|
||||
setIsPending(true);
|
||||
|
||||
// 处理 maxWait
|
||||
@@ -64,7 +62,9 @@ export function useDebounce<T>(
|
||||
updateValue();
|
||||
}, delay);
|
||||
}
|
||||
});
|
||||
|
||||
return clearTimers;
|
||||
}, [source]);
|
||||
|
||||
// 卸载
|
||||
onUnmounted(() => {
|
||||
|
||||
+16
-19
@@ -1,6 +1,7 @@
|
||||
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
||||
// src/hooks/usePagination.ts
|
||||
import { computed, ref, watch, Ref, triggerRef } from 'vue';
|
||||
import { computed, ref, Ref, triggerRef } from 'vue';
|
||||
import { useEffect } from './useEffect';
|
||||
|
||||
/**
|
||||
* 分页配置项
|
||||
@@ -77,24 +78,20 @@ export function usePagination(options: UsePaginationOptions = {}): UsePagination
|
||||
const pageSizeRef = ref(options.pageSize ?? defaultPageSize);
|
||||
const totalRef = ref(options.total ?? 0);
|
||||
|
||||
watch(
|
||||
() => options.current,
|
||||
(val) => {
|
||||
if (val !== undefined) currentRef.value = val;
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => options.pageSize,
|
||||
(val) => {
|
||||
if (val !== undefined) pageSizeRef.value = val;
|
||||
},
|
||||
);
|
||||
watch(
|
||||
() => options.total,
|
||||
(val) => {
|
||||
if (val !== undefined) totalRef.value = val;
|
||||
},
|
||||
);
|
||||
useEffect(() => {
|
||||
const val = options.current;
|
||||
if (val !== undefined) currentRef.value = val;
|
||||
}, [() => options.current]);
|
||||
|
||||
useEffect(() => {
|
||||
const val = options.pageSize;
|
||||
if (val !== undefined) pageSizeRef.value = val;
|
||||
}, [() => options.pageSize]);
|
||||
|
||||
useEffect(() => {
|
||||
const val = options.total;
|
||||
if (val !== undefined) totalRef.value = val;
|
||||
}, [() => options.total]);
|
||||
|
||||
const totalPages = computed(() => {
|
||||
const total = totalRef.value;
|
||||
|
||||
+22
-23
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
||||
import { ref, Ref, watch, WatchSource, onUnmounted, computed } from 'vue';
|
||||
import { ref, Ref, WatchSource, onUnmounted, computed } from 'vue';
|
||||
import { useEffect } from './useEffect';
|
||||
|
||||
export interface UseRequestReturn<T> {
|
||||
/** 纯净的数据，不包含后端外层壳 */
|
||||
@@ -128,31 +129,29 @@ export function useRequest<T>(
|
||||
const shouldAutoRun = computed(() => !manual && ready.value);
|
||||
let hasAutoRun = false; // 标记是否已自动执行过，防止重复触发
|
||||
|
||||
watch(
|
||||
shouldAutoRun,
|
||||
(val) => {
|
||||
if (val && !hasAutoRun) {
|
||||
hasAutoRun = true;
|
||||
run();
|
||||
} else if (!val) {
|
||||
// 当条件不满足时重置 hasAutoRun，使下次满足条件时能再次自动执行
|
||||
hasAutoRun = false;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
useEffect(() => {
|
||||
const val = shouldAutoRun.value;
|
||||
if (val && !hasAutoRun) {
|
||||
hasAutoRun = true;
|
||||
run();
|
||||
} else if (!val) {
|
||||
// 当条件不满足时重置 hasAutoRun，使下次满足条件时能再次自动执行
|
||||
hasAutoRun = false;
|
||||
}
|
||||
}, [shouldAutoRun]);
|
||||
|
||||
// refreshDeps 变化时重新请求（初始化时不再重复触发）
|
||||
if (refreshDeps && refreshDeps.length > 0) {
|
||||
watch(
|
||||
refreshDeps,
|
||||
() => {
|
||||
if (shouldAutoRun.value) {
|
||||
run();
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
let skipInitialRefresh = true;
|
||||
useEffect(() => {
|
||||
if (skipInitialRefresh) {
|
||||
skipInitialRefresh = false;
|
||||
return;
|
||||
}
|
||||
if (shouldAutoRun.value) {
|
||||
run();
|
||||
}
|
||||
}, refreshDeps);
|
||||
}
|
||||
|
||||
const getSignal = () => abortController?.signal;
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
/**
|
||||
* 节流函数封装
|
||||
* @param fn 需要节流的函数
|
||||
* @param delay 节流间隔时间(ms)，默认 500
|
||||
* @returns 返回节流后的函数，连续调用时只会在每个 delay 周期内执行一次
|
||||
*/
|
||||
export function useThrottleFn<T extends (...args: any[]) => any>(
|
||||
fn: T,
|
||||
delay: number = 500,
|
||||
): T & { cancel: () => void } {
|
||||
const lastTime = ref<number>(0);
|
||||
let timer: any = null;
|
||||
|
||||
const throttled = function (this: any, ...args: any[]) {
|
||||
const now = Date.now();
|
||||
const remaining = delay - (now - lastTime.value);
|
||||
|
||||
if (remaining <= 0) {
|
||||
// 冷却时间已过，立即执行
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
lastTime.value = now;
|
||||
fn.apply(this, args);
|
||||
} else if (!timer) {
|
||||
// 冷却时间未过，延后执行
|
||||
timer = setTimeout(() => {
|
||||
lastTime.value = Date.now();
|
||||
timer = null;
|
||||
fn.apply(this, args);
|
||||
}, remaining);
|
||||
}
|
||||
} as T & { cancel: () => void };
|
||||
|
||||
throttled.cancel = () => {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
return throttled;
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { ref, watch, onBeforeUnmount, toValue } from 'vue';
|
||||
import { ref, onBeforeUnmount, toValue } from 'vue';
|
||||
import type { Ref, MaybeRefOrGetter } from 'vue';
|
||||
import { useEffect } from './useEffect';
|
||||
|
||||
// --- 类型定义 ---
|
||||
export type WebSocketStatus = 'connecting' | 'open' | 'closed' | 'error';
|
||||
@@ -216,14 +217,16 @@ export function useWebSocket(
|
||||
// --- 监听与副作用 ---
|
||||
|
||||
// 监听 URL 变化，如果变了则重新连接
|
||||
watch(
|
||||
() => toValue(url),
|
||||
() => {
|
||||
if (status.value !== 'closed') {
|
||||
connect();
|
||||
}
|
||||
},
|
||||
);
|
||||
let skipInitialUrlWatch = true;
|
||||
useEffect(() => {
|
||||
if (skipInitialUrlWatch) {
|
||||
skipInitialUrlWatch = false;
|
||||
return;
|
||||
}
|
||||
if (status.value !== 'closed') {
|
||||
connect();
|
||||
}
|
||||
}, [() => toValue(url)]);
|
||||
|
||||
// 组件卸载时清理资源
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sider {
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -12,8 +9,8 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #1a1a1a;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.logoText {
|
||||
@@ -22,14 +19,6 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #fff;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
}
|
||||
|
||||
.trigger {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
@@ -43,15 +32,84 @@
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 16px;
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
min-height: 280px;
|
||||
// 面包屑
|
||||
.breadcrumb {
|
||||
flex: 1;
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
:global {
|
||||
.ant-breadcrumb-link,
|
||||
.ant-breadcrumb-separator,
|
||||
.ant-breadcrumb-item a {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.ant-breadcrumb-item:last-child {
|
||||
.ant-breadcrumb-link,
|
||||
.ant-breadcrumb-separator,
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
font-weight: 500;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
// Header 右侧：账号信息 + 退出图标
|
||||
.headerRight {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.userPhone {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.logoutIcon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0.45;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单项：图标 + 文字
|
||||
.menuItem {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
:global(.anticon) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.menuItemDanger {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
+141
-7
@@ -1,19 +1,49 @@
|
||||
import { computed, defineComponent, h, ref } from 'vue';
|
||||
import type { CSSProperties } from 'vue';
|
||||
import { useRouter, useRoute, RouterView } from 'vue-router';
|
||||
import { Layout, Menu } from 'ant-design-vue';
|
||||
import { Layout, Menu, Modal, Breadcrumb, Dropdown, message } from 'ant-design-vue';
|
||||
import type { MenuProps } from 'ant-design-vue';
|
||||
import {
|
||||
DashboardOutlined,
|
||||
EditOutlined,
|
||||
InfoCircleOutlined,
|
||||
LogoutOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
SettingOutlined,
|
||||
TransactionOutlined,
|
||||
TrophyOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { useMenuStore } from '@/stores/menuStore';
|
||||
import { useUserStore } from '@/stores/userStore';
|
||||
import { useState, useBreadcrumb, auth } from '@/hooks';
|
||||
import { ChangePasswordModal } from '@/components';
|
||||
import logoutSvg from '@/assets/img/icon/logout.svg';
|
||||
import styles from './BasicLayout.module.less';
|
||||
|
||||
const { Header, Sider, Content, Footer } = Layout;
|
||||
|
||||
const headerStyle: CSSProperties = {
|
||||
background: '#fff',
|
||||
padding: '0 16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
color: '#1a1a1a',
|
||||
boxShadow: '0 1px 4px rgba(0, 21, 41, 0.08)',
|
||||
};
|
||||
|
||||
const siderStyle: CSSProperties = {
|
||||
background: '#fff',
|
||||
boxShadow: '2px 0 8px rgba(0, 21, 41, 0.08)',
|
||||
};
|
||||
|
||||
const footerStyle: CSSProperties = {
|
||||
padding: '0 50px 16px 50px',
|
||||
textAlign: 'center',
|
||||
color: '#3a3a3a',
|
||||
userSelect: 'none',
|
||||
};
|
||||
|
||||
/**
|
||||
* 图标名 → 组件映射
|
||||
* 后端下发的 icon 字符串在此映射为 antd icon 组件
|
||||
@@ -23,6 +53,8 @@ const ICON_MAP: Record<string, any> = {
|
||||
DashboardOutlined,
|
||||
InfoCircleOutlined,
|
||||
SettingOutlined,
|
||||
TransactionOutlined,
|
||||
TrophyOutlined,
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -60,6 +92,8 @@ export default defineComponent({
|
||||
const collapsed = ref(false);
|
||||
|
||||
const { menuItems } = useMenuStore();
|
||||
const { phone } = useUserStore();
|
||||
const { breadcrumbs } = useBreadcrumb();
|
||||
|
||||
const selectedKeys = computed<string[]>(() => [route.path]);
|
||||
|
||||
@@ -73,14 +107,61 @@ export default defineComponent({
|
||||
collapsed.value = !collapsed.value;
|
||||
};
|
||||
|
||||
/** ===== 退出登录 ===== */
|
||||
const handleLogout = () => {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '是否退出登录？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
const { clearUser } = useUserStore();
|
||||
clearUser();
|
||||
auth.logout();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/** ===== 修改密码弹窗 ===== */
|
||||
const [changePwdVisible, setChangePwdVisible] = useState<boolean>(false);
|
||||
const [changePwdSubmitting, setChangePwdSubmitting] = useState<boolean>(false);
|
||||
|
||||
const handleChangePassword = () => {
|
||||
setChangePwdVisible(true);
|
||||
};
|
||||
|
||||
const handleChangePwdSave = async (payload: { newPassword: string }) => {
|
||||
if (changePwdSubmitting.value) return;
|
||||
setChangePwdSubmitting(true);
|
||||
try {
|
||||
// TODO: 替换为真实 API 调用
|
||||
console.log('修改密码:', payload);
|
||||
message.success('修改成功');
|
||||
setChangePwdVisible(false);
|
||||
} catch (err: any) {
|
||||
message.error(err?.msg || '修改失败');
|
||||
} finally {
|
||||
setChangePwdSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
/** ===== 头像下拉菜单：修改密码 / 退出登录 ===== */
|
||||
const handleUserMenuClick: MenuProps['onClick'] = ({ key }) => {
|
||||
if (key === 'changePassword') {
|
||||
handleChangePassword();
|
||||
} else if (key === 'logout') {
|
||||
handleLogout();
|
||||
}
|
||||
};
|
||||
|
||||
return () => (
|
||||
<Layout class={styles.container}>
|
||||
<Sider class={styles.sider} collapsed={collapsed.value} trigger={null} collapsible>
|
||||
<Sider style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
|
||||
<div class={styles.logo}>
|
||||
<span class={styles.logoText}>{collapsed.value ? '6羽' : '六个羽友赛事'}</span>
|
||||
<span class={styles.logoText}>{collapsed.value ? '6羽' : '六羽赛事运营平台'}</span>
|
||||
</div>
|
||||
<Menu
|
||||
theme="dark"
|
||||
theme="light"
|
||||
mode="inline"
|
||||
selectedKeys={selectedKeys.value}
|
||||
items={resolvedItems.value}
|
||||
@@ -88,19 +169,72 @@ export default defineComponent({
|
||||
/>
|
||||
</Sider>
|
||||
|
||||
<Layout>
|
||||
<Header class={styles.header}>
|
||||
<Layout class={styles.main}>
|
||||
<Header style={headerStyle}>
|
||||
<span class={styles.trigger} onClick={toggleCollapsed}>
|
||||
{collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
</span>
|
||||
|
||||
{/* 面包屑：紧跟在折叠按钮之后 */}
|
||||
<Breadcrumb separator=">" class={styles.breadcrumb}>
|
||||
{breadcrumbs.value.map((item, index) => {
|
||||
const isLast = index === breadcrumbs.value.length - 1;
|
||||
return (
|
||||
<Breadcrumb.Item key={item.path || index}>
|
||||
{isLast || !item.path ? (
|
||||
<span>{item.title}</span>
|
||||
) : (
|
||||
<a onClick={() => router.push(item.path as string)}>{item.title}</a>
|
||||
)}
|
||||
</Breadcrumb.Item>
|
||||
);
|
||||
})}
|
||||
</Breadcrumb>
|
||||
|
||||
{/* 右侧: 账号信息 + 退出 */}
|
||||
<div class={styles.headerRight}>
|
||||
<span class={styles.userPhone}>{phone.value}</span>
|
||||
<Dropdown trigger={['hover']} placement="bottomLeft">
|
||||
{{
|
||||
default: () => <img src={logoutSvg} class={styles.logoutIcon} />,
|
||||
overlay: () => (
|
||||
<Menu onClick={handleUserMenuClick}>
|
||||
<Menu.Item key="changePassword">
|
||||
<span class={styles.menuItem}>
|
||||
<EditOutlined />
|
||||
修改密码
|
||||
</span>
|
||||
</Menu.Item>
|
||||
<Menu.Divider />
|
||||
<Menu.Item key="logout">
|
||||
<span class={`${styles.menuItem} ${styles.menuItemDanger}`}>
|
||||
<LogoutOutlined />
|
||||
退出登录
|
||||
</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
),
|
||||
}}
|
||||
</Dropdown>
|
||||
</div>
|
||||
</Header>
|
||||
|
||||
<Content class={styles.content}>
|
||||
<RouterView />
|
||||
</Content>
|
||||
|
||||
<Footer class={styles.footer}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
|
||||
<Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
|
||||
</Layout>
|
||||
|
||||
{/* 修改密码弹窗 */}
|
||||
{changePwdVisible.value && (
|
||||
<ChangePasswordModal
|
||||
visible={changePwdVisible.value}
|
||||
submitting={changePwdSubmitting.value}
|
||||
onClose={() => setChangePwdVisible(false)}
|
||||
onSave={handleChangePwdSave}
|
||||
/>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -6,10 +6,13 @@ import App from './App';
|
||||
import router from './router';
|
||||
import './router/guard'; // 路由守卫:登录鉴权 + 动态菜单加载
|
||||
import './assets/styles/index.less';
|
||||
import ypComponent from '@yp-component/root';
|
||||
import '@yp-component/root/style.css';
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(router);
|
||||
app.use(Antd);
|
||||
app.use(ypComponent);
|
||||
|
||||
app.mount('#app');
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
.form {
|
||||
:global {
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.ant-form-item-explain-error {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 上传 ===== */
|
||||
.uploader {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uploadCard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
background-color: #fafafa;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
gap: 4px;
|
||||
|
||||
&:hover {
|
||||
border-color: #1677ff;
|
||||
}
|
||||
}
|
||||
|
||||
.uploadCardError {
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
|
||||
.uploadIcon {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.uploadHint {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uploadTip {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ===== 预览 ===== */
|
||||
.previewWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
:global {
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.previewImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.uploadAgainBtn {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 提示 ===== */
|
||||
.tip {
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 16px;
|
||||
background-color: #f0f5ff;
|
||||
border: 1px solid #d6e4ff;
|
||||
border-radius: 4px;
|
||||
color: #1677ff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ===== 时间行（双列）===== */
|
||||
.timeRow {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
.timeItem {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 底部按钮 ===== */
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
@@ -0,0 +1,549 @@
|
||||
import { defineComponent, ref, reactive } from 'vue';
|
||||
import { useEffect } from '@/hooks';
|
||||
import {
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
DatePicker,
|
||||
InputNumber,
|
||||
Button,
|
||||
message,
|
||||
Spin,
|
||||
} from 'ant-design-vue';
|
||||
import { JUMP_TYPE_OPTIONS, EVENT_OPTIONS, REGION_OPTIONS } from '../model/useBannerModel';
|
||||
import { ImageCropper } from '@yp-component/root';
|
||||
import { uploadFile, OssUploadType } from '@/utils/oss';
|
||||
import dayjs from 'dayjs';
|
||||
import styles from './BannerFormModal.module.less';
|
||||
|
||||
/** 默认表单数据 */
|
||||
const getDefaultForm = () => ({
|
||||
title: '',
|
||||
imageUrl: '',
|
||||
imageStatus: 'empty' as 'empty' | 'uploading' | 'success' | 'error',
|
||||
jumpType: 'event_detail' as 'event_detail' | 'miniprogram_page' | 'custom_link' | 'none',
|
||||
relatedEventId: '',
|
||||
pagePath: '',
|
||||
customUrl: '',
|
||||
region: 'home',
|
||||
displayTimeRange: null as [string, string] | null,
|
||||
sort: 1,
|
||||
});
|
||||
|
||||
/** 表单字段最大长度限制 */
|
||||
const TITLE_MAX = 50;
|
||||
const PATH_MAX = 200;
|
||||
const URL_MAX = 500;
|
||||
|
||||
/** 图片上传限制：最大 10MB */
|
||||
const IMAGE_MAX_SIZE = 10 * 1024 * 1024;
|
||||
/** 裁剪比例：1053:351 = 3:1 */
|
||||
const CROP_ASPECT_RATIO = 1053 / 351;
|
||||
|
||||
interface BannerFormModalProps {
|
||||
visible: boolean;
|
||||
record: any;
|
||||
submitting?: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (formData: any) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 base64 字符串转换为 File 对象
|
||||
*/
|
||||
function base64ToFile(dataUrl: string, fileName: string): File {
|
||||
const arr = dataUrl.split(',');
|
||||
const mime = arr[0].match(/:(.*?);/)?.[1] || 'image/png';
|
||||
const bstr = atob(arr[1]);
|
||||
const u8arr = new Uint8Array(bstr.length);
|
||||
for (let i = 0; i < bstr.length; i++) {
|
||||
u8arr[i] = bstr.charCodeAt(i);
|
||||
}
|
||||
return new File([u8arr], fileName, { type: mime });
|
||||
}
|
||||
|
||||
/**
|
||||
* Banner 新增/编辑表单弹窗
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'BannerFormModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
record: { type: Object, default: null },
|
||||
submitting: { type: Boolean, default: false },
|
||||
onClose: { type: Function, required: true },
|
||||
onSave: { type: Function, required: true },
|
||||
},
|
||||
setup(props: BannerFormModalProps) {
|
||||
const formRef = ref<any>();
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null);
|
||||
const formData = reactive(getDefaultForm());
|
||||
|
||||
/** 裁剪弹窗状态 */
|
||||
const cropperVisible = ref(false);
|
||||
/** 待裁剪图片的本地预览 URL */
|
||||
const uploadImageUrl = ref('');
|
||||
|
||||
/** 根据 record 初始化表单 */
|
||||
const initFormFromRecord = (record: any) => {
|
||||
const fresh = getDefaultForm();
|
||||
if (!record) {
|
||||
Object.assign(formData, fresh);
|
||||
return;
|
||||
}
|
||||
|
||||
let pagePath = '';
|
||||
let customUrl = '';
|
||||
if (record.jumpType === 'miniprogram_page') {
|
||||
pagePath = record.jumpUrl || '';
|
||||
} else if (record.jumpType === 'custom_link') {
|
||||
customUrl = record.jumpUrl || '';
|
||||
}
|
||||
|
||||
Object.assign(formData, {
|
||||
...fresh,
|
||||
title: record.title || '',
|
||||
imageUrl: record.imageUrl || '',
|
||||
imageStatus: record.imageUrl ? ('success' as const) : ('empty' as const),
|
||||
jumpType: record.jumpType || 'event_detail',
|
||||
relatedEventId: record.relatedEventId || '',
|
||||
pagePath,
|
||||
customUrl,
|
||||
region: record.region && record.region !== record.city ? record.region : 'home',
|
||||
displayTimeRange:
|
||||
record.displayStartTime && record.displayEndTime
|
||||
? ([record.displayStartTime, record.displayEndTime] as [string, string])
|
||||
: null,
|
||||
sort: record.sort ?? 1,
|
||||
});
|
||||
};
|
||||
|
||||
/** 监听 visible 变化重置表单 */
|
||||
useEffect(() => {
|
||||
if (props.visible) {
|
||||
initFormFromRecord(props.record);
|
||||
cropperVisible.value = false;
|
||||
uploadImageUrl.value = '';
|
||||
setTimeout(() => formRef.value?.clearValidate(), 0);
|
||||
}
|
||||
}, [() => props.visible]);
|
||||
|
||||
/** 监听 jumpType 变化时清理联动字段 */
|
||||
useEffect(() => {
|
||||
const newType = formData.jumpType;
|
||||
if (newType !== 'event_detail') formData.relatedEventId = '';
|
||||
if (newType !== 'miniprogram_page') formData.pagePath = '';
|
||||
if (newType !== 'custom_link') formData.customUrl = '';
|
||||
const fieldsToValidate: string[] = [];
|
||||
if (newType === 'event_detail') fieldsToValidate.push('relatedEventId');
|
||||
if (newType === 'miniprogram_page') fieldsToValidate.push('pagePath');
|
||||
if (newType === 'custom_link') fieldsToValidate.push('customUrl');
|
||||
if (fieldsToValidate.length) formRef.value?.clearValidate(fieldsToValidate);
|
||||
}, [() => formData.jumpType]);
|
||||
|
||||
/** 触发隐藏的文件选择器 */
|
||||
const triggerFilePicker = () => {
|
||||
if (formData.imageStatus === 'uploading') return;
|
||||
fileInputRef.value?.click();
|
||||
};
|
||||
|
||||
/** 处理文件选择 → 打开裁剪弹窗 */
|
||||
const handleFileChange = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const file = target.files?.[0];
|
||||
// 重置 input 以便同一文件可再次选择
|
||||
target.value = '';
|
||||
|
||||
if (!file) return;
|
||||
if (!/^image\//.test(file.type)) {
|
||||
message.error('请选择图片文件');
|
||||
return;
|
||||
}
|
||||
if (file.size > IMAGE_MAX_SIZE) {
|
||||
message.error(`图片大小不能超过 ${IMAGE_MAX_SIZE / 1024 / 1024}MB`);
|
||||
return;
|
||||
}
|
||||
|
||||
// 生成本地预览 URL，打开裁剪弹窗
|
||||
uploadImageUrl.value = URL.createObjectURL(file);
|
||||
cropperVisible.value = true;
|
||||
};
|
||||
|
||||
/** 裁剪确认回调：将裁剪后的图片上传到 OSS */
|
||||
const handleCropConfirm = async (dataUrl: string) => {
|
||||
cropperVisible.value = false;
|
||||
|
||||
// 释放旧的本地预览
|
||||
if (formData.imageUrl && formData.imageUrl.startsWith('blob:')) {
|
||||
URL.revokeObjectURL(formData.imageUrl);
|
||||
}
|
||||
|
||||
// 先用 base64 做本地预览
|
||||
const localUrl = dataUrl;
|
||||
formData.imageUrl = localUrl;
|
||||
formData.imageStatus = 'uploading';
|
||||
|
||||
try {
|
||||
const file = base64ToFile(dataUrl, `banner_${Date.now()}.jpg`);
|
||||
const result = await uploadFile(file, OssUploadType.Banner as any);
|
||||
|
||||
// 释放本地预览
|
||||
URL.revokeObjectURL(localUrl);
|
||||
formData.imageUrl = result.url;
|
||||
formData.imageStatus = 'success';
|
||||
message.success('图片上传成功');
|
||||
} catch (err: any) {
|
||||
console.error('[Banner] 上传失败:', err);
|
||||
URL.revokeObjectURL(localUrl);
|
||||
formData.imageUrl = '';
|
||||
formData.imageStatus = 'error';
|
||||
message.error(err?.message || '图片上传失败');
|
||||
}
|
||||
|
||||
// 清理裁剪资源
|
||||
if (uploadImageUrl.value) {
|
||||
URL.revokeObjectURL(uploadImageUrl.value);
|
||||
}
|
||||
uploadImageUrl.value = '';
|
||||
};
|
||||
|
||||
/** 裁剪弹窗取消 */
|
||||
const onCropperCancel = () => {
|
||||
cropperVisible.value = false;
|
||||
if (uploadImageUrl.value) {
|
||||
URL.revokeObjectURL(uploadImageUrl.value);
|
||||
}
|
||||
uploadImageUrl.value = '';
|
||||
};
|
||||
|
||||
/** 删除已上传图片 */
|
||||
const handleRemoveImage = () => {
|
||||
if (formData.imageUrl && formData.imageUrl.startsWith('blob:')) {
|
||||
URL.revokeObjectURL(formData.imageUrl);
|
||||
}
|
||||
formData.imageUrl = '';
|
||||
formData.imageStatus = 'empty';
|
||||
};
|
||||
|
||||
/** 提交表单 */
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
// 防御：上传中时禁止提交
|
||||
if (formData.imageStatus === 'uploading') {
|
||||
message.warning('图片仍在上传中，请稍候');
|
||||
return;
|
||||
}
|
||||
|
||||
// 构造提交数据：根据 jumpType 整理 jumpUrl
|
||||
const payload: any = { ...formData };
|
||||
if (payload.jumpType === 'event_detail') {
|
||||
payload.jumpUrl = payload.relatedEventId;
|
||||
} else if (payload.jumpType === 'miniprogram_page') {
|
||||
payload.jumpUrl = payload.pagePath;
|
||||
} else if (payload.jumpType === 'custom_link') {
|
||||
payload.jumpUrl = payload.customUrl;
|
||||
} else {
|
||||
payload.jumpUrl = '';
|
||||
}
|
||||
payload.displayStartTime = payload.displayTimeRange?.[0] || '';
|
||||
payload.displayEndTime = payload.displayTimeRange?.[1] || '';
|
||||
props.onSave(payload);
|
||||
};
|
||||
|
||||
return () => (
|
||||
<>
|
||||
<Modal
|
||||
title={props.record ? '编辑 Banner' : '新增 Banner'}
|
||||
visible={props.visible}
|
||||
onCancel={props.onClose}
|
||||
width={640}
|
||||
destroyOnClose
|
||||
footer={null}
|
||||
centered
|
||||
>
|
||||
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
|
||||
{/* ===== Banner 标题 ===== */}
|
||||
<Form.Item
|
||||
label="Banner标题"
|
||||
name="title"
|
||||
rules={[
|
||||
{ required: true, message: '请输入' },
|
||||
{ max: TITLE_MAX, message: `标题最多 ${TITLE_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入标题"
|
||||
maxlength={TITLE_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.title}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* ===== 上传图片（必填，带裁剪） ===== */}
|
||||
<Form.Item
|
||||
label="上传图片"
|
||||
name="imageUrl"
|
||||
rules={[
|
||||
{ required: true, message: '请上传 Banner 图片' },
|
||||
{
|
||||
validator: async () => {
|
||||
if (!formData.imageUrl || formData.imageUrl.startsWith('blob:')) {
|
||||
return Promise.reject(new Error('请上传 Banner 图片'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<div class={styles.uploader}>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
{formData.imageStatus === 'empty' || formData.imageStatus === 'error' ? (
|
||||
<div
|
||||
class={`${styles.uploadCard} ${
|
||||
formData.imageStatus === 'error' ? styles.uploadCardError : ''
|
||||
}`}
|
||||
onClick={triggerFilePicker}
|
||||
>
|
||||
<span class={styles.uploadIcon}>+</span>
|
||||
<span class={styles.uploadHint}>点击上传</span>
|
||||
<span class={styles.uploadTip}>
|
||||
建议尺寸 1053*351 像素
|
||||
<br />
|
||||
支持 JPG/PNG，最大 10MB
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div class={styles.previewWrapper}>
|
||||
<Spin spinning={formData.imageStatus === 'uploading'} tip="上传中...">
|
||||
<img class={styles.previewImg} src={formData.imageUrl} alt="banner preview" />
|
||||
</Spin>
|
||||
<div class={styles.uploadAgainBtn} onClick={handleRemoveImage}>
|
||||
重新上传
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Form.Item>
|
||||
|
||||
{/* ===== 跳转类型 ===== */}
|
||||
<Form.Item
|
||||
label="跳转类型"
|
||||
name="jumpType"
|
||||
rules={[{ required: true, message: '请选择跳转类型' }]}
|
||||
>
|
||||
<Select
|
||||
options={JUMP_TYPE_OPTIONS as any}
|
||||
placeholder="请选择"
|
||||
v-model:value={formData.jumpType}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* ===== 联动字段：根据跳转类型动态展示 ===== */}
|
||||
{formData.jumpType === 'event_detail' && (
|
||||
<Form.Item
|
||||
label="关联赛事"
|
||||
name="relatedEventId"
|
||||
rules={[{ required: true, message: '请选择关联赛事' }]}
|
||||
>
|
||||
<Select
|
||||
options={EVENT_OPTIONS as any}
|
||||
placeholder="不关联"
|
||||
allowClear
|
||||
v-model:value={formData.relatedEventId}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'miniprogram_page' && (
|
||||
<Form.Item
|
||||
label="页面路径"
|
||||
name="pagePath"
|
||||
rules={[
|
||||
{ required: true, message: '请输入页面路径' },
|
||||
{
|
||||
pattern: /^\//,
|
||||
message: '页面路径需以 / 开头',
|
||||
},
|
||||
{ max: PATH_MAX, message: `路径最多 ${PATH_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="/pages/index/index"
|
||||
maxlength={PATH_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.pagePath}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'custom_link' && (
|
||||
<Form.Item
|
||||
label="自定义链接"
|
||||
name="customUrl"
|
||||
rules={[
|
||||
{ required: true, message: '请输入自定义链接' },
|
||||
{
|
||||
pattern: /^https?:\/\//i,
|
||||
message: '请输入以 http/https 开头的链接',
|
||||
},
|
||||
{ max: URL_MAX, message: `链接最多 ${URL_MAX} 个字符` },
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder="https://xxx"
|
||||
maxlength={URL_MAX}
|
||||
allowClear
|
||||
v-model:value={formData.customUrl}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{formData.jumpType === 'none' && (
|
||||
<div class={styles.tip}>选择"无链接"时，点击 Banner 不会跳转。</div>
|
||||
)}
|
||||
|
||||
{/* ===== 所属区域 ===== */}
|
||||
<Form.Item
|
||||
label="所属区域"
|
||||
name="region"
|
||||
rules={[{ required: true, message: '请选择所属区域' }]}
|
||||
>
|
||||
<Select
|
||||
options={REGION_OPTIONS as any}
|
||||
placeholder="首页"
|
||||
v-model:value={formData.region}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* ===== 展示时间（开始/结束） ===== */}
|
||||
<div class={styles.timeRow}>
|
||||
<Form.Item
|
||||
label="开始时间"
|
||||
name="displayStartTime"
|
||||
class={styles.timeItem}
|
||||
rules={[{ required: true, message: '请选择开始时间' }]}
|
||||
>
|
||||
<DatePicker
|
||||
placeholder="年-月-日"
|
||||
format="YYYY-MM-DD"
|
||||
value={
|
||||
formData.displayTimeRange?.[0] ? dayjs(formData.displayTimeRange[0]) : undefined
|
||||
}
|
||||
onUpdate:value={(v: any) => {
|
||||
formData.displayTimeRange = [
|
||||
v ? v.format('YYYY-MM-DD') : '',
|
||||
formData.displayTimeRange?.[1] || '',
|
||||
];
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="结束时间"
|
||||
name="displayEndTime"
|
||||
class={styles.timeItem}
|
||||
rules={[
|
||||
{ required: true, message: '请选择结束时间' },
|
||||
{
|
||||
validator: async () => {
|
||||
const [s, e] = formData.displayTimeRange || [];
|
||||
if (s && e && new Date(e) < new Date(s)) {
|
||||
return Promise.reject(new Error('结束时间不能早于开始时间'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<DatePicker
|
||||
placeholder="年-月-日"
|
||||
format="YYYY-MM-DD"
|
||||
value={
|
||||
formData.displayTimeRange?.[1] ? dayjs(formData.displayTimeRange[1]) : undefined
|
||||
}
|
||||
onUpdate:value={(v: any) => {
|
||||
formData.displayTimeRange = [
|
||||
formData.displayTimeRange?.[0] || '',
|
||||
v ? v.format('YYYY-MM-DD') : '',
|
||||
];
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
{/* ===== 排序 ===== */}
|
||||
<Form.Item
|
||||
label="排序"
|
||||
name="sort"
|
||||
rules={[
|
||||
{ required: true, message: '请输入排序' },
|
||||
{ type: 'number', min: 1, max: 999, message: '排序范围 1-999' },
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="数字越小越靠前"
|
||||
min={1}
|
||||
max={999}
|
||||
precision={0}
|
||||
style={{ width: '200px' }}
|
||||
v-model:value={formData.sort}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{/* ===== 底部按钮 ===== */}
|
||||
<div class={styles.footer}>
|
||||
<Button onClick={props.onClose}>取消</Button>
|
||||
<Button type="primary" loading={props.submitting} onClick={handleSubmit}>
|
||||
确认保存
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* ===== 图片裁剪弹窗 ===== */}
|
||||
{cropperVisible.value && (
|
||||
<Modal
|
||||
visible={cropperVisible.value}
|
||||
title="裁剪图片"
|
||||
width={800}
|
||||
footer={null}
|
||||
onCancel={onCropperCancel}
|
||||
centered
|
||||
destroyOnClose
|
||||
>
|
||||
<div style={{ height: '500px' }}>
|
||||
<ImageCropper
|
||||
src={uploadImageUrl.value}
|
||||
aspectRatio={CROP_ASPECT_RATIO}
|
||||
autoCrop={true}
|
||||
autoCropArea={0.8}
|
||||
viewMode={1}
|
||||
dragMode="move"
|
||||
movable={true}
|
||||
scalable={true}
|
||||
zoomable={true}
|
||||
cropBoxMovable={true}
|
||||
cropBoxResizable={true}
|
||||
onCrop={handleCropConfirm}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
.tableBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
:global {
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container,
|
||||
.ant-table,
|
||||
.ant-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,282 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Form,
|
||||
Space,
|
||||
Select,
|
||||
Tooltip,
|
||||
Pagination,
|
||||
Modal,
|
||||
Image,
|
||||
} from 'ant-design-vue';
|
||||
import { useBannerModel, BANNER_STATUS_OPTIONS } from './model/useBannerModel';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import BannerFormModal from './components/BannerFormModal';
|
||||
import styles from './index.module.less';
|
||||
|
||||
/**
|
||||
* bodyCell 渲染函数
|
||||
*/
|
||||
function renderBodyCell({
|
||||
column,
|
||||
text,
|
||||
record,
|
||||
renderJumpType,
|
||||
renderStatus,
|
||||
onEdit,
|
||||
onToggleStatus,
|
||||
onDelete,
|
||||
}: {
|
||||
column: any;
|
||||
text: any;
|
||||
record: any;
|
||||
renderJumpType: (type: string) => any;
|
||||
renderStatus: (status: string) => any;
|
||||
onEdit: (record: any) => void;
|
||||
onToggleStatus: (record: any) => void;
|
||||
onDelete: (record: any) => void;
|
||||
}) {
|
||||
// 图片列：80 * 44
|
||||
if (column.key === 'image') {
|
||||
return (
|
||||
<Image
|
||||
src={record.imageUrl}
|
||||
width={80}
|
||||
height={44}
|
||||
style={{ objectFit: 'cover', borderRadius: '4px' }}
|
||||
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAoCAMAAABQp/7DAAAANlBMVEUAAADg4ODd3d3c3Nzb29va2trZ2dnY2NjX19fW1tbV1dXU1NTT09PS0tLR0dHQ0NDPz8/Pz8/BwHhiAAAAEnRSTlMAHx8/P09fb2+Pn5+vv7/P39+GGqSCAAABMklEQVRIx+2T27KDIAxFSRQQRbz//7edUwyhBWc6+7AuH4QNEiAllDbKj5M/4CAbMR3lH7+9LZxk3wpP3lxHJ8lbFm3OMpysbsPehDdHcLIKHGjs1hKc3NaRyNoTOFnujhFZZxfF0MKsA6hB6w2Ck9UPYNOGA5ysXsLGlhPWNpysOkAHTt25PsHJeA3HqCzUDoaCLQYrvG3tO+z1BjyC8GII/TVHcWyit+BS8Q5fU3hA2F/F5awWeCgT9CzHwMjJjFAXiAOfGFjTQSBXGpgl9BlQDf84sIKGAleYwQcUoYSHErFgB8EDn5iu3gKCgwVZOFooAyfLUBK7B27M4PWAlVmsFESoFwtKeYTlBHF1LuhzF2K9Q+/nJ1DQBSxcoGOrL4I3s0DPASBvfFq8t9gPAAAAAElFTkSuQmCC"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// 标题列：超长截断 + Tooltip
|
||||
if (column.dataIndex === 'title') {
|
||||
const maxLen = 18;
|
||||
const raw = text || '';
|
||||
const display = raw.length > maxLen ? raw.slice(0, maxLen) + '...' : raw;
|
||||
return raw.length > maxLen ? (
|
||||
<Tooltip title={raw}>
|
||||
<span>{display}</span>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<span>{display}</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 跳转类型列：彩色 Tag
|
||||
if (column.dataIndex === 'jumpType') {
|
||||
return renderJumpType(text);
|
||||
}
|
||||
|
||||
// 关联赛事列：为空显示 "-"
|
||||
if (column.dataIndex === 'relatedEvent') {
|
||||
return <span>{text || '-'}</span>;
|
||||
}
|
||||
|
||||
// 所属区域列：省 + 市 拼接
|
||||
if (column.key === 'region') {
|
||||
return (
|
||||
<span>
|
||||
{record.province}
|
||||
{record.city}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 展示时间列：日期时间段
|
||||
if (column.key === 'displayTime') {
|
||||
return (
|
||||
<span>
|
||||
{record.displayStartTime} 至 {record.displayEndTime}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// 状态列：启用中(绿色) / 已禁用(灰色半透明)
|
||||
if (column.dataIndex === 'status') {
|
||||
return renderStatus(text);
|
||||
}
|
||||
|
||||
// 操作列
|
||||
if (column.key === 'action') {
|
||||
const isEnabled = record.status === 'enabled';
|
||||
return (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
style={isEnabled ? { color: '#faad14' } : { color: '#52c41a' }}
|
||||
onClick={() => onToggleStatus(record)}
|
||||
>
|
||||
{isEnabled ? '禁用' : '启用'}
|
||||
</Button>
|
||||
<Button type="link" size="small" danger onClick={() => onDelete(record)}>
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* Banner 配置
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'EventBanner',
|
||||
setup() {
|
||||
const {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
modalVisible,
|
||||
editingRecord,
|
||||
formSubmitting,
|
||||
renderJumpType,
|
||||
renderStatus,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseModal,
|
||||
handleSave,
|
||||
handleDelete,
|
||||
handleToggleStatus,
|
||||
} = useBannerModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
/** 删除二次确认 */
|
||||
const confirmDelete = (record: any) => {
|
||||
Modal.confirm({
|
||||
title: '删除确认',
|
||||
content: `确认要删除 "${record.title}" 吗？`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okButtonProps: { danger: true },
|
||||
onOk: () => handleDelete(record),
|
||||
});
|
||||
};
|
||||
|
||||
/** 启用/禁用二次确认 */
|
||||
const confirmToggleStatus = (record: any) => {
|
||||
const isEnabled = record.status === 'enabled';
|
||||
const actionText = isEnabled ? '禁用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `${actionText}确认`,
|
||||
content: `确认要${actionText} "${record.title}" 吗？`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => handleToggleStatus(record),
|
||||
});
|
||||
};
|
||||
|
||||
/** 最终表格列：模型列 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 220,
|
||||
fixed: 'right' as const,
|
||||
align: 'center' as const,
|
||||
},
|
||||
];
|
||||
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="标题" name="searchTitle">
|
||||
<Input
|
||||
placeholder="请输入"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
<Select
|
||||
value={filterForm.status}
|
||||
options={BANNER_STATUS_OPTIONS as any}
|
||||
style={{ width: '120px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.status = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch} loading={loading.value}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
<Button type="primary" onClick={handleAdd}>
|
||||
新增
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
<div ref={containerRef} class={styles.tableBody}>
|
||||
<Table
|
||||
columns={tableColumns}
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
scroll={{ x: 'max-content', y: height.value }}
|
||||
pagination={false}
|
||||
>
|
||||
{{
|
||||
bodyCell: (args: any) =>
|
||||
renderBodyCell({
|
||||
...args,
|
||||
renderJumpType,
|
||||
renderStatus,
|
||||
onEdit: handleEdit,
|
||||
onToggleStatus: confirmToggleStatus,
|
||||
onDelete: confirmDelete,
|
||||
}),
|
||||
}}
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div class="page-pagination">
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={pagination.value.total}
|
||||
showSizeChanger
|
||||
showTotal={(total: number) => `共 ${total} 条`}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ===== 新增/编辑弹窗 ===== */}
|
||||
{modalVisible.value && (
|
||||
<BannerFormModal
|
||||
visible={modalVisible.value}
|
||||
record={editingRecord.value}
|
||||
submitting={formSubmitting.value}
|
||||
onClose={handleCloseModal}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,323 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message, Tag } from 'ant-design-vue';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** Banner 状态选项（筛选） */
|
||||
export const BANNER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'enabled', label: '启用' },
|
||||
{ value: 'disabled', label: '禁用' },
|
||||
] as const;
|
||||
|
||||
/** 跳转类型选项（表单下拉） */
|
||||
export const JUMP_TYPE_OPTIONS = [
|
||||
{ value: 'event_detail', label: '赛事详情页' },
|
||||
{ value: 'miniprogram_page', label: '小程序页面' },
|
||||
{ value: 'custom_link', label: '自定义链接' },
|
||||
{ value: 'none', label: '无链接' },
|
||||
] as const;
|
||||
|
||||
/** 跳转类型映射（用于表格 Tag 渲染） */
|
||||
const JUMP_TYPE_MAP: Record<string, { label: string; color: string }> = {
|
||||
event_detail: { label: '赛事详情页', color: 'blue' },
|
||||
miniprogram_page: { label: '小程序页面', color: 'cyan' },
|
||||
custom_link: { label: '自定义链接', color: 'purple' },
|
||||
none: { label: '无链接', color: 'default' },
|
||||
};
|
||||
|
||||
/** Banner 状态映射 */
|
||||
const STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
enabled: { label: '启用中', color: 'green' },
|
||||
disabled: { label: '已禁用', color: 'default' },
|
||||
};
|
||||
|
||||
/** 关联赛事选项（mock） */
|
||||
export const EVENT_OPTIONS = [
|
||||
{ value: '', label: '不关联' },
|
||||
{ value: 'EV20260701001', label: '2026全国青少年羽毛球锦标赛暨体育文化交流大会' },
|
||||
{ value: 'EV20260701002', label: '国际马拉松城市联赛' },
|
||||
{ value: 'EV20260701003', label: '全民健身运动会' },
|
||||
{ value: 'EV20260701004', label: '上海国际马拉松公开赛' },
|
||||
{ value: 'EV20260701005', label: '北京城市定向越野挑战赛' },
|
||||
];
|
||||
|
||||
/** 所属区域选项（mock） */
|
||||
export const REGION_OPTIONS = [
|
||||
{ value: 'home', label: '首页' },
|
||||
{ value: 'guangdong_shenzhen', label: '广东省深圳市' },
|
||||
{ value: 'zhejiang_hangzhou', label: '浙江省杭州市' },
|
||||
{ value: 'beijing', label: '北京市' },
|
||||
{ value: 'shanghai', label: '上海市' },
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// 假数据（表格）
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => {
|
||||
const jumpType = (['event_detail', 'miniprogram_page', 'custom_link', 'none'] as const)[i % 4];
|
||||
const provinces = ['广东省', '浙江省', '北京市', '上海市'];
|
||||
const cities = ['深圳市', '杭州市', '北京市', '上海市'];
|
||||
|
||||
return {
|
||||
key: `${i + 1}`,
|
||||
id: `BANNER${String(i + 1).padStart(4, '0')}`,
|
||||
sort: i + 1,
|
||||
imageUrl: `https://picsum.photos/seed/banner${i + 1}/80/44`,
|
||||
title:
|
||||
i % 4 === 0
|
||||
? '2026全国青少年羽毛球锦标赛火热报名中'
|
||||
: i % 4 === 1
|
||||
? '马拉松城市联赛限时优惠'
|
||||
: i % 4 === 2
|
||||
? '健身运动会专属福利'
|
||||
: '平台品牌宣传活动',
|
||||
jumpType,
|
||||
jumpUrl:
|
||||
jumpType === 'custom_link'
|
||||
? 'https://example.com/activity'
|
||||
: jumpType === 'miniprogram_page'
|
||||
? '/pages/activity/detail'
|
||||
: '',
|
||||
relatedEventId:
|
||||
jumpType === 'event_detail'
|
||||
? (['EV20260701001', 'EV20260701002', 'EV20260701003'] as const)[i % 3]
|
||||
: '',
|
||||
relatedEvent:
|
||||
jumpType === 'event_detail'
|
||||
? (() => {
|
||||
const map: Record<string, string> = {
|
||||
EV20260701001: '2026全国青少年羽毛球锦标赛暨体育文化交流大会',
|
||||
EV20260701002: '国际马拉松城市联赛',
|
||||
EV20260701003: '全民健身运动会',
|
||||
};
|
||||
return map[(['EV20260701001', 'EV20260701002', 'EV20260701003'] as const)[i % 3]] || '';
|
||||
})()
|
||||
: '',
|
||||
region: provinces[i % 4],
|
||||
city: cities[i % 4],
|
||||
displayStartTime: '2026-08-01 00:00',
|
||||
displayEndTime: '2026-08-31 23:59',
|
||||
createTime: `2026-07-${String((i % 28) + 1).padStart(2, '0')} ${String((i * 2 + 8) % 24).padStart(2, '0')}:${String((i * 7) % 60).padStart(2, '0')}`,
|
||||
status: (i % 4 === 0 ? 'disabled' : 'enabled') as 'enabled' | 'disabled',
|
||||
};
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* Banner 配置页数据模型
|
||||
*/
|
||||
export function useBannerModel() {
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
searchTitle: '',
|
||||
status: '' as '' | 'enabled' | 'disabled',
|
||||
});
|
||||
|
||||
// 防抖 300ms
|
||||
const { debouncedValue: debouncedTitle } = useDebounce(
|
||||
toRef(filterForm, 'searchTitle') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: MOCK_DATA.length,
|
||||
});
|
||||
|
||||
// ===== 弹窗状态 =====
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
const [editingRecord, setEditingRecord] = useState<any>(null);
|
||||
|
||||
// ===== 提交态（用于表单弹窗的确认按钮 loading）=====
|
||||
const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
|
||||
|
||||
// ===== 表格列配置（纯数据列，复杂渲染在页面 bodyCell 中处理）=====
|
||||
const columns = [
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 70, align: 'center' as const },
|
||||
{ title: '图片', key: 'image', width: 100, align: 'center' as const },
|
||||
{ title: '标题', dataIndex: 'title', key: 'title', width: 220 },
|
||||
{
|
||||
title: '跳转类型',
|
||||
dataIndex: 'jumpType',
|
||||
key: 'jumpType',
|
||||
width: 120,
|
||||
align: 'center' as const,
|
||||
},
|
||||
{ title: '关联赛事', dataIndex: 'relatedEvent', key: 'relatedEvent', width: 200 },
|
||||
{ title: '所属区域', key: 'region', width: 140 },
|
||||
{ title: '展示时间', key: 'displayTime', width: 260 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 160 },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100, align: 'center' as const },
|
||||
];
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return debouncedTitle.value.trim() !== '' || filterForm.status !== '';
|
||||
});
|
||||
|
||||
const isEdit = computed(() => editingRecord.value !== null);
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询（节流 500ms） */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', {
|
||||
title: debouncedTitle.value,
|
||||
status: filterForm.status,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置（节流 500ms） */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchTitle = '';
|
||||
filterForm.status = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
|
||||
setDataSource(MOCK_DATA);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
/** 打开新增弹窗 */
|
||||
const handleAdd = () => {
|
||||
setEditingRecord(null);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 打开编辑弹窗 */
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingRecord(record);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 关闭弹窗 */
|
||||
const handleCloseModal = () => {
|
||||
setModalVisible(false);
|
||||
setEditingRecord(null);
|
||||
};
|
||||
|
||||
/** 提交表单（新增/编辑） */
|
||||
const handleSave = useThrottleFn(async (formPayload: any) => {
|
||||
if (formSubmitting.value) return;
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
const payload = {
|
||||
...formPayload,
|
||||
displayStartTime: formPayload.displayTimeRange?.[0] || '',
|
||||
displayEndTime: formPayload.displayTimeRange?.[1] || '',
|
||||
};
|
||||
console.log(isEdit.value ? '编辑 Banner' : '新增 Banner', payload);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功');
|
||||
handleCloseModal();
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 删除（节流 500ms） */
|
||||
const handleDelete = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('删除 Banner:', record.id);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success('删除成功');
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '删除失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 启用/禁用切换（节流 500ms） */
|
||||
const handleToggleStatus = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const newStatus = record.status === 'enabled' ? 'disabled' : 'enabled';
|
||||
const actionText = newStatus === 'enabled' ? '启用' : '禁用';
|
||||
console.log(`${actionText} Banner:`, record.id);
|
||||
// TODO: 替换为真实 API 调用
|
||||
// 更新本地数据
|
||||
setDataSource(
|
||||
dataSource.value.map((item: any) =>
|
||||
item.key === record.key ? { ...item, status: newStatus } : item,
|
||||
),
|
||||
);
|
||||
message.success(`${actionText}成功`);
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// ===== 供页面 bodyCell 使用的渲染工具 =====
|
||||
const renderJumpType = (type: string) => {
|
||||
const info = JUMP_TYPE_MAP[type] || { label: type || '-', color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
};
|
||||
|
||||
const renderStatus = (status: string) => {
|
||||
const info = STATUS_MAP[status] || { label: status || '-', color: 'default' };
|
||||
const tagProps: any = { color: info.color };
|
||||
// 已禁用状态添加半透明样式
|
||||
if (status === 'disabled') {
|
||||
tagProps.style = { opacity: 0.5 };
|
||||
}
|
||||
return h(Tag, tagProps, () => info.label);
|
||||
};
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
hasFilter,
|
||||
modalVisible,
|
||||
setModalVisible,
|
||||
editingRecord,
|
||||
isEdit,
|
||||
formSubmitting,
|
||||
renderJumpType,
|
||||
renderStatus,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseModal,
|
||||
handleSave,
|
||||
handleDelete,
|
||||
handleToggleStatus,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-bottom: 12px;
|
||||
padding-left: 8px;
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.textBlock {
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
white-space: pre-wrap;
|
||||
background: #fafafa;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
// Descriptions 列宽稍微压缩一些，避免单标签被挤
|
||||
.desc :global(.ant-descriptions-item-label) {
|
||||
width: 110px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
// 组别信息下的子表格
|
||||
.group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.groupTitle {
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.paginationRow {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
// 分组信息列表
|
||||
.divisionList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.divisionItem {
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { Modal, Descriptions, Image, Table, Pagination, Space } from 'ant-design-vue';
|
||||
import styles from './EventDetailModal.module.less';
|
||||
|
||||
interface EventDetailModalProps {
|
||||
visible: boolean;
|
||||
record: any;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
// ===== Mock 数据 =====
|
||||
const MOCK_DETAIL = {
|
||||
name: '第二届全国地学羽毛球邀请赛',
|
||||
eventTime: '2026.05.26 08:00 ~ 2026.05.31 22:00',
|
||||
descr:
|
||||
'赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍。',
|
||||
registerTime: '2026.05.24 08:00 ~ 2026.05.26 22:00',
|
||||
cancelDeadline: '2026.05.25 22:00',
|
||||
region: '北京市 北京市 东城区',
|
||||
address: '李宁体育馆',
|
||||
venueNo: '李宁体育馆',
|
||||
publicEvent: '在首页展示赛事',
|
||||
needIdCard: '无需提供',
|
||||
needIdCardImage: '无需提供',
|
||||
createTime: '2026.05.26 08:00',
|
||||
creator: '张三',
|
||||
status: '报名中',
|
||||
enrolledCount: 100,
|
||||
cancelledCount: 1,
|
||||
maxCount: 1000,
|
||||
crossedCount: 50,
|
||||
completedCount: 50,
|
||||
cover: 'https://picsum.photos/seed/eventcover/600/300',
|
||||
announcement:
|
||||
'赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告赛事公告。',
|
||||
};
|
||||
|
||||
// 假组别数据
|
||||
const MOCK_GROUPS = [
|
||||
{
|
||||
key: 'group1',
|
||||
title: '组别1:男子单打（单打）',
|
||||
players: [
|
||||
{
|
||||
key: '1',
|
||||
name: '张三',
|
||||
gender: '男',
|
||||
phone: '12345678995',
|
||||
idNo: 'xxxxxxxxxxxxxxxx',
|
||||
idImg: '',
|
||||
},
|
||||
{ key: '2', name: '李四', gender: '男', phone: '', idNo: '', idImg: '' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'group2',
|
||||
title: '组别2:女子双打（双打）',
|
||||
players: [
|
||||
{
|
||||
key: '1',
|
||||
name: '张三',
|
||||
gender: '女',
|
||||
phone: '12345678995',
|
||||
idNo: 'xxxxxxxxxxxxxxxx',
|
||||
idImg: '',
|
||||
},
|
||||
{ key: '2', name: '李四', gender: '女', phone: '', idNo: '', idImg: '' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// 假分组数据
|
||||
const MOCK_DIVISIONS = ['分组1:男子小组1（循环赛）', '分组2:女子小组1（淘汰赛）'];
|
||||
|
||||
const PLAYER_COLUMNS = [
|
||||
{ title: '选手', dataIndex: 'name', key: 'name', width: 100 },
|
||||
{ title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 150 },
|
||||
{ title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
|
||||
{
|
||||
title: '证件图片',
|
||||
dataIndex: 'idImg',
|
||||
key: 'idImg',
|
||||
width: 180,
|
||||
customRender: () => (
|
||||
<Space>
|
||||
<Image width={48} height={32} src="https://picsum.photos/seed/idimg1/96/64" />
|
||||
<Image width={48} height={32} src="https://picsum.photos/seed/idimg2/96/64" />
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EventDetailModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
record: { type: Object, default: () => ({}) },
|
||||
onClose: { type: Function, required: true },
|
||||
},
|
||||
setup(props: EventDetailModalProps) {
|
||||
const detail = MOCK_DETAIL;
|
||||
|
||||
return () => (
|
||||
<Modal
|
||||
visible={props.visible}
|
||||
title="查看详情"
|
||||
width={900}
|
||||
onCancel={props.onClose}
|
||||
footer={null}
|
||||
centered
|
||||
destroyOnClose
|
||||
>
|
||||
{/* ===== 基础信息 ===== */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>基础信息</div>
|
||||
<Descriptions size="small" bordered column={3} class={styles.desc}>
|
||||
{/* 第一行：赛事名称（1 列） + 赛事时间（占 2 列） */}
|
||||
<Descriptions.Item label="赛事名称">{detail.name}</Descriptions.Item>
|
||||
<Descriptions.Item label="赛事时间" span={2}>
|
||||
{detail.eventTime}
|
||||
</Descriptions.Item>
|
||||
|
||||
{/* 第二行：赛事说明（占 3 列，独占整行） */}
|
||||
<Descriptions.Item label="赛事说明" span={3}>
|
||||
{detail.descr}
|
||||
</Descriptions.Item>
|
||||
|
||||
<Descriptions.Item label="报名起止时间">{detail.registerTime}</Descriptions.Item>
|
||||
<Descriptions.Item label="取消报名截止时间" span={2}>
|
||||
{detail.cancelDeadline}
|
||||
</Descriptions.Item>
|
||||
|
||||
<Descriptions.Item label="省市区">{detail.region}</Descriptions.Item>
|
||||
<Descriptions.Item label="地点">{detail.address}</Descriptions.Item>
|
||||
<Descriptions.Item label="场地编号">{detail.venueNo}</Descriptions.Item>
|
||||
|
||||
<Descriptions.Item label="公开活动">{detail.publicEvent}</Descriptions.Item>
|
||||
<Descriptions.Item label="证件号">{detail.needIdCard}</Descriptions.Item>
|
||||
<Descriptions.Item label="证件图片">{detail.needIdCardImage}</Descriptions.Item>
|
||||
|
||||
<Descriptions.Item label="创建时间">{detail.createTime}</Descriptions.Item>
|
||||
<Descriptions.Item label="创建人">{detail.creator}</Descriptions.Item>
|
||||
<Descriptions.Item label="状态">{detail.status}</Descriptions.Item>
|
||||
<Descriptions.Item label="报名人数">{detail.enrolledCount}</Descriptions.Item>
|
||||
<Descriptions.Item label="取消报名人数" span={1}>
|
||||
{detail.cancelledCount}
|
||||
</Descriptions.Item>
|
||||
|
||||
<Descriptions.Item label="最大人数">{detail.maxCount}</Descriptions.Item>
|
||||
<Descriptions.Item label="对岸数量">{detail.crossedCount}</Descriptions.Item>
|
||||
<Descriptions.Item label="已完成对岸数量">{detail.completedCount}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
|
||||
{/* ===== 封面 ===== */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>封面</div>
|
||||
<Image src={detail.cover} />
|
||||
</div>
|
||||
|
||||
{/* ===== 赛事公告 ===== */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>赛事公告</div>
|
||||
<div class={styles.textBlock}>{detail.announcement}</div>
|
||||
</div>
|
||||
|
||||
{/* ===== 组别信息 ===== */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>组别信息</div>
|
||||
{MOCK_GROUPS.map((group) => (
|
||||
<div key={group.key} class={styles.group}>
|
||||
<div class={styles.groupTitle}>{group.title}</div>
|
||||
<Table
|
||||
columns={PLAYER_COLUMNS}
|
||||
dataSource={group.players}
|
||||
size="small"
|
||||
pagination={false}
|
||||
bordered
|
||||
/>
|
||||
<div class={styles.paginationRow}>
|
||||
<Pagination
|
||||
current={1}
|
||||
pageSize={10}
|
||||
total={5}
|
||||
showSizeChanger={false}
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ===== 分组信息 ===== */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>分组信息</div>
|
||||
<div class={styles.divisionList}>
|
||||
{MOCK_DIVISIONS.map((d) => (
|
||||
<div key={d} class={styles.divisionItem}>
|
||||
{d}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,51 @@
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-bottom: 10px;
|
||||
padding-left: 8px;
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.textBlock {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
white-space: pre-wrap;
|
||||
background: #fafafa;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.imageGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.imageCell {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.imageCell :global(.ant-image) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { Modal, Image } from 'ant-design-vue';
|
||||
import styles from './EventRegulationModal.module.less';
|
||||
|
||||
interface EventRegulationModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
/** 规程文字 */
|
||||
const REGULATION_TEXT = [
|
||||
'一、赛事目的：推动羽毛球运动发展，提高运动员技术水平，增进体育文化交流。',
|
||||
'二、参赛资格：凡身体健康、年龄符合要求的羽毛球爱好者均可报名参加。',
|
||||
'三、比赛规则：采用中国羽毛球协会审定的最新《羽毛球竞赛规则》。',
|
||||
'四、赛制安排：比赛分小组赛和淘汰赛两个阶段，小组赛采用单循环，淘汰赛采用单败淘汰。',
|
||||
'五、器材要求：参赛运动员自备球拍，比赛用球由组委会统一提供。',
|
||||
'六、裁判设置：每场比赛设主裁判1名、副裁判2名，确保比赛公平公正。',
|
||||
].join('\n\n');
|
||||
|
||||
/** 规程图片（mock：8 张示例图，4 列 grid） */
|
||||
const REGULATION_IMAGES = Array.from({ length: 8 }, (_, i) => ({
|
||||
id: i + 1,
|
||||
src: `https://picsum.photos/seed/reg${i + 1}/300/200`,
|
||||
alt: `规程图片 ${i + 1}`,
|
||||
}));
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EventRegulationModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
onClose: { type: Function, required: true },
|
||||
},
|
||||
setup(props: EventRegulationModalProps) {
|
||||
return () => (
|
||||
<Modal
|
||||
visible={props.visible}
|
||||
title="赛事规程"
|
||||
width={760}
|
||||
onCancel={props.onClose}
|
||||
footer={null}
|
||||
centered
|
||||
destroyOnClose
|
||||
>
|
||||
{/* 规程文字 */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>规程文字</div>
|
||||
<div class={styles.textBlock}>{REGULATION_TEXT}</div>
|
||||
</div>
|
||||
|
||||
{/* 规程图片：4 列 grid，点击可浏览 */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>规程图片</div>
|
||||
<Image.PreviewGroup>
|
||||
<div class={styles.imageGrid}>
|
||||
{REGULATION_IMAGES.map((img) => (
|
||||
<div key={img.id} class={styles.imageCell}>
|
||||
<Image src={img.src} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Image.PreviewGroup>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
|
||||
* 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
|
||||
*/
|
||||
.tableBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
:global {
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container,
|
||||
.ant-table,
|
||||
.ant-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,304 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Form,
|
||||
Space,
|
||||
Select,
|
||||
DatePicker,
|
||||
Cascader,
|
||||
Tooltip,
|
||||
Pagination,
|
||||
Modal,
|
||||
} from 'ant-design-vue';
|
||||
import {
|
||||
useEventListModel,
|
||||
EVENT_STATUS_OPTIONS,
|
||||
PUBLIC_EVENT_OPTIONS,
|
||||
ID_CARD_OPTIONS,
|
||||
ID_CARD_IMAGE_OPTIONS,
|
||||
} from './model/useEventListModel';
|
||||
import { regionOptions } from '@/utils/areaData';
|
||||
import { useContainerSize, useState } from '@/hooks';
|
||||
import EventRegulationModal from './components/EventRegulationModal';
|
||||
import EventDetailModal from './components/EventDetailModal';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
/**
|
||||
* bodyCell 渲染函数
|
||||
*/
|
||||
function renderBodyCell({
|
||||
column,
|
||||
text,
|
||||
record,
|
||||
onView,
|
||||
onRemove,
|
||||
onViewRegulation,
|
||||
}: {
|
||||
column: any;
|
||||
text: any;
|
||||
record: any;
|
||||
onView: (record: any) => void;
|
||||
onRemove: (record: any) => void;
|
||||
onViewRegulation: (record: any) => void;
|
||||
}) {
|
||||
if (column.dataIndex === 'eventName') {
|
||||
const maxLen = 15;
|
||||
const raw = text || '';
|
||||
const display = raw.length > maxLen ? raw.slice(0, maxLen) + '...' : raw;
|
||||
return raw.length > maxLen ? (
|
||||
<Tooltip title={raw}>
|
||||
<span>{display}</span>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<span>{display}</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (column.key === 'regulation') {
|
||||
return (
|
||||
<a style={{ cursor: 'pointer' }} onClick={() => onViewRegulation(record)}>
|
||||
查看
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (column.key === 'action') {
|
||||
const isRemoved = record.status === 'removed';
|
||||
return (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onView(record)}>
|
||||
查看
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger={!isRemoved}
|
||||
style={isRemoved ? { color: '#52c41a' } : {}}
|
||||
onClick={() => onRemove(record)}
|
||||
>
|
||||
{isRemoved ? '上架' : '下架'}
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 赛事列表
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'EventList',
|
||||
setup() {
|
||||
const {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
} = useEventListModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
// 弹窗状态
|
||||
const [regulationModalVisible, setRegulationModalVisible] = useState<boolean>(false);
|
||||
const [detailModalVisible, setDetailModalVisible] = useState<boolean>(false);
|
||||
const [currentRecord, setCurrentRecord] = useState<any>({});
|
||||
|
||||
const handleView = (record: any) => {
|
||||
console.log('查看赛事:', record.eventId);
|
||||
setCurrentRecord(record);
|
||||
setDetailModalVisible(true);
|
||||
};
|
||||
|
||||
const handleRemove = (record: any) => {
|
||||
const isRemoved = record.status === 'removed';
|
||||
const actionText = isRemoved ? '上架' : '下架';
|
||||
Modal.confirm({
|
||||
title: `${actionText}确认`,
|
||||
content: `确认${actionText}"${record.eventName}"该赛事吗，下架后用户将无法搜索和报名该赛事，已有报名和订单不受影响。`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
console.log(`${actionText}赛事:`, record.eventId);
|
||||
// TODO: 替换为真实 API 调用
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleViewRegulation = (record: any) => {
|
||||
console.log('查看规程:', record.eventId);
|
||||
setCurrentRecord(record);
|
||||
setRegulationModalVisible(true);
|
||||
};
|
||||
|
||||
/** 最终表格列：模型列 + 赛事规程 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{ title: '赛事规程', key: 'regulation', width: 100, align: 'center' as const },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 160,
|
||||
fixed: 'right' as const,
|
||||
align: 'center' as const,
|
||||
},
|
||||
];
|
||||
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="创建时间" name="createTimeRange">
|
||||
<RangePicker
|
||||
value={filterForm.createTimeRange as any}
|
||||
style={{ width: '260px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.createTimeRange = val)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="赛事时间" name="eventTimeRange">
|
||||
<RangePicker
|
||||
value={filterForm.eventTimeRange as any}
|
||||
style={{ width: '260px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.eventTimeRange = val)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="赛事名称" name="searchName">
|
||||
<Input
|
||||
placeholder="请输入赛事名称"
|
||||
style={{ width: '180px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="创建人" name="searchCreator">
|
||||
<Input
|
||||
placeholder="请输入创建人"
|
||||
style={{ width: '150px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
<Select
|
||||
value={filterForm.status}
|
||||
options={EVENT_STATUS_OPTIONS as any}
|
||||
style={{ width: '110px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.status = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="公开活动" name="publicEvent">
|
||||
<Select
|
||||
value={filterForm.publicEvent}
|
||||
options={PUBLIC_EVENT_OPTIONS as any}
|
||||
style={{ width: '170px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.publicEvent = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="证件号" name="needIdCard">
|
||||
<Select
|
||||
value={filterForm.needIdCard}
|
||||
options={ID_CARD_OPTIONS as any}
|
||||
style={{ width: '120px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.needIdCard = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="证件图片" name="needIdCardImage">
|
||||
<Select
|
||||
value={filterForm.needIdCardImage}
|
||||
options={ID_CARD_IMAGE_OPTIONS as any}
|
||||
style={{ width: '120px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.needIdCardImage = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="省市区" name="region">
|
||||
<Cascader
|
||||
value={filterForm.region as any}
|
||||
options={regionOptions}
|
||||
style={{ width: '220px' }}
|
||||
placeholder="请选择省市区"
|
||||
allowClear
|
||||
changeOnSelect
|
||||
onUpdate:value={(val: any) => (filterForm.region = val || [])}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch} loading={loading.value}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
<div ref={containerRef} class={styles.tableBody}>
|
||||
<Table
|
||||
columns={tableColumns}
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
scroll={{ x: 'max-content', y: height.value }}
|
||||
pagination={false}
|
||||
>
|
||||
{{
|
||||
bodyCell: (args: any) =>
|
||||
renderBodyCell({
|
||||
...args,
|
||||
onView: handleView,
|
||||
onRemove: handleRemove,
|
||||
onViewRegulation: handleViewRegulation,
|
||||
}),
|
||||
}}
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div class="page-pagination">
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={pagination.value.total}
|
||||
showSizeChanger
|
||||
showTotal={(total: number) => `共 ${total} 条`}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ===== 弹窗区 ===== */}
|
||||
{regulationModalVisible.value && (
|
||||
<EventRegulationModal
|
||||
visible={regulationModalVisible.value}
|
||||
onClose={() => setRegulationModalVisible(false)}
|
||||
/>
|
||||
)}
|
||||
{detailModalVisible.value && (
|
||||
<EventDetailModal
|
||||
visible={detailModalVisible.value}
|
||||
record={currentRecord.value}
|
||||
onClose={() => setDetailModalVisible(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,255 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message, Tag } from 'ant-design-vue';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** 赛事状态选项 */
|
||||
export const EVENT_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'enrolling', label: '报名中' },
|
||||
{ value: 'ongoing', label: '进行中' },
|
||||
{ value: 'finished', label: '已结束' },
|
||||
{ value: 'deleted', label: '已删除' },
|
||||
{ value: 'removed', label: '已下架' },
|
||||
] as const;
|
||||
|
||||
/** 公开活动选项 */
|
||||
export const PUBLIC_EVENT_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'show', label: '在首页展示赛事' },
|
||||
{ value: 'hide', label: '不在首页展示赛事' },
|
||||
] as const;
|
||||
|
||||
/** 证件号选项 */
|
||||
export const ID_CARD_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'no', label: '无需提供' },
|
||||
{ value: 'yes', label: '需提供' },
|
||||
] as const;
|
||||
|
||||
/** 证件图片选项 */
|
||||
export const ID_CARD_IMAGE_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'no', label: '无需提供' },
|
||||
{ value: 'yes', label: '需提供' },
|
||||
] as const;
|
||||
|
||||
// ============================================================
|
||||
// 假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
|
||||
key: `${i + 1}`,
|
||||
eventId: `EV2026070100${String(i + 1).padStart(2, '0')}`,
|
||||
eventName:
|
||||
i % 3 === 0
|
||||
? '2026全国青少年羽毛球锦标赛暨体育文化交流大会'
|
||||
: i % 3 === 1
|
||||
? '国际马拉松城市联赛'
|
||||
: '全民健身运动会',
|
||||
eventTimeStart: '2026-08-12 09:00',
|
||||
eventTimeEnd: '2026-08-15 18:00',
|
||||
province: '广东省',
|
||||
city: '深圳市',
|
||||
district: '南山区',
|
||||
address: '深圳湾体育中心',
|
||||
needIdCard: i % 2 === 0 ? '是' : '否',
|
||||
needIdCardImage: i % 2 === 0 ? '是' : '否',
|
||||
creatorNickname: ['张运营', '李管理', '王策划', '赵赛事'][i % 4],
|
||||
creatorPhone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
|
||||
createTime: '2026-07-01 14:30:00',
|
||||
status: (['enrolling', 'ongoing', 'finished', 'deleted', 'removed'] as const)[i % 5],
|
||||
enrolledCount: [128, 256, 512, 64, 0][i % 5],
|
||||
cancelledCount: [5, 12, 8, 3, 0][i % 5],
|
||||
}));
|
||||
|
||||
/** 状态标签映射 */
|
||||
const STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
enrolling: { label: '报名中', color: 'blue' },
|
||||
ongoing: { label: '进行中', color: 'green' },
|
||||
finished: { label: '已结束', color: 'default' },
|
||||
deleted: { label: '已删除', color: 'red' },
|
||||
removed: { label: '已下架', color: 'orange' },
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 赛事列表页数据模型
|
||||
*/
|
||||
export function useEventListModel() {
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
createTimeRange: null as [string, string] | null,
|
||||
eventTimeRange: null as [string, string] | null,
|
||||
searchName: '',
|
||||
searchCreator: '',
|
||||
status: '',
|
||||
region: [] as string[],
|
||||
publicEvent: '',
|
||||
needIdCard: '',
|
||||
needIdCardImage: '',
|
||||
});
|
||||
|
||||
// 可搜索字段防抖
|
||||
const { debouncedValue: debouncedName } = useDebounce(
|
||||
toRef(filterForm, 'searchName') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
const { debouncedValue: debouncedCreator } = useDebounce(
|
||||
toRef(filterForm, 'searchCreator') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: MOCK_DATA.length,
|
||||
});
|
||||
|
||||
// ===== 表格列配置 =====
|
||||
const columns = [
|
||||
{ title: '赛事ID', dataIndex: 'eventId', key: 'eventId', width: 180 },
|
||||
{
|
||||
title: '赛事名称',
|
||||
dataIndex: 'eventName',
|
||||
key: 'eventName',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '赛事时间',
|
||||
key: 'eventTime',
|
||||
width: 260,
|
||||
customRender: ({ record }: { record: any }) =>
|
||||
`${record.eventTimeStart} 至 ${record.eventTimeEnd}`,
|
||||
},
|
||||
{
|
||||
title: '省市区',
|
||||
key: 'region',
|
||||
width: 200,
|
||||
customRender: ({ record }: { record: any }) =>
|
||||
`${record.province} ${record.city} ${record.district}`,
|
||||
},
|
||||
{ title: '地点', dataIndex: 'address', key: 'address', width: 180 },
|
||||
{
|
||||
title: '是否提供证件号',
|
||||
dataIndex: 'needIdCard',
|
||||
key: 'needIdCard',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '是否提供证件图片',
|
||||
dataIndex: 'needIdCardImage',
|
||||
key: 'needIdCardImage',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '创建人昵称',
|
||||
dataIndex: 'creatorNickname',
|
||||
key: 'creatorNickname',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '创建人手机号',
|
||||
dataIndex: 'creatorPhone',
|
||||
key: 'creatorPhone',
|
||||
width: 130,
|
||||
},
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 170 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 90,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const info = STATUS_MAP[text] || { label: text, color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
},
|
||||
},
|
||||
{ title: '报名人数', dataIndex: 'enrolledCount', key: 'enrolledCount', width: 90 },
|
||||
{ title: '取消报名人数', dataIndex: 'cancelledCount', key: 'cancelledCount', width: 140 },
|
||||
];
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return (
|
||||
filterForm.createTimeRange !== null ||
|
||||
filterForm.eventTimeRange !== null ||
|
||||
debouncedName.value.trim() !== '' ||
|
||||
debouncedCreator.value.trim() !== '' ||
|
||||
filterForm.status !== '' ||
|
||||
filterForm.region.length > 0 ||
|
||||
filterForm.publicEvent !== '' ||
|
||||
filterForm.needIdCard !== '' ||
|
||||
filterForm.needIdCardImage !== ''
|
||||
);
|
||||
});
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询 */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', {
|
||||
createTimeRange: filterForm.createTimeRange,
|
||||
eventTimeRange: filterForm.eventTimeRange,
|
||||
name: debouncedName.value,
|
||||
creator: debouncedCreator.value,
|
||||
status: filterForm.status,
|
||||
region: filterForm.region,
|
||||
publicEvent: filterForm.publicEvent,
|
||||
needIdCard: filterForm.needIdCard,
|
||||
needIdCardImage: filterForm.needIdCardImage,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置 */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.createTimeRange = null;
|
||||
filterForm.eventTimeRange = null;
|
||||
filterForm.searchName = '';
|
||||
filterForm.searchCreator = '';
|
||||
filterForm.status = '';
|
||||
filterForm.region = [];
|
||||
filterForm.publicEvent = '';
|
||||
filterForm.needIdCard = '';
|
||||
filterForm.needIdCardImage = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
|
||||
setDataSource(MOCK_DATA);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
hasFilter,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
// ===== 自定义标题栏 =====
|
||||
.modalHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0 16px;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.modalTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.closeBtn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 内容区 =====
|
||||
.modalBody {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// ===== 订单信息 grid =====
|
||||
.infoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
row-gap: 12px;
|
||||
column-gap: 24px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.infoItem {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.infoLabel {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// ===== 通用 section =====
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-bottom: 12px;
|
||||
padding-left: 8px;
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
// ===== 退款记录 =====
|
||||
.refundHeader {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.refundSummary {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/** 固定高度 + 滚动 */
|
||||
.refundList {
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
|
||||
// 自定义滚动条样式
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.refundCard {
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 12px;
|
||||
background: #fafafa;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.refundCard:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.refundCardHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px dashed #e0e0e0;
|
||||
}
|
||||
|
||||
.refundIndex {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.refundCardBody {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px 24px;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.refundCol {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.refundAmount {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.partialMark {
|
||||
margin-left: 4px;
|
||||
color: #fa8c16;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.refundEmpty {
|
||||
padding: 32px 0;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
border: 1px dashed #e0e0e0;
|
||||
}
|
||||
|
||||
// 分页：右下角
|
||||
.refundPagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
// ===== 底部按钮区 =====
|
||||
.modalFooter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding-top: 16px;
|
||||
margin-top: 8px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
// ===== Modal 外层包裹：去除 antd 默认内边距，让自定义标题贴合 =====
|
||||
.orderModalWrap {
|
||||
:global(.ant-modal-body) {
|
||||
padding-top: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
import { Modal, Table, Button, Tag, Pagination, Image, Space } from 'ant-design-vue';
|
||||
import styles from './OrderDetailModal.module.less';
|
||||
|
||||
interface OrderDetailModalProps {
|
||||
visible: boolean;
|
||||
record: any;
|
||||
onClose: () => void;
|
||||
/** 触发"重新退款"二次确认对话框 */
|
||||
onReRefund: (record: any) => void;
|
||||
}
|
||||
|
||||
const PLAYER_COLUMNS = [
|
||||
{ title: '真实姓名', dataIndex: 'name', key: 'name', width: 100, align: 'center' as const },
|
||||
{ title: '性别', dataIndex: 'gender', key: 'gender', width: 80, align: 'center' as const },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
|
||||
{ title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
|
||||
{
|
||||
title: '证件图片',
|
||||
dataIndex: 'idImg',
|
||||
key: 'idImg',
|
||||
width: 170,
|
||||
customRender: ({ text }: { text: string[] }) => (
|
||||
<Space>
|
||||
{(text || []).map((src) => (
|
||||
<Image key={src} width={60} height={40} src={src} />
|
||||
))}
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '比赛组别',
|
||||
dataIndex: 'groupName',
|
||||
key: 'groupName',
|
||||
width: 110,
|
||||
align: 'center' as const,
|
||||
},
|
||||
{
|
||||
title: '订单金额',
|
||||
dataIndex: 'orderAmount',
|
||||
key: 'orderAmount',
|
||||
width: 100,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '优惠金额',
|
||||
dataIndex: 'discountAmount',
|
||||
key: 'discountAmount',
|
||||
width: 100,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '实付金额',
|
||||
dataIndex: 'paidAmount',
|
||||
key: 'paidAmount',
|
||||
width: 100,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '退款金额',
|
||||
dataIndex: 'refundAmount',
|
||||
key: 'refundAmount',
|
||||
width: 100,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => (text ? text.toFixed(2) : '-'),
|
||||
},
|
||||
];
|
||||
|
||||
const REFUND_STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
success: { label: '退款成功', color: 'green' },
|
||||
failed: { label: '退款失败', color: 'red' },
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'OrderDetailModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
record: { type: Object, default: () => ({}) },
|
||||
onClose: { type: Function, required: true },
|
||||
onReRefund: { type: Function, required: true },
|
||||
},
|
||||
setup(props: OrderDetailModalProps) {
|
||||
const refundPage = ref<number>(1);
|
||||
const refundPageSize = ref<number>(2);
|
||||
|
||||
/** 退款记录 */
|
||||
const refundRecords = computed<any[]>(() => props.record?.refundRecords || []);
|
||||
const hasRefund = computed(() => refundRecords.value.length > 0);
|
||||
|
||||
/** 当前页展示的退款记录 */
|
||||
const pagedRefunds = computed(() => {
|
||||
const start = (refundPage.value - 1) * refundPageSize.value;
|
||||
return refundRecords.value.slice(start, start + refundPageSize.value);
|
||||
});
|
||||
|
||||
/** 已退金额合计 */
|
||||
const totalRefunded = computed(() =>
|
||||
refundRecords.value
|
||||
.filter((r) => r.status === 'success')
|
||||
.reduce((sum, r) => sum + (r.amount || 0), 0),
|
||||
);
|
||||
|
||||
const handleRefundPageChange = (page: number, pageSize: number) => {
|
||||
refundPage.value = page;
|
||||
refundPageSize.value = pageSize;
|
||||
};
|
||||
|
||||
const handleConfirm = () => {
|
||||
// 无退款信息时：仅关闭弹窗
|
||||
props.onClose();
|
||||
};
|
||||
|
||||
const handleReRefund = () => {
|
||||
props.onReRefund(props.record);
|
||||
};
|
||||
|
||||
return () => (
|
||||
<Modal
|
||||
visible={props.visible}
|
||||
onCancel={props.onClose}
|
||||
footer={null}
|
||||
width={1000}
|
||||
centered
|
||||
destroyOnClose
|
||||
closable={false}
|
||||
wrapClassName={styles.orderModalWrap}
|
||||
>
|
||||
{/* ===== 自定义标题栏 ===== */}
|
||||
<div class={styles.modalHeader}>
|
||||
<span class={styles.modalTitle}>订单信息</span>
|
||||
<button class={styles.closeBtn} onClick={props.onClose} aria-label="关闭">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class={styles.modalBody}>
|
||||
{/* ===== 订单信息 ===== */}
|
||||
<div class={styles.infoGrid}>
|
||||
<div class={styles.infoItem}>
|
||||
<span class={styles.infoLabel}>赛事名称：</span>
|
||||
<span>{props.record?.eventName}</span>
|
||||
</div>
|
||||
<div class={styles.infoItem}>
|
||||
<span class={styles.infoLabel}>订单编号：</span>
|
||||
<span>{props.record?.orderId}</span>
|
||||
</div>
|
||||
<div class={styles.infoItem}>
|
||||
<span class={styles.infoLabel}>订单时间：</span>
|
||||
<span>{props.record?.orderTime}</span>
|
||||
</div>
|
||||
<div class={styles.infoItem}>
|
||||
<span class={styles.infoLabel}>支付时间：</span>
|
||||
<span>{props.record?.payTime}</span>
|
||||
</div>
|
||||
<div class={styles.infoItem}>
|
||||
<span class={styles.infoLabel}>订单金额：</span>
|
||||
<span>{props.record?.totalAmount?.toFixed(2)}元</span>
|
||||
</div>
|
||||
<div class={styles.infoItem}>
|
||||
<span class={styles.infoLabel}>优惠金额：</span>
|
||||
<span>{(props.record?.discountAmount || 0).toFixed(2)}元</span>
|
||||
</div>
|
||||
<div class={styles.infoItem}>
|
||||
<span class={styles.infoLabel}>实付金额：</span>
|
||||
<span>{props.record?.paidAmount?.toFixed(2)}元</span>
|
||||
</div>
|
||||
<div class={styles.infoItem}>
|
||||
<span class={styles.infoLabel}>退款金额：</span>
|
||||
<span>{props.record?.refundAmount?.toFixed(2)}元</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ===== 选手信息 ===== */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>选手信息</div>
|
||||
<Table
|
||||
columns={PLAYER_COLUMNS}
|
||||
dataSource={props.record?.players || []}
|
||||
size="small"
|
||||
bordered
|
||||
pagination={false}
|
||||
scroll={{ x: 'max-content' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ===== 退款记录 ===== */}
|
||||
<div class={styles.section}>
|
||||
<div class={styles.refundHeader}>
|
||||
<span class={styles.sectionTitle}>退款记录</span>
|
||||
</div>
|
||||
{hasRefund.value ? (
|
||||
<>
|
||||
<div class={styles.refundSummary}>
|
||||
<span>已退金额：{totalRefunded.value.toFixed(2)}元</span>
|
||||
<span>退款次数：{refundRecords.value.length}次</span>
|
||||
</div>
|
||||
{/* 固定高度 + 内部滚动 */}
|
||||
<div class={styles.refundList}>
|
||||
{pagedRefunds.value.map((r, idx) => {
|
||||
const statusInfo = REFUND_STATUS_MAP[r.status] || {
|
||||
label: '-',
|
||||
color: 'default',
|
||||
};
|
||||
const realIdx = (refundPage.value - 1) * refundPageSize.value + idx + 1;
|
||||
return (
|
||||
<div key={r.key} class={styles.refundCard}>
|
||||
<div class={styles.refundCardHeader}>
|
||||
<span class={styles.refundIndex}>第{realIdx}次退款</span>
|
||||
<Tag color={statusInfo.color}>{statusInfo.label}</Tag>
|
||||
</div>
|
||||
<div class={styles.refundCardBody}>
|
||||
<div class={styles.refundCol}>
|
||||
<div>
|
||||
退款金额：
|
||||
<span class={styles.refundAmount}>
|
||||
¥{r.amount.toFixed(2)}
|
||||
{r.isPartial && (
|
||||
<span class={styles.partialMark}>（部分退款）</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div>申请时间：{r.applyTime}</div>
|
||||
<div>完款时间：{r.completeTime || '-'}</div>
|
||||
</div>
|
||||
<div class={styles.refundCol}>
|
||||
<div>退款方式：{r.method}</div>
|
||||
<div>第三方退款单号：{r.thirdPartyNo || '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div class={styles.refundPagination}>
|
||||
<Pagination
|
||||
current={refundPage.value}
|
||||
pageSize={refundPageSize.value}
|
||||
total={refundRecords.value.length}
|
||||
showSizeChanger={false}
|
||||
size="small"
|
||||
onChange={handleRefundPageChange}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div class={styles.refundEmpty}>暂无退款记录</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ===== 底部按钮 ===== */}
|
||||
<div class={styles.modalFooter}>
|
||||
<Button onClick={props.onClose}>取消</Button>
|
||||
{hasRefund.value ? (
|
||||
<Button danger onClick={handleReRefund}>
|
||||
重新退款
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="primary" onClick={handleConfirm}>
|
||||
确认
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
|
||||
* 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
|
||||
*/
|
||||
.tableBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
:global {
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container,
|
||||
.ant-table,
|
||||
.ant-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summaryBar {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
|
||||
.summaryItem {
|
||||
font-weight: 500;
|
||||
|
||||
.summaryLabel {
|
||||
color: #666;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Form,
|
||||
Space,
|
||||
Select,
|
||||
DatePicker,
|
||||
Tooltip,
|
||||
Pagination,
|
||||
Modal,
|
||||
} from 'ant-design-vue';
|
||||
import { useOrderModel, ORDER_STATUS_OPTIONS, REFUND_STATUS_OPTIONS } from './model/useOrderModel';
|
||||
import { useContainerSize, useState } from '@/hooks';
|
||||
import OrderDetailModal from './components/OrderDetailModal';
|
||||
import styles from './index.module.less';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
/**
|
||||
* 触发「重新退款」二次确认对话框
|
||||
* 表格中的重新退款按钮和详情弹窗中的重新退款按钮均调用此函数。
|
||||
*/
|
||||
function promptReRefund(record: any) {
|
||||
Modal.confirm({
|
||||
title: '确认要重新退款吗？',
|
||||
content: (
|
||||
<div>
|
||||
<div>退款金额：￥{(record.refundAmount || 0).toFixed(2)}</div>
|
||||
<div>退款方式：原路退回（微信支付）</div>
|
||||
</div>
|
||||
),
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
console.log('重新退款:', record.orderId);
|
||||
// TODO: 替换为真实 API 调用
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* bodyCell 渲染函数
|
||||
*/
|
||||
function renderBodyCell({
|
||||
column,
|
||||
text,
|
||||
record,
|
||||
onView,
|
||||
onReRefund,
|
||||
}: {
|
||||
column: any;
|
||||
text: any;
|
||||
record: any;
|
||||
onView: (record: any) => void;
|
||||
onReRefund: (record: any) => void;
|
||||
}) {
|
||||
// 赛事名称：最多15字符，超出显示 Tooltip
|
||||
if (column.dataIndex === 'eventName') {
|
||||
const maxLen = 15;
|
||||
const raw = text || '';
|
||||
const display = raw.length > maxLen ? raw.slice(0, maxLen) + '...' : raw;
|
||||
return raw.length > maxLen ? (
|
||||
<Tooltip title={raw}>
|
||||
<span>{display}</span>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<span>{display}</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (column.key === 'action') {
|
||||
const showReRefund = record.refundStatus === 'refund_failed';
|
||||
return (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onView(record)}>
|
||||
查看
|
||||
</Button>
|
||||
{showReRefund && (
|
||||
<Button type="link" size="small" onClick={() => onReRefund(record)}>
|
||||
重新退款
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单管理
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'EventOrders',
|
||||
setup() {
|
||||
const {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
summary,
|
||||
pagination,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
} = useOrderModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
// 详情弹窗状态
|
||||
const [detailVisible, setDetailVisible] = useState<boolean>(false);
|
||||
const [currentRecord, setCurrentRecord] = useState<any>({});
|
||||
|
||||
const handleView = (record: any) => {
|
||||
setCurrentRecord(record);
|
||||
setDetailVisible(true);
|
||||
};
|
||||
|
||||
const handleReRefund = (record: any) => {
|
||||
promptReRefund(record);
|
||||
};
|
||||
|
||||
/** 最终表格列：模型列 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 160,
|
||||
fixed: 'right' as const,
|
||||
align: 'center' as const,
|
||||
},
|
||||
];
|
||||
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="订单时间" name="orderTimeRange">
|
||||
<RangePicker
|
||||
value={filterForm.orderTimeRange as any}
|
||||
style={{ width: '260px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.orderTimeRange = val)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="订单编号" name="searchOrderId">
|
||||
<Input
|
||||
placeholder="请输入订单编号"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="赛事名称" name="searchEventName">
|
||||
<Input
|
||||
placeholder="请输入赛事名称"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="选手名称" name="searchPlayerName">
|
||||
<Input
|
||||
placeholder="请输入选手名称"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="订单状态" name="orderStatus">
|
||||
<Select
|
||||
value={filterForm.orderStatus}
|
||||
options={ORDER_STATUS_OPTIONS as any}
|
||||
style={{ width: '120px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.orderStatus = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="退款状态" name="refundStatus">
|
||||
<Select
|
||||
value={filterForm.refundStatus}
|
||||
options={REFUND_STATUS_OPTIONS as any}
|
||||
style={{ width: '120px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.refundStatus = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch} loading={loading.value}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
{/* 金额汇总 */}
|
||||
<div class={styles.summaryBar}>
|
||||
<span class={styles.summaryItem}>
|
||||
<span class={styles.summaryLabel}>总订单金额（已支付）：</span>
|
||||
{summary.value.totalOrderAmount.toFixed(2)}元
|
||||
</span>
|
||||
<span class={styles.summaryItem}>
|
||||
<span class={styles.summaryLabel}>总实付金额：</span>
|
||||
{summary.value.totalPaidAmount.toFixed(2)}元
|
||||
</span>
|
||||
<span class={styles.summaryItem}>
|
||||
<span class={styles.summaryLabel}>总退款金额：</span>
|
||||
{summary.value.totalRefundAmount.toFixed(2)}元
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div ref={containerRef} class={styles.tableBody}>
|
||||
<Table
|
||||
columns={tableColumns}
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
scroll={{ x: 'max-content', y: height.value }}
|
||||
pagination={false}
|
||||
>
|
||||
{{
|
||||
bodyCell: (args: any) =>
|
||||
renderBodyCell({
|
||||
...args,
|
||||
onView: handleView,
|
||||
onReRefund: handleReRefund,
|
||||
}),
|
||||
}}
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div class="page-pagination">
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={pagination.value.total}
|
||||
showSizeChanger
|
||||
showTotal={(total: number) => `共 ${total} 条`}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ===== 详情弹窗 ===== */}
|
||||
{detailVisible.value && (
|
||||
<OrderDetailModal
|
||||
visible={detailVisible.value}
|
||||
record={currentRecord.value}
|
||||
onClose={() => setDetailVisible(false)}
|
||||
onReRefund={(record) => {
|
||||
// 关闭详情弹窗，再弹出二次确认
|
||||
setDetailVisible(false);
|
||||
promptReRefund(record);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,343 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message, Tag } from 'ant-design-vue';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** 订单状态选项 */
|
||||
export const ORDER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'paid', label: '已支付' },
|
||||
{ value: 'partial_refund', label: '部分退款' },
|
||||
{ value: 'full_refund', label: '全部退款' },
|
||||
{ value: 'closed', label: '已关闭' },
|
||||
] as const;
|
||||
|
||||
/** 退款状态选项 */
|
||||
export const REFUND_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'refund_success', label: '退款成功' },
|
||||
{ value: 'refund_failed', label: '退款失败' },
|
||||
] as const;
|
||||
|
||||
/** 订单状态 Tag 映射 */
|
||||
const ORDER_STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
paid: { label: '已支付', color: 'green' },
|
||||
partial_refund: { label: '部分退款', color: 'orange' },
|
||||
full_refund: { label: '全部退款', color: 'blue' },
|
||||
closed: { label: '已关闭', color: 'default' },
|
||||
};
|
||||
|
||||
/** 退款状态 Tag 映射 */
|
||||
const REFUND_STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
refund_success: { label: '退款成功', color: 'green' },
|
||||
refund_failed: { label: '退款失败', color: 'red' },
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => {
|
||||
const orderStatus = (['paid', 'paid', 'partial_refund', 'full_refund', 'closed'] as const)[i % 5];
|
||||
const refundStatus: string =
|
||||
orderStatus === 'partial_refund' || orderStatus === 'full_refund'
|
||||
? (['refund_success', 'refund_success', 'refund_failed'] as const)[i % 3]
|
||||
: '';
|
||||
|
||||
const totalAmount = [188.0, 256.5, 399.0, 128.0, 520.0][i % 5];
|
||||
const discountAmount = i % 3 === 0 ? 20.0 : i % 3 === 1 ? 10.0 : 0;
|
||||
const refundAmount =
|
||||
orderStatus === 'partial_refund'
|
||||
? 50.0
|
||||
: orderStatus === 'full_refund'
|
||||
? totalAmount - discountAmount
|
||||
: 0;
|
||||
|
||||
// ===== 选手信息（详情弹窗用） =====
|
||||
const playerNames = ['张三', '李四', '王五'];
|
||||
const players = playerNames.slice(0, (i % 3) + 1).map((name, idx) => ({
|
||||
key: `${i + 1}-${idx}`,
|
||||
name,
|
||||
gender: idx === 1 ? '女' : '男',
|
||||
phone: '12345678956',
|
||||
idNo: 'xxxxxxxxxxxxxxxx',
|
||||
idImg: [
|
||||
'https://picsum.photos/seed/idimg-a/120/80',
|
||||
'https://picsum.photos/seed/idimg-b/120/80',
|
||||
],
|
||||
groupName: ['男子单打', '女子双打', '混合双打'][idx],
|
||||
orderAmount: [100.0, 50.0, 38.0][idx],
|
||||
discountAmount: 0,
|
||||
paidAmount: [100.0, 50.0, 38.0][idx],
|
||||
refundAmount: idx === 1 && orderStatus === 'full_refund' ? 50.0 : 0,
|
||||
}));
|
||||
|
||||
// ===== 退款记录（详情弹窗用） =====
|
||||
const refundRecords: any[] = [];
|
||||
if (orderStatus === 'partial_refund' || orderStatus === 'full_refund') {
|
||||
if (i % 4 === 2) {
|
||||
refundRecords.push(
|
||||
{
|
||||
key: `${i + 1}-r1`,
|
||||
amount: 50.0,
|
||||
isPartial: true,
|
||||
applyTime: '2026-06-07 16:20',
|
||||
completeTime: '2026-06-07 16:25',
|
||||
method: '原路退回（微信支付）',
|
||||
thirdPartyNo: '5030000789202606071625102846',
|
||||
status: 'success',
|
||||
},
|
||||
{
|
||||
key: `${i + 1}-r2`,
|
||||
amount: 49.0,
|
||||
isPartial: false,
|
||||
applyTime: '2026-06-08 10:00',
|
||||
completeTime: '',
|
||||
method: '原路退回（微信支付）',
|
||||
thirdPartyNo: '',
|
||||
status: 'failed',
|
||||
},
|
||||
);
|
||||
} else if (i % 4 === 0) {
|
||||
refundRecords.push({
|
||||
key: `${i + 1}-r1`,
|
||||
amount: 30.0,
|
||||
isPartial: true,
|
||||
applyTime: '2026-06-05 09:30',
|
||||
completeTime: '2026-06-05 09:35',
|
||||
method: '原路退回（微信支付）',
|
||||
thirdPartyNo: '5030000789202606050935000123',
|
||||
status: 'success',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
key: `${i + 1}`,
|
||||
orderId: `ORD202607${String(i + 1).padStart(5, '0')}`,
|
||||
eventName:
|
||||
i % 3 === 0
|
||||
? '2026全国青少年羽毛球锦标赛暨体育文化交流大会'
|
||||
: i % 3 === 1
|
||||
? '国际马拉松城市联赛'
|
||||
: '全民健身运动会',
|
||||
playerName: ['张选手', '李选手', '王选手', '赵选手'][i % 4],
|
||||
phone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
|
||||
groupName: ['男子青年组', '女子青年组', '男子中年组', '女子中年组'][i % 4],
|
||||
registrant: ['张报名', '李报名', '王报名', '赵报名'][i % 4],
|
||||
registrantPhone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
|
||||
registrantCount: [1, 2, 1, 3][i % 4],
|
||||
orderTime: '2026-07-15 10:30:00',
|
||||
payTime: '2026-07-15 10:32:15',
|
||||
totalAmount,
|
||||
discountAmount,
|
||||
paidAmount: totalAmount - discountAmount,
|
||||
refundAmount,
|
||||
orderStatus,
|
||||
refundStatus,
|
||||
players,
|
||||
refundRecords,
|
||||
};
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// 金额汇总假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_SUMMARY = {
|
||||
totalOrderAmount: 113255.0,
|
||||
totalPaidAmount: 113255.0,
|
||||
totalRefundAmount: 1255.0,
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 订单列表页数据模型
|
||||
*/
|
||||
export function useOrderModel() {
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
orderTimeRange: null as [string, string] | null,
|
||||
searchOrderId: '',
|
||||
searchEventName: '',
|
||||
searchPlayerName: '',
|
||||
orderStatus: '',
|
||||
refundStatus: '',
|
||||
});
|
||||
|
||||
// 可搜索字段防抖
|
||||
const { debouncedValue: debouncedOrderId } = useDebounce(
|
||||
toRef(filterForm, 'searchOrderId') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
const { debouncedValue: debouncedEventName } = useDebounce(
|
||||
toRef(filterForm, 'searchEventName') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
const { debouncedValue: debouncedPlayerName } = useDebounce(
|
||||
toRef(filterForm, 'searchPlayerName') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: MOCK_DATA.length,
|
||||
});
|
||||
|
||||
// ===== 金额汇总 =====
|
||||
const [summary, setSummary] = useState(MOCK_SUMMARY);
|
||||
|
||||
// ===== 表格列配置 =====
|
||||
const columns = [
|
||||
{ title: '订单编号', dataIndex: 'orderId', key: 'orderId', width: 200 },
|
||||
{ title: '赛事名称', dataIndex: 'eventName', key: 'eventName', width: 180 },
|
||||
{ title: '选手名称', dataIndex: 'playerName', key: 'playerName', width: 100 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
|
||||
{ title: '比赛组别', dataIndex: 'groupName', key: 'groupName', width: 120 },
|
||||
{ title: '报名人', dataIndex: 'registrant', key: 'registrant', width: 100 },
|
||||
{ title: '报名人手机号', dataIndex: 'registrantPhone', key: 'registrantPhone', width: 130 },
|
||||
{
|
||||
title: '报名人数',
|
||||
dataIndex: 'registrantCount',
|
||||
key: 'registrantCount',
|
||||
width: 90,
|
||||
align: 'center' as const,
|
||||
},
|
||||
{ title: '订单时间', dataIndex: 'orderTime', key: 'orderTime', width: 170 },
|
||||
{ title: '支付时间', dataIndex: 'payTime', key: 'payTime', width: 170 },
|
||||
{
|
||||
title: '订单总金额',
|
||||
dataIndex: 'totalAmount',
|
||||
key: 'totalAmount',
|
||||
width: 120,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
|
||||
},
|
||||
{
|
||||
title: '总优惠金额',
|
||||
dataIndex: 'discountAmount',
|
||||
key: 'discountAmount',
|
||||
width: 120,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
|
||||
},
|
||||
{
|
||||
title: '实付总金额',
|
||||
dataIndex: 'paidAmount',
|
||||
key: 'paidAmount',
|
||||
width: 120,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
|
||||
},
|
||||
{
|
||||
title: '退款总金额',
|
||||
dataIndex: 'refundAmount',
|
||||
key: 'refundAmount',
|
||||
width: 120,
|
||||
align: 'right' as const,
|
||||
customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}元`,
|
||||
},
|
||||
{
|
||||
title: '订单状态',
|
||||
dataIndex: 'orderStatus',
|
||||
key: 'orderStatus',
|
||||
width: 100,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const info = ORDER_STATUS_MAP[text] || { label: text || '-', color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '退款状态',
|
||||
dataIndex: 'refundStatus',
|
||||
key: 'refundStatus',
|
||||
width: 100,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
if (!text) return h('span', '-');
|
||||
const info = REFUND_STATUS_MAP[text] || { label: text, color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return (
|
||||
filterForm.orderTimeRange !== null ||
|
||||
debouncedOrderId.value.trim() !== '' ||
|
||||
debouncedEventName.value.trim() !== '' ||
|
||||
debouncedPlayerName.value.trim() !== '' ||
|
||||
filterForm.orderStatus !== '' ||
|
||||
filterForm.refundStatus !== ''
|
||||
);
|
||||
});
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询 */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', {
|
||||
orderTimeRange: filterForm.orderTimeRange,
|
||||
orderId: debouncedOrderId.value,
|
||||
eventName: debouncedEventName.value,
|
||||
playerName: debouncedPlayerName.value,
|
||||
orderStatus: filterForm.orderStatus,
|
||||
refundStatus: filterForm.refundStatus,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: MOCK_DATA.length });
|
||||
setSummary(MOCK_SUMMARY);
|
||||
message.success('查询成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置 */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.orderTimeRange = null;
|
||||
filterForm.searchOrderId = '';
|
||||
filterForm.searchEventName = '';
|
||||
filterForm.searchPlayerName = '';
|
||||
filterForm.orderStatus = '';
|
||||
filterForm.refundStatus = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
|
||||
setDataSource(MOCK_DATA);
|
||||
setSummary(MOCK_SUMMARY);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
summary,
|
||||
pagination,
|
||||
hasFilter,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
|
||||
* 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
|
||||
*/
|
||||
.tableBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
:global {
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container,
|
||||
.ant-table,
|
||||
.ant-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Table,
|
||||
Form,
|
||||
Space,
|
||||
Select,
|
||||
Image,
|
||||
Pagination,
|
||||
Modal,
|
||||
} from 'ant-design-vue';
|
||||
import { useUserModel, USER_STATUS_OPTIONS } from './model/useUserModel';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import styles from './index.module.less';
|
||||
|
||||
/**
|
||||
* bodyCell 渲染函数
|
||||
*/
|
||||
function renderBodyCell({
|
||||
column,
|
||||
text,
|
||||
record,
|
||||
onToggleStatus,
|
||||
}: {
|
||||
column: any;
|
||||
text: any;
|
||||
record: any;
|
||||
onToggleStatus: (record: any) => void;
|
||||
}) {
|
||||
// 证件图片：有则显示，无则不显示
|
||||
if (column.dataIndex === 'idImg') {
|
||||
const images = record.idImg || [];
|
||||
if (images.length === 0) {
|
||||
return '-';
|
||||
}
|
||||
return (
|
||||
<Space>
|
||||
{images.map((src: string) => (
|
||||
<Image key={src} width={48} height={32} src={src} />
|
||||
))}
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
if (column.key === 'action') {
|
||||
const isActive = record.status === 'active';
|
||||
return (
|
||||
<Button type="link" size="small" danger={isActive} onClick={() => onToggleStatus(record)}>
|
||||
{isActive ? '禁用' : '启用'}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户列表
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'EventUsers',
|
||||
setup() {
|
||||
const {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
} = useUserModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
const handleToggleStatus = (record: any) => {
|
||||
const isActive = record.status === 'active';
|
||||
const actionText = isActive ? '禁用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `${actionText}确认`,
|
||||
content: `确认${actionText}用户"${record.nickName}"吗？`,
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
console.log(`${actionText}用户:`, record.userId);
|
||||
// TODO: 替换为真实 API 调用
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/** 最终表格列：模型列 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
fixed: 'right' as const,
|
||||
align: 'center' as const,
|
||||
},
|
||||
];
|
||||
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="用户昵称" name="searchUserName">
|
||||
<Input
|
||||
placeholder="请输入用户昵称"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="手机号" name="searchPhone">
|
||||
<Input
|
||||
placeholder="请输入手机号"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
<Select
|
||||
value={filterForm.status}
|
||||
options={USER_STATUS_OPTIONS as any}
|
||||
style={{ width: '110px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.status = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch} loading={loading.value}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
<div ref={containerRef} class={styles.tableBody}>
|
||||
<Table
|
||||
columns={tableColumns}
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
scroll={{ x: 'max-content', y: height.value }}
|
||||
pagination={false}
|
||||
>
|
||||
{{
|
||||
bodyCell: (args: any) =>
|
||||
renderBodyCell({
|
||||
...args,
|
||||
onToggleStatus: handleToggleStatus,
|
||||
}),
|
||||
}}
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 独立分页，右下方 */}
|
||||
<div class="page-pagination">
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={pagination.value.total}
|
||||
showSizeChanger
|
||||
showTotal={(total: number) => `共 ${total} 条`}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,160 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message, Tag } from 'ant-design-vue';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** 用户状态选项 */
|
||||
export const USER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'active', label: '正常' },
|
||||
{ value: 'disabled', label: '禁用' },
|
||||
] as const;
|
||||
|
||||
/** 用户状态 Tag 映射 */
|
||||
const USER_STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
active: { label: '正常', color: 'green' },
|
||||
disabled: { label: '禁用', color: 'red' },
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
|
||||
key: `${i + 1}`,
|
||||
userId: `U202607${String(i + 1).padStart(5, '0')}`,
|
||||
nickName: ['羽毛球小将', '马拉松达人', '健身爱好者', '游泳健将'][i % 4],
|
||||
phone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
|
||||
realName: ['张三', '李四', '王五', '赵六'][i % 4],
|
||||
gender: i % 2 === 0 ? '男' : '女',
|
||||
idNo: '320101199001011234',
|
||||
// 证图片来源：奇数索引有，偶数无
|
||||
idImg:
|
||||
i % 2 === 1
|
||||
? ['https://picsum.photos/seed/idcard-a/120/80', 'https://picsum.photos/seed/idcard-b/120/80']
|
||||
: [],
|
||||
status: (i % 4 === 3 ? 'disabled' : 'active') as string,
|
||||
loginTime: '2026-07-20 14:30:00',
|
||||
}));
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 用户列表页数据模型
|
||||
*/
|
||||
export function useUserModel() {
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
searchUserName: '',
|
||||
searchPhone: '',
|
||||
status: '',
|
||||
});
|
||||
|
||||
// 各字段防抖 300ms
|
||||
const { debouncedValue: debouncedUserName } = useDebounce(
|
||||
toRef(filterForm, 'searchUserName') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
const { debouncedValue: debouncedPhone } = useDebounce(
|
||||
toRef(filterForm, 'searchPhone') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: MOCK_DATA.length,
|
||||
});
|
||||
|
||||
// ===== 表格列配置 =====
|
||||
const columns = [
|
||||
{ title: '用户昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
|
||||
{ title: '真实姓名', dataIndex: 'realName', key: 'realName', width: 100 },
|
||||
{ title: '性别', dataIndex: 'gender', key: 'gender', width: 80 },
|
||||
{ title: '证件号', dataIndex: 'idNo', key: 'idNo', width: 180 },
|
||||
{
|
||||
title: '证件图片',
|
||||
dataIndex: 'idImg',
|
||||
key: 'idImg',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 90,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const info = USER_STATUS_MAP[text] || { label: text, color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
},
|
||||
},
|
||||
{ title: '登录时间', dataIndex: 'loginTime', key: 'loginTime', width: 170 },
|
||||
];
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return (
|
||||
debouncedUserName.value.trim() !== '' ||
|
||||
debouncedPhone.value.trim() !== '' ||
|
||||
filterForm.status !== ''
|
||||
);
|
||||
});
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询（节流 500ms） */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', {
|
||||
userName: debouncedUserName.value,
|
||||
phone: debouncedPhone.value,
|
||||
status: filterForm.status,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置（节流 500ms） */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchUserName = '';
|
||||
filterForm.searchPhone = '';
|
||||
filterForm.status = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
|
||||
setDataSource(MOCK_DATA);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
hasFilter,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
/**
|
||||
* 支付流水
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'FinancePayments',
|
||||
setup() {
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>支付流水 - 开发中</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
/**
|
||||
* 账务报表
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'FinanceReports',
|
||||
setup() {
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>账务报表 - 开发中</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
/**
|
||||
* 用户钱包
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'FinanceWallet',
|
||||
setup() {
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>用户钱包 - 开发中</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
/**
|
||||
* 提现申请
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'FinanceWithdraw',
|
||||
setup() {
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>提现申请 - 开发中</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -3,6 +3,7 @@ import { Button, Checkbox, Form, FormItem, Input, message } from 'ant-design-vue
|
||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
|
||||
import { auth } from '@/hooks/useAuth';
|
||||
import { useEffect } from '@/hooks/useEffect';
|
||||
import { useUserStore } from '@/stores/userStore';
|
||||
import styles from './index.module.less';
|
||||
|
||||
interface LoginForm {
|
||||
@@ -50,7 +51,13 @@ export default defineComponent({
|
||||
|
||||
try {
|
||||
await new Promise((r) => setTimeout(r, 600));
|
||||
await auth.login('mock_token_' + Date.now());
|
||||
const token = 'mock_token_' + Date.now();
|
||||
|
||||
// 写入账号信息到 userStore
|
||||
const { setUser } = useUserStore();
|
||||
setUser({ phone: form.username, nickname: form.username, token });
|
||||
|
||||
await auth.login(token);
|
||||
message.success('登录成功');
|
||||
|
||||
if (rememberMe.value) {
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
.form {
|
||||
:global {
|
||||
.ant-form-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.treeWrapper {
|
||||
max-height: 380px;
|
||||
overflow: auto;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
:global {
|
||||
.ant-modal-body {
|
||||
padding: 16px 24px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
import { defineComponent, ref, reactive } from 'vue';
|
||||
import { useEffect } from '@/hooks';
|
||||
import { Modal, Form, Input, Tree, Button } from 'ant-design-vue';
|
||||
import type { TreeProps } from 'ant-design-vue';
|
||||
import { roleNameRules, PERMISSION_TREE } from '../controller';
|
||||
import styles from './RoleFormModal.module.less';
|
||||
|
||||
interface RoleFormModalProps {
|
||||
visible: boolean;
|
||||
record: any;
|
||||
submitting?: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (formData: any) => void;
|
||||
}
|
||||
|
||||
/** 默认表单数据 */
|
||||
const getDefaultForm = () => ({
|
||||
roleName: '',
|
||||
checkedKeys: [] as string[],
|
||||
});
|
||||
|
||||
/** 编辑模式默认勾选：所有权限（演示用） */
|
||||
const ALL_KEYS = (() => {
|
||||
const keys: string[] = [];
|
||||
const walk = (nodes: any[]) => {
|
||||
for (const n of nodes) {
|
||||
keys.push(n.key);
|
||||
if (n.children?.length) walk(n.children);
|
||||
}
|
||||
};
|
||||
walk(PERMISSION_TREE);
|
||||
return keys;
|
||||
})();
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RoleFormModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
record: { type: Object, default: null },
|
||||
submitting: { type: Boolean, default: false },
|
||||
onClose: { type: Function, required: true },
|
||||
onSave: { type: Function, required: true },
|
||||
},
|
||||
setup(props: RoleFormModalProps) {
|
||||
const formRef = ref<any>();
|
||||
const formData = reactive(getDefaultForm());
|
||||
|
||||
/** 根据 record 初始化表单 */
|
||||
const initFormFromRecord = (record: any) => {
|
||||
const fresh = getDefaultForm();
|
||||
if (!record) {
|
||||
Object.assign(formData, fresh);
|
||||
return;
|
||||
}
|
||||
Object.assign(formData, {
|
||||
...fresh,
|
||||
roleName: record.roleName || '',
|
||||
// 编辑时默认全选（演示用，后续应按 record.permissions 回填）
|
||||
checkedKeys: [...ALL_KEYS],
|
||||
});
|
||||
};
|
||||
|
||||
/** 监听 visible 重置 */
|
||||
useEffect(() => {
|
||||
if (props.visible) {
|
||||
initFormFromRecord(props.record);
|
||||
setTimeout(() => formRef.value?.clearValidate(), 0);
|
||||
}
|
||||
}, [() => props.visible]);
|
||||
|
||||
/** Tree 勾选回调（受控） */
|
||||
const handleCheck: TreeProps['onCheck'] = (checked) => {
|
||||
// checked 可能是 { checked: string[], halfChecked: string[] } 或 string[]
|
||||
const keys = Array.isArray(checked) ? checked : (checked as any).checked;
|
||||
formData.checkedKeys = keys as string[];
|
||||
};
|
||||
|
||||
/** 提交 */
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
props.onSave({
|
||||
roleName: formData.roleName,
|
||||
permissions: formData.checkedKeys,
|
||||
});
|
||||
};
|
||||
|
||||
return () => {
|
||||
const isEdit = !!props.record;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={isEdit ? '编辑角色' : '新增角色'}
|
||||
visible={props.visible}
|
||||
onCancel={props.onClose}
|
||||
width={520}
|
||||
destroyOnClose
|
||||
footer={null}
|
||||
centered
|
||||
class={styles.modal}
|
||||
>
|
||||
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
|
||||
{/* 角色名称 */}
|
||||
<Form.Item label="角色名称" name="roleName" rules={roleNameRules}>
|
||||
<Input
|
||||
placeholder="请输入"
|
||||
maxlength={20}
|
||||
allowClear
|
||||
v-model:value={formData.roleName}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{/* 菜单权限配置 */}
|
||||
<Form.Item label="菜单权限配置" name="permissions">
|
||||
<div class={styles.treeWrapper}>
|
||||
<Tree
|
||||
checkable
|
||||
defaultExpandAll
|
||||
treeData={PERMISSION_TREE as any}
|
||||
checkedKeys={formData.checkedKeys}
|
||||
onCheck={handleCheck as any}
|
||||
/>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{/* 底部按钮 */}
|
||||
<div class={styles.footer}>
|
||||
<Button onClick={props.onClose}>取消</Button>
|
||||
<Button type="primary" loading={props.submitting} onClick={handleSubmit}>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
.filter {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.total {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.paginationRow {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { defineComponent, ref, reactive, computed } from 'vue';
|
||||
import { Modal, Form, Input, Table, Button, Space, Pagination } from 'ant-design-vue';
|
||||
import { useEffect, useState } from '@/hooks';
|
||||
import styles from './UserListModal.module.less';
|
||||
|
||||
interface UserListModalProps {
|
||||
visible: boolean;
|
||||
role: any;
|
||||
users: any[];
|
||||
renderStatus: (status: string) => any;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RoleUserListModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
role: { type: Object, default: null },
|
||||
users: { type: Array, default: () => [] },
|
||||
renderStatus: { type: Function, required: true },
|
||||
onClose: { type: Function, required: true },
|
||||
},
|
||||
setup(props: UserListModalProps) {
|
||||
const filterForm = reactive({ searchKeyword: '' });
|
||||
|
||||
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
|
||||
|
||||
/** 过滤后的用户列表 */
|
||||
const filteredUsers = computed(() => {
|
||||
const kw = filterForm.searchKeyword.trim();
|
||||
if (!kw) return props.users;
|
||||
return props.users.filter(
|
||||
(u: any) => u.realName.includes(kw) || (u.phone && u.phone.includes(kw)),
|
||||
);
|
||||
});
|
||||
|
||||
/** 监听 visible/users 变化重置分页 */
|
||||
useEffect(() => {
|
||||
setPagination({ current: 1, pageSize: 10, total: filteredUsers.value.length });
|
||||
}, [() => props.visible, () => props.users.length]);
|
||||
|
||||
const handleSearch = () => {
|
||||
setPagination({ ...pagination.value, total: filteredUsers.value.length, current: 1 });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
filterForm.searchKeyword = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: props.users.length });
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
};
|
||||
|
||||
return () => {
|
||||
const roleName = props.role?.roleName || '';
|
||||
|
||||
const columns = [
|
||||
{ title: '姓名', dataIndex: 'realName', key: 'realName', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 160 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 200 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => props.renderStatus(text),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={`${roleName} · 用户列表`}
|
||||
visible={props.visible}
|
||||
onCancel={props.onClose}
|
||||
width={640}
|
||||
footer={null}
|
||||
centered
|
||||
destroyOnClose
|
||||
>
|
||||
{/* 筛选 */}
|
||||
<div class={styles.filter}>
|
||||
<Form layout="inline" model={filterForm}>
|
||||
<Form.Item label="姓名/手机号" name="searchKeyword">
|
||||
<Input
|
||||
placeholder="姓名/手机号..."
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* 表格 */}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={filteredUsers.value}
|
||||
size="small"
|
||||
pagination={false}
|
||||
bordered
|
||||
rowKey="key"
|
||||
/>
|
||||
|
||||
{/* 底部：共 X 人 + 关闭按钮 */}
|
||||
<div class={styles.bottom}>
|
||||
<div class={styles.total}>共 {filteredUsers.value.length} 人</div>
|
||||
<Button onClick={props.onClose}>关闭</Button>
|
||||
</div>
|
||||
|
||||
{/* 分页（右侧） */}
|
||||
{filteredUsers.value.length > pagination.value.pageSize && (
|
||||
<div class={styles.paginationRow}>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={filteredUsers.value.length}
|
||||
size="small"
|
||||
onChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* 角色权限 - 表单域控制器
|
||||
*
|
||||
* 集中管理角色表单的规则、菜单权限树 mock 数据与提示文案。
|
||||
*/
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
|
||||
// ============================================================
|
||||
// 规则
|
||||
// ============================================================
|
||||
|
||||
/** 角色名称规则：必填 + 长度限制 */
|
||||
export const roleNameRules: Rule[] = [
|
||||
{ required: true, message: '请输入角色名称' },
|
||||
{ max: 20, message: '角色名称最多 20 个字符' },
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// 菜单权限树（mock）
|
||||
// ============================================================
|
||||
|
||||
export interface MenuPermNode {
|
||||
/** 唯一 key，作为 Tree 节点的 key */
|
||||
key: string;
|
||||
/** 显示标题 */
|
||||
title: string;
|
||||
/** 子节点 */
|
||||
children?: MenuPermNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 完整菜单权限树。
|
||||
* 后续可改为从后端接口拉取（接口应返回该结构）。
|
||||
*/
|
||||
export const PERMISSION_TREE: MenuPermNode[] = [
|
||||
{
|
||||
key: 'events',
|
||||
title: '赛事管理',
|
||||
children: [
|
||||
{
|
||||
key: 'events.list',
|
||||
title: '赛事列表',
|
||||
children: [
|
||||
{ key: 'events.list.view', title: '赛事列表-查看' },
|
||||
{ key: 'events.list.on', title: '赛事列表-上架' },
|
||||
{ key: 'events.list.off', title: '赛事列表-下架' },
|
||||
{ key: 'events.rules.view', title: '赛事规程-查看' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'orders',
|
||||
title: '订单管理',
|
||||
children: [
|
||||
{ key: 'orders.view', title: '订单管理-查看' },
|
||||
{ key: 'orders.refund', title: '订单管理-重新退款' },
|
||||
],
|
||||
},
|
||||
{ key: 'users', title: '用户列表' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'events_logs',
|
||||
title: '赛事操作日志',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 表格 body 容器：占满 flex 剩余空间
|
||||
*/
|
||||
.tableBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
:global {
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container,
|
||||
.ant-table,
|
||||
.ant-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户数链接 */
|
||||
.userCountLink {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ===== 删除确认弹窗 ===== */
|
||||
.confirmContent {
|
||||
padding: 4px 24px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
|
||||
strong {
|
||||
margin: 0 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.confirmTip {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
:global(.deleteConfirmModal) {
|
||||
.ant-modal-confirm-body {
|
||||
padding: 24px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { Button, Input, Table, Form, Space, Select, Modal, Pagination } from 'ant-design-vue';
|
||||
import type { ModalProps } from 'ant-design-vue';
|
||||
import { useRoleModel } from './model/useRoleModel';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import RoleFormModal from './components/RoleFormModal';
|
||||
import UserListModal from './components/UserListModal';
|
||||
import styles from './index.module.less';
|
||||
|
||||
/**
|
||||
* bodyCell 渲染
|
||||
*/
|
||||
function renderBodyCell({
|
||||
column,
|
||||
record,
|
||||
onViewUsers,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: {
|
||||
column: any;
|
||||
text: any;
|
||||
record: any;
|
||||
onViewUsers: (record: any) => void;
|
||||
onEdit: (record: any) => void;
|
||||
onDelete: (record: any) => void;
|
||||
}) {
|
||||
if (column.dataIndex === 'userCount') {
|
||||
return (
|
||||
<a class={styles.userCountLink} onClick={() => onViewUsers(record)}>
|
||||
{record.userCount}人
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (column.key === 'action') {
|
||||
return (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button type="link" size="small" danger onClick={() => onDelete(record)}>
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除角色二次确认
|
||||
*/
|
||||
function confirmDelete({ record, onOk }: { record: any; onOk: (record: any) => void }) {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
icon: null,
|
||||
class: styles.deleteConfirmModal,
|
||||
content: (
|
||||
<div class={styles.confirmContent}>
|
||||
<div>
|
||||
<span>确定要删除角色</span>
|
||||
<strong>{record.roleName}</strong>
|
||||
<span>吗？</span>
|
||||
</div>
|
||||
<div class={styles.confirmTip}>删除后该角色下的用户将失去对应的权限，请谨慎操作。</div>
|
||||
</div>
|
||||
),
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okButtonProps: { danger: true } as ModalProps['okButtonProps'],
|
||||
onOk: () => onOk(record),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 角色权限
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'SystemRoles',
|
||||
setup() {
|
||||
const {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
formVisible,
|
||||
editingRecord,
|
||||
formSubmitting,
|
||||
userListVisible,
|
||||
currentRole,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseForm,
|
||||
handleSave,
|
||||
handleDelete,
|
||||
handleViewUsers,
|
||||
handleCloseUserList,
|
||||
getRoleUsers,
|
||||
renderStatus,
|
||||
} = useRoleModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
const triggerDelete = (record: any) => confirmDelete({ record, onOk: handleDelete });
|
||||
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 140,
|
||||
fixed: 'right' as const,
|
||||
align: 'center' as const,
|
||||
},
|
||||
];
|
||||
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="角色" name="searchKeyword">
|
||||
<Input
|
||||
placeholder="请输入"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
<Button type="primary" onClick={handleSearch} loading={loading.value}>
|
||||
查询
|
||||
</Button>
|
||||
<Button type="primary" onClick={handleAdd}>
|
||||
新增角色
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
<div ref={containerRef} class={styles.tableBody}>
|
||||
<Table
|
||||
columns={tableColumns}
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
scroll={{ x: 'max-content', y: height.value }}
|
||||
pagination={false}
|
||||
>
|
||||
{{
|
||||
bodyCell: (args: any) =>
|
||||
renderBodyCell({
|
||||
...args,
|
||||
onViewUsers: handleViewUsers,
|
||||
onEdit: handleEdit,
|
||||
onDelete: triggerDelete,
|
||||
}),
|
||||
}}
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
<div class="page-pagination">
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={pagination.value.total}
|
||||
showSizeChanger
|
||||
showTotal={(total: number) => `共 ${total} 条`}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ===== 角色表单弹窗 ===== */}
|
||||
{formVisible.value && (
|
||||
<RoleFormModal
|
||||
visible={formVisible.value}
|
||||
record={editingRecord.value}
|
||||
submitting={formSubmitting.value}
|
||||
onClose={handleCloseForm}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ===== 角色用户列表弹窗 ===== */}
|
||||
{userListVisible.value && (
|
||||
<UserListModal
|
||||
visible={userListVisible.value}
|
||||
role={currentRole.value}
|
||||
users={getRoleUsers(currentRole.value?.roleId || '')}
|
||||
renderStatus={renderStatus}
|
||||
onClose={handleCloseUserList}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,323 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message, Tag } from 'ant-design-vue';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
|
||||
// ============================================================
|
||||
// 假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = [
|
||||
{
|
||||
key: '1',
|
||||
roleId: 'R20250601001',
|
||||
roleName: '超级管理员',
|
||||
userCount: 1,
|
||||
createTime: '2025-06-01 09:00:00',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
roleId: 'R20250815001',
|
||||
roleName: '运营管理员',
|
||||
userCount: 3,
|
||||
createTime: '2025-08-15 14:30:00',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
roleId: 'R20251010001',
|
||||
roleName: '财务',
|
||||
userCount: 2,
|
||||
createTime: '2025-10-10 10:15:00',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
roleId: 'R20260120001',
|
||||
roleName: '客服',
|
||||
userCount: 4,
|
||||
createTime: '2026-01-20 16:00:00',
|
||||
},
|
||||
];
|
||||
|
||||
/** 角色下用户列表 mock */
|
||||
const MOCK_USERS: Record<string, any[]> = {
|
||||
R20250601001: [
|
||||
{
|
||||
key: '1',
|
||||
userId: 'U001',
|
||||
realName: '张超管',
|
||||
phone: '13900000001',
|
||||
createTime: '2025-06-01 09:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
],
|
||||
R20250815001: [
|
||||
{
|
||||
key: '1',
|
||||
userId: 'U002',
|
||||
realName: '李运营',
|
||||
phone: '15900000002',
|
||||
createTime: '2026-01-10 16:00:00',
|
||||
status: 'disabled',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
userId: 'U003',
|
||||
realName: '王运营',
|
||||
phone: '15900000001',
|
||||
createTime: '2025-10-20 10:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
userId: 'U004',
|
||||
realName: '张运营',
|
||||
phone: '13900000002',
|
||||
createTime: '2025-08-15 14:30:00',
|
||||
status: 'active',
|
||||
},
|
||||
],
|
||||
R20251010001: [
|
||||
{
|
||||
key: '1',
|
||||
userId: 'U005',
|
||||
realName: '赵财务',
|
||||
phone: '13800000005',
|
||||
createTime: '2025-10-10 10:15:00',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
userId: 'U006',
|
||||
realName: '钱财务',
|
||||
phone: '13800000006',
|
||||
createTime: '2025-10-12 11:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
],
|
||||
R20260120001: [
|
||||
{
|
||||
key: '1',
|
||||
userId: 'U007',
|
||||
realName: '孙客服',
|
||||
phone: '13700000007',
|
||||
createTime: '2026-01-20 16:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
userId: 'U008',
|
||||
realName: '周客服',
|
||||
phone: '13700000008',
|
||||
createTime: '2026-01-21 09:30:00',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
userId: 'U009',
|
||||
realName: '吴客服',
|
||||
phone: '13700000009',
|
||||
createTime: '2026-01-22 10:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
userId: 'U010',
|
||||
realName: '郑客服',
|
||||
phone: '13700000010',
|
||||
createTime: '2026-01-23 14:00:00',
|
||||
status: 'active',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 状态文本/颜色映射
|
||||
// ============================================================
|
||||
const STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
active: { label: '正常', color: 'green' },
|
||||
disabled: { label: '禁用', color: 'red' },
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 角色权限页数据模型
|
||||
*/
|
||||
export function useRoleModel() {
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
searchKeyword: '',
|
||||
});
|
||||
|
||||
// 防抖 300ms
|
||||
const { debouncedValue: debouncedKeyword } = useDebounce(
|
||||
toRef(filterForm, 'searchKeyword') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: MOCK_DATA.length,
|
||||
});
|
||||
|
||||
// ===== 弹窗状态 =====
|
||||
const [formVisible, setFormVisible] = useState<boolean>(false);
|
||||
const [editingRecord, setEditingRecord] = useState<any>(null);
|
||||
const [userListVisible, setUserListVisible] = useState<boolean>(false);
|
||||
const [currentRole, setCurrentRole] = useState<any>(null);
|
||||
|
||||
// ===== 提交态 =====
|
||||
const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
|
||||
|
||||
// ===== 表格列配置 =====
|
||||
const columns = [
|
||||
{ title: '角色名称', dataIndex: 'roleName', key: 'roleName', width: 200 },
|
||||
{
|
||||
title: '用户数',
|
||||
dataIndex: 'userCount',
|
||||
key: 'userCount',
|
||||
width: 120,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: number }) => `${text}人`,
|
||||
},
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 200 },
|
||||
];
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => debouncedKeyword.value.trim() !== '');
|
||||
|
||||
const isEdit = computed(() => editingRecord.value !== null);
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询 */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', { keyword: debouncedKeyword.value });
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置 */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchKeyword = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
|
||||
setDataSource(MOCK_DATA);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
/** 新增 */
|
||||
const handleAdd = () => {
|
||||
setEditingRecord(null);
|
||||
setFormVisible(true);
|
||||
};
|
||||
|
||||
/** 编辑 */
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingRecord(record);
|
||||
setFormVisible(true);
|
||||
};
|
||||
|
||||
/** 关闭表单弹窗 */
|
||||
const handleCloseForm = () => {
|
||||
setFormVisible(false);
|
||||
setEditingRecord(null);
|
||||
};
|
||||
|
||||
/** 提交（新增/编辑） */
|
||||
const handleSave = useThrottleFn(async (formPayload: any) => {
|
||||
if (formSubmitting.value) return;
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
console.log(isEdit.value ? '编辑角色' : '新增角色', formPayload);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功');
|
||||
handleCloseForm();
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 删除 */
|
||||
const handleDelete = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('删除角色:', record.roleId);
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(dataSource.value.filter((item: any) => item.key !== record.key));
|
||||
message.success('删除成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '删除失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 打开用户列表弹窗 */
|
||||
const handleViewUsers = (record: any) => {
|
||||
setCurrentRole(record);
|
||||
setUserListVisible(true);
|
||||
};
|
||||
|
||||
/** 关闭用户列表弹窗 */
|
||||
const handleCloseUserList = () => {
|
||||
setUserListVisible(false);
|
||||
setCurrentRole(null);
|
||||
};
|
||||
|
||||
/** 根据 roleId 获取该角色下的用户列表 */
|
||||
const getRoleUsers = (roleId: string) => MOCK_USERS[roleId] || [];
|
||||
|
||||
/** 状态 Tag 渲染 */
|
||||
const renderStatus = (status: string) => {
|
||||
const info = STATUS_MAP[status] || { label: status || '-', color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
};
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
hasFilter,
|
||||
formVisible,
|
||||
editingRecord,
|
||||
isEdit,
|
||||
formSubmitting,
|
||||
userListVisible,
|
||||
currentRole,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseForm,
|
||||
handleSave,
|
||||
handleDelete,
|
||||
handleViewUsers,
|
||||
handleCloseUserList,
|
||||
getRoleUsers,
|
||||
renderStatus,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/* ===== 表单行/列布局 ===== */
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 让 antd Form.Item 在 col 里能正确控制宽度 */
|
||||
.form {
|
||||
:global {
|
||||
.ant-form-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 密码区重置链接 ===== */
|
||||
.resetLink {
|
||||
font-size: 14px;
|
||||
color: #1677ff;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
color: #4096ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 取消重置行 ===== */
|
||||
.cancelRow {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: -8px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ===== 底部按钮 ===== */
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
import { defineComponent, ref, reactive } from 'vue';
|
||||
import { useEffect } from '@/hooks';
|
||||
import { Modal, Form, Input, Select, Button } from 'ant-design-vue';
|
||||
import {
|
||||
ROLE_FORM_OPTIONS,
|
||||
PASSWORD_PLACEHOLDER,
|
||||
realNameRules,
|
||||
phoneRules,
|
||||
passwordRules,
|
||||
confirmPasswordRules,
|
||||
roleRules,
|
||||
} from '../controller';
|
||||
import styles from './UserFormModal.module.less';
|
||||
|
||||
interface UserFormModalProps {
|
||||
visible: boolean;
|
||||
record: any;
|
||||
submitting?: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (formData: any) => void;
|
||||
}
|
||||
|
||||
/** 默认表单数据 */
|
||||
const getDefaultForm = () => ({
|
||||
realName: '',
|
||||
phone: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
role: '',
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserFormModal',
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
record: { type: Object, default: null },
|
||||
submitting: { type: Boolean, default: false },
|
||||
onClose: { type: Function, required: true },
|
||||
onSave: { type: Function, required: true },
|
||||
},
|
||||
setup(props: UserFormModalProps) {
|
||||
const formRef = ref<any>();
|
||||
const formData = reactive(getDefaultForm());
|
||||
|
||||
/** 编辑模式下是否处于"重置密码"状态 */
|
||||
const isResetting = ref(false);
|
||||
|
||||
/** 根据 record 初始化表单 */
|
||||
const initFormFromRecord = (record: any) => {
|
||||
const fresh = getDefaultForm();
|
||||
if (!record) {
|
||||
Object.assign(formData, fresh);
|
||||
isResetting.value = false;
|
||||
return;
|
||||
}
|
||||
Object.assign(formData, {
|
||||
...fresh,
|
||||
realName: record.realName || '',
|
||||
phone: record.phone || '',
|
||||
role: record.role || '',
|
||||
});
|
||||
isResetting.value = false;
|
||||
};
|
||||
|
||||
/** 监听 visible 变化重置表单 */
|
||||
useEffect(() => {
|
||||
if (props.visible) {
|
||||
initFormFromRecord(props.record);
|
||||
isResetting.value = false;
|
||||
setTimeout(() => formRef.value?.clearValidate(), 0);
|
||||
}
|
||||
}, [() => props.visible]);
|
||||
|
||||
/** 点击"重置密码" */
|
||||
const handleResetPassword = () => {
|
||||
isResetting.value = true;
|
||||
formData.password = '';
|
||||
formData.confirmPassword = '';
|
||||
};
|
||||
|
||||
/** 提交 */
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value?.validate();
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
// 编辑模式下，未触发重置密码时，不提交密码字段
|
||||
const payload: any = {
|
||||
realName: formData.realName,
|
||||
phone: formData.phone,
|
||||
role: formData.role,
|
||||
};
|
||||
if (props.record) {
|
||||
if (isResetting.value) {
|
||||
payload.password = formData.password;
|
||||
}
|
||||
} else {
|
||||
// 新增：密码必传
|
||||
payload.password = formData.password;
|
||||
}
|
||||
|
||||
props.onSave(payload);
|
||||
};
|
||||
|
||||
/** 关闭 */
|
||||
const handleClose = () => {
|
||||
props.onClose();
|
||||
};
|
||||
|
||||
return () => {
|
||||
const isEdit = !!props.record;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={isEdit ? '编辑用户' : '新增用户'}
|
||||
visible={props.visible}
|
||||
onCancel={handleClose}
|
||||
width={580}
|
||||
destroyOnClose
|
||||
footer={null}
|
||||
centered
|
||||
>
|
||||
<Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
|
||||
{/* 姓名 / 手机号：同一行 */}
|
||||
<div class={styles.row}>
|
||||
<Form.Item label="姓名" name="realName" rules={realNameRules} class={styles.col}>
|
||||
<Input
|
||||
placeholder="真实姓名"
|
||||
maxlength={8}
|
||||
allowClear
|
||||
v-model:value={formData.realName}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="手机号" name="phone" rules={phoneRules} class={styles.col}>
|
||||
<Input
|
||||
placeholder="11位手机号"
|
||||
maxlength={11}
|
||||
allowClear
|
||||
v-model:value={formData.phone}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
{/* ====== 密码区 + 角色 ====== */}
|
||||
{isEdit && !isResetting.value ? (
|
||||
/* 编辑模式未重置：密码占位 + 角色 同一行 */
|
||||
<div class={styles.row}>
|
||||
<Form.Item label="密码" class={styles.col}>
|
||||
<Input
|
||||
value={PASSWORD_PLACEHOLDER}
|
||||
readonly
|
||||
suffix={
|
||||
<a class={styles.resetLink} onClick={handleResetPassword}>
|
||||
重置密码
|
||||
</a>
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="角色" name="role" rules={roleRules} class={styles.col}>
|
||||
<Select
|
||||
options={ROLE_FORM_OPTIONS as any}
|
||||
placeholder="请选择角色"
|
||||
v-model:value={formData.role}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 新密码 / 确认密码：同一行 */}
|
||||
<div class={styles.row}>
|
||||
<Form.Item
|
||||
label={isEdit ? '新密码' : '初始密码'}
|
||||
name="password"
|
||||
rules={passwordRules}
|
||||
class={styles.col}
|
||||
>
|
||||
<Input.Password
|
||||
placeholder={isEdit ? '请输入新密码' : '至少8位，含字母+数字'}
|
||||
allowClear
|
||||
v-model:value={formData.password}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="确认密码"
|
||||
name="confirmPassword"
|
||||
class={styles.col}
|
||||
rules={confirmPasswordRules(() => formData.password)}
|
||||
>
|
||||
<Input.Password
|
||||
placeholder="再次输入密码"
|
||||
allowClear
|
||||
v-model:value={formData.confirmPassword}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
{/* 角色：单独一行 */}
|
||||
<Form.Item label="角色" name="role" rules={roleRules}>
|
||||
<Select
|
||||
options={ROLE_FORM_OPTIONS as any}
|
||||
placeholder="请选择角色"
|
||||
v-model:value={formData.role}
|
||||
style={{ width: '200px' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form>
|
||||
|
||||
{/* 底部按钮 */}
|
||||
<div class={styles.footer}>
|
||||
<Button onClick={handleClose}>取消</Button>
|
||||
<Button type="primary" loading={props.submitting} onClick={handleSubmit}>
|
||||
确认保存
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* 用户管理 - 表单域控制器
|
||||
*
|
||||
* 集中管理用户新增/编辑弹窗的所有规则校验、下拉选项与常量。
|
||||
* 各规则数组可直接传给 antd Form.Item 的 rules prop。
|
||||
*/
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import { isChinaPhone, isValidPassword, isValidRealName } from '@/utils/form';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** 密码占位符（写死长度，避免暴露真实密码长度） */
|
||||
export const PASSWORD_PLACEHOLDER = '********';
|
||||
|
||||
/** 角色下拉选项（表单使用） */
|
||||
export const ROLE_FORM_OPTIONS = [
|
||||
{ value: 'admin', label: '超级管理员' },
|
||||
{ value: 'operator', label: '运营人员' },
|
||||
{ value: 'auditor', label: '审核人员' },
|
||||
] as const;
|
||||
|
||||
// ============================================================
|
||||
// 真实姓名规则
|
||||
// ============================================================
|
||||
|
||||
export const realNameRules: Rule[] = [
|
||||
{ required: true, message: '请输入姓名' },
|
||||
{ max: 8, message: '姓名最多 8 个字符' },
|
||||
{
|
||||
validator: (_rule: unknown, value: string) => {
|
||||
if (!value) return Promise.resolve();
|
||||
if (!isValidRealName(value)) {
|
||||
return Promise.reject(new Error('姓名仅支持中英文或数字，1-8 个字符'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// 手机号规则
|
||||
// ============================================================
|
||||
|
||||
export const phoneRules: Rule[] = [
|
||||
{ required: true, message: '请输入手机号' },
|
||||
{
|
||||
validator: (_rule: unknown, value: string) => {
|
||||
if (!value) return Promise.resolve();
|
||||
if (!isChinaPhone(value)) {
|
||||
return Promise.reject(new Error('请输入正确的11位中国大陆手机号'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// 密码规则
|
||||
// ============================================================
|
||||
|
||||
export const passwordRules: Rule[] = [
|
||||
{ required: true, message: '请输入密码' },
|
||||
{
|
||||
validator: (_rule: unknown, value: string) => {
|
||||
if (!value) return Promise.resolve();
|
||||
if (!isValidPassword(value)) {
|
||||
return Promise.reject(new Error('密码至少8位，需包含字母与数字'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/** 确认密码规则：必须与 password 字段一致 */
|
||||
export function confirmPasswordRules(getPassword: () => string): Rule[] {
|
||||
return [
|
||||
{ required: true, message: '请再次输入密码' },
|
||||
{
|
||||
validator: (_rule: unknown, value: string) => {
|
||||
if (!value) return Promise.resolve();
|
||||
if (value !== getPassword()) {
|
||||
return Promise.reject(new Error('两次输入的密码不一致'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 角色规则
|
||||
// ============================================================
|
||||
|
||||
export const roleRules: Rule[] = [{ required: true, message: '请选择角色' }];
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* 表格 body 容器：占满 flex 剩余空间，
|
||||
* 确保 antd 嵌套 div 逐层传递 height: 100%，
|
||||
* 使得 Table scroll.y 能正确解析。
|
||||
*/
|
||||
.tableBody {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
:global {
|
||||
.ant-spin-nested-loading,
|
||||
.ant-spin-container,
|
||||
.ant-table,
|
||||
.ant-table-container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 禁用/启用 二次确认弹窗 ===== */
|
||||
|
||||
/* 内容块：左右加 padding，按用户要求 */
|
||||
.confirmContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 4px 0;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
|
||||
strong {
|
||||
margin: 0 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
/* antd Modal.confirm 默认 body 已经有 padding，这里额外覆盖一下确保一致 */
|
||||
:global(.toggleConfirmModal) {
|
||||
.ant-modal-confirm-body {
|
||||
padding: 24px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { Button, Input, Table, Form, Space, Select, Modal, Pagination } from 'ant-design-vue';
|
||||
import { useUserModel, USER_ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/useUserModel';
|
||||
import { useContainerSize } from '@/hooks';
|
||||
import UserFormModal from './components/UserFormModal';
|
||||
import styles from './index.module.less';
|
||||
|
||||
/**
|
||||
* bodyCell 渲染函数
|
||||
*/
|
||||
function renderBodyCell({
|
||||
column,
|
||||
record,
|
||||
onEdit,
|
||||
onToggleStatus,
|
||||
}: {
|
||||
column: any;
|
||||
text: any;
|
||||
record: any;
|
||||
onEdit: (record: any) => void;
|
||||
onToggleStatus: (record: any) => void;
|
||||
}) {
|
||||
// 操作列
|
||||
if (column.key === 'action') {
|
||||
const isActive = record.status === 'active';
|
||||
return (
|
||||
<Space>
|
||||
<Button type="link" size="small" onClick={() => onEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger={isActive}
|
||||
style={isActive ? {} : { color: '#52c41a' }}
|
||||
onClick={() => onToggleStatus(record)}
|
||||
>
|
||||
{isActive ? '禁用' : '启用'}
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* 禁用/启用 二次确认弹窗
|
||||
*/
|
||||
function confirmToggleStatus({ record, onOk }: { record: any; onOk: (record: any) => void }) {
|
||||
const isActive = record.status === 'active';
|
||||
const actionText = isActive ? '禁用' : '启用';
|
||||
Modal.confirm({
|
||||
title: `确认${actionText}`,
|
||||
class: styles.toggleConfirmModal,
|
||||
content: (
|
||||
<div class={styles.confirmContent}>
|
||||
<span>确定要{actionText}用户</span>
|
||||
<strong>{record.realName}</strong>
|
||||
<span>吗？</span>
|
||||
</div>
|
||||
),
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okButtonProps: { danger: isActive },
|
||||
onOk: () => onOk(record),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统管理 - 用户管理
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'SystemUsers',
|
||||
setup() {
|
||||
const {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
modalVisible,
|
||||
editingRecord,
|
||||
isEdit,
|
||||
formSubmitting,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseModal,
|
||||
handleSave,
|
||||
handleToggleStatus,
|
||||
} = useUserModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
|
||||
/** 触发禁用/启用的二次确认 */
|
||||
const triggerToggle = (record: any) => {
|
||||
confirmToggleStatus({ record, onOk: handleToggleStatus });
|
||||
};
|
||||
|
||||
/** 触发编辑 */
|
||||
const triggerEdit = (record: any) => {
|
||||
handleEdit(record);
|
||||
};
|
||||
|
||||
/** 表格最终列：模型列 + 操作 */
|
||||
const tableColumns = [
|
||||
...columns,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 140,
|
||||
fixed: 'right' as const,
|
||||
align: 'center' as const,
|
||||
},
|
||||
];
|
||||
|
||||
return () => (
|
||||
<div class="page-container">
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class="page-filter">
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="用户" name="searchKeyword">
|
||||
<Input
|
||||
placeholder="请输入姓名/手机号"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="角色" name="role">
|
||||
<Select
|
||||
value={filterForm.role}
|
||||
options={USER_ROLE_OPTIONS as any}
|
||||
style={{ width: '120px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.role = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="状态" name="status">
|
||||
<Select
|
||||
value={filterForm.status}
|
||||
options={USER_STATUS_OPTIONS as any}
|
||||
style={{ width: '120px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.status = val || '')}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
<Button type="primary" onClick={handleSearch} loading={loading.value}>
|
||||
查询
|
||||
</Button>
|
||||
<Button type="primary" onClick={handleAdd}>
|
||||
新增
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* ===== 表格区 ===== */}
|
||||
<div class="page-table">
|
||||
<div ref={containerRef} class={styles.tableBody}>
|
||||
<Table
|
||||
columns={tableColumns}
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
scroll={{ x: 'max-content', y: height.value }}
|
||||
pagination={false}
|
||||
>
|
||||
{{
|
||||
bodyCell: (args: any) =>
|
||||
renderBodyCell({
|
||||
...args,
|
||||
onEdit: triggerEdit,
|
||||
onToggleStatus: triggerToggle,
|
||||
}),
|
||||
}}
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* 独立分页 */}
|
||||
<div class="page-pagination">
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={pagination.value.total}
|
||||
showSizeChanger
|
||||
showTotal={(total: number) => `共 ${total} 条`}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ===== 新增/编辑弹窗 ===== */}
|
||||
{modalVisible.value && (
|
||||
<UserFormModal
|
||||
visible={modalVisible.value}
|
||||
record={editingRecord.value}
|
||||
submitting={formSubmitting.value}
|
||||
onClose={handleCloseModal}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,248 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { message, Tag } from 'ant-design-vue';
|
||||
import { useState, useDebounce, useThrottleFn } from '@/hooks';
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
|
||||
/** 角色选项（筛选） */
|
||||
export const USER_ROLE_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'admin', label: '管理员' },
|
||||
] as const;
|
||||
|
||||
/** 状态选项（筛选） */
|
||||
export const USER_STATUS_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'active', label: '正常' },
|
||||
{ value: 'disabled', label: '禁用' },
|
||||
] as const;
|
||||
|
||||
/** 角色文本/颜色映射（表格渲染） */
|
||||
const ROLE_MAP: Record<string, { label: string; color: string }> = {
|
||||
admin: { label: '管理员', color: 'blue' },
|
||||
operator: { label: '运营人员', color: 'cyan' },
|
||||
auditor: { label: '审核人员', color: 'purple' },
|
||||
};
|
||||
|
||||
/** 状态文本/颜色映射 */
|
||||
const STATUS_MAP: Record<string, { label: string; color: string }> = {
|
||||
active: { label: '正常', color: 'green' },
|
||||
disabled: { label: '禁用', color: 'red' },
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
// 假数据
|
||||
// ============================================================
|
||||
|
||||
const MOCK_DATA = [
|
||||
{
|
||||
key: '1',
|
||||
userId: 'U20260526001',
|
||||
realName: '张三',
|
||||
phone: '15585658975',
|
||||
role: 'admin',
|
||||
status: 'active' as 'active' | 'disabled',
|
||||
createTime: '2026.05.26 08:00:00',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
userId: 'U20260526002',
|
||||
realName: '王五',
|
||||
phone: '13800138000',
|
||||
role: 'admin',
|
||||
status: 'disabled' as 'active' | 'disabled',
|
||||
createTime: '2026.05.26 14:00:00',
|
||||
},
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 系统管理 - 用户列表页数据模型
|
||||
*/
|
||||
export function useUserModel() {
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
searchKeyword: '', // 用户名/手机号
|
||||
role: '' as '' | 'admin',
|
||||
status: '' as '' | 'active' | 'disabled',
|
||||
});
|
||||
|
||||
// 防抖 300ms
|
||||
const { debouncedValue: debouncedKeyword } = useDebounce(
|
||||
toRef(filterForm, 'searchKeyword') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: MOCK_DATA.length,
|
||||
});
|
||||
|
||||
// ===== 弹窗状态 =====
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
const [editingRecord, setEditingRecord] = useState<any>(null);
|
||||
|
||||
// ===== 提交态 =====
|
||||
const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
|
||||
|
||||
// ===== 表格列配置 =====
|
||||
const columns = [
|
||||
{ title: '姓名', dataIndex: 'realName', key: 'realName', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
|
||||
{
|
||||
title: '角色',
|
||||
dataIndex: 'role',
|
||||
key: 'role',
|
||||
width: 120,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const info = ROLE_MAP[text] || { label: text || '-', color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const info = STATUS_MAP[text] || { label: text || '-', color: 'default' };
|
||||
return h(Tag, { color: info.color }, () => info.label);
|
||||
},
|
||||
},
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
|
||||
];
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => {
|
||||
return (
|
||||
debouncedKeyword.value.trim() !== '' || filterForm.role !== '' || filterForm.status !== ''
|
||||
);
|
||||
});
|
||||
|
||||
const isEdit = computed(() => editingRecord.value !== null);
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询（节流 500ms） */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', {
|
||||
keyword: debouncedKeyword.value,
|
||||
role: filterForm.role,
|
||||
status: filterForm.status,
|
||||
});
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置（节流 500ms） */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchKeyword = '';
|
||||
filterForm.role = '';
|
||||
filterForm.status = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
|
||||
setDataSource(MOCK_DATA);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
handleSearch();
|
||||
};
|
||||
|
||||
/** 打开新增弹窗 */
|
||||
const handleAdd = () => {
|
||||
setEditingRecord(null);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 打开编辑弹窗 */
|
||||
const handleEdit = (record: any) => {
|
||||
setEditingRecord(record);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
/** 关闭弹窗 */
|
||||
const handleCloseModal = () => {
|
||||
setModalVisible(false);
|
||||
setEditingRecord(null);
|
||||
};
|
||||
|
||||
/** 提交表单（新增/编辑） */
|
||||
const handleSave = useThrottleFn(async (formPayload: any) => {
|
||||
if (formSubmitting.value) return;
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
console.log(isEdit.value ? '编辑用户' : '新增用户', formPayload);
|
||||
// TODO: 替换为真实 API 调用
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功');
|
||||
handleCloseModal();
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 启用/禁用切换（节流 500ms） */
|
||||
const handleToggleStatus = useThrottleFn(async (record: any) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const newStatus = record.status === 'active' ? 'disabled' : 'active';
|
||||
const actionText = newStatus === 'active' ? '启用' : '禁用';
|
||||
console.log(`${actionText}用户:`, record.userId);
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(
|
||||
dataSource.value.map((item: any) =>
|
||||
item.key === record.key ? { ...item, status: newStatus } : item,
|
||||
),
|
||||
);
|
||||
message.success(`${actionText}成功`);
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
loading,
|
||||
dataSource,
|
||||
columns,
|
||||
pagination,
|
||||
hasFilter,
|
||||
modalVisible,
|
||||
setModalVisible,
|
||||
editingRecord,
|
||||
isEdit,
|
||||
formSubmitting,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
handlePageChange,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
handleCloseModal,
|
||||
handleSave,
|
||||
handleToggleStatus,
|
||||
};
|
||||
}
|
||||
+11
-4
@@ -1,6 +1,13 @@
|
||||
import router from '@/router';
|
||||
import { auth } from '@/hooks/useAuth';
|
||||
|
||||
const appTitle = import.meta.env.VITE_APP_TITLE || 'CPMS 运营平台';
|
||||
|
||||
/** 导航完成后设置页面标题，避免动态路由加载前误匹配 404 导致 title 闪烁 */
|
||||
function updateDocumentTitle(title?: string) {
|
||||
document.title = title ? `${title} - ${appTitle}` : appTitle;
|
||||
}
|
||||
|
||||
/**
|
||||
* 全局路由守卫
|
||||
* 核心流程:
|
||||
@@ -15,10 +22,6 @@ import { auth } from '@/hooks/useAuth';
|
||||
* matched 信息带过去,导致仍然匹配到 /:pathMatch(.*)*。
|
||||
*/
|
||||
router.beforeEach(async (to, _from, next) => {
|
||||
// 设置页面标题
|
||||
const appTitle = import.meta.env.VITE_APP_TITLE || 'CPMS 运营平台';
|
||||
document.title = to.meta.title ? `${to.meta.title} - ${appTitle}` : appTitle;
|
||||
|
||||
// ── /login 特殊处理 ──
|
||||
if (to.path === '/login') {
|
||||
if (auth.isLoggedIn()) {
|
||||
@@ -51,3 +54,7 @@ router.beforeEach(async (to, _from, next) => {
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
router.afterEach((to) => {
|
||||
updateDocumentTitle(to.meta.title as string | undefined);
|
||||
});
|
||||
|
||||
+107
-73
@@ -4,6 +4,7 @@ import type { MenuNode, MenuItemRaw } from '@/types';
|
||||
import router, { resetRouter } from '@/router';
|
||||
import { fetchMenuTree } from '@/api/menu';
|
||||
import { pageModules } from '@/router/glob';
|
||||
import { FALLBACK_MENU_NODES } from '@/config/fallbackRoutes';
|
||||
|
||||
/**
|
||||
* 使用 import.meta.glob 动态收集 src/pages/ 下所有页面组件
|
||||
@@ -24,15 +25,11 @@ import { pageModules } from '@/router/glob';
|
||||
function resolveComponent(component?: string): RouteRecordRaw['component'] | undefined {
|
||||
if (!component) return undefined;
|
||||
|
||||
// 构建 glob key
|
||||
const globKey = `/src/pages/${component}/index.tsx`;
|
||||
|
||||
// 直接匹配
|
||||
if (pageModules[globKey]) {
|
||||
return pageModules[globKey];
|
||||
}
|
||||
|
||||
// 兜底:尝试带 @ 前缀匹配(Vite alias)
|
||||
const aliasKey = `@/pages/${component}/index.tsx`;
|
||||
if (pageModules[aliasKey]) {
|
||||
return pageModules[aliasKey];
|
||||
@@ -60,43 +57,94 @@ const state = reactive<MenuState>({
|
||||
homePath: '/dashboard',
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// 辅助函数
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 获取节点的可用子节点（排除 disabled 和 externalLink）
|
||||
*/
|
||||
function getEnabledChildren(node: MenuNode): MenuNode[] {
|
||||
if (!node.children?.length) return [];
|
||||
return node.children.filter((child) => !child.disabled && !child.externalLink);
|
||||
}
|
||||
|
||||
/**
|
||||
* 将后端 MenuNode 递归转为 antd Menu 的 items 格式
|
||||
*
|
||||
* 规则:
|
||||
* - 过滤 disabled / hideInMenu / externalLink 节点
|
||||
* - 父节点有 enabledChildren 时递归转换；若所有子节点都被过滤且父节点无 component，则父节点也不显示
|
||||
* - key 统一加 '/' 前缀，与 route.path 匹配（如 '/dashboard'、'/events/list'）
|
||||
*/
|
||||
function transformMenuNode(nodes: MenuNode[]): MenuItemRaw[] {
|
||||
return nodes
|
||||
.filter((node) => !node.hideInMenu && !node.externalLink)
|
||||
.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))
|
||||
.map((node) => {
|
||||
const item: MenuItemRaw = {
|
||||
key: node.path,
|
||||
label: node.name,
|
||||
iconName: node.icon,
|
||||
};
|
||||
const result: MenuItemRaw[] = [];
|
||||
|
||||
if (node.children?.length) {
|
||||
item.children = transformMenuNode(node.children);
|
||||
for (const node of nodes) {
|
||||
if (node.disabled || node.hideInMenu || node.externalLink) continue;
|
||||
|
||||
const enabledChildren = getEnabledChildren(node);
|
||||
const item: MenuItemRaw = {
|
||||
key: '/' + node.path,
|
||||
label: node.name,
|
||||
iconName: node.icon,
|
||||
};
|
||||
|
||||
if (enabledChildren.length > 0) {
|
||||
const childItems = transformMenuNode(enabledChildren);
|
||||
if (childItems.length > 0) {
|
||||
item.children = childItems;
|
||||
}
|
||||
// 子节点全部被过滤 → 父节点也不显示
|
||||
else {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
return item;
|
||||
});
|
||||
result.push(item);
|
||||
}
|
||||
|
||||
// 排序
|
||||
result.sort((a, b) => {
|
||||
const aNode = nodes.find((n) => '/' + n.path === a.key);
|
||||
const bNode = nodes.find((n) => '/' + n.path === b.key);
|
||||
return (aNode?.sort ?? 0) - (bNode?.sort ?? 0);
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 将后端 MenuNode 递归转为 vue-router RouteRecordRaw
|
||||
* component 字段通过 resolveComponent() 动态解析
|
||||
*
|
||||
* node.path 存储完整路径（如 'events/list'），
|
||||
* 但 Vue Router 嵌套路由下子节点的 path 必须相对于父节点（如 'list'）。
|
||||
* 通过 parentPath 参数实现自动剥离前缀。
|
||||
*
|
||||
* 规则:
|
||||
* - 跳过 disabled / externalLink 节点
|
||||
* - 父节点无 component 且所有子节点被过滤 → 跳过
|
||||
* - 父节点无 component 时，redirect 自动指向第一个可用子路由（相对路径）
|
||||
*/
|
||||
function transformMenuToRoutes(nodes: MenuNode[]): RouteRecordRaw[] {
|
||||
function transformMenuToRoutes(nodes: MenuNode[], parentPath = ''): RouteRecordRaw[] {
|
||||
const routes: RouteRecordRaw[] = [];
|
||||
|
||||
for (const node of nodes) {
|
||||
// 外链节点不注册路由
|
||||
if (node.externalLink) continue;
|
||||
if (node.disabled || node.externalLink) continue;
|
||||
|
||||
const enabledChildren = getEnabledChildren(node);
|
||||
const componentLoader = resolveComponent(node.component);
|
||||
|
||||
// 无组件且无可用子节点 → 跳过
|
||||
if (!componentLoader && enabledChildren.length === 0) continue;
|
||||
|
||||
// 计算 Vue Router 路由 path: 根节点用完整路径，子节点剥离父级前缀
|
||||
const routePath = parentPath
|
||||
? node.path.slice(parentPath.length + 1) // 'events/list' → 'list'
|
||||
: node.path;
|
||||
|
||||
const route: RouteRecordRaw = {
|
||||
path: node.path,
|
||||
path: routePath,
|
||||
name: node.name,
|
||||
meta: {
|
||||
title: node.name,
|
||||
@@ -111,11 +159,13 @@ function transformMenuToRoutes(nodes: MenuNode[]): RouteRecordRaw[] {
|
||||
route.component = componentLoader;
|
||||
}
|
||||
|
||||
if (node.children?.length) {
|
||||
route.children = transformMenuToRoutes(node.children);
|
||||
// 没有组件的父节点自动重定向到第一个子节点
|
||||
if (!componentLoader && node.children[0]) {
|
||||
route.redirect = node.children[0].path;
|
||||
if (enabledChildren.length > 0) {
|
||||
// 递归时传入当前节点的完整路径作为父级前缀
|
||||
route.children = transformMenuToRoutes(enabledChildren, node.path);
|
||||
// 无组件的父节点 → redirect 指向第一个可用子路由（相对路径）
|
||||
if (!componentLoader) {
|
||||
const firstChildRelativePath = enabledChildren[0].path.slice(node.path.length + 1);
|
||||
route.redirect = firstChildRelativePath;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,14 +177,19 @@ function transformMenuToRoutes(nodes: MenuNode[]): RouteRecordRaw[] {
|
||||
|
||||
/**
|
||||
* 获取第一个可见菜单的路径(用作默认首页)
|
||||
* 跳过 disabled / hideInMenu / externalLink 节点
|
||||
* 返回带 '/' 前缀的完整路径
|
||||
*/
|
||||
function getFirstMenuPath(nodes: MenuNode[]): string {
|
||||
for (const node of nodes) {
|
||||
if (!node.hideInMenu && !node.externalLink && !node.children?.length) {
|
||||
return node.path;
|
||||
if (node.disabled || node.externalLink) continue;
|
||||
|
||||
const enabledChildren = getEnabledChildren(node);
|
||||
if (!node.hideInMenu && enabledChildren.length === 0) {
|
||||
return '/' + node.path;
|
||||
}
|
||||
if (node.children?.length) {
|
||||
const childPath = getFirstMenuPath(node.children);
|
||||
if (enabledChildren.length > 0) {
|
||||
const childPath = getFirstMenuPath(enabledChildren);
|
||||
if (childPath) return childPath;
|
||||
}
|
||||
}
|
||||
@@ -146,8 +201,7 @@ function getFirstMenuPath(nodes: MenuNode[]): string {
|
||||
* 动态路由作为其子路由挂载
|
||||
*/
|
||||
function ensureLayoutRoute() {
|
||||
const existing = router.hasRoute('BasicLayout');
|
||||
if (!existing) {
|
||||
if (!router.hasRoute('BasicLayout')) {
|
||||
router.addRoute({
|
||||
path: '/',
|
||||
name: 'BasicLayout',
|
||||
@@ -159,61 +213,41 @@ function ensureLayoutRoute() {
|
||||
}
|
||||
|
||||
/**
|
||||
* 注册兜底菜单和路由(后端接口不可用时使用)
|
||||
* 通用"注入路由 + 菜单"流程
|
||||
* 无论是后端数据还是兜底数据，都走同一套 logic
|
||||
*/
|
||||
function registerFallbackRoutes() {
|
||||
function applyMenuTree(menuTree: MenuNode[]) {
|
||||
state.menuTree = menuTree;
|
||||
state.menuItems = transformMenuNode(menuTree);
|
||||
state.homePath = getFirstMenuPath(menuTree);
|
||||
|
||||
ensureLayoutRoute();
|
||||
|
||||
router.addRoute('BasicLayout', {
|
||||
path: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
component: () => import('@/pages/dashboard'),
|
||||
meta: { title: '工作台', icon: 'DashboardOutlined' },
|
||||
const dynamicRoutes = transformMenuToRoutes(menuTree);
|
||||
dynamicRoutes.forEach((route) => {
|
||||
router.addRoute('BasicLayout', route);
|
||||
});
|
||||
router.addRoute('BasicLayout', {
|
||||
path: 'about',
|
||||
name: 'About',
|
||||
component: () => import('@/pages/about'),
|
||||
meta: { title: '关于', icon: 'InfoCircleOutlined' },
|
||||
});
|
||||
router.addRoute('BasicLayout', { path: '', redirect: '/dashboard' });
|
||||
|
||||
// 默认重定向到首页
|
||||
router.addRoute('BasicLayout', { path: '', redirect: state.homePath });
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 暴露给组件使用的 composable
|
||||
// ============================================================
|
||||
|
||||
export function useMenuStore() {
|
||||
const loadMenu = async () => {
|
||||
if (state.loaded) return;
|
||||
|
||||
try {
|
||||
const menuTree = await fetchMenuTree();
|
||||
state.menuTree = menuTree;
|
||||
state.menuItems = transformMenuNode(menuTree);
|
||||
state.homePath = getFirstMenuPath(menuTree);
|
||||
|
||||
// 确保 BasicLayout 布局路由已注册
|
||||
ensureLayoutRoute();
|
||||
|
||||
// 动态注册路由:将后端路由配置注入到 BasicLayout 布局下
|
||||
const dynamicRoutes = transformMenuToRoutes(menuTree);
|
||||
dynamicRoutes.forEach((route) => {
|
||||
router.addRoute('BasicLayout', route);
|
||||
});
|
||||
|
||||
// 默认重定向到首页(BasicLayout 的根路径)
|
||||
router.addRoute('BasicLayout', { path: '', redirect: state.homePath });
|
||||
|
||||
applyMenuTree(menuTree);
|
||||
state.loaded = true;
|
||||
} catch (err) {
|
||||
console.error('加载菜单失败:', err);
|
||||
// 降级:使用兜底菜单
|
||||
state.menuItems = [
|
||||
{ key: '/dashboard', label: '工作台', iconName: 'DashboardOutlined' },
|
||||
{ key: '/about', label: '关于', iconName: 'InfoCircleOutlined' },
|
||||
];
|
||||
state.homePath = '/dashboard';
|
||||
|
||||
// 兜底路由
|
||||
registerFallbackRoutes();
|
||||
|
||||
// 降级:使用本地兜底菜单
|
||||
applyMenuTree(FALLBACK_MENU_NODES);
|
||||
state.loaded = true;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import { reactive, computed, toRefs } from 'vue';
|
||||
|
||||
interface UserState {
|
||||
/** 手机号 */
|
||||
phone: string;
|
||||
/** 昵称 */
|
||||
nickname: string;
|
||||
/** 登录 token */
|
||||
token: string;
|
||||
}
|
||||
|
||||
const state = reactive<UserState>({
|
||||
phone: '13377981125',
|
||||
nickname: '',
|
||||
token: '',
|
||||
});
|
||||
|
||||
export function useUserStore() {
|
||||
const setUser = (user: Partial<UserState>) => {
|
||||
if (user.phone !== undefined) state.phone = user.phone;
|
||||
if (user.nickname !== undefined) state.nickname = user.nickname;
|
||||
if (user.token !== undefined) state.token = user.token;
|
||||
};
|
||||
|
||||
const clearUser = () => {
|
||||
state.phone = '';
|
||||
state.nickname = '';
|
||||
state.token = '';
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
phone: computed(() => state.phone),
|
||||
nickname: computed(() => state.nickname),
|
||||
token: computed(() => state.token),
|
||||
setUser,
|
||||
clearUser,
|
||||
};
|
||||
}
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
declare module 'china-area-data' {
|
||||
const data: Record<string, Record<string, string>>;
|
||||
export default data;
|
||||
}
|
||||
@@ -55,6 +55,8 @@ export interface MenuNode {
|
||||
externalLink?: string;
|
||||
/** 高亮的菜单路径(用于详情页高亮父级菜单) */
|
||||
activeMenu?: string;
|
||||
/** 是否禁用（禁用后路由不注册、菜单不显示） */
|
||||
disabled?: boolean;
|
||||
/** 子菜单/子路由 */
|
||||
children?: MenuNode[];
|
||||
}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
import areaData from 'china-area-data';
|
||||
|
||||
export interface CascadeOption {
|
||||
value: string;
|
||||
label: string;
|
||||
children?: CascadeOption[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 china-area-data 原始数据转换为 antd Cascader 所需的 options 格式
|
||||
*
|
||||
* 原始数据格式: { '86': { '110000': '北京' }, '110000': { '110100': '市辖区' }, ... }
|
||||
* 目标格式: [{ value: '110000', label: '北京', children: [...] }]
|
||||
*/
|
||||
function buildTree(parentCode: string): CascadeOption[] {
|
||||
const nodes = areaData[parentCode];
|
||||
if (!nodes) return [];
|
||||
|
||||
return Object.entries(nodes).map(([code, name]) => {
|
||||
const node: CascadeOption = {
|
||||
value: code,
|
||||
label: name as string,
|
||||
};
|
||||
const children = buildTree(code);
|
||||
if (children.length > 0) {
|
||||
node.children = children;
|
||||
}
|
||||
return node;
|
||||
});
|
||||
}
|
||||
|
||||
/** 省市区三级联动数据 */
|
||||
export const regionOptions: CascadeOption[] = buildTree('86');
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* 表单正则校验工具
|
||||
*
|
||||
* 只导出纯正则常量与独立的校验函数，不做任何 antd/framework 耦合。
|
||||
* 各页面的 Form.Item rules 应在对应页面目录的 controller.ts 中组装。
|
||||
*/
|
||||
|
||||
// ============================================================
|
||||
// 正则常量
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 中国大陆手机号
|
||||
* - 11 位数字，第二位 3-9
|
||||
*/
|
||||
export const CHINA_PHONE_REGEX = /^1[3-9]\d{9}$/;
|
||||
|
||||
/**
|
||||
* 登录密码
|
||||
* - 至少 8 位，同时包含字母与数字
|
||||
* - 允许特殊字符 !@#$%^&*()_+-=
|
||||
*/
|
||||
export const LOGIN_PASSWORD_REGEX = /^(?=.*[A-Za-z])(?=.*\d)[\w!@#$%^&*()_+\-=]{8,}$/;
|
||||
|
||||
/**
|
||||
* 真实姓名（中文/英文/数字，1-8 位）
|
||||
*/
|
||||
export const REAL_NAME_REGEX = /^[\u4e00-\u9fa5A-Za-z0-9·]{1,8}$/;
|
||||
|
||||
// ============================================================
|
||||
// 校验函数
|
||||
// ============================================================
|
||||
|
||||
/** 校验中国大陆手机号 */
|
||||
export function isChinaPhone(value: unknown): boolean {
|
||||
return typeof value === 'string' && CHINA_PHONE_REGEX.test(value);
|
||||
}
|
||||
|
||||
/** 校验密码：至少 8 位 + 同时含字母与数字 */
|
||||
export function isValidPassword(value: unknown): boolean {
|
||||
return typeof value === 'string' && LOGIN_PASSWORD_REGEX.test(value);
|
||||
}
|
||||
|
||||
/** 校验真实姓名：1-8 个字符 */
|
||||
export function isValidRealName(value: unknown): boolean {
|
||||
return typeof value === 'string' && value.length > 0 && REAL_NAME_REGEX.test(value);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import type { OssSignData } from '@/api/upload';
|
||||
import { fetchOssSign } from '@/api/upload';
|
||||
|
||||
/**
|
||||
* OSS 上传类型
|
||||
* 1=证件照 2=赛事封面 3=头像 4=富文本 5=Banner
|
||||
*/
|
||||
export const OssUploadType = {
|
||||
IdCard: '1',
|
||||
EventCover: '2',
|
||||
Avatar: '3',
|
||||
RichText: '4',
|
||||
Banner: '5',
|
||||
} as const;
|
||||
|
||||
export type OssUploadTypeValue = (typeof OssUploadType)[keyof typeof OssUploadType];
|
||||
|
||||
/**
|
||||
* 生成唯一文件名：16 位大小写字母+数字随机串.ext
|
||||
*/
|
||||
export function genFileName(filePath: string, fileName?: string): string {
|
||||
let suffix = '';
|
||||
if (fileName) {
|
||||
const dot = fileName.lastIndexOf('.');
|
||||
suffix = dot >= 0 ? fileName.slice(dot).toLowerCase() : '';
|
||||
}
|
||||
if (!suffix && filePath) {
|
||||
const dot = filePath.lastIndexOf('.');
|
||||
suffix = dot >= 0 ? filePath.slice(dot).toLowerCase() : '';
|
||||
}
|
||||
if (!suffix) suffix = '.jpg';
|
||||
|
||||
const random = Array.from({ length: 16 }, () => {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
return chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}).join('');
|
||||
|
||||
return `${random}${suffix}`;
|
||||
}
|
||||
|
||||
/** 根据签名和文件名构建 OSS 上传 FormData 字段 */
|
||||
export function buildOssFormData(sign: OssSignData, fileName: string): Record<string, string> {
|
||||
return {
|
||||
key: `${sign.dir}${fileName}`,
|
||||
policy: sign.policy,
|
||||
'x-oss-signature': sign.signature,
|
||||
'x-oss-signature-version': 'OSS4-HMAC-SHA256',
|
||||
'x-oss-credential': sign.x_oss_credential,
|
||||
'x-oss-date': sign.x_oss_date,
|
||||
'x-oss-security-token': sign.security_token,
|
||||
success_action_status: '200',
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用已有签名上传单个文件到 OSS（Web 版，fetch + FormData）
|
||||
*/
|
||||
export async function uploadFileWithSign(file: File, sign: OssSignData): Promise<string> {
|
||||
const fileName = genFileName(file.name, file.name);
|
||||
const key = `${sign.dir}${fileName}`;
|
||||
|
||||
const formData = new FormData();
|
||||
Object.entries(buildOssFormData(sign, fileName)).forEach(([k, v]) => {
|
||||
formData.append(k, v);
|
||||
});
|
||||
formData.append('file', file);
|
||||
|
||||
const res = await fetch(sign.host, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`OSS 上传失败：${res.status} ${res.statusText}`);
|
||||
}
|
||||
|
||||
return `${sign.host}/${key}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传单个文件到 OSS
|
||||
* @returns 文件访问 URL
|
||||
*/
|
||||
export async function uploadFile(file: File, type: OssUploadTypeValue): Promise<{ url: string }> {
|
||||
const sign = await fetchOssSign(type);
|
||||
const url = await uploadFileWithSign(file, sign);
|
||||
return { url };
|
||||
}
|
||||
|
||||
/**
|
||||
* 逐张上传文件到 OSS（同一批复用同一签名，单张失败不影响后续）
|
||||
*/
|
||||
export async function uploadFilesOneByOne(
|
||||
files: File[],
|
||||
type: OssUploadTypeValue,
|
||||
options?: {
|
||||
onSuccess?: (url: string, index: number) => void | Promise<void>;
|
||||
onError?: (error: unknown, index: number) => void;
|
||||
},
|
||||
): Promise<{ successCount: number; failCount: number }> {
|
||||
if (files.length === 0) {
|
||||
return { successCount: 0, failCount: 0 };
|
||||
}
|
||||
|
||||
const sign = await fetchOssSign(type);
|
||||
let successCount = 0;
|
||||
let failCount = 0;
|
||||
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
try {
|
||||
const url = await uploadFileWithSign(files[i], sign);
|
||||
successCount++;
|
||||
await options?.onSuccess?.(url, i);
|
||||
} catch (err) {
|
||||
failCount++;
|
||||
options?.onError?.(err, i);
|
||||
}
|
||||
}
|
||||
|
||||
return { successCount, failCount };
|
||||
}
|
||||
Reference in New Issue
Block a user