/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-24 14:53:35
|
* @LastEditTime: 2022-11-10 16:59:58
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 部门信息table
|
*/
|
import React from 'react';
|
import PropTypes from 'prop-types';
|
import { Dropdown, Menu, Button, Typography, Row, Col, Space } from 'antd';
|
import { DownOutlined, PlusOutlined } from '@ant-design/icons';
|
import * as $$ from '../../../utils/utility';
|
import TableView from '../../TableView';
|
|
const { Link, Text } = Typography;
|
|
/*
|
* organizationActive, // 当前选择组织数据
|
* departmentData, // 部门数据
|
* handlePersonnelModal, // 查看人员
|
* handleChangeIsAddOrEdit,
|
*/
|
const DepartmentTable = ({ organizationActive, departmentData, handlePersonnelModal, handleChangeIsAddOrEdit, handleDelDept }) => {
|
// table事件
|
function handleClickDept(type, record) {
|
if (type === 'change') {
|
// 点击修改部门
|
handleChangeIsAddOrEdit('changeDept', record);
|
} else if (type === 'addOneDept') {
|
// 点击新增一级部门
|
handleChangeIsAddOrEdit('addOneDept', { id: 'addOneDept' });
|
} else if (type === 'addSubordinateDept') {
|
// 新增下级部门
|
handleChangeIsAddOrEdit('addSubordinateDept', { ...record, id: 'addSubordinateDept', parentId: record.id });
|
} else if (type === 'delete') {
|
// 点击删除部门
|
if (record.children && record.children.length > 0) {
|
$$.info({ type: 'warning', content: '该部门下存在下级部门, 不支持删除! ' });
|
return false;
|
}
|
if (record.matchUsers && record.matchUsers.length > 0) {
|
$$.info({ type: 'warning', content: '该部门下存在人员, 不支持删除! 请先清空人员' });
|
return false;
|
}
|
$$.modalInfo({
|
content: `确认删除${record.name}吗?`,
|
onOk: () => handleDelDept({ deptId: record.id }),
|
});
|
}
|
}
|
|
const dropdownOptions = (record) => {
|
return (
|
<Menu onClick={({ key }) => handleClickDept(key, record)}>
|
<Menu.Item key="addSubordinateDept">
|
<span id={`deptAdd${record.id}`}>新增下级部门</span>
|
</Menu.Item>
|
<Menu.Item key="change">修改</Menu.Item>
|
<Menu.Item key="delete">删除</Menu.Item>
|
</Menu>
|
);
|
};
|
|
// columns
|
const columns = [
|
{ title: '部门名称', dataIndex: 'name' },
|
{ title: '部门描述', dataIndex: 'des' },
|
{
|
title: '部门人员',
|
dataIndex: 'matchUsers',
|
render: (text) => {
|
return !text || (text && text.length === 0)
|
? 0
|
: text.map((x, t) => {
|
return (
|
<span key={x.id}>
|
{x.trueName}
|
{text.length - 1 === t ? '' : ', '}
|
</span>
|
);
|
});
|
},
|
},
|
{ title: '调解专长', dataIndex: 'goodFieldName' },
|
{ title: '调解范围', dataIndex: 'canFieldName' },
|
{ title: '人数', dataIndex: 'countCtUser', width: 50 },
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 140,
|
render: (_, record) => (
|
<Space size="middle">
|
<Link onClick={() => handlePersonnelModal(record, true)}>查看人员</Link>
|
<Dropdown overlay={dropdownOptions(record)}>
|
<Link disabled>
|
更多 <DownOutlined />
|
</Link>
|
</Dropdown>
|
</Space>
|
),
|
},
|
];
|
|
return (
|
<div className="organization-main">
|
<h3>{organizationActive.name}</h3>
|
<Row gutter={[16, 12]}>
|
<Col span={8}>
|
<span>组织负责人：{organizationActive.dutyName || '-'}</span>
|
</Col>
|
<Col span={8}>
|
<span>手机号码：{organizationActive.dutyMobile || '-'}</span>
|
</Col>
|
<Col span={8}>
|
<span>
|
地址：
|
{`${organizationActive.provName || ''}${organizationActive.cityName || ''}${organizationActive.areaName || ''}${
|
organizationActive.roadName || ''
|
}${organizationActive.villageName || ''}${organizationActive.addr || ''}`}
|
</span>
|
</Col>
|
<Col span={8}>
|
<span>部门数量：{organizationActive.countCtDept || 0}</span>
|
</Col>
|
<Col span={8}>
|
<span>组织人员(含未分派部门)：{organizationActive.countCtUser || 0}</span>
|
</Col>
|
<Col span={8}>
|
<span>是否可以找他调(小程序)：{organizationActive.findStatus == '2' ? '是' : '否'}</span>
|
</Col>
|
<Col span={24}>
|
<Text ellipsis={{ tooltip: organizationActive.goodFieldName }}>调解专长：{organizationActive.goodFieldName || '-'}</Text>
|
</Col>
|
<Col span={24}>
|
<Text ellipsis={{ tooltip: organizationActive.canFieldName }}>调解范围：{organizationActive.canFieldName || '-'}</Text>
|
</Col>
|
</Row>
|
<div className="organization-main-tableTitle">
|
<h4>部门信息</h4>
|
<Button onClick={() => handleClickDept('addOneDept')} icon={<PlusOutlined />} type="primary">
|
新增部门
|
</Button>
|
</div>
|
<TableView columns={columns} dataSource={departmentData} bordered pagination={false} />
|
</div>
|
);
|
};
|
|
DepartmentTable.propTypes = {
|
organizationActive: PropTypes.object,
|
departmentData: PropTypes.array,
|
handlePersonnelModal: PropTypes.func,
|
handleChangeIsAddOrEdit: PropTypes.func,
|
handleDelDept: PropTypes.func,
|
};
|
|
export default DepartmentTable;
|
