@cloudbase/weda-ui 0.2.15 → 1.0.21

package/src/web/components/form/location/components/LocationPC/location.PC.jsx

@@ -0,0 +1,323 @@
+import * as React from 'react';
+import { ConfigProvider } from 'tea-component';
+
+import classNames from '../../../../../utils/classnames';
+import weui from '../../../../../utils/weui';
+import { renderDecorator } from '../../../renderDecorator';
+
+import MapView from '../../common/mapView';
+import SelectModal from '../../common/selectModal';
+import useLocationInfo from '../../common/useLocationInfo';
+import { propTypes, defaultProps } from '../../common/propsConfig';
+import { callDataSource } from '../../../../../utils/tcb';
+import Header from './Header';
+
+import './index.css';
+
+const { useState, useEffect, useRef } = React;
+
+export default function LocationPC(props) {
+  // 属性、变量
+  const {
+    // 系统属性
+    id,
+    className,
+    style,
+    events,
+    // 组件属性
+    value,
+    label,
+    labelVisible,
+    customLocation,
+    locationType,
+    showLngLat,
+    showMap,
+    drag,
+    zoom,
+    disabled,
+    requiredFlag,
+    decorator,
+    dataSource,
+  } = props;
+  const cls = classNames({
+    'weda-ui': true,
+    cloudbase_standard: true,
+    [className]: className,
+  });
+
+  const [isSelectMapVisible, setIsSelectMapVisible] = useState(false);
+  const [dataSourceStatus, setDataSourceStatus] = useState({
+    status: false,
+    message: '连接器初始化中',
+  });
+  const [userSelectStatus, setUserSelectStatus] = useState('default');
+  const [APIKEY, setAPIKEY] = useState('');
+
+  const eventsChange = (value, noaddr) => {
+    const { poiname, latitude, longitude } = value;
+    let res = {
+      address: poiname,
+      geopoint: {
+        coordinates: [longitude, latitude],
+        type: 'Point',
+      },
+    };
+    if (noaddr) {
+      res = null;
+    }
+    events.change &&
+      events.change({
+        value: res,
+      });
+  };
+  const {
+    location,
+    setLocation,
+    apiKeyStatus,
+    setApiKeyStatus,
+    currentLocStatus,
+    currentLocations,
+  } = useLocationInfo({
+    apiKey: APIKEY,
+    locationType,
+    dataSourceStatus,
+    eventsChange,
+  });
+
+  useEffect(() => {
+    if (value || !currentLocations.current) return;
+    setUserSelectStatus('default');
+    // 重置表单时
+    const {
+      poiname,
+      latlng: { lat, lng },
+    } = currentLocations.current;
+    let location = {
+      poiname,
+      latlng: { lat, lng },
+    };
+    if (locationType === 1) {
+      location.locationType = 1;
+      eventsChange({}, true);
+    } else if (locationType === 2) {
+      eventsChange({
+        latitude: lat,
+        longitude: lng,
+        poiname: poiname,
+      });
+    }
+    setLocation(location);
+  }, [value, locationType]);
+
+  // 事件
+  const handleChooseLocation = () => {
+    if (disabled) return;
+    if (!dataSourceStatus.status) return weui.alert(dataSourceStatus.message);
+    if (!apiKeyStatus.status) return weui.alert(apiKeyStatus.message);
+    if (!currentLocStatus) return weui.alert('获取当前位置信息中，请稍等');
+    setIsSelectMapVisible(true);
+  };
+  const onChangeLocation = (value) => {
+    const { poiname, latlng } = value;
+    events.change &&
+      events.change({
+        value: {
+          address: poiname,
+          geopoint: {
+            coordinates: [latlng.lng, latlng.lat],
+            type: 'Point',
+          },
+        },
+      });
+    setUserSelectStatus('selected');
+  };
+
+  useEffect(() => {
+    // 调用连接器数据源方法
+    if (dataSource.name) {
+      callDataSource({
+        dataSourceName: dataSource.name,
+        methodName: 'getApiKey',
+      })
+        .then((res) => {
+          if (res.apiKey) {
+            setAPIKEY(res.apiKey);
+            setDataSourceStatus({
+              status: true,
+              message: '',
+            });
+            setApiKeyStatus({ status: true, message: '' });
+          }
+        })
+        .catch((error) => {
+          console.log('datasources error', error);
+          setDataSourceStatus({
+            status: false,
+            message: error,
+          });
+        });
+    } else {
+      setDataSourceStatus({
+        status: false,
+        message: '"地图定位组件"需进行地图配置，请检查',
+      });
+      weui.alert('"地图定位组件"需进行地图配置，请检查');
+    }
+  }, [dataSource]);
+
+  useEffect(() => {
+    let loc = {
+      latlng: {
+        lat: 39.98410411,
+        lng: 116.307503,
+      },
+      poiname: '',
+      locationType,
+    };
+    switch (locationType) {
+      case 2:
+        // @ts-ignore
+        loc = {
+          latlng: {
+            lat: location.latlng.lat,
+            lng: location.latlng.lng,
+          },
+          poiname: location.poiname,
+        };
+        break;
+      case 3:
+        if (checkCustomLocation(customLocation)) {
+          weui.alert('位置输入格式错误 请检查');
+        } else {
+          // @ts-ignore
+          loc = {
+            latlng: {
+              lat: customLocation.latitude,
+              lng: customLocation.longitude,
+            },
+            poiname: customLocation.poiname,
+          };
+        }
+        break;
+    }
+    setLocation(loc);
+    // 暂不支持自定位置，初始化表单值都是null
+    eventsChange(
+      {
+        latitude: loc.latlng.lat,
+        longitude: loc.latlng.lng,
+        poiname: loc.poiname,
+      },
+      true
+    );
+  }, [locationType]);
+
+  useEffect(() => {
+    if (locationType != 3) {
+      return;
+    }
+    if (checkCustomLocation(customLocation)) {
+      weui.alert('位置输入格式错误 请检查');
+      return;
+    }
+    let { latitude, longitude, poiname } = customLocation;
+    let loc = {
+      latlng: {
+        lat: latitude,
+        lng: longitude,
+      },
+      poiname: poiname,
+    };
+    setLocation(loc);
+  }, [customLocation, locationType]);
+
+  const checkCustomLocation = (params) => {
+    let { latitude, longitude } = params;
+    let message = '';
+    if (Object.prototype.toString.call(params) !== '[object Object]') {
+      return (message = '位置输入格式错误 请检查');
+    } else if (!latitude || !Number(latitude)) {
+      return (message = '位置输入格式错误 请检查');
+    } else if (!longitude || !Number(longitude)) {
+      return (message = '位置输入格式错误 请检查');
+    } else if (!params) {
+      return (message = '位置输入格式错误 请检查');
+    }
+  };
+
+  const getIsShowMap = () => {
+    let status = showMap;
+    // @ts-ignore
+    if (locationType === 1 && location.locationType === 1) {
+      status = false;
+    } else if (locationType === 2 && !dataSourceStatus.status) {
+      status = false;
+    } else if (locationType === 2 && !apiKeyStatus.status) {
+      status = false;
+    } else if (!currentLocStatus) {
+      status = false;
+    }
+    return status;
+  };
+
+  const LocationEl = (
+    <ConfigProvider classPrefix="wedatea2td">
+      <div
+        className={classNames(
+          'wedatea2td-form__controls wedatea2td-form__controls_wrap',
+          className
+        )}
+        style={style}
+        data-testid="_weda-fn-map"
+      >
+        <div className="_weda-fn-map">
+          <Header
+            isEdit={userSelectStatus === 'selected'}
+            info={location}
+            onClick={handleChooseLocation}
+            disabled={disabled}
+            showLngLat={showLngLat}
+            locationType={locationType}
+            apiKeyStatus={apiKeyStatus}
+            currentLocStatus={currentLocStatus}
+            dataSourceStatus={dataSourceStatus.status}
+          />
+          {getIsShowMap() ? (
+            <div className={classNames('form-location-map-pc')}>
+              <MapView
+                APIKEY={APIKEY}
+                drag={drag}
+                zoom={zoom}
+                latlng={location.latlng}
+              />
+            </div>
+          ) : null}
+        </div>
+      </div>
+      <SelectModal
+        isSelectMapVisible={isSelectMapVisible}
+        setIsSelectMapVisible={setIsSelectMapVisible}
+        location={location}
+        setLocation={setLocation}
+        APIKEY={APIKEY}
+        chooseLocation={onChangeLocation}
+      />
+    </ConfigProvider>
+  );
+
+  return renderDecorator(
+    LocationEl,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    multiCell: false,
+    requiredFlag,
+  });
+}
+
+LocationPC.propTypes = propTypes;
+
+LocationPC.defaultProps = defaultProps;

