管理人员页面重构

This commit is contained in:
禺狨 2023-04-04 11:19:44 +08:00
parent add06808ab
commit 10e4d0dae1
2 changed files with 48 additions and 35 deletions

View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
import { Modal, Select, Form, Input, message } from "antd";
import { Drawer, Select, Space, Button, Form, Input, message } from "antd";
import styles from "./create.module.less";
import { adminRole } from "../../../../api/index";
@ -74,37 +74,45 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
return (
<>
<Modal
<Drawer
title="新建角色"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
onClose={onCancel}
maskClosable={false}
open={open}
footer={
<Space className="j-r-flex">
<Button onClick={() => onCancel()}> </Button>
<Button onClick={() => form.submit()} type="primary">
</Button>
</Space>
}
width={634}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
name="adminroles-create"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="角色名"
label="角色名"
name="name"
rules={[{ required: true, message: "请输入角色名!" }]}
rules={[{ required: true, message: "请输入角色名!" }]}
>
<Input style={{ width: 200 }} placeholder="请输入角色名" />
<Input
style={{ width: 424 }}
placeholder="请在此处输入角色名称"
/>
</Form.Item>
<Form.Item label="操作权限" name="action_ids">
<Select
style={{ width: 200 }}
style={{ width: 424 }}
mode="multiple"
allowClear
placeholder="请选择权限"
@ -113,7 +121,7 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
</Form.Item>
<Form.Item label="数据权限" name="permission_ids">
<Select
style={{ width: 200 }}
style={{ width: 424 }}
mode="multiple"
allowClear
placeholder="请选择权限"
@ -122,7 +130,7 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
</Form.Item>
</Form>
</div>
</Modal>
</Drawer>
</>
);
};

View File

@ -1,10 +1,10 @@
import React, { useState, useEffect } from "react";
import { Modal, Form, Input, Select, message } from "antd";
import { Drawer, Select, Space, Button, Form, Input, message } from "antd";
import styles from "./update.module.less";
import { adminRole } from "../../../../api/index";
interface PropInterface {
id: number;
id: any;
open: boolean;
onCancel: () => void;
}
@ -24,7 +24,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
}, []);
useEffect(() => {
if (id === 0 || "undefined" || "") {
if (id === undefined) {
return;
}
getDetail();
@ -86,22 +86,27 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
return (
<>
<Modal
title="编辑角色"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
<Drawer
title="新建角色"
onClose={onCancel}
maskClosable={false}
open={open}
footer={
<Space className="j-r-flex">
<Button onClick={() => onCancel()}> </Button>
<Button onClick={() => form.submit()} type="primary">
</Button>
</Space>
}
width={634}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
name="adminroles-update"
labelCol={{ span: 5 }}
wrapperCol={{ span: 19 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
@ -112,11 +117,11 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
name="name"
rules={[{ required: true, message: "请输入角色名!" }]}
>
<Input style={{ width: 200 }} placeholder="请输入角色名" />
<Input style={{ width: 424 }} placeholder="请输入角色名" />
</Form.Item>
<Form.Item label="操作权限" name="action_ids">
<Select
style={{ width: 200 }}
style={{ width: 424 }}
mode="multiple"
allowClear
placeholder="请选择权限"
@ -125,7 +130,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
</Form.Item>
<Form.Item label="数据权限" name="permission_ids">
<Select
style={{ width: 200 }}
style={{ width: 424 }}
mode="multiple"
allowClear
placeholder="请选择权限"
@ -134,7 +139,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
</Form.Item>
</Form>
</div>
</Modal>
</Drawer>
</>
);
};