264 lines
7.4 KiB
TypeScript
264 lines
7.4 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useState, useEffect } from "react"
|
||
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
||
|
|
import { useForm } from "react-hook-form"
|
||
|
|
import * as z from "zod"
|
||
|
|
import { Button } from "@/components/ui/button"
|
||
|
|
import {
|
||
|
|
Form,
|
||
|
|
FormControl,
|
||
|
|
FormField,
|
||
|
|
FormItem,
|
||
|
|
FormLabel,
|
||
|
|
FormMessage,
|
||
|
|
} from "@/components/ui/form"
|
||
|
|
import { Input } from "@/components/ui/input"
|
||
|
|
import { Textarea } from "@/components/ui/textarea"
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardFooter,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from "@/components/ui/card"
|
||
|
|
import { toast } from "sonner"
|
||
|
|
|
||
|
|
const formSchema = z.object({
|
||
|
|
name: z.string().min(2, "项目名称至少需要2个字符"),
|
||
|
|
account: z.string().min(3, "账号至少需要3个字符"),
|
||
|
|
password: z.string().optional(),
|
||
|
|
confirmPassword: z.string().optional(),
|
||
|
|
phone: z.string().optional(),
|
||
|
|
memo: z.string().optional(),
|
||
|
|
})
|
||
|
|
|
||
|
|
interface ProjectEditProps {
|
||
|
|
projectId: string
|
||
|
|
onSuccess?: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ProjectData {
|
||
|
|
id: number
|
||
|
|
name: string
|
||
|
|
account: string
|
||
|
|
memo?: string
|
||
|
|
phone?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ProjectEdit({ projectId, onSuccess }: ProjectEditProps) {
|
||
|
|
const [isLoading, setIsLoading] = useState(false)
|
||
|
|
const [isFetching, setIsFetching] = useState(true)
|
||
|
|
|
||
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
||
|
|
resolver: zodResolver(formSchema),
|
||
|
|
defaultValues: {
|
||
|
|
name: "",
|
||
|
|
account: "",
|
||
|
|
password: "",
|
||
|
|
confirmPassword: "",
|
||
|
|
phone: "",
|
||
|
|
memo: "",
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
// 获取项目数据
|
||
|
|
useEffect(() => {
|
||
|
|
const fetchProject = async () => {
|
||
|
|
setIsFetching(true)
|
||
|
|
try {
|
||
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/profile/${projectId}`)
|
||
|
|
const data = await response.json()
|
||
|
|
|
||
|
|
if (data.code === 200) {
|
||
|
|
const project = data.data
|
||
|
|
form.reset({
|
||
|
|
name: project.name || "",
|
||
|
|
account: project.account || "",
|
||
|
|
password: "",
|
||
|
|
confirmPassword: "",
|
||
|
|
phone: project.phone || "",
|
||
|
|
memo: project.memo || "",
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
toast.error(data.msg || "获取项目信息失败")
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
toast.error("网络错误，请稍后重试")
|
||
|
|
} finally {
|
||
|
|
setIsFetching(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
fetchProject()
|
||
|
|
}, [projectId, form])
|
||
|
|
|
||
|
|
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
||
|
|
// 检查密码是否匹配
|
||
|
|
if (values.password && values.password !== values.confirmPassword) {
|
||
|
|
toast.error("两次输入的密码不一致")
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
setIsLoading(true)
|
||
|
|
try {
|
||
|
|
// 准备请求数据，根据需要添加或移除字段
|
||
|
|
const updateData: Record<string, any> = {
|
||
|
|
id: parseInt(projectId),
|
||
|
|
name: values.name,
|
||
|
|
account: values.account,
|
||
|
|
memo: values.memo,
|
||
|
|
phone: values.phone,
|
||
|
|
}
|
||
|
|
|
||
|
|
// 如果提供了密码，则包含密码字段
|
||
|
|
if (values.password) {
|
||
|
|
updateData.password = values.password
|
||
|
|
}
|
||
|
|
|
||
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/company/update`, {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
body: JSON.stringify(updateData),
|
||
|
|
})
|
||
|
|
|
||
|
|
const data = await response.json()
|
||
|
|
|
||
|
|
if (data.code === 200) {
|
||
|
|
toast.success("项目更新成功")
|
||
|
|
if (onSuccess) {
|
||
|
|
onSuccess()
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
toast.error(data.msg || "更新项目失败")
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
toast.error("网络错误，请稍后重试")
|
||
|
|
} finally {
|
||
|
|
setIsLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isFetching) {
|
||
|
|
return <div className="flex items-center justify-center min-h-64">加载中...</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className="w-full">
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>编辑项目</CardTitle>
|
||
|
|
<CardDescription>更新项目信息和设置</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<Form {...form}>
|
||
|
|
<form id="edit-project-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="name"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormLabel>项目名称</FormLabel>
|
||
|
|
<FormControl>
|
||
|
|
<Input placeholder="请输入项目名称" {...field} />
|
||
|
|
</FormControl>
|
||
|
|
<FormMessage />
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="grid gap-4 md:grid-cols-2">
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="account"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormLabel>账号</FormLabel>
|
||
|
|
<FormControl>
|
||
|
|
<Input placeholder="请输入账号" {...field} />
|
||
|
|
</FormControl>
|
||
|
|
<FormMessage />
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="phone"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormLabel>手机号</FormLabel>
|
||
|
|
<FormControl>
|
||
|
|
<Input placeholder="请输入手机号" {...field} />
|
||
|
|
</FormControl>
|
||
|
|
<FormMessage />
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid gap-4 md:grid-cols-2">
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="password"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormLabel>密码</FormLabel>
|
||
|
|
<FormControl>
|
||
|
|
<Input type="password" placeholder="不修改请留空" {...field} />
|
||
|
|
</FormControl>
|
||
|
|
<FormMessage />
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="confirmPassword"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormLabel>确认密码</FormLabel>
|
||
|
|
<FormControl>
|
||
|
|
<Input type="password" placeholder="请再次输入密码" {...field} />
|
||
|
|
</FormControl>
|
||
|
|
<FormMessage />
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<FormField
|
||
|
|
control={form.control}
|
||
|
|
name="memo"
|
||
|
|
render={({ field }) => (
|
||
|
|
<FormItem>
|
||
|
|
<FormLabel>项目描述</FormLabel>
|
||
|
|
<FormControl>
|
||
|
|
<Textarea placeholder="请输入项目描述" {...field} />
|
||
|
|
</FormControl>
|
||
|
|
<FormMessage />
|
||
|
|
</FormItem>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</form>
|
||
|
|
</Form>
|
||
|
|
</CardContent>
|
||
|
|
<CardFooter className="flex justify-end space-x-2">
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
onClick={() => form.reset()}
|
||
|
|
disabled={isLoading}
|
||
|
|
>
|
||
|
|
重置
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
form="edit-project-form"
|
||
|
|
disabled={isLoading}
|
||
|
|
>
|
||
|
|
{isLoading ? "保存中..." : "保存更改"}
|
||
|
|
</Button>
|
||
|
|
</CardFooter>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|