@cloudbase/weda-ui 0.2.16 → 0.2.17

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

@@ -0,0 +1,286 @@
+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', // 不在多选值
+};
+const ORDERTYPE = ['asc', 'desc'];
+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 DEFAULT_DATA = {
+  pageNo: 1,
+  loading: false,
+  total: 0,
+  records: [],
+  pageStr: '0/0',
+  isVisiableSign: false,
+  isFirstScreen: true,
+};
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    datasource: {
+      type: Object,
+      value: {},
+    },
+    orderBy: {
+      type: String,
+    },
+    orderType: {
+      type: String,
+    },
+    where: {
+      type: Array,
+      value: [],
+    },
+    pageSize: {
+      type: Number,
+      value: 5,
+    },
+    template: {
+      type: String,
+      value: 'simpleList',
+    },
+    pagination: {
+      type: String,
+      value: 'loadMoreButton',
+    },
+    beforeDataChange: {
+      type: Function,
+      value: (v) => v,
+    },
+  },
+  data: { ...DEFAULT_DATA },
+  methods: {
+    /**
+     * 列表容器拉取数据，放在 setData 的回调函数中执行
+     */
+    _fetchData: async function () {
+      const { app } = getApp();
+      const callDataSource = app?.cloud?.callDataSource;
+      const { pageNo, loading } = this.data;
+      const { datasource, orderBy, orderType, where, pageSize } =
+        this.properties;
+      if (loading) return;
+      if (!callDataSource) {
+        console.warn(`当前环境缺少方法 app.cloud.callDataSource`);
+        return;
+      }
+      this.setData({ loading: true });
+      const { name: dataSourceName, extra } = datasource || {};
+      const methodName =
+        typeof extra?.methodName === 'string'
+          ? extra?.methodName
+          : 'wedaGetRecords';
+      const tcbParams = {};
+
+      // tcb分页参数
+      if (!isNull(pageNo) && !isNull(pageSize)) {
+        tcbParams['pageNo'] = pageNo;
+        tcbParams['pageSize'] = pageSize;
+      }
+      // tcb排序参数
+      if (orderBy && ORDERTYPE.includes(orderType)) {
+        tcbParams['orderBy'] = orderBy;
+        tcbParams['orderType'] = orderType;
+      }
+      // tcb过滤参数
+      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);
+        }
+      );
+    },
+    /**
+     * 下一页
+     */
+    handleNext: function () {
+      if (
+        this.data.loading ||
+        !(this.properties.pageSize * this.data.pageNo < this.data.total)
+      ) {
+        return;
+      }
+      this.setData({ pageNo: this.data.pageNo + 1 }, () => this._fetchData());
+    },
+    /**
+     * 上一页
+     */
+    handlePre: function () {
+      if (this.data.loading || !(this.properties.pageNo > 1)) {
+        return;
+      }
+      this.setData({ pageNo: this.data.pageNo - 1 }, () => this._fetchData());
+    },
+    /**
+     * 向外部传递事件
+     */
+    _handleEvents: function (data) {
+      const records = this.data.records || [];
+      const total = this.data.total || records?.length || 0;
+      const beforeDataChange = this.properties.beforeDataChange || ((v) => v);
+      this.triggerEvent('onDataChange', {
+        data: beforeDataChange(records),
+      });
+      if (JSON.stringify(data) === '{}') {
+        this.triggerEvent('queryFail', {
+          datasource: this.properties.datasource,
+          data: null,
+        });
+      } else {
+        if (total === 0) {
+          this.triggerEvent('queryEmpty', {
+            datasource: this.properties.datasource,
+            data: beforeDataChange([]),
+          });
+        }
+        this.triggerEvent('querySuccess', {
+          datasource: this.properties.datasource,
+          data: beforeDataChange(records),
+        });
+      }
+    },
+    /**
+     * 首屏持续触底加载特殊处理
+     */
+    _firstScreenLoadMore: function () {
+      if (this.properties.pagination === 'bottomLoad') {
+        if (this.data.isFirstScreen) {
+          this.setData({ isFirstScreen: false });
+          this.contentObserver?.disconnect();
+          this._observerContent();
+        }
+      }
+    },
+    /**
+     * 开始监听slot
+     */
+    _observerContent: function () {
+      this.contentObserver = this.createIntersectionObserver();
+      this.contentObserver
+        .relativeToViewport()
+        .observe('#weda-list-view_content', (res) => {
+          this.setData({
+            isFirstScreen:
+              res?.boundingClientRect?.bottom <= res?.relativeRect?.bottom,
+          });
+        });
+    },
+    /**
+     * 开始监听sign
+     */
+    _observerSign: function () {
+      this.signObserver = this.createIntersectionObserver();
+      this.signObserver
+        .relativeTo('.weda-list-view__containor', { bottom: 10 })
+        .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());
+      }
+    },
+    isVisiableSign: function (dIsVisiableSign) {
+      if (dIsVisiableSign && this.properties.pagination === 'bottomLoad') {
+        this.handleNext();
+      }
+    },
+    isFirstScreen: function (dIsFirstScreen) {
+      if (dIsFirstScreen && this.properties.pagination === 'bottomLoad') {
+        this.handleNext();
+      }
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this._fetchData();
+      this._observerSign();
+    },
+    detached: function () {
+      this.contentObserver?.disconnect();
+      this.signObserver?.disconnect();
+    },
+  },
+});

