575 lines
16 KiB
TypeScript
575 lines
16 KiB
TypeScript
import { useState,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;
|
|
export default function Dept() {
|
|
|
|
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 = () => {
|
|
searchValue = formSearch.getFieldsValue();
|
|
setSearchValue(searchValue)
|
|
console.log(searchValue);
|
|
setQueryTableDataParams({ ...searchValue });
|
|
};
|
|
const handleReset = () => {
|
|
formSearch.resetFields();
|
|
searchValue = formSearch.getFieldsValue();
|
|
setSearchValue(searchValue)
|
|
setQueryTableDataParams({ ...searchValue });
|
|
};
|
|
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);
|
|
};
|
|
const handleNewAdd = (deptId?: string) => {
|
|
setModalTitle("新增部门");
|
|
setIsModalOpen(true);
|
|
if (deptId) {
|
|
formModal.setFieldsValue({
|
|
parentId: deptId,
|
|
deptName: '',
|
|
orderNum: 0,
|
|
leader: '',
|
|
phone: '',
|
|
email: '',
|
|
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) => {
|
|
console.log("add", values);
|
|
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);
|
|
}
|
|
}
|
|
setExpandedRowKeys([...treeAnyId])
|
|
};
|
|
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 {
|
|
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);
|
|
}
|
|
console.log(treeAnyId);
|
|
|
|
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);
|
|
return ()=>{
|
|
setIsAllExpend(true),
|
|
isTreeAnyId=false
|
|
}
|
|
}, [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",textAlign:"left" }}
|
|
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>
|
|
);
|
|
} |