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 MyPopconfirm from '@/components/MyPopconfirm'
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'

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={() => setIsEdit(true)}>
            编辑
          </span>
        )
      },
      {
        key: '2',
        label: (
          <MyPopconfirm
            txtK='删除'
            onConfirm={() => {}}
            Dom={<span className='Y2xia'>删除</span>}
          />
        )
      }
    ]
    return arr
  }, [])

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

  const items3 = useMemo(() => {
    let arr: MenuProps['items'] = [
      {
        key: '1',
        label: <span className='Y2xia'>事故登记</span>
      },
      {
        key: '2',
        label: <span className='Y2xia'>残损登记</span>
      },
      {
        key: '3',
        label: <span className='Y2xia'>现状登记</span>
      },
      {
        key: '4',
        label: <span className='Y2xia'>文物修复</span>
      }
    ]
    return arr
  }, [])

  // 点击关注
  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} isLook={true} /> : 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