From 4db7a9b0d62cb8965848f861da97505a6b91c345 Mon Sep 17 00:00:00 2001
From: jessica <3344538341@qq.com>
Date: Tue, 23 Apr 2024 21:48:32 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=8F=9C=E5=8D=95=E7=AE=A1?=
=?UTF-8?q?=E7=90=86=20=E6=A8=A1=E5=9D=97CRUD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/iconfont/quickIconFont.js | 65 ++++++++++++++++
src/config/quickIconFont.json | 4 +
src/types/menu.ts | 7 +-
src/views/system/menu/index.tsx | 111 ++++++++++++++-------------
4 files changed, 133 insertions(+), 54 deletions(-)
create mode 100644 src/assets/iconfont/quickIconFont.js
create mode 100644 src/config/quickIconFont.json
diff --git a/src/assets/iconfont/quickIconFont.js b/src/assets/iconfont/quickIconFont.js
new file mode 100644
index 0000000..56eea18
--- /dev/null
+++ b/src/assets/iconfont/quickIconFont.js
@@ -0,0 +1,65 @@
+!(function (e) {
+ var t,
+ n,
+ o,
+ i,
+ l,
+ c =
+ '',
+ d = (d = document.getElementsByTagName("script"))[
+ d.length - 1
+ ].getAttribute("data-injectcss"),
+ a = function (e, t) {
+ t.parentNode.insertBefore(e, t);
+ };
+ if (d && !e.__iconfont__svg__cssinject__) {
+ e.__iconfont__svg__cssinject__ = !0;
+ try {
+ document.write(
+ ""
+ );
+ } catch (e) {
+ console && console.log(e);
+ }
+ }
+ function s() {
+ l || ((l = !0), o());
+ }
+ function r() {
+ try {
+ i.documentElement.doScroll("left");
+ } catch (e) {
+ return void setTimeout(r, 50);
+ }
+ s();
+ }
+ (t = function () {
+ var e,
+ t = document.createElement("div");
+ (t.innerHTML = c),
+ (c = null),
+ (t = t.getElementsByTagName("svg")[0]) &&
+ (t.setAttribute("aria-hidden", "true"),
+ (t.style.position = "absolute"),
+ (t.style.width = 0),
+ (t.style.height = 0),
+ (t.style.overflow = "hidden"),
+ (t = t),
+ (e = document.body).firstChild ? a(t, e.firstChild) : e.appendChild(t));
+ }),
+ document.addEventListener
+ ? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
+ ? setTimeout(t, 0)
+ : ((n = function () {
+ document.removeEventListener("DOMContentLoaded", n, !1), t();
+ }),
+ document.addEventListener("DOMContentLoaded", n, !1))
+ : document.attachEvent &&
+ ((o = t),
+ (i = e.document),
+ (l = !1),
+ r(),
+ (i.onreadystatechange = function () {
+ "complete" == i.readyState && ((i.onreadystatechange = null), s());
+ }));
+})(window);
diff --git a/src/config/quickIconFont.json b/src/config/quickIconFont.json
new file mode 100644
index 0000000..a984c07
--- /dev/null
+++ b/src/config/quickIconFont.json
@@ -0,0 +1,4 @@
+[
+ { "label": "banquan", "value": "quick-banquan" },
+ { "label": "anquanyinsi", "value": "quick-anquanyinsi" }
+]
diff --git a/src/types/menu.ts b/src/types/menu.ts
index 9ccca13..f4316c1 100644
--- a/src/types/menu.ts
+++ b/src/types/menu.ts
@@ -1,7 +1,7 @@
import { IPermissionButton } from "@ainiteam/quick-react-ui";
export interface IMenu {
- id?: number | string;
+ id?: number;
menuId: string;
menuName: string;
path: string;
@@ -14,7 +14,10 @@ export interface IMenu {
linkUrl?: string;
enabled?: boolean;
status?: boolean;
- cache: boolean;
+ cache?: boolean;
+}
+export interface ISearchMenu {
+ keyword: string;
}
export interface IMenuTree extends IMenu {
children: IMenuTree[];
diff --git a/src/views/system/menu/index.tsx b/src/views/system/menu/index.tsx
index f3c11c9..c091d32 100644
--- a/src/views/system/menu/index.tsx
+++ b/src/views/system/menu/index.tsx
@@ -1,7 +1,6 @@
import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
import { Modal, message } from "antd";
-// import "@/assets/iconfont/quickIconFont.js";
-// import quickIconFont from "@/config/quickIconFont.json";
import { ExclamationCircleFilled } from "@ant-design/icons";
import {
IColumn,
@@ -11,14 +10,14 @@ import {
IDialogTitle,
IOptions,
} from "@ainiteam/quick-react-ui";
+
// import "./index.less";
-import { ISearchUser, IMenu } from "@/types";
import {
- addUser,
- updateUser,
- deleteUser,
- batchDeleteUser,
-} from "@/api/system/user";
+ listToSelectTree,
+ listToTableTree,
+ validatePermission,
+} from "@/utils/index";
+import { ISearchMenu, IMenu, IMenuPermissionButton } from "@/types";
import {
getMenuList,
addMenu,
@@ -26,13 +25,13 @@ import {
deleteMenu,
} from "@/api/system/menu";
import { AppDispatch, RootState } from "@/store";
-/**导入项目文件 */
-import {
- listToSelectTree,
- listToTableTree,
- validatePermission,
-} from "@/utils/index";
+// import { getPermissionBtns } from "@/store/modules/user";
+import "@/assets/iconfont/quickIconFont.js";
+import quickIconFont from "@/config/quickIconFont.json";
+
const Menu: React.FC = () => {
+ const dispatch: AppDispatch = useDispatch();
+ const { activeTab } = useSelector((state: RootState) => state.tab);
const { confirm } = Modal;
/**
@@ -41,6 +40,10 @@ const Menu: React.FC = () => {
const [loading, setLoading] = useState(false);
const [tableDataList, setTableDataList] = useState([]);
const [parentTreeData, setParentTreeData] = useState>([]);
+ // const permissionBtn = dispatch(
+ // getPermissionBtns(activeTab)
+ // ) as IMenuPermissionButton;
+
/**
* 分页
*/
@@ -54,7 +57,7 @@ const Menu: React.FC = () => {
/**
* 搜索
*/
- const searchForm: ISearchUser = {
+ const searchForm: ISearchMenu = {
keyword: "",
};
const searchFormItems: IFormItem[] = [
@@ -65,19 +68,15 @@ const Menu: React.FC = () => {
},
];
- const handleBatchDelete = (data: any, done: any) => {
- const { ids } = data;
- confirm({
- title: "警告",
- icon: ,
- content: "你真的删除选择的菜单吗？",
- onOk() {
- batchDeleteUser(ids).then(() => {
- message.success("菜单删除成功");
- done();
- });
- },
- });
+ /**
+ * 工具栏
+ */
+ const tableToolbar = {
+ hiddenBatchDeleteButton: true,
+ hiddenImportButton: true,
+ hiddenExportButton: true,
+ hiddenPrintButton: true,
+ // hiddenAddButton: !validatePermission(permissionBtn?.add),
};
/**
@@ -136,6 +135,7 @@ const Menu: React.FC = () => {
},
],
},
+
{
label: "菜单类型",
labelWidth: "80px",
@@ -173,12 +173,12 @@ const Menu: React.FC = () => {
placeholder: "请选择菜单图标",
prop: "icon",
type: "icon",
- // iconOptions: [
- // {
- // label: "quick官网",
- // data: quickIconFont,
- // },
- // ],
+ iconOptions: [
+ {
+ label: "quick官网",
+ data: quickIconFont,
+ },
+ ],
width: "400px",
select: (val) => {
formModel.icon = val;
@@ -259,19 +259,30 @@ const Menu: React.FC = () => {
width: "400px",
prop: "linkUrl",
},
+ {
+ label: "备注",
+ labelWidth: "80px",
+ vModel: "remark",
+ type: "textarea",
+ placeholder: "备注",
+ width: "400px",
+ prop: "remark",
+ },
];
const handleFormSubmit = (form: IMenu, done: any) => {
+ console.log("提交", form);
const row = { ...form };
+ row.pId = form.pId ? form.pId : 0;
if (row.id) {
- console.log("updateUser", row);
- updateUser(row).then(() => {
+ console.log("updateMenu", row);
+ updateMenu(row).then(() => {
message.success("菜单修改成功");
done();
});
} else {
row.id = undefined;
- console.log("addUser", row);
- addUser(row).then(() => {
+ console.log("addMenu", row);
+ addMenu(row).then(() => {
message.success("菜单创建成功");
done();
});
@@ -285,12 +296,12 @@ const Menu: React.FC = () => {
confirm({
title: "警告",
icon: ,
- content: `你真的删除【${item.userName}】的菜单吗？`,
+ content: `你真的删除【${item.menuName}】的菜单吗？`,
onOk() {
if (!item.id) {
return;
}
- deleteUser(item.id).then(() => {
+ deleteMenu(item.id).then(() => {
message.success("菜单删除成功");
done();
});
@@ -331,9 +342,7 @@ const Menu: React.FC = () => {
label: "菜单类型",
prop: "menuType",
width: "200",
- format: (row: IMenu) => {
- console.log("菜单类型", row);
-
+ render: (row: IMenu) => {
if (row.menuType === 0) {
return "目录";
}
@@ -360,7 +369,7 @@ const Menu: React.FC = () => {
label: "缓存",
prop: "cache",
width: "200",
- format: (row: IMenu) => {
+ render: (row: IMenu) => {
return row.cache ? "缓存" : "不缓存";
},
},
@@ -368,7 +377,7 @@ const Menu: React.FC = () => {
label: "显示",
prop: "status",
width: "200",
- format: (row: IMenu) => {
+ render: (row: IMenu) => {
return row.status ? "显示" : "不显示";
},
},
@@ -376,7 +385,7 @@ const Menu: React.FC = () => {
label: "启用",
prop: "enabled",
width: "200",
- format: (row: IMenu) => {
+ render: (row: IMenu) => {
return !row.enabled ? "启用" : "禁用";
},
},
@@ -384,7 +393,7 @@ const Menu: React.FC = () => {
label: "是否外链",
prop: "link",
width: "200",
- format: (row: IMenu) => {
+ render: (row: IMenu) => {
return row.link === 1 ? "外链" : "非外链";
},
},
@@ -400,9 +409,6 @@ const Menu: React.FC = () => {
value: "id",
label: "menuName",
});
-
- // useState(parentTreeData)
- // parentTreeData.length = 0;
setParentTreeData([...parentTree]);
console.log("父级菜单", parentTree);
};
@@ -432,15 +438,16 @@ const Menu: React.FC = () => {
formItems={formItems}
tableData={tableDataList}
tableColumns={tableColumns}
+ tableToolbar={tableToolbar}
searchFormItems={searchFormItems}
searchFormModel={searchForm}
pagebar={page}
loading={loading}
- displayNumber={true}
+ displayNumber={false}
+ formInline={true}
onLoad={loadData}
onFormSubmit={handleFormSubmit}
onDelete={handleDelete}
- onBatchDelete={handleBatchDelete}
>
);
--
Gitee