开发: push
This commit is contained in:
zhengw
@@ -1,187 +1,93 @@
|
||||
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 { Button, Col, Form, Input, Pagination, Row, Spin, Table, Tree } from 'antd';
|
||||
import { stringify } from 'qs';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
interface DataType {
|
||||
key: React.Key;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
age: number;
|
||||
address: string;
|
||||
tags: string[];
|
||||
interface IDepartment {
|
||||
children: null | IDepartment[];
|
||||
department_leader: string;
|
||||
id: number;
|
||||
name: string;
|
||||
parent_id: number;
|
||||
sort: number;
|
||||
}
|
||||
|
||||
interface IStaffsItem {
|
||||
user_id: string | number;
|
||||
name: string;
|
||||
telephone: string;
|
||||
dep_name: string[];
|
||||
position: string;
|
||||
}
|
||||
|
||||
interface IStaffsData {
|
||||
count: number;
|
||||
data?: IStaffsItem[];
|
||||
}
|
||||
|
||||
type Param = {
|
||||
curr_page: number;
|
||||
page_count: number;
|
||||
dep_id: number;
|
||||
name?: string;
|
||||
position?: string;
|
||||
telephone?: string;
|
||||
};
|
||||
|
||||
const DepartmentsList: React.FC = () => {
|
||||
const [param, setParam] = useState({
|
||||
const [param] = useState<Param>({
|
||||
curr_page: 1,
|
||||
page_count: 20,
|
||||
dep_id: 0,
|
||||
});
|
||||
|
||||
const [departmentID, setDepartmentsID] = useState(1);
|
||||
const [departmentID, setDepartmentsID] = useState<number>(0);
|
||||
const [departmentsList, setDepartmentsList] = useState<IDepartment[]>([]);
|
||||
const [staffsData, setStaffsData] = useState<IStaffsData>({ count: 0, data: [] });
|
||||
const [loadingL, setLoadingL] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
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 getDepartmentsList = () => {
|
||||
setLoadingL(true);
|
||||
post({ url: '/Departments/List' }).then((res) => {
|
||||
setLoadingL(false);
|
||||
if (res.err_code == 0) {
|
||||
if (Array.isArray(res.data)) {
|
||||
param.dep_id = res.data[0].id;
|
||||
setDepartmentsID(param.dep_id);
|
||||
setDepartmentsList(res.data);
|
||||
getStaffsList();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const getStaffsList = () => {
|
||||
setLoading(true);
|
||||
post({ url: '/Staffs/List', data: stringify(param) }).then((res) => {
|
||||
setLoading(false);
|
||||
if (res.err_code == 0) {
|
||||
if (!Array.isArray(res.data)) {
|
||||
res.data = [];
|
||||
}
|
||||
setStaffsData(res as IStaffsData);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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 page = (page: number) => {
|
||||
param.curr_page = page;
|
||||
getStaffsList();
|
||||
};
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [popOpen, setPopOpen] = useState(-1);
|
||||
useEffect(() => {
|
||||
getDepartmentsList();
|
||||
}, []);
|
||||
|
||||
// const [open, setOpen] = useState(false);
|
||||
// const [popOpen, setPopOpen] = useState(-1);
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
@@ -200,28 +106,30 @@ const DepartmentsList: React.FC = () => {
|
||||
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}>
|
||||
<Spin spinning={loadingL} style={{ display: 'block' }}>
|
||||
{departmentsList.length ? (
|
||||
<Tree
|
||||
className={'department-tree'}
|
||||
blockNode
|
||||
selectedKeys={[departmentID]}
|
||||
defaultExpandAll
|
||||
treeData={departmentsList}
|
||||
fieldNames={{ title: 'name', key: 'id' }}
|
||||
onSelect={(selectedKeys) => {
|
||||
if (selectedKeys.length) {
|
||||
setDepartmentsID(Number(selectedKeys[0]));
|
||||
param.dep_id = Number(selectedKeys[0]);
|
||||
page(1);
|
||||
}
|
||||
}}
|
||||
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) => {
|
||||
@@ -251,13 +159,15 @@ const DepartmentsList: React.FC = () => {
|
||||
className={styles.del}
|
||||
/>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
></Tree>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
></Tree>
|
||||
) : null}
|
||||
</Spin>
|
||||
</div>
|
||||
<Modal
|
||||
{/* <Modal
|
||||
open={open}
|
||||
title="修改部门"
|
||||
onCancel={() => setOpen(false)}
|
||||
@@ -269,12 +179,48 @@ const DepartmentsList: React.FC = () => {
|
||||
<Input type="text"></Input>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</Modal> */}
|
||||
<div style={{ flexGrow: 1, minWidth: 0 }}>
|
||||
<SearchBarPlugin>
|
||||
<Form>
|
||||
<Form autoComplete="off">
|
||||
<Row gutter={{ xs: 0, sm: 16 }}>
|
||||
<Col xs={24} sm={12} md={6}>
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<Form.Item label="姓名">
|
||||
<Input
|
||||
autoComplete="off"
|
||||
onChange={(e) => {
|
||||
param.name = e.target.value.trim();
|
||||
}}
|
||||
allowClear
|
||||
onPressEnter={() => page(1)}
|
||||
></Input>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<Form.Item label="职位">
|
||||
<Input
|
||||
autoComplete="off"
|
||||
onChange={(e) => {
|
||||
param.position = e.target.value.trim();
|
||||
}}
|
||||
allowClear
|
||||
onPressEnter={() => page(1)}
|
||||
></Input>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<Form.Item label="手机号">
|
||||
<Input
|
||||
autoComplete="off"
|
||||
onChange={(e) => {
|
||||
param.telephone = e.target.value.trim();
|
||||
}}
|
||||
allowClear
|
||||
onPressEnter={() => page(1)}
|
||||
></Input>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
{/* <Col xs={24} sm={12} md={6}>
|
||||
<Form.Item label="用户名">
|
||||
<Select
|
||||
defaultValue="lucy"
|
||||
@@ -287,47 +233,7 @@ const DepartmentsList: React.FC = () => {
|
||||
]}
|
||||
/>
|
||||
</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>
|
||||
</Col> */}
|
||||
</Row>
|
||||
</Form>
|
||||
</SearchBarPlugin>
|
||||
@@ -336,9 +242,7 @@ const DepartmentsList: React.FC = () => {
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
post({
|
||||
url: '/Departments/List',
|
||||
}).then((res) => {});
|
||||
page(1);
|
||||
}}
|
||||
>
|
||||
搜索
|
||||
@@ -346,30 +250,19 @@ const DepartmentsList: React.FC = () => {
|
||||
</Row>
|
||||
</SearchBottonsCardPlugin>
|
||||
<Table
|
||||
tableLayout="fixed"
|
||||
size="middle"
|
||||
dataSource={data}
|
||||
dataSource={staffsData.data}
|
||||
style={{ padding: 16, borderRadius: 6, background: '#fff', marginTop: 16 }}
|
||||
pagination={false}
|
||||
bordered={true}
|
||||
rowKey={'user_id'}
|
||||
loading={loading}
|
||||
>
|
||||
<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.Column title="姓名" dataIndex={'name'}></Table.Column>
|
||||
<Table.Column title="职位" dataIndex={'position'}></Table.Column>
|
||||
<Table.Column title="部门" dataIndex={'dep_name'}></Table.Column>
|
||||
<Table.Column title="手机号" dataIndex={'telephone'}></Table.Column>
|
||||
</Table>
|
||||
|
||||
<Pagination
|
||||
@@ -384,18 +277,18 @@ const DepartmentsList: React.FC = () => {
|
||||
}}
|
||||
current={param.curr_page}
|
||||
pageSize={param.page_count}
|
||||
total={1000}
|
||||
total={staffsData.count}
|
||||
pageSizeOptions={[10, 20, 50, 100]}
|
||||
onShowSizeChange={(current, size) => {
|
||||
param.page_count = size;
|
||||
setParam({ ...param });
|
||||
// setParam({ ...param });
|
||||
page(1);
|
||||
}}
|
||||
showTotal={(total, range) => {
|
||||
return <span style={{ lineHeight: 1 }}>共{total}条</span>;
|
||||
}}
|
||||
onChange={(page, pageSize) => {
|
||||
param.curr_page = page;
|
||||
setParam({ ...param });
|
||||
onChange={(curr, pageSize) => {
|
||||
page(curr);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user