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