feat: 分布式设备模块
JINGYJ
1 year ago
parent
c4c145100b
commit
5524a6aaec
@ -0,0 +1,41 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {Drawer} from "antd";
|
||||||
|
import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components";
|
||||||
|
|
||||||
|
export type ColumnDrawProps = {
|
||||||
|
handleDrawer: (id?: any)=>void;
|
||||||
|
isShowDetail: boolean;
|
||||||
|
columns: ProColumns<API.DeviceCategory>[];
|
||||||
|
currentRow: API.DeviceCategory | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
width={500}
|
||||||
|
open={props.isShowDetail}
|
||||||
|
onClose={() => {
|
||||||
|
props.handleDrawer();
|
||||||
|
}}
|
||||||
|
closable={true}
|
||||||
|
>
|
||||||
|
{props.currentRow?.id && (
|
||||||
|
<ProDescriptions<API.DeviceCategory>
|
||||||
|
column={2}
|
||||||
|
title={props.currentRow?.id}
|
||||||
|
request={async () => ({
|
||||||
|
data: props.currentRow || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: props.currentRow?.id,
|
||||||
|
}}
|
||||||
|
columns={props.columns as ProDescriptionsItemProps<API.DeviceCategory>[]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export {ColumnDrawer}
|
||||||
|
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import { FormattedMessage} from '@umijs/max';
|
||||||
|
export const DeviceCategoryColumns = [{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_category.table.list.id"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "id",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_category.table.list.name"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "name",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_category.table.list.code"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "code",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_category.table.list.remark"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "remark",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_category.table.list.createTime"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "create_time",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_category.table.list.updateTime"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "update_time",
|
||||||
|
},]
|
||||||
@ -0,0 +1,143 @@
|
|||||||
|
import { postDeviceCategoryCreateDeviceCategory } from '@/services/device/DeviceCategory';
|
||||||
|
import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import { Form, Switch, message } from 'antd';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
proFormSmallItemStyleProps,
|
||||||
|
proFormSmallModelWidth,
|
||||||
|
} from '../../../../../config/defaultForm';
|
||||||
|
export type FormValueType = {
|
||||||
|
target?: string;
|
||||||
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
|
} & Partial<API.DeviceCategory>;
|
||||||
|
|
||||||
|
export type CreateFormProps = {
|
||||||
|
createModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.DeviceCategory>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [isAuto, setIsAuto] = useState(true);
|
||||||
|
const [form] = Form.useForm<API.DeviceCategory>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalForm<API.DeviceCategory>
|
||||||
|
width={proFormSmallModelWidth}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.add',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
open={props.createModalOpen}
|
||||||
|
form={form}
|
||||||
|
autoFocusFirstInput
|
||||||
|
modalProps={{
|
||||||
|
destroyOnClose: true,
|
||||||
|
onCancel: () => props.handleModal(),
|
||||||
|
}}
|
||||||
|
submitTimeout={2000}
|
||||||
|
onFinish={async (values) => {
|
||||||
|
postDeviceCategoryCreateDeviceCategory(values)
|
||||||
|
.then(() => {
|
||||||
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
|
props.reload();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
|
});
|
||||||
|
props.handleModal();
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormSmallItemStyleProps.width}
|
||||||
|
name="name"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.name',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={true}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_category.table.rule.required.name"
|
||||||
|
defaultMessage="name is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width="lg"
|
||||||
|
name="code"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.code',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={!isAuto}
|
||||||
|
initialValue=""
|
||||||
|
disabled={isAuto}
|
||||||
|
rules={
|
||||||
|
isAuto
|
||||||
|
? []
|
||||||
|
: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_category.table.rule.required.code"
|
||||||
|
defaultMessage="code is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
addonAfter={
|
||||||
|
<Switch
|
||||||
|
checked={isAuto}
|
||||||
|
checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
|
||||||
|
unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
|
||||||
|
onChange={setIsAuto}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormSmallItemStyleProps.width}
|
||||||
|
name="remark"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.remark',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
</ProForm.Group>
|
||||||
|
</ModalForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default CreateForm;
|
||||||
@ -0,0 +1,187 @@
|
|||||||
|
/*
|
||||||
|
* @Author: zhoux zhouxia@supervision.ltd
|
||||||
|
* @Date: 2023-11-01 13:56:33
|
||||||
|
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||||
|
* @LastEditTime: 2023-11-17 10:12:53
|
||||||
|
* @FilePath: \general-ai-platform-web\src\pages\Device\DeviceCategoryList\components\UpdateForm.tsx
|
||||||
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
|
*/
|
||||||
|
import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory';
|
||||||
|
import { ModalForm, ProForm, ProFormDateTimePicker, ProFormText } from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import { Form, message } from 'antd';
|
||||||
|
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
|
||||||
|
import React from 'react';
|
||||||
|
export type FormValueType = {
|
||||||
|
target?: string;
|
||||||
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
|
} & Partial<API.DeviceCategory>;
|
||||||
|
|
||||||
|
export type UpdateFormProps = {
|
||||||
|
updateModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.DeviceCategory>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [form] = Form.useForm<API.DeviceCategory>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalForm<API.DeviceCategory>
|
||||||
|
width={proFormModelWidth}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.update',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
open={props.updateModalOpen}
|
||||||
|
form={form}
|
||||||
|
autoFocusFirstInput
|
||||||
|
modalProps={{
|
||||||
|
destroyOnClose: true,
|
||||||
|
onCancel: () => props.handleModal(),
|
||||||
|
}}
|
||||||
|
submitTimeout={2000}
|
||||||
|
onFinish={async (values) => {
|
||||||
|
putDeviceCategoryUpdateDeviceCategory(values)
|
||||||
|
.then(() => {
|
||||||
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
|
props.reload();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
|
});
|
||||||
|
|
||||||
|
props.handleModal();
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="id"
|
||||||
|
label="id"
|
||||||
|
disabled={true}
|
||||||
|
initialValue={props.values.id}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="name"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.name',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={true}
|
||||||
|
initialValue={props.values.name}
|
||||||
|
disabled={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_category.table.rule.required.name"
|
||||||
|
defaultMessage="name is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="code"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.code',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={true}
|
||||||
|
initialValue={props.values.code}
|
||||||
|
disabled={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_category.table.rule.required.code"
|
||||||
|
defaultMessage="code is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="remark"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.remark',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.remark}
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
<ProFormDateTimePicker
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="createTime"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_category.table.list.createTime"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.createTime',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.createTime}
|
||||||
|
disabled={true}
|
||||||
|
/>
|
||||||
|
<ProFormDateTimePicker
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="updateTime"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_category.table.list.updateTime"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_category.table.list.updateTime',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.updateTime}
|
||||||
|
disabled={true}
|
||||||
|
/>
|
||||||
|
</ProForm.Group>
|
||||||
|
</ModalForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default UpdateForm;
|
||||||
@ -0,0 +1,291 @@
|
|||||||
|
import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
|
||||||
|
import TableActionCard from '@/components/TableActionCard';
|
||||||
|
import IsDelete from '@/components/TableActionCard/isDelete';
|
||||||
|
import {
|
||||||
|
deleteDeviceCategoryDeleteDeviceCategory,
|
||||||
|
deleteDeviceCategoryDeleteDeviceCategoryByIds,
|
||||||
|
postDeviceCategoryGetDeviceCategoryList,
|
||||||
|
} from '@/services/device/DeviceCategory';
|
||||||
|
import { PlusOutlined } from '@ant-design/icons';
|
||||||
|
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||||
|
import { PageContainer, ProTable } from '@ant-design/pro-components';
|
||||||
|
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
|
||||||
|
import { Button, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
|
||||||
|
import { ColumnDrawer } from './components/ColumnDrawer';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
import UpdateForm from './components/UpdateForm';
|
||||||
|
const DeviceCategoryList: React.FC = () => {
|
||||||
|
/**
|
||||||
|
* @en-US Pop-up window of new window
|
||||||
|
* @zh-CN 新建窗口的弹窗
|
||||||
|
* */
|
||||||
|
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
||||||
|
/**
|
||||||
|
* @en-US The pop-up window of the distribution update window
|
||||||
|
* @zh-CN 分布更新窗口的弹窗
|
||||||
|
* */
|
||||||
|
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||||
|
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||||
|
/**
|
||||||
|
* @en-US International configuration
|
||||||
|
* @zh-CN 国际化配置
|
||||||
|
* */
|
||||||
|
const access = useAccess();
|
||||||
|
const intl = useIntl();
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
// 动态设置每页数量
|
||||||
|
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
||||||
|
const [currentRow, setCurrentRow] = useState<API.DeviceCategory>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.DeviceCategory[]>([]);
|
||||||
|
|
||||||
|
const handleUpdateModal = () => {
|
||||||
|
if (updateModalOpen) {
|
||||||
|
setUpdateModalOpen(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setUpdateModalOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleCreateModal = () => {
|
||||||
|
if (createModalOpen) {
|
||||||
|
setCreateModalOpen(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setCreateModalOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleColumnDrawer = () => {
|
||||||
|
if (showDetail) {
|
||||||
|
setShowDetail(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setShowDetail(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleDestroy = async (selectedRow: API.DeviceCategory) => {
|
||||||
|
deleteDeviceCategoryDeleteDeviceCategory({ id: selectedRow.id })
|
||||||
|
.then(() => {
|
||||||
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
|
actionRef.current?.reload();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns: ProColumns<API.DeviceCategory>[] = [
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.device_category.table.list.id" defaultMessage="id" />,
|
||||||
|
dataIndex: 'id',
|
||||||
|
sorter: true,
|
||||||
|
render: (dom, entity) => {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
setCurrentRow(entity);
|
||||||
|
setShowDetail(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{dom}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'name',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'code',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$" />
|
||||||
|
),
|
||||||
|
dataIndex: 'remark',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage id="device.device_category.table.list.createTime" defaultMessage="$$$" />
|
||||||
|
),
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage id="device.device_category.table.list.updateTime" defaultMessage="$$$" />
|
||||||
|
),
|
||||||
|
dataIndex: 'updateTime',
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
fixed: 'right',
|
||||||
|
render: (_, record) => [
|
||||||
|
<TableActionCard
|
||||||
|
key="TableActionCardRef"
|
||||||
|
renderActions={[
|
||||||
|
{
|
||||||
|
key: 'update',
|
||||||
|
renderDom: (
|
||||||
|
<Button
|
||||||
|
key="update"
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateModalOpen(true);
|
||||||
|
setCurrentRow(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'destroy',
|
||||||
|
renderDom: (
|
||||||
|
<IsDelete
|
||||||
|
deleteApi={() => {
|
||||||
|
handleDestroy(record).then(() => {});
|
||||||
|
}}
|
||||||
|
></IsDelete>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
></TableActionCard>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<PageContainer>
|
||||||
|
<ProTable<API.DeviceCategory>
|
||||||
|
headerTitle={intl.formatMessage({
|
||||||
|
id: 'pages.searchTable.title',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
options={{ fullScreen: true, setting: true, density: true, reload: true }}
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="key"
|
||||||
|
search={{
|
||||||
|
labelWidth: proTableCommonOptions.searchLabelWidth,
|
||||||
|
}}
|
||||||
|
onDataSourceChange={(data) => {}}
|
||||||
|
pagination={{
|
||||||
|
...proTablePaginationOptions,
|
||||||
|
pageSize: currentPageSize,
|
||||||
|
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: 'device_category_list',
|
||||||
|
persistenceType: 'localStorage',
|
||||||
|
}}
|
||||||
|
tableAlertOptionRender={() => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<IsBatchDelete
|
||||||
|
deleteApi={() => {
|
||||||
|
// TODO 需要；联调删除接口
|
||||||
|
deleteDeviceCategoryDeleteDeviceCategoryByIds({
|
||||||
|
ids: selectedRowsState.map((v: API.DeviceCategory) => {
|
||||||
|
return v.id as number;
|
||||||
|
}),
|
||||||
|
}).then(() => {
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Access
|
||||||
|
accessible={access.canUpdate(history.location.pathname)}
|
||||||
|
key={`${history.location.pathname}-add`}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
key="primary"
|
||||||
|
onClick={() => {
|
||||||
|
setCreateModalOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
|
||||||
|
</Button>
|
||||||
|
</Access>,
|
||||||
|
]}
|
||||||
|
request={async (params = {}, sort) => {
|
||||||
|
const { current, ...rest } = params;
|
||||||
|
const reqParams = {
|
||||||
|
page: current,
|
||||||
|
desc: false,
|
||||||
|
orderKey: '',
|
||||||
|
...rest,
|
||||||
|
};
|
||||||
|
if (sort && Object.keys(sort).length) {
|
||||||
|
reqParams.orderKey = Object.keys(sort)[0];
|
||||||
|
let sort_select = sort[reqParams.orderKey];
|
||||||
|
reqParams.desc = sort_select === 'descend';
|
||||||
|
}
|
||||||
|
let resp = await postDeviceCategoryGetDeviceCategoryList({ ...reqParams });
|
||||||
|
return {
|
||||||
|
data: resp.data.list.map((v: API.DeviceCategory) => {
|
||||||
|
return { ...v, key: v.id };
|
||||||
|
}),
|
||||||
|
success: resp.success,
|
||||||
|
total: resp.data.total,
|
||||||
|
current: resp.data.page,
|
||||||
|
pageSize: resp.data.pageSize,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => {
|
||||||
|
setSelectedRows(selectedRows);
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<CreateForm
|
||||||
|
createModalOpen={createModalOpen}
|
||||||
|
values={currentRow || {}}
|
||||||
|
handleModal={handleCreateModal}
|
||||||
|
reload={actionRef.current?.reload}
|
||||||
|
/>
|
||||||
|
<UpdateForm
|
||||||
|
updateModalOpen={updateModalOpen}
|
||||||
|
values={currentRow || {}}
|
||||||
|
handleModal={handleUpdateModal}
|
||||||
|
reload={actionRef.current?.reload}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ColumnDrawer
|
||||||
|
handleDrawer={handleColumnDrawer}
|
||||||
|
isShowDetail={showDetail}
|
||||||
|
columns={columns}
|
||||||
|
currentRow={currentRow}
|
||||||
|
/>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DeviceCategoryList;
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {Drawer} from "antd";
|
||||||
|
import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components";
|
||||||
|
|
||||||
|
export type ColumnDrawProps = {
|
||||||
|
handleDrawer: (id?: any)=>void;
|
||||||
|
isShowDetail: boolean;
|
||||||
|
columns: ProColumns<API.DeviceGroup>[];
|
||||||
|
currentRow: API.DeviceGroup | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
width={500}
|
||||||
|
open={props.isShowDetail}
|
||||||
|
onClose={() => {
|
||||||
|
props.handleDrawer();
|
||||||
|
}}
|
||||||
|
closable={true}
|
||||||
|
>
|
||||||
|
{props.currentRow?.id && (
|
||||||
|
<ProDescriptions<API.DeviceGroup>
|
||||||
|
column={2}
|
||||||
|
title={props.currentRow?.id}
|
||||||
|
request={async () => ({
|
||||||
|
data: props.currentRow || {},
|
||||||
|
})}
|
||||||
|
params={{
|
||||||
|
id: props.currentRow?.id,
|
||||||
|
}}
|
||||||
|
columns={props.columns as ProDescriptionsItemProps<API.DeviceGroup>[]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Drawer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export {ColumnDrawer}
|
||||||
|
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
import { FormattedMessage} from '@umijs/max';
|
||||||
|
export const DeviceGroupColumns = [{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.id"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "id",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.name"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "name",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.code"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "code",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.address"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "address",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.telephone"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "telephone",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.lon"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "lon",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.lat"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "lat",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.managerName"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "manager_name",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.managerPhone"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "manager_phone",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.isEnable"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "is_enable",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.parentFkId"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "parent_fk_id",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.remark"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "remark",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.createTime"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "create_time",
|
||||||
|
},{
|
||||||
|
title: (<FormattedMessage
|
||||||
|
id="device.device_group.table.list.updateTime"
|
||||||
|
defaultMessage="$$$"/>),
|
||||||
|
dataIndex: "update_time",
|
||||||
|
},]
|
||||||
@ -0,0 +1,273 @@
|
|||||||
|
import { postDeviceGroupCreateDeviceGroup } from '@/services/device/DeviceGroup';
|
||||||
|
import {
|
||||||
|
ModalForm,
|
||||||
|
ProForm,
|
||||||
|
ProFormSelect,
|
||||||
|
ProFormSwitch,
|
||||||
|
ProFormText,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import { Form, Switch, message } from 'antd';
|
||||||
|
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
export type FormValueType = {
|
||||||
|
target?: string;
|
||||||
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
|
} & Partial<API.DeviceGroup>;
|
||||||
|
|
||||||
|
export type CreateFormProps = {
|
||||||
|
createModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.DeviceGroup>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [isAuto, setIsAuto] = useState(true);
|
||||||
|
const [form] = Form.useForm<API.DeviceGroup>();
|
||||||
|
|
||||||
|
const [parentId, setParentId] = useState<number>(0);
|
||||||
|
const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([
|
||||||
|
{ label: '根节点', value: 0 },
|
||||||
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (props.values.id !== undefined && props.values.id !== 0) {
|
||||||
|
setParentId(props.values.id as number);
|
||||||
|
setParentSelectOptions([{ label: props.values.name, value: props.values.id }]);
|
||||||
|
}
|
||||||
|
}, [props.createModalOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalForm<API.DeviceGroup>
|
||||||
|
width={proFormModelWidth}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.add',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
open={props.createModalOpen}
|
||||||
|
form={form}
|
||||||
|
autoFocusFirstInput
|
||||||
|
modalProps={{
|
||||||
|
destroyOnClose: true,
|
||||||
|
onCancel: () => props.handleModal(),
|
||||||
|
}}
|
||||||
|
submitTimeout={2000}
|
||||||
|
onFinish={async (values) => {
|
||||||
|
postDeviceGroupCreateDeviceGroup(values)
|
||||||
|
.then(() => {
|
||||||
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
|
props.reload();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
|
});
|
||||||
|
props.handleModal();
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormSelect
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="parentFkId"
|
||||||
|
initialValue={parentId}
|
||||||
|
disabled={true}
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_group.table.list.parentFkId" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_select',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.parentFkId',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
request={async () => parentSelectOptions}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="name"
|
||||||
|
label={<FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.name',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={true}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_group.table.rule.required.name"
|
||||||
|
defaultMessage="name is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="code"
|
||||||
|
label={<FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.code',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={!isAuto}
|
||||||
|
initialValue=""
|
||||||
|
disabled={isAuto}
|
||||||
|
rules={
|
||||||
|
isAuto
|
||||||
|
? []
|
||||||
|
: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_group.table.rule.required.code"
|
||||||
|
defaultMessage="code is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
addonAfter={
|
||||||
|
<Switch
|
||||||
|
checked={isAuto}
|
||||||
|
checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
|
||||||
|
unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
|
||||||
|
onChange={setIsAuto}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="address"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.address',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="telephone"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.telephone',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="lon"
|
||||||
|
label={<FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.lon',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="lat"
|
||||||
|
label={<FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.lat',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="managerName"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_group.table.list.managerName"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.managerName',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="managerPhone"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_group.table.list.managerPhone"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.managerPhone',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="remark"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.remark',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
/>
|
||||||
|
<ProFormSwitch
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="isEnable"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
initialValue={true}
|
||||||
|
/>
|
||||||
|
</ProForm.Group>
|
||||||
|
</ModalForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default CreateForm;
|
||||||
@ -0,0 +1,291 @@
|
|||||||
|
import { putDeviceGroupUpdateDeviceGroup } from '@/services/device/DeviceGroup';
|
||||||
|
import {
|
||||||
|
ModalForm,
|
||||||
|
ProForm,
|
||||||
|
ProFormDateTimePicker,
|
||||||
|
ProFormSwitch,
|
||||||
|
ProFormText,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import { Form, message } from 'antd';
|
||||||
|
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
|
||||||
|
import React from 'react';
|
||||||
|
export type FormValueType = {
|
||||||
|
target?: string;
|
||||||
|
template?: string;
|
||||||
|
type?: string;
|
||||||
|
time?: string;
|
||||||
|
frequency?: string;
|
||||||
|
} & Partial<API.DeviceGroup>;
|
||||||
|
|
||||||
|
export type UpdateFormProps = {
|
||||||
|
updateModalOpen: boolean;
|
||||||
|
handleModal: () => void;
|
||||||
|
values: Partial<API.DeviceGroup>;
|
||||||
|
reload: any;
|
||||||
|
};
|
||||||
|
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const [form] = Form.useForm<API.DeviceGroup>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ModalForm<API.DeviceGroup>
|
||||||
|
width={proFormModelWidth}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.update',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
open={props.updateModalOpen}
|
||||||
|
form={form}
|
||||||
|
autoFocusFirstInput
|
||||||
|
modalProps={{
|
||||||
|
destroyOnClose: true,
|
||||||
|
onCancel: () => props.handleModal(),
|
||||||
|
}}
|
||||||
|
submitTimeout={2000}
|
||||||
|
onFinish={async (values) => {
|
||||||
|
putDeviceGroupUpdateDeviceGroup(values)
|
||||||
|
.then(() => {
|
||||||
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
|
props.reload();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
|
});
|
||||||
|
|
||||||
|
props.handleModal();
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="id"
|
||||||
|
label="id"
|
||||||
|
disabled={true}
|
||||||
|
initialValue={props.values.id}
|
||||||
|
/>
|
||||||
|
{/*<ProFormSelect width={proFormItemStyleProps.column2Width} name="parentFkId" label={<FormattedMessage id="device.device_group.table.list.parentFkId" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.parentFkId', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.parentFkId}*/}
|
||||||
|
{/* disabled={true} />*/}
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="name"
|
||||||
|
label={<FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.name',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={true}
|
||||||
|
initialValue={props.values.name}
|
||||||
|
disabled={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_group.table.rule.required.name"
|
||||||
|
defaultMessage="name is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="code"
|
||||||
|
label={<FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.code',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={true}
|
||||||
|
initialValue={props.values.code}
|
||||||
|
disabled={false}
|
||||||
|
rules={[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_group.table.rule.required.code"
|
||||||
|
defaultMessage="code is required"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="address"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.address',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.address}
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="telephone"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.telephone',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.telephone}
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="lon"
|
||||||
|
label={<FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.lon',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.lon}
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="lat"
|
||||||
|
label={<FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.lat',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.lat}
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="managerName"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_group.table.list.managerName"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.managerName',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.managerName}
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="managerPhone"
|
||||||
|
label={
|
||||||
|
<FormattedMessage
|
||||||
|
id="device.device_group.table.list.managerPhone"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.managerPhone',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.managerPhone}
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
<ProFormSwitch
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="isEnable"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
initialValue={props.values.isEnable}
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ProFormText
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="remark"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.remark',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.remark}
|
||||||
|
disabled={false}
|
||||||
|
/>
|
||||||
|
<ProFormDateTimePicker
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="createTime"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_group.table.list.createTime" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.createTime',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.createTime}
|
||||||
|
disabled={true}
|
||||||
|
/>
|
||||||
|
<ProFormDateTimePicker
|
||||||
|
width={proFormItemStyleProps.column2Width}
|
||||||
|
name="updateTime"
|
||||||
|
label={
|
||||||
|
<FormattedMessage id="device.device_group.table.list.updateTime" defaultMessage="$$$" />
|
||||||
|
}
|
||||||
|
placeholder={`${intl.formatMessage({
|
||||||
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}${intl.formatMessage({
|
||||||
|
id: 'device.device_group.table.list.updateTime',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}`}
|
||||||
|
required={false}
|
||||||
|
initialValue={props.values.updateTime}
|
||||||
|
disabled={true}
|
||||||
|
/>
|
||||||
|
</ProForm.Group>
|
||||||
|
</ModalForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default UpdateForm;
|
||||||
@ -0,0 +1,417 @@
|
|||||||
|
import TableActionCard from '@/components/TableActionCard';
|
||||||
|
import IsDelete from '@/components/TableActionCard/isDelete';
|
||||||
|
import {
|
||||||
|
deleteDeviceGroupDeleteDeviceGroup,
|
||||||
|
deleteDeviceGroupDeleteDeviceGroupByIds,
|
||||||
|
postDeviceGroupGetDeviceGroupList,
|
||||||
|
} from '@/services/device/DeviceGroup';
|
||||||
|
import { PlusOutlined } from '@ant-design/icons';
|
||||||
|
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||||
|
import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
|
||||||
|
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
|
||||||
|
import { Button, message } from 'antd';
|
||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { ColumnDrawer } from './components/ColumnDrawer';
|
||||||
|
import CreateForm from './components/CreateForm';
|
||||||
|
import UpdateForm from './components/UpdateForm';
|
||||||
|
import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
|
||||||
|
import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
|
||||||
|
|
||||||
|
const DeviceGroupList: React.FC = () => {
|
||||||
|
/**
|
||||||
|
* @en-US Pop-up window of new window
|
||||||
|
* @zh-CN 新建窗口的弹窗
|
||||||
|
* */
|
||||||
|
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
||||||
|
/**
|
||||||
|
* @en-US The pop-up window of the distribution update window
|
||||||
|
* @zh-CN 分布更新窗口的弹窗
|
||||||
|
* */
|
||||||
|
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||||
|
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||||
|
/**
|
||||||
|
* @en-US International configuration
|
||||||
|
* @zh-CN 国际化配置
|
||||||
|
* */
|
||||||
|
const access = useAccess();
|
||||||
|
const intl = useIntl();
|
||||||
|
const actionRef = useRef<ActionType>();
|
||||||
|
// 动态设置每页数量
|
||||||
|
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
||||||
|
const [currentRow, setCurrentRow] = useState<API.DeviceGroup>();
|
||||||
|
const [selectedRowsState, setSelectedRows] = useState<API.DeviceGroup[]>([]);
|
||||||
|
|
||||||
|
// const handle_parent_fk_id = (id: any)=>{
|
||||||
|
// if (parent_fk_id_open) {
|
||||||
|
// set_parent_fk_id(undefined);
|
||||||
|
// set_parent_fk_id_open(false)
|
||||||
|
// }else {
|
||||||
|
// postDeviceGroupGetDeviceGroupById({id: id}).then((resp)=>{
|
||||||
|
// set_parent_fk_id(resp.data.deviceGroup)
|
||||||
|
// set_parent_fk_id_open(true)
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// const handle_parent_fk_id_column_open = ()=>{
|
||||||
|
// if (parent_fk_id_column_open) {
|
||||||
|
// set_parent_fk_id_column_open(false)
|
||||||
|
// }else {
|
||||||
|
// postDeviceGroupGetDeviceGroupNames({ids: parentFkIdIds}).then((resp)=>{
|
||||||
|
// let a: any = {}
|
||||||
|
// resp.data.list.forEach((v: any)=>{
|
||||||
|
// if (v.id) {
|
||||||
|
// a[v.id] = v.name
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// setParentFkIdMap(a)
|
||||||
|
// })
|
||||||
|
// set_parent_fk_id_column_open(true)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
const handleUpdateModal = () => {
|
||||||
|
if (updateModalOpen) {
|
||||||
|
setUpdateModalOpen(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setUpdateModalOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleCreateModal = () => {
|
||||||
|
if (createModalOpen) {
|
||||||
|
setCreateModalOpen(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setCreateModalOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleColumnDrawer = () => {
|
||||||
|
if (showDetail) {
|
||||||
|
setShowDetail(false);
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
} else {
|
||||||
|
setShowDetail(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleDestroy = async (selectedRow: API.DeviceGroup) => {
|
||||||
|
deleteDeviceGroupDeleteDeviceGroup({ id: selectedRow.id })
|
||||||
|
.then(() => {
|
||||||
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
|
actionRef.current?.reload();
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns: ProColumns<API.DeviceGroup>[] = [
|
||||||
|
// TODO 确认是否需要和一级内容对齐
|
||||||
|
{
|
||||||
|
title: <span style={{paddingLeft: 0}}><FormattedMessage id="device.device_group.table.list.name" defaultMessage="id" /></span>,
|
||||||
|
dataIndex: 'name',
|
||||||
|
sorter: true,
|
||||||
|
render: (dom, entity) => {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
setCurrentRow(entity);
|
||||||
|
setShowDetail(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{dom}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
key: 'fixedName',
|
||||||
|
fixed: 'left',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'code',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'address',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
|
||||||
|
),
|
||||||
|
dataIndex: 'telephone',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'lon',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'lat',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage id="device.device_group.table.list.managerName" defaultMessage="$$$" />
|
||||||
|
),
|
||||||
|
dataIndex: 'managerName',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage id="device.device_group.table.list.managerPhone" defaultMessage="$$$" />
|
||||||
|
),
|
||||||
|
dataIndex: 'managerPhone',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'isEnable',
|
||||||
|
filters: true,
|
||||||
|
onFilter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'switch',
|
||||||
|
},
|
||||||
|
|
||||||
|
//
|
||||||
|
// {
|
||||||
|
// title: (<FormattedMessage
|
||||||
|
// id="device.device_group.table.list.parentFkId"
|
||||||
|
// defaultMessage="$$$"/>),
|
||||||
|
// dataIndex: "parentFkId",
|
||||||
|
// hideInSearch: false,
|
||||||
|
// render: (text, record) => {
|
||||||
|
// if (parent_fk_id_column_open) {
|
||||||
|
// return ( <a onClick={()=>{handle_parent_fk_id(record.parentFkId)}}>{record?.parentFkId ? parentFkIdMap[record.parentFkId] : undefined}</a>)
|
||||||
|
// } else {
|
||||||
|
// return (<a onClick={()=>{handle_parent_fk_id(record.parentFkId)}}>{record.parentFkId}</a>)
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// renderFormItem: () => {
|
||||||
|
// return (
|
||||||
|
// // value 和 onchange 会通过 form 自动注入。
|
||||||
|
// <ProFormSelect
|
||||||
|
// placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`}
|
||||||
|
// required={false} showSearch debounceTime={1000}
|
||||||
|
// request={async (keyWord)=>{
|
||||||
|
// const resp = await postDeviceGroupGetDeviceGroupFkSelect({keyword: keyWord?.keyWords || ''})
|
||||||
|
// return resp.data.list.map((v: any)=>{
|
||||||
|
// return {
|
||||||
|
// label: v.name,
|
||||||
|
// value: v.id
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }}
|
||||||
|
// />
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />,
|
||||||
|
dataIndex: 'remark',
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage id="device.device_group.table.list.createTime" defaultMessage="$$$" />
|
||||||
|
),
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage id="device.device_group.table.list.updateTime" defaultMessage="$$$" />
|
||||||
|
),
|
||||||
|
dataIndex: 'updateTime',
|
||||||
|
sorter: true,
|
||||||
|
hideInSearch: true,
|
||||||
|
valueType: 'dateTime',
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
||||||
|
dataIndex: 'option',
|
||||||
|
valueType: 'option',
|
||||||
|
fixed: 'right',
|
||||||
|
render: (_, record) => [
|
||||||
|
<TableActionCard
|
||||||
|
key="TableActionCardRef"
|
||||||
|
renderActions={[
|
||||||
|
{
|
||||||
|
key: 'create',
|
||||||
|
renderDom: (
|
||||||
|
<Button
|
||||||
|
key="create"
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
onClick={() => {
|
||||||
|
setCreateModalOpen(true);
|
||||||
|
setCurrentRow(record);
|
||||||
|
// setShowDetail(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormattedMessage id="common.create_son" defaultMessage="Create" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'update',
|
||||||
|
renderDom: (
|
||||||
|
<Button
|
||||||
|
key="update"
|
||||||
|
type="link"
|
||||||
|
size="small"
|
||||||
|
onClick={() => {
|
||||||
|
setUpdateModalOpen(true);
|
||||||
|
setCurrentRow(record);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
|
||||||
|
</Button>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'destroy',
|
||||||
|
renderDom: (
|
||||||
|
<IsDelete
|
||||||
|
deleteApi={() => {
|
||||||
|
handleDestroy(record).then(() => {});
|
||||||
|
}}
|
||||||
|
></IsDelete>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
></TableActionCard>,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<PageContainer>
|
||||||
|
<ProTable<API.DeviceGroup>
|
||||||
|
headerTitle={intl.formatMessage({
|
||||||
|
id: 'pages.searchTable.title',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
options={{ fullScreen: true, setting: true, density: true, reload: true }}
|
||||||
|
actionRef={actionRef}
|
||||||
|
rowKey="key"
|
||||||
|
scroll={{ y: proTableCommonOptions.commscrollY, x: 1800}}
|
||||||
|
search={{
|
||||||
|
labelWidth: proTableCommonOptions.searchLabelWidth,
|
||||||
|
}}
|
||||||
|
pagination={{
|
||||||
|
...proTablePaginationOptions,
|
||||||
|
pageSize: currentPageSize,
|
||||||
|
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
|
||||||
|
}}
|
||||||
|
columnsState={{
|
||||||
|
persistenceKey: 'device_group_list',
|
||||||
|
persistenceType: 'localStorage',
|
||||||
|
}}
|
||||||
|
tableAlertOptionRender={() => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{selectedRowsState?.length > 0 && (
|
||||||
|
<IsBatchDelete
|
||||||
|
deleteApi={() => {
|
||||||
|
// TODO 需联调批量删除接口
|
||||||
|
deleteDeviceGroupDeleteDeviceGroupByIds({
|
||||||
|
ids: selectedRowsState.map((v: API.DeviceGroup) => {
|
||||||
|
return v.id as number;
|
||||||
|
}),
|
||||||
|
}).then(() => {
|
||||||
|
actionRef.current?.reloadAndRest?.();
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
toolBarRender={() => [
|
||||||
|
<Access
|
||||||
|
accessible={access.canUpdate(history.location.pathname)}
|
||||||
|
key={`${history.location.pathname}-add`}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
key="primary"
|
||||||
|
onClick={() => {
|
||||||
|
setCurrentRow(undefined);
|
||||||
|
setCreateModalOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PlusOutlined />{' '}
|
||||||
|
<FormattedMessage id="device.device_group.table.list.treeAdd" defaultMessage="New" />
|
||||||
|
</Button>
|
||||||
|
</Access>,
|
||||||
|
]}
|
||||||
|
request={async (params = {}, sort) => {
|
||||||
|
const { current, ...rest } = params;
|
||||||
|
const reqParams = {
|
||||||
|
page: current,
|
||||||
|
desc: false,
|
||||||
|
orderKey: '',
|
||||||
|
...rest,
|
||||||
|
};
|
||||||
|
if (sort && Object.keys(sort).length) {
|
||||||
|
reqParams.orderKey = Object.keys(sort)[0];
|
||||||
|
let sort_select = sort[reqParams.orderKey];
|
||||||
|
reqParams.desc = sort_select === 'descend';
|
||||||
|
}
|
||||||
|
let resp = await postDeviceGroupGetDeviceGroupList({ ...reqParams });
|
||||||
|
return {
|
||||||
|
data: resp.data.list.map((v: API.DeviceGroup) => {
|
||||||
|
return { ...v, key: v.id };
|
||||||
|
}),
|
||||||
|
success: resp.success,
|
||||||
|
total: resp.data.total,
|
||||||
|
current: resp.data.page,
|
||||||
|
pageSize: resp.data.pageSize,
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
rowSelection={{
|
||||||
|
onChange: (_, selectedRows) => {
|
||||||
|
setSelectedRows(selectedRows);
|
||||||
|
},
|
||||||
|
checkStrictly: false
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<CreateForm
|
||||||
|
createModalOpen={createModalOpen}
|
||||||
|
values={currentRow || {}}
|
||||||
|
handleModal={handleCreateModal}
|
||||||
|
reload={actionRef.current?.reload}
|
||||||
|
/>
|
||||||
|
<UpdateForm
|
||||||
|
updateModalOpen={updateModalOpen}
|
||||||
|
values={currentRow || {}}
|
||||||
|
handleModal={handleUpdateModal}
|
||||||
|
reload={actionRef.current?.reload}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ColumnDrawer
|
||||||
|
handleDrawer={handleColumnDrawer}
|
||||||
|
isShowDetail={showDetail}
|
||||||
|
columns={columns}
|
||||||
|
currentRow={currentRow}
|
||||||
|
/>
|
||||||
|
</PageContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DeviceGroupList;
|
||||||
Loading…
Reference in New Issue