@cloudbase/weda-ui 0.2.15 → 1.0.21

package/src/web/components/form/select/h5.tsx

@@ -1,27 +1,53 @@
 import * as React from 'react';
-import * as _moment from 'moment';
-
 import weui from '../../../utils/weui';
 import classNames from '../../../utils/classnames';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import { timePicker } from './time';
-import { regionPicker } from './region';
-import {PropsType} from './index';
+import { regionPicker,getRegionTree,getAreaCode } from './region/index';
+import { PropsType } from './index';
 import { defaultProps } from './index';
+import { timePicker, yearPicker, monthPicker } from './time';
+import { moment } from './index';
+import { callDataSource, callWedaApi } from '../../../utils/tcb';
+import destr from 'destr';
+
+
+
+
+const REL_DICT = {
+  equal: 'eq', // 等于
+  unequal: 'neq', // 不等于
+  include: 'search', // 包含
+  exclude: '_exclude', // 不包含
+  begin_with: '_begin_with', // 开头是
+  greater: 'gt', // 大于
+  greater_or_equal: 'gte', // 大于等于
+  bigger_or_equal: 'gte', //大于等于
+  less: 'lt', // 小于
+  less_or_equal: 'lte', // 小于等于
+  in: 'in', // 多选值
+  not_in: 'nin', // 不在多选值
+};
+
 
