From 99db5c6c87f60e4462c4316d2ea17c235033b475 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com> Date: Tue, 14 Mar 2023 13:54:16 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=BA=90=E5=88=86=E7=B1=BB=E6=96=B0?= =?UTF-8?q?=E5=BB=BA=E3=80=81=E7=BC=96=E8=BE=91=E5=BC=B9=E7=AA=97=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.less | 4 + src/pages/index.ts | 2 - .../{ => compenents}/create.module.less | 0 .../resource-category/compenents/create.tsx | 148 ++++++++++++++ .../{ => compenents}/update.module.less | 0 .../resource-category/compenents/update.tsx | 178 +++++++++++++++++ .../resource/resource-category/create.tsx | 148 -------------- .../resource/resource-category/index.tsx | 63 +++--- .../resource/resource-category/update.tsx | 188 ------------------ src/router/routes.tsx | 10 - 10 files changed, 367 insertions(+), 374 deletions(-) rename src/pages/resource/resource-category/{ => compenents}/create.module.less (100%) create mode 100644 src/pages/resource/resource-category/compenents/create.tsx rename src/pages/resource/resource-category/{ => compenents}/update.module.less (100%) create mode 100644 src/pages/resource/resource-category/compenents/update.tsx delete mode 100644 src/pages/resource/resource-category/create.tsx delete mode 100644 src/pages/resource/resource-category/update.tsx diff --git a/src/index.less b/src/index.less index 234b9d9..508cc19 100644 --- a/src/index.less +++ b/src/index.less @@ -70,6 +70,10 @@ code { margin-bottom: 10px; } +.mt-24 { + margin-top: 24px; +} + .mb-24 { margin-bottom: 24px; } diff --git a/src/pages/index.ts b/src/pages/index.ts index 27d578e..db982dd 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -23,7 +23,5 @@ export * from "./department/update"; export * from "./change-password"; export * from "./resource/images"; export * from "./resource/resource-category/index"; -export * from "./resource/resource-category/create"; -export * from "./resource/resource-category/update"; export * from "./resource/videos"; diff --git a/src/pages/resource/resource-category/create.module.less b/src/pages/resource/resource-category/compenents/create.module.less similarity index 100% rename from src/pages/resource/resource-category/create.module.less rename to src/pages/resource/resource-category/compenents/create.module.less diff --git a/src/pages/resource/resource-category/compenents/create.tsx b/src/pages/resource/resource-category/compenents/create.tsx new file mode 100644 index 0000000..34b911b --- /dev/null +++ b/src/pages/resource/resource-category/compenents/create.tsx @@ -0,0 +1,148 @@ +import React, { useState, useRef, useEffect } from "react"; +import { Modal, Form, Input, Cascader, message } from "antd"; +import styles from "./create.module.less"; +import { resourceCategory } from "../../../../api/index"; +import type { FormInstance } from "antd/es/form"; + +interface PropInterface { + open: boolean; + onCancel: () => void; +} + +interface Option { + value: string | number; + label: string; + children?: Option[]; +} + +export const ResourceCategoryCreate: React.FC = ({ + open, + onCancel, +}) => { + const [form] = Form.useForm(); + const [loading, setLoading] = useState(true); + const [categories, setCategories] = useState([]); + const [parent_id, setParentId] = useState(0); + + useEffect(() => { + getParams(); + }, []); + + useEffect(() => { + form.setFieldsValue({ + name: "", + parent_id: [0], + }); + }, [form, open]); + + const getParams = () => { + resourceCategory.createResourceCategory().then((res: any) => { + const categories = res.data.categories; + if (JSON.stringify(categories) !== "{}") { + const new_arr: Option[] = checkArr(categories, 0); + new_arr.unshift({ + label: "无", + value: 0, + }); + setCategories(new_arr); + } + }); + }; + + const checkArr = (categories: any[], id: number) => { + const arr = []; + for (let i = 0; i < categories[id].length; i++) { + if (!categories[categories[id][i].id]) { + arr.push({ + label: categories[id][i].name, + value: categories[id][i].id, + }); + } else { + const new_arr: Option[] = checkArr(categories, categories[id][i].id); + arr.push({ + label: categories[id][i].name, + value: categories[id][i].id, + children: new_arr, + }); + } + } + return arr; + }; + + const onFinish = (values: any) => { + resourceCategory + .storeResourceCategory(values.name, parent_id || 0, 0) + .then((res: any) => { + message.success("保存成功!"); + onCancel(); + }); + }; + + const onFinishFailed = (errorInfo: any) => { + console.log("Failed:", errorInfo); + }; + + const handleChange = (value: any) => { + if (value !== undefined) { + let it = value[value.length - 1]; + setParentId(it); + } else { + setParentId(0); + } + }; + + const displayRender = (label: any, selectedOptions: any) => { + return label[label.length - 1]; + }; + + return ( + <> + form.submit()} + onCancel={() => onCancel()} + > +
+
+ + + + + + +
+
+
+ + ); +}; diff --git a/src/pages/resource/resource-category/update.module.less b/src/pages/resource/resource-category/compenents/update.module.less similarity index 100% rename from src/pages/resource/resource-category/update.module.less rename to src/pages/resource/resource-category/compenents/update.module.less diff --git a/src/pages/resource/resource-category/compenents/update.tsx b/src/pages/resource/resource-category/compenents/update.tsx new file mode 100644 index 0000000..c14ad3f --- /dev/null +++ b/src/pages/resource/resource-category/compenents/update.tsx @@ -0,0 +1,178 @@ +import React, { useState, useRef, useEffect } from "react"; +import { Modal, Form, Input, Cascader, message } from "antd"; +import styles from "./create.module.less"; +import { resourceCategory } from "../../../../api/index"; +import type { FormInstance } from "antd/es/form"; + +interface PropInterface { + id: number; + open: boolean; + onCancel: () => void; +} + +interface Option { + value: string | number; + label: string; + children?: Option[]; +} + +export const ResourceCategoryUpdate: React.FC = ({ + id, + open, + onCancel, +}) => { + const [form] = Form.useForm(); + const [loading, setLoading] = useState(true); + const [categories, setCategories] = useState([]); + const [parent_id, setParentId] = useState(0); + + useEffect(() => { + getParams(); + }, []); + + useEffect(() => { + if (id === 0) { + return; + } + getDetail(); + }, [id]); + + useEffect(() => { + form.setFieldsValue({ + name: "", + parent_id: [0], + }); + }, [form, open]); + + const getParams = () => { + resourceCategory.createResourceCategory().then((res: any) => { + const categories = res.data.categories; + if (JSON.stringify(categories) !== "{}") { + const new_arr: Option[] = checkArr(categories, 0); + new_arr.unshift({ + label: "无", + value: 0, + }); + setCategories(new_arr); + } + }); + }; + + const getDetail = () => { + resourceCategory.resourceCategory(id).then((res: any) => { + let data = res.data; + let arr = data.parent_chain.split(","); + let new_arr: any[] = []; + arr.map((num: any) => { + new_arr.push(Number(num)); + }); + form.setFieldsValue({ + name: data.name, + sort: data.sort, + parent_id: new_arr, + }); + setParentId(data.parent_id); + }); + }; + + const checkArr = (categories: any[], id: number) => { + const arr = []; + for (let i = 0; i < categories[id].length; i++) { + if (!categories[categories[id][i].id]) { + arr.push({ + label: categories[id][i].name, + value: categories[id][i].id, + }); + } else { + const new_arr: Option[] = checkArr(categories, categories[id][i].id); + arr.push({ + label: categories[id][i].name, + value: categories[id][i].id, + children: new_arr, + }); + } + } + return arr; + }; + + const onFinish = (values: any) => { + resourceCategory + .updateResourceCategory(id, values.name, parent_id || 0, values.sort) + .then((res: any) => { + message.success("保存成功!"); + onCancel(); + }); + }; + + const onFinishFailed = (errorInfo: any) => { + console.log("Failed:", errorInfo); + }; + + const handleChange = (value: any) => { + if (value !== undefined) { + let it = value[value.length - 1]; + if (it === id) { + setParentId(0); + } else { + setParentId(it); + } + } else { + setParentId(0); + } + }; + + const displayRender = (label: any, selectedOptions: any) => { + return label[label.length - 1]; + }; + + return ( + <> + form.submit()} + onCancel={() => onCancel()} + > +
+
+ + + + + + +
+
+
+ + ); +}; diff --git a/src/pages/resource/resource-category/create.tsx b/src/pages/resource/resource-category/create.tsx deleted file mode 100644 index 4f1fe13..0000000 --- a/src/pages/resource/resource-category/create.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { Row, Col, Form, Input, Cascader, Button, message } from "antd"; -import styles from "./create.module.less"; -import { resourceCategory } from "../../../api/index"; -import { useNavigate } from "react-router-dom"; -import { BackBartment } from "../../../compenents"; - -interface Option { - value: string | number; - label: string; - children?: Option[]; -} - -export const ResourceCategoryCreatePage: React.FC = () => { - const navigate = useNavigate(); - const [form] = Form.useForm(); - const [loading, setLoading] = useState(true); - const [categories, setCategories] = useState([]); - const [parent_id, setParentId] = useState(0); - - useEffect(() => { - getParams(); - }, []); - - const getParams = () => { - resourceCategory.createResourceCategory().then((res: any) => { - const categories = res.data.categories; - if (JSON.stringify(categories) !== '{}') { - const new_arr: Option[] = checkArr(categories, 0); - setCategories(new_arr); - } - }); - }; - - const checkArr = (categories: any[], id: number) => { - const arr = []; - for (let i = 0; i < categories[id].length; i++) { - if (!categories[categories[id][i].id]) { - arr.push({ - label: categories[id][i].name, - value: categories[id][i].id, - }); - } else { - const new_arr: Option[] = checkArr(categories, categories[id][i].id); - arr.push({ - label: categories[id][i].name, - value: categories[id][i].id, - children: new_arr, - }); - } - } - return arr; - }; - - const onFinish = (values: any) => { - resourceCategory - .storeResourceCategory(values.name, parent_id || 0, values.sort) - .then((res: any) => { - message.success("保存成功!"); - navigate(-1); - }); - }; - - const onFinishFailed = (errorInfo: any) => { - console.log("Failed:", errorInfo); - }; - - const handleChange = (value: any) => { - if (value !== undefined) { - let it = value[value.length - 1]; - setParentId(it); - } else { - setParentId(0); - } - }; - - const displayRender = (label: any, selectedOptions: any) => { - return label[label.length - 1]; - }; - - return ( - <> - - -
- -
-
-
- - - - - - - - - - - - - -
-
- -
- - ); -}; diff --git a/src/pages/resource/resource-category/index.tsx b/src/pages/resource/resource-category/index.tsx index b962815..d40e557 100644 --- a/src/pages/resource/resource-category/index.tsx +++ b/src/pages/resource/resource-category/index.tsx @@ -7,6 +7,8 @@ import { resourceCategory } from "../../../api/index"; import { Link, useNavigate } from "react-router-dom"; import { PerButton } from "../../../compenents"; import type { DataNode, TreeProps } from "antd/es/tree"; +import { ResourceCategoryCreate } from "./compenents/create"; +import { ResourceCategoryUpdate } from "./compenents/update"; const { confirm } = Modal; @@ -29,6 +31,9 @@ export const ResourceCategoryPage: React.FC = () => { const [refresh, setRefresh] = useState(false); const [treeData, setTreeData] = useState([]); const [selectKey, setSelectKey] = useState([]); + const [createVisible, setCreateVisible] = useState(false); + const [updateVisible, setUpdateVisible] = useState(false); + const [cid, setCid] = useState(0); useEffect(() => { getData(); @@ -36,7 +41,6 @@ export const ResourceCategoryPage: React.FC = () => { const onSelect = (selectedKeys: any, info: any) => { setSelectKey(selectedKeys); - console.log(selectedKeys); }; const getData = () => { @@ -66,11 +70,10 @@ export const ResourceCategoryPage: React.FC = () => { class="b-link c-red" icon={null} p="resource-category" - onClick={() => - navigate( - `/resource-category/update/${categories[id][i].id}` - ) - } + onClick={() => { + setCid(categories[id][i].id); + setUpdateVisible(true); + }} disabled={null} />
@@ -101,11 +104,10 @@ export const ResourceCategoryPage: React.FC = () => { class="b-link c-red" icon={null} p="resource-category" - onClick={() => - navigate( - `/resource-category/update/${categories[id][i].id}` - ) - } + onClick={() => { + setCid(categories[id][i].id); + setUpdateVisible(true); + }} disabled={null} />
@@ -138,7 +140,6 @@ export const ResourceCategoryPage: React.FC = () => { if (id === 0) { return; } - confirm({ title: "操作确认", icon: , @@ -234,20 +235,15 @@ export const ResourceCategoryPage: React.FC = () => { <>
- - } - p="resource-category" - onClick={() => null} - disabled={null} - /> - + } + p="resource-category" + onClick={() => setCreateVisible(true)} + disabled={null} + />
@@ -259,6 +255,21 @@ export const ResourceCategoryPage: React.FC = () => { onDragEnter={onDragEnter} onDrop={onDrop} /> + { + setCreateVisible(false); + setRefresh(!refresh); + }} + /> + { + setUpdateVisible(false); + setRefresh(!refresh); + }} + />
); diff --git a/src/pages/resource/resource-category/update.tsx b/src/pages/resource/resource-category/update.tsx deleted file mode 100644 index 8a0f858..0000000 --- a/src/pages/resource/resource-category/update.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { Row, Col, Form, Input, Cascader, Button, message } from "antd"; -import styles from "./create.module.less"; -import { resourceCategory } from "../../../api/index"; -import { useParams, useNavigate } from "react-router-dom"; -import { BackBartment } from "../../../compenents"; - -interface Option { - value: string | number; - label: string; - children?: Option[]; -} - -export const ResourceCategoryUpdatePage: React.FC = () => { - const params = useParams(); - const navigate = useNavigate(); - const [form] = Form.useForm(); - const [loading, setLoading] = useState(true); - const [categories, setCategories] = useState([]); - const [parent_id, setParentId] = useState(0); - - useEffect(() => { - getParams(); - }, []); - - useEffect(() => { - getDetail(); - }, [params.catId]); - - const getParams = () => { - resourceCategory.createResourceCategory().then((res: any) => { - const categories = res.data.categories; - if (JSON.stringify(categories) !== "{}") { - const new_arr: Option[] = checkArr(categories, 0); - setCategories(new_arr); - } - }); - }; - - const getDetail = () => { - resourceCategory.resourceCategory(Number(params.catId)).then((res: any) => { - let data = res.data; - let arr = data.parent_chain.split(","); - let new_arr: any[] = []; - arr.map((num: any) => { - new_arr.push(Number(num)); - }); - form.setFieldsValue({ - name: data.name, - sort: data.sort, - parent_id: new_arr, - }); - setParentId(data.parent_id); - }); - }; - - - const checkArr = (categories: any[], id: number) => { - const arr = []; - for (let i = 0; i < categories[id].length; i++) { - if (categories[id][i].id === Number(params.catId)) { - console.log("截断"); - } else if (!categories[categories[id][i].id]) { - arr.push({ - label: categories[id][i].name, - value: categories[id][i].id, - }); - } else { - const new_arr: Option[] = checkArr(categories, categories[id][i].id); - arr.push({ - label: categories[id][i].name, - value: categories[id][i].id, - children: new_arr, - }); - } - } - return arr; - }; - - const onFinish = (values: any) => { - let id = Number(params.catId); - resourceCategory - .updateResourceCategory(id, values.name, parent_id || 0, values.sort) - .then((res: any) => { - message.success("保存成功!"); - navigate(-1); - }); - }; - - const onFinishFailed = (errorInfo: any) => { - console.log("Failed:", errorInfo); - }; - - const handleChange = (value: any) => { - let id = Number(params.catId); - if (value !== undefined) { - let it = value[value.length - 1]; - if (it === id) { - setParentId(0); - } else { - setParentId(it); - } - } else { - setParentId(0); - } - }; - - const displayRender = (label: any, selectedOptions: any) => { - let id = Number(params.catId); - if (selectedOptions && selectedOptions[0]) { - let current = selectedOptions[selectedOptions.length - 1].value; - if (current === id) { - message.error("不能选择自己作为父类"); - return 0; - } - } - - return label[label.length - 1]; - }; - - return ( - <> - - -
- -
-
-
- - - - - - - - - - - - - -
-
- -
- - ); -}; diff --git a/src/router/routes.tsx b/src/router/routes.tsx index d84420e..6d1e7cf 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -24,8 +24,6 @@ import { ChangePasswordPage, ResourceImagesPage, ResourceCategoryPage, - ResourceCategoryCreatePage, - ResourceCategoryUpdatePage, ResourceVideosPage, SystemIndexPage } from "../pages"; @@ -47,14 +45,6 @@ const routes: RouteObject[] = [ path: "/resource-category", element: , }, - { - path: "/resource-category/create", - element: , - }, - { - path: "/resource-category/update/:catId", - element: , - }, { path: "/images", element: ,