parent
5aa21e77b3
commit
bb4d63cd30
@ -0,0 +1,35 @@
|
||||
.page {
|
||||
.title {
|
||||
height: 36px;
|
||||
background: #e3effc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
font-weight: 500;
|
||||
color: #464f66;
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 13px 20px;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
cursor: pointer;
|
||||
color: #6b758b;
|
||||
padding: 0 10px;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,354 @@
|
||||
import styles from './index.less';
|
||||
import {
|
||||
Button,
|
||||
Select,
|
||||
Row,
|
||||
Modal,
|
||||
Form,
|
||||
message,
|
||||
Empty,
|
||||
Table,
|
||||
InputNumber,
|
||||
Input,
|
||||
Col,
|
||||
Space,
|
||||
} from 'antd';
|
||||
import Fetch from '@/utils/fetch';
|
||||
import { useEffect, useState, FC, useRef, Fragment } from 'react';
|
||||
import { downLoadLink } from '@/utils/download';
|
||||
import url from '@/utils/url';
|
||||
import { ColumnsType } from 'antd/lib/table';
|
||||
|
||||
interface PageProps {}
|
||||
|
||||
const Page: FC<PageProps> = () => {
|
||||
const [data, setData] = useState<any>([]);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [total, setTotal] = useState<number>(0);
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
const [value, setValue] = useState<number>(1);
|
||||
const [randomNumber, setRandomNumber] = useState<any>(null);
|
||||
const [firmList, setFirmList] = useState<any[]>([]);
|
||||
const [deviceList, setDeviceList] = useState<any[]>([]);
|
||||
const [form] = Form.useForm();
|
||||
const [params, setParams] = useState<any>({
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
const editId = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
getData(params);
|
||||
getFirmList();
|
||||
getDeviceList();
|
||||
}, []);
|
||||
|
||||
const getData = async (record: any) => {
|
||||
setLoading(true);
|
||||
const res = await Fetch('/openi/device/page', {
|
||||
method: 'get',
|
||||
params: record,
|
||||
});
|
||||
if (res.result === 'success') {
|
||||
setData(res?.data?.[0]?.list);
|
||||
setTotal(res?.data?.[0]?.total);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const getFirmList = async () => {
|
||||
const res = await Fetch('/openi/deviceType/list');
|
||||
if (res.result === 'success') {
|
||||
const data = res?.data?.[0];
|
||||
setFirmList(data);
|
||||
}
|
||||
};
|
||||
|
||||
const getDeviceList = async () => {
|
||||
const res = await Fetch('/openi/producer/list');
|
||||
if (res.result === 'success') {
|
||||
const data = res?.data?.[0];
|
||||
setDeviceList(data);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<any> = [
|
||||
{
|
||||
title: '序号',
|
||||
align: 'center',
|
||||
dataIndex: 'index',
|
||||
render: (text: string, record: any, index: number) =>
|
||||
params.pageSize * (params.pageNumber - 1) + index + 1,
|
||||
},
|
||||
{
|
||||
title: '装备型号',
|
||||
dataIndex: 'deviceType',
|
||||
render: (v: any) => v?.name,
|
||||
},
|
||||
{
|
||||
title: '装备名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '铭牌编号',
|
||||
dataIndex: 'deviceId',
|
||||
},
|
||||
{
|
||||
title: '管理标识',
|
||||
dataIndex: 'producerNumber4',
|
||||
},
|
||||
{
|
||||
title: '生产厂商',
|
||||
dataIndex: 'producer',
|
||||
render: (v: any) => v?.name,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 110,
|
||||
render: (v: any, r: any) => (
|
||||
<span>
|
||||
<i
|
||||
onClick={() => handleEdit(r)}
|
||||
title="修改"
|
||||
className={'iconfont icon-xiugaikucundixian ' + styles.action}
|
||||
/>
|
||||
<i
|
||||
onClick={() => handleDelete(r.id)}
|
||||
title="删除"
|
||||
className={'iconfont icon-shanchuzhuangbeixinghao ' + styles.action}
|
||||
/>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const handleChangePage = (param: any) => {
|
||||
params.pageNumber = param?.current;
|
||||
params.pageSize = param?.pageSize;
|
||||
setParams({ ...params });
|
||||
getData(params);
|
||||
};
|
||||
|
||||
const handleFinish = async (v: any) => {
|
||||
console.log(v, 222);
|
||||
// const res = await Fetch(`/openi/producer/editOrAdd`, {
|
||||
// method: 'post',
|
||||
// data: {
|
||||
// ...v,
|
||||
// id: editId.current,
|
||||
// },
|
||||
// });
|
||||
// if (res.result === 'success') {
|
||||
// params.pageNumber = 1;
|
||||
// setParams({ ...params });
|
||||
// getData(params);
|
||||
// setVisible(false);
|
||||
// }
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
if (!value) {
|
||||
message.warn('请输入添加设备台数');
|
||||
return;
|
||||
}
|
||||
const randomNumber = String(Math.random())?.slice(-8);
|
||||
setRandomNumber(randomNumber);
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
const handleEdit = (param: any) => {
|
||||
form.setFieldsValue({ ...param });
|
||||
editId.current = param.id;
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
const handleDelete = (id: any) => {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
content: '确认删除吗？',
|
||||
onOk: async () => {
|
||||
const res = await Fetch(`/openi/producer/delete/${id}`, {
|
||||
method: 'post',
|
||||
});
|
||||
if (res.result === 'success') {
|
||||
const page =
|
||||
1 === data.length && params.pageNumber > 1
|
||||
? params.pageNumber - 1
|
||||
: params.pageNumber;
|
||||
params.pageNumber = page;
|
||||
setParams({ ...params });
|
||||
getData(params);
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<div className={styles.title}>
|
||||
<span>注册登记</span>
|
||||
<i
|
||||
onClick={() => getData(params)}
|
||||
className="iconfont icon-a-shuaxin2"
|
||||
/>
|
||||
</div>
|
||||
<Row justify="end" className={styles.btn}>
|
||||
<Row align="middle">
|
||||
<span>增加设备台数</span>
|
||||
<InputNumber
|
||||
precision={0}
|
||||
value={value}
|
||||
min={1}
|
||||
className="ml10"
|
||||
onChange={(k) => setValue(k)}
|
||||
style={{ width: 90 }}
|
||||
/>
|
||||
</Row>
|
||||
<Button
|
||||
className="ml10"
|
||||
onClick={handleAdd}
|
||||
icon={<i className="iconfont icon-tianjia" />}
|
||||
>
|
||||
增加设备
|
||||
</Button>
|
||||
<Button style={{ marginLeft: 'auto' }}>
|
||||
选择导入设备信息的EXCEL文件并上传
|
||||
</Button>
|
||||
<Button className="ml10">下载模版</Button>
|
||||
</Row>
|
||||
<Table
|
||||
dataSource={data}
|
||||
bordered={false}
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
// scroll={{ x: 1800 }}
|
||||
loading={loading}
|
||||
className="pr20 pl20"
|
||||
onChange={handleChangePage}
|
||||
pagination={{
|
||||
pageSize: params.per_page,
|
||||
total: total,
|
||||
current: params.page,
|
||||
showQuickJumper: true,
|
||||
hideOnSinglePage: true,
|
||||
position: ['bottomCenter'],
|
||||
showTotal: (total) => (
|
||||
<span className="mr10">
|
||||
共<span>{total}</span>条数据
|
||||
</span>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Modal
|
||||
centered
|
||||
title={`${editId.current ? '编辑' : '注册'}设备`}
|
||||
visible={visible}
|
||||
okText="保存"
|
||||
width={1180}
|
||||
afterClose={() => {
|
||||
form.resetFields();
|
||||
editId.current = null;
|
||||
}}
|
||||
cancelText="取消"
|
||||
onOk={() => {
|
||||
form.submit();
|
||||
}}
|
||||
onCancel={() => {
|
||||
setVisible(false);
|
||||
}}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
colon={false}
|
||||
layout="inline"
|
||||
onFinish={handleFinish}
|
||||
// labelCol={{ span: 8 }}
|
||||
// wrapperCol={{ span: 16 }}
|
||||
>
|
||||
<Form.List name="sights" initialValue={[{}]}>
|
||||
{(fields) =>
|
||||
fields.map((field: any, index: number) => {
|
||||
const num = randomNumber + (index + 1);
|
||||
console.log(field, 222);
|
||||
return (
|
||||
<Fragment key={field.key}>
|
||||
<Form.Item
|
||||
{...field}
|
||||
label="装备名称"
|
||||
name="name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: `请输入装备名称`,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...field}
|
||||
label="装备型号"
|
||||
name="type"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: `请输入装备型号`,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select style={{ width: 200 }}>
|
||||
{deviceList?.map((e) => (
|
||||
<Select.Option value={e.id} key={e.id}>
|
||||
{e.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...field}
|
||||
label="生产厂商"
|
||||
name="producerId"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: `请输入生产厂商`,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select style={{ width: 200 }}>
|
||||
{firmList?.map((e) => (
|
||||
<Select.Option value={e.id} key={e.id}>
|
||||
{e.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...field}
|
||||
label="铭牌编号"
|
||||
name="deviceId"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: `请输入装备名称`,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input disabled />
|
||||
</Form.Item>
|
||||
</Fragment>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Form.List>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Page;
|
||||
Loading…
Reference in new issue