frontend-react-team/manage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

专案完成

Browse Source
This commit is contained in:
‘Liammcl’
2025-01-04 20:09:06 +08:00
parent 9a60a688f3
commit 780e7519c1
12 changed files with 2688 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pnpm-lock.yaml generated
View File

@@ -92,6 +92,9 @@ importers:
uuid:
specifier: ^11.0.3
version: 11.0.3
zod:
specifier: ^3.24.1
version: 3.24.1
devDependencies:
'@types/react':
specifier: ^18.2.15

615
src/components/ProjectList/index.jsx Normal file
View File

@@ -0,0 +1,615 @@
import React, { useState, useEffect } from 'react';
import {
Form,
Input,
Button,
Card,
Typography,
Modal,
message,
Select,
Divider,
Upload,
} from 'antd';
import {
PlusOutlined,
DeleteOutlined,
EditOutlined,
CheckOutlined,
CloseOutlined,
InboxOutlined,
UploadOutlined,
} from '@ant-design/icons';
import { v4 as uuidv4 } from 'uuid';
import { supabase } from "@/config/supabase";
import { supabaseService } from "@/hooks/supabaseService";
const { Text } = Typography;
const ProjectResourceList = ({ form, isView, formValues, type = "project" }) => {
const [editingSectionIndex, setEditingSectionIndex] = useState(null);
const [editingSectionName, setEditingSectionName] = useState("");
const [templateModalVisible, setTemplateModalVisible] = useState(false);
const [availableSections, setAvailableSections] = useState([]);
const [loading, setLoading] = useState(false);
const [resourceTypes, setResourceTypes] = useState([]);
const [loadingResourceTypes, setLoadingResourceTypes] = useState(false);
const [units, setUnits] = useState([]);
const [loadingUnits, setLoadingUnits] = useState(false);
const [uploadModalVisible, setUploadModalVisible] = useState(false);
const [currentAddItem, setCurrentAddItem] = useState(null);
const fetchAvailableSections = async () => {
try {
setLoading(true);
const { data: sections, error } = await supabase
.from("resources")
.select("*")
.eq("type", "sections")
.eq("attributes->>template_type", type)
.order("created_at", { ascending: false });
if (error) throw error;
setAvailableSections(sections || []);
} catch (error) {
message.error("获取资源模板失败");
console.error(error);
} finally {
setLoading(false);
}
};
const fetchResourceTypes = async () => {
setLoadingResourceTypes(true);
try {
const { data: types } = await supabaseService.select("resources", {
filter: {
type: { eq: "resource_types" },
"attributes->>template_type": { in: `(${type})` },
},
order: {
column: "created_at",
ascending: false,
},
});
setResourceTypes(types || []);
} catch (error) {
console.error('获取资源类型失败:', error);
} finally {
setLoadingResourceTypes(false);
}
};
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 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 handleUseTemplate = (template, add) => {
const newSection = {
key: uuidv4(),
sectionName: template.attributes.name,
items: (template.attributes.items || []).map((item) => ({
key: uuidv4(),
title: item.title || "",
unit: item.unit || "",
url: item.url || "",
description: item.description || "",
})),
};
add(newSection);
setTemplateModalVisible(false);
message.success("套用模版成功");
};
const handleCreateCustom = (add, fieldsLength) => {
add({
key: uuidv4(),
sectionName: `资源分组 ${fieldsLength + 1}`,
items: [
{
key: uuidv4(),
title: "",
unit: "",
url: "",
description: "",
},
],
});
setTemplateModalVisible(false);
};
const handleAddItem = (addItem) => {
addItem({
key: uuidv4(),
title: "",
unit: "",
url: "",
description: "",
});
};
const handleFileUpload = async (file, addItem) => {
try {
const fileExt = file.name.split('.').pop();
const fileName = `${Date.now()}.${fileExt}`;
const filePath = `${type}/${fileName}`;
const { data, error } = await supabase.storage
.from('file')
.upload(filePath, file);
if (error) throw error;
const { data: { publicUrl } } = supabase.storage
.from('file')
.getPublicUrl(filePath);
let fileType = '';
if (file.type.startsWith('image/')) {
fileType = '图片';
} else if (file.type.startsWith('video/')) {
fileType = '视频';
} else if (file.type.includes('pdf')) {
fileType = 'PDF文档';
} else {
fileType = '其他文件';
}
addItem({
key: uuidv4(),
url: publicUrl,
title: `${fileType}-${file.name}`,
unit: fileType,
description: '',
});
return true;
} catch (error) {
message.error('文件上传失败');
console.error(error);
return false;
}
};
const handleButtonClick = (addItem) => {
setCurrentAddItem(addItem);
setUploadModalVisible(true);
};
const renderUploadModal = () => (
<Modal
title="上传资源文件"
open={uploadModalVisible}
onCancel={() => setUploadModalVisible(false)}
footer={null}
>
<Upload.Dragger
multiple
customRequest={async ({ file, onSuccess, onError }) => {
try {
const result = await handleFileUpload(file, currentAddItem);
if (result) {
onSuccess();
} else {
onError();
}
} catch (err) {
onError();
}
}}
onChange={(info) => {
if (info.file.status === 'done') {
message.success(`${info.file.name} 上传成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 上传失败`);
}
}}
>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
<p className="ant-upload-hint">支持单个或批量上传</p>
</Upload.Dragger>
</Modal>
);
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 addSectionFn = async (field) => {
try {
const sections = form.getFieldValue("sections");
const currentSection = sections[field.name];
const { error } = await supabase.from("resources").insert([
{
type: "sections",
attributes: {
name: currentSection.sectionName,
template_type: type,
items: currentSection.items.map(item => ({
title: item.title,
unit: item.unit,
url: item.url,
description: item.description
}))
},
schema_version: 1
}
]);
if (error) throw error;
message.success("保存模板成功");
// 刷新可用模板列表
fetchAvailableSections();
} catch (error) {
message.error("保存模板失败");
console.error(error);
}
};
return (
<>
<Form.List name="sections">
{(fields, { add, remove }) => (
<>
<div className="space-y-4 overflow-auto">
{fields.map((field, sectionIndex) => (
<Card
key={field.key}
className="shadow-sm rounded-lg min-w-[1200px]"
type="inner"
title={
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{editingSectionIndex === sectionIndex ? (
<div className="flex items-center gap-2">
<Input
value={editingSectionName}
onChange={(e) => setEditingSectionName(e.target.value)}
onPressEnter={handleSectionNameSave}
autoFocus
className="w-48"
/>
<Button
type="link"
icon={<CheckOutlined />}
onClick={handleSectionNameSave}
className="text-green-500"
/>
<Button
type="link"
icon={<CloseOutlined />}
onClick={() => {
setEditingSectionIndex(null);
setEditingSectionName("");
}}
className="text-red-500"
/>
</div>
) : (
<div className="flex items-center gap-2">
<span className="w-1 h-4 bg-purple-500 rounded-full" />
<Text strong className="text-lg">
{form.getFieldValue([
"sections",
sectionIndex,
"sectionName",
]) || `资源分组 ${sectionIndex + 1}`}
</Text>
{!isView && (
<Button
type="link"
icon={<EditOutlined />}
onClick={() =>
handleSectionNameEdit(
sectionIndex,
form.getFieldValue([
"sections",
sectionIndex,
"sectionName",
])
)
}
className="text-gray-400 hover:text-blue-500"
/>
)}
</div>
)}
</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>
}
>
<Form.List name={[field.name, "items"]}>
{(itemFields, { add: addItem, remove: removeItem }) => (
<>
<div className="grid grid-cols-[2fr_1fr_2fr_2fr_1fr] gap-4 mb-2 text-gray-500 px-2">
<div>资源链接</div>
<div>资源标题</div>
<div>资源类型</div>
<div>资源描述</div>
<div className="text-center">操作</div>
</div>
{itemFields.map((itemField) => {
const { key, ...restItemField } = itemField;
return (
<div
key={key}
className="grid grid-cols-[2fr_1fr_2fr_2fr_1fr] gap-4 mb-4 items-start"
>
<Form.Item
{...restItemField}
name={[itemField.name, "url"]}
rules={[{ required: true, message: '请输入资源链接' }]}
className="!mb-0"
>
<Input placeholder="资源链接" disabled={isView} />
</Form.Item>
<Form.Item
{...restItemField}
name={[itemField.name, "title"]}
rules={[{ required: true, message: '请输入资源标题' }]}
className="!mb-0"
>
<Input placeholder="资源标题" disabled={isView} />
</Form.Item>
{/* 资源类型 */}
<Form.Item
{...restItemField}
name={[itemField.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
{...restItemField}
name={[itemField.name, "description"]}
className="!mb-0"
>
<Input placeholder="资源描述" disabled={isView} />
</Form.Item>
{!isView && itemFields.length > 1 && (
<Button
type="text"
danger
icon={<DeleteOutlined />}
onClick={() => removeItem(itemField.name)}
className="flex items-center justify-center"
/>
)}
</div>
);
})}
{!isView && (
<div className="flex gap-2">
<Button
type="dashed"
onClick={() => handleAddItem(addItem)}
icon={<PlusOutlined />}
className="w-full hover:border-blue-400 hover:text-blue-500"
>
手动添加资源
</Button>
<Button
type="dashed"
onClick={() => {
setCurrentAddItem(() => addItem);
setUploadModalVisible(true);
}}
icon={<UploadOutlined />}
className="w-full hover:border-blue-400 hover:text-blue-500"
>
上传文件
</Button>
</div>
)}
</>
)}
</Form.List>
</Card>
))}
</div>
{/* 添加资源分组按钮 */}
<div className="flex items-center justify-center mt-6 flex-col">
{!isView && (
<div className="w-full flex justify-center">
<Button
type="dashed"
onClick={() => {
setTemplateModalVisible(true);
fetchAvailableSections();
}}
icon={<PlusOutlined />}
className="w-1/3 border-2 hover:border-blue-400 hover:text-blue-500"
>
新建资源分组
</Button>
</div>
)}
</div>
{/* 模板选择弹窗 */}
<Modal
title={<h3 className="text-lg font-medium">选择模版</h3>}
open={templateModalVisible}
onCancel={() => setTemplateModalVisible(false)}
footer={null}
width={800}
closeIcon={<CloseOutlined className="text-gray-500" />}
>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{availableSections.map((section) => (
<Card
key={section.id}
hoverable
onClick={() => handleUseTemplate(section, add)}
className="cursor-pointer"
>
<Card.Meta
title={section.attributes.name}
description={`${section.attributes.items?.length || 0} 个资源`}
/>
</Card>
))}
<Card
hoverable
onClick={() => handleCreateCustom(add, fields.length)}
className="cursor-pointer"
>
<div className="flex items-center justify-center h-full">
<PlusOutlined className="text-2xl" />
<span className="ml-2">创建自定义分组</span>
</div>
</Card>
</div>
</Modal>
{renderUploadModal()}
</>
)}
</Form.List>
</>
);
};
export default ProjectResourceList;

4
src/hooks/resource/useResource.js
View File

@@ -24,6 +24,7 @@ export const useResources = (initialPagination, initialSorter, type) => {
setCurrentPagination(newPagination);
setCurrentSorter(newSorter);
console.log(params.searchQuery,'params.searchQuery');
const { data, total: newTotal } = await resourceService.getResources({
page: newPagination.current,
@@ -31,7 +32,8 @@ export const useResources = (initialPagination, initialSorter, type) => {
orderBy: newSorter.field,
ascending: newSorter.order === "ascend",
type: type,
...(params?.search !== "" ? { searchQuery: params.search } : {}),
...(params?.search ? { searchQuery: params.search } : {}),
...(params?.searchQuery ? {searchQuery:params.searchQuery} : {}),
});
setResources(data || []);

436
src/pages/company/project/detail/index.jsx
View File

@@ -1,7 +1,437 @@
import React from 'react'
import React, { useState, useEffect } from 'react';
import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
import { supabase } from "@/config/supabase";
import { supabaseService } from "@/hooks/supabaseService";
import {
Card,
Form,
Input,
Button,
Space,
message,
Select,
DatePicker,
Typography,
Spin
} from 'antd';
import {
ArrowLeftOutlined,
SaveOutlined
} from '@ant-design/icons';
import dayjs from 'dayjs';
import { v4 as uuidv4 } from 'uuid';
import ProjectResourceList from '@/components/ProjectList';
const { Title } = Typography;
const { TextArea } = Input;
const TYPE = 'project';
export default function ProjectDetail() {
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 [tasks, setTasks] = useState([]);
const [loadingTasks, setLoadingTasks] = useState(false);
const initialValues = {
sections: [
{
uniqueId: uuidv4(),
sectionName: "资源分组 1",
items: [
{
uniqueId: uuidv4(),
title: "",
unit: "",
url: "",
description: "",
},
],
},
],
timeRange: null,
relatedTasks: [],
};
const fetchProjectDetail = 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 = {
projectName: data.attributes.projectName,
customers: data.attributes.customers.map((customer) => customer.id) || [],
description: data.attributes.description,
sections: data.attributes.sections.map((section) => ({
uniqueId: uuidv4(),
sectionName: section.sectionName,
items: section.items.map((item) => ({
uniqueId: uuidv4(),
title: item.title,
unit: item.unit,
url: item.url,
description: item.description || "",
})),
})),
timeRange: data.attributes.startDate && data.attributes.endDate
? [dayjs(data.attributes.startDate), dayjs(data.attributes.endDate)]
: null,
relatedTasks: data.attributes.relatedTasks?.map(task => task.id) || [],
};
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", "projectTemplate")
.eq("id", templateId)
.single();
if (error) throw error;
if (template?.attributes) {
const projectData = {
projectName: template.attributes.templateName,
description: template.attributes.description,
sections: template.attributes.sections.map((section) => ({
uniqueId: uuidv4(),
sectionName: section.sectionName,
items: section.items.map((item) => ({
uniqueId: uuidv4(),
title: item.title,
unit: item.unit,
url: item.url,
description: item.description,
})),
})),
};
form.setFieldsValue(projectData);
setFormValues(projectData);
}
} 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 fetchTasks = async () => {
setLoadingTasks(true);
try {
const { data, error } = await supabase
.from("resources")
.select("*")
.eq("type", "task")
.order("created_at", { ascending: false });
if (error) throw error;
setTasks(data || []);
} catch (error) {
console.error("获取任务列表失败:", error);
message.error("获取任务列表失败");
} finally {
setLoadingTasks(false);
}
};
const handleValuesChange = (changedValues, allValues) => {
setFormValues(allValues);
};
const onFinish = async (values) => {
try {
setLoading(true);
const projectData = {
type: "project",
attributes: {
projectName: values.projectName,
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) => ({
title: item.title,
unit: item.unit,
url: item.url,
description: item.description,
})),
})),
startDate: values.timeRange ? values.timeRange[0].format('YYYY-MM-DD') : null,
endDate: values.timeRange ? values.timeRange[1].format('YYYY-MM-DD') : null,
relatedTasks: tasks
.filter(task => values.relatedTasks?.includes(task.id))
.map(task => ({
id: task.id,
name: task.attributes.taskName
})),
},
};
let result;
if (id) {
result = await supabase
.from("resources")
.update(projectData)
.eq("id", id)
.select();
} else {
result = await supabase
.from("resources")
.insert([projectData])
.select();
}
if (result.error) throw result.error;
message.success("保存成功");
navigate("/company/project");
} catch (error) {
console.error("保存失败:", error);
message.error("保存失败");
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchCustomers();
fetchTasks();
}, []);
useEffect(() => {
if (id) {
fetchProjectDetail();
} else if (templateId) {
fetchTemplateData();
} else {
form.setFieldsValue(initialValues);
setFormValues(initialValues);
}
}, [id, templateId]);
return (
<div>ProjectDetail</div>
)
<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">
<Spin spinning={loading}>
<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/project")}
>
返回
</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="projectName"
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>}
>
<Select
mode="multiple"
placeholder="请选择客户"
className="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="timeRange"
label={<span className="text-gray-700 font-medium">时间范围</span>}
>
<DatePicker.RangePicker
className="w-full 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>
<Form.Item
name="relatedTasks"
label={<span className="text-gray-700 font-medium">关联任务</span>}
>
<Select
mode="multiple"
placeholder="请选择关联任务"
className="hover:border-blue-400 focus:border-blue-500"
loading={loadingTasks}
showSearch
optionFilterProp="children"
filterOption={(input, option) =>
(option?.label ?? "").toLowerCase().includes(input.toLowerCase())
}
options={tasks.map((task) => ({
value: task.id,
label: task.attributes.taskName,
}))}
/>
</Form.Item>
</div>
<Form.Item
name="description"
label={<span className="text-gray-700 font-medium">专案描述</span>}
>
<TextArea
rows={4}
placeholder="请输入专案描述"
className="hover:border-blue-400 focus:border-blue-500"
/>
</Form.Item>
</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}
>
<ProjectResourceList
type={TYPE}
form={form}
isView={isView}
formValues={formValues}
onValuesChange={handleValuesChange}
/>
{/* <TaskList type={TYPE}
form={form}
isView={isView}
formValues={formValues}
onValuesChange={handleValuesChange} /> */}
</Card>
</Form>
</Card>
</Spin>
</div>
);
}

