safety-eval-service-frontend/src/pages/Container/EnterpriseInfo/EquipInfo/index.js

import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Descriptions, Form, Input, InputNumber, message, Modal, Row, Col, Select, Space } from "antd";
import { useEffect, useState } from "react";
import AddIcon from "zy-react-library/components/Icon/AddIcon";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
import useTable from "zy-react-library/hooks/useTable";
import { NS_EQUIP_INFO } from "~/enumerate/namespace";
import { isEquipEnabled } from "~/api/enterpriseInfo/adapter";
import { safeListRequest, safeRequest } from "~/utils";
import { positiveNumberRule } from "~/utils/validators";

const DUAL_CHANNEL = { 1: "是", 0: "否" };

function EquipInfoPage(props) {
  const [formModalOpen, setFormModalOpen] = useState(false);
  const [viewModalOpen, setViewModalOpen] = useState(false);
  const [currentId, setCurrentId] = useState("");
  const [searchForm] = Form.useForm();

  const { tableProps, getData } = useTable(safeListRequest(props.equipInfoList), { form: searchForm });

  useEffect(() => {
    getData();
  }, []);

  const onDelete = (id) => {
    Modal.confirm({
      title: "提示",
      content: "数据将会删除，您是否确认删除？",
      okText: "是",
      cancelText: "否",
      onOk: async () => {
        const res = await props.equipInfoRemove({ id });
        if (res?.success !== false) {
          message.success("删除成功");
          getData();
        }
      },
    });
  };

  const onToggleStatus = (id, record) => {
    const enabled = isEquipEnabled(record);
    Modal.confirm({
      title: "提示",
      content: enabled ? "是否停用" : "是否启用",
      okText: "是",
      cancelText: "否",
      onOk: async () => {
        const res = await props.equipInfoToggleStatus({ id });
        if (res?.success !== false) {
          message.success("操作成功");
          await getData();
        }
        else {
          message.error(res?.message || "操作失败");
        }
      },
    });
  };

  return (
    <PageLayout>
      <p style={{ margin: 0, marginBottom: 24, color: "rgba(0, 0, 0, 0.45)" }}>
        实现对评价机构内装备信息的维护管理。
      </p>
      <Search
        form={searchForm}
        options={[
          { name: "likeDeviceName", label: "设备名称", placeholder: "请输入设备名称" },
          { name: "instrumentType", label: "仪器类型" },
          { name: "deviceType", label: "设备类型" },
          {
            name: "enableStatus",
            label: "设备状态",
            render: FORM_ITEM_RENDER_ENUM.SELECT,
            options: [{ label: "启用", value: 1 }, { label: "禁用", value: 0 }],
          },
        ]}
        onFinish={getData}
      />
      <Table
        {...tableProps}
        toolBarRender={() => (
          <Button
            type="primary"
            icon={<AddIcon />}
            onClick={() => {
              setCurrentId("");
              setFormModalOpen(true);
            }}
          >
            新增装备
          </Button>
        )}
        columns={[
          { title: "设备名称", dataIndex: "deviceName" },
          { title: "设备型号", dataIndex: "model" },
          { title: "仪器类型", dataIndex: "instrumentType" },
          { title: "设备类型", dataIndex: "deviceType" },
          { title: "厂家", dataIndex: "manufacturer" },
          { title: "校准单位", dataIndex: "calibrationUnit" },
          { title: "校准初值", dataIndex: "calibrationInitialValue" },
          {
            title: "设备状态",
            width: 90,
            render: (_, record) => (isEquipEnabled(record) ? "启用" : "禁用"),
          },
          {
            title: "操作",
            width: 260,
            render: (_, record) => (
              <Space>
                <Button type="link" onClick={() => { setCurrentId(record.id); setViewModalOpen(true); }}>
                  查看
                </Button>
                <Button type="link" onClick={() => { setCurrentId(record.id); setFormModalOpen(true); }}>
                  编辑
                </Button>
                <Button type="link" onClick={() => onToggleStatus(record.id, record)}>
                  {isEquipEnabled(record) ? "禁用" : "启用"}
                </Button>
                <Button danger type="link" onClick={() => onDelete(record.id)}>删除</Button>
              </Space>
            ),
          },
        ]}
      />

      {formModalOpen && (
        <EquipFormModal
          open={formModalOpen}
          currentId={currentId}
          requestAdd={props.equipInfoAdd}
          requestEdit={props.equipInfoEdit}
          requestDetails={props.equipInfoGet}
          onCancel={() => {
            setFormModalOpen(false);
            setCurrentId("");
          }}
          onSuccess={getData}
        />
      )}
      {viewModalOpen && (
        <EquipViewModal
          open={viewModalOpen}
          currentId={currentId}
          requestDetails={props.equipInfoGet}
          onCancel={() => {
            setViewModalOpen(false);
            setCurrentId("");
          }}
        />
      )}
    </PageLayout>
  );
}

