From af32293ebe2fe89a92a11d5fce5dee061ecb862a Mon Sep 17 00:00:00 2001 From: zhoux Date: Fri, 17 Nov 2023 17:03:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E3=80=81=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86=E5=8F=82=E8=80=83?= =?UTF-8?q?UI=E6=95=B4=E4=BD=93=E6=95=88=E6=9E=9C=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/defaultDrawer.ts | 1 + config/defaultForm.ts | 19 +- src/global.css | 22 +- src/global.less | 35 +- src/locales/zh-CN/device.ts | 74 ++- src/locales/zh-CN/project.ts | 4 +- src/locales/zh-CN/resource.ts | 2 + .../components/ColumnDrawer.tsx | 4 +- .../components/ColumnDrawer.tsx | 4 +- .../components/CreateForm.tsx | 215 +++++--- .../components/UpdateForm.tsx | 216 +++++--- src/pages/Device/DeviceCategoryList/index.tsx | 472 +++++++++--------- .../components/ColumnDrawer.tsx | 4 +- .../DeviceGroupList/components/CreateForm.tsx | 358 +++++++++---- .../DeviceGroupList/components/UpdateForm.tsx | 329 +++++++++--- src/pages/Device/DeviceGroupList/index.tsx | 160 +++--- .../DeviceList/components/ColumnDrawer.tsx | 4 +- .../DeviceList/components/CreateForm.tsx | 331 ++++++++---- .../DeviceList/components/UpdateForm.tsx | 327 +++++++++--- src/pages/Device/DeviceList/index.tsx | 241 +++++---- .../components/ColumnDrawer.tsx | 4 +- .../ProjectList/components/ColumnDrawer.tsx | 4 +- .../ProjectList/components/CreateForm.tsx | 248 +++++---- .../ProjectList/components/MyCreateForm.tsx | 49 +- .../ProjectList/components/UpdateForm.tsx | 42 +- src/pages/Project/ProjectList/index.tsx | 130 ++--- .../components/ColumnDrawer.tsx | 4 +- .../Resource/AlgorithmModelList/index.tsx | 2 +- .../components/ColumnDrawer.tsx | 4 +- .../Resource/BusinessImageList/index.tsx | 11 +- .../components/ColumnDrawer.tsx | 4 +- .../components/ColumnDrawer.tsx | 4 +- .../components/CreateForm.tsx | 212 +++++--- .../components/UpdateForm.tsx | 208 +++++--- .../Resource/ModelCategoryList/index.tsx | 9 +- .../components/ColumnDrawer.tsx | 4 +- .../ModelImageList/components/CreateForm.tsx | 14 +- .../ModelImageList/components/UpdateForm.tsx | 20 +- src/pages/Resource/ModelImageList/index.tsx | 9 +- .../components/ColumnDrawer.tsx | 4 +- .../components/MyCreateForm.tsx | 6 +- 41 files changed, 2477 insertions(+), 1337 deletions(-) create mode 100644 config/defaultDrawer.ts diff --git a/config/defaultDrawer.ts b/config/defaultDrawer.ts new file mode 100644 index 0000000..e37bef3 --- /dev/null +++ b/config/defaultDrawer.ts @@ -0,0 +1 @@ +// 待启用 抽屉全局配置 \ No newline at end of file diff --git a/config/defaultForm.ts b/config/defaultForm.ts index d1b3ca3..c9cc94a 100644 --- a/config/defaultForm.ts +++ b/config/defaultForm.ts @@ -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 = { @@ -33,4 +35,17 @@ export const proFormMaxModelWidth: number = 968; export const proFormMaxItemStyleProps: Record = { width: proFormMaxModelWidth - formBoxMargin, column2Width: (proFormMaxModelWidth - formBoxMargin - formItemGap)/2 , // 两列 -}; \ No newline at end of file +}; + + +/**表单具体单项配置 */ + + +// proFormList 新增一项按钮配置 +export const proFormListCreatorButtonProps : { + creatorButtonText?: ReactNode; + position?: 'top' | 'bottom'; +} = { + position: 'bottom', + creatorButtonText: '添加参数字段', // 设置新增一项数据的文案 +} \ No newline at end of file diff --git a/src/global.css b/src/global.css index 68f4d9f..ff89a0f 100644 --- a/src/global.css +++ b/src/global.css @@ -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; +} diff --git a/src/global.less b/src/global.less index e9ce90a..e26224b 100644 --- a/src/global.less +++ b/src/global.less @@ -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 { + + diff --git a/src/locales/zh-CN/device.ts b/src/locales/zh-CN/device.ts index ae5029a..884ecf1 100644 --- a/src/locales/zh-CN/device.ts +++ b/src/locales/zh-CN/device.ts @@ -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': '设备父节点为必填项', +}; diff --git a/src/locales/zh-CN/project.ts b/src/locales/zh-CN/project.ts index ecdfeb6..9fb563d 100644 --- a/src/locales/zh-CN/project.ts +++ b/src/locales/zh-CN/project.ts @@ -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': '更新项目', }; diff --git a/src/locales/zh-CN/resource.ts b/src/locales/zh-CN/resource.ts index 788ed68..b043f40 100644 --- a/src/locales/zh-CN/resource.ts +++ b/src/locales/zh-CN/resource.ts @@ -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': '状态', diff --git a/src/pages/Analysis/ActionDetectionList/components/ColumnDrawer.tsx b/src/pages/Analysis/ActionDetectionList/components/ColumnDrawer.tsx index a26aadd..cfea506 100644 --- a/src/pages/Analysis/ActionDetectionList/components/ColumnDrawer.tsx +++ b/src/pages/Analysis/ActionDetectionList/components/ColumnDrawer.tsx @@ -14,12 +14,12 @@ const ColumnDrawer: React.FC = (props) => { return ( { props.handleDrawer(); }} - closable={false} + closable={true} > {props.currentRow?.id && ( diff --git a/src/pages/Device/DeviceCategoryList/components/ColumnDrawer.tsx b/src/pages/Device/DeviceCategoryList/components/ColumnDrawer.tsx index 4213912..208d446 100644 --- a/src/pages/Device/DeviceCategoryList/components/ColumnDrawer.tsx +++ b/src/pages/Device/DeviceCategoryList/components/ColumnDrawer.tsx @@ -14,12 +14,12 @@ const ColumnDrawer: React.FC = (props) => { return ( { props.handleDrawer(); }} - closable={false} + closable={true} > {props.currentRow?.id && ( diff --git a/src/pages/Device/DeviceCategoryList/components/CreateForm.tsx b/src/pages/Device/DeviceCategoryList/components/CreateForm.tsx index fb6f148..abf8d84 100644 --- a/src/pages/Device/DeviceCategoryList/components/CreateForm.tsx +++ b/src/pages/Device/DeviceCategoryList/components/CreateForm.tsx @@ -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; + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; - export type CreateFormProps = { - createModalOpen: boolean; - handleModal: ()=>void; - values: Partial; - reload: any; - }; +export type CreateFormProps = { + createModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; const CreateForm: React.FC = (props) => { + const intl = useIntl(); + const [isAuto, setIsAuto] = useState(true); + const [form] = Form.useForm(); - const intl = useIntl(); - const [isAuto, setIsAuto] = useState(true); - const [form] = Form.useForm(); - - return ( - - 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 ( + + 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; }} - > - - -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_category.table.list.name', defaultMessage: '$$$'})}`} required={true} - rules={[ - { - required: true, - message: ( - - ), - }, - ]} - /> -} 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: ( - - ), - }, - ]} - addonAfter={} - unCheckedChildren={} - onChange={setIsAuto} - />}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_category.table.list.remark', defaultMessage: '$$$'})}`} required={false}/> - -)} + > + + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_category.table.list.name', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ] + } + addonAfter={ + } + unCheckedChildren={} + onChange={setIsAuto} + /> + } + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_category.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + /> + + + ); +}; export default CreateForm; diff --git a/src/pages/Device/DeviceCategoryList/components/UpdateForm.tsx b/src/pages/Device/DeviceCategoryList/components/UpdateForm.tsx index db1aab4..4be2c5b 100644 --- a/src/pages/Device/DeviceCategoryList/components/UpdateForm.tsx +++ b/src/pages/Device/DeviceCategoryList/components/UpdateForm.tsx @@ -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; + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; - export type UpdateFormProps = { - updateModalOpen: boolean; - handleModal: () => void; - values: Partial; - reload: any; - }; +export type UpdateFormProps = { + updateModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; const UpdateForm: React.FC = (props) => { - const intl = useIntl(); const [form] = Form.useForm(); return ( + 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 = (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; }} > - - - -} 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: ( - - ), - }, - ]} + + + + } + 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: ( + -} 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: ( - - ), - }, - ]} + ), + }, + ]} + /> + + } + 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: ( + -} 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}/> -} 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}/> -} 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}/> - -)} + ), + }, + ]} + /> + + } + 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} + /> + + } + 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} + /> + + } + 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} + /> + + + ); +}; export default UpdateForm; diff --git a/src/pages/Device/DeviceCategoryList/index.tsx b/src/pages/Device/DeviceCategoryList/index.tsx index fd8aecb..2344320 100644 --- a/src/pages/Device/DeviceCategoryList/index.tsx +++ b/src/pages/Device/DeviceCategoryList/index.tsx @@ -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(false); - /** - * @en-US The pop-up window of the distribution update window - * @zh-CN 分布更新窗口的弹窗 - * */ - const [updateModalOpen, setUpdateModalOpen] = useState(false); - const [showDetail, setShowDetail] = useState(false); - /** - * @en-US International configuration - * @zh-CN 国际化配置 - * */ - const access = useAccess(); - const intl = useIntl(); - const actionRef = useRef(); - const [currentRow, setCurrentRow] = useState(); - const [selectedRowsState, setSelectedRows] = useState([]); - - 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[] = [ + /** + * @en-US Pop-up window of new window + * @zh-CN 新建窗口的弹窗 + * */ + const [createModalOpen, setCreateModalOpen] = useState(false); + /** + * @en-US The pop-up window of the distribution update window + * @zh-CN 分布更新窗口的弹窗 + * */ + const [updateModalOpen, setUpdateModalOpen] = useState(false); + const [showDetail, setShowDetail] = useState(false); + /** + * @en-US International configuration + * @zh-CN 国际化配置 + * */ + const access = useAccess(); + const intl = useIntl(); + const actionRef = useRef(); + // 动态设置每页数量 + const [currentPageSize, setCurrentPageSize] = useState(10); + const [currentRow, setCurrentRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + + 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[] = [ { - title: (), - dataIndex: "id", + title: , + dataIndex: 'id', sorter: true, render: (dom, entity) => { return ( @@ -91,199 +95,197 @@ const columns: ProColumns[] = [ }, { - title: (), - dataIndex: "name", - hideInSearch: true, + title: , + dataIndex: 'name', + hideInSearch: true, }, - { - title: (), - dataIndex: "code", - hideInSearch: true, + title: , + dataIndex: 'code', + hideInSearch: true, }, - { - title: (), - dataIndex: "remark", - hideInSearch: true, + title: ( + + ), + dataIndex: 'remark', + hideInSearch: true, }, - { - title: (), - dataIndex: "createTime", - sorter: true, - hideInSearch: true, - valueType: 'dateTime', + title: ( + + ), + dataIndex: 'createTime', + sorter: true, + hideInSearch: true, + valueType: 'dateTime', }, - { - title: (), - dataIndex: "updateTime", - sorter: true, - hideInSearch: true, - valueType: 'dateTime', + title: ( + + ), + dataIndex: 'updateTime', + sorter: true, + hideInSearch: true, + valueType: 'dateTime', }, - - { - title: , - dataIndex: 'option', - valueType: 'option', - fixed:'right', - render: (_, record) => [ - - { - setUpdateModalOpen(true); - setCurrentRow(record); - }} - > - - - { - handleDestroy(record).then(()=>{}) - }}> - , + dataIndex: 'option', + valueType: 'option', + fixed: 'right', + render: (_, record) => [ + { + setUpdateModalOpen(true); + setCurrentRow(record); + }} + > + + + ), + }, + { + key: 'destroy', + renderDom: ( + { + handleDestroy(record).then(() => {}); + }} + > + ), + }, + ]} + >, + ], + }, + ]; + return ( + + + 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 && ( + { + // TODO 需要；联调删除接口 + deleteDeviceCategoryDeleteDeviceCategoryByIds({ + ids: selectedRowsState.map((v: API.DeviceCategory) => { + return v.id as number; + }), + }).then(() => { + actionRef.current?.reloadAndRest?.(); + }); + }} /> - - - ], - },]; -return ( - - - 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={() => [ - - - - - ]} - request={async (params = {}, sort) => { - const {current, ...rest} = params + )} + + ); + }} + toolBarRender={() => [ + + + , + ]} + 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); - }, - }} - /> - {selectedRowsState?.length > 0 && ( - - {' '} - {selectedRowsState.length}{' '} - - - } - > - - - )} - - + }} + columns={columns} + rowSelection={{ + onChange: (_, selectedRows) => { + setSelectedRows(selectedRows); + }, + }} + /> + + + - - - - ); + + + ); }; - export default DeviceCategoryList; +export default DeviceCategoryList; diff --git a/src/pages/Device/DeviceGroupList/components/ColumnDrawer.tsx b/src/pages/Device/DeviceGroupList/components/ColumnDrawer.tsx index 689a776..3a4a93f 100644 --- a/src/pages/Device/DeviceGroupList/components/ColumnDrawer.tsx +++ b/src/pages/Device/DeviceGroupList/components/ColumnDrawer.tsx @@ -14,12 +14,12 @@ const ColumnDrawer: React.FC = (props) => { return ( { props.handleDrawer(); }} - closable={false} + closable={true} > {props.currentRow?.id && ( diff --git a/src/pages/Device/DeviceGroupList/components/CreateForm.tsx b/src/pages/Device/DeviceGroupList/components/CreateForm.tsx index 911786f..23a3b6b 100644 --- a/src/pages/Device/DeviceGroupList/components/CreateForm.tsx +++ b/src/pages/Device/DeviceGroupList/components/CreateForm.tsx @@ -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; + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; - export type CreateFormProps = { - createModalOpen: boolean; - handleModal: ()=>void; - values: Partial; - reload: any; - }; +export type CreateFormProps = { + createModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; const CreateForm: React.FC = (props) => { - - const intl = useIntl(); - const [isAuto, setIsAuto] = useState(true); - const [form] = Form.useForm(); + const intl = useIntl(); + const [isAuto, setIsAuto] = useState(true); + const [form] = Form.useForm(); const [parentId, setParentId] = useState(0); - const [parentSelectOptions, setParentSelectOptions] = useState([{label: '根节点', value: 0}]); + const [parentSelectOptions, setParentSelectOptions] = useState([ + { 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 ( - - 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 ( + + 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; }} - > - - - } - placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.parentFkId', defaultMessage: '$$$'})}`} - request={async () => parentSelectOptions} - /> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.name', defaultMessage: '$$$'})}`} required={true} - rules={[ - { - required: true, - message: ( - - ), - }, - ]} - /> -} 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: ( - - ), - }, - ]} - addonAfter={} - unCheckedChildren={} - onChange={setIsAuto} - />}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.address', defaultMessage: '$$$'})}`} required={false}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.telephone', defaultMessage: '$$$'})}`} required={false}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.lon', defaultMessage: '$$$'})}`} required={false}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.lat', defaultMessage: '$$$'})}`} required={false}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.managerName', defaultMessage: '$$$'})}`} required={false}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.managerPhone', defaultMessage: '$$$'})}`} required={false}/> -} initialValue={true}/> + > + + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_group.table.list.parentFkId', + defaultMessage: '$$$', + })}`} + request={async () => parentSelectOptions} + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_group.table.list.name', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + } + 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: ( + + ), + }, + ] + } + addonAfter={ + } + unCheckedChildren={} + onChange={setIsAuto} + /> + } + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_group.table.list.address', + defaultMessage: '$$$', + })}`} + required={false} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_group.table.list.telephone', + defaultMessage: '$$$', + })}`} + required={false} + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_group.table.list.lon', + defaultMessage: '$$$', + })}`} + required={false} + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_group.table.list.lat', + defaultMessage: '$$$', + })}`} + required={false} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_group.table.list.managerName', + defaultMessage: '$$$', + })}`} + required={false} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_group.table.list.managerPhone', + defaultMessage: '$$$', + })}`} + required={false} + /> + + } + initialValue={true} + /> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.remark', defaultMessage: '$$$'})}`} required={false}/> - -)} + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device_group.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + /> + + + ); +}; export default CreateForm; diff --git a/src/pages/Device/DeviceGroupList/components/UpdateForm.tsx b/src/pages/Device/DeviceGroupList/components/UpdateForm.tsx index 61aae48..e090ff1 100644 --- a/src/pages/Device/DeviceGroupList/components/UpdateForm.tsx +++ b/src/pages/Device/DeviceGroupList/components/UpdateForm.tsx @@ -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; + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; - export type UpdateFormProps = { - updateModalOpen: boolean; - handleModal: () => void; - values: Partial; - reload: any; - }; +export type UpdateFormProps = { + updateModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; const UpdateForm: React.FC = (props) => { - const intl = useIntl(); const [form] = Form.useForm(); return ( + 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 = (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; }} > - - - - {/*} 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} />*/} -} 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: ( - - ), - }, - ]} + + + {/*} 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} />*/} + } + 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: ( + -} 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: ( - - ), - }, - ]} + ), + }, + ]} + /> + } + 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: ( + -} 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}/> -} 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}/> -} 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}/> -} 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}/> -} 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}/> -} 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}/> -} initialValue={props.values.isEnable} disabled={false}/> + ), + }, + ]} + /> + + } + 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} + /> + + } + 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} + /> + } + 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} + /> + } + 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} + /> + + } + 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} + /> + + } + 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} + /> + + } + initialValue={props.values.isEnable} + disabled={false} + /> -} 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}/> -} 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}/> -} 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}/> - -)} + + } + 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} + /> + + } + 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} + /> + + } + 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} + /> + + + ); +}; export default UpdateForm; diff --git a/src/pages/Device/DeviceGroupList/index.tsx b/src/pages/Device/DeviceGroupList/index.tsx index f8ecf57..dc98640 100644 --- a/src/pages/Device/DeviceGroupList/index.tsx +++ b/src/pages/Device/DeviceGroupList/index.tsx @@ -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(); + // 动态设置每页数量 + const [currentPageSize, setCurrentPageSize] = useState(10); const [currentRow, setCurrentRow] = useState(); const [selectedRowsState, setSelectedRows] = useState([]); @@ -99,9 +105,10 @@ const DeviceGroupList: React.FC = () => { }; const columns: ProColumns[] = [ + // TODO 确认是否需要和一级内容对齐 { - title: , - dataIndex: 'id', + title: , + dataIndex: 'name', sorter: true, render: (dom, entity) => { return ( @@ -115,14 +122,9 @@ const DeviceGroupList: React.FC = () => { ); }, + key: 'fixedName', + fixed: 'left', }, - - { - title: , - dataIndex: 'name', - hideInSearch: true, - }, - { title: , dataIndex: 'code', @@ -154,7 +156,6 @@ const DeviceGroupList: React.FC = () => { dataIndex: 'lat', hideInSearch: true, }, - { title: ( @@ -246,37 +247,54 @@ const DeviceGroupList: React.FC = () => { valueType: 'option', fixed: 'right', render: (_, record) => [ - - { - setCreateModalOpen(true); - setCurrentRow(record); - }} - > - - - { - setUpdateModalOpen(true); - setCurrentRow(record); - }} - > - - - { - handleDestroy(record).then(() => {}); - }} - > - - - , + { + setCreateModalOpen(true); + setCurrentRow(record); + // setShowDetail(true); + }} + > + + + ), + }, + { + key: 'update', + renderDom: ( + + ), + }, + { + key: 'destroy', + renderDom: ( + { + handleDestroy(record).then(() => {}); + }} + > + ), + }, + ]} + >, ], }, ]; @@ -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 && ( + { + // TODO 需联调批量删除接口 + deleteDeviceGroupDeleteDeviceGroupByIds({ + ids: selectedRowsState.map((v: API.DeviceGroup) => { + return v.id as number; + }), + }).then(() => { + actionRef.current?.reloadAndRest?.(); + }); + }} + /> + )} + + ); + }} toolBarRender={() => [ { onChange: (_, selectedRows) => { setSelectedRows(selectedRows); }, + checkStrictly: false }} /> - {selectedRowsState?.length > 0 && ( - - {' '} - {selectedRowsState.length}{' '} - - - } - > - - - )} = (props) => { return ( { props.handleDrawer(); }} - closable={false} + closable={true} > {props.currentRow?.id && ( diff --git a/src/pages/Device/DeviceList/components/CreateForm.tsx b/src/pages/Device/DeviceList/components/CreateForm.tsx index 1d193d7..f7d05be 100644 --- a/src/pages/Device/DeviceList/components/CreateForm.tsx +++ b/src/pages/Device/DeviceList/components/CreateForm.tsx @@ -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; + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; - export type CreateFormProps = { - createModalOpen: boolean; - handleModal: ()=>void; - values: Partial; - reload: any; - }; +export type CreateFormProps = { + createModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; const CreateForm: React.FC = (props) => { + const intl = useIntl(); + const [isAuto, setIsAuto] = useState(true); + const [form] = Form.useForm(); - const intl = useIntl(); - const [isAuto, setIsAuto] = useState(true); - const [form] = Form.useForm(); - - return ( - - 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 ( + + 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; }} - > - - -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.name', defaultMessage: '$$$'})}`} required={true} - rules={[ - { - required: true, - message: ( - - ), - }, - ]} - /> -} 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: ( - - ), - }, - ]} - addonAfter={} - unCheckedChildren={} - onChange={setIsAuto} - />}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.position', defaultMessage: '$$$'})}`} required={false}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.param', defaultMessage: '$$$'})}`} required={false}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.spec', defaultMessage: '$$$'})}`} required={false}/> -} 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 - } - }) - } - }/> -} 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 - } - }) - } - }/> -} initialValue={true}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device.table.list.remark', defaultMessage: '$$$'})}`} required={false}/> - -)} + > + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ id: 'device.device.table.list.name', defaultMessage: '$$$' })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + } + 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, + }; + }); + }} + /> + } + 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: ( + + ), + }, + ] + } + addonAfter={ + } + unCheckedChildren={} + onChange={setIsAuto} + /> + } + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device.table.list.position', + defaultMessage: '$$$', + })}`} + required={false} + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device.table.list.param', + defaultMessage: '$$$', + })}`} + required={false} + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ id: 'device.device.table.list.spec', defaultMessage: '$$$' })}`} + required={false} + /> + + } + 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, + }; + }); + }} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'device.device.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + /> + } + initialValue={true} + /> + + + ); +}; export default CreateForm; diff --git a/src/pages/Device/DeviceList/components/UpdateForm.tsx b/src/pages/Device/DeviceList/components/UpdateForm.tsx index f733123..48ad28e 100644 --- a/src/pages/Device/DeviceList/components/UpdateForm.tsx +++ b/src/pages/Device/DeviceList/components/UpdateForm.tsx @@ -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; + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; - export type UpdateFormProps = { - updateModalOpen: boolean; - handleModal: () => void; - values: Partial; - reload: any; - }; +export type UpdateFormProps = { + updateModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; const UpdateForm: React.FC = (props) => { - const intl = useIntl(); const [form] = Form.useForm(); return ( + 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 = (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; }} > - - - -} 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: ( - - ), - }, - ]} + + + } + 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: ( + -} 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: ( - - ), - }, - ]} + ), + }, + ]} + /> + } + 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: ( + -} 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}/> -} 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}/> -} 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}/> -} 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 - } - }) - } - }/> -} 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 - } - }) - } - }/> -} initialValue={props.values.isEnable} disabled={false}/> -} 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}/> -} 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}/> -} 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}/> - -)} + ), + }, + ]} + /> + } + 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} + /> + } + 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} + /> + } + 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} + /> + + } + 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, + }; + }); + }} + /> + } + 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, + }; + }); + }} + /> + + } + 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} + /> + } + initialValue={props.values.isEnable} + disabled={false} + /> + } + 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} + /> + } + 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} + /> + + + ); +}; export default UpdateForm; diff --git a/src/pages/Device/DeviceList/index.tsx b/src/pages/Device/DeviceList/index.tsx index 043c11a..a04a9a0 100644 --- a/src/pages/Device/DeviceList/index.tsx +++ b/src/pages/Device/DeviceList/index.tsx @@ -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(); + // 动态设置每页数量 + const [currentPageSize, setCurrentPageSize] = useState(10); const [currentRow, setCurrentRow] = useState(); const [selectedRowsState, setSelectedRows] = useState([]); const [category_fk_id_open, set_category_fk_id_open] = useState(false); @@ -194,8 +199,9 @@ const DeviceList: React.FC = () => { const columns: ProColumns[] = [ { - title: , - dataIndex: 'id', + title: , + 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: , - dataIndex: 'name', - hideInSearch: true, - }, + // { + // title: , + // dataIndex: 'name', + // hideInSearch: true, + // }, { title: , @@ -408,81 +416,97 @@ const DeviceList: React.FC = () => { dataIndex: 'option', valueType: 'option', fixed: 'right', - width: 250, + width: 160, render: (_, record) => [ - - - { - handleDestroy(record).then(() => {}); - }} - > - - - - , + }} + > + + + ), + }, + { + key: 'destroy', + renderDom: ( + { + handleDestroy(record).then(() => {}); + }} + > + ), + }, + { + key: 'video', + renderDom: ( + + ), + }, + ]} + >, ], }, ]; return ( - + + {/* bodyStyle={{padding: 0, margin: 0}} */} } @@ -505,10 +529,16 @@ const DeviceList: React.FC = () => { setSelectNodes(selectKeys); actionRef.current?.reload(); }} + checkStrictly={false} /> )} - + 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 && ( + { + // TODO 需联调批量删除接口 + deleteDeviceDeleteDeviceByIds({ + ids: selectedRowsState.map((v: API.Device) => { + return v.id as number; + }), + }).then(() => { + actionRef.current?.reloadAndRest?.(); + }); + }} + /> + )} + + ); + }} toolBarRender={() => [ { }, }} /> - {selectedRowsState?.length > 0 && ( - - {' '} - {selectedRowsState.length}{' '} - - - } - > - - - )} = (props) => { return ( { props.handleDrawer(); }} - closable={false} + closable={true} > {props.currentRow?.id && ( diff --git a/src/pages/Project/ProjectList/components/ColumnDrawer.tsx b/src/pages/Project/ProjectList/components/ColumnDrawer.tsx index fbf616c..727e160 100644 --- a/src/pages/Project/ProjectList/components/ColumnDrawer.tsx +++ b/src/pages/Project/ProjectList/components/ColumnDrawer.tsx @@ -14,12 +14,12 @@ const ColumnDrawer: React.FC = (props) => { return ( { props.handleDrawer(); }} - closable={false} + closable={true} > {props.currentRow?.id && ( diff --git a/src/pages/Project/ProjectList/components/CreateForm.tsx b/src/pages/Project/ProjectList/components/CreateForm.tsx index 3c7e7e1..1ee2d7f 100644 --- a/src/pages/Project/ProjectList/components/CreateForm.tsx +++ b/src/pages/Project/ProjectList/components/CreateForm.tsx @@ -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; + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; - export type CreateFormProps = { - createModalOpen: boolean; - handleModal: ()=>void; - values: Partial; - reload: any; - }; +export type CreateFormProps = { + createModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; const CreateForm: React.FC = (props) => { + const intl = useIntl(); + const [isAuto, setIsAuto] = useState(true); + const [form] = Form.useForm(); - const intl = useIntl(); - const [isAuto, setIsAuto] = useState(true); - const [form] = Form.useForm(); - - return ( - - 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 ( + + 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; }} - > - - -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.name', defaultMessage: '$$$'})}`} required={true} - rules={[ - { - required: true, - message: ( - - ), - }, - ]} - /> -} 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: ( - - ), - }, - ]} - addonAfter={} - unCheckedChildren={} - onChange={setIsAuto} - />}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.info', defaultMessage: '$$$'})}`} required={true} - rules={[ - { - required: true, - message: ( - - ), - }, - ]} - /> -} initialValue={true}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.remark', defaultMessage: '$$$'})}`} required={false}/> - -)} + > + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.name', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + } + 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: ( + + ), + }, + ] + } + addonAfter={ + } + unCheckedChildren={} + onChange={setIsAuto} + /> + } + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.info', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + } + initialValue={true} + /> + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'project.project.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + /> + + + ); +}; export default CreateForm; diff --git a/src/pages/Project/ProjectList/components/MyCreateForm.tsx b/src/pages/Project/ProjectList/components/MyCreateForm.tsx index cc87549..48d3cea 100644 --- a/src/pages/Project/ProjectList/components/MyCreateForm.tsx +++ b/src/pages/Project/ProjectList/components/MyCreateForm.tsx @@ -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 = (props) => { stepsFormRender={(dom, submitter) => { return ( { setCurrent(0); setFileList([]); @@ -219,7 +222,7 @@ const MyCreateForm: React.FC = (props) => { > } placeholder={`${intl.formatMessage({ @@ -242,8 +245,9 @@ const MyCreateForm: React.FC = (props) => { }, ]} /> + } placeholder={`${intl.formatMessage({ @@ -273,6 +277,7 @@ const MyCreateForm: React.FC = (props) => { } addonAfter={ } unCheckedChildren={} @@ -281,7 +286,7 @@ const MyCreateForm: React.FC = (props) => { } /> } placeholder={`${intl.formatMessage({ @@ -305,7 +310,7 @@ const MyCreateForm: React.FC = (props) => { ]} /> @@ -319,16 +324,16 @@ const MyCreateForm: React.FC = (props) => { })}`} required={false} /> - - - - } - initialValue={true} - /> + + + } + initialValue={true} + /> + {/* 关联算法模型 */} @@ -354,7 +359,7 @@ const MyCreateForm: React.FC = (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} /> @@ -377,7 +382,7 @@ const MyCreateForm: React.FC = (props) => { }} > 上传文件} name="projectFilePath" action="/api/v1/file/uploadFile" max={1} @@ -411,7 +416,7 @@ const MyCreateForm: React.FC = (props) => { 配置文件上传} value={fileList} name="dragger" fieldProps={{ @@ -472,7 +477,8 @@ const MyCreateForm: React.FC = (props) => { Icon: CloseOutlined, }} name="params" - label="模型参数" + label= {模型参数} + creatorButtonProps={proFormListCreatorButtonProps} > {(f, index, action) => { return ( @@ -503,7 +509,6 @@ const MyCreateForm: React.FC = (props) => { stepProps={{ description: '选择网点', }} - onFinish={async () => { return true; }} diff --git a/src/pages/Project/ProjectList/components/UpdateForm.tsx b/src/pages/Project/ProjectList/components/UpdateForm.tsx index 54f8e2c..741077c 100644 --- a/src/pages/Project/ProjectList/components/UpdateForm.tsx +++ b/src/pages/Project/ProjectList/components/UpdateForm.tsx @@ -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 = { - width: formContainerWidth, -}; + const UpdateForm: React.FC = (props) => { const intl = useIntl(); @@ -37,9 +34,9 @@ const UpdateForm: React.FC = (props) => { return ( - 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 = (props) => { > } placeholder={`${intl.formatMessage({ @@ -99,7 +96,7 @@ const UpdateForm: React.FC = (props) => { ]} /> } placeholder={`${intl.formatMessage({ @@ -125,7 +122,7 @@ const UpdateForm: React.FC = (props) => { ]} /> } placeholder={`${intl.formatMessage({ @@ -150,15 +147,9 @@ const UpdateForm: React.FC = (props) => { }, ]} /> - } - initialValue={props.values.isEnable} - disabled={false} - /> + {/* } @@ -172,7 +163,7 @@ const UpdateForm: React.FC = (props) => { 启用此项目 */} } placeholder={`${intl.formatMessage({ @@ -185,9 +176,16 @@ const UpdateForm: React.FC = (props) => { required={false} initialValue={props.values.remark} disabled={false} + /> + } + initialValue={props.values.isEnable} + disabled={false} /> @@ -204,7 +202,7 @@ const UpdateForm: React.FC = (props) => { disabled={true} /> diff --git a/src/pages/Project/ProjectList/index.tsx b/src/pages/Project/ProjectList/index.tsx index 41203b1..ac055e2 100644 --- a/src/pages/Project/ProjectList/index.tsx +++ b/src/pages/Project/ProjectList/index.tsx @@ -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(); + // 动态设置每页数量 + const [currentPageSize, setCurrentPageSize] = useState(10); const [currentRow, setCurrentRow] = useState(); const [selectedRowsState, setSelectedRows] = useState([]); @@ -72,8 +78,8 @@ const ProjectList: React.FC = () => { const columns: ProColumns[] = [ { - title: , - dataIndex: 'id', + title: , + dataIndex: 'name', sorter: true, render: (dom, entity) => { return ( @@ -87,14 +93,9 @@ const ProjectList: React.FC = () => { ); }, + key: 'fixedName', + fixed: 'left', }, - - { - title: , - dataIndex: 'name', - hideInSearch: true, - }, - { title: , dataIndex: 'code', @@ -158,28 +159,37 @@ const ProjectList: React.FC = () => { valueType: 'option', fixed: 'right', render: (_, record) => [ - - { - setUpdateModalOpen(true); - setCurrentRow(record); - }} - > - - - { - handleDestroy(record).then(() => {}); - }} - > - - - , + { + setUpdateModalOpen(true); + setCurrentRow(record); + }} + > + + + ), + }, + { + key: 'destroy', + renderDom: ( + { + handleDestroy(record).then(() => {}); + }} + > + ), + }, + ]} + >, ], }, ]; @@ -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 && ( + { + // TODO 需要；联调删除接口 + deleteProjectDeleteProjectByIds({ + ids: selectedRowsState.map((v: API.Project) => { + return v.id as number; + }), + }).then(() => { + actionRef.current?.reloadAndRest?.(); + }); + }} + /> + )} + + ); + }} toolBarRender={() => [ { }, }} /> - {selectedRowsState?.length > 0 && ( - - {' '} - {selectedRowsState.length}{' '} - - - } - > - - - )} = (props) => { return ( { props.handleDrawer(); }} - closable={false} + closable={true} extra={ <>123 } diff --git a/src/pages/Resource/AlgorithmModelList/index.tsx b/src/pages/Resource/AlgorithmModelList/index.tsx index aa9b448..b711ca8 100644 --- a/src/pages/Resource/AlgorithmModelList/index.tsx +++ b/src/pages/Resource/AlgorithmModelList/index.tsx @@ -43,7 +43,7 @@ const AlgorithmModelList: React.FC = () => { const access = useAccess(); const intl = useIntl(); const actionRef = useRef(); - // TODO 动态设置每页数量 + // 动态设置每页数量 const [currentPageSize, setCurrentPageSize] = useState(10); const [currentRow, setCurrentRow] = useState(); const [selectedRowsState, setSelectedRows] = useState([]); diff --git a/src/pages/Resource/BusinessImageList/components/ColumnDrawer.tsx b/src/pages/Resource/BusinessImageList/components/ColumnDrawer.tsx index b11cda2..f8ecb14 100644 --- a/src/pages/Resource/BusinessImageList/components/ColumnDrawer.tsx +++ b/src/pages/Resource/BusinessImageList/components/ColumnDrawer.tsx @@ -14,12 +14,12 @@ const ColumnDrawer: React.FC = (props) => { return ( { props.handleDrawer(); }} - closable={false} + closable={true} > {props.currentRow?.id && ( diff --git a/src/pages/Resource/BusinessImageList/index.tsx b/src/pages/Resource/BusinessImageList/index.tsx index 2e3c710..4484d4e 100644 --- a/src/pages/Resource/BusinessImageList/index.tsx +++ b/src/pages/Resource/BusinessImageList/index.tsx @@ -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(); + // 动态设置每页数量 + const [currentPageSize, setCurrentPageSize] = useState(10); const [currentRow, setCurrentRow] = useState(); const [selectedRowsState, setSelectedRows] = useState([]); 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', diff --git a/src/pages/Resource/ContainerImageList/components/ColumnDrawer.tsx b/src/pages/Resource/ContainerImageList/components/ColumnDrawer.tsx index d7e4184..de09603 100644 --- a/src/pages/Resource/ContainerImageList/components/ColumnDrawer.tsx +++ b/src/pages/Resource/ContainerImageList/components/ColumnDrawer.tsx @@ -14,12 +14,12 @@ const ColumnDrawer: React.FC = (props) => { return ( { props.handleDrawer(); }} - closable={false} + closable={true} > {props.currentRow?.id && ( diff --git a/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx b/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx index 6ee4b9d..c25b447 100644 --- a/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx +++ b/src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx @@ -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 = (props) => { return ( { props.handleDrawer(); diff --git a/src/pages/Resource/ModelCategoryList/components/CreateForm.tsx b/src/pages/Resource/ModelCategoryList/components/CreateForm.tsx index 6b9f96f..ef2dd34 100644 --- a/src/pages/Resource/ModelCategoryList/components/CreateForm.tsx +++ b/src/pages/Resource/ModelCategoryList/components/CreateForm.tsx @@ -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; + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; - export type CreateFormProps = { - createModalOpen: boolean; - handleModal: ()=>void; - values: Partial; - reload: any; - }; +export type CreateFormProps = { + createModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; const CreateForm: React.FC = (props) => { + const intl = useIntl(); + const [isAuto, setIsAuto] = useState(true); + const [form] = Form.useForm(); - const intl = useIntl(); - const [isAuto, setIsAuto] = useState(true); - const [form] = Form.useForm(); - - return ( - - 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 ( + + 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; }} - > - - -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.name', defaultMessage: '$$$'})}`} required={true} - rules={[ - { - required: true, - message: ( - - ), - }, - ]} - /> -} 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: ( - - ), - }, - ]} - addonAfter={} - unCheckedChildren={} - onChange={setIsAuto} - />}/> -} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.remark', defaultMessage: '$$$'})}`} required={false}/> - -)} + > + + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'resource.model_category.table.list.name', + defaultMessage: '$$$', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ] + } + addonAfter={ + } + unCheckedChildren={} + onChange={setIsAuto} + /> + } + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '$$$', + })}${intl.formatMessage({ + id: 'resource.model_category.table.list.remark', + defaultMessage: '$$$', + })}`} + required={false} + /> + + + ); +}; export default CreateForm; diff --git a/src/pages/Resource/ModelCategoryList/components/UpdateForm.tsx b/src/pages/Resource/ModelCategoryList/components/UpdateForm.tsx index 79346fc..b7a2886 100644 --- a/src/pages/Resource/ModelCategoryList/components/UpdateForm.tsx +++ b/src/pages/Resource/ModelCategoryList/components/UpdateForm.tsx @@ -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; + target?: string; + template?: string; + type?: string; + time?: string; + frequency?: string; +} & Partial; - export type UpdateFormProps = { - updateModalOpen: boolean; - handleModal: () => void; - values: Partial; - reload: any; - }; +export type UpdateFormProps = { + updateModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; const UpdateForm: React.FC = (props) => { - const intl = useIntl(); const [form] = Form.useForm(); return ( + 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 = (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; }} > - - - -} 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: ( - - ), - }, - ]} + + + + } + 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: ( + -} 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: ( - - ), - }, - ]} + ), + }, + ]} + /> + + } + 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: ( + -} 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}/> -} 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}/> -} 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}/> - -)} + ), + }, + ]} + /> + + } + 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} + /> + + } + 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} + /> + + } + 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} + /> + + + ); +}; export default UpdateForm; diff --git a/src/pages/Resource/ModelCategoryList/index.tsx b/src/pages/Resource/ModelCategoryList/index.tsx index 478d0ab..a564582 100644 --- a/src/pages/Resource/ModelCategoryList/index.tsx +++ b/src/pages/Resource/ModelCategoryList/index.tsx @@ -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(); + // 动态设置每页数量 + const [currentPageSize, setCurrentPageSize] = useState(10); const [currentRow, setCurrentRow] = useState(); const [selectedRowsState, setSelectedRows] = useState([]); @@ -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', diff --git a/src/pages/Resource/ModelImageList/components/ColumnDrawer.tsx b/src/pages/Resource/ModelImageList/components/ColumnDrawer.tsx index 9aec9ae..ed055ec 100644 --- a/src/pages/Resource/ModelImageList/components/ColumnDrawer.tsx +++ b/src/pages/Resource/ModelImageList/components/ColumnDrawer.tsx @@ -14,12 +14,12 @@ const ColumnDrawer: React.FC = (props) => { return ( { props.handleDrawer(); }} - closable={false} + closable={true} > {props.currentRow?.id && ( diff --git a/src/pages/Resource/ModelImageList/components/CreateForm.tsx b/src/pages/Resource/ModelImageList/components/CreateForm.tsx index e085744..759f2b0 100644 --- a/src/pages/Resource/ModelImageList/components/CreateForm.tsx +++ b/src/pages/Resource/ModelImageList/components/CreateForm.tsx @@ -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 = (props) => { return ( + 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 = (props) => { > @@ -77,7 +79,7 @@ const CreateForm: React.FC = (props) => { ]} /> = (props) => { }} /> @@ -123,7 +125,7 @@ const CreateForm: React.FC = (props) => { required={false} /> @@ -138,7 +140,7 @@ const CreateForm: React.FC = (props) => { required={false} /> diff --git a/src/pages/Resource/ModelImageList/components/UpdateForm.tsx b/src/pages/Resource/ModelImageList/components/UpdateForm.tsx index ee2d4ea..bdc2bbc 100644 --- a/src/pages/Resource/ModelImageList/components/UpdateForm.tsx +++ b/src/pages/Resource/ModelImageList/components/UpdateForm.tsx @@ -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 = (props) => { return ( + 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 = (props) => { > @@ -93,7 +95,7 @@ const UpdateForm: React.FC = (props) => { ]} /> = (props) => { }} /> @@ -142,7 +144,7 @@ const UpdateForm: React.FC = (props) => { disabled={false} /> @@ -159,7 +161,7 @@ const UpdateForm: React.FC = (props) => { disabled={false} /> @@ -176,7 +178,7 @@ const UpdateForm: React.FC = (props) => { disabled={false} /> = (props) => { disabled={true} /> { const access = useAccess(); const intl = useIntl(); const actionRef = useRef(); + // 动态设置每页数量 + const [currentPageSize, setCurrentPageSize] = useState(10); const [currentRow, setCurrentRow] = useState(); const [selectedRowsState, setSelectedRows] = useState([]); 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', diff --git a/src/pages/Resource/ModelVersionList/components/ColumnDrawer.tsx b/src/pages/Resource/ModelVersionList/components/ColumnDrawer.tsx index 895720f..d103038 100644 --- a/src/pages/Resource/ModelVersionList/components/ColumnDrawer.tsx +++ b/src/pages/Resource/ModelVersionList/components/ColumnDrawer.tsx @@ -14,12 +14,12 @@ const ColumnDrawer: React.FC = (props) => { return ( { props.handleDrawer(); }} - closable={false} + closable={true} > {props.currentRow?.id && ( diff --git a/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx b/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx index 31dd368..046b3b6 100644 --- a/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx +++ b/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx @@ -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 = (props) => { 配置文件上传} + label={配置文件上传} value={fileList} name="dragger" fieldProps={{ @@ -341,7 +341,7 @@ const MyCreateForm: React.FC = (props) => { {/* // TODO label字重与上面统一, 操作按钮需要与输入框对齐 */} 模型参数} actionRef={actionFormListRef} itemContainerRender={(doms) => { return {doms};