@cloudbase/weda-ui-mp 3.15.8 → 3.16.0

package/components/form/select/dropdown-select/index.js

@@ -52,6 +52,14 @@ Component({
       type: Boolean,
       value: true,
     },
+    searchable: {
+      type: Boolean,
+      value: true,
+    },
+    filterable: {
+      type: Boolean,
+      value: false,
+    },
   },
   data: {
     height: '780rpx',

package/components/form/select/dropdown-select/index.wxml

@@ -4,7 +4,7 @@
     <view wx:if="{{!focus}}" class="weda-ui-custom-picker__header">
       <button class="weda-ui-custom-picker__header-btn" bindtap="cancelPicker" data-clear="false">取消</button>
     </view>
-    <view class="weda-ui-custom-search {{focus?'is-focused':''}}" style="{{focus? 'margin: 34rpx 32rpx 16rpx 32rpx':'margin: 20rpx 32rpx'}}">
+    <view wx:if="{{searchable}}" class="weda-ui-custom-search {{focus?'is-focused':''}}" style="{{focus? 'margin: 34rpx 32rpx 16rpx 32rpx':'margin: 20rpx 32rpx'}}">
       <view class="weda-ui-custom-search-box" bindtap="onFocus">
         <input class="weda-ui-input" focus="{{focus}}" bindfocus="onFocus" bindblur="onBlur" bindinput="bindinput" value="{{searchValue}}" hold-keyboard="true" bindconfirm="bindconfirm" />
         <view class="weda-ui-custom-search-box__label">

package/components/form/selectMultiple/dropdown-select/index.js

@@ -36,14 +36,18 @@ Component({
       type: Boolean,
       value: true,
     },
-    staticSearchable: {
-      type: Boolean,
-      value: true,
-    },
     selectedValue: {
       type: Array,
       value: [],
     },
+    searchable: {
+      type: Boolean,
+      value: true,
+    },
+    filterable: {
+      type: Boolean,
+      value: false,
+    },
   },
   data: {
     height: '390px',
@@ -53,18 +57,12 @@ Component({
     status: 0,
     showOption: [],
     searchPageNo: 1,
-    timeId: '',
     pageNo: 1,
     selectedCache: [], // 缓存当前选中值
   },
 
   lifetimes: {
-    detached() {
-      const id = this.data.timeId;
-      if (id !== '') {
-        clearTimeout(id);
-      }
-    },
+    detached() {},
   },
   methods: {
     cancelPicker: function (e) {
@@ -179,9 +177,13 @@ Component({
     },
   },
   observers: {
-    'option,searchValue,staticSearchable': function (option, searchValue, staticSearchable) {
+    'option,searchValue,filterable': function (option, searchValue, filterable) {
       const { ignoreCase } = this.properties;
-      if (staticSearchable) {
+      if (filterable) {
+        this.setData({
+          showOption: option,
+        });
+      } else {
         const searchRange = option.filter((item) => {
           if (ignoreCase) {
             return String(item.label).toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
@@ -192,10 +194,6 @@ Component({
           showOption: searchRange,
           status: searchRange.length > 0 ? 0 : 3,
         });
-      } else {
-        this.setData({
-          showOption: option,
-        });
       }
     },
     selectedValue: function (selectedValue) {

package/components/form/selectMultiple/dropdown-select/index.wxml

@@ -6,7 +6,7 @@
       <button class="weda-ui-custom-picker__header-btn" bindtap="closeModal" data-clear="false">取消</button>
       <button class="weda-ui-custom-picker__header-btn" bindtap="confirmModal">确定</button>
     </view>
-    <view class="weda-ui-custom-search {{focus?'is-focused':''}}" style="{{focus? 'margin: 34rpx 32rpx 16rpx 32rpx':'margin: 20rpx 32rpx'}}">
+    <view wx:if="{{searchable}}"  class="weda-ui-custom-search {{focus?'is-focused':''}}" style="{{focus? 'margin: 34rpx 32rpx 16rpx 32rpx':'margin: 20rpx 32rpx'}}">
       <view class="weda-ui-custom-search-box" bindtap="onFocus">
         <input class="weda-ui-input" focus="{{focus}}" bindfocus="onFocus" bindblur="onBlur" bindinput="bindinput" value="{{searchValue}}" hold-keyboard="true" bindconfirm="bindconfirm" />
         <view class="weda-ui-custom-search-box__label multiple">

package/components/form/selectMultiple/index.js

@@ -98,6 +98,26 @@ Component({
       type: Array,
       value: [],
     },
+    supportManyRelated: {
+      type: Boolean,
+      value: false,
+    },
+    queryCondition: {
+      type: null,
+      value: [],
+    },
+    sorter: {
+      type: Array,
+      value: [],
+    },
+    searchable: {
+      type: Boolean,
+      value: true,
+    },
+    filterable: {
+      type: Boolean,
+      value: false,
+    },
   },
   data: {
     cls: '',
@@ -112,15 +132,13 @@ Component({
     searchOption: [],
     width: '100%',
     isEmpty: true,
-    preWhere: [], // 对比 where 监听
-    whereEffected: [], // 每次请求都加上
     fetchTimed: null, // 防抖
     queryParam: { select: { $master: true } },
-    staticSearchable: true,
+    _filterable: false,
   },
   lifetimes: {
     attached() {
-      const { className, layout, disabled, range } = this.properties;
+      const { className, layout, disabled, range, filterable } = this.properties;
       const isFlex = layout !== 'vertical';
       const cls = classNames({
         'weda-ui': true,
@@ -144,6 +162,7 @@ Component({
         cls,
         subCls,
         displayValue,
+        _filterable: filterable,
       });
     },
     ready() {
@@ -172,9 +191,12 @@ Component({
       });
     },
     format: function (format) {
-      this.setData({
-        staticSearchable: !['many-many', 'one-many'].includes(format),
-      });
+      if (['many-many', 'one-many'].includes(format)) {
+        // 关联关系，自定义查询规则，不走前端过滤
+        this.setData({
+          _filterable: true,
+        });
+      }
     },
     'value,range': function () {
       const { range, format } = this.properties;

package/components/form/selectMultiple/index.wxml

@@ -13,6 +13,8 @@
         </view>
         <block wx:if="{{allPickerShow}}">
           <dropdownSelect
+            searchable="{{searchable}}"
+            filterable="{{_filterable}}"
             class="weui-picker__group weui-input"
             bindchange="onChange"
             bind:_childFetchData="_childFetchData"
@@ -24,7 +26,6 @@
             displayLabel="{{displayLabel}}"
             selectedValue="{{value}}"
             ignoreCase="{{ignoreCase}}"
-            staticSearchable="{{staticSearchable}}"
             bind:search="onSearch"
           />
         </block>

package/components/richText/copy/index.wxss

@@ -1,49 +1,46 @@
 @font-face {
-    font-family: WdTd;
-    src: url("t.eot"), url("t_iefix.eot") format("embedded-opentype"),
-      url("t.woff") format("woff"), url("t.ttf") format("truetype"),
-      url("t.svg") format("svg"),
-      url("https://comp-public-replace-1303824488-cos.weda.tencent.com/icon/0.0.7/t.eot"),
-      url("https://comp-public-replace-1303824488-cos.weda.tencent.com/icon/0.0.7/t_iefix.eot")
-        format("embedded-opentype"),
-      url("https://comp-public-replace-1303824488-cos.weda.tencent.com/icon/0.0.7/t.woff")
-        format("woff"),
-      url("https://comp-public-replace-1303824488-cos.weda.tencent.com/icon/0.0.7/t.ttf")
-        format("truetype"),
-      url("https://comp-public-replace-1303824488-cos.weda.tencent.com/icon/0.0.7/t.svg")
-        format("svg");
-    font-weight: 400;
-    font-style: normal;
-  }
- .wd-markdown {
-    padding: 1rem;
-  }
-  .markdown-it-code-wrap {
-    position: relative;
-  }
-  .markdown-it-code-copy {
-    font-family: WdTd !important;
-    vertical-align: middle;
-    font-size: 14px;
-    border: none;
-    background: transparent;
-    position: absolute; top: 7.5px; right: 6px; cursor: pointer; outline: none;
-  }
-  i.markdown-it-code-copy {
-    font-style: normal;
-  }
-  .markdown-it-code-copy::before {
-    content: '\E1AC';
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-    width: 20px;
-    height: 20px;
-    display: inline-block;
-    text-align: center;
-  }
-  .markdown-it-code-copy:hover::before {
-    background: #eef1f4;
-  }
-  
+  font-family: WdTd;
+  src: url('t.eot'), url('t_iefix.eot') format('embedded-opentype'), url('t.woff') format('woff'),
+    url('t.ttf') format('truetype'), url('t.svg') format('svg'),
+    url('https://comp-public-replace-1303824488-cos.weda.tencent.com/icon/0.0.7/t.eot'),
+    url('https://comp-public-replace-1303824488-cos.weda.tencent.com/icon/0.0.7/t_iefix.eot')
+      format('embedded-opentype'),
+    url('https://comp-public-replace-1303824488-cos.weda.tencent.com/icon/0.0.7/t.woff') format('woff'),
+    url('https://comp-public-replace-1303824488-cos.weda.tencent.com/icon/0.0.7/t.ttf') format('truetype'),
+    url('https://comp-public-replace-1303824488-cos.weda.tencent.com/icon/0.0.7/t.svg') format('svg');
+  font-weight: 400;
+  font-style: normal;
+}
+.wd-markdown {
+  padding: 1rem;
+}
+.markdown-it-code-wrap {
+  position: relative;
+}
+.markdown-it-code-copy {
+  font-family: WdTd !important;
+  vertical-align: middle;
+  font-size: 14px;
+  border: none;
+  background: transparent;
+  position: absolute;
+  top: 7.5px;
+  right: 6px;
+  outline: none;
+}
+i.markdown-it-code-copy {
+  font-style: normal;
+}
+.markdown-it-code-copy::before {
+  content: '\E1AC';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  text-align: center;
+}
+.markdown-it-code-copy:hover::before {
+  background: #eef1f4;
+}

package/components/wd-select/index.js

@@ -3,10 +3,10 @@ import formFieldBehavior from '../form-field-behavior/form-field-behavior';
 import itemBehavior from '../form-field-behavior/item-behavior';
 import { convertFixedIcon, SELECT_ICON_H5 } from '../../utils/getFormLegacy';
 import debounce from '../../utils/debounce';
-import { safeObj, arrayToMap, getSelected } from '../../utils/tool';
+import { arrayToMap, getSelected } from '../../utils/tool';
 
 Component({
-  options: { virtualHost: true },
+  options: { virtualHost: true, styleIsolation: 'shared' },
   behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
   properties: {
     classRoot: {
@@ -25,9 +25,16 @@ Component({
       type: Array,
       value: [],
     },
+    searchable: {
+      type: Boolean,
+      value: true,
+    },
+    filterable: {
+      type: Boolean,
+      value: false,
+    },
   },
   data: {
-    options: [],
     itemMap: {},
     selectedLabel: null,
     selectedItem: null,
@@ -45,16 +52,18 @@ Component({
         });
       this.updateWidgetAPI();
     },
-    changeOptions: function (e) {
-      const { options } = safeObj(e.detail.value);
-      this.setData({ options });
-    },
     search: function (e) {
       this.debouncedTriggerSearchEvent(e.detail.value);
     },
     debouncedTriggerSearchEvent: debounce(function (value) {
       this.triggerEvent('search', { value });
     }),
+    updateSelect: function (e) {
+      const { value, option } = e.detail;
+      const itemMap = arrayToMap(option, 'value');
+      const { selectedLabel, selectedItem } = getSelected(itemMap, value, false);
+      this.setData({ selectedLabel, selectedItem });
+    },
   },
   observers: {
     'name, value, label, required, visible, disabled, readOnly, before, after, primaryField, selectedLabel, selectedItem':
@@ -65,13 +74,8 @@ Component({
       const [_suffixType, _suffixIcon] = convertFixedIcon(suffixType, suffixIcon, SELECT_ICON_H5);
       this.setData({ _suffixType, _suffixIcon });
     },
-    options: function (options) {
-      const itemMap = arrayToMap(options, 'value');
-      this.setData({ itemMap });
-    },
-    'itemMap, value': function (itemMap, value) {
-      const { selectedLabel, selectedItem } = getSelected(itemMap, value, false);
-      this.setData({ selectedLabel, selectedItem });
+    range: function (range) {
+      this.updateSelect({ detail: { value: this.data.value, option: range } });
     },
   },
   lifetimes: {

package/components/wd-select/index.wxml

@@ -22,6 +22,9 @@
     <wd-input-group before="{{before}}" after="{{after}}" block="{{true}}" size="{{_size}}" classRoot="{{classRoot}}" readOnly="{{readOnly}}">
       <wd-input-wrap block="{{block}}" classRoot="{{classRoot}}" before="{{before}}" after="{{after}}" disabled="{{disabled}}" prefixType="{{prefixType}}" prefixIcon="{{prefixIcon}}" prefixSrc="{{prefixSrc}}" suffixType="{{_suffixType}}" suffixIcon="{{_suffixIcon}}" suffixSrc="{{suffixSrc}}" hasClearIcon="{{hasClearIcon}}" bind:onClear="handleClear" readOnly="{{readOnly}}">
         <old-select
+          multiple="{{false}}"
+          searchable="{{searchable}}"
+          filterable="{{filterable}}"
           supportManyRelated="{{supportManyRelated}}"
           queryCondition="{{queryCondition}}"
           sorter="{{sorter}}"
@@ -30,7 +33,7 @@
           label=""
           defaultValue="{{value}}"
           enumName="{{enumName}}"
-          format="{{format === 'many-one' ? 'father-son' : format}}"
+          format="{{format}}"
           placeholder="{{placeholder}}"
           primaryField="{{primaryField}}"
           range="{{range}}"
@@ -44,10 +47,11 @@
           version="wd"
           mode="selector"
           ignoreCase="{{ignoreCase}}"
-          staticSearchable="{{staticSearchable}}"
           bind:change="handleChange"
-          bind:changeOptions="changeOptions"
+          bind:updateSelect="updateSelect"
           bind:search="search"
+          bind:focus="handleEvent"
+          bind:blur="handleEvent"
         />
       </wd-input-wrap>
     </wd-input-group>

package/components/wd-select/select/dropdown-select/index.js

@@ -0,0 +1,192 @@
+Component({
+  properties: {
+    isActive: {
+      type: Boolean,
+      value: true,
+    },
+    option: {
+      type: Array,
+      value: [],
+    },
+    searchStatus: {
+      type: Number,
+      value: 0,
+    },
+    loadStatus: {
+      type: Number,
+      value: 0,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    ignoreCase: {
+      type: Boolean,
+      value: true,
+    },
+    selectedValue: {
+      type: Array,
+      value: [],
+    },
+    searchable: {
+      type: Boolean,
+      value: true,
+    },
+    filterable: {
+      type: Boolean,
+      value: false,
+    },
+    multiple: {
+      type: Boolean,
+      value: false,
+    },
+    currentPageNo: {
+      type: Number,
+      value: 1,
+    },
+  },
+  data: {
+    height: '390px',
+    focus: false,
+    searchValue: '',
+    index: -1,
+    status: 0,
+    showOption: [],
+    pageNo: 1,
+    selectedCache: [], // 缓存当前选中值
+  },
+
+  methods: {
+    cancelPicker: function (e) {
+      if (this.data.multiple) {
+        const { option } = this.properties;
+        this.setData({ selectedCache: option.filter((item) => item.check) });
+      }
+      this.triggerEvent('onClosePicker');
+    },
+    // 监听输入
+    bindinput: function (event) {
+      const value = event.detail.value;
+      this.setData({
+        searchValue: value,
+        pageNo: 1,
+      });
+      this.triggerEvent('search', { value });
+    },
+    // 清空输入
+    clear: function () {
+      this.setData({
+        searchValue: '',
+        showOption: this.properties.option,
+        pageNo: 1,
+      });
+      this.triggerEvent('search', { value: '' });
+    },
+    // 取消
+    shrink: function () {
+      this.setData({
+        height: '390px',
+        focus: false,
+        searchValue: '',
+        pageNo: 1,
+        showOption: this.properties.option,
+      });
+      this.triggerEvent('search', { value: '', noEvent: true });
+    },
+    confirmModal: function () {
+      const { selectedCache } = this.data;
+      this.triggerEvent('onSelectPicker', selectedCache);
+    },
+    // 获取焦点
+    onFocus: function () {
+      this.setData({
+        height: '550px',
+        focus: true,
+      });
+    },
+    // 处理当前选中值
+    dealSelectedValue(item) {
+      const { selectedCache } = this.data;
+      const index = selectedCache.findIndex((v) => v.value === item.value);
+      if (index > -1) {
+        return [...selectedCache.slice(0, index), ...selectedCache.slice(index + 1)];
+      }
+
+      return [...selectedCache, item];
+    },
+    // 选中项
+    onItemClick: function (e) {
+      const item = e.currentTarget.dataset.value;
+      if (item.disabled) return;
+      if (this.data.multiple) {
+        this.setData({
+          selectedCache: this.dealSelectedValue(item),
+        });
+      } else {
+        this.triggerEvent('onSelectPicker', item);
+      }
+    },
+    // 滚动到底部
+    bindscrolltolower: function () {
+      if (this.properties.loadStatus === 0) {
+        const pageNo = this.data.pageNo + 1;
+        this.setData({ pageNo });
+        this.triggerEvent('_childFetchData', {
+          pageNo,
+          searchValue: this.data.searchValue,
+        });
+      }
+    },
+    // 重试
+    onRetry: function () {
+      const { pageNo } = this.data;
+      if (this.properties.loadStatus === 2) {
+        this.setData({
+          status: 1,
+        });
+        this.triggerEvent('_childFetchData', {
+          pageNo: pageNo,
+          searchValue: this.data.searchValue,
+        });
+      }
+    },
+  },
+  observers: {
+    'option,searchValue,filterable': function (option, searchValue, filterable) {
+      const { ignoreCase } = this.properties;
+      if (filterable) {
+        this.setData({
+          showOption: option,
+        });
+      } else {
+        const searchRange = option.filter((item) => {
+          if (ignoreCase) {
+            return String(item.label).toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
+          }
+          return item.label.indexOf(searchValue) !== -1;
+        });
+        this.setData({
+          showOption: searchRange,
+          status: searchRange.length > 0 ? 0 : 3,
+        });
+      }
+    },
+    'selectedValue,showOption': function (selectedValue, showOption) {
+      const data = Array.isArray(selectedValue) ? selectedValue : [selectedValue];
+      const optionMap = showOption.reduce((pre, cur) => {
+        pre[cur.value] = cur;
+        return pre;
+      }, {});
+      const selectedCache = data.map((d) => optionMap[d]).filter((item) => !!item);
+      this.setData({ selectedCache });
+    },
+    loadStatus: function (loadStatus) {
+      this.setData({
+        status: loadStatus,
+      });
+    },
+    currentPageNo: function (currentPageNo) {
+      this.setData({ pageNo: currentPageNo });
+    },
+  },
+});

package/components/wd-select/select/dropdown-select/index.json

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

package/components/wd-select/select/dropdown-select/index.wxml

@@ -0,0 +1,37 @@
+<wxs module="tools"> function includes(array, item) { return array.map(function (v) { return v.value }).indexOf(item.value) !== -1 } module.exports = { includes: includes } </wxs>
+<view class="weda-ui-custom-picker">
+  <view class="weda-ui-custom-mask" data-clear="false" bindtap="cancelPicker"></view>
+  <view class="weda-ui-custom-picker__inner" style="height: {{height}};">
+    <view wx:if="{{!focus}}" class="weda-ui-custom-picker__header">
+      <button class="weda-ui-custom-picker__header-btn" bindtap="cancelPicker" data-clear="false">取消</button>
+      <button wx:if="{{multiple}}" class="weda-ui-custom-picker__header-btn" bindtap="confirmModal">确定</button>
+    </view>
+    <view wx:if="{{searchable}}" class="weda-ui-custom-search {{focus?'is-focused':''}}" style="{{focus? 'margin: 34rpx 32rpx 16rpx 32rpx':'margin: 20rpx 32rpx'}}">
+      <view class="weda-ui-custom-search-box" bindtap="onFocus">
+        <input class="weda-ui-input" focus="{{focus}}" bindfocus="onFocus" bindblur="onBlur" bindinput="bindinput" value="{{searchValue}}" hold-keyboard="true" bindconfirm="bindconfirm" />
+        <view class="weda-ui-custom-search-box__label {{multiple?'multiple':''}}">
+          <span class="weda-ui-custom-search-box__search-icon"></span>
+          <span class="weda-ui-custom-search-box__search-placeholder"> 搜索 </span>
+        </view>
+        <span wx:if="{{focus && searchValue !== ''}}" class="weda-ui-custom-search-box__dismiss-icon" bindtap="clear"></span>
+      </view>
+      <text class="weda-ui-custom-search__btn-cancle" bindtap="shrink">取消</text>
+    </view>
+    <scroll-view wx:if="{{status !== -1}}" class="weda-ui-custom-picker__body" scroll-y="true" enhanced="true" bindscrolltolower="bindscrolltolower">
+      <view class="weda-ui-custom-picker__cloumns">
+        <view class="weda-ui-custom-picker__cloumn">
+          <view wx:for="{{showOption}}" wx:key="i" wx:for-index="i" class="weda-ui-custom-picker__cloumn-item {{multiple?'multiple':''}} {{ tools.includes(selectedCache, item) ? 'is-selected':''}} {{ (item.disabled) ? 'is-disabled':''}}" bindtap="onItemClick" data-value="{{item}}">
+            <text class="weda-ui-custom-picker__cloumn-item-text {{multiple?'multiple':''}}">{{item.label}}</text>
+          </view>
+          <view wx:if="{{status === 1}}" class="weda-ui-custom-picker__status weda-ui-custom-picker__status--loading"> <i class="weda-ui-custom-picker__loading-icon"></i>加载中... </view>
+          <view wx:if="{{status === 2}}" class="weda-ui-custom-picker__status">
+            加载失败
+            <text class="weda-ui-custom-picker__btn weda-ui-custom-picker__btn--link" bindtap="onRetry">重试</text>
+          </view>
+          <view wx:if="{{status === 3&&!showOption.length}}" class="weda-ui-custom-picker__status"> 暂无数据 </view>
+        </view>
+      </view>
+    </scroll-view>
+    <view wx:if="{{status === -1}}" class="weda-ui-custom-picker__empty">暂无数据</view>
+  </view>
+</view>