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

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Table, Select, Space, Modal, message, Row, Col, Upload } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import AddDrug from './addDrug'
import MatchDrug from './MatchDrug.js'
import '@common/common.less';
import apiObj from '@api/index';
import DrugContext from './Drug-context';

const { post, api } = apiObj;
const { Option } = Select;
//获取列表
function DrugManager() {
  useEffect(() => {
    getDrugPage();
  }, []);
  const [DrugList, setDrugList] = useState([]);//当前页列表数据
  const [Drugid, setDrugid] = useState([]);//当前列表id
  const [title, setTitle] = useState("");//数据总量
  const [visible, setVisible] = useState(false);//新增修改 弹窗
  const [msvisible, setMsvisible] = useState(false);//删除 弹窗
  const [visible1, setvisible1] = useState(false);//导入 弹窗
  const [visible2, setvisible2] = useState(false);//匹配 弹窗
  const [unsaved, setUnsaved] = useState(false);//修改未保存弹窗
  const [revise, setRevise] = useState(false);//是否修改 新增修改内容
  const [type, setType] = useState("");
  const [formData, setFormData] = useState(null);//当前行数据
  const [size, setSize] = useState(15);//每页显示条数
  const [total, setTotal] = useState(0);
  const [current, setCurrent] = useState(1);//当前页
  const [uploadStatus, setUploadStatus] = useState(0);//导入状态，0初始，1成功，2格式错误，3导入数据错误
  const [uploadTip, setUploadTip] = useState("");		//导入状态提示语
  const [saveParams, setSaveParams] = useState({});		//匹配药品选中
  const [params, setParams] = useState({
    pages: 1,
    current: 1,
    size: 15
  });
  const [form] = Form.useForm();
  const tipMap = {
    0: '提示：EXCEL导入，模板样式及数据请在【朗通云平台-CDSS数据维护-医学术语关联维护】中导出获取。',
    2: "模板格式错误，模板样式及数据请在【朗通云平台-CDSS数据维护-医学术语关联维护】中导出获取",
    3: '模板导入失败，失败原因已在Excel中标识并自动下载，请检查后重新导入',
  };

  let data = {
    pages: 1,
    current: 1,
    size: size
  }
  //新增 弹窗
  const showModal = (name, type, flag, Drugrow) => {
    setVisible(type);
    setTitle(name);
    setType(flag)
    if (flag == 1) {
      setFormData({
        status: '1'
      })
    }
    if (flag == 3) {
      setFormData(Drugrow)
      getDrugPage()
    }
  }
  //表格数据
  function getDrugPage(param) {
    post(api.getDrugPage, param || params).then((res) => {
      if (res.data.code === 200) {
        const data = res.data.data;
        setDrugList(data.records);
        setTotal(data.total)
      }
    })
  }

  //删除
  function delDrugById() {
    post(api.delDrugById, { ids: Drugid }).then((res) => {
      setMsvisible(false);
      if (res.data.code === 200) {
        getDrugPage();
        setDrugid([])
        message.success("操作成功");
      } else {
        message.warning(res.data.msg || '操作失败');
      }
    }).catch(() => {
      setMsvisible(false);
      message.error("接口出错");
    });
  }
  //每页显示条数切换
  function onSizeChange(current, pageSize) {
    params.current = current
    params.size = pageSize
    setSize(pageSize)
    setCurrent(current)
    setParams(params)
    getDrugPage()
  }
  //翻页
  function changePage(page, pageSize) {
    params.current = page
    params.size = pageSize
    setCurrent(page)
    setParams(params)
    getDrugPage()
  }
  const onFinish = (value) => {
    const param = {
      ...data,
      ...value
    }
    setCurrent(1)
    setParams(param)
    getDrugPage(param);
  };
  //重置
  const onReset = () => {
    setCurrent(1)
    setParams(data)
    form.resetFields();
    getDrugPage(data);
  };
  //打开导入弹窗
  const ImportBox = () => {
    setvisible1(true)
  }
  //导入弹窗取消或关闭
  function handleCancel1() {
    setvisible1(false);
    setUploadStatus(0);
  }
  //打开匹配弹窗
  function match(row) {
    setvisible2(true)
    setFormData(row)
  }
  //导入弹窗取消或关闭
  function handleCancel2() {
    setvisible2(false);
  }
  const messageBox = () => {
    if (!Drugid.length) {
      message.warning("请先选择要删除的记录~", 1);
      return;
    }
    setMsvisible(true)
  }
  //删除 提示框取消或关闭
  function handleCancel() {
    setMsvisible(false);
  }

  //新增修改 取消或关闭
  function cancel() {
    if (revise) {
      setUnsaved(true)
    } else {
      setVisible(false)
      setFormData(null)
    }
  }

  function isChange(a) {
    setRevise(a)
  }

  function addCancel() {
    setRevise(false)
    setVisible(false)
    setUnsaved(false)
    setFormData(null)
  }

  function unsavedCancel() {
    setUnsaved(false)
  }

  //新增修改 保存
  function DrugChange() {
    setRevise(false)
    setVisible(false)
    getDrugPage();
  }
  function saveMatching() {
    post(api.matchingDrug, saveParams).then((res) => {
      setvisible2(false);
      if (res.data.code === 200) {
        message.success("匹配成功");
        getDrugPage();
      } else {
        message.warning(res.data.message || "匹配失败，请重试");
      }
    }).catch((error) => {
      message.warning(error.message || "接口出错，请重试",);
    })
  }
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      setDrugid(selectedRowKeys)
    }
  };
  //导入模板
  const props = {
    name: 'file',
    accept: ".xls",
    showUploadList: false,
    action: api.importDrug,
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      const { response, status } = info.file;
      if (status === 'done') {
        if (response.code === 200) {
          getDrugPage();		//刷新列表
          //setvisible1(false);			//关闭导入弹窗
          //message.success(`${info.file.name} 导入成功`);
          setUploadStatus(1);
          setUploadTip(response.data);
        } else {
          //message.error(`${info.file.name} 导入失败.`);
          setUploadStatus(2);
        }
      } else if (status === 'error') {
        setUploadStatus(3);
      }
    },
  };
  function matchChange(data) {
    setSaveParams(data);
  }
  const columns = [
    { title: '序号', dataIndex: 'index', render: (text, record, index) => (current - 1) * params.size + index + 1 },
    { title: '医院药品名称', dataIndex: 'name', },
    { title: '国药准字', dataIndex: 'approvalNum', },
    { title: '药品剂型', dataIndex: 'dosageForm', },
    { title: '标准药品名称', dataIndex: 'standard', },
    { title: '是否匹配', dataIndex: 'isMapping', },
    {
      title: '操作', dataIndex: 'key', render: (text, record) => (
        <Space size="middle">
          <a onClick={e => showModal('修改字典', true, 3, record)}>修改</a>
          <a onClick={e => match(record)}>匹配</a>
        </Space>
      )
    }
  ]
  return (
    <div className="wrapper">
      <div className="filter-box">
        <Form
          form={form}
          name="normal_login"
          onFinish={onFinish}
          initialValues={{ isMapping: '' }}
        >
          <Row gutter={24}>
            <Col span={5} key={0}>
              <Form.Item label="医院药品名称" name="name">
                <Input placeholder="请输入" autoComplete='off' allowClear />
              </Form.Item>
            </Col>
            <Col span={5} key={1}>
              <Form.Item label="国药准字" name="approvalNum">
                <Input placeholder="请输入" autoComplete='off' allowClear />
              </Form.Item>
            </Col>
            <Col span={5} key={2}>
              <Form.Item label="药品剂型" name="dosageForm">
                <Input placeholder="请选择" autoComplete='off' allowClear />
              </Form.Item>
            </Col>
            <Col span={5} key={3}>
              <Form.Item label="标准药品名称" name="standard">
                <Input placeholder="请输入" autoComplete='off' allowClear />
              </Form.Item>
            </Col>
            <Col span={4} key={4}>
              <Form.Item id="groupTypeval" label="是否匹配" name="isMapping">
                <Select
                  showSearch
                  optionFilterProp="children"
                  // onSearch={onSearch}
                  // onFocus={onFocus}
                  placeholder="全部"
                >
                  <Option value={''} key={-1}>全部</Option>
                  <Option value={0} key={0}>未匹配</Option>
                  <Option value={1} key={1}>已匹配</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={5} 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>
          <Row gutter={12}>
            <Col key={0}>
              <Button type="primary" icon={<PlusOutlined />} onClick={e => showModal('新增', true, 1)}>新增</Button>
            </Col>
            <Col key={1}>
              <Button onClick={e => messageBox()} type="primary" danger>删除</Button>
            </Col>
            <Col key={2}>
              <Button type="primary" onClick={e => ImportBox()}>导入</Button>
            </Col>
          </Row>
        </div>

        <Table
          rowSelection={{ type: 'checkbox', ...rowSelection, }}
          columns={columns}
          scroll={{ y: 'calc(100vh - 400px)' }}
          dataSource={DrugList}
          rowKey={record => record.id}
          pagination={{
            current: current,
            pageSize: size,
            size: 'small',
            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>
      {visible && formData ?
        <Modal
          title={title}
          okText='确定'
          cancelText='关闭'
          width={'45%'}
          visible={visible}
          onCancel={cancel}
          footer={null}
          forceRender={true}
          maskClosable={false}
        >
          <DrugContext.Provider value={{ type, formData }}>
            <AddDrug DrugChange={DrugChange} cancel={cancel} isChange={isChange} />
          </DrugContext.Provider>
          <Modal
            maskClosable={false}
            title="提示"
            okText='确定'
            cancelText='关闭'
            width={400}
            visible={unsaved}
            onOk={addCancel}
            onCancel={unsavedCancel}
          >
            <p>当前数据未保存 是否确认关闭?</p>
          </Modal>
        </Modal>
        : ''}
      <Modal
        maskClosable={false}
        title="提示"
        okText='确定'
        cancelText='关闭'
        width={400}
        visible={msvisible}
        onOk={delDrugById}
        onCancel={handleCancel}
      >
        <p>药品信息删除后将无法恢复，确认删除这{Drugid.length}条信息。</p>
      </Modal>
      <Modal
        maskClosable={false}
        destroyOnClose={true}
        title="提示"
        width={400}
        visible={visible1}
        onCancel={handleCancel1}
        footer={<Button key="back" onClick={handleCancel1}>关闭</Button>}
      >
        <div style={{ marginBottom: 10 + 'px' }}>
          <span>药品信息导入：</span>
          <Upload {...props}><Button type="primary" >导入目录</Button></Upload>
        </div>
        {uploadStatus === 1 ? (<span style={{ color: '#00AF71' }}>{uploadTip}</span>) : (<span style={{ color: '#E3505B' }}>{tipMap[uploadStatus]}</span>)}
      </Modal>
      <Modal
        maskClosable={false}
        destroyOnClose={true}
        title="提示"
        okText='保存'
        cancelText='关闭'
        width={800}
        visible={visible2}
        onCancel={handleCancel2}
        onOk={saveMatching}
      >
        <MatchDrug row={formData} onChange={matchChange}></MatchDrug>
      </Modal>
    </div>
  )
}

export default DrugManager;