561 lines
17 KiB
JavaScript
561 lines
17 KiB
JavaScript
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="instrumentTypeName" name="instrumentTypeName">
|
|
<ControlWrapper.Select
|
|
label="仪器类型"
|
|
placeholder="请选择"
|
|
allowClear
|
|
style={{ width: "100%" }}
|
|
>
|
|
<Select.Option value="分析仪器">分析仪器</Select.Option>
|
|
<Select.Option value="检测仪器">检测仪器</Select.Option>
|
|
<Select.Option value="采样设备">采样设备</Select.Option>
|
|
<Select.Option value="物理仪器">物理仪器</Select.Option>
|
|
</ControlWrapper.Select>
|
|
</Form.Item>,
|
|
<Form.Item key="deviceTypeName" name="deviceTypeName">
|
|
<ControlWrapper.Select
|
|
label="设备类型"
|
|
placeholder="请选择"
|
|
allowClear
|
|
style={{ width: "100%" }}
|
|
>
|
|
<Select.Option value="固定式">固定式</Select.Option>
|
|
<Select.Option value="便携式">便携式</Select.Option>
|
|
</ControlWrapper.Select>
|
|
</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={(value) => {
|
|
router.query = { ...value, current: 1, size: 10 };
|
|
handleSearch();
|
|
}}
|
|
onFinish={(value) => {
|
|
router.query = { ...value, current: 1, size: 10 };
|
|
handleSearch();
|
|
}}
|
|
/>
|
|
<Table
|
|
rowKey="id"
|
|
columns={[
|
|
{
|
|
title: "设备名称",
|
|
dataIndex: "deviceName",
|
|
width: 200,
|
|
ellipsis: true,
|
|
},
|
|
{ title: "设备型号", dataIndex: "deviceModel" },
|
|
{ title: "仪器类型", dataIndex: "instrumentTypeName" },
|
|
{ title: "设备类型", dataIndex: "deviceTypeName" },
|
|
{
|
|
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,
|
|
fixed: "right",
|
|
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, x: 1600 }}
|
|
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="instrumentTypeName"
|
|
label="仪器分类"
|
|
rules={[{ required: true, message: "请选择仪器分类" }]}
|
|
>
|
|
<Select placeholder="请选择仪器分类">
|
|
<Select.Option value="分析仪器">分析仪器</Select.Option>
|
|
<Select.Option value="检测仪器">检测仪器</Select.Option>
|
|
<Select.Option value="采样设备">采样设备</Select.Option>
|
|
<Select.Option value="物理仪器">物理仪器</Select.Option>
|
|
</Select>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
name="deviceTypeName"
|
|
label="设备类型"
|
|
rules={[{ required: true, message: "请选择设备类型" }]}
|
|
>
|
|
<Select placeholder="请选择设备类型">
|
|
<Select.Option value="固定式">固定式</Select.Option>
|
|
<Select.Option value="便携式">便携式</Select.Option>
|
|
</Select>
|
|
</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="fieldCalibrationTypeName" label="现场校验类型">
|
|
<Select placeholder="请选择现场校验类型" allowClear>
|
|
<Select.Option value="现场校验">现场校验</Select.Option>
|
|
<Select.Option value="实验室校验">实验室校验</Select.Option>
|
|
<Select.Option value="免校验">免校验</Select.Option>
|
|
</Select>
|
|
</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.instrumentTypeName}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="设备类型">
|
|
{info.deviceTypeName}
|
|
</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.fieldCalibrationTypeName}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="是否双路">
|
|
{DUAL_CHANNEL_MAP[info.dualChannelFlag] ?? "-"}
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export default Connect(
|
|
[NS_EQUIP_INFO],
|
|
true,
|
|
)(AntdTableFuncControl(EquipInfoPage));
|