parent
7ae1438d8b
commit
6a31462dfc
@ -0,0 +1,53 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.li {
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.li:last-child {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@ -0,0 +1,214 @@
|
||||
import styles from './index.less';
|
||||
import {
|
||||
Button,
|
||||
Select,
|
||||
Row,
|
||||
Modal,
|
||||
Form,
|
||||
message,
|
||||
Empty,
|
||||
Table,
|
||||
InputNumber,
|
||||
Input,
|
||||
Col,
|
||||
DatePicker,
|
||||
} from 'antd';
|
||||
import Fetch from '@/utils/fetch';
|
||||
import { useEffect, useState, FC, useRef, Fragment } from 'react';
|
||||
import { ColumnsType } from 'antd/lib/table';
|
||||
const RangePicker: any = DatePicker.RangePicker;
|
||||
import moment from 'moment';
|
||||
|
||||
interface PageProps {}
|
||||
|
||||
const Page: FC<PageProps> = () => {
|
||||
const [data, setData] = useState<any>([]);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [total, setTotal] = useState<number>(0);
|
||||
const [deviceList, setDeviceList] = useState<any[]>([]);
|
||||
const [form] = Form.useForm();
|
||||
let [params, setParams] = useState<any>({
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
getData(params);
|
||||
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 getDeviceList = async () => {
|
||||
const res = await Fetch('/openi/deviceType/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: 'sign',
|
||||
render: (v: any) => v || '--',
|
||||
},
|
||||
{
|
||||
title: '生产厂商',
|
||||
dataIndex: 'producer',
|
||||
render: (v: any) => v?.name,
|
||||
},
|
||||
];
|
||||
|
||||
const handleChangePage = (param: any) => {
|
||||
params.pageNumber = param?.current;
|
||||
params.pageSize = param?.pageSize;
|
||||
setParams({ ...params });
|
||||
getData(params);
|
||||
};
|
||||
|
||||
const handleFinish = async (v: any) => {
|
||||
params = { ...params, ...v };
|
||||
if (v.time) {
|
||||
params.startDate = moment(v?.time?.[0]).format('YYYY-MM-DD HH:mm:ss');
|
||||
params.endDate = moment(v?.time?.[1]).format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
delete params.time;
|
||||
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>
|
||||
<Form
|
||||
form={form}
|
||||
colon={false}
|
||||
layout="inline"
|
||||
onFinish={handleFinish}
|
||||
initialValues={{
|
||||
time: '',
|
||||
}}
|
||||
style={{ padding: '0 20px 20px 20px' }}
|
||||
>
|
||||
<Row className="mt10 mb10">
|
||||
<Form.Item label="设备类型" name="type" className="mr20">
|
||||
<Input style={{ width: 200 }} />
|
||||
</Form.Item>
|
||||
<Form.Item label="铭牌号" name="deviceId" className="mr20">
|
||||
<Input placeholder="支持模糊查询" style={{ width: 200 }} />
|
||||
</Form.Item>
|
||||
<Form.Item label="初装资源" name="status" className="mr20">
|
||||
<Select
|
||||
allowClear
|
||||
placeholder="请选择初始资源状态"
|
||||
style={{ width: 200 }}
|
||||
>
|
||||
<Select.Option key={'0'}>未出装</Select.Option>
|
||||
<Select.Option key={'1'}>已出装</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Row>
|
||||
<Row>
|
||||
<Form.Item label="流转状态" name="distributionId" className="mr20">
|
||||
<Select
|
||||
allowClear
|
||||
placeholder="请选择设备流转状态"
|
||||
style={{ width: 200 }}
|
||||
>
|
||||
<Select.Option key={'0'}>未配发</Select.Option>
|
||||
<Select.Option key={'1'}>已配发</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item label="注册时间" name="time" className="mr20">
|
||||
<RangePicker
|
||||
placeholder={['请选择起始时间', '请选择结束时间']}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
showTime
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button
|
||||
onClick={() => {
|
||||
form.resetFields();
|
||||
params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
};
|
||||
setParams({ ...params });
|
||||
getData(params);
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
查询
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Row>
|
||||
</Form>
|
||||
<Table
|
||||
dataSource={data}
|
||||
bordered={false}
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
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>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Page;
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 46 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue