fix: 对话框统一调整为可拖拽

package.json

 {
     "name": "panda-xform",
-    "version": "2.0.6",
-    "description": "2.0.6: 手动处理未分组情况",
+    "version": "2.0.7",
+    "description": "2.0.7: 对话框统一调整为可拖拽",
     "keywords": [
         "panda-xform"
     ],

src/core/FormDesigner/index.js

@@ -7,6 +7,7 @@ import widgets from '../widgets'
 import { saveTableConfig, GetTableConfigJson } from '../../apis/process'
 import FormRender from '../FormRender'
 import { isObject } from '../../utils'
+import Drag from '../components/Drag'
 
 export const GlobalStore = createContext(null)
 
@@ -203,7 +204,7 @@ const FormDesigner = (props, ref) => {
           globalSettings={globalSettings}
           onSchemaChange={onSchemaChange}
         />
-        <Modal
+        <Drag
           title={tableName}
           width='80%'
           bodyStyle={{ height: '700px', overflow: 'auto' }}
@@ -220,7 +221,7 @@ const FormDesigner = (props, ref) => {
           }
         >
           <FormRender ref={formRenderRef} schema={schema} />
-        </Modal>
+        </Drag>
       </div>
     </div>
   )

src/core/FormRender/watch.js

@@ -111,7 +111,6 @@ const setValue = debounce(automaticComputation)
 export const getWatch = (schema, form) => {
   let watch = {}
   let { rules, calculateRule, filedName } = getRules(schema)
-  console.log('getRules', getRules(schema))
   let paths = []
   if (Array.isArray(rules)) {
     let item = rules.find(v => v.tableName === schema.tableName)

src/core/components/Drag/index.js

+import React, { useState } from 'react'
+import { Modal } from 'antd'
+
+const Drag = (props) => {
+
+  const [style, setStyle] = useState({ left: 0, top: 100 })
+
+  const inWindow = (left, top, startPosX, startPosY) => {
+    const H = document.body.clientHeight;
+    const W = document.body.clientWidth;
+    if (
+      (left < 20 && startPosX > left) ||
+      (left > W - 20 && startPosX < left) ||
+      (top < 20 && startPosY > top) ||
+      (top > H - 20 && startPosY < top)
+    ) {
+      document.body.onmousemove = null;
+      document.body.onmouseup = null;
+      return false;
+    }
+    return true;
+  }
+
+  const onMouseDown = (e) => {
+    const startPosX = e.clientX;
+    const startPosY = e.clientY;
+    document.body.onmousemove = (e) => {
+      const left = e.clientX - startPosX + style.left;
+      const top = e.clientY - startPosY + style.top;
+      if (inWindow(e.clientX, e.clientY, startPosX, startPosY)) {
+        setStyle({ left, top })
+      }
+    }; // 鼠标放开时去掉移动事件
+    document.body.onmouseup = function () {
+      document.body.onmousemove = null;
+    }
+  }
+
+  return (
+    <Modal
+      getContainer={false}
+      {...props}
+      style={style}
+      title={
+        <div style={{ width: '100%', cursor: 'move' }} onMouseDown={onMouseDown}>
+          {props.title}
+        </div>
+      }
+    >
+      {
+        props.children
+      }
+    </Modal>
+  )
+
+}
+
+export default Drag
\ No newline at end of file

src/core/widgets/advanced/RelationForm/index.js

-import React, { useEffect, useMemo, useState, useRef, useLayoutEffect, useContext, createContext } from 'react'
+import React, { useMemo, useState, useRef, useLayoutEffect } from 'react'
 import styles from './index.less'
 import {
   GetAccountPageList,
@@ -14,6 +14,7 @@ import { SnippetsOutlined, PlusOutlined, FormOutlined, DeleteOutlined } from '@a
 import { GetTableJson } from '../../../../apis/process'
 import BaseForm from './BaseForm'
 import { isObject } from '../../../../utils'
+import Drag from '../../../components/Drag'
 
 const icons = {
   '详情': <SnippetsOutlined />,
@@ -348,7 +349,6 @@ const RelationForm = (props) => {
     if (addons) {
       let relationForm = addons.getValue('relationForm') || { configs: [], data: [] }
       addons.setValue('relationForm', { ...relationForm, configs: [...relationForm.configs, schema] })
-      // addons.setSchemaByPath(addons.dataPath, { ...schema, hidden: !defaultShow })
     }
   }, [])
 
@@ -366,7 +366,7 @@ const RelationForm = (props) => {
         dataSource={dataSource}
         pagination={{ total: dataSource.length, showTotal: (value) => `总计 ${value} 条` }}
       />
-      <Modal
+      <Drag
         title={accountName}
         width='80%'
         bodyStyle={{ height: '700px', overflow: 'auto' }}
@@ -384,7 +384,7 @@ const RelationForm = (props) => {
           config={config}
           ref={baseFormRef}
         />
-      </Modal>
+      </Drag>
     </div>
   )
 

src/core/widgets/business/AccountSelector/index.js

@@ -4,6 +4,7 @@ import { SnippetsOutlined } from '@ant-design/icons'
 import { GetAccountConfigInfo, GetAccountPageList, getStationListByUserID } from '../../../../apis/process'
 import styles from './index.less'
 import { isJson } from '../../../../utils'
+import Drag from '../../../components/Drag'
 
 const AccountSelector = (props) => {
 
@@ -159,7 +160,7 @@ const AccountSelector = (props) => {
         addonAfter={!disabled ? addonAfter : null}
         disabled={disabled}
       />
-      <Modal
+      <Drag
         onCancel={() => setVisible(false)}
         onOk={onOk}
         width='60%'
@@ -203,7 +204,7 @@ const AccountSelector = (props) => {
           dataSource={dataSource}
           columns={columns}
         />
-      </Modal>
+      </Drag>
     </div>
   )
 

src/core/widgets/business/PersonSelector/components/UserGroup.js

@@ -3,6 +3,7 @@ import { Input, message, Modal, Spin, Checkbox, Row, Col, Radio } from 'antd'
 import { UserAddOutlined } from '@ant-design/icons'
 import styles from '../index.less'
 import { getUserSelector } from '../../../../../apis/process'
+import Drag from '../../../../components/Drag'
 
 const getUSerName = (groupList, value, isMultiple, property) => {
   let users = []
@@ -173,7 +174,7 @@ const UserGroup = (props) => {
         addonAfter={disabled ? null : <UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} onClick={inputFocus} />}
         style={{ width: '100%' }}
       />
-      <Modal
+      <Drag
         title='人员选择器'
         visible={visible}
         bodyStyle={{ height: 450 }}
@@ -265,7 +266,7 @@ const UserGroup = (props) => {
               </Radio.Group>
           }
         </Spin>
-      </Modal>
+      </Drag>
     </div>
   )
 

src/core/widgets/business/PersonSelector/components/UserTree.js

@@ -3,6 +3,7 @@ import { Input, Modal, Tree, message, Table } from 'antd'
 import { UserAddOutlined, DownOutlined } from '@ant-design/icons'
 import { getUserSelector } from '../../../../../apis/process'
 import styles from '../index.less'
+import Drag from '../../../../components/Drag'
 
 const columns = [
   {
@@ -64,7 +65,6 @@ const UserTree = (props) => {
   const [treeKey, setTreeKey] = useState([])
   const [selectKeys, setSelectKeys] = useState([])
   const [search, setSearch] = useState('')
-
   const userList = useMemo(() => {
     return getUserList(treeData, treeKey, search)
   }, [treeData, treeKey, search])
@@ -130,14 +130,13 @@ const UserTree = (props) => {
         addonAfter={disabled ? null : <UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} onClick={inputFocus} />}
         style={{ width: '100%' }}
       />
-      <Modal
+      <Drag
         width='60%'
         title='人员选择器'
         visible={visible}
         bodyStyle={{ height: '600px' }}
         onCancel={onCancel}
         onOk={onOk}
-        getContainer={false}
       >
         <div className={styles.box}>
           <div className={styles.left}>
@@ -215,7 +214,7 @@ const UserTree = (props) => {
             </div>
           </div>
         </div>
-      </Modal>
+      </Drag>
     </div>
   )
 

src/core/widgets/coord/Coordinate/index.js

@@ -10,6 +10,7 @@ import {
   Point
 } from '@wisdom-map/arcgismap'
 import { GlobalStore } from '../../../FormRender'
+import Drag from '../../../components/Drag'
 
 const Coordinate = ({ value, onChange, name, schema }) => {
 
@@ -135,7 +136,7 @@ const Coordinate = ({ value, onChange, name, schema }) => {
         style={{ width: '100%' }}
         onClick={showMap}
       />
-      <Modal
+      <Drag
         width={'80%'}
         title="选取坐标"
         visible={visible}
@@ -155,8 +156,7 @@ const Coordinate = ({ value, onChange, name, schema }) => {
           {view ? <div style={{ width: '400px', position: 'absolute', right: '0', top: '25px' }}><AutoCompleteSearch
             areaName={getCityName()} view={view} /></div> : ''}
         </div>
-      </Modal>
-
+      </Drag>
     </div>
   )
 

src/core/widgets/coord/Device/index.js

@@ -10,6 +10,7 @@ import {
 } from '@wisdom-map/arcgismap'
 import point from './img/point.png'
 import { isObject } from '../../../../utils'
+import Drag from '../../../components/Drag'
 
 let geometrystr = ''
 let gisInfo = {}
@@ -294,7 +295,7 @@ const Device = (props) => {
         addonAfter={disabled ? null : <CompassOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} onClick={iconClick} />}
         style={{ width: '100%' }}
       />
-      <Modal
+      <Drag
         visible={visible}
         title='设备选择'
         width={'80%'}
@@ -310,7 +311,7 @@ const Device = (props) => {
           widgets={[]}
           config={layersConifg}
         />
-      </Modal>
+      </Drag>
     </div>
   )
 }

src/core/widgets/coord/DrawPartition/index.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Input, Modal, Spin, Button } from 'antd';
 import { CompassOutlined, SearchOutlined } from '@ant-design/icons';
 import { AMapScene, AMapDrawTool, VectorLayer } from '@wisdom-map/amap';
+import Drag from '../../../components/Drag'
 
 let amapDrawTool = null; // 存储绘制工具实例
 let currentMapInstance = null; // 存储地图的实例
@@ -160,7 +161,7 @@ const DrawPartition = ({ value, onChange, name, schema }) => {
       <span style={{ marginLeft: 5 }}>{initPath.length ? `已绘制${initPath.length}块区域` : '未绘制区域'}</span>
       {
         mapSettings ?
-          <Modal
+          <Drag
             width={'80%'}
             title="绘制区域"
             visible={visible}
@@ -183,7 +184,7 @@ const DrawPartition = ({ value, onChange, name, schema }) => {
                 loading
               />
             </div>
-          </Modal> : ''
+          </Drag> : null
       }
     </div>
   )

src/core/widgets/file/FileUpload/index.js

@@ -5,6 +5,7 @@ import { UploadOutlined, FileOutlined, ArrowDownOutlined } from '@ant-design/ico
 import FileViewer from 'react-file-viewer'
 import { uploadFileUrl, downloadFileUrl, downloadFile } from '../../../../apis/process'
 import { filenameVerification } from '../../../../utils'
+import Drag from '../../../components/Drag'
 
 const accepts = {
   '全部': [],
@@ -175,7 +176,7 @@ const FileUpload = (props) => {
             : (disabled ? null : (placeholder || '+ 上传'))
         }
       </Upload>
-      <Modal
+      <Drag
         width={'70%'}
         title={showFile.name}
         visible={visible}
@@ -188,7 +189,7 @@ const FileUpload = (props) => {
           fileType={showFile.fileType}
           filePath={window.location.origin + showFile.filePath}
         />
-      </Modal>
+      </Drag>
     </div>
   )
 

src/core/widgets/settings/InputAddon/index.js

@@ -3,6 +3,7 @@ import { Input, Modal, ConfigProvider } from 'antd'
 import Icon, { EllipsisOutlined } from '@ant-design/icons'
 import * as icons from '@ant-design/icons'
 import './index.less'
+import Drag from '../../../components/Drag'
 
 const iconList = Object.keys(icons).filter((item) => typeof icons[item] === 'object')
 
@@ -33,7 +34,7 @@ const InputAddon = (props) => {
   return (
     <div className={`inputAddon`}>
       <Input value={value} onChange={inputChange} addonAfter={<EllipsisOutlined onClick={iconClick} />} />
-      <Modal
+      <Drag
         width={'50%'}
         getContainer={false}
         title='图标选择'
@@ -54,7 +55,7 @@ const InputAddon = (props) => {
             })
           }
         </div>
-      </Modal>
+      </Drag>
     </div>
   )
 

src/core/widgets/settings/groupSource/CalculateRule/index.js

@@ -3,6 +3,7 @@ import { Modal, Input, message, Dropdown, Menu, Tree } from 'antd'
 import styles from './index.less'
 import { getTableNumberList, getFormFieldAnalysisDtos } from '../../../../../apis/process'
 import { isObject } from '../../../../../utils'
+import Drag from '../../../../components/Drag'
 
 const { TextArea } = Input
 
@@ -115,8 +116,8 @@ const CalculateRule = (props) => {
         value={value}
         onClick={inputClick}
       />
-      <Modal
-        title="规则配置"
+      <Drag
+        title="计算规则"
         visible={visible}
         onOk={onOk}
         width="740px"
@@ -161,7 +162,7 @@ const CalculateRule = (props) => {
             </ul>
           </div>
         </div>
-      </Modal>
+      </Drag>
     </div>
   )
 

src/core/widgets/settings/groupSource/ControlRules/index.js

@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react'
 import { Modal, Input, message, Dropdown, Menu, Tree } from 'antd'
 import styles from './index.less'
 import { ReloadTableFields, ruleValidation } from '../../../../../apis/process'
+import Drag from '../../../../components/Drag'
 
 const { TextArea } = Input
 
@@ -99,7 +100,7 @@ const ControlRules = (props) => {
         value={value}
         onClick={inputClick}
       />
-      <Modal
+      <Drag
         title="规则配置"
         visible={visible}
         onOk={onOk}
@@ -150,7 +151,7 @@ const ControlRules = (props) => {
             </div>
           ) : null
         }
-      </Modal>
+      </Drag>
     </div>
   )
 

src/core/widgets/settings/groupSource/Dictionary/index.js

@@ -3,6 +3,7 @@ import { Input, Modal, Select, Button, Table } from 'antd'
 import { EyeOutlined } from '@ant-design/icons'
 import './index.less'
 import { GetDataDictionaryList, GetSelectItemList } from '../../../../../apis/process'
+import Drag from '../../../../components/Drag'
 
 const columns = [
   {
@@ -61,7 +62,7 @@ const Dictionary = (props) => {
         onChange={selectChange}
         onFocus={() => getDictionary()}
         showSearch
-        // allowClear
+      // allowClear
       >
         {
           options.map(v => {
@@ -74,7 +75,7 @@ const Dictionary = (props) => {
         }
       </Select>
       <div className='dictionary-icons' style={{ display: value ? 'block' : 'none' }}><EyeOutlined onClick={iconClick} /></div>
-      <Modal
+      <Drag
         width={'50%'}
         onCancel={() => setVisible(false)}
         onOk={() => setVisible(false)}
@@ -88,7 +89,7 @@ const Dictionary = (props) => {
           dataSource={dataSource}
           columns={columns}
         />
-      </Modal>
+      </Drag>
     </div>
   )
 

src/core/widgets/settings/groupSource/Fieldshine/index.js

@@ -3,6 +3,7 @@ import { Form, Space, TreeSelect, Button, Input, Modal, message } from 'antd'
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
 import styles from './index.less'
 import { ReloadTableFields, QueryFields } from '../../../../../apis/process'
+import Drag from '../../../../components/Drag'
 
 const { TreeNode } = TreeSelect
 
@@ -68,7 +69,7 @@ const Fieldshine = (props) => {
         value={value && value.length ? JSON.stringify(value) : null}
         onClick={inputClick}
       />
-      <Modal
+      <Drag
         getContainer={false}
         width='500px'
         title='字段映射'
@@ -165,7 +166,7 @@ const Fieldshine = (props) => {
             )}
           </Form.List>
         </Form>
-      </Modal>
+      </Drag>
     </div>
   )
 

src/core/widgets/settings/groupSource/MappedField/index.js

@@ -3,6 +3,7 @@ import { Form, Space, TreeSelect, Button, Input, Modal, message } from 'antd'
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
 import styles from './index.less'
 import { ReloadTableFields, QueryFields } from '../../../../../apis/process'
+import Drag from '../../../../components/Drag'
 
 const { TreeNode } = TreeSelect
 
@@ -55,7 +56,7 @@ const MappedField = (props) => {
         value={value && value.length ? JSON.stringify(value) : null}
         onClick={inputClick}
       />
-      <Modal
+      <Drag
         title={accountName}
         visible={visible}
         onCancel={() => setVisible(false)}
@@ -154,7 +155,7 @@ const MappedField = (props) => {
             )}
           </Form.List>
         </Form>
-      </Modal>
+      </Drag>
     </div>
   )
 

src/utils/index.js

+import React, { useState } from 'react';
+
 export function downloadFunc(url, name, target = '_self') {
   const a = document.createElement('a');
   a.href = url;
@@ -98,7 +100,6 @@ export const isJson = (json) => {
 
 export const isObject = (obj) => typeof obj === 'object'
 
-
 //防抖
 export const debounce = (fn) => {
   let t = null