服务模版
This commit is contained in:
‘Liammcl’
@@ -38,6 +38,26 @@ const companyRoutes = [
|
||||
name: '报价单详情',
|
||||
icon: 'file',
|
||||
},
|
||||
{
|
||||
path: 'serviceTeamplate',
|
||||
component: lazy(() => import('@/pages/company/service')),
|
||||
name: '服务管理',
|
||||
icon: 'container',
|
||||
},
|
||||
{
|
||||
path: 'serviceType',
|
||||
hidden: true,
|
||||
component: lazy(() => import('@/pages/company/service/serviceType')),
|
||||
name: '类型管理',
|
||||
icon: 'container',
|
||||
},
|
||||
{
|
||||
path: 'serviceTemplateInfo/:id?',
|
||||
hidden: true,
|
||||
component: lazy(() => import('@/pages/company/service/detail')),
|
||||
name: '服务模版详情',
|
||||
icon: 'container',
|
||||
},
|
||||
{
|
||||
path: 'quotaInfo/preview/:id?', // 添加可选的 id 参数
|
||||
hidden: true,
|
||||
|
||||
609
src/pages/company/service/detail/index.jsx
Normal file
609
src/pages/company/service/detail/index.jsx
Normal file
@@ -0,0 +1,609 @@
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import {
|
||||
Card,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
Button,
|
||||
Space,
|
||||
Typography,
|
||||
message,
|
||||
Select,
|
||||
} from "antd";
|
||||
import {
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
ArrowLeftOutlined,
|
||||
EditOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useNavigate, useParams, useLocation } from "react-router-dom";
|
||||
import { supabase } from "@/config/supabase";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
const ServiceForm = () => {
|
||||
const [form] = Form.useForm();
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const location = useLocation();
|
||||
const isEdit = location.search.includes("edit=true");
|
||||
const [editingSectionIndex, setEditingSectionIndex] = useState(null);
|
||||
const [availableSections, setAvailableSections] = useState([]);
|
||||
const [formValues, setFormValues] = useState({});
|
||||
const [sectionNameForm] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchServiceTemplate();
|
||||
}
|
||||
fetchAvailableSections();
|
||||
}, [id]);
|
||||
|
||||
const fetchServiceTemplate = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from("resources")
|
||||
.select("*")
|
||||
.eq("id", id)
|
||||
.single();
|
||||
|
||||
if (error) throw error;
|
||||
form.setFieldsValue({
|
||||
templateName: data.attributes.templateName,
|
||||
description: data.attributes.description,
|
||||
sections: data.attributes.sections,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("获取服务模版失败:", error);
|
||||
message.error("获取服务模版失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAvailableSections = async () => {
|
||||
try {
|
||||
const { data: sections, error } = await supabase
|
||||
.from("resources")
|
||||
.select("*")
|
||||
.eq("type", "serviceSection");
|
||||
|
||||
if (error) throw error;
|
||||
setAvailableSections(sections);
|
||||
} catch (error) {
|
||||
console.error("获取服务小节失败:", error);
|
||||
message.error("获取服务小节失败");
|
||||
}
|
||||
};
|
||||
|
||||
const onFinish = async (values) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const totalAmount = values.sections.reduce((sum, section) => {
|
||||
return (
|
||||
sum +
|
||||
(section.items || []).reduce((sectionSum, item) => {
|
||||
return sectionSum + (item.quantity * item.price || 0);
|
||||
}, 0)
|
||||
);
|
||||
}, 0);
|
||||
|
||||
const serviceData = {
|
||||
type: "serviceTemplate",
|
||||
attributes: {
|
||||
templateName: values.templateName,
|
||||
description: values.description,
|
||||
sections: values.sections,
|
||||
totalAmount,
|
||||
},
|
||||
};
|
||||
|
||||
let result;
|
||||
if (id) {
|
||||
result = await supabase
|
||||
.from("resources")
|
||||
.update(serviceData)
|
||||
.eq("id", id)
|
||||
.select();
|
||||
} else {
|
||||
result = await supabase
|
||||
.from("resources")
|
||||
.insert([serviceData])
|
||||
.select();
|
||||
}
|
||||
|
||||
if (result.error) throw result.error;
|
||||
message.success("保存成功");
|
||||
navigate("/company/serviceTeamplate");
|
||||
} catch (error) {
|
||||
console.error("保存失败:", error);
|
||||
message.error("保存失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddExistingSection = (sectionId) => {
|
||||
const section = availableSections.find((s) => s.id === sectionId);
|
||||
if (section) {
|
||||
const sections = form.getFieldValue("sections") || [];
|
||||
form.setFieldsValue({
|
||||
sections: [
|
||||
...sections,
|
||||
{
|
||||
...section.attributes,
|
||||
sectionId: section.id,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const currencyOptions = [
|
||||
{ value: "CNY", label: "人民币 (¥)" },
|
||||
{ value: "TWD", label: "台币 (NT$)" },
|
||||
{ value: "USD", label: "美元 ($)" },
|
||||
];
|
||||
|
||||
const calculateItemAmount = useMemo(
|
||||
() => (quantity, price) => {
|
||||
const safeQuantity = Number(quantity) || 0;
|
||||
const safePrice = Number(price) || 0;
|
||||
return safeQuantity * safePrice;
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const calculateSectionTotal = useMemo(
|
||||
() =>
|
||||
(items = []) => {
|
||||
if (!Array.isArray(items)) return 0;
|
||||
|
||||
return items.reduce((sum, item) => {
|
||||
if (!item) return sum;
|
||||
return sum + calculateItemAmount(item.quantity, item.price);
|
||||
}, 0);
|
||||
},
|
||||
[calculateItemAmount]
|
||||
);
|
||||
|
||||
const calculateTotalAmount = useMemo(
|
||||
() =>
|
||||
(sections = []) => {
|
||||
if (!Array.isArray(sections)) return 0;
|
||||
|
||||
return sections.reduce((sum, section) => {
|
||||
if (!section) return sum;
|
||||
return sum + calculateSectionTotal(section.items);
|
||||
}, 0);
|
||||
},
|
||||
[calculateSectionTotal]
|
||||
);
|
||||
|
||||
const formatCurrency = useMemo(
|
||||
() =>
|
||||
(amount, currency = form.getFieldValue("currency")) => {
|
||||
const safeAmount = Number(amount) || 0;
|
||||
const currencySymbol =
|
||||
{
|
||||
CNY: "¥",
|
||||
TWD: "NT$",
|
||||
USD: "$",
|
||||
}[currency] || "";
|
||||
|
||||
return `${currencySymbol}${safeAmount.toLocaleString("zh-CN", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}`;
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleValuesChange = (changedValues, allValues) => {
|
||||
setFormValues(allValues);
|
||||
};
|
||||
|
||||
const [editingSectionName, setEditingSectionName] = useState('');
|
||||
|
||||
// 处理小节名称编辑
|
||||
const handleSectionNameEdit = (sectionIndex, initialValue) => {
|
||||
setEditingSectionIndex(sectionIndex);
|
||||
setEditingSectionName(initialValue || '');
|
||||
};
|
||||
|
||||
// 保存小节名称
|
||||
const handleSectionNameSave = () => {
|
||||
if (!editingSectionName.trim()) {
|
||||
message.error('请输入小节名称');
|
||||
return;
|
||||
}
|
||||
|
||||
const sections = form.getFieldValue('sections');
|
||||
const newSections = [...sections];
|
||||
newSections[editingSectionIndex] = {
|
||||
...newSections[editingSectionIndex],
|
||||
sectionName: editingSectionName.trim()
|
||||
};
|
||||
form.setFieldValue('sections', newSections);
|
||||
setEditingSectionIndex(null);
|
||||
setEditingSectionName('');
|
||||
};
|
||||
|
||||
// 取消编辑
|
||||
const handleSectionNameCancel = () => {
|
||||
setEditingSectionIndex(null);
|
||||
setEditingSectionName('');
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
title={
|
||||
<span className="text-gray-800 dark:text-gray-200">
|
||||
{id ? (isEdit ? "编辑服务模版" : "查看服务模版") : "新增服务模版"}
|
||||
</span>
|
||||
}
|
||||
className="dark:bg-gray-800"
|
||||
extra={
|
||||
<Space>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate("/company/serviceTeamplate")}
|
||||
className="flex items-center"
|
||||
>
|
||||
返回列表
|
||||
</Button>
|
||||
{id && !isEdit && (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() =>
|
||||
navigate(`/company/serviceTemplateInfo/${id}?edit=true`)
|
||||
}
|
||||
className="flex items-center"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={onFinish}
|
||||
initialValues={{
|
||||
sections: [{ items: [{}] }],
|
||||
currency: "CNY",
|
||||
}}
|
||||
disabled={id && !isEdit}
|
||||
onValuesChange={handleValuesChange}
|
||||
>
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
|
||||
<Title level={5} className="mb-4 dark:text-gray-200">
|
||||
基本信息
|
||||
</Title>
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<Form.Item
|
||||
label="模版名称"
|
||||
name="templateName"
|
||||
rules={[{ required: true, message: "请输入模版名称" }]}
|
||||
>
|
||||
<Input placeholder="请输入模版名称" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="货币单位"
|
||||
name="currency"
|
||||
rules={[{ required: true, message: "请选择货币单位" }]}
|
||||
initialValue="CNY"
|
||||
>
|
||||
<Select options={currencyOptions} placeholder="请选择货币单位" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="模版分类"
|
||||
name="category"
|
||||
rules={[{ required: true, message: "请选择或输入分类" }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择或输入分类"
|
||||
showSearch
|
||||
allowClear
|
||||
mode="tags"
|
||||
options={[
|
||||
{ value: "VI设计", label: "VI设计" },
|
||||
{ value: "平面设计", label: "平面设计" },
|
||||
{ value: "网站建设", label: "网站建设" },
|
||||
{ value: "营销推广", label: "营销推广" },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="模版描述"
|
||||
name="description"
|
||||
className="col-span-2"
|
||||
>
|
||||
<Input.TextArea rows={4} placeholder="请输入模版描述" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<Title level={5} className="!mb-0 dark:text-gray-200">
|
||||
报价明细
|
||||
</Title>
|
||||
{(!id || isEdit) && (
|
||||
<Select
|
||||
style={{ width: 200 }}
|
||||
placeholder="选择已有小节"
|
||||
onChange={handleAddExistingSection}
|
||||
options={availableSections.map((section) => ({
|
||||
value: section.id,
|
||||
label: section.attributes.sectionName,
|
||||
}))}
|
||||
className="w-48"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Form.List name="sections">
|
||||
{(fields, { add: addSection, remove: removeSection }) => (
|
||||
<>
|
||||
<div className="space-y-6">
|
||||
{fields.map((field, sectionIndex) => (
|
||||
<Card
|
||||
key={field.key}
|
||||
className="!border-gray-200 dark:!border-gray-700 dark:bg-gray-800 hover:shadow-md transition-shadow duration-300"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2 ">
|
||||
{editingSectionIndex === sectionIndex ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
placeholder="请输入小节名称"
|
||||
className="!w-[200px]"
|
||||
value={editingSectionName}
|
||||
onChange={e => setEditingSectionName(e.target.value)}
|
||||
onPressEnter={handleSectionNameSave}
|
||||
autoFocus
|
||||
/>
|
||||
<Space className="flex items-center gap-2">
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
onClick={handleSectionNameSave}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={handleSectionNameCancel}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Text
|
||||
strong
|
||||
className="text-lg dark:text-gray-200"
|
||||
>
|
||||
{form.getFieldValue([
|
||||
"sections",
|
||||
sectionIndex,
|
||||
"sectionName",
|
||||
]) || `服务类型 ${sectionIndex + 1}`}
|
||||
</Text>
|
||||
{(!id || isEdit) && (
|
||||
<Button
|
||||
type="text"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() =>
|
||||
handleSectionNameEdit(
|
||||
sectionIndex,
|
||||
form.getFieldValue([
|
||||
"sections",
|
||||
sectionIndex,
|
||||
"sectionName",
|
||||
])
|
||||
)
|
||||
}
|
||||
size="small"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Text className="text-gray-500 dark:text-gray-400">
|
||||
合计:{" "}
|
||||
{formatCurrency(
|
||||
calculateSectionTotal(
|
||||
formValues?.sections?.[sectionIndex]?.items
|
||||
)
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* 表头 */}
|
||||
<div className="grid grid-cols-[3fr_4fr_1fr_1fr_2fr_1fr_40px] gap-4 mb-2 text-gray-500 dark:text-gray-400 px-2">
|
||||
<div>项目明细</div>
|
||||
<div>描述/备注</div>
|
||||
<div className="text-center">数量</div>
|
||||
<div className="text-center">单位</div>
|
||||
<div className="text-center">单价</div>
|
||||
<div className="text-right">小计</div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<Form.List name={[field.name, "items"]}>
|
||||
{(itemFields, { add: addItem, remove: removeItem }) => (
|
||||
<>
|
||||
{itemFields.map((itemField, itemIndex) => (
|
||||
<div
|
||||
key={itemField.key}
|
||||
className="grid grid-cols-[3fr_4fr_1fr_1fr_2fr_1fr_40px] gap-4 mb-4 items-start"
|
||||
>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "name"]}
|
||||
className="!mb-0"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请输入服务项目名称",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input placeholder="服务项目名称" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "description"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<Input placeholder="请输入描述/备注" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "quantity"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="数量"
|
||||
min={0}
|
||||
className="w-full"
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "unit"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<Input placeholder="单位" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "price"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<InputNumber
|
||||
placeholder="单价"
|
||||
min={0}
|
||||
className="w-full"
|
||||
/>
|
||||
</Form.Item>
|
||||
<div className="text-right">
|
||||
<Text className="text-gray-500 dark:text-gray-400">
|
||||
{formatCurrency(
|
||||
calculateItemAmount(
|
||||
formValues?.sections?.[sectionIndex]
|
||||
?.items?.[itemIndex]?.quantity,
|
||||
formValues?.sections?.[sectionIndex]
|
||||
?.items?.[itemIndex]?.price
|
||||
)
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{(!id || isEdit) && itemFields.length > 1 && (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => removeItem(itemField.name)}
|
||||
className="flex items-center justify-center"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{(!id || isEdit) && (
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => addItem()}
|
||||
icon={<PlusOutlined />}
|
||||
className="w-full hover:border-blue-400 hover:text-blue-500 mb-4 dark:border-gray-600 dark:text-gray-400 dark:hover:text-blue-400"
|
||||
>
|
||||
添加服务项目
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end border-t dark:border-gray-700 pt-4">
|
||||
<Text className="text-gray-500 dark:text-gray-400">
|
||||
小计总额：
|
||||
<span className="text-blue-500 dark:text-blue-400 font-medium ml-2">
|
||||
{formatCurrency(
|
||||
calculateSectionTotal(
|
||||
formValues?.sections?.[sectionIndex]
|
||||
?.items
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</Text>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{(!id || isEdit) && (
|
||||
<div className="mt-6 flex gap-4 justify-center">
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => addSection({ items: [{}] })}
|
||||
icon={<PlusOutlined />}
|
||||
className="w-1/3 hover:border-blue-400 hover:text-blue-500 dark:border-gray-600 dark:text-gray-400 dark:hover:text-blue-400"
|
||||
>
|
||||
新建小节
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 总金额统计 */}
|
||||
<div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="flex flex-col gap-2">
|
||||
|
||||
<div className="flex justify-between items-center mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<span className="text-base font-medium text-gray-700 dark:text-gray-300">
|
||||
总金额
|
||||
</span>
|
||||
<span className="text-xl font-semibold text-blue-500 dark:text-blue-400">
|
||||
{formatCurrency(
|
||||
calculateTotalAmount(formValues?.sections)
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
</div>
|
||||
|
||||
{(!id || isEdit) && (
|
||||
<div className="mt-6 flex justify-end gap-4">
|
||||
<Button
|
||||
onClick={() => navigate("/company/serviceTeamplate")}
|
||||
className="px-6 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
loading={loading}
|
||||
className="px-6 hover:opacity-90"
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceForm;
|
||||
@@ -1,43 +1,375 @@
|
||||
import React from 'react';
|
||||
import { Card, Table, Button } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { Card, Table, Button, Space, Input, message, Popconfirm } from "antd";
|
||||
import { EyeOutlined } from "@ant-design/icons";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { supabase } from "@/config/supabase";
|
||||
|
||||
const ServicePage = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState([]);
|
||||
const navigate = useNavigate();
|
||||
const [editingKey, setEditingKey] = useState('');
|
||||
|
||||
// 获取服务模板列表
|
||||
const fetchServices = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data: services, error } = await supabase
|
||||
.from("resources")
|
||||
.select("*")
|
||||
.eq("type", "serviceTemplate")
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
if (error) throw error;
|
||||
setData(services);
|
||||
} catch (error) {
|
||||
console.error("获取服务模板失败:", error);
|
||||
message.error("获取服务模板失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加保存编辑项目的方法
|
||||
const handleSaveItem = async (record, sectionIndex, itemIndex) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const newData = [...data];
|
||||
const targetService = newData.find(item => item.id === record.serviceId);
|
||||
targetService.attributes.sections[sectionIndex].items[itemIndex] = record;
|
||||
|
||||
// 计算新的总金额
|
||||
const newTotalAmount = targetService.attributes.sections.reduce((total, section) => {
|
||||
return total + section.items.reduce((sectionTotal, item) =>
|
||||
sectionTotal + (item.price * item.quantity), 0);
|
||||
}, 0);
|
||||
|
||||
targetService.attributes.totalAmount = newTotalAmount;
|
||||
|
||||
const { error } = await supabase
|
||||
.from('resources')
|
||||
.update({ attributes: targetService.attributes })
|
||||
.eq('id', targetService.id);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
setData(newData);
|
||||
setEditingKey('');
|
||||
message.success('更新成功');
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
message.error('保存失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加删除项目的方法
|
||||
const handleDeleteItem = async (record) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const newData = [...data];
|
||||
const targetService = newData.find(item => item.id === record.serviceId);
|
||||
|
||||
// 删除指定项目
|
||||
targetService.attributes.sections[record.sectionIndex].items.splice(record.itemIndex, 1);
|
||||
|
||||
// 重新计算总金额
|
||||
const newTotalAmount = targetService.attributes.sections.reduce((total, section) => {
|
||||
return total + section.items.reduce((sectionTotal, item) =>
|
||||
sectionTotal + (item.price * item.quantity), 0);
|
||||
}, 0);
|
||||
|
||||
targetService.attributes.totalAmount = newTotalAmount;
|
||||
|
||||
const { error } = await supabase
|
||||
.from('resources')
|
||||
.update({ attributes: targetService.attributes })
|
||||
.eq('id', targetService.id);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
setData(newData);
|
||||
message.success('删除成功');
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error);
|
||||
message.error('删除失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 主表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '服务名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
title: "模板名称",
|
||||
dataIndex: ["attributes", "templateName"],
|
||||
key: "templateName",
|
||||
className: "min-w-[200px]",
|
||||
},
|
||||
{
|
||||
title: '服务类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
title: "描述",
|
||||
dataIndex: ["attributes", "description"],
|
||||
key: "description",
|
||||
},
|
||||
{
|
||||
title: '价格',
|
||||
dataIndex: 'price',
|
||||
key: 'price',
|
||||
title: "总金额",
|
||||
dataIndex: ["attributes", "totalAmount"],
|
||||
key: "totalAmount",
|
||||
className: "min-w-[150px] text-right",
|
||||
render: (amount) => (
|
||||
<span className="text-blue-600 font-medium">
|
||||
¥
|
||||
{amount?.toLocaleString("zh-CN", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}) || "0.00"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
title: "操作",
|
||||
key: "action",
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() =>
|
||||
navigate(`/company/serviceTemplateInfo/${record.id}`)
|
||||
}
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="服务管理"
|
||||
extra={
|
||||
<Button type="primary" icon={<PlusOutlined />}>
|
||||
新增服务
|
||||
</Button>
|
||||
// 子表格列定义
|
||||
const itemColumns = [
|
||||
{
|
||||
title: "项目名称",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "40%",
|
||||
render: (text, record) => {
|
||||
const isEditing = record.key === editingKey;
|
||||
return isEditing ? (
|
||||
<Input
|
||||
value={text}
|
||||
onChange={e => {
|
||||
const newData = [...data];
|
||||
const targetService = newData.find(item => item.id === record.serviceId);
|
||||
const targetItem = targetService.attributes.sections[record.sectionIndex].items[record.itemIndex];
|
||||
targetItem.name = e.target.value;
|
||||
setData(newData);
|
||||
}}
|
||||
/>
|
||||
) : text;
|
||||
}
|
||||
>
|
||||
<Table columns={columns} dataSource={[]} rowKey="id" />
|
||||
</Card>
|
||||
},
|
||||
{
|
||||
title: "单价",
|
||||
dataIndex: "price",
|
||||
key: "price",
|
||||
width: "20%",
|
||||
render: (price, record) => {
|
||||
const isEditing = record.key === editingKey;
|
||||
return isEditing ? (
|
||||
<Input
|
||||
type="number"
|
||||
value={price}
|
||||
onChange={e => {
|
||||
const newData = [...data];
|
||||
const targetService = newData.find(item => item.id === record.serviceId);
|
||||
const targetItem = targetService.attributes.sections[record.sectionIndex].items[record.itemIndex];
|
||||
targetItem.price = Number(e.target.value);
|
||||
setData(newData);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span className="text-gray-600">
|
||||
¥{price?.toLocaleString("zh-CN", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "数量",
|
||||
dataIndex: "quantity",
|
||||
key: "quantity",
|
||||
width: "20%",
|
||||
render: (quantity, record) => {
|
||||
const isEditing = record.key === editingKey;
|
||||
return isEditing ? (
|
||||
<Input
|
||||
type="number"
|
||||
value={quantity}
|
||||
onChange={e => {
|
||||
const newData = [...data];
|
||||
const targetService = newData.find(item => item.id === record.serviceId);
|
||||
const targetItem = targetService.attributes.sections[record.sectionIndex].items[record.itemIndex];
|
||||
targetItem.quantity = Number(e.target.value);
|
||||
setData(newData);
|
||||
}}
|
||||
/>
|
||||
) : <span className="text-gray-600">{quantity}</span>;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "小计",
|
||||
key: "subtotal",
|
||||
width: "20%",
|
||||
render: (_, record) => (
|
||||
<span className="text-blue-600 font-medium">
|
||||
¥
|
||||
{((record.price || 0) * (record.quantity || 0)).toLocaleString(
|
||||
"zh-CN",
|
||||
{
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: "150px",
|
||||
render: (_, record) => {
|
||||
const isEditing = record.key === editingKey;
|
||||
return isEditing ? (
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
className="text-green-600"
|
||||
onClick={() => handleSaveItem(record, record.sectionIndex, record.itemIndex)}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
className="text-gray-600"
|
||||
onClick={() => setEditingKey('')}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
</Space>
|
||||
) : (
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
className="text-blue-600"
|
||||
disabled={editingKey !== ''}
|
||||
onClick={() => setEditingKey(record.key)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="删除确认"
|
||||
description="确定要删除这个项目吗？"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
okButtonProps={{ danger: true }}
|
||||
onConfirm={() => handleDeleteItem(record)}
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
className="text-red-600"
|
||||
disabled={editingKey !== ''}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// 修改 expandedRowRender 以支持编辑
|
||||
const expandedRowRender = (record) => (
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
{record.attributes.sections?.map((section, sectionIndex) => (
|
||||
<Card
|
||||
key={sectionIndex}
|
||||
className="mb-4 shadow-sm"
|
||||
title={
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-lg font-medium">{section.sectionName}</span>
|
||||
<span className="text-blue-600 font-medium">
|
||||
总计: ¥
|
||||
{section.items
|
||||
.reduce(
|
||||
(total, item) => total + item.price * item.quantity,
|
||||
0
|
||||
)
|
||||
.toLocaleString("zh-CN", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
columns={itemColumns}
|
||||
dataSource={section.items.map((item, itemIndex) => ({
|
||||
...item,
|
||||
key: `${sectionIndex}-${itemIndex}`,
|
||||
serviceId: record.id,
|
||||
sectionIndex: sectionIndex,
|
||||
itemIndex: itemIndex
|
||||
}))}
|
||||
pagination={false}
|
||||
className="rounded-lg overflow-hidden"
|
||||
/>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchServices();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 ">
|
||||
<Card
|
||||
title={<span className="text-xl font-medium">服务模版管理</span>}
|
||||
className="shadow-lg rounded-lg"
|
||||
extra={
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => navigate("/company/serviceTemplateInfo")}
|
||||
>
|
||||
新建模版
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
rowKey="id"
|
||||
expandable={{
|
||||
expandedRowRender,
|
||||
}}
|
||||
className="rounded-lg overflow-hidden"
|
||||
rowClassName="hover:bg-gray-50 transition-colors"
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServicePage;
|
||||
export default ServicePage;
|
||||
|
||||
169
src/pages/company/service/serviceType/index.jsx
Normal file
169
src/pages/company/service/serviceType/index.jsx
Normal file
@@ -0,0 +1,169 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Table, Button, Modal, Form, Input, Space, message } from 'antd';
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
|
||||
const ServiceType = () => {
|
||||
const [data, setData] = useState([]);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
const [editingId, setEditingId] = useState(null);
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '服务类型',
|
||||
dataIndex: 'serviceType',
|
||||
key: 'serviceType',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button type="link" onClick={() => handleEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button type="link" danger onClick={() => handleDelete(record.id)}>
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// 处理添加/编辑表单提交
|
||||
const handleSubmit = async (values) => {
|
||||
try {
|
||||
if (editingId) {
|
||||
// 编辑操作
|
||||
// await updateServiceType({ ...values, id: editingId });
|
||||
message.success('更新成功');
|
||||
} else {
|
||||
// 添加操作
|
||||
// await addServiceType(values);
|
||||
message.success('添加成功');
|
||||
}
|
||||
setVisible(false);
|
||||
form.resetFields();
|
||||
// 重新加载数据
|
||||
// loadData();
|
||||
} catch (error) {
|
||||
message.error('操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 编辑操作
|
||||
const handleEdit = (record) => {
|
||||
setEditingId(record.id);
|
||||
form.setFieldsValue({
|
||||
serviceType: record.serviceType,
|
||||
details: record.details || [],
|
||||
});
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
// 删除操作
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
// await deleteServiceType(id);
|
||||
message.success('删除成功');
|
||||
// 重新加载数据
|
||||
// loadData();
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setEditingId(null);
|
||||
form.resetFields();
|
||||
setVisible(true);
|
||||
}}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<PlusOutlined /> 新增服务类型
|
||||
</Button>
|
||||
|
||||
<Table columns={columns} dataSource={data} rowKey="id" />
|
||||
|
||||
<Modal
|
||||
title={editingId ? '编辑服务类型' : '新增服务类型'}
|
||||
open={visible}
|
||||
onOk={() => form.submit()}
|
||||
onCancel={() => {
|
||||
setVisible(false);
|
||||
form.resetFields();
|
||||
}}
|
||||
width={800}
|
||||
>
|
||||
<Form form={form} onFinish={handleSubmit}>
|
||||
<Form.Item
|
||||
label="服务类型"
|
||||
name="serviceType"
|
||||
rules={[{ required: true, message: '请输入服务类型' }]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.List name="details">
|
||||
{(fields, { add, remove }) => (
|
||||
<>
|
||||
{fields.map(({ key, name, ...restField }) => (
|
||||
<Space key={key} align="baseline">
|
||||
<Form.Item
|
||||
{...restField}
|
||||
name={[name, 'projectDetail']}
|
||||
rules={[{ required: true, message: '请输入项目明细' }]}
|
||||
>
|
||||
<Input placeholder="项目明细" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...restField}
|
||||
name={[name, 'description']}
|
||||
rules={[{ required: true, message: '请输入描述' }]}
|
||||
>
|
||||
<Input placeholder="描述" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...restField}
|
||||
name={[name, 'quantity']}
|
||||
rules={[{ required: true, message: '请输入数量' }]}
|
||||
>
|
||||
<Input placeholder="数量" type="number" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...restField}
|
||||
name={[name, 'unit']}
|
||||
rules={[{ required: true, message: '请输入单位' }]}
|
||||
>
|
||||
<Input placeholder="单位" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...restField}
|
||||
name={[name, 'price']}
|
||||
rules={[{ required: true, message: '请输入单价' }]}
|
||||
>
|
||||
<Input placeholder="单价" type="number" />
|
||||
</Form.Item>
|
||||
<DeleteOutlined onClick={() => remove(name)} />
|
||||
</Space>
|
||||
))}
|
||||
<Form.Item>
|
||||
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
|
||||
添加项目明细
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceType;
|
||||
Reference in New Issue
Block a user