@cloudbase/weda-ui-mp 3.14.4 → 3.15.1

package/components/wd-select/index.js

@@ -13,6 +13,18 @@ Component({
       type: String,
       value: 'select',
     },
+    supportManyRelated: {
+      type: Boolean,
+      value: false,
+    },
+    queryCondition: {
+      type: null,
+      value: [],
+    },
+    sorter: {
+      type: Array,
+      value: [],
+    },
   },
   data: {
     options: [],
@@ -50,11 +62,7 @@ Component({
         this.finalUpdateWidgetAPI();
       },
     'suffixType,suffixIcon': function (suffixType, suffixIcon) {
-      const [_suffixType, _suffixIcon] = convertFixedIcon(
-        suffixType,
-        suffixIcon,
-        SELECT_ICON_H5
-      );
+      const [_suffixType, _suffixIcon] = convertFixedIcon(suffixType, suffixIcon, SELECT_ICON_H5);
       this.setData({ _suffixType, _suffixIcon });
     },
     options: function (options) {
@@ -62,11 +70,7 @@ Component({
       this.setData({ itemMap });
     },
     'itemMap, value': function (itemMap, value) {
-      const { selectedLabel, selectedItem } = getSelected(
-        itemMap,
-        value,
-        false
-      );
+      const { selectedLabel, selectedItem } = getSelected(itemMap, value, false);
       this.setData({ selectedLabel, selectedItem });
     },
   },

package/components/wd-select/index.json

@@ -5,6 +5,6 @@
     "wd-form-item": "../wd-form-item/index",
     "wd-input-group": "../wd-input-group/index",
     "wd-input-wrap": "../wd-input-wrap/index",
-    "old-select": "../form/select"
+    "old-select": "./select/index"
   }
 }

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
+          supportManyRelated="{{supportManyRelated}}"
+          queryCondition="{{queryCondition}}"
+          sorter="{{sorter}}"
           name="{{name}}"
           labelVisible="{{false}}"
           label=""

package/components/wd-select/select/formats-util.js

@@ -0,0 +1,9 @@
+const SINGLE_FOREIGN_FORMATS = ['father-son', 'related', 'many-one', 'one-one', 'one-one-r'];
+/** do NOT export this array */
+const formatNeedDataFetch = [...SINGLE_FOREIGN_FORMATS, 'x-enum'];
+export function isSingleForeignFormat(format) {
+  return SINGLE_FOREIGN_FORMATS.includes(format);
+}
+export function isFormatNeedFetch(format) {
+  return formatNeedDataFetch.includes(format);
+}

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

@@ -0,0 +1,545 @@
+import destr from '../../../utils/destr';
+import deepEqual from '../../../utils/deepEqual';
+import { callDataSourceApi, callWedaApi } from '../../../utils/tcb';
+import { getDefaultQuery } from '../../../utils/getModelParams';
+import { isFormatNeedFetch, isSingleForeignFormat } from './formats-util';
+
+const STATUS_CLOSED = -1;
+const STATUS_LOADING = 1;
+const STATUS_FAILED = 2;
+const STATUS_EMPTY = 3;
+
+Component({
+  options: {
+    virtualHost: true,
+    pureDataPattern: /^__/,
+  },
+  properties: {
+    placeholder: {
+      type: String,
+      value: '请选择',
+    },
+    mode: {
+      type: String,
+      value: 'selector',
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    range: {
+      type: Array,
+      value: [],
+    },
+    defaultValue: {
+      type: null,
+    },
+    format: {
+      type: String,
+      value: '',
+    },
+    dataSourceName: {
+      type: String,
+      value: '',
+    },
+    viewId: {
+      type: String,
+      value: '',
+    },
+    primaryField: {
+      type: String,
+      value: '',
+    },
+    enumName: {
+      type: String,
+      value: '',
+    },
+    where: {
+      type: Array,
+      value: [],
+    },
+    allPickerShow: {
+      type: Boolean,
+      value: false,
+    },
+    version: {
+      type: String,
+      value: '',
+    },
+    readOnly: {
+      type: Boolean,
+      value: false,
+    },
+    ignoreCase: {
+      type: Boolean,
+      value: true,
+    },
+    staticSearchable: {
+      type: Boolean,
+      value: true,
+    },
+    supportManyRelated: {
+      type: Boolean,
+      value: false,
+    },
+    queryCondition: {
+      type: null,
+      value: [],
+    },
+    sorter: {
+      type: Array,
+      value: [],
+    },
+    multiple: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    selectRange: [],
+    start: '',
+    end: '',
+    value: '',
+    displayValue: '',
+    isSearch: false,
+    records: [],
+    searchRecords: [],
+    loadStatus: 0,
+    searchStatus: 0,
+    option: [],
+    searchOption: [],
+    _queryCondition: {},
+    queryParam: { select: { $master: true } },
+    chooseIndexValue: '',
+    chooseIndexLable: '',
+    isTurnPages: false,
+    pageNo: 1,
+    prevWhere: null,
+  },
+  lifetimes: {
+    attached() {
+      const { range, format } = this.properties;
+      let selectRange, start, end, displayValue;
+
+      if (isFormatNeedFetch(format)) {
+        selectRange = this.data.option.map((item) => item.label);
+      } else {
+        selectRange = range.map((item) => item.label);
+      }
+      if (isSingleForeignFormat(format)) {
+        this.setData({
+          isTurnPages: true,
+        });
+      } else if (format === 'x-enum') {
+        this.setData({
+          isTurnPages: false,
+        });
+      } else {
+        // 默认
+        this.setData({
+          option: range,
+          loadStatus: range.length > 0 ? 0 : STATUS_CLOSED,
+        });
+      }
+
+      this.setData({
+        selectRange,
+        start,
+        end,
+        displayValue,
+      });
+    },
+  },
+  observers: {
+    'defaultValue, option': function (defaultValue, option) {
+      const { range, mode, placeholder, format } = this.properties;
+
+      if (
+        deepEqual(
+          {
+            defaultValue,
+            option,
+            range,
+            mode,
+            placeholder,
+            format,
+          },
+          this.data.__prev,
+        )
+      ) {
+        return;
+      }
+
+      let value, displayValue;
+      switch (mode) {
+        case 'selector': {
+          // TODO: == 故意的
+          if (!isFormatNeedFetch(format)) {
+            const index = range.findIndex((item) => item.value == defaultValue);
+            // 小程序picker组件，value值表示选择了 range 中的第几个（下标从 0 开始），类型为number
+            value = index < 0 ? 0 : index;
+            displayValue = index < 0 ? defaultValue : range[index].label;
+            // 更新选中值
+            this.setData({
+              chooseIndexValue: index < 0 ? defaultValue : range[index].value,
+              chooseIndexLable: displayValue,
+            });
+          } else {
+            const { chooseIndexValue } = this.data;
+            const currentValue = defaultValue;
+            const index = option.findIndex((item) => item.value == currentValue);
+            if (
+              !chooseIndexValue &&
+              this.data.option.length > 0 &&
+              index === -1 &&
+              defaultValue &&
+              defaultValue.length > 0
+            ) {
+              // 没查找到，接口查找
+              this._fetchData({ defaultValue, isUpdate: true });
+              // 再次判断
+              if (this.data.chooseIndexValue && this.data.chooseIndexValue.length > 0) {
+                // 找到了
+                displayValue = this.data.chooseIndexLable;
+              }
+            } else {
+              value = index < 0 ? 0 : index;
+              displayValue = index < 0 ? currentValue : option[index].label;
+            }
+            // 更新value
+            this.setData({
+              chooseIndexValue: currentValue,
+              chooseIndexLable: displayValue,
+            });
+          }
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+      this.setData({
+        displayValue,
+        value,
+        __prev: {
+          defaultValue,
+          option,
+          range,
+          mode,
+          placeholder,
+          format,
+        },
+      });
+    },
+    range: function (range) {
+      // 防止range在不改变的情况下重新对option赋值，导致触发option的observer改变选中值
+      if (JSON.stringify(this.data.oldRange) === JSON.stringify(range)) return;
+      this.data.oldRange = range;
+      const { mode, format } = this.properties;
+      let selectRange = '';
+      switch (mode) {
+        case 'selector': {
+          if (!isFormatNeedFetch(format)) {
+            selectRange = range.map((item) => item.label);
+            const stringRange = range.map((item) => ({
+              ...item,
+              value: String(item.value),
+            }));
+            // 默认
+            this.setData({
+              option: stringRange,
+              loadStatus: range.length > 0 ? 0 : STATUS_CLOSED,
+            });
+          }
+          break;
+        }
+        default: {
+          break;
+        }
+      }
+      if (selectRange != '') {
+        this.setData({
+          selectRange,
+        });
+      }
+    },
+    enumName: function (enumName) {
+      if (this.properties.format === 'x-enum' && enumName) {
+        this._fetchEnumData();
+      }
+    },
+    'where,queryCondition,sorter': function (where, queryCondition, sorter) {
+      const _queryParam = getDefaultQuery({
+        supportManyRelated: this.data.supportManyRelated,
+        queryCondition,
+        where,
+        sorter,
+      });
+      if (deepEqual(_queryParam, this.data.queryParam)) {
+        return;
+      }
+
+      const { format, dataSourceName } = this.properties;
+      this.setData({ queryParam: _queryParam });
+      if (
+        isSingleForeignFormat(format) &&
+        dataSourceName &&
+        !this.data.isSearch // 防止多次执行对搜索影响
+      ) {
+        this.setData({
+          records: [],
+          option: [],
+          pageNo: 1,
+        });
+        this._fetchData({ queryParam: _queryParam });
+      }
+    },
+    records: function (records) {
+      const { primaryField } = this.properties;
+      if (records && records.length !== 0 && primaryField) {
+        const option = records.map((item) => {
+          return {
+            label: item[primaryField] || item._id,
+            value: item._id,
+            name: item[primaryField] || item._id,
+          };
+        });
+        this.setData({ selectRange: option.map((item) => item.label), option });
+      } else {
+        this.setData({
+          selectRange: [].map((item) => item.label),
+          option: [],
+        });
+      }
+    },
+    searchRecords: function (searchRecords) {
+      const { primaryField } = this.properties;
+      if (searchRecords && searchRecords.length !== 0 && primaryField) {
+        const option = searchRecords.map((item) => {
+          return {
+            label: item[primaryField] || item._id,
+            value: item._id,
+            name: item[primaryField] || item._id,
+          };
+        });
+        this.setData({ searchOption: option });
+      }
+    },
+    option: function (options) {
+      this.triggerEvent('changeOptions', { value: { options } });
+    },
+    'format,defaultValue': function (format, defaultValue) {
+      this.setData({
+        formatNeedFetch: isFormatNeedFetch(format),
+      });
+      if (isFormatNeedFetch(format)) {
+        this._fetchData({ defaultValue });
+      }
+    },
+  },
+  methods: {
+    // 最终选择的选项
+    onSelectPicker: function (e) {
+      if (this.data.disabled === true) {
+        return;
+      }
+      if (e.detail?.label) {
+        this.setData({
+          chooseIndexLable: e.detail.label,
+          value: e.detail.label,
+        });
+      }
+      if (e.detail?.value) {
+        this.setData({
+          chooseIndexValue: e.detail.value,
+        });
+      }
+      if (e.detail?.clear === 'true') {
+        this.setData({
+          chooseIndexValue: null,
+          chooseIndexLable: null,
+          value: null,
+          displayValue: '',
+        });
+      }
+      const { displayValue, chooseIndexLable, allPickerShow } = this.data;
+      this.setData({
+        allPickerShow: !allPickerShow,
+        displayValue: chooseIndexLable === '' ? displayValue : chooseIndexLable,
+      });
+      const { isSearch, option, searchOption, chooseIndexValue } = this.data;
+      if (chooseIndexValue && chooseIndexLable !== displayValue) {
+        const index = (isSearch ? searchOption : option)?.findIndex((item) => item.value === chooseIndexValue);
+        this.onChange({ detail: { value: index < 0 ? 0 : index } });
+      } else if (e.detail?.clear === 'true') {
+        this.onChange({ detail: { value: null } });
+      }
+      if (searchOption.length <= 0 && (this.data.dataSourceName?.length > 0 || isFormatNeedFetch(this.data.format))) {
+        this._fetchData({});
+      }
+    },
+    // 获取数据列表：关联关系和主子明细
+    _fetchData: async function ({
+      queryParam = this.data.queryParam,
+      searchValue = '',
+      defaultValue = '',
+      pageNo = 1,
+      isUpdate = false,
+    }) {
+      const { dataSourceName, viewId, records, searchRecords } = this.data;
+      if (!dataSourceName) return;
+      //   默认筛选条件
+      let _filter = destr(this.data.queryParam.filter) ?? {};
+      // 根据搜索值查询
+      if (searchValue) {
+        const search = this.data.ignoreCase ? '$search_ci' : '$search';
+        _filter = {
+          where: {
+            $and: [_filter.where, { $and: [{ [this.data.primaryField]: { [`${search}`]: searchValue } }] }],
+          },
+        };
+      }
+      // 查找默认值选项，用于回显
+      if (defaultValue) {
+        _filter = {
+          where: {
+            $and: [{ $and: [{ _id: { $search: defaultValue } }] }],
+          },
+        };
+      }
+
+      let pageSize = 50;
+      let data = await callDataSourceApi({
+        dataSourceName: dataSourceName,
+        viewId: viewId,
+        methodName: 'wedaGetRecordsV2',
+        params: {
+          ...queryParam,
+          filter: _filter,
+          pageNumber: pageNo,
+          pageSize: pageSize,
+        },
+      });
+      const results = data?.records;
+      if (isUpdate && results && results.length > 0) {
+        this.setData({
+          chooseIndexLable: results[0][this.properties.primaryField] || results[0]._id,
+          chooseIndexValue: results[0]._id,
+          displayValue: results[0][this.properties.primaryField] || results[0]._id,
+        });
+        return;
+      }
+      let status = 0;
+      if (!results) {
+        status = STATUS_FAILED;
+      } else if (results.length === 0) {
+        status = STATUS_EMPTY;
+      }
+      const isSearch = this.data.isSearch;
+      if (this.data.records.length === 0 && results?.length === 0) {
+        // 当异常的时候，主要为了不引起records的observer变化变化设置默认值
+        this.setData(isSearch ? { searchStatus: status } : { loadStatus: STATUS_CLOSED });
+      } else {
+        this.setData(
+          isSearch
+            ? {
+                searchRecords: searchRecords.concat(
+                  (results ?? []).filter((item) => searchRecords.findIndex((r) => r._id === item._id) < 0) || [],
+                ),
+                records: records.concat(
+                  (results ?? []).filter((item) => records.findIndex((r) => r._id === item._id) < 0) || [],
+                ),
+                searchStatus: status,
+              }
+            : {
+                searchRecords: searchRecords.concat(
+                  (results ?? []).filter((item) => searchRecords.findIndex((r) => r._id === item._id) < 0) || [],
+                ),
+                records: records.concat(
+                  (results ?? []).filter((item) => records.findIndex((r) => r._id === item._id) < 0) || [],
+                ),
+                loadStatus: status,
+              },
+        );
+      }
+    },
+    _childFetchData: function (data) {
+      const { isSearch, pageNo, searchValue } = data.detail;
+      this.setData({
+        isSearch,
+      });
+      if (isSearch) {
+        if (pageNo === 1) {
+          this.setData({
+            searchRecords: [],
+            searchOption: [],
+            searchStatus: STATUS_LOADING,
+          });
+        }
+        this._fetchData({ searchValue, pageNo });
+      } else {
+        if (pageNo === 1) {
+          this.setData({
+            records: [],
+            option: [],
+            loadStatus: STATUS_LOADING,
+          });
+        }
+        this.setData({
+          pageNo,
+        });
+        this._fetchData({ pageNo });
+      }
+    },
+    // 获取通用选项集列表
+    _fetchEnumData: async function () {
+      let data = await callWedaApi({
+        action: 'DescribeGeneralOptionsDetailList',
+        data: {
+          OptNameList: [this.properties.enumName],
+          PageIndex: 1,
+          PageSize: 10,
+        },
+      });
+      const config = destr(data?.Items?.[0]?.Config) ?? [];
+      const option = config.map((item) => {
+        return {
+          label: item.value,
+          value: item.key,
+          name: item.value,
+        };
+      });
+      this.setData({
+        selectRange: option.map((item) => item.label),
+        option,
+        searchOption: option,
+        loadStatus: option.length > 0 ? 0 : STATUS_CLOSED,
+      });
+    },
+    onChange(e) {
+      const { range, mode, format } = this.properties;
+      let displayValue;
+
+      if (!isFormatNeedFetch(format)) {
+        const data = e.detail?.value != null ? range[e.detail.value] : { label: null, value: null };
+        this.triggerEvent('change', { ...data, value: data.value, context: { option: data } });
+        displayValue = data.label;
+      } else {
+        const { isSearch, searchOption, option } = this.data;
+        const opt = isSearch ? searchOption : option;
+        const data = e.detail?.value != null ? opt[e.detail.value] : { label: null, value: null };
+        this.triggerEvent('change', { ...data, value: data.value, context: { option: data } });
+
+        displayValue = this.properties.displayValue;
+      }
+
+      this.setData({ displayValue });
+    },
+    onCancel(e) {
+      this.triggerEvent('cancel', e.detail);
+    },
+    onSearch(event) {
+      this.triggerEvent('search', { value: event.detail.value });
+    },
+  },
+});

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

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "dropdownSelect": "../../form/select/dropdown-select",
+    "wd-form-item-read-only": "../../wd-form-item-read-only"
+  }
+}

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

@@ -0,0 +1,26 @@
+ <wd-form-item-read-only version="{{version}}" readOnly="{{readOnly}}" readValue="{{displayValue}}">
+      <view class="wd-select">
+          <view class="wd-select-input-group"  bindchange="onChange" bindtap="onSelectPicker" data-show="true">
+            <label class="wd-select-input {{displayValue ? '' : 'weui-input__placeholder'}}">{{displayValue || placeholder}}</label>
+          </view>
+          <block wx:if="{{allPickerShow}}">
+            <dropdownSelect
+              ignoreCase="{{ignoreCase}}"
+              staticSearchable="{{staticSearchable}}"
+              class="weui-picker__group weui-input"
+              bindchange="onChange"
+              bind:_childFetchData="_childFetchData"
+              bind:onSelectPicker="onSelectPicker"
+              option="{{option}}"
+              loadStatus="{{loadStatus}}"
+              searchOption="{{searchOption}}"
+              searchStatus="{{searchStatus}}"
+              chooseIndexValue="{{chooseIndexValue}}"
+              isTurnPages="{{isTurnPages}}"
+              pageNo="{{pageNo}}"
+              _needFetch="{{formatNeedFetch}}"
+              bind:search="onSearch"
+            />
+           </block>
+    </view>
+  </wd-form-item-read-only>

package/components/wd-select/select/index.wxss

@@ -0,0 +1,5 @@
+/* 标准化样式适配 start */
+.wd-form-item .wd-form-input-wrap .wd-select {
+  width: 100%;
+}
+/* 标准化样式适配 end */

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

@@ -13,6 +13,18 @@ Component({
       type: String,
       value: 'select-multiple',
     },
+    supportManyRelated: {
+      type: Boolean,
+      value: false,
+    },
+    queryCondition: {
+      type: null,
+      value: [],
+    },
+    sorter: {
+      type: Array,
+      value: [],
+    },
   },
   data: {
     options: [],
@@ -50,11 +62,7 @@ Component({
         this.finalUpdateWidgetAPI();
       },
     'suffixType,suffixIcon': function (suffixType, suffixIcon) {
-      const [_suffixType, _suffixIcon] = convertFixedIcon(
-        suffixType,
-        suffixIcon,
-        SELECT_ICON_H5
-      );
+      const [_suffixType, _suffixIcon] = convertFixedIcon(suffixType, suffixIcon, SELECT_ICON_H5);
       this.setData({ _suffixType, _suffixIcon });
     },
     options: function (options) {

package/components/wd-select-multiple/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
+          supportManyRelated="{{supportManyRelated}}"
+          queryCondition="{{queryCondition}}"
+          sorter="{{sorter}}"
           labelVisible="{{false}}"
           label=""
           readOnly="{{readOnly}}"