提交医疗组模块交互

src/components/MedicalTeam/addMedical.js

@@ -0,0 +1,115 @@
+import React, {
+  useState, useEffect, useContext
+} from 'react';
+import {  Form, Input, Select, Button, Switch, TreeSelect, message, Space } from 'antd';
+import apiObj from '@api/index';
+import { organizationData } from '@utils/index'
+import MedicalContext from './medical-context';
+import { useSelector } from 'react-redux'
+const { post, api, xPost } = apiObj;
+const { Option } = Select;
+
+function AddMedical(props){
+	//加载下拉条件
+	useEffect(() => {
+	  // getHospitalTree();
+	  // getCreateRoles()
+	});
+	const [form] = Form.useForm(); 
+	const { formData } = useContext(MedicalContext); //中间组件传值过来的
+	const initialValues = formData; //表单的值
+	console.log(initialValues);
+	
+	const staticInfo = useSelector(state => {
+	  return state.staticInfo;
+	});
+	const { titleList } = staticInfo; //上级科室
+	
+	const onFinish = values => {
+	  let params = values
+	  // addHospitalTreeVO.hospitals = unique(addHospitalTreeVO.hospitals)
+	  // params.addHospitalTreeVO = addHospitalTreeVO
+	  // if (type == 2) {
+	  //   params.id = userId
+	  //   editUser(params)
+	  // } else {
+	  //   addUser(params)
+	  // }
+	
+	};
+	//接收父组件的方法
+	function cancel() {
+	  props.userChange()
+	}
+	
+	return (
+		<>
+			<Form
+			  labelCol={{ span: 6 }}
+			  wrapperCol={{ span: 16 }}
+			  form={form}
+			  name="register"
+			  onFinish={onFinish}
+			  initialValues={initialValues}
+			>
+				<Form.Item
+				  name="username"
+				  label="医疗组ID"
+				>
+					<Input placeholder="请输入医疗组ID" autoComplete='off'/>
+				</Form.Item>
+				<Form.Item
+				  name="name"
+				  label="医疗组名称"
+				  rules={[
+				    {
+				      required: true,
+				      message: '请输入医疗组名称',
+				    },
+				  ]}
+				>
+					<Input placeholder="请输入医疗组名称" autoComplete='off'/>
+				</Form.Item>
+				<Form.Item
+				  name="titleId"
+				  label="上级科室"
+				>
+				  
+				    <Select placeholder="请选择上级科室">
+				      {titleList.map((item) => {
+				        return (
+				          <Option value={item.name} key={item.name}>{item.val}</Option>
+				        )
+				      })}
+				    </Select>
+				</Form.Item>
+				<Form.Item
+				  name="titleId"
+				  label="上级病区"
+				>
+				  
+				    <Select placeholder="请选择上级病区">
+				      {titleList.map((item) => {
+				        return (
+				          <Option value={item.name} key={item.name}>{item.val}</Option>
+				        )
+				      })}
+				    </Select>
+				</Form.Item>
+				
+				
+				<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+				  <Space size="middle">
+				    <Button htmlType="button" onClick={e => cancel()}>
+				      取消
+				  </Button>
+				    <Button type="primary" htmlType="submit">
+				      保存
+				  </Button>
+				  </Space>
+				</Form.Item>
+			</Form>
+		</>
+	)
+}
+export default AddMedical;

src/components/MedicalTeam/index.js

@@ -1,194 +1,295 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Table, Row, Col, DatePicker } from 'antd';
+import { Form, Input, Button, Table, Row, Col, DatePicker,Modal } from 'antd';
 import '@common/common.less';
 import apiObj from '@api/index';
 import moment from "moment";
 import "moment/locale/zh-cn"
+import medicalContext from './medical-context';
+import AddMedical from './addMedical.js';
 // import "./index.less"
