feat(image): add page
This commit is contained in:
278
app/project/detail/components/NoteRulesTable.tsx
Normal file
278
app/project/detail/components/NoteRulesTable.tsx
Normal file
@@ -0,0 +1,278 @@
|
||||
"use client"
|
||||
|
||||
import { projectConfig } from "@/components/label/api/project"
|
||||
import { ProjectDetail } from "@/components/label/api/project/typing"
|
||||
import { usePermissionStore } from "@/components/label/store/auth"
|
||||
import {
|
||||
ActionIcon,
|
||||
Badge,
|
||||
Button,
|
||||
Group,
|
||||
Modal,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core"
|
||||
import { modals } from "@mantine/modals"
|
||||
import { notifications } from "@mantine/notifications"
|
||||
import { IconPlus, IconTrash } from "@tabler/icons-react"
|
||||
import dayjs from "dayjs"
|
||||
import { DataTable, DataTableColumn } from "mantine-datatable"
|
||||
import { useMemo, useState } from "react"
|
||||
|
||||
type RulePayload = {
|
||||
text: string
|
||||
create_user: string
|
||||
create_date: string
|
||||
}
|
||||
|
||||
type RuleRow = RulePayload & {
|
||||
index: number
|
||||
}
|
||||
|
||||
function normalizeRule(item: unknown): RulePayload {
|
||||
if (typeof item === "string") {
|
||||
return { text: item, create_user: "-", create_date: "-" }
|
||||
}
|
||||
if (item && typeof item === "object") {
|
||||
const rule = item as {
|
||||
text?: unknown
|
||||
create_user?: unknown
|
||||
create_date?: unknown
|
||||
}
|
||||
return {
|
||||
text: String(rule.text ?? ""),
|
||||
create_user: String(rule.create_user ?? "-"),
|
||||
create_date: String(rule.create_date ?? "-"),
|
||||
}
|
||||
}
|
||||
return { text: "", create_user: "-", create_date: "-" }
|
||||
}
|
||||
|
||||
export default function NoteRulesTable(props: {
|
||||
info: ProjectDetail.DataProps | undefined
|
||||
onUpdated: () => void
|
||||
}) {
|
||||
const { info, onUpdated } = props
|
||||
const projectId = info?.id ?? -1
|
||||
const userName = usePermissionStore((s) => s.user_name)
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [inputText, setInputText] = useState("")
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const textRules = useMemo(() => {
|
||||
const rules = (info?.comment_rule as any)?.text_rules
|
||||
return Array.isArray(rules) ? rules.map((r) => String(r ?? "")) : []
|
||||
}, [info?.comment_rule])
|
||||
|
||||
const checkBoxRules = useMemo<RulePayload[]>(() => {
|
||||
const raw = (info?.comment_rule as any)?.check_box_rules
|
||||
const list = Array.isArray(raw) ? raw : []
|
||||
return list.map((item) => normalizeRule(item))
|
||||
}, [info?.comment_rule])
|
||||
|
||||
const rows = useMemo<RuleRow[]>(() => {
|
||||
return checkBoxRules.map((rule, index) => ({ ...rule, index }))
|
||||
}, [checkBoxRules])
|
||||
|
||||
const saveRules = async (nextRules: RulePayload[], successText: string) => {
|
||||
if (projectId === -1) return
|
||||
setSaving(true)
|
||||
try {
|
||||
await projectConfig({
|
||||
project_id: projectId,
|
||||
comment_rule: {
|
||||
check_box_rules: nextRules,
|
||||
text_rules: textRules,
|
||||
},
|
||||
})
|
||||
notifications.show({
|
||||
color: "green",
|
||||
title: "操作成功",
|
||||
message: successText,
|
||||
})
|
||||
setOpen(false)
|
||||
setInputText("")
|
||||
onUpdated()
|
||||
} catch (e) {
|
||||
notifications.show({
|
||||
color: "red",
|
||||
title: "操作失败",
|
||||
message: e instanceof Error ? e.message : "请求失败",
|
||||
})
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleAdd = async () => {
|
||||
const value = inputText.trim()
|
||||
if (!value) {
|
||||
notifications.show({
|
||||
color: "red",
|
||||
title: "新增失败",
|
||||
message: "批注内容不能为空",
|
||||
})
|
||||
return
|
||||
}
|
||||
const exists = rows.some((row) => row.text.trim() === value)
|
||||
if (exists) {
|
||||
notifications.show({
|
||||
color: "red",
|
||||
title: "新增失败",
|
||||
message: "批注规则重复，请重新输入",
|
||||
})
|
||||
return
|
||||
}
|
||||
const next: RulePayload[] = [
|
||||
...checkBoxRules,
|
||||
{
|
||||
text: value,
|
||||
create_user: userName ? String(userName) : "-",
|
||||
create_date: dayjs().format("YYYY-MM-DD"),
|
||||
},
|
||||
]
|
||||
await saveRules(next, "已添加规则")
|
||||
}
|
||||
|
||||
const handleDelete = async (row: RuleRow) => {
|
||||
const next = checkBoxRules.filter((_, index) => index !== row.index)
|
||||
await saveRules(next, "已删除规则")
|
||||
}
|
||||
|
||||
const columns: DataTableColumn<RuleRow>[] = [
|
||||
{
|
||||
accessor: "method",
|
||||
title: "批注方式",
|
||||
width: 90,
|
||||
render: () => <Badge variant="light">勾选</Badge>,
|
||||
},
|
||||
{
|
||||
accessor: "text",
|
||||
title: "内容",
|
||||
},
|
||||
{
|
||||
accessor: "create_user",
|
||||
title: "添加者",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
accessor: "create_date",
|
||||
title: "添加日期",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
accessor: "operation",
|
||||
title: "操作",
|
||||
width: 90,
|
||||
textAlign: "center",
|
||||
render: (record) => (
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="red"
|
||||
onClick={() => {
|
||||
modals.openConfirmModal({
|
||||
title: "删除规则",
|
||||
centered: true,
|
||||
children: <Text size="sm">确定删除该批注规则吗？</Text>,
|
||||
labels: { confirm: "确定", cancel: "取消" },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => handleDelete(record),
|
||||
})
|
||||
}}>
|
||||
<IconTrash size={16} />
|
||||
</ActionIcon>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper
|
||||
withBorder
|
||||
p="sm"
|
||||
radius="md"
|
||||
style={{
|
||||
borderColor:
|
||||
"light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
|
||||
}}>
|
||||
<Stack gap="sm">
|
||||
<Group justify="space-between" wrap="wrap">
|
||||
<Text fw={700}>批注规则</Text>
|
||||
<Button
|
||||
size="xs"
|
||||
leftSection={<IconPlus size={14} />}
|
||||
onClick={() => {
|
||||
setInputText("")
|
||||
setOpen(true)
|
||||
}}>
|
||||
添加规则
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Stack gap={4}>
|
||||
<Text size="sm" fw={600}>
|
||||
文本规则
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
{textRules.length ? textRules.join("；") : "-"}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<DataTable<RuleRow>
|
||||
withTableBorder
|
||||
withRowBorders
|
||||
records={rows}
|
||||
columns={columns}
|
||||
noRecordsText="暂无规则"
|
||||
minHeight={200}
|
||||
idAccessor={(record) =>
|
||||
`${record.index}_${record.text}_${record.create_user}_${record.create_date}`
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Modal
|
||||
opened={open}
|
||||
onClose={() => {
|
||||
if (saving) return
|
||||
setOpen(false)
|
||||
setInputText("")
|
||||
}}
|
||||
title="添加批注规则"
|
||||
centered>
|
||||
<Stack gap="sm">
|
||||
<Group gap="sm">
|
||||
<Text size="sm" c="dimmed">
|
||||
批注方式
|
||||
</Text>
|
||||
<Badge variant="light">勾选</Badge>
|
||||
</Group>
|
||||
<TextInput
|
||||
label="批注内容"
|
||||
placeholder="请输入批注内容"
|
||||
value={inputText}
|
||||
onChange={(e) => setInputText(e.currentTarget.value)}
|
||||
/>
|
||||
<Group justify="flex-end" gap="sm">
|
||||
<Button
|
||||
variant="default"
|
||||
onClick={() => {
|
||||
setOpen(false)
|
||||
setInputText("")
|
||||
}}
|
||||
disabled={saving}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleAdd} loading={saving}>
|
||||
保存
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user