开发: 修改页面
This commit is contained in:
zhengw
@@ -1,9 +1,24 @@
|
||||
import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin';
|
||||
import { post } from '@/services/ajax';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Button, Col, Form, Input, Pagination, Row, Spin, Table, Tree } from 'antd';
|
||||
import {
|
||||
App,
|
||||
Button,
|
||||
Col,
|
||||
Drawer,
|
||||
Form,
|
||||
Input,
|
||||
Modal,
|
||||
Pagination,
|
||||
Row,
|
||||
Spin,
|
||||
Table,
|
||||
Tree,
|
||||
} from 'antd';
|
||||
import { stringify } from 'qs';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { IStaffsItem } from '../ChatLogs/ChatLogsType';
|
||||
import { DepartmentMembersDetail } from './components/DepartmentMemberDetail';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
interface IDepartment {
|
||||
@@ -15,14 +30,6 @@ interface IDepartment {
|
||||
sort: number;
|
||||
}
|
||||
|
||||
interface IStaffsItem {
|
||||
user_id: string | number;
|
||||
name: string;
|
||||
telephone: string;
|
||||
dep_name: string[];
|
||||
position: string;
|
||||
}
|
||||
|
||||
interface IStaffsData {
|
||||
count: number;
|
||||
data?: IStaffsItem[];
|
||||
@@ -35,6 +42,7 @@ type Param = {
|
||||
name?: string;
|
||||
position?: string;
|
||||
telephone?: string;
|
||||
mobile?: string;
|
||||
};
|
||||
|
||||
const DepartmentsList: React.FC = () => {
|
||||
@@ -43,19 +51,21 @@ const DepartmentsList: React.FC = () => {
|
||||
page_count: 20,
|
||||
dep_id: 0,
|
||||
});
|
||||
|
||||
const { notification, modal } = App.useApp();
|
||||
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 [open, setOpen] = useState(false);
|
||||
const [record, setRecord] = useState<IStaffsItem>();
|
||||
|
||||
const getDepartmentsList = () => {
|
||||
setLoadingL(true);
|
||||
post({ url: '/Departments/List' }).then((res) => {
|
||||
setLoadingL(false);
|
||||
if (res.err_code == 0) {
|
||||
if (Array.isArray(res.data)) {
|
||||
if (Array.isArray(res.data) && res.data.length) {
|
||||
param.dep_id = res.data[0].id;
|
||||
setDepartmentsID(param.dep_id);
|
||||
setDepartmentsList(res.data);
|
||||
@@ -89,12 +99,51 @@ const DepartmentsList: React.FC = () => {
|
||||
// const [open, setOpen] = useState(false);
|
||||
// const [popOpen, setPopOpen] = useState(-1);
|
||||
|
||||
const [syncLoading, setSyncLoading] = useState(false);
|
||||
const [syncOpen, setSyncOpen] = useState('');
|
||||
|
||||
const syncDepartments = () => {
|
||||
setSyncLoading(false);
|
||||
setSyncOpen('dep');
|
||||
};
|
||||
|
||||
const syncStaffs = () => {
|
||||
setSyncLoading(false);
|
||||
setSyncOpen('staff');
|
||||
};
|
||||
|
||||
const syncDepOrStaff = () => {
|
||||
if (syncLoading) return;
|
||||
setSyncLoading(true);
|
||||
if (syncOpen == 'dep') {
|
||||
post({ url: '/Sync/Departments' }).then((res) => {
|
||||
setSyncLoading(false);
|
||||
if (res.err_code == 0) {
|
||||
notification.success({
|
||||
message: res.err_msg,
|
||||
});
|
||||
getDepartmentsList();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
post({ url: '/Sync/Staffs' }).then((res) => {
|
||||
setSyncLoading(false);
|
||||
if (res.err_code == 0) {
|
||||
notification.success({
|
||||
message: res.err_msg,
|
||||
});
|
||||
getStaffsList();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div
|
||||
style={{
|
||||
width: 260,
|
||||
width: 240,
|
||||
flexShrink: 0,
|
||||
minHeight: 'calc(100vh - 55px - 60px - 96px)',
|
||||
maxHeight: 'calc(100vh - 55px - 60px)',
|
||||
@@ -167,6 +216,18 @@ const DepartmentsList: React.FC = () => {
|
||||
) : null}
|
||||
</Spin>
|
||||
</div>
|
||||
<Modal
|
||||
title="系统提示"
|
||||
open={!!syncOpen}
|
||||
onOk={syncDepOrStaff}
|
||||
onCancel={() => setSyncOpen('')}
|
||||
centered
|
||||
width={300}
|
||||
>
|
||||
<Spin spinning={syncLoading}>
|
||||
<div>{syncOpen == 'dep' ? '确定同步部门?' : '确定同步员工?'}</div>
|
||||
</Spin>
|
||||
</Modal>
|
||||
{/* <Modal
|
||||
open={open}
|
||||
title="修改部门"
|
||||
@@ -197,7 +258,7 @@ const DepartmentsList: React.FC = () => {
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8}>
|
||||
<Form.Item label="职位">
|
||||
<Form.Item label="职务">
|
||||
<Input
|
||||
autoComplete="off"
|
||||
onChange={(e) => {
|
||||
@@ -213,7 +274,7 @@ const DepartmentsList: React.FC = () => {
|
||||
<Input
|
||||
autoComplete="off"
|
||||
onChange={(e) => {
|
||||
param.telephone = e.target.value.trim();
|
||||
param.mobile = e.target.value.trim();
|
||||
}}
|
||||
allowClear
|
||||
onPressEnter={() => page(1)}
|
||||
@@ -244,9 +305,27 @@ const DepartmentsList: React.FC = () => {
|
||||
onClick={() => {
|
||||
page(1);
|
||||
}}
|
||||
style={{ marginRight: 12 }}
|
||||
>
|
||||
搜索
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
syncDepartments();
|
||||
}}
|
||||
style={{ marginRight: 12 }}
|
||||
>
|
||||
同步部门
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
syncStaffs();
|
||||
}}
|
||||
>
|
||||
同步员工
|
||||
</Button>
|
||||
</Row>
|
||||
</SearchBottonsCardPlugin>
|
||||
<Table
|
||||
@@ -259,12 +338,57 @@ const DepartmentsList: React.FC = () => {
|
||||
rowKey={'user_id'}
|
||||
loading={loading}
|
||||
>
|
||||
<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.Column
|
||||
title="姓名"
|
||||
dataIndex={'name'}
|
||||
render={(value, record: IStaffsItem) => {
|
||||
return (
|
||||
<div
|
||||
onClick={() => {
|
||||
setRecord(record);
|
||||
setOpen(true);
|
||||
}}
|
||||
style={{ color: '#1890ff', cursor: 'pointer' }}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
marginRight: record.isleader == 1 ? 4 : 0,
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
{record?.isleader == 1 ? (
|
||||
<span
|
||||
style={{
|
||||
color: '#999',
|
||||
fontSize: 12,
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: 4,
|
||||
padding: '2px 4px',
|
||||
}}
|
||||
>
|
||||
负责人
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
></Table.Column>
|
||||
<Table.Column title="职务" width={160} dataIndex={'position'}></Table.Column>
|
||||
<Table.Column
|
||||
title="部门"
|
||||
dataIndex={'dep_name'}
|
||||
render={(val) => {
|
||||
return <>{val.join('，')}</>;
|
||||
}}
|
||||
></Table.Column>
|
||||
<Table.Column title="手机号" width={160} dataIndex={'mobile'}></Table.Column>
|
||||
<Table.Column title="企业邮箱" dataIndex={'biz_mail'}></Table.Column>
|
||||
</Table>
|
||||
|
||||
<Drawer title="成员详情" open={open} onClose={() => setOpen(false)} width={800}>
|
||||
<DepartmentMembersDetail record={record as IStaffsItem}></DepartmentMembersDetail>
|
||||
</Drawer>
|
||||
<Pagination
|
||||
style={{
|
||||
background: '#fff',
|
||||
|
||||
Reference in New Issue
Block a user