package/src/web/components/form/location/constants.js

@@ -0,0 +1,4 @@
+const KEY = 'XX5BZ-UJLKR-B7WWP-WURRR-UYBGS-4VBMM';
+const tmapApiUrl = 'https://map.qq.com/api/gljs';
+
+export { KEY, tmapApiUrl };

package/src/web/components/form/location/index.jsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ConfigProvider } from 'tea-component';
+import './index.css';
+import { usePlatform } from '../../../utils/platform';
+import LocationH5 from './components/LocationH5/location.h5';
+import LocationPC from './components/LocationPC/location.PC';
+
+export default function Location(props) {
+  const platform = usePlatform();
+
+  if (props?.showType === 'pc') {
+    return <LocationPC {...props} />;
+  }
+  if (props?.showType === 'h5') {
+    return <LocationH5 {...props} />;
+  }
+
+  return platform === 'h5' ? (
+    <ConfigProvider classPrefix="wedatea2td">
+      <LocationH5 {...props} />
+    </ConfigProvider>
+  ) : (
+    <LocationPC {...props} />
+  );
+}

package/src/web/components/form/radio/index.tsx

@@ -1,14 +1,16 @@
-import * as React from 'react';
-import {ConfigProvider, Radio as TeaRadio} from 'tea-component';
+import React, { useEffect, useState } from 'react';
+import { ConfigProvider, Radio as TeaRadio } from 'tea-component';
 
