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";
const { post, api, xPost } = apiObj;
const { RangePicker } = DatePicker;
const { Option } = Select;
function DutyRecord() {
  useEffect(() => {
	getDutyRecord();
  }, []);
  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({
	pages: 1,
	current: 1,
	size: 15
  });
  const [form] = Form.useForm();
  const typeMap = {
    '1':'职务变更',
	'2':'职称变更'
  };
  let data = {
	pages: 1,
	current: 1,
	size: size
  }
  //表格数据
  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) {
	    //刷新列表
		getDutyRecord()
	  }else{
		message.warning(res.data.msg||'操作失败，请重试~');
	  }
	});
	showDelModal(false);
  }
  //删除弹窗确认
  function showDelModal(flag){
    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 onTypeChange(){

	}
  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')
	}
	const param = {
	  ...data,
	  ...value,
	}
	setCurrent(1)
	setParams(param)
	getDutyRecord(param);
  };
  const onReset = () => {
	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}
		  >
			<Row gutter={24}>
			  <Col span={5} key={0}>
				<Form.Item label="医生姓名" name="doctorName">
				  <Input placeholder="请输入" autoComplete='off'/>
				</Form.Item>
			  </Col>
			  <Col span={5} key={1}>
				<Form.Item label="科室" name="deptName">
				  <Input placeholder="请输入" autoComplete='off'/>
				</Form.Item>
			  </Col>
			  <Col span={5} key={2}>
				<Form.Item label="工号" name="doctorCode">
				  <Input placeholder="请输入" autoComplete='off'/>
				</Form.Item>
			  </Col>
			  <Col span={5} key={3}>
				<Form.Item label="职务/职称名称" name="name">
				  <Input placeholder="请输入" autoComplete='off'/>
				</Form.Item>
			  </Col>
			  <Col span={5} key={4}>
				<Form.Item label="变更类型" name="type">
				  <Select
					  placeholder="请选择"
					  onChange={onTypeChange}
					  allowClear
				  >
					<Option value="0" 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
					  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)}>删除</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)}
		>
		  <p>职务职称变更记录删除后将无法恢复，确认删除这{selectedRowKeys.length}条变更记录？</p>
		</Modal>
	  </div >
  )
}

export default DutyRecord;