408 lines
12 KiB
TypeScript
408 lines
12 KiB
TypeScript
|
import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin';
|
||
|
|
import { post } from '@/services/ajax';
|
||
|
|
import { DeleteOutlined, FormOutlined } from '@ant-design/icons';
|
||
|
|
import { PageContainer } from '@ant-design/pro-components';
|
||
|
|
import {
|
||
|
|
Button,
|
||
|
|
Col,
|
||
|
|
Form,
|
||
|
|
Input,
|
||
|
|
Modal,
|
||
|
|
Pagination,
|
||
|
|
Popconfirm,
|
||
|
|
Row,
|
||
|
|
Select,
|
||
|
|
Table,
|
||
|
|
Tree,
|
||
|
|
} from 'antd';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import styles from './index.module.scss';
|
||
|
|
|
||
|
|
interface DataType {
|
||
|
|
key: React.Key;
|
||
|
|
firstName: string;
|
||
|
|
lastName: string;
|
||
|
|
age: number;
|
||
|
|
address: string;
|
||
|
|
tags: string[];
|
||
|
|
}
|
||
|
|
|
||
|
|
const DepartmentsList: React.FC = () => {
|
||
|
|
const [param, setParam] = useState({
|
||
|
|
curr_page: 1,
|
||
|
|
page_count: 20,
|
||
|
|
});
|
||
|
|
|
||
|
|
const [departmentID, setDepartmentsID] = useState(1);
|
||
|
|
|
||
|
|
const departments = [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
name: '福州晨丰科技有限公司',
|
||
|
|
parent_id: 0,
|
||
|
|
sort: 2147483447,
|
||
|
|
department_leader: 'chenf,LiXiang,CFRS',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
name: '总经办',
|
||
|
|
parent_id: 1,
|
||
|
|
sort: 2147483447,
|
||
|
|
department_leader: 'chenf',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
name: '研发部',
|
||
|
|
parent_id: 1,
|
||
|
|
sort: 2147483247,
|
||
|
|
department_leader: 'yangxb',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: 18,
|
||
|
|
name: '.Net组',
|
||
|
|
parent_id: 3,
|
||
|
|
sort: 100005000,
|
||
|
|
department_leader: 'xief',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 19,
|
||
|
|
name: '平台组',
|
||
|
|
parent_id: 3,
|
||
|
|
sort: 100004000,
|
||
|
|
department_leader: 'yangxb',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 20,
|
||
|
|
name: 'CAD组',
|
||
|
|
parent_id: 3,
|
||
|
|
sort: 100003000,
|
||
|
|
department_leader: 'chenx',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 21,
|
||
|
|
name: '测试组',
|
||
|
|
parent_id: 3,
|
||
|
|
sort: 100001000,
|
||
|
|
department_leader: '',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 23,
|
||
|
|
name: '是的防守对方',
|
||
|
|
parent_id: 3,
|
||
|
|
sort: 100000000,
|
||
|
|
department_leader: '',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 24,
|
||
|
|
name: '12',
|
||
|
|
parent_id: 3,
|
||
|
|
sort: 99999000,
|
||
|
|
department_leader: '',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
id: 25,
|
||
|
|
name: '3',
|
||
|
|
parent_id: 24,
|
||
|
|
sort: 100000000,
|
||
|
|
department_leader: '',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 181,
|
||
|
|
name: '.Net组',
|
||
|
|
parent_id: 3,
|
||
|
|
sort: 100005000,
|
||
|
|
department_leader: 'xief',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 191,
|
||
|
|
name: '平台组',
|
||
|
|
parent_id: 3,
|
||
|
|
sort: 100004000,
|
||
|
|
department_leader: 'yangxb',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 201,
|
||
|
|
name: 'CAD组',
|
||
|
|
parent_id: 3,
|
||
|
|
sort: 100003000,
|
||
|
|
department_leader: 'chenx',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 211,
|
||
|
|
name: '测试组',
|
||
|
|
parent_id: 3,
|
||
|
|
sort: 100001000,
|
||
|
|
department_leader: '',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 231,
|
||
|
|
name: '是的防守对方是的防守对方是的防守对方是的防守对方',
|
||
|
|
parent_id: 3,
|
||
|
|
sort: 100000000,
|
||
|
|
department_leader: '',
|
||
|
|
children: null,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const data: DataType[] = [
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
firstName: 'Jim',
|
||
|
|
lastName: 'Green',
|
||
|
|
age: 42,
|
||
|
|
address: 'London No. 1 Lake Park',
|
||
|
|
tags: ['loser'],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '3',
|
||
|
|
firstName: 'Joe',
|
||
|
|
lastName: 'Black',
|
||
|
|
age: 32,
|
||
|
|
address: 'Sydney No. 1 Lake Park',
|
||
|
|
tags: ['cool', 'teacher'],
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const [popOpen, setPopOpen] = useState(-1);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<PageContainer>
|
||
|
|
<div style={{ display: 'flex' }}>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: 260,
|
||
|
|
flexShrink: 0,
|
||
|
|
minHeight: 'calc(100vh - 55px - 60px - 96px)',
|
||
|
|
maxHeight: 'calc(100vh - 55px - 60px)',
|
||
|
|
overflow: 'auto',
|
||
|
|
marginRight: 12,
|
||
|
|
background: '#fff',
|
||
|
|
position: 'sticky',
|
||
|
|
top: 64,
|
||
|
|
padding: '12px 0',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Tree
|
||
|
|
className={'department-tree'}
|
||
|
|
blockNode
|
||
|
|
selectedKeys={[departmentID]}
|
||
|
|
defaultExpandAll
|
||
|
|
style={{}}
|
||
|
|
treeData={departments}
|
||
|
|
fieldNames={{ title: 'name', key: 'id' }}
|
||
|
|
onSelect={(selectedKeys) => {
|
||
|
|
console.log(selectedKeys);
|
||
|
|
if (selectedKeys.length) {
|
||
|
|
setDepartmentsID(Number(selectedKeys[0]));
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
titleRender={(nodeData: any) => {
|
||
|
|
// console.log(nodeData);
|
||
|
|
return (
|
||
|
|
<div className={styles.departmentItem}>
|
||
|
|
<div className={styles.name} title={nodeData.name}>
|
||
|
|
{nodeData.name}
|
||
|
|
</div>
|
||
|
|
<div className={styles.btnsBox}>
|
||
|
|
<FormOutlined
|
||
|
|
title="修改"
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
setOpen(true);
|
||
|
|
}}
|
||
|
|
className={styles.edit}
|
||
|
|
/>
|
||
|
|
<Popconfirm
|
||
|
|
title="确认删除?"
|
||
|
|
open={popOpen == nodeData.id}
|
||
|
|
onCancel={(e) => {
|
||
|
|
setPopOpen(-1);
|
||
|
|
e?.stopPropagation();
|
||
|
|
}}
|
||
|
|
onConfirm={(e) => {
|
||
|
|
e?.stopPropagation();
|
||
|
|
console.log(nodeData.id);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<DeleteOutlined
|
||
|
|
title="删除"
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
setPopOpen(nodeData.id);
|
||
|
|
}}
|
||
|
|
className={styles.del}
|
||
|
|
/>
|
||
|
|
</Popconfirm>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
></Tree>
|
||
|
|
</div>
|
||
|
|
<Modal
|
||
|
|
open={open}
|
||
|
|
title="修改部门"
|
||
|
|
onCancel={() => setOpen(false)}
|
||
|
|
centered
|
||
|
|
onOk={() => {}}
|
||
|
|
>
|
||
|
|
<Form>
|
||
|
|
<Form.Item label="名称">
|
||
|
|
<Input type="text"></Input>
|
||
|
|
</Form.Item>
|
||
|
|
</Form>
|
||
|
|
</Modal>
|
||
|
|
<div style={{ flexGrow: 1, minWidth: 0 }}>
|
||
|
|
<SearchBarPlugin>
|
||
|
|
<Form>
|
||
|
|
<Row gutter={{ xs: 0, sm: 16 }}>
|
||
|
|
<Col xs={24} sm={12} md={6}>
|
||
|
|
<Form.Item label="用户名">
|
||
|
|
<Select
|
||
|
|
defaultValue="lucy"
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
onChange={() => {}}
|
||
|
|
options={[
|
||
|
|
{ value: 'jack', label: 'Jack' },
|
||
|
|
{ value: 'lucy', label: 'Lucy' },
|
||
|
|
{ value: 'Yiminghe', label: 'yiminghe' },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col xs={24} sm={12} md={6}>
|
||
|
|
<Form.Item label="用户名">
|
||
|
|
<Input autoComplete="off"></Input>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col xs={24} sm={12} md={6}>
|
||
|
|
<Form.Item label="用户名">
|
||
|
|
<Input autoComplete="off"></Input>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col xs={24} sm={12} md={6}>
|
||
|
|
<Form.Item label="用户名">
|
||
|
|
<Select
|
||
|
|
defaultValue="lucy"
|
||
|
|
style={{ width: '100%' }}
|
||
|
|
onChange={() => {}}
|
||
|
|
options={[
|
||
|
|
{ value: 'jack', label: 'Jack' },
|
||
|
|
{ value: 'lucy', label: 'Lucy' },
|
||
|
|
{ value: 'Yiminghe', label: 'yiminghe' },
|
||
|
|
{ value: 'disabled', label: 'Disabled', disabled: true },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col xs={24} sm={12} md={6}>
|
||
|
|
<Form.Item label="用户名">
|
||
|
|
<Input autoComplete="off"></Input>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col xs={24} sm={12} md={6}>
|
||
|
|
<Form.Item label="用户名">
|
||
|
|
<Input autoComplete="off"></Input>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
<Col xs={24} sm={12} md={6}>
|
||
|
|
<Form.Item label="用户名">
|
||
|
|
<Input autoComplete="off"></Input>
|
||
|
|
</Form.Item>
|
||
|
|
</Col>
|
||
|
|
</Row>
|
||
|
|
</Form>
|
||
|
|
</SearchBarPlugin>
|
||
|
|
<SearchBottonsCardPlugin>
|
||
|
|
<Row justify={'center'}>
|
||
|
|
<Button
|
||
|
|
type="primary"
|
||
|
|
onClick={() => {
|
||
|
|
post({
|
||
|
|
url: '/Departments/List',
|
||
|
|
}).then((res) => {});
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
搜索
|
||
|
|
</Button>
|
||
|
|
</Row>
|
||
|
|
</SearchBottonsCardPlugin>
|
||
|
|
<Table
|
||
|
|
size="middle"
|
||
|
|
dataSource={data}
|
||
|
|
style={{ padding: 16, borderRadius: 6, background: '#fff', marginTop: 16 }}
|
||
|
|
pagination={false}
|
||
|
|
bordered={true}
|
||
|
|
>
|
||
|
|
<Table.Column title="ID" dataIndex={'key'}></Table.Column>
|
||
|
|
<Table.Column title="firstName" dataIndex={'firstName'}></Table.Column>
|
||
|
|
<Table.Column
|
||
|
|
width={90}
|
||
|
|
title="操作"
|
||
|
|
render={(_text, record: any) => {
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
type="primary"
|
||
|
|
onClick={() => {
|
||
|
|
console.log(record);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{record.firstName}
|
||
|
|
</Button>
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
></Table.Column>
|
||
|
|
</Table>
|
||
|
|
|
||
|
|
<Pagination
|
||
|
|
style={{
|
||
|
|
background: '#fff',
|
||
|
|
borderRadius: 6,
|
||
|
|
marginTop: 16,
|
||
|
|
padding: 16,
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
}}
|
||
|
|
current={param.curr_page}
|
||
|
|
pageSize={param.page_count}
|
||
|
|
total={1000}
|
||
|
|
pageSizeOptions={[10, 20, 50, 100]}
|
||
|
|
onShowSizeChange={(current, size) => {
|
||
|
|
param.page_count = size;
|
||
|
|
setParam({ ...param });
|
||
|
|
}}
|
||
|
|
showTotal={(total, range) => {
|
||
|
|
return <span style={{ lineHeight: 1 }}>共{total}条</span>;
|
||
|
|
}}
|
||
|
|
onChange={(page, pageSize) => {
|
||
|
|
param.curr_page = page;
|
||
|
|
setParam({ ...param });
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</PageContainer>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default DepartmentsList;
|