@cloudbase/weda-ui 0.2.16 → 1.0.24

package/src/mp/components/form/uploader/index.js

@@ -24,8 +24,7 @@ Component({
       value: 'horizontal',
     },
     defaultValue: {
-      type: Object,
-      value: '',
+      type: null,
     },
     single: {
       type: Boolean,
@@ -41,30 +40,39 @@ Component({
     cloudFile: [],
     files: [],
     urls: [],
+    singleFlag: false,
     uploadFile: async function (files) {
-      // 文件上传的函数，返回一个promise
-      const uploadPath = 'weda-uploader';
-      const tcb = await getCloudInstance();
-      const uploadPromise = files.tempFilePaths.map(
-        async (tempFilePath, index) => {
-          var spark = new SparkMD5.ArrayBuffer();
-          spark.append(files.contents[index]);
-          var md5Path = spark.end(false);
-          const fileType = tempFilePath.split('.')[1];
-          const cloudPath = `${uploadPath}/${md5Path}-${Date.now()}.${fileType}`;
-          const uploadRes = await tcb.uploadFile({
-            cloudPath,
-            filePath: tempFilePath,
-          });
-          return { fileID: uploadRes.fileID };
-        }
-      );
-      const uploadFileList = await Promise.all(uploadPromise);
-      const cloudUrls = uploadFileList.map((file) => file.fileID);
-      // 这里返回的东西会在uploadSuccess回调函数中获取到
-      // https://github.com/wechat-miniprogram/weui-miniprogram/blob/a3630575910302e3b94e69fcef266d2b509de650/src/components/uploader/uploader.ts#L149
-      // 写死的从返回值的 .urls 获取展示用的url来用。一定要将tempFilePaths透传下去，否则会重新加载然后出现闪白
-      return { urls: files.tempFilePaths, cloudUrls };
+      try {
+        // 文件上传的函数，返回一个promise
+        const uploadPath = 'weda-uploader';
+        const tcb = await getCloudInstance();
+        const uploadPromise = files.tempFilePaths.map(
+          async (tempFilePath, index) => {
+            var spark = new SparkMD5.ArrayBuffer();
+            spark.append(files.contents[index]);
+            var md5Path = spark.end(false);
+            const fileType = tempFilePath.split('.')[1];
+            const cloudPath = `${uploadPath}/${md5Path}-${Date.now()}.${fileType}`;
+            const uploadRes = await tcb.uploadFile({
+              cloudPath,
+              filePath: tempFilePath,
+            });
+            return { fileID: uploadRes.fileID };
+          }
+        );
+        const uploadFileList = await Promise.all(uploadPromise);
+        const cloudUrls = uploadFileList.map((file) => file.fileID);
+        // 这里返回的东西会在uploadSuccess回调函数中获取到
+        // https://github.com/wechat-miniprogram/weui-miniprogram/blob/a3630575910302e3b94e69fcef266d2b509de650/src/components/uploader/uploader.ts#L149
+        // 写死的从返回值的 .urls 获取展示用的url来用。一定要将tempFilePaths透传下去，否则会重新加载然后出现闪白
+        return { urls: files.tempFilePaths, cloudUrls };
+      } catch (e) {
+        wx.showToast({
+          title: `${e}` || '上传失败',
+          icon: 'none',
+          duration: 2000,
+        });
+      }
     },
   },
   methods: {
@@ -75,7 +83,7 @@ Component({
       const urls = e.detail.cloudUrls; // uploadFile 获取返回值
       // 小程序自带tempURL 不需要调用 tcb.getTempFileURL 获取
       this.triggerEvent('success', {
-        value: urls[0],
+        value: urls,
       });
       this.setData({
         files: this.data.files.concat(e.detail.urls.map((url) => ({ url }))),
@@ -83,30 +91,54 @@ Component({
       });
     },
     onDelete: function (e) {
-      this.setData({
-        files: this.data.files.filter((v, index) => e.detail.index !== index),
-        urls: this.data.urls.filter((v, index) => e.detail.index !== index),
-      });
+      if (this.data.urls.length == 0) {
+        var storgeUrls = [];
+        this.data.cloudFile.forEach((v, index) => {
+          if (e.detail.index != index) {
+            storgeUrls.push(v);
+          }
+        });
+        this.setData({
+          files: this.data.files.filter((v, index) => e.detail.index !== index),
+          urls: storgeUrls,
+        });
+      } else {
+        this.setData({
+          files: this.data.files.filter((v, index) => e.detail.index !== index),
+          urls: this.data.urls.filter((v, index) => e.detail.index !== index),
+        });
+      }
     },
   },
   observers: {
     defaultValue: async function (value) {
-      if (!Array.isArray(value)) {
-        value = [value].filter((v) => v.length > 0);
+      //当单图片上传且默认值为空数组时，初次渲染更新value，以避免空串提交类型不匹配问题
+      if (Array.isArray(value) && !this.data.singleFlag) {
+        this.setData({
+          urls: value
+        });
+        this.data.singleFlag = true;
       }
-      let httpFiles = [];
-      for (let f of value) {
-        const hf = await getTempFileURL(f);
-        const httpFile = { url: hf };
-        httpFiles.push(httpFile);
+      if (value) {
+        let httpFiles = [];
+        for (let f of value) {
+          const hf = await getTempFileURL(f);
+          const httpFile = { url: hf };
+          httpFiles.push(httpFile);
+        }
+        this.setData({
+          files: httpFiles,
+          cloudFile:
+            JSON.stringify(value) != JSON.stringify(this.data.cloudFile)
+              ? value
+              : [],
+        });
+      } else {
+        this.setData({
+          files: [],
+          cloudFile: [],
+        });
       }
-      this.setData({
-        files: httpFiles,
-        cloudFile:
-          JSON.stringify(value) != JSON.stringify(this.data.cloudFile)
-            ? value
-            : [],
-      });
     },
 
     'maxUploadCount, single': function (maxUploadCount, single) {

package/src/mp/components/form/uploader/index.wxml

@@ -1,6 +1,18 @@
 <mp-cells>
     <mp-cell>
-        <mp-uploader max-size="{{maxSize  * 1024 * 1024}}" files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxCount}}" title="{{title}}" tips="{{tips}}" binddelete="onDelete"></mp-uploader>
+        <mp-uploader
+        max-size="{{maxSize  * 1024 * 1024}}"
+        files="{{files}}"
+        showDelete="{{true}}"
+        ext-class="{{layout}}"
+        bindfail="uploadError"
+        bindsuccess="uploadSuccess"
+        select="{{selectFile}}"
+        upload="{{uploadFile}}"
+        maxCount="{{maxCount}}"
+        title="{{title}}"
+        binddelete="onDelete">
+        </mp-uploader>
     </mp-cell>
 </mp-cells>
 <!-- uploader delete 实际代码接受 showDelete
@@ -9,7 +21,7 @@
 
  <!-- bind开头的是事件handler，wxml模版中不能带 `{{}}`
 ```
-<mp-uploader files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxUploadCount}}" title="{{title}}" tips="{{tips}}" binddelete="onDelete"></mp-uploader>
+<mp-uploader files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxUploadCount}}" title="{{title}}" binddelete="onDelete"></mp-uploader>
 ```
-upload 是函数带{{}}， bindtelete直接传函数名字符串 
+upload 是函数带{{}}， bindtelete直接传函数名字符串
 -->

package/src/mp/components/form/uploaderFile/index.js

@@ -1,6 +1,6 @@
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import SparkMD5 from '../../../utils/spark-md5';
-import { transSize } from '../../../utils/platform';
+import { transSize, uuid } from '../../../utils/platform';
 Component({
   options: {
     virtualHost: true,
@@ -22,8 +22,7 @@ Component({
       value: false,
     },
     defaultValue: {
-      type: Array,
-      value: [],
+      type: null,
     },
     maxUploadCount: {
       type: Number,
@@ -60,6 +59,8 @@ Component({
     files: [],
     urls: [],
     cloudFile: [],
+    strogeUrls: [],
+    singleFlag: false
   },
   methods: {
     // 批量上传文件前置事件
@@ -133,13 +134,8 @@ Component({
       if (!this.handleBefore(files?.tempFiles)) return;
       const uploadPath = 'weda-uploader';
       const uploadPromise = files.tempFiles.map(async (tempFile) => {
-        const res = wx
-          .getFileSystemManager()
-          .readFileSync(tempFile?.path, 'utf8', 0);
-        var spark = new SparkMD5.ArrayBuffer();
-        spark.append(res);
-        var md5Path = spark.end(false);
-        const cloudPath = `${uploadPath}/${md5Path}-${tempFile.name}`;
+        const cloudPath = `${uploadPath}/${uuid().replaceAll('-', '')}-${tempFile.name
+          }`;
         tempFile.percent = '0';
         tempFile.cloudPath = null;
         tempFile.filePath = tempFile?.path || null;
@@ -162,9 +158,18 @@ Component({
               _this.data.files[index].status = 'success';
               const arr = [];
               arr.push(res.fileID);
+              let strogeUrls = [];
+              //为了避免死循环 在组件接到默认值后用cloudFile做暂存，造成urls跟cloudFile不同步，根据暂存状态来处理更新urls
+              if (_this.data.cloudFile.length > 0) {
+                strogeUrls = [..._this.data.cloudFile, ...arr];
+              } else {
+                strogeUrls = [..._this.data.urls, ...arr];
+              }
+              //同步urls cloudFile
               _this.setData({
-                files: _this.data.files,
-                urls: [..._this.data.cloudFile, ..._this.data.urls, ...arr],
+                files: [..._this.data.files],
+                urls: [...strogeUrls],
+                cloudFile: [...strogeUrls],
               });
               if (_this.properties.single) {
                 _this.triggerEvent('success', {
@@ -188,6 +193,7 @@ Component({
             this.data.files[index].uploaded = transSize(res.totalBytesSent);
             this.setData({
               files: this.data.files,
+              //cloudFile:this.data.cloudFile.concat(this.data.files)
             });
           });
           return { fileID: uploadTask.fileID };
@@ -204,15 +210,30 @@ Component({
     },
 
     onDelete: function (e) {
-      const filelist = this.data.files.filter(
-        (item) => e.target.dataset.item?.path != item?.path
-      );
-      this.setData({
-        files: filelist,
-        urls: this.data.urls.filter(
-          (v, index) => e.target.dataset.item?.cloudPath != v
-        ),
-      });
+      if (this.data.urls.length == 0) {
+        var storgeUrls = [];
+        this.data.cloudFile.forEach((v, index) => {
+          if (e.target.dataset.item.cloudPath != v) {
+            storgeUrls.push(v);
+          }
+        });
+        this.setData({
+          files: this.data.files.filter(
+            (v, index) => e.target.dataset.item.cloudPath !== v.cloudPath
+          ),
+          urls: storgeUrls,
+        });
+      } else {
+        const filelist = this.data.files.filter(
+          (item) => e.target.dataset.item?.path != item?.path
+        );
+        this.setData({
+          files: filelist,
+          urls: this.data.urls.filter(
+            (v, index) => e.target.dataset.item?.cloudPath != v
+          ),
+        });
+      }
     },
     reload: function (e) {
       this.handleUpload(e.target.dataset.item);
@@ -236,11 +257,15 @@ Component({
   },
   observers: {
     defaultValue: async function (value) {
-      if (!Array.isArray(value)) {
-        value = [value].filter((v) => v.length > 0);
+      //当单图片上传且默认值为空数组时，初次渲染更新value，以避免空串提交类型不匹配问题
+      if (Array.isArray(value) && !this.data.singleFlag) {
+        this.setData({
+          urls: value
+        });
+        this.data.singleFlag = true;
       }
       let httpFiles = [];
-      if (value.length > 0) {
+      if (value && JSON.stringify(value) != '[]') {
         for (let f of value) {
           const hf = await getTempFileURL(f);
           const uuidReg = /[0-9a-f]{8}([0-9a-f]{4}){3}[0-9a-f]{12}-/;
@@ -256,12 +281,19 @@ Component({
           };
           httpFiles.push(httpFile);
         }
+        this.setData({
+          files: httpFiles,
+          cloudFile:
+            JSON.stringify(value) != JSON.stringify(this.data.cloudFile)
+              ? value
+              : [],
+        });
+      } else {
+        this.setData({
+          files: [],
+          cloudFile: [],
+        });
       }
-
-      this.setData({
-        files: httpFiles,
-        cloudFile: value,
-      });
     },
     'maxUploadCount, single': function (maxUploadCount, single) {
       const maxCount = single ? 1 : maxUploadCount;

package/src/mp/components/graphicCard/index.js

@@ -109,11 +109,11 @@ Component({
         }
         item.paramObj = paramObj;
         if (item.withParams && item.params.length > 0) {
-          wx.navigateTo({
+          wx.redirectTo({
             url: '../' + item?.insideUrl + '/index?' + item.paramObj.join('&'),
           });
         } else {
-          wx.navigateTo({
+          wx.redirectTo({
             url: '../' + item?.insideUrl + '/index',
           });
         }
@@ -161,17 +161,16 @@ Component({
         optionList,
       });
     },
-    'titleMaxLines,titleColor,titleFontWeight,titleFontSize,textAlign,titleLineHeight':
-      function (
-        titleMaxLines,
-        titleColor,
-        titleFontWeight,
-        titleFontSize,
-        textAlign,
-        titleLineHeight
-      ) {
-        let titleStyle = this.properties.titleStyle;
-        titleStyle = `
+    'titleMaxLines,titleColor,titleFontWeight,titleFontSize,textAlign,titleLineHeight': function (
+      titleMaxLines,
+      titleColor,
+      titleFontWeight,
+      titleFontSize,
+      textAlign,
+      titleLineHeight
+    ) {
+      let titleStyle = this.properties.titleStyle;
+      titleStyle = `
       -webkit-line-clamp:${titleMaxLines ? titleMaxLines : 'revert'};
       color: ${titleColor};
       font-weight: ${titleFontWeight};
@@ -179,19 +178,18 @@ Component({
       text-align: ${textAlign};
       line-height: ${titleLineHeight == 'auto' ? 'normal' : titleLineHeight};
       `;
-        this.setData({ titleStyle });
-      },
-    'desMaxLines,desColor,desFontWeight,desFontSize,textAlign,desLineHeight':
-      function (
-        desMaxLines,
-        desColor,
-        desFontWeight,
-        desFontSize,
-        textAlign,
-        desLineHeight
-      ) {
-        let desStyle = this.properties.desStyle;
-        desStyle = `
+      this.setData({ titleStyle });
+    },
+    'desMaxLines,desColor,desFontWeight,desFontSize,textAlign,desLineHeight': function (
+      desMaxLines,
+      desColor,
+      desFontWeight,
+      desFontSize,
+      textAlign,
+      desLineHeight
+    ) {
+      let desStyle = this.properties.desStyle;
+      desStyle = `
       -webkit-line-clamp:${desMaxLines ? desMaxLines : 'revert'};
       color: ${desColor};
       font-weight: ${desFontWeight};
@@ -199,7 +197,7 @@ Component({
       text-align: ${textAlign};
       line-height: ${desLineHeight == 'auto' ? 'normal' : desLineHeight};
       `;
-        this.setData({ desStyle });
-      },
+      this.setData({ desStyle });
+    },
   },
 });

package/src/mp/components/listView/index.js

@@ -1,17 +1,6 @@
-const isNull = (val) => [undefined, null].includes(val);
-const REL_DICT = {
-  equal: 'eq', // 等于
-  unequal: 'neq', // 不等于
-  include: 'search', // 包含
-  exclude: '_exclude', // 不包含
-  begin_with: '_begin_with', // 开头是
-  greater: 'gt', // 大于
-  greater_or_equal: 'gte', // 大于等于
-  less: 'lt', // 小于
-  less_or_equal: 'lte', // 小于等于
-  in: 'in', // 多选值
-  not_in: 'nin', // 不在多选值
-};
+import { REL_DICT } from '../../utils/constant';
+import { isNil } from '../../utils/lodash';
+
 const ORDERTYPE = ['asc', 'desc'];
 const getWhereList = (where) => {
   let result = [];
@@ -28,7 +17,7 @@ const getWhereList = (where) => {
             rel = 'regex';
             val = `^((?!${val}).)*$`;
           }
-          if (item2?.logic !== 'or' && item2?.key && rel && !isNull(val)) {
+          if (item2?.logic !== 'or' && item2?.key && rel && !isNil(val)) {
             result.push({ key: item2.key, rel, val });
           }
         });
@@ -38,7 +27,6 @@ const getWhereList = (where) => {
 };
 const DEFAULT_DATA = {
   pageNo: 1,
-  loading: false,
   total: 0,
   records: [],
   pageStr: '0/0',
@@ -90,7 +78,7 @@ Component({
       value: (v) => v,
     },
   },
-  data: { ...DEFAULT_DATA },
+  data: { ...DEFAULT_DATA, isReLoad: false, loading: false },
   methods: {
     /**
      * 列表容器拉取数据，放在 setData 的回调函数中执行
@@ -98,10 +86,10 @@ Component({
     _fetchData: async function () {
       const { app } = getApp();
       const callDataSource = app?.cloud?.callDataSource;
-      const { pageNo, loading } = this.data;
+      const { pageNo, loading, isReLoad } = this.data;
       const { datasource, orderBy, orderType, where, pageSize } =
         this.properties;
-      if (loading) return;
+      if (loading && !isReLoad) return;
       if (!callDataSource) {
         console.warn(`当前环境缺少方法 app.cloud.callDataSource`);
         return;
@@ -115,7 +103,7 @@ Component({
       const tcbParams = {};
 
       // tcb分页参数
-      if (!isNull(pageNo) && !isNull(pageSize)) {
+      if (!isNil(pageNo) && !isNil(pageSize)) {
         tcbParams['pageNo'] = pageNo;
         tcbParams['pageSize'] = pageSize;
       }
@@ -128,32 +116,40 @@ Component({
       const whereEffected = [].concat(getWhereList(where));
       whereEffected.length > 0 && (tcbParams['where'] = whereEffected);
       // tcb结果和事件
-      const data = await callDataSource({
-        dataSourceName,
-        methodName,
-        params: tcbParams,
-      });
-      let records = data?.records || [];
-      let total = data?.total || 0;
-      if (
-        ['loadMoreButton', 'bottomLoad'].includes(this.properties.pagination)
-      ) {
-        records = [...this.data.records, ...records]; // TODO 可能存在单次 setData 数据量过大引起小程序性能问题
-      }
-      this.setData(
-        {
-          total,
-          records,
-          loading: false,
-          pageStr: `${total > 0 ? pageNo : 0}/${
-            Math.ceil(total / pageSize) || 0
-          }`,
-        },
-        () => {
-          this._handleEvents(data);
-          setTimeout(() => this._firstScreenLoadMore(), 150);
+      try {
+        const data = await callDataSource({
+          dataSourceName,
+          methodName,
+          params: tcbParams,
+        });
+        let records = data?.records || [];
+        let total = data?.total || 0;
+        if (
+          ['loadMoreButton', 'bottomLoad'].includes(
+            this.properties.pagination
+          ) &&
+          !isReLoad
+        ) {
+          records = [...this.data.records, ...records]; // TODO 可能存在单次 setData 数据量过大引起小程序性能问题
         }
-      );
+        this.setData(
+          {
+            total,
+            records,
+            loading: false,
+            isReLoad: false,
+            pageStr: `${total > 0 ? pageNo : 0}/${
+              Math.ceil(total / pageSize) || 0
+            }`,
+          },
+          () => {
+            this._handleEvents(data);
+            setTimeout(() => this._firstScreenLoadMore(), 150);
+          }
+        );
+      } catch (e) {
+        this.setData({ loading: false });
+      }
     },
     /**
      * 下一页
@@ -236,31 +232,22 @@ Component({
     _observerSign: function () {
       this.signObserver = this.createIntersectionObserver();
       this.signObserver
-        .relativeTo('.weda-list-view__containor', { bottom: 10 })
+        .relativeToViewport()
         .observe('#weda-list-view_sign', (res) => {
           this.setData({ isVisiableSign: res?.intersectionRatio > 0 });
         });
     },
   },
   observers: {
-    'datasource,orderBy,orderType,where,pageSize,pagination': function (
-      dDatasource,
-      dOrderBy,
-      dOrderType,
-      dWhere,
-      dPageSize,
-      dPagination
-    ) {
-      if (
-        dDatasource !== this.properties.datasource ||
-        dOrderBy !== this.properties.orderBy ||
-        dOrderType !== this.properties.orderType ||
-        dWhere !== this.properties.where ||
-        dPageSize !== this.properties.pageSize ||
-        dPagination !== this.properties.pagination
-      ) {
-        this.setData({ ...DEFAULT_DATA }, () => this._fetchData());
-      }
+    'datasource,orderBy,orderType,where,pageSize,pagination': function () {
+      clearTimeout(this._timer);
+      this._timer = setTimeout(
+        () =>
+          this.setData({ ...DEFAULT_DATA, isReLoad: true }, () =>
+            this._fetchData()
+          ),
+        200
+      );
     },
     isVisiableSign: function (dIsVisiableSign) {
       if (dIsVisiableSign && this.properties.pagination === 'bottomLoad') {
@@ -275,6 +262,7 @@ Component({
   },
   lifetimes: {
     attached: function () {
+      clearTimeout(this._timer);
       this._fetchData();
       this._observerSign();
     },

package/src/mp/components/listView/index.wxml

@@ -1,11 +1,11 @@
-<scroll-view scroll-y scroll-with-animation lower-threshold="5" style="height:97vh;{{style}}"
+<scroll-view scroll-y scroll-with-animation lower-threshold="5" style="{{style}}"
   class="weda-list-view__containor weda-ui {{className}}">
   <!-- 列表插槽 -->
   <view class="{{template === 'cardList' ? 'weda-list-view-card' : ''}}" id="weda-list-view_content">
     <slot></slot>
   </view>
 
-  <view class="weda-list-view__more">
+  <view class="weda-list-view__more {{'weda-list-view__more-' + pagination}}">
     <!-- 加载更多 -->
     <block wx:if="{{pagination==='loadMoreButton' && pageSize * pageNo < total}}">
       <view class="weda-list-view__more-text" bindtap="handleNext">加载更多</view>

package/src/mp/components/listView/index.wxss

@@ -34,6 +34,11 @@
   background: #fff;
 }
 
+.weda-list-view__containor
+  .weda-list-view__more.weda-list-view__more-bottomLoad {
+  background: transparent;
+}
+
 .weda-list-view__bottom-load {
   padding-top: 1px;
 }