@cloudbase/weda-ui 0.2.15 → 1.0.21

package/src/web/components/form/select/region/index.ts

@@ -1,40 +1,131 @@
-// 暂时把地区信息打包在本地, 后续移到COS桶内
-import {provinces} from './provinces';
-import {cities} from './cities';
-import {regions} from './regions';
 import weui from '../../../../utils/weui';
+import { callWedaApi } from '../../../../utils/tcb';
 
 let tree;
 
-export function getRegionTree() {
-  if (!tree) {
-    tree = provinces.map((province) => {
-      return {
-        label: province.name,
-        value: province.name,
-        children: cities
-          .filter((city) => city.parent_code === province.code)
-          .map((city) => {
-            return {
-              label: city.name,
-              value: city.name,
-              children: regions
-                .filter((region) => region.parent_code === city.code)
-                .map((region) => {
-                  return {
-                    label: region.name,
-                    value: region.name,
-                  };
-                }),
-            };
-          }),
-      };
+export async function getRegionTree(regionData,regionType,regionMode) {
+  tree = [];
+  tree = formatTreeData(regionData,regionType,regionMode);
+  return tree;
+}
+
+export  function regionPicker(options,regionTree:any[]) {
+  const weRegionTree =regionTree.length==0?[{label:'地区数据加载中，请关闭弹窗后重试',value:null,children:null}]:regionTree;
+  weui.picker(weRegionTree, options);
+}
+/**
+ * 获取运行态地区数据
+ */
+ export async function getAreaCode() {
+  try {
+    const res = await callWedaApi({
+      action: 'QueryRuntimeAreaCode',
+      data: {Mask: "11100"},
     });
+    return res?.AreaCodeList;
+  } catch (error) {
+    console.error('错误', error);
+    return {};
   }
-
-  return tree;
 }
+/**
+ * 构建树形结构
+ */
+ function formatTreeData(arr,regionType,regionMode) {
+  let provicesData = [];
+    arr.forEach(item=>{
+    //省数据集合
+    if(item?.Type==1&&item?.Deprecated==false){
+      provicesData.push({
+        label: item.Value,
+        value: item.Value,
+        code:item.Code,
+        type:item.Type,
+        centralCity:item.CentralCity,
+        children: regionType!= 'levelOne'||regionMode=='region'?[{
+          label: item.Value,
+          value: item.Value,
+          code:item.Code,
+          type:item.Type,
+          children: regionType!= 'levelTwo'||regionMode=='region'?[{
+            label: item.Value,
+            value: item.Value,
+            code:item.Code,
+            type:item.Type,
+            centralCity:item.CentralCity,
+          }]:null
+        }]:null
+      });
+    }
+  });
+  if(regionType!= 'levelOne'||regionMode=='region'){
+    arr.forEach(item=>{
+      //市数据集合
+      if(item?.Type==2&&item?.Deprecated==false){
+        provicesData.map(provice=>{
+          if(provice.code.substr(0, 2) == item.Code.substr(0,2)){
+            if(provice['children'][0].type==1){
+              provice['children']=[];
+            }
+              provice['children'].push({
+                label: item.Value,
+                value: item.Value,
+                code:item.Code,
+                type:item.Type,
+                centralCity:item.CentralCity,
+                children: regionType!= 'levelTwo'||regionMode=='region'?[{
+                  label: item.Value,
+                  value: item.Value,
+                  code:item.Code,
+                  type:item.Type,
+                  centralCity:item.CentralCity,
+                }]:null
+              });
 
-export function regionPicker(options) {
-  weui.picker(getRegionTree(), options);
+      }
+        });
+      }
+    });
+    if(regionType != 'levelTwo'||regionMode=='region'){
+      arr.forEach(item=>{
+        //区数据集合
+        if(item?.Type==3&&item?.Deprecated==false){
+          provicesData.map(provice=>{
+            if(provice.centralCity){
+              provice.children.map(city=>{
+                if(city.code.substr(0, 2) == item.Code.substr(0,2)){
+                  if(city['children'][0].type==1){
+                    city['children']=[];
+                  }
+                    city['children'].push({
+                      label: item.Value,
+                      value: item.Value,
+                      code:item.Code,
+                      //type:item.Type
+                    });
+
+              }});
+            }else{
+              provice.children.map(city=>{
+                if(city.code.substr(0, 4) == item.Code.substr(0,4)){
+                  if(city['children'][0].type==2){
+                    city['children']=[];
+                  }
+                    city['children'].push({
+                      label: item.Value,
+                      value: item.Value,
+                      code:item.Code,
+                      //type:item.Type
+                    });
+
+              }});
+            }
+
+          });
+        }
+      });
+    }
+
+  }
+  return provicesData;
 }

package/src/web/components/form/select/time.jsx

@@ -48,8 +48,98 @@ export function timePicker(options) {
   ];
   weui.picker(hours, {
     ...options,
+    id: String(Date.now()),
     start: [startHour, startMin],
     end: [endHour, endMin],
     defaultValue,
   });
 }
+
+/**
+ * 年选择器
+ */
+export function yearPicker(options) {
+  const { startDate, endDate, defaultDate } = options;
+  if (startDate > endDate) {
+    throw 'startDate is bigger then endDate';
+  }
+  // 当前年
+  const currentYear = new Date().getFullYear();
+  // 默认传入年
+  const defaultYear = defaultDate
+    ? new Date(defaultDate).getFullYear()
+    : currentYear;
+  // 最小年份
+  const minYear = startDate
+    ? new Date(startDate).getFullYear()
+    : currentYear - 100;
+  // 最大年份
+  const maxYear = endDate ? new Date(endDate).getFullYear() : currentYear + 100;
+  const years = Array.from({ length: maxYear - minYear + 1 }).map(
+    (item, index) => ({
+      label: `${minYear + index}年`,
+      value: minYear + index,
+    })
+  );
+  weui.picker(years, {
+    ...options,
+    defaultValue: [defaultYear],
+  });
+}
+
+/**
+ * 年月选择器
+ */
+export function monthPicker(options) {
+  const { startDate, endDate, defaultDate } = options;
+  if (startDate > endDate) {
+    throw 'startDate is bigger then endDate';
+  }
+  const _getYear = (d) => d.getFullYear();
+  const _getMonth = (d) => d.getMonth() + 1;
+  // 当前年月
+  const now = new Date();
+  const [currentYear, currentMonth] = [_getYear(now), _getMonth(now)];
+  // 默认传入年月
+  const def = defaultDate ? new Date(defaultDate) : now;
+  const [defaultYear, defaultMonth] = [_getYear(def), _getMonth(def)];
+  // 最小年月
+  const min = startDate && new Date(startDate);
+  const [minYear, minMonth] = [
+    min ? _getYear(min) : currentYear - 100,
+    min ? _getMonth(min) : 1,
+  ];
+  // 最大年月
+  const max = endDate && new Date(endDate);
+  const [maxYear, maxMonth] = [
+    max ? _getYear(max) : currentYear + 100,
+    max ? _getMonth(max) : 12,
+  ];
+  // 年份月份
+  const years = Array.from({ length: maxYear - minYear + 1 }).map((item, i) => {
+    const year = i + minYear;
+    let months = [];
+    let [minMonthWithYear, maxMonthWithYear] = [1, 12];
+    if (year === minYear) {
+      minMonthWithYear = Math.max(minMonth, 1);
+    }
+    if (year === maxYear) {
+      maxMonthWithYear = Math.min(maxMonth, 12);
+    }
+    months = Array.from({
+      length: maxMonthWithYear - minMonthWithYear + 1,
+    }).map((item, i) => ({
+      label: `${i + minMonthWithYear}月`,
+      value: i + minMonthWithYear,
+    }));
+    return {
+      label: `${i + minYear}年`,
+      value: i + minYear,
+      children: months,
+    };
+  });
+  weui.picker(years, {
+    ...options,
+    defaultValue: [defaultYear, defaultMonth],
+  });
+}

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

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import {
+  Popover,
+  ConfigProvider,
+  useConfig,
+  Input,
+  Icon,
+  Button,
+} from 'tea-component';
+import classNames from '../../../utils/classnames';
+import { moment } from './index';
+import './index.css';
+
+/**
+ * pc 版简易年份选择器
+ * 传参与 DatePicker 保持一致
+ */
+export default function YearPicker(props) {
+  const {
+    range = [],
+    disabled,
+    value,
+    onChange,
+    className,
+    placeholder,
+    ...rest
+  } = props;
+  const { classPrefix } = useConfig();
+  const inputRef = React.useRef(null);
+  const [show, setShow] = React.useState(false);
+  const [page, setPage] = React.useState(0);
+  const [inputValue, setInputValue] = React.useState(transValueToYear(value));
+  const { pageYears, pageStart, pageEnd } = getYears(inputValue, page);
+  const [min, max] = [
+    transValueToYear(range?.[0]),
+    transValueToYear(range?.[1]),
+  ];
+
+  React.useEffect(() => {
+    setInputValue(transValueToYear(value));
+  }, [value]);
+
+  return (
+    <ConfigProvider classPrefix="wedatea2td">
+      <Popover
+        trigger="click"
+        visible={show}
+        onVisibleChange={(v) => !v && setShow(v)}
+        overlay={
+          <div
+            className={classNames(
+              `${classPrefix}-dropdown-box`,
+              'year-picker__overlay'
+            )}
+          >
+            <div
+              className={classNames(
+                `${classPrefix}-calendar__caption`,
+                'year-picker__header'
+              )}
+            >
+              <div className="year-picker__header-title">
+                {pageStart}-{pageEnd}
+              </div>
+              <div className="year-picker__header-actions">
+                <Button
+                  type="link"
+                  icon="arrowleft"
+                  title="上二十年"
+                  onClick={() => setPage((d) => d - 1)}
+                />
+                <Button
+                  type="link"
+                  icon="cur-active"
+                  title="当前二十年"
+                  onClick={() => setPage(0)}
+                />
+                <Button
+                  type="link"
+                  icon="arrowright"
+                  title="下二十年"
+                  onClick={() => setPage((d) => d + 1)}
+                />
+              </div>
+            </div>
+            <div
+              className={classNames(
+                `${classPrefix}-calendar__type--year`,
+                'year-picker__body'
+              )}
+            >
+              {pageYears.map((list) => (
+                <div
+                  key={list.join()}
+                  className={classNames(`${classPrefix}-calendar__row`)}
+                >
+                  {list.map((item) => {
+                    const isSelected = item === inputValue;
+                    const isDisabled =
+                      (min && Number(item) < Number(min)) ||
+                      (max && Number(item) > Number(max));
+                    return (
+                      <div
+                        key={item}
+                        className={classNames(
+                          `${classPrefix}-calendar__cell`,
+                          'year-picker__cell',
+                          {
+                            'is-selected': isSelected,
+                            'is-disabled': isDisabled,
+                          }
+                        )}
+                        onClick={() => {
+                          if (isDisabled) return;
+                          setShow(false);
+                          setInputValue(item);
+                          onChange?.(moment(item));
+                        }}
+                      >
+                        <span>{item}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          </div>
+        }
+      >
+        <div
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...rest}
+          onClick={() => !disabled && setShow(true)}
+          className={classNames(`${classPrefix}-datepicker`, className)}
+        >
+          <div className={classNames(`${classPrefix}-datepicker__input`)}>
+            <Input
+              ref={inputRef}
+              disabled={disabled}
+              placeholder={placeholder}
+              value={inputValue}
+              onFocus={() => inputRef.current.blur()}
+            />
+            <Icon type="dismiss" />
+          </div>
+        </div>
+      </Popover>
+    </ConfigProvider>
+  );
+}
+
+/**
+ * 获取当前20年，page 表示分页，1表示下一页，-1表示上一页
+ * @returns [][]
+ */
+const getYears = (currentYear, page = 0, range = []) => {
+  currentYear = currentYear || new Date().getFullYear();
+  const startYear = (Math.floor(parseInt(currentYear) / 20) + page) * 20;
+  const pageYears = Array.from({ length: 5 }).map((item, i1) =>
+    Array.from({ length: 4 }).map((item, i2) => i1 * 4 + i2 + startYear + '')
+  );
+  return { pageYears, pageStart: startYear, pageEnd: startYear + 20 - 1 };
+};
+
+/**
+ * 输入 moment 值转 string 年份
+ */
+const transValueToYear = (val) => {
+  return moment.isMoment(val) ? val.format('YYYY') : '';
+};

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

@@ -7,6 +7,7 @@ import { useSyncValue } from '../../../utils/useSyncValue';
 import { isCloudFileID } from '../../../utils/platform';
 import { IMAGE_TYPES } from './uploader.pc';
 import { CommonFormPropsType } from '../types';
+import { v4 } from 'uuid';
 
 const uploadPath = 'weda-uploader';
 /**
@@ -39,7 +40,12 @@ export function ImageUploaderH5({
   //上传进度
   const [progress, setProgress] = React.useState(0);
   const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
+
   const fileIdList = React.useMemo(() => {
+    //兼容h5默认值为空时情况
+    if (inputValue === null) {
+      setInputValue('');
+    }
     if (typeof inputValue === 'string') {
       // single = true 传入的是字符串
       return [inputValue].filter((i) => i.length > 0); // 排除空串
@@ -66,7 +72,7 @@ export function ImageUploaderH5({
   React.useEffect(() => {
     if (single) {
       const file = fileIdList[0] || '';
-      file && onChange && onChange(file);
+      onChange && onChange(file);
       events.change && events.change({ value: file });
     } else {
       onChange && onChange(fileIdList);
@@ -88,7 +94,9 @@ export function ImageUploaderH5({
     getCloudInstance().then(async (tcb) => {
       try {
         const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/uploader-${Date.now()}.${fileType}`;
+        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
+          file?.name
+        }`;
         const { fileID } = await tcb.uploadFile({
           cloudPath,
           filePath: file,
@@ -98,6 +106,7 @@ export function ImageUploaderH5({
         fileID && setInputValue((list) => [...list, fileID]);
         fileID && events.success && events.success({ value: fileID, file });
       } catch (err) {
+        weui.alert(`${err}` || '上传失败');
         events.error && events.error(err);
       } finally {
         setUploading(false);
@@ -112,6 +121,13 @@ export function ImageUploaderH5({
       : Array.from(new Set(acceptTypes));
   }, [acceptTypes]);
 
+  const showAdd = React.useMemo(() => {
+    if(single) {
+      // single 模式时，仅当数组为空时显示
+      return fileIdList.length < 1;
+    }
+    return fileIdList.length < maxUploadCount;
+  }, [fileIdList, single, maxUploadCount]);
   return (
     <div className={cls} id={id} style={style}>
       <div className="weui-cell">
@@ -140,8 +156,7 @@ export function ImageUploaderH5({
                   </li>
                 )}
               </ul>
-              {(fileIdList.length < maxUploadCount ||
-                (single && fileIdList.length < 1)) && ( // single 模式时，仅当数组为空时显示
+              {showAdd && (
                 <div className="weui-uploader__input-box">
                   <input
                     id="uploaderInput"

package/src/web/components/form/uploader/uploader.pc.tsx

@@ -14,7 +14,6 @@ import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import { isCloudFileID } from '../../../utils/platform';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { H5UploaderProps } from './uploader.h5';
-
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
@@ -81,7 +80,6 @@ export function UploaderPCInner(props) {
   // 文件列表
   const [fileIDList, setfileIDList] = React.useState([]);
   const fileRef = React.useRef(fileIDList);
-
   React.useEffect(() => {
     let initialValue = []
       .concat(defaultValue)
@@ -90,14 +88,14 @@ export function UploaderPCInner(props) {
       initialValue = initialValue[0] ? [initialValue[0]] : [];
     }
     setfileIDList(initialValue);
-  }, []);
+  }, [defaultValue]);
 
   // 值变化事件
   React.useEffect(() => {
     if (!isObjectEqual(fileRef.current, fileIDList)) {
       if (single) {
         const file = fileIDList[0] || '';
-        file && onChange && onChange(file);
+        onChange && onChange(file);
         events.change && events.change({ value: file });
       } else {
         onChange && onChange(fileIDList);
@@ -132,7 +130,9 @@ export function UploaderPCInner(props) {
     getCloudInstance().then(async (tcb) => {
       try {
         const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${uploadFileName}-${v4()}.${fileType}`;
+        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
+          file?.name
+        }`;
         const { fileID } = await tcb.uploadFile({
           cloudPath,
           filePath: file,
@@ -140,8 +140,9 @@ export function UploaderPCInner(props) {
         });
         fileID && setfileIDList((list) => [...list, fileID]);
         fileID && events.success && events.success({ value: fileID, file });
-      } catch (e) {
-        events.error && events.error({ value: e, file });
+      } catch (err) {
+        message.error({ content: `${err}` || '上传失败' });
+        events.error && events.error(err);
       } finally {
         setUploading(false);
         setProgress(0);