feat: 补全赛事管理下所有页面 补全系统管理下所有页面
This commit is contained in:
ZhuRui
parent
34d9a778a8
commit
b86c22e7d2
|
|
@ -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 |
|
|
@ -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,103 @@
|
||||||
|
import { defineComponent, ref, reactive, watch } from 'vue';
|
||||||
|
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 重置表单 */
|
||||||
|
watch(
|
||||||
|
() => props.visible,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
Object.assign(formData, getDefaultForm());
|
||||||
|
setTimeout(() => formRef.value?.clearValidate(), 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
/** 提交 */
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -5,3 +5,4 @@
|
||||||
export { default as HelloWorld } from './HelloWorld';
|
export { default as HelloWorld } from './HelloWorld';
|
||||||
export { default as ImageCropper } from './ImageCropper';
|
export { default as ImageCropper } from './ImageCropper';
|
||||||
export type { ImageCropperRef, ImageCropperProps } from './ImageCropper';
|
export type { ImageCropperRef, ImageCropperProps } from './ImageCropper';
|
||||||
|
export { default as ChangePasswordModal } from './ChangePasswordModal';
|
||||||
|
|
|
||||||
|
|
@ -32,6 +32,71 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 面包屑
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 {
|
.content {
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
import { computed, defineComponent, h, ref } from 'vue';
|
import { computed, defineComponent, h, ref } from 'vue';
|
||||||
import type { CSSProperties } from 'vue';
|
import type { CSSProperties } from 'vue';
|
||||||
import { useRouter, useRoute, RouterView } from 'vue-router';
|
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 type { MenuProps } from 'ant-design-vue';
|
||||||
import {
|
import {
|
||||||
DashboardOutlined,
|
DashboardOutlined,
|
||||||
|
EditOutlined,
|
||||||
InfoCircleOutlined,
|
InfoCircleOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
MenuFoldOutlined,
|
MenuFoldOutlined,
|
||||||
MenuUnfoldOutlined,
|
MenuUnfoldOutlined,
|
||||||
SettingOutlined,
|
SettingOutlined,
|
||||||
|
|
@ -13,6 +15,10 @@ import {
|
||||||
TrophyOutlined,
|
TrophyOutlined,
|
||||||
} from '@ant-design/icons-vue';
|
} from '@ant-design/icons-vue';
|
||||||
import { useMenuStore } from '@/stores/menuStore';
|
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';
|
import styles from './BasicLayout.module.less';
|
||||||
|
|
||||||
const { Header, Sider, Content, Footer } = Layout;
|
const { Header, Sider, Content, Footer } = Layout;
|
||||||
|
|
@ -86,6 +92,8 @@ export default defineComponent({
|
||||||
const collapsed = ref(false);
|
const collapsed = ref(false);
|
||||||
|
|
||||||
const { menuItems } = useMenuStore();
|
const { menuItems } = useMenuStore();
|
||||||
|
const { phone } = useUserStore();
|
||||||
|
const { breadcrumbs } = useBreadcrumb();
|
||||||
|
|
||||||
const selectedKeys = computed<string[]>(() => [route.path]);
|
const selectedKeys = computed<string[]>(() => [route.path]);
|
||||||
|
|
||||||
|
|
@ -99,6 +107,53 @@ export default defineComponent({
|
||||||
collapsed.value = !collapsed.value;
|
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 () => (
|
return () => (
|
||||||
<Layout class={styles.container}>
|
<Layout class={styles.container}>
|
||||||
<Sider style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
|
<Sider style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
|
||||||
|
|
@ -119,6 +174,49 @@ export default defineComponent({
|
||||||
<span class={styles.trigger} onClick={toggleCollapsed}>
|
<span class={styles.trigger} onClick={toggleCollapsed}>
|
||||||
{collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
{collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||||
</span>
|
</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>
|
</Header>
|
||||||
|
|
||||||
<Content class={styles.content}>
|
<Content class={styles.content}>
|
||||||
|
|
@ -127,6 +225,14 @@ export default defineComponent({
|
||||||
|
|
||||||
<Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
|
<Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
|
{/* 修改密码弹窗 */}
|
||||||
|
<ChangePasswordModal
|
||||||
|
visible={changePwdVisible.value}
|
||||||
|
submitting={changePwdSubmitting.value}
|
||||||
|
onClose={() => setChangePwdVisible(false)}
|
||||||
|
onSave={handleChangePwdSave}
|
||||||
|
/>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -498,7 +498,6 @@ export default defineComponent({
|
||||||
{ required: true, message: '请输入排序' },
|
{ required: true, message: '请输入排序' },
|
||||||
{ type: 'number', min: 1, max: 999, message: '排序范围 1-999' },
|
{ type: 'number', min: 1, max: 999, message: '排序范围 1-999' },
|
||||||
]}
|
]}
|
||||||
extra="数字越小越靠前"
|
|
||||||
>
|
>
|
||||||
<InputNumber
|
<InputNumber
|
||||||
placeholder="数字越小越靠前"
|
placeholder="数字越小越靠前"
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ import { Button, Checkbox, Form, FormItem, Input, message } from 'ant-design-vue
|
||||||
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
|
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
|
||||||
import { auth } from '@/hooks/useAuth';
|
import { auth } from '@/hooks/useAuth';
|
||||||
import { useEffect } from '@/hooks/useEffect';
|
import { useEffect } from '@/hooks/useEffect';
|
||||||
|
import { useUserStore } from '@/stores/userStore';
|
||||||
import styles from './index.module.less';
|
import styles from './index.module.less';
|
||||||
|
|
||||||
interface LoginForm {
|
interface LoginForm {
|
||||||
|
|
@ -50,7 +51,13 @@ export default defineComponent({
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await new Promise((r) => setTimeout(r, 600));
|
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('登录成功');
|
message.success('登录成功');
|
||||||
|
|
||||||
if (rememberMe.value) {
|
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,144 @@
|
||||||
|
import { defineComponent, ref, reactive, watch } from 'vue';
|
||||||
|
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 重置 */
|
||||||
|
watch(
|
||||||
|
() => props.visible,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
initFormFromRecord(props.record);
|
||||||
|
setTimeout(() => formRef.value?.clearValidate(), 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
/** 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,139 @@
|
||||||
|
import { defineComponent, ref, reactive, computed, watch } from 'vue';
|
||||||
|
import { Modal, Form, Input, Table, Button, Space, Pagination } from 'ant-design-vue';
|
||||||
|
import { 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 变化重置分页 */
|
||||||
|
watch(
|
||||||
|
() => [props.visible, props.users.length],
|
||||||
|
() => {
|
||||||
|
setPagination({ current: 1, pageSize: 10, total: filteredUsers.value.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,76 @@
|
||||||
import { defineComponent } from 'vue';
|
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),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 角色权限
|
* 角色权限
|
||||||
|
|
@ -6,9 +78,126 @@ import { defineComponent } from 'vue';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'SystemRoles',
|
name: 'SystemRoles',
|
||||||
setup() {
|
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({ headerOffset: 55 });
|
||||||
|
|
||||||
|
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 () => (
|
return () => (
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>角色权限 - 开发中</div>
|
{/* ===== 筛选区 ===== */}
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* ===== 角色表单弹窗 ===== */}
|
||||||
|
<RoleFormModal
|
||||||
|
visible={formVisible.value}
|
||||||
|
record={editingRecord.value}
|
||||||
|
submitting={formSubmitting.value}
|
||||||
|
onClose={handleCloseForm}
|
||||||
|
onSave={handleSave}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* ===== 角色用户列表弹窗 ===== */}
|
||||||
|
<UserListModal
|
||||||
|
visible={userListVisible.value}
|
||||||
|
role={currentRole.value}
|
||||||
|
users={getRoleUsers(currentRole.value?.roleId || '')}
|
||||||
|
renderStatus={renderStatus}
|
||||||
|
onClose={handleCloseUserList}
|
||||||
|
/>
|
||||||
</div>
|
</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,61 @@
|
||||||
|
/* ===== 表单行/列布局 ===== */
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 编辑模式密码区 ===== */
|
||||||
|
.passwordEditRow {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.passwordMask {
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resetBtn {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 取消重置行 ===== */
|
||||||
|
.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,217 @@
|
||||||
|
import { defineComponent, ref, reactive, watch } from 'vue';
|
||||||
|
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 变化重置表单 */
|
||||||
|
watch(
|
||||||
|
() => props.visible,
|
||||||
|
(val) => {
|
||||||
|
if (val) {
|
||||||
|
initFormFromRecord(props.record);
|
||||||
|
isResetting.value = false;
|
||||||
|
setTimeout(() => formRef.value?.clearValidate(), 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
/** 点击"重置密码" */
|
||||||
|
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}>
|
||||||
|
<div class={styles.passwordEditRow}>
|
||||||
|
<span class={styles.passwordMask}>{PASSWORD_PLACEHOLDER}</span>
|
||||||
|
<Button size="small" class={styles.resetBtn} onClick={handleResetPassword}>
|
||||||
|
重置密码
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Form.Item>
|
||||||
|
<div class={styles.col} />
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,14 +1,209 @@
|
||||||
import { defineComponent } from 'vue';
|
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({
|
export default defineComponent({
|
||||||
name: 'SystemUsers',
|
name: 'SystemUsers',
|
||||||
setup() {
|
setup() {
|
||||||
|
const {
|
||||||
|
filterForm,
|
||||||
|
loading,
|
||||||
|
dataSource,
|
||||||
|
columns,
|
||||||
|
pagination,
|
||||||
|
modalVisible,
|
||||||
|
editingRecord,
|
||||||
|
isEdit,
|
||||||
|
formSubmitting,
|
||||||
|
handleSearch,
|
||||||
|
handleReset,
|
||||||
|
handlePageChange,
|
||||||
|
handleAdd,
|
||||||
|
handleEdit,
|
||||||
|
handleCloseModal,
|
||||||
|
handleSave,
|
||||||
|
handleToggleStatus,
|
||||||
|
} = useUserModel();
|
||||||
|
|
||||||
|
const { containerRef, height } = useContainerSize({ headerOffset: 55 });
|
||||||
|
|
||||||
|
/** 触发禁用/启用的二次确认 */
|
||||||
|
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 () => (
|
return () => (
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
<div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>用户管理 - 开发中</div>
|
{/* ===== 筛选区 ===== */}
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* ===== 新增/编辑弹窗 ===== */}
|
||||||
|
<UserFormModal
|
||||||
|
visible={modalVisible.value}
|
||||||
|
record={editingRecord.value}
|
||||||
|
submitting={formSubmitting.value}
|
||||||
|
onClose={handleCloseModal}
|
||||||
|
onSave={handleSave}
|
||||||
|
/>
|
||||||
</div>
|
</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,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -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,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue