manage/src/pages/company/service/itemsManange/classify/index.jsx

import React, { useState, useEffect } from 'react';
import { Table, Button, Form, Input, Space, message, Popconfirm, Drawer, Select, Segmented, Badge } from 'antd';
import { PlusOutlined, FileTextOutlined, ProjectOutlined, CheckSquareOutlined } from '@ant-design/icons';
import { supabaseService } from '@/hooks/supabaseService';
const Classify = ({activeType,typeList}) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [editingKey, setEditingKey] = useState('');
  const [form] = Form.useForm();
  const [filterType, setFilterType] = useState('all'); // 'all', 'common', 'current'

  const fetchCategories = async (type = activeType, filterTypeValue = filterType) => {
    setLoading(true);
    try {
      let filterCondition;
      
      switch (filterTypeValue) {
        case 'common':
          filterCondition = { eq: 'common' };
          break;
        case 'current':
          filterCondition = { eq: type };
          break;
        default: 
          filterCondition = { in: `(${type},common)` };
      }

      const { data: categories } = await supabaseService.select('resources', {
        filter: {
          'type': { eq: 'categories' },
          'attributes->>template_type': filterCondition
        },
        order: {
          column: 'created_at',
          ascending: false
        }
      });
      
      setData(categories || []);
    } catch (error) {
      message.error('获取分类数据失败');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchCategories(activeType, filterType);
  }, [activeType]);


  // 新增分类
  const handleAdd = (type) => {
    const newData = {
      id: Date.now().toString(),
      attributes: { 
        name: '',
        template_type: type 
      },
      isNew: true
    };
    setData([newData, ...data]);
    setEditingKey(newData.id);
    form.setFieldsValue(newData.attributes);
  };

  // 保存分类数据
  const handleSave = async (record) => {
    try {
      const values = await form.validateFields();
      if (record.isNew) {
        await supabaseService.insert('resources', {
          type: 'categories',
          attributes: {
            name: values.name,
            template_type: values.template_type
          },
          schema_version: 1
        });
      } else {
        await supabaseService.update('resources', 
          { id: record.id },
          {
            attributes: {
              name: values.name,
              template_type: values.template_type
            },
            updated_at: new Date().toISOString()
          }
        );
      }

      message.success('保存成功');
      setEditingKey('');
      fetchCategories();
    } catch (error) {
      message.error('保存失败');
      console.error(error);
    }
  };

  // 删除分类
  const handleDelete = async (record) => {
    try {
      await supabaseService.delete('resources', { id: record.id });
      message.success('删除成功');
      fetchCategories();
    } catch (error) {
      message.error('删除失败');
      console.error(error);
    }
  };

  const columns = [
    {
      title: '分类名称',
      dataIndex: ['attributes', 'name'],
      render: (text, record) => {
        const isEditing = record.id === editingKey;
        return isEditing ? (
          <Form.Item
            name="name"
            style={{ margin: 0 }}
            rules={[{ required: true, message: '请输入分类名称!' }]}
          >
            <Input 
              placeholder="请输入分类名称" 
          
            />
          </Form.Item>
        ) : (
          <span >{text}</span>
        );
      },
    },
    {
      title: '模板类型',
      dataIndex: ['attributes', 'template_type'],
      render: (text, record) => {
        const isEditing = record.id === editingKey;
        return isEditing ? (
          <Form.Item
            name="template_type"
            style={{ margin: 0 }}
            rules={[{ required: true, message: '请选择模板类型!' }]}
          >
            <Select
              options={typeList}
              placeholder="请选择模板类型"
              className="w-full "
            />
          </Form.Item>
        ) : (
          <span className="text-gray-700 px-2 py-1 bg-gray-100 dark:bg-gray-700 dark:text-gray-100 rounded-full text-sm">
            {typeList.find(t => t.value === text)?.label || text}
          </span>
        );
      },
    },
    {
      title: '操作',
      render: (_, record) => {
        const isEditing = record.id === editingKey;
        return isEditing ? (
          <Space>
            <Button
              type="link"
              className="text-green-600 hover:text-green-500 font-medium"
              onClick={() => handleSave(record)}
            >
              保存
            </Button>
            <Button
              type="link"
              className="text-gray-600 hover:text-gray-500 font-medium"
              onClick={() => {
                setEditingKey('');
                if (record.isNew) {
                  setData(data.filter(item => item.id !== record.id));
                }
              }}
            >
              取消
            </Button>
          </Space>
        ) : (
          <Space>
            <Button
              type="link"
              className="text-blue-600 hover:text-blue-500 font-medium"
              disabled={editingKey !== ''}
              onClick={() => {
                setEditingKey(record.id);
                form.setFieldsValue({
                  name: record.attributes.name,
                  template_type: record.attributes.template_type
                });
              }}
            >
              编辑
            </Button>
            <Popconfirm
              title="确认删除"
              description="确定要删除这个分类吗？"
              onConfirm={() => handleDelete(record)}
              okText="确定"
              cancelText="取消"
              okButtonProps={{
                className: "bg-red-500 hover:bg-red-600 border-red-500"
              }}
            >
              <Button
                type="link"
                className="text-red-600 hover:text-red-500 font-medium"
                disabled={editingKey !== ''}
              >
                删除
              </Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  return (
    <div className="p-6 ">
      <div className=" rounded-lg shadow-sm mb-6 p-4">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <div className="flex items-center gap-2">
            <Button
              type="primary"
              onClick={() => handleAdd(activeType)}
              icon={<PlusOutlined />}
              className="bg-blue-600 hover:bg-blue-700 border-0 shadow-sm h-10"
            >
              新增分类
            </Button>
          </div>

          <Segmented
            value={filterType}
            onChange={(value) => {
              setFilterType(value);
              fetchCategories(activeType, value);
            }}
            options={[
              {
                label: '全部',
                value: 'all',
              },
              {
                label: '仅当前类型',
                value: 'current',
              },
              {
                label: '仅通用类型',
                value: 'common',
              }
            ]}
            className="bg-gray-50  dark:bg-gray-600 p-1"
          />
        </div>
      </div>

      <div className="rounded-lg shadow-sm">
        <Form form={form}>
          <Table
            scroll={{ x: true}}
            columns={columns}
            dataSource={data}
            rowKey="id"
            loading={loading}
            pagination={{
              pageSize: 10,
              showTotal: (total) => `共 ${total} 条`,
              className: "px-4"
            }}
            className="rounded-lg"
          />
        </Form>
      </div>
    </div>
  );
};

export default Classify;