back-bar组件

This commit is contained in:
禺狨 2023-03-07 10:26:52 +08:00
parent 2176bbf7a1
commit 87b29bf0cd
10 changed files with 485 additions and 397 deletions

View File

@ -0,0 +1,20 @@
.back-bar-box {
width: 100%;
height: auto;
float: left;
display: flex;
align-items: center;
.line {
width: 1px;
height: 14px;
background-color: #d8d8d8;
margin-right: 15px;
}
.name {
font-size: 14px;
font-weight: 600;
color: #333333;
}
}

View File

@ -0,0 +1,29 @@
import { Button } from "antd";
import { useState } from "react";
import styles from "./index.module.less";
import { useNavigate } from "react-router-dom";
import { LeftOutlined } from "@ant-design/icons";
interface PropInterface {
title: string;
}
export const BackBartment = (props: PropInterface) => {
const [loading, setLoading] = useState<boolean>(true);
const navigate = useNavigate();
return (
<div className={styles["back-bar-box"]}>
<Button
style={{paddingLeft:0}}
icon={<LeftOutlined />}
type="link"
danger
onClick={() => navigate(-1)}
>
</Button>
<div className={styles["line"]}></div>
<div className={styles["name"]}>{props.title}</div>
</div>
);
};

View File

@ -2,4 +2,5 @@ export * from "./footer";
export * from "./header"; export * from "./header";
export * from "./leftMenu"; export * from "./leftMenu";
export * from "./upload-image-button"; export * from "./upload-image-button";
export * from ".//treeDepartment"; export * from "./treeDepartment";
export * from "./back-bar";

View File