330
src/pages/company/project/index.jsx
View File

@@ -1,41 +1,331 @@
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, Select } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } 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 ProjectPage = () => {
const navigate = useNavigate();
const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
const [sorter, setSorter] = useState({
field: "created_at",
order: "descend",
});
const [customers, setCustomers] = useState([]);
const [loadingCustomers, setLoadingCustomers] = useState(false);
const [selectedCustomer, setSelectedCustomer] = useState(null);
const [tasks, setTasks] = useState([]);
const [loadingTasks, setLoadingTasks] = useState(false);
const [selectedTask, setSelectedTask] = useState(null);
const {
resources: projects,
loading: loadingProjects,
total,
fetchResources: fetchProjects,
deleteResource: deleteProject,
} = useResources(pagination, sorter, "project");
useEffect(() => {
fetchProjects();
fetchCustomers();
fetchTasks();
}, []);
const fetchCustomers = async () => {
setLoadingCustomers(true);
try {
const { data, error } = await supabase
.from('resources')
.select('*')
.eq('type', 'customer')
.order('created_at', { ascending: false });
if (error) throw error;
setCustomers(data || []);
} catch (error) {
console.error('获取客户列表失败:', error);
message.error('获取客户列表失败');
} finally {
setLoadingCustomers(false);
}
};
const fetchTasks = async () => {
setLoadingTasks(true);
try {
const { data, error } = await supabase
.from('resources')
.select('*')
.eq('type', 'task')
.order('created_at', { ascending: false });
if (error) throw error;
setTasks(data || []);
} catch (error) {
console.error('获取任务列表失败:', error);
message.error('获取任务列表失败');
} finally {
setLoadingTasks(false);
}
};
const columns = [
{
title: '项目名称',
dataIndex: 'name',
key: 'name',
title: "专案名称",
dataIndex: ["attributes", "projectName"],
key: "projectName",
ellipsis: true,
className: "dark:text-gray-200",
},
{
title: '负责人',
dataIndex: 'manager',
key: 'manager',
title: "客户",
dataIndex: ["attributes", "customers"],
key: "customers",
render: (customers) => (
<Space size={4}>
{customers?.map(customer => (
<Tag
key={customer.id}
color="blue"
className="cursor-pointer"
>
{customer.name}
</Tag>
)) || '-'}
</Space>
),
},
{
title: '开始日期',
dataIndex: 'startDate',
key: 'startDate',
title: "相关任务",
dataIndex: ["attributes", "relatedTasks"],
key: "relatedTasks",
render: (tasks) => (
<Space size={4} wrap>
{tasks?.map(task => (
<Tag
key={task.id}
color="green"
className="cursor-pointer"
>
{task.name}
</Tag>
)) || '-'}
</Space>
),
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
title: "项目周期",
key: "projectPeriod",
render: (_, record) => {
const startDate = record.attributes.startDate;
const endDate = record.attributes.endDate;
if (!startDate || !endDate) return '-';
const start = dayjs(startDate);
const end = dayjs(endDate);
const days = end.diff(start, 'day');
const months = end.diff(start, 'month', true).toFixed(1);
return (
<span className="dark:text-gray-300">
{days > 60
? `约 ${months} 个月`
: `${days} 天`}
</span>
);
},
},
{
title: "开始日期",
dataIndex: ["attributes", "startDate"],
key: "startDate",
render: (date) => (
<span className="dark:text-gray-300">
{date || '-'}
</span>
),
},
{
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={<EyeOutlined />}
onClick={() => navigate(`/company/projectView/${record.id}`)}
className="dark:text-gray-300 dark:hover:text-blue-400"
>
查看
</Button>
<Button
size="small"
type="link"
icon={<EditOutlined />}
onClick={() => navigate(`/company/projectInfo/${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 handleDelete = async (id) => {
try {
await deleteProject(id);
fetchProjects();
message.success('删除成功');
} catch (error) {
message.error("删除失败：" + error.message);
}
};
const handleTableChange = (pagination, filters, sorter) => {
setPagination(pagination);
setSorter({
field: sorter.field || "created_at",
order: sorter.order || "descend",
});
fetchProjects({
current: pagination.current,
pageSize: pagination.pageSize,
field: sorter.field,
order: sorter.order,
search: JSON.stringify({
...(selectedCustomer && { customerId: selectedCustomer }),
...(selectedTask && { taskId: selectedTask })
})
});
};
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 "
extra={
<Button type="primary" icon={<PlusOutlined />}>
新增专案
</Button>
<Space>
<Select
allowClear
loading={loadingCustomers}
placeholder="按客户筛选"
variant="filled"
style={{ width: 200 }}
options={customers.map(c => ({
label: c.attributes.name,
value: c.id
}))}
onChange={(value) => {
setSelectedCustomer(value);
setPagination({ current: 1, pageSize: pagination.pageSize });
fetchProjects({
current: 1,
pageSize: pagination.pageSize,
field: sorter.field,
order: sorter.order,
searchQuery: JSON.stringify({
...(value && { customerId: value }),
...(selectedTask && { taskId: selectedTask })
})
});
}}
/>
{/* <Select
allowClear
loading={loadingTasks}
placeholder="按任务筛选"
variant="filled"
style={{ width: 200 }}
options={tasks.map(t => ({
label: t.attributes.taskName,
value: t.id
}))}
onChange={(value) => {
setSelectedTask(value);
setPagination({ current: 1, pageSize: pagination.pageSize });
fetchProjects({
current: 1,
pageSize: pagination.pageSize,
field: sorter.field,
order: sorter.order,
searchQuery: JSON.stringify({
...(selectedCustomer && { customerId: selectedCustomer }),
...(value && { taskId: value })
})
});
}}
/> */}
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => navigate('/company/projectInfo')}
className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
>
新增专案
</Button>
</Space>
}
>
<Table columns={columns} dataSource={[]} rowKey="id" />
<Table
className="w-full"
columns={columns}
dataSource={projects}
rowKey="id"
scroll={{ x: true }}
loading={loadingProjects}
onChange={handleTableChange}
pagination={{
...pagination,
total,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total) => `共 ${total} 条记录`,
}}
/>
</Card>
);
};

758
src/pages/company/project/info.jsx Normal file
View File

@@ -0,0 +1,758 @@
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { supabase } from "@/config/supabase";
import { Spin, Tag, Empty, Button, Modal, Form, Input, Collapse, message, Upload,Tabs, Select, Divider } from 'antd';
import { PlusOutlined, FolderOpenOutlined, ClockCircleOutlined, InboxOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import {supabaseService}from '@/hooks/supabaseService'
const type="project"
export default function ProjectInfo() {
const { id } = useParams();
const [loading, setLoading] = useState(true);
const [projectData, setProjectData] = useState(null);
const [form] = Form.useForm();
const [isModalVisible, setIsModalVisible] = useState(false);
const [units, setUnits] = useState([]);
const [loadingUnits, setLoadingUnits] = useState(false);
const [currentUnit, setCurrentUnit] = useState('');
const [relatedTasks, setRelatedTasks] = useState([]);
const [loadingTasks, setLoadingTasks] = useState(false);
const [uploadFileList, setUploadFileList] = useState([]);
const fetchProjectDetail = async () => {
try {
setLoading(true);
const { data, error } = await supabase
.from("resources")
.select("*")
.eq("id", id)
.single();
if (error) throw error;
setProjectData(data);
} catch (error) {
console.error("获取项目详情失败:", error);
} finally {
setLoading(false);
}
};
useEffect(() => {
if (id) {
fetchProjectDetail();
}
}, [id]);
const handleAddItem = async (values) => {
try {
const newItem = {
url: values.url,
unit: currentUnit,
title: values.title,
description: values.description,
};
const updatedSections = projectData.attributes.sections.map(section => {
if (section.sectionName === currentUnit) {
return {
...section,
items: [...(section.items || []), newItem]
};
}
return section;
});
const { error } = await supabase
.from("resources")
.update({
attributes: {
...projectData.attributes,
sections: updatedSections
}
})
.eq("id", id);
if (error) throw error;
setProjectData({
...projectData,
attributes: {
...projectData.attributes,
sections: updatedSections
}
});
message.success('添加成功');
setIsModalVisible(false);
form.resetFields();
} catch (error) {
console.error("添加资源项失败:", error);
message.error('添加失败');
}
};
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);
}
};
const handleAddUnit = async (unitName) => {
try {
const { error } = await supabase.from("resources").insert([
{
type: "units",
attributes: {
name: unitName,
template_type: "project",
},
schema_version: 1,
},
]);
if (error) throw error;
message.success("新增资源类型成功");
fetchUnits();
return true;
} catch (error) {
message.error("新增资源类型失败");
console.error(error);
return false;
}
};
useEffect(() => {
fetchUnits();
}, []);
const getDomainFromUrl = (url) => {
try {
const domain = new URL(url).hostname;
return domain.replace('www.', '');
} catch (error) {
return url;
}
};
// 处理资源分组
const getResourcesByUnit = () => {
const resourcesByUnit = {};
// 确保 sections 存在且是数组
if (projectData?.attributes?.sections && Array.isArray(projectData.attributes.sections)) {
projectData.attributes.sections.forEach(section => {
// 确保 items 存在且是数组
if (section.items && Array.isArray(section.items)) {
// 使用 sectionName 作为 unit
const unit = section.sectionName;
if (!resourcesByUnit[unit]) {
resourcesByUnit[unit] = [];
}
// 将该 section 的所有 items 添加到对应的 unit 中
resourcesByUnit[unit].push(...section.items);
}
});
}
return resourcesByUnit;
};
// 在渲染之前获取处理后的资源
const resourcesByUnit = getResourcesByUnit();
// 添加一个图标映射函数
const getResourceIcon = (url) => {
const domain = getDomainFromUrl(url).toLowerCase();
if (domain.includes('figma')) return '🎨';
if (domain.includes('github')) return '💻';
if (domain.includes('notion')) return '📝';
if (domain.includes('docs.google')) return '📄';
if (domain.includes('sheets.google')) return '📊';
if (domain.includes('youtube')) return '🎥';
if (domain.includes('drive.google')) return '📁';
return '🔗';
};
// 获取关联任务的详细信息
const fetchRelatedTasks = async () => {
if (!projectData?.attributes?.relatedTasks?.length) return;
setLoadingTasks(true);
try {
const taskIds = projectData.attributes.relatedTasks.map(task => task.id);
const { data: tasks, error } = await supabase
.from("resources")
.select("*")
.eq("type", "task")
.in("id", taskIds);
if (error) throw error;
setRelatedTasks(tasks || []);
} catch (error) {
console.error("获取关联任务失败:", error);
message.error("获取关联任务失败");
} finally {
setLoadingTasks(false);
}
};
useEffect(() => {
if (projectData) {
fetchRelatedTasks();
}
}, [projectData]);
// 渲染任务详情
const renderTaskDetails = () => {
if (loadingTasks) {
return <Spin />;
}
if (!relatedTasks.length) {
return null;
}
return (
<div className="lg:col-span-3 mb-6">
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
<div className="p-6">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white flex items-center mb-6">
<div className="w-1 h-6 bg-purple-500 rounded-full mr-3 shadow-lg shadow-purple-500/50"></div>
关联任务
</h2>
<div className="space-y-4">
{relatedTasks.map((task) => (
<div
key={task.id}
className="border border-gray-100 dark:border-gray-700 rounded-xl p-6
hover:border-purple-100 dark:hover:border-purple-900/50
transition-all duration-300"
>
{/* 任务标题和状态 */}
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-medium text-gray-900 dark:text-white">
{task.attributes.taskName}
</h3>
<Tag
className={`px-3 py-1 rounded-full
${task.attributes.status === '进行中' ? 'bg-blue-50 text-blue-600 border-blue-200' :
task.attributes.status === '已完成' ? 'bg-green-50 text-green-600 border-green-200' :
'bg-gray-50 text-gray-600 border-gray-200'}`}
>
{task.attributes.status}
</Tag>
</div>
{/* 任务时间和客户 */}
<div className="flex items-center gap-6 mb-4 text-sm text-gray-500 dark:text-gray-400">
<span className="flex items-center gap-2">
<ClockCircleOutlined />
{task.attributes.timeRange ?
`${dayjs(task.attributes.timeRange[0]).format('YYYY-MM-DD')} 至 ${dayjs(task.attributes.timeRange[1]).format('YYYY-MM-DD')}` :
'未设置时间'
}
</span>
{/* <div className="flex items-center gap-2">
<span>客户:</span>
<div className="flex gap-1">
{task.attributes.customers?.map((customer) => (
<Tag
key={customer.id}
className="bg-purple-50 text-purple-600 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300"
>
{customer.name}
</Tag>
))}
</div>
</div> */}
</div>
{/* 任务流程 */}
<Collapse
ghost
className="bg-transparent border-none"
>
<Collapse.Panel
header="任务流程"
key="1"
className="bg-gray-50/50 dark:bg-gray-800/50 rounded-xl px-4"
>
<div className="space-y-4">
{task.attributes.sections?.map((section, sIndex) => (
<div key={sIndex} className="space-y-2">
<h4 className="font-medium text-gray-900 dark:text-white">
{section.sectionName}
</h4>
<div className="pl-4 space-y-2">
{section.items?.map((item, iIndex) => (
<div
key={iIndex}
className="flex items-start gap-4 p-3 rounded-lg
bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700"
>
<div className="flex-grow">
<div className="text-gray-900 dark:text-white font-medium">
{item.name}
</div>
{item.description && (
<div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
{item.description}
</div>
)}
</div>
<Tag
className={`flex-shrink-0
${item.unit === '已完成' ? 'bg-green-50 text-green-600 border-green-200' :
item.unit === '进行中' ? 'bg-blue-50 text-blue-600 border-blue-200' :
'bg-gray-50 text-gray-600 border-gray-200'}`}
>
{item.unit}
</Tag>
</div>
))}
</div>
</div>
))}
</div>
</Collapse.Panel>
</Collapse>
</div>
))}
</div>
</div>
</div>
</div>
);
};
// 修改文件上传处理函数
const handleFileUpload = async (file) => {
try {
const fileExt = file.name.split('.').pop();
const fileName = `${Date.now()}.${fileExt}`;
const filePath = `${type}/${fileName}`;
const { data, error } = await supabase.storage
.from('file')
.upload(filePath, file);
if (error) throw error;
const { data: { publicUrl } } = supabase.storage
.from('file')
.getPublicUrl(filePath);
let fileType = '';
if (file.type.startsWith('image/')) {
fileType = '图片';
} else if (file.type.startsWith('video/')) {
fileType = '视频';
} else if (file.type.includes('pdf')) {
fileType = 'PDF文档';
} else {
fileType = '其他文件';
}
// 自动填充表单
form.setFieldsValue({
url: publicUrl,
title: `${fileType}-${file.name}`,
unit: fileType,
description: ''
});
return true;
} catch (error) {
console.error('文件上传失败:', error);
return false;
}
};
// 修改模态框内容
const renderModal = () => (
<Modal
title="添加资源"
open={isModalVisible}
onCancel={() => {
setIsModalVisible(false);
form.resetFields();
}}
destroyOnClose={true}
footer={null}
>
<Form
form={form}
layout="vertical"
onFinish={handleAddItem}
className="mt-4"
preserve={false}
>
<Upload.Dragger
multiple={false}
maxCount={1}
customRequest={async ({ file, onSuccess, onError }) => {
try {
const result = await handleFileUpload(file);
if (result) {
onSuccess();
} else {
onError();
}
} catch (err) {
onError();
}
}}
onChange={(info) => {
if (info.file.status === 'done') {
message.success(`${info.file.name} 上传成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 上传失败`);
}
}}
onRemove={() => {
form.resetFields();
}}
>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
<p className="ant-upload-hint">上传文件后可修改相关信息</p>
</Upload.Dragger>
<Form.Item
name="url"
label="资源链接"
rules={[{ required: true, message: '请输入资源链接' }]}
className="mt-4"
>
<Input placeholder="请输入资源链接" />
</Form.Item>
<Form.Item
name="title"
label="资源标题"
rules={[{ required: true, message: '请输入资源标题' }]}
>
<Input placeholder="请输入资源标题" />
</Form.Item>
<Form.Item
name="unit"
label="资源类型"
>
<Select
placeholder="请选择资源类型"
loading={loadingUnits}
showSearch
allowClear
options={units.map((unit) => ({
label: unit.attributes.name,
value: unit.attributes.name,
}))}
dropdownRender={(menu) => (
<>
{menu}
<Divider style={{ margin: '8px 0' }} />
<div style={{ padding: '4px' }}>
<Input.Search
placeholder="输入新类型"
enterButton={<PlusOutlined />}
onSearch={async (value) => {
if (!value.trim()) return;
if (await handleAddUnit(value.trim())) {
form.setFieldValue('unit', value.trim());
}
}}
/>
</div>
</>
)}
/>
</Form.Item>
<Form.Item
name="description"
label="资源描述"
>
<Input.TextArea rows={4} placeholder="请输入资源描述" />
</Form.Item>
<Form.Item className="mb-0 flex justify-end gap-3">
<Button
onClick={() => {
setIsModalVisible(false);
form.resetFields();
}}
>
取消
</Button>
<Button type="primary" htmlType="submit">
确定
</Button>
</Form.Item>
</Form>
</Modal>
);
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<Spin tip="加载中..." />
</div>
);
}
if (!projectData) {
return (
<div className="flex items-center justify-center min-h-screen">
<Empty description="未找到项目信息" />
</div>
);
}
const { attributes } = projectData;
// 打开所有资源的函数
const openAllResources = (items) => {
items.forEach(item => {
if (item.url) {
window.open(item.url, '_blank');
}
});
};
return (
<div className="min-h-screen bg-gray-50/50 dark:bg-gray-900/95">
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{renderTaskDetails()}
<div className="lg:col-span-1">
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
<div className="p-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
{attributes.projectName}
</h1>
<div className="space-y-8">
<div>
<h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">
项目描述
</h2>
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
{attributes.description || '暂无描述'}
</p>
</div>
<div>
<h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">
项目周期
</h2>
<p className="text-gray-700 dark:text-gray-300">
{attributes.startDate && attributes.endDate ? (
<span className="inline-flex items-center px-3 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-300">
{dayjs(attributes.startDate).format('YYYY-MM-DD')} 至 {dayjs(attributes.endDate).format('YYYY-MM-DD')}
</span>
) : '未设置'}
</p>
</div>
<div>
<h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">
相关客户
</h2>
<div className="flex flex-wrap gap-2">
{attributes.customers?.map((customer) => (
<Tag
key={customer.id}
className="px-3 py-1 rounded-full bg-purple-50 text-purple-600 border-purple-200
dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-800"
>
{customer.name}
</Tag>
)) || '暂无客户'}
</div>
</div>
<div>
<h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">
关联任务
</h2>
<div className="flex flex-wrap gap-2">
{attributes.relatedTasks?.map((task) => (
<Tag
key={task.id}
className="px-3 py-1 rounded-full bg-green-50 text-green-600 border-green-200
dark:bg-green-900/30 dark:text-green-300 dark:border-green-800"
>
{task.name}
</Tag>
)) || '暂无任务'}
</div>
</div>
</div>
</div>
</div>
</div>
<div className="lg:col-span-2">
<div className="space-y-6">
{Object.entries(resourcesByUnit).map(([unit, items]) => (
<div
key={unit}
className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden"
>
<div className="p-6">
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white flex items-center">
<div className="w-1 h-6 bg-blue-500 rounded-full mr-3 shadow-lg shadow-blue-500/50"></div>
{unit}
</h2>
<div className="flex gap-3">
{items.length > 0 && (
<Button
type="default"
icon={<FolderOpenOutlined />}
onClick={() => openAllResources(items)}
className="flex items-center hover:text-blue-600 hover:border-blue-600 transition-colors
dark:hover:text-blue-400 dark:hover:border-blue-400"
>
打开全部
</Button>
)}
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => {
setCurrentUnit(unit);
setIsModalVisible(true);
}}
className="flex items-center bg-blue-500 hover:bg-blue-600 border-none shadow-lg
shadow-blue-500/30 transition-all hover:shadow-blue-500/50"
>
添加资源
</Button>
</div>
</div>
{items.length > 0 ? (
<div className="grid gap-4">
{items.map((item, itemIndex) => (
<div
key={itemIndex}
className="group relative p-4 rounded-xl border border-gray-100 dark:border-gray-700
hover:border-blue-100 dark:hover:border-blue-900/50
hover:bg-gradient-to-r hover:from-blue-50 hover:to-transparent
dark:hover:from-blue-900/20 dark:hover:to-transparent
transition-all duration-300 bg-white dark:bg-gray-800/50"
>
<div className="flex items-start gap-4">
{/* 资源图标 */}
<div className="flex-shrink-0 w-10 h-10 flex items-center justify-center
bg-gradient-to-br from-blue-50 to-blue-100
dark:from-blue-900/30 dark:to-blue-800/30
rounded-lg text-xl shadow-sm">
{item.url && getResourceIcon(item.url)}
</div>
{/* 资源内容 */}
<div className="flex-grow min-w-0">
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
<h3 className="text-lg font-medium text-gray-900 dark:text-white truncate">
{item.title}
</h3>
{item.url && (
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center text-blue-500 hover:text-blue-600 text-sm
hover:underline gap-1 transition-colors mt-1"
>
{getDomainFromUrl(item.url)}
</a>
)}
</div>
{/* 快捷操作按钮 */}
<div className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
{item.url && (
<a
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center px-3 py-1 text-sm
bg-blue-500 hover:bg-blue-600 text-white rounded-full
shadow-sm hover:shadow-md transition-all duration-200"
>
打开链接
</a>
)}
</div>
</div>
{/* 资源描述 */}
{item.description && (
<div className="mt-2 relative">
<p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed
line-clamp-2 group-hover:line-clamp-none transition-all duration-200">
{item.description}
</p>
<div className="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-t from-white dark:from-gray-800/50
to-transparent group-hover:opacity-0 transition-opacity"></div>
</div>
)}
</div>
</div>
</div>
))}
</div>
) : (
<div className="text-center py-12 px-4">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full
bg-gray-100 dark:bg-gray-800 mb-4">
<span className="text-2xl">📂</span>
</div>
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
暂无资源
</h3>
<p className="text-gray-500 dark:text-gray-400 text-sm">
点击"添加资源"按钮开始添加资源
</p>
</div>
)}
</div>
</div>
))}
</div>
</div>
</div>
</div>
{renderModal()}
</div>
);
}

1
src/pages/company/quotation/index.jsx
View File

@@ -353,6 +353,7 @@ useEffect(()=>{
<Space>
<Select
allowClear
variant="filled"
loading={loadingCustomers}
placeholder="按客户筛选"
style={{ width: 200 }}

4
src/pages/company/service/itemsManange/sections/index.jsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import QuataSections from "./quotation";
import TaskSections from "./task";
import Project from './project'
export default function SectionComponent({ activeType }) {
const renderFn = (type) => {
switch (type) {
@@ -10,7 +10,7 @@ export default function SectionComponent({ activeType }) {
case "task":
return <TaskSections />;
default:
return <div></div>;
return <Project></Project>;
}
};
return <>{renderFn(activeType)}</>;

544
src/pages/company/service/itemsManange/sections/project.jsx Normal file
View File

@@ -0,0 +1,544 @@
import React, { useState, useEffect } from 'react';
import {
Table,
Button,
Form,
Input,
Space,
message,
Popconfirm,
Select,
Divider,
Card,
Typography,
Upload,
Modal
} from 'antd';
import {
PlusOutlined,
DeleteOutlined,
InboxOutlined,
UploadOutlined
} from '@ant-design/icons';
import { supabaseService } from '@/hooks/supabaseService';
import { v4 as uuidv4 } from 'uuid';
import { supabase } from "@/config/supabase";
const { Text } = Typography;
const TYPE = 'project';
const ProjectSections = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [editingKey, setEditingKey] = useState('');
const [form] = Form.useForm();
const [loadingUnits, setLoadingUnits] = useState(false);
const [units, setUnits] = useState([]);
const [formValues, setFormValues] = useState({});
const [uploadModalVisible, setUploadModalVisible] = useState(false);
const [currentAddItem, setCurrentAddItem] = useState(null);
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})` },
},
order: {
column: "created_at",
ascending: false,
},
});
setUnits(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(),
url: '',
title: '',
unit: '',
description: ''
}]
},
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.title)) {
message.error('请至少添加一个有效的资源项目');
return;
}
const formattedItems = items.filter(item => item.title).map(item => ({
url: item.url,
title: item.title,
unit: item.unit,
description: item.description
}));
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 handleFileUpload = async (file, addItem) => {
try {
const fileExt = file.name.split('.').pop();
const fileName = `${Date.now()}.${fileExt}`;
const { data, error } = await supabase.storage
.from('file')
.upload(filePath, file);
if (error) throw error;
const { data: { publicUrl } } = supabase.storage
.from('file')
.getPublicUrl(fileName);
let fileType = '';
if (file.type.startsWith('image/')) {
fileType = '图片';
} else if (file.type.startsWith('video/')) {
fileType = '视频';
} else if (file.type.includes('pdf')) {
fileType = 'PDF文档';
} else {
fileType = '其他文件';
}
addItem({
key: uuidv4(),
url: publicUrl,
title: `${fileType}-${file.name}`,
unit: fileType,
description: '',
});
return true;
} catch (error) {
message.error('文件上传失败');
console.error(error);
return false;
}
};
const renderUploadModal = () => (
<Modal
title="上传资源文件"
open={uploadModalVisible}
onCancel={() => setUploadModalVisible(false)}
footer={null}
>
<Upload.Dragger
multiple
customRequest={async ({ file, onSuccess, onError }) => {
try {
const result = await handleFileUpload(file, currentAddItem);
if (result) {
onSuccess();
} else {
onError();
}
} catch (err) {
onError();
}
}}
onChange={(info) => {
if (info.file.status === 'done') {
message.success(`${info.file.name} 上传成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 上传失败`);
}
}}
>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
<p className="ant-upload-hint">支持单个或批量上传</p>
</Upload.Dragger>
</Modal>
);
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-5 gap-4">
<Form.Item
{...field}
name={[field.name, 'url']}
rules={[{ required: true, message: '请输入资源链接' }]}
className="mb-0"
>
<Input placeholder="资源链接" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'title']}
rules={[{ required: true, message: '请输入资源标题' }]}
className="mb-0"
>
<Input placeholder="资源标题" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'unit']}
className="mb-0"
>
<Select
placeholder="资源类型"
loading={loadingUnits}
showSearch
allowClear
options={units.map((unit) => ({
label: unit.attributes.name,
value: unit.attributes.name,
}))}
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>
<Form.Item
{...field}
name={[field.name, 'description']}
className="mb-0"
>
<Input placeholder="资源描述" />
</Form.Item>
<Button
type="text"
danger
icon={<DeleteOutlined />}
onClick={() => remove(field.name)}
disabled={fields.length === 1}
/>
</div>
</Card>
))}
<div className="flex gap-2">
<Button
type="dashed"
onClick={() => add({
key: uuidv4(),
url: '',
title: '',
unit: '',
description: ''
})}
icon={<PlusOutlined />}
className="w-full hover:border-blue-400 hover:text-blue-500"
>
手动添加资源
</Button>
<Button
type="dashed"
onClick={() => {
setCurrentAddItem(() => add);
setUploadModalVisible(true);
}}
icon={<UploadOutlined />}
className="w-full hover:border-blue-400 hover:text-blue-500"
>
上传文件
</Button>
</div>
</div>
)}
</Form.List>
);
}
return (
<div className="space-y-2">
{(items || []).map((item, index) => (
<div key={index} className="flex items-center gap-4 text-sm">
<a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-600">
{item.title}
</a>
<span className="text-gray-500">{item.unit || '未设置类型'}</span>
{item.description && (
<span className="text-gray-500">({item.description})</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>
{renderUploadModal()}
</div>
);
};
export default ProjectSections;

1
src/pages/company/task/index.jsx
View File

@@ -313,7 +313,6 @@ const TaskPage = () => {
),
});
// 按分类分组
templates.forEach((template) => {
if (template.attributes.category) {
template.attributes.category.forEach((cat) => {

28
src/pages/resource/bucket/index.jsx
View File

@@ -362,7 +362,6 @@ const StorageManager = () => {
setNewFileName(selectedFile.name);
setIsRenaming(true);
};
// 添加文件删除功能
const handleDelete = async (fileName) => {
try {
const { error } = await supabase.storage.from("file").remove([fileName]);
@@ -370,29 +369,22 @@ const StorageManager = () => {
message.success("文件删除成功");
// 直接从本地状态中移除被删除的文件
setDisplayFiles(prev => prev.filter(file => file.name !== fileName));
// 如果删除的是当前选中的文件，清空预览
if (selectedFile?.name === fileName) {
setSelectedFile(null);
setFileContent("");
}
// 更新文件类型统计
// 注意：typeStats 是通过 useMemo 自动计算的，不需要手动更新
} catch (error) {
message.error(`删除失败: ${error.message}`);
}
};
// 判断是否有过滤条件
const hasFilters = useMemo(() => {
return searchText !== '' || selectedType !== '全部';
}, [searchText, selectedType]);
// 加载更多数据
const loadMoreFiles = () => {
if (!hasMore || loading || hasFilters) return; // 有过滤条件不加载更多
fetchAllFiles(false);
@@ -403,35 +395,17 @@ const StorageManager = () => {
fetchAllFiles(true);
}, []);
// 搜索或筛选时重新加载
const handleSearch = (value) => {
setSearchText(value);
// 不需要重新调用 fetchAllFiles，因为搜索是在前端过滤
};
const handleTypeChange = (type) => {
setSelectedType(type);
// 不需要重新调用 fetchAllFiles，因为类型筛选是在前端过滤
};
// 处理文件名中的空格
const handleFileName = (fileName) => {
// 替换空格为下划线或编码空格
return fileName.replace(/\s+/g, '_');
};
// 修改文件类型判断
const getFileType = (mimetype) => {
if (!mimetype) return '其他';
for (const [type, mimetypes] of Object.entries(FILE_TYPES)) {
if (mimetypes.some(t => mimetype.startsWith(t) || mimetype === t)) {
return type;
}
}
return '其他';
};
// 渲染加载状态
const LoadingSpinner = () => (

23
src/routes/routes.js
View File

@@ -43,6 +43,13 @@ const companyRoutes = [
name: "报价单详情",
icon: "file",
roles: ["ADMIN", "OWNER"],
},
{
path: "project",
component: lazy(() => import("@/pages/company/project")),
name: "专案管理",
icon: "appstore",
roles: ["ADMIN", "OWNER"],
},
{
path: "task",
@@ -119,13 +126,7 @@ const companyRoutes = [
icon: "branches",
roles: ["ADMIN", "OWNER"],
},
{
path: "project",
component: lazy(() => import("@/pages/company/project")),
name: "专案管理",
icon: "appstore",
roles: ["ADMIN", "OWNER"],
},
{
path: "projectInfo/:id?",
hidden: true,
@@ -133,6 +134,14 @@ const companyRoutes = [
name: "专案管理详情",
icon: "appstore",
roles: ["ADMIN", "OWNER"],
},
{
path: "projectView/:id?",
hidden: true,
component: lazy(() => import("@/pages/company/project/info")),
name: "专案详情",
icon: "appstore",
roles: ["ADMIN", "OWNER"],
}
];