odjbin/fateverse-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

雷闳焜:完成部门页面开发

Browse Source
This commit is contained in:
Lhk0001
2023-11-02 22:41:47 +08:00
parent c8f4f5e21a
commit 08811a5275
5 changed files with 859 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/api/system/dept.ts Normal file
View File

@@ -0,0 +1,59 @@
import request from "../../utils/request";
interface queryParamsType {
deptName?: string;
state?: number;
}
interface addParamsType {
deptName: string;
leader:string;
leaderId:number;
parentId?:number;
ancestors?:string
delFlag?:string
deptId?:number
email?:string
phone?:string
state?:string
}
export const getDatasAPI = (params: queryParamsType) => {
console.log(params);
return request({
url: "/admin/dept",
method: "get",
params: params,
});
};
export const editDataAPI = (params: addParamsType) => {
console.log(params);
params.leaderId=0
return request({
url: "/admin/dept",
method: "put",
data:params
});
};
export const delDataAPI=(deptId:number)=>{
console.log(deptId);
return request({
url:`admin/dept/${deptId}`,
method:'delete'
})
}
export const addDataAPI=(dept:addParamsType)=>{
console.log(dept);
dept.leaderId=0
return request({
url:`admin/dept`,
method:'post',
data:dept
})
}
export const getDataAPI=(deptId:number)=>{
return request({
url:`/admin/dept/${deptId}`,
method:'get'
})
}

48
src/view/system/dept/index.scss Normal file
View File

@@ -0,0 +1,48 @@
.deptBox{
background: white;
padding: 20px;
.tablebox{
table{
thead{
th::before{
}
tr{
.ant-table-cell{
background: white;
color:#909399
}
}
}
tbody{
tr{
.ant-table-cell{
background: white;
color:#606266
}
}
}
}
.ant-table-cell{
button:focus
{
outline: none;
}
button:hover
{
border: 0px rgb(250, 250, 250);
}
}
}
.newAdd{
display: flex;
margin-top: 15px;
button{
margin-left: 15px;
}
}
}

591
src/view/system/dept/index.tsx
View File

