feat:v1
This commit is contained in:
‘Liammcl’
@@ -1,465 +1,17 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Table,
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
Space,
|
||||
message,
|
||||
Popconfirm,
|
||||
Select,
|
||||
Divider,
|
||||
InputNumber,
|
||||
Card,
|
||||
Typography
|
||||
} from 'antd';
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import { supabaseService } from '@/hooks/supabaseService';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import React from "react";
|
||||
import QuataSections from "./quotation";
|
||||
import TaskSections from "./task";
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const SectionsManagement = ({ activeType = 'quotation' }) => {
|
||||
const [data, setData] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [editingKey, setEditingKey] = useState('');
|
||||
const [form] = Form.useForm();
|
||||
const [loadingUnits,setLoadingUnits]=useState(false)
|
||||
const [units,setUnit]=useState([])
|
||||
const [formValues, setFormValues] = useState({});
|
||||
const fetchSections = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
|
||||
const { data: sections } = await supabaseService.select('resources', {
|
||||
filter: {
|
||||
'type': { eq: 'sections' },
|
||||
'attributes->>template_type': {eq:activeType}
|
||||
},
|
||||
order: {
|
||||
column: 'created_at',
|
||||
ascending: false
|
||||
}
|
||||
});
|
||||
|
||||
setData(sections || []);
|
||||
} catch (error) {
|
||||
message.error('获取模块数据失败');
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
export default function SectionComponent({ activeType }) {
|
||||
const renderFn = (type) => {
|
||||
switch (type) {
|
||||
case "quotation":
|
||||
return <QuataSections />;
|
||||
case "task":
|
||||
return <TaskSections />;
|
||||
default:
|
||||
return <div></div>;
|
||||
}
|
||||
};
|
||||
const fetchUnits = async () => {
|
||||
setLoadingUnits(true);
|
||||
try {
|
||||
const { data: units } = await supabaseService.select("resources", {
|
||||
filter: {
|
||||
type: { eq: "units" },
|
||||
"attributes->>template_type": { in: `(${activeType},common)` },
|
||||
},
|
||||
order: {
|
||||
column: "created_at",
|
||||
ascending: false,
|
||||
},
|
||||
});
|
||||
setUnit(units || []);
|
||||
} catch (error) {
|
||||
message.error("获取单位列表失败");
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoadingUnits(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
fetchSections();
|
||||
|
||||
}, [activeType]);
|
||||
|
||||
const handleAdd = () => {
|
||||
const newData = {
|
||||
id: Date.now().toString(),
|
||||
attributes: {
|
||||
name: '',
|
||||
template_type: activeType,
|
||||
items: [{
|
||||
key: uuidv4(),
|
||||
name: '',
|
||||
description: '',
|
||||
quantity: 1,
|
||||
price: 0,
|
||||
unit: ''
|
||||
}]
|
||||
},
|
||||
isNew: true
|
||||
};
|
||||
setData([newData, ...data]);
|
||||
setEditingKey(newData.id);
|
||||
form.setFieldsValue(newData.attributes);
|
||||
};
|
||||
|
||||
const handleSave = async (record) => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
const items = form.getFieldValue(['items']) || [];
|
||||
|
||||
// 验证items数组
|
||||
if (!items.length || !items.some(item => item.name)) {
|
||||
message.error('请至少添加一个有效的服务项目');
|
||||
return;
|
||||
}
|
||||
|
||||
if (record.isNew) {
|
||||
await supabaseService.insert('resources', {
|
||||
type: 'sections',
|
||||
attributes: {
|
||||
name: values.name,
|
||||
template_type: activeType,
|
||||
items: items.filter(item => item.name), // 只保存有名称的项目
|
||||
},
|
||||
schema_version: 1
|
||||
});
|
||||
} else {
|
||||
await supabaseService.update('resources',
|
||||
{ id: record.id },
|
||||
{
|
||||
attributes: {
|
||||
name: values.name,
|
||||
template_type: activeType,
|
||||
items: items.filter(item => item.name),
|
||||
},
|
||||
updated_at: new Date().toISOString()
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
message.success('保存成功');
|
||||
setEditingKey('');
|
||||
fetchSections();
|
||||
} catch (error) {
|
||||
message.error('保存失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (record) => {
|
||||
try {
|
||||
await supabaseService.delete('resources', { id: record.id });
|
||||
message.success('删除成功');
|
||||
fetchSections();
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
const handleAddUnit = async (unitName) => {
|
||||
try {
|
||||
const { error } = await supabase.from("resources").insert([
|
||||
{
|
||||
type: "units",
|
||||
attributes: {
|
||||
name: unitName,
|
||||
template_type: activeType,
|
||||
},
|
||||
schema_version: 1,
|
||||
},
|
||||
]);
|
||||
|
||||
if (error) throw error;
|
||||
message.success("新增单位成功");
|
||||
fetchUnits();
|
||||
return true;
|
||||
} catch (error) {
|
||||
message.error("新增单位失败");
|
||||
console.error(error);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
const handleValuesChange = (changedValues, allValues) => {
|
||||
setFormValues(allValues);
|
||||
};
|
||||
const columns = [
|
||||
{
|
||||
title: '模块名称',
|
||||
dataIndex: ['attributes', 'name'],
|
||||
width: 200,
|
||||
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 className=" font-medium">{text}</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '服务项目',
|
||||
dataIndex: ['attributes', 'items'],
|
||||
render: (items, record) => {
|
||||
const isEditing = record.id === editingKey;
|
||||
if (isEditing) {
|
||||
return (
|
||||
<Form.List name="items">
|
||||
{(fields, { add, remove }) => (
|
||||
<div className="space-y-2">
|
||||
{fields.map((field, index) => {
|
||||
const items = formValues.items || [];
|
||||
const currentItem = items[field.name] || {};
|
||||
const subtotal = (currentItem.quantity || 0) * (currentItem.price || 0);
|
||||
|
||||
return (
|
||||
<Card key={field.key} size="small" className="bg-gray-50 dark:bg-gray-600 ">
|
||||
<div className="grid grid-cols-6 gap-2">
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, 'name']}
|
||||
className="col-span-2 mb-0"
|
||||
>
|
||||
<Input placeholder="项目名称" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, 'unit']}
|
||||
className="mb-0"
|
||||
>
|
||||
<Select
|
||||
placeholder="选择单位"
|
||||
loading={loadingUnits}
|
||||
showSearch
|
||||
allowClear
|
||||
style={{ minWidth: "120px" }}
|
||||
options={units.map((unit) => ({
|
||||
label: unit.attributes.name,
|
||||
value: unit.attributes.name,
|
||||
}))}
|
||||
onDropdownVisibleChange={(open) => {
|
||||
if (open) fetchUnits();
|
||||
}}
|
||||
dropdownRender={(menu) => (
|
||||
<>
|
||||
{menu}
|
||||
<Divider style={{ margin: "12px 0" }} />
|
||||
<div style={{ padding: "4px" }}>
|
||||
<Input.Search
|
||||
placeholder="输入新单位名称"
|
||||
enterButton={<PlusOutlined />}
|
||||
onSearch={async (value) => {
|
||||
if (!value.trim()) return;
|
||||
if (
|
||||
await handleAddUnit(value.trim())
|
||||
) {
|
||||
const currentItems =
|
||||
form.getFieldValue([
|
||||
"sections",
|
||||
field.name,
|
||||
"items",
|
||||
]);
|
||||
currentItems[itemField.name].unit =
|
||||
value.trim();
|
||||
form.setFieldValue(
|
||||
["sections", field.name, "items"],
|
||||
currentItems
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, 'quantity']}
|
||||
className="mb-0"
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="数量"
|
||||
min={0}
|
||||
className="w-full"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, 'price']}
|
||||
className="mb-0"
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="单价 (NT$)"
|
||||
min={0}
|
||||
className="w-full"
|
||||
prefix="NT$"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => remove(field.name)}
|
||||
className="flex items-center justify-center"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Text type="secondary">小计: NT${subtotal.toLocaleString()}</Text>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => add({
|
||||
key: uuidv4(),
|
||||
name: '',
|
||||
unit: '',
|
||||
quantity: 1,
|
||||
price: 0
|
||||
})}
|
||||
className="w-full"
|
||||
>
|
||||
<PlusOutlined /> 添加服务项目
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Form.List>
|
||||
);
|
||||
}
|
||||
|
||||
// 计算总金额
|
||||
const total = (items || []).reduce((sum, item) => {
|
||||
return sum + (item.quantity * item.price || 0);
|
||||
}, 0);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{(items || []).map((item, index) => (
|
||||
<div key={index} className="flex justify-start text-sm">
|
||||
<span >{item.name}</span>
|
||||
<span className=" ml-2">
|
||||
{item.quantity} {item.unit} × NT${item.price.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<Divider className="my-2" />
|
||||
<Text strong>总金额: NT${total.toLocaleString()}</Text>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 160,
|
||||
fixed: 'right',
|
||||
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,
|
||||
items: record.attributes.items
|
||||
});
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</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}
|
||||
icon={<PlusOutlined />}
|
||||
className="bg-blue-600 hover:bg-blue-700 border-0 shadow-sm h-10"
|
||||
>
|
||||
新增模块
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" rounded-lg shadow-sm">
|
||||
<Form
|
||||
form={form}
|
||||
onValuesChange={handleValuesChange}
|
||||
>
|
||||
<Table
|
||||
scroll={{ x: 1200 }}
|
||||
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 SectionsManagement;
|
||||
return <>{renderFn(activeType)}</>;
|
||||
}
|
||||
Reference in New Issue
Block a user