--
Gitee
From fdf0ef1a54101aebbc510922bb6006ddead5808d Mon Sep 17 00:00:00 2001
From: Casper <2529670555@qq.com>
Date: Sun, 15 Aug 2021 05:23:03 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=9D=83=E9=99=90=E7=94=A8=E6=88=B7?=
=?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/auth/user.ts | 22 ++++--
src/hooks/auth/user.ts | 37 +++++----
src/interface/auth/user.ts | 46 +++++------
src/views/auth/user/index.tsx | 139 ++++++++++++++++++++++++----------
4 files changed, 154 insertions(+), 90 deletions(-)
diff --git a/src/api/auth/user.ts b/src/api/auth/user.ts
index e931a57..7f47834 100644
--- a/src/api/auth/user.ts
+++ b/src/api/auth/user.ts
@@ -1,11 +1,19 @@
import request from '@/utils/request'
-import { UserListParams } from '@/interface/auth/user'
+import { UserAddParams, UserListParams, UserListRes } from '@/interface/auth/user'
-/**
- * 获取用户列表
- * @param {UserListParams} data
- * return
- */
-export function getUserList(data: UserListParams): Promise
{
+// 获取用户列表
+export function getUserList(data: UserListParams): Promise {
return request.get('/api/auth/user/page', data)
}
+// 新增用户
+export function addUserApi(data: UserAddParams) {
+ return request.post('/api/auth/user', data)
+}
+// 修改用户
+export function updateUserApi(id:number, data:UserAddParams) {
+ return request.put(`/api/auth/user/${id}`, data)
+}
+// 删除用户
+export function deleteUserApi(id:number) {
+ return request.delete(`/api/auth/user/${id}`)
+}
diff --git a/src/hooks/auth/user.ts b/src/hooks/auth/user.ts
index e897bad..db2aa9f 100644
--- a/src/hooks/auth/user.ts
+++ b/src/hooks/auth/user.ts
@@ -1,20 +1,25 @@
import { getUserList } from '@/api/auth/user'
-import { useEffect, useState } from 'react'
-import { UserListParams } from '@/interface/auth/user'
+import { UserListParams, UserListRes } from '@/interface/auth/user'
+import { PaginatedParams } from 'ahooks/lib/useAntdTable'
+import { antdTableResult } from '@/interface/ahooks'
-export function useUserTable() {
- const [userList, setUserList] = useState([])
- const [loading, setLoading] = useState(false)
- const [tableParams, setTableParams] = useState({ current: 1, size: 10 })
- // 获取用户表格数据
- const getUserData = async (params: UserListParams) => {
- const res = await getUserList(params)
- setUserList(res)
+/**
+ * @description: 定义useAntdTable第一个参数，调用获取表格数据接口
+ * @param current 当前页
+ * @param pageSize 每页条数
+ * @param formData 表格参数
+ * @return {*} 表格数据和total
+ */
+export const getUserData = async (
+ { current, pageSize }: PaginatedParams[0],
+ formData: UserListParams,
+): Promise> => {
+ const params = { ...formData }
+ params.current = current
+ params.size = pageSize
+ const res: any = await getUserList(params)
+ return {
+ total: res.total,
+ list: res.records,
}
- useEffect(() => {
- setLoading(true)
- getUserData(tableParams)
- }, [tableParams])
-
- return { loading, userList, setUserList, setTableParams }
}
diff --git a/src/interface/auth/user.ts b/src/interface/auth/user.ts
index 911a003..851954f 100644
--- a/src/interface/auth/user.ts
+++ b/src/interface/auth/user.ts
@@ -1,7 +1,4 @@
-// 获取用户列表的参数
-export interface UserListParams {
- current: number
- size: number
+interface UserType {
loginName?: string
nickName?: string
isLockout?: string
@@ -10,36 +7,35 @@ export interface UserListParams {
createTimeStart?: string
createTimeEnd?: string
}
-
+// 获取用户列表的参数
+export interface UserListParams extends UserType{
+ current: number
+ size: number
+}
+// 用户列表表格数据
+export interface UserTableType extends UserType{
+ id: number
+ password: string
+ lockTime?: string
+ psdWrongTime?: number
+ storeId?: number
+ lastLoginTime?: string
+}
// 用户列表接口返回值
export interface UserListRes {
- countId?: string
current: number
- hitCount?: boolean
- maxLimit?: number
- optimizeCountSql?: boolean
pages: number
orders?: Array
records: Array
- searchCount?: boolean
size: number
total: number
[props: string]: any
}
-
-// 用户列表表格数据
-export interface UserTableType {
- id: number
- password: string
+// 新增用户接口参数
+export interface UserAddParams {
loginName: string
- isLockout?: number
- lockTime?: string
- nickName?: string
- protectEmail?: string
- protectPhone?: string
- psdWrongTime?: number
- storeId?: number
- createTime?: string
- updateTime?: string
- lastLoginTime?: string
+ nickName: string
+ password: string
+ protectEmail: string
+ protectPhone: string
}
diff --git a/src/views/auth/user/index.tsx b/src/views/auth/user/index.tsx
index 894a572..0d0cdec 100644
--- a/src/views/auth/user/index.tsx
+++ b/src/views/auth/user/index.tsx
@@ -1,53 +1,91 @@
import View from '@/components/View'
-import React, { FC } from 'react'
-import { useAntdTable } from 'ahooks'
-import { getUserList } from '@/api/auth/user'
-import { PaginatedParams } from 'ahooks/lib/useAntdTable'
-import { Button, Form, Input, Popconfirm, Table, Tooltip } from 'antd'
+import { Button, DatePicker, Form, Input, message, Modal, Popconfirm, Select, Table, Tooltip } from 'antd'
import { DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons'
-import { UserListParams, UserListRes } from '@/interface/auth/user'
-import { antdTableResult } from '@/interface/ahooks'
+import React, { FC, useState } from 'react'
+import { useAntdTable, useBoolean } 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'
-/**
- * @description: 定义useAntdTable第一个参数，调用获取表格数据接口
- * @param {formData} 传入current，size和筛选表单
- * @return {*} 表格数据和total
- * @param formData
- */
-const getUserData = async (
- { current, pageSize }: PaginatedParams[0],
- formData: UserListParams,
-): Promise> => {
- const params = { ...formData }
- params.current = current
- params.size = pageSize
- const res: any = await getUserList(params)
- return {
- total: res.total,
- list: res.records,
- }
+// userForm配置
+const userFormConfig = [
+ { label: '登录名', name: 'loginName', rules: [{ required: true, message: '请输入内容' }] },
+ { label: '昵称', name: 'nickName', rules: [{ required: true, message: '请输入内容' }] },
+ { label: '密码', name: 'password', rules: [{ required: true, message: '请输入内容' }] },
+ { label: '密保邮箱', name: 'protectEmail', rules: [{ required: true, message: '请输入内容' }] },
+ { label: '密码手机', name: 'protectPhone', rules: [{ required: true, message: '请输入内容' }] },
+]
+// 创建FormItem
+const getUserFormItem = () => {
+ const children = []
+ userFormConfig.forEach((item, index) => {
+ children.push(
+
+
+ ,
+ )
+ })
+ return children
}
const AuthUser:FC = () => {
// 获取表单实例
- const [form] = Form.useForm()
+ const [tableForm] = Form.useForm()
+ const [userForm] = Form.useForm()
+ const { Option } = Select
+ // 弹窗标题、控制、加载变量
+ 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, {
defaultPageSize: 10,
- form,
+ form: tableForm,
})
// 表单重置和搜索方法
const { submit, reset } = search
- const addUser = () => {
- console.log(1)
+ const addUserModal = () => {
+ setModalTitle('创建用户')
+ userForm.resetFields()
+ setTrue()
}
- const editUser = (params) => {
- console.log(params)
+ const updateUserModal = (params) => {
+ setCurrentId(params.id)
+ setModalTitle('修改用户')
+ userForm.setFieldsValue(params)
+ setTrue()
}
- const deleteUser = (id) => {
- console.log(id)
+ 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)
+ }
+ }).catch((info) => {
+ loadingFalse()
+ console.log(info)
+ })
+ }
+ const deleteUserBtn = (id: number) => {
+ deleteUserApi(id).then(() => {
+ message.success('删除用户成功！')
+ reset()
+ })
}
const columns = [
{
@@ -105,13 +143,13 @@ const AuthUser:FC = () => {
shape="circle"
style={{ marginRight: '5px' }}
type="primary"
- onClick={() => editUser(record)}
+ onClick={() => updateUserModal(record)}
icon={}
/>
deleteUser(record.id)}
+ onConfirm={() => deleteUserBtn(record.id)}
okText="确认"
cancelText="取消"
>
@@ -130,7 +168,7 @@ const AuthUser:FC = () => {
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
name="menu-item-form"
- form={form}
+ form={tableForm}
>
@@ -139,7 +177,10 @@ const AuthUser:FC = () => {
-
+
@@ -148,10 +189,7 @@ const AuthUser:FC = () => {
-
-
-
-
+
@@ -160,11 +198,28 @@ const AuthUser:FC = () => {