feat:v1
This commit is contained in:
‘Liammcl’
@@ -1,119 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Table } from 'antd';
|
||||
|
||||
const PrintView = ({ data }) => {
|
||||
const columns = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
width: 60,
|
||||
render: (_, __, index) => index + 1,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'productName',
|
||||
width: '40%',
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
dataIndex: 'quantity',
|
||||
width: '20%',
|
||||
align: 'right',
|
||||
render: (value) => value?.toLocaleString('zh-CN', { minimumFractionDigits: 2 }),
|
||||
},
|
||||
{
|
||||
title: '单价',
|
||||
dataIndex: 'price',
|
||||
width: '20%',
|
||||
align: 'right',
|
||||
render: (value) => value?.toLocaleString('zh-CN', { minimumFractionDigits: 2 }),
|
||||
},
|
||||
{
|
||||
title: '小计',
|
||||
width: '20%',
|
||||
align: 'right',
|
||||
render: (_, record) => (
|
||||
(record.quantity * record.price)?.toLocaleString('zh-CN', { minimumFractionDigits: 2 })
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="print-wrapper">
|
||||
<div className="print-header">
|
||||
<h1>{data.attributes.quataName}</h1>
|
||||
<div className="quotation-id">报价单号：{data.id}</div>
|
||||
</div>
|
||||
|
||||
<div className="info-grid">
|
||||
<div className="info-item">
|
||||
<span className="info-label">客户公司</span>
|
||||
<span className="info-value">{data.attributes.companyName}</span>
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<span className="info-label">供应商</span>
|
||||
<span className="info-value">{data.attributes.supplierName}</span>
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<span className="info-label">报价日期</span>
|
||||
<span className="info-value">
|
||||
{new Date(data.created_at).toLocaleDateString('zh-CN')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="info-item">
|
||||
<span className="info-label">报价有效期</span>
|
||||
<span className="info-value">
|
||||
{new Date(Date.now() + 30*24*60*60*1000).toLocaleDateString('zh-CN')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="section-title">报价明细</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data.attributes.items}
|
||||
pagination={false}
|
||||
rowKey={(record, index) => index}
|
||||
bordered
|
||||
summary={() => (
|
||||
<Table.Summary fixed>
|
||||
<Table.Summary.Row>
|
||||
<Table.Summary.Cell index={0} colSpan={4} align="right">
|
||||
总计（{data.attributes.currency}）：
|
||||
</Table.Summary.Cell>
|
||||
<Table.Summary.Cell index={1} align="right">
|
||||
<span style={{ color: '#1890ff', fontSize: '16px' }}>
|
||||
{data.attributes.totalAmount?.toLocaleString('zh-CN', {
|
||||
minimumFractionDigits: 2,
|
||||
style: 'currency',
|
||||
currency: data.attributes.currency
|
||||
})}
|
||||
</span>
|
||||
</Table.Summary.Cell>
|
||||
</Table.Summary.Row>
|
||||
</Table.Summary>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{data.attributes.description && (
|
||||
<div className="description-section">
|
||||
<div className="section-title">补充说明</div>
|
||||
<div>{data.attributes.description}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="notes-section">
|
||||
<div className="notes-title">注意事项：</div>
|
||||
<ul className="notes-list">
|
||||
<li>本报价单有效期为30天</li>
|
||||
<li>最终解释权归本公司所有</li>
|
||||
<li>如有疑问请及时联系我们</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PrintView;
|
||||
@@ -328,6 +328,49 @@ const SectionList = ({
|
||||
</div>
|
||||
);
|
||||
});
|
||||
const addSectionFn = async (field) => {
|
||||
try {
|
||||
await form.validateFields(['sections', field.name]);
|
||||
|
||||
const allValues = form.getFieldsValue(true);
|
||||
const currentSection = allValues.sections[field.name];
|
||||
|
||||
if (!currentSection) {
|
||||
throw new Error('未找到section数据');
|
||||
}
|
||||
|
||||
const templateData = {
|
||||
type: 'sections',
|
||||
attributes: {
|
||||
name: currentSection.sectionName,
|
||||
template_type: type,
|
||||
items: currentSection.items.map(item => ({
|
||||
name: item.name,
|
||||
description: item.description,
|
||||
quantity: item.quantity,
|
||||
price: item.price,
|
||||
unit: item.unit
|
||||
}))
|
||||
},
|
||||
schema_version: 1
|
||||
};
|
||||
|
||||
console.log('准备保存的数据:', templateData);
|
||||
|
||||
const { error } = await supabase
|
||||
.from('resources')
|
||||
.insert([templateData]);
|
||||
|
||||
if (error) throw error;
|
||||
message.success('保存模板成功');
|
||||
|
||||
fetchAvailableSections();
|
||||
|
||||
} catch (error) {
|
||||
message.error('保存模板失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Form.List name="sections">
|
||||
@@ -400,12 +443,21 @@ const SectionList = ({
|
||||
)}
|
||||
</div>
|
||||
{!isView && (
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => addSectionFn(field)}
|
||||
>
|
||||
添加到模版
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => remove(field.name)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -289,7 +289,48 @@ const SectionList = ({ form, isView, formValues, type }) => {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
const addSectionFn = async (field) => {
|
||||
try {
|
||||
await form.validateFields(['sections', field.name]);
|
||||
|
||||
const allValues = form.getFieldsValue(true);
|
||||
const currentSection = allValues.sections[field.name];
|
||||
|
||||
if (!currentSection) {
|
||||
throw new Error('未找到section数据');
|
||||
}
|
||||
|
||||
const templateData = {
|
||||
type: 'sections',
|
||||
attributes: {
|
||||
name: currentSection.sectionName,
|
||||
template_type: type,
|
||||
items: currentSection.items.map(item => ({
|
||||
name: item.name,
|
||||
description: item.description,
|
||||
quantity: item.quantity,
|
||||
price: item.price,
|
||||
unit: item.unit
|
||||
}))
|
||||
},
|
||||
schema_version: 1
|
||||
};
|
||||
|
||||
|
||||
const { error } = await supabase
|
||||
.from('resources')
|
||||
.insert([templateData]);
|
||||
|
||||
if (error) throw error;
|
||||
message.success('保存模板成功');
|
||||
|
||||
fetchAvailableSections();
|
||||
|
||||
} catch (error) {
|
||||
message.error('保存模板失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Form.List name="sections">
|
||||
@@ -362,12 +403,23 @@ const SectionList = ({ form, isView, formValues, type }) => {
|
||||
)}
|
||||
</div>
|
||||
{!isView && (
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => addSectionFn(field)}
|
||||
className="ml-2"
|
||||
>
|
||||
添加到模版
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => remove(field.name)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
@@ -516,6 +568,7 @@ const SectionList = ({ form, isView, formValues, type }) => {
|
||||
</Form.Item>
|
||||
|
||||
{!isView && itemFields.length > 1 && (
|
||||
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
@@ -523,6 +576,7 @@ const SectionList = ({ form, isView, formValues, type }) => {
|
||||
onClick={() => removeItem(itemField.name)}
|
||||
className="flex items-center justify-center"
|
||||
/>
|
||||
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,12 +9,12 @@ const TEMPLATE_TYPES = [
|
||||
icon: <FileTextOutlined className="text-2xl text-blue-500" />,
|
||||
description: '创建标准化的报价单模板，包含服务项目、价格等信息'
|
||||
},
|
||||
{
|
||||
key: 'project',
|
||||
title: '专案模板',
|
||||
icon: <ProjectOutlined className="text-2xl text-green-500" />,
|
||||
description: '创建专案流程模板，包含项目阶段、时间线等信息'
|
||||
},
|
||||
// {
|
||||
// key: 'project',
|
||||
// title: '专案模板',
|
||||
// icon: <ProjectOutlined className="text-2xl text-green-500" />,
|
||||
// description: '创建专案流程模板，包含项目阶段、时间线等信息'
|
||||
// },
|
||||
{
|
||||
key: 'task',
|
||||
title: '任务模板',
|
||||
|
||||
@@ -14,6 +14,7 @@ const Dashboard = () => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div>测试：member可见，最低权限</div>
|
||||
{/* <StatisticsOverview /> */}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -105,10 +105,12 @@ const QuotationForm = () => {
|
||||
},
|
||||
[currentCurrency]
|
||||
);
|
||||
useEffect(()=>{
|
||||
console.log(currentCurrency,'currency');
|
||||
|
||||
},[currentCurrency])
|
||||
// 处理表单值变化
|
||||
const handleValuesChange = (changedValues, allValues) => {
|
||||
console.log("Form values changed:", allValues); // 调试用
|
||||
setFormValues(allValues);
|
||||
if (changedValues.currency) {
|
||||
setCurrentCurrency(changedValues.currency);
|
||||
@@ -153,7 +155,6 @@ const QuotationForm = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// 修改获取详情的函数
|
||||
const fetchQuotationDetail = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
@@ -404,7 +405,7 @@ const QuotationForm = () => {
|
||||
const quotationData = {
|
||||
quataName: template.attributes.templateName,
|
||||
description: template.attributes.description,
|
||||
currency: "CNY",
|
||||
currency: template.attributes.currency || "CNY",
|
||||
category: template.attributes.category,
|
||||
sections: template.attributes.sections.map((section) => ({
|
||||
key: uuidv4(),
|
||||
@@ -419,7 +420,7 @@ const QuotationForm = () => {
|
||||
})),
|
||||
})),
|
||||
};
|
||||
|
||||
setCurrentCurrency(template.attributes.currency || "CNY");
|
||||
form.setFieldsValue(quotationData);
|
||||
setFormValues(quotationData);
|
||||
}
|
||||
@@ -518,68 +519,6 @@ const QuotationForm = () => {
|
||||
fetchCustomers();
|
||||
}, []);
|
||||
|
||||
const renderItemFields = (itemField, itemIndex, sectionIndex) => (
|
||||
<div
|
||||
key={`${sectionIndex}-${itemIndex}-${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, "productName"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<Input placeholder="服务项目名称" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "note"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<Input placeholder="请输入描述/备注" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...itemField}
|
||||
name={[itemField.name, "unit"]}
|
||||
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, "price"]}
|
||||
className="!mb-0"
|
||||
>
|
||||
<InputNumber placeholder="单价" min={0} className="w-full" />
|
||||
</Form.Item>
|
||||
<div className="text-right">
|
||||
<span className="text-gray-500">
|
||||
{formatCurrency(
|
||||
calculateItemAmount(
|
||||
formValues?.sections?.[sectionIndex]?.items?.[itemIndex]
|
||||
?.quantity,
|
||||
formValues?.sections?.[sectionIndex]?.items?.[itemIndex]?.price
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{!isView && itemFields.length > 1 && (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => removeItem(itemField.name)}
|
||||
className="flex items-center justify-center"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
// 确保在组件加载时正确获取数据
|
||||
useEffect(() => {
|
||||
@@ -594,35 +533,7 @@ const QuotationForm = () => {
|
||||
}
|
||||
}, [id, templateId]);
|
||||
|
||||
// 处理小节名称编辑
|
||||
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 (
|
||||
<div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 min-h-screen p-2">
|
||||
|
||||
@@ -87,6 +87,7 @@ const QuotationPage = () => {
|
||||
.from("resources")
|
||||
.select("*")
|
||||
.eq("type", "serviceTemplate")
|
||||
.eq("attributes->>template_type",'quotation')
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
if (error) throw error;
|
||||
@@ -309,13 +310,10 @@ const QuotationPage = () => {
|
||||
const copyItem = async (record) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 深拷贝原有数据的 attributes
|
||||
const newAttributes = JSON.parse(JSON.stringify(record.attributes));
|
||||
|
||||
// 修改报价单名称，添加"副本"标识
|
||||
newAttributes.quataName = `${newAttributes.quataName} (副本)`;
|
||||
|
||||
// 创建新的报价单记录
|
||||
const { data, error } = await supabase.from("resources").insert([
|
||||
{
|
||||
type: "quota",
|
||||
@@ -383,7 +381,11 @@ const QuotationPage = () => {
|
||||
setSelectedTemplateId(null);
|
||||
}}
|
||||
footer={[
|
||||
<Button key="custom" onClick={() => handleConfirm()}>
|
||||
<Button
|
||||
key="custom"
|
||||
onClick={() => handleConfirm()}
|
||||
className=" gap-2 px-6 rounded-full hover:bg-gray-100"
|
||||
>
|
||||
<FileAddOutlined /> 自定义创建
|
||||
</Button>,
|
||||
<Button
|
||||
@@ -391,12 +393,13 @@ const QuotationPage = () => {
|
||||
type="primary"
|
||||
disabled={!selectedTemplateId}
|
||||
onClick={handleConfirm}
|
||||
className="gap-2 px-6 rounded-full bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
<AppstoreOutlined /> 使用选中模板
|
||||
</Button>,
|
||||
]}
|
||||
width={900}
|
||||
className="template-modal dark:bg-gray-800"
|
||||
className="template-modal"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-[400px]">
|
||||
@@ -405,58 +408,62 @@ const QuotationPage = () => {
|
||||
) : templates.length === 0 ? (
|
||||
<Empty description="暂无可用模板" />
|
||||
) : (
|
||||
<div className="max-h-[600px] overflow-y-auto px-2">
|
||||
<div className="max-h-[600px] overflow-y-auto px-4">
|
||||
{getTemplatesByCategory().map((group, groupIndex) => (
|
||||
<div key={groupIndex} className="mb-8 last:mb-2">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
|
||||
<div key={groupIndex} className="mb-10 last:mb-2">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<h3 className="text-xl font-medium text-gray-900">
|
||||
{group.name}
|
||||
<span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span className="ml-2 text-sm text-gray-500">
|
||||
({group.templates.length})
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{group.templates.map((template) => (
|
||||
<div
|
||||
key={template.id}
|
||||
onClick={() => handleTemplateSelect(template.id)}
|
||||
className={`
|
||||
relative p-4 rounded-xl cursor-pointer transition-all duration-200
|
||||
relative p-6 rounded-xl cursor-pointer transition-all duration-200
|
||||
${
|
||||
selectedTemplateId === template.id
|
||||
? "ring-2 ring-blue-500 bg-blue-50/40 dark:bg-blue-900/40"
|
||||
: "hover:bg-gray-50 dark:hover:bg-gray-700/50 border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md"
|
||||
? "ring-2 ring-blue-500 bg-blue-50/40"
|
||||
: "hover:shadow-lg border border-gray-200 hover:border-blue-200"
|
||||
}
|
||||
dark:bg-gray-800
|
||||
transform hover:-translate-y-1
|
||||
`}
|
||||
>
|
||||
<div className="flex justify-between items-start gap-3 mb-3">
|
||||
<div className="flex justify-between items-start gap-3 mb-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-base font-medium text-gray-900 dark:text-gray-100 truncate">
|
||||
<h4 className="text-lg font-medium text-gray-900 truncate">
|
||||
{template.attributes.templateName}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1 line-clamp-2">
|
||||
<p className="text-sm text-gray-600 mt-2 line-clamp-2">
|
||||
{template.attributes.description || "暂无描述"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-blue-600 dark:text-blue-400 font-medium whitespace-nowrap">
|
||||
¥{template.attributes.totalAmount?.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-3">
|
||||
{template.attributes.sections.map((section, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white dark:bg-gray-700 rounded-lg p-2.5 text-sm border border-gray-100 dark:border-gray-600"
|
||||
className={`
|
||||
rounded-lg p-3 text-sm border
|
||||
${
|
||||
selectedTemplateId === template.id
|
||||
? "bg-white border-blue-200"
|
||||
: "bg-gray-50 border-gray-100"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-medium text-gray-700 dark:text-gray-200 truncate flex-1">
|
||||
<span className="font-medium text-gray-700 truncate flex-1">
|
||||
{section.sectionName}
|
||||
</span>
|
||||
<span className="text-gray-500 dark:text-gray-400 ml-2 text-xs">
|
||||
<span className="text-gray-500 ml-2 text-xs px-2 py-0.5 bg-gray-100 rounded-full">
|
||||
{section.items.length}项
|
||||
</span>
|
||||
</div>
|
||||
@@ -465,10 +472,10 @@ const QuotationPage = () => {
|
||||
</div>
|
||||
|
||||
{selectedTemplateId === template.id && (
|
||||
<div className="absolute top-3 right-3">
|
||||
<div className="w-5 h-5 bg-blue-500 dark:bg-blue-600 rounded-full flex items-center justify-center">
|
||||
<div className="absolute top-4 right-4">
|
||||
<div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center shadow-md">
|
||||
<svg
|
||||
className="w-3 h-3 text-white"
|
||||
className="w-4 h-4 text-white"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
|
||||
@@ -143,13 +143,11 @@ const QuotationPreview = () => {
|
||||
}
|
||||
>
|
||||
<div id="quotation-content" className="p-6">
|
||||
{/* 报价单标题 */}
|
||||
<div className="text-center mb-8">
|
||||
<Title level={2}>{attributes.quataName}</Title>
|
||||
<Text type="secondary">创建日期：{new Date(quotation.created_at).toLocaleDateString()}</Text>
|
||||
</div>
|
||||
|
||||
{/* 基本信息 */}
|
||||
<div className="bg-gray-50 p-4 rounded-lg mb-6">
|
||||
<Title level={4}>基本信息</Title>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
@@ -168,12 +166,11 @@ const QuotationPreview = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 报价明细 */}
|
||||
{attributes.sections?.map((section, sIndex) => (
|
||||
<div key={sIndex} className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="flex items-center gap-2 h-full">
|
||||
<div className="h-4 w-1 bg-blue-500 rounded-full" />
|
||||
<Title level={4} className="!mb-0">{section.sectionName}</Title>
|
||||
<h2>{section.sectionName}</h2>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
|
||||
@@ -11,9 +11,7 @@ const TaskTemplate = ({ id, isView, onCancel,isEdit }) => {
|
||||
sections: [{ items: [{}] }],
|
||||
});
|
||||
const [categories, setCategories] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (id) {
|
||||
fetchServiceTemplate();
|
||||
}
|
||||
|
||||
@@ -11,6 +11,8 @@ import {
|
||||
Divider,
|
||||
Input,
|
||||
InputNumber,
|
||||
Select,
|
||||
DatePicker,
|
||||
} from "antd";
|
||||
import {
|
||||
PlusOutlined,
|
||||
@@ -26,6 +28,9 @@ import {
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { supabaseService } from "@/hooks/supabaseService";
|
||||
import TemplateTypeModal from "@/components/TemplateTypeModal";
|
||||
import { useCallback } from "react";
|
||||
import { useMemo } from "react";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const ServicePage = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
@@ -34,9 +39,14 @@ const ServicePage = () => {
|
||||
const [editingKey, setEditingKey] = useState("");
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingItem, setEditingItem] = useState(null);
|
||||
const [loadingUnits, setloadingUnits] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
// 模板类型配置
|
||||
const [units, setUnits] = useState([]);
|
||||
const unitsFilter = useMemo(() => (type) =>
|
||||
units.filter(v =>
|
||||
v.attributes.template_type === type || v.attributes.template_type === "common"
|
||||
)
|
||||
, [units]);
|
||||
const TEMPLATE_TYPES = {
|
||||
quotation: {
|
||||
label: "报价单模板",
|
||||
@@ -78,17 +88,38 @@ const ServicePage = () => {
|
||||
setData(services || []);
|
||||
} catch (error) {
|
||||
console.error("获取服务模板失败:", error);
|
||||
message.error("获取服务模板失败");
|
||||
message.error("获取服<EFBFBD><EFBFBD><EFBFBD>模板失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUnits();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
fetchServices();
|
||||
}, [selectedType]);
|
||||
|
||||
// 删除服务模板
|
||||
const fetchUnits = async () => {
|
||||
setloadingUnits(true);
|
||||
try {
|
||||
const { data: units } = await supabaseService.select("resources", {
|
||||
filter: {
|
||||
type: { eq: "units" },
|
||||
},
|
||||
order: {
|
||||
column: "created_at",
|
||||
ascending: false,
|
||||
},
|
||||
});
|
||||
setUnits(units || []);
|
||||
} catch (error) {
|
||||
message.error("获取单位列表失败");
|
||||
console.error(error);
|
||||
} finally {
|
||||
setloadingUnits(false);
|
||||
}
|
||||
};
|
||||
const handleDeleteService = async (serviceId) => {
|
||||
try {
|
||||
await supabaseService.delete("resources", { id: serviceId });
|
||||
@@ -224,25 +255,25 @@ const ServicePage = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const table_warp=(record,section)=>{
|
||||
|
||||
switch(record.attributes.template_type){
|
||||
case 'quotation':
|
||||
return [
|
||||
const table_warp = (record, section) => {
|
||||
switch (record.attributes.template_type) {
|
||||
case "quotation":
|
||||
return [
|
||||
{
|
||||
title: "名称",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "15%",
|
||||
render: (text, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return isEditing ? (
|
||||
<Input
|
||||
defaultValue={text}
|
||||
onChange={(e) => {
|
||||
setEditingItem((prev) => ({
|
||||
...prev || item,
|
||||
name: e.target.value
|
||||
...(prev || item),
|
||||
name: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
@@ -252,22 +283,34 @@ return [
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
title: "单位",
|
||||
dataIndex: "unit",
|
||||
key: "unit",
|
||||
width: "10%",
|
||||
render: (text, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return isEditing ? (
|
||||
<Input
|
||||
<Select
|
||||
defaultValue={text}
|
||||
onChange={(e) => {
|
||||
placeholder="选择单位"
|
||||
loading={loadingUnits}
|
||||
showSearch
|
||||
allowClear
|
||||
onChange={(value) => {
|
||||
setEditingItem((prev) => ({
|
||||
...prev || item,
|
||||
unit: e.target.value
|
||||
...(prev || item),
|
||||
unit: value,
|
||||
}));
|
||||
}}
|
||||
style={{ minWidth: "120px" }}
|
||||
options={unitsFilter(record.attributes.template_type).map((unit) => ({
|
||||
label: unit.attributes.name,
|
||||
value: unit.attributes.name,
|
||||
}))}
|
||||
dropdownRender={(menu) => <>{menu}</>}
|
||||
/>
|
||||
|
||||
) : (
|
||||
<span>{text}</span>
|
||||
);
|
||||
@@ -279,14 +322,15 @@ return [
|
||||
key: "price",
|
||||
width: "10%",
|
||||
render: (text, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return isEditing ? (
|
||||
<InputNumber
|
||||
defaultValue={text}
|
||||
onChange={(value) => {
|
||||
setEditingItem((prev) => ({
|
||||
...prev || item,
|
||||
price: value
|
||||
...(prev || item),
|
||||
price: value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
@@ -301,14 +345,15 @@ return [
|
||||
key: "quantity",
|
||||
width: "10%",
|
||||
render: (text, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return isEditing ? (
|
||||
<InputNumber
|
||||
defaultValue={text}
|
||||
onChange={(value) => {
|
||||
setEditingItem((prev) => ({
|
||||
...prev || item,
|
||||
quantity: value
|
||||
...(prev || item),
|
||||
quantity: value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
@@ -322,14 +367,15 @@ return [
|
||||
dataIndex: "description",
|
||||
key: "description",
|
||||
render: (text, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return isEditing ? (
|
||||
<Input
|
||||
defaultValue={text}
|
||||
onChange={(e) => {
|
||||
setEditingItem((prev) => ({
|
||||
...prev || item,
|
||||
description: e.target.value
|
||||
...(prev || item),
|
||||
description: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
@@ -343,7 +389,8 @@ return [
|
||||
key: "action",
|
||||
width: 150,
|
||||
render: (_, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return (
|
||||
<Space>
|
||||
{isEditing ? (
|
||||
@@ -371,7 +418,9 @@ return [
|
||||
/>
|
||||
<Popconfirm
|
||||
title="确定要删除这一项吗？"
|
||||
onConfirm={() => handleDeleteItem(record, section.key, index)}
|
||||
onConfirm={() =>
|
||||
handleDeleteItem(record, section.key, index)
|
||||
}
|
||||
>
|
||||
<DeleteOutlined className="text-red-500 cursor-pointer" />
|
||||
</Popconfirm>
|
||||
@@ -381,8 +430,8 @@ return [
|
||||
);
|
||||
},
|
||||
},
|
||||
]
|
||||
case 'task':
|
||||
];
|
||||
case "task":
|
||||
return [
|
||||
{
|
||||
title: "名称",
|
||||
@@ -390,14 +439,15 @@ case 'task':
|
||||
key: "name",
|
||||
width: "15%",
|
||||
render: (text, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return isEditing ? (
|
||||
<Input
|
||||
defaultValue={text}
|
||||
onChange={(e) => {
|
||||
setEditingItem((prev) => ({
|
||||
...prev || item,
|
||||
name: e.target.value
|
||||
...(prev || item),
|
||||
name: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
@@ -411,16 +461,27 @@ case 'task':
|
||||
dataIndex: "unit",
|
||||
key: "unit",
|
||||
render: (text, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return isEditing ? (
|
||||
<Input
|
||||
<Select
|
||||
placeholder="选择执行状态"
|
||||
loading={loadingUnits}
|
||||
showSearch
|
||||
allowClear
|
||||
defaultValue={text}
|
||||
onChange={(e) => {
|
||||
onChange={(value) => {
|
||||
setEditingItem((prev) => ({
|
||||
...prev || item,
|
||||
unit: e.target.value
|
||||
...(prev || item),
|
||||
unit: value,
|
||||
}));
|
||||
}}
|
||||
style={{ minWidth: "120px" }}
|
||||
options={unitsFilter(record.attributes.template_type).map((unit) => ({
|
||||
label: unit.attributes.name,
|
||||
value: unit.attributes.name,
|
||||
}))}
|
||||
dropdownRender={(menu) => <>{menu}</>}
|
||||
/>
|
||||
) : (
|
||||
<span>{text}</span>
|
||||
@@ -432,27 +493,114 @@ case 'task':
|
||||
title: "开始时间",
|
||||
dataIndex: "timeRange",
|
||||
key: "startTime",
|
||||
render: (timeRange) => timeRange?.[0] || '-',
|
||||
width: "20%",
|
||||
render: (timeRange, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return isEditing ? (
|
||||
<DatePicker
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
placeholder="开始时间"
|
||||
defaultValue={timeRange?.[0] ? dayjs(timeRange[0]) : null}
|
||||
// 禁用晚于结束时间的日期
|
||||
disabledDate={(current) => {
|
||||
const endTime = editingItem?.timeRange?.[1];
|
||||
return endTime ? current && current.isAfter(dayjs(endTime), 'day') : false;
|
||||
}}
|
||||
// 对于同一天，禁用晚于结束时间的时间点
|
||||
disabledTime={(current) => {
|
||||
const endTime = editingItem?.timeRange?.[1];
|
||||
if (endTime && current && current.isSame(dayjs(endTime), 'day')) {
|
||||
const endHour = dayjs(endTime).hour();
|
||||
const endMinute = dayjs(endTime).minute();
|
||||
return {
|
||||
disabledHours: () => Array.from({ length: 24 - endHour - 1 }, (_, i) => i + endHour + 1),
|
||||
disabledMinutes: (selectedHour) =>
|
||||
selectedHour === endHour
|
||||
? Array.from({ length: 60 - endMinute - 1 }, (_, i) => i + endMinute + 1)
|
||||
: []
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}}
|
||||
onChange={(date) => {
|
||||
setEditingItem((prev) => ({
|
||||
...prev || item,
|
||||
timeRange: [
|
||||
date ? date.format('YYYY-MM-DD HH:mm') : null,
|
||||
prev?.timeRange?.[1] || null
|
||||
]
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span>{timeRange?.[0] || '-'}</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "结束时间",
|
||||
dataIndex: "timeRange",
|
||||
key: "endTime",
|
||||
render: (timeRange) => timeRange?.[1] || '-',
|
||||
width: "20%",
|
||||
render: (timeRange, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return isEditing ? (
|
||||
<DatePicker
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
placeholder="结束时间"
|
||||
defaultValue={timeRange?.[1] ? dayjs(timeRange[1]) : null}
|
||||
// 禁用早于开始时间的日期
|
||||
disabledDate={(current) => {
|
||||
const startTime = editingItem?.timeRange?.[0];
|
||||
return startTime ? current && current.isBefore(dayjs(startTime), 'day') : false;
|
||||
}}
|
||||
// 对于同一天，禁用早于开始时间的时间点
|
||||
disabledTime={(current) => {
|
||||
const startTime = editingItem?.timeRange?.[0];
|
||||
if (startTime && current && current.isSame(dayjs(startTime), 'day')) {
|
||||
const startHour = dayjs(startTime).hour();
|
||||
const startMinute = dayjs(startTime).minute();
|
||||
return {
|
||||
disabledHours: () => Array.from({ length: startHour }, (_, i) => i),
|
||||
disabledMinutes: (selectedHour) =>
|
||||
selectedHour === startHour
|
||||
? Array.from({ length: startMinute }, (_, i) => i)
|
||||
: []
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}}
|
||||
onChange={(date) => {
|
||||
setEditingItem((prev) => ({
|
||||
...prev || item,
|
||||
timeRange: [
|
||||
prev?.timeRange?.[0] || null,
|
||||
date ? date.format('YYYY-MM-DD HH:mm') : null
|
||||
]
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span>{timeRange?.[1] || '-'}</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "描述",
|
||||
dataIndex: "description",
|
||||
key: "description",
|
||||
render: (text, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return isEditing ? (
|
||||
<Input
|
||||
defaultValue={text}
|
||||
onChange={(e) => {
|
||||
setEditingItem((prev) => ({
|
||||
...prev || item,
|
||||
description: e.target.value
|
||||
...(prev || item),
|
||||
description: e.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
@@ -465,7 +613,8 @@ case 'task':
|
||||
title: "操作",
|
||||
key: "action",
|
||||
render: (_, item, index) => {
|
||||
const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
|
||||
const isEditing =
|
||||
editingKey === `${record.id}-${section.key}-${index}`;
|
||||
return (
|
||||
<Space>
|
||||
{isEditing ? (
|
||||
@@ -484,16 +633,18 @@ case 'task':
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* <EditOutlined
|
||||
<EditOutlined
|
||||
className="text-blue-600 cursor-pointer"
|
||||
onClick={() => {
|
||||
setEditingKey(`${record.id}-${section.key}-${index}`);
|
||||
setEditingItem(item); // 初始化编辑项
|
||||
}}
|
||||
/> */}
|
||||
/>
|
||||
<Popconfirm
|
||||
title="确定要删除这一项吗？"
|
||||
onConfirm={() => handleDeleteItem(record, section.key, index)}
|
||||
onConfirm={() =>
|
||||
handleDeleteItem(record, section.key, index)
|
||||
}
|
||||
>
|
||||
<DeleteOutlined className="text-red-500 cursor-pointer" />
|
||||
</Popconfirm>
|
||||
@@ -503,22 +654,21 @@ case 'task':
|
||||
);
|
||||
},
|
||||
},
|
||||
]
|
||||
];
|
||||
case "project":
|
||||
default:[]
|
||||
}
|
||||
|
||||
|
||||
|
||||
default:
|
||||
[];
|
||||
}
|
||||
};
|
||||
const expandedRowRender = (record) => {
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 dark:bg-gray-600 p-4 rounded-lg">
|
||||
{record.attributes.sections.map((section) => (
|
||||
<div key={section.key} className="mb-6 rounded-lg shadow-sm p-4">
|
||||
<div className="flex items-center justify-between mb-3 border-b pb-2">
|
||||
<h3 className="text-lg font-medium text-gray-800">{section.sectionName}</h3>
|
||||
<h3 className="text-lg font-medium text-gray-800">
|
||||
{section.sectionName}
|
||||
</h3>
|
||||
<Popconfirm
|
||||
title="确定要删除这个模块吗？"
|
||||
onConfirm={() => handleDeleteSection(record, section.key)}
|
||||
@@ -527,12 +677,12 @@ case 'task':
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<Table
|
||||
scroll={{x:true}}
|
||||
scroll={{ x: true }}
|
||||
dataSource={section.items}
|
||||
pagination={false}
|
||||
size="small"
|
||||
className="nested-items-table border-t border-gray-100"
|
||||
columns={table_warp(record,section)}
|
||||
columns={table_warp(record, section)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
@@ -708,7 +858,7 @@ case 'task':
|
||||
<Card className="shadow-lg rounded-lg">
|
||||
<TableHeader />
|
||||
<Table
|
||||
scroll={{x:true}}
|
||||
scroll={{ x: true }}
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
rowKey="id"
|
||||
|
||||
@@ -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)}</>;
|
||||
}
|
||||
465
src/pages/company/service/itemsManange/sections/quotation.jsx
Normal file
465
src/pages/company/service/itemsManange/sections/quotation.jsx
Normal file
@@ -0,0 +1,465 @@
|
||||
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';
|
||||
|
||||
const { Text } = Typography;
|
||||
const TYPE = 'quotation'
|
||||
const SectionsManagement = () => {
|
||||
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:TYPE}
|
||||
},
|
||||
order: {
|
||||
column: 'created_at',
|
||||
ascending: false
|
||||
}
|
||||
});
|
||||
|
||||
setData(sections || []);
|
||||
} catch (error) {
|
||||
message.error('获取模块数据失败');
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const fetchUnits = async () => {
|
||||
setLoadingUnits(true);
|
||||
try {
|
||||
const { data: units } = await supabaseService.select("resources", {
|
||||
filter: {
|
||||
type: { eq: "units" },
|
||||
"attributes->>template_type": { in: `(${TYPE},common)` },
|
||||
},
|
||||
order: {
|
||||
column: "created_at",
|
||||
ascending: false,
|
||||
},
|
||||
});
|
||||
setUnit(units || []);
|
||||
} catch (error) {
|
||||
message.error("获取单位列表失败");
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoadingUnits(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
fetchSections();
|
||||
|
||||
}, [TYPE]);
|
||||
|
||||
const handleAdd = () => {
|
||||
const newData = {
|
||||
id: Date.now().toString(),
|
||||
attributes: {
|
||||
name: '',
|
||||
template_type: TYPE,
|
||||
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: TYPE,
|
||||
items: items.filter(item => item.name), // 只保存有名称的项目
|
||||
},
|
||||
schema_version: 1
|
||||
});
|
||||
} else {
|
||||
await supabaseService.update('resources',
|
||||
{ id: record.id },
|
||||
{
|
||||
attributes: {
|
||||
name: values.name,
|
||||
template_type: TYPE,
|
||||
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: TYPE,
|
||||
},
|
||||
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;
|
||||
455
src/pages/company/service/itemsManange/sections/task.jsx
Normal file
455
src/pages/company/service/itemsManange/sections/task.jsx
Normal file
@@ -0,0 +1,455 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Table,
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
Space,
|
||||
message,
|
||||
Popconfirm,
|
||||
Select,
|
||||
Divider,
|
||||
DatePicker,
|
||||
Card,
|
||||
Typography
|
||||
} from 'antd';
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import { supabaseService } from '@/hooks/supabaseService';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const { Text } = Typography;
|
||||
const TYPE = 'task';
|
||||
|
||||
const TaskSections = () => {
|
||||
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: TYPE }
|
||||
},
|
||||
order: {
|
||||
column: 'created_at',
|
||||
ascending: false
|
||||
}
|
||||
});
|
||||
setData(sections || []);
|
||||
} catch (error) {
|
||||
message.error('获取模块数据失败');
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUnits = async () => {
|
||||
setLoadingUnits(true);
|
||||
try {
|
||||
const { data: units } = await supabaseService.select("resources", {
|
||||
filter: {
|
||||
type: { eq: "units" },
|
||||
"attributes->>template_type": { in: `(${TYPE},common)` },
|
||||
},
|
||||
order: {
|
||||
column: "created_at",
|
||||
ascending: false,
|
||||
},
|
||||
});
|
||||
setUnit(units || []);
|
||||
} catch (error) {
|
||||
message.error("获取状态列表失败");
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoadingUnits(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchSections();
|
||||
fetchUnits();
|
||||
}, []);
|
||||
|
||||
const handleAdd = () => {
|
||||
const newData = {
|
||||
id: Date.now().toString(),
|
||||
attributes: {
|
||||
name: '',
|
||||
template_type: TYPE,
|
||||
items: [{
|
||||
key: uuidv4(),
|
||||
name: '',
|
||||
description: '',
|
||||
timeRange: null,
|
||||
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']) || [];
|
||||
|
||||
if (!items.length || !items.some(item => item.name)) {
|
||||
message.error('请至少添加一个有效的任务项目');
|
||||
return;
|
||||
}
|
||||
|
||||
const formattedItems = items.filter(item => item.name).map(item => ({
|
||||
...item,
|
||||
timeRange: item.timeRange ? [
|
||||
dayjs(item.timeRange[0]).format('YYYY-MM-DD HH:mm'),
|
||||
dayjs(item.timeRange[1]).format('YYYY-MM-DD HH:mm')
|
||||
] : null
|
||||
}));
|
||||
|
||||
if (record.isNew) {
|
||||
await supabaseService.insert('resources', {
|
||||
type: 'sections',
|
||||
attributes: {
|
||||
name: values.name,
|
||||
template_type: TYPE,
|
||||
items: formattedItems,
|
||||
},
|
||||
schema_version: 1
|
||||
});
|
||||
} else {
|
||||
await supabaseService.update('resources',
|
||||
{ id: record.id },
|
||||
{
|
||||
attributes: {
|
||||
name: values.name,
|
||||
template_type: TYPE,
|
||||
items: formattedItems,
|
||||
},
|
||||
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 {
|
||||
await supabaseService.insert("resources", {
|
||||
type: "units",
|
||||
attributes: {
|
||||
name: unitName,
|
||||
template_type: TYPE,
|
||||
},
|
||||
schema_version: 1,
|
||||
});
|
||||
|
||||
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-4">
|
||||
{fields.map((field, index) => (
|
||||
<Card key={field.key} size="small" className="bg-gray-50">
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, 'name']}
|
||||
rules={[{ required: true, message: '请输入任务名称' }]}
|
||||
className="mb-0"
|
||||
>
|
||||
<Input placeholder="任务名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, 'description']}
|
||||
className="mb-0"
|
||||
>
|
||||
<Input placeholder="描述/备注" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, 'timeRange']}
|
||||
className="mb-0"
|
||||
>
|
||||
<DatePicker.RangePicker
|
||||
showTime
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
placeholder={['开始时间', '结束时间']}
|
||||
className="w-full"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, 'unit']}
|
||||
className="mb-0 flex-1"
|
||||
>
|
||||
<Select
|
||||
placeholder="选择状态"
|
||||
loading={loadingUnits}
|
||||
showSearch
|
||||
allowClear
|
||||
options={units.map((unit) => ({
|
||||
label: unit.attributes.name,
|
||||
value: unit.attributes.name,
|
||||
}))}
|
||||
onDropdownVisibleChange={(open) => {
|
||||
if (open) fetchUnits();
|
||||
}}
|
||||
dropdownRender={(menu) => (
|
||||
<>
|
||||
{menu}
|
||||
<Divider style={{ margin: '8px 0' }} />
|
||||
<div style={{ padding: '4px 8px' }}>
|
||||
<Input.Search
|
||||
placeholder="输入新状态"
|
||||
enterButton={<PlusOutlined />}
|
||||
onSearch={async (value) => {
|
||||
if (!value.trim()) return;
|
||||
if (await handleAddUnit(value.trim())) {
|
||||
const currentItems = form.getFieldValue('items');
|
||||
currentItems[index].unit = value.trim();
|
||||
form.setFieldValue('items', currentItems);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() => remove(field.name)}
|
||||
disabled={fields.length === 1}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => add({
|
||||
key: uuidv4(),
|
||||
name: '',
|
||||
description: '',
|
||||
timeRange: null,
|
||||
unit: ''
|
||||
})}
|
||||
icon={<PlusOutlined />}
|
||||
className="w-full"
|
||||
>
|
||||
添加任务项目
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Form.List>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{(items || []).map((item, index) => (
|
||||
<div key={index} className="flex items-center gap-4 text-sm">
|
||||
<span className="font-medium">{item.name}</span>
|
||||
{item.description && (
|
||||
<span className="text-gray-500">({item.description})</span>
|
||||
)}
|
||||
<span className="text-gray-500">
|
||||
{item.timeRange ?
|
||||
`${dayjs(item.timeRange[0]).format('YYYY-MM-DD HH:mm')} ~ ${dayjs(item.timeRange[1]).format('YYYY-MM-DD HH:mm')}`
|
||||
: '未设置时间'}
|
||||
</span>
|
||||
<span className="text-gray-500">{item.unit || '未设置状态'}</span>
|
||||
</div>
|
||||
))}
|
||||
</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 TaskSections;
|
||||
420
src/pages/company/task/detail/index.jsx
Normal file
420
src/pages/company/task/detail/index.jsx
Normal file
@@ -0,0 +1,420 @@
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
Button,
|
||||
Space,
|
||||
Card,
|
||||
Typography,
|
||||
message,
|
||||
DatePicker,
|
||||
} from "antd";
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
SaveOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { supabase } from "@/config/supabase";
|
||||
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import TaskList from '@/components/TaskList';
|
||||
import dayjs from 'dayjs';
|
||||
import {supabaseService} from '@/hooks/supabaseService'
|
||||
|
||||
const { Title } = Typography;
|
||||
const TYPE = "task";
|
||||
|
||||
export default function TaskForm() {
|
||||
const { id } = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const isEdit = searchParams.get("edit") === "true";
|
||||
const templateId = searchParams.get("templateId");
|
||||
const isView = id && !isEdit;
|
||||
const [form] = Form.useForm();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [customers, setCustomers] = useState([]);
|
||||
const [formValues, setFormValues] = useState({});
|
||||
const [units, setUnits] = useState([]);
|
||||
const [loadingUnits,setLoadingUnits]=useState(false)
|
||||
const fetchUnits = async () => {
|
||||
setLoadingUnits(true);
|
||||
try {
|
||||
const { data: units } = await supabaseService.select("resources", {
|
||||
filter: {
|
||||
type: { eq: "units" },
|
||||
"attributes->>template_type": { in: `(${TYPE})` },
|
||||
},
|
||||
order: {
|
||||
column: "created_at",
|
||||
ascending: false,
|
||||
},
|
||||
});
|
||||
|
||||
setUnits(units || []);
|
||||
} catch (error) {
|
||||
message.error("获取单位列表失败");
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoadingUnits(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUnits();
|
||||
}, []);
|
||||
const initialValues = {
|
||||
sections: [
|
||||
{
|
||||
key: uuidv4(),
|
||||
sectionName: "任务类型 1",
|
||||
items: [
|
||||
{
|
||||
key: uuidv4(),
|
||||
name: "",
|
||||
description: "",
|
||||
timeRange: null,
|
||||
unit: "未开始",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
status: "未开始",
|
||||
timeRange: null,
|
||||
};
|
||||
|
||||
// 处理表单值变化
|
||||
const handleValuesChange = (changedValues, allValues) => {
|
||||
setFormValues(allValues);
|
||||
};
|
||||
|
||||
// 获取任务详情
|
||||
const fetchTaskDetail = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from("resources")
|
||||
.select("*")
|
||||
.eq("id", id)
|
||||
.single();
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
if (data?.attributes) {
|
||||
const formData = {
|
||||
taskName: data.attributes.taskName,
|
||||
customers: data.attributes.customers.map((customer) => customer.id) || [],
|
||||
description: data.attributes.description,
|
||||
sections: data.attributes.sections.map((section) => ({
|
||||
key: uuidv4(),
|
||||
sectionName: section.sectionName,
|
||||
items: section.items.map((item) => ({
|
||||
key: uuidv4(),
|
||||
name: item.name,
|
||||
description: item.description || "",
|
||||
timeRange: item.timeRange,
|
||||
unit: item.unit || "未开始",
|
||||
})),
|
||||
})),
|
||||
status: data.attributes.status || "未开始",
|
||||
timeRange: data.attributes.timeRange
|
||||
? [dayjs(data.attributes.timeRange[0]), dayjs(data.attributes.timeRange[1])]
|
||||
: null,
|
||||
};
|
||||
|
||||
form.setFieldsValue(formData);
|
||||
setFormValues(formData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取任务详情失败:", error);
|
||||
message.error("获取任务详情失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取模板数据
|
||||
const fetchTemplateData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data: template, error } = await supabase
|
||||
.from("resources")
|
||||
.select("*")
|
||||
.eq("type", "serviceTemplate")
|
||||
.eq("id", templateId)
|
||||
.single();
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
if (template?.attributes) {
|
||||
const taskData = {
|
||||
taskName: template.attributes.templateName,
|
||||
description: template.attributes.description,
|
||||
sections: template.attributes.sections.map((section) => ({
|
||||
key: uuidv4(),
|
||||
sectionName: section.sectionName,
|
||||
items: section.items.map((item) => ({
|
||||
key: uuidv4(),
|
||||
name: item.name,
|
||||
description: item.description,
|
||||
timeRange: null,
|
||||
unit: "未开始",
|
||||
})),
|
||||
})),
|
||||
};
|
||||
form.setFieldsValue(taskData);
|
||||
setFormValues(taskData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取模板数据失败:", error);
|
||||
message.error("获取模板数据失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取客户列表
|
||||
const fetchCustomers = async () => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from("resources")
|
||||
.select("*")
|
||||
.eq("type", "customer");
|
||||
|
||||
if (error) throw error;
|
||||
setCustomers(data || []);
|
||||
} catch (error) {
|
||||
console.error("获取客户列表失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 保存任务
|
||||
const onFinish = async (values) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const taskData = {
|
||||
type: "task",
|
||||
attributes: {
|
||||
taskName: values.taskName,
|
||||
customers: customers
|
||||
.filter(customer => values.customers.includes(customer.id))
|
||||
.map(customer => ({
|
||||
id: customer.id,
|
||||
name: customer.attributes.name
|
||||
})),
|
||||
description: values.description,
|
||||
sections: values.sections.map((section) => ({
|
||||
sectionName: section.sectionName,
|
||||
items: section.items.map((item) => ({
|
||||
name: item.name,
|
||||
description: item.description,
|
||||
timeRange: item.timeRange,
|
||||
unit: item.unit,
|
||||
})),
|
||||
})),
|
||||
status: values.status,
|
||||
timeRange: values.timeRange
|
||||
? [
|
||||
values.timeRange[0].format('YYYY-MM-DD'),
|
||||
values.timeRange[1].format('YYYY-MM-DD')
|
||||
]
|
||||
: null,
|
||||
},
|
||||
};
|
||||
|
||||
let result;
|
||||
if (id) {
|
||||
result = await supabase
|
||||
.from("resources")
|
||||
.update(taskData)
|
||||
.eq("id", id)
|
||||
.select();
|
||||
} else {
|
||||
result = await supabase
|
||||
.from("resources")
|
||||
.insert([taskData])
|
||||
.select();
|
||||
}
|
||||
|
||||
if (result.error) throw result.error;
|
||||
|
||||
message.success("保存成功");
|
||||
navigate("/company/task");
|
||||
} catch (error) {
|
||||
console.error("保存失败:", error);
|
||||
message.error("保存失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchCustomers();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchTaskDetail();
|
||||
} else if (templateId) {
|
||||
fetchTemplateData();
|
||||
} else {
|
||||
form.setFieldsValue(initialValues);
|
||||
setFormValues(initialValues);
|
||||
}
|
||||
}, [id, templateId]);
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 min-h-screen p-2">
|
||||
<Card
|
||||
className="shadow-lg rounded-lg border-0"
|
||||
title={
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Title level={4} className="mb-0 text-gray-800">
|
||||
{id ? (isEdit ? "编辑任务" : "查看任务") : "新建任务"}
|
||||
</Title>
|
||||
<span className="text-gray-400 text-sm">
|
||||
{id
|
||||
? isEdit
|
||||
? "请修改任务信息"
|
||||
: "任务详情"
|
||||
: "请填写任务信息"}
|
||||
</span>
|
||||
</div>
|
||||
<Space size="middle">
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate("/company/task")}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
{!isView && (
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SaveOutlined />}
|
||||
onClick={() => form.submit()}
|
||||
loading={loading}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={onFinish}
|
||||
onValuesChange={handleValuesChange}
|
||||
layout="vertical"
|
||||
disabled={isView}
|
||||
initialValues={initialValues}
|
||||
>
|
||||
<Card
|
||||
className="shadow-sm rounded-lg"
|
||||
type="inner"
|
||||
title={
|
||||
<span className="flex items-center space-x-2 text-gray-700">
|
||||
<span className="w-1 h-4 bg-blue-500 rounded-full" />
|
||||
<span>基本信息</span>
|
||||
</span>
|
||||
}
|
||||
bordered={false}
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<Form.Item
|
||||
name="taskName"
|
||||
label={<span className="text-gray-700 font-medium">任务名称</span>}
|
||||
rules={[{ required: true, message: "请输入任务名称" }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="请输入任务名称"
|
||||
className=" hover:border-blue-400 focus:border-blue-500"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="customers"
|
||||
label={<span className="text-gray-700 font-medium">客户名称</span>}
|
||||
rules={[{ required: true, message: "请选择至少一个客户" }]}
|
||||
>
|
||||
<Select
|
||||
mode="multiple"
|
||||
placeholder="请选择客户"
|
||||
className="rounded-md hover:border-blue-400 focus:border-blue-500"
|
||||
showSearch
|
||||
optionFilterProp="children"
|
||||
filterOption={(input, option) =>
|
||||
(option?.label ?? "").toLowerCase().includes(input.toLowerCase())
|
||||
}
|
||||
options={customers.map((customer) => ({
|
||||
value: customer.id,
|
||||
label: customer.attributes.name,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="status"
|
||||
label={<span className="text-gray-700 font-medium">任务状态</span>}
|
||||
rules={[{ required: true, message: "请选择任务状态" }]}
|
||||
>
|
||||
<Select
|
||||
allowClear
|
||||
loading={loadingUnits}
|
||||
placeholder="请选择任务状态"
|
||||
className="rounded-md hover:border-blue-400 focus:border-blue-500"
|
||||
options={units.map((unit) => ({
|
||||
label: unit.attributes.name,
|
||||
value: unit.attributes.name,
|
||||
}))}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="timeRange"
|
||||
label={<span className="text-gray-700 font-medium">时间范围</span>}
|
||||
rules={[{ required: true, message: "请选择时间范围" }]}
|
||||
>
|
||||
<DatePicker.RangePicker
|
||||
className="w-full rounded-md hover:border-blue-400 focus:border-blue-500"
|
||||
format="YYYY-MM-DD"
|
||||
onChange={(dates) => {
|
||||
if (dates) {
|
||||
form.setFieldValue('timeRange', [
|
||||
dayjs(dates[0]),
|
||||
dayjs(dates[1])
|
||||
]);
|
||||
} else {
|
||||
form.setFieldValue('timeRange', null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
className="shadow-sm rounded-lg mt-6"
|
||||
type="inner"
|
||||
title={
|
||||
<span className="flex items-center space-x-2 text-gray-700">
|
||||
<span className="w-1 h-4 bg-blue-500 rounded-full" />
|
||||
<span>任务流程</span>
|
||||
</span>
|
||||
}
|
||||
bordered={false}
|
||||
>
|
||||
<TaskList
|
||||
type={TYPE}
|
||||
form={form}
|
||||
isView={isView}
|
||||
formValues={formValues}
|
||||
onValuesChange={handleValuesChange}
|
||||
/>
|
||||
</Card>
|
||||
</Form>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +1,467 @@
|
||||
import React from 'react';
|
||||
import { Card, Table, Button } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Card,
|
||||
Table,
|
||||
Button,
|
||||
message,
|
||||
Popconfirm,
|
||||
Tag,
|
||||
Space,
|
||||
Spin,
|
||||
Modal,
|
||||
Empty,
|
||||
Typography,
|
||||
} from "antd";
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
EyeOutlined,
|
||||
CopyOutlined,
|
||||
FileAddOutlined,
|
||||
AppstoreOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useResources } from "@/hooks/resource/useResource";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { supabase } from "@/config/supabase";
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const TaskPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
|
||||
const [sorter, setSorter] = useState({
|
||||
field: "created_at",
|
||||
order: "descend",
|
||||
});
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [selectedTemplateId, setSelectedTemplateId] = useState(null);
|
||||
const [templates, setTemplates] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const {
|
||||
resources: tasks,
|
||||
loading: loadingTasks,
|
||||
total,
|
||||
fetchResources: fetchTasks,
|
||||
deleteResource: deleteTask,
|
||||
} = useResources(pagination, sorter, "task");
|
||||
|
||||
useEffect(() => {
|
||||
fetchTasks();
|
||||
}, []);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '任务名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
title: "任务名称",
|
||||
dataIndex: ["attributes", "taskName"],
|
||||
key: "taskName",
|
||||
ellipsis: true,
|
||||
className: "dark:text-gray-200",
|
||||
},
|
||||
{
|
||||
title: '负责人',
|
||||
dataIndex: 'assignee',
|
||||
key: 'assignee',
|
||||
title: "开始时间",
|
||||
dataIndex: ["attributes", "timeRange"],
|
||||
key: "startTime",
|
||||
render: (timeRange) => (
|
||||
<span className="dark:text-gray-300">
|
||||
{timeRange?.[0] || '-'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '截止日期',
|
||||
dataIndex: 'dueDate',
|
||||
key: 'dueDate',
|
||||
title: "结束时间",
|
||||
dataIndex: ["attributes", "timeRange"],
|
||||
key: "endTime",
|
||||
render: (timeRange) => (
|
||||
<span className="dark:text-gray-300">
|
||||
{timeRange?.[1] || '-'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
title: "状态",
|
||||
dataIndex: ["attributes", "status"],
|
||||
key: "status",
|
||||
render: (status) => (
|
||||
<Tag
|
||||
color={
|
||||
status === '已完成' ? 'default' :
|
||||
status === '进行中' ? 'processing' :
|
||||
status === '未开始' ? 'success' : 'success'
|
||||
}
|
||||
className="dark:border-opacity-50"
|
||||
>
|
||||
{status || '未设置'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
dataIndex: "created_at",
|
||||
key: "created_at",
|
||||
sorter: true,
|
||||
render: (text) => (
|
||||
<span className="dark:text-gray-300">
|
||||
{dayjs(text).format('YYYY-MM-DD HH:mm')}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
fixed: "right",
|
||||
render: (_, record) => (
|
||||
<Space size={0} className="dark:text-gray-300">
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
icon={<CopyOutlined />}
|
||||
onClick={() => copyItem(record)}
|
||||
className="dark:text-gray-300 dark:hover:text-blue-400"
|
||||
>
|
||||
复制
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
icon={<EyeOutlined />}
|
||||
onClick={() => navigate(`/company/taskInfo/${record.id}?isView=true`)}
|
||||
className="dark:text-gray-300 dark:hover:text-blue-400"
|
||||
>
|
||||
查看
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => navigate(`/company/taskInfo/${record.id}?edit=true`)}
|
||||
className="dark:text-gray-300 dark:hover:text-blue-400"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确定要删除这个任务吗？"
|
||||
description="删除后将无法恢复！"
|
||||
onConfirm={() => handleDelete(record.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
okButtonProps={{ danger: true }}
|
||||
>
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
danger
|
||||
icon={<DeleteOutlined />}
|
||||
className="dark:hover:text-red-400"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// 获取模板列表
|
||||
const fetchTemplates = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data: templates, error } = await supabase
|
||||
.from("resources")
|
||||
.select("*")
|
||||
.eq("type", "serviceTemplate")
|
||||
.eq("attributes->>template_type", "task")
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
if (error) throw error;
|
||||
setTemplates(templates);
|
||||
} catch (error) {
|
||||
console.error("获取任务模板失败:", error);
|
||||
message.error("获取任务模板失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 当模态框打开时获取模板
|
||||
useEffect(() => {
|
||||
if (isModalVisible) {
|
||||
fetchTemplates();
|
||||
}
|
||||
}, [isModalVisible]);
|
||||
|
||||
// 处理模板选择
|
||||
const handleTemplateSelect = (templateId) => {
|
||||
setSelectedTemplateId(templateId);
|
||||
};
|
||||
|
||||
// 处理确认选择
|
||||
const handleConfirm = () => {
|
||||
if (selectedTemplateId) {
|
||||
navigate(`/company/taskInfo?templateId=${selectedTemplateId}`);
|
||||
} else {
|
||||
navigate("/company/taskInfo");
|
||||
}
|
||||
setIsModalVisible(false);
|
||||
setSelectedTemplateId(null);
|
||||
};
|
||||
|
||||
// 复制任务
|
||||
const copyItem = async (record) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const newAttributes = JSON.parse(JSON.stringify(record.attributes));
|
||||
|
||||
// 修改任务名称，添加"副本"标识
|
||||
newAttributes.taskName = `${newAttributes.taskName} (副本)`;
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from("resources")
|
||||
.insert([
|
||||
{
|
||||
type: "task",
|
||||
attributes: newAttributes,
|
||||
},
|
||||
]);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
message.success("复制成功");
|
||||
fetchTasks(); // 刷新列表
|
||||
} catch (error) {
|
||||
console.error("复制任务失败:", error);
|
||||
message.error("复制失败：" + error.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除任务
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await deleteTask(id);
|
||||
fetchTasks();
|
||||
} catch (error) {
|
||||
message.error("删除失败：" + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 表格变化处理
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
setPagination(pagination);
|
||||
setSorter({
|
||||
field: sorter.field || "created_at",
|
||||
order: sorter.order || "descend",
|
||||
});
|
||||
fetchTasks({
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
field: sorter.field,
|
||||
order: sorter.order,
|
||||
});
|
||||
};
|
||||
|
||||
// 获取模板分类
|
||||
const getTemplatesByCategory = () => {
|
||||
const groups = new Map();
|
||||
|
||||
// 添加未分类组
|
||||
groups.set("uncategorized", {
|
||||
name: "未分类",
|
||||
templates: templates.filter(
|
||||
(t) => !t.attributes.category || t.attributes.category.length === 0
|
||||
),
|
||||
});
|
||||
|
||||
// 按分类分组
|
||||
templates.forEach((template) => {
|
||||
if (template.attributes.category) {
|
||||
template.attributes.category.forEach((cat) => {
|
||||
if (!groups.has(cat.id)) {
|
||||
groups.set(cat.id, {
|
||||
name: cat.name,
|
||||
templates: [],
|
||||
});
|
||||
}
|
||||
groups.get(cat.id).templates.push(template);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 返回非空分组
|
||||
return Array.from(groups.values()).filter(
|
||||
(group) => group.templates.length > 0
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
title="任务管理"
|
||||
title={
|
||||
<Space className="dark:text-gray-200 py-4 px-2">
|
||||
<span>任务管理</span>
|
||||
<Tag color="blue" className="dark:border-opacity-50">
|
||||
{total} 个任务
|
||||
</Tag>
|
||||
</Space>
|
||||
}
|
||||
className="h-full w-full overflow-auto dark:bg-gray-800 dark:border-gray-700"
|
||||
extra={
|
||||
<div className="flex justify-between my-4">
|
||||
<Button type="primary" icon={<PlusOutlined />}>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setIsModalVisible(true)}
|
||||
className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
|
||||
>
|
||||
新增任务
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Table columns={columns} dataSource={[]} rowKey="id" />
|
||||
<Table
|
||||
className="w-full"
|
||||
columns={columns}
|
||||
dataSource={tasks}
|
||||
rowKey="id"
|
||||
scroll={{ x: true }}
|
||||
loading={loadingTasks}
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
...pagination,
|
||||
total,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`,
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* 模板选择弹窗 */}
|
||||
<Modal
|
||||
title={
|
||||
<Typography.Title level={4} className="dark:text-gray-200">
|
||||
选择任务模板
|
||||
</Typography.Title>
|
||||
}
|
||||
open={isModalVisible}
|
||||
onCancel={() => {
|
||||
setIsModalVisible(false);
|
||||
setSelectedTemplateId(null);
|
||||
}}
|
||||
footer={[
|
||||
<Button
|
||||
key="custom"
|
||||
onClick={() => handleConfirm()}
|
||||
className="gap-2 px-6 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200"
|
||||
>
|
||||
<FileAddOutlined /> 自定义创建
|
||||
</Button>,
|
||||
<Button
|
||||
key="submit"
|
||||
type="primary"
|
||||
disabled={!selectedTemplateId}
|
||||
onClick={handleConfirm}
|
||||
className="gap-2 px-6 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
|
||||
>
|
||||
<AppstoreOutlined /> 使用选中模板
|
||||
</Button>,
|
||||
]}
|
||||
width={900}
|
||||
className="dark:bg-gray-800"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-[400px]">
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
) : templates.length === 0 ? (
|
||||
<Empty description={
|
||||
<span className="dark:text-gray-400">暂无可用模板</span>
|
||||
} />
|
||||
) : (
|
||||
<div className="max-h-[600px] overflow-y-auto px-4">
|
||||
{getTemplatesByCategory().map((group, groupIndex) => (
|
||||
<div key={groupIndex} className="mb-10 last:mb-2">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<h3 className="text-xl font-medium text-gray-900 dark:text-gray-200">
|
||||
{group.name}
|
||||
<span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
({group.templates.length})
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
{group.templates.map((template) => (
|
||||
<div
|
||||
key={template.id}
|
||||
onClick={() => handleTemplateSelect(template.id)}
|
||||
className={`
|
||||
relative p-6 rounded-xl cursor-pointer transition-all duration-200
|
||||
${
|
||||
selectedTemplateId === template.id
|
||||
? "ring-2 ring-blue-500 bg-blue-50/40 dark:bg-blue-900/40"
|
||||
: "hover:shadow-lg border border-gray-200 dark:border-gray-700 hover:border-blue-200 dark:hover:border-blue-700"
|
||||
}
|
||||
transform hover:-translate-y-1 dark:bg-gray-800
|
||||
`}
|
||||
>
|
||||
<div className="flex justify-between items-start gap-3 mb-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-lg font-medium text-gray-900 dark:text-gray-200 truncate">
|
||||
{template.attributes.templateName}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-2 line-clamp-2">
|
||||
{template.attributes.description || "暂无描述"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{template.attributes.sections.map((section, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`
|
||||
rounded-lg p-3 text-sm border
|
||||
${
|
||||
selectedTemplateId === template.id
|
||||
? "bg-white border-blue-200 dark:bg-gray-700 dark:border-blue-600"
|
||||
: "bg-gray-50 border-gray-100 dark:bg-gray-700 dark:border-gray-600"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-medium text-gray-700 dark:text-gray-200 truncate flex-1">
|
||||
{section.sectionName}
|
||||
</span>
|
||||
<span className="text-gray-500 dark:text-gray-400 ml-2 text-xs px-2 py-0.5 bg-gray-100 dark:bg-gray-600 rounded-full">
|
||||
{section.items.length}项
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{selectedTemplateId === template.id && (
|
||||
<div className="absolute top-4 right-4">
|
||||
<div className="w-6 h-6 bg-blue-600 dark:bg-blue-500 rounded-full flex items-center justify-center shadow-md">
|
||||
<svg
|
||||
className="w-4 h-4 text-white"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Steps, Form, Button, Select, DatePicker, Input } from 'antd';
|
||||
|
||||
const { Step } = Steps;
|
||||
const { Option } = Select;
|
||||
|
||||
const CommunicationSend = () => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
return (
|
||||
<Card title="发送管理">
|
||||
<Steps
|
||||
current={0}
|
||||
items={[
|
||||
{ title: '选择模板' },
|
||||
{ title: '设置参数' },
|
||||
{ title: '确认发送' },
|
||||
]}
|
||||
className="mb-8"
|
||||
/>
|
||||
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="template" label="选择模板">
|
||||
<Select placeholder="请选择模板">
|
||||
<Option value="template1">模板一</Option>
|
||||
<Option value="template2">模板二</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="sendTime" label="发送时间">
|
||||
<DatePicker showTime />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="targetList" label="目标名单">
|
||||
<Select placeholder="请选择目标名单">
|
||||
<Option value="list1">名单一</Option>
|
||||
<Option value="list2">名单二</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary">下一步</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommunicationSend;
|
||||
@@ -1,50 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card, Table, Button, Tag } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
const CommunicationTasks = () => {
|
||||
const columns = [
|
||||
{
|
||||
title: '任务名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '负责人',
|
||||
dataIndex: 'assignee',
|
||||
key: 'assignee',
|
||||
},
|
||||
{
|
||||
title: '截止日期',
|
||||
dataIndex: 'dueDate',
|
||||
key: 'dueDate',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: status => (
|
||||
<Tag color={status === '进行中' ? 'green' : 'default'}>
|
||||
{status}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card
|
||||
title="沟通任务"
|
||||
extra={
|
||||
<div className="flex justify-between my-4">
|
||||
<Button type="primary" icon={<PlusOutlined />}>
|
||||
新增任务
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Table columns={columns} dataSource={[]} rowKey="id" />
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommunicationTasks;
|
||||
@@ -35,13 +35,7 @@ const companyRoutes = [
|
||||
icon: "file",
|
||||
roles: ["ADMIN", "OWNER"],
|
||||
},
|
||||
{
|
||||
path: "task",
|
||||
component: lazy(() => import("@/pages/resource/resourceTask")),
|
||||
name: "任务管理",
|
||||
icon: "appstore",
|
||||
roles: ["OWNER"],
|
||||
},
|
||||
|
||||
{
|
||||
path: "quotaInfo/:id?", // 添加可选的 id 参数
|
||||
hidden: true,
|
||||
@@ -49,6 +43,21 @@ const companyRoutes = [
|
||||
name: "报价单详情",
|
||||
icon: "file",
|
||||
roles: ["ADMIN", "OWNER"],
|
||||
},
|
||||
{
|
||||
path: "task",
|
||||
component: lazy(() => import("@/pages/company/task")),
|
||||
name: "任务管理",
|
||||
icon: "appstore",
|
||||
roles: ["OWNER"],
|
||||
},
|
||||
{
|
||||
path: "taskInfo/:id?",
|
||||
hidden:true,
|
||||
component: lazy(() => import("@/pages/company/task/detail")),
|
||||
name: "任务管理详情",
|
||||
icon: "appstore",
|
||||
roles: ["OWNER"],
|
||||
},
|
||||
{
|
||||
path: "serviceTemplate",
|
||||
@@ -149,14 +158,14 @@ export const generateRoutes = (role) => {
|
||||
children: companyRoutes.filter((route) => route.roles.includes(role)),
|
||||
roles: ["ADMIN", "OWNER"],
|
||||
},
|
||||
{
|
||||
path: "marketing",
|
||||
component: lazy(() => import("@/pages/marketing")),
|
||||
name: "行销中心",
|
||||
icon: "shopping",
|
||||
children: marketingRoutes.filter((route) => route.roles.includes(role)),
|
||||
roles: ["ADMIN", "OWNER"],
|
||||
},
|
||||
// {
|
||||
// path: "marketing",
|
||||
// component: lazy(() => import("@/pages/marketing")),
|
||||
// name: "行销中心",
|
||||
// icon: "shopping",
|
||||
// children: marketingRoutes.filter((route) => route.roles.includes(role)),
|
||||
// roles: ["ADMIN", "OWNER"],
|
||||
// },
|
||||
|
||||
// {
|
||||
// path: "role",
|
||||
|
||||
Reference in New Issue
Block a user