拆分下拉框，单选框，复选框形态

package.json

 {
     "name": "panda-xform",
-    "version": "1.4.4",
-    "description": "1.4.4: 组件附件预览隐藏",
+    "version": "1.4.5",
+    "description": "1.4.5: 拆分下拉框，单选框，复选框形态",
     "keywords": [
         "panda-xform"
     ],
@@ -37,6 +37,7 @@
         "moment": "^2.29.1",
         "qrcode.react": "^1.0.1",
         "react": "17.0.2",
+        "react-file-viewer": "^1.2.1",
         "react-svg": "15.1.9",
         "yarn": "^1.22.17"
     },

src/apis/process.js

@@ -218,6 +218,14 @@ export function LoadTableFields(paramas) {
   })
 }
 
+//获取表字段(无附加表)
+export function ReloadTableFields(paramas) {
+  return request({
+    url: `PandaOMS/OMS/CaseManage/ReloadTableFields?tableName=${paramas.tableName}`,
+    method: 'get'
+  })
+}
+
 //获取所有表
 export function LoadUnattachedTables() {
   return request({

src/core/FormDesigner/index.js

 import React, { useRef, useMemo, useEffect, useState, useContext, createContext } from 'react'
 import { ConfigProvider, message } from 'antd'
-import Generator, { } from 'fr-generator'
+import Generator, { defaultCommonSettings, defaultGlobalSettings, defaultSettings } from 'fr-generator'
 import { settings, baseSettings, globalSettings } from './config'
 import widgets from '../widgets'
 import { saveTableConfig, GetTableConfigJson } from '../../apis/process'
@@ -19,7 +19,7 @@ const FormDesigner = (props) => {
   const ref = useRef(null)
 
   const getTableField = () => {
-
+    console.log('setSchema', settings)
   }
 
   const getTableInfo = () => {
@@ -72,8 +72,7 @@ const FormDesigner = (props) => {
   }
 
   const onCanvasSelect = (schema) => {
-    console.log('schema', schema)
-    // console.log('value', value)
+    // console.log('schema', schema)
   }
 
   return (
@@ -82,7 +81,7 @@ const FormDesigner = (props) => {
         tableName: '123'
       }}
     >
-      <div className={prefixCls}>
+      <div className={prefixCls} style={{ height: '750px' }}>
         <Generator
           configProvider={{ prefixCls: pandaXform }}
           mapping={{

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

 import React, { useState, useEffect, useContext, useRef } from 'react'
-import { Input, Modal, Spin, Button } from 'antd'
+import { Input, Modal } from 'antd'
 import { CompassOutlined } from '@ant-design/icons'
-import { AMapScene, AMapDrawTool, VectorLayer, PointLayer } from '@wisdom-map/amap'
-import { ArcGISSceneMap, AutoCompleteSearch, Drawtool as drawTool, Graphic, GraphicsLayer, Point } from '@wisdom-map/arcgismap'
-import { mktlng } from '@wisdom-map/basemap/es/utils/coordTransformation'
-// import { GlobalStore } from '../../../FormRender'
+import {
+  ArcGISSceneMap,
+  AutoCompleteSearch,
+  Drawtool as drawTool,
+  Graphic,
+  GraphicsLayer,
+  Point
+} from '@wisdom-map/arcgismap'
+import { GlobalStore } from '../../../FormRender'
 
 const Coordinate = ({ value, onChange, name, schema }) => {
 
   const { disabled, placeholder } = schema
-  // const { extraData, setExtraData } = useContext(GlobalStore);
-  const { extraData, setExtraData } = useState(GlobalStore);
-  const [coordinate, setCoordinate] = useState('');
+  // const { extraData, setExtraData } = useContext(GlobalStore)
+  const [coordinate, setCoordinate] = useState('')
   const [layersConifg, setLayersConifg] = useState(() => {
-    const mapConfig = window.globalConfig.mapsettings?.layers || null;
+    const mapConfig = window.globalConfig.mapsettings?.layers || null
     return { layers: mapConfig };
   });
   const mapSettings = window.globalConfig.mapsettings;
@@ -26,71 +30,7 @@ const Coordinate = ({ value, onChange, name, schema }) => {
   const [view, setView] = useState(null);
   const [coordGetLayers, setCoordGetLayers] = useState(null);
   let _temp = [];
-  
-  const getAMapInfo = (AMap, map) => {
-    let geocoder;
-    AMap.plugin('AMap.Geocoder', function () {
-      geocoder = new AMap.Geocoder({
-        city: "010", //城市设为北京，默认：“全国”
-        radius: 1000 //范围，默认：500
-      });
-    });
-    if (value && value.length) {
-      let _value = value.split(',');
-      const initMarker = mktlng({ x: _value[0], y: _value[1] }); // @Return: { lat: xxx,lng: xxx };
-      const polintLayer = new PointLayer({
-        Amap: AMap,
-        map,
-        markersOption: {
-          content: `<div>
-              <p style="position: absolute;background: #ffffff;padding: 4px;top:-50px;left:20px;border-radius: 4px;width: 300px;">坐标: [${_value[0]},${_value[1]}]</p>
-              <img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" alt="">
-          </div>`,
-          icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
-          position: [initMarker.lng, initMarker.lat],
-          anchor: 'bottom-center'
-        }
-      });
-      map.setCenter([initMarker.lng, initMarker.lat]);
-    }
-    map.on('click', function (e) {
-      let _position = [e.lnglat.getLng(), e.lnglat.getLat()];
-      geocoder.getAddress(_position, function (status, result) {
-        if (status === 'complete' && result.regeocode) {
-          let address = result.regeocode.formattedAddress;
-          let _extraData = { ...extraData };
-          _extraData.address = address;
-          setExtraData(_extraData);
-        } else {
-          log.error('根据经纬度查询地址失败');
-        }
-      });
-      // 暂时未能找到封装后的框架提供的remove方法
-      map.getAllOverlays().forEach(item => {
-        if (item.className === 'AMap.Marker') {
-          map.remove(item);
-        }
-      });
-      let marker = new PointLayer({
-        Amap: AMap,
-        map,
-        markersOption: {
-          content: `<div>
-                <p style="position: absolute;background: #ffffff;padding: 4px;top:-50px;left:20px;border-radius: 4px;width: 300px;">坐标: [${e.pos[0]},${e.pos[1]}]</p>
-                <img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" alt="">
-            </div>`,
-          icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
-          position: _position,
-          anchor: 'bottom-center',
-        }
-      });
-      setCurrentPointerCoordinate([e.pos[0], e.pos[1]]);
-      let _lng = e.lnglat.getLng();
-      let _lat = e.lnglat.getLat();
-      // map.setCenter([_lng, _lat]);
-      _temp.push(marker);
-    });
-  };
+
   const getView = (viewObject) => {
     if (viewObject) {
       setView(viewObject);
@@ -183,7 +123,8 @@ const Coordinate = ({ value, onChange, name, schema }) => {
       cityName = pipeNetLayer.areaName;
     }
     return cityName;
-  };
+  }
+
   return (
     <div>
       <Input
@@ -216,7 +157,8 @@ const Coordinate = ({ value, onChange, name, schema }) => {
       </Modal>
 
     </div>
-  );
+  )
+
 }
 
 export default Coordinate

src/core/widgets/date/DateTime/index.js

@@ -9,10 +9,12 @@ const DateTime = (props) => {
 
   const { value, onChange, schema } = props
 
-  const { disabled, format, presetValue, placeholder } = schema
+  const { disabled, format, presetValue, placeholder, groupStyle } = schema
+
+  console.log('日期时间', props)
 
   const valueShow = useMemo(() => {
-    console.log('value+presetValue', value, presetValue)
+    // console.log('value+presetValue', value, presetValue)
     return (value || presetValue) ? moment(value || presetValue) : null
   }, [presetValue, value])
 

src/core/widgets/date/Time/index.js

@@ -3,9 +3,12 @@ import { TimePicker } from 'antd'
 import moment from 'moment'
 import style from '../../style'
 
-const Time = ({ value, onChange, schema }) => {
+const Time = (props) => {
 
+  const { value, onChange, schema, addons } = props
   const { presetValue } = schema
+  const { groupStyle } = addons.formData
+  console.log('groupStyle', schema)
 
   const valueShow = useMemo(() => {
     return (value || presetValue) ? moment(value || presetValue, 'HH:mm:ss') : null

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

+import React from 'react'
+// import { Document, pdfjs } from '@react-pdf/renderer'
+
+const FilePreview = (props) => {
+
+  // return (
+  //   <Document
+  //     options={{
+  //       cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
+  //       cMapPacked: true,
+  //     }}
+  //   />
+  // )
+
+  return null
+
+}
+
+export default FilePreview
\ No newline at end of file

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

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import styles from './index.less'
 import { Upload, Button, message, Modal } from 'antd'
 import { UploadOutlined, FileOutlined, ArrowDownOutlined } from '@ant-design/icons'
-// import FileViewer from 'react-file-viewer'
+import FileViewer from 'react-file-viewer'
 import { uploadFileUrl, downloadFileUrl, downloadFile } from '../../../../apis/process'
 import { downloadFunc, filenameVerification } from '../../../../utils/utils'
 
@@ -180,12 +180,12 @@ const FileUpload = (props) => {
         onCancel={() => setVisible(false)}
         bodyStyle={{ height: 650, overflowY: showFile.fileType.includes('xlsx') ? 'none' : "auto" }}
       >
-        {/* <FileViewer
+        <FileViewer
           className='fileViewer'
           title='123'
           fileType={showFile.fileType}
           filePath={window.location.origin + showFile.filePath}
-        /> */}
+        />
       </Modal>
     </div>
   )

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

-@imgSrc: '../../../../assets/images';
+@imgSrc: '../../../../assets/images/file';
 .uploadBox {
   .iconImg {
     width: 45px;

src/core/widgets/file/index.js

 import FileUpload from './FileUpload'
+import FilePreview from './FilePreview'
 
 const file = {
   FileUpload,
+  FilePreview,
 }
 
 export default file
\ No newline at end of file

src/core/widgets/select/CascadeSelector/index.js

+import React, { useEffect, useMemo } from 'react'
+import { Cascader } from 'antd'
+import city from '../../../../constant/city'
+
+const CascadeSelector = (props) => {
+
+  const { value, onChange, schema } = props
+  const { presetValue, disabled, soruceType, options, dictionary } = schema
+
+  const enums = useMemo(() => {
+    if (soruceType === '城市数据') {
+      return city
+    }
+    return []
+  }, [soruceType])
+
+  const getDefaultValue = selectedValues => {
+    if (!selectedValues || !selectedValues.length) {
+      return []
+    }
+
+    const result = [];
+
+    // 递归查询城市名称数据
+    function findLabel(children) {
+      children.forEach(item => {
+        const { label, value, children } = item;
+        if (selectedValues.includes(label)) {
+          result.push(value);
+        }
+        if (children && children.length) {
+          findLabel(children);
+        }
+      });
+    }
+
+    // 卡省份解决县或市名称一样的问题
+    city.forEach(item => {
+      const { label, value, children } = item;
+      if (selectedValues.includes(label)) {
+        result.push(value);
+        if (children && children.length) {
+          findLabel(children);
+        }
+      }
+    });
+    // 设置默认值
+    return result;
+  }
+
+  const cascaderChange = selectedValues => {
+    const result = []
+    // 递归查询城市所有数据
+    function findCityData(city) {
+      city.forEach(item => {
+        const { id, label, value, children } = item;
+        if (selectedValues.includes(value)) {
+          result.push({ id, label, value })
+          if (children && children.length) {
+            findCityData(children)
+          }
+        }
+      })
+    }
+    findCityData(city)
+    // 分发监听
+    const cityValue = result.map(item => {
+      return item.label;
+    })
+    onChange && onChange(cityValue.join('/'));
+  }
+
+  useEffect(() => {
+    onChange(presetValue)
+  }, [presetValue])
+
+  return (
+    <Cascader
+      value={value ? getDefaultValue(value) : []}
+      onChange={cascaderChange}
+      disabled={disabled}
+      style={{ width: '100%' }}
+      options={enums}
+    />
+  )
+
+}
+
+export default CascadeSelector
\ No newline at end of file

src/core/widgets/select/ComboBox/index.js

 // 选择器，值选择器
-import React, { useState, useMemo, useEffect } from 'react'
-import { Select, Checkbox, Radio } from 'antd'
-import styels from './index.less'
+import React, { useState, useMemo } from 'react'
+import { Select } from 'antd'
 import { GetSelectItemList } from '../../../../apis/process'
 
 const { Option } = Select
 
 const ComboBox = ({ value, onChange, schema }) => {
 
-  const { placeholder, disabled, soruceType, options, dictionary, presetValue, showType, isMultiple, isEdit } = schema
+  const { placeholder, disabled, soruceType, options, dictionary, presetValue, isMultiple, isEdit } = schema
 
   console.log('schema', schema)
 
@@ -52,45 +51,20 @@ const ComboBox = ({ value, onChange, schema }) => {
     }
   }
 
-  if (showType === '下拉') {
-    return (
-      <Select
-        onFocus={onFocus}
-        style={{ width: '100%' }}
-        mode={isMultiple ? 'multiple' : ''}
-        disabled={disabled}
-        showArrow={!disabled}
-        value={valueShow}
-        placeholder={placeholder}
-        onChange={handleChange}
-      >
-        {enums.map(v => <Option value={v} key={v}>{v}</Option>)}
-      </Select>
-    )
-  }
-
-  if (showType === '平铺') {
-    return (
-      <div className={styels.tileSelect} type={disabled ? 'disabled' : ''}>
-        {
-          isMultiple ?
-            <Checkbox.Group
-              disabled={disabled}
-              onChange={value => onChange(value.join(','))}
-              value={valueShow}
-            >
-              {enums.map(v => <Checkbox key={v} value={v}>{v}</Checkbox>)}
-            </Checkbox.Group>
-            :
-            <Radio.Group onChange={e => onChange(e.target.value)} value={valueShow} disabled={disabled}>
-              {enums.map(v => <Radio key={v} value={v}>{v}</Radio>)}
-            </Radio.Group>
-        }
-      </div>
-    )
-  }
-
-  return null
+  return (
+    <Select
+      onFocus={onFocus}
+      style={{ width: '100%' }}
+      mode={isMultiple ? 'multiple' : ''}
+      disabled={disabled}
+      showArrow={!disabled}
+      value={valueShow}
+      placeholder={placeholder}
+      onChange={handleChange}
+    >
+      {enums.map(v => <Option value={v} key={v}>{v}</Option>)}
+    </Select>
+  )
 
 }
 

src/core/widgets/select/index.js

 import ComboBox from './ComboBox'
 import RadioButton from './RadioButton'
 import CheckBox from './CheckBox'
+import CascadeSelector from './CascadeSelector'
 import CitySelect from './CitySelect'
 import EditSelect from './EditSelect'
 import MultiSelect from './MultiSelect'
@@ -20,6 +21,7 @@ const select = {
   ComboBox,
   RadioButton,
   CheckBox,
+  CascadeSelector,
   CitySelect,
   EditSelect,
   MultiSelect,

src/core/widgets/settings/groupBase/CascadeDefault/index.js

+import React, { useMemo } from 'react'
+import { Cascader } from 'antd'
+import city from '../../../../../constant/city'
+
+const CascadeDefault = (props) => {
+
+  const { value, onChange, schema, addons } = props
+  const { soruceType } = addons.formData
+  const { disabled } = schema
+
+  const enums = useMemo(() => {
+    if (soruceType === '城市数据') {
+      return city
+    }
+    return []
+  }, [soruceType])
+
+
+  const getDefaultValue = selectedValues => {
+    if (!selectedValues || !selectedValues.length) {
+      return []
+    }
+
+    const result = []
+    // 递归查询城市名称数据
+    function findLabel(children) {
+      children.forEach(item => {
+        const { label, value, children } = item;
+        if (selectedValues.includes(label)) {
+          result.push(value);
+        }
+        if (children && children.length) {
+          findLabel(children);
+        }
+      });
+    }
+    // 省份解决县或市名称一样的问题
+    city.forEach(item => {
+      const { label, value, children } = item;
+      if (selectedValues.includes(label)) {
+        result.push(value);
+        if (children && children.length) {
+          findLabel(children);
+        }
+      }
+    });
+    // 设置默认值
+    return result;
+  }
+
+  const cascaderChange = selectedValues => {
+    if (!selectedValues || !selectedValues.length) {
+      return onChange('')
+    }
+    const result = []
+    // 递归查询城市所有数据
+    function findCityData(city) {
+      city.forEach(item => {
+        const { id, label, value, children } = item;
+        if (selectedValues.includes(value)) {
+          result.push({ id, label, value })
+          if (children && children.length) {
+            findCityData(children)
+          }
+        }
+      })
+    }
+    findCityData(city)
+    // 分发监听
+    const cityValue = result.map(item => {
+      return item.label;
+    })
+    onChange(cityValue.join('/'));
+  }
+
+  return (
+    <Cascader
+      value={value ? getDefaultValue(value) : []}
+      showSearch
+      onChange={cascaderChange}
+      disabled={disabled}
+      style={{ width: '100%' }}
+      options={enums}
+    />
+  )
+
+}
+
+export default CascadeDefault
\ No newline at end of file

src/core/widgets/settings/DateSelect/index.js → src/core/widgets/settings/groupBase/DateDefault/index.js

@@ -3,11 +3,12 @@ import { DatePicker, TimePicker, Input } from 'antd'
 import moment from 'moment'
 import locale from 'antd/lib/date-picker/locale/zh_CN'
 
-const DateSelect = (props) => {
+const DateDefault = (props) => {
 
-  const { onChange } = props
+  console.log('props', props)
 
-  const { format } = props.addons.formData
+  const { onChange, addons, schema } = props
+  const { format } = schema
 
   const dateChange = (date, dateStr) => {
     onChange(dateStr)
@@ -47,4 +48,4 @@ const DateSelect = (props) => {
 
 }
 
-export default DateSelect
+export default DateDefault

src/core/widgets/settings/groupBase/FieldNames/index.js

 import React, { useContext, useMemo, useState } from 'react'
 import { Input, Select, message } from 'antd'
-import { LoadTableFields } from '../../../../../apis/process'
+import { LoadTableFields, ReloadTableFields } from '../../../../../apis/process'
 // import { GlobalStore } from '../../../../FormDesigner'
 
 const field = [
@@ -97,7 +97,8 @@ const FieldNames = (props) => {
     //   return message.info('请在表单配置中选择表名!')
     // }
     console.log(addons.getSchemaByPath('tableName'))
-    const { data } = await LoadTableFields({ tableName: '事件_测试02' })
+    const { data } = await ReloadTableFields({ tableName: '事件_测试02' })
+    console.log('data', data)
     if (Array.isArray(data.root)) {
       setFieldName(data.root)
     }
@@ -113,7 +114,7 @@ const FieldNames = (props) => {
       value={value}
     >
       {
-        fieldName.map(v => <Select.Option key={v.fieldName} value={v.fieldName}>{v.fieldName}</Select.Option>)
+        fieldName.map(v => <Select.Option key={v.name} value={v.name}>{v.name}</Select.Option>)
       }
     </Select>
   )

src/core/widgets/settings/TimeSelect/index.js → src/core/widgets/settings/groupBase/TimeDefault/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from 'react'
 import { TimePicker } from 'antd'
 import locale from 'antd/lib/date-picker/locale/zh_CN'
 
-const TimeSelect = (props) => {
+const TimeDefault = (props) => {
 
   const { onChange } = props
 
@@ -24,4 +24,4 @@ const TimeSelect = (props) => {
 
 }
 
-export default TimeSelect
+export default TimeDefault

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

@@ -2,12 +2,18 @@ import FieldNames from './FieldNames'
 import Placeholder from './Placeholder'
 import InputDefault from './InputDefault'
 import NumerDefault from './NumerDefault'
+import CascadeDefault from './CascadeDefault'
+import DateDefault from './DateDefault'
+import TimeDefault from './TimeDefault'
 
 const groupBase = {
   FieldNames,
   InputDefault,
   Placeholder,
   NumerDefault,
+  CascadeDefault,
+  DateDefault,
+  TimeDefault,
 }
 
 export default groupBase
\ No newline at end of file

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

@@ -60,7 +60,7 @@ const Dictionary = (props) => {
     <div className='dictionary'>
       <Select
         value={value}
-        style={{ maxWidth: '208px', width: '100%' }}
+        style={{ maxWidth: '168px', width: '100%' }}
         onChange={selectChange}
         onFocus={() => getDictionary()}
         showSearch

src/core/widgets/settings/index.js

@@ -6,7 +6,6 @@ import BooleanSwitch from './BooleanSwitch'
 import EnumOptions from './EnumOptions'
 import InputAddon from './InputAddon'
 import CascadeField from './CascadeField'
-import DateSelect from './DateSelect'
 import DataSource from './DataSource'
 
 const settings = {
@@ -18,7 +17,6 @@ const settings = {
   EnumOptions,
   InputAddon,
   CascadeField,
-  DateSelect,
   DataSource,
 }
 

src/main.less

@@ -2,13 +2,15 @@
 @disabledBgColor: rgb(248 ,250, 252);
 @disabledColor: rgba(0, 0, 0, 0.7);
 
-@pandaXform-prefix-cls: ~'@{ant-prefix}-pandaXform';
-.@{pandaXform-prefix-cls} {
-
-  .dnd-container {
-    height: 700px;  
+body #app {
+  background: transparent;
+  .pg-viewer-wrapper {
+    overflow-y: auto;
   }
+}
 
+@pandaXform-prefix-cls: ~'@{ant-prefix}-pandaXform';
+.@{pandaXform-prefix-cls} {
 
   .fr-generator-container .left-layout {
     .left-item {
@@ -16,10 +18,10 @@
         margin-right: 5px;
       }
     }
-  } 
+  }
 
   .fr-generator-container .right-layout {
-    width: 20rem;
+    width: 21rem;
   }
 
   .fr-container .fr-label-required {