package/src/mp/components/internals/listView/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "shared"
+}

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

@@ -0,0 +1,40 @@
+<scroll-view scroll-y scroll-with-animation lower-threshold="5" style="height:97vh;{{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">
+    <!-- 加载更多 -->
+    <block wx:if="{{pagination==='loadMoreButton' && pageSize * pageNo < total}}">
+      <view class="weda-list-view__more-text" bindtap="handleNext">加载更多</view>
+    </block>
+    <!-- 触底刷新 -->
+    <block wx:elif="{{pagination==='bottomLoad'}}">
+      <view class="weda-list-view__bottom-load" id="weda-list-view_sign">
+        <view class="weda-list-view__more-symbol" wx:if="{{loading}}">
+          <view class="weda-list-view__symbol-item"></view>
+          <view class="weda-list-view__symbol-item"></view>
+          <view class="weda-list-view__symbol-item"></view>
+        </view>
+      </view>
+    </block>
+    <!-- 分页器 -->
+    <block wx:elif="{{pagination==='pagination'}}">
+      <view class="weda-list-view__more-pagination">
+        <view class="weda-list-view__pagination-pre {{pageNo > 1 ? 'active': ''}}" bindtap="handlePre">
+          <image class="weda-list-view__pagination-icon" src='arrow-right-line.svg' />
+          上一页
+        </view>
+        <view class="weda-list-view__pagination-text">{{pageStr}}</view>
+        <view class="weda-list-view__pagination-next {{pageSize * pageNo < total ? 'active' : ''}}"
+          bindtap="handleNext">
+          <image class="weda-list-view__pagination-icon" src='arrow-right-line.svg' />
+          下一页
+        </view>
+      </view>
+    </block>
+    <block wx:else></block>
+  </view>
+</scroll-view>

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

