KLMYMuseum/src/pages/A7collection/index.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button, Input, Select } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { A1EditInfoType } from './data'
import { A7_APIdel, A7_APIgetList, A7_APIpublish } from '@/store/action/A7collection'
import { RootState } from '@/store'
import { MessageFu } from '@/utils/message'
import { A7tableType } from '@/types/api/A7collection'
import MyPopconfirm from '@/components/MyPopconfirm'
import MyTable from '@/components/MyTable'
import { A7tableC } from '@/utils/tableData'
import A7add from './A7add'
import { handleCopyClick } from '@/utils/copyTxt'
import { editPreview } from '@/store/action/layout'
import { baseURL } from '@/utils/http'

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

function A7collection() {
  const dispatch = useDispatch()

  const [pageData, setPageData] = useState(pageDataBase)
  const [title, setTitle] = useState('')
  const [type, setType] = useState(0)
  const getListFu = useCallback(
    (title?: string) => {
      // status: -1 全部 0 未发布 1 已发布
      dispatch(A7_APIgetList({ ...pageData, status: -1, title, type }))
    },
    [dispatch, pageData, type]
  )

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

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

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

  const delTableFu = useCallback(
    async (id: number) => {
      const res = await A7_APIdel(id)
      if (res.code === 0) {
        MessageFu.success('删除成功!')
        if (tableInfo.list.length === 1 && pageData.pageNum > 1) {
          setPageData({ ...pageData, pageNum: pageData.pageNum - 1 })
        }
        getListFu()
      }
    },
    [getListFu, pageData, tableInfo.list.length]
  )

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

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: A7tableType) => (
          <>
            <Button
              size='small'
              type='text'
              onClick={() =>
                handleCopyClick(
                  item.status === 1
                    ? `${baseURL}/mini/#/collectDetail?id=${item.artifactId}&isFrom=weixin`
                    : `${baseURL}/mini/#/collectDetail?id=${item.artifactId}&preview=1`
                )
              }
            >
              复制地址
            </Button>
            {item.status === 0 && (
              <Button
                size='small'
                type='text'
                onClick={() =>
                  dispatch(
                    editPreview({
                      isOpenPreview: true,
                      src: `/collectDetail?id=${item.artifactId}&preview=1`
                    })
                  )
                }
              >
                预览
              </Button>
            )}
            <Button
              size='small'
              type='text'
              onClick={() => setEditInfo({ id: item.artifactId, txt: '编辑' })}
            >
              编辑
            </Button>
            {item.status === 0 && (
              <Button size='small' type='text' onClick={() => publishFu(item.artifactId)}>
                发布
              </Button>
            )}
            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.artifactId)} />
          </>
        )
      }
    ]
  }, [delTableFu, dispatch, publishFu])

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

  return (
    <div className={styles.A7collection}>
      <div className='pageTitle'>克博典藏 {editInfo.id ? ` - ${editInfo.txt}` : ''}</div>

      {/* 顶部筛选 */}
      <div className='A7top'>
        <div className='A7topLeft'>
          <Input
            style={{ width: 200 }}
            placeholder='请输入标题'
            onChange={e => setTitle(e.target.value)}
            value={title}
          />
          <Button type='primary' onClick={() => getListFu(title)}>
            搜索
          </Button>
          <Button
            type='primary'
            onClick={() => {
              resetSelectFu()
              setTitle('')
            }}
          >
            重置
          </Button>
          <div className='rowItem'>
            类别：
            <Select
              style={{ width: 120 }}
              defaultValue={0}
              options={[
                { label: '全部', value: 0 },
                { label: '棉麻丝绸', value: 1 },
                { label: '铁器、其他金属器', value: 2 },
                { label: '文物、宣传品', value: 3 },
                { label: '其他', value: 4 }
              ]}
              onChange={value => setType(value)}
            />
          </div>
        </div>
        <Button type='primary' onClick={() => setEditInfo({ id: -1, txt: '新增' })}>
          新增
        </Button>
      </div>

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

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

const MemoA7collection = React.memo(A7collection)

export default MemoA7collection