jiNing_goods/后台管理/src/pages/A0goodsInfo/index.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import { API_getGoodsInfo } from '@/store/action/B1ledger'
import { B1listType } from '../B1ledger/data'
import classNames from 'classnames'
import { Button, Dropdown, MenuProps } from 'antd'
import Tab1info from './Tab1info'
import Tab2log from './Tab2log'
import Tab3stock from './Tab3stock'
import { MessageFu } from '@/utils/message'
import A0addGoods from '../A0addGoods'
import history from '@/utils/history'
import { B4_APIcreate } from '@/store/action/B4delete'
const topBtnArr = ['藏品信息', '编辑记录', '库存状态']

function A0goodsInfo() {
  const { id } = useParams<any>()

  const getInfoFu = useCallback(async () => {
    const res = await API_getGoodsInfo(id)
    if (res.code === 0) {
      setGoodsInfo(res.data)
    }
  }, [id])

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

  // 所有藏品信息
  const [goodsInfo, setGoodsInfo] = useState({} as B1listType)

  // tab切换
  const [btnAc, setBtnAc] = useState('藏品信息')

  // 点击藏品编辑（修改）
  const [isEdit, setIsEdit] = useState(false)

  const items1 = useMemo(() => {
    let arr: MenuProps['items'] = [
      {
        key: '1',
        label: (
          <span
            className='AIdroRow'
            onClick={() => {
              if (goodsInfo.status === 2) MessageFu.warning('该藏品修改审核中，无法重复修改')
              else setIsEdit(true)
            }}
          >
            修改
          </span>
        )
      },
      {
        key: '2',
        label: (
          <span
            className='AIdroRow'
            style={{ color: '#ff4d4d' }}
            onClick={async () => {
              if (goodsInfo.status === 3) MessageFu.warning('该藏品删除审核中，无法重复删除')
              else if (goodsInfo.status === 2) MessageFu.warning('该藏品修改审核中，无法删除')
              else {
                // 创建订单
                const res = await B4_APIcreate(goodsInfo)
                if (res.code === 0) {
                  history.push(`/delete_look/1/${res.data.id}`)
                }
              }
            }}
          >
            删除
          </span>
        )
      }
    ]

    return arr
  }, [goodsInfo])

  const items2 = useMemo(() => {
    let arr: MenuProps['items'] = [
      {
        key: '1',
        label: <span className='AIdroRow'>入库</span>
      },
      {
        key: '2',
        label: <span className='AIdroRow'>移库</span>
      },
      {
        key: '3',
        label: <span className='AIdroRow'>出库</span>
      }
    ]

    return arr
  }, [])

  return (
    <div className={styles.A0goodsInfo}>
      <div className='pageTitle'>藏品详情</div>

      <div className='AItop'>
        <div className='AItop1'>
          {topBtnArr.map(v => (
            <div
              key={v}
              className={classNames('AItop1Row', btnAc === v ? 'AItop1RowAc' : '')}
              onClick={() => setBtnAc(v)}
            >
              {v}
            </div>
          ))}
        </div>

        <div className='AItop2'>
          <Dropdown menu={{ items: items1 }} placement='bottom' arrow>
            <Button type='primary'>档案管理</Button>
          </Dropdown>
          &emsp;
          <Dropdown menu={{ items: items2 }} placement='bottom' arrow>
            <Button type='primary'>库房管理</Button>
          </Dropdown>
        </div>
      </div>

      {goodsInfo.id ? (
        <div className='AImain'>
          {btnAc === '藏品信息' ? <Tab1info info={goodsInfo} /> : null}
          {btnAc === '编辑记录' ? <Tab2log sId={goodsInfo.id} /> : null}
          {btnAc === '库存状态' ? <Tab3stock /> : null}
        </div>
      ) : null}

      {/* 点击藏品修改 */}
      {isEdit && goodsInfo.id ? (
        <A0addGoods sId={goodsInfo.id} closeFu={() => setIsEdit(false)} isEdit={true} />
      ) : null}
    </div>
  )
}

const MemoA0goodsInfo = React.memo(A0goodsInfo)

export default MemoA0goodsInfo