import React, { useEffect, useState, useReducer } from 'react'; import { getAgent, stopOrOpenAgent } from '@/services/agent'; import { getRoleList } from '@/services/role'; import { Button, Card, Col, Input, Row, Select, Space, Table, message, Tag } from 'antd'; import { PageContainer } from '@ant-design/pro-layout'; import DetailModal from './detail'; const { Option } = Select; type User = { id: string; nickName: string; phoneNumber: number; region: string; authRoles: string; followBarNum: number; postsNum: number; state: number; caeateTime: string; action?: React.ReactNode; }; export type roleListType = { id: string; label: string; [key: string]: any; }; type initStateType = { curPage: number; roleId: string; state: number; label: string | number; }; type Action = { type: string; [key: string]: any; }; const initState: initStateType = { curPage: 1, roleId: '', state: 2, label: '', }; const reducer: React.Reducer = (State, action): initStateType => { const { type, value } = action; switch (type) { case 'page': return { ...State, curPage: value }; case 'state': return { ...State, state: value }; case 'label': return { ...State, label: value }; case 'roleId': return { ...State, roleId: value }; case 'reload': return { ...State, roleId: '', state: 2, label: '' }; default: throw new Error('没有对应的initStateType类型'); } }; const Agent: React.FC = () => { const [state, dispatch] = useReducer(reducer, initState); const [agentList, setAgentList] = useState([]); const [roleList, setRoleList] = useState([]); const [total, setTotal] = useState(0); const [loading, setLoading] = useState(false); // 弹窗 const [visible, setVisible] = useState(false); // 当前点击的代理商 const [id, setId] = useState(''); // 获取代理商列表 const GetAgent = async () => { setLoading(true); const { code, data } = await getAgent(state); setLoading(false); if (code === 0) { const { records, total: Total } = data; setAgentList(records); setTotal(Total); } }; // 获取权限列表 const GetRoleList = async () => { const { code, data } = await getRoleList({ curPage: 1 }); if (code === 0) { const { records } = data; setRoleList([{ id: '', label: '全部' }, ...records]); } }; // 停用或者启用代理商 const StopOrOpenAgent = async (text: Record, index: number): Promise => { setLoading(true); const { code } = await stopOrOpenAgent(text.id, { state: text.state === 1 ? 0 : 1 }); setLoading(false); if (code === 0) { const a = { ...text, state: text.state === 1 ? 0 : 1 }; const b = JSON.parse(JSON.stringify(agentList)); b.splice(index, 1, a); setAgentList(b); message.success('操作成功'); } }; useEffect(() => { GetAgent(); GetRoleList(); }, []); // 重置搜索条件 const reloadSate = (): void => dispatch({ type: 'reload', value: '' }); // 打开弹窗 const openModal = (value: Record): void => { setVisible(true); setId(value.id); }; // 关闭弹窗 const closeModal = (): void => setVisible(false); // 账户状态 const changeAccState = (value: number): void => dispatch({ type: 'state', value }); // 手机号 const changePhone = (e: React.ChangeEvent): void => dispatch({ type: 'label', value: e.target.value }); // 选择角色 const changeRole = (value: string): void => dispatch({ type: 'roleId', value }); // 分页 const pagination = (changePage: number): void => dispatch({ type: 'page', value: changePage }); return ( record.id} loading={loading} pagination={{ total, showSizeChanger: false, onChange: pagination }} dataSource={agentList} style={{ marginTop: '20px' }} > title="姓名" dataIndex="nickName" key="nickName" /> title="手机号" dataIndex="phoneNumber" key="phoneNumber" /> title="地区" dataIndex="region" key="region" render={(region) => {region || '未知地区'}} /> title="认证角色" dataIndex="authRoles" key="authRoles" render={(authRoles) => ( <> {authRoles.map((item: Record) => { return {item.roleLabel}; })} )} /> title="关注贴吧板块" dataIndex="followBarNum" key="followBarNum" /> title="发帖数" dataIndex="postsNum" key="postsNum" /> title="发帖数" dataIndex="postsNum" key="postsNum" /> title="账号状态" dataIndex="state" key="state" render={(text) => {text === 1 ? '正常' : '禁用中'} } /> title="日期" dataIndex="createTime" key="stcreateTimeate" /> key="action" title="操作" render={(text, record, index) => ( openModal(text)}>查看 StopOrOpenAgent(text, index)}> {text.state === 1 ? '禁用' : '启用'} {/* e.preventDefault()}> 更多 */} )} />
{/* 详情弹窗 */} {visible ? : null}
); }; export default Agent;