-import {usePlatform} from '../../../utils/platform';
+import { usePlatform } from '../../../utils/platform';
 import classNames from '../../../utils/classnames';
 import getLocalCounter from '../../../utils/getLocalCounter';
 import isObjectEqual from '../../../utils/isObjectEqual';
+import { callWedaApi } from '../../../utils/tcb';
 
 import './index.css';
 import { renderDecorator } from '../renderDecorator';
 import { CommonFormPropsType } from '../types';
+import destr from 'destr';
 
 export default function Radio({
   // 系统属性
@@ -19,6 +21,8 @@ export default function Radio({
   // 组件属性
   label = '标题',
   labelVisible = true,
+  format = '',
+  enumName = '',
   name = 'formRadio',
   range = [],
   layout = 'horizontal',
@@ -39,19 +43,44 @@ export default function Radio({
     'weui-check__label': isH5,
     'weui-cell_disabled': isH5 && disabled,
   });
-
+  const [option, setOption] = useState(range);
   const [checkedItemValue, setCheckedItemValue] = React.useState(
-    range.find((item) => item.checked)?.value
+    option.find((item) => item.checked)?.value
   );
   // 两次range不同时, 需要刷新checkedItemValue
   const prevRangeRef = React.useRef<PropsType['range']>();
   React.useEffect(() => {
-    if (!isObjectEqual(prevRangeRef.current, range)) {
-      prevRangeRef.current = range;
-      setCheckedItemValue(range.find((item) => item.checked)?.value);
+    if (!isObjectEqual(prevRangeRef.current, option)) {
+      prevRangeRef.current = option;
+      setCheckedItemValue(option.find((item) => item.checked)?.value);
     }
   });
 
+  useEffect(() => {
+    // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+    if (format === 'x-enum' && enumName) {
+      fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+    }
+  }, []);
+
+  const fetchData = async (param:
+    { OptNameList?: object, PageIndex?: number, PageSize?: number }
+  ) => {
+    let data = await callWedaApi({
+      action: 'DescribeGeneralOptionsDetailList',
+      data: param,
+    });
+    const config = destr(data?.Items?.[0]?.Config) ?? [];
+    const enumOption = config.map(item => {
+      return {
+        label: item.value,
+        value: item.key,
+        checked: false
+      };
+    });
+    setOption(enumOption);
+  };
+
   /**
    * 在ios h5端, label和input的绑定不生效
    * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
@@ -70,55 +99,55 @@ export default function Radio({
   // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
   const hashcode = React.useMemo(() => getLocalCounter(), []);
   let radioElement;
-  if(isH5) {
+  if (isH5) {
 
-    radioElement = range.map(({ label, value }, index) => {
+    radioElement = option.map(({ label, value }, index) => {
       const _id = `radio-${hashcode}-${index}`;
       const _name = `radio-${hashcode}-${name}`;
       return (
-      <div
-        className={subCls}
-        key={_id}
-        onClickCapture={getChangeHandler(value)}
-      >
-        <div className="weui-cell__hd">
-          <input
-            type="radio"
-            className="weui-check"
-            value={value}
-            name={_name}
-            id={_id}
-            checked={checkedItemValue === value}
-            disabled={disabled}
-            onClick={(e) => e.stopPropagation()}
+        <div
+          className={subCls}
+          key={_id}
+          onClickCapture={getChangeHandler(value)}
+        >
+          <div className="weui-cell__hd">
+            <input
+              type="radio"
+              className="weui-check"
+              value={value}
+              name={_name}
+              id={_id}
+              checked={checkedItemValue === value}
+              disabled={disabled}
+              onClick={(e) => e.stopPropagation()}
             />
-          <i className="weui-icon-checked"></i>
+            <i className="weui-icon-checked"></i>
+          </div>
+          <div className="weui-cell__bd">
+            <p>{label}</p>
+          </div>
         </div>
-        <div className="weui-cell__bd">
-          <p>{label}</p>
-        </div>
-      </div>
-    );
-  });
-} else {
-  // pc
-  radioElement = (<ConfigProvider classPrefix="wedatea2td">
-    <TeaRadio.Group 
-      disabled={disabled}
-      value={checkedItemValue}
-      onChange={(value, {event}) => getChangeHandler(value)(event)}
-    >
-      {range.map(({value, label}, index) => {
-        const _id = `radio-${hashcode}-${index}`;
-        return (
-          <TeaRadio key={_id} name={value} id={_id}>
-            {label}
-          </TeaRadio>
-        );
-      })}
-    </TeaRadio.Group>
-  </ConfigProvider>);
-}
+      );
+    });
+  } else {
+    // pc
+    radioElement = (<ConfigProvider classPrefix="wedatea2td">
+      <TeaRadio.Group
+        disabled={disabled}
+        value={checkedItemValue}
+        onChange={(value, { event }) => getChangeHandler(value)(event)}
+      >
+        {option.map(({ value, label }, index) => {
+          const _id = `radio-${hashcode}-${index}`;
+          return (
+            <TeaRadio key={_id} name={value} id={_id}>
+              {label}
+            </TeaRadio>
+          );
+        })}
+      </TeaRadio.Group>
+    </ConfigProvider>);
+  }
   return renderDecorator(radioElement, decorator)({
     id,
     className: cls,
@@ -132,5 +161,7 @@ export default function Radio({
 
 export interface PropsType extends CommonFormPropsType {
   // 组件属性
-  range?: ({label: string} & Record<string, any>)[];
-}
+  range?: ({ label: string } & Record<string, any>)[];
+  format?: string;
+  enumName?: string;
+}