From 8cde51d53bfc41138514ca3db35724068ffad695 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com> Date: Wed, 8 Mar 2023 17:59:59 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=BA=90=E5=88=86=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/resource-category.ts | 12 +- src/compenents/create-rs-category/index.tsx | 2 +- src/compenents/left-menu/index.tsx | 1 + src/compenents/upload-image-button/index.tsx | 2 +- src/pages/department/create.tsx | 6 +- src/pages/department/index.tsx | 7 +- src/pages/department/update.tsx | 6 +- src/pages/index.ts | 4 + src/pages/resource/images/index.tsx | 2 +- .../resource-category/create.module.less | 0 .../resource/resource-category/create.tsx | 148 ++++++++++++++ .../resource-category/index.module.less | 0 .../resource/resource-category/index.tsx | 193 ++++++++++++++++++ .../resource-category/update.module.less | 0 .../resource/resource-category/update.tsx | 185 +++++++++++++++++ src/router/routes.tsx | 15 ++ 16 files changed, 568 insertions(+), 15 deletions(-) create mode 100644 src/pages/resource/resource-category/create.module.less create mode 100644 src/pages/resource/resource-category/create.tsx create mode 100644 src/pages/resource/resource-category/index.module.less create mode 100644 src/pages/resource/resource-category/index.tsx create mode 100644 src/pages/resource/resource-category/update.module.less create mode 100644 src/pages/resource/resource-category/update.tsx diff --git a/src/api/resource-category.ts b/src/api/resource-category.ts index 6b9047f..a354232 100644 --- a/src/api/resource-category.ts +++ b/src/api/resource-category.ts @@ -1,7 +1,7 @@ import client from "./internal/httpClient"; -export function resourceCategoryList(type: string) { - return client.get("/backend/v1/resource-category/index", { type }); +export function resourceCategoryList() { + return client.get("/backend/v1/resource-category/index", {}); } export function createResourceCategory() { @@ -9,13 +9,13 @@ export function createResourceCategory() { } export function storeResourceCategory( - type: string, name: string, + parentId: number, sort: number ) { return client.post("/backend/v1/resource-category/create", { - type, name, + parent_id: parentId, sort, }); } @@ -26,13 +26,13 @@ export function resourceCategory(id: number) { export function updateResourceCategory( id: number, - type: string, name: string, + parentId: number, sort: number ) { return client.post(`/backend/v1/resource-category/${id}`, { - type, name, + parent_id: parentId, sort, }); } diff --git a/src/compenents/create-rs-category/index.tsx b/src/compenents/create-rs-category/index.tsx index 6915c21..4899a15 100644 --- a/src/compenents/create-rs-category/index.tsx +++ b/src/compenents/create-rs-category/index.tsx @@ -18,7 +18,7 @@ export const CreateResourceCategory = (props: PropInterface) => { return; } resourceCategory - .storeResourceCategory(props.type, name, 0) + .storeResourceCategory(name, 0, 0) .then(() => { setName(""); message.success("分类添加成功"); diff --git a/src/compenents/left-menu/index.tsx b/src/compenents/left-menu/index.tsx index 95a1fe0..a983b89 100644 --- a/src/compenents/left-menu/index.tsx +++ b/src/compenents/left-menu/index.tsx @@ -26,6 +26,7 @@ const items = [ "3", , [ + getItem("资源分类", "/resource-category", null, null, null), getItem("视频", "/videos", null, null, null), getItem("图片", "/images", null, null, null), ], diff --git a/src/compenents/upload-image-button/index.tsx b/src/compenents/upload-image-button/index.tsx index 3757a99..c1925c2 100644 --- a/src/compenents/upload-image-button/index.tsx +++ b/src/compenents/upload-image-button/index.tsx @@ -60,7 +60,7 @@ export const UploadImageButton = (props: PropsInterface) => { // 获取图片资源的分类 const getCategories = () => { - resourceCategory.resourceCategoryList("IMAGE").then((res: any) => { + resourceCategory.resourceCategoryList().then((res: any) => { let data = res.data.data; if (data.length > 0) { setCategories([...categories, ...res.data.data]); diff --git a/src/pages/department/create.tsx b/src/pages/department/create.tsx index d94e70f..0cd64b5 100644 --- a/src/pages/department/create.tsx +++ b/src/pages/department/create.tsx @@ -25,8 +25,10 @@ export const DepartmentCreatePage: React.FC = () => { const getParams = () => { department.createDepartment().then((res: any) => { const departments = res.data.departments; - const new_arr: Option[] = checkArr(departments, 0); - setCategories(new_arr); + if (JSON.stringify(departments) !== "{}") { + const new_arr: Option[] = checkArr(departments, 0); + setCategories(new_arr); + } }); }; diff --git a/src/pages/department/index.tsx b/src/pages/department/index.tsx index 54f9663..60a1069 100644 --- a/src/pages/department/index.tsx +++ b/src/pages/department/index.tsx @@ -95,9 +95,12 @@ export const DepartmentPage: React.FC = () => { setLoading(true); department.departmentList().then((res: any) => { const departments = res.data.departments; - const new_arr: Option[] = checkArr(departments, 0); + if (JSON.stringify(departments) !== "{}") { + const new_arr: Option[] = checkArr(departments, 0); + setList(new_arr); + } let num = tableKey; - setList(new_arr); + setTimeout(() => { setLoading(false); setTableKey(num + 1); diff --git a/src/pages/department/update.tsx b/src/pages/department/update.tsx index 584fe48..08bbec7 100644 --- a/src/pages/department/update.tsx +++ b/src/pages/department/update.tsx @@ -30,8 +30,10 @@ export const DepartmentUpdatePage: React.FC = () => { const getParams = () => { department.createDepartment().then((res: any) => { const departments = res.data.departments; - const new_arr: Option[] = checkArr(departments, 0); - setCategories(new_arr); + if (JSON.stringify(departments) !== "{}") { + const new_arr: Option[] = checkArr(departments, 0); + setCategories(new_arr); + } }); }; diff --git a/src/pages/index.ts b/src/pages/index.ts index 4092049..95c70e7 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -19,3 +19,7 @@ export * from "./department/create"; 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"; + diff --git a/src/pages/resource/images/index.tsx b/src/pages/resource/images/index.tsx index 77f5d25..32b74d0 100644 --- a/src/pages/resource/images/index.tsx +++ b/src/pages/resource/images/index.tsx @@ -55,7 +55,7 @@ export const ResourceImagesPage = () => { // 获取图片资源的分类 const getCategories = () => { - resourceCategory.resourceCategoryList("IMAGE").then((res: any) => { + resourceCategory.resourceCategoryList().then((res: any) => { let data = res.data.data; if (data.length > 0) { setCategories([...categories, ...res.data.data]); diff --git a/src/pages/resource/resource-category/create.module.less b/src/pages/resource/resource-category/create.module.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/resource/resource-category/create.tsx b/src/pages/resource/resource-category/create.tsx new file mode 100644 index 0000000..4f1fe13 --- /dev/null +++ b/src/pages/resource/resource-category/create.tsx @@ -0,0 +1,148 @@ +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.module.less b/src/pages/resource/resource-category/index.module.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/resource/resource-category/index.tsx b/src/pages/resource/resource-category/index.tsx new file mode 100644 index 0000000..3948ce1 --- /dev/null +++ b/src/pages/resource/resource-category/index.tsx @@ -0,0 +1,193 @@ +import React, { useState, useEffect } from "react"; +import { Button, Space, Table, Popconfirm, message } from "antd"; +import type { ColumnsType } from "antd/es/table"; +import styles from "./index.module.less"; +import { PlusOutlined, ReloadOutlined } from "@ant-design/icons"; +import { resourceCategory } from "../../../api/index"; +import { dateFormat } from "../../../utils/index"; +import { Link, useNavigate } from "react-router-dom"; +import { PerButton } from "../../../compenents"; + +interface Option { + id: string | number; + name: string; + created_at: string; + children?: Option[]; + sort: number; +} + +interface DataType { + id: React.Key; + name: string; + created_at: string; + sort: number; +} + +export const ResourceCategoryPage: React.FC = () => { + const navigate = useNavigate(); + const [loading, setLoading] = useState(true); + const [list, setList] = useState([]); + const [refresh, setRefresh] = useState(false); + const [tableKey, setTableKey] = useState(0); + + const columns: ColumnsType = [ + { + title: "分类名", + dataIndex: "name", + render: (text: string) => {text}, + }, + { + title: "ID", + key: "id", + dataIndex: "id", + }, + { + title: "Sort", + key: "sort", + dataIndex: "sort", + }, + { + title: "时间", + dataIndex: "created_at", + render: (text: string) => {text && dateFormat(text)}, + }, + { + title: "操作", + key: "action", + fixed: "right", + width: 160, + render: (_, record) => ( + + navigate(`/resource-category/update/${record.id}`)} + /> + delUser(record.id)} + okText="确定" + cancelText="取消" + > + null} + /> + + + ), + }, + ]; + + useEffect(() => { + getData(); + }, [refresh]); + + const getData = () => { + setLoading(true); + resourceCategory.resourceCategoryList().then((res: any) => { + const categories = res.data.categories; + let num = tableKey; + if (JSON.stringify(categories) !== "{}") { + const new_arr: Option[] = checkArr(categories, 0); + setList(new_arr); + } + + setTimeout(() => { + setLoading(false); + setTableKey(num + 1); + }, 1000); + }); + }; + + 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({ + name: categories[id][i].name, + id: categories[id][i].id, + sort: categories[id][i].sort, + created_at: categories[id][i].created_at, + }); + } else { + const new_arr: Option[] = checkArr(categories, categories[id][i].id); + arr.push({ + name: categories[id][i].name, + id: categories[id][i].id, + created_at: categories[id][i].created_at, + sort: categories[id][i].sort, + children: new_arr, + }); + } + } + return arr; + }; + + const resetData = () => { + setList([]); + setRefresh(!refresh); + }; + + const delUser = (id: any) => { + resourceCategory.destroyResourceCategory(id).then((res: any) => { + setTimeout(() => { + message.success("操作成功"); + setRefresh(!refresh); + }, 500); + }); + }; + + return ( + <> +
+
+
+ + } + p="department-store" + onClick={() => null} + /> + +
+
+ +
+
+
+ record.id} + defaultExpandAllRows={true} + /> + + + + ); +}; diff --git a/src/pages/resource/resource-category/update.module.less b/src/pages/resource/resource-category/update.module.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/resource/resource-category/update.tsx b/src/pages/resource/resource-category/update.tsx new file mode 100644 index 0000000..df6c21d --- /dev/null +++ b/src/pages/resource/resource-category/update.tsx @@ -0,0 +1,185 @@ +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[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 1efdd9c..33aad90 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -21,6 +21,9 @@ import { DepartmentUpdatePage, ChangePasswordPage, ResourceImagesPage, + ResourceCategoryPage, + ResourceCategoryCreatePage, + ResourceCategoryUpdatePage, } from "../pages"; const routes: RouteObject[] = [ @@ -36,6 +39,18 @@ const routes: RouteObject[] = [ path: "/change-password", element: , }, + { + path: "/resource-category", + element: , + }, + { + path: "/resource-category/create", + element: , + }, + { + path: "/resource-category/update/:catId", + element: , + }, { path: "/images", element: ,