imeeting/frontend/src/pages/Tenants.tsx

import {
  Button,
  Card,
  Drawer,
  Form,
  Input,
  message,
  Popconfirm,
  Space,
  Table,
  Tag,
  Typography,
  DatePicker,
  Row,
  Col,
  Select
} from "antd";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { createTenant, deleteTenant, listTenants, updateTenant } from "../api";
import { usePermission } from "../hooks/usePermission";
import { useDict } from "../hooks/useDict";
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
  ReloadOutlined,
  ShopOutlined,
  CalendarOutlined,
  PhoneOutlined,
  UserOutlined
} from "@ant-design/icons";
import type { SysTenant } from "../types";
import PageHeader from "../components/shared/PageHeader";
import dayjs from "dayjs";

const { Title, Text } = Typography;

export default function Tenants() {
  const { t } = useTranslation();
  const { can } = usePermission();

  // Dictionaries
  const { items: statusDict } = useDict("sys_common_status");

  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [data, setData] = useState<SysTenant[]>([]);
  const [total, setTotal] = useState(0);
  const [params, setParams] = useState({
    current: 1,
    size: 10,
    name: "",
    code: ""
  });

  const [drawerOpen, setDrawerOpen] = useState(false);
  const [editing, setEditing] = useState<SysTenant | null>(null);
  const [form] = Form.useForm();

  const loadData = async (currentParams = params) => {
    setLoading(true);
    try {
      const result = await listTenants(currentParams);
      setData(result.records || []);
      setTotal(result.total || 0);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
  }, [params.current, params.size]);

  const handleSearch = () => {
    setParams({ ...params, current: 1 });
    loadData({ ...params, current: 1 });
  };

  const handleReset = () => {
    const resetParams = {
      current: 1,
      size: 10,
      name: "",
      code: ""
    };
    setParams(resetParams);
    loadData(resetParams);
  };

  const openCreate = () => {
    setEditing(null);
    form.resetFields();
    form.setFieldsValue({ status: 1 });
    setDrawerOpen(true);
  };

  const openEdit = (record: SysTenant) => {
    setEditing(record);
    form.setFieldsValue({
      ...record,
      expireTime: record.expireTime ? dayjs(record.expireTime) : null
    });
    setDrawerOpen(true);
  };

  const handleDelete = async (id: number) => {
    try {
      await deleteTenant(id);
      message.success(t('common.success'));
      loadData();
    } catch (e) {
      // Handled by interceptor
    }
  };

  const submit = async () => {
    try {
      const values = await form.validateFields();
      setSaving(true);
      const payload = {
        ...values,
        expireTime: values.expireTime ? values.expireTime.format("YYYY-MM-DD HH:mm:ss") : null
      };

      if (editing) {
        await updateTenant(editing.id, payload);
        message.success(t('common.success'));
      } else {
        await createTenant(payload);
        message.success(t('common.success'));
      }
      setDrawerOpen(false);
      loadData();
    } catch (e) {
      // Handled by interceptor
    } finally {
      setSaving(false);
    }
  };

  const columns = [
    {
      title: t('tenants.tenantInfo'),
      key: "tenant",
      render: (_: any, record: SysTenant) => (
        <Space>
          <div style={{ width: 40, height: 40, background: '#f0f5ff', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#1890ff', fontSize: 20 }}>
            <ShopOutlined aria-hidden="true" />
          </div>
          <div>
            <div style={{ fontWeight: 600, color: '#262626' }}>{record.tenantName}</div>
            <div style={{ fontSize: 12, color: '#8c8c8c' }} className="tabular-nums">{record.tenantCode}</div>
          </div>
        </Space>
      ),
    },
    {
      title: t('tenants.contact'),
      key: "contact",
      render: (_: any, record: SysTenant) => (
        <div>
          <div><UserOutlined style={{ marginRight: 4, color: '#8c8c8c' }} />{record.contactName || "-"}</div>
          <div style={{ fontSize: 12, color: '#8c8c8c' }} className="tabular-nums"><PhoneOutlined style={{ marginRight: 4 }} />{record.contactPhone || "-"}</div>
        </div>
      )
    },
    {
      title: t('common.status'),
      dataIndex: "status",
      width: 100,
      render: (status: number) => {
        const item = statusDict.find(i => i.itemValue === String(status));
        return (
          <Tag color={status === 1 ? "green" : "red"}>
            {item ? item.itemLabel : (status === 1 ? "正常" : "禁用")}
          </Tag>
        );
      },
    },
    {
      title: t('tenants.expireTime'),
      dataIndex: "expireTime",
      width: 180,
      render: (text: string) => (
        <Space>
          <CalendarOutlined style={{ color: '#8c8c8c' }} />
          <Text className="tabular-nums">{text ? text.substring(0, 10) : t('tenants.forever')}</Text>
        </Space>
      )
    },
    {
      title: t('common.action'),
      key: "action",
      width: 120,
      fixed: "right" as const,
      render: (_: any, record: SysTenant) => (
        <Space>
          {can("sys_tenant:update") && (
            <Button
              type="text"
              icon={<EditOutlined aria-hidden="true" />}
              onClick={() => openEdit(record)}
              aria-label={t('common.edit')}
            />
          )}
          {can("sys_tenant:delete") && (
            <Popconfirm title={`确定删除租户 "${record.tenantName}" 吗？`} onConfirm={() => handleDelete(record.id)}>
              <Button type="text" danger icon={<DeleteOutlined aria-hidden="true" />} aria-label={t('common.delete')} />
            </Popconfirm>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div className="p-6">
      <PageHeader
        title={t('tenants.title')}
        subtitle={t('tenants.subtitle')}
        extra={can("sys_tenant:create") && (
          <Button type="primary" icon={<PlusOutlined aria-hidden="true" />} onClick={openCreate}>
            {t('tenants.drawerTitleCreate')}
          </Button>
        )}
      />

      <Card className="shadow-sm mb-4">
        <Space wrap size="middle">
          <Input
            placeholder={t('tenants.tenantName')}
            prefix={<SearchOutlined aria-hidden="true" className="text-gray-400" />}
            style={{ width: 200 }}
            value={params.name}
            onChange={e => setParams({ ...params, name: e.target.value })}
            allowClear
          />
          <Input
            placeholder={t('tenants.tenantCode')}
            style={{ width: 180 }}
            value={params.code}
            onChange={e => setParams({ ...params, code: e.target.value })}
            allowClear
          />
          <Button type="primary" icon={<SearchOutlined aria-hidden="true" />} onClick={handleSearch}>{t('common.search')}</Button>
          <Button icon={<ReloadOutlined aria-hidden="true" />} onClick={handleReset}>{t('common.reset')}</Button>
        </Space>
      </Card>

      <Card className="shadow-sm" styles={{ body: { padding: 0 } }}>
        <Table
          rowKey="id"
          columns={columns}
          dataSource={data}
          loading={loading}
          size="middle"
          pagination={{
            current: params.current,
            pageSize: params.size,
            total: total,
            showSizeChanger: true,
            onChange: (page, size) => setParams({ ...params, current: page, size }),
            showTotal: (total) => t('common.total', { total })
          }}
        />
      </Card>

      <Drawer
        title={
          <Space>
            <ShopOutlined aria-hidden="true" />
            <span>{editing ? t('tenants.drawerTitleEdit') : t('tenants.drawerTitleCreate')}</span>
          </Space>
        }
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        width={480}
        destroyOnClose
        footer={
          <div className="flex justify-end gap-2 p-2">
            <Button onClick={() => setDrawerOpen(false)}>{t('common.cancel')}</Button>
            <Button type="primary" loading={saving} onClick={submit}>{t('common.confirm')}</Button>
          </div>
        }
      >
        <Form form={form} layout="vertical">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label={t('tenants.tenantName')} name="tenantName" rules={[{ required: true, message: t('tenants.tenantName') }]}>
                <Input placeholder="例如：云合智慧" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={t('tenants.tenantCode')} name="tenantCode" rules={[{ required: true, message: t('tenants.tenantCode') }]}>
                <Input placeholder="例如：UNIS" disabled={!!editing} className="tabular-nums" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label={t('tenants.contactName')} name="contactName">
                <Input placeholder="姓名" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={t('tenants.contactPhone')} name="contactPhone">
                <Input placeholder="手机或座机" className="tabular-nums" />
              </Form.Item>
            </Col>
          </Row>

          <Form.Item label={t('tenants.expireTime')} name="expireTime">
            <DatePicker style={{ width: "100%" }} placeholder={t('tenants.forever')} />
          </Form.Item>

          <Form.Item label={t('common.status')} name="status" initialValue={1}>
            <Select options={statusDict.map(i => ({ label: i.itemLabel, value: Number(i.itemValue) }))} />
          </Form.Item>

          <Form.Item label={t('common.remark')} name="remark">
            <Input.TextArea rows={3} placeholder="选填，租户详细背景说明…" />
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
}