@@ -1,7 +1,586 @@
import React from "react";
export default function Dept() {
return(
<div>dept</div>
)
import React, { useState, createContext, useEffect } from "react";
import {
Button,
Input,
Select,
message,
Table,
Tag,
Modal,
Form,
InputNumber,
Radio,
ConfigProvider,
TreeSelect,
Row,
Col,
// Icon
} from "antd";
import type { ColumnsType } from "antd/es/table";
import {
SyncOutlined,
SearchOutlined,
ExclamationCircleFilled,
SwapOutlined,
} from "@ant-design/icons";
import zh_CN from "antd/es/locale/zh_CN";
import "dayjs/locale/zh-cn";
// import 'moment/locale/zh-cn';
import {
getDatasAPI,
delDataAPI,
addDataAPI,
editDataAPI,
getDataAPI,
} from "../../../api/system/dept";
import "./index.scss";
import { useForm } from "antd/es/form/Form";
interface searchValueType {
deptName: string | undefined;
state: string | undefined;
}
//表格单项数据类型
interface TableDataType {
children: number[];
createTime: string;
deptId: number;
deptName: string;
orderNum: string;
state: string;
}
let thisDept = {};
let treeData: any = [];
let isTreeAnyId = false;
// const Dayjs=dayjs.Dayjs
export default function Role() {
const { confirm } = Modal;
//提示组件
const [messageApi, contextHolder] = message.useMessage();
const [isAllExpend, setIsAllExpend] = useState(true);
//搜索框内所有内容
let [searchValue, setSearchValue] = useState<searchValueType>({
deptName: undefined,
state: undefined,
});
// const is
//树列表数据
// const [isTreeAnyId,setIsTreeAnyId]=useState(false)
const [treeAnyId, setTreeAnyId] = useState<number[]>([]);
const [expandedRowKeys, setExpandedRowKeys] = useState<number[]>([]);
//Modal
const [isModalOpen, setIsModalOpen] = useState(false);
const [modalTitle, setModalTitle] = useState("");
//表单区域
const [isDisbaled, setIsDisbaled] = useState<boolean>(false);
//serach
const [formSearch] = Form.useForm();
const [formModal] = Form.useForm();
//当前页面页数
//表格内数据
let [tableData, setTableData] = useState<TableDataType[]>([]);
//表格格式
const columns: ColumnsType<TableDataType> = [
{
title: "部门名称",
dataIndex: "deptName",
key: "deptName",
},
{
title: "排序",
dataIndex: "orderNum",
key: "orderNum",
},
{
title: "状态",
key: "state",
dataIndex: "state",
render: (text) => (
<>
{text === "0" ? (
<Tag color="success">正常</Tag>
) : (
<Tag color="error">停用</Tag>
)}
</>
),
},
{
title: "创建时间",
key: "createTime",
dataIndex: "createTime",
},
{
title: "操作",
key: "",
dataIndex: "",
render: (text) => (
<>
<Button type="link" onClick={() => handleNewAdd(text.deptId)}>
{"新增"}
</Button>
{/* <Button type='link' danger onClick={() => handleClickDel(text)}>{'删除'}</Button> */}
<Button type="link" onClick={() => handleEdit(text)}>
{"修改"}
</Button>
{text.parentId !== 0 ? (
<Button type="link" onClick={() => handleDelete(text)}>
{"删除"}
</Button>
) : null}
</>
),
},
];
//请求表格内容参数
let [queryTableDataParams, setQueryTableDataParams] = useState<any>({
deptName: undefined,
state: undefined,
});
const handleDelete = (dept: any) => {
confirm({
title: "系统提示",
icon: <ExclamationCircleFilled />,
content: `确定删除角色名称为${dept.deptName}的数据吗`,
okText: "确定",
okType: "danger",
cancelText: "取消",
onOk() {
(async () => {
try {
let { code } = await delDataAPI(dept.deptId);
if (code === 1000) {
console.log("del", dept.deptId);
messageApi.open({
type: "success",
content: "操作成功",
});
getDatas({});
}
} catch (error) {
console.log(error);
}
})();
},
onCancel() {
console.log("Cancel");
},
});
};
const handleSerach = () => {
// console.log("搜索框", searchValue);
// setSearchValue({ ...searchValue });
searchValue = formSearch.getFieldsValue();
console.log(searchValue);
// queryTableDataParams={...searchValue}
setQueryTableDataParams({ ...searchValue });
};
const handleReset = () => {
formSearch.resetFields();
searchValue = formSearch.getFieldsValue();
setQueryTableDataParams({ ...searchValue });
// setSearchValue({ ...searchValue });
// setCount(1)
};
const handleEdit = async (dept: any) => {
if (dept.parentId === 0) {
setIsDisbaled(true);
formModal.setFieldsValue({ ...thisDept, parentId: dept.deptName });
} else {
setIsDisbaled(false);
// formModal.setFieldsValue({...thisDept});
}
await getData(dept.deptId);
if (dept.parentId === 0) {
setIsDisbaled(true);
formModal.setFieldsValue({ ...thisDept, parentId: dept.deptName });
} else {
setIsDisbaled(false);
formModal.setFieldsValue({ ...thisDept });
}
console.log(thisDept);
setModalTitle("修改角色");
setIsModalOpen(true);
// formModal.setFieldsValue({...thisDept});
// formModal.setFieldsValue({...thisDept,parentId:dept.deptName});
};
const handleNewAdd = (deptId?: string) => {
setModalTitle("新增角色");
setIsModalOpen(true);
if (deptId) {
formModal.setFieldsValue({
parentId: deptId,
deptName: undefined,
orderNum: 0,
leader: undefined,
phone: undefined,
email: undefined,
state: "0",
});
} else
formModal.setFieldsValue({
parentId: undefined,
deptName: undefined,
orderNum: 0,
leader: undefined,
phone: undefined,
email: undefined,
state: "0",
});
};
const handleModalOk = () => {
formModal
.validateFields()
.then((values) => {
// form.resetFields();
console.log("add", values);
// onCreate(values);
// setSelectedKeys([])
// setIsModalOpen(false);
if (modalTitle == "新增角色") {
console.log(values);
postAdd(values);
} else if (modalTitle == "修改角色") {
editData(values);
}
})
.catch((info) => {
console.log("Validate Failed:", info);
});
};
//遍历菜单树获取所有节点ID
const getTree = function (tree: any) {
tree.title = tree.deptName;
tree.value = tree.deptId;
if (!isTreeAnyId) {
treeAnyId.push(tree.deptId);
setTreeAnyId([...treeAnyId]);
}
if (tree.children) {
for (let child of tree.children) {
getTree(child);
}
}
// treeData=tree
};
const handleModalCanle = () => {
setIsModalOpen(false);
};
//获取详细数据
const getData = async (deptId: number) => {
try {
const { code, data } = await getDataAPI(deptId);
if (code === 1000) {
thisDept = data;
// console.log(thisDept);
}
} catch (error) {}
};
//修改数据
const editData = async (dept: any) => {
try {
console.log(thisDept);
console.log({ ...thisDept, ...dept });
const { code } = await editDataAPI({ ...thisDept, ...dept });
if (code === 1000) {
messageApi.open({
type: "success",
content: "操作成功",
});
setIsModalOpen(false);
getDatas(queryTableDataParams);
} else {
messageApi.open({
type: "error",
content: "操作失败",
});
}
} catch (error) {}
};
//获取部门数据
const getDatas = async (queryTableDataParams: any) => {
console.log("参数:", queryTableDataParams);
try {
const { code, data } = await getDatasAPI(queryTableDataParams);
console.log(data);
if (code === 1000) {
// console.log(isTreeAnyId);
for (let child of data) {
getTree(child);
}
setExpandedRowKeys([...treeAnyId]);
// console.log(treeAnyId);
console.log(data);
setTableData(data);
treeData = data;
console.log(treeData);
// setTotal(data.total);
}
} catch (err: any) {
console.log("555", err);
}
isTreeAnyId = true;
};
//新增
const postAdd = async (dept: any) => {
try {
let { code } = await addDataAPI(dept);
console.log(code);
if (code === 1000) {
console.log("success");
messageApi.open({
type: "success",
content: "操作成功",
});
formModal.setFieldsValue({});
getDatas({ ...queryTableDataParams });
setIsModalOpen(false);
} else {
messageApi.open({
type: "error",
content: "角色名称已存在",
});
}
} catch (error) {}
};
useEffect(() => {
queryTableDataParams = {
...queryTableDataParams,
};
getDatas(queryTableDataParams);
// console.log(queryParams);
console.log(tableData);
}, [queryTableDataParams]);
return (
<ConfigProvider locale={zh_CN}>
<div className="deptBox">
<Form
layout="inline"
initialValues={undefined}
form={formSearch}
onFinish={handleSerach}
style={{ fontWeight: "700" }}
>
<Form.Item
label="部门名称"
name="deptName"
style={{ width: 300 + "px", marginTop: "10px" }}
>
<Input placeholder="请输入部门名称" allowClear />
</Form.Item>
<Form.Item
label="状态"
name="state"
wrapperCol={{ span: 22 }}
style={{ marginTop: "10px" }}
>
<Select
style={{ width: 300 + "px" }}
allowClear
showSearch
placeholder="请选择部门状态"
optionFilterProp="lable"
options={[
{
value: 0,
label: "正常",
},
{
value: 1,
label: "停用",
},
]}
/>
</Form.Item>
<Form.Item style={{ marginTop: "10px" }}>
<Button
type="primary"
htmlType="submit"
style={{ marginLeft: 20 + "px" }}
onClick={() => handleSerach()}
>
<SearchOutlined />
搜索
</Button>
</Form.Item>
<Form.Item style={{ marginTop: "10px" }}>
<Button onClick={() => handleReset()}>
<SyncOutlined />
重置
</Button>
</Form.Item>
</Form>
{/* 新增 */}
<div className="newAdd">
<Button type="primary" onClick={() => handleNewAdd()}>
+新增
</Button>
<Button
type="primary"
style={{ backgroundColor: "rgb(144,147,153)" }}
onClick={() => {
setIsAllExpend(!isAllExpend);
if (isAllExpend) {
setExpandedRowKeys([]);
} else setExpandedRowKeys(treeAnyId);
}}
>
<SwapOutlined rotate={90} />
{isAllExpend ? "全部收起" : "全部展开"}
</Button>
</div>
{/* 弹出 */}
<Modal
open={isModalOpen}
title={modalTitle}
okText="确定"
cancelText="取消"
onCancel={handleModalCanle}
onOk={handleModalOk}
width={"700px"}
>
<Form
form={formModal}
// layout="inline"
name="form_in_modal"
initialValues={{ state: "0" }}
labelAlign="right"
// labelCol={{span:12}}
wrapperCol={{ span: 16 }}
>
<Row>
<Col span={24}>
<Form.Item
name="parentId"
label="上级部门"
rules={[{ required: true, message: "请选择上级部门" }]}
// style={{ width: 100 + "%" }}
>
<TreeSelect
disabled={isDisbaled}
// showSearch
style={{ width: "559px" }}
// value={value}
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
placeholder="请选择上级部门"
allowClear
// treeDefaultExpandAll
// onChange={onChange}
treeData={treeData}
//
/>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
name="deptName"
label="部门名称"
rules={[{ required: true, message: "请输入部门名称" }]}
// style={{ width: 45 + "%", marginTop: "20px" }}
>
<Input placeholder="请输入部门名称" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
required
name="orderNum"
label="显示顺序"
rules={[{ required: true, message: "请输入角色显示顺序" }]}
// style={{ width: 40 + "%", marginTop: "20px" }}
>
<InputNumber min={0} controls={true} />
</Form.Item>
</Col>
</Row>
<Row style={{translate:'25px'}}>
<Col span={12}>
<Form.Item
name="leader"
label="负责人"
// style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
>
<Input placeholder="请输入负责人" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="phone"
label="联系电话"
// style={{ width: 40 + "%", marginTop: "20px" }}
>
<Input placeholder="请输入联系电话" />
</Form.Item>
</Col>
</Row>
<Row style={{translate:'38px'}}>
<Col span={12}>
<Form.Item
name="email"
label="邮箱"
// style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
>
<Input placeholder="请输入邮箱" />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="state"
label="状态"
className="collection-create-form_last-form-item"
// style={{ width: 40 + "%", marginTop: "20px", marginLeft: "10px" }}
>
<Radio.Group>
<Radio defaultChecked={true} value="0">
正常
</Radio>
<Radio value="1">停用</Radio>
</Radio.Group>
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
{/* 表格 */}
<div className="tablebox">
{contextHolder}
<Table
expandedRowKeys={expandedRowKeys}
onExpand={(expanded, record) => {
// console.log(expanded, record);
if (expanded) {
setExpandedRowKeys([record.deptId, ...expandedRowKeys]);
} else {
const newEx = expandedRowKeys.filter((element) => {
return element != record.deptId;
});
// console.log(expandedRowKeys);
setExpandedRowKeys(newEx);
}
console.log(expandedRowKeys);
}}
columns={columns}
rowKey={"deptId"}
dataSource={tableData}
pagination={false}
/>
</div>
</div>
</ConfigProvider>
);
}

75
src/view/system/role/index.scss
View File

@@ -3,39 +3,48 @@
height: 100%;
background-color: white;
padding: 15px;
.SearchBox{
display: flex;
flex-wrap: wrap;
.ipt{
margin-top: 10px;
margin-right: 10px;
height: 32px;
line-height: 32px;
display: flex;
span{
font-weight: 700;
// line-height: 32px;
padding-right: 12px;
// color: #606266;
}
.item,input{
flex: 1;
font-weight: 400;
// width: 300px;
margin-right: 40px;
.ant-space-item{
// margin-left: 500px;
width: 500px;
}
}
}
.btn{
button{
margin-right: 15px;
}
margin-top: 10px;
}
}
// display: flex;
// flex-wrap: wrap;
// .SearchBox{
// display: flex;
// flex-wrap: wrap;
// .ipt{
// margin-top: 10px;
// margin-right: 10px;
// height: 32px;
// line-height: 32px;
// display: flex;
// span{
// font-weight: 700;
// // line-height: 32px;
// padding-right: 12px;
// // color: #606266;
// }
// .item,input{
// flex: 1;
// font-weight: 400;
// // width: 300px;
// margin-right: 40px;
// .ant-space-item{
// // margin-left: 500px;
// width: 500px;
// }
// }
// }
// .btn{
// button{
// margin-right: 15px;
// }
// margin-top: 10px;
// }
// }
// .btn{
// button{
// margin-right: 15px;
// }
// margin-top: 10px;
// }
.tablebox{
table{
thead{

261
src/view/system/role/index.tsx
View File

@@ -26,9 +26,9 @@ import {
ExclamationCircleFilled,
} from "@ant-design/icons";
import zh_CN from "antd/es/locale/zh_CN";
import dataLocale from 'antd/es/date-picker/locale/zh_CN'
import 'dayjs/locale/zh-cn';
import dayjs,{Dayjs} from "dayjs";
import dataLocale from "antd/es/date-picker/locale/zh_CN";
import "dayjs/locale/zh-cn";
import dayjs, { Dayjs } from "dayjs";
// import 'moment/locale/zh-cn';
import "./index.scss";
import {
@@ -40,20 +40,8 @@ import {
getMenuLiseAPI,
} from "../../../api/system/role";
import { useForm } from "antd/es/form/Form";
interface getSearchValueType {
getSearchValue: (value: any) => void;
}
type FieldType = {
username?: string;
password?: string;
remember?: string;
};
interface Values {
title: string;
description: string;
modifier: string;
}
interface searchValueType {
dateTime: string[] | undefined;
roleName: string | undefined;
roleKey: string | undefined;
state: string | undefined;
@@ -82,17 +70,16 @@ const fieldNames = {
children: "children",
};
let thisrole: any = {};
let treeIds:number[]=[]
let treeIds: number[] = [];
// const Dayjs=dayjs.Dayjs
export default function Role() {
const { confirm } = Modal;
const { RangePicker } = DatePicker;
//时间值
const [selectedDate, setSelectedDate] = useState<[Date:null,Date:null]>([null,null]);
//提示组件
const [messageApi, contextHolder] = message.useMessage();
//搜索框内所有内容
let [searchValue, setSearchValue] = useState<searchValueType>({
dateTime: undefined,
roleName: undefined,
roleKey: undefined,
startTime: undefined,
@@ -102,7 +89,7 @@ export default function Role() {
//树列表数据
const [menuTreeData, setMenuTreeData] = useState([]);
//父子联动
const [checkStrictly,setCheckStrictly]=useState(false)
const [checkStrictly, setCheckStrictly] = useState(false);
//树所有节点IDs
//树是否自动展开
const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
@@ -114,6 +101,8 @@ export default function Role() {
const [modalTitle, setModalTitle] = useState("");
//表单区域
const [form] = Form.useForm();
//serach
const [formSearch] = Form.useForm();
//当前页面页数
let [count, setCount] = useState(1);
//表格内数据
@@ -214,28 +203,26 @@ export default function Role() {
const onCheckExpand = (e: CheckboxChangeEvent) => {
console.log(`checked = ${e.target.checked}`);
console.log(treeIds);
if(e.target.checked) setExpandedKeys(treeIds)
else setExpandedKeys([])
if (e.target.checked) setExpandedKeys(treeIds);
else setExpandedKeys([]);
console.log(expandedKeys);
};
const onCheckAll = (e: CheckboxChangeEvent) => {
console.log(`checked = ${e.target.checked}`);
if(e.target.checked) setCheckedKeys(treeIds)
else setCheckedKeys([])
if (e.target.checked) setCheckedKeys(treeIds);
else setCheckedKeys([]);
};
const onCheckFaSon = (e: CheckboxChangeEvent) => {
console.log(`checked = ${e.target.checked}`);
setCheckStrictly(!e.target.checked)
setCheckStrictly(!e.target.checked);
};
const onTreeCheck = (checkedKeysValue: any) => {
console.log("onCheck", checkedKeysValue.checked);
console.log("onCheck", checkedKeysValue);
if(checkStrictly===false){
if (checkStrictly === false) {
form.setFieldsValue({ menuIds: checkedKeysValue });
setCheckedKeys(checkedKeysValue);
}
else{
} else {
form.setFieldsValue({ menuIds: checkedKeysValue.checked });
setCheckedKeys(checkedKeysValue.checked);
}
@@ -272,21 +259,31 @@ export default function Role() {
});
};
const handleSerach = () => {
console.log("搜索框", searchValue);
setSearchValue({ ...searchValue });
// console.log("搜索框", searchValue);
// setSearchValue({ ...searchValue });
searchValue = formSearch.getFieldsValue();
if (typeof searchValue.dateTime !== "undefined") {
searchValue.startTime = (searchValue.dateTime as string[])[0];
searchValue.endTime = (searchValue.dateTime as string[])[1];
}
console.log(searchValue);
count = 1;
// queryTableDataParams={...searchValue}
setQueryTableDataParams({ ...searchValue });
};
const handleSerachNew = () => {
searchValue = {
roleName: undefined,
roleKey: undefined,
startTime: undefined,
state: undefined,
endTime: undefined,
};
const handleReset = () => {
formSearch.resetFields();
searchValue =formSearch.getFieldsValue()
// searchValue = {
// roleName: undefined,
// roleKey: undefined,
// startTime: undefined,
// state: undefined,
// endTime: undefined,
// };
setQueryTableDataParams({ ...searchValue });
setSearchValue({ ...searchValue });
// setSearchValue({ ...searchValue });
// setCount(1)
};
//Modal区域
@@ -313,7 +310,6 @@ export default function Role() {
thisrole = { ...thisrole, ...values, menuIds: checkedKeys };
editRoleData({ ...thisrole });
}
})
.catch((info) => {
console.log("Validate Failed:", info);
@@ -346,31 +342,17 @@ export default function Role() {
console.log(valueDate);
searchValue.startTime = dateString[0];
searchValue.endTime = dateString[1];
formSearch.setFieldsValue({ dateTime: [dateString[0], dateString[1]] });
console.log("time:", searchValue.endTime, searchValue.startTime);
// setSearchValue({ ...searchValue })
};
const onDataChangeOk = (
value: DatePickerProps["value"] | RangePickerProps["value"]
) => {
console.log("onOk: ", value);
};
const filterOption = (
input: string,
option?: { label: string; value: string }
) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
const onStateChange = (value: string) => {
searchValue.state = value;
// setSearchValue({ ...searchValue, state: value })
// searchValue.state = values
// console.log(value);
};
const onSearch = (value: string) => {
console.log("search:", value);
};
//表格函数
//从服务器获取数据
//页码改变
const pageChange = (page: number, pageSize: number) => {
console.log(page, pageSize);
@@ -387,14 +369,14 @@ export default function Role() {
del(roleId);
};
//遍历菜单树获取所有节点ID
const getTreeIds=function(tree:any){
const getTreeIds = function (tree: any) {
// console.log('Ids:',tree);
tree.forEach((item:any) => {
tree.forEach((item: any) => {
// console.log(item);
treeIds.push(item.menuId)
if(item.children!=null) getTreeIds(item.children)
treeIds.push(item.menuId);
if (item.children != null) getTreeIds(item.children);
});
}
};
//获取单个角色详细信息
const getRoleData = async (role: any) => {
// const {roleId,roleKey,roleName,roleSort,dataScope,state,meunIds}=role
@@ -418,12 +400,11 @@ export default function Role() {
try {
let menul = await getMenuLiseAPI();
console.log("tree", menul.data);
if(treeIds.length==0) getTreeIds(menul.data)
if (treeIds.length == 0) getTreeIds(menul.data);
console.log(treeIds);
setMenuTreeData(menul.data);
// treeData = menul.data
// setMenulist(menul.data)
} catch (error) {
console.log(error);
}
@@ -532,9 +513,10 @@ export default function Role() {
// setQueryParams({...queryParams,...valueSch})
queryTableDataParams = {
...queryTableDataParams,
...searchValue,
// ...searchValue,
pageNum: count,
};
// setQueryTableDataPaams(queryTableDataParams)
// setCount(1)
getRolesData(queryTableDataParams);
// console.log(queryParams);
@@ -545,86 +527,91 @@ export default function Role() {
return (
<ConfigProvider locale={zh_CN}>
<div className="roleBox">
<div className="SearchBox">
<div className="ipt">
<span>角色名称</span>
<div className="item">
<Input
placeholder="请输入角色名称"
allowClear
value={searchValue.roleName}
onChange={(e) => {
setSearchValue({ ...searchValue, roleName: e.target.value });
}}
<Form
layout="inline"
// labelCol={{ span: 8 }}
// wrapperCol={{ span: 18 }}
initialValues={undefined}
form={formSearch}
onFinish={handleSerach}
style={{fontWeight:'700'}}
>
<Form.Item label="角色名称" name="roleName" style={{width:300+'px',marginTop:'10px'}}>
<Input
// maxLength={250}
placeholder="请输入角色名称"
allowClear
// value={searchValue.roleName}
// onChange={(e) => {
// setSearchValue({ ...searchValue, roleName: e.target.value });
// }}
/>
</Form.Item>
<Form.Item label="权限字符" name="roleKey" style={{width:300+'px',marginTop:'10px'}}>
<Input
allowClear
placeholder="请输入权限字符"
// value={searchValue.roleKey}
// onChange={(e) => {
// setSearchValue({ ...searchValue, roleKey: e.target.value });
// }}
/>
</Form.Item>
<Form.Item label="状态" name="state" wrapperCol={{ span: 22 }} style={{marginTop:'10px'}}>
<Select
style={{ width: 300 + "px" }}
allowClear
showSearch
placeholder="请选择角色状态"
optionFilterProp="lable"
// onChange={onStateChange}
// onSearch={onSearch}
filterOption={filterOption}
// value={searchValue.state}
options={[
{
value: "0",
label: "正常",
},
{
value: "1",
label: "停用",
},
]}
/>
</Form.Item>
<Form.Item label="登陆时间" name="dateTime" style={{marginTop:'10px'}}>
<Space direction="vertical" style={{width:400+'px'}}>
<RangePicker
locale={dataLocale}
// allowClear
// value={[null, null]}
showTime
format="YYYY-MM-DD HH:mm:ss"
onChange={onDateChange}
// onOk={onDataChangeOk}
/>
</div>
</div>
<div className="ipt">
<span>权限字符</span>
<div className="item">
<Input
allowClear
placeholder="请输入权限字符"
value={searchValue.roleKey}
onChange={(e) => {
setSearchValue({ ...searchValue, roleKey: e.target.value });
}}
/>
</div>
</div>
<div className="ipt">
<span>状态</span>
<div className="item">
<Select
style={{ width:300+'px' }}
allowClear
showSearch
placeholder="请选择角色状态"
optionFilterProp="lable"
onChange={onStateChange}
onSearch={onSearch}
filterOption={filterOption}
value={searchValue.state}
options={[
{
value: "0",
label: "正常",
},
{
value: "1",
label: "停用",
},
]}
/>
</div>
</div>
<div className="ipt">
<span>登陆时间</span>
<div className="item">
<Space direction="vertical" size={12}>
<RangePicker
locale={dataLocale}
// allowClear
// value={[null,null]}
showTime
format="YYYY-MM-DD HH:mm:ss"
onChange={onDateChange}
onOk={onDataChangeOk}
/>
</Space>
</div>
</div>
<div className="btn">
<Button type="primary" onClick={() => handleSerach()}>
</Space>
</Form.Item>
<Form.Item style={{marginTop:'10px'}}>
<Button
type="primary"
htmlType="submit"
style={{marginLeft:20+'px'}}
onClick={() => handleSerach()}
>
<SearchOutlined />
搜索
</Button>
<Button onClick={() => handleSerachNew()}>
</Form.Item>
<Form.Item style={{marginTop:'10px'}}>
<Button onClick={() => handleReset()}>
<SyncOutlined />
重置
</Button>
</div>
</div>
</Form.Item>
</Form>
{/* 新增 */}
<div className="newadd">
<Button type="primary" onClick={handleNewAdd}>