开发: 登录等功能
This commit is contained in:
zhengw
407
src/pages/DepartmentsList/index.tsx
Normal file
407
src/pages/DepartmentsList/index.tsx
Normal file
@@ -0,0 +1,407 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user