ai-admin/src/components/DutyRecord/index.js

import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Button, Table, Pagination, Row, Col, Select, Modal, DatePicker } from 'antd';
import { useSelector } from 'react-redux';
import '@common/common.less';
import apiObj from '@api/index';
import moment from "moment";
import "moment/locale/zh-cn"
import { message } from "antd/lib/index";
import { disabledDate,getDaysBetween } from '@utils/index'
const { post, api, xPost } = apiObj;
const { RangePicker } = DatePicker;
const { Option } = Select;
function DutyRecord() {
	const { dutyNum } = useSelector((state) => {
		return state.userInfo;
	});
	useEffect(() => {
		setSize(15)
		setCurrent(1)
		setSelectedRowKeys([])
	    form.resetFields();
	    getDutyRecord();
	}, [dutyNum]);
	let today = getNowFormatDate()
	let lastmonthday= getlastmonthday()
	const [logList, setLogList] = useState([]);
	const [total, setTotal] = useState(0);
	const [visible, setVisible] = useState(false);
	const [size, setSize] = useState(15);
	const [current, setCurrent] = useState(1);
	const [selectedRowKeys, setSelectedRowKeys] = useState([]);
	const [params, setParams] = useState({
		changeTimeEnd:today.split('/').join('-') + ' 23:59:59',
		changeTimeStart:lastmonthday.split('/').join('-') + ' 00:00:00',
		pages: 1,
		current: 1,
		size: 15
	});
	const [form] = Form.useForm();
	const typeMap = {
		'1': '职务变更',
		'2': '职称变更'
	};
	let data = {
		changeTimeEnd:today.split('/').join('-') + ' 23:59:59',
		changeTimeStart:lastmonthday.split('/').join('-') + ' 00:00:00',
		pages: 1,
		current: 1,
		size: 15
	}
	
	function getlastmonthday(){
		let time = new Date((new Date() - 30 * 24 * 3600 * 1000)).toLocaleDateString()
		return time
	}
	function getNowFormatDate() {
	      let time = new Date().toLocaleDateString()
	      return time
	    }
	//表格数据
	function getDutyRecord(param) {
		const hide = message.loading('加载中...',0);
		post(api.getOfficialCapacityPage, param || params).then((res) => {
			hide()
			if (res.data.code === 200) {
				const data = res.data.data;
				setLogList(data.records);
				setTotal(data.total)
			}
		})
	}
	//删除记录
	function delRecord() {
		post(api.delOfficialCapacityPage, { id: selectedRowKeys }).then((res) => {
			if (res.data.code === 200) {
				//刷新列表
				const totalPage = Math.ceil((total - selectedRowKeys.length) / size);
				//将当前页码与删除数据之后的总页数进行比较，避免当前页码不存在
				const pagenum =
				    params.current > totalPage ? totalPage : params.current;
				//避免pagenum变为0
				params.current = pagenum < 1 ? 1 : pagenum;
				setParams(params)
				//刷新列表
				getDutyRecord()
			} else {
				message.warning(res.data.msg || '操作失败，请重试~');
			}
		});
		showDelModal(false);
	}
	//删除弹窗确认
	function showDelModal(flag) {
		console.log(selectedRowKeys)
		if (flag && !selectedRowKeys.length) {
			message.warning("请先选择要删除的记录~", 1);
			return;
		}
		setVisible(flag)
	}

	function onSizeChange(current, pageSize) {
		params.current = current
		params.size = pageSize
		setSize(pageSize)
		setCurrent(current)
		setParams(params)
	}
	function changePage(page, pageSize) {
		params.current = page
		params.size = pageSize
		setParams(params)
		setCurrent(page)
		getDutyRecord()
	}
	function onSelectChange(selectedRowKeys) {
		setSelectedRowKeys(selectedRowKeys);
	};
	const onFinish = (value) => {
		value.changeTimeStart = moment(value.changeTimeStart).format('YYYY-MM-DD 00:00:00');
		value.changeTimeEnd = moment(value.changeTimeEnd).format('YYYY-MM-DD 23:59:59');
		if (value.changeTimeStart > value.changeTimeEnd) {
		    message.warning('开始时间不能大于结束时间');
		    return
		}
		params.current = 1
		const param = {
			...params,
			...value,
		}
		setSelectedRowKeys([])
		setCurrent(1)
		setParams(param)
		getDutyRecord(param);
	};
	const onReset = () => {
		setSize(15)
		setSelectedRowKeys([])
		setCurrent(1)
		setParams(data)
		form.resetFields();
		getDutyRecord(data);
	};
	const columns = [
		{ title: '医生姓名', dataIndex: 'doctorName', key: 'doctorName' },
		{ title: '科室', dataIndex: 'deptName', key: 'deptName' },
		{ title: '工号', dataIndex: 'doctorCode', key: 'doctorCode' },
		{ title: '变更时间', dataIndex: 'changeTime', key: 'changeTime' },
		{ title: '职务/职称名称', dataIndex: 'name', key: 'name' },
		{
			title: '变更类型', dataIndex: 'type', key: 'type', render: (text, record) => {
				return typeMap[record.type];
			}
		},
	];
	const rowSelection = {
		selectedRowKeys,
		onChange: onSelectChange,
	};
	return (
		<div className="wrapper">
			<div className="filter-box">
				<Form
					form={form}
					name="normal_login"
					onFinish={onFinish}
					initialValues={{ type: '', changeTimeStart: moment(lastmonthday), changeTimeEnd: moment(today) }}
				>
					<Row gutter={24}>
						<Col span={5} key={0}>
							<Form.Item label="医生姓名" name="doctorName">
								<Input placeholder="请输入" autoComplete='off' allowClear maxLength='30'/>
							</Form.Item>
						</Col>
						<Col span={5} key={1}>
							<Form.Item label="科室" name="deptName">
								<Input placeholder="请输入" autoComplete='off' allowClear maxLength='30'/>
							</Form.Item>
						</Col>
						<Col span={5} key={2}>
							<Form.Item label="工号" name="doctorCode">
								<Input placeholder="请输入" autoComplete='off' allowClear maxLength='30'/>
							</Form.Item>
						</Col>
						<Col span={5} key={3}>
							<Form.Item label="职务/职称名称" name="name">
								<Input placeholder="请输入" autoComplete='off' allowClear maxLength='30'/>
							</Form.Item>
						</Col>
						<Col span={5} key={4}>
							<Form.Item label="变更类型" name="type">
								<Select
									placeholder="请选择"
								>
									<Option value="" key={0}>全部</Option>
									<Option value="1" key={1}>{typeMap['1']}</Option>
									<Option value="2" key={2}>{typeMap['2']}</Option>
								</Select>
							</Form.Item>
						</Col>
						<Col span={8} key={5}>
							<Form.Item label="变更时间" style={{height:'32px'}}>
								<Form.Item name="changeTimeStart" className='times'>
								    <DatePicker
								        allowClear={false}
								        disabledDate={disabledDate}
								        placeholder="请选择开始日期"
								    />
								</Form.Item>
								<span style={{ margin: '0 5px', position: 'relative', top: '2px' }}>-</span>
								<Form.Item name="changeTimeEnd" className='times'>
								    <DatePicker
								        allowClear={false}
								        disabledDate={disabledDate}
								        placeholder="请选择结束日期"
								    />
								</Form.Item>
							</Form.Item>
						</Col>
						<Col span={6} key={6}>
							<Form.Item>
								<Button type="primary" htmlType="submit">
									查询
								</Button>
								<Button onClick={onReset}>
									重置
								</Button>
							</Form.Item>
						</Col>
					</Row>
				</Form>
			</div>

			<div className="table">
				<div className="table-header">
					<h2 className="table-title">职务职称变更记录</h2>
					<Button type="primary" onClick={() => showDelModal(true)} danger>删除</Button>
				</div>

				<Table
					columns={columns}
					rowSelection={rowSelection}
					scroll={{ y: 'calc(100vh - 400px)' }}
					dataSource={logList}
					rowKey={record => record.id}
					pagination={{
						pageSize: size,
						size: 'small',
						current: current,
						showSizeChanger: true,
						pageSizeOptions: ['15', '30', '60', '120'],
						showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条数据`,
						onShowSizeChange: (current, pageSize) => onSizeChange(current, pageSize), // 改变每页数量时更新显示
						onChange: (page, pageSize) => changePage(page, pageSize),//点击页码事件
						total: total
					}} />
			</div>
			<Modal
				title="删除职务职称变更记录"
				okText='确定'
				cancelText='关闭'
				width={400}
				visible={visible}
				onOk={delRecord}
				/*confirmLoading={confirmLoading}*/
				onCancel={() => showDelModal(false)}
				maskClosable={false}
			>
				<p>职务职称变更记录删除后将无法恢复，确认删除这{selectedRowKeys.length}条变更记录？</p>
			</Modal>
		</div >
	)
}

export default DutyRecord;