@@ -0,0 +1,150 @@
+/* weda_list_view */
+
+.weda-list-view__containor {
+  background: #fff;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+/* 卡片列表 */
+.weda-list-view-card {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: 6rpx;
+}
+
+/* 加载更多 */
+.weda-list-view__containor .weda-list-view__more {
+  width: 100%;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__more-text {
+  padding-top: 20rpx;
+  padding-bottom: 28rpx;
+  font-size: 24rpx;
+  line-height: 44rpx;
+  color: rgba(0, 0, 0, 0.4);
+  text-align: center;
+  box-sizing: border-box;
+}
+
+/* 加载更多 ... */
+.weda-list-view__containor .weda-list-view__more {
+  background: #fff;
+}
+
+.weda-list-view__bottom-load {
+  padding-top: 1px;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__more-symbol {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 40rpx;
+  padding-bottom: 36rpx;
+  box-sizing: border-box;
+}
+
+.weda-list-view__containor .weda-list-view__more .weda-list-view__symbol-item {
+  width: 16rpx;
+  height: 16rpx;
+  background: #c4c4c4;
+  margin-left: 12rpx;
+  border-radius: 50%;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__symbol-item:first-child {
+  width: 12rpx;
+  height: 12rpx;
+  margin-left: 0;
+}
+
+/* 加载更多 分页 */
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__more-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  padding: 20rpx 36rpx 24rpx 32rpx;
+  box-sizing: border-box;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next {
+  font-size: 24rpx;
+  line-height: 48rpx;
+  color: rgba(0, 0, 0, 0.4);
+  padding: 0 48rpx;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre.active,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next.active {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre
+  .weda-list-view__pagination-icon,
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next
+  .weda-list-view__pagination-icon {
+  position: absolute;
+  width: 48rpx;
+  height: 48rpx;
+  top: 20rpx;
+  opacity: 0.2;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .active.weda-list-view__pagination-pre
+  .weda-list-view__pagination-icon,
+.weda-list-view__containor
+  .weda-list-view__more
+  .active.weda-list-view__pagination-next
+  .weda-list-view__pagination-icon {
+  opacity: 1;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-pre
+  .weda-list-view__pagination-icon {
+  left: 32rpx;
+  transform: rotate(180deg);
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-next
+  .weda-list-view__pagination-icon {
+  right: 36rpx;
+}
+
+.weda-list-view__containor
+  .weda-list-view__more
+  .weda-list-view__pagination-text {
+  font-size: 24rpx;
+  line-height: 44rpx;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.split {
+  height: 40rpx;
+}

package/src/mp/components/internals/listView/more-line.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z" fill="#09121F"/>
+</svg>

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

@@ -38,7 +38,6 @@ const getWhereList = (where) => {
 };
 const DEFAULT_DATA = {
   pageNo: 1,
-  loading: false,
   total: 0,
   records: [],
   pageStr: '0/0',
@@ -90,7 +89,7 @@ Component({
       value: (v) => v,
     },
   },
-  data: { ...DEFAULT_DATA },
+  data: { ...DEFAULT_DATA, isReLoad: false, loading: false },
   methods: {
     /**
      * 列表容器拉取数据，放在 setData 的回调函数中执行
@@ -98,10 +97,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;
@@ -136,7 +135,8 @@ Component({
       let records = data?.records || [];
       let total = data?.total || 0;
       if (
-        ['loadMoreButton', 'bottomLoad'].includes(this.properties.pagination)
+        ['loadMoreButton', 'bottomLoad'].includes(this.properties.pagination) &&
+        !isReLoad
       ) {
         records = [...this.data.records, ...records]; // TODO 可能存在单次 setData 数据量过大引起小程序性能问题
       }
@@ -145,6 +145,7 @@ Component({
           total,
           records,
           loading: false,
+          isReLoad: false,
           pageStr: `${total > 0 ? pageNo : 0}/${
             Math.ceil(total / pageSize) || 0
           }`,
@@ -236,31 +237,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 +267,7 @@ Component({
   },
   lifetimes: {
     attached: function () {
+      clearTimeout(this._timer);
       this._fetchData();
       this._observerSign();
     },

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

@@ -1,4 +1,4 @@
-<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">

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

@@ -64,12 +64,12 @@ Component({
         }
         item.paramObj = paramObj;
         if (item.withParams && item.params.length > 0) {
-          wx.navigateTo({
+          wx.redirectTo({
             url:
               '/pages/' + item?.insideUrl + '/index?' + item.paramObj.join('&'),
           });
         } else {
-          wx.navigateTo({
+          wx.redirectTo({
             url: '/pages/' + item?.insideUrl + '/index',
           });
         }
@@ -113,7 +113,7 @@ Component({
 
       // 添加对齐属性
       if (fontWeight !== '') {
-        titleStyle = `${titleStyle};font-weight: ${fontWeight};font-size:${fontSize};line-height:${
+        titleStyle = `${titleStyle};font-weight: ${fontWeight};font-size:${fontSize}px;line-height:${
           lineHeight == 'auto' ? 'normal' : lineHeight
         }`;
       }

package/src/mp/index.json

@@ -32,6 +32,9 @@
     "DataView": "components/dataView/index",
     "Calendar": "components/calendar/index",
     "NavLayout": "components/navLayout/index",
+    "Line": "components/chart/line/index",
+    "Bar": "components/chart/bar/index",
+    "Pie": "components/chart/pie/index",
     "StatisticsCard": "components/chart/statisticsCard/index",
     "GraphicCard": "components/graphicCard/index"
   },

package/src/mp/utils/platform.js

@@ -18,3 +18,18 @@ export const transSize = (size) => {
   const g = getBig(m);
   return `${g}G`;
 };
+/**
+ * 生成随机数
+ */
+export const uuid = () => {
+  var s = [];
+  var hexDigits = '0123456789abcdef';
+  for (var i = 0; i < 36; i++) {
+    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
+  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
+  s[8] = s[13] = s[18] = s[23] = '-';
+  var uuid = s.join('');
+  return uuid;
+};

package/src/setupTests.js

@@ -1,3 +1,4 @@
+require("regenerator-runtime");
 Object.defineProperty(window, 'matchMedia', {
     writable: true,
     value: jest.fn().mockImplementation(query => ({
@@ -10,4 +11,4 @@ Object.defineProperty(window, 'matchMedia', {
       removeEventListener: jest.fn(),
       dispatchEvent: jest.fn(),
     })),
-  });
+  });