雷闳焜:完成部门页面开发
This commit is contained in:
Lhk0001
@@ -1,7 +1,586 @@
|
||||
import React from "react";
|
||||
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
|
||||
//树列表数据
|
||||
|
||||
export default function Dept() {
|
||||
return(
|
||||
<div>dept</div>
|
||||
)
|
||||
}
|
||||
// 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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user