back_question-bank/src/pages/QuestionBankManage/QuestionBank/index.tsx

import React, { useEffect, useState } from 'react'
import { Row, Col, Table, Button, Divider, Switch, Modal, Input, Popconfirm, message } from 'antd'
import BaseTmp from '@/components/BaseTmp'
import api from '@/services/api/index'
import { PlusOutlined } from '@ant-design/icons'
import { descText } from '@/common/MessageManage' 

const { 
  getQuestionBank, 
  addQuestionBank,
  delQuestionBank,
  putQuestionBank 
} = api.question

const QuestionBank: React.FC = () => {

  const [ dataSource, setDataSource ] = useState([])

  const [ isModalVisible, setIsModalVisible ] = useState<boolean>(false)

  /**modal loading */
  const [ confirmLoading, setConfirmLoading ] = useState<boolean>(false)

  /**table loading */
  const [ loading, setLoading ] = useState<boolean>(false)

  /**编辑还是新增 */
  const [ type, setType ] = useState<'edit' | 'add'>('add')

  const [ currentDataSource,  setCurrentDataSource ] = useState<{ id: string, label: string }>({id: '', label: ''})

  useEffect( () => {
    _getQuestionBank()
  }, [])

  const columns = [
    {
      title: '学段名',
      dataIndex: 'label',
      key: 'label',
    },
    {
      title: '教材数',
      dataIndex: 'textBookNum',
      key: 'textBookNum',
    },
    {
      title: '卡片数',
      dataIndex: 'cardNum',
      key: 'cardNum',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      render: () => <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (action: any, record: any) => (
        <>
          <a  onClick={() => openModel('edit', record)} >编辑</a>
          <Divider type="vertical" />
          <Popconfirm 
            title="确定要删除这个学段吗？"
            onConfirm={() => onConfirm(action, record)}
            okText="是"
            cancelText="我点错了"
          >
            <a >删除</a>
          </Popconfirm>
        </>
      )
    }
  ]

  const modelTitle = type === 'add' ? '新增学段' : '编辑学段'

  const handleOk = () => {
    setConfirmLoading(true)
    if (type === 'add') {
      _addQuestionBank()
    } else {
      _putQuestionBank()
    }
  }
  
  const onInput = (e: InputEvent) => {
    setCurrentDataSource({
      ...currentDataSource,
      label: e.target.value
    })
  }

  /**删除学段 */
  const onConfirm = (action: any, records: any) => {
    _delQuestionBank(records.id)
  }

  /**修改题库 */
  const _putQuestionBank = async () => {
    const { status, result } = await putQuestionBank(currentDataSource)
    setIsModalVisible(false)
    setConfirmLoading(false)
    if (status === 200) {
      console.log(result);
      setCurrentDataSource({id: '', label: ''})
      _getQuestionBank()
    }
  }

  /**删除题库 */
  const _delQuestionBank = async (id: string | number) => {
    const { status, result } = await delQuestionBank(id)
    if ( status === 200 ) {
      console.log(result);
      message.success(descText.delTextSuccess)
      _getQuestionBank()
    }
  }

  /**增加题库 */
  const _addQuestionBank = async () => {
    setCurrentDataSource({id: '', label: ''})
    const { status, result} = await addQuestionBank({
      bankName: currentDataSource.label
    })
    setConfirmLoading(false)
    if (status === 200) {
      console.log(result, 'result');
      message.success(descText.addTextSuccess)
      setIsModalVisible(false)
      _getQuestionBank()
    }
    
  }

  /**打开弹窗 */
  const openModel = (type: 'edit' | 'add', record?: any) => {
    setType(type)
    setIsModalVisible(true)
    if (type === 'edit' ) {
      setCurrentDataSource(record)
    }
  }

  /**关闭弹窗 */
  const closeModel = () => {
    setIsModalVisible(false)
  }

  /** 查询学段 */
  const _getQuestionBank = async () => {
    setLoading(true)
    const { status, result } = await getQuestionBank()
    setLoading(false)
    if ( status === 200 ) {
      console.log("result:", result);
      setDataSource(result)
    }
  }

  return (
    <BaseTmp>
      <Row>
        <Col span={24} style={{ display: 'flex', justifyContent: 'flex-end' }} >
          <Button type="primary" icon={<PlusOutlined />} onClick={() => openModel('add')} >创建学段</Button>
        </Col>
        <Col span={24} style={{marginTop: '20px'}} >
          <Table 
            dataSource={dataSource} 
            columns={columns}
            loading={loading}
          />
        </Col>
      </Row>

      <Modal
        title={modelTitle}
        confirmLoading={confirmLoading}
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={closeModel}
      >
        <Input placeholder='请输入学段名' value={currentDataSource.label} onInput={onInput}  />
      </Modal>

    </BaseTmp>
  )

}

export default QuestionBank