parent
5af575607d
commit
cae9ef9fee
@ -0,0 +1,41 @@
|
|||||||
|
.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 {
|
||||||
|
div[class~='ant-form-item-control'] {
|
||||||
|
width: 388px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,382 @@
|
|||||||
|
import styles from './index.less';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Select,
|
||||||
|
Row,
|
||||||
|
Modal,
|
||||||
|
Form,
|
||||||
|
message,
|
||||||
|
Empty,
|
||||||
|
Table,
|
||||||
|
InputNumber,
|
||||||
|
Input,
|
||||||
|
Col,
|
||||||
|
} 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';
|
||||||
|
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
||||||
|
|
||||||
|
interface PageProps {}
|
||||||
|
|
||||||
|
const Page: FC<PageProps> = () => {
|
||||||
|
const [data, setData] = useState<any>([]);
|
||||||
|
const [firmList, setFirmList] = useState<any[]>([]);
|
||||||
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
|
const [total, setTotal] = useState<number>(0);
|
||||||
|
const [value, setValue] = useState<string>('');
|
||||||
|
const [visible, setVisible] = useState<boolean>(false);
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [params, setParams] = useState<any>({
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
keywords: '',
|
||||||
|
});
|
||||||
|
const editId = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getData(params);
|
||||||
|
getFirmList();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getData = async (record: any) => {
|
||||||
|
setLoading(true);
|
||||||
|
const res = await Fetch('/openi/deviceType/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/producer/list');
|
||||||
|
if (res.result === 'success') {
|
||||||
|
const data = res?.data?.[0];
|
||||||
|
setFirmList(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: 'typeNumber',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '装备名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '工作模式',
|
||||||
|
dataIndex: 'pattern',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '管理层级',
|
||||||
|
dataIndex: 'managementLevel',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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) => {
|
||||||
|
const res = await Fetch(`/openi/deviceType/editOrAdd`, {
|
||||||
|
method: 'post',
|
||||||
|
data: {
|
||||||
|
...v,
|
||||||
|
id: editId.current,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (res.result === 'success') {
|
||||||
|
params.pageNumber = editId.current ? params.pageNumber : 1;
|
||||||
|
setParams({ ...params });
|
||||||
|
getData(params);
|
||||||
|
setVisible(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (param: any) => {
|
||||||
|
form.setFieldsValue({
|
||||||
|
...param,
|
||||||
|
producerIdList: param?.producerList?.map((e: any) => e.id),
|
||||||
|
});
|
||||||
|
editId.current = param.id;
|
||||||
|
setVisible(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
form.setFieldsValue({ producerIdList: [''] });
|
||||||
|
setVisible(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id: any) => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '提示',
|
||||||
|
okText: '确认',
|
||||||
|
cancelText: '取消',
|
||||||
|
content: '确认删除吗？',
|
||||||
|
onOk: async () => {
|
||||||
|
const res = await Fetch(`/openi/deviceType/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}>
|
||||||
|
<Input.Search
|
||||||
|
placeholder="搜索装备代号/装备名称"
|
||||||
|
value={value}
|
||||||
|
onChange={(k) => setValue(k.target.value)}
|
||||||
|
onSearch={(e) => {
|
||||||
|
params.keywords = e;
|
||||||
|
params.pageNumber = 1;
|
||||||
|
setParams({ ...params });
|
||||||
|
getData(params);
|
||||||
|
}}
|
||||||
|
style={{ width: 400 }}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={handleAdd}
|
||||||
|
style={{ marginLeft: 'auto' }}
|
||||||
|
icon={<i className="iconfont icon-tianjia" />}
|
||||||
|
>
|
||||||
|
新增装备型号
|
||||||
|
</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={924}
|
||||||
|
afterClose={() => {
|
||||||
|
form.resetFields();
|
||||||
|
editId.current = null;
|
||||||
|
}}
|
||||||
|
cancelText="取消"
|
||||||
|
onOk={() => {
|
||||||
|
form.submit();
|
||||||
|
}}
|
||||||
|
onCancel={() => {
|
||||||
|
setVisible(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
colon={false}
|
||||||
|
layout="horizontal"
|
||||||
|
onFinish={handleFinish}
|
||||||
|
labelCol={{ span: 8 }}
|
||||||
|
wrapperCol={{ span: 16 }}
|
||||||
|
style={{
|
||||||
|
maxHeight: 500,
|
||||||
|
overflow: 'auto',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Row align="middle">
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="装备名称"
|
||||||
|
name="name"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: `请输入装备名称`,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="装备代号"
|
||||||
|
name="typeNumber"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: `请输入装备代号`,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row align="middle">
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="工作模式"
|
||||||
|
name="pattern"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: `请输入工作模式`,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="装备密级"
|
||||||
|
name="secretLevel"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: `请输入装备密级`,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row align="middle">
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="管理层级"
|
||||||
|
name="managementLevel"
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: `请输入管理层级`,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Input />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Form.List name="producerIdList">
|
||||||
|
{(fields, { add, remove }, { errors }) => (
|
||||||
|
<>
|
||||||
|
{fields.map(({ key, name, ...restField }, index) => (
|
||||||
|
<Row align="middle" key={key}>
|
||||||
|
<Form.Item
|
||||||
|
className={styles.li}
|
||||||
|
{...restField}
|
||||||
|
label="厂商"
|
||||||
|
name={[name]}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入厂商',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Select>
|
||||||
|
{firmList?.map((e) => (
|
||||||
|
<Select.Option value={e.id} key={e.id}>
|
||||||
|
{e.name}
|
||||||
|
</Select.Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</Form.Item>
|
||||||
|
{fields.length > 1 ? (
|
||||||
|
<MinusCircleOutlined
|
||||||
|
style={{ margin: '0px 0px 23px 10px' }}
|
||||||
|
onClick={() => remove(name)}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</Row>
|
||||||
|
))}
|
||||||
|
<Row align="middle" justify="center">
|
||||||
|
<Button
|
||||||
|
type="dashed"
|
||||||
|
onClick={() => add()}
|
||||||
|
style={{ width: 400 }}
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
>
|
||||||
|
添加厂商
|
||||||
|
</Button>
|
||||||
|
</Row>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Form.List>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Page;
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue