feat:服务模版 抽离
This commit is contained in:
‘Liammcl’
@@ -1,26 +1,56 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Button, Form, Input, Space, message, Popconfirm, Drawer } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { supabase } from '@/config/supabase';
|
||||
import { Table, Button, Form, Input, Space, message, Popconfirm, Drawer, Select, Tabs, Badge, Radio } from 'antd';
|
||||
import { PlusOutlined, FileTextOutlined, ProjectOutlined, CheckSquareOutlined } from '@ant-design/icons';
|
||||
import { supabaseService } from '@/hooks/supabaseService';
|
||||
|
||||
const CategoryDrawer = () => {
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [editingKey, setEditingKey] = useState('');
|
||||
const [drawerVisible, setDrawerVisible] = useState(false);
|
||||
const [activeType, setActiveType] = useState('quotation'); // 当前选中的类型
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// 模板类型配置
|
||||
const TEMPLATE_TYPES = [
|
||||
{
|
||||
value: 'quotation',
|
||||
label: '报价单模板',
|
||||
icon: <FileTextOutlined className="text-blue-500" />,
|
||||
color: 'blue',
|
||||
description: '用于创建标准化的报价单'
|
||||
},
|
||||
{
|
||||
value: 'project',
|
||||
label: '专案模板',
|
||||
icon: <ProjectOutlined className="text-green-500" />,
|
||||
color: 'green',
|
||||
description: '用于创建项目流程模板'
|
||||
},
|
||||
{
|
||||
value: 'task',
|
||||
label: '任务模板',
|
||||
icon: <CheckSquareOutlined className="text-purple-500" />,
|
||||
color: 'purple',
|
||||
description: '用于创建标准任务模板'
|
||||
}
|
||||
];
|
||||
|
||||
// 获取分类数据
|
||||
const fetchCategories = async () => {
|
||||
const fetchCategories = async (type = activeType) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { data: categories, error } = await supabase
|
||||
.from('resources')
|
||||
.select('*')
|
||||
.eq('type', 'categories')
|
||||
.order('created_at', { ascending: false });
|
||||
const { data: categories } = await supabaseService.select('resources', {
|
||||
filter: {
|
||||
type: { eq: 'categories' },
|
||||
'attributes->>type': { eq: type }
|
||||
},
|
||||
order: {
|
||||
column: 'created_at',
|
||||
ascending: false
|
||||
}
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
setData(categories || []);
|
||||
} catch (error) {
|
||||
message.error('获取分类数据失败');
|
||||
@@ -34,13 +64,23 @@ const CategoryDrawer = () => {
|
||||
if (drawerVisible) {
|
||||
fetchCategories();
|
||||
}
|
||||
}, [drawerVisible]);
|
||||
}, [drawerVisible, activeType]);
|
||||
|
||||
// 切换模板类型
|
||||
const handleTypeChange = (type) => {
|
||||
setActiveType(type);
|
||||
setEditingKey(''); // 清除编辑状态
|
||||
form.resetFields(); // 重置表单
|
||||
};
|
||||
|
||||
// 新增分类
|
||||
const handleAdd = () => {
|
||||
const handleAdd = (type) => {
|
||||
const newData = {
|
||||
id: Date.now().toString(),
|
||||
attributes: { name: '' },
|
||||
attributes: {
|
||||
name: '',
|
||||
type: type // 默认类型
|
||||
},
|
||||
isNew: true
|
||||
};
|
||||
setData([newData, ...data]);
|
||||
@@ -53,31 +93,26 @@ const CategoryDrawer = () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
if (record.isNew) {
|
||||
// 新增
|
||||
const { error } = await supabase
|
||||
.from('resources')
|
||||
.insert([{
|
||||
type: 'categories',
|
||||
attributes: {
|
||||
name: values.name
|
||||
},
|
||||
schema_version: 1
|
||||
}]);
|
||||
|
||||
if (error) throw error;
|
||||
await supabaseService.insert('resources', {
|
||||
type: 'categories',
|
||||
attributes: {
|
||||
name: values.name,
|
||||
type: values.type
|
||||
},
|
||||
schema_version: 1
|
||||
});
|
||||
} else {
|
||||
// 更新
|
||||
const { error } = await supabase
|
||||
.from('resources')
|
||||
.update({
|
||||
await supabaseService.update('resources',
|
||||
{ id: record.id },
|
||||
{
|
||||
attributes: {
|
||||
name: values.name
|
||||
name: values.name,
|
||||
type: values.type
|
||||
},
|
||||
updated_at: new Date().toISOString()
|
||||
})
|
||||
.eq('id', record.id);
|
||||
|
||||
if (error) throw error;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
message.success('保存成功');
|
||||
@@ -92,12 +127,7 @@ const CategoryDrawer = () => {
|
||||
// 删除分类
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
const { error } = await supabase
|
||||
.from('resources')
|
||||
.delete()
|
||||
.eq('id', record.id);
|
||||
|
||||
if (error) throw error;
|
||||
await supabaseService.delete('resources', { id: record.id });
|
||||
message.success('删除成功');
|
||||
fetchCategories();
|
||||
} catch (error) {
|
||||
@@ -125,6 +155,29 @@ const CategoryDrawer = () => {
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '模板类型',
|
||||
dataIndex: ['attributes', 'type'],
|
||||
render: (text, record) => {
|
||||
const isEditing = record.id === editingKey;
|
||||
return isEditing ? (
|
||||
<Form.Item
|
||||
name="type"
|
||||
style={{ margin: 0 }}
|
||||
rules={[{ required: true, message: '请选择模板类型!' }]}
|
||||
>
|
||||
<Select
|
||||
options={TEMPLATE_TYPES}
|
||||
placeholder="请选择模板类型"
|
||||
/>
|
||||
</Form.Item>
|
||||
) : (
|
||||
<span className="text-gray-600">
|
||||
{TEMPLATE_TYPES.find(t => t.value === text)?.label || text}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: (_, record) => {
|
||||
@@ -161,13 +214,14 @@ const CategoryDrawer = () => {
|
||||
setEditingKey(record.id);
|
||||
form.setFieldsValue({
|
||||
name: record.attributes.name,
|
||||
type: record.attributes.type
|
||||
});
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确认删除"
|
||||
title="确认<EFBFBD><EFBFBD><EFBFBD>除"
|
||||
description="确定要删除这个分类吗？"
|
||||
onConfirm={() => handleDelete(record)}
|
||||
okText="确定"
|
||||
@@ -209,14 +263,56 @@ const CategoryDrawer = () => {
|
||||
className="category-drawer"
|
||||
>
|
||||
<div className="p-6">
|
||||
{/* 类型选择器 */}
|
||||
<div className="mb-6">
|
||||
<Radio.Group
|
||||
value={activeType}
|
||||
onChange={(e) => handleTypeChange(e.target.value)}
|
||||
className="flex space-x-4"
|
||||
>
|
||||
{TEMPLATE_TYPES.map(type => (
|
||||
<Radio.Button
|
||||
key={type.value}
|
||||
value={type.value}
|
||||
className={`flex items-center px-4 py-2 ${
|
||||
activeType === type.value ? `bg-${type.color}-50 border-${type.color}-500` : ''
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-center space-x-2">
|
||||
{type.icon}
|
||||
<span>{type.label}</span>
|
||||
<Badge
|
||||
count={data.filter(item => item.attributes.type === type.value).length}
|
||||
className={`bg-${type.color}-100 text-${type.color}-600`}
|
||||
/>
|
||||
</span>
|
||||
</Radio.Button>
|
||||
))}
|
||||
</Radio.Group>
|
||||
</div>
|
||||
|
||||
{/* 当前类型说明 */}
|
||||
<div className="mb-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<h3 className={`text-${TEMPLATE_TYPES.find(t => t.value === activeType)?.color}-500 text-lg font-medium mb-2 flex items-center`}>
|
||||
{TEMPLATE_TYPES.find(t => t.value === activeType)?.icon}
|
||||
<span className="ml-2">{TEMPLATE_TYPES.find(t => t.value === activeType)?.label}</span>
|
||||
</h3>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
{TEMPLATE_TYPES.find(t => t.value === activeType)?.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 新增按钮 */}
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleAdd}
|
||||
onClick={() => handleAdd(activeType)}
|
||||
className="mb-4"
|
||||
icon={<PlusOutlined />}
|
||||
>
|
||||
新增分类
|
||||
</Button>
|
||||
|
||||
{/* 分类列表 */}
|
||||
<Form form={form}>
|
||||
<Table
|
||||
scroll={{ x: true }}
|
||||
@@ -228,7 +324,7 @@ const CategoryDrawer = () => {
|
||||
pageSize: 10,
|
||||
showTotal: (total) => `共 ${total} 条`,
|
||||
}}
|
||||
className="bg-white rounded-lg shadow"
|
||||
className="bg-white dark:bg-gray-800 rounded-lg shadow"
|
||||
/>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user