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

import React, { useEffect, useState } from "react";
import {
  Button,
  Descriptions,
  Form,
  Input,
  InputNumber,
  message,
  Modal,
  Row,
  Col,
  Table,
  Tag,
  Select,
  Space,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
import SearchForm from "@cqsjjb/jjb-react-admin-component/SearchForm";
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import { tools } from "@cqsjjb/jjb-common-lib";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_EQUIP_INFO } from "~/enumerate/namespace";
import { positiveNumberRule } from "~/utils/validators";

const { router } = tools;
const DUAL_CHANNEL_MAP = { 1: "是", 0: "否" };

function EquipInfoPage(props) {
  const [formModalOpen, setFormModalOpen] = useState(false);
  const [viewModalOpen, setViewModalOpen] = useState(false);
  const [currentId, setCurrentId] = useState("");
  const [searchForm] = Form.useForm();
  const { equipInfo } = props;
  const {
    equipInfoList: dataSource,
    equipInfoTotal: total,
    equipInfoLoading: loading,
  } = equipInfo || {};

  const handleSearch = () => {
    props.equipInfoList({
      ...router.query,
    });
  };

  useEffect(() => {
    searchForm.setFieldsValue(router.query);
    handleSearch();
  }, []);

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

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

  return (
    <PageLayout
      title="装备信息管理"
      extra={
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setCurrentId("");
            setFormModalOpen(true);
          }}
        >
          新增装备
        </Button>
      }
    >
      <SearchForm
        style={{ marginBottom: 24 }}
        form={searchForm}
        loading={loading}
        formLine={[
          <Form.Item key="likeDeviceName" name="likeDeviceName">
            <ControlWrapper.Input
              label="设备名称"
              placeholder="请输入"
              allowClear
            />
          </Form.Item>,
          <Form.Item key="instrumentType" name="instrumentType">
            <ControlWrapper.Input
              label="仪器类型"
              placeholder="请输入"
              allowClear
            />
          </Form.Item>,
          <Form.Item key="deviceType" name="deviceType">
            <ControlWrapper.Input
              label="设备类型"
              placeholder="请输入"
              allowClear
            />
          </Form.Item>,
          <Form.Item key="enableFlag" name="enableFlag">
            <ControlWrapper.Select
              label="设备状态"
              placeholder="请选择"
              allowClear
              style={{ width: "100%" }}
            >
              <Select.Option value={1}>启用</Select.Option>
              <Select.Option value={2}>禁用</Select.Option>
            </ControlWrapper.Select>
          </Form.Item>,
        ]}
        onReset={() => {
          router.query = { ...router.query, current: 1, size: 10 };
          handleSearch();
        }}
        onFinish={() => {
          router.query = { ...router.query, current: 1, size: 10 };
          handleSearch();
        }}
      />
      <Table
        rowKey="id"
        columns={[
          {
            title: "设备名称",
            dataIndex: "deviceName",
            width: 200,
            ellipsis: true,
          },
          { title: "设备型号", dataIndex: "deviceModel" },
          { title: "仪器类型", dataIndex: "instrumentType" },
          { title: "设备类型", dataIndex: "deviceType" },
          {
            title: "厂家",
            dataIndex: "manufacturer",
            ellipsis: true,
            width: 180,
          },
          { title: "校准单位", dataIndex: "calibrationUnit" },
          { title: "校准初值", dataIndex: "calibrationInitValue", width: 100 },
          {
            title: "设备状态",
            width: 90,
            render: (_, record) => {
              const enabled = record.enableFlag === 1;
              return (
                <Tag color={enabled ? "green" : "red"}>
                  {enabled ? "启用" : "禁用"}
                </Tag>
              );
            },
          },
          {
            title: "操作",
            width: 180,
            render: (_, record) => (
              <TableAction>
                <Button
                  type="link"
                  size="small"
                  onClick={() => {
                    setCurrentId(record.id);
                    setViewModalOpen(true);
                  }}
                >
                  查看
                </Button>
                <Button
                  type="link"
                  size="small"
                  onClick={() => {
                    setCurrentId(record.id);
                    setFormModalOpen(true);
                  }}
                >
                  编辑
                </Button>
                <Button
                  type="link"
                  size="small"
                  onClick={() => onToggleStatus(record.id, record)}
                >
                  {record.enableFlag === 1 ? "禁用" : "启用"}
                </Button>
                <Button
                  danger
                  type="link"
                  size="small"
                  onClick={() => onDelete(record.id)}
                >
                  删除
                </Button>
              </TableAction>
            ),
          },
        ]}
        dataSource={dataSource}
        scroll={{ y: props.scrollY }}
        loading={loading}
        pagination={{
          total,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (t) => `共 ${t} 条`,
          current: router.query.current || 1,
          pageSize: router.query.size || 10,
          onChange: (page, pageSize) => {
            router.query = { ...router.query, current: page, size: pageSize };
            handleSearch();
          },
        }}
      />

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

function EquipFormModal({
  open,
  currentId,
  equipInfoGet,
  equipInfoAdd,
  equipInfoEdit,
  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);
    equipInfoGet({ id: currentId })
      .then((res) => {
        if (cancelled) return;
        const data = res?.data || {};
        form.setFieldsValue(data);
      })
      .finally(() => {
        if (!cancelled) setDetailLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [open, currentId]);

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

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

  return (
    <Modal
      open={open}
      destroyOnHidden
      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="deviceName"
              label="设备名称"
              rules={[{ required: true, message: "请输入设备名称" }]}
            >
              <Input placeholder="请输入设备名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="deviceModel"
              label="型号"
              rules={[{ required: true, message: "请输入型号" }]}
            >
              <Input placeholder="请输入型号" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="instrumentType"
              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="manufacturer"
              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="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="calibrationInitValue"
              label="校准初始值"
              rules={[positiveNumberRule("校准初始值", false)]}
            >
              <InputNumber
                style={{ width: "100%" }}
                placeholder="请输入校准初始值"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="fieldCalibrationType" label="现场校验类型">
              <Input placeholder="请输入现场校验类型" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="dualChannelFlag" label="是否双路">
              <Select
                allowClear
                placeholder="请选择"
                options={[
                  { label: "是", value: 1 },
                  { label: "否", value: 0 },
                ]}
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}

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

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

  return (
    <Modal
      open={open}
      destroyOnHidden
      title="查看设备"
      width={900}
      loading={detailLoading}
      cancelText="返回"
      okButtonProps={{ style: { display: "none" } }}
      onCancel={onCancel}
    >
      <Descriptions bordered column={2} labelStyle={{ width: 120 }}>
        <Descriptions.Item label="设备名称">
          {info.deviceName}
        </Descriptions.Item>
        <Descriptions.Item label="设备型号">
          {info.deviceModel}
        </Descriptions.Item>
        <Descriptions.Item label="仪器分类">
          {info.instrumentType}
        </Descriptions.Item>
        <Descriptions.Item label="设备类型">
          {info.deviceType}
        </Descriptions.Item>
        <Descriptions.Item label="厂家">{info.manufacturer}</Descriptions.Item>
        <Descriptions.Item label="设备流量说明" span={2}>
          {info.flowDesc}
        </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.calibrationInitValue}
        </Descriptions.Item>
        <Descriptions.Item label="现场校验类型">
          {info.fieldCalibrationType}
        </Descriptions.Item>
        <Descriptions.Item label="是否双路">
          {DUAL_CHANNEL_MAP[info.dualChannelFlag] ?? "-"}
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
}

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