From 906a400640de1da341c9091522709d42be43df98 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Fri, 27 Dec 2024 10:07:48 +0800
Subject: [PATCH] 1

---
 .../pages/Deploy/Deployment/List/index.tsx    | 77 +++++++++++++++----
 1 file changed, 60 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/Deploy/Deployment/List/index.tsx b/frontend/src/pages/Deploy/Deployment/List/index.tsx
index 0d4bfd29..9bf2694f 100644
--- a/frontend/src/pages/Deploy/Deployment/List/index.tsx
+++ b/frontend/src/pages/Deploy/Deployment/List/index.tsx
@@ -2,9 +2,9 @@ import React, {useState, useEffect} from 'react';
 import {PageContainer} from '@ant-design/pro-layout';
 import {Button, message, Popconfirm, Select, Space} from 'antd';
 import {PlusOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons';
-import {getDeploymentConfigPage, deleteDeploymentConfig} from './service';
+import {getDeploymentConfigPage, deleteDeploymentConfig, getDeployConfigTemplates} from './service';
 import {getEnvironmentList} from '../../Environment/List/service';
-import type {DeploymentConfig, DeploymentConfigQueryParams} from './types';
+import type {DeploymentConfig, DeploymentConfigQueryParams, DeployConfigTemplate} from './types';
 import type {Environment} from '../../Environment/List/types';
 import DeploymentConfigModal from './components/DeploymentConfigModal';
 import {ProTable} from '@ant-design/pro-components';
@@ -17,6 +17,7 @@ const DeploymentConfigList: React.FC = () => {
     const [selectedEnvId, setSelectedEnvId] = useState<number>();
     const [modalVisible, setModalVisible] = useState(false);
     const [currentConfig, setCurrentConfig] = useState<DeploymentConfig>();
+    const [templates, setTemplates] = useState<DeployConfigTemplate[]>([]);
     const actionRef = React.useRef<ActionType>();
 
     // 获取环境列表
@@ -32,8 +33,19 @@ const DeploymentConfigList: React.FC = () => {
         }
     };
 
+    // 获取配置模板
+    const fetchTemplates = async () => {
+        try {
+            const data = await getDeployConfigTemplates();
+            setTemplates(data);
+        } catch (error) {
+            message.error('获取配置模板失败');
+        }
+    };
+
     useEffect(() => {
         fetchEnvironments();
+        fetchTemplates();
     }, []);
 
     const handleDelete = async (id: number) => {
@@ -76,6 +88,50 @@ const DeploymentConfigList: React.FC = () => {
         actionRef.current?.reload();
     };
 
+    // 根据模板获取构建配置的子列
+    const getBuildConfigColumns = () => {
+        const buildConfigColumns: ProColumns<DeploymentConfig>[] = [];
+        
+        // 获取所有可能的字段和它们的标题
+        const fieldInfo = new Map<string, { title: string }>();
+        templates.forEach(template => {
+            if (template.buildVariablesSchema?.properties) {
+                Object.entries(template.buildVariablesSchema.properties).forEach(([key, property]) => {
+                    if (!fieldInfo.has(key)) {
+                        fieldInfo.set(key, {
+                            title: property.title || key
+                        });
+                    }
+                });
+            }
+        });
+
+        // 为每个字段创建一个列
+        fieldInfo.forEach((info, field) => {
+            buildConfigColumns.push({
+                title: info.title,
+                dataIndex: ['buildVariables', field],
+                width: 150,
+                ellipsis: true,
+                render: (_, record) => {
+                    // 找到对应的模板
+                    const template = templates.find(t => 
+                        t.buildType === record.buildType && 
+                        t.languageType === record.languageType
+                    );
+                    
+                    if (!template?.buildVariablesSchema?.properties?.[field]) {
+                        return '-';
+                    }
+
+                    return record.buildVariables?.[field] || '-';
+                }
+            });
+        });
+
+        return buildConfigColumns;
+    };
+
     const columns: ProColumns<DeploymentConfig>[] = [
         {
             title: '应用名称',
@@ -93,20 +149,7 @@ const DeploymentConfigList: React.FC = () => {
         },
         {
             title: '构建配置',
-            children: [
-                {
-                    title: '构建脚本',
-                    dataIndex: ['buildConfig', 'buildScript'],
-                    width: 200,
-                    ellipsis: true,
-                },
-                {
-                    title: '构建产物路径',
-                    dataIndex: ['buildConfig', 'buildPath'],
-                    width: 150,
-                    ellipsis: true,
-                },
-            ],
+            children: getBuildConfigColumns()
         },
         {
             title: '状态',
@@ -217,7 +260,7 @@ const DeploymentConfigList: React.FC = () => {
                         const queryParams: DeploymentConfigQueryParams = {
                             pageSize: params.pageSize,
                             pageNum: params.current,
-                            envId: selectedEnvId,
+                            environmentId: selectedEnvId,
                             enabled: params.enabled as boolean,
                         };
                         const data = await getDeploymentConfigPage(queryParams);