feat: 对接角色权限与操作日志相关接口字段
This commit is contained in:
ZhuRui
@@ -555,7 +555,7 @@ export default defineComponent({
|
||||
<div style={{ height: '500px' }}>
|
||||
<ImageCropper
|
||||
src={uploadImageUrl.value}
|
||||
aspectRatio={CROP_ASPECT_RATIO}
|
||||
// aspectRatio={CROP_ASPECT_RATIO}
|
||||
autoCrop={true}
|
||||
autoCropArea={0.8}
|
||||
viewMode={1}
|
||||
|
||||
@@ -210,7 +210,7 @@ export default defineComponent({
|
||||
</div>
|
||||
<Select
|
||||
value={range.value}
|
||||
onUpdate:value={(val: string) => handleRangeChange(val)}
|
||||
onUpdate:value={handleRangeChange}
|
||||
options={[...RANGE_OPTIONS]}
|
||||
style={{ width: '120px' }}
|
||||
/>
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
import { ref } from 'vue';
|
||||
import type { SelectValue } from 'ant-design-vue/es/select';
|
||||
import { useState } from '@/hooks';
|
||||
|
||||
export type RangeValue = (typeof RANGE_OPTIONS)[number]['value'];
|
||||
|
||||
// ============================================================
|
||||
// 常量
|
||||
// ============================================================
|
||||
@@ -13,6 +16,10 @@ export const RANGE_OPTIONS = [
|
||||
{ value: 'year', label: '本年' },
|
||||
] as const;
|
||||
|
||||
function isRangeValue(val: SelectValue): val is RangeValue {
|
||||
return typeof val === 'string' && RANGE_OPTIONS.some((item) => item.value === val);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 假数据（数值自洽：总收入 - 总提现 = 平台余额）
|
||||
// ============================================================
|
||||
@@ -91,10 +98,11 @@ function formatMoney(n: number): string {
|
||||
*/
|
||||
export function useReportsModel() {
|
||||
// ===== 时间范围 =====
|
||||
const [range, setRange] = useState<string>('month');
|
||||
const [range, setRange] = useState<RangeValue>('month');
|
||||
|
||||
/** 切换时间范围（演示用：打日志，不改数据） */
|
||||
const handleRangeChange = (val: string) => {
|
||||
const handleRangeChange = (val: SelectValue) => {
|
||||
if (!isRangeValue(val)) return;
|
||||
setRange(val);
|
||||
// TODO: 接入 API 时按 range 重新拉取汇总 / 图表 / 明细
|
||||
};
|
||||
|
||||
@@ -24,6 +24,12 @@
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.treeEmpty {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
import { defineComponent, ref, reactive } from 'vue';
|
||||
import { useEffect } from '@/hooks';
|
||||
import { Modal, Form, Input, Tree, Button } from 'ant-design-vue';
|
||||
import { defineComponent, ref, reactive, watch } from 'vue';
|
||||
import { Modal, Form, Input, Tree, Button, Spin, message } from 'ant-design-vue';
|
||||
import type { TreeProps } from 'ant-design-vue';
|
||||
import { roleNameRules, PERMISSION_TREE } from '../controller';
|
||||
import { getPermissionTree, type PermissionTreeNode } from '@/api/roles';
|
||||
import {
|
||||
roleNameRules,
|
||||
buildTreeData,
|
||||
extractLeafPermissions,
|
||||
type AntdTreeNode,
|
||||
} from '../controller';
|
||||
import styles from './RoleFormModal.module.less';
|
||||
|
||||
interface RoleFormModalProps {
|
||||
@@ -17,21 +22,9 @@ interface RoleFormModalProps {
|
||||
const getDefaultForm = () => ({
|
||||
roleName: '',
|
||||
checkedKeys: [] as string[],
|
||||
halfCheckedKeys: [] 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: {
|
||||
@@ -45,34 +38,68 @@ export default defineComponent({
|
||||
const formRef = ref<any>();
|
||||
const formData = reactive(getDefaultForm());
|
||||
|
||||
// 权限树数据 & 加载状态
|
||||
const treeData = ref<AntdTreeNode[]>([]);
|
||||
const treeLoading = ref(false);
|
||||
// 保存从 API 获取的原始树，提交时用于提取叶节点
|
||||
const rawApiTree = ref<PermissionTreeNode[]>([]);
|
||||
|
||||
// ===== 加载权限树 =====
|
||||
const loadPermissionTree = async (roleId: number | string) => {
|
||||
treeLoading.value = true;
|
||||
try {
|
||||
const res = await getPermissionTree(roleId);
|
||||
if (res.code === 200 && res.data) {
|
||||
rawApiTree.value = res.data;
|
||||
const result = buildTreeData(res.data);
|
||||
treeData.value = result.treeData;
|
||||
// checkedKeys 由叶节点 selected 推导，antd Tree checkStrictly=false 时自动级联
|
||||
formData.checkedKeys = result.checkedKeys;
|
||||
} else {
|
||||
message.error(res.msg || '获取权限树失败');
|
||||
}
|
||||
} catch {
|
||||
// 网络层已统一提示，不再重复 message.error
|
||||
} finally {
|
||||
treeLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 根据 record 初始化表单 */
|
||||
const initFormFromRecord = (record: any) => {
|
||||
const initFormFromRecord = async (record: any) => {
|
||||
const fresh = getDefaultForm();
|
||||
if (!record) {
|
||||
// 新增模式：加载权限树（不传 roleId，后端返回全量未选中树）
|
||||
Object.assign(formData, fresh);
|
||||
await loadPermissionTree(0);
|
||||
return;
|
||||
}
|
||||
// 编辑模式：回填角色名 + 加载该角色的权限树
|
||||
Object.assign(formData, {
|
||||
...fresh,
|
||||
roleName: record.roleName || '',
|
||||
// 编辑时默认全选（演示用，后续应按 record.permissions 回填）
|
||||
checkedKeys: [...ALL_KEYS],
|
||||
});
|
||||
await loadPermissionTree(record.roleId);
|
||||
};
|
||||
|
||||
/** 监听 visible 重置 */
|
||||
useEffect(() => {
|
||||
if (props.visible) {
|
||||
initFormFromRecord(props.record);
|
||||
setTimeout(() => formRef.value?.clearValidate(), 0);
|
||||
}
|
||||
}, [() => props.visible]);
|
||||
// 监听 visible 变化，弹窗打开时重新初始化
|
||||
// immediate: true 是因为父组件用 v-if 控制显隐，
|
||||
// 组件挂载时 visible 就已经是 true，不会触发 watch 变更回调
|
||||
watch(
|
||||
() => props.visible,
|
||||
async (visible) => {
|
||||
if (visible) {
|
||||
await 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 handleCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
|
||||
formData.checkedKeys = checkedKeys as string[];
|
||||
formData.halfCheckedKeys = (info as any).halfCheckedKeys || [];
|
||||
};
|
||||
|
||||
/** 提交 */
|
||||
@@ -82,9 +109,19 @@ export default defineComponent({
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
const isEdit = !!props.record;
|
||||
// 仅提取叶节点 { id, selected } 传给后端
|
||||
const leafPermissions = extractLeafPermissions(rawApiTree.value);
|
||||
|
||||
props.onSave({
|
||||
roleName: formData.roleName,
|
||||
roleId: props.record?.roleId,
|
||||
// 完整选中 key 列表（含父节点），供向后兼容
|
||||
permissions: formData.checkedKeys,
|
||||
// 仅叶节点数据，后端实际需要的格式
|
||||
leafPermissions,
|
||||
isEdit,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -116,15 +153,21 @@ export default defineComponent({
|
||||
|
||||
{/* 菜单权限配置 */}
|
||||
<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>
|
||||
<Spin spinning={treeLoading.value}>
|
||||
<div class={styles.treeWrapper}>
|
||||
{treeData.value.length > 0 ? (
|
||||
<Tree
|
||||
checkable
|
||||
defaultExpandAll
|
||||
treeData={treeData.value}
|
||||
checkedKeys={formData.checkedKeys}
|
||||
onCheck={handleCheck}
|
||||
/>
|
||||
) : (
|
||||
!treeLoading.value && <div class={styles.treeEmpty}>暂无权限数据</div>
|
||||
)}
|
||||
</div>
|
||||
</Spin>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
|
||||
@@ -1,13 +1,21 @@
|
||||
import { defineComponent, ref, reactive, computed } from 'vue';
|
||||
import { Modal, Form, Input, Table, Button, Space, Pagination } from 'ant-design-vue';
|
||||
import { useEffect, useState } from '@/hooks';
|
||||
import { defineComponent, reactive } from 'vue';
|
||||
import { Modal, Form, Input, Table, Button, Space, Pagination, message } from 'ant-design-vue';
|
||||
import { h } from 'vue';
|
||||
import { StatusTag, type StatusTagTone } from '@/components';
|
||||
import { useState, useThrottleFn, useEffect } from '@/hooks';
|
||||
import { getRoleUsageUserList, type RoleUsageUserVO } from '@/api/roles';
|
||||
import styles from './UserListModal.module.less';
|
||||
|
||||
/** 状态映射 */
|
||||
const STATUS_MAP: Record<number, { label: string; tone: StatusTagTone }> = {
|
||||
1: { label: '正常', tone: 'success' },
|
||||
0: { label: '停用', tone: 'danger' },
|
||||
};
|
||||
|
||||
interface UserListModalProps {
|
||||
visible: boolean;
|
||||
role: any;
|
||||
users: any[];
|
||||
renderStatus: (status: string) => any;
|
||||
roleId: number;
|
||||
roleName: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
@@ -15,123 +23,155 @@ 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 },
|
||||
roleId: { type: Number, default: 0 },
|
||||
roleName: { type: String, default: '' },
|
||||
onClose: { type: Function, required: true },
|
||||
},
|
||||
setup(props: UserListModalProps) {
|
||||
const filterForm = reactive({ searchKeyword: '' });
|
||||
|
||||
const filterForm = reactive({ text: '' });
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<RoleUsageUserVO[]>([]);
|
||||
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)),
|
||||
);
|
||||
});
|
||||
const columns = [
|
||||
{ title: '姓名', dataIndex: 'realName', key: 'realName', width: 120 },
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 160 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 90,
|
||||
align: 'center' as const,
|
||||
customRender: ({ text }: { text: number }) => {
|
||||
const info = STATUS_MAP[text] || { label: String(text ?? '-'), tone: 'default' as const };
|
||||
return h(StatusTag, { label: info.label, tone: info.tone });
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/** 监听 visible/users 变化重置分页 */
|
||||
/** 搜索（节流 500ms） */
|
||||
const doSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getRoleUsageUserList({
|
||||
page: String(pagination.value.current),
|
||||
limit: String(pagination.value.pageSize),
|
||||
roleId: String(props.roleId),
|
||||
...(filterForm.text.trim() ? { text: filterForm.text.trim() } : {}),
|
||||
});
|
||||
if (res.code === 200) {
|
||||
setDataSource(res.data.list);
|
||||
setPagination({ ...pagination.value, total: res.data.total });
|
||||
} else {
|
||||
message.error(res.msg || '查询失败');
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.error('角色用户列表查询失败:', e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 弹窗打开时自动加载 */
|
||||
useEffect(() => {
|
||||
setPagination({ current: 1, pageSize: 10, total: filteredUsers.value.length });
|
||||
}, [() => props.visible, () => props.users.length]);
|
||||
if (props.visible) {
|
||||
filterForm.text = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
doSearch();
|
||||
}
|
||||
}, [() => props.visible]);
|
||||
|
||||
/** 查询（重置到第 1 页） */
|
||||
const handleSearch = () => {
|
||||
setPagination({ ...pagination.value, total: filteredUsers.value.length, current: 1 });
|
||||
setPagination({ ...pagination.value, current: 1 });
|
||||
doSearch();
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
filterForm.searchKeyword = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: props.users.length });
|
||||
};
|
||||
/** 重置 */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.text = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
doSearch();
|
||||
}, 500);
|
||||
|
||||
/** 分页变更 */
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
setPagination({ ...pagination.value, current: page, pageSize });
|
||||
doSearch();
|
||||
};
|
||||
|
||||
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
|
||||
wrapClassName={styles.userListModalMain}
|
||||
>
|
||||
{/* 筛选 */}
|
||||
<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}
|
||||
return () => (
|
||||
<Modal
|
||||
title={`${props.roleName} · 用户列表`}
|
||||
visible={props.visible}
|
||||
onCancel={props.onClose}
|
||||
width={640}
|
||||
footer={null}
|
||||
centered
|
||||
destroyOnClose
|
||||
wrapClassName={styles.userListModalMain}
|
||||
>
|
||||
{/* 筛选 */}
|
||||
<div class={styles.filter}>
|
||||
<Form layout="inline" model={filterForm}>
|
||||
<Form.Item label="姓名/手机号" name="text">
|
||||
<Input
|
||||
value={filterForm.text}
|
||||
placeholder="请输入"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.text = val?.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" onClick={handleSearch} loading={loading.value}>
|
||||
查询
|
||||
</Button>
|
||||
<Button onClick={handleReset}>重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{/* 表格 */}
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={dataSource.value}
|
||||
loading={loading.value}
|
||||
scroll={{ y: 300 }}
|
||||
size="small"
|
||||
pagination={false}
|
||||
bordered
|
||||
rowKey="phone"
|
||||
/>
|
||||
|
||||
{/* 底部 */}
|
||||
<div class={styles.bottom}>
|
||||
<div class={styles.total}>共 {pagination.value.total} 人</div>
|
||||
<Button onClick={props.onClose}>关闭</Button>
|
||||
</div>
|
||||
|
||||
{/* 分页 */}
|
||||
{pagination.value.total > pagination.value.pageSize && (
|
||||
<div class={styles.paginationRow}>
|
||||
<Pagination
|
||||
current={pagination.value.current}
|
||||
pageSize={pagination.value.pageSize}
|
||||
total={pagination.value.total}
|
||||
size="small"
|
||||
showSizeChanger
|
||||
showTotal={(total: number) => `共 ${total} 条`}
|
||||
onChange={handlePageChange}
|
||||
onShowSizeChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
/**
|
||||
* 角色权限 - 表单域控制器
|
||||
*
|
||||
* 集中管理角色表单的规则、菜单权限树 mock 数据与提示文案。
|
||||
* 集中管理角色表单的规则、权限树转换工具。
|
||||
*/
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import type { PermissionTreeNode } from '@/api/roles';
|
||||
|
||||
// ============================================================
|
||||
// 规则
|
||||
@@ -16,50 +17,82 @@ export const roleNameRules: Rule[] = [
|
||||
];
|
||||
|
||||
// ============================================================
|
||||
// 菜单权限树（mock）
|
||||
// 权限树 — 类型 & 工具
|
||||
// ============================================================
|
||||
|
||||
export interface MenuPermNode {
|
||||
/** 唯一 key，作为 Tree 节点的 key */
|
||||
/** Ant Design Tree 组件使用的节点结构 */
|
||||
export interface AntdTreeNode {
|
||||
key: string;
|
||||
/** 显示标题 */
|
||||
title: string;
|
||||
/** 子节点 */
|
||||
children?: MenuPermNode[];
|
||||
children?: AntdTreeNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 完整菜单权限树。
|
||||
* 后续可改为从后端接口拉取（接口应返回该结构）。
|
||||
* 将后端权限树节点递归转为 antd Tree 格式，
|
||||
* 同时收集叶节点中 selected===true 的 key。
|
||||
*
|
||||
* ## 级联规则
|
||||
* - `selected` 仅叶节点有实际值（true / false / null）
|
||||
* - 父节点的勾选状态由子节点的 selected 推导（全选=勾选，部分选=半选）
|
||||
* - antd Tree 的 checkedKeys 传所有选中的 key（含父节点），Tree 自动处理级联
|
||||
*/
|
||||
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: '赛事操作日志',
|
||||
},
|
||||
];
|
||||
function convertNode(node: PermissionTreeNode, leafKeys: Set<string>): AntdTreeNode {
|
||||
const key = String(node.id);
|
||||
const hasChildren = node.children && node.children.length > 0;
|
||||
|
||||
if (!hasChildren) {
|
||||
// 叶节点：根据 selected 收集
|
||||
if (node.selected === true) {
|
||||
leafKeys.add(key);
|
||||
}
|
||||
return { key, title: node.name };
|
||||
}
|
||||
|
||||
// 父节点：递归处理子节点
|
||||
const children = node.children!.map((child) => convertNode(child, leafKeys));
|
||||
return { key, title: node.name, children };
|
||||
}
|
||||
|
||||
/**
|
||||
* 将后端 PermissionTreeNode[] 转为：
|
||||
* 1. antd Tree 可用的 treeData
|
||||
* 2. 由叶节点 selected 推导出的完整 checkedKeys（含父节点）
|
||||
*/
|
||||
export function buildTreeData(apiTree: PermissionTreeNode[]): {
|
||||
treeData: AntdTreeNode[];
|
||||
checkedKeys: string[];
|
||||
} {
|
||||
const leafKeys = new Set<string>();
|
||||
const treeData = apiTree.map((node) => convertNode(node, leafKeys));
|
||||
return { treeData, checkedKeys: Array.from(leafKeys) };
|
||||
}
|
||||
|
||||
/**
|
||||
* 从后端权限树中提取叶节点数据，整理为提交格式。
|
||||
*
|
||||
* 只返回叶节点，格式为 `{ id, selected }` 数组。
|
||||
* 父节点的勾选状态由后端根据叶节点数据推导，前端不传父节点。
|
||||
*/
|
||||
export function extractLeafPermissions(
|
||||
apiTree: PermissionTreeNode[],
|
||||
): { id: number; selected: boolean }[] {
|
||||
const result: { id: number; selected: boolean }[] = [];
|
||||
|
||||
const walk = (nodes: PermissionTreeNode[]) => {
|
||||
for (const node of nodes) {
|
||||
const isLeaf = !node.children || node.children.length === 0;
|
||||
if (isLeaf) {
|
||||
result.push({
|
||||
id: node.id,
|
||||
// null 视为 false，即未授权
|
||||
selected: node.selected === true,
|
||||
});
|
||||
} else {
|
||||
walk(node.children!);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
walk(apiTree);
|
||||
return result;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, onMounted } 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';
|
||||
@@ -97,8 +97,6 @@ export default defineComponent({
|
||||
handleDelete,
|
||||
handleViewUsers,
|
||||
handleCloseUserList,
|
||||
getRoleUsers,
|
||||
renderStatus,
|
||||
} = useRoleModel();
|
||||
|
||||
const { containerRef, height } = useContainerSize();
|
||||
@@ -116,16 +114,23 @@ export default defineComponent({
|
||||
},
|
||||
];
|
||||
|
||||
// ===== 初始化 =====
|
||||
onMounted(() => {
|
||||
handleSearch();
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class={pageStyles.containerMain}>
|
||||
{/* ===== 筛选区 ===== */}
|
||||
<div class={pageStyles.filter}>
|
||||
<Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
|
||||
<Form.Item label="角色" name="searchKeyword">
|
||||
<Form.Item label="角色名称" name="name">
|
||||
<Input
|
||||
placeholder="请输入"
|
||||
value={filterForm.name}
|
||||
placeholder="请输入角色名称"
|
||||
style={{ width: '200px' }}
|
||||
allowClear
|
||||
onUpdate:value={(val: any) => (filterForm.name = val?.target?.value ?? val ?? '')}
|
||||
onPressEnter={handleSearch}
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -194,9 +199,8 @@ export default defineComponent({
|
||||
{userListVisible.value && (
|
||||
<UserListModal
|
||||
visible={userListVisible.value}
|
||||
role={currentRole.value}
|
||||
users={getRoleUsers(currentRole.value?.roleId || '')}
|
||||
renderStatus={renderStatus}
|
||||
roleId={currentRole.value?.roleId ?? 0}
|
||||
roleName={currentRole.value?.roleName ?? ''}
|
||||
onClose={handleCloseUserList}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -1,152 +1,12 @@
|
||||
import { computed, reactive, toRef, Ref, h } from 'vue';
|
||||
import { computed, reactive, toRef, Ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { StatusTag, type StatusTagTone } from '@/components';
|
||||
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',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* 临时排序：对假数据按创建时间倒序排列。
|
||||
* 【注意】实际项目中排序由后端接口负责，对接后端后请删除此函数及相关调用。
|
||||
*/
|
||||
const sortByTimeDesc = (list: any[], field: string) =>
|
||||
[...list].sort((a, b) => dayjs(b[field]).valueOf() - dayjs(a[field]).valueOf());
|
||||
|
||||
const SORTED_MOCK_DATA = sortByTimeDesc(MOCK_DATA, 'createTime');
|
||||
|
||||
/** 角色下用户列表 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; tone: StatusTagTone }> = {
|
||||
active: { label: '正常', tone: 'success' },
|
||||
disabled: { label: '禁用', tone: 'danger' },
|
||||
};
|
||||
import {
|
||||
getRoleList,
|
||||
deleteRole,
|
||||
type TournamentAdminRolePageVO,
|
||||
type RoleListQueryParams,
|
||||
} from '@/api/roles';
|
||||
|
||||
// ============================================================
|
||||
// Model
|
||||
@@ -158,23 +18,17 @@ const STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
export function useRoleModel() {
|
||||
// ===== 筛选条件 =====
|
||||
const filterForm = reactive({
|
||||
searchKeyword: '',
|
||||
name: '', // 角色名称
|
||||
});
|
||||
|
||||
// 防抖 300ms
|
||||
const { debouncedValue: debouncedKeyword } = useDebounce(
|
||||
toRef(filterForm, 'searchKeyword') as Ref<string>,
|
||||
{ delay: 300 },
|
||||
);
|
||||
const { debouncedValue: debouncedName } = useDebounce(toRef(filterForm, 'name') as Ref<string>, {
|
||||
delay: 300,
|
||||
});
|
||||
|
||||
// ===== 表格状态 =====
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [dataSource, setDataSource] = useState<any[]>(SORTED_MOCK_DATA);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: SORTED_MOCK_DATA.length,
|
||||
});
|
||||
const [dataSource, setDataSource] = useState<TournamentAdminRolePageVO[]>([]);
|
||||
const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
|
||||
|
||||
// ===== 弹窗状态 =====
|
||||
const [formVisible, setFormVisible] = useState<boolean>(false);
|
||||
@@ -199,34 +53,48 @@ export function useRoleModel() {
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 200 },
|
||||
];
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => debouncedKeyword.value.trim() !== '');
|
||||
// ===== 构建 API 查询参数 =====
|
||||
const buildQueryParams = (): RoleListQueryParams => {
|
||||
const params: RoleListQueryParams = {
|
||||
page: String(pagination.value.current),
|
||||
limit: String(pagination.value.pageSize),
|
||||
};
|
||||
if (filterForm.name.trim()) params.name = filterForm.name.trim();
|
||||
return params;
|
||||
};
|
||||
|
||||
// ===== 计算属性 =====
|
||||
const hasFilter = computed(() => debouncedName.value.trim() !== '');
|
||||
const isEdit = computed(() => editingRecord.value !== null);
|
||||
|
||||
// ===== 方法 =====
|
||||
|
||||
/** 查询 */
|
||||
/** 查询（节流 500ms） */
|
||||
const handleSearch = useThrottleFn(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('搜索条件:', { keyword: debouncedKeyword.value });
|
||||
// TODO: 替换为真实 API 调用
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
setPagination({ ...pagination.value, total: SORTED_MOCK_DATA.length });
|
||||
message.success('查询成功');
|
||||
const queryParams = buildQueryParams();
|
||||
console.log('角色列表查询参数:', queryParams);
|
||||
const res = await getRoleList(queryParams);
|
||||
if (res.code === 200) {
|
||||
setDataSource(res.data.list);
|
||||
setPagination({ ...pagination.value, total: res.data.total });
|
||||
} else {
|
||||
message.error(res.msg || '查询失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '查询失败');
|
||||
console.error('角色列表查询失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
/** 重置 */
|
||||
/** 重置（重置后自动查询） */
|
||||
const handleReset = useThrottleFn(() => {
|
||||
filterForm.searchKeyword = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: SORTED_MOCK_DATA.length });
|
||||
setDataSource(SORTED_MOCK_DATA);
|
||||
filterForm.name = '';
|
||||
setPagination({ current: 1, pageSize: 10, total: 0 });
|
||||
setDataSource([]);
|
||||
setTimeout(() => handleSearch(), 350);
|
||||
}, 500);
|
||||
|
||||
const handlePageChange = (page: number, pageSize: number) => {
|
||||
@@ -258,12 +126,12 @@ export function useRoleModel() {
|
||||
setFormSubmitting(true);
|
||||
try {
|
||||
console.log(isEdit.value ? '编辑角色' : '新增角色', formPayload);
|
||||
// TODO: 替换为真实 API 调用
|
||||
// TODO: 替换为真实 API 调用（/sys/role/save、/sys/role/update）
|
||||
message.success(isEdit.value ? '编辑成功' : '新增成功');
|
||||
handleCloseForm();
|
||||
handleSearch();
|
||||
} catch (error: any) {
|
||||
message.error(error.msg || '操作失败');
|
||||
} catch {
|
||||
// 网络层已统一提示，不再重复 message.error
|
||||
} finally {
|
||||
setFormSubmitting(false);
|
||||
}
|
||||
@@ -273,12 +141,15 @@ export function useRoleModel() {
|
||||
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 || '删除失败');
|
||||
const res = await deleteRole(record.roleId);
|
||||
if (res.code === 200) {
|
||||
setDataSource(dataSource.value.filter((item: any) => item.roleId !== record.roleId));
|
||||
message.success('删除成功');
|
||||
} else {
|
||||
message.error(res.msg || '删除失败');
|
||||
}
|
||||
} catch {
|
||||
// 网络层已统一提示，不再重复 message.error
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -296,15 +167,6 @@ export function useRoleModel() {
|
||||
setCurrentRole(null);
|
||||
};
|
||||
|
||||
/** 根据 roleId 获取该角色下的用户列表 */
|
||||
const getRoleUsers = (roleId: string) => MOCK_USERS[roleId] || [];
|
||||
|
||||
/** 状态 StatusTag 渲染 */
|
||||
const renderStatus = (status: string) => {
|
||||
const info = STATUS_MAP[status] || { label: status || '-', tone: 'default' as const };
|
||||
return h(StatusTag, { label: info.label, tone: info.tone });
|
||||
};
|
||||
|
||||
return {
|
||||
filterForm,
|
||||
loading,
|
||||
@@ -328,7 +190,5 @@ export function useRoleModel() {
|
||||
handleDelete,
|
||||
handleViewUsers,
|
||||
handleCloseUserList,
|
||||
getRoleUsers,
|
||||
renderStatus,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@ const getDefaultForm = () => ({
|
||||
});
|
||||
|
||||
/** 新增用户默认密码 */
|
||||
const DEFAULT_USER_PASSWORD = 'A8888888';
|
||||
const DEFAULT_USER_PASSWORD = 'yp888888';
|
||||
|
||||
/** 获取新增时的表单初始值（预填默认密码） */
|
||||
const getAddForm = () => ({
|
||||
|
||||
Reference in New Issue
Block a user