-const { post, api, } = apiObj;
-const { RangePicker } = DatePicker;
+	const { post, api, } = apiObj;
+	const { RangePicker } = DatePicker;
 function MedicalTeam() {
-  useEffect(() => {
-	getMedicalTeam();
-  }, []);
-  const [logList, setLogList] = useState([]);
-  const [total, setTotal] = useState(0);
-  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();
-
-  let list = []
-  let data = {
-	pages: 1,
-	current: 1,
-	size: size
-  }
-  //表格数据
-  function getMedicalTeam(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 onSizeChange(current, pageSize) {
-	params.current = current
-	params.size = pageSize
-	setSize(pageSize)
-	setCurrent(current)
-	setParams(params)
-	getMedicalTeam()
-  }
-  function changePage(page, pageSize) {
-	params.current = page
-	params.size = pageSize
-	setParams(params);
-	setCurrent(page);
-	getMedicalTeam()
-  }
-
-  function onSelectChange(selectedRowKeys){
-	console.log('selectedRowKeys changed: ', selectedRowKeys);
-	setSelectedRowKeys(selectedRowKeys);
-  };
-
-  function onEdit(){
-
-  }
-  function onForbidden(){
-
-  }
-  function onDelete(){
-
-  }
-
-  const onFinish = (value) => {
-	if (value.time){
-	  value.startDate = moment(value.time[0]).format('YYYY-MM-DD 00:00:00');
-	  value.endDate = moment(value.time[1]).format('YYYY-MM-DD 23:23:59');
+	useEffect(() => {
+		getMedicalTeam();
+	}, []);
+	const [logList, setLogList] = useState([{operationId:'3233',operationName:'张三',operationDate:'心电',operationIp:'232323',operationDate:'232323',status:'1'},
+	{operationId:'3233',operationName:'张三',operationDate:'心电',operationIp:'232323',operationDate:'232323',status:'2'}]);
+	const [total, setTotal] = useState(0);
+	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(); 
+	//表格
+	let list = []
+	let data = {
+		pages: 1,
+		current: 1,
+		size: size
 	}
-	const param = {
-	  ...data,
-	  ...value,
+	//表格数据
+	function getMedicalTeam(param) {
+		post(api.getOfficialCapacityPage, param || params).then((res) => {
+		  if (res.data.code === 200) {
+			const data = res.data.data;
+			// setLogList(data.records);
+			setTotal(data.total)
+		  }
+		})
 	}
-	setCurrent(1)
-	setParams(param)
-	getMedicalTeam(param);
-  };
-  const onReset = () => {
-	setCurrent(1)
-	setParams(data)
-	form.resetFields();
-	getMedicalTeam(data);
-  };
-  const columns = [
-	{ title: '医疗组ID', dataIndex: 'operationId', key: 'index'},
-	{ title: '医疗组名称', dataIndex: 'operationName', key: 'index'},
-	{ title: '上级科室', dataIndex: 'operationDate', key: 'index'},
-	{ title: '上级病区', dataIndex: 'operationIp', key: 'index'},
-	{ title: '关联医生', dataIndex: 'operationDate', key: 'index'},
-	{ title: '状态', dataIndex: 'operationIp', key: 'index' },
-	{title: '操作', dataIndex: 'operation', key: 'operation', render: (text, record) =>{
-		return <div className="medical-team-operation">
-		  			<a onClick={onEdit}>修改</a>
-				  <a onClick={onForbidden}>禁用</a>
-				  <a onClick={onDelete}>删除</a>
-				</div>
-	  }},
-  ];
-  const rowSelection = {
-	selectedRowKeys,
-	onChange: onSelectChange,
-  };
-  return (
-	  <div className="wrapper">
-		<div className="filter-box">
-		  <Form
-			  form={form}
-			  name="normal_login"
-			  onFinish={onFinish}
-			  initialValues={{ status: '' }}
-		  >
-			<Row gutter={24}>
-			  <Col span={5} key={0}>
-				<Form.Item label="医疗组ID" name="operationName">
-				  <Input placeholder="请输入" autoComplete='off'/>
-				</Form.Item>
-			  </Col>
-			  <Col span={5} key={1}>
-				<Form.Item label="医疗组名称" name="operationName">
-				  <Input placeholder="请输入" autoComplete='off'/>
-				</Form.Item>
-			  </Col>
-			  <Col span={5} key={2}>
-				<Form.Item label="上级科室" name="operationName">
-				  <Input placeholder="请输入" autoComplete='off'/>
-				</Form.Item>
-			  </Col>
-			  <Col span={5} key={3}>
-				<Form.Item label="上级病区" name="operationName">
-				  <Input placeholder="请输入" autoComplete='off'/>
-				</Form.Item>
-			  </Col>
-			  <Col span={5} key={4}>
-				<Form.Item label="关联医生" name="operationName">
-				  <Input placeholder="请输入" autoComplete='off'/>
-				</Form.Item>
-			  </Col>
-			  <Col span={7} key={5}>
-				<Form.Item label="状态" name="operationName">
-				  <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" >新增</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>
-	  </div >
-  )
+	function onSizeChange(current, pageSize) {
+		params.current = current
+		params.size = pageSize
+		setSize(pageSize)
+		setCurrent(current)
+		setParams(params)
+		getMedicalTeam()
+	}
+	function changePage(page, pageSize) {
+		params.current = page
+		params.size = pageSize
+		setParams(params);
+		setCurrent(page);
+		getMedicalTeam()
+	}
+	
+	function onSelectChange(selectedRowKeys){
+		console.log('selectedRowKeys changed: ', selectedRowKeys);
+		setSelectedRowKeys(selectedRowKeys);
+	};
+	
+	function onEdit(){
+	
+	}
+	function onForbidden(){
+	
+	}
+	function onDelete(){
+	
+	}
+	//弹窗类型：1.禁用 2.启用 3.删除 (1.有关联医生，2.没有关联医生)
+	const [modalType, setModalType] = useState(1);
+	//弹框提示文字
+	const tipText={
+		1:'确认禁用该医疗组？',
+		2:'该医疗组信息关联医生，禁用后将自动解除关联，确认禁用该数据？',
+		3:'医疗组信息删除后将无法恢复，确认删除该数据？',
+		4:'该医疗组信息关联医生，删除后将自动解除关联，确认删除该数据？'  
+	}
+	const [visibleModel, setVisible] = useState(false);   //删除禁用确认弹窗显示
+	const [confirmLoading, setConfirmLoading] = useState(false);
+	//启用/禁用 flag=1启用 ：禁用
+	const enable=(flag,id,type)=>{
+			//请求接口
+	}
+	//启用/禁用弹框打开方法
+	const showModal=(type,id,flag)=>{
+		setModalType(type);
+		setVisible(true)
+	}
+		//启用/禁用弹窗取消
+		const handleCancel=()=>{
+			setVisible(false);
+			// setAddVisible(false);
+		}
+		//启用/禁用弹窗确认事件
+	  function handleOk() {
+	      if ("1,2".indexOf(modalType) > -1) {
+	          // onDelete();
+	      } else if ("3,4".indexOf(modalType) > -1) {
+	          enable(0);
+	      } else if (modalType === 5) {
+	          // onResetPsd();
+	      }
+	
+	  }
+	
+		//打开新增修改弹框
+		const [addVisible,setaddVisible] = useState(false); //弹框是否显示
+		const [formData, setFormData] = useState(null); //弹框是否有数据
+		const [title, setTitle] = useState("");    //弹框的标题
+		const [type, setType] = useState("");    //弹框类型是新增还是修改
+		const [userId, setUserId] = useState(""); 
+		//新增/修改弹框打开方法(flag 1:新增，2:修改 )
+		const showAddModel=(name,flag,userId)=>{
+			console.log('111',flag)
+			setTitle(name);
+			setType(flag)
+			setUserId(userId)
+			if (flag == 1||flag == 2) {
+			  setFormData({
+			    status: '1'
+			  })
+			}
+			setaddVisible(true);
+		}
+		//新增修改弹框关闭方法
+		function cancel() {
+		  setVisible(false)
+		  setFormData(null)
+		}
+		//点击按钮关闭
+		function userChange() {
+		  setVisible(false)
+		  setFormData(null)
+		  //重新渲染列表
+		  // getUserPage();
+		}
+	
+	const onFinish = (value) => {
+		if (value.time){
+		  value.startDate = moment(value.time[0]).format('YYYY-MM-DD 00:00:00');
+		  value.endDate = moment(value.time[1]).format('YYYY-MM-DD 23:23:59');
+		}
+		const param = {
+		  ...data,
+		  ...value,
+		}
+		setCurrent(1)
+		setParams(param)
+		getMedicalTeam(param);
+	};
+	const onReset = () => {
+		setCurrent(1)
+		setParams(data)
+		form.resetFields();
+		getMedicalTeam(data);
+	};
+	const columns = [
+		{ title: '医疗组ID', dataIndex: 'operationId', key: 'index'},
+		{ title: '医疗组名称', dataIndex: 'operationName', key: 'index'},
+		{ title: '上级科室', dataIndex: 'operationDate', key: 'index'},
+		{ title: '上级病区', dataIndex: 'operationIp', key: 'index'},
+		{ title: '关联医生', dataIndex: 'operationDate', key: 'index'},
+		{ title: '状态', dataIndex: 'operationIp', key: 'index' },
+		{title: '操作', dataIndex: 'operationId', key: 'operationId', render: (text, record) =>{
+			return <div className="medical-team-operation">
+			  			<a onClick={e => showAddModel('修改医疗组信息', 2)}>修改</a>
+					  	{record.status === '1' ?(<a onClick={()=>showModal(record.hasUserFlag || record.hasHospitalFlag ? 2 : 1, record.operationId, record.type='')}>禁用</a>):(<a onClick={enable}>启用</a>)}
+					 	<a onClick={()=>showModal(record.UserFlag || record.HospitalFlag ? 4 : 3, record.operationId, record.type='')}>删除</a>
+					</div>
+		  }},
+	];
+	const rowSelection = {
+		selectedRowKeys,
+		onChange: onSelectChange,
+	};
+	return (
+		  <div className="wrapper">
+			<div className="filter-box">
+			  <Form
+				  form={form}
+				  name="normal_login"
+				  onFinish={onFinish}
+				  initialValues={{ status: '' }}
+			  >
+				<Row gutter={24}>
+				  <Col span={5} key={0}>
+					<Form.Item label="医疗组ID" name="operationName">
+					  <Input placeholder="请输入" autoComplete='off'/>
+					</Form.Item>
+				  </Col>
+				  <Col span={5} key={1}>
+					<Form.Item label="医疗组名称" name="operationName">
+					  <Input placeholder="请输入" autoComplete='off'/>
+					</Form.Item>
+				  </Col>
+				  <Col span={5} key={2}>
+					<Form.Item label="上级科室" name="operationName">
+					  <Input placeholder="请输入" autoComplete='off'/>
+					</Form.Item>
+				  </Col>
+				  <Col span={5} key={3}>
+					<Form.Item label="上级病区" name="operationName">
+					  <Input placeholder="请输入" autoComplete='off'/>
+					</Form.Item>
+				  </Col>
+				  <Col span={5} key={4}>
+					<Form.Item label="关联医生" name="operationName">
+					  <Input placeholder="请输入" autoComplete='off'/>
+					</Form.Item>
+				  </Col>
+				  <Col span={7} key={5}>
+					<Form.Item label="状态" name="operationName">
+					  <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={(e) => showAddModel('新增医疗组信息', 1)}>新增</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>
+			
+			{addVisible && formData ?
+			  <Modal
+			    title={title}
+			    okText='确定'
+			    cancelText='取消'
+			    width={500}
+			    visible={addVisible}
+			    onCancel={cancel}
+			    footer={null}
+			    forceRender={true}
+			  >
+					<medicalContext.Provider value={{ formData }}>
+					  <AddMedical userChange={userChange} />
+					</medicalContext.Provider>
+			  </Modal>
+			  : ''}
+			
+			<Modal
+	              title="提示"
+	              okText='确定'
+	              cancelText='取消'
+	              width={400}
+	              visible={visibleModel}
+	              onOk={handleOk}
+	              confirmLoading={confirmLoading}
+	              onCancel={handleCancel}
+	          >
+	          <p>{tipText[modalType]}</p>
+	      </Modal>
+		  </div >
+	)
 }
 
 export default MedicalTeam;

src/components/MedicalTeam/medical-context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+const MedicalContext = createContext(null);
+
+export default MedicalContext;