jiNing_goods/后台管理/src/pages/B4delete/B4look/index.tsx

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import { B1listType } from '@/pages/B1ledger/data'
import { B4_APIaduit, B4_APIgetInfo } from '@/store/action/B4delete'
import { API_getFileListByIds } from '@/store/action/B1ledger'
import { MessageFu } from '@/utils/message'
import history, { backPageFu } from '@/utils/history'
import { Button } from 'antd'
import { statusSelect } from '@/utils/select'
import TextArea from 'antd/es/input/TextArea'
import Tab1info from '@/pages/A0goodsInfo/Tab1info'
import MyTable from '@/components/MyTable'
import { auditTableC } from '@/utils/tableData'
function B4look() {
  const { key, id } = useParams<any>()

  // 订单相关信息
  const [info, setInfo] = useState({} as B1listType)

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

  const getInfoFu = useCallback(async (id: number) => {
    const res = await B4_APIgetInfo(id)
    if (res.code === 0) {
      setInfo(res.data)

      const goodsArr = res.data.snaps

      if (goodsArr && goodsArr[0] && goodsArr[0].snap) {
        const objStr = goodsArr[0].snap
        try {
          const obj: B1listType = JSON.parse(objStr)
          if (obj.fileIds) {
            const fileArr = obj.fileIds.split(',').map(v => Number(v))

            const res2 = await API_getFileListByIds(fileArr)

            if (res2.code === 0) {
              obj.file = res2.data
              setGoodsInfo(obj)
            }
          } else setGoodsInfo(obj)
        } catch (error) {
          MessageFu.warning('JSON数据错误')
        }
      }
    }
  }, [])

  useEffect(() => {
    if (id) getInfoFu(id)
  }, [getInfoFu, id, key])

  // 审批的sta
  const [auditSta, setAuDitSta] = useState('')
  const [rtfOpinion, setRtfOpinion] = useState('')

  const boxRef = useRef<HTMLDivElement>(null)

  // 点击提交
  const btnOk = useCallback(async () => {
    if (!auditSta) {
      MessageFu.warning('请选择审批结果')
      boxRef.current?.scrollTo({ top: 0, behavior: 'smooth' })
      return
    }

    const res = await B4_APIaduit({
      orderId: id,
      rtfOpinion,
      status: auditSta === '同意' ? 1 : 2
    })

    if (res.code === 0) {
      MessageFu.success('审批成功')
      history.replace(`/delete_look/1/${id}`)
    }
  }, [auditSta, id, rtfOpinion])

  return (
    <div className={styles.B4look}>
      <div className='pageTitle'>藏品删除 - {key === '1' ? '查看' : '审批'}</div>

      {info.id ? (
        <>
          <div className='B4lTop'>
            <div className='B4lTopll'>
              <div className='B4lTit'>申请信息</div>
              <div className='B4lTopllBtn'>
                <Button type='dashed'>
                  {statusSelect.find(v => v.value === info.status)?.label}
                </Button>
              </div>
            </div>
            <div className='B4lToprr'>
              {key === '2' ? (
                <>
                  <Button type='primary' onClick={btnOk}>
                    提交
                  </Button>
                  &emsp;
                </>
              ) : null}
              <Button onClick={() => backPageFu('/register')}>返回</Button>
            </div>
          </div>

          <div className='B4lTxt'>
            <div className='B4lTrow'>
              <div className='B4lTrow1'>订单编号：</div>
              <div className='B4lTrow2'>{info.num}</div>
            </div>
            <div className='B4lTrow'>
              <div className='B4lTrow1'>订单名称：</div>
              <div className='B4lTrow2'>藏品删除</div>
            </div>
            <div className='B4lTrow'>
              <div className='B4lTrow1'>发起人：</div>
              <div className='B4lTrow2'>{info.creatorName + ' - ' + info.createTime}</div>
            </div>

            {/* 审批相关 */}
            {key === '2' ? (
              <>
                <div className='B4lTrow B4lTrowAll'>
                  <div className='B4lTrow1'>
                    <span>* </span>审批结果：
                  </div>
                  <div className='B4lTrow2'>
                    {['同意', '不同意'].map(v => (
                      <Button
                        key={v}
                        onClick={() => setAuDitSta(v)}
                        type={auditSta === v ? 'primary' : 'default'}
                      >
                        {v}
                      </Button>
                    ))}
                  </div>
                </div>
                <div className='B4lTrow B4lTrowAll' style={{ marginBottom: 25 }}>
                  <div className='B4lTrow1'>审批意见：</div>
                  <div className='B4lTrow2'>
                    <TextArea
                      value={rtfOpinion}
                      onChange={e => setRtfOpinion(e.target.value)}
                      placeholder='请输入内容'
                      maxLength={200}
                      showCount
                    />
                  </div>
                </div>
              </>
            ) : null}
          </div>

          <div className='B4lTit'>藏品详情</div>

          <div className='B4lGood'>
            <Tab1info info={goodsInfo} auto />
          </div>

          <div className='B4lTit'>申请流程</div>

          <MyTable
            list={info.audits || []}
            columnsTemp={auditTableC}
            pagingInfo={false}
            widthSet={{ rtfOpinion: 600 }}
          />
        </>
      ) : null}
    </div>
  )
}

const MemoB4look = React.memo(B4look)

export default MemoB4look