deploy-ease-platform/frontend/src/pages/System/Tenant/index.tsx

import React, { useEffect, useState } from 'react';
import { Table, Button, Modal, Form, Input, Space, message, Switch, DatePicker, Card, Row, Col } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import type { TenantDTO, TenantQuery } from './types';
import { getTenants, createTenant, updateTenant, deleteTenant } from './service';
import dayjs from 'dayjs';

const TenantPage: React.FC = () => {
  const [tenants, setTenants] = useState<TenantDTO[]>([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [editingTenant, setEditingTenant] = useState<TenantDTO | null>(null);
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const [searchForm] = Form.useForm();

  const fetchTenants = async (params?: TenantQuery) => {
    try {
      setLoading(true);
      const data = await getTenants(params);
      setTenants(data || []);
    } catch (error) {
      console.error('获取租户列表失败:', error);
      message.error('获取租户列表失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchTenants();
  }, []);

  const handleSearch = async () => {
    const values = await searchForm.validateFields();
    fetchTenants(values);
  };

  const handleReset = () => {
    searchForm.resetFields();
    fetchTenants();
  };

  const handleAdd = () => {
    setEditingTenant(null);
    form.resetFields();
    form.setFieldsValue({
      enabled: true
    });
    setModalVisible(true);
  };

  const handleEdit = (record: TenantDTO) => {
    setEditingTenant(record);
    form.setFieldsValue({
      ...record,
      expireTime: record.expireTime ? dayjs(record.expireTime) : undefined
    });
    setModalVisible(true);
  };

  const handleDelete = async (id: number) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个租户吗？删除后不可恢复！',
      onOk: async () => {
        try {
          await deleteTenant(id);
          message.success('删除成功');
          fetchTenants();
        } catch (error) {
          message.error('删除失败');
        }
      },
    });
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      if (editingTenant) {
        await updateTenant(editingTenant.id, {
          ...values,
          expireTime: values.expireTime?.format('YYYY-MM-DD HH:mm:ss'),
          version: editingTenant.version
        });
        message.success('更新成功');
      } else {
        await createTenant({
          ...values,
          expireTime: values.expireTime?.format('YYYY-MM-DD HH:mm:ss')
        });
        message.success('创建成功');
      }
      setModalVisible(false);
      fetchTenants();
    } catch (error) {
      message.error('操作失败');
    }
  };

  const columns = [
    {
      title: '租户名称',
      dataIndex: 'name',
      key: 'name',
      width: '15%',
    },
    {
      title: '租户编码',
      dataIndex: 'code',
      key: 'code',
      width: '10%',
    },
    {
      title: '联系人',
      dataIndex: 'contactName',
      key: 'contactName',
      width: '10%',
    },
    {
      title: '联系电话',
      dataIndex: 'contactPhone',
      key: 'contactPhone',
      width: '12%',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      width: '15%',
    },
    {
      title: '状态',
      dataIndex: 'enabled',
      key: 'enabled',
      width: '8%',
      render: (enabled: boolean) => (
        <Switch checked={enabled} disabled />
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: TenantDTO) => (
        <Space>
          <Button 
            type="link" 
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button 
            type="link" 
            danger 
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record.id)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Card style={{ marginBottom: '24px' }}>
        <Form
          form={searchForm}
          layout="inline"
          onFinish={handleSearch}
        >
          <Row gutter={24} style={{ width: '100%' }}>
            <Col span={6}>
              <Form.Item name="name" label="租户名称">
                <Input placeholder="请输入租户名称" allowClear />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="code" label="租户编码">
                <Input placeholder="请输入租户编码" allowClear />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="enabled" label="状态">
                <Switch />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Space>
                <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
                  查询
                </Button>
                <Button icon={<ReloadOutlined />} onClick={handleReset}>
                  重置
                </Button>
              </Space>
            </Col>
          </Row>
        </Form>
      </Card>

      <Card>
        <div style={{ marginBottom: 16 }}>
          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
            新增租户
          </Button>
        </div>

        <Table
          loading={loading}
          columns={columns}
          dataSource={tenants}
          rowKey="id"
          pagination={false}
          size="middle"
          bordered
        />
      </Card>

      <Modal
        title={editingTenant ? '编辑租户' : '新增租户'}
        open={modalVisible}
        onOk={handleSubmit}
        onCancel={() => setModalVisible(false)}
        width={600}
        destroyOnClose
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Form.Item
            name="name"
            label="租户名称"
            rules={[{ required: true, message: '请输入租户名称' }]}
          >
            <Input placeholder="请输入租户名称" />
          </Form.Item>

          <Form.Item
            name="code"
            label="租户编码"
            rules={[{ required: true, message: '请输入租户编码' }]}
          >
            <Input placeholder="请输入租户编码" />
          </Form.Item>

          <Form.Item
            name="contactName"
            label="联系人"
          >
            <Input placeholder="请输入联系人" />
          </Form.Item>

          <Form.Item
            name="contactPhone"
            label="联系电话"
          >
            <Input placeholder="请输入联系电话" />
          </Form.Item>

          <Form.Item
            name="email"
            label="邮箱"
            rules={[{ type: 'email', message: '请输入正确的邮箱格式' }]}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>

          <Form.Item
            name="address"
            label="地址"
          >
            <Input.TextArea rows={2} placeholder="请输入地址" />
          </Form.Item>

          <Form.Item
            name="enabled"
            label="状态"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default TenantPage;