From a0f86350430b55613b58d44c920d49baaa1dc5bb Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Sun, 15 Aug 2021 20:56:00 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=A2=9E=E5=8A=A0useRequest?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1.修改弹窗loading逻辑 2.修改删除弹窗样式 --- src/views/auth/user/index.tsx | 85 ++++++++++++++++++++++------------- 1 file changed, 55 insertions(+), 30 deletions(-) diff --git a/src/views/auth/user/index.tsx b/src/views/auth/user/index.tsx index 0d0cdec..abe6282 100644 --- a/src/views/auth/user/index.tsx +++ b/src/views/auth/user/index.tsx @@ -2,10 +2,9 @@ import View from '@/components/View' import { Button, DatePicker, Form, Input, message, Modal, Popconfirm, Select, Table, Tooltip } from 'antd' import { DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons' import React, { FC, useState } from 'react' -import { useAntdTable, useBoolean } from 'ahooks' +import { useAntdTable, useBoolean, useRequest } from 'ahooks' import { getUserData } from '@/hooks/auth/user' import { addUserApi, deleteUserApi, updateUserApi } from '@/api/auth/user' -// import { UserAddParams } from '@/interface/auth/user' import './index.scss' // userForm配置 @@ -37,7 +36,6 @@ const AuthUser:FC = () => { // 弹窗标题、控制、加载变量 const [modalTitle, setModalTitle] = useState('创建用户') const [visible, { setTrue, setFalse }] = useBoolean(false) - const [loading, { setTrue: loadingTrue, setFalse: loadingFalse }] = useBoolean(false) const [currentId, setCurrentId] = useState(null) // ahooks定义表格数据和方法 const { tableProps, search } = useAntdTable(getUserData, { @@ -47,6 +45,47 @@ const AuthUser:FC = () => { // 表单重置和搜索方法 const { submit, reset } = search + /** + * 操作用户接口模块 + */ + + // 添加用户接口 + const { run: addRun, loading: addLoading } = useRequest(addUserApi, { + manual: true, + onSuccess: () => { + message.success('创建用户成功') + setFalse() + reset() + }, + }) + // 修改用户接口 + const { run: updateRun, loading: updateLoading } = useRequest(updateUserApi, { + manual: true, + onSuccess: () => { + message.success('修改用户成功') + setFalse() + reset() + }, + }) + // 删除用户接口 + const { run: delRun } = useRequest(deleteUserApi, { + manual: true, + onSuccess: () => { + message.success('删除用户成功！') + reset() + }, + }) + // 判断Modal的loading + const getLoadingVar = () => { + switch (modalTitle) { + case '创建用户': + return addLoading + case '修改用户': + return updateLoading + default: + return null + } + } const addUserModal = () => { setModalTitle('创建用户') userForm.resetFields() @@ -59,32 +98,17 @@ const AuthUser:FC = () => { setTrue() } const submitUserForm = () => { - loadingTrue() userForm.validateFields().then((values) => { - if (modalTitle === '创建用户') { - addUserApi(values).then(() => { - message.success('创建用户成功') - setFalse() - loadingFalse() - reset() - }).catch(loadingFalse) - } else if (modalTitle === '修改用户') { - updateUserApi(currentId, values).then(() => { - message.success('修改用户成功') - setFalse() - loadingFalse() - reset() - }).catch(loadingFalse) + switch (modalTitle) { + case '创建用户': + addRun(values) + break + case '修改用户': + updateRun(currentId, values) + break + default: + break } - }).catch((info) => { - loadingFalse() - console.log(info) - }) - } - const deleteUserBtn = (id: number) => { - deleteUserApi(id).then(() => { - message.success('删除用户成功！') - reset() }) } const columns = [ @@ -148,8 +172,9 @@ const AuthUser:FC = () => { /> deleteUserBtn(record.id)} + placement="topRight" + title={是否确认删除用户{record.nickName}} + onConfirm={() => delRun(record.id)} okText="确认" cancelText="取消" > @@ -206,7 +231,7 @@ const AuthUser:FC = () => { Date: Mon, 16 Aug 2021 00:30:33 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=9D=83=E9=99=90->=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20ahooks=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/auth/menu.ts | 10 +- src/hooks/auth/menu.ts | 63 ++++----- src/interface/auth/menu.ts | 5 +- src/views/auth/menu/index.scss | 18 ++- src/views/auth/menu/index.tsx | 236 ++++++++++++++++----------------- src/views/auth/user/index.tsx | 16 +-- 6 files changed, 165 insertions(+), 183 deletions(-) diff --git a/src/api/auth/menu.ts b/src/api/auth/menu.ts index cc2df74..ecbc9b1 100644 --- a/src/api/auth/menu.ts +++ b/src/api/auth/menu.ts @@ -7,7 +7,7 @@ import { SaveMenu } from '@/interface/auth/menu' * @param data * @returns */ -export function getTreeMenu(data: any): Promise { +export function getMenuApi(data: any): Promise { return request.get('/api/auth/module/list', data) } /** @@ -15,7 +15,7 @@ export function getTreeMenu(data: any): Promise { * @param data * @returns */ -export function addMenu(data:SaveMenu): Promise { +export function addMenuApi(data:SaveMenu): Promise { const params = data // 解决eslint提示 禁止对函数参数再赋值 if (params.parentId == null) params.parentId = 0 return request.post('/api/auth/module', params) @@ -25,15 +25,15 @@ export function addMenu(data:SaveMenu): Promise { * @param data * @returns */ -export function updateMenu(data: SaveMenu): Promise { +export function updateMenuApi(id:number, data: SaveMenu): Promise { const params = data // 解决eslint提示 禁止对函数参数再赋值 if (params.parentId == null) params.parentId = 0 - return request.put(`/api/auth/module/${params.id}`, params) + return request.put(`/api/auth/module/${id}`, params) } /** * 删除菜单 * @param id */ -export function removeMenu(id: number): Promise { +export function deleteMenuApi(id: number): Promise { return request.delete(`/api/auth/module/${id}`) } diff --git a/src/hooks/auth/menu.ts b/src/hooks/auth/menu.ts index 0c3728f..79e8144 100644 --- a/src/hooks/auth/menu.ts +++ b/src/hooks/auth/menu.ts @@ -1,41 +1,30 @@ -import { getTreeMenu, addMenu, updateMenu, removeMenu } from '@/api/auth/menu' -import { useEffect, useState } from 'react' -import { MenuSearchParams, SaveMenu } from '@/interface/auth/menu' +import { useState } from 'react' +import { getMenuApi } from '@/api/auth/menu' +import { MenuSearchParams } from '@/interface/auth/menu' +import { PaginatedParams } from 'ahooks/lib/useAntdTable' +import { antdTableResult } from '@/interface/ahooks' +import { getTreeSelectData } from '@/utils/antd' -export function useMenuTreeTable() { - const [menuTableData, setMenuTableData] = useState([]) - const [loading, setLoading] = useState(false) - const tableParams: MenuSearchParams = { - name: '', - code: '', +export function useMenuTable() { + const [treeOptions, setTreeOptions] = useState([]) + const getTreeSelect = (tableData) => { + // 过滤treeSelect数据的函数 + const selectData = getTreeSelectData(tableData, 'name', 'id') + setTreeOptions(selectData) } - // 获取菜单表格数据 - const getMenuData = async (searchParams) => { - const res = await getTreeMenu(searchParams) - setMenuTableData(res) + const getMenuData = async ( + { current, pageSize }: PaginatedParams[0], + formData: MenuSearchParams, + ): Promise> => { + const params: any = { ...formData } + params.current = current + params.size = pageSize + const res: any = await getMenuApi(params) + getTreeSelect(res) + return { + total: res.length, + list: res, + } } - // 新增菜单 - const addMenuApi = async (params: SaveMenu) => { - const res = await addMenu(params) - return res - } - // 修改菜单 - const updateMenuApi = async (params: SaveMenu) => { - const res = await updateMenu(params) - return res - } - - // 删除 - const removeMenuApi = async (id: number) => { - const res = await removeMenu(id) - return res - } - - useEffect(() => { - setLoading(true) - getMenuData(tableParams) - // eslint-disable-next-line - }, []) - - return { loading, menuTableData, setMenuTableData, getMenuData, addMenuApi, updateMenuApi, removeMenuApi } + return { getMenuData, treeOptions } } diff --git a/src/interface/auth/menu.ts b/src/interface/auth/menu.ts index d8942ed..f7f48f7 100644 --- a/src/interface/auth/menu.ts +++ b/src/interface/auth/menu.ts @@ -1,6 +1,7 @@ export interface MenuSearchParams { name?: string // 菜单名 code?: string // 菜单编码 + [props: string]: any } // 新增/修改菜单请求 export interface SaveMenu { @@ -9,6 +10,6 @@ export interface SaveMenu { code: string // 菜单编码 parentId?: number // 父级id path?: string // 菜单路径 - weight: number // 权重 - iconClass: string // 图标名称 antd + weight?: number // 权重 + iconClass?: string // 图标名称 antd } diff --git a/src/views/auth/menu/index.scss b/src/views/auth/menu/index.scss index 4628fdc..af083a3 100644 --- a/src/views/auth/menu/index.scss +++ b/src/views/auth/menu/index.scss @@ -5,13 +5,17 @@ align-items: center; margin-bottom: 10px; .left-search { - display: flex; - align-items: center; - width: 30%; - min-width: 320px; - max-width: 500px; - .search-btn { - margin-left: 5px; + flex: 1; + #menu-search-form { + display: flex; + align-items: center; + justify-content: flex-start; + .ant-form-item { + margin-bottom: 0; + } + .search-btn { + margin-left: 5px; + } } } } diff --git a/src/views/auth/menu/index.tsx b/src/views/auth/menu/index.tsx index 3d12338..71b4c9f 100644 --- a/src/views/auth/menu/index.tsx +++ b/src/views/auth/menu/index.tsx @@ -1,122 +1,94 @@ import View from '@/components/View' import React, { useState } from 'react' -import { useMenuTreeTable } from '@/hooks/auth/menu' import { Table, Button, Tooltip, Popconfirm, message, Input, Modal, Form, InputNumber, TreeSelect } from 'antd' import { DeleteOutlined, FormOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons' -import { MenuSearchParams, SaveMenu } from '@/interface/auth/menu' -import { getTreeSelectData } from '@/utils/antd' +import { useMenuTable } from '@/hooks/auth/menu' +import { useAntdTable, useBoolean, useRequest } from 'ahooks' +import { addMenuApi, updateMenuApi, deleteMenuApi } from '@/api/auth/menu' import './index.scss' const AuthMenu: React.FC = () => { - // 获取表格数据，刷新表格方法 表格操作api - const { menuTableData, getMenuData, addMenuApi, removeMenuApi, updateMenuApi } = useMenuTreeTable() + // 获取[搜索，新增/菜单]表单实例 + const [menuForm] = Form.useForm() + const [searchForm] = Form.useForm() + const { getMenuData, treeOptions } = useMenuTable() // 添加菜单 父级ID 树状选择器数据 - const [treeData, setTreeData] = useState>([]) - const [params, setParams] = useState({ - code: '', - name: '', - }) - const [visible, setVisible] = useState(false) - const [confirmLoading, setConfirmLoading] = useState(false) + const [visible, { setTrue, setFalse }] = useBoolean(false) + const [menuId, setMenuId] = useState(null) const [modalTitle, setModalTitle] = useState('添加菜单') - const menuForm: SaveMenu = { - id: undefined, // 菜单id - name: '', // 菜单名 - code: '', // 菜单编码 - parentId: undefined, // 父级id - path: '', // 菜单路径 - weight: 999, // 权重 - iconClass: '', // 图标名称 antd - } - // 获取表单实例用form.setFieldsValue更新数据 - const [form] = Form.useForm() - - // 打开弹窗 - const showModal = () => { - setVisible(true) - } - // 参数变化后搜索函数 - const changeParams = (e) => { - setParams({ - ...params, - [e.target.name]: e.target.value, - }) - } - const searchMenuList = () => { - getMenuData(params) - } - // 添加/修改菜单方法 - const openMenuForm = (text, record: any) => { - switch (text) { - case '编辑菜单': - form.setFieldsValue({ - id: record.id, - name: record.name, - code: record.code, - parentId: record.parentId, - path: record.path, - weight: record.weight, - iconClass: record.iconClass, - }) - break - case '新增菜单': - form.setFieldsValue({ - id: undefined, - name: '', - code: '', - parentId: undefined, - path: '', - weight: 999, - iconClass: '', - }) - break - default: - break - } - // 过滤treeSelect数据的函数 - const selectData = getTreeSelectData(menuTableData, 'name', 'id') - setTreeData(selectData) - setModalTitle(text) - showModal() - } - // 新增、编辑菜单 - const saveMenuForm = () => { - setConfirmLoading(true) - const currentForm = form.getFieldsValue() + // ahooks绑定表格 + const { tableProps, search } = useAntdTable(getMenuData, { + defaultPageSize: 10, + form: searchForm, + }) + // 表单搜索、重置方法 + const { submit, reset } = search + /** + * 菜单操作接口模块 + */ + // 添加菜单接口 + const { run: addRun, loading: addLoading } = useRequest(addMenuApi, { + manual: true, + onSuccess: () => { + message.success('添加菜单成功') + setFalse() + reset() + }, + }) + // 修改菜单接口 + const { run: updateRun, loading: updateLoading } = useRequest(updateMenuApi, { + manual: true, + onSuccess: () => { + message.success('菜单修改成功') + setFalse() + reset() + }, + }) + // 删除菜单接口 + const { run: delRun } = useRequest(deleteMenuApi, { + manual: true, + onSuccess: () => { + message.success('菜单删除成功') + reset() + }, + }) + // 判断Modal的loading + const getLoadingVar = () => { 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 + case '添加菜单': + return addLoading + case '修改菜单': + return updateLoading default: - break + return null } } - // 删除菜单方法 - const deleteMenu = (id: number) => { - removeMenuApi(id).then(() => { - message.success('菜单删除成功！') - getMenuData({}) - }).catch((err) => { - message.error(err) + // 添加菜单弹窗 + const addMenuModal = () => { + setModalTitle('添加菜单') + menuForm.resetFields() + setTrue() + } + // 编辑菜单弹窗 + const updateMenurModal = (params) => { + setMenuId(params.id) + setModalTitle('修改菜单') + menuForm.setFieldsValue(params) + setTrue() + } + // 新增、编辑菜单的提交 + const submitMenuForm = () => { + menuForm.validateFields().then((values) => { + switch (modalTitle) { + case '添加菜单': + addRun(values) + break + case '修改菜单': + updateRun(menuId, values) + break + default: + break + } }) } // 表格配置 @@ -125,6 +97,7 @@ const AuthMenu: React.FC = () => { title: '菜单编码', dataIndex: 'code', key: 'code', + ellipsis: true, }, { title: '菜单名称', @@ -152,15 +125,22 @@ const AuthMenu: React.FC = () => { key: 'action', className: 'aciton-th', width: 120, - // fixed: 'right', + fixed: 'right' as 'right', render: (text, record) => (
-
- +
- record.id} pagination={false} /> +
record.id} {...tableProps} pagination={false} /> setVisible(false)} + confirmLoading={getLoadingVar()} + onOk={submitMenuForm} + onCancel={setFalse} + width={400} >
@@ -209,7 +197,7 @@ const AuthMenu: React.FC = () => { - + diff --git a/src/views/auth/user/index.tsx b/src/views/auth/user/index.tsx index abe6282..e7c41a0 100644 --- a/src/views/auth/user/index.tsx +++ b/src/views/auth/user/index.tsx @@ -1,7 +1,7 @@ import View from '@/components/View' +import React, { FC, useState } from 'react' import { Button, DatePicker, Form, Input, message, Modal, Popconfirm, Select, Table, Tooltip } from 'antd' import { DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons' -import React, { FC, useState } from 'react' import { useAntdTable, useBoolean, useRequest } from 'ahooks' import { getUserData } from '@/hooks/auth/user' import { addUserApi, deleteUserApi, updateUserApi } from '@/api/auth/user' @@ -36,7 +36,7 @@ const AuthUser:FC = () => { // 弹窗标题、控制、加载变量 const [modalTitle, setModalTitle] = useState('创建用户') const [visible, { setTrue, setFalse }] = useBoolean(false) - const [currentId, setCurrentId] = useState(null) + const [userId, setUserId] = useState(null) // ahooks定义表格数据和方法 const { tableProps, search } = useAntdTable(getUserData, { defaultPageSize: 10, @@ -46,7 +46,7 @@ const AuthUser:FC = () => { const { submit, reset } = search /** - * 操作用户接口模块 + * 用户操作接口模块 */ // 添加用户接口 @@ -92,7 +92,7 @@ const AuthUser:FC = () => { setTrue() } const updateUserModal = (params) => { - setCurrentId(params.id) + setUserId(params.id) setModalTitle('修改用户') userForm.setFieldsValue(params) setTrue() @@ -104,7 +104,7 @@ const AuthUser:FC = () => { addRun(values) break case '修改用户': - updateRun(currentId, values) + updateRun(userId, values) break default: break @@ -192,7 +192,7 @@ const AuthUser:FC = () => { @@ -232,14 +232,14 @@ const AuthUser:FC = () => { title={modalTitle} visible={visible} confirmLoading={getLoadingVar()} - onCancel={setFalse} onOk={submitUserForm} + onCancel={setFalse} width={400} > {getUserFormItem} -- Gitee From 7d49a26571a2ea549f9f7daa40918b626280af62 Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Mon, 16 Aug 2021 00:41:21 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E8=B4=A6=E5=8F=B7=E7=8A=B6=E6=80=81=E6=A0=B7=E5=BC=8F=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/auth/user/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/views/auth/user/index.tsx b/src/views/auth/user/index.tsx index e7c41a0..09092c5 100644 --- a/src/views/auth/user/index.tsx +++ b/src/views/auth/user/index.tsx @@ -132,6 +132,12 @@ const AuthUser:FC = () => { key: 'isLockout', width: 100, align: 'center' as 'center', + render: (text) => { + if (text) { + return (已锁定) + } + return (正常) + }, }, { title: '密保邮箱', -- Gitee