diff --git a/frontend/src/pages/Deploy/Application/List/components/ApplicationModal.tsx b/frontend/src/pages/Deploy/Application/List/components/ApplicationModal.tsx index 434ebe59..24a6babf 100644 --- a/frontend/src/pages/Deploy/Application/List/components/ApplicationModal.tsx +++ b/frontend/src/pages/Deploy/Application/List/components/ApplicationModal.tsx @@ -1,166 +1,175 @@ -import React, { useEffect } from 'react'; -import { Modal, Form, Input, InputNumber, Radio, message, Select } from 'antd'; -import type { Application } from '../types'; -import { createApplication, updateApplication } from '../service'; -import { DevelopmentLanguageTypeEnum } from '../types'; +import React, {useState} from 'react'; +import {Modal, Form, Input, Select, Switch, InputNumber, App} from 'antd'; +import type {Application} from '../types'; +import {DevelopmentLanguageTypeEnum} from '../types'; +import {createApplication, updateApplication} from '../service'; interface ApplicationModalProps { - visible: boolean; - onCancel: () => void; - onSuccess: () => void; - initialValues?: Application; - projectGroupId: number; + open: boolean; + onCancel: () => void; + onSuccess: () => void; + initialValues?: Application; + projectGroupId: number; } const ApplicationModal: React.FC = ({ - visible, - onCancel, - onSuccess, - initialValues, - projectGroupId, + open, + onCancel, + onSuccess, + initialValues, + projectGroupId, }) => { - const [form] = Form.useForm(); - const isEdit = !!initialValues; + const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); + const {message: messageApi} = App.useApp(); + const isEdit = !!initialValues?.id; - useEffect(() => { - if (visible) { - if (initialValues) { - form.setFieldsValue({ - ...initialValues, - }); - } else { - form.setFieldsValue({ - projectGroupId, - enabled: true, - sort: 0, - language: DevelopmentLanguageTypeEnum.JAVA, - }); - } - } - }, [visible, initialValues, form, projectGroupId]); + const handleSubmit = async () => { + try { + setLoading(true); + const values = await form.validateFields(); + if (isEdit) { + await updateApplication({ + ...values, + id: initialValues.id, + }); + } else { + await createApplication({ + ...values, + projectGroupId, + }); + } + messageApi.success(`${isEdit ? '更新' : '创建'}成功`); + form.resetFields(); + onSuccess(); + } catch (error) { + if (error instanceof Error) { + messageApi.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`); + } else { + messageApi.error(`${isEdit ? '更新' : '创建'}失败`); + } + } finally { + setLoading(false); + } + }; - const handleSubmit = async () => { - try { - const values = await form.validateFields(); - const submitData = { - ...values, - projectGroupId, - }; - - if (isEdit) { - await updateApplication({ ...submitData, id: initialValues?.id }); - message.success('更新成功'); - } else { - await createApplication(submitData); - message.success('创建成功'); - } - onSuccess(); - onCancel(); - form.resetFields(); - } catch (error) { - message.error(isEdit ? '更新失败' : '创建失败'); - } - }; - - const handleCancel = () => { - form.resetFields(); - onCancel(); - }; - - return ( - -
- {/* 隐藏的项目组ID字段 */} - - - { + form.resetFields(); + onCancel(); + }} + onOk={handleSubmit} + confirmLoading={loading} + maskClosable={false} + destroyOnClose > - - + + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - 启用 - 禁用 - - + + + - - - -
- - ); + + + + + + ); }; export default ApplicationModal; diff --git a/frontend/src/pages/Deploy/Application/List/index.tsx b/frontend/src/pages/Deploy/Application/List/index.tsx index a6498bbe..391a9f21 100644 --- a/frontend/src/pages/Deploy/Application/List/index.tsx +++ b/frontend/src/pages/Deploy/Application/List/index.tsx @@ -1,13 +1,11 @@ import React, {useState, useEffect} from 'react'; import {PageContainer} from '@ant-design/pro-layout'; -import {Button, message, Popconfirm, Tag, Space, Tooltip, Select} from 'antd'; +import {Button, Space, Popconfirm, Tag, Select, App} from 'antd'; import { PlusOutlined, EditOutlined, DeleteOutlined, CodeOutlined, - CloudUploadOutlined, - ApiOutlined, GithubOutlined, JavaOutlined, NodeIndexOutlined, @@ -32,6 +30,7 @@ const ApplicationList: React.FC = () => { const [modalVisible, setModalVisible] = useState(false); const [currentApplication, setCurrentApplication] = useState(); const actionRef = React.useRef(); + const {message: messageApi} = App.useApp(); // 获取项目列表 const fetchProjects = async () => { @@ -42,7 +41,7 @@ const ApplicationList: React.FC = () => { setSelectedProjectGroupId(data[0].id); } } catch (error) { - message.error('获取项目组列表失败'); + messageApi.error('获取项目组列表失败'); } }; @@ -53,16 +52,16 @@ const ApplicationList: React.FC = () => { const handleDelete = async (id: number) => { try { await deleteApplication(id); - message.success('删除成功'); + messageApi.success('删除成功'); actionRef.current?.reload(); } catch (error) { - message.error('删除失败'); + messageApi.error('删除失败'); } }; const handleAdd = () => { if (!selectedProjectGroupId) { - message.warning('请先选择项目组'); + messageApi.warning('请先选择项目组'); return; } setCurrentApplication(undefined); @@ -79,6 +78,17 @@ const ApplicationList: React.FC = () => { actionRef.current?.reload(); }; + const handleModalClose = () => { + setModalVisible(false); + setCurrentApplication(undefined); + }; + + const handleSuccess = () => { + setModalVisible(false); + setCurrentApplication(undefined); + actionRef.current?.reload(); + }; + // 获取开发语言信息 const getLanguageInfo = (language: DevelopmentLanguageTypeEnum) => { switch (language) { @@ -207,19 +217,20 @@ const ApplicationList: React.FC = () => { }, { title: '操作', - width: 150, + width: 180, key: 'action', valueType: 'option', fixed: 'right', - align: 'center', render: (_, record) => [ , { - , + ], }, ]; return ( - <> + + {projectGroups.map((project) => ( + + ))} + , + ], + }} + > columns={columns} actionRef={actionRef} scroll={{x: 'max-content'}} cardBordered + rowKey="id" + search={false} + options={{ + setting: false, + density: false, + fullScreen: false, + reload: false, + }} + toolbar={{ + actions: [ + + ], + }} + pagination={{ + pageSize: 10, + showQuickJumper: true, + }} request={async (params) => { if (!selectedProjectGroupId) { return { @@ -254,71 +311,42 @@ const ApplicationList: React.FC = () => { total: 0, }; } - const queryParams: ApplicationQuery = { - pageSize: params.pageSize, - pageNum: params.current, - appCode: params.appCode as string, - appName: params.appName as string, - enabled: params.enabled as boolean, - }; - const data = await getApplicationPage(queryParams); - return { - data: data.content || [], - success: true, - total: data.totalElements || 0, - }; + try { + const queryParams: ApplicationQuery = { + pageSize: params.pageSize, + pageNum: params.current, + projectGroupId: selectedProjectGroupId, + appCode: params.appCode as string, + appName: params.appName as string, + enabled: params.enabled as boolean, + }; + const data = await getApplicationPage(queryParams); + return { + data: data.content || [], + success: true, + total: data.totalElements || 0, + }; + } catch (error) { + messageApi.error('获取应用列表失败'); + return { + data: [], + success: false, + total: 0, + }; + } }} - rowKey="id" - search={{ - labelWidth: 'auto', - span: { - xs: 24, - sm: 12, - md: 8, - lg: 6, - xl: 6, - xxl: 6, - }, - }} - options={{ - setting: { - listsHeight: 400, - }, - }} - form={{ - syncToUrl: true, - }} - pagination={{ - pageSize: 10, - showQuickJumper: true, - }} - dateFormatter="string" - toolBarRender={() => [ - , - ]} /> - {selectedProjectGroupId && ( + {modalVisible && selectedProjectGroupId && ( setModalVisible(false)} - onSuccess={() => { - setModalVisible(false); - actionRef.current?.reload(); - }} + open={modalVisible} + onCancel={handleModalClose} + onSuccess={handleSuccess} initialValues={currentApplication} projectGroupId={selectedProjectGroupId} /> )} - + ); }; diff --git a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx index 65f67737..3ce204ae 100644 --- a/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx +++ b/frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx @@ -1,5 +1,5 @@ import React, {useEffect, useState, useCallback} from 'react'; -import {Modal, Form, Select, message, Switch, InputNumber} from 'antd'; +import {Modal, Form, Select, message, Switch, InputNumber, App} from 'antd'; import type {DeploymentConfig, DeployConfigTemplate} from '../types'; import {createDeploymentConfig, updateDeploymentConfig, getDeployConfigTemplates} from '../service'; import {getApplicationList} from '../../../Application/List/service'; @@ -33,6 +33,7 @@ const DeploymentConfigModal: React.FC = ({ const [selectedTemplate, setSelectedTemplate] = useState(); const [buildVariables, setBuildVariables] = useState>({}); const [loading, setLoading] = useState(false); + const {message: messageApi} = App.useApp(); const isEdit = !!initialValues?.id; // 获取应用列表 @@ -41,9 +42,9 @@ const DeploymentConfigModal: React.FC = ({ const data = await getApplicationList(); setApplications(data); } catch (error) { - message.error('获取应用列表失败'); + messageApi.error('获取应用列表失败'); } - }, []); + }, [messageApi]); // 获取配置模板 const fetchTemplates = useCallback(async () => { @@ -51,9 +52,9 @@ const DeploymentConfigModal: React.FC = ({ const data = await getDeployConfigTemplates(); setTemplates(data); } catch (error) { - message.error('获取配置模板失败'); + messageApi.error('获取配置模板失败'); } - }, []); + }, [messageApi]); // 在模态框显示时获取数据 useEffect(() => { @@ -115,14 +116,14 @@ const DeploymentConfigModal: React.FC = ({ } else { await createDeploymentConfig(submitData); } - message.success(`${isEdit ? '更新' : '创建'}成功`); + messageApi.success(`${isEdit ? '更新' : '创建'}成功`); form.resetFields(); onSuccess(); } catch (error) { if (error instanceof Error) { - message.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`); + messageApi.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`); } else { - message.error(`${isEdit ? '更新' : '创建'}失败`); + messageApi.error(`${isEdit ? '更新' : '创建'}失败`); } } finally { setLoading(false); diff --git a/frontend/src/pages/Deploy/Environment/List/components/EnvironmentModal.tsx b/frontend/src/pages/Deploy/Environment/List/components/EnvironmentModal.tsx index 90efd6fd..68cbb275 100644 --- a/frontend/src/pages/Deploy/Environment/List/components/EnvironmentModal.tsx +++ b/frontend/src/pages/Deploy/Environment/List/components/EnvironmentModal.tsx @@ -1,34 +1,30 @@ -import React, {useEffect} from 'react'; -import {Modal, Form, Input, InputNumber, Select, message} from 'antd'; +import React, {useState} from 'react'; +import {Modal, Form, Input, Select, Switch, InputNumber, App} from 'antd'; import type {Environment} from '../types'; import {BuildTypeEnum, DeployTypeEnum} from '../types'; import {createEnvironment, updateEnvironment} from '../service'; -import {getBuildTypeInfo, getDeployTypeInfo} from '../utils'; interface EnvironmentModalProps { - visible: boolean; + open: boolean; onCancel: () => void; onSuccess: () => void; initialValues?: Environment; } const EnvironmentModal: React.FC = ({ - visible, + open, onCancel, onSuccess, initialValues, }) => { const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); + const {message: messageApi} = App.useApp(); const isEdit = !!initialValues?.id; - useEffect(() => { - if (visible && initialValues) { - form.setFieldsValue(initialValues); - } - }, [visible, initialValues, form]); - const handleSubmit = async () => { try { + setLoading(true); const values = await form.validateFields(); if (isEdit) { await updateEnvironment({ @@ -38,30 +34,40 @@ const EnvironmentModal: React.FC = ({ } else { await createEnvironment(values); } - message.success(`${isEdit ? '更新' : '创建'}成功`); + messageApi.success(`${isEdit ? '更新' : '创建'}成功`); form.resetFields(); onSuccess(); } catch (error) { - message.error(`${isEdit ? '更新' : '创建'}失败`); + if (error instanceof Error) { + messageApi.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`); + } else { + messageApi.error(`${isEdit ? '更新' : '创建'}失败`); + } + } finally { + setLoading(false); } }; return ( { form.resetFields(); onCancel(); }} onOk={handleSubmit} - width={600} + confirmLoading={loading} + maskClosable={false} + destroyOnClose >
= ({ label="环境编码" rules={[ {required: true, message: '请输入环境编码'}, - {max: 50, message: '环境编码长度不能超过50个字符'}, + {max: 50, message: '环境编码不能超过50个字符'}, ]} + tooltip="环境的唯一标识，创建后不可修改" > - + = ({ label="环境名称" rules={[ {required: true, message: '请输入环境名称'}, - {max: 50, message: '环境名称长度不能超过50个字符'}, + {max: 50, message: '环境名称不能超过50个字符'}, ]} + tooltip="环境的显示名称" > - - - - - + - + 本地构建 + 远程构建 - + Kubernetes + Docker + + + + + + + + - +
diff --git a/frontend/src/pages/Deploy/Environment/List/index.tsx b/frontend/src/pages/Deploy/Environment/List/index.tsx index 6f21f275..a50bf6cb 100644 --- a/frontend/src/pages/Deploy/Environment/List/index.tsx +++ b/frontend/src/pages/Deploy/Environment/List/index.tsx @@ -1,6 +1,6 @@ import React, {useState} from 'react'; import {PageContainer} from '@ant-design/pro-layout'; -import {Button, message, Popconfirm, Tag} from 'antd'; +import {Button, Space, Popconfirm, Tag, App} from 'antd'; import {PlusOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons'; import {getEnvironmentPage, deleteEnvironment} from './service'; import type {Environment, EnvironmentQueryParams} from './types'; @@ -14,14 +14,15 @@ const EnvironmentList: React.FC = () => { const [modalVisible, setModalVisible] = useState(false); const [currentEnvironment, setCurrentEnvironment] = useState(); const actionRef = React.useRef(); + const {message: messageApi} = App.useApp(); const handleDelete = async (id: number) => { try { await deleteEnvironment(id); - message.success('删除成功'); + messageApi.success('删除成功'); actionRef.current?.reload(); } catch (error) { - message.error('删除失败'); + messageApi.error('删除失败'); } }; @@ -35,24 +36,16 @@ const EnvironmentList: React.FC = () => { setModalVisible(true); }; - const renderTag = (icon: React.ReactNode, label: string, color: string) => ( -
- {icon} - {label} -
- ); + const handleModalClose = () => { + setModalVisible(false); + setCurrentEnvironment(undefined); + }; + + const handleSuccess = () => { + setModalVisible(false); + setCurrentEnvironment(undefined); + actionRef.current?.reload(); + }; const columns: ProColumns[] = [ { @@ -73,16 +66,21 @@ const EnvironmentList: React.FC = () => { title: '环境描述', dataIndex: 'envDesc', ellipsis: true, - width: '30%', }, { - title: '构建方式', + title: '构建类型', dataIndex: 'buildType', - width: 180, + width: 120, render: (buildType) => { - if (!buildType) return '-'; const typeInfo = getBuildTypeInfo(buildType as BuildTypeEnum); - return renderTag(typeInfo.icon, typeInfo.label, typeInfo.color); + return ( + + + {typeInfo.icon} + {typeInfo.label} + + + ); }, filters: [ {text: 'Jenkins构建', value: BuildTypeEnum.JENKINS}, @@ -93,13 +91,19 @@ const EnvironmentList: React.FC = () => { filtered: false, }, { - title: '部署方式', + title: '部署类型', dataIndex: 'deployType', - width: 180, + width: 120, render: (deployType) => { - if (!deployType) return '-'; const typeInfo = getDeployTypeInfo(deployType as DeployTypeEnum); - return renderTag(typeInfo.icon, typeInfo.label, typeInfo.color); + return ( + + + {typeInfo.icon} + {typeInfo.label} + + + ); }, filters: [ {text: 'Kubernetes集群部署', value: DeployTypeEnum.K8S}, @@ -109,11 +113,19 @@ const EnvironmentList: React.FC = () => { filterMode: 'menu', filtered: false, }, + { + title: '状态', + dataIndex: 'enabled', + width: 100, + valueEnum: { + true: {text: '启用', status: 'Success'}, + false: {text: '禁用', status: 'Default'}, + }, + }, { title: '排序', dataIndex: 'sort', width: 80, - align: 'center', sorter: true, }, { @@ -122,75 +134,63 @@ const EnvironmentList: React.FC = () => { key: 'action', valueType: 'option', fixed: 'right', - align: 'center', - render: (_, record) => ( -
+ render: (_, record) => [ + , + handleDelete(record.id)} + > - handleDelete(record.id)} - > - - -
- ), + + ], }, ]; return ( - <> + columns={columns} actionRef={actionRef} scroll={{x: 'max-content'}} cardBordered - request={async (params) => { - const queryParams: EnvironmentQueryParams = { - pageSize: params.pageSize, - pageNum: params.current, - envCode: params.envCode as string, - envName: params.envName as string, - buildType: params.buildType as BuildTypeEnum, - deployType: params.deployType as DeployTypeEnum, - }; - const data = await getEnvironmentPage(queryParams); - return { - data: data.content || [], - success: true, - total: data.totalElements || 0, - }; - }} rowKey="id" - search={{ - labelWidth: 'auto', - span: { - xs: 24, - sm: 12, - md: 8, - lg: 6, - xl: 6, - xxl: 6, - }, - }} + search={false} options={{ - setting: { - listsHeight: 400, - }, + setting: false, + density: false, + fullScreen: false, + reload: false, + }} + toolbar={{ + actions: [ + + ], }} form={{ syncToUrl: true, @@ -199,29 +199,42 @@ const EnvironmentList: React.FC = () => { pageSize: 10, showQuickJumper: true, }} - dateFormatter="string" - toolBarRender={() => [ - , - ]} + request={async (params) => { + try { + const queryParams: EnvironmentQueryParams = { + pageSize: params.pageSize, + pageNum: params.current, + envCode: params.envCode as string, + envName: params.envName as string, + buildType: params.buildType as BuildTypeEnum, + deployType: params.deployType as DeployTypeEnum, + }; + const data = await getEnvironmentPage(queryParams); + return { + data: data.content || [], + success: true, + total: data.totalElements || 0, + }; + } catch (error) { + messageApi.error('获取环境列表失败'); + return { + data: [], + success: false, + total: 0, + }; + } + }} /> - setModalVisible(false)} - onSuccess={() => { - setModalVisible(false); - actionRef.current?.reload(); - }} - initialValues={currentEnvironment} - /> - + {modalVisible && ( + + )} + ); }; diff --git a/frontend/src/pages/Deploy/ProjectGroup/List/components/ProjectGroupModal.tsx b/frontend/src/pages/Deploy/ProjectGroup/List/components/ProjectGroupModal.tsx index 3e81783e..bc42b7f0 100644 --- a/frontend/src/pages/Deploy/ProjectGroup/List/components/ProjectGroupModal.tsx +++ b/frontend/src/pages/Deploy/ProjectGroup/List/components/ProjectGroupModal.tsx @@ -1,87 +1,73 @@ -import React, {useEffect} from 'react'; -import {Modal, Form, Input, InputNumber, Radio, message} from 'antd'; +import React, {useState} from 'react'; +import {Modal, Form, Input, Select, Switch, InputNumber, App} from 'antd'; import type {ProjectGroup} from '../types'; -import {createProjectGroup, updateProjectGroup} from '../service'; import {ProjectGroupTypeEnum} from '../types'; +import {createProjectGroup, updateProjectGroup} from '../service'; interface ProjectGroupModalProps { - visible: boolean; + open: boolean; onCancel: () => void; onSuccess: () => void; initialValues?: ProjectGroup; } const ProjectGroupModal: React.FC = ({ - visible, + open, onCancel, onSuccess, initialValues, }) => { const [form] = Form.useForm(); - const isEdit = !!initialValues; - - useEffect(() => { - if (visible) { - if (initialValues) { - // 将布尔值转换为字符串 - form.setFieldsValue({ - ...initialValues, - enabled: initialValues.enabled?.toString() - }); - } else { - form.setFieldsValue({ - type: ProjectGroupTypeEnum.PROJECT, - enabled: 'true', - sort: 0 - }); - } - } - }, [visible, initialValues, form]); + const [loading, setLoading] = useState(false); + const {message: messageApi} = App.useApp(); + const isEdit = !!initialValues?.id; const handleSubmit = async () => { try { + setLoading(true); const values = await form.validateFields(); - // 将字符串转换回布尔值 - const submitData = { - ...values, - enabled: values.enabled === 'true' - }; - if (isEdit) { - await updateProjectGroup({...submitData, id: initialValues?.id}); - message.success('更新成功'); + await updateProjectGroup({ + ...values, + id: initialValues.id, + }); } else { - await createProjectGroup(submitData); - message.success('创建成功'); + await createProjectGroup(values); } - onSuccess(); - onCancel(); + messageApi.success(`${isEdit ? '更新' : '创建'}成功`); form.resetFields(); + onSuccess(); } catch (error) { - message.error(isEdit ? '更新失败' : '创建失败'); + if (error instanceof Error) { + messageApi.error(`${isEdit ? '更新' : '创建'}失败: ${error.message}`); + } else { + messageApi.error(`${isEdit ? '更新' : '创建'}失败`); + } + } finally { + setLoading(false); } }; - const handleCancel = () => { - form.resetFields(); - onCancel(); - }; - return ( { + form.resetFields(); + onCancel(); + }} onOk={handleSubmit} - onCancel={handleCancel} + confirmLoading={loading} + maskClosable={false} destroyOnClose >
= ({ label="项目组编码" rules={[ {required: true, message: '请输入项目组编码'}, - {pattern: /^[A-Za-z0-9_-]+$/, message: '项目组编码只能包含字母、数字、下划线和连字符'} + {max: 50, message: '项目组编码不能超过50个字符'}, ]} + tooltip="项目组的唯一标识，创建后不可修改" > - + - - - - - + - - 产品型 - 项目型 - + + + + + - - 启用 - 禁用 - + - +
diff --git a/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx b/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx index d354b16e..4d5e8bd1 100644 --- a/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx +++ b/frontend/src/pages/Deploy/ProjectGroup/List/index.tsx @@ -1,6 +1,6 @@ import React, {useState} from 'react'; import {PageContainer} from '@ant-design/pro-layout'; -import {Button, message, Popconfirm, Space, Tag, Tooltip} from 'antd'; +import {Button, Space, Popconfirm, Tag, App} from 'antd'; import { PlusOutlined, EditOutlined, @@ -20,14 +20,15 @@ const ProjectGroupList: React.FC = () => { const [modalVisible, setModalVisible] = useState(false); const [currentProject, setCurrentProject] = useState(); const actionRef = React.useRef(); + const {message: messageApi} = App.useApp(); const handleDelete = async (id: number) => { try { await deleteProjectGroup(id); - message.success('删除成功'); + messageApi.success('删除成功'); actionRef.current?.reload(); } catch (error) { - message.error('删除失败'); + messageApi.error('删除失败'); } }; @@ -41,6 +42,17 @@ const ProjectGroupList: React.FC = () => { setModalVisible(true); }; + const handleModalClose = () => { + setModalVisible(false); + setCurrentProject(undefined); + }; + + const handleSuccess = () => { + setModalVisible(false); + setCurrentProject(undefined); + actionRef.current?.reload(); + }; + const columns: ProColumns[] = [ { title: '项目组编码', @@ -97,12 +109,10 @@ const ProjectGroupList: React.FC = () => { dataIndex: 'environments', width: 100, render: (_, record) => ( - - - - {record?.totalEnvironments || 0} - - + + + {record?.totalEnvironments || 0} + ), }, { @@ -110,12 +120,10 @@ const ProjectGroupList: React.FC = () => { dataIndex: 'applications', width: 100, render: (_, record) => ( - - - - {record?.totalApplications || 0} - - + + + {record?.totalApplications || 0} + ), }, { @@ -126,26 +134,20 @@ const ProjectGroupList: React.FC = () => { }, { title: '操作', - width: 280, + width: 180, key: 'action', valueType: 'option', fixed: 'right', - align: 'center', render: (_, record) => [ , - , { ], @@ -166,74 +170,75 @@ const ProjectGroupList: React.FC = () => { ]; return ( - <> + columns={columns} actionRef={actionRef} - scroll={{ x: 'max-content' }} + scroll={{x: 'max-content'}} cardBordered - request={async (params) => { - const queryParams: ProjectGroupQueryParams = { - pageSize: params.pageSize, - pageNum: params.current, - projectGroupName: params.projectGroupName as string, - projectGroupCode: params.projectGroupCode as string, - enabled: params.enabled as boolean, - }; - const data = await getProjectGroupPage(queryParams); - return { - data: data.content || [], - success: true, - total: data.totalElements || 0, - }; - }} rowKey="id" - search={{ - labelWidth: 'auto', - span: { - xs: 24, - sm: 12, - md: 8, - lg: 6, - xl: 6, - xxl: 6, - }, - }} + search={false} options={{ - setting: { - listsHeight: 400, - }, + setting: false, + density: false, + fullScreen: false, + reload: false, + }} + toolbar={{ + actions: [ + + ], }} form={{ syncToUrl: true, + ignoreRules: false, }} pagination={{ pageSize: 10, showQuickJumper: true, }} - dateFormatter="string" - toolBarRender={() => [ - , - ]} + request={async (params) => { + try { + const queryParams: ProjectGroupQueryParams = { + pageSize: params.pageSize, + pageNum: params.current, + projectGroupName: params.projectGroupName as string, + projectGroupCode: params.projectGroupCode as string, + enabled: params.enabled as boolean, + }; + const data = await getProjectGroupPage(queryParams); + return { + data: data.content || [], + success: true, + total: data.totalElements || 0, + }; + } catch (error) { + messageApi.error('获取项目组列表失败'); + return { + data: [], + success: false, + total: 0, + }; + } + }} /> - setModalVisible(false)} - onSuccess={() => { - setModalVisible(false); - actionRef.current?.reload(); - }} - initialValues={currentProject} - /> - + {modalVisible && ( + + )} + ); };