function EquipFormModal({
  open, currentId, requestAdd, requestEdit, requestDetails, onCancel, onSuccess,
}) {
  const [form] = Form.useForm();
  const [submitting, setSubmitting] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);

  useEffect(() => {
    if (!open) {
      return;
    }
    if (!currentId) {
      form.resetFields();
      return;
    }
    let cancelled = false;
    setDetailLoading(true);
    safeRequest(requestDetails, { id: currentId }).then((res) => {
      if (!cancelled && res?.data) {
        form.setFieldsValue(res.data);
      }
    }).finally(() => {
      if (!cancelled) {
        setDetailLoading(false);
      }
    });
    return () => {
      cancelled = true;
    };
  }, [open, currentId]);

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  const handleSubmit = async (values) => {
    try {
      setSubmitting(true);
      const request = currentId ? requestEdit : requestAdd;
      if (currentId) {
        values.id = currentId;
      }
      const res = await request(values);
      if (res?.success !== false) {
        message.success(currentId ? "编辑成功" : "添加成功");
        handleCancel();
        onSuccess();
      }
      else {
        message.error(res?.message || "操作失败");
      }
    }
    finally {
      setSubmitting(false);
    }
  };

  return (
    <Modal
      open={open}
      destroyOnClose
      title={currentId ? "编辑设备" : "添加设备"}
      width={900}
      loading={detailLoading}
      confirmLoading={submitting}
      onCancel={handleCancel}
      onOk={form.submit}
    >
      <Form form={form} layout="vertical" onFinish={handleSubmit}>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item name="instrumentCategory" label="仪器分类" rules={[{ required: true, message: "请选择仪器分类" }]}>
              <Input placeholder="请输入仪器分类" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="deviceType" label="设备类型" rules={[{ required: true, message: "请选择设备类型" }]}>
              <Input placeholder="请输入设备类型" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="deviceName" label="设备名称" rules={[{ required: true, message: "请输入设备名称" }]}>
              <Input placeholder="请输入设备名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="model" label="型号" rules={[{ required: true, message: "请输入型号" }]}>
              <Input placeholder="请输入型号" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="flowDesc" label="设备流量说明">
              <Input placeholder="请输入设备流量说明" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="manufacturer" label="厂家" rules={[{ required: true, message: "请输入厂家" }]}>
              <Input placeholder="请输入厂家" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="minFlow" label="最小流量" rules={[positiveNumberRule("最小流量", false)]}>
              <InputNumber style={{ width: "100%" }} placeholder="请输入最小流量" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="maxFlow" label="最大流量" rules={[positiveNumberRule("最大流量", false)]}>
              <InputNumber style={{ width: "100%" }} placeholder="请输入最大流量" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="calibrationUnit" label="校准单位">
              <Input placeholder="请输入校准单位" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="calibrationInitialValue" label="校准初始值" rules={[positiveNumberRule("校准初始值", false)]}>
              <InputNumber style={{ width: "100%" }} placeholder="请输入校准初始值" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="onSiteCalibrationType" label="现场校验类型">
              <Input placeholder="请输入现场校验类型" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="isDualChannel" label="是否双路">
              <Select
                allowClear
                placeholder="请选择"
                options={[{ label: "是", value: 1 }, { label: "否", value: 0 }]}
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}

function EquipViewModal({ open, currentId, requestDetails, onCancel }) {
  const [info, setInfo] = useState({});
  const [detailLoading, setDetailLoading] = useState(false);

  useEffect(() => {
    if (!open || !currentId) {
      setInfo({});
      return;
    }
    let cancelled = false;
    setDetailLoading(true);
    safeRequest(requestDetails, { id: currentId }).then((res) => {
      if (!cancelled) {
        setInfo(res?.data || {});
      }
    }).finally(() => {
      if (!cancelled) {
        setDetailLoading(false);
      }
    });
    return () => {
      cancelled = true;
    };
  }, [open, currentId]);

  return (
    <Modal
      open={open}
      destroyOnClose
      title="查看设备"
      width={900}
      loading={detailLoading}
      cancelText="返回"
      okButtonProps={{ style: { display: "none" } }}
      onCancel={onCancel}
    >
      <Descriptions bordered column={2} labelStyle={{ width: 120 }}>
        <Descriptions.Item label="仪器分类">{info.instrumentCategory || info.instrumentType}</Descriptions.Item>
        <Descriptions.Item label="设备类型">{info.deviceType}</Descriptions.Item>
        <Descriptions.Item label="设备名称">{info.deviceName}</Descriptions.Item>
        <Descriptions.Item label="型号">{info.model}</Descriptions.Item>
        <Descriptions.Item label="设备流量说明" span={2}>{info.flowDesc}</Descriptions.Item>
        <Descriptions.Item label="厂家">{info.manufacturer}</Descriptions.Item>
        <Descriptions.Item label="现场校验类型">{info.onSiteCalibrationType}</Descriptions.Item>
        <Descriptions.Item label="最小流量">{info.minFlow}</Descriptions.Item>
        <Descriptions.Item label="最大流量">{info.maxFlow}</Descriptions.Item>
        <Descriptions.Item label="校准单位">{info.calibrationUnit}</Descriptions.Item>
        <Descriptions.Item label="校准初始值">{info.calibrationInitialValue}</Descriptions.Item>
        <Descriptions.Item label="是否双路">{DUAL_CHANNEL[info.isDualChannel] ?? "-"}</Descriptions.Item>
      </Descriptions>
    </Modal>
  );
}

export default Connect([NS_EQUIP_INFO], true)(EquipInfoPage);