:construction: 文集初步编辑

dashboard/src/components/api/Article.ts

@@ -6,7 +6,14 @@ export interface IArticleListApiResponse {
 	level: string;
 	children: number;
 }
-
+export interface IAnthologyDataRequest {
+	title: string;
+	subtitle: string;
+	summary: string;
+	article_list: IArticleListApiResponse[];
+	lang: string;
+	status: number;
+}
 export interface IAnthologyDataResponse {
 	uid: string;
 	title: string;

dashboard/src/components/studio/EditableTree.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Tree } from "antd";
 import type { DataNode, TreeProps } from "antd/es/tree";
+import { useEffect } from "react";
 
 type TreeNodeData = {
 	key: string;
@@ -19,7 +20,12 @@ function tocGetTreeData(articles: ListNodeData[], active = "") {
 	let treeData = [];
 
 	let treeParents = [];
-	let rootNode: TreeNodeData = { key: "0", title: "root", level: 0, children: [] };
+	let rootNode: TreeNodeData = {
+		key: "0",
+		title: "root",
+		level: 0,
+		children: [],
+	};
 	treeData.push(rootNode);
 	let lastInsNode: TreeNodeData = rootNode;
 
@@ -27,7 +33,12 @@ function tocGetTreeData(articles: ListNodeData[], active = "") {
 	for (let index = 0; index < articles.length; index++) {
 		const element = articles[index];
 
-		let newNode: TreeNodeData = { key: element.key, title: element.title, children: [], level: element.level };
+		let newNode: TreeNodeData = {
+			key: element.key,
+			title: element.title,
+			children: [],
+			level: element.level,
+		};
 		/*
 		if (active == element.article) {
 			newNode["extraClasses"] = "active";
@@ -56,7 +67,6 @@ function tocGetTreeData(articles: ListNodeData[], active = "") {
 		if (active === element.key) {
 			tocActivePath = [];
 			for (let index = 1; index < treeParents.length; index++) {
-				//treeParents[index]["expanded"] = true;
 				tocActivePath.push(treeParents[index]);
 			}
 		}
@@ -64,15 +74,18 @@ function tocGetTreeData(articles: ListNodeData[], active = "") {
 	return treeData[0].children;
 }
 
-type IWidgetEditableTree = {
+interface IWidgetEditableTree {
 	treeData: ListNodeData[];
-};
+	onChange?: Function;
+}
 const Widget = (prop: IWidgetEditableTree) => {
 	const data = tocGetTreeData(prop.treeData);
 	console.log("treedata", data);
 	const [gData, setGData] = useState(data);
-
-	//const [expandedKeys] = useState(["0-0", "0-0-0", "0-0-0-0"]);
+	useEffect(() => {
+		const data = tocGetTreeData(prop.treeData);
+		setGData(data);
+	}, [prop]);
 
 	const onDragEnter: TreeProps["onDragEnter"] = (info) => {
 		console.log(info);
@@ -85,7 +98,8 @@ const Widget = (prop: IWidgetEditableTree) => {
 		const dropKey = info.node.key;
 		const dragKey = info.dragNode.key;
 		const dropPos = info.node.pos.split("-");
-		const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
+		const dropPosition =
+			info.dropPosition - Number(dropPos[dropPos.length - 1]);
 
 		const loop = (
 			data: DataNode[],
@@ -143,13 +157,15 @@ const Widget = (prop: IWidgetEditableTree) => {
 			}
 		}
 		setGData(data);
+		if (typeof prop.onChange !== "undefined") {
+			prop.onChange(data);
+		}
 	};
 
 	return (
 		<>
 			<Tree
 				rootClassName="draggable-tree"
-				//defaultExpandedKeys={expandedKeys}
 				draggable
 				blockNode
 				onDragEnter={onDragEnter}

dashboard/src/pages/studio/anthology/edit.tsx

@@ -4,137 +4,142 @@ import { useIntl } from "react-intl";
 import {
 	ProForm,
 	ProFormText,
-	ProFormSelect,
 	ProFormTextArea,
 } from "@ant-design/pro-components";
-import { message } from "antd";
+import { Card, Col, message, Row } from "antd";
 
 import EditableTree from "../../../components/studio/EditableTree";
 import type { ListNodeData } from "../../../components/studio/EditableTree";
+import LangSelect from "../../../components/studio/LangSelect";
+import PublicitySelect from "../../../components/studio/PublicitySelect";
+import {
+	IAnthologyDataRequest,
+	IAnthologyResponse,
+} from "../../../components/api/Article";
+import { get, put } from "../../../request";
+import { useState } from "react";
 
 interface IFormData {
 	title: string;
 	subtitle: string;
 	summary: string;
 	lang: string;
-	studio: string;
-	toc: string;
+	status: number;
 }
 
 const Widget = () => {
+	const listdata: ListNodeData[] = [];
 	const intl = useIntl();
-	const { studioname, anthology_id } = useParams(); //url 参数
-	/*
-	const listdata: ListNodeData[] = [
-		{ key: "1", title: "title1", level: 1 },
-		{ key: "2", title: "title2", level: 2 },
-		{ key: "3", title: "title3", level: 1 },
-		{ key: "4", title: "title4", level: 2 },
-	];
-	*/
-	const listdata: ListNodeData[] = [
-		{
-			key: "d391c9c4-60bc-4bf5-8f5a-65d55743904c",
-			title: "比库尼八敬法--Aṭṭhagarudhammā",
-			level: 1,
-		},
-		{
-			key: "4b741bea-811e-4053-a94c-852a58161b8f",
-			title: "逐出比库尼僧团之《第一极重罪》",
-			level: 1,
-		},
-		{
-			key: "33ff0ec7-2cf9-4e3a-b88f-e713c7a1eaa5",
-			title: "Aṭṭhagarudhammā",
-			level: 1,
-		},
-	];
+	const [tocData, setTocData] = useState(listdata);
+	const [title, setTitle] = useState("");
+	const { anthology_id } = useParams(); //url 参数
+
 	return (
 		<>
-			<h2>
-				studio/{studioname}/
-				{intl.formatMessage({ id: "columns.studio.anthology.title" })}
-				/anthology/
-				{anthology_id}
-			</h2>
-
-			<ProForm<IFormData>
-				onFinish={async (values: IFormData) => {
-					// TODO
-					values.studio = "aaaa";
-					console.log(values);
-					message.success(
-						intl.formatMessage({ id: "flashes.success" })
-					);
-				}}
-			>
-				<ProForm.Group>
-					<ProFormText
-						width="md"
-						name="title"
-						required
-						label={intl.formatMessage({
-							id: "forms.fields.title.label",
-						})}
-						rules={[
-							{
-								required: true,
-								message: intl.formatMessage({
-									id: "forms.message.title.required",
-								}),
-							},
-						]}
-					/>
-				</ProForm.Group>
-				<ProForm.Group>
-					<ProFormText
-						width="md"
-						name="subtitle"
-						label={intl.formatMessage({
-							id: "forms.fields.subtitle.label",
-						})}
-					/>
-				</ProForm.Group>
-				<ProForm.Group>
-					<ProFormTextArea
-						name="summary"
-						label={intl.formatMessage({
-							id: "forms.fields.summary.label",
-						})}
-					/>
-				</ProForm.Group>
-				<ProForm.Group>
-					<ProFormSelect
-						options={[
-							{ value: "zh-Hans", label: "简体中文" },
-							{ value: "zh-Hant", label: "繁体中文" },
-							{ value: "en-US", label: "English" },
-						]}
-						width="md"
-						name="lang"
-						rules={[
-							{
-								required: true,
-								message: intl.formatMessage({
-									id: "forms.create.message.no.lang",
-								}),
-							},
-						]}
-						label={intl.formatMessage({ id: "channel.lang" })}
-					/>
-				</ProForm.Group>
-
-				<ProForm.Group>
-					<ProFormTextArea
-						name="toc"
-						label={intl.formatMessage({
-							id: "forms.fields.content.label",
-						})}
-					/>
-				</ProForm.Group>
-			</ProForm>
+			<Card title={title} style={{ margin: "1em" }}>
+				<Row>
+					<Col>
+						<ProForm<IFormData>
+							onFinish={async (values: IFormData) => {
+								// TODO
+								console.log(values);
+								/*
+					const request: IAnthologyDataRequest = {
+						title: values.title,
+						subtitle: values.subtitle,
+						summary: values.summary,
+						article_list:[];
+						status: values.status,
+						lang: values.lang,
+					};
+					console.log(request);
+					const res = await put<
+						IAnthologyDataRequest,
+						IAnthologyResponse
+					>(`/v2/article/${anthology_id}`, request);
+					console.log(res);
+					if (res.ok) {
+						message.success(
+							intl.formatMessage({ id: "flashes.success" })
+						);
+					} else {
+						message.error(res.message);
+					}
+					*/
+							}}
+							request={async () => {
+								const res = await get<IAnthologyResponse>(
+									`/v2/anthology/${anthology_id}`
+								);
+								const toc: ListNodeData[] =
+									res.data.article_list.map((item) => {
+										return {
+											key: item.article,
+											title: item.title,
+											level: parseInt(item.level),
+										};
+									});
+								setTocData(toc);
+								setTitle(res.data.title);
+								return {
+									title: res.data.title,
+									subtitle: res.data.subtitle,
+									summary: res.data.summary,
+									lang: res.data.lang,
+									status: res.data.status,
+								};
+							}}
+						>
+							<ProForm.Group>
+								<ProFormText
+									width="md"
+									name="title"
+									required
+									label={intl.formatMessage({
+										id: "forms.fields.title.label",
+									})}
+									rules={[
+										{
+											required: true,
+											message: intl.formatMessage({
+												id: "forms.message.title.required",
+											}),
+										},
+									]}
+								/>
+							</ProForm.Group>
+							<ProForm.Group>
+								<ProFormText
+									width="md"
+									name="subtitle"
+									label={intl.formatMessage({
+										id: "forms.fields.subtitle.label",
+									})}
+								/>
+							</ProForm.Group>
+							<ProForm.Group>
+								<ProFormTextArea
+									name="summary"
+									width="md"
+									label={intl.formatMessage({
+										id: "forms.fields.summary.label",
+									})}
+								/>
+							</ProForm.Group>
 
-			<EditableTree treeData={listdata} />
+							<ProForm.Group>
+								<LangSelect />
+							</ProForm.Group>
+							<ProForm.Group>
+								<PublicitySelect />
+							</ProForm.Group>
+						</ProForm>
+					</Col>
+					<Col>
+						<EditableTree treeData={tocData} />
+					</Col>
+				</Row>
+			</Card>
 		</>
 	);
 };