financial_audit_console/src/pages/Business/Matter/components/AddAssembly.tsx

import useModal from '@/components/Modal'
import { updateAssembly } from '@/services/api/business'
import consts from '@/utils/consts'
import {
  CodepenSquareFilled,
  ContainerFilled,
  DollarCircleFilled,
  FolderFilled,
  ProfileFilled,
  SlackSquareFilled
} from '@ant-design/icons'
import { Button, Card, Checkbox, Col, message, Row } from 'antd'
import React, { useState } from 'react'
import { Assembly } from './AssemblyDetail'
import Picture from './Picture'
import { EmitterType } from '@/enums/emit'
import classNames from 'classnames'

type AddAssemblyProps = {
  defaultData: API.MatterTreeItem
  close: () => void
  event$: EmitterType<void>
}

const AddAssembly: React.FC<AddAssemblyProps> = ({ defaultData, close, event$ }) => {
  const [modal, ModalDOM] = useModal()
  const [assemblyList, setAssemblyList] = useState(defaultData?.assembly || [])

  const handleAssemblyOnchange = (checked: boolean, checkName: string) => {
    let newAssemblyList
    if (checked) {
      newAssemblyList = [...assemblyList, checkName]
    } else {
      newAssemblyList = assemblyList.filter(item => item !== checkName)
    }
    setAssemblyList(newAssemblyList)
  }

  const onOk = async () => {
    const ID = defaultData?.ID
    const { code = -1 } = await updateAssembly({ ID: defaultData?.ID, assembly: assemblyList })
    if (code === consts.RET_CODE.SUCCESS) {
      message.success('添加成功')
      close()
      event$.emit(EmitterType.BUSINESS_MATTER_REFRESH)
      event$.emit(EmitterType.MATTER_DETAIL_REFRESH, { ID })
    }
  }

  const openModal = (type: Assembly) => {
    modal.open({
      title: '预览',
      okText: '确认',
      cancelText: '取消',
      width: 1000,
      wrapClassName: 'modalTableBox',
      children: <Picture type={type} close={() => modal.close()} />,
      footer: null
    })
  }

  return (
    <div>
      <Row gutter={[16, 16]} className="p-24px">
        <Col span={8}>
          <Card
            size="small"
            className={classNames({ 'border border-hex-40a9ff': assemblyList.includes(Assembly.FORM) })}
            title={
              <div className="flex mt-1">
                <span>
                  <ProfileFilled className="mr-1" style={{ fontSize: '20px', color: '#40A9FF' }} />
                </span>
                <span>表单</span>
              </div>
            }
            extra={
              <Checkbox
                onChange={e => handleAssemblyOnchange(e.target.checked, Assembly.FORM)}
                checked={assemblyList.includes(Assembly.FORM)}
              />
            }>
            <div className="min-h-70px">
              表单时用来提交资料、意见、规范流程、执行过程的格式，提供丰富的业务字段，快速定制业务表单。
            </div>
            <Button onClick={() => openModal(Assembly.FORM)}>点击预览组件</Button>
          </Card>
        </Col>
        <Col span={8}>
          <Card
            size="small"
            className={classNames({
              'border border-hex-40a9ff': assemblyList.includes(Assembly.COSTPROFILE)
            })}
            title={
              <div className="flex mt-1">
                <span>
                  <SlackSquareFilled className="mr-1" style={{ fontSize: '20px', color: '#52C41A' }} />
                </span>
                <span>送审资料清单</span>
              </div>
            }
            extra={
              <Checkbox
                onChange={e => handleAssemblyOnchange(e.target.checked, Assembly.COSTPROFILE)}
                checked={assemblyList.includes(Assembly.COSTPROFILE)}
              />
            }>
            <div className="min-h-70px">自定义审核资料模板，承载业务审批过程中资料及附件业务。</div>
            <Button onClick={() => openModal(Assembly.COSTPROFILE)}>点击预览组件</Button>
          </Card>
        </Col>
        <Col span={8}>
          <Card
            size="small"
            className={classNames({
              'border border-hex-40a9ff': assemblyList.includes(Assembly.DATAPROFILE)
            })}
            title={
              <div className="flex mt-1">
                <span>
                  <CodepenSquareFilled className="mr-1" style={{ fontSize: '20px', color: '#722ED1' }} />
                </span>
                <span>造价文件</span>
              </div>
            }
            extra={
              <Checkbox
                onChange={e => handleAssemblyOnchange(e.target.checked, Assembly.DATAPROFILE)}
                checked={assemblyList.includes(Assembly.DATAPROFILE)}
              />
            }>
            <div className="min-h-70px">
              提供全过程造价文件的体系架构关键数据汇总，实现全过程造价文件的标准化管理。
            </div>
            <Button onClick={() => openModal(Assembly.DATAPROFILE)}>点击预览组件</Button>
          </Card>
        </Col>
        <Col span={8}>
          <Card
            size="small"
            className={classNames({
              'border border-hex-40a9ff': assemblyList.includes(Assembly.ACHIEVEMENT)
            })}
            title={
              <div className="flex mt-1">
                <span>
                  <FolderFilled className="mr-1" style={{ fontSize: '20px', color: '#FA8C16' }} />
                </span>
                <span>其他成果文件</span>
              </div>
            }
            extra={
              <Checkbox
                disabled
                onChange={e => handleAssemblyOnchange(e.target.checked, Assembly.ACHIEVEMENT)}
                checked={assemblyList.includes(Assembly.ACHIEVEMENT)}
              />
            }>
            <div className="min-h-70px">功能开发中...</div>
            <Button onClick={() => openModal(Assembly.ACHIEVEMENT)}>点击预览组件</Button>
          </Card>
        </Col>
        <Col span={8}>
          <Card
            size="small"
            className={classNames({ 'border border-hex-40a9ff': assemblyList.includes(Assembly.COST) })}
            title={
              <div className="flex mt-1">
                <span>
                  <DollarCircleFilled className="mr-1" style={{ fontSize: '20px', color: '#FAAD14' }} />
                </span>
                <span>审核金额汇总</span>
              </div>
            }
            extra={
              <Checkbox
                disabled
                onChange={e => handleAssemblyOnchange(e.target.checked, Assembly.COST)}
                checked={assemblyList.includes(Assembly.COST)}
              />
            }>
            <div className="min-h-70px">功能开发中...</div>
            <Button onClick={() => openModal(Assembly.COST)}>点击预览组件</Button>
          </Card>
        </Col>
        <Col span={8}>
          <Card
            size="small"
            className={classNames({ 'border border-hex-40a9ff': assemblyList.includes(Assembly.FILE) })}
            title={
              <div className="flex mt-1">
                <span>
                  <ContainerFilled className="mr-1" style={{ fontSize: '20px', color: '#13C2C2' }} />
                </span>
                <span>工程预算审核管理档案目录</span>
              </div>
            }
            extra={
              <Checkbox
                disabled
                onChange={e => handleAssemblyOnchange(e.target.checked, Assembly.FILE)}
                checked={assemblyList.includes(Assembly.FILE)}
              />
            }>
            <div className="min-h-70px">功能开发中...</div>
            <Button onClick={() => openModal(Assembly.FILE)}>点击预览组件</Button>
          </Card>
        </Col>
      </Row>
      <div className="ant-modal-footer mt-4">
        <Button onClick={close}>取消</Button>
        <Button type="primary" onClick={onOk}>
          确定
        </Button>
      </div>
      {ModalDOM}
    </div>
  )
}

export default AddAssembly