356 lines
12 KiB
JavaScript
356 lines
12 KiB
JavaScript
|
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 Page from "zy-react-library/components/Page";
|
||
|
|
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 { safeListRequest, safeRequest } from "~/utils";
|
||
|
|
import { positiveNumberRule } from "~/utils/validators";
|
||
|
|
import PageHeader from "../components/PageHeader";
|
||
|
|
|
||
|
|
const ENABLE_STATUS = { 1: "启用", 0: "禁用" };
|
||
|
|
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, enableStatus) => {
|
||
|
|
Modal.confirm({
|
||
|
|
title: "提示",
|
||
|
|
content: enableStatus === 1 ? "是否停用" : "是否启用",
|
||
|
|
okText: "是",
|
||
|
|
cancelText: "否",
|
||
|
|
onOk: async () => {
|
||
|
|
const res = await props.equipInfoToggleStatus({ id });
|
||
|
|
if (res?.success !== false) {
|
||
|
|
message.success("操作成功");
|
||
|
|
getData();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Page isShowAllAction={false}>
|
||
|
|
<PageHeader
|
||
|
|
title="装备信息管理"
|
||
|
|
subTitle="实现对评价机构内装备信息的维护管理。"
|
||
|
|
/>
|
||
|
|
<Search
|
||
|
|
form={searchForm}
|
||
|
|
options={[
|
||
|
|
{ name: "likeDeviceName", label: "设备名称", placeholder: "请输入设备名称" },
|
||
|
|
{ name: "instrumentType", label: "仪器类型" },
|
||
|
|
{ name: "deviceType", label: "设备类型" },
|
||
|
|
{
|
||
|
|
name: "enableStatus",
|
||
|
|
label: "设备状态",
|
||
|
|
render: FORM_ITEM_RENDER_ENUM.SELECT,
|
||
|
|
options: Object.entries(ENABLE_STATUS).map(([value, label]) => ({ label, value: Number(value) })),
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
onFinish={getData}
|
||
|
|
/>
|
||
|
|
<Table
|
||
|
|
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: "设备状态",
|
||
|
|
dataIndex: "enableStatus",
|
||
|
|
render: (v) => ENABLE_STATUS[v] ?? "-",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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.enableStatus)}>
|
||
|
|
{record.enableStatus === 1 ? "禁用" : "启用"}
|
||
|
|
</Button>
|
||
|
|
<Button danger type="link" onClick={() => onDelete(record.id)}>删除</Button>
|
||
|
|
</Space>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
{...tableProps}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{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("");
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</Page>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
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);
|