From 4ee4e5af780afb3c91fbc6e1baea1b5224a7bfdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= Date: Mon, 9 Aug 2021 17:49:34 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E6=9D=83=E9=99=90->=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E9=A1=B5=20=E5=88=9D=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/auth/menu.ts | 16 ++++++---- src/layouts/index.tsx | 1 + src/router/asyncRoutes.ts | 2 +- src/views/auth/menu/index.tsx | 60 +++++++++++++++++++++++++++++++++++ 4 files changed, 71 insertions(+), 8 deletions(-) create mode 100644 src/views/auth/menu/index.tsx diff --git a/src/hooks/auth/menu.ts b/src/hooks/auth/menu.ts index 92792ce..dbe7afc 100644 --- a/src/hooks/auth/menu.ts +++ b/src/hooks/auth/menu.ts @@ -2,19 +2,21 @@ import { getTreeMenu } from '@/api/auth/menu' import { useEffect, useState } from 'react' export function useMenuTreeTable() { - const [tableData, setTableData] = useState([]) + const [menuTableData, setMenuTableData] = useState([]) const [loading, setLoading] = useState(false) - const tableParams = { - name: '', - code: '', - } useEffect(() => { + const tableParams = { + name: '', + code: '', + } setLoading(true) - const fetchData = async() => { + const fetchData = async () => { const result = await getTreeMenu(tableParams) + setMenuTableData(result) } + fetchData() }, []) - return { loading, tableData, setTableData } + return { loading, menuTableData, setMenuTableData } } diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index a97a362..b62d67e 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -19,6 +19,7 @@ const AppLayout: FC = () => { } useEffect(() => { setUserStore() + // eslint-disable-next-line }, [userData]) return ( diff --git a/src/router/asyncRoutes.ts b/src/router/asyncRoutes.ts index b7aebf2..8c62250 100644 --- a/src/router/asyncRoutes.ts +++ b/src/router/asyncRoutes.ts @@ -5,5 +5,5 @@ export default { overview: lazy(() => import('@/views/dashboard')), shopOverview: lazy(() => import('@/views/shop/overview')), shopDecoration: lazy(() => import('@/views/shop/decoration')), - // authMenu: lazy(() => import('@/views/auth/menu')), + authMenu: lazy(() => import('@/views/auth/menu/index')), } diff --git a/src/views/auth/menu/index.tsx b/src/views/auth/menu/index.tsx new file mode 100644 index 0000000..815f7c4 --- /dev/null +++ b/src/views/auth/menu/index.tsx @@ -0,0 +1,60 @@ +import React from 'react' +import { useMenuTreeTable } from '@/hooks/auth/menu' +import { Table, Button } from 'antd' + +const AuthMenu: React.FC = () => { + const { menuTableData } = useMenuTreeTable() + console.log(menuTableData) + const saveMenu = (text, record) => { + console.log(record, text) + } + const columns = [ + { + title: '菜单编码', + dataIndex: 'code', + key: 'code', + }, + { + title: '菜单名称', + dataIndex: 'name', + key: 'name', + }, + { + title: '菜单路径', + dataIndex: 'path', + key: 'path', + }, + { + title: '权重', + dataIndex: 'weight', + key: 'weight', + }, + { + title: '创建时间', + dataIndex: 'updateTime', + key: 'updateTime', + }, + { + title: '操作', + dataIndex: '', + key: 'action', + render: (text, record) => ( +
+ + {/* */} + +
+ ), + }, + ] + return ( +
+
+ record.id} /> + + + ) +} +export default AuthMenu -- Gitee From 8d39f1787590cc0f4cbe13f62de005f862548719 Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Tue, 10 Aug 2021 07:33:40 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E6=9D=83=E9=99=90->=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E9=A1=B5=20=E5=88=9D=E7=89=882?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/auth/menu.ts | 21 +++++++++-------- src/interface/auth/menu.ts | 4 ++++ src/views/auth/menu/index.scss | 9 +++++++ src/views/auth/menu/index.tsx | 43 +++++++++++++++++++++++++++------- 4 files changed, 58 insertions(+), 19 deletions(-) create mode 100644 src/interface/auth/menu.ts create mode 100644 src/views/auth/menu/index.scss diff --git a/src/hooks/auth/menu.ts b/src/hooks/auth/menu.ts index dbe7afc..2e01877 100644 --- a/src/hooks/auth/menu.ts +++ b/src/hooks/auth/menu.ts @@ -1,22 +1,23 @@ import { getTreeMenu } from '@/api/auth/menu' import { useEffect, useState } from 'react' +import { MenuSearchParams } from '@/interface/auth/menu' export function useMenuTreeTable() { const [menuTableData, setMenuTableData] = useState([]) const [loading, setLoading] = useState(false) + const tableParams: MenuSearchParams = { + name: '', + code: '', + } + const getMenuData = async (searchParams) => { + const result = await getTreeMenu(searchParams) + setMenuTableData(result) + } useEffect(() => { - const tableParams = { - name: '', - code: '', - } setLoading(true) - const fetchData = async () => { - const result = await getTreeMenu(tableParams) - setMenuTableData(result) - } - fetchData() + getMenuData(tableParams) }, []) - return { loading, menuTableData, setMenuTableData } + return { loading, menuTableData, setMenuTableData, getMenuData } } diff --git a/src/interface/auth/menu.ts b/src/interface/auth/menu.ts new file mode 100644 index 0000000..554a802 --- /dev/null +++ b/src/interface/auth/menu.ts @@ -0,0 +1,4 @@ +export interface MenuSearchParams { + name?: string // 菜单名 + code?: string // 菜单编码 +} diff --git a/src/views/auth/menu/index.scss b/src/views/auth/menu/index.scss new file mode 100644 index 0000000..017b601 --- /dev/null +++ b/src/views/auth/menu/index.scss @@ -0,0 +1,9 @@ +.button-box { + text-align: center; +} +.action-th { + background: red; +} +.ant-table-thead > tr > th:last-child { + text-align: center; +} diff --git a/src/views/auth/menu/index.tsx b/src/views/auth/menu/index.tsx index 815f7c4..c8de51a 100644 --- a/src/views/auth/menu/index.tsx +++ b/src/views/auth/menu/index.tsx @@ -1,13 +1,27 @@ import React from 'react' import { useMenuTreeTable } from '@/hooks/auth/menu' -import { Table, Button } from 'antd' +import { Table, Button, Tooltip, Popconfirm, message } from 'antd' +import { DeleteOutlined, FormOutlined } from '@ant-design/icons' +import { MenuSearchParams } from '@/interface/auth/menu' +import './index.scss' const AuthMenu: React.FC = () => { - const { menuTableData } = useMenuTreeTable() - console.log(menuTableData) + // 获取表格数据，刷新表格方法 + const { menuTableData, getMenuData } = useMenuTreeTable() + const searchParams: MenuSearchParams = { + code: '', + name: '', + } + // 保存菜单方法 const saveMenu = (text, record) => { console.log(record, text) } + // 删除菜单方法 + const deleteMenu = (id: number) => { + message.success('菜单删除成功！') + getMenuData(searchParams) + console.log(id) + } const columns = [ { title: '菜单编码', @@ -38,13 +52,24 @@ const AuthMenu: React.FC = () => { title: '操作', dataIndex: '', key: 'action', + className: 'aciton-th', + width: 120, + // fixed: 'right', render: (text, record) => ( -
- - {/* */} - +
+ +
), }, -- Gitee From 861ae08de9325a0fb96f96d64e1ba6a9be50991e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= Date: Tue, 10 Aug 2021 18:04:09 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E6=9D=83=E9=99=90->=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E9=A1=B5=20=E5=88=9D=E7=89=883?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/auth/menu.ts | 5 +- src/hooks/auth/menu.ts | 28 +++++-- src/interface/auth/menu.ts | 10 +++ src/views/auth/menu/index.scss | 17 +++++ src/views/auth/menu/index.tsx | 133 ++++++++++++++++++++++++++++++--- 5 files changed, 176 insertions(+), 17 deletions(-) diff --git a/src/api/auth/menu.ts b/src/api/auth/menu.ts index a83c592..cc2df74 100644 --- a/src/api/auth/menu.ts +++ b/src/api/auth/menu.ts @@ -1,4 +1,5 @@ import request from '@/utils/request' +import { SaveMenu } from '@/interface/auth/menu' // import { ResMenuTree, MenuQuery, SaveMenu } from '@/model/system/MenuTree' /** @@ -14,7 +15,7 @@ export function getTreeMenu(data: any): Promise { * @param data * @returns */ -export function addMenu(data: any): Promise { +export function addMenu(data:SaveMenu): Promise { const params = data // 解决eslint提示 禁止对函数参数再赋值 if (params.parentId == null) params.parentId = 0 return request.post('/api/auth/module', params) @@ -24,7 +25,7 @@ export function addMenu(data: any): Promise { * @param data * @returns */ -export function updateMenu(data: any): Promise { +export function updateMenu(data: SaveMenu): Promise { const params = data // 解决eslint提示 禁止对函数参数再赋值 if (params.parentId == null) params.parentId = 0 return request.put(`/api/auth/module/${params.id}`, params) diff --git a/src/hooks/auth/menu.ts b/src/hooks/auth/menu.ts index 2e01877..076dff8 100644 --- a/src/hooks/auth/menu.ts +++ b/src/hooks/auth/menu.ts @@ -1,6 +1,6 @@ -import { getTreeMenu } from '@/api/auth/menu' +import { getTreeMenu, addMenu, updateMenu, removeMenu } from '@/api/auth/menu' import { useEffect, useState } from 'react' -import { MenuSearchParams } from '@/interface/auth/menu' +import { MenuSearchParams, SaveMenu } from '@/interface/auth/menu' export function useMenuTreeTable() { const [menuTableData, setMenuTableData] = useState([]) @@ -9,15 +9,33 @@ export function useMenuTreeTable() { name: '', code: '', } + // 获取菜单表格数据 const getMenuData = async (searchParams) => { - const result = await getTreeMenu(searchParams) - setMenuTableData(result) + const res = await getTreeMenu(searchParams) + setMenuTableData(res) + } + // 新增菜单 + const addMenuApi = async (params: SaveMenu) => { + const res = await addMenu(params) + console.log(res) + } + // 修改菜单 + const updateMenuApi = async (params: SaveMenu) => { + const res = await updateMenu(params) + console.log(res) + } + + // 删除 + const removeMenuApi = async (id: number) => { + const res = await removeMenu(id) + console.log(res) } useEffect(() => { setLoading(true) getMenuData(tableParams) + // eslint-disable-next-line }, []) - return { loading, menuTableData, setMenuTableData, getMenuData } + return { loading, menuTableData, setMenuTableData, getMenuData, addMenuApi, updateMenuApi, removeMenuApi } } diff --git a/src/interface/auth/menu.ts b/src/interface/auth/menu.ts index 554a802..d8942ed 100644 --- a/src/interface/auth/menu.ts +++ b/src/interface/auth/menu.ts @@ -2,3 +2,13 @@ export interface MenuSearchParams { name?: string // 菜单名 code?: string // 菜单编码 } +// 新增/修改菜单请求 +export interface SaveMenu { + id?: number // 菜单id + name: string // 菜单名 + code: string // 菜单编码 + parentId?: number // 父级id + path?: string // 菜单路径 + weight: number // 权重 + iconClass: string // 图标名称 antd +} diff --git a/src/views/auth/menu/index.scss b/src/views/auth/menu/index.scss index 017b601..9ae09be 100644 --- a/src/views/auth/menu/index.scss +++ b/src/views/auth/menu/index.scss @@ -1,3 +1,20 @@ +.app-auth-menu { + .menu-top-bar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + .left-search { + display: flex; + align-items: center; + width: 30%; + max-width: 500px; + .search-btn { + margin-left: 5px; + } + } + } +} .button-box { text-align: center; } diff --git a/src/views/auth/menu/index.tsx b/src/views/auth/menu/index.tsx index c8de51a..d907e04 100644 --- a/src/views/auth/menu/index.tsx +++ b/src/views/auth/menu/index.tsx @@ -1,25 +1,91 @@ -import React from 'react' +import React, { useState } from 'react' import { useMenuTreeTable } from '@/hooks/auth/menu' -import { Table, Button, Tooltip, Popconfirm, message } from 'antd' -import { DeleteOutlined, FormOutlined } from '@ant-design/icons' -import { MenuSearchParams } from '@/interface/auth/menu' +import { Table, Button, Tooltip, Popconfirm, message, Input, Modal, Form } from 'antd' +import { DeleteOutlined, FormOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons' +import { MenuSearchParams, SaveMenu } from '@/interface/auth/menu' import './index.scss' const AuthMenu: React.FC = () => { // 获取表格数据，刷新表格方法 const { menuTableData, getMenuData } = useMenuTreeTable() - const searchParams: MenuSearchParams = { + const [params, setParams] = useState({ code: '', name: '', + }) + const [visible, setVisible] = useState(false) + const [confirmLoading, setConfirmLoading] = useState(false) + const [menuForm, setMenuForm] = useState({ + id: undefined, // 菜单id + name: '', // 菜单名 + code: '', // 菜单编码 + parentId: undefined, // 父级id + path: '', // 菜单路径 + weight: 999, // 权重 + iconClass: '', // 图标名称 antd + }) + // 打开弹窗 + const showModal = () => { + setVisible(true) } - // 保存菜单方法 - const saveMenu = (text, record) => { + // 参数变化后搜索函数 + const changeParams = (e) => { + setParams({ + ...params, + [e.target.name]: e.target.value, + }) + } + // 菜单表单修改 + const onChange = (e) => { + setMenuForm({ + ...menuForm, + [e.target.name]: e.target.value, + }) + } + const searchMenuList = () => { + getMenuData(params) + } + // 添加/修改菜单方法 + const openMenuForm = (text, record: any) => { console.log(record, text) + switch (text) { + case '编辑菜单': + setMenuForm({ + id: record.id, + name: record.name, + code: record.code, + parentId: record.parentId, + path: record.path, + weight: record.weight, + iconClass: record.iconClass, + }) + showModal() + console.log(record) + break + case '新增菜单': + setMenuForm({ + id: undefined, + name: '', + code: '', + parentId: undefined, + path: '', + weight: 999, + iconClass: '', + }) + showModal() + break + default: + break + } + } + const saveMenuForm = () => { + setConfirmLoading(true) + console.log(menuForm) } // 删除菜单方法 const deleteMenu = (id: number) => { message.success('菜单删除成功！') - getMenuData(searchParams) + // setParams({ name: '', code: '' }) // 重置搜索参数 + // getMenuData(params) console.log(id) } const columns = [ @@ -58,7 +124,7 @@ const AuthMenu: React.FC = () => { render: (text, record) => (
-
+ +
-
record.id} /> +
record.id} pagination={false} /> + setVisible(false)} + > +
+ + + + + + + + + + + + + + + + + + + + + + + ) } -- Gitee From a5d00451bb9269c86d88fac58c324a34ef9a5301 Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Wed, 11 Aug 2021 02:20:41 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E9=A1=B5form=E6=95=B0=E6=8D=AE=E4=B8=8D=E6=9B=B4=E6=96=B0bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/auth/menu/index.tsx | 49 +++++++++++++++++------------------ 1 file changed, 24 insertions(+), 25 deletions(-) diff --git a/src/views/auth/menu/index.tsx b/src/views/auth/menu/index.tsx index d907e04..52c4c41 100644 --- a/src/views/auth/menu/index.tsx +++ b/src/views/auth/menu/index.tsx @@ -7,14 +7,14 @@ import './index.scss' const AuthMenu: React.FC = () => { // 获取表格数据，刷新表格方法 - const { menuTableData, getMenuData } = useMenuTreeTable() + const { menuTableData, getMenuData, addMenuApi } = useMenuTreeTable() const [params, setParams] = useState({ code: '', name: '', }) const [visible, setVisible] = useState(false) - const [confirmLoading, setConfirmLoading] = useState(false) - const [menuForm, setMenuForm] = useState({ + const [confirmLoading] = useState(false) + const menuForm: SaveMenu = { id: undefined, // 菜单id name: '', // 菜单名 code: '', // 菜单编码 @@ -22,7 +22,9 @@ const AuthMenu: React.FC = () => { path: '', // 菜单路径 weight: 999, // 权重 iconClass: '', // 图标名称 antd - }) + } + // 获取表单实例用form.setFieldsValue更新数据 + const [form] = Form.useForm() // 打开弹窗 const showModal = () => { setVisible(true) @@ -34,13 +36,6 @@ const AuthMenu: React.FC = () => { [e.target.name]: e.target.value, }) } - // 菜单表单修改 - const onChange = (e) => { - setMenuForm({ - ...menuForm, - [e.target.name]: e.target.value, - }) - } const searchMenuList = () => { getMenuData(params) } @@ -49,7 +44,7 @@ const AuthMenu: React.FC = () => { console.log(record, text) switch (text) { case '编辑菜单': - setMenuForm({ + form.setFieldsValue({ id: record.id, name: record.name, code: record.code, @@ -58,11 +53,9 @@ const AuthMenu: React.FC = () => { weight: record.weight, iconClass: record.iconClass, }) - showModal() - console.log(record) break case '新增菜单': - setMenuForm({ + form.setFieldsValue({ id: undefined, name: '', code: '', @@ -71,15 +64,20 @@ const AuthMenu: React.FC = () => { weight: 999, iconClass: '', }) - showModal() break default: break } + showModal() + console.log(menuForm) } + // 新增、编辑菜单 const saveMenuForm = () => { - setConfirmLoading(true) - console.log(menuForm) + // setConfirmLoading(true) + const currentForm = form.getFieldsValue() + addMenuApi(currentForm).then((res) => { + console.log(res) + }) } // 删除菜单方法 const deleteMenu = (id: number) => { @@ -166,29 +164,30 @@ const AuthMenu: React.FC = () => { labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} name="menu-item-form" + form={form} onFinish={saveMenuForm} initialValues={menuForm} > - + - + - + - + - + - + - + -- Gitee From 237c2998cd3c8cd72016529937894ee4a53ee8a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= Date: Wed, 11 Aug 2021 11:27:27 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=E6=9D=83=E9=99=90->=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E9=A1=B5=20=E5=88=9D=E7=89=88=20=E5=AE=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/auth/menu.ts | 6 ++--- src/views/auth/menu/index.tsx | 48 +++++++++++++++++++++++++++-------- 2 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/hooks/auth/menu.ts b/src/hooks/auth/menu.ts index 076dff8..0c3728f 100644 --- a/src/hooks/auth/menu.ts +++ b/src/hooks/auth/menu.ts @@ -17,18 +17,18 @@ export function useMenuTreeTable() { // 新增菜单 const addMenuApi = async (params: SaveMenu) => { const res = await addMenu(params) - console.log(res) + return res } // 修改菜单 const updateMenuApi = async (params: SaveMenu) => { const res = await updateMenu(params) - console.log(res) + return res } // 删除 const removeMenuApi = async (id: number) => { const res = await removeMenu(id) - console.log(res) + return res } useEffect(() => { diff --git a/src/views/auth/menu/index.tsx b/src/views/auth/menu/index.tsx index 52c4c41..9533be3 100644 --- a/src/views/auth/menu/index.tsx +++ b/src/views/auth/menu/index.tsx @@ -7,13 +7,14 @@ import './index.scss' const AuthMenu: React.FC = () => { // 获取表格数据，刷新表格方法 - const { menuTableData, getMenuData, addMenuApi } = useMenuTreeTable() + const { menuTableData, getMenuData, addMenuApi, removeMenuApi, updateMenuApi } = useMenuTreeTable() const [params, setParams] = useState({ code: '', name: '', }) const [visible, setVisible] = useState(false) - const [confirmLoading] = useState(false) + const [confirmLoading, setConfirmLoading] = useState(false) + const [modalTitle, setModalTitle] = useState('添加菜单') const menuForm: SaveMenu = { id: undefined, // 菜单id name: '', // 菜单名 @@ -42,6 +43,7 @@ const AuthMenu: React.FC = () => { // 添加/修改菜单方法 const openMenuForm = (text, record: any) => { console.log(record, text) + setModalTitle(text) switch (text) { case '编辑菜单': form.setFieldsValue({ @@ -73,18 +75,44 @@ const AuthMenu: React.FC = () => { } // 新增、编辑菜单 const saveMenuForm = () => { - // setConfirmLoading(true) + setConfirmLoading(true) const currentForm = form.getFieldsValue() - addMenuApi(currentForm).then((res) => { - console.log(res) - }) + switch (modalTitle) { + case '新增菜单': + addMenuApi(currentForm).then(() => { + setConfirmLoading(false) + setVisible(false) + message.success('保存菜单成功') + getMenuData({}) + }).catch((err) => { + setConfirmLoading(false) + message.error(err) + }) + break + case '编辑菜单': + updateMenuApi(currentForm).then(() => { + setConfirmLoading(false) + setVisible(false) + message.success('保存菜单成功') + getMenuData({}) + }).catch((err) => { + setConfirmLoading(false) + message.error(err) + }) + break + default: + break + } } // 删除菜单方法 const deleteMenu = (id: number) => { - message.success('菜单删除成功！') - // setParams({ name: '', code: '' }) // 重置搜索参数 - // getMenuData(params) console.log(id) + removeMenuApi(id).then(() => { + message.success('菜单删除成功！') + getMenuData({}) + }).catch((err) => { + message.error(err) + }) } const columns = [ { @@ -154,7 +182,7 @@ const AuthMenu: React.FC = () => {
record.id} pagination={false} />