评审提示调整

src/view/Manage/Model/Component/EditModel.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { Form, Button, Space, Tooltip, Modal, Select, Input } from 'antd';
 import LocalStorage from 'local-storage';
 import { useMount, useUnmount } from 'ahooks';
-import { LeftCircleFilled, RightCircleFilled, QuestionCircleFilled } from '@ant-design/icons';
+import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons';
 import copy from "copy-to-clipboard";  
 import ResizeObserver from 'rc-resize-observer';
 
@@ -19,6 +19,7 @@ import PermissionButton from '../../../../util/Component/PermissionButton';
 import RecatalogModal from './RecatalogModal';
 import ExportModel from './ExportOtherModal';
 import ExportDDLModel from './ExportDDLModal';
+import ApprovalTip from './approval-tip';
 
 import './EditModel.less';
 
@@ -771,7 +772,6 @@ export default EditModel;
 const PhysicalModelApprovalBottom = ({ loading, type, data, id, taskId, onChange, onOk, onHistory, onExport, onEdit }) => {
   const [item, setItem] = useState()
   const [waiting, setWaiting] = useState(false)
-  const [tip, setTip] = useState()
 
   useEffect(() => {
     if (data && id) {
@@ -782,12 +782,6 @@ const PhysicalModelApprovalBottom = ({ loading, type, data, id, taskId, onChange
     }
   }, [data, id])
 
-  useEffect(() => {
-    if (type) {
-      getTip()
-    }
-  }, [type])
-
   const [index, canPrev, canNext] = useMemo(() => {
     if (data && id) {
       const index = (data?.modelInfoList??[]).findIndex(item => item.id === id)
@@ -799,18 +793,6 @@ const PhysicalModelApprovalBottom = ({ loading, type, data, id, taskId, onChange
     return [0, false, false]
   }, [data, id])
 
-  const getTip = () => {
-    dispatch({
-      type: 'datamodel.getPhysicalModelApprovalTip',
-      payload: {
-        type
-      },
-      callback: data => {
-        setTip(data?.tip)
-      }
-    })
-  }
-
   const onExportClick = () => {
     onExport?.()
   }
@@ -877,15 +859,7 @@ const PhysicalModelApprovalBottom = ({ loading, type, data, id, taskId, onChange
         <Button type='primary' onClick={onEditClick}>编辑</Button>
       </Space>
       <Space>
-        {
-          tip && <Tooltip title={
-            <div>
-            {(tip??'').split('\n').map((item, index) => (<div key={index}>{item}</div>))}
-            </div>}
-          >
-            <QuestionCircleFilled style={{ fontSize: 18, color: '#3B80D6' }} />
-          </Tooltip>
-        }
+        <ApprovalTip type={type} />
         <Tooltip title={((type==='rule')&&!item?.designReviewPass) ? '设计评审不通过' : ''}>
           <Select 
             value={(type==='design')?item?.designReviewPass:item?.standardReviewPass}

src/view/Manage/Model/Component/approval-tip.jsx

+import React from "react"
+import { Modal, Button } from 'antd'
+import Draggable from 'react-draggable'
+import { QuestionCircleFilled } from '@ant-design/icons'
+
+import { dispatch } from '../../../../model'
+
+const FC = (props) => {
+  const { type } = props
+  const [tip, setTip] = React.useState()
+  const [visible, setVisible] = React.useState(false)
+  const [disabled, setDisabled] = React.useState(true)
+  const [bounds, setBounds] = React.useState({ left: 0, top: 0, bottom: 0, right: 0 })
+  const draggleRef = React.useRef()
+
+  React.useEffect(() => {
+    getTip()
+  }, [])
+
+  const title = React.useMemo(() => {
+    return type==='design' ? '设计评审提示' : '规范评审提示'
+  }, [type])
+
+  const getTip = () => {
+    dispatch({
+      type: 'datamodel.getPhysicalModelApprovalTip',
+      payload: {
+        type
+      },
+      callback: data => {
+        setTip(data?.tip)
+      }
+    })
+  }
+
+  const handleCancel = (e) => {
+    setVisible(false)
+  }
+
+  const onStart = (_event, uiData) => {
+    const { clientWidth, clientHeight } = window.document.documentElement;
+    const targetRect = draggleRef.current?.getBoundingClientRect();
+    if (!targetRect) {
+      return;
+    }
+    setBounds({
+      left: -targetRect.left + uiData.x,
+      right: clientWidth - (targetRect.right - uiData.x),
+      top: -targetRect.top + uiData.y,
+      bottom: clientHeight - (targetRect.bottom - uiData.y),
+    });
+  }
+
+  return (
+    <>
+      {
+        tip && <Button icon={<QuestionCircleFilled style={{ fontSize: 18, color: '#3B80D6' }} />} onClick={() => {
+          setVisible(true)
+        }} />
+      }
+      <Modal
+        title={
+          <div
+            style={{
+              width: '100%',
+              cursor: 'move',
+            }}
+            onMouseOver={() => {
+              if (disabled) {
+                setDisabled(false);
+              }
+            }}
+            onMouseOut={() => {
+              setDisabled(true);
+            }}
+            // fix eslintjsx-a11y/mouse-events-have-key-events
+            // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
+            onFocus={() => {}}
+            onBlur={() => {}}
+            // end
+          >
+            { title }
+          </div>
+        }
+        visible={visible}
+        onCancel={handleCancel}
+        footer={null}
+        bodyStyle={{ padding: '15px', overflowX: 'auto', maxHeight: '80vh' }}
+        modalRender={modal => (
+          <Draggable
+            disabled={disabled}
+            bounds={bounds}
+            onStart={(event, uiData) => onStart(event, uiData)}
+          >
+            <div ref={draggleRef}>{modal}</div>
+          </Draggable>
+        )}
+      >
+        <div>
+        { (tip??'').split('\n').map((item, index) => (<div key={index}>{item}</div>)) }
+        </div>
+      </Modal>
+    </>    
+  )
+}
+
+export default FC
\ No newline at end of file