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

config/defaultDrawer.ts

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

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<string,any> = {
@@ -34,3 +36,16 @@ export const proFormMaxItemStyleProps: Record<string, any> = {
   width: proFormMaxModelWidth - formBoxMargin,
   column2Width: (proFormMaxModelWidth - formBoxMargin - formItemGap)/2 , // 两列
 };
+
+
+/**表单具体单项配置 */
+
+
+// proFormList 新增一项按钮配置
+export const proFormListCreatorButtonProps : {
+  creatorButtonText?: ReactNode;
+  position?: 'top' | 'bottom';
+} = {
+  position: 'bottom',
+  creatorButtonText: '添加参数字段', // 设置新增一项数据的文案
+}

src/global.css

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

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
+.ant-modal .ant-modal-title{
-
+  font-size: 18px;
-.flex-cc{
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
-.flex-ac{
+/* 列表table */
-  display: flex;
+// 控制proTable 标题栏左侧文字最大弹性占比
-  align-items: center;
+.ant-pro-table-list-toolbar-left{
-  justify-content: space-around;
+  flex: 0.3
-}
-
-.w100{
-  width: 100%;
 }
 
 
 /* UI 规范表 // TODO 11-17启动 
 */
+
 .gn {
-  .p1 {
+  // &.p1 {
-    // line-height: ;
+  //   // line-height: ;
+  //   font-weight: 600;
+  // }
+  &.h2{
+    font-size: 18;
+  }
+
+  &.h3{
+    font-weight: 600;
   }
 }
 // .p1{
@@ -201,3 +202,5 @@ ol {
 
 
 
+
+

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': '类别代码为必填项'}
+ * @Author: zhoux zhouxia@supervision.ltd
-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': '父节点为必填项'}
+ * @Date: 2023-11-01 13:56:33
-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': '设备父节点为必填项'}
+ * @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': '设备父节点为必填项',
+};

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': '更新项目',
 };

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': '状态',

src/pages/Analysis/ActionDetectionList/components/ColumnDrawer.tsx

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

src/pages/Device/DeviceCategoryList/components/ColumnDrawer.tsx

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

src/pages/Device/DeviceCategoryList/components/CreateForm.tsx

@@ -1,33 +1,36 @@
-import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';
+import { postDeviceCategoryCreateDeviceCategory } from '@/services/device/DeviceCategory';
-import {FormattedMessage, useIntl} from '@umijs/max';
+import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components';
-import {postDeviceCategoryCreateDeviceCategory} from "@/services/device/DeviceCategory";
+import { FormattedMessage, useIntl } from '@umijs/max';
-import React, {useState} from 'react';
+import { Form, Switch, message } from 'antd';
-import {Button, Form, message} from 'antd';
+import React, { useState } from 'react';
-import {Switch} from 'antd';
+import {
+  proFormSmallItemStyleProps,
+  proFormSmallModelWidth,
+} from '../../../../../config/defaultForm';
 export type FormValueType = {
   target?: string;
   template?: string;
   type?: string;
   time?: string;
   frequency?: string;
-      } & Partial<API.DeviceCategory>;
+} & Partial<API.DeviceCategory>;
 
-      export type CreateFormProps = {
+export type CreateFormProps = {
   createModalOpen: boolean;
-        handleModal: ()=>void;
+  handleModal: () => void;
   values: Partial<API.DeviceCategory>;
   reload: any;
-      };
+};
 const CreateForm: React.FC<CreateFormProps> = (props) => {
-
   const intl = useIntl();
   const [isAuto, setIsAuto] = useState(true);
   const [form] = Form.useForm<API.DeviceCategory>();
 
   return (
     <ModalForm<API.DeviceCategory>
+      width={proFormSmallModelWidth}
       title={intl.formatMessage({
-          id: 'common.modal.table.create.title',
+        id: 'device.device_category.table.list.add',
         defaultMessage: '$$$',
       })}
       open={props.createModalOpen}
@@ -39,19 +42,33 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
       }}
       submitTimeout={2000}
       onFinish={async (values) => {
-        postDeviceCategoryCreateDeviceCategory(values).then(()=>{
+        postDeviceCategoryCreateDeviceCategory(values)
-          message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
+          .then(() => {
-          props.reload()
+            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
-        }).catch(()=>{
+            props.reload();
-          message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
           })
+          .catch(() => {
+            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+          });
         props.handleModal();
         return true;
       }}
     >
-      
+      <ProForm.Group>
-<ProForm.Group>
+        <ProFormText
-<ProFormText width="md" name="name" label={<FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_category.table.list.name', defaultMessage: '$$$'})}`} required={true}
+          width={proFormSmallItemStyleProps.width}
+          name="name"
+          label={
+            <FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.name',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
           rules={[
             {
               required: true,
@@ -64,8 +81,26 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
             },
           ]}
         />
-<ProFormText width="md" name="code" label={<FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_category.table.list.code', defaultMessage: '$$$'})}`} required={!isAuto} initialValue='' disabled={isAuto}
+        <ProFormText
-                                                      rules={isAuto?[]:[
+          width="lg"
+          name="code"
+          label={
+            <FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.code',
+            defaultMessage: '$$$',
+          })}`}
+          required={!isAuto}
+          initialValue=""
+          disabled={isAuto}
+          rules={
+            isAuto
+              ? []
+              : [
                   {
                     required: true,
                     message: (
@@ -75,14 +110,34 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
                       />
                     ),
                   },
-                                                    ]}
+                ]
-                                                   addonAfter={<Switch
+          }
+          addonAfter={
+            <Switch
               checked={isAuto}
-                  checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$"/>}
+              checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
-                  unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$"/>}
+              unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
               onChange={setIsAuto}
-                />}/>
+            />
-<ProFormText width="md" name="remark" label={<FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_category.table.list.remark', defaultMessage: '$$$'})}`} required={false}/>
+          }
-</ProForm.Group>
+        />
-</ModalForm>)}
+        <ProFormText
+          width={proFormSmallItemStyleProps.width}
+          name="remark"
+          label={
+            <FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.remark',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+      </ProForm.Group>
+    </ModalForm>
+  );
+};
 export default CreateForm;

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';
+ * @Author: zhoux zhouxia@supervision.ltd
-import {putDeviceCategoryUpdateDeviceCategory} from "@/services/device/DeviceCategory";
+ * @Date: 2023-11-01 13:56:33
-import React, {useState} from 'react';
+ * @LastEditors: zhoux zhouxia@supervision.ltd
-import {Button, Form, message} from 'antd';
+ * @LastEditTime: 2023-11-17 10:12:53
+ * @FilePath: \general-ai-platform-web\src\pages\Device\DeviceCategoryList\components\UpdateForm.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory';
+import { ModalForm, ProForm, ProFormDateTimePicker, ProFormText } from '@ant-design/pro-components';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Form, message } from 'antd';
+import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
+import React from 'react';
 export type FormValueType = {
   target?: string;
   template?: string;
   type?: string;
   time?: string;
   frequency?: string;
-    } & Partial<API.DeviceCategory>;
+} & Partial<API.DeviceCategory>;
 
-    export type UpdateFormProps = {
+export type UpdateFormProps = {
   updateModalOpen: boolean;
   handleModal: () => void;
   values: Partial<API.DeviceCategory>;
   reload: any;
-    };
+};
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
-
   const intl = useIntl();
   const [form] = Form.useForm<API.DeviceCategory>();
 
   return (
     <ModalForm<API.DeviceCategory>
+    width={proFormModelWidth}
       title={intl.formatMessage({
-        id: 'common.modal.table.update.title',
+        id: 'device.device_category.table.list.update',
         defaultMessage: '$$$',
       })}
       open={props.updateModalOpen}
@@ -37,21 +46,43 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
       }}
       submitTimeout={2000}
       onFinish={async (values) => {
-        putDeviceCategoryUpdateDeviceCategory(values).then(()=>{
+        putDeviceCategoryUpdateDeviceCategory(values)
-          message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
+          .then(() => {
-          props.reload()
+            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
-        }).catch(()=>{
+            props.reload();
-          message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
           })
+          .catch(() => {
+            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+          });
 
         props.handleModal();
         return true;
       }}
     >
-    
+      <ProForm.Group>
-<ProForm.Group>
+        <ProFormText
-<ProFormText width="md" name="id" label="id" disabled={true} initialValue={props.values.id}/>
+          width={proFormItemStyleProps.column2Width}
-<ProFormText width="md" name="name" label={<FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_category.table.list.name', defaultMessage: '$$$'})}`} required={true} initialValue={props.values.name} disabled={false}
+          name="id"
+          label="id"
+          disabled={true}
+          initialValue={props.values.id}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="name"
+          label={
+            <FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.name',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
+          initialValue={props.values.name}
+          disabled={false}
           rules={[
             {
               required: true,
@@ -64,7 +95,22 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
             },
           ]}
         />
-<ProFormText width="md" name="code" label={<FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_category.table.list.code', defaultMessage: '$$$'})}`} required={true} initialValue={props.values.code} disabled={false}
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="code"
+          label={
+            <FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.code',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
+          initialValue={props.values.code}
+          disabled={false}
           rules={[
             {
               required: true,
@@ -77,9 +123,65 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
             },
           ]}
         />
-<ProFormText width="md" name="remark" label={<FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_category.table.list.remark', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.remark} disabled={false}/>
+        <ProFormText
-<ProFormDateTimePicker width="md" name="createTime" label={<FormattedMessage id="device.device_category.table.list.createTime" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_category.table.list.createTime', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.createTime} disabled={true}/>
+          width={proFormItemStyleProps.column2Width}
-<ProFormDateTimePicker width="md" name="updateTime" label={<FormattedMessage id="device.device_category.table.list.updateTime" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_category.table.list.updateTime', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.updateTime} disabled={true}/>
+          name="remark"
-</ProForm.Group>
+          label={
-</ModalForm>)}
+            <FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.remark',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.remark}
+          disabled={false}
+        />
+        <ProFormDateTimePicker
+          width={proFormItemStyleProps.column2Width}
+          name="createTime"
+          label={
+            <FormattedMessage
+              id="device.device_category.table.list.createTime"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.createTime',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.createTime}
+          disabled={true}
+        />
+        <ProFormDateTimePicker
+          width={proFormItemStyleProps.column2Width}
+          name="updateTime"
+          label={
+            <FormattedMessage
+              id="device.device_category.table.list.updateTime"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_category.table.list.updateTime',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.updateTime}
+          disabled={true}
+        />
+      </ProForm.Group>
+    </ModalForm>
+  );
+};
 export default UpdateForm;

src/pages/Device/DeviceCategoryList/index.tsx

@@ -1,18 +1,21 @@
-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 {
+import { PageContainer, ProTable } from '@ant-design/pro-components';
-  FooterToolbar,
+import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
-  PageContainer,
+import { Button, message } from 'antd';
-  ProTable,
-  ProFormSelect,
-} from '@ant-design/pro-components';
-import { FormattedMessage, useIntl, useAccess, Access, history } 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
@@ -32,49 +35,50 @@ const DeviceCategoryList: React.FC = () => {
   const access = useAccess();
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
+  //  动态设置每页数量
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
   const [currentRow, setCurrentRow] = useState<API.DeviceCategory>();
   const [selectedRowsState, setSelectedRows] = useState<API.DeviceCategory[]>([]);
 
-      const handleUpdateModal = ()=>{
+  const handleUpdateModal = () => {
     if (updateModalOpen) {
-          setUpdateModalOpen(false)
+      setUpdateModalOpen(false);
-          setCurrentRow(undefined)
+      setCurrentRow(undefined);
     } else {
-          setUpdateModalOpen(true)
+      setUpdateModalOpen(true);
-        }
     }
-      const handleCreateModal = ()=>{
+  };
+  const handleCreateModal = () => {
     if (createModalOpen) {
-          setCreateModalOpen(false)
+      setCreateModalOpen(false);
-          setCurrentRow(undefined)
+      setCurrentRow(undefined);
     } else {
-          setCreateModalOpen(true)
+      setCreateModalOpen(true);
-        }
     }
-      const handleColumnDrawer = ()=>{
+  };
+  const handleColumnDrawer = () => {
     if (showDetail) {
-          setShowDetail(false)
+      setShowDetail(false);
-          setCurrentRow(undefined)
+      setCurrentRow(undefined);
     } else {
-          setShowDetail(true)
+      setShowDetail(true);
-        }
     }
+  };
   const handleDestroy = async (selectedRow: API.DeviceCategory) => {
-        deleteDeviceCategoryDeleteDeviceCategory({id: selectedRow.id}).then(()=>{
+    deleteDeviceCategoryDeleteDeviceCategory({ id: selectedRow.id })
-          message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
+      .then(() => {
-          actionRef.current?.reload()
+        message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
-        }).catch(()=>{
+        actionRef.current?.reload();
-          message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
       })
+      .catch(() => {
+        message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+      });
   };
 
-const columns: ProColumns<API.DeviceCategory>[] = [
+  const columns: ProColumns<API.DeviceCategory>[] = [
-
     {
-      title: (<FormattedMessage
+      title: <FormattedMessage id="device.device_category.table.list.id" defaultMessage="id" />,
-        id="device.device_category.table.list.id"
+      dataIndex: 'id',
-        defaultMessage="id"/>),
-      dataIndex: "id",
       sorter: true,
       render: (dom, entity) => {
         return (
@@ -91,84 +95,86 @@ const columns: ProColumns<API.DeviceCategory>[] = [
     },
 
     {
-        title: (<FormattedMessage
+      title: <FormattedMessage id="device.device_category.table.list.name" defaultMessage="$$$" />,
-            id="device.device_category.table.list.name"
+      dataIndex: 'name',
-            defaultMessage="$$$"/>),
-        dataIndex: "name",
       hideInSearch: true,
     },
 
-
     {
-        title: (<FormattedMessage
+      title: <FormattedMessage id="device.device_category.table.list.code" defaultMessage="$$$" />,
-            id="device.device_category.table.list.code"
+      dataIndex: 'code',
-            defaultMessage="$$$"/>),
-        dataIndex: "code",
       hideInSearch: true,
     },
 
-
     {
-        title: (<FormattedMessage
+      title: (
-            id="device.device_category.table.list.remark"
+        <FormattedMessage id="device.device_category.table.list.remark" defaultMessage="$$$" />
-            defaultMessage="$$$"/>),
+      ),
-        dataIndex: "remark",
+      dataIndex: 'remark',
       hideInSearch: true,
     },
 
-
     {
-        title: (<FormattedMessage
+      title: (
-            id="device.device_category.table.list.createTime"
+        <FormattedMessage id="device.device_category.table.list.createTime" defaultMessage="$$$" />
-            defaultMessage="$$$"/>),
+      ),
-        dataIndex: "createTime",
+      dataIndex: 'createTime',
       sorter: true,
       hideInSearch: true,
       valueType: 'dateTime',
     },
 
-
     {
-        title: (<FormattedMessage
+      title: (
-            id="device.device_category.table.list.updateTime"
+        <FormattedMessage id="device.device_category.table.list.updateTime" defaultMessage="$$$" />
-            defaultMessage="$$$"/>),
+      ),
-        dataIndex: "updateTime",
+      dataIndex: 'updateTime',
       sorter: true,
       hideInSearch: true,
       valueType: 'dateTime',
     },
 
-
     {
       title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
       dataIndex: 'option',
       valueType: 'option',
-            fixed:'right',
+      fixed: 'right',
       render: (_, record) => [
-            <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
+        <TableActionCard
-              <a
+          key="TableActionCardRef"
+          renderActions={[
+            {
+              key: 'update',
+              renderDom: (
+                <Button
                   key="update"
+                  type="link"
+                  size="small"
                   onClick={() => {
                     setUpdateModalOpen(true);
                     setCurrentRow(record);
                   }}
                 >
                   <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
-              </a>
+                </Button>
-              <a
+              ),
-                key="destroy"
+            },
-                 onClick={() => {
+            {
-                   handleDestroy(record).then(()=>{})
+              key: 'destroy',
-              }}>
+              renderDom: (
-                <FormattedMessage
+                <IsDelete
-                  id="pages.searchTable.destroy"
+                  deleteApi={() => {
-                  defaultMessage="Destroy"
+                    handleDestroy(record).then(() => {});
-                />
+                  }}
-              </a>
+                ></IsDelete>
-              </Access>
+              ),
+            },
+          ]}
+        ></TableActionCard>,
       ],
-        },];
+    },
-return (
+  ];
+  return (
     <PageContainer>
       <ProTable<API.DeviceCategory>
         headerTitle={intl.formatMessage({
@@ -179,22 +185,43 @@ return (
         actionRef={actionRef}
         rowKey="key"
         search={{
-              labelWidth: 120,
+          labelWidth: proTableCommonOptions.searchLabelWidth,
-            }}
-            onDataSourceChange={(data)=>{
-              
         }}
+        onDataSourceChange={(data) => {}}
         pagination={{
-              showSizeChanger: true,
+          ...proTablePaginationOptions,
-              pageSize: 10,
+          pageSize: currentPageSize,
+          onChange: (page, pageSize) => setCurrentPageSize(pageSize),
         }}
         columnsState={{
           persistenceKey: 'device_category_list',
-              persistenceType: 'localStorage'
+          persistenceType: 'localStorage',
+        }}
+        tableAlertOptionRender={() => {
+          return (
+            <>
+              {selectedRowsState?.length > 0 && (
+                <IsBatchDelete
+                  deleteApi={() => {
+                    // TODO 需要；联调删除接口
+                    deleteDeviceCategoryDeleteDeviceCategoryByIds({
+                      ids: selectedRowsState.map((v: API.DeviceCategory) => {
+                        return v.id as number;
+                      }),
+                    }).then(() => {
+                      actionRef.current?.reloadAndRest?.();
+                    });
+                  }}
+                />
+              )}
+            </>
+          );
         }}
         toolBarRender={() => [
-            <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
+          <Access
-              
+            accessible={access.canUpdate(history.location.pathname)}
+            key={`${history.location.pathname}-add`}
+          >
             <Button
               type="primary"
               key="primary"
@@ -204,32 +231,31 @@ return (
             >
               <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
             </Button>
-            </Access>
+          </Access>,
         ]}
         request={async (params = {}, sort) => {
-            const {current, ...rest} = params
+          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]
+            reqParams.orderKey = Object.keys(sort)[0];
-            let sort_select = sort[reqParams.orderKey]
+            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)=>{
+            data: resp.data.list.map((v: API.DeviceCategory) => {
-                return {...v, key: v.id}
+              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={{
@@ -238,30 +264,7 @@ return (
           },
         }}
       />
-          {selectedRowsState?.length > 0 && (
+
-            <FooterToolbar
-              extra={
-                <div>
-                  <FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
-                  <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
-                  <FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
-                </div>
-              }
-            >
-              <Button
-            onClick={async () => {
-              deleteDeviceCategoryDeleteDeviceCategoryByIds({ids: selectedRowsState.map((v: API.DeviceCategory)=>{return v.id as number})}).then(()=>{
-                actionRef.current?.reloadAndRest?.();
-              })
-            }}
-          >
-            <FormattedMessage
-              id="pages.searchTable.batchDeletion"
-              defaultMessage="Batch deletion"
-            />
-          </Button>
-            </FooterToolbar>
-          )}
       <CreateForm
         createModalOpen={createModalOpen}
         values={currentRow || {}}
@@ -281,9 +284,8 @@ return (
         columns={columns}
         currentRow={currentRow}
       />
-          
     </PageContainer>
   );
 };
 
-    export default DeviceCategoryList;
+export default DeviceCategoryList;

src/pages/Device/DeviceGroupList/components/ColumnDrawer.tsx

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

src/pages/Device/DeviceGroupList/components/CreateForm.tsx

@@ -1,44 +1,51 @@
-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 { postDeviceGroupCreateDeviceGroup } from '@/services/device/DeviceGroup';
-import {FormattedMessage, useIntl} from '@umijs/max';
+import {
-import {postDeviceGroupGetDeviceGroupFkSelect} from "@/services/device/DeviceGroup";
+  ModalForm,
-import {postDeviceGroupCreateDeviceGroup} from "@/services/device/DeviceGroup";
+  ProForm,
-import React, {useEffect, useState} from 'react';
+  ProFormSelect,
-import {Button, Form, message} from 'antd';
+  ProFormSwitch,
-import {Switch} from 'antd';
+  ProFormText,
+} from '@ant-design/pro-components';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Form, Switch, message } from 'antd';
+import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
+import React, { useEffect, useState } from 'react';
 export type FormValueType = {
   target?: string;
   template?: string;
   type?: string;
   time?: string;
   frequency?: string;
-      } & Partial<API.DeviceGroup>;
+} & Partial<API.DeviceGroup>;
 
-      export type CreateFormProps = {
+export type CreateFormProps = {
   createModalOpen: boolean;
-        handleModal: ()=>void;
+  handleModal: () => void;
   values: Partial<API.DeviceGroup>;
   reload: any;
-      };
+};
 const CreateForm: React.FC<CreateFormProps> = (props) => {
-
   const intl = useIntl();
   const [isAuto, setIsAuto] = useState(true);
   const [form] = Form.useForm<API.DeviceGroup>();
 
   const [parentId, setParentId] = useState<number>(0);
-  const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([{label: '根节点', value: 0}]);
+  const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([
+    { label: '根节点', value: 0 },
+  ]);
 
-  useEffect(()=>{
+  useEffect(() => {
     if (props.values.id !== undefined && props.values.id !== 0) {
-      setParentId(props.values.id as number)
+      setParentId(props.values.id as number);
-      setParentSelectOptions([{label: props.values.name, value: props.values.id}])
+      setParentSelectOptions([{ label: props.values.name, value: props.values.id }]);
     }
-  }, [props.createModalOpen])
+  }, [props.createModalOpen]);
 
   return (
     <ModalForm<API.DeviceGroup>
+    width={proFormModelWidth}
       title={intl.formatMessage({
-          id: 'common.modal.table.create.title',
+        id: 'device.device_group.table.list.add',
         defaultMessage: '$$$',
       })}
       open={props.createModalOpen}
@@ -50,26 +57,48 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
       }}
       submitTimeout={2000}
       onFinish={async (values) => {
-        postDeviceGroupCreateDeviceGroup(values).then(()=>{
+        postDeviceGroupCreateDeviceGroup(values)
-          message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
+          .then(() => {
-          props.reload()
+            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
-        }).catch(()=>{
+            props.reload();
-          message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
           })
+          .catch(() => {
+            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+          });
         props.handleModal();
         return true;
       }}
     >
-
+      <ProForm.Group>
-<ProForm.Group>
+        <ProFormSelect
-  <ProFormSelect width="md" name="parentFkId"
+          width={proFormItemStyleProps.column2Width}
+          name="parentFkId"
           initialValue={parentId}
           disabled={true}
-                 label={<FormattedMessage id="device.device_group.table.list.parentFkId" defaultMessage="$$$"/>}
+          label={
-                 placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.parentFkId', defaultMessage: '$$$'})}`}
+            <FormattedMessage id="device.device_group.table.list.parentFkId" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.parentFkId',
+            defaultMessage: '$$$',
+          })}`}
           request={async () => parentSelectOptions}
         />
-<ProFormText width="md" name="name" label={<FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.name', defaultMessage: '$$$'})}`} required={true}
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="name"
+          label={<FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.name',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
           rules={[
             {
               required: true,
@@ -82,8 +111,24 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
             },
           ]}
         />
-<ProFormText width="md" name="code" label={<FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.code', defaultMessage: '$$$'})}`} required={!isAuto} initialValue='' disabled={isAuto}
+        <ProFormText
-                                                      rules={isAuto?[]:[
+          width={proFormItemStyleProps.column2Width}
+          name="code"
+          label={<FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.code',
+            defaultMessage: '$$$',
+          })}`}
+          required={!isAuto}
+          initialValue=""
+          disabled={isAuto}
+          rules={
+            isAuto
+              ? []
+              : [
                   {
                     required: true,
                     message: (
@@ -93,22 +138,135 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
                       />
                     ),
                   },
-                                                    ]}
+                ]
-                                                   addonAfter={<Switch
+          }
+          addonAfter={
+            <Switch
               checked={isAuto}
-                  checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$"/>}
+              checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
-                  unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$"/>}
+              unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
               onChange={setIsAuto}
-                />}/>
+            />
-<ProFormText width="md" name="address" label={<FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.address', defaultMessage: '$$$'})}`} required={false}/>
+          }
-<ProFormText width="md" name="telephone" label={<FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.telephone', defaultMessage: '$$$'})}`} required={false}/>
+        />
-<ProFormText width="md" name="lon" label={<FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.lon', defaultMessage: '$$$'})}`} required={false}/>
+        <ProFormText
-<ProFormText width="md" name="lat" label={<FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.lat', defaultMessage: '$$$'})}`} required={false}/>
+          width={proFormItemStyleProps.column2Width}
-<ProFormText width="md" name="managerName" label={<FormattedMessage id="device.device_group.table.list.managerName" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.managerName', defaultMessage: '$$$'})}`} required={false}/>
+          name="address"
-<ProFormText width="md" name="managerPhone" label={<FormattedMessage id="device.device_group.table.list.managerPhone" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.managerPhone', defaultMessage: '$$$'})}`} required={false}/>
+          label={
-<ProFormSwitch width="md" name="isEnable" label={<FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$"/>} initialValue={true}/>
+            <FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.address',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="telephone"
+          label={
+            <FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.telephone',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="lon"
+          label={<FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.lon',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="lat"
+          label={<FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.lat',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="managerName"
+          label={
+            <FormattedMessage
+              id="device.device_group.table.list.managerName"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.managerName',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="managerPhone"
+          label={
+            <FormattedMessage
+              id="device.device_group.table.list.managerPhone"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.managerPhone',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+        <ProFormSwitch
+          width={proFormItemStyleProps.column2Width}
+          name="isEnable"
+          label={
+            <FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />
+          }
+          initialValue={true}
+        />
 
-<ProFormText width="md" name="remark" label={<FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.remark', defaultMessage: '$$$'})}`} required={false}/>
+        <ProFormText
-</ProForm.Group>
+          width={proFormItemStyleProps.column2Width}
-</ModalForm>)}
+          name="remark"
+          label={
+            <FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.remark',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+      </ProForm.Group>
+    </ModalForm>
+  );
+};
 export default CreateForm;

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 { putDeviceGroupUpdateDeviceGroup } from '@/services/device/DeviceGroup';
-import {FormattedMessage, useIntl} from '@umijs/max';
+import {
-import {postDeviceGroupGetDeviceGroupFkSelect} from "@/services/device/DeviceGroup";
+  ModalForm,
-import {putDeviceGroupUpdateDeviceGroup} from "@/services/device/DeviceGroup";
+  ProForm,
-import React, {useState} from 'react';
+  ProFormDateTimePicker,
-import {Button, Form, message} from 'antd';
+  ProFormSwitch,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Form, message } from 'antd';
+import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
+import React from 'react';
 export type FormValueType = {
   target?: string;
   template?: string;
   type?: string;
   time?: string;
   frequency?: string;
-    } & Partial<API.DeviceGroup>;
+} & Partial<API.DeviceGroup>;
 
-    export type UpdateFormProps = {
+export type UpdateFormProps = {
   updateModalOpen: boolean;
   handleModal: () => void;
   values: Partial<API.DeviceGroup>;
   reload: any;
-    };
+};
 const UpdateForm: React.FC<UpdateFormProps> = (props) => {
-
   const intl = useIntl();
   const [form] = Form.useForm<API.DeviceGroup>();
 
   return (
     <ModalForm<API.DeviceGroup>
+      width={proFormModelWidth}
       title={intl.formatMessage({
-        id: 'common.modal.table.update.title',
+        id: 'device.device_group.table.list.update',
         defaultMessage: '$$$',
       })}
       open={props.updateModalOpen}
@@ -38,23 +44,43 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
       }}
       submitTimeout={2000}
       onFinish={async (values) => {
-        putDeviceGroupUpdateDeviceGroup(values).then(()=>{
+        putDeviceGroupUpdateDeviceGroup(values)
-          message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
+          .then(() => {
-          props.reload()
+            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
-        }).catch(()=>{
+            props.reload();
-          message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
           })
+          .catch(() => {
+            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+          });
 
         props.handleModal();
         return true;
       }}
     >
-
+      <ProForm.Group>
-<ProForm.Group>
+        <ProFormText
-<ProFormText width="md" name="id" label="id" disabled={true} initialValue={props.values.id}/>
+          width={proFormItemStyleProps.column2Width}
-  {/*<ProFormSelect width="md" name="parentFkId" label={<FormattedMessage id="device.device_group.table.list.parentFkId" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.parentFkId', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.parentFkId}*/}
+          name="id"
+          label="id"
+          disabled={true}
+          initialValue={props.values.id}
+        />
+        {/*<ProFormSelect width={proFormItemStyleProps.column2Width} name="parentFkId" label={<FormattedMessage id="device.device_group.table.list.parentFkId" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.parentFkId', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.parentFkId}*/}
         {/*               disabled={true} />*/}
-<ProFormText width="md" name="name" label={<FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.name', defaultMessage: '$$$'})}`} required={true} initialValue={props.values.name} disabled={false}
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="name"
+          label={<FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.name',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
+          initialValue={props.values.name}
+          disabled={false}
           rules={[
             {
               required: true,
@@ -67,7 +93,20 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
             },
           ]}
         />
-<ProFormText width="md" name="code" label={<FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.code', defaultMessage: '$$$'})}`} required={true} initialValue={props.values.code} disabled={false}
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="code"
+          label={<FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.code',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
+          initialValue={props.values.code}
+          disabled={false}
           rules={[
             {
               required: true,
@@ -80,17 +119,173 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
             },
           ]}
         />
-<ProFormText width="md" name="address" label={<FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.address', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.address} disabled={false}/>
+        <ProFormText
-<ProFormText width="md" name="telephone" label={<FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.telephone', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.telephone} disabled={false}/>
+          width={proFormItemStyleProps.column2Width}
-<ProFormText width="md" name="lon" label={<FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.lon', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.lon} disabled={false}/>
+          name="address"
-<ProFormText width="md" name="lat" label={<FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.lat', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.lat} disabled={false}/>
+          label={
-<ProFormText width="md" name="managerName" label={<FormattedMessage id="device.device_group.table.list.managerName" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.managerName', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.managerName} disabled={false}/>
+            <FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />
-<ProFormText width="md" name="managerPhone" label={<FormattedMessage id="device.device_group.table.list.managerPhone" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.managerPhone', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.managerPhone} disabled={false}/>
+          }
-<ProFormSwitch width="md" name="isEnable" label={<FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$"/>} initialValue={props.values.isEnable} disabled={false}/>
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.address',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.address}
+          disabled={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="telephone"
+          label={
+            <FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.telephone',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.telephone}
+          disabled={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="lon"
+          label={<FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.lon',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.lon}
+          disabled={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="lat"
+          label={<FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.lat',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.lat}
+          disabled={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="managerName"
+          label={
+            <FormattedMessage
+              id="device.device_group.table.list.managerName"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.managerName',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.managerName}
+          disabled={false}
+        />
+        <ProFormText
+          width={proFormItemStyleProps.column2Width}
+          name="managerPhone"
+          label={
+            <FormattedMessage
+              id="device.device_group.table.list.managerPhone"
+              defaultMessage="$$$"
+            />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.managerPhone',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.managerPhone}
+          disabled={false}
+        />
+        <ProFormSwitch
+          width={proFormItemStyleProps.column2Width}
+          name="isEnable"
+          label={
+            <FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />
+          }
+          initialValue={props.values.isEnable}
+          disabled={false}
+        />
 
-<ProFormText width="md" name="remark" label={<FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.remark', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.remark} disabled={false}/>
+        <ProFormText
-<ProFormDateTimePicker width="md" name="createTime" label={<FormattedMessage id="device.device_group.table.list.createTime" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.createTime', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.createTime} disabled={true}/>
+          width={proFormItemStyleProps.column2Width}
-<ProFormDateTimePicker width="md" name="updateTime" label={<FormattedMessage id="device.device_group.table.list.updateTime" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'device.device_group.table.list.updateTime', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.updateTime} disabled={true}/>
+          name="remark"
-</ProForm.Group>
+          label={
-</ModalForm>)}
+            <FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.remark',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.remark}
+          disabled={false}
+        />
+        <ProFormDateTimePicker
+          width={proFormItemStyleProps.column2Width}
+          name="createTime"
+          label={
+            <FormattedMessage id="device.device_group.table.list.createTime" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.createTime',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.createTime}
+          disabled={true}
+        />
+        <ProFormDateTimePicker
+          width={proFormItemStyleProps.column2Width}
+          name="updateTime"
+          label={
+            <FormattedMessage id="device.device_group.table.list.updateTime" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'device.device_group.table.list.updateTime',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+          initialValue={props.values.updateTime}
+          disabled={true}
+        />
+      </ProForm.Group>
+    </ModalForm>
+  );
+};
 export default UpdateForm;

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<ActionType>();
+    //  动态设置每页数量
+    const [currentPageSize, setCurrentPageSize] = useState<number>(10);
   const [currentRow, setCurrentRow] = useState<API.DeviceGroup>();
   const [selectedRowsState, setSelectedRows] = useState<API.DeviceGroup[]>([]);
 
@@ -99,9 +105,10 @@ const DeviceGroupList: React.FC = () => {
   };
 
   const columns: ProColumns<API.DeviceGroup>[] = [
+    // TODO 确认是否需要和一级内容对齐
     {
-      title: <FormattedMessage id="device.device_group.table.list.id" defaultMessage="id" />,
+      title: <span style={{paddingLeft: 0}}><FormattedMessage id="device.device_group.table.list.name" defaultMessage="id" /></span>,
-      dataIndex: 'id',
+      dataIndex: 'name',
       sorter: true,
       render: (dom, entity) => {
         return (
@@ -115,14 +122,9 @@ const DeviceGroupList: React.FC = () => {
           </a>
         );
       },
+      key: 'fixedName',
+      fixed: 'left',
     },
-
-    {
-      title: <FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />,
-      dataIndex: 'name',
-      hideInSearch: true,
-    },
-
     {
       title: <FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />,
       dataIndex: 'code',
@@ -154,7 +156,6 @@ const DeviceGroupList: React.FC = () => {
       dataIndex: 'lat',
       hideInSearch: true,
     },
-
     {
       title: (
         <FormattedMessage id="device.device_group.table.list.managerName" defaultMessage="$$$" />
@@ -246,37 +247,54 @@ const DeviceGroupList: React.FC = () => {
       valueType: 'option',
       fixed: 'right',
       render: (_, record) => [
-        <Access
+        <TableActionCard
-          accessible={access.canUpdate(history.location.pathname)}
+          key="TableActionCardRef"
-          key={`${history.location.pathname}-add`}
+          renderActions={[
-        >
+            {
-          <a
+              key: 'create',
+              renderDom: (
+                <Button
                   key="create"
+                  type="link"
+                  size="small"
                   onClick={() => {
                     setCreateModalOpen(true);
                     setCurrentRow(record);
+                    // setShowDetail(true);
                   }}
                 >
                   <FormattedMessage id="common.create_son" defaultMessage="Create" />
-          </a>
+                </Button>
-          <a
+              ),
+            },
+            {
+              key: 'update',
+              renderDom: (
+                <Button
                   key="update"
+                  type="link"
+                  size="small"
                   onClick={() => {
                     setUpdateModalOpen(true);
                     setCurrentRow(record);
                   }}
                 >
                   <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
-          </a>
+                </Button>
-          <a
+              ),
-            key="destroy"
+            },
-            onClick={() => {
+            {
+              key: 'destroy',
+              renderDom: (
+                <IsDelete
+                  deleteApi={() => {
                     handleDestroy(record).then(() => {});
                   }}
-          >
+                ></IsDelete>
-            <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
+              ),
-          </a>
+            },
-        </Access>,
+          ]}
+        ></TableActionCard>,
       ],
     },
   ];
@@ -290,20 +308,39 @@ const DeviceGroupList: React.FC = () => {
         options={{ fullScreen: true, setting: true, density: true, reload: true }}
         actionRef={actionRef}
         rowKey="key"
-        scroll={{
+        scroll={{ y: proTableCommonOptions.commscrollY, x: 1800}}
-          x: 1800,
-        }}
         search={{
-          labelWidth: 120,
+          labelWidth: proTableCommonOptions.searchLabelWidth,
         }}
         pagination={{
-          showSizeChanger: true,
+          ...proTablePaginationOptions,
-          pageSize: 10,
+          pageSize: currentPageSize,
+          onChange: (page, pageSize) => setCurrentPageSize(pageSize),
         }}
         columnsState={{
           persistenceKey: 'device_group_list',
           persistenceType: 'localStorage',
         }}
+        tableAlertOptionRender={() => {
+          return (
+            <>
+              {selectedRowsState?.length > 0 && (
+                <IsBatchDelete
+                  deleteApi={() => {
+                    // TODO 需联调批量删除接口
+                    deleteDeviceGroupDeleteDeviceGroupByIds({
+                      ids: selectedRowsState.map((v: API.DeviceGroup) => {
+                        return v.id as number;
+                      }),
+                    }).then(() => {
+                      actionRef.current?.reloadAndRest?.();
+                    });
+                  }}
+                />
+              )}
+            </>
+          );
+        }}
         toolBarRender={() => [
           <Access
             accessible={access.canUpdate(history.location.pathname)}
@@ -351,36 +388,9 @@ const DeviceGroupList: React.FC = () => {
           onChange: (_, selectedRows) => {
             setSelectedRows(selectedRows);
           },
+          checkStrictly: false
         }}
       />
-      {selectedRowsState?.length > 0 && (
-        <FooterToolbar
-          extra={
-            <div>
-              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
-              <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
-              <FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
-            </div>
-          }
-        >
-          <Button
-            onClick={async () => {
-              deleteDeviceGroupDeleteDeviceGroupByIds({
-                ids: selectedRowsState.map((v: API.DeviceGroup) => {
-                  return v.id as number;
-                }),
-              }).then(() => {
-                actionRef.current?.reloadAndRest?.();
-              });
-            }}
-          >
-            <FormattedMessage
-              id="pages.searchTable.batchDeletion"
-              defaultMessage="Batch deletion"
-            />
-          </Button>
-        </FooterToolbar>
-      )}
       <CreateForm
         createModalOpen={createModalOpen}
         values={currentRow || {}}

src/pages/Device/DeviceList/components/ColumnDrawer.tsx

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

src/pages/Device/DeviceList/components/CreateForm.tsx

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

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

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

src/pages/Device/DeviceRelationList/components/ColumnDrawer.tsx

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

src/pages/Project/ProjectList/components/ColumnDrawer.tsx

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

src/pages/Project/ProjectList/components/CreateForm.tsx

@@ -1,25 +1,23 @@
-import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormSwitch} from '@ant-design/pro-components';
+import { postProjectCreateProject } from '@/services/project/Project';
-import {FormattedMessage, useIntl} from '@umijs/max';
+import { ModalForm, ProForm, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
-import {postProjectCreateProject} from "@/services/project/Project";
+import { FormattedMessage, useIntl } from '@umijs/max';
-import React, {useState} from 'react';
+import { Form, Switch, message } from 'antd';
-import {Button, Form, message} from 'antd';
+import React, { useState } from 'react';
-import {Switch} from 'antd';
 export type FormValueType = {
   target?: string;
   template?: string;
   type?: string;
   time?: string;
   frequency?: string;
-      } & Partial<API.Project>;
+} & Partial<API.Project>;
 
-      export type CreateFormProps = {
+export type CreateFormProps = {
   createModalOpen: boolean;
-        handleModal: ()=>void;
+  handleModal: () => void;
   values: Partial<API.Project>;
   reload: any;
-      };
+};
 const CreateForm: React.FC<CreateFormProps> = (props) => {
-
   const intl = useIntl();
   const [isAuto, setIsAuto] = useState(true);
   const [form] = Form.useForm<API.Project>();
@@ -39,19 +37,31 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
       }}
       submitTimeout={2000}
       onFinish={async (values) => {
-        postProjectCreateProject(values).then(()=>{
+        postProjectCreateProject(values)
-          message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
+          .then(() => {
-          props.reload()
+            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
-        }).catch(()=>{
+            props.reload();
-          message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
           })
+          .catch(() => {
+            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+          });
         props.handleModal();
         return true;
       }}
     >
-      
+      <ProForm.Group>
-<ProForm.Group>
+        <ProFormText
-<ProFormText width="md" name="name" label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.name', defaultMessage: '$$$'})}`} required={true}
+          width="md"
+          name="name"
+          label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'project.project.table.list.name',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
           rules={[
             {
               required: true,
@@ -64,8 +74,24 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
             },
           ]}
         />
-<ProFormText width="md" name="code" label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.code', defaultMessage: '$$$'})}`} required={!isAuto} initialValue='' disabled={isAuto}
+        <ProFormText
-                                                      rules={isAuto?[]:[
+          width="md"
+          name="code"
+          label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'project.project.table.list.code',
+            defaultMessage: '$$$',
+          })}`}
+          required={!isAuto}
+          initialValue=""
+          disabled={isAuto}
+          rules={
+            isAuto
+              ? []
+              : [
                   {
                     required: true,
                     message: (
@@ -75,14 +101,29 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
                       />
                     ),
                   },
-                                                    ]}
+                ]
-                                                   addonAfter={<Switch
+          }
+          addonAfter={
+            <Switch
               checked={isAuto}
-                  checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$"/>}
+              checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
-                  unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$"/>}
+              unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
               onChange={setIsAuto}
-                />}/>
+            />
-<ProFormText width="md" name="info" label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.info', defaultMessage: '$$$'})}`} required={true}
+          }
+        />
+        <ProFormText
+          width="md"
+          name="info"
+          label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'project.project.table.list.info',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
           rules={[
             {
               required: true,
@@ -95,8 +136,27 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
             },
           ]}
         />
-<ProFormSwitch width="md" name="isEnable" label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$"/>} initialValue={true}/>
+        <ProFormSwitch
-<ProFormText width="md" name="remark" label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.remark', defaultMessage: '$$$'})}`} required={false}/>
+          width="md"
-</ProForm.Group>
+          name="isEnable"
-</ModalForm>)}
+          label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
+          initialValue={true}
+        />
+        <ProFormText
+          width="md"
+          name="remark"
+          label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$" />}
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'project.project.table.list.remark',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+      </ProForm.Group>
+    </ModalForm>
+  );
+};
 export default CreateForm;

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

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

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

src/pages/Resource/AlgorithmModelList/components/ColumnDrawer.tsx

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

src/pages/Resource/AlgorithmModelList/index.tsx

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

src/pages/Resource/BusinessImageList/components/ColumnDrawer.tsx

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

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<ActionType>();
+  //  动态设置每页数量
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
   const [currentRow, setCurrentRow] = useState<API.BusinessImage>();
   const [selectedRowsState, setSelectedRows] = useState<API.BusinessImage[]>([]);
   const [project_fk_id_open, set_project_fk_id_open] = useState(false);
@@ -318,7 +320,7 @@ const BusinessImageList: React.FC = () => {
           x: proTableCommonOptions.scrollX,
         }}
         search={{
-          labelWidth: 'auto',
+          labelWidth: proTableCommonOptions.searchLabelWidth,
         }}
         onDataSourceChange={(data) => {
           let ProjectFkIdIds: any = data.map((v) => {
@@ -327,8 +329,9 @@ const BusinessImageList: React.FC = () => {
           setProjectFkIdIds(ProjectFkIdIds);
         }}
         pagination={{
-          showSizeChanger: true,
+          ...proTablePaginationOptions,
-          pageSize: 10,
+          pageSize: currentPageSize,
+          onChange: (page, pageSize) => setCurrentPageSize(pageSize),
         }}
         columnsState={{
           persistenceKey: 'business_image_list',

src/pages/Resource/ContainerImageList/components/ColumnDrawer.tsx

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

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<ColumnDrawProps> = (props) => {
 
   return (
     <Drawer
-      width={400}
+      width={500}
       open={props.isShowDetail}
       onClose={() => {
         props.handleDrawer();

src/pages/Resource/ModelCategoryList/components/CreateForm.tsx

@@ -1,33 +1,33 @@
-import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';
+import { postModelCategoryCreateModelCategory } from '@/services/resource/ModelCategory';
-import {FormattedMessage, useIntl} from '@umijs/max';
+import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components';
-import {postModelCategoryCreateModelCategory} from "@/services/resource/ModelCategory";
+import { FormattedMessage, useIntl } from '@umijs/max';
-import React, {useState} from 'react';
+import { Form, Switch, message } from 'antd';
-import {Button, Form, message} from 'antd';
+import { proFormSmallItemStyleProps,proFormSmallModelWidth } from '../../../../../config/defaultForm';
-import {Switch} from 'antd';
+import React, { useState } from 'react';
 export type FormValueType = {
   target?: string;
   template?: string;
   type?: string;
   time?: string;
   frequency?: string;
-      } & Partial<API.ModelCategory>;
+} & Partial<API.ModelCategory>;
 
-      export type CreateFormProps = {
+export type CreateFormProps = {
   createModalOpen: boolean;
-        handleModal: ()=>void;
+  handleModal: () => void;
   values: Partial<API.ModelCategory>;
   reload: any;
-      };
+};
 const CreateForm: React.FC<CreateFormProps> = (props) => {
-
   const intl = useIntl();
   const [isAuto, setIsAuto] = useState(true);
   const [form] = Form.useForm<API.ModelCategory>();
 
   return (
     <ModalForm<API.ModelCategory>
+      width={proFormSmallModelWidth}
       title={intl.formatMessage({
-          id: 'common.modal.table.create.title',
+        id: 'resource.model_category.table.list.add',
         defaultMessage: '$$$',
       })}
       open={props.createModalOpen}
@@ -39,19 +39,33 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
       }}
       submitTimeout={2000}
       onFinish={async (values) => {
-        postModelCategoryCreateModelCategory(values).then(()=>{
+        postModelCategoryCreateModelCategory(values)
-          message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
+          .then(() => {
-          props.reload()
+            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
-        }).catch(()=>{
+            props.reload();
-          message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
           })
+          .catch(() => {
+            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
+          });
         props.handleModal();
         return true;
       }}
     >
-      
+      <ProForm.Group>
-<ProForm.Group>
+        <ProFormText
-<ProFormText width="md" name="name" label={<FormattedMessage id="resource.model_category.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.name', defaultMessage: '$$$'})}`} required={true}
+          width={proFormSmallItemStyleProps.width}
+          name="name"
+          label={
+            <FormattedMessage id="resource.model_category.table.list.name" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'resource.model_category.table.list.name',
+            defaultMessage: '$$$',
+          })}`}
+          required={true}
           rules={[
             {
               required: true,
@@ -64,8 +78,26 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
             },
           ]}
         />
-<ProFormText width="md" name="code" label={<FormattedMessage id="resource.model_category.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.code', defaultMessage: '$$$'})}`} required={!isAuto} initialValue='' disabled={isAuto}
+        <ProFormText
-                                                      rules={isAuto?[]:[
+          width='lg'
+          name="code"
+          label={
+            <FormattedMessage id="resource.model_category.table.list.code" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'resource.model_category.table.list.code',
+            defaultMessage: '$$$',
+          })}`}
+          required={!isAuto}
+          initialValue=""
+          disabled={isAuto}
+          rules={
+            isAuto
+              ? []
+              : [
                   {
                     required: true,
                     message: (
@@ -75,14 +107,34 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
                       />
                     ),
                   },
-                                                    ]}
+                ]
-                                                   addonAfter={<Switch
+          }
+          addonAfter={
+            <Switch
               checked={isAuto}
-                  checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$"/>}
+              checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
-                  unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$"/>}
+              unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
               onChange={setIsAuto}
-                />}/>
+            />
-<ProFormText width="md" name="remark" label={<FormattedMessage id="resource.model_category.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.model_category.table.list.remark', defaultMessage: '$$$'})}`} required={false}/>
+          }
-</ProForm.Group>
+        />
-</ModalForm>)}
+        <ProFormText
+          width={proFormSmallItemStyleProps.width}
+          name="remark"
+          label={
+            <FormattedMessage id="resource.model_category.table.list.remark" defaultMessage="$$$" />
+          }
+          placeholder={`${intl.formatMessage({
+            id: 'common.please_input',
+            defaultMessage: '$$$',
+          })}${intl.formatMessage({
+            id: 'resource.model_category.table.list.remark',
+            defaultMessage: '$$$',
+          })}`}
+          required={false}
+        />
+      </ProForm.Group>
+    </ModalForm>
+  );
+};
 export default CreateForm;

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

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<ActionType>();
+    //  动态设置每页数量
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
   const [currentRow, setCurrentRow] = useState<API.ModelCategory>();
   const [selectedRowsState, setSelectedRows] = useState<API.ModelCategory[]>([]);
 
@@ -187,8 +189,9 @@ const ModelCategoryList: React.FC = () => {
         }}
         onDataSourceChange={() => {}}
         pagination={{
-          showSizeChanger: true,
+          ...proTablePaginationOptions,
-          pageSize: 10,
+          pageSize: currentPageSize,
+          onChange: (page, pageSize) => setCurrentPageSize(pageSize),
         }}
         columnsState={{
           persistenceKey: 'model_category_list',

src/pages/Resource/ModelImageList/components/ColumnDrawer.tsx

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

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

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

src/pages/Resource/ModelImageList/index.tsx

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

src/pages/Resource/ModelVersionList/components/ColumnDrawer.tsx

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

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<MyCreateFormProps> = (props) => {
         <ProFormUploadDragger
           width={proFormMaxItemStyleProps.width}
           max={1}
-          label={<span style={{ fontWeight: 600 }}>配置文件上传</span>}
+          label={<span className='h3 gn'>配置文件上传</span>}
           value={fileList}
           name="dragger"
           fieldProps={{
@@ -341,7 +341,7 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
         {/*  // TODO label字重与上面统一, 操作按钮需要与输入框对齐   */}
         <ProFormList
           name="params"
-          label="模型参数"
+          label= {<span className='h3 gn'>模型参数</span>}
           actionRef={actionFormListRef}
           itemContainerRender={(doms) => {
             return <ProForm.Group >{doms}</ProForm.Group>;