feat

src/pages/Container/EnterpriseInfo/EquipInfo/index.js

@@ -1,5 +1,20 @@
 import React, { useEffect, useState } from "react";
-import { Button, Descriptions, Form, Input, InputNumber, message, Modal, Row, Col, Table, Tag, Select, Space } from "antd";
+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";
@@ -19,7 +34,11 @@ function EquipInfoPage(props) {
   const [currentId, setCurrentId] = useState("");
   const [searchForm] = Form.useForm();
   const { equipInfo } = props;
-  const { equipInfoList: dataSource, equipInfoTotal: total, equipInfoLoading: loading } = equipInfo || {};
+  const {
+    equipInfoList: dataSource,
+    equipInfoTotal: total,
+    equipInfoLoading: loading,
+  } = equipInfo || {};
 
   const handleSearch = () => {
     props.equipInfoList({
@@ -57,7 +76,10 @@ function EquipInfoPage(props) {
       cancelText: "否",
       onOk: async () => {
         const nextFlag = enabled ? 2 : 1;
-        const res = await props.equipInfoToggleStatus({ id, enableFlag: nextFlag });
+        const res = await props.equipInfoToggleStatus({
+          id,
+          enableFlag: nextFlag,
+        });
         if (res?.success !== false) {
           message.success("操作成功");
           handleSearch();
@@ -69,23 +91,54 @@ function EquipInfoPage(props) {
   };
 
   return (
-    <PageLayout title="装备信息管理">
+    <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 />
+            <ControlWrapper.Input
+              label="设备名称"
+              placeholder="请输入"
+              allowClear
+            />
           </Form.Item>,
           <Form.Item key="instrumentType" name="instrumentType">
-            <ControlWrapper.Input label="仪器类型" placeholder="请输入" allowClear />
+            <ControlWrapper.Input
+              label="仪器类型"
+              placeholder="请输入"
+              allowClear
+            />
           </Form.Item>,
           <Form.Item key="deviceType" name="deviceType">
-            <ControlWrapper.Input label="设备类型" placeholder="请输入" allowClear />
+            <ControlWrapper.Input
+              label="设备类型"
+              placeholder="请输入"
+              allowClear
+            />
           </Form.Item>,
           <Form.Item key="enableFlag" name="enableFlag">
-            <ControlWrapper.Select label="设备状态" placeholder="请选择" allowClear style={{ width: "100%" }}>
+            <ControlWrapper.Select
+              label="设备状态"
+              placeholder="请选择"
+              allowClear
+              style={{ width: "100%" }}
+            >
               <Select.Option value={1}>启用</Select.Option>
               <Select.Option value={2}>禁用</Select.Option>
             </ControlWrapper.Select>
@@ -103,19 +156,33 @@ function EquipInfoPage(props) {
       <Table
         rowKey="id"
         columns={[
-          { title: "设备名称", dataIndex: "deviceName", width: 200, ellipsis: true },
+          {
+            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: "manufacturer",
+            ellipsis: true,
+            width: 180,
+          },
           { title: "校准单位", dataIndex: "calibrationUnit" },
-          { title: "校准初值", dataIndex: "calibrationInitValue", width: 100, },
+          { title: "校准初值", dataIndex: "calibrationInitValue", width: 100 },
           {
             title: "设备状态",
             width: 90,
             render: (_, record) => {
               const enabled = record.enableFlag === 1;
-              return <Tag color={enabled ? "green" : "red"}>{enabled ? "启用" : "禁用"}</Tag>;
+              return (
+                <Tag color={enabled ? "green" : "red"}>
+                  {enabled ? "启用" : "禁用"}
+                </Tag>
+              );
             },
           },
           {
@@ -123,16 +190,41 @@ function EquipInfoPage(props) {
             width: 180,
             render: (_, record) => (
               <TableAction>
-                <Button type="link" size="small" onClick={() => { setCurrentId(record.id); setViewModalOpen(true); }}>
+                <Button
+                  type="link"
+                  size="small"
+                  onClick={() => {
+                    setCurrentId(record.id);
+                    setViewModalOpen(true);
+                  }}
+                >
                   查看
                 </Button>
-                <Button type="link" size="small" onClick={() => { setCurrentId(record.id); setFormModalOpen(true); }}>
+                <Button
+                  type="link"
+                  size="small"
+                  onClick={() => {
+                    setCurrentId(record.id);
+                    setFormModalOpen(true);
+                  }}
+                >
                   编辑
                 </Button>
-                <Button type="link" size="small" onClick={() => onToggleStatus(record.id, record)}>
+                <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>
+                <Button
+                  danger
+                  type="link"
+                  size="small"
+                  onClick={() => onDelete(record.id)}
+                >
+                  删除
+                </Button>
               </TableAction>
             ),
           },
@@ -184,7 +276,13 @@ function EquipInfoPage(props) {
 }
 
 function EquipFormModal({
-  open, currentId, equipInfoGet, equipInfoAdd, equipInfoEdit, onCancel, onSuccess,
+  open,
+  currentId,
+  equipInfoGet,
+  equipInfoAdd,
+  equipInfoEdit,
+  onCancel,
+  onSuccess,
 }) {
   const [form] = Form.useForm();
   const [submitting, setSubmitting] = useState(false);
@@ -198,14 +296,18 @@ function EquipFormModal({
     }
     let cancelled = false;
     setDetailLoading(true);
-    equipInfoGet({ id: currentId }).then((res) => {
+    equipInfoGet({ id: currentId })
-      if (cancelled) return;
+      .then((res) => {
-      const data = res?.data || {};
+        if (cancelled) return;
-      form.setFieldsValue(data);
+        const data = res?.data || {};
-    }).finally(() => {
+        form.setFieldsValue(data);
-      if (!cancelled) setDetailLoading(false);
+      })
-    });
+      .finally(() => {
-    return () => { cancelled = true; };
+        if (!cancelled) setDetailLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [open, currentId]);
 
   const handleCancel = () => {
@@ -217,7 +319,9 @@ function EquipFormModal({
     try {
       setSubmitting(true);
       if (currentId) values.id = currentId;
-      const res = await (currentId ? equipInfoEdit(values) : equipInfoAdd(values));
+      const res = await (currentId
+        ? equipInfoEdit(values)
+        : equipInfoAdd(values));
       if (res?.success !== false) {
         message.success(currentId ? "编辑成功" : "添加成功");
         handleCancel();
@@ -244,27 +348,47 @@ function EquipFormModal({
       <Form form={form} layout="vertical" onFinish={handleSubmit}>
         <Row gutter={16}>
           <Col span={12}>
-            <Form.Item name="deviceName" label="设备名称" rules={[{ required: true, message: "请输入设备名称" }]}>
+            <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: "请输入型号" }]}>
+            <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: "请选择仪器分类" }]}>
+            <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: "请选择设备类型" }]}>
+            <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: "请输入厂家" }]}>
+            <Form.Item
+              name="manufacturer"
+              label="厂家"
+              rules={[{ required: true, message: "请输入厂家" }]}
+            >
               <Input placeholder="请输入厂家" />
             </Form.Item>
           </Col>
@@ -274,13 +398,27 @@ function EquipFormModal({
             </Form.Item>
           </Col>
           <Col span={12}>
-            <Form.Item name="minFlow" label="最小流量" rules={[positiveNumberRule("最小流量", false)]}>
+            <Form.Item
-              <InputNumber style={{ width: "100%" }} placeholder="请输入最小流量" />
+              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)]}>
+            <Form.Item
-              <InputNumber style={{ width: "100%" }} placeholder="请输入最大流量" />
+              name="maxFlow"
+              label="最大流量"
+              rules={[positiveNumberRule("最大流量", false)]}
+            >
+              <InputNumber
+                style={{ width: "100%" }}
+                placeholder="请输入最大流量"
+              />
             </Form.Item>
           </Col>
           <Col span={12}>
@@ -289,8 +427,15 @@ function EquipFormModal({
             </Form.Item>
           </Col>
           <Col span={12}>
-            <Form.Item name="calibrationInitValue" label="校准初始值" rules={[positiveNumberRule("校准初始值", false)]}>
+            <Form.Item
-              <InputNumber style={{ width: "100%" }} placeholder="请输入校准初始值" />
+              name="calibrationInitValue"
+              label="校准初始值"
+              rules={[positiveNumberRule("校准初始值", false)]}
+            >
+              <InputNumber
+                style={{ width: "100%" }}
+                placeholder="请输入校准初始值"
+              />
             </Form.Item>
           </Col>
           <Col span={12}>
@@ -303,7 +448,10 @@ function EquipFormModal({
               <Select
                 allowClear
                 placeholder="请选择"
-                options={[{ label: "是", value: 1 }, { label: "否", value: 0 }]}
+                options={[
+                  { label: "是", value: 1 },
+                  { label: "否", value: 0 },
+                ]}
               />
             </Form.Item>
           </Col>
@@ -324,12 +472,16 @@ function EquipViewModal({ open, currentId, equipInfoGet, onCancel }) {
     }
     let cancelled = false;
     setDetailLoading(true);
-    equipInfoGet({ id: currentId }).then((res) => {
+    equipInfoGet({ id: currentId })
-      if (!cancelled) setInfo(res?.data || {});
+      .then((res) => {
-    }).finally(() => {
+        if (!cancelled) setInfo(res?.data || {});
-      if (!cancelled) setDetailLoading(false);
+      })
-    });
+      .finally(() => {
-    return () => { cancelled = true; };
+        if (!cancelled) setDetailLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [open, currentId]);
 
   return (
@@ -344,21 +496,42 @@ function EquipViewModal({ open, currentId, equipInfoGet, onCancel }) {
       onCancel={onCancel}
     >
       <Descriptions bordered column={2} labelStyle={{ width: 120 }}>
-        <Descriptions.Item label="设备名称">{info.deviceName}</Descriptions.Item>
+        <Descriptions.Item label="设备名称">
-        <Descriptions.Item label="设备型号">{info.deviceModel}</Descriptions.Item>
+          {info.deviceName}
-        <Descriptions.Item label="仪器分类">{info.instrumentType}</Descriptions.Item>
+        </Descriptions.Item>
-        <Descriptions.Item label="设备类型">{info.deviceType}</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="设备流量说明" 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="校准单位">
-        <Descriptions.Item label="校准初始值">{info.calibrationInitValue}</Descriptions.Item>
+          {info.calibrationUnit}
-        <Descriptions.Item label="现场校验类型">{info.fieldCalibrationType}</Descriptions.Item>
+        </Descriptions.Item>
-        <Descriptions.Item label="是否双路">{DUAL_CHANNEL_MAP[info.dualChannelFlag] ?? "-"}</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));
+export default Connect(
+  [NS_EQUIP_INFO],
+  true,
+)(AntdTableFuncControl(EquipInfoPage));