Yaxin
/
General-AI-Platform-Web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 设备管理、项目管理参考UI整体效果修复完成

Browse Source
develop
zhoux 1 year ago
parent ed51383f58
commit af32293ebe
41 changed files with 2477 additions and 1337 deletions
Show Stats Download Patch File Download Diff File

1
config/defaultDrawer.ts
Unescape Escape View File

@ -0,0 +1 @@
// 待启用 抽屉全局配置

17
config/defaultForm.ts
Unescape Escape View File

@ -2,11 +2,13 @@
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-13 14:19:57
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-16 16:30:31
* @LastEditTime: 2023-11-17 15:27:51
* @FilePath: \general-ai-platform-web\config\defaultForm.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE2
*/
import { ReactNode } from "react";
// 通用表单配置
export const proFormCommonOptions: Record<string,any> = {
@ -34,3 +36,16 @@ export const proFormMaxItemStyleProps: Record<string, any> = {
width: proFormMaxModelWidth - formBoxMargin,
column2Width: (proFormMaxModelWidth - formBoxMargin - formItemGap)/2 , // 两列
};
/**表单具体单项配置 */
// proFormList 新增一项按钮配置
export const proFormListCreatorButtonProps : {
creatorButtonText?: ReactNode;
position?: 'top' | 'bottom';
} = {
position: 'bottom',
creatorButtonText: '添加参数字段', // 设置新增一项数据的文案
}

22
src/global.css
Unescape Escape View File

@ -140,18 +140,18 @@ ol {
.ant-pro-form-group-container {
gap: 0px 16px !important;
}
.flex-cc {
display: flex;
align-items: center;
justify-content: center;
.ant-modal .ant-modal-title {
font-size: 18px;
}
.flex-ac {
display: flex;
align-items: center;
justify-content: space-around;
}
.w100 {
width: 100%;
/* 列表table */
.ant-pro-table-list-toolbar-left {
flex: 0.3;
}
/* UI 规范表 // TODO 11-17启动
*/
.gn.h2 {
font-size: 18;
}
.gn.h3 {
font-weight: 600;
}

35
src/global.less
Unescape Escape View File

@ -168,30 +168,31 @@ ol {
.ant-pro-form-group-container{
gap: 0px 16px !important;
}
// .gn .ant-steps-item-finish .ant-steps-item-icon
.flex-cc{
display: flex;
align-items: center;
justify-content: center;
}
.flex-ac{
display: flex;
align-items: center;
justify-content: space-around;
.ant-modal .ant-modal-title{
font-size: 18px;
}
.w100{
width: 100%;
/* 列表table */
// 控制proTable 标题栏左侧文字最大弹性占比
.ant-pro-table-list-toolbar-left{
flex: 0.3
}
/* UI 规范表 // TODO 11-17启动
*/
.gn {
.p1 {
// line-height: ;
// &.p1 {
// // line-height: ;
// font-weight: 600;
// }
&.h2{
font-size: 18;
}
&.h3{
font-weight: 600;
}
}
// .p1{
@ -201,3 +202,5 @@ ol {

74
src/locales/zh-CN/device.ts
Unescape Escape View File

@ -1,4 +1,70 @@
export const device: {[key: string]: string} = {'device.device.table.list.id': 'ID', 'device.device.table.list.name': '设备名称', 'device.device.table.list.code': '设备代码', 'device.device.table.list.position': '位置', 'device.device.table.list.param': '设备参数', 'device.device.table.list.spec': '设备规格', 'device.device.table.list.categoryFkId': '设备类别', 'device.device.table.list.groupFkId': '设备分组', 'device.device.table.list.isEnable': '是否启用', 'device.device.table.list.remark': '备注', 'device.device.table.list.createTime': '创建时间', 'device.device.table.list.updateTime': '更新时间', 'device.device.table.rule.required.name': '设备名称为必填项', 'device.device.table.rule.required.code': '设备代码为必填项'}
export const device_category: {[key: string]: string} = {'device.device_category.table.list.id': 'ID', 'device.device_category.table.list.name': '类别名称', 'device.device_category.table.list.code': '类别代码', 'device.device_category.table.list.remark': '备注', 'device.device_category.table.list.createTime': '创建时间', 'device.device_category.table.list.updateTime': '更新时间', 'device.device_category.table.rule.required.name': '类别名称为必填项', 'device.device_category.table.rule.required.code': '类别代码为必填项'}
export const device_group: {[key: string]: string} = {'device.device_group.table.list.id': 'ID', 'device.device_group.table.list.name': '分组名称', 'device.device_group.table.list.code': '分组代码', 'device.device_group.table.list.address': '地址', 'device.device_group.table.list.telephone': '电话', 'device.device_group.table.list.lon': '经度', 'device.device_group.table.list.lat': '纬度', 'device.device_group.table.list.managerName': '负责人姓名', 'device.device_group.table.list.managerPhone': '负责人联系方式', 'device.device_group.table.list.isEnable': '是否启用', 'device.device_group.table.list.parentFkId': '父节点', 'device.device_group.table.list.remark': '备注', 'device.device_group.table.list.createTime': '创建时间', 'device.device_group.table.list.updateTime': '更新时间', 'device.device_group.table.rule.required.name': '分组名称为必填项', 'device.device_group.table.rule.required.code': '分组代码为必填项', 'device.device_group.table.rule.required.managerName': '负责人姓名为必填项', 'device.device_group.table.rule.required.managerPhone': '负责人联系方式为必填项', 'device.device_group.table.rule.required.parentFkId': '父节点为必填项'}
export const device_relation: {[key: string]: string} = {'device.device_relation.table.list.id': 'ID', 'device.device_relation.table.list.deviceParentFkId': '设备父节点', 'device.device_relation.table.list.deviceSonFkId': '设备父节点', 'device.device_relation.table.list.createTime': '创建时间', 'device.device_relation.table.list.updateTime': '更新时间', 'device.device_relation.table.rule.required.deviceParentFkId': '设备父节点为必填项', 'device.device_relation.table.rule.required.deviceSonFkId': '设备父节点为必填项'}
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-17 10:07:03
* @FilePath: \general-ai-platform-web\src\locales\zh-CN\device.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export const device: { [key: string]: string } = {
'device.device.table.list.id': 'ID',
'device.device.table.list.name': '设备名称',
'device.device.table.list.code': '设备代码',
'device.device.table.list.position': '位置',
'device.device.table.list.param': '设备参数',
'device.device.table.list.spec': '设备规格',
'device.device.table.list.categoryFkId': '设备类别',
'device.device.table.list.groupFkId': '设备分组',
'device.device.table.list.isEnable': '是否启用',
'device.device.table.list.remark': '备注',
'device.device.table.list.createTime': '创建时间',
'device.device.table.list.updateTime': '更新时间',
'device.device.table.rule.required.name': '设备名称为必填项',
'device.device.table.rule.required.code': '设备代码为必填项',
'device.device.table.list.add': '新建设备',
'device.device.table.list.update': '更新设备',
};
export const device_category: { [key: string]: string } = {
'device.device_category.table.list.id': 'ID',
'device.device_category.table.list.name': '类别名称',
'device.device_category.table.list.code': '类别代码',
'device.device_category.table.list.remark': '备注',
'device.device_category.table.list.createTime': '创建时间',
'device.device_category.table.list.updateTime': '更新时间',
'device.device_category.table.rule.required.name': '类别名称为必填项',
'device.device_category.table.rule.required.code': '类别代码为必填项',
'device.device_category.table.list.add': '新建设备类别',
'device.device_category.table.list.update': '更新设备类别',
};
export const device_group: { [key: string]: string } = {
'device.device_group.table.list.id': 'ID',
'device.device_group.table.list.name': '分组名称',
'device.device_group.table.list.code': '分组代码',
'device.device_group.table.list.address': '地址',
'device.device_group.table.list.telephone': '电话',
'device.device_group.table.list.lon': '经度',
'device.device_group.table.list.lat': '纬度',
'device.device_group.table.list.managerName': '负责人姓名',
'device.device_group.table.list.managerPhone': '负责人联系方式',
'device.device_group.table.list.isEnable': '是否启用',
'device.device_group.table.list.parentFkId': '父节点',
'device.device_group.table.list.remark': '备注',
'device.device_group.table.list.createTime': '创建时间',
'device.device_group.table.list.updateTime': '更新时间',
'device.device_group.table.rule.required.name': '分组名称为必填项',
'device.device_group.table.rule.required.code': '分组代码为必填项',
'device.device_group.table.rule.required.managerName': '负责人姓名为必填项',
'device.device_group.table.rule.required.managerPhone': '负责人联系方式为必填项',
'device.device_group.table.rule.required.parentFkId': '父节点为必填项',
'device.device_group.table.list.add': '新建设备分组',
'device.device_group.table.list.update': '更新设备分组',
};
export const device_relation: { [key: string]: string } = {
'device.device_relation.table.list.id': 'ID',
'device.device_relation.table.list.deviceParentFkId': '设备父节点',
'device.device_relation.table.list.deviceSonFkId': '设备父节点',
'device.device_relation.table.list.createTime': '创建时间',
'device.device_relation.table.list.updateTime': '更新时间',
'device.device_relation.table.rule.required.deviceParentFkId': '设备父节点为必填项',
'device.device_relation.table.rule.required.deviceSonFkId': '设备父节点为必填项',
};

4
src/locales/zh-CN/project.ts
Unescape Escape View File

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-03 16:28:33
* @LastEditTime: 2023-11-17 14:36:31
* @FilePath: \general-ai-platform-web\src\locales\zh-CN\project.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -19,4 +19,6 @@ export const project: { [key: string]: string } = {
'project.project.table.rule.required.name': '项目名称为必填项',
'project.project.table.rule.required.code': '项目代码为必填项',
'project.project.table.rule.required.info': '项目简介为必填项',
'project.project.table.list.add': '新建项目',
'project.project.table.list.update': '更新项目',
};

2
src/locales/zh-CN/resource.ts
Unescape Escape View File

@ -60,6 +60,8 @@ export const model_image: { [key: string]: string } = {
'resource.model_image.table.list.updateTime': '更新时间',
'resource.model_image.table.rule.required.name': '镜像名称为必填项',
'resource.model_image.table.rule.required.modelVersionFkId': '模型版本为必填项',
'resource.model_image.table.list.add': '新建模型镜像',
'resource.model_image.table.list.update': '更新模型镜像',
};
export const model_version: { [key: string]: string } = {
'resource.model_version.table.list.status': '状态',

4
src/pages/Analysis/ActionDetectionList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -14,12 +14,12 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={600}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
>
{props.currentRow?.id && (
<ProDescriptions<API.ActionDetection>

4
src/pages/Device/DeviceCategoryList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -14,12 +14,12 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={600}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
>
{props.currentRow?.id && (
<ProDescriptions<API.DeviceCategory>

215
src/pages/Device/DeviceCategoryList/components/CreateForm.tsx
Unescape Escape View File

@ -1,88 +1,143 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {postDeviceCategoryCreateDeviceCategory} from "@/services/device/DeviceCategory";
import React, {useState} from 'react';
import {Button, Form, message} from 'antd';
import {Switch} from 'antd';
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>;
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;
};
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>();
const intl = useIntl();
const [isAuto, setIsAuto] = useState(true);
const [form] = Form.useForm<API.DeviceCategory>();
return (
<ModalForm<API.DeviceCategory>
title={intl.formatMessage({
id: 'common.modal.table.create.title',
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: '$$$'}))
})
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="md" 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="md" 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="md" 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>)}
>
<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;

216
src/pages/Device/DeviceCategoryList/components/UpdateForm.tsx
Unescape Escape View File

@ -1,31 +1,40 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormDateTimePicker} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {putDeviceCategoryUpdateDeviceCategory} from "@/services/device/DeviceCategory";
import React, {useState} from 'react';
import {Button, Form, message} from 'antd';
/*
* @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>;
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;
};
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: 'common.modal.table.update.title',
id: 'device.device_category.table.list.update',
defaultMessage: '$$$',
})}
open={props.updateModalOpen}
@ -37,49 +46,142 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
}}
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: '$$$'}))
})
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="md" name="id" label="id" disabled={true} initialValue={props.values.id}/>
<ProFormText width="md" 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"
/>
),
},
]}
<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="md" 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="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="md" 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="md" 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="md" 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>)}
),
},
]}
/>
<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;

468
src/pages/Device/DeviceCategoryList/index.tsx
Unescape Escape View File

@ -1,80 +1,84 @@
import {deleteDeviceCategoryDeleteDeviceCategory, postDeviceCategoryGetDeviceCategoryList, deleteDeviceCategoryDeleteDeviceCategoryByIds} from '@/services/device/DeviceCategory';
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 {
FooterToolbar,
PageContainer,
ProTable,
ProFormSelect,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message} from 'antd';
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';
import CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
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 [currentRow, setCurrentRow] = useState<API.DeviceCategory>();
const [selectedRowsState, setSelectedRows] = useState<API.DeviceCategory[]>([]);
/**
* @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>[] = [
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",
title: <FormattedMessage id="device.device_category.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
sorter: true,
render: (dom, entity) => {
return (
@ -91,199 +95,197 @@ const columns: ProColumns<API.DeviceCategory>[] = [
},
{
title: (<FormattedMessage
id="device.device_category.table.list.name"
defaultMessage="$$$"/>),
dataIndex: "name",
hideInSearch: true,
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.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.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.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="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) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<a
key="update"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a>
<a
key="destroy"
onClick={() => {
handleDestroy(record).then(()=>{})
}}>
<FormattedMessage
id="pages.searchTable.destroy"
defaultMessage="Destroy"
{
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?.();
});
}}
/>
</a>
</Access>
],
},];
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: 120,
}}
onDataSourceChange={(data)=>{
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
}}
columnsState={{
persistenceKey: 'device_category_list',
persistenceType: 'localStorage'
}}
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
)}
</>
);
}}
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: "",
orderKey: '',
...rest,
}
};
if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0]
let sort_select = sort[reqParams.orderKey]
reqParams.orderKey = Object.keys(sort)[0];
let sort_select = sort[reqParams.orderKey];
reqParams.desc = sort_select === 'descend';
}
let resp = await postDeviceCategoryGetDeviceCategoryList({...reqParams})
let resp = await postDeviceCategoryGetDeviceCategoryList({ ...reqParams });
return {
data: resp.data.list.map((v: API.DeviceCategory)=>{
return {...v, key: v.id}
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
pageSize: resp.data.pageSize,
};
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
onClick={async () => {
deleteDeviceCategoryDeleteDeviceCategoryByIds({ids: selectedRowsState.map((v: API.DeviceCategory)=>{return v.id as number})}).then(()=>{
actionRef.current?.reloadAndRest?.();
})
}}
>
<FormattedMessage
id="pages.searchTable.batchDeletion"
defaultMessage="Batch deletion"
/>
</Button>
</FooterToolbar>
)}
<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}
/>
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
</PageContainer>
);
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
</PageContainer>
);
};
export default DeviceCategoryList;
export default DeviceCategoryList;

4
src/pages/Device/DeviceGroupList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -14,12 +14,12 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={600}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
>
{props.currentRow?.id && (
<ProDescriptions<API.DeviceGroup>

358
src/pages/Device/DeviceGroupList/components/CreateForm.tsx
Unescape Escape View File

@ -1,114 +1,272 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormSwitch} from '@ant-design/pro-components';import {ProFormSelect} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {postDeviceGroupGetDeviceGroupFkSelect} from "@/services/device/DeviceGroup";
import {postDeviceGroupCreateDeviceGroup} from "@/services/device/DeviceGroup";
import React, {useEffect, useState} from 'react';
import {Button, Form, message} from 'antd';
import {Switch} from 'antd';
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>;
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;
};
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 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}]);
const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([
{ label: '根节点', value: 0 },
]);
useEffect(()=>{
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}])
setParentId(props.values.id as number);
setParentSelectOptions([{ label: props.values.name, value: props.values.id }]);
}
}, [props.createModalOpen])
}, [props.createModalOpen]);
return (
<ModalForm<API.DeviceGroup>
title={intl.formatMessage({
id: 'common.modal.table.create.title',
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: '$$$'}))
})
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="md" name="parentFkId"
initialValue={parentId}
disabled={true}
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: '$$$'})}`}
request={async () => parentSelectOptions}
/>
<ProFormText width="md" 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="md" 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="md" 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="md" 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="md" 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="md" 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="md" 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="md" 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}/>
<ProFormSwitch width="md" name="isEnable" label={<FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$"/>} initialValue={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_input',
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}
/>
<ProFormSwitch
width={proFormItemStyleProps.column2Width}
name="isEnable"
label={
<FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />
}
initialValue={true}
/>
<ProFormText width="md" 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}/>
</ProForm.Group>
</ModalForm>)}
<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}
/>
</ProForm.Group>
</ModalForm>
);
};
export default CreateForm;

329
src/pages/Device/DeviceGroupList/components/UpdateForm.tsx
Unescape Escape View File

@ -1,32 +1,38 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormSwitch} from '@ant-design/pro-components';import {ProFormSelect} from '@ant-design/pro-components';import {ProFormDateTimePicker} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {postDeviceGroupGetDeviceGroupFkSelect} from "@/services/device/DeviceGroup";
import {putDeviceGroupUpdateDeviceGroup} from "@/services/device/DeviceGroup";
import React, {useState} from 'react';
import {Button, Form, message} from 'antd';
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>;
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;
};
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: 'common.modal.table.update.title',
id: 'device.device_group.table.list.update',
defaultMessage: '$$$',
})}
open={props.updateModalOpen}
@ -38,59 +44,248 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
}}
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: '$$$'}))
})
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="md" name="id" label="id" disabled={true} initialValue={props.values.id}/>
{/*<ProFormSelect width="md" 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="md" 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"
/>
),
},
]}
<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="md" 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="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="md" 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="md" 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="md" 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="md" 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="md" 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="md" 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="md" name="isEnable" label={<FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$"/>} initialValue={props.values.isEnable} disabled={false}/>
),
},
]}
/>
<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="md" 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="md" 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="md" 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>)}
<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;

160
src/pages/Device/DeviceGroupList/index.tsx
Unescape Escape View File

@ -1,3 +1,5 @@
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
import {
deleteDeviceGroupDeleteDeviceGroup,
deleteDeviceGroupDeleteDeviceGroupByIds,
@ -12,6 +14,8 @@ 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 = () => {
/**
@ -32,6 +36,8 @@ const DeviceGroupList: React.FC = () => {
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[]>([]);
@ -99,9 +105,10 @@ const DeviceGroupList: React.FC = () => {
};
const columns: ProColumns<API.DeviceGroup>[] = [
// TODO 确认是否需要和一级内容对齐
{
title: <FormattedMessage id="device.device_group.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
title: <span style={{paddingLeft: 0}}><FormattedMessage id="device.device_group.table.list.name" defaultMessage="id" /></span>,
dataIndex: 'name',
sorter: true,
render: (dom, entity) => {
return (
@ -115,14 +122,9 @@ const DeviceGroupList: React.FC = () => {
</a>
);
},
key: 'fixedName',
fixed: 'left',
},
{
title: <FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />,
dataIndex: 'name',
hideInSearch: true,
},
{
title: <FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />,
dataIndex: 'code',
@ -154,7 +156,6 @@ const DeviceGroupList: React.FC = () => {
dataIndex: 'lat',
hideInSearch: true,
},
{
title: (
<FormattedMessage id="device.device_group.table.list.managerName" defaultMessage="$$$" />
@ -246,37 +247,54 @@ const DeviceGroupList: React.FC = () => {
valueType: 'option',
fixed: 'right',
render: (_, record) => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<a
key="create"
onClick={() => {
setCreateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="common.create_son" defaultMessage="Create" />
</a>
<a
key="update"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a>
<a
key="destroy"
onClick={() => {
handleDestroy(record).then(() => {});
}}
>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</a>
</Access>,
<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>,
],
},
];
@ -290,20 +308,39 @@ const DeviceGroupList: React.FC = () => {
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
scroll={{
x: 1800,
}}
scroll={{ y: proTableCommonOptions.commscrollY, x: 1800}}
search={{
labelWidth: 120,
labelWidth: proTableCommonOptions.searchLabelWidth,
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
...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)}
@ -351,36 +388,9 @@ const DeviceGroupList: React.FC = () => {
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
checkStrictly: false
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
onClick={async () => {
deleteDeviceGroupDeleteDeviceGroupByIds({
ids: selectedRowsState.map((v: API.DeviceGroup) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.();
});
}}
>
<FormattedMessage
id="pages.searchTable.batchDeletion"
defaultMessage="Batch deletion"
/>
</Button>
</FooterToolbar>
)}
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}

4
src/pages/Device/DeviceList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -14,12 +14,12 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={600}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
>
{props.currentRow?.id && (
<ProDescriptions<API.Device>

329
src/pages/Device/DeviceList/components/CreateForm.tsx
Unescape Escape View File

@ -1,114 +1,233 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormSelect} from '@ant-design/pro-components';import {ProFormSwitch} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {postDeviceGroupGetDeviceGroupFkSelect} from "@/services/device/DeviceGroup";
import {postDeviceCategoryGetDeviceCategoryFkSelect} from "@/services/device/DeviceCategory";
import {postDeviceCreateDevice} from "@/services/device/Device";
import React, {useState} from 'react';
import {Button, Form, message} from 'antd';
import {Switch} from 'antd';
import { postDeviceCreateDevice } from '@/services/device/Device';
import { postDeviceCategoryGetDeviceCategoryFkSelect } from '@/services/device/DeviceCategory';
import { postDeviceGroupGetDeviceGroupFkSelect } 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 React, { useState } from 'react';
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
export type FormValueType = {
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.Device>;
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.Device>;
export type CreateFormProps = {
createModalOpen: boolean;
handleModal: ()=>void;
values: Partial<API.Device>;
reload: any;
};
export type CreateFormProps = {
createModalOpen: boolean;
handleModal: () => void;
values: Partial<API.Device>;
reload: any;
};
const CreateForm: React.FC<CreateFormProps> = (props) => {
const intl = useIntl();
const [isAuto, setIsAuto] = useState(true);
const [form] = Form.useForm<API.Device>();
const intl = useIntl();
const [isAuto, setIsAuto] = useState(true);
const [form] = Form.useForm<API.Device>();
return (
<ModalForm<API.Device>
title={intl.formatMessage({
id: 'common.modal.table.create.title',
defaultMessage: '$$$',
})}
open={props.createModalOpen}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => props.handleModal(),
}}
submitTimeout={2000}
onFinish={async (values) => {
postDeviceCreateDevice(values).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
props.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
return (
<ModalForm<API.Device>
width={proFormModelWidth}
title={intl.formatMessage({
id: 'device.device.table.list.add',
defaultMessage: '$$$',
})}
open={props.createModalOpen}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => props.handleModal(),
}}
submitTimeout={2000}
onFinish={async (values) => {
postDeviceCreateDevice(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="name"
label={<FormattedMessage id="device.device.table.list.name" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({ id: 'device.device.table.list.name', defaultMessage: '$$$' })}`}
required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="device.device.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormSelect
width={proFormItemStyleProps.column2Width}
name="groupFkId"
label={<FormattedMessage id="device.device.table.list.groupFkId" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.groupFkId',
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,
};
});
}}
/>
<ProFormText
width={proFormItemStyleProps.width - 80}
name="code"
label={<FormattedMessage id="device.device.table.list.code" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({ id: 'device.device.table.list.code', defaultMessage: '$$$' })}`}
required={!isAuto}
initialValue=""
disabled={isAuto}
rules={
isAuto
? []
: [
{
required: true,
message: (
<FormattedMessage
id="device.device.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="position"
label={<FormattedMessage id="device.device.table.list.position" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.position',
defaultMessage: '$$$',
})}`}
required={false}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="param"
label={<FormattedMessage id="device.device.table.list.param" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.param',
defaultMessage: '$$$',
})}`}
required={false}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="spec"
label={<FormattedMessage id="device.device.table.list.spec" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({ id: 'device.device.table.list.spec', defaultMessage: '$$$' })}`}
required={false}
/>
<ProFormSelect
width={proFormItemStyleProps.column2Width}
name="categoryFkId"
label={
<FormattedMessage id="device.device.table.list.categoryFkId" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.categoryFkId',
defaultMessage: '$$$',
})}`}
required={false}
showSearch
debounceTime={1000}
request={async (keyWord) => {
const resp = await postDeviceCategoryGetDeviceCategoryFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => {
return {
label: v.name,
value: v.id,
};
});
}}
/>
<ProForm.Group>
<ProFormText width="md" name="name" label={<FormattedMessage id="device.device.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.name', defaultMessage: '$$$'})}`} required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="device.device.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormText width="md" name="code" label={<FormattedMessage id="device.device.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.code', defaultMessage: '$$$'})}`} required={!isAuto} initialValue='' disabled={isAuto}
rules={isAuto?[]:[
{
required: true,
message: (
<FormattedMessage
id="device.device.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="md" name="position" label={<FormattedMessage id="device.device.table.list.position" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.position', defaultMessage: '$$$'})}`} required={false}/>
<ProFormText width="md" name="param" label={<FormattedMessage id="device.device.table.list.param" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.param', defaultMessage: '$$$'})}`} required={false}/>
<ProFormText width="md" name="spec" label={<FormattedMessage id="device.device.table.list.spec" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.spec', defaultMessage: '$$$'})}`} required={false}/>
<ProFormSelect width="md" name="categoryFkId" label={<FormattedMessage id="device.device.table.list.categoryFkId" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.categoryFkId', defaultMessage: '$$$'})}`} required={false} showSearch debounceTime={1000} request={async (keyWord)=>{
const resp = await postDeviceCategoryGetDeviceCategoryFkSelect({keyword: keyWord?.keyWords || ''})
return resp.data.list.map((v: any)=>{
return {
label: v.name,
value: v.id
}
})
}
}/>
<ProFormSelect width="md" name="groupFkId" label={<FormattedMessage id="device.device.table.list.groupFkId" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.groupFkId', 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
}
})
}
}/>
<ProFormSwitch width="md" name="isEnable" label={<FormattedMessage id="device.device.table.list.isEnable" defaultMessage="$$$"/>} initialValue={true}/>
<ProFormText width="md" name="remark" label={<FormattedMessage id="device.device.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.remark', defaultMessage: '$$$'})}`} required={false}/>
</ProForm.Group>
</ModalForm>)}
<ProFormText
width={proFormItemStyleProps.column2Width}
name="remark"
label={<FormattedMessage id="device.device.table.list.remark" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.remark',
defaultMessage: '$$$',
})}`}
required={false}
/>
<ProFormSwitch
width={proFormItemStyleProps.column2Width}
name="isEnable"
label={<FormattedMessage id="device.device.table.list.isEnable" defaultMessage="$$$" />}
initialValue={true}
/>
</ProForm.Group>
</ModalForm>
);
};
export default CreateForm;

327
src/pages/Device/DeviceList/components/UpdateForm.tsx
Unescape Escape View File

@ -1,33 +1,41 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormSelect} from '@ant-design/pro-components';import {ProFormSwitch} from '@ant-design/pro-components';import {ProFormDateTimePicker} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {postDeviceGroupGetDeviceGroupFkSelect} from "@/services/device/DeviceGroup";
import {postDeviceCategoryGetDeviceCategoryFkSelect} from "@/services/device/DeviceCategory";
import {putDeviceUpdateDevice} from "@/services/device/Device";
import React, {useState} from 'react';
import {Button, Form, message} from 'antd';
import { putDeviceUpdateDevice } from '@/services/device/Device';
import { postDeviceCategoryGetDeviceCategoryFkSelect } from '@/services/device/DeviceCategory';
import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
import {
ModalForm,
ProForm,
ProFormDateTimePicker,
ProFormSelect,
ProFormSwitch,
ProFormText,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import React from 'react';
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
export type FormValueType = {
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.Device>;
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.Device>;
export type UpdateFormProps = {
updateModalOpen: boolean;
handleModal: () => void;
values: Partial<API.Device>;
reload: any;
};
export type UpdateFormProps = {
updateModalOpen: boolean;
handleModal: () => void;
values: Partial<API.Device>;
reload: any;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
const [form] = Form.useForm<API.Device>();
return (
<ModalForm<API.Device>
width={proFormModelWidth}
title={intl.formatMessage({
id: 'common.modal.table.update.title',
id: 'device.device.table.list.update',
defaultMessage: '$$$',
})}
open={props.updateModalOpen}
@ -39,73 +47,226 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
}}
submitTimeout={2000}
onFinish={async (values) => {
putDeviceUpdateDevice(values).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
props.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
putDeviceUpdateDevice(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="md" name="id" label="id" disabled={true} initialValue={props.values.id}/>
<ProFormText width="md" name="name" label={<FormattedMessage id="device.device.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.name', defaultMessage: '$$$'})}`} required={true} initialValue={props.values.name} disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="device.device.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
<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.table.list.name" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({ id: 'device.device.table.list.name', defaultMessage: '$$$' })}`}
required={true}
initialValue={props.values.name}
disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="device.device.table.rule.required.name"
defaultMessage="name is required"
/>
<ProFormText width="md" name="code" label={<FormattedMessage id="device.device.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.code', defaultMessage: '$$$'})}`} required={true} initialValue={props.values.code} disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="device.device.table.rule.required.code"
defaultMessage="code is required"
/>
),
},
]}
),
},
]}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="code"
label={<FormattedMessage id="device.device.table.list.code" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({ id: 'device.device.table.list.code', defaultMessage: '$$$' })}`}
required={true}
initialValue={props.values.code}
disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="device.device.table.rule.required.code"
defaultMessage="code is required"
/>
<ProFormText width="md" name="position" label={<FormattedMessage id="device.device.table.list.position" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.position', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.position} disabled={false}/>
<ProFormText width="md" name="param" label={<FormattedMessage id="device.device.table.list.param" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.param', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.param} disabled={false}/>
<ProFormText width="md" name="spec" label={<FormattedMessage id="device.device.table.list.spec" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.spec', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.spec} disabled={false}/>
<ProFormSelect width="md" name="categoryFkId" label={<FormattedMessage id="device.device.table.list.categoryFkId" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.categoryFkId', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.categoryFkId} showSearch debounceTime={1000} request={async (keyWord)=>{
const resp = await postDeviceCategoryGetDeviceCategoryFkSelect({keyword: keyWord?.keyWords || ''})
return resp.data.list.map((v: any)=>{
return {
label: v.name,
value: v.id
}
})
}
}/>
<ProFormSelect width="md" name="groupFkId" label={<FormattedMessage id="device.device.table.list.groupFkId" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.groupFkId', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.groupFkId} 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
}
})
}
}/>
<ProFormSwitch width="md" name="isEnable" label={<FormattedMessage id="device.device.table.list.isEnable" defaultMessage="$$$"/>} initialValue={props.values.isEnable} disabled={false}/>
<ProFormText width="md" name="remark" label={<FormattedMessage id="device.device.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.remark', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.remark} disabled={false}/>
<ProFormDateTimePicker width="md" name="createTime" label={<FormattedMessage id="device.device.table.list.createTime" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.createTime', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.createTime} disabled={true}/>
<ProFormDateTimePicker width="md" name="updateTime" label={<FormattedMessage id="device.device.table.list.updateTime" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.updateTime', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.updateTime} disabled={true}/>
</ProForm.Group>
</ModalForm>)}
),
},
]}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="position"
label={<FormattedMessage id="device.device.table.list.position" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.position',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.position}
disabled={false}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="param"
label={<FormattedMessage id="device.device.table.list.param" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.param',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.param}
disabled={false}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="spec"
label={<FormattedMessage id="device.device.table.list.spec" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({ id: 'device.device.table.list.spec', defaultMessage: '$$$' })}`}
required={false}
initialValue={props.values.spec}
disabled={false}
/>
<ProFormSelect
width={proFormItemStyleProps.column2Width}
name="categoryFkId"
label={
<FormattedMessage id="device.device.table.list.categoryFkId" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.categoryFkId',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.categoryFkId}
showSearch
debounceTime={1000}
request={async (keyWord) => {
const resp = await postDeviceCategoryGetDeviceCategoryFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => {
return {
label: v.name,
value: v.id,
};
});
}}
/>
<ProFormSelect
width={proFormItemStyleProps.column2Width}
name="groupFkId"
label={<FormattedMessage id="device.device.table.list.groupFkId" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.groupFkId',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.groupFkId}
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,
};
});
}}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="remark"
label={<FormattedMessage id="device.device.table.list.remark" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.remark',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.remark}
disabled={false}
/>
<ProFormSwitch
width={proFormItemStyleProps.column2Width}
name="isEnable"
label={<FormattedMessage id="device.device.table.list.isEnable" defaultMessage="$$$" />}
initialValue={props.values.isEnable}
disabled={false}
/>
<ProFormDateTimePicker
width={proFormItemStyleProps.column2Width}
name="createTime"
label={<FormattedMessage id="device.device.table.list.createTime" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.createTime',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.createTime}
disabled={true}
/>
<ProFormDateTimePicker
width={proFormItemStyleProps.column2Width}
name="updateTime"
label={<FormattedMessage id="device.device.table.list.updateTime" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'device.device.table.list.updateTime',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.updateTime}
disabled={true}
/>
</ProForm.Group>
</ModalForm>
);
};
export default UpdateForm;

241
src/pages/Device/DeviceList/index.tsx
Unescape Escape View File

@ -1,3 +1,6 @@
import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
import { ColumnDrawer as DeviceCategoryColumnDrawer } from '@/pages/Device/DeviceCategoryList/components/ColumnDrawer';
import { DeviceCategoryColumns } from '@/pages/Device/DeviceCategoryList/components/Columns';
import { ColumnDrawer as DeviceGroupColumnDrawer } from '@/pages/Device/DeviceGroupList/components/ColumnDrawer';
@ -23,7 +26,6 @@ import {
import { PlusOutlined, RedoOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
ProCard,
ProFormSelect,
@ -31,9 +33,10 @@ import {
ProTable,
} from '@ant-design/pro-components';
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, Popconfirm, Tree, message } from 'antd';
import { Button, Tree, message } from 'antd';
import { DataNode } from 'antd/es/tree';
import React, { useEffect, 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';
@ -60,6 +63,8 @@ const DeviceList: React.FC = () => {
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
// 动态设置每页数量
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
const [currentRow, setCurrentRow] = useState<API.Device>();
const [selectedRowsState, setSelectedRows] = useState<API.Device[]>([]);
const [category_fk_id_open, set_category_fk_id_open] = useState(false);
@ -194,8 +199,9 @@ const DeviceList: React.FC = () => {
const columns: ProColumns<API.Device>[] = [
{
title: <FormattedMessage id="device.device.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
title: <FormattedMessage id="device.device.table.list.name" defaultMessage="$$$" />,
dataIndex: 'name',
width: '150',
sorter: true,
render: (dom, entity) => {
return (
@ -216,7 +222,7 @@ const DeviceList: React.FC = () => {
width="md"
labelCol={{ span: 4 }}
wrapperCol={{ span: 22 }}
name="id"
name="name"
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
@ -226,13 +232,15 @@ const DeviceList: React.FC = () => {
</>
);
},
key: 'fixedName',
fixed: 'left',
},
{
title: <FormattedMessage id="device.device.table.list.name" defaultMessage="$$$" />,
dataIndex: 'name',
hideInSearch: true,
},
// {
// title: <FormattedMessage id="device.device.table.list.name" defaultMessage="$$$" />,
// dataIndex: 'name',
// hideInSearch: true,
// },
{
title: <FormattedMessage id="device.device.table.list.code" defaultMessage="$$$" />,
@ -408,81 +416,97 @@ const DeviceList: React.FC = () => {
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
width: 250,
width: 160,
render: (_, record) => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
key="update"
type="link"
size="small"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</Button>
<Popconfirm
placement="topLeft"
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
description={intl.formatMessage({
id: 'common.modal.table.delete.content',
defaultMessage: '$$$',
})}
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
onConfirm={() => {
handleDestroy(record).then(() => {});
}}
>
<Button key="destroy" type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
<Button
key="video"
type="link"
size="small"
onClick={() => {
setVideoOpening(true);
if (record.param) {
postDeviceOpenRtspCamera({ url: record.param })
.then((resp) => {
setVideoServerParam(resp.data);
setVideoOpening(false);
setVideoModalOpen(true);
console.log(resp.data);
<TableActionCard
key="TableActionCardRef"
renderActions={[
{
key: 'update',
renderDom: (
<Button
key="update"
type="link"
size="small"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
})
.catch(() => {
setVideoOpening(false);
message.error(
intl.formatMessage({ id: 'common.open_failure', defaultMessage: '$$$' }),
);
});
} else {
setVideoOpening(false);
message.error(
intl.formatMessage({ id: 'common.open_failure', defaultMessage: '$$$' }),
);
}
}}
>
<FormattedMessage id="common.open_video" defaultMessage="$$$" />
</Button>
</Access>,
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</Button>
),
},
{
key: 'destroy',
renderDom: (
<IsDelete
deleteApi={() => {
handleDestroy(record).then(() => {});
}}
></IsDelete>
),
},
{
key: 'video',
renderDom: (
<Button
key="video"
type="link"
size="small"
onClick={() => {
setVideoOpening(true);
if (record.param) {
postDeviceOpenRtspCamera({ url: record.param })
.then((resp) => {
setVideoServerParam(resp.data);
setVideoOpening(false);
setVideoModalOpen(true);
console.log(resp.data);
setCurrentRow(record);
})
.catch(() => {
setVideoOpening(false);
message.error(
intl.formatMessage({
id: 'common.open_failure',
defaultMessage: '$$$',
}),
);
});
} else {
setVideoOpening(false);
message.error(
intl.formatMessage({ id: 'common.open_failure', defaultMessage: '$$$' }),
);
}
}}
>
<FormattedMessage id="common.open_video" defaultMessage="$$$" />
</Button>
),
},
]}
></TableActionCard>,
],
},
];
return (
<PageContainer>
<ProCard split="vertical">
<ProCard
style={{ display: 'flex', width: '100%', background: 'transparent' }}
bodyStyle={{
padding:0,
margin:0,
display: 'flex',
justifyContent: 'space-between',
}}
>
{/* bodyStyle={{padding: 0, margin: 0}} */}
<ProCard
headStyle={{ paddingTop: 24, paddingLeft: 20, paddingRight: 20 }}
title="网点选择"
colSpan="20%"
colSpan="22%"
extra={
<Button
icon={<RedoOutlined />}
@ -505,10 +529,16 @@ const DeviceList: React.FC = () => {
setSelectNodes(selectKeys);
actionRef.current?.reload();
}}
checkStrictly={false}
/>
)}
</ProCard>
<ProCard title="" headerBordered>
<ProCard
colSpan="76.5%"
style={{ padding: 0, margin: 0, background: 'transparent' }}
bodyStyle={{ padding: 0, margin: 0 }}
headerBordered
>
<ProTable<API.Device>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
@ -524,9 +554,9 @@ const DeviceList: React.FC = () => {
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
scroll={{ x: 1600 }}
scroll={{ x: 2000, y: proTableCommonOptions.commscrollY }}
search={{
labelWidth: 120,
labelWidth: proTableCommonOptions.searchLabelWidth,
}}
onDataSourceChange={(data) => {
let CategoryFkIdIds: any = data.map((v) => {
@ -540,13 +570,34 @@ const DeviceList: React.FC = () => {
setGroupFkIdIds(GroupFkIdIds);
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
...proTablePaginationOptions,
pageSize: currentPageSize,
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
}}
columnsState={{
persistenceKey: 'device_list',
persistenceType: 'localStorage',
}}
tableAlertOptionRender={() => {
return (
<>
{selectedRowsState?.length > 0 && (
<IsBatchDelete
deleteApi={() => {
// TODO 需联调批量删除接口
deleteDeviceDeleteDeviceByIds({
ids: selectedRowsState.map((v: API.Device) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.();
});
}}
/>
)}
</>
);
}}
toolBarRender={() => [
<Access
accessible={access.canUpdate(history.location.pathname)}
@ -631,34 +682,6 @@ const DeviceList: React.FC = () => {
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
onClick={async () => {
deleteDeviceDeleteDeviceByIds({
ids: selectedRowsState.map((v: API.Device) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.();
});
}}
>
<FormattedMessage
id="pages.searchTable.batchDeletion"
defaultMessage="Batch deletion"
/>
</Button>
</FooterToolbar>
)}
</ProCard>
</ProCard>
<CreateForm

4
src/pages/Device/DeviceRelationList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -14,12 +14,12 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={600}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
>
{props.currentRow?.id && (
<ProDescriptions<API.DeviceRelation>

4
src/pages/Project/ProjectList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -14,12 +14,12 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={600}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
>
{props.currentRow?.id && (
<ProDescriptions<API.Project>

248
src/pages/Project/ProjectList/components/CreateForm.tsx
Unescape Escape View File

@ -1,102 +1,162 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormSwitch} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {postProjectCreateProject} from "@/services/project/Project";
import React, {useState} from 'react';
import {Button, Form, message} from 'antd';
import {Switch} from 'antd';
import { postProjectCreateProject } from '@/services/project/Project';
import { ModalForm, ProForm, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, Switch, message } from 'antd';
import React, { useState } from 'react';
export type FormValueType = {
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.Project>;
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.Project>;
export type CreateFormProps = {
createModalOpen: boolean;
handleModal: ()=>void;
values: Partial<API.Project>;
reload: any;
};
export type CreateFormProps = {
createModalOpen: boolean;
handleModal: () => void;
values: Partial<API.Project>;
reload: any;
};
const CreateForm: React.FC<CreateFormProps> = (props) => {
const intl = useIntl();
const [isAuto, setIsAuto] = useState(true);
const [form] = Form.useForm<API.Project>();
const intl = useIntl();
const [isAuto, setIsAuto] = useState(true);
const [form] = Form.useForm<API.Project>();
return (
<ModalForm<API.Project>
title={intl.formatMessage({
id: 'common.modal.table.create.title',
defaultMessage: '$$$',
})}
open={props.createModalOpen}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => props.handleModal(),
}}
submitTimeout={2000}
onFinish={async (values) => {
postProjectCreateProject(values).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
props.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
return (
<ModalForm<API.Project>
title={intl.formatMessage({
id: 'common.modal.table.create.title',
defaultMessage: '$$$',
})}
open={props.createModalOpen}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => props.handleModal(),
}}
submitTimeout={2000}
onFinish={async (values) => {
postProjectCreateProject(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="md" name="name" label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.name', defaultMessage: '$$$'})}`} required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="project.project.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormText width="md" name="code" label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.code', defaultMessage: '$$$'})}`} required={!isAuto} initialValue='' disabled={isAuto}
rules={isAuto?[]:[
{
required: true,
message: (
<FormattedMessage
id="project.project.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="md" name="info" label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.info', defaultMessage: '$$$'})}`} required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="project.project.table.rule.required.info"
defaultMessage="info is required"
/>
),
},
]}
/>
<ProFormSwitch width="md" name="isEnable" label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$"/>} initialValue={true}/>
<ProFormText width="md" name="remark" label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.remark', defaultMessage: '$$$'})}`} required={false}/>
</ProForm.Group>
</ModalForm>)}
>
<ProForm.Group>
<ProFormText
width="md"
name="name"
label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'project.project.table.list.name',
defaultMessage: '$$$',
})}`}
required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="project.project.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormText
width="md"
name="code"
label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'project.project.table.list.code',
defaultMessage: '$$$',
})}`}
required={!isAuto}
initialValue=""
disabled={isAuto}
rules={
isAuto
? []
: [
{
required: true,
message: (
<FormattedMessage
id="project.project.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="md"
name="info"
label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'project.project.table.list.info',
defaultMessage: '$$$',
})}`}
required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="project.project.table.rule.required.info"
defaultMessage="info is required"
/>
),
},
]}
/>
<ProFormSwitch
width="md"
name="isEnable"
label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
initialValue={true}
/>
<ProFormText
width="md"
name="remark"
label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'project.project.table.list.remark',
defaultMessage: '$$$',
})}`}
required={false}
/>
</ProForm.Group>
</ModalForm>
);
};
export default CreateForm;

49
src/pages/Project/ProjectList/components/MyCreateForm.tsx
Unescape Escape View File

@ -23,7 +23,7 @@ import { FormListActionType } from '@ant-design/pro-form/lib';
import yaml from 'js-yaml';
// @ts-ignore
import cookie from 'react-cookies';
import { proFormItemStyleProps } from '../../../../../config/defaultForm';
import { proFormItemStyleProps, proFormListCreatorButtonProps, proFormModelWidth, proFormSmallModelWidth } from '../../../../../config/defaultForm';
interface RecordType {
key: string;
@ -183,8 +183,11 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
stepsFormRender={(dom, submitter) => {
return (
<Modal
title="分步表单"
width={803}
width={proFormModelWidth}
title={intl.formatMessage({
id: 'project.project.table.list.add',
defaultMessage: '$$$',
})}
onCancel={() => {
setCurrent(0);
setFileList([]);
@ -219,7 +222,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
>
<ProForm.Group>
<ProFormText
{...proFormItemStyleProps}
width={proFormItemStyleProps.width}
name="name"
label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
@ -242,8 +245,9 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
},
]}
/>
<ProFormText
width={680}
width={proFormItemStyleProps.width - 85}
name="code"
label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
@ -273,6 +277,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
}
addonAfter={
<Switch
style={{ marginLeft: 10 }}
checked={isAuto}
checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
@ -281,7 +286,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
}
/>
<ProFormText
{...proFormItemStyleProps}
width={proFormItemStyleProps.width}
name="info"
label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
@ -305,7 +310,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
]}
/>
<ProFormText
{...proFormItemStyleProps}
width={proFormItemStyleProps.width}
name="remark"
label={
<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$" />
@ -319,16 +324,16 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
})}`}
required={false}
/>
</ProForm.Group>
<ProForm.Group>
<ProFormSwitch
width="lg"
name="isEnable"
label={
<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />
}
initialValue={true}
/>
<ProForm.Group>
<ProFormSwitch
width={proFormItemStyleProps.width}
name="isEnable"
label={
<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />
}
initialValue={true}
/>
</ProForm.Group>
</ProForm.Group>
</StepsForm.StepForm>
{/* 关联算法模型 */}
@ -354,7 +359,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
onSearch={handleSearch}
style={{ marginBottom: '20px' }}
listStyle={{ width: 289, height: 300 }}
operationStyle={{ width: 100, alignItems: 'center' }}
operationStyle={{ width: 50, alignItems: 'center' }}
render={(item) => item.title}
/>
</StepsForm.StepForm>
@ -377,7 +382,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
}}
>
<ProFormUploadDragger
label="上传文件"
label={<span className='h3 gn'>上传文件</span>}
name="projectFilePath"
action="/api/v1/file/uploadFile"
max={1}
@ -411,7 +416,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
<ProFormUploadDragger
max={1}
label="配置文件上传"
label={<span className='h3 gn'>配置文件上传</span>}
value={fileList}
name="dragger"
fieldProps={{
@ -472,7 +477,8 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
Icon: CloseOutlined,
}}
name="params"
label="模型参数"
label= {<span className='h3 gn'>模型参数</span>}
creatorButtonProps={proFormListCreatorButtonProps}
>
{(f, index, action) => {
return (
@ -503,7 +509,6 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
stepProps={{
description: '选择网点',
}}
onFinish={async () => {
return true;
}}

42
src/pages/Project/ProjectList/components/UpdateForm.tsx
Unescape Escape View File

@ -9,6 +9,7 @@ import {
} 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;
@ -25,11 +26,7 @@ export type UpdateFormProps = {
reload: any;
};
/**styles 配置 */
const formContainerWidth: number = 512;
const formItemStyleProps: Record<string, any> = {
width: formContainerWidth,
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
@ -37,9 +34,9 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
return (
<ModalForm<API.Project>
width={560}
width={proFormModelWidth}
title={intl.formatMessage({
id: 'common.modal.table.update.title',
id: 'project.project.table.list.update',
defaultMessage: '$$$',
})}
open={props.updateModalOpen}
@ -66,14 +63,14 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
>
<ProForm.Group>
<ProFormText
{...formItemStyleProps}
width={proFormItemStyleProps.column2Width}
name="id"
label="id"
disabled={true}
initialValue={props.values.id}
/>
<ProFormText
{...formItemStyleProps}
width={proFormItemStyleProps.column2Width}
name="name"
label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
@ -99,7 +96,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
]}
/>
<ProFormText
{...formItemStyleProps}
width={proFormItemStyleProps.column2Width}
name="code"
label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
@ -125,7 +122,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
]}
/>
<ProFormText
{...formItemStyleProps}
width={proFormItemStyleProps.column2Width}
name="info"
label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
@ -150,15 +147,9 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
},
]}
/>
<ProFormSwitch
{...formItemStyleProps}
name="isEnable"
label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
initialValue={props.values.isEnable}
disabled={false}
/>
{/* <ProFormCheckbox.Group
{...formItemStyleProps}
width={proFormItemStyleProps.column2Width}
name="isEnable"
layout="vertical"
label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
@ -172,7 +163,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
启用此项目
</div> */}
<ProFormText
{...formItemStyleProps}
width={proFormItemStyleProps.column2Width}
name="remark"
label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
@ -185,9 +176,16 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
required={false}
initialValue={props.values.remark}
disabled={false}
/>
<ProFormSwitch
width={proFormItemStyleProps.column2Width}
name="isEnable"
label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
initialValue={props.values.isEnable}
disabled={false}
/>
<ProFormDateTimePicker
{...formItemStyleProps}
width={proFormItemStyleProps.column2Width}
name="createTime"
label={
<FormattedMessage id="project.project.table.list.createTime" defaultMessage="$$$" />
@ -204,7 +202,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={true}
/>
<ProFormDateTimePicker
{...formItemStyleProps}
width={proFormItemStyleProps.column2Width}
name="updateTime"
label={
<FormattedMessage id="project.project.table.list.updateTime" defaultMessage="$$$" />

130
src/pages/Project/ProjectList/index.tsx
Unescape Escape View File

@ -1,4 +1,7 @@
import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
import IsEnableBox from '@/components/DictionaryBox/isEnable';
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
import {
deleteProjectDeleteProject,
deleteProjectDeleteProjectByIds,
@ -6,10 +9,11 @@ import {
} from '@/services/project/Project';
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 { 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 MyCreateForm from './components/MyCreateForm';
import UpdateForm from './components/UpdateForm';
@ -32,6 +36,8 @@ const ProjectList: React.FC = () => {
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
// 动态设置每页数量
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
const [currentRow, setCurrentRow] = useState<API.Project>();
const [selectedRowsState, setSelectedRows] = useState<API.Project[]>([]);
@ -72,8 +78,8 @@ const ProjectList: React.FC = () => {
const columns: ProColumns<API.Project>[] = [
{
title: <FormattedMessage id="project.project.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
title: <FormattedMessage id="project.project.table.list.name" defaultMessage="$$$" />,
dataIndex: 'name',
sorter: true,
render: (dom, entity) => {
return (
@ -87,14 +93,9 @@ const ProjectList: React.FC = () => {
</a>
);
},
key: 'fixedName',
fixed: 'left',
},
{
title: <FormattedMessage id="project.project.table.list.name" defaultMessage="$$$" />,
dataIndex: 'name',
hideInSearch: true,
},
{
title: <FormattedMessage id="project.project.table.list.code" defaultMessage="$$$" />,
dataIndex: 'code',
@ -158,28 +159,37 @@ const ProjectList: React.FC = () => {
valueType: 'option',
fixed: 'right',
render: (_, record) => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<a
key="update"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a>
<a
key="destroy"
onClick={() => {
handleDestroy(record).then(() => {});
}}
>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</a>
</Access>,
<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>,
],
},
];
@ -190,21 +200,43 @@ const ProjectList: React.FC = () => {
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
scroll={{ y: proTableCommonOptions.commscrollY, x: proTableCommonOptions.commscrollX }}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
search={{
labelWidth: 120,
labelWidth: proTableCommonOptions.searchLabelWidth,
}}
onDataSourceChange={() => {}}
pagination={{
showSizeChanger: true,
pageSize: 10,
...proTablePaginationOptions,
pageSize: currentPageSize,
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
}}
columnsState={{
persistenceKey: 'project_list',
persistenceType: 'localStorage',
}}
tableAlertOptionRender={() => {
return (
<>
{selectedRowsState?.length > 0 && (
<IsBatchDelete
deleteApi={() => {
// TODO 需要；联调删除接口
deleteProjectDeleteProjectByIds({
ids: selectedRowsState.map((v: API.Project) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.();
});
}}
/>
)}
</>
);
}}
toolBarRender={() => [
<Access
accessible={access.canUpdate(history.location.pathname)}
@ -252,34 +284,6 @@ const ProjectList: React.FC = () => {
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
onClick={async () => {
deleteProjectDeleteProjectByIds({
ids: selectedRowsState.map((v: API.Project) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.();
});
}}
>
<FormattedMessage
id="pages.searchTable.batchDeletion"
defaultMessage="Batch deletion"
/>
</Button>
</FooterToolbar>
)}
<MyCreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}

4
src/pages/Resource/AlgorithmModelList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -26,12 +26,12 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={600}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
extra={
<>123</>
}

2
src/pages/Resource/AlgorithmModelList/index.tsx
Unescape Escape View File

@ -43,7 +43,7 @@ const AlgorithmModelList: React.FC = () => {
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
// TODO 动态设置每页数量
// 动态设置每页数量
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
const [currentRow, setCurrentRow] = useState<API.AlgorithmModel>();
const [selectedRowsState, setSelectedRows] = useState<API.AlgorithmModel[]>([]);

4
src/pages/Resource/BusinessImageList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -14,12 +14,12 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={600}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
>
{props.currentRow?.id && (
<ProDescriptions<API.BusinessImage>

11
src/pages/Resource/BusinessImageList/index.tsx
Unescape Escape View File

@ -18,7 +18,7 @@ import { PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-componen
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, message } from 'antd';
import React, { useRef, useState } from 'react';
import { proTableCommonOptions } from '../../../../config/defaultTable';
import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
import { ColumnDrawer } from './components/ColumnDrawer';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
@ -41,6 +41,8 @@ const BusinessImageList: React.FC = () => {
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
// 动态设置每页数量
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
const [currentRow, setCurrentRow] = useState<API.BusinessImage>();
const [selectedRowsState, setSelectedRows] = useState<API.BusinessImage[]>([]);
const [project_fk_id_open, set_project_fk_id_open] = useState(false);
@ -318,7 +320,7 @@ const BusinessImageList: React.FC = () => {
x: proTableCommonOptions.scrollX,
}}
search={{
labelWidth: 'auto',
labelWidth: proTableCommonOptions.searchLabelWidth,
}}
onDataSourceChange={(data) => {
let ProjectFkIdIds: any = data.map((v) => {
@ -327,8 +329,9 @@ const BusinessImageList: React.FC = () => {
setProjectFkIdIds(ProjectFkIdIds);
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
...proTablePaginationOptions,
pageSize: currentPageSize,
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
}}
columnsState={{
persistenceKey: 'business_image_list',

4
src/pages/Resource/ContainerImageList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -14,12 +14,12 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={600}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
>
{props.currentRow?.id && (
<ProDescriptions<API.ContainerImage>

4
src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-15 14:51:54
* @LastEditTime: 2023-11-17 10:36:43
* @FilePath: \general-ai-platform-web\src\pages\Resource\ModelCategoryList\components\ColumnDrawer.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -22,7 +22,7 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={400}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();

212
src/pages/Resource/ModelCategoryList/components/CreateForm.tsx
Unescape Escape View File

@ -1,88 +1,140 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {postModelCategoryCreateModelCategory} from "@/services/resource/ModelCategory";
import React, {useState} from 'react';
import {Button, Form, message} from 'antd';
import {Switch} from 'antd';
import { postModelCategoryCreateModelCategory } from '@/services/resource/ModelCategory';
import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, Switch, message } from 'antd';
import { proFormSmallItemStyleProps,proFormSmallModelWidth } from '../../../../../config/defaultForm';
import React, { useState } from 'react';
export type FormValueType = {
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.ModelCategory>;
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.ModelCategory>;
export type CreateFormProps = {
createModalOpen: boolean;
handleModal: ()=>void;
values: Partial<API.ModelCategory>;
reload: any;
};
export type CreateFormProps = {
createModalOpen: boolean;
handleModal: () => void;
values: Partial<API.ModelCategory>;
reload: any;
};
const CreateForm: React.FC<CreateFormProps> = (props) => {
const intl = useIntl();
const [isAuto, setIsAuto] = useState(true);
const [form] = Form.useForm<API.ModelCategory>();
const intl = useIntl();
const [isAuto, setIsAuto] = useState(true);
const [form] = Form.useForm<API.ModelCategory>();
return (
<ModalForm<API.ModelCategory>
title={intl.formatMessage({
id: 'common.modal.table.create.title',
defaultMessage: '$$$',
})}
open={props.createModalOpen}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => props.handleModal(),
}}
submitTimeout={2000}
onFinish={async (values) => {
postModelCategoryCreateModelCategory(values).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
props.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
return (
<ModalForm<API.ModelCategory>
width={proFormSmallModelWidth}
title={intl.formatMessage({
id: 'resource.model_category.table.list.add',
defaultMessage: '$$$',
})}
open={props.createModalOpen}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => props.handleModal(),
}}
submitTimeout={2000}
onFinish={async (values) => {
postModelCategoryCreateModelCategory(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="md" name="name" label={<FormattedMessage id="resource.model_category.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.name', defaultMessage: '$$$'})}`} required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="resource.model_category.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormText width="md" name="code" label={<FormattedMessage id="resource.model_category.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.code', defaultMessage: '$$$'})}`} required={!isAuto} initialValue='' disabled={isAuto}
rules={isAuto?[]:[
{
required: true,
message: (
<FormattedMessage
id="resource.model_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="md" name="remark" label={<FormattedMessage id="resource.model_category.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.remark', defaultMessage: '$$$'})}`} required={false}/>
</ProForm.Group>
</ModalForm>)}
>
<ProForm.Group>
<ProFormText
width={proFormSmallItemStyleProps.width}
name="name"
label={
<FormattedMessage id="resource.model_category.table.list.name" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_category.table.list.name',
defaultMessage: '$$$',
})}`}
required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="resource.model_category.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormText
width='lg'
name="code"
label={
<FormattedMessage id="resource.model_category.table.list.code" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_category.table.list.code',
defaultMessage: '$$$',
})}`}
required={!isAuto}
initialValue=""
disabled={isAuto}
rules={
isAuto
? []
: [
{
required: true,
message: (
<FormattedMessage
id="resource.model_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="resource.model_category.table.list.remark" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_category.table.list.remark',
defaultMessage: '$$$',
})}`}
required={false}
/>
</ProForm.Group>
</ModalForm>
);
};
export default CreateForm;

208
src/pages/Resource/ModelCategoryList/components/UpdateForm.tsx
Unescape Escape View File

@ -1,31 +1,32 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormDateTimePicker} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {putModelCategoryUpdateModelCategory} from "@/services/resource/ModelCategory";
import React, {useState} from 'react';
import {Button, Form, message} from 'antd';
import { putModelCategoryUpdateModelCategory } from '@/services/resource/ModelCategory';
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.ModelCategory>;
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.ModelCategory>;
export type UpdateFormProps = {
updateModalOpen: boolean;
handleModal: () => void;
values: Partial<API.ModelCategory>;
reload: any;
};
export type UpdateFormProps = {
updateModalOpen: boolean;
handleModal: () => void;
values: Partial<API.ModelCategory>;
reload: any;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
const [form] = Form.useForm<API.ModelCategory>();
return (
<ModalForm<API.ModelCategory>
width={proFormModelWidth}
title={intl.formatMessage({
id: 'common.modal.table.update.title',
id: 'resource.model_category.table.list.update',
defaultMessage: '$$$',
})}
open={props.updateModalOpen}
@ -37,49 +38,142 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
}}
submitTimeout={2000}
onFinish={async (values) => {
putModelCategoryUpdateModelCategory(values).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
props.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
putModelCategoryUpdateModelCategory(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="md" name="id" label="id" disabled={true} initialValue={props.values.id}/>
<ProFormText width="md" name="name" label={<FormattedMessage id="resource.model_category.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.name', defaultMessage: '$$$'})}`} required={true} initialValue={props.values.name} disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="resource.model_category.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
<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="resource.model_category.table.list.name" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_category.table.list.name',
defaultMessage: '$$$',
})}`}
required={true}
initialValue={props.values.name}
disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="resource.model_category.table.rule.required.name"
defaultMessage="name is required"
/>
<ProFormText width="md" name="code" label={<FormattedMessage id="resource.model_category.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.code', defaultMessage: '$$$'})}`} required={true} initialValue={props.values.code} disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="resource.model_category.table.rule.required.code"
defaultMessage="code is required"
/>
),
},
]}
),
},
]}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="code"
label={
<FormattedMessage id="resource.model_category.table.list.code" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_category.table.list.code',
defaultMessage: '$$$',
})}`}
required={true}
initialValue={props.values.code}
disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="resource.model_category.table.rule.required.code"
defaultMessage="code is required"
/>
<ProFormText width="md" name="remark" label={<FormattedMessage id="resource.model_category.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.remark', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.remark} disabled={false}/>
<ProFormDateTimePicker width="md" name="createTime" label={<FormattedMessage id="resource.model_category.table.list.createTime" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.createTime', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.createTime} disabled={true}/>
<ProFormDateTimePicker width="md" name="updateTime" label={<FormattedMessage id="resource.model_category.table.list.updateTime" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.updateTime', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.updateTime} disabled={true}/>
</ProForm.Group>
</ModalForm>)}
),
},
]}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="remark"
label={
<FormattedMessage id="resource.model_category.table.list.remark" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_category.table.list.remark',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.remark}
disabled={false}
/>
<ProFormDateTimePicker
width={proFormItemStyleProps.column2Width}
name="createTime"
label={
<FormattedMessage
id="resource.model_category.table.list.createTime"
defaultMessage="$$$"
/>
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_category.table.list.createTime',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.createTime}
disabled={true}
/>
<ProFormDateTimePicker
width={proFormItemStyleProps.column2Width}
name="updateTime"
label={
<FormattedMessage
id="resource.model_category.table.list.updateTime"
defaultMessage="$$$"
/>
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_category.table.list.updateTime',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.updateTime}
disabled={true}
/>
</ProForm.Group>
</ModalForm>
);
};
export default UpdateForm;

9
src/pages/Resource/ModelCategoryList/index.tsx
Unescape Escape View File

@ -12,7 +12,7 @@ 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 } from '../../../../config/defaultTable';
import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
import { ColumnDrawer } from './components/ColumnDrawer';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
@ -35,6 +35,8 @@ const ModelCategoryList: React.FC = () => {
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
// 动态设置每页数量
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
const [currentRow, setCurrentRow] = useState<API.ModelCategory>();
const [selectedRowsState, setSelectedRows] = useState<API.ModelCategory[]>([]);
@ -187,8 +189,9 @@ const ModelCategoryList: React.FC = () => {
}}
onDataSourceChange={() => {}}
pagination={{
showSizeChanger: true,
pageSize: 10,
...proTablePaginationOptions,
pageSize: currentPageSize,
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
}}
columnsState={{
persistenceKey: 'model_category_list',

4
src/pages/Resource/ModelImageList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -14,12 +14,12 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={600}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
>
{props.currentRow?.id && (
<ProDescriptions<API.ModelImage>

14
src/pages/Resource/ModelImageList/components/CreateForm.tsx
Unescape Escape View File

@ -3,6 +3,7 @@ import { postModelVersionGetModelVersionFkSelect } from '@/services/resource/Mod
import { ModalForm, ProForm, ProFormSelect, 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;
@ -24,8 +25,9 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
return (
<ModalForm<API.ModelImage>
width={proFormModelWidth}
title={intl.formatMessage({
id: 'common.modal.table.create.title',
id: 'resource.model_image.table.list.add',
defaultMessage: '$$$',
})}
open={props.createModalOpen}
@ -51,7 +53,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
>
<ProForm.Group>
<ProFormText
width="md"
width={proFormItemStyleProps.column2Width}
name="name"
label={
<FormattedMessage id="resource.model_image.table.list.name" defaultMessage="$$$" />
@ -77,7 +79,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
]}
/>
<ProFormSelect
width="md"
width={proFormItemStyleProps.column2Width}
name="modelVersionFkId"
label={
<FormattedMessage
@ -108,7 +110,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
}}
/>
<ProFormText
width="md"
width={proFormItemStyleProps.column2Width}
name="path"
label={
<FormattedMessage id="resource.model_image.table.list.path" defaultMessage="$$$" />
@ -123,7 +125,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
required={false}
/>
<ProFormText
width="md"
width={proFormItemStyleProps.column2Width}
name="startCode"
label={
<FormattedMessage id="resource.model_image.table.list.startCode" defaultMessage="$$$" />
@ -138,7 +140,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
required={false}
/>
<ProFormText
width="md"
width={proFormItemStyleProps.column2Width}
name="remark"
label={
<FormattedMessage id="resource.model_image.table.list.remark" defaultMessage="$$$" />

20
src/pages/Resource/ModelImageList/components/UpdateForm.tsx
Unescape Escape View File

@ -9,6 +9,7 @@ import {
} 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;
@ -30,8 +31,9 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
return (
<ModalForm<API.ModelImage>
width={proFormModelWidth}
title={intl.formatMessage({
id: 'common.modal.table.update.title',
id: 'resource.model_image.table.list.update',
defaultMessage: '$$$',
})}
open={props.updateModalOpen}
@ -58,14 +60,14 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
>
<ProForm.Group>
<ProFormText
width="md"
width={proFormItemStyleProps.column2Width}
name="id"
label="id"
disabled={true}
initialValue={props.values.id}
/>
<ProFormText
width="md"
width={proFormItemStyleProps.column2Width}
name="name"
label={
<FormattedMessage id="resource.model_image.table.list.name" defaultMessage="$$$" />
@ -93,7 +95,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
]}
/>
<ProFormSelect
width="md"
width={proFormItemStyleProps.column2Width}
name="modelVersionFkId"
label={
<FormattedMessage
@ -125,7 +127,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
}}
/>
<ProFormText
width="md"
width={proFormItemStyleProps.column2Width}
name="path"
label={
<FormattedMessage id="resource.model_image.table.list.path" defaultMessage="$$$" />
@ -142,7 +144,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={false}
/>
<ProFormText
width="md"
width={proFormItemStyleProps.column2Width}
name="startCode"
label={
<FormattedMessage id="resource.model_image.table.list.startCode" defaultMessage="$$$" />
@ -159,7 +161,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={false}
/>
<ProFormText
width="md"
width={proFormItemStyleProps.column2Width}
name="remark"
label={
<FormattedMessage id="resource.model_image.table.list.remark" defaultMessage="$$$" />
@ -176,7 +178,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={false}
/>
<ProFormDateTimePicker
width="md"
width={proFormItemStyleProps.column2Width}
name="createTime"
label={
<FormattedMessage
@ -196,7 +198,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={true}
/>
<ProFormDateTimePicker
width="md"
width={proFormItemStyleProps.column2Width}
name="updateTime"
label={
<FormattedMessage

9
src/pages/Resource/ModelImageList/index.tsx
Unescape Escape View File

@ -19,7 +19,7 @@ import { PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-componen
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, message } from 'antd';
import React, { useRef, useState } from 'react';
import { proTableCommonOptions } from '../../../../config/defaultTable';
import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
import { ColumnDrawer } from './components/ColumnDrawer';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
@ -43,6 +43,8 @@ const ModelImageList: React.FC = () => {
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
// 动态设置每页数量
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
const [currentRow, setCurrentRow] = useState<API.ModelImage>();
const [selectedRowsState, setSelectedRows] = useState<API.ModelImage[]>([]);
const [model_version_fk_id_open, set_model_version_fk_id_open] = useState(false);
@ -299,8 +301,9 @@ const ModelImageList: React.FC = () => {
setModelVersionFkIdIds(ModelVersionFkIdIds);
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
...proTablePaginationOptions,
pageSize: currentPageSize,
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
}}
columnsState={{
persistenceKey: 'model_image_list',

4
src/pages/Resource/ModelVersionList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -14,12 +14,12 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
<Drawer
width={600}
width={500}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
>
{props.currentRow?.id && (
<ProDescriptions<API.ModelVersion>

6
src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx
Unescape Escape View File

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-16 17:20:17
* @LastEditTime: 2023-11-17 13:16:24
* @FilePath: \general-ai-platform-web\src\pages\Resource\ModelVersionList\components\MyCreateForm.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -289,7 +289,7 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
<ProFormUploadDragger
width={proFormMaxItemStyleProps.width}
max={1}
label={<span style={{ fontWeight: 600 }}>配置文件上传</span>}
label={<span className='h3 gn'>配置文件上传</span>}
value={fileList}
name="dragger"
fieldProps={{
@ -341,7 +341,7 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
{/* // TODO label字重与上面统一, 操作按钮需要与输入框对齐 */}
<ProFormList
name="params"
label="模型参数"
label= {<span className='h3 gn'>模型参数</span>}
actionRef={actionFormListRef}
itemContainerRender={(doms) => {
return <ProForm.Group >{doms}</ProForm.Group>;

Write Preview
Loading…
Cancel
Save