/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-02 16:05:31
|
* @LastEditTime: 2022-10-31 12:02:37
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 岗位列表modal
|
*/
|
import React, { useState, useEffect } from 'react';
|
import PropTypes from 'prop-types';
|
import { Modal, Button, Input, Popconfirm, Typography } from 'antd';
|
import { PlusOutlined } from '@ant-design/icons';
|
import TableView from '../../TableView';
|
import * as $$ from '../../../utils/utility';
|
|
const PostModal = ({ data, visible, handleDel, handleAdd, handleCancel }) => {
|
// 岗位名称
|
const [postName, setPostName] = useState('');
|
|
// addType
|
const [addType, setAddType] = useState('1');
|
|
// 是否新增岗位
|
const [isAdd, setIsAdd] = useState(false);
|
|
function handleAddPost(type) {
|
if (!postName || postName.length > 32) {
|
$$.info({ type: 'error', content: '岗位数据无效，请重新输入' });
|
return false;
|
}
|
setAddType(type);
|
handleAdd(postName);
|
}
|
|
useEffect(() => {
|
if (addType === '1') {
|
setIsAdd(false);
|
} else {
|
setPostName('');
|
}
|
}, [data.length]);
|
|
return (
|
<Modal width={600} visible={visible} title="岗位列表" onCancel={handleCancel} footer={false}>
|
{isAdd ? (
|
<div>
|
<Input
|
placeholder="请输入岗位名称"
|
value={postName}
|
style={{ width: '200px', marginRight: '8px' }}
|
onChange={(e) => setPostName(e.target.value)}
|
/>
|
<Button className="public-buttonMargin" onClick={() => setIsAdd(false)}>
|
取消
|
</Button>
|
<Button className="public-buttonMargin" onClick={() => handleAddPost('2')}>
|
新增并继续
|
</Button>
|
<Button type="primary" onClick={() => handleAddPost('1')}>
|
新增
|
</Button>
|
</div>
|
) : (
|
<Button
|
icon={<PlusOutlined />}
|
type="primary"
|
onClick={() => {
|
setPostName('');
|
setIsAdd(true);
|
}}
|
>
|
新增
|
</Button>
|
)}
|
<TableView
|
style={{ marginTop: '16px' }}
|
columns={[
|
{ title: '岗位', dataIndex: 'name' },
|
{
|
title: '操作',
|
dataIndex: 'action',
|
render: (_, record) => {
|
return (
|
<Popconfirm title="是否确认删除该岗位?" onConfirm={() => handleDel(record.id)}>
|
<Typography.Link>删除</Typography.Link>
|
</Popconfirm>
|
);
|
},
|
},
|
]}
|
dataSource={data}
|
bordered
|
pagination={false}
|
scroll={{ y: 500 }}
|
/>
|
</Modal>
|
);
|
};
|
|
PostModal.propTypes = {
|
data: PropTypes.array,
|
visible: PropTypes.bool,
|
handleDel: PropTypes.func,
|
handleAdd: PropTypes.func,
|
handleCancel: PropTypes.func,
|
};
|
|
export default PostModal;
|
