KLMYMuseum/src/pages/A1banner/index.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { A1EditInfoType } from './data'
import { A1_APIdel, A1_APIgetList, A1_APIpublish } from '@/store/action/A1banner'
import { RootState } from '@/store'
import { MessageFu } from '@/utils/message'
import { A1tbType } from '@/types'
import MyPopconfirm from '@/components/MyPopconfirm'
import MyTable from '@/components/MyTable'
import { A1tableC } from '@/utils/tableData'
import A1add from './A1add'
import { editPreview } from '@/store/action/layout'

const pageDataBase = {
  pageNum: 1,
  pageSize: 10
}

function A1banner() {
  const dispatch = useDispatch()

  const [pageData, setPageData] = useState(pageDataBase)

  const getListFu = useCallback(() => {
    // status: -1 全部 0 未发布 1 已发布
    dispatch(A1_APIgetList({ ...pageData, status: -1 }))
  }, [dispatch, pageData])

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

  // 点击重置
  const resetSelectFu = useCallback(() => {
    setPageData({ ...pageDataBase })
  }, [])

  const tableInfo = useSelector((state: RootState) => state.A1banner.tableInfo)

  const delTableFu = useCallback(
    async (id: number) => {
      const res = await A1_APIdel(id)
      if (res.code === 0) {
        MessageFu.success('删除成功!')
        getListFu()
      }
    },
    [getListFu]
  )

  const publishFu = useCallback(
    async (id: number) => {
      const res = await A1_APIpublish(id)
      if (res.code === 0) {
        MessageFu.success('发布成功!')
        getListFu()
      }
    },
    [getListFu]
  )

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: A1tbType) => (
          <>
            {item.status === 0 && (
              <Button
                size='small'
                type='text'
                onClick={() => {
                  dispatch(
                    editPreview({
                      isOpenPreview: true,
                      src: 'https://sit-kelamayi.4dage.com/mini/#/indexPage?preview=1'
                    })
                  )
                }}
              >
                预览
              </Button>
            )}
            <Button
              size='small'
              type='text'
              onClick={() => setEditInfo({ id: item.carouselId, txt: '编辑' })}
            >
              编辑
            </Button>
            {item.status === 0 && (
              <Button size='small' type='text' onClick={() => publishFu(item.carouselId)}>
                发布
              </Button>
            )}
            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.carouselId)} />
          </>
        )
      }
    ]
  }, [delTableFu, dispatch, publishFu])

  //新增、编辑
  const [editInfo, setEditInfo] = useState<A1EditInfoType>({
    id: 0,
    txt: ''
  })

  return (
    <>
      <div className={styles.A1banner}>
        <div className='pageTitle'>首页轮播图 {editInfo.id ? ` - ${editInfo.txt}` : ''}</div>

        {/* 顶部筛选 */}
        <div className='A1top'>
          <Button type='primary' onClick={() => setEditInfo({ id: -1, txt: '新增' })}>
            新增
          </Button>
        </div>

        {/* 表格主体 */}
        <div className='A1tableBox'>
          <MyTable
            myKey='carouselId'
            yHeight={625}
            list={tableInfo.list}
            columnsTemp={A1tableC}
            lastBtn={tableLastBtn}
            pageNum={pageData.pageNum}
            pageSize={pageData.pageSize}
            total={tableInfo.total}
            onChange={(pageNum, pageSize) => setPageData({ ...pageData, pageNum, pageSize })}
          />
        </div>

        {/* 新增 / 编辑 */}
        {editInfo.id ? (
          <A1add
            editInfo={editInfo}
            closeFu={() => setEditInfo({ id: 0, txt: '新增' })}
            addTableFu={resetSelectFu}
            editTableFu={getListFu}
          ></A1add>
        ) : null}
      </div>
    </>
  )
}

const MemoA1banner = React.memo(A1banner)

export default MemoA1banner