-// @ts-expect-error TODO: fix 与plugin构建阶段效果不同
-const moment = (typeof _moment === 'function' ? _moment : _moment.default) as _moment.moment;
 export default function Select({
   // 系统属性
-  events,
+  events = {change: null },
   // 组件属性
   name,
   placeholder,
   layout,
   mode,
+  dateMode = 'day',
   disabled = false,
   // selector mode
   range = defaultProps.range,
+  where,
+  primaryField,
+  tipBlock,
+  enumName,
+  dataSourceName,
+  viewId,
+  format,
   defaultValue,
   // date mode
   startDate,
@@ -33,29 +59,38 @@ export default function Select({
   defaultTime,
   // region mode
   defaultRegion,
+  defaultMutiRegion,
+  regionType,
   separator,
+  onChange
+  //regionTree,
 }: PropsType) {
   const [date, setDate] = React.useState(
-    decodeIsoDatetime(defaultDate, 'date')
+    decodeIsoDatetime(defaultDate, 'date', dateMode)
   );
   const [time, setTime] = React.useState(
     decodeIsoDatetime(defaultTime, 'time')
   );
-  const [region, setRegion] = React.useState(
-    defaultRegion
-  );
+  const [regioDepth,setRegionDepth] = React.useState(3);
+  const [regionData,setRegionData] = React.useState([]);
+  const [regionTree,setRegionTree] = React.useState([]);
+  const [region, setRegion] = React.useState(defaultRegion);
+  const [mutiRegion,setMutiRegion]=React.useState([]);
+  const [typeRegion, setTypeRegion] = React.useState(regionType);
   const [selectedValue, setSelectedValue] = React.useState(defaultValue);
+  const [option, setOption] = React.useState([{ label: '', value: '' }]);
+  const [records, setRecords] = React.useState([]);
 
   // 两次默认值不同, 需要刷新
   const prevDefaultRef = React.useRef<any>({});
-  React.useEffect(() => {
+  React.useEffect( () => {
     let hasChange = false;
     if (prevDefaultRef.current?.defaultValue !== defaultValue) {
       setSelectedValue(defaultValue);
       hasChange = true;
     }
     if (prevDefaultRef.current?.defaultDate !== defaultDate) {
-      setDate(decodeIsoDatetime(defaultDate, 'date'));
+      setDate(decodeIsoDatetime(defaultDate, 'date', dateMode));
       hasChange = true;
     }
     if (prevDefaultRef.current?.defaultTime !== defaultTime) {
@@ -66,14 +101,168 @@ export default function Select({
       setRegion(defaultRegion);
       hasChange = true;
     }
+    if (!isObjectEqual(prevDefaultRef.current?.defaultMutiRegion, defaultMutiRegion)) {
+
+      //setMutiRegion((defaultMutiRegion || ".").split(','));
+      setMutiRegion(defaultMutiRegion?defaultMutiRegion.split(','):[]);
+      hasChange = true;
+    }
+    if (prevDefaultRef.current?.regionType !== regionType) {
+      setTypeRegion(regionType);
+      hasChange = true;
+    }
     if (hasChange) {
       prevDefaultRef.current = {
+        defaultValue,
         defaultDate,
         defaultTime,
         defaultRegion,
+        defaultMutiRegion
       };
     }
+
   });
+  //实现初始值触发change事件
+  const defaultMutiRegionChange = function(treeValue,defaultMutiRegion){
+    const defaultValue =defaultMutiRegion?defaultMutiRegion.split(','):null;
+    const changeValue=[];
+    if(Array.isArray(defaultValue)&&defaultValue.length>0){
+      defaultValue.forEach(element => {
+        treeValue.map((item)=>{
+          if(item?.Value == element){
+            changeValue.push({
+              value:item?.Value,
+              code:item?.Code
+            }
+            );
+          }
+         });
+      });
+
+      events?.change?.({ value:defaultMutiRegion,result:changeValue });
+    }
+  };
+  const regionTreeMode = React.useMemo(()=>{
+    if((mode=='region'|| mode=='mutiRegion')){
+      if(regionData.length<1){
+        getAreaCode().then((value)=>{
+          defaultMutiRegionChange(value,defaultMutiRegion);
+          setRegionData(value);
+          getRegionTree(value,regionType,mode).then(tree=>{
+            setRegionTree(tree);
+          });
+        });
+      }else{
+        getRegionTree(regionData,regionType,mode).then(tree=>{
+          setRegionTree(tree);
+        });
+      }
+    }
+    switch(regionType){
+      case 'levelOne':{
+        setRegionDepth(1);
+        break;
+      }
+      case 'levelTwo':{
+        setRegionDepth(2);
+        break;
+      }
+      case 'levelThree':{
+        setRegionDepth(3);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+
+  },[regionType,mode,regionData]);
+
+  React.useEffect(() => {
+    // tcb过滤参数
+    const whereEffected = [].concat(getWhereList(where));
+    if ((format === 'father-son' || format === 'related') && dataSourceName && viewId) {
+      fetchData({
+        dataSourceName: dataSourceName,
+        viewId: viewId,
+        methodName: 'wedaGetRecords',
+        params: whereEffected
+      });
+    }
+  }, [where]);
+
+  // 获取数据列表中主列字段，将其作为选项
+  React.useEffect(() => {
+    if (records && records.length !== 0 && primaryField) {
+      const option = records.map(item => {
+        return {
+          label: item[primaryField],
+          value: item._id
+        };
+      });
+      setOption(option);
+    }
+  }, [records]);
+
+  // 获取数据列表
+  const fetchData = async (param: {
+    dataSourceName?: string,
+    viewId?: string,
+    methodName?: string,
+    params?: any,
+  }) => {
+    let pageNo = 1;
+    let pageSize = 200;
+    let records = [];
+    let total = 99999;
+    for (let index = 0; index < Math.floor(total / pageSize) + 1; index++) {
+      let data = await callDataSource({
+        dataSourceName: param.dataSourceName,
+        viewId: param.viewId,
+        methodName: param.methodName,
+        params: {
+          where: param.params,
+          pageNo: pageNo,
+          pageSize: pageSize
+        },
+      });
+      pageNo = pageNo + 1;
+      if (data?.records) {
+        total = data?.total || 0;
+        records = records.concat(data?.records);
+      }
+
+    }
+
+    if (records) {
+      setRecords(records);
+    }
+  };
+
+  React.useEffect(() => {
+    // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+    if (format === 'x-enum' && enumName) {
+      fetchEnumData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+    }
+  }, [enumName]);
+
+  // 获取自定义选项集
+  const fetchEnumData = 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,
+      };
+    });
+    setOption(enumOption);
+  };
 
   const isFlex = layout !== 'vertical';
   const subCls = classNames({
@@ -91,19 +280,26 @@ export default function Select({
     !!date && (options.defaultDate = date);
     !!startDate && (options.start = decodeIsoDatetime(startDate, 'date'));
     !!endDate && (options.end = decodeIsoDatetime(endDate, 'date'));
+    if (['year', 'month'].includes(dateMode)) {
+      !!startDate && (options.startDate = startDate);
+      !!endDate && (options.endDate = endDate);
+    }
+    options.onConfirm = (result) => {
+      const value = formatDateModeValue(result, dateMode);
+      setDate(value);
+      events.change({ value: new Date(value).getTime() });
+    };
 
-    weui.datePicker({
-      ...options,
-      onConfirm(result) {
-        const value = moment()
-          .year(result[0].value)
-          .month(result[1].value - 1)
-          .date(result[2].value)
-          .format('YYYY-MM-DD');
-        setDate(value);
-        events.change({ value: new Date(value).getTime() });
-      },
-    });
+    if (dateMode === 'year') {
+      // 年，1 列
+      yearPicker({ ...options });
+    } else if (dateMode === 'month') {
+      // 年月，2 列
+      monthPicker({ ...options });
+    } else {
+      // 年月日，3 列
+      weui.datePicker({ id: String(Date.now()), ...options });
+    }
   };
 
   const onTimeClick = function () {
@@ -120,41 +316,112 @@ export default function Select({
         const date = moment().hour(result[0].value).minute(result[1].value);
         const value = date.format('HH:mm');
         setTime(value);
-        events.change({
+        events?.change({
           value: (date.hour() * 60 * 60 + date.minute() * 60) * 1000,
         });
       },
     });
   };
+  const isNull = (val) => [undefined, null].includes(val);
+  const getWhereList = (where) => {
+    let result = [];
+    Array.isArray(where) &&
+      where.forEach((item1) => {
+        if (item1?.groupLogic !== 'or' && Array.isArray(item1?.logicData)) {
+          item1?.logicData.forEach((item2) => {
+            let [rel, val] = [REL_DICT[item2?.rel], item2?.value];
+            if ('_begin_with' === rel) {
+              rel = 'regex';
+              val = `^${val}`;
+            }
+            if ('_exclude' === rel) {
+              rel = 'regex';
+              val = `^((?!${val}).)*$`;
+            }
+            if (item2?.logic !== 'or' && item2?.key && rel && !isNull(val)) {
+              result.push({ key: item2.key, rel, val });
+            }
+          });
+        }
+      });
+    return result;
+  };
 
   const onSelect = function () {
-    weui.picker(range, {
-      defaultValue: [selectedValue || range[0].value],
-      onConfirm(result) {
-        const item = result[0];
-        setSelectedValue(item?.value);
-        events.change({ value: item?.value });
-      },
-      className: 'weda-ui weda-picker',
-    });
+    if (format === 'father-son' || format === 'related' || format === 'x-enum') {
+      weui.picker(option, {
+        id: String(Date.now()),
+        defaultValue: [selectedValue || option[0].value],
+        onConfirm(result) {
+          const item = result[0];
+          setSelectedValue(item?.value);
+          events.change({ value: item?.value });
+        },
+        className: 'weda-ui weda-picker',
+      });
+    } else {
+      weui.picker(range, {
+        id: String(Date.now()),
+        defaultValue: [selectedValue || range[0].value],
+        onConfirm(result) {
+          const item = result[0];
+          setSelectedValue(item?.value);
+          events.change({ value: item?.value });
+        },
+        className: 'weda-ui weda-picker',
+      });
+    }
+  };
+  let regionTimer;
+  const momentClick =async () => {
+    regionTimer = setInterval(() => {
+      setTimeout(()=>{
+        if(regionTree.length!=0){
+        onRegionClick();
+        }
+      }, 0);
+  }, regionTree.length==0?500:0);
   };
-
   const onRegionClick = function () {
-    regionPicker({
-      defaultValue:
-        (defaultRegion && defaultRegion.length <= 0)
-          ? ['北京市', '北京市', '东城区']
-          : defaultRegion,
-      onConfirm(result) {
-        const value = result.map((item) => item.value);
-        setRegion(value);
-        events.change({ value });
-      },
-      className: 'weda-ui weda-picker',
-    });
+    clearInterval(regionTimer);
+    let defaultValue=[];
+    if(mode=='region'){
+     defaultRegion && defaultRegion.length <= 0
+      ? defaultValue=['北京市', '北京市', '东城区']
+      : defaultValue= defaultRegion;
+    }else{
+      mutiRegion && mutiRegion.length <= 0
+      ? defaultValue=['北京市', '北京市', '东城区']
+      : defaultValue= mutiRegion;
+    }
+      regionPicker(
+        {
+          defaultValue:defaultValue,
+          depth:regioDepth,
+          onConfirm(result) {
+            const value = result.map((item) => item.value);
+            //const value=regionValueSplit(typeRegion,defaultvalue);
+            mode=='region'?setRegion(value):setMutiRegion(value);
+            const changeValue =  mode=='region'?value:value.join(',');
+            onChange && onChange(changeValue);
+            events?.change?.({ value:changeValue,result:result.map((item)=>{
+              return {
+                value:item?.value,
+                code:item?.code
+              };
+            }) });
+
+          },
+          onChange(result) {
+          },
+          className: 'weda-ui weda-picker',
+          id: new Date().valueOf(),
+        },
+        regionTree
+      );
   };
 
-  const onClick = function () {
+  const onClick =async function () {
     if (disabled) {
       return;
     }
@@ -173,7 +440,11 @@ export default function Select({
         break;
       }
       case 'region': {
-        onRegionClick();
+        momentClick();
+        break;
+      }
+      case 'mutiRegion': {
+        momentClick();
         break;
       }
       default: {
@@ -183,35 +454,42 @@ export default function Select({
   };
 
   const result = React.useMemo(() => {
+    let selectLabel = '';
+    if (format === 'father-son' || format === 'related' || format === 'x-enum') {
+      selectLabel = (option ?? []).find((item) => item.value === selectedValue)?.label;
+    } else {
+      selectLabel = (range ?? []).find((item) => item.value === selectedValue)?.label;
+    }
     return {
-      selector: (range ?? []).find((item) => item.value === selectedValue)?.label,
+      selector: selectLabel,
       date: date,
       time: time,
       region: (region || []).join(separator), // region 有可能是空串
+      mutiRegion:mutiRegion
     };
-  }, [range, selectedValue, date, time, region, separator]);
+  }, [range, selectedValue, date, time, region, separator,mutiRegion]);
 
   return (
-      <div className={subCls}>
-        <div className="weui-cell__bd weui-flex">
-          <input
-            onClick={onClick}
-            className="weui-input"
-            type="select"
-            name={name}
-            placeholder={placeholder}
-            value={result[mode] ?? ''}
-            disabled={disabled}
-            autoComplete={'off'}
-            readOnly={true}
-          />
-        </div>
+    <div className={subCls}>
+      <div className="weui-cell__bd weui-flex">
+        <input
+          onClick={onClick}
+          className="weui-input"
+          type="select"
+          name={name}
+          placeholder={placeholder}
+          value={result[mode] ?? ''}
+          disabled={disabled}
+          autoComplete={'off'}
+          readOnly={true}
+          data-testid="form-item-select"
+        />
       </div>
+    </div>
   );
 }
 
-
-export function decodeIsoDatetime(isoStringOrTimesnap, type) {
+export function decodeIsoDatetime(isoStringOrTimesnap, type, dateMode = 'day') {
   if (!isoStringOrTimesnap) {
     return null;
   }
@@ -246,7 +524,47 @@ export function decodeIsoDatetime(isoStringOrTimesnap, type) {
     } else {
       return moment(isoStringOrTimesnap).format('HH:mm');
     }
-  } else {                                                
-    return moment(isoStringOrTimesnap).format('YYYY-MM-DD');
+  } else {
+    return moment(isoStringOrTimesnap).format(getDateModeFormat(dateMode));
   }
 }
+
+/**
+ * 根据时间模式，将 picker 返回的值转成对应的 年-月-日
+ */
+export const formatDateModeValue = (result = [], dateMode = 'day') => {
+  let [year, month, day] = [
+    result[0]?.value,
+    result[1]?.value || 1,
+    result[2]?.value || 1,
+  ];
+  if (dateMode === 'year') {
+    month = 1;
+    day = 1;
+  }
+  if (dateMode === 'month') {
+    day = 1;
+  }
+  const value = moment()
+    .year(year)
+    .month(month - 1)
+    .date(day)
+    .format(getDateModeFormat(dateMode));
+  return value;
+};
+
+/**
+ * 不同时间模式对应的展示格式
+ */
+export const getDateModeFormat = (dateMode = 'day') => {
+  switch (dateMode) {
+    case 'year':
+      return 'YYYY';
+    case 'month':
+      return 'YYYY-MM';
+    case 'day':
+      return 'YYYY-MM-DD';
+    default:
+      return 'YYYY-MM-DD';
+  }
+};

package/src/web/components/form/select/index.css

@@ -0,0 +1,10 @@
+.year-picker__overlay {
+  width: 300px;
+}
+
+.year-picker__overlay .year-picker__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 700;
+}