|
@@ -1,14 +1,144 @@
|
|
-import React from "react";
|
|
|
|
-import styles from "./index.module.scss";
|
|
|
|
- function A4iosUser() {
|
|
|
|
|
|
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
|
|
+import styles from './index.module.scss'
|
|
|
|
+import { Button, Input, Select, Switch } from 'antd'
|
|
|
|
+import { A4FromDataType, A4selArr1 } from './data'
|
|
|
|
+import { useDispatch, useSelector } from 'react-redux'
|
|
|
|
+import { A4_APIgetList, A4_APIisEnabled } from '@/store/action/A4iosUser'
|
|
|
|
+import { RootState } from '@/store'
|
|
|
|
+import { A4tableType } from '@/types'
|
|
|
|
+import MyTable from '@/components/MyTable'
|
|
|
|
+import { A4tableC } from '@/utils/tableData'
|
|
|
|
+import { MessageFu } from '@/utils/message'
|
|
|
|
+import A4ip from './A4ip'
|
|
|
|
+
|
|
|
|
+const fromDataBase: A4FromDataType = {
|
|
|
|
+ searchKey: '',
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ isEnabled: ''
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function A4iosUser() {
|
|
|
|
+ const dispatch = useDispatch()
|
|
|
|
+
|
|
|
|
+ const [fromData, setFromData] = useState(fromDataBase)
|
|
|
|
+
|
|
|
|
+ const getListFu = useCallback(() => {
|
|
|
|
+ dispatch(A4_APIgetList(fromData))
|
|
|
|
+ }, [dispatch, fromData])
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ getListFu()
|
|
|
|
+ }, [getListFu])
|
|
|
|
+
|
|
|
|
+ const [inputKey, setInputKey] = useState(1)
|
|
|
|
+
|
|
|
|
+ // 输入框的输入
|
|
|
|
+ const timeRef = useRef(-1)
|
|
|
|
+ const txtChangeFu = useCallback(
|
|
|
|
+ (e: React.ChangeEvent<HTMLInputElement>, key: 'searchKey') => {
|
|
|
|
+ clearTimeout(timeRef.current)
|
|
|
|
+ timeRef.current = window.setTimeout(() => {
|
|
|
|
+ setFromData({ ...fromData, [key]: e.target.value.replaceAll("'", ''), pageNum: 1 })
|
|
|
|
+ }, 500)
|
|
|
|
+ },
|
|
|
|
+ [fromData]
|
|
|
|
+ )
|
|
|
|
+
|
|
|
|
+ // 点击重置
|
|
|
|
+ const resetSelectFu = useCallback(() => {
|
|
|
|
+ setInputKey(Date.now())
|
|
|
|
+ setFromData({ ...fromDataBase })
|
|
|
|
+ }, [])
|
|
|
|
+
|
|
|
|
+ const tableInfo = useSelector((state: RootState) => state.A4iosUser.tableInfo)
|
|
|
|
+
|
|
|
|
+ // 用户状态切换
|
|
|
|
+ const cutIsEnabled = useCallback(
|
|
|
|
+ async (id: number, val: 0 | 1) => {
|
|
|
|
+ const res = await A4_APIisEnabled(id, val ? 0 : 1)
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ MessageFu.success('操作成功!')
|
|
|
|
+ getListFu()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ [getListFu]
|
|
|
|
+ )
|
|
|
|
+
|
|
|
|
+ const tableLastBtn = useMemo(() => {
|
|
|
|
+ return [
|
|
|
|
+ {
|
|
|
|
+ title: '用户状态',
|
|
|
|
+ render: (item: A4tableType) => (
|
|
|
|
+ <Switch
|
|
|
|
+ checked={!!item.isEnabled}
|
|
|
|
+ onChange={() => cutIsEnabled(item.id, item.isEnabled)}
|
|
|
|
+ checkedChildren='启用'
|
|
|
|
+ unCheckedChildren='禁用'
|
|
|
|
+ />
|
|
|
|
+ )
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }, [cutIsEnabled])
|
|
|
|
+
|
|
|
|
+ const [ipShow, setIpShow] = useState(false)
|
|
|
|
|
|
return (
|
|
return (
|
|
<div className={styles.A4iosUser}>
|
|
<div className={styles.A4iosUser}>
|
|
- <h1>A4iosUser</h1>
|
|
|
|
|
|
+ <div className='pageTitle'>平台用户</div>
|
|
|
|
+
|
|
|
|
+ {/* 顶部筛选 */}
|
|
|
|
+ <div className='A4top'>
|
|
|
|
+ <div>
|
|
|
|
+ <div className='A4TopRow'>
|
|
|
|
+ <span>搜索:</span>
|
|
|
|
+ <Input
|
|
|
|
+ key={inputKey}
|
|
|
|
+ maxLength={20}
|
|
|
|
+ style={{ width: 192 }}
|
|
|
|
+ placeholder='请输入用户昵称'
|
|
|
|
+ allowClear
|
|
|
|
+ onChange={e => txtChangeFu(e, 'searchKey')}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div className='A4TopRow'>
|
|
|
|
+ <span>用户状态:</span>
|
|
|
|
+ <Select
|
|
|
|
+ style={{ width: 180 }}
|
|
|
|
+ value={fromData.isEnabled}
|
|
|
|
+ onChange={e => setFromData({ ...fromData, pageNum: 1, isEnabled: e })}
|
|
|
|
+ options={A4selArr1}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <Button onClick={resetSelectFu}>重置</Button> 
|
|
|
|
+ <Button type='primary' onClick={() => setIpShow(true)}>
|
|
|
|
+ IP黑名单
|
|
|
|
+ </Button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ {/* 表格主体 */}
|
|
|
|
+ <div className='A4tableBox'>
|
|
|
|
+ <MyTable
|
|
|
|
+ yHeight={625}
|
|
|
|
+ list={tableInfo.list}
|
|
|
|
+ columnsTemp={A4tableC}
|
|
|
|
+ lastBtn={tableLastBtn}
|
|
|
|
+ pageNum={fromData.pageNum}
|
|
|
|
+ pageSize={fromData.pageSize}
|
|
|
|
+ total={tableInfo.total}
|
|
|
|
+ onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ {ipShow ? <A4ip closeFu={() => setIpShow(false)} /> : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
}
|
|
|
|
|
|
-const MemoA4iosUser = React.memo(A4iosUser);
|
|
|
|
|
|
+const MemoA4iosUser = React.memo(A4iosUser)
|
|
|
|
|
|
-export default MemoA4iosUser;
|
|
|
|
|
|
+export default MemoA4iosUser
|