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

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Table, Modal, Row, Col,message } from 'antd';
import '@common/common.less';
import { useSelector } from 'react-redux';
import apiObj from '@api/index';
import "moment/locale/zh-cn"
const { post, api } = apiObj;
function DocTemplate() {
  const { docNum } = useSelector((state) => {
  	return state.userInfo;
  });
  useEffect(() => {
	  setSize(15)
	  setCurrent(1)
      form.resetFields();
      getDocTemplate();
  }, [docNum]);
  const [logList, setLogList] = useState([]);
  const [total, setTotal] = useState(0);
  const [size, setSize] = useState(15);
  const [visible,setVisible] = useState(false);
  const [current, setCurrent] = useState(1);
  const [tmplInfo,setTmplInfo] = useState({});
  const [params, setParams] = useState({
	pages: 1,
	current: 1,
	size: 15
  });
  const [form] = Form.useForm();

  let data = {
	pages: 1,
	current: 1,
	size: 15
  }
  //表格数据
  function getDocTemplate(param) {
	const hide = message.loading('加载中...',0);
	post(api.getRecordTemplatePage, param || params).then((res) => {
	  hide()
	  if (res.data.code === 200) {
		const data = res.data.data;
		setLogList(data.records);
		setTotal(data.total)
	  }
	})
  }
  //模板详情
  function getTmplInfo(flag,id) {
    if(!flag){
	  setVisible(flag);
	  return;
	}
	const hide = message.loading('加载中...',0);
	post(api.getRecordTemplateManage, {id}).then((res) => {
	  hide();
	  if (res.data.code === 200) {
		const data = res.data.data;
		if(data.type==="2"){					//模板类型,0:未知，1:html，2:xml
		  setVisible(flag);
		  setTmplInfo(data);
		  console.log(data.content)
		}else{
		  const myWindow=window.open('','','width=800,height=600');
		  myWindow.document.write(data.content);
		  myWindow.focus();
		}
	  }
	})
  }
  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)
	getDocTemplate()
  }
  //查看模板
  /*function showModal(flag,id){
	if(flag){
	  getTmplInfo(id);
	}
  }*/
  const onFinish = (value) => {
	const param = {
	  ...params,
	  ...value,
	}
	setCurrent(1)
	setParams(param)
	getDocTemplate(param);
  };
  const onReset = () => {
	setSize(15)
	setCurrent(1)
	setParams(data)
	form.resetFields();
	getDocTemplate(data);
  };
  const columns = [
	{ title: '医院模板ID', dataIndex: 'code', key: 'code' },
	{ title: '医院模板名称', dataIndex: 'name', key: 'name' },
	{ title: '医院父类模板ID', dataIndex: 'parentCode', key: 'parentCode' },
	{ title: '医院父类模板名称', dataIndex: 'parentName', key: 'parentName' },
	{
	  title: '操作', dataIndex: 'operation', key: 'operation', render: (text, record) =>{
		return <a className="showDetail" onClick={()=>getTmplInfo(true,record.id)}>查看</a>
	  }
	},
  ]
  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="医院模板ID" name="code">
				  <Input placeholder="请输入" autoComplete='off' allowClear maxLength='30'/>
				</Form.Item>
			  </Col>
			  <Col span={5} key={1}>
				<Form.Item label="医院模板名称" name="name">
				  <Input placeholder="请输入" autoComplete='off' allowClear maxLength='30'/>
				</Form.Item>
			  </Col>
			  <Col span={5} key={2}>
				<Form.Item label="医院父类模板ID" name="parentCode">
				  <Input placeholder="请输入" autoComplete='off' allowClear maxLength='30'/>
				</Form.Item>
			  </Col>
			  <Col span={5} key={4}>
				<Form.Item label="医院父类模板名称" name="parentName">
				  <Input placeholder="请输入" autoComplete='off' allowClear maxLength='30'/>
				</Form.Item>
			  </Col>
			  <Col span={4} key={5}>
				<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>
		  </div>

		  <Table
			  columns={columns}
			  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
			destroyOnClose={true}
			title="查看文书模板"
			footer={[<Button key={1} type="primary" onClick={()=>setVisible(false)}>
			  关闭
			</Button>]}
			width="90%"
			visible={visible}
			onCancel={()=>setVisible(false)}
		>
		  <div>
			{tmplInfo.content}
		  </div>
		</Modal>
	  </div >
  )
}

export default DocTemplate;