pc-admin/src/pages/Medical/Hospital/index.jsx

import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { Button, Modal, Input, notification } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import request, { queryTable } from '@/utils/request';
import School from '@/components/School';

export default () => {
  const tableRef = useRef();
  const [school, setSchool] = useState();
  const [current, setCurrent] = useState();
  const [inputVal, setInputVal] = useState([]);
  const [show, setShow] = useState(false);

  const queryFunc = (params, page, sort, filter) => {
    if (!school.schoolId) {
      return Promise.resolve({ data: [], success: true, total: 0 });
    }

    const newParams = { ...params, schoolId: school.schoolId };
    return queryTable('/hospital')(newParams, page, sort, filter);
  };

  const handleEdit = (hospital) => {
    setCurrent(hospital);
    setInputVal(hospital.name);
    setShow(true);
  };

  const handleAdd = () => {
    setCurrent();
    setInputVal();
    setShow(true);
  };

  const changeStatus = (hospital) => {
    // 0 变 1, 1 变 0
    // eslint-disable-next-line no-bitwise
    const status = hospital.status ^ 1;
    const data = { ...hospital, status }

    request(`/hospital/${hospital.hospitalId}`, {
      method: 'put',
      data,
    })
      .then(() => {
        tableRef.current.reload();
        notification.success({ message: '操作成功' });
      })
      .catch((e) => {
        notification.error({ message: e.message });
      });


  };

  const renderFormItem = (item, config, form) => {
    const handleSchoolChange = (schoolId, schoolInfo) => {
      form.setFieldsValue({ schoolId });
      form.submit();
      setSchool(schoolInfo);
    };

    return <School onChange={handleSchoolChange} />;
  };

  const columns = [
    {
      title: '所属学校',
      key: 'schoolId',
      dataIndex: 'schoolId',
      hideInTable: true,
      valueType: 'select',
      renderFormItem,
    },
    {
      title: '诊室名称',
      key: 'name',
      dataIndex: 'name',
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      valueEnum: {
        0: { text: '未启用', status: 'Default' },
        1: { text: '启用', status: 'Success' },
      },
      hideInSearch: true,
    },
    {
      title: '创建日期',
      key: 'createDate',
      dataIndex: 'createDate',
      valueType: 'date',
      hideInSearch: true,
    },
    {
      title: '操作',
      key: 'option',
      valueType: 'option',
      width: 180,
      render: (_, hospital) => [
        <a key="edit" onClick={() => handleEdit(hospital)}>
          修改
        </a>,
        <a key="status" onClick={() => changeStatus(hospital)}>
          {hospital.status === 1 ? '弃用' : '启用'}
        </a>,
      ],
    },
  ];

  const handleSubmit = () => {
    setShow(false);

    if (!inputVal) {
      return;
    }

    if (current && current.hospitalId) {
      request(`/hospital/${current.hospitalId}`, {
        method: 'put',
        data: { ...current, name: inputVal },
      })
        .then(() => {
          tableRef.current.reload();
          notification.success({ message: '修改成功' });
        })
        .catch((e) => {
          notification.error({ message: e.message });
        });
    } else {
      request('/hospital', { method: 'post', data: { schoolId: school.schoolId, name: inputVal } })
        .then(() => {
          tableRef.current.reload();
          notification.success({ message: '修改成功' });
        })
        .catch((e) => {
          notification.error({ message: e.message });
        });
    }
  };

  const actions = [
    <Button key="button" icon={<PlusOutlined />} type="primary" onClick={handleAdd}>
      新建
    </Button>,
  ];

  return (
    <PageContainer>
      <ProTable
        manualRequest
        actionRef={tableRef}
        columns={columns}
        request={queryFunc}
        rowKey="hospitalId"
        headerTitle="诊室列表"
        toolBarRender={() => actions}
      />
      <Modal
        title={school?.name}
        visible={show}
        onOk={handleSubmit}
        onCancel={() => setShow(false)}
      >
        <Input size="large" value={inputVal} onChange={(e) => setInputVal(e.target.value)} />
      </Modal>
    </PageContainer>
  );
};