1
This commit is contained in:
dengqichen
parent
298866cf00
commit
5e85c51bc4
79
frontend/src/pages/Deploy/External/index.tsx
vendored
79
frontend/src/pages/Deploy/External/index.tsx
vendored
@ -1,10 +1,10 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Card, Table, Button, Space, Modal, Form, Input, message, Select, InputNumber, Switch, Tag, Tooltip } from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined, SyncOutlined, CheckCircleOutlined, CloseCircleOutlined, LinkOutlined, MinusCircleOutlined } from '@ant-design/icons';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import { useTableData } from '@/hooks/useTableData';
|
||||
import React, {useState} from 'react';
|
||||
import {Card, Table, Button, Space, Modal, Form, Input, message, Select, InputNumber, Switch, Tag, Tooltip} from 'antd';
|
||||
import {PlusOutlined, EditOutlined, DeleteOutlined, SyncOutlined, CheckCircleOutlined, CloseCircleOutlined, LinkOutlined, MinusCircleOutlined} from '@ant-design/icons';
|
||||
import type {ColumnsType} from 'antd/es/table';
|
||||
import {useTableData} from '@/hooks/useTableData';
|
||||
import * as service from './service';
|
||||
import { SystemType, AuthType, SyncStatus, ExternalSystemResponse, ExternalSystemRequest, ExternalSystemQuery } from './types';
|
||||
import {SystemType, AuthType, SyncStatus, ExternalSystemResponse, ExternalSystemRequest, ExternalSystemQuery} from './types';
|
||||
|
||||
const ExternalPage: React.FC = () => {
|
||||
const [form] = Form.useForm();
|
||||
@ -144,27 +144,6 @@ const ExternalPage: React.FC = () => {
|
||||
return authTypeMap[authType];
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '同步状态',
|
||||
dataIndex: 'syncStatus',
|
||||
width: 120,
|
||||
render: (status: SyncStatus, record) => {
|
||||
const statusConfig = {
|
||||
[SyncStatus.SUCCESS]: { icon: <CheckCircleOutlined />, color: 'success', text: '成功' },
|
||||
[SyncStatus.FAILED]: { icon: <CloseCircleOutlined />, color: 'error', text: '失败' },
|
||||
[SyncStatus.RUNNING]: { icon: <SyncOutlined spin />, color: 'processing', text: '同步中' },
|
||||
NONE: { icon: <MinusCircleOutlined />, color: 'default', text: '未同步' }
|
||||
};
|
||||
const config = statusConfig[status] || statusConfig.NONE;
|
||||
return (
|
||||
<Tooltip title={record.lastSyncTime || '未同步'}>
|
||||
<Tag icon={config.icon} color={config.color}>
|
||||
{config.text}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '最后连接时间',
|
||||
dataIndex: 'lastConnectTime',
|
||||
@ -192,14 +171,14 @@ const ExternalPage: React.FC = () => {
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
icon={<EditOutlined/>}
|
||||
onClick={() => handleEdit(record)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
icon={<LinkOutlined />}
|
||||
icon={<LinkOutlined/>}
|
||||
onClick={() => handleTestConnection(record.id)}
|
||||
>
|
||||
测试连接
|
||||
@ -207,7 +186,7 @@ const ExternalPage: React.FC = () => {
|
||||
<Button
|
||||
type="link"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
icon={<DeleteOutlined/>}
|
||||
onClick={() => handleDelete(record.id)}
|
||||
>
|
||||
删除
|
||||
@ -220,10 +199,10 @@ const ExternalPage: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<Card>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<div style={{marginBottom: 16}}>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
icon={<PlusOutlined/>}
|
||||
onClick={handleAdd}
|
||||
>
|
||||
新增系统
|
||||
@ -253,15 +232,15 @@ const ExternalPage: React.FC = () => {
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="系统名称"
|
||||
rules={[{ required: true, message: '请输入系统名称' }]}
|
||||
rules={[{required: true, message: '请输入系统名称'}]}
|
||||
>
|
||||
<Input placeholder="请输入系统名称" />
|
||||
<Input placeholder="请输入系统名称"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="type"
|
||||
label="系统类型"
|
||||
rules={[{ required: true, message: '请选择系统类型' }]}
|
||||
rules={[{required: true, message: '请选择系统类型'}]}
|
||||
>
|
||||
<Select>
|
||||
<Select.Option value={SystemType.JENKINS}>Jenkins</Select.Option>
|
||||
@ -274,17 +253,17 @@ const ExternalPage: React.FC = () => {
|
||||
name="url"
|
||||
label="系统地址"
|
||||
rules={[
|
||||
{ required: true, message: '请输入系统地址' },
|
||||
{ type: 'url', message: '请输入有效的URL' }
|
||||
{required: true, message: '请输入系统地址'},
|
||||
{type: 'url', message: '请输入有效的URL'}
|
||||
]}
|
||||
>
|
||||
<Input placeholder="请输入系统地址" />
|
||||
<Input placeholder="请输入系统地址"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="authType"
|
||||
label="认证方式"
|
||||
rules={[{ required: true, message: '请选择认证方式' }]}
|
||||
rules={[{required: true, message: '请选择认证方式'}]}
|
||||
>
|
||||
<Select>
|
||||
<Select.Option value={AuthType.BASIC}>用户名密码</Select.Option>
|
||||
@ -297,7 +276,7 @@ const ExternalPage: React.FC = () => {
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.authType !== currentValues.authType}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
{({getFieldValue}) => {
|
||||
const authType = getFieldValue('authType');
|
||||
if (authType === AuthType.BASIC) {
|
||||
return (
|
||||
@ -305,16 +284,16 @@ const ExternalPage: React.FC = () => {
|
||||
<Form.Item
|
||||
name="username"
|
||||
label="用户名"
|
||||
rules={[{ required: true, message: '请输入用户名' }]}
|
||||
rules={[{required: true, message: '请输入用户名'}]}
|
||||
>
|
||||
<Input placeholder="请输入用户名" />
|
||||
<Input placeholder="请输入用户名"/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="password"
|
||||
label="密码"
|
||||
rules={[{ required: !editingSystem, message: '请输入密码' }]}
|
||||
rules={[{required: !editingSystem, message: '请输入密码'}]}
|
||||
>
|
||||
<Input.Password placeholder={editingSystem ? '不修改请留空' : '请输入密码'} />
|
||||
<Input.Password placeholder={editingSystem ? '不修改请留空' : '请输入密码'}/>
|
||||
</Form.Item>
|
||||
</>
|
||||
);
|
||||
@ -324,9 +303,9 @@ const ExternalPage: React.FC = () => {
|
||||
<Form.Item
|
||||
name="token"
|
||||
label="访问令牌"
|
||||
rules={[{ required: !editingSystem, message: '请输入访问令牌' }]}
|
||||
rules={[{required: !editingSystem, message: '请输入访问令牌'}]}
|
||||
>
|
||||
<Input.Password placeholder={editingSystem ? '不修改请留空' : '请输入访问令牌'} />
|
||||
<Input.Password placeholder={editingSystem ? '不修改请留空' : '请输入访问令牌'}/>
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
@ -337,16 +316,16 @@ const ExternalPage: React.FC = () => {
|
||||
<Form.Item
|
||||
name="sort"
|
||||
label="显示排序"
|
||||
rules={[{ required: true, message: '请输入显示排序' }]}
|
||||
rules={[{required: true, message: '请输入显示排序'}]}
|
||||
>
|
||||
<InputNumber style={{ width: '100%' }} min={0} placeholder="请输入显示排序" />
|
||||
<InputNumber style={{width: '100%'}} min={0} placeholder="请输入显示排序"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="remark"
|
||||
label="备注"
|
||||
>
|
||||
<Input.TextArea rows={4} placeholder="请输入备注" />
|
||||
<Input.TextArea rows={4} placeholder="请输入备注"/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@ -354,7 +333,7 @@ const ExternalPage: React.FC = () => {
|
||||
label="是否禁用"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch checkedChildren="否" unCheckedChildren="是" />
|
||||
<Switch checkedChildren="否" unCheckedChildren="是"/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
5
frontend/src/pages/Deploy/External/types.ts
vendored
5
frontend/src/pages/Deploy/External/types.ts
vendored
@ -1,5 +1,4 @@
|
||||
import { BaseResponse } from '@/types/base/response';
|
||||
import {BaseQuery} from "@/types/base";
|
||||
import {BaseQuery, BaseResponse} from "@/types/base";
|
||||
|
||||
// 系统类型枚举
|
||||
export enum SystemType {
|
||||
@ -41,8 +40,6 @@ export interface ExternalSystemResponse extends BaseResponse {
|
||||
username?: string;
|
||||
password?: string;
|
||||
token?: string;
|
||||
syncStatus: SyncStatus;
|
||||
lastSyncTime?: string;
|
||||
lastConnectTime?: string;
|
||||
config?: string;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user