feat: add create and edit modals for modifications management
This commit is contained in:
@@ -0,0 +1,100 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { App, Form, Modal } from "antd"
|
||||
import { ModificationApi } from "@/api"
|
||||
import ModificationForm from "@/components/modification-form"
|
||||
import { Modification, ModificationRequest } from "@/types"
|
||||
|
||||
interface ModificationCreateModalProps {
|
||||
open: boolean
|
||||
defaultFirearmId?: number
|
||||
lockedFirearmId?: number
|
||||
onCancel: () => void
|
||||
onSuccess: (modification: Modification) => void
|
||||
}
|
||||
|
||||
function normalizeRequest(values: ModificationRequest): ModificationRequest {
|
||||
return {
|
||||
firearmId: values.firearmId,
|
||||
name: values.name.trim(),
|
||||
code: values.code.trim(),
|
||||
tags: values.tags?.map((tag) => tag.trim()).filter(Boolean) || [],
|
||||
note: values.note?.trim() || undefined,
|
||||
author: values.author?.trim() || undefined,
|
||||
videoUrl: values.videoUrl?.trim() || undefined,
|
||||
accessories: (values.accessories || []).map((accessory) => ({
|
||||
slotName: accessory.slotName.trim(),
|
||||
accessoryName: accessory.accessoryName.trim(),
|
||||
tunings: (accessory.tunings || []).map((tuning) => ({
|
||||
tuningName: tuning.tuningName.trim(),
|
||||
tuningValue: tuning.tuningValue,
|
||||
})),
|
||||
})),
|
||||
}
|
||||
}
|
||||
|
||||
export default function ModificationCreateModal({
|
||||
open,
|
||||
defaultFirearmId,
|
||||
lockedFirearmId,
|
||||
onCancel,
|
||||
onSuccess,
|
||||
}: ModificationCreateModalProps) {
|
||||
const { message } = App.useApp()
|
||||
const [form] = Form.useForm<ModificationRequest>()
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
return
|
||||
}
|
||||
|
||||
form.setFieldsValue({
|
||||
firearmId: lockedFirearmId ?? defaultFirearmId,
|
||||
accessories: [{ slotName: "", accessoryName: "", tunings: [] }],
|
||||
tags: [],
|
||||
})
|
||||
}, [open, defaultFirearmId, lockedFirearmId, form])
|
||||
|
||||
async function onFinish(values: ModificationRequest) {
|
||||
setLoading(true)
|
||||
try {
|
||||
const modification = await ModificationApi.addModification(
|
||||
normalizeRequest({
|
||||
...values,
|
||||
firearmId: lockedFirearmId ?? values.firearmId,
|
||||
})
|
||||
)
|
||||
message.success("改枪码创建成功")
|
||||
form.resetFields()
|
||||
onSuccess(modification)
|
||||
} catch {
|
||||
message.error("改枪码创建失败，请稍后重试")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="新建改枪"
|
||||
open={open}
|
||||
onCancel={onCancel}
|
||||
onOk={() => form.submit()}
|
||||
okText="创建"
|
||||
cancelText="取消"
|
||||
confirmLoading={loading}
|
||||
width={820}
|
||||
destroyOnHidden
|
||||
afterOpenChange={(visible) => {
|
||||
if (!visible) {
|
||||
form.resetFields()
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ModificationForm form={form} onFinish={onFinish} lockFirearmId={lockedFirearmId} />
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { App, Form, Modal } from "antd"
|
||||
import { ModificationApi } from "@/api"
|
||||
import ModificationForm from "@/components/modification-form"
|
||||
import { Modification, ModificationRequest } from "@/types"
|
||||
|
||||
interface ModificationEditModalProps {
|
||||
open: boolean
|
||||
modification: Modification | null
|
||||
lockedFirearmId?: number
|
||||
onCancel: () => void
|
||||
onSuccess: (modification: Modification) => void
|
||||
}
|
||||
|
||||
function normalizeRequest(values: ModificationRequest): ModificationRequest {
|
||||
return {
|
||||
firearmId: values.firearmId,
|
||||
name: values.name.trim(),
|
||||
code: values.code.trim(),
|
||||
tags: values.tags?.map((tag) => tag.trim()).filter(Boolean) || [],
|
||||
note: values.note?.trim() || undefined,
|
||||
author: values.author?.trim() || undefined,
|
||||
videoUrl: values.videoUrl?.trim() || undefined,
|
||||
accessories: (values.accessories || []).map((accessory) => ({
|
||||
slotName: accessory.slotName.trim(),
|
||||
accessoryName: accessory.accessoryName.trim(),
|
||||
tunings: (accessory.tunings || []).map((tuning) => ({
|
||||
tuningName: tuning.tuningName.trim(),
|
||||
tuningValue: tuning.tuningValue,
|
||||
})),
|
||||
})),
|
||||
}
|
||||
}
|
||||
|
||||
export default function ModificationEditModal({
|
||||
open,
|
||||
modification,
|
||||
lockedFirearmId,
|
||||
onCancel,
|
||||
onSuccess,
|
||||
}: ModificationEditModalProps) {
|
||||
const { message } = App.useApp()
|
||||
const [form] = Form.useForm<ModificationRequest>()
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !modification) {
|
||||
return
|
||||
}
|
||||
|
||||
const { id: _id, ...editableValues } = modification
|
||||
form.setFieldsValue({
|
||||
...editableValues,
|
||||
firearmId: lockedFirearmId ?? editableValues.firearmId,
|
||||
tags: editableValues.tags || [],
|
||||
accessories: editableValues.accessories || [],
|
||||
})
|
||||
}, [open, modification, lockedFirearmId, form])
|
||||
|
||||
async function onFinish(values: ModificationRequest) {
|
||||
if (!modification) {
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const updated = await ModificationApi.editModification(
|
||||
modification.id,
|
||||
normalizeRequest({
|
||||
...values,
|
||||
firearmId: lockedFirearmId ?? values.firearmId,
|
||||
})
|
||||
)
|
||||
message.success("改枪码更新成功")
|
||||
onSuccess(updated)
|
||||
} catch {
|
||||
message.error("改枪码更新失败，请稍后重试")
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="编辑改枪"
|
||||
open={open}
|
||||
onCancel={onCancel}
|
||||
onOk={() => form.submit()}
|
||||
okText="保存"
|
||||
cancelText="取消"
|
||||
confirmLoading={loading}
|
||||
width={820}
|
||||
destroyOnHidden
|
||||
>
|
||||
<ModificationForm form={form} onFinish={onFinish} lockFirearmId={lockedFirearmId} />
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { FirearmApi } from "@/api"
|
||||
import slotNames from "@/constant/slots.json"
|
||||
import { Firearm, ModificationRequest } from "@/types"
|
||||
import { AutoComplete, Button, Card, Form, Input, InputNumber, Select, Space } from "antd"
|
||||
|
||||
interface ModificationFormProps {
|
||||
form: ReturnType<typeof Form.useForm<ModificationRequest>>[0]
|
||||
onFinish: (values: ModificationRequest) => void
|
||||
lockFirearmId?: number
|
||||
}
|
||||
|
||||
const slotOptions = slotNames.map((slotName) => ({ value: slotName }))
|
||||
|
||||
export default function ModificationForm({ form, onFinish, lockFirearmId }: ModificationFormProps) {
|
||||
const [firearmOptions, setFirearmOptions] = useState<Array<{ value: number; label: string }>>([])
|
||||
const [firearmLoading, setFirearmLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
let active = true
|
||||
|
||||
async function loadAllFirearms() {
|
||||
setFirearmLoading(true)
|
||||
try {
|
||||
const allFirearms: Firearm[] = []
|
||||
let page = 0
|
||||
let totalPages = 1
|
||||
|
||||
while (page < totalPages) {
|
||||
const paged = await FirearmApi.getFirearms({
|
||||
page,
|
||||
size: 100,
|
||||
sortBy: "id",
|
||||
direction: "ASC",
|
||||
})
|
||||
|
||||
allFirearms.push(...paged.items)
|
||||
totalPages = paged.totalPages
|
||||
page += 1
|
||||
}
|
||||
|
||||
if (!active) {
|
||||
return
|
||||
}
|
||||
|
||||
setFirearmOptions(
|
||||
allFirearms.map((firearm) => ({
|
||||
value: firearm.id,
|
||||
label: `${firearm.name}`,
|
||||
}))
|
||||
)
|
||||
} finally {
|
||||
if (active) {
|
||||
setFirearmLoading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void loadAllFirearms()
|
||||
|
||||
return () => {
|
||||
active = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
const mergedFirearmOptions = useMemo(() => {
|
||||
if (lockFirearmId === undefined || firearmOptions.some((option) => option.value === lockFirearmId)) {
|
||||
return firearmOptions
|
||||
}
|
||||
|
||||
return [{ value: lockFirearmId, label: `武器 ID: ${lockFirearmId}` }, ...firearmOptions]
|
||||
}, [firearmOptions, lockFirearmId])
|
||||
|
||||
return (
|
||||
<Form<ModificationRequest>
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={onFinish}
|
||||
requiredMark={false}>
|
||||
<Form.Item<ModificationRequest>
|
||||
name="firearmId"
|
||||
label="武器"
|
||||
rules={[{ required: true, message: "请输入武器" }]}>
|
||||
<Select<number>
|
||||
className="w-full"
|
||||
placeholder="请选择武器"
|
||||
options={mergedFirearmOptions}
|
||||
loading={firearmLoading}
|
||||
disabled={lockFirearmId !== undefined}
|
||||
showSearch={{
|
||||
filterOption: (input, option) => {
|
||||
const labelText = String(option?.label ?? "")
|
||||
return labelText.toLowerCase().includes(input.toLowerCase())
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest>
|
||||
name="name"
|
||||
label="改装名称"
|
||||
rules={[{ required: true, message: "请输入改装名称" }]}>
|
||||
<Input placeholder="请输入改装名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest>
|
||||
name="code"
|
||||
label="改枪码"
|
||||
rules={[{ required: true, message: "请输入改枪码" }]}>
|
||||
<Input placeholder="请输入改枪码" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest> name="tags" label="标签">
|
||||
<Select mode="tags" tokenSeparators={[",", " "]} placeholder="可选：输入后回车" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest> name="author" label="作者">
|
||||
<Input placeholder="可选：请输入作者" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest> name="videoUrl" label="视频链接">
|
||||
<Input placeholder="可选：请输入视频链接" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<ModificationRequest> name="note" label="备注">
|
||||
<Input.TextArea rows={3} placeholder="可选：补充说明" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.List name="accessories">
|
||||
{(accessoryFields, { add: addAccessory, remove: removeAccessory }) => (
|
||||
<div className="flex flex-col gap-4">
|
||||
{accessoryFields.map((accessoryField) => (
|
||||
<Card
|
||||
key={accessoryField.key}
|
||||
title={`配件 ${accessoryField.name + 1}`}
|
||||
size="small"
|
||||
extra={
|
||||
<Button
|
||||
danger
|
||||
type="link"
|
||||
size="small"
|
||||
onClick={() => removeAccessory(accessoryField.name)}>
|
||||
删除配件
|
||||
</Button>
|
||||
}>
|
||||
<Form.Item
|
||||
name={[accessoryField.name, "slotName"]}
|
||||
label="槽位"
|
||||
rules={[{ required: true, message: "请选择或输入槽位" }]}>
|
||||
<AutoComplete options={slotOptions} placeholder="请选择或输入槽位" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name={[accessoryField.name, "accessoryName"]}
|
||||
label="配件名称"
|
||||
rules={[{ required: true, message: "请输入配件名称" }]}>
|
||||
<Input placeholder="请输入配件名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.List name={[accessoryField.name, "tunings"]}>
|
||||
{(tuningFields, { add: addTuning, remove: removeTuning }) => (
|
||||
<div className="flex flex-col gap-3">
|
||||
{tuningFields.map((tuningField) => (
|
||||
<Space key={tuningField.key} align="start" className="w-full" wrap>
|
||||
<Form.Item
|
||||
name={[tuningField.name, "tuningName"]}
|
||||
label="调校项"
|
||||
rules={[{ required: true, message: "请输入调校项" }]}>
|
||||
<Input placeholder="例如：后坐控制" className="w-44" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={[tuningField.name, "tuningValue"]}
|
||||
label="调校值"
|
||||
rules={[{ required: true, message: "请输入调校值" }]}>
|
||||
<InputNumber className="w-32" placeholder="例如：0.35" />
|
||||
</Form.Item>
|
||||
<Button
|
||||
type="link"
|
||||
danger
|
||||
className="mt-8"
|
||||
onClick={() => removeTuning(tuningField.name)}>
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
))}
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => addTuning({ tuningName: "", tuningValue: 0 })}>
|
||||
添加调校
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Form.List>
|
||||
</Card>
|
||||
))}
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => addAccessory({ slotName: "", accessoryName: "", tunings: [] })}>
|
||||
添加配件
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user