umi#Access TypeScript Examples
The following examples show how to use
umi#Access.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From anew-server with MIT License | 5 votes |
|
SessionList: React.FC = () => {
const actionRef = useRef<ActionType>();
const access = useAccess();
const handleDelete = (record: any) => {
if (!record) return;
const content = `您是否要注销该连接？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteSession(record).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
if (actionRef.current) {
actionRef.current.reload();
}
}
});
},
onCancel() { },
});
};
const columns: ProColumns<API.SessionList>[] = [
{
dataIndex: 'index',
valueType: 'indexBorder',
width: 48,
},
{
title: '用户名',
dataIndex: 'user_name',
},
{
title: '主机名',
dataIndex: 'host_name',
},
{
title: '接入时间',
dataIndex: 'connect_time',
//sorter: true,
},
{
title: '标识',
dataIndex: 'connect_id',
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record) => (
<>
<Divider type="vertical" />
<Access accessible={access.hasPerms(['admin', 'session:delete'])}>
<Tooltip title="注销">
<DeleteOutlined
style={{ fontSize: '17px', color: 'red' }}
onClick={() => handleDelete({ key: record.connect_id })}
/>
</Tooltip>
</Access>
</>
),
},
];
return (
<PageHeaderWrapper>
{access.hasPerms(['admin', 'session:list']) && <ProTable
pagination={false}
search={false}
actionRef={actionRef}
rowKey="connect_id"
request={(params) => querySessions({ ...params })}
columns={columns}
/>}
</PageHeaderWrapper>
);
}
Example #2
| Source File: index.tsx From anew-server with MIT License | 4 votes |
|
HostGroupList: React.FC = () => {
const [createVisible, setCreateVisible] = useState<boolean>(false);
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const [formValues, setFormValues] = useState<API.HostGroupList>();
const access = useAccess();
const handleDelete = (record: API.Ids) => {
if (!record) return;
if (Array.isArray(record.ids) && !record.ids.length) return;
const content = `您是否要删除这${Array.isArray(record.ids) ? record.ids.length : ''}项？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteHostGroup(record).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
if (actionRef.current) {
actionRef.current.reload();
}
}
});
},
onCancel() { },
});
};
const columns: ProColumns<API.HostGroupList>[] = [
{
title: '名称',
dataIndex: 'name',
},
{
title: '说明',
dataIndex: 'desc',
search: false,
},
{
title: '创建人',
dataIndex: 'creator',
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record) => (
<>
<Divider type="vertical" />
<Tooltip title="修改">
<FormOutlined
style={{ fontSize: '17px', color: '#52c41a' }}
onClick={() => {
setFormValues(record);
setUpdateVisible(true);
}}
/>
</Tooltip>
<Divider type="vertical" />
<Tooltip title="删除">
<DeleteOutlined
style={{ fontSize: '17px', color: 'red' }}
onClick={() => handleDelete({ ids: [record.id] })}
/>
</Tooltip>
</>
),
},
];
return (
<PageHeaderWrapper>
{/* 权限控制显示内容 */}
{access.hasPerms(['admin', 'host:group:list']) && <ProTable
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Access accessible={access.hasPerms(['admin', 'host:group:create'])}>
<Button key="1" type="primary" onClick={() => setCreateVisible(true)}>
<PlusOutlined /> 新建
</Button>
</Access>,
selectedRows && selectedRows.length > 0 && (
<Access accessible={access.hasPerms(['admin', 'host:group:delete'])}>
<Button
key="2"
type="primary"
onClick={() => handleDelete({ ids: selectedRows.map((item) => item.id) })}
danger
>
<DeleteOutlined /> 删除
</Button>
</Access>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
<div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div>
)}
request={async (params) => queryHostGroups({ params }).then((res) => res.data)}
columns={columns}
rowSelection={{}}
/>}
{createVisible && (
<CreateForm
actionRef={actionRef}
handleChange={setCreateVisible}
modalVisible={createVisible}
/>
)}
{updateVisible && (
<UpdateForm
actionRef={actionRef}
handleChange={setUpdateVisible}
modalVisible={updateVisible}
values={formValues}
/>
)}
</PageHeaderWrapper>
);
}
Example #3
| Source File: index.tsx From anew-server with MIT License | 4 votes |
|
HostList: React.FC = () => {
const { initialState } = useModel('@@initialState');
if (!initialState || !initialState.DictObj) {
return null;
}
const authType: optionsType[] = initialState.DictObj.auth_type.map((item: any) => ({ label: item.dict_value, value: item.dict_key }));
const hostType: optionsType[] = initialState.DictObj.host_type.map((item: any) => ({ label: item.dict_value, value: item.dict_key }));
const [createVisible, setCreateVisible] = useState<boolean>(false);
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
const [recordVisible, setRecordVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const [formValues, setFormValues] = useState<API.HostList>();
const [hostGroup, setHostGroup] = useState<API.HostGroupList[]>([]);
const [group_id, setGroupId] = useState<string>();
const [hostId, setHostId] = useState<number>();
const access = useAccess();
const { consoleWin, setConsoleWin } = useModel('global');
const handleDelete = (record: API.Ids) => {
if (!record) return;
if (Array.isArray(record.ids) && !record.ids.length) return;
const content = `您是否要删除这${Array.isArray(record.ids) ? record.ids.length : ''}项？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteHost(record).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
if (actionRef.current) {
actionRef.current.reload();
}
}
});
},
onCancel() { },
});
};
const saveTtys = (val: API.TtyList) => {
let hosts = JSON.parse(localStorage.getItem('TABS_TTY_HOSTS') as string)
if (hosts) {
hosts.push(val)
} else {
hosts = []
hosts.push(val)
}
localStorage.setItem('TABS_TTY_HOSTS', JSON.stringify(hosts));
}
useEffect(() => {
queryHostGroups({ all: true, not_null: true }).then((res) => {
if (Array.isArray(res.data.data)) {
setHostGroup([{ id: 0, name: '所有主机' }, ...res.data.data]);
}
});
}, []);
const columns: ProColumns<API.HostList>[] = [
{
title: '主机名',
dataIndex: 'host_name',
},
{
title: '地址',
dataIndex: 'ip_address',
},
{
title: '端口',
dataIndex: 'port',
},
{
title: '主机类型',
dataIndex: 'host_type',
valueType: 'select',
fieldProps: {
options: hostType,
},
},
{
title: '认证类型',
dataIndex: 'auth_type',
valueType: 'select',
fieldProps: {
options: authType,
},
},
{
title: '创建人',
dataIndex: 'creator',
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record) => (
<>
<Tooltip title="控制台">
<CodeTwoTone
style={{ fontSize: '17px', color: 'blue' }}
onClick={() => {
let actKey = "tty1"
let hosts = JSON.parse(localStorage.getItem('TABS_TTY_HOSTS') as string) || []
if (hosts) {
actKey = "tty" + (hosts.length + 1).toString()
}
const hostsObj: API.TtyList = { hostname: record.host_name, ipaddr: record.ip_address, port: record.port, id: record.id.toString(), actKey: actKey, secKey: null }
saveTtys(hostsObj)
if (consoleWin) {
if (!consoleWin.closed) {
consoleWin.focus();
} else {
setConsoleWin(window.open('/asset/console', 'consoleTrm'));
}
} else {
setConsoleWin(window.open('/asset/console', 'consoleTrm'));
}
}}
/>
</Tooltip>
{/* <Divider type="vertical" />
<Tooltip title="详情">
<FileDoneOutlined
style={{ fontSize: '17px', color: '#52c41a' }}
onClick={() => {
setFormValues(record);
handleDescModalVisible(true);
}}
/>
</Tooltip> */}
<Divider type="vertical" />
<TableDropdown
key="actionGroup"
onSelect={(key) => {
switch (key) {
case 'delete':
handleDelete({ ids: [record.id] });
break;
case 'edit':
setFormValues(record);
setUpdateVisible(true);
break;
case 'record':
setHostId(record.id)
setRecordVisible(true);
break;
}
}}
menus={[
{ key: 'edit', name: '修改' },
{ key: 'record', name: '操作录像' },
{ key: 'delete', name: '删除' },
]}
/>
</>
),
},
];
return (
<PageHeaderWrapper>
{/* 权限控制显示内容 */}
{access.hasPerms(['admin', 'host:list']) && <ProTable
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Access accessible={access.hasPerms(['admin', 'host:create'])}>
<Button key="1" type="primary" onClick={() => setCreateVisible(true)}>
<PlusOutlined /> 新建
</Button>
</Access>,
selectedRows && selectedRows.length > 0 && (
<Access accessible={access.hasPerms(['admin', 'host:delete'])}>
<Button
key="2"
type="primary"
onClick={() => handleDelete({ ids: selectedRows.map((item) => item.id) })}
danger
>
<DeleteOutlined /> 删除
</Button>
</Access>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
<div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div>
)}
request={async (params) => queryHosts({ params }).then((res) => res.data)}
params={{ group_id, }}
columns={columns}
rowSelection={{}}
tableRender={(_, dom) => hostGroup.length > 1 ? (
<div style={{ display: 'flex', width: '100%', }}>
<Menu
onSelect={(e) => {
if (e.key === '0') {
setGroupId('');
} else {
setGroupId(e.key);
}
}}
style={{ width: 156 }}
defaultSelectedKeys={['0']}
defaultOpenKeys={['sub1']}
mode="inline"
>
<Menu.SubMenu
key="sub1"
title={
<span>
<UsergroupAddOutlined />
<span>主机分组</span>
</span>
}
>
{hostGroup &&
hostGroup.map((item) => <Menu.Item key={item.id}>{item.name}</Menu.Item>)}
</Menu.SubMenu>
</Menu>
<div style={{ flex: 1, }}>
{dom}
</div>
</div>
) : <div style={{ flex: 1, }}>
{dom}
</div>}
/>}
{createVisible && (
<CreateForm
actionRef={actionRef}
handleChange={setCreateVisible}
modalVisible={createVisible}
/>
)}
{updateVisible && (
<UpdateForm
actionRef={actionRef}
handleChange={setUpdateVisible}
modalVisible={updateVisible}
values={formValues}
/>
)}
{recordVisible && (
<RecordModal
handleChange={setRecordVisible}
modalVisible={recordVisible}
hostId={hostId}
/>
)}
</PageHeaderWrapper>
);
}
Example #4
| Source File: index.tsx From anew-server with MIT License | 4 votes |
|
ApiList: React.FC = () => {
const [createVisible, setCreateVisible] = useState<boolean>(false);
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const [formValues, setFormValues] = useState<API.ApiList>();
const access = useAccess();
const handleDelete = (record: API.Ids) => {
if (!record) return;
if (Array.isArray(record.ids) && !record.ids.length) return;
const content = `您是否要删除这${Array.isArray(record.ids) ? record.ids.length : ''}项？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteApi(record).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
if (actionRef.current) {
actionRef.current.reload();
}
}
});
},
onCancel() { },
});
};
const columns: ProColumns<API.ApiList>[] = [
{
title: '名称',
dataIndex: 'name',
},
{
title: '请求方式',
dataIndex: 'method',
// render: (_, row) => {
// let color = 'blue';
// if (row.method == 'POST') {
// color = 'gold';
// } else if (row.method == 'PATCH') {
// color = 'lime';
// } else if (row.method == 'PUT') {
// color = 'green';
// } else if (row.method == 'DELETE') {
// color = 'red';
// }
// return <Tag color={color}>{row.method}</Tag>;
// },
},
{
title: '访问路径',
dataIndex: 'path',
},
{
title: '权限标识',
dataIndex: 'perms_tag',
},
{
title: '说明',
dataIndex: 'desc',
search: false,
},
{
title: '创建人',
dataIndex: 'creator',
search: false,
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record: API.ApiList) => (
<>
<Access accessible={access.hasPerms(['admin', 'api:update'])}>
<Tooltip title="修改">
<FormOutlined
style={{ fontSize: '17px', color: '#52c41a' }}
onClick={() => {
setFormValues(record);
setUpdateVisible(true);
}}
/>
</Tooltip>
</Access>
<Divider type="vertical" />
<Access accessible={access.hasPerms(['admin', 'api:delete'])}>
<Tooltip title="删除">
<DeleteOutlined
style={{ fontSize: '17px', color: 'red' }}
onClick={() => handleDelete({ ids: [record.id] })}
/>
</Tooltip>
</Access>
</>
),
},
];
return (
<PageHeaderWrapper>
{/* 权限控制显示内容 */}
{access.hasPerms(['admin', 'api:list']) && <ProTable
actionRef={actionRef}
rowKey="id"
pagination={false}
search={false}
toolBarRender={(action, { selectedRows }) => [
<Access accessible={access.hasPerms(['admin', 'api:create'])}>
<Button key="1" type="primary" onClick={() => setCreateVisible(true)}>
<PlusOutlined /> 新建
</Button>
</Access>,
selectedRows && selectedRows.length > 0 && (
<Access accessible={access.hasPerms(['admin', 'api:delete'])}>
<Button
key="2"
type="primary"
onClick={() => handleDelete({ ids: selectedRows.map((item) => item.id) })}
danger
>
<DeleteOutlined /> 删除
</Button>
</Access>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
<div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div>
)}
request={async (params) => queryApis({ ...params })}
columns={columns}
rowSelection={{}}
/>}
{createVisible && (
<CreateForm
actionRef={actionRef}
handleChange={setCreateVisible}
modalVisible={createVisible}
/>
)}
{updateVisible && (
<UpdateForm
actionRef={actionRef}
handleChange={setUpdateVisible}
modalVisible={updateVisible}
values={formValues}
/>
)}
</PageHeaderWrapper>
);
}
Example #5
| Source File: index.tsx From anew-server with MIT License | 4 votes |
|
DeptList: React.FC = () => {
const [createVisible, setCreateVisible] = useState<boolean>(false);
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const [formValues, setFormValues] = useState<API.DeptList>();
const access = useAccess();
const handleDelete = (record: API.Ids) => {
if (!record) return;
if (Array.isArray(record.ids) && !record.ids.length) return;
const content = `您是否要删除这${Array.isArray(record.ids) ? record.ids.length : ''}项？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteDept(record).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
if (actionRef.current) {
actionRef.current.reload();
}
}
});
},
onCancel() { },
});
};
const columns: ProColumns<API.DeptList>[] = [
{
title: '名称',
dataIndex: 'name',
},
{
title: '排序',
dataIndex: 'sort',
search: false,
},
{
title: '创建人',
dataIndex: 'creator',
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record: API.DeptList) => (
<>
<Access accessible={access.hasPerms(['admin', 'dept:update'])}>
<Tooltip title="修改">
<FormOutlined
style={{ fontSize: '17px', color: '#52c41a' }}
onClick={() => {
setFormValues(record);
setUpdateVisible(true);
}}
/>
</Tooltip>
</Access>
<Divider type="vertical" />
<Access accessible={access.hasPerms(['admin', 'dept:delete'])}>
<Tooltip title="删除">
<DeleteOutlined
style={{ fontSize: '17px', color: 'red' }}
onClick={() => handleDelete({ ids: [record.id] })}
/>
</Tooltip>
</Access>
</>
),
},
];
return (
<PageHeaderWrapper>
{/* 权限控制显示内容 */}
{access.hasPerms(['admin', 'dept:list']) && <ProTable
actionRef={actionRef}
rowKey="id"
pagination={false}
toolBarRender={(action, { selectedRows }) => [
<Access accessible={access.hasPerms(['admin', 'dept:create'])}>
<Button key="1" type="primary" onClick={() => setCreateVisible(true)}>
<PlusOutlined /> 新建
</Button>
</Access>,
selectedRows && selectedRows.length > 0 && (
<Access accessible={access.hasPerms(['admin', 'dept:delete'])}>
<Button
key="2"
type="primary"
onClick={() => handleDelete({ ids: selectedRows.map((item) => item.id) })}
danger
>
<DeleteOutlined /> 删除
</Button>
</Access>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
<div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div>
)}
request={async (params) => queryDepts({ ...params })}
columns={columns}
rowSelection={{}}
/>}
{createVisible && (
<CreateForm
actionRef={actionRef}
handleChange={setCreateVisible}
modalVisible={createVisible}
/>
)}
{updateVisible && (
<UpdateForm
actionRef={actionRef}
handleChange={setUpdateVisible}
modalVisible={updateVisible}
values={formValues}
/>
)}
</PageHeaderWrapper>
);
}
Example #6
| Source File: index.tsx From anew-server with MIT License | 4 votes |
|
DictList: React.FC = () => {
const [createVisible, setCreateVisible] = useState<boolean>(false);
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const [formValues, setFormValues] = useState<API.DictList>();
const access = useAccess();
const handleDelete = (record: API.Ids) => {
if (!record) return;
if (Array.isArray(record.ids) && !record.ids.length) return;
const content = `您是否要删除这${Array.isArray(record.ids) ? record.ids.length : ''}项？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteDict(record).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
if (actionRef.current) {
actionRef.current.reload();
}
}
});
},
onCancel() { },
});
};
const columns: ProColumns<API.DictList>[] = [
{
title: '字典标签',
dataIndex: 'dict_key',
},
{
title: '字典键值',
dataIndex: 'dict_value',
},
{
title: '详情',
dataIndex: 'desc',
search: false,
},
{
title: '排序',
dataIndex: 'sort',
search: false,
},
{
title: '创建人',
dataIndex: 'creator',
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record: API.DictList) => (
<>
<Access accessible={access.hasPerms(['admin', 'dict:update'])}>
<Tooltip title="修改">
<FormOutlined
style={{ fontSize: '17px', color: '#52c41a' }}
onClick={() => {
setFormValues(record);
setUpdateVisible(true);
}}
/>
</Tooltip>
</Access>
<Divider type="vertical" />
<Access accessible={access.hasPerms(['admin', 'dict:delete'])}>
<Tooltip title="删除">
<DeleteOutlined
style={{ fontSize: '17px', color: 'red' }}
onClick={() => handleDelete({ ids: [record.id] })}
/>
</Tooltip>
</Access>
</>
),
},
];
return (
<PageHeaderWrapper>
{/* 权限控制显示内容 */}
{access.hasPerms(['admin', 'dict:list']) && <ProTable
actionRef={actionRef}
rowKey="id"
pagination={false}
toolBarRender={(action, { selectedRows }) => [
<Access accessible={access.hasPerms(['admin', 'dict:create'])}>
<Button key="1" type="primary" onClick={() => setCreateVisible(true)}>
<PlusOutlined /> 新建
</Button>
</Access>,
selectedRows && selectedRows.length > 0 && (
<Access accessible={access.hasPerms(['admin', 'dict:delete'])}>
<Button
key="2"
type="primary"
onClick={() => handleDelete({ ids: selectedRows.map((item) => item.id) })}
danger
>
<DeleteOutlined /> 删除
</Button>
</Access>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
<div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div>
)}
request={async (params) => queryDicts({ ...params })}
columns={columns}
rowSelection={{}}
/>}
{createVisible && (
<CreateForm
actionRef={actionRef}
handleChange={setCreateVisible}
modalVisible={createVisible}
/>
)}
{updateVisible && (
<UpdateForm
actionRef={actionRef}
handleChange={setUpdateVisible}
modalVisible={updateVisible}
values={formValues}
/>
)}
</PageHeaderWrapper>
);
}
Example #7
| Source File: index.tsx From anew-server with MIT License | 4 votes |
|
MenuList: React.FC = () => {
const [createVisible, setCreateVisible] = useState<boolean>(false);
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const [formValues, setFormValues] = useState<API.MenuList>();
const access = useAccess();
const handleDelete = (record: API.Ids) => {
if (!record) return;
if (Array.isArray(record.ids) && !record.ids.length) return;
const content = `您是否要删除这${Array.isArray(record.ids) ? record.ids.length : ''}项？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteMenu(record).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
if (actionRef.current) {
actionRef.current.reload();
}
}
});
},
onCancel() { },
});
};
const columns: ProColumns<API.MenuList>[] = [
{
title: '名称',
dataIndex: 'name',
search: false,
},
{
title: '图标',
dataIndex: 'icon',
search: false,
},
{
title: '路径',
dataIndex: 'path',
search: false,
},
{
title: '排序',
dataIndex: 'sort',
search: false,
},
{
title: '创建人',
dataIndex: 'creator',
search: false,
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record: API.MenuList) => (
<>
<Access accessible={access.hasPerms(['admin', 'menu:update'])}>
<Tooltip title="修改">
<FormOutlined
style={{ fontSize: '17px', color: '#52c41a' }}
onClick={() => {
setFormValues(record);
setUpdateVisible(true);
}}
/>
</Tooltip>
</Access>
<Divider type="vertical" />
<Access accessible={access.hasPerms(['admin', 'menu:delete'])}>
<Tooltip title="删除">
<DeleteOutlined
style={{ fontSize: '17px', color: 'red' }}
onClick={() => handleDelete({ ids: [record.id] })}
/>
</Tooltip>
</Access>
</>
),
},
];
return (
<PageHeaderWrapper>
{/* 权限控制显示内容 */}
{access.hasPerms(['admin', 'menu:list']) && <ProTable
actionRef={actionRef}
rowKey="id"
pagination={false}
search={false}
toolBarRender={(action, { selectedRows }) => [
<Access accessible={access.hasPerms(['admin', 'menu:create'])}>
<Button key="1" type="primary" onClick={() => setCreateVisible(true)}>
<PlusOutlined /> 新建
</Button>
</Access>,
selectedRows && selectedRows.length > 0 && (
<Access accessible={access.hasPerms(['admin', 'menu:delete'])}>
<Button
key="2"
type="primary"
onClick={() => handleDelete({ ids: selectedRows.map((item) => item.id) })}
danger
>
<DeleteOutlined /> 删除
</Button>
</Access>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
<div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div>
)}
request={async (params) => queryMenus({ ...params })}
columns={columns}
rowSelection={{}}
/>}
{createVisible && (
<CreateForm
actionRef={actionRef}
handleChange={setCreateVisible}
modalVisible={createVisible}
/>
)}
{updateVisible && (
<UpdateForm
actionRef={actionRef}
handleChange={setUpdateVisible}
modalVisible={updateVisible}
values={formValues}
/>
)}
</PageHeaderWrapper>
);
}
Example #8
| Source File: index.tsx From anew-server with MIT License | 4 votes |
|
OperLogList: React.FC = () => {
const actionRef = useRef<ActionType>();
const access = useAccess();
const handleDelete = (record: API.Ids) => {
if (!record) return;
if (Array.isArray(record.ids) && !record.ids.length) return;
const content = `您是否要删除这${Array.isArray(record.ids) ? record.ids.length : ''}项？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteOperLog(record).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
if (actionRef.current) {
actionRef.current.reload();
}
}
});
},
onCancel() { },
});
};
const columns: ProColumns<API.OperLogList>[] = [
{
title: '接口名称',
dataIndex: 'name',
},
{
title: '请求方式',
dataIndex: 'method',
render: (_, row) => {
let color = 'blue';
if (row.method == 'POST') {
color = 'gold';
} else if (row.method == 'PATCH') {
color = 'lime';
} else if (row.method == 'PUT') {
color = 'green';
} else if (row.method == 'DELETE') {
color = 'red';
}
return <Tag color={color}>{row.method}</Tag>;
},
},
{
title: '访问路径',
dataIndex: 'path',
},
{
title: '响应码',
dataIndex: 'status',
search: false,
render: (_, row) => {
let statusColor = 'red'
if (row.status === 200) {
statusColor = 'green'
} else if (row.status === 500) {
statusColor = 'orange'
}
return (
<Tag color={statusColor}>{row.status}</Tag>
)
}
},
{
title: '用户名',
dataIndex: 'username',
},
{
title: 'IP地址',
dataIndex: 'ip',
},
{
title: '所在地',
dataIndex: 'ip_location',
search: false,
},
{
title: '耗时',
dataIndex: 'latency',
search: false,
render: (_, row) => {
const ms = Number((Number(row.latency) / 1000000).toFixed(2));
let msColor = 'green'
if (ms > 1000 && ms < 5000) {
msColor = 'orange'
} else if (ms > 5000) {
msColor = 'red'
}
return (
<Tag color={msColor}>{ms}</Tag>
)
}
},
{
title: '创建日期',
dataIndex: 'created_at',
search: false,
},
{
title: 'UA',
dataIndex: 'user_agent',
search: false,
render: (_, row) => {
function info() {
Modal.info({
title: 'UA',
content: (
<div>
<p>{row.user_agent}</p>
</div>
),
onOk() { },
});
}
return (
<Button onClick={info} shape="circle" icon={<SearchOutlined />} />
);
},
},
{
title: '详情',
//dataIndex: 'body',
search: false,
render: (_, row) => {
function info() {
Modal.info({
title: '详情',
content: (
<div>
<h3>Request Data</h3>
<p>{row.body}</p>
<h3>Response Data</h3>
<p>{row.data}</p>
</div>
),
onOk() { },
});
}
return (
<Button onClick={info} shape="circle" icon={<SearchOutlined />} />
);
},
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record: API.OperLogList) => (
<>
<Divider type="vertical" />
<Access accessible={access.hasPerms(['admin', 'operlog:delete'])}>
<Tooltip title="删除">
<DeleteOutlined
style={{ fontSize: '17px', color: 'red' }}
onClick={() => handleDelete({ ids: [record.id] })}
/>
</Tooltip>
</Access>
</>
),
},
];
return (
<PageHeaderWrapper>
{/* 权限控制显示内容 */}
{access.hasPerms(['admin', 'operlog:list']) && <ProTable
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
selectedRows && selectedRows.length > 0 && (
<Access accessible={access.hasPerms(['admin', 'operlog:delete'])}>
<Button
key="2"
type="primary"
onClick={() => handleDelete({ ids: selectedRows.map((item) => item.id) })}
danger
>
<DeleteOutlined /> 删除
</Button>
</Access>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
<div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div>
)}
request={async (params) => queryOperLogs({ params }).then((res) => res.data)}
columns={columns}
rowSelection={{}}
/>}
</PageHeaderWrapper>
);
}
Example #9
| Source File: index.tsx From anew-server with MIT License | 4 votes |
|
RoleList: React.FC = () => {
const [createVisible, setCreateVisible] = useState<boolean>(false);
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
const [permsVisible, setPermsVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const [formValues, setFormValues] = useState<API.RoleList>();
const access = useAccess();
const handleDelete = (record: API.Ids) => {
if (!record) return;
if (Array.isArray(record.ids) && !record.ids.length) return;
const content = `您是否要删除这${Array.isArray(record.ids) ? record.ids.length : ''}项？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteRole(record).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
if (actionRef.current) {
actionRef.current.reload();
}
}
});
},
onCancel() { },
});
};
const columns: ProColumns<API.RoleList>[] = [
{
title: '名称',
dataIndex: 'name',
},
{
title: '关键字',
dataIndex: 'keyword',
search: false,
},
{
title: '说明',
dataIndex: 'desc',
},
{
title: '创建人',
dataIndex: 'creator',
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record) => (
<>
<Access accessible={access.hasPerms(['admin', 'role:update:perms'])}>
<Tooltip title="设置权限">
<SafetyCertificateOutlined
style={{ fontSize: '17px', color: 'blue' }}
onClick={() => {
if (record.keyword != 'admin') {
setFormValues(record);
setPermsVisible(true);
} else {
message.info("管理员拥有所有权限");
}
}}
/>
</Tooltip>
</Access>
<Divider type="vertical" />
<Access accessible={access.hasPerms(['admin', 'role:update'])}>
<Tooltip title="修改">
<FormOutlined
style={{ fontSize: '17px', color: '#52c41a' }}
onClick={() => {
setFormValues(record);
setUpdateVisible(true);
}}
/>
</Tooltip>
</Access>
<Divider type="vertical" />
<Access accessible={access.hasPerms(['admin', 'role:delete'])}>
<Tooltip title="删除">
<DeleteOutlined
style={{ fontSize: '17px', color: 'red' }}
onClick={() => handleDelete({ ids: [record.id] })}
/>
</Tooltip>
</Access>
</>
),
},
];
return (
<PageHeaderWrapper>
{/* 权限控制显示内容 */}
{access.hasPerms(['admin', 'role:list']) && <ProTable
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Access accessible={access.hasPerms(['admin', 'role:create'])}>
<Button key="1" type="primary" onClick={() => setCreateVisible(true)}>
<PlusOutlined /> 新建
</Button>
</Access>,
selectedRows && selectedRows.length > 0 && (
<Access accessible={access.hasPerms(['admin', 'role:delete'])}>
<Button
key="2"
type="primary"
onClick={() => handleDelete({ ids: selectedRows.map((item) => item.id) })}
danger
>
<DeleteOutlined /> 删除
</Button>
</Access>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
<div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div>
)}
request={async (params) => queryRoles({ params }).then((res) => res.data)}
columns={columns}
rowSelection={{}}
/>}
{createVisible && (
<CreateForm
actionRef={actionRef}
handleChange={setCreateVisible}
modalVisible={createVisible}
/>
)}
{updateVisible && (
<UpdateForm
actionRef={actionRef}
handleChange={setUpdateVisible}
modalVisible={updateVisible}
values={formValues}
/>
)}
{permsVisible && (
<PermsForm
actionRef={actionRef}
handleChange={setPermsVisible}
modalVisible={permsVisible}
values={formValues}
/>
)}
</PageHeaderWrapper>
);
}
Example #10
| Source File: index.tsx From anew-server with MIT License | 4 votes |
|
UserList: React.FC = () => {
const [createVisible, setCreateVisible] = useState<boolean>(false);
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const [formValues, setFormValues] = useState<API.UserList>();
const access = useAccess();
const handleDelete = (record: API.Ids) => {
if (!record) return;
if (Array.isArray(record.ids) && !record.ids.length) return;
const content = `您是否要删除这${Array.isArray(record.ids) ? record.ids.length : ''}项？`;
Modal.confirm({
title: '注意',
content,
onOk: () => {
deleteUser(record).then((res) => {
if (res.code === 200 && res.status === true) {
message.success(res.message);
if (actionRef.current) {
actionRef.current.reload();
}
}
});
},
onCancel() { },
});
};
const columns: ProColumns<API.UserList>[] = [
{
title: '用户名',
dataIndex: 'username',
},
{
title: '姓名',
dataIndex: 'name',
},
{
title: '手机',
dataIndex: 'mobile',
},
{
title: '邮箱',
dataIndex: 'email',
search: false,
},
{
title: '角色',
dataIndex: 'role',
search: false,
render: (_, record: API.UserList) => {
return record.role.name;
},
},
{
title: '部门',
dataIndex: 'dept',
search: false,
render: (_, record: API.UserList) => {
return record.dept.name;
},
},
{
title: '创建人',
dataIndex: 'creator',
},
{
title: '状态',
dataIndex: 'status',
valueEnum: {
true: {
text: '激活',
status: 'Processing',
},
false: {
text: '禁用',
status: 'Error',
},
},
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render: (_, record: API.UserList) => (
<>
<Access accessible={access.hasPerms(['admin', 'user:update'])}>
<Tooltip title="修改">
<FormOutlined
style={{ fontSize: '17px', color: '#52c41a' }}
onClick={() => {
setFormValues(record);
setUpdateVisible(true);
}}
/>
</Tooltip>
</Access>
<Divider type="vertical" />
<Access accessible={access.hasPerms(['admin', 'user:delete'])}>
<Tooltip title="删除">
<DeleteOutlined
style={{ fontSize: '17px', color: 'red' }}
onClick={() => handleDelete({ ids: [record.id] })}
/>
</Tooltip>
</Access>
</>
),
},
];
return (
<PageHeaderWrapper>
{/* 权限控制显示内容 */}
{access.hasPerms(['admin', 'user:list']) && <ProTable
actionRef={actionRef}
rowKey="id"
toolBarRender={(action, { selectedRows }) => [
<Access accessible={access.hasPerms(['admin', 'user:create'])}>
<Button key="1" type="primary" onClick={() => setCreateVisible(true)}>
<PlusOutlined /> 新建
</Button>
</Access>,
selectedRows && selectedRows.length > 0 && (
<Access accessible={access.hasPerms(['admin', 'user:delete'])}>
<Button
key="2"
type="primary"
onClick={() => handleDelete({ ids: selectedRows.map((item) => item.id) })}
danger
>
<DeleteOutlined /> 删除
</Button>
</Access>
),
]}
tableAlertRender={({ selectedRowKeys, selectedRows }) => (
<div>
已选择{' '}
<a
style={{
fontWeight: 600,
}}
>
{selectedRowKeys.length}
</a>{' '}
项
</div>
)}
request={async (params) => queryUsers({ params }).then((res) => res.data)}
columns={columns}
rowSelection={{}}
/>}
{createVisible && (
<CreateForm
actionRef={actionRef}
handleChange={setCreateVisible}
modalVisible={createVisible}
/>
)}
{updateVisible && (
<UpdateForm
actionRef={actionRef}
handleChange={setUpdateVisible}
modalVisible={updateVisible}
values={formValues}
/>
)}
</PageHeaderWrapper>
);
}
