feat: 事项组件增加预览

src/pages/Business/Matter/components/AddAssemblyModal.tsx

@@ -1,9 +1,11 @@
+import useModal from '@/components/Modal'
 import { updateAssembly } from '@/services/api/business'
 import consts from '@/utils/consts'
 import { CodepenSquareFilled, 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 ImageModal from './ImageModal'
 import './index.less'
 
 type AddAssemblyProps = {
@@ -14,6 +16,7 @@ type AddAssemblyProps = {
 }
 
 const AddAssemblyModal: React.FC<AddAssemblyProps> = ({ defaultData, close, refresh, refreshData }) => {
+  const [modal, ModalDOM] = useModal()
   const [assemblyList, setAssemblyList] = useState(defaultData?.assembly || [])
 
   const handleAssemblyOnchange = (checked: boolean, checkName: string) => {
@@ -36,6 +39,18 @@ const AddAssemblyModal: React.FC<AddAssemblyProps> = ({ defaultData, close, refr
     }
   }
 
+  const openModal = imageUrl => {
+    modal.open({
+      title: '预览',
+      okText: '确认',
+      cancelText: '取消',
+      width: 1000,
+      wrapClassName: 'modalTableBox',
+      children: <ImageModal imageUrl={imageUrl} close={() => modal.close()} />,
+      footer: null
+    })
+  }
+
   return (
     <div>
       <Row gutter={16} className="p-[24px]">
@@ -57,7 +72,7 @@ const AddAssemblyModal: React.FC<AddAssemblyProps> = ({ defaultData, close, refr
             <div className="min-h-70px">
               表单时用来提交资料、意见、规范流程、执行过程的格式，提供丰富的业务字段，快速定制业务表单。
             </div>
-            <Button>点击预览组件</Button>
+            <Button onClick={() => openModal(Assembly.FORM)}>点击预览组件</Button>
           </Card>
         </Col>
         <Col span={8}>
@@ -76,7 +91,7 @@ const AddAssemblyModal: React.FC<AddAssemblyProps> = ({ defaultData, close, refr
               />
             }>
             <div className="min-h-70px">自定义审核资料模板，承载业务审批过程中资料及附件业务。</div>
-            <Button>点击预览组件</Button>
+            <Button onClick={() => openModal(Assembly.COSTPROFILE)}>点击预览组件</Button>
           </Card>
         </Col>
         <Col span={8}>
@@ -97,7 +112,7 @@ const AddAssemblyModal: React.FC<AddAssemblyProps> = ({ defaultData, close, refr
             <div className="min-h-70px">
               提供全过程造价文件的体系架构关键数据汇总，实现全过程造价文件的标准化管理。
             </div>
-            <Button>点击预览组件</Button>
+            <Button onClick={() => openModal(Assembly.DATAPROFILE)}>点击预览组件</Button>
           </Card>
         </Col>
       </Row>
@@ -107,6 +122,7 @@ const AddAssemblyModal: React.FC<AddAssemblyProps> = ({ defaultData, close, refr
           确定
         </Button>
       </div>
+      {ModalDOM}
     </div>
   )
 }

src/pages/Business/Matter/components/ImageModal.tsx

@@ -0,0 +1,30 @@
+import { Image } from 'antd'
+// import { Assembly } from './AssemblyDetail'
+
+export enum Assembly {
+  FORM = 'form', // 表单
+  COSTPROFILE = 'costProfile', // 造价文件
+  DATAPROFILE = 'dataProfile' // 资料清单
+}
+
+export const ImageUrlMap = {
+  [Assembly.FORM]: {
+    url: 'https://wc-assets.oss-cn-guangzhou.aliyuncs.com/images/component-preview/matter_form.png'
+  },
+  [Assembly.COSTPROFILE]: {
+    url: 'https://wc-assets.oss-cn-guangzhou.aliyuncs.com/images/component-preview/matter_dataProfile.png'
+  },
+  [Assembly.DATAPROFILE]: {
+    url: 'https://wc-assets.oss-cn-guangzhou.aliyuncs.com/images/component-preview/matter_form.png'
+  }
+}
+
+const ImageModal = ({ imageUrl }) => {
+  return (
+    <div>
+      <Image width={1000} src={ImageUrlMap[imageUrl].url} />
+    </div>
+  )
+}
+
+export default ImageModal