gongxue-base/apps/admin/src/pages/Tenants/index.tsx

import React, { useEffect, useState, useMemo } from 'react';
import { Table, Button, Modal, Form, Input, Space, message, Tag, Popconfirm } from 'antd';
import { PlusOutlined, InboxOutlined } from '@ant-design/icons';
import api from '../../api';
import PermissionButton from '../../components/PermissionButton';

const PRESET_COLORS = [
  '#ff7875',
  '#ffa940',
  '#ffc53d',
  '#73d13d',
  '#36cfc9',
  '#40a9ff',
  '#597ef7',
  '#9254de',
  '#f759ab',
  '#8c8c8c',
];

const TenantsPage: React.FC = () => {
  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [editing, setEditing] = useState<any>(null);
  const [form] = Form.useForm();
  const [searchText, setSearchText] = useState('');

  const filteredData = useMemo(() => {
    if (!searchText) return data;
    const s = searchText.toLowerCase();
    return data.filter(
      (d: any) => d.name?.toLowerCase().includes(s) || d.contact?.toLowerCase().includes(s),
    );
  }, [data, searchText]);

  const fetchData = async () => {
    setLoading(true);
    try {
      const res: any = await api.get('/tenants');
      setData(res);
    } catch (e) {
      console.error(e);
    }
    setLoading(false);
  };

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

  const handleSave = async () => {
    const values = await form.validateFields();
    try {
      if (editing) {
        await api.put(`/tenants/${editing.id}`, values);
        message.success('更新成功');
      } else {
        await api.post('/tenants', values);
        message.success('创建成功');
      }
      setModalOpen(false);
      form.resetFields();
      setEditing(null);
      fetchData();
    } catch (e: any) {
      message.error(e?.message || '操作失败');
    }
  };

  const handleArchive = async (id: number) => {
    try {
      await api.delete(`/tenants/${id}`);
      message.success('已归档');
      fetchData();
    } catch (e: any) {
      message.error(e?.message || '归档失败');
    }
  };

  const columns = [
    {
      title: '租赁方名称',
      dataIndex: 'name',
      render: (v: string, r: any) => (
        <Space>
          <Tag
            color={r.color || 'default'}
            style={{ borderColor: r.color, color: '#fff', background: r.color }}
          >
            {v}
          </Tag>
        </Space>
      ),
    },
    { title: '联系人', dataIndex: 'contact', render: (v: string) => v || '-' },
    { title: '电话', dataIndex: 'phone', render: (v: string) => v || '-' },
    {
      title: '颜色',
      dataIndex: 'color',
      render: (v: string) =>
        v ? (
          <span
            style={{
              display: 'inline-block',
              width: 20,
              height: 20,
              background: v,
              borderRadius: 4,
              verticalAlign: 'middle',
            }}
          />
        ) : (
          '-'
        ),
    },
    { title: '备注', dataIndex: 'notes', ellipsis: true, render: (v: string) => v || '-' },
    {
      title: '操作',
      width: 150,
      render: (_: any, record: any) => (
        <Space>
          <PermissionButton
            permission="tenant:edit"
            size="small"
            onClick={() => {
              setEditing(record);
              form.setFieldsValue(record);
              setModalOpen(true);
            }}
          >
            编辑
          </PermissionButton>
          <PermissionButton permission="tenant:delete">
            <Popconfirm
              title="归档后仍可查看历史租赁"
              onConfirm={() => handleArchive(record.id)}
              okText="归档"
              cancelText="取消"
            >
              <Button size="small" icon={<InboxOutlined />}>
                归档
              </Button>
            </Popconfirm>
          </PermissionButton>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <div
        style={{
          marginBottom: 16,
          display: 'flex',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 8,
        }}
      >
        <Input.Search
          placeholder="搜索名称或联系人"
          allowClear
          style={{ width: 200 }}
          onSearch={(v) => setSearchText(v)}
          onChange={(e) => {
            if (!e.target.value) setSearchText('');
          }}
        />
        <PermissionButton
          permission="tenant:create"
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setEditing(null);
            form.resetFields();
            setModalOpen(true);
          }}
        >
          添加租赁方
        </PermissionButton>
      </div>
      <Table
        scroll={{ x: 700 }}
        columns={columns}
        dataSource={filteredData}
        rowKey="id"
        loading={loading}
        pagination={{ pageSize: 20, showTotal: (total) => `共 ${total} 条` }}
      />

      <Modal
        title={editing ? '编辑租赁方' : '添加租赁方'}
        open={modalOpen}
        onOk={handleSave}
        onCancel={() => {
          setModalOpen(false);
          setEditing(null);
        }}
        okText="保存"
      >
        <Form form={form} layout="vertical">
          <Form.Item name="name" label="名称" rules={[{ required: true }]}>
            <Input placeholder="如：犀牛华安 / 艺考 / 博才" />
          </Form.Item>
          <Form.Item name="contact" label="联系人">
            <Input />
          </Form.Item>
          <Form.Item name="phone" label="电话">
            <Input />
          </Form.Item>
          <Form.Item name="color" label="标签颜色" tooltip="可视化排期时用的颜色，留空则自动分配">
            <Input
              placeholder="#40a9ff"
              addonAfter={
                <Space size={4}>
                  {PRESET_COLORS.map((c) => (
                    <span
                      key={c}
                      onClick={() => form.setFieldValue('color', c)}
                      style={{
                        display: 'inline-block',
                        width: 16,
                        height: 16,
                        background: c,
                        borderRadius: 3,
                        cursor: 'pointer',
                        border: '1px solid #d9d9d9',
                      }}
                    />
                  ))}
                </Space>
              }
            />
          </Form.Item>
          <Form.Item name="notes" label="备注">
            <Input.TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default TenantsPage;