@ -3,7 +3,7 @@ import { Row, Col, Form, Input, Cascader, Button, message } from "antd";
import styles from "./create.module.less"; import styles from "./create.module.less";
import { user, department } from "../../api/index"; import { user, department } from "../../api/index";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { UploadImageButton } from "../../compenents"; import { UploadImageButton, BackBartment } from "../../compenents";
interface Option { interface Option {
value: string | number; value: string | number;
@ -80,90 +80,95 @@ export const MemberCreatePage: React.FC = () => {
<> <>
<Row className="playedu-main-body"> <Row className="playedu-main-body">
<Col> <Col>
<Form <div className="float-left mb-24">
form={form} <BackBartment title="添加学员" />
name="basic" </div>
labelCol={{ span: 8 }} <div className="float-left">
wrapperCol={{ span: 16 }} <Form
style={{ width: 600 }} form={form}
initialValues={{ remember: true }} name="basic"
onFinish={onFinish} labelCol={{ span: 8 }}
onFinishFailed={onFinishFailed} wrapperCol={{ span: 16 }}
autoComplete="off" style={{ width: 600 }}
> initialValues={{ remember: true }}
<Form.Item onFinish={onFinish}
label="学员姓名" onFinishFailed={onFinishFailed}
name="name" autoComplete="off"
rules={[{ required: true, message: "请输入学员姓名!" }]}
> >
<Input placeholder="请输入学员姓名" /> <Form.Item
</Form.Item> label="学员姓名"
<Form.Item name="name"
label="学员头像" rules={[{ required: true, message: "请输入学员姓名!" }]}
name="avatar"
rules={[{ required: true, message: "请上传学员头像!" }]}
>
<div className="c-flex">
<div className="d-flex">
<UploadImageButton
onSelected={(url) => {
setAvatar(url);
form.setFieldsValue({ avatar: url });
}}
></UploadImageButton>
</div>
{avatar && (
<img className="form-avatar mt-10" src={avatar} alt="" />
)}
</div>
</Form.Item>
<Form.Item
label="登录密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password placeholder="请输入登录密码" />
</Form.Item>
<Form.Item
label="学员邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input placeholder="请输入学员邮箱" />
</Form.Item>
<Form.Item
label="身份证号"
name="idCard"
rules={[{ required: true, message: "请输入身份证号!" }]}
>
<Input placeholder="请输入身份证号" />
</Form.Item>
<Form.Item
label="学员部门"
name="dep_ids"
rules={[{ required: true, message: "请选择学员部门!" }]}
>
<Cascader
options={departments}
onChange={onChange}
multiple
maxTagCount="responsive"
placeholder="请选择学员部门"
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
> >
<Input placeholder="请输入学员姓名" />
</Button> </Form.Item>
</Form.Item> <Form.Item
</Form> label="学员头像"
name="avatar"
rules={[{ required: true, message: "请上传学员头像!" }]}
>
<div className="c-flex">
<div className="d-flex">
<UploadImageButton
onSelected={(url) => {
setAvatar(url);
form.setFieldsValue({ avatar: url });
}}
></UploadImageButton>
</div>
{avatar && (
<img className="form-avatar mt-10" src={avatar} alt="" />
)}
</div>
</Form.Item>
<Form.Item
label="登录密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password placeholder="请输入登录密码" />
</Form.Item>
<Form.Item
label="学员邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input placeholder="请输入学员邮箱" />
</Form.Item>
<Form.Item
label="身份证号"
name="idCard"
rules={[{ required: true, message: "请输入身份证号!" }]}
>
<Input placeholder="请输入身份证号" />
</Form.Item>
<Form.Item
label="学员部门"
name="dep_ids"
rules={[{ required: true, message: "请选择学员部门!" }]}
>
<Cascader
options={departments}
onChange={onChange}
multiple
maxTagCount="responsive"
placeholder="请选择学员部门"
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
>
</Button>
</Form.Item>
</Form>
</div>
</Col> </Col>
</Row> </Row>
</> </>

View File

@ -3,7 +3,7 @@ import { Row, Col, Form, Input, Cascader, Button, message } from "antd";
import styles from "./update.module.less"; import styles from "./update.module.less";
import { user, department } from "../../api/index"; import { user, department } from "../../api/index";
import { useParams, useNavigate } from "react-router-dom"; import { useParams, useNavigate } from "react-router-dom";
import { UploadImageButton } from "../../compenents"; import { UploadImageButton, BackBartment } from "../../compenents";
interface Option { interface Option {
value: string | number; value: string | number;
@ -102,97 +102,102 @@ export const MemberUpdatePage: React.FC = () => {
<> <>
<Row className="playedu-main-body"> <Row className="playedu-main-body">
<Col> <Col>
<Form <div className="float-left mb-24">
form={form} <BackBartment title="编辑学员" />
name="basic" </div>
labelCol={{ span: 8 }} <div className="float-left">
wrapperCol={{ span: 16 }} <Form
style={{ width: 600 }} form={form}
initialValues={{ remember: true }} name="basic"
onFinish={onFinish} labelCol={{ span: 8 }}
onFinishFailed={onFinishFailed} wrapperCol={{ span: 16 }}
autoComplete="off" style={{ width: 600 }}
> initialValues={{ remember: true }}
<Form.Item onFinish={onFinish}
label="学员姓名" onFinishFailed={onFinishFailed}
name="name" autoComplete="off"
rules={[{ required: true, message: "请输入学员姓名!" }]}
> >
<Input placeholder="请输入学员姓名" /> <Form.Item
</Form.Item> label="学员姓名"
<Form.Item name="name"
label="学员昵称" rules={[{ required: true, message: "请输入学员姓名!" }]}
name="nickname"
rules={[{ required: true, message: "请输入学员昵称!" }]}
>
<Input placeholder="请输入学员昵称" />
</Form.Item>
<Form.Item
label="学员头像"
name="avatar"
rules={[{ required: true, message: "请上传学员头像!" }]}
>
<div className="c-flex">
<div className="d-flex">
<UploadImageButton
onSelected={(url) => {
setAvatar(url);
form.setFieldsValue({ avatar: url });
}}
></UploadImageButton>
</div>
{avatar && (
<img className="form-avatar mt-10" src={avatar} alt="" />
)}
</div>
</Form.Item>
<Form.Item
label="登录密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password placeholder="请输入登录密码" />
</Form.Item>
<Form.Item
label="学员邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input placeholder="请输入学员邮箱" />
</Form.Item>
<Form.Item
label="身份证号"
name="idCard"
rules={[{ required: true, message: "请输入身份证号!" }]}
>
<Input placeholder="请输入身份证号" />
</Form.Item>
<Form.Item
label="学员部门"
name="dep_ids"
rules={[{ required: true, message: "请选择学员部门!" }]}
>
<Cascader
options={departments}
onChange={onChange}
multiple
maxTagCount="responsive"
placeholder="请选择学员部门"
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
> >
<Input placeholder="请输入学员姓名" />
</Button> </Form.Item>
</Form.Item> <Form.Item
</Form> label="学员昵称"
name="nickname"
rules={[{ required: true, message: "请输入学员昵称!" }]}
>
<Input placeholder="请输入学员昵称" />
</Form.Item>
<Form.Item
label="学员头像"
name="avatar"
rules={[{ required: true, message: "请上传学员头像!" }]}
>
<div className="c-flex">
<div className="d-flex">
<UploadImageButton
onSelected={(url) => {
setAvatar(url);
form.setFieldsValue({ avatar: url });
}}
></UploadImageButton>
</div>
{avatar && (
<img className="form-avatar mt-10" src={avatar} alt="" />
)}
</div>
</Form.Item>
<Form.Item
label="登录密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password placeholder="请输入登录密码" />
</Form.Item>
<Form.Item
label="学员邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input placeholder="请输入学员邮箱" />
</Form.Item>
<Form.Item
label="身份证号"
name="idCard"
rules={[{ required: true, message: "请输入身份证号!" }]}
>
<Input placeholder="请输入身份证号" />
</Form.Item>
<Form.Item
label="学员部门"
name="dep_ids"
rules={[{ required: true, message: "请选择学员部门!" }]}
>
<Cascader
options={departments}
onChange={onChange}
multiple
maxTagCount="responsive"
placeholder="请选择学员部门"
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
>
</Button>
</Form.Item>
</Form>
</div>
</Col> </Col>
</Row> </Row>
</> </>

View File

@ -3,6 +3,7 @@ import { Row, Col, Form, Input, Select, Switch, Button, message } from "antd";
import styles from "./create.module.less"; import styles from "./create.module.less";
import { adminUser } from "../../../api/index"; import { adminUser } from "../../../api/index";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { BackBartment } from "../../../compenents";
export const AdministratorCreatePage: React.FC = () => { export const AdministratorCreatePage: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -62,81 +63,86 @@ export const AdministratorCreatePage: React.FC = () => {
<> <>
<Row className="playedu-main-body"> <Row className="playedu-main-body">
<Col> <Col>
<Form <div className="float-left mb-24">
form={form} <BackBartment title="添加管理员" />
name="basic" </div>
labelCol={{ span: 8 }} <div className="float-left">
wrapperCol={{ span: 16 }} <Form
style={{ width: 600 }} form={form}
initialValues={{ remember: true }} name="basic"
onFinish={onFinish} labelCol={{ span: 8 }}
onFinishFailed={onFinishFailed} wrapperCol={{ span: 16 }}
autoComplete="off" style={{ width: 600 }}
> initialValues={{ remember: true }}
<Form.Item label="角色" name="roleIds"> onFinish={onFinish}
<div className="d-flex"> onFinishFailed={onFinishFailed}
<Select autoComplete="off"
style={{ width: 300 }}
mode="multiple"
allowClear
placeholder="请选择角色"
onChange={handleChange}
options={roles}
/>
<Button
type="link"
danger
onClick={() => navigate(`/system/adminroles`)}
>
</Button>
</div>
</Form.Item>
<Form.Item
label="姓名"
name="name"
rules={[{ required: true, message: "请输入姓名!" }]}
> >
<Input style={{ width: 300 }} placeholder="请输入姓名" /> <Form.Item label="角色" name="roleIds">
</Form.Item> <div className="d-flex">
<Form.Item <Select
label="邮箱" style={{ width: 300 }}
name="email" mode="multiple"
rules={[{ required: true, message: "请输入学员邮箱!" }]} allowClear
> placeholder="请选择角色"
<Input style={{ width: 300 }} placeholder="请输入学员邮箱" /> onChange={handleChange}
</Form.Item> options={roles}
<Form.Item />
label="密码" <Button
name="password" type="link"
rules={[{ required: true, message: "请输入登录密码!" }]} danger
> onClick={() => navigate(`/system/adminroles`)}
<Input.Password >
style={{ width: 300 }}
placeholder="请输入登录密码" </Button>
/> </div>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="禁止登录" label="姓名"
name="is_ban_login" name="name"
valuePropName="checked" rules={[{ required: true, message: "请输入姓名!" }]}
rules={[{ required: true, message: "请选择禁止登录!" }]}
>
<Switch onChange={onChange} />
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
> >
<Input style={{ width: 300 }} placeholder="请输入姓名" />
</Button> </Form.Item>
</Form.Item> <Form.Item
</Form> label="邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input style={{ width: 300 }} placeholder="请输入学员邮箱" />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password
style={{ width: 300 }}
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="禁止登录"
name="is_ban_login"
valuePropName="checked"
rules={[{ required: true, message: "请选择禁止登录!" }]}
>
<Switch onChange={onChange} />
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
>
</Button>
</Form.Item>
</Form>
</div>
</Col> </Col>
</Row> </Row>
</> </>

View File

@ -3,6 +3,7 @@ import { Row, Col, Form, Input, Select, Switch, Button, message } from "antd";
import styles from "./update.module.less"; import styles from "./update.module.less";
import { adminUser } from "../../../api/index"; import { adminUser } from "../../../api/index";
import { useParams, useNavigate } from "react-router-dom"; import { useParams, useNavigate } from "react-router-dom";
import { BackBartment } from "../../../compenents";
export const AdministratorUpdatePage: React.FC = () => { export const AdministratorUpdatePage: React.FC = () => {
const params = useParams(); const params = useParams();
@ -80,80 +81,85 @@ export const AdministratorUpdatePage: React.FC = () => {
<> <>
<Row className="playedu-main-body"> <Row className="playedu-main-body">
<Col> <Col>
<Form <div className="float-left mb-24">
form={form} <BackBartment title="编辑管理员" />
name="basic" </div>
labelCol={{ span: 8 }} <div className="float-left">
wrapperCol={{ span: 16 }} <Form
style={{ width: 600 }} form={form}
initialValues={{ remember: true }} name="basic"
onFinish={onFinish} labelCol={{ span: 8 }}
onFinishFailed={onFinishFailed} wrapperCol={{ span: 16 }}
autoComplete="off" style={{ width: 600 }}
> initialValues={{ remember: true }}
<Form.Item label="角色" name="roleIds"> onFinish={onFinish}
<div className="d-flex"> onFinishFailed={onFinishFailed}
<Select autoComplete="off"
style={{ width: 300 }}
mode="multiple"
allowClear
placeholder="请选择角色"
onChange={handleChange}
options={roles}
/>
<Button
type="link"
danger
onClick={() => navigate(`/system/adminroles`)}
>
</Button>
</div>
</Form.Item>
<Form.Item
label="姓名"
name="name"
rules={[{ required: true, message: "请输入姓名!" }]}
> >
<Input style={{ width: 300 }} placeholder="请输入姓名" /> <Form.Item label="角色" name="roleIds">
</Form.Item> <div className="d-flex">
<Form.Item <Select
label="邮箱" style={{ width: 300 }}
name="email" mode="multiple"
rules={[{ required: true, message: "请输入学员邮箱!" }]} allowClear
> placeholder="请选择角色"
<Input style={{ width: 300 }} placeholder="请输入学员邮箱" /> onChange={handleChange}
</Form.Item> options={roles}
<Form.Item />
label="密码" <Button
name="password" type="link"
rules={[{ required: true, message: "请输入登录密码!" }]} danger
> onClick={() => navigate(`/system/adminroles`)}
<Input.Password >
style={{ width: 300 }}
placeholder="请输入登录密码" </Button>
/> </div>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="禁止登录" label="姓名"
name="is_ban_login" name="name"
valuePropName="checked" rules={[{ required: true, message: "请输入姓名!" }]}
>
<Switch onChange={onChange} />
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
> >
<Input style={{ width: 300 }} placeholder="请输入姓名" />
</Button> </Form.Item>
</Form.Item> <Form.Item
</Form> label="邮箱"
name="email"
rules={[{ required: true, message: "请输入学员邮箱!" }]}
>
<Input style={{ width: 300 }} placeholder="请输入学员邮箱" />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[{ required: true, message: "请输入登录密码!" }]}
>
<Input.Password
style={{ width: 300 }}
placeholder="请输入登录密码"
/>
</Form.Item>
<Form.Item
label="禁止登录"
name="is_ban_login"
valuePropName="checked"
>
<Switch onChange={onChange} />
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
>
</Button>
</Form.Item>
</Form>
</div>
</Col> </Col>
</Row> </Row>
</> </>

View File

@ -3,6 +3,7 @@ import { Row, Col, Form, Input, Select, Button, message } from "antd";
import styles from "./create.module.less"; import styles from "./create.module.less";
import { adminRole } from "../../../api/index"; import { adminRole } from "../../../api/index";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { BackBartment } from "../../../compenents";
export const AdminrolesCreatePage: React.FC = () => { export const AdminrolesCreatePage: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -47,47 +48,52 @@ export const AdminrolesCreatePage: React.FC = () => {
<> <>
<Row className="playedu-main-body"> <Row className="playedu-main-body">
<Col> <Col>
<Form <div className="float-left mb-24">
form={form} <BackBartment title="添加管理员角色" />
name="basic" </div>
labelCol={{ span: 8 }} <div className="float-left">
wrapperCol={{ span: 16 }} <Form
style={{ width: 600 }} form={form}
initialValues={{ remember: true }} name="basic"
onFinish={onFinish} labelCol={{ span: 8 }}
onFinishFailed={onFinishFailed} wrapperCol={{ span: 16 }}
autoComplete="off" style={{ width: 600 }}
> initialValues={{ remember: true }}
<Form.Item onFinish={onFinish}
label="姓名" onFinishFailed={onFinishFailed}
name="name" autoComplete="off"
rules={[{ required: true, message: "请输入角色名!" }]}
> >
<Input style={{ width: 300 }} placeholder="请输入角色名" /> <Form.Item
</Form.Item> label="姓名"
<Form.Item label="权限" name="permission_ids"> name="name"
<Select rules={[{ required: true, message: "请输入角色名!" }]}
style={{ width: 300 }}
mode="multiple"
allowClear
placeholder="请选择权限"
onChange={handleChange}
options={permissions}
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
> >
<Input style={{ width: 300 }} placeholder="请输入角色名" />
</Button> </Form.Item>
</Form.Item> <Form.Item label="权限" name="permission_ids">
</Form> <Select
style={{ width: 300 }}
mode="multiple"
allowClear
placeholder="请选择权限"
onChange={handleChange}
options={permissions}
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
>
</Button>
</Form.Item>
</Form>
</div>
</Col> </Col>
</Row> </Row>
</> </>

View File

@ -15,6 +15,7 @@ import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
import { adminRole } from "../../../api/index"; import { adminRole } from "../../../api/index";
import { dateFormat } from "../../../utils/index"; import { dateFormat } from "../../../utils/index";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { BackBartment } from "../../../compenents";
interface DataType { interface DataType {
id: React.Key; id: React.Key;
@ -106,6 +107,9 @@ export const SystemAdminrolesPage: React.FC = () => {
return ( return (
<> <>
<div className="playedu-main-body"> <div className="playedu-main-body">
<div className="float-left mb-24">
<BackBartment title="管理员角色" />
</div>
<div className="float-left j-b-flex mb-24"> <div className="float-left j-b-flex mb-24">
<div className="d-flex"> <div className="d-flex">
<Link <Link

View File

@ -3,6 +3,7 @@ import { Row, Col, Form, Input, Select, Button, message } from "antd";
import styles from "./update.module.less"; import styles from "./update.module.less";
import { adminRole } from "../../../api/index"; import { adminRole } from "../../../api/index";
import { useParams, useNavigate } from "react-router-dom"; import { useParams, useNavigate } from "react-router-dom";
import { BackBartment } from "../../../compenents";
export const AdminrolesUpdatePage: React.FC = () => { export const AdminrolesUpdatePage: React.FC = () => {
const params = useParams(); const params = useParams();
@ -62,47 +63,52 @@ export const AdminrolesUpdatePage: React.FC = () => {
<> <>
<Row className="playedu-main-body"> <Row className="playedu-main-body">
<Col> <Col>
<Form <div className="float-left mb-24">
form={form} <BackBartment title="编辑管理员角色" />
name="basic" </div>
labelCol={{ span: 8 }} <div className="float-left">
wrapperCol={{ span: 16 }} <Form
style={{ width: 600 }} form={form}
initialValues={{ remember: true }} name="basic"
onFinish={onFinish} labelCol={{ span: 8 }}
onFinishFailed={onFinishFailed} wrapperCol={{ span: 16 }}
autoComplete="off" style={{ width: 600 }}
> initialValues={{ remember: true }}
<Form.Item onFinish={onFinish}
label="姓名" onFinishFailed={onFinishFailed}
name="name" autoComplete="off"
rules={[{ required: true, message: "请输入角色名!" }]}
> >
<Input style={{ width: 300 }} placeholder="请输入角色名" /> <Form.Item
</Form.Item> label="姓名"
<Form.Item label="权限" name="permission_ids"> name="name"
<Select rules={[{ required: true, message: "请输入角色名!" }]}
style={{ width: 300 }}
mode="multiple"
allowClear
placeholder="请选择权限"
onChange={handleChange}
options={permissions}
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
> >
<Input style={{ width: 300 }} placeholder="请输入角色名" />
</Button> </Form.Item>
</Form.Item> <Form.Item label="权限" name="permission_ids">
</Form> <Select
style={{ width: 300 }}
mode="multiple"
allowClear
placeholder="请选择权限"
onChange={handleChange}
options={permissions}
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
>
</Button>
</Form.Item>
</Form>
</div>
</Col> </Col>
</Row> </Row>
</> </>