mac
6 months ago
13 changed files with 468 additions and 43 deletions
-
28src/api/index.ts
-
24src/assets/js/publicFunc.ts
-
3src/components/Header/index.tsx
-
3src/components/Menu/index.tsx
-
228src/pages/config-admin/admin-manage.tsx
-
124src/pages/config-admin/admin-permissions.tsx
-
11src/pages/container/index.tsx
-
4src/pages/login/index.tsx
-
4src/pages/system/withdraw.tsx
-
26src/pages/vip-manage/proxy-list.tsx
-
29src/route/routes.ts
-
5src/utils/axios.ts
@ -0,0 +1,228 @@ |
|||
import api from "@/api" |
|||
import MyTable from "@/components/MyTable" |
|||
import { DeleteOutlined, EditOutlined } from "@ant-design/icons"; |
|||
import { Button, Form, Input, Modal, Popconfirm, Radio, Switch, notification } from "antd"; |
|||
import React, { useRef, useState } from "react" |
|||
|
|||
const AdminManage = () => { |
|||
|
|||
const tableRef = useRef(null) |
|||
const currentItem = useRef({} as any) |
|||
const [visible, setVisible] = useState(false) |
|||
const [visibleUpdate, setVisibleUpdate] = useState(false) |
|||
const [form] = Form.useForm() |
|||
const [updateForm] = Form.useForm() |
|||
const [path, setPath] = useState('info') |
|||
|
|||
const createAdmin = async (values) => { |
|||
setVisible(false) |
|||
const params = { |
|||
...values, |
|||
status_code: values.status_code ? 1 : 2 |
|||
} |
|||
const res: any = await api.add_adminList(params) |
|||
if (res.code === 0) { |
|||
tableRef.current.update() |
|||
form.resetFields() |
|||
notification.success({ |
|||
message: '添加成功' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const updateAdmin = async (values) => { |
|||
setVisibleUpdate(false) |
|||
const params = { |
|||
...values, |
|||
id: currentItem.current.id |
|||
} |
|||
if (path === 'info') { |
|||
params.status_code = values.status_code ? 1 : 2; |
|||
} |
|||
let res: any = {} |
|||
if (path === 'info') { |
|||
res = await api.update_adminList(params) |
|||
} else { |
|||
res = await api.update_adminPassword(params) |
|||
} |
|||
if (res.code === 0) { |
|||
tableRef.current.update() |
|||
updateForm.resetFields() |
|||
notification.success({ |
|||
message: '修改成功' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '操作', |
|||
width: 200, |
|||
render: (row) => ( |
|||
<div style={{ display: 'flex' }}> |
|||
{/* <Popconfirm title="确认删除该管理员吗？" onConfirm={() => deleteAdmin(row)}> |
|||
<DeleteOutlined /> |
|||
</Popconfirm> */} |
|||
<EditOutlined onClick={() => { |
|||
currentItem.current = row |
|||
setVisibleUpdate(true) |
|||
updateForm.setFieldsValue({ |
|||
...row, |
|||
status_code: row.status_code === 1 ? true : false |
|||
}) |
|||
}} /> |
|||
</div> |
|||
) |
|||
}, |
|||
{ |
|||
dataIndex: 'user_name', |
|||
title: '帐号', |
|||
width: 200 |
|||
}, |
|||
{ |
|||
dataIndex: 'email', |
|||
title: '邮箱', |
|||
width: 200 |
|||
}, |
|||
{ |
|||
dataIndex: 'name', |
|||
title: '姓名', |
|||
width: 200 |
|||
}, |
|||
{ |
|||
dataIndex: 'phone', |
|||
title: '手机', |
|||
width: 200 |
|||
}, |
|||
{ |
|||
dataIndex: 'position', |
|||
title: '职位', |
|||
width: 200 |
|||
}, |
|||
{ |
|||
dataIndex: 'status', |
|||
title: '状态', |
|||
}, |
|||
// {
|
|||
// dataIndex: 'status_code',
|
|||
// title: '状态码 1:正常 2:锁定',
|
|||
// width: 200
|
|||
// },
|
|||
|
|||
]; |
|||
|
|||
|
|||
return ( |
|||
<div> |
|||
<MyTable |
|||
columns={columns} |
|||
ref={tableRef} |
|||
apiFun={api.get_adminList} |
|||
header={ |
|||
<Button type="primary" style={{ marginBottom: 20 }} onClick={() => { |
|||
setVisible(true) |
|||
}}>添加管理员</Button> |
|||
} |
|||
/> |
|||
|
|||
<Modal |
|||
visible={visible} |
|||
onCancel={() => setVisible(false)} |
|||
title="添加管理员" |
|||
footer={() => null} |
|||
> |
|||
<Form form={form} onFinish={createAdmin}> |
|||
<Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]} > |
|||
<Input placeholder="请输入姓名" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item name="phone" label="手机号" rules={[{ required: true, message: '请输入手机号' }]}> |
|||
<Input placeholder="请输入手机号" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item name="email" label="邮箱" rules={[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '邮箱格式错误' }]}> |
|||
<Input placeholder="请输入邮箱" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item name="position" label="职位" rules={[{ required: true, message: '请输入职位' }]}> |
|||
<Input placeholder="请输入职位" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item name="user_name" label="账号" rules={[{ required: true, message: '请输入账号' }]}> |
|||
<Input placeholder="请输入账号" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]}> |
|||
<Input placeholder="请输入密码" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item name="status_code" initialValue={true} valuePropName="checked" label="冻结/正常"> |
|||
<Switch /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item style={{ display: 'flex' }} label="操作"> |
|||
<Button onClick={() => setVisible(false)}>取消</Button> |
|||
<Button type="primary" htmlType="submit" style={{ marginLeft: 20 }}>确认</Button> |
|||
</Form.Item> |
|||
</Form> |
|||
</Modal> |
|||
|
|||
<Modal |
|||
visible={visibleUpdate} |
|||
footer={() => null} |
|||
onCancel={() => setVisibleUpdate(false)} |
|||
title={`修改管理员信息：${currentItem.current.name}`} |
|||
> |
|||
|
|||
<Radio.Group value={path} onChange={e => setPath(e.target.value)} style={{ marginBottom: 20 }}> |
|||
<Radio.Button value="info">修改信息</Radio.Button> |
|||
<Radio.Button value="pwd">修改密码</Radio.Button> |
|||
</Radio.Group> |
|||
|
|||
<Form form={updateForm} onFinish={updateAdmin}> |
|||
{ |
|||
path === 'info' ? ( |
|||
<> |
|||
<Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]} > |
|||
<Input placeholder="请输入姓名" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item name="phone" label="手机号" rules={[{ required: true, message: '请输入手机号' }]}> |
|||
<Input placeholder="请输入手机号" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item name="email" label="邮箱" rules={[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '邮箱格式错误' }]}> |
|||
<Input placeholder="请输入邮箱" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item name="position" label="职位" rules={[{ required: true, message: '请输入职位' }]}> |
|||
<Input placeholder="请输入职位" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item name="user_name" label="账号" rules={[{ required: true, message: '请输入账号' }]}> |
|||
<Input placeholder="请输入账号" /> |
|||
</Form.Item> |
|||
|
|||
<Form.Item name="status_code" initialValue={true} valuePropName="checked" label="冻结/正常"> |
|||
<Switch /> |
|||
</Form.Item> |
|||
|
|||
</> |
|||
) : ( |
|||
<Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]}> |
|||
<Input placeholder="请输入密码" /> |
|||
</Form.Item> |
|||
) |
|||
} |
|||
|
|||
<Form.Item style={{ display: 'flex' }} label="操作"> |
|||
<Button onClick={() => setVisibleUpdate(false)}>取消</Button> |
|||
<Button type="primary" htmlType="submit" style={{ marginLeft: 20 }}>确认</Button> |
|||
</Form.Item> |
|||
</Form> |
|||
</Modal> |
|||
</div > |
|||
) |
|||
} |
|||
|
|||
export default AdminManage |
|||
@ -0,0 +1,124 @@ |
|||
import api from "@/api" |
|||
import MyTable from "@/components/MyTable" |
|||
import { EditOutlined } from "@ant-design/icons" |
|||
import { Modal, Tree, notification } from "antd" |
|||
import React, { useRef, useState } from "react" |
|||
|
|||
const AdminPermissions = () => { |
|||
|
|||
const tableRef = useRef(null) |
|||
const currentItem = useRef({} as any) |
|||
const [visible, setVisible] = useState(false) |
|||
const [treeData, setTreeData] = useState([] as any) |
|||
const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]); |
|||
const treeDataKey = useRef({} as any) |
|||
|
|||
const getPermissions = async (row) => { |
|||
currentItem.current = row |
|||
const res: any = await api.get_adminPermissionList({ id: row.id }) |
|||
console.log(res); |
|||
if (res.code === 0) { |
|||
setTreeData(res.data) |
|||
getAllChecked(res.data) |
|||
setVisible(true) |
|||
} |
|||
} |
|||
|
|||
// 获取所有选中的key
|
|||
const getAllChecked = (data) => { |
|||
let keys = []; |
|||
let stack = [...data]; |
|||
|
|||
while (stack.length > 0) { |
|||
const node = stack.pop(); |
|||
treeDataKey.current[node.key] = node.id |
|||
if (node.flag) { |
|||
keys.push(node.key); |
|||
} |
|||
|
|||
if (node.children) { |
|||
stack = stack.concat(node.children); |
|||
} |
|||
} |
|||
setCheckedKeys(keys) |
|||
} |
|||
|
|||
const setPermission = async () => { |
|||
const ids = checkedKeys.map(item => treeDataKey.current[item]) |
|||
if (ids.length <= 0) return notification.warning({ |
|||
message: '请选择权限' |
|||
}) |
|||
const params = { |
|||
adminId: currentItem.current.id, |
|||
menuId: ids.join(',') |
|||
} |
|||
setVisible(false) |
|||
setCheckedKeys([]) |
|||
currentItem.current = {} |
|||
treeDataKey.current = {} |
|||
setTreeData([]) |
|||
|
|||
const res: any = await api.set_adminPermissionList(params) |
|||
if (res.code === 0) { |
|||
tableRef.current.update() |
|||
notification.success({ |
|||
message: '修改成功' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '操作', |
|||
render: (row) => ( |
|||
<div> |
|||
<EditOutlined onClick={() => getPermissions(row)} /> |
|||
</div> |
|||
) |
|||
}, |
|||
{ |
|||
title: 'ID', |
|||
dataIndex: 'id' |
|||
}, |
|||
{ |
|||
title: '名称', |
|||
dataIndex: 'name' |
|||
} |
|||
] |
|||
|
|||
const onCheck = (checkedKeysValue) => { |
|||
console.log('onCheck', checkedKeysValue); |
|||
setCheckedKeys(checkedKeysValue as React.Key[]); |
|||
}; |
|||
|
|||
return ( |
|||
<div> |
|||
<MyTable |
|||
ref={tableRef} |
|||
apiFun={api.get_adminPermissionsUser} |
|||
columns={columns} |
|||
> |
|||
|
|||
</MyTable> |
|||
|
|||
<Modal |
|||
title={`分配权限:${currentItem.current.name}`} |
|||
visible={visible} |
|||
onCancel={() => setVisible(false)} |
|||
onOk={setPermission} |
|||
> |
|||
|
|||
<Tree |
|||
checkable |
|||
defaultExpandAll={true} |
|||
onCheck={onCheck} |
|||
checkedKeys={checkedKeys} |
|||
treeData={treeData} |
|||
/> |
|||
|
|||
</Modal> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default AdminPermissions |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue