dc/src/pages/ht/whitelist/index.js

import React, { useState } from "react";
import {Button, message} from 'antd'
import { FilterTable } from 'wptpc-design'
import {dc} from "@/conf/config";
import ModalAE from './components/ModalAE'
import { whiteDl } from '@/pages/ht/service'
import { LongText } from 'wptpc-design'

const apiUrl = `${dc}/api/white/list`
let refreshFunc = () => {}

const Whitelist = () => {
  const [visibles, setVisibles] = useState({
    ModalAE: false
  })
  const [idp, setIdp] = useState({
    id: '',
    phone: ''
  })

  const handleCancel = () => {
    setVisibles({
      ...visibles,
      ModalAE: false
    })
  }
  const showModalAE = (id, phone) => {
    setIdp({
      id,
      phone
    })
    setVisibles({
      ...visibles,
      ModalAE: true
    })
  }

  const  handleDel = async (id) => {
    const res = await whiteDl({id})
    if (res?.code === 0) {
      message.success(res.msg)
      refreshFunc()
    }
  }

  const filterSetting = {
    hasClearBtn: false,
    formFields: [
      {
        label: '手机号:',
        type: 'input',
        key: 'phone',
        placeholder: '用户手机号搜索',
      },
    ]
  }
  const tableSetting = {
    batchBtns: [
      { label: '添加', type: 'primary', enabled: true, onClick: () => showModalAE('',''), key:'id' },
    ],
    rowKey: 'id',
    columnConfig: [
      {
        align: 'center',
        title: '用户ID',
        key: 'id',
        dataIndex: 'id'
      },
      {
        align: 'center',
        title: '用户昵称',
        key: 'nickname',
        dataIndex: 'nickname'
      },
      {
        align: 'center',
        title: '用户手机号',
        key: 'telphone',
        dataIndex: 'telphone'
      },
      {
        align: 'center',
        title: '开通业务',
        key: 'whiteScene',
        dataIndex: 'whiteScene',
        render: (text) => <LongText text={text.toString()} limit={20} />
      },
      {
        align: 'center',
        title: '开始时间',
        key: 'createTime',
        dataIndex: 'createTime'
      },
      {
        align: 'center',
        title: '结束时间',
        key: 'expireTime',
        dataIndex: 'expireTime'
      },
      {
        align: 'center',
        title: '操作',
        key: 'userinfoId',
        dataIndex: 'userinfoId',
        render: (_, record) => {
          return(
            <div key={_}>
              <Button onClick={() => showModalAE(record.id, record.telphone)} type='link'>编辑</Button>
              <Button onClick={() => handleDel(record.id)} type='link'>删除</Button>
            </div>
          )
        }
      },
    ],
    getRefresh: refresh => {
      refreshFunc = refresh
    },
  }


  return (
    <div>
      <FilterTable
        filterSetting={filterSetting}
        tableSetting={tableSetting}
        apiUrl={apiUrl}
      />
      {
        visibles.ModalAE &&
        <ModalAE
          handleCancel={handleCancel}
          visible={visibles.ModalAE}
          idp={idp}
          refreshFunc={refreshFunc}
        />
      }

    </div>
  )
}

export default Whitelist