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 '@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 } from '@utils/index'
const { post, api, xPost } = apiObj;
const { RangePicker } = DatePicker;
const { Option } = Select;
function DutyRecord() {
	useEffect(() => {
		getDutyRecord();
	}, []);
	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+" 23:23:59",
		changeTimeStart:lastmonthday+" 00:00:00",
		pages: 1,
		current: 1,
		size: 15
	});
	const [form] = Form.useForm();
	const typeMap = {
		'1': '职务变更',
		'2': '职称变更'
	};
	let data = {
		changeTimeEnd:today+" 23:23:59",
		changeTimeStart:lastmonthday+" 00:00:00",
		pages: 1,
		current: 1,
		size: size
	}
	
	function getlastmonthday(){
		var now=new Date();
		  var year = now.getFullYear();//getYear()+1900=getFullYear()
		  var month = now.getMonth() +1;//0-11表示1-12月
		  var day = now.getDate();
		  if(parseInt(month)<10){
		      month="0"+month;
		  }
		  if(parseInt(day)<10){
		      day="0"+day;
		  }
		  now =year + '-'+ month + '-' + day;
		  if (parseInt(month) ==1) {//如果是1月份，则取上一年的12月份
		      return (parseInt(year) - 1) + '-12-' + day;
		  }
		  var  preSize= new Date(year, parseInt(month)-1, 0).getDate();//上月总天数
		  if (preSize < parseInt(day)) {//上月总天数<本月日期，比如3月的30日，在2月中没有30
		       return year + '-' + month + '-01';
		  }
		 
		  if(parseInt(month) <=10){
		      return year + '-0' + (parseInt(month)-1) + '-' + day;
		  }else{
		      return year + '-' + (parseInt(month)-1) + '-' + day;
		  }
	}
	function getNowFormatDate() {
	      var date = new Date();
	      var seperator1 = "-";
	      var year = date.getFullYear();
	      var month = date.getMonth() + 1;
	      var strDate = date.getDate();
	      if (month >= 1 && month <= 9) {
	        month = "0" + month;
	      }
	      if (strDate >= 0 && strDate <= 9) {
	        strDate = "0" + strDate;
	      }
	      var currentdate = year + seperator1 + month + seperator1 + strDate;
	      return currentdate;
	    }
	//表格数据
	function getDutyRecord(param) {
		post(api.getOfficialCapacityPage, param || params).then((res) => {
			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)
		getDutyRecord()
	}
	function changePage(page, pageSize) {
		params.current = page
		params.size = pageSize
		setParams(params)
		setCurrent(page)
		getDutyRecord()
	}
	function onSelectChange(selectedRowKeys) {
		setSelectedRowKeys(selectedRowKeys);
	};
	const onFinish = (value) => {
		if (value.changeTime) {
			value.changeTimeStart = moment(value.changeTime[0]).format('YYYY-MM-DD 00:00:00')
			value.changeTimeEnd = moment(value.changeTime[1]).format('YYYY-MM-DD 23:23:59')
		}else{
			value.changeTimeStart =lastmonthday+" 00:00:00"
			value.changeTimeEnd =today+" 23:23:59"
		}
		const param = {
			...data,
			...value,
		}
		setSelectedRowKeys([])
		setCurrent(1)
		setParams(param)
		getDutyRecord(param);
	};
	const onReset = () => {
		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: '' }}
				>
					<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="请选择"
									allowClear
								>
									<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={7} key={5}>
							<Form.Item label="变更时间" name="changeTime">
								<RangePicker
									defaultValue={[moment(lastmonthday), moment(today)]}
									disabledDate={disabledDate}
									placeholder={['开始时间', '结束时间']}
								/>
							</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 - 360px)' }}
					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;