jiNing_goods/后台管理/src/pages/D2approval/D2edit/index.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { D2_APIgetInfo, D2_APIgetProDel, D2_APIsave } from '@/store/action/D2approval'
import { D2editTableType, D2editType } from '../data'
import { Button, Radio } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import MyTable from '@/components/MyTable'
import { D2tableC2 } from '@/utils/tableData'
import { MessageFu } from '@/utils/message'
import MyPopconfirm from '@/components/MyPopconfirm'
import D2lookPro from './D2lookPro'
import D2addPro from './D2addPro'

type Props = {
  sId: number
  closeFu: () => void
  upTableFu: () => void
}

function D2edit({ sId, closeFu, upTableFu }: Props) {
  const [info, setInfo] = useState({} as D2editType)

  const getInfoFu = useCallback(async () => {
    const res = await D2_APIgetInfo(sId)
    if (res.code === 0) {
      const data: D2editTableType[] = res.data.process || []
      setInfo({
        ...res.data,
        process: data.map((v, i) => ({
          ...v,
          sort: v.isUse === 0 ? '/' : v.sort,
          type: v.isUse === 0 ? '/' : v.type
        }))
      })
    }
  }, [sId])

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

  // 点击删除
  const delTableFu = useCallback(
    async (id: number) => {
      const res: any = await D2_APIgetProDel(id)
      if (res.code === 0) {
        MessageFu.success('删除成功!')
        getInfoFu()
      }
    },
    [getInfoFu]
  )

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: D2editTableType) => {
          return item.isUse === 0 ? (
            '/'
          ) : (
            <>
              <Button size='small' type='text' onClick={() => setLookId(item.id)}>
                查看办理人
              </Button>
              <Button size='small' type='text' onClick={() => setProId(item.id)}>
                编辑
              </Button>
              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
            </>
          )
        }
      }
    ]
  }, [delTableFu])

  // 环节的新增和编辑
  const [proId, setProId] = useState(0)

  // 查看办理人
  const [lookId, setLookId] = useState(0)

  // 点击保存
  const btnOk = useCallback(async () => {
    const res = await D2_APIsave({
      id: info.id,
      enabled: info.enabled,
      remark: info.remark
    })
    if (res.code === 0) {
      MessageFu.warning('编辑成功')
      upTableFu()
      closeFu()
    }
  }, [info, closeFu, upTableFu])

  return (
    <div className={styles.D2edit}>
      <div className='D2eRow'>
        <div>流程名称：</div>
        <div>{info.name}</div>
      </div>

      <div className='D2eRow'>
        <div>
          <span>* </span>流程状态：
        </div>
        <div>
          <Radio.Group
            value={info.enabled}
            onChange={e => setInfo({ ...info, enabled: e.target.value })}
            options={[
              { value: 1, label: '启用' },
              { value: 0, label: '禁用' }
            ]}
          />
        </div>
      </div>

      <div className='D2eRow'>
        <div>流程说明：</div>
        <div>
          <TextArea
            style={{ width: '90%' }}
            placeholder='请输入'
            maxLength={500}
            showCount
            value={info.remark}
            onChange={e => setInfo({ ...info, remark: e.target.value })}
          />
        </div>

        <div className='D2eBtn'>
          <Button type='primary' onClick={btnOk}>
            保存
          </Button>
          <br />
          <br />
          <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        </div>
      </div>
      <div className='D2eRow'>
        <div className='D2tablell'>审批环节：</div>
        <div>
          <Button type='primary' onClick={() => setProId(-1)}>
            新增
          </Button>
          <div className='D2table'>
            <MyTable
              classKey='D2editTable'
              yHeight={492}
              list={info.process || []}
              columnsTemp={D2tableC2}
              lastBtn={tableLastBtn}
              pagingInfo={false}
            />
          </div>
        </div>
      </div>

      {proId ? (
        <D2addPro flowId={sId} sId={proId} closeFu={() => setProId(0)} succFu={getInfoFu} />
      ) : null}

      {lookId ? <D2lookPro sId={lookId} closeFu={() => setLookId(0)} /> : null}
    </div>
  )
}

const MemoD2edit = React.memo(D2edit)

export default MemoD2edit