82 lines
2.0 KiB
JavaScript
82 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import { Form, Input, Upload, Select } from 'antd';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import { supabase } from '@/config/supabase';
|
|
|
|
export const TeamForm = ({ form }) => {
|
|
const normFile = (e) => {
|
|
if (Array.isArray(e)) {
|
|
return e;
|
|
}
|
|
return e?.fileList;
|
|
};
|
|
|
|
const handleUpload = async ({ file, onSuccess, onError }) => {
|
|
try {
|
|
const fileExt = file.name.split('.').pop();
|
|
const fileName = `${Math.random()}.${fileExt}`;
|
|
const filePath = `team-avatars/${fileName}`;
|
|
|
|
const { error: uploadError } = await supabase.storage
|
|
.from('file')
|
|
.upload(filePath, file);
|
|
|
|
if (uploadError) throw uploadError;
|
|
|
|
const { data: { publicUrl } } = supabase.storage
|
|
.from('file')
|
|
.getPublicUrl(filePath);
|
|
|
|
form.setFieldsValue({ avatarUrl: publicUrl });
|
|
onSuccess(publicUrl);
|
|
} catch (error) {
|
|
console.error('Upload error:', error);
|
|
onError(error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
requiredMark={false}
|
|
>
|
|
<Form.Item
|
|
name="name"
|
|
label="团队名称"
|
|
rules={[{ required: true, message: '请输入团队名称' }]}
|
|
>
|
|
<Input placeholder="请输入团队名称" />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="avatarUrl"
|
|
label="团队头像"
|
|
valuePropName="fileList"
|
|
getValueFromEvent={normFile}
|
|
>
|
|
<Upload
|
|
customRequest={handleUpload}
|
|
showUploadList={false}
|
|
maxCount={1}
|
|
listType="picture-card"
|
|
>
|
|
{form.getFieldValue('avatarUrl') ? (
|
|
<img
|
|
src={form.getFieldValue('avatarUrl')}
|
|
alt="avatar"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div>
|
|
<PlusOutlined />
|
|
<div className="mt-2">上传头像</div>
|
|
</div>
|
|
)}
|
|
</Upload>
|
|
</Form.Item>
|
|
|
|
|
|
</Form>
|
|
);
|
|
}; |