d8d-admin-mobile-starter-public/client/admin/pages_zichan_area.tsx

import React, { useState } from 'react';
import { 
  Button, Table, Space,
  Form, Input, message, Modal, Card, 
  Popconfirm, Tag, Radio
} from 'antd';
import { 
  useQuery,
} from '@tanstack/react-query';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { EnableStatus } from '../share/types.ts'
import type { 
  ZichanArea, 
} from '../share/monitorTypes.ts';

import { ZichanAreaAPI } from './api/index.ts';


// 资产归属区域管理页面
export const ZichanAreaPage = () => {
  const [form] = Form.useForm();
  const [formMode, setFormMode] = useState<'create' | 'edit'>('create');
  const [editingId, setEditingId] = useState<number | null>(null);
  const [modalVisible, setModalVisible] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [searchParams, setSearchParams] = useState({
    page: 1,
    limit: 10,
    name: '',
    code: ''
  });

  // 获取资产归属区域列表
  const { data, isLoading: isTableLoading, refetch } = useQuery({
    queryKey: ['zichanAreas', searchParams],
    queryFn: () => ZichanAreaAPI.getZichanAreaList(searchParams)
  });

  // 处理表单提交
  const handleSubmit = async (values: Partial<ZichanArea>) => {
    setIsLoading(true);
    try {
      if (formMode === 'create') {
        await ZichanAreaAPI.createZichanArea(values);
        message.success('创建成功');
      } else {
        await ZichanAreaAPI.updateZichanArea(editingId!, values);
        message.success('更新成功');
      }
      setModalVisible(false);
      refetch();
    } catch (error) {
      message.error('操作失败');
    } finally {
      setIsLoading(false);
    }
  };

  // 处理编辑
  const handleEdit = async (record: ZichanArea) => {
    setFormMode('edit');
    setEditingId(record.id);
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  // 处理删除
  const handleDelete = async (id: number) => {
    try {
      await ZichanAreaAPI.deleteZichanArea(id);
      message.success('删除成功');
      refetch();
    } catch (error) {
      message.error('删除失败');
    }
  };

  // 处理搜索
  const handleSearch = (values: any) => {
    setSearchParams(prev => ({
      ...prev,
      ...values,
      page: 1
    }));
  };

  // 处理分页变化
  const handlePageChange = (page: number, pageSize?: number) => {
    setSearchParams(prev => ({
      ...prev,
      page,
      limit: pageSize || prev.limit
    }));
  };

  // 处理新增
  const handleAdd = () => {
    setFormMode('create');
    setEditingId(null);
    form.resetFields();
    setModalVisible(true);
  };

  // 表格列定义
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 80
    },
    {
      title: '区域名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '区域编码',
      dataIndex: 'code',
      key: 'code'
    },
    {
      title: '区域图片',
      dataIndex: 'image_url',
      key: 'image_url',
      render: (url?: string) => url ? <img src={url} alt="区域图片" style={{ width: 50, height: 50 }} /> : '-'
    },
    {
      title: '是否启用',
      dataIndex: 'is_enabled',
      key: 'is_enabled',
      render: (enabled?: EnableStatus) => (
        <Tag color={enabled === EnableStatus.ENABLED ? 'success' : 'default'}>
          {enabled === EnableStatus.ENABLED ? '启用' : '禁用'}
        </Tag>
      )
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      key: 'created_at',
      render: (date: Date) => dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_: any, record: ZichanArea) => (
        <Space>
          <Button type="link" onClick={() => handleEdit(record)}>编辑</Button>
          <Popconfirm
            title="确定要删除吗？"
            onConfirm={() => handleDelete(record.id)}
          >
            <Button type="link" danger>删除</Button>
          </Popconfirm>
        </Space>
      )
    }
  ];

  return (
    <div>
      <Card>
        <Form layout="inline" onFinish={handleSearch}>
          <Form.Item name="name" label="区域名称">
            <Input placeholder="请输入区域名称" />
          </Form.Item>
          <Form.Item name="code" label="区域编码">
            <Input placeholder="请输入区域编码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">搜索</Button>
          </Form.Item>
          <Form.Item>
            <Button onClick={handleAdd}>新增</Button>
          </Form.Item>
        </Form>
      </Card>

      <Card style={{ marginTop: 16 }}>
        <Table
          columns={columns}
          dataSource={data?.data}
          loading={isTableLoading}
          rowKey="id"
          pagination={{
            current: searchParams.page,
            pageSize: searchParams.limit,
            total: data?.pagination.total,
            onChange: handlePageChange
          }}
        />
      </Card>

      <Modal
        title={formMode === 'create' ? '新增资产归属区域' : '编辑资产归属区域'}
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        footer={null}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
        >
          <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="image_url"
            label="区域图片"
          >
            <Input placeholder="请输入图片URL" />
          </Form.Item>

          <Form.Item
            name="description"
            label="区域描述"
          >
            <Input.TextArea placeholder="请输入区域描述" />
          </Form.Item>

          <Form.Item
            name="is_enabled"
            label="是否启用"
            initialValue={EnableStatus.ENABLED}
          >
            <Radio.Group>
              <Radio value={EnableStatus.ENABLED}>启用</Radio>
              <Radio value={EnableStatus.DISABLED}>禁用</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" loading={isLoading}>
                确定
              </Button>
              <Button onClick={() => setModalVisible(false)}>
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};