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 ImageCropper } 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 {
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
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,
|
||||
|
|
@ -13,6 +15,10 @@ import {
|
|||
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;
|
||||
|
|
@ -86,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]);
|
||||
|
||||
|
|
@ -99,6 +107,53 @@ 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 style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
|
||||
|
|
@ -119,6 +174,49 @@ export default defineComponent({
|
|||
<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}>
|
||||
|
|
@ -127,6 +225,14 @@ export default defineComponent({
|
|||
|
||||
<Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>
|
||||
</Layout>
|
||||
|
||||
{/* 修改密码弹窗 */}
|
||||
<ChangePasswordModal
|
||||
visible={changePwdVisible.value}
|
||||
submitting={changePwdSubmitting.value}
|
||||
onClose={() => setChangePwdVisible(false)}
|
||||
onSave={handleChangePwdSave}
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -498,7 +498,6 @@ export default defineComponent({
|
|||
{ required: true, message: '请输入排序' },
|
||||
{ type: 'number', min: 1, max: 999, message: '排序范围 1-999' },
|
||||
]}
|
||||
extra="数字越小越靠前"
|
||||
>
|
||||
<InputNumber
|
||||
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 { 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,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 { 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({
|
||||
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({ 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 () => (
|
||||
<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>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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 { 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({ 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 () => (
|
||||
<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>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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