YW_Goods/src/pages/Y_goodsDetails/Y2look/index.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import { Y1tabArr, Y1TabArrType } from '../Y1cathet/Y1main'
import classNames from 'classnames'
import { Button, Dropdown, MenuProps } from 'antd'
import Y11com from '../Y1cathet/Y11com'
import Y22com from '../Y1cathet/Y22com'
import Y33com from '../Y1cathet/Y33com'
import Y44com from '../Y1cathet/Y44com'
import { C1GoodType } from '@/pages/A3_ledger/C1ledger/type'
import { API_goodsInfo } from '@/store/action/C1ledger'
import { EXPORT_WORD_ENUM, exportWordHandler } from '@/utils/exportWordTemplates'
import { API_goodFileList } from '@/store/action/C2files'
import { C3_APIfocus, C3_APIfocusNo } from '@/store/action/C3focus'
import { MessageFu } from '@/utils/message'
import C22revamp from '@/pages/C_goodsManage/C22goodEdit/C22revamp'
import history from '@/utils/history'
import { statusStorageObj } from '@/utils/tableData'

function Y2look() {
  const { id: sId } = useParams<any>()

  const [info, setInfo] = useState({} as C1GoodType)

  const getInfoFu = useCallback(async (id: number) => {
    const res = await API_goodsInfo(id)
    if (res.code === 0) {
      setInfo(res.data)
    }
  }, [])

  const handleExport = async () => {
    const res = await API_goodFileList(sId)
    exportWordHandler(EXPORT_WORD_ENUM.COLLECTION_CARD, {
      ...info,
      imagePages: [
        {
          thumb: info.thumb
        },
        ...res.data.filter((i: any) => i.type === 'img')
      ]
    })
  }

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

  const [tabAc, setTabAc] = useState<Y1TabArrType>('藏品信息')

  const items1 = useMemo(() => {
    let arr: MenuProps['items'] = [
      {
        key: '1',
        label: (
          <span
            className='Y2xia'
            onClick={() => {
              if (info.isEdit === 1) MessageFu.warning('该藏品修改审核中，无法重复修改')
              else setIsEdit(true)
            }}
          >
            编辑
          </span>
        )
      },
      {
        key: '2',
        label: (
          <span
            style={{ color: '#ff4d4d' }}
            className='Y2xia'
            onClick={() => {
              if (info.statusStorage === 6) {
                MessageFu.warning('该藏品注销审核中，无法重复注销')
              } else if (info.statusStorage === 7) {
                MessageFu.warning('该藏品已注销')
              } else history.push(`/cancel_edit/1/null?id=${sId}`)
            }}
          >
            注销
          </span>
        )
      }
    ]

    return arr
  }, [info.isEdit, info.statusStorage, sId])

  const items2 = useMemo(() => {
    let arr: MenuProps['items'] = [
      {
        key: '1',
        label: (
          <span
            className='Y2xia'
            onClick={() => {
              if (!info.statusStorage || info.statusStorage === 4) {
                history.push(`/impStor_edit/1/null?id=${sId}`)
              } else {
                const txt = statusStorageObj[info.statusStorage]
                MessageFu.warning(`该藏品${txt}，无法入库`)
              }
            }}
          >
            入库
          </span>
        )
      },
      {
        key: '2',
        label: (
          <span
            className='Y2xia'
            onClick={() => {
              let txt = statusStorageObj[info.statusStorage] || ''
              const txtRes = txt ? `该藏品${txt}，` : ''
              if (info.statusStorage === 2) history.push(`/moveStor_edit/1/null?id=${sId}`)
              else MessageFu.warning(txtRes + `只有已入库的藏品才能移库`)
            }}
          >
            移库
          </span>
        )
      },
      {
        key: '3',
        label: (
          <span
            className='Y2xia'
            onClick={() => {
              let txt = statusStorageObj[info.statusStorage] || ''
              const txtRes = txt ? `该藏品${txt}，` : ''
              if (info.statusStorage === 2) history.push(`/putsStor_edit/1/null?id=${sId}`)
              else MessageFu.warning(txtRes + `只有已入库的藏品才能出库`)
            }}
          >
            出库
          </span>
        )
      }
    ]
    return arr
  }, [info.statusStorage, sId])

  const items3 = useMemo(() => {
    let arr: MenuProps['items'] = [
      {
        key: '1',
        label: (
          <span className='Y2xia' onClick={() => history.push(`/accident_edit/1/null?id=${sId}`)}>
            事故登记
          </span>
        )
      },

      {
        key: '3',
        label: (
          <span className='Y2xia' onClick={() => history.push(`/actuality_edit/1/null?id=${sId}`)}>
            现状登记
          </span>
        )
      },
      {
        key: '4',
        label: (
          <span className='Y2xia' onClick={() => history.push(`/repair_edit/1/null?id=${sId}`)}>
            文物修复
          </span>
        )
      }
    ]
    return arr
  }, [sId])

  // 点击关注
  const focusFu = useCallback(
    async (val: '关注' | '取消关注') => {
      const res = val === '关注' ? await C3_APIfocus(sId) : await C3_APIfocusNo(sId)

      if (res.code === 0) {
        MessageFu.success(val + '成功!')
        getInfoFu(sId)
      }
    },
    [getInfoFu, sId]
  )

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

  return (
    <div className={styles.Y2look}>
      <div className='pageTitle'>藏品详情</div>
      <div className='Y2top'>
        <div className='Y2topll'>
          {Y1tabArr.map(v => (
            <div
              key={v}
              className={classNames('Y1tRow', tabAc === v ? 'Y1tRowAc' : '')}
              onClick={() => setTabAc(v)}
            >
              {v}
            </div>
          ))}
        </div>
        <div className='Y2toprr'>
          {info.display === 1 ? (
            <>
              <Button
                type='primary'
                danger={info.isFocus === 1}
                onClick={() => focusFu(info.isFocus === 1 ? '取消关注' : '关注')}
              >
                {info.isFocus === 1 ? '取消' : ''}关注
              </Button>
              &emsp;
            </>
          ) : null}

          {info.display === 1 ? (
            <>
              <Button type='primary' onClick={handleExport}>
                导出藏品档案
              </Button>
              &emsp;
              <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>
              &emsp;
              <Dropdown menu={{ items: items3 }} placement='bottom' arrow>
                <Button type='primary'>保管管理</Button>
              </Dropdown>
              &emsp;
            </>
          ) : null}

          {/* <Button onClick={() => history.go(-1)}>返回</Button> */}
        </div>
      </div>

      {info.id ? (
        <div className='Y2info'>
          {tabAc === '藏品信息' ? <Y11com info={info} /> : null}
          {tabAc === '库存信息' ? <Y22com info={info} /> : null}
          {tabAc === '藏品附件' ? <Y33com sId={sId} isLook={true} /> : null}
          {tabAc === '藏品日志' ? <Y44com sId={sId} isLook={true} /> : null}
        </div>
      ) : null}

      {isEdit ? (
        <div className='C22revampBox'>
          <C22revamp goodsId={sId} closeFu={() => setIsEdit(false)} type='新增' />
        </div>
      ) : null}
    </div>
  )
}

const MemoY2look = React.memo(Y2look)

export default MemoY2look