@cloudbase/weda-ui 0.2.15 → 1.0.21

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

@@ -3,59 +3,135 @@ import * as _moment from 'moment';
 import { usePlatform } from '../../../utils/platform';
 import SelectH5, { decodeIsoDatetime } from './h5';
 import classNames from '../../../utils/classnames';
-import {Select as TeaSelect, DatePicker, TimePicker, Cascader, ConfigProvider} from 'tea-component';
+import {
+  Select as TeaSelect,
+  DatePicker,
+  TimePicker,
+  Cascader,
+  ConfigProvider,
+} from 'tea-component';
 import isObjectEqual from '../../../utils/isObjectEqual';
-import { getRegionTree } from './region';
+import { getRegionTree,getAreaCode } from './region';
 import { renderDecorator } from '../renderDecorator';
 import { CommonFormPropsType } from '../types';
+import YearPicker from './year';
+import { callDataSource, callWedaApi } from '../../../utils/tcb';
+import destr from 'destr';
 
-// @ts-expect-error TODO: fix 与plugin构建阶段效果不同
-const moment = (typeof _moment === 'function' ? _moment : _moment.default) as _moment.moment;
-export default function Select(props) {
-    const {
-      id,
-      style,
-      className,
-      label = '标题',
-      labelVisible = true,
-      layout = 'horizontal',
-      requiredFlag = false,
-      size = 'l',
-      decorator
-    } = props;
-    const platform = usePlatform();
-
-    let selectEl;
-    if(platform === 'h5') {
-      selectEl = <SelectH5 {...props} />;
-    } else {
-      selectEl = <SelectPc {...props} />;
-    }
-    const cls = classNames({
-      'weda-ui': true,
-      'weda-select': true,
-      [className]: className,
-    });
-    return renderDecorator(selectEl, decorator)(
-      {
-        id,
-        className: cls,
-        style,
-        label: labelVisible ? label : null,
-        layout,
-        multiCell: false,
-        requiredFlag,
-        size
+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', // 不在多选值
+};
+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;
+};
+// @ts-ignore TODO: fix 与plugin构建阶段效果不同
+export const moment = (
+  typeof _moment === 'function' ? _moment : _moment.default
+) as any;
+
+export default function Select(props) {
+  const {
+    id,
+    style,
+    className,
+    label = '标题',
+    labelVisible = true,
+    layout = 'horizontal',
+    requiredFlag = false,
+    size = 'l',
+    decorator,
+  } = props;
+  const platform = usePlatform();
+
+  let selectEl;
+  if (platform === 'h5') {
+    selectEl = <SelectH5 {...props} />;
+  } else {
+    selectEl = <SelectPc {...props} />;
+  }
+  const cls = classNames({
+    'weda-ui': true,
+    'weda-select': true,
+    [className]: className,
+  });
+  return renderDecorator(
+    selectEl,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    layout,
+    multiCell: false,
+    requiredFlag,
+    size,
+  });
 }
 export interface PropsType extends CommonFormPropsType {
   size: 's' | 'm' | 'l' | 'full';
   placeholder: string;
-  mode: 'selector' | 'date' | 'time' | 'region';
+  mode: 'selector' | 'date' | 'time' | 'region'| 'mutiRegion';
+  dateMode: 'day' | 'month' | 'year';
   // selector mode
   range?: any[];
   defaultValue?: string;
+  dataSourceName?: string;
+  viewId?: string;
+  enumName?: string;
+  format?: string;
+  primaryField?: string;
+  tipBlock?: any;
+  // 数据筛选
+  where?: {
+    groupLogic?: null | 'or' | 'and';
+    logicData?: {
+      keyType?: 'field' | 'var-font';
+      key: string;
+      rel: 'eq' | 'neq' | 'lt' | 'gt' | 'gte' | 'lte' | 'in' | 'nin' | 'search';
+      value: any;
+      valueType?: 'const' | 'var-font' | 'relative-amount' | 'field';
+      expression?: string | boolean;
+      logic?: null | 'or' | 'and' | string;
+      extra?: {
+        type?: 'string' | 'number' | 'boolean' | 'object' | 'array' | string;
+        format?: string | null;
+        isExpression?: boolean;
+      };
+    }[];
+  }[];
   // date mode
   startDate?: string;
   endDate?: string;
@@ -66,9 +142,13 @@ export interface PropsType extends CommonFormPropsType {
   defaultTime?: string | number;
   // region mode
   defaultRegion?: any[];
+  regionType?: 'levelOne' | 'levelTwo' | 'levelThree';
   separator?: string;
   requiredFlag?: boolean;
-}  
+  regionTree?:any[],
+  defaultMutiRegion?:string;
+  onChange?: (v: any) => void; // 配合 fomily 受控使用
+}
 
 export const defaultProps = {
   // 系统属性
@@ -85,32 +165,41 @@ export const defaultProps = {
   requiredFlag: false,
   // selector mode
   range: [
-    { name: '选项一', value: 'first' },
-    { name: '选项二', value: 'second' },
+    { name: '选项1', value: '1' },
+    { name: '选项2', value: '2' },
   ],
   // region mode
   separator: ',',
 };
 
 function SelectPc({
-    defaultValue,
-    placeholder = '请选择',
-    mode = 'selector',
-    events = {},
-    disabled = false,
-    range = defaultProps.range,
-    startDate,
-    endDate,
-    defaultDate,
-    defaultTime,
-    startTime,
-    endTime,
-    defaultRegion,
-    separator = defaultProps.separator,
-    size = defaultProps.size,
+  where,
+  dataSourceName,
+  viewId,
+  format,
+  primaryField,
+  enumName,
+  defaultValue,
+  placeholder = '请选择',
+  mode = 'selector',
+  dateMode = 'day',
+  events = {change: null },
+  disabled = false,
+  range = defaultProps.range,
+  startDate,
+  endDate,
+  defaultDate,
+  defaultTime,
+  startTime,
+  endTime,
+  defaultRegion,
+  defaultMutiRegion,
+  regionType,
+  separator = defaultProps.separator,
+  size = defaultProps.size,
+  onChange
 }: PropsType) {
-    
-    // 两次默认值不同, 需要刷新
+  // 两次默认值不同, 需要刷新
   const prevDefaultRef = React.useRef<any>();
   const [date, setDate] = React.useState(
     decodeIsoDatetime(defaultDate, 'date')
@@ -118,11 +207,101 @@ function SelectPc({
   const [time, setTime] = React.useState(
     decodeIsoDatetime(defaultTime, 'time')
   );
-  const [region, setRegion] = React.useState(
-    defaultRegion || undefined
-  );
+  const [regionTree,setRegionTree] = React.useState([]);
+  const [regionData,setRegionData] = React.useState([]);
+  const [region, setRegion] = React.useState(defaultRegion || undefined);
+  const [mutiRegion, setMutiRegion] = React.useState(defaultMutiRegion!=null?defaultMutiRegion.split(','):[]);
   const [selectedValue, setSelectedValue] = React.useState(defaultValue);
 
+  const [option, setOption] = React.useState([]);
+  const [records, setRecords] = React.useState([]);
+
+  React.useEffect(() => {
+    // 筛选参数
+    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: {
+          pageNo: pageNo,
+          pageSize: pageSize,
+          where: param.params,
+        },
+      });
+      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);
+  };
+
   React.useEffect(() => {
     let hasChange = false;
     if (prevDefaultRef.current?.defaultValue !== defaultValue) {
@@ -142,95 +321,176 @@ function SelectPc({
       setRegion(defaultRegion || []); // region 有可能是空串
       hasChange = true;
     }
+    if (!isObjectEqual(prevDefaultRef.current?.defaultMutiRegion, defaultMutiRegion)) {
+      setMutiRegion(defaultMutiRegion?defaultMutiRegion.split(','):[]);
+      hasChange = true;
+    }
     if (hasChange) {
       prevDefaultRef.current = {
         defaultDate,
         defaultTime,
         defaultRegion,
+        defaultMutiRegion
       };
     }
   });
-    const onDataChange = (value) => {
-      let finalVal;
-      if(mode === 'date') {
-        finalVal = value.valueOf();
-      } else if (mode === 'time') {
-        finalVal = (value.hour() * 60 * 60 + value.minute() * 60) * 1000;
-      } else if (mode === 'region') {
-        finalVal = value ?? [];
-      } else {
-        finalVal = value;
+  const regionTreeMode = React.useMemo(()=>{
+    if(mode=='region'||mode=='mutiRegion'){
+      if(regionData.length<1){
+        getAreaCode().then((value)=>{
+          setRegionData(value);
+          getRegionTree(value,regionType,mode).then(tree=>{
+            setRegionTree(tree);
+          });
+        });
+      }else{
+        getRegionTree(regionData,regionType,mode).then(tree=>{
+          setRegionTree(tree);
+        });
       }
-      events.change({value: finalVal});
-    };
-    const createDropdown = () => {
-        switch (mode) {
-            case 'selector': 
-              return <TeaSelect
-                        size={size}
-                        onChange={onDataChange}
-                        disabled={disabled}
-                        value={selectedValue}
-                        type="simulate"
-                        appearance="button"
-                        placeholder={placeholder}
-                        options={range.map(i => ({text: i.label, value: i.value}))}
-              />;
-            case 'date':
-              {
-                const now = moment();
-                const start = startDate ? decodeIsoDatetime(startDate, 'date') : `${now.year() - 20}-01-01`;
-                const end = endDate ? decodeIsoDatetime(endDate, 'date') : `${now.year() + 20}-12-31`;
-                return <DatePicker
-                range={[moment(start), moment(end)]}
-                onChange={onDataChange}
-                disabled={disabled}
-                placeholder={placeholder}
-                value={date ? moment(date): undefined}
-                
-                />;
-              }
-            case 'time':
-              {
-                const start = startTime ? decodeIsoDatetime(startTime, 'time') : '00:00';
-                const end = endTime ? decodeIsoDatetime(endTime, 'time') : '23:59';
-                return <TimePicker
-                        onChange={onDataChange}
-                        disabled={disabled}
-                        placeholder={placeholder}
-                        value={time ? moment(time , 'HH:mm') : undefined}
-                        range={[moment(start, 'HH:mm'), moment(end, 'HH:mm')]}
-                        format="HH:mm"
-                      />;
-              }
-            case 'region':
-              return <Cascader
-              clearable
-              searchable
-              type="menu"
-              disabled={disabled}
-              data={getRegionTree()}
-              multiple={false}
+   }
+   getRegionTree(regionData,regionType,mode).then(value=>{
+     setRegionTree(value);
+   });
+  },[regionType,mode,regionData]);
+  const onDataChange = (value) => {
+    let finalVal;
+    if (mode === 'date') {
+      finalVal = value.valueOf();
+    } else if (mode === 'time') {
+      finalVal = (value.hour() * 60 * 60 + value.minute() * 60) * 1000;
+    } else if (mode === 'region') {
+      finalVal = value ?? [];
+      setRegion(value);
+    } else if (mode === 'mutiRegion') {
+      finalVal = value.join(',');
+      setMutiRegion(value);
+    }  else {
+      finalVal = value;
+    }
+    onChange && onChange(finalVal);
+    events?.change?.({ value: finalVal });
+  };
+  const createDropdown = () => {
+    switch (mode) {
+      case 'selector':
+        return (
+          <div data-testid="form-select" >
+            <TeaSelect
+              matchButtonWidth
+              size={size}
               onChange={onDataChange}
-              valueRender={
-                (options) =>
-                  options.map(({ label, value }, index) => (
-                    <React.Fragment key={`${value}-${index}`}>
-                      {index !== 0 && `${separator}`}
-                      {label || value}
-                    </React.Fragment>
-                  ))
-              }
-              
-              value={region} 
-            />;
+              disabled={disabled}
+              value={selectedValue}
+              type="simulate"
+              appearance="button"
+              placeholder={placeholder}
+              options={(format === 'father-son' || format === 'related' || format === 'x-enum') ? option.map(i => ({ text: i.label, value: i.value })) : range.map(i => ({ text: i.label, value: i.value }))}
+            /></div>
+        );
+      case 'date': {
+        const now = moment();
+        const start = startDate
+          ? decodeIsoDatetime(startDate, 'date')
+          : `${now.year() - 20}-01-01`;
+        const end = endDate
+          ? decodeIsoDatetime(endDate, 'date')
+          : `${now.year() + 20}-12-31`;
+        const dateProps: any = {
+          range: [moment(start), moment(end)],
+          onChange: onDataChange,
+          disabled,
+          placeholder,
+          value: date ? moment(date) : undefined,
+          'data-testid': 'form-item-select',
+        };
+        if (dateMode === 'year') {
+          return (
+            <YearPicker
+              {...dateProps}
+              range={[
+                startDate && dateProps.range[0],
+                endDate && dateProps.range[1],
+              ]}
+            />
+          );
+        } else if (dateMode === 'month') {
+          return <DatePicker.MonthPicker {...dateProps} />;
+        } else {
+          return <DatePicker {...dateProps} />;
         }
-    };
-    const dropdown = createDropdown();
-    
-    return (
-      <ConfigProvider classPrefix="wedatea2td">
-        {dropdown}
-      </ConfigProvider>
-    );
+      }
+      case 'time': {
+        const start = startTime
+          ? decodeIsoDatetime(startTime, 'time')
+          : '00:00';
+        const end = endTime ? decodeIsoDatetime(endTime, 'time') : '23:59';
+        return (
+          <TimePicker
+            onChange={onDataChange}
+            disabled={disabled}
+            placeholder={placeholder}
+            value={time ? moment(time, 'HH:mm') : undefined}
+            range={[moment(start, 'HH:mm'), moment(end, 'HH:mm')]}
+            format="HH:mm"
+          />
+        );
+      }
+      case 'region':
+        return (
+          <Cascader
+            clearable
+            searchable
+            type="menu"
+            disabled={disabled}
+            data={regionTree}
+            multiple={false}
+            onChange={onDataChange}
+            valueRender={(options) =>
+              options.map(({ label, value }, index) => (
+                <React.Fragment key={`${value}-${index}`}>
+                  {index !== 0 && `${separator}`}
+                  {label || value}
+                </React.Fragment>
+              ))
+            }
+            value={region}
+          />
+        );
+        case 'mutiRegion':
+        return (
+          <Cascader
+            clearable
+            searchable
+            type="menu"
+            disabled={disabled}
+            data={regionTree}
+            multiple={false}
+            onChange={onDataChange}
+            onLoad={(regionTree, options)=>{
+              return new Promise((resolve) => {
+                setTimeout(() => {
+                  resolve();
+
+                },1000);
+              });
+
+            }}
+            valueRender={(options) =>
+              options.map(({ label, value }, index) => (
+                <React.Fragment key={`${value}-${index}`}>
+                  {index !== 0 && ','}
+                  {label || value}
+                </React.Fragment>
+              ))
+            }
+            value={mutiRegion}
+          />
+        );
+    }
+  };
+
+  const dropdown = createDropdown();
+
+  return <ConfigProvider classPrefix="wedatea2td">{dropdown}</ConfigProvider>;
 }