@cloudbase/weda-ui-mp 3.15.8 → 3.16.0

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

@@ -1,14 +1,17 @@
 import destr from '../../../utils/destr';
-import deepEqual from '../../../utils/deepEqual';
 import { callDataSourceApi, callWedaApi } from '../../../utils/tcb';
+import { arrayToMap } from '../../../utils/tool';
+import lodashGet from 'lodash.get';
+import deepEqual from '../../../utils/deepEqual';
 import { getDefaultQuery } from '../../../utils/getModelParams';
-import { isFormatNeedFetch, isSingleForeignFormat } from './formats-util';
+import { isFormatNeedFetch, isFormatWithFilterable } from './formats-util';
+import { textToString } from '../../../utils/platform';
 
-const STATUS_CLOSED = -1;
+const STATUS_CLOSED = 0;
 const STATUS_LOADING = 1;
 const STATUS_FAILED = 2;
-const STATUS_EMPTY = 3;
-
+const SEARCH_STATUS_EMPTY = 3;
+const STATUS_EMPTY = -1;
 Component({
   options: {
     virtualHost: true,
@@ -19,10 +22,6 @@ Component({
       type: String,
       value: '请选择',
     },
-    mode: {
-      type: String,
-      value: 'selector',
-    },
     disabled: {
       type: Boolean,
       value: false,
@@ -74,10 +73,6 @@ Component({
       type: Boolean,
       value: true,
     },
-    staticSearchable: {
-      type: Boolean,
-      value: true,
-    },
     supportManyRelated: {
       type: Boolean,
       value: false,
@@ -94,174 +89,76 @@ Component({
       type: Boolean,
       value: false,
     },
+    searchable: {
+      type: Boolean,
+      value: true,
+    },
+    filterable: {
+      type: Boolean,
+      value: false,
+    },
   },
   data: {
     selectRange: [],
-    start: '',
-    end: '',
-    value: '',
-    displayValue: '',
-    isSearch: false,
-    records: [],
-    searchRecords: [],
+    value: null,
     loadStatus: 0,
-    searchStatus: 0,
     option: [],
-    searchOption: [],
     _queryCondition: {},
     queryParam: { select: { $master: true } },
-    chooseIndexValue: '',
-    chooseIndexLable: '',
-    isTurnPages: false,
-    pageNo: 1,
-    prevWhere: null,
+    currentPageNo: 1,
+    _filterable: false,
+    hasNextPage: true,
   },
   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,
-        });
+      const { range, filterable, format, defaultValue } = this.properties;
+      const label = this.getLabels(defaultValue, range);
+      console.log(filterable, format);
+      if (this.data.value?.[0] === '1') {
+        console.log(filterable);
+        console.log('99');
       }
 
       this.setData({
-        selectRange,
-        start,
-        end,
-        displayValue,
+        option: range,
+        _filterable: format && isFormatWithFilterable(format) ? true : filterable,
+        value: [].concat(defaultValue),
+        displayValue: label,
       });
+      this._initFetchData({ searchValue: '' });
+    },
+    detached() {
+      const id = this.data.timeId;
+      if (id !== '') {
+        clearTimeout(id);
+      }
     },
   },
   observers: {
-    'defaultValue, option': function (defaultValue, option) {
-      const { range, mode, placeholder, format } = this.properties;
-
-      if (
-        deepEqual(
-          {
-            defaultValue,
-            option,
-            range,
-            mode,
-            placeholder,
-            format,
-          },
-          this.data.__prev,
-        )
-      ) {
+    defaultValue: function (defaultValue) {
+      const _value = [].concat(defaultValue);
+      if (deepEqual(_value, this.data.value)) {
         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,
-        },
+        value: _value,
       });
-    },
-    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 (_value.filter((i) => textToString(i)).length) {
+        this._initFetchData({ searchValue: '' });
       }
-      if (selectRange != '') {
-        this.setData({
-          selectRange,
-        });
+    },
+    'value,range': function (value, range) {
+      let _option = this.data.option;
+      if (!isFormatNeedFetch(this.data.format)) {
+        _option = range;
       }
+      const label = this.getLabels(value, _option);
+      const checkRange = this.getChecks(value, _option);
+      // 默认
+      this.setData({
+        option: checkRange,
+        displayValue: label,
+      });
     },
     enumName: function (enumName) {
       if (this.properties.format === 'x-enum' && enumName) {
@@ -279,115 +176,52 @@ Component({
         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 });
-      }
+      this.setData({ queryParam: _queryParam }, () => {
+        this._initFetchData({ 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 {
+    format: function (format) {
+      if (isFormatWithFilterable(format)) {
+        // 关联关系，自定义查询规则，不走前端过滤
         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,
-          };
+          _filterable: true,
         });
-        this.setData({ searchOption: option });
       }
     },
-    option: function (options) {
-      this.triggerEvent('changeOptions', { value: { options } });
+  },
+  methods: {
+    onClosePicker: function () {
+      this.setData({
+        allPickerShow: false,
+      });
+      this._initFetchData({ searchValue: '' });
     },
-    'format,defaultValue': function (format, defaultValue) {
+    onOpenPicker: function () {
+      if (this.data.disabled === true) return;
       this.setData({
-        formatNeedFetch: isFormatNeedFetch(format),
+        allPickerShow: true,
       });
-      if (isFormatNeedFetch(format)) {
-        this._fetchData({ defaultValue });
-      }
+      this.triggerEvent('focus');
     },
-  },
-  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({});
+      if (this.data.disabled === true) return;
+      if (this.data.multiple) {
+        const value = e.detail.map((v) => v.value);
+        const options = e.detail.map((v) => ({ label: v.label, value: v.value, extra: { ...v } }));
+
+        this.setData({ value, allPickerShow: false });
+        this.onChange({ detail: { value, context: { options } } });
+      } else {
+        this.setData({ value: [].concat(e.detail.value), allPickerShow: false });
+        this.onChange({ detail: { value: e.detail.value, context: { option: e.detail } } });
       }
     },
     // 获取数据列表：关联关系和主子明细
-    _fetchData: async function ({
-      queryParam = this.data.queryParam,
-      searchValue = '',
-      defaultValue = '',
-      pageNo = 1,
-      isUpdate = false,
-    }) {
-      const { dataSourceName, viewId, records, searchRecords } = this.data;
+    _fetchData: async function ({ queryParam = this.data.queryParam, searchValue = '', pageNo = 1, _init = false }) {
+      const { dataSourceName, viewId, primaryField } = this.data;
       if (!dataSourceName) return;
+      this.setData({ loadStatus: STATUS_LOADING });
       //   默认筛选条件
       let _filter = destr(this.data.queryParam.filter) ?? {};
       // 根据搜索值查询
@@ -395,21 +229,13 @@ Component({
         const search = this.data.ignoreCase ? '$search_ci' : '$search';
         _filter = {
           where: {
-            $and: [_filter.where, { $and: [{ [this.data.primaryField]: { [`${search}`]: searchValue } }] }],
+            $and: [_filter.where, { $and: [{ [primaryField]: { [`${search}`]: searchValue } }] }],
           },
         };
       }
-      // 查找默认值选项，用于回显
-      if (defaultValue) {
-        _filter = {
-          where: {
-            $and: [{ $and: [{ _id: { $search: defaultValue } }] }],
-          },
-        };
-      }
-
+      const records = _init ? [] : this.data.option;
       let pageSize = 50;
-      let data = await callDataSourceApi({
+      let res = await callDataSourceApi({
         dataSourceName: dataSourceName,
         viewId: viewId,
         methodName: 'wedaGetRecordsV2',
@@ -420,76 +246,100 @@ Component({
           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,
+      const results = res?.records.map((item) => ({
+        ...item,
+        label: item[primaryField],
+        value: item._id,
+      }));
+
+      let finalRecords = records.concat(results || []);
+      finalRecords = this.getUniqueOption(finalRecords);
+      const { value } = this.data;
+      const unchecked = value?.filter((i) => i && !finalRecords.find((j) => i === j.value));
+      // 跨页勾选回显示
+      if (unchecked?.length) {
+        const uncheckedItem = await this.fetchItem(unchecked);
+        uncheckedItem?.forEach((i) => {
+          if (i) {
+            finalRecords.unshift(i);
+          }
         });
-        return;
       }
-      let status = 0;
+      const label = this.getLabels(value, finalRecords);
+      const stringRange = this.getChecks(value, finalRecords);
+      let status = STATUS_CLOSED;
       if (!results) {
         status = STATUS_FAILED;
-      } else if (results.length === 0) {
-        status = STATUS_EMPTY;
+      } else if (finalRecords.length === 0) {
+        status = SEARCH_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,
+        option: stringRange,
+        displayValue: label,
+        loadStatus: status,
+        currentPageNo: pageNo,
+        hasNextPage: stringRange?.length < res?.total,
       });
-      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.triggerEvent('updateSelect', { value: value, option: stringRange });
+    },
+    _childFetchData: function (data) {
+      if (this.data.hasNextPage) {
+        const { pageNo, searchValue } = data.detail;
+        this._fetchData({ pageNo, searchValue });
+      }
+    },
+    getLabels: function (values, options) {
+      let labels = values;
+      if (Array.isArray(values) && Array.isArray(options)) {
+        const rm = arrayToMap(options, 'value');
+        labels = values.map((d) => {
+          const obj = rm[d];
+          let item = lodashGet(obj, 'text') ?? lodashGet(obj, 'label') ?? d;
+          return textToString(item);
         });
-        this._fetchData({ pageNo });
       }
+      if (this.data.multiple) {
+        return labels.join(',');
+      } else {
+        return labels?.[0];
+      }
+    },
+    getChecks: function (values, options) {
+      const _values = Array.isArray(values) ? values : [];
+      const _options = Array.isArray(options) ? options : [];
+      const stringRange = _options.map((item) => {
+        const obj = _values.find((el) => el === item.value);
+        const check = !!obj;
+        const value = String(item.value);
+        return { ...item, value, check };
+      });
+      return stringRange;
+    },
+    fetchItem: async function (values) {
+      const { queryParam, dataSourceName, primaryField } = this.data;
+      const _filter = {
+        where: {
+          $and: [{ $or: values.map((i) => ({ _id: { $search: i } })) }],
+        },
+      };
+      let data = await callDataSourceApi({
+        dataSourceName: dataSourceName,
+        methodName: 'wedaGetRecordsV2',
+        params: {
+          ...queryParam,
+          filter: _filter,
+          pageNumber: 1,
+          pageSize: 200,
+        },
+      });
+      return (
+        data?.records?.map((item) => ({
+          ...item,
+          label: item[primaryField],
+          value: item._id,
+        })) || []
+      );
     },
     // 获取通用选项集列表
     _fetchEnumData: async function () {
@@ -501,6 +351,7 @@ Component({
           PageSize: 10,
         },
       });
+
       const config = destr(data?.Items?.[0]?.Config) ?? [];
       const option = config.map((item) => {
         return {
@@ -512,34 +363,47 @@ Component({
       this.setData({
         selectRange: option.map((item) => item.label),
         option,
-        searchOption: option,
-        loadStatus: option.length > 0 ? 0 : STATUS_CLOSED,
+        loadStatus: option.length > 0 ? 0 : STATUS_EMPTY,
       });
     },
-    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;
+    getUniqueOption: function (option) {
+      const optionMap = option.reduce((acc, item) => {
+        if (!acc[item.value]) {
+          acc[item.value] = item;
+        }
+        return acc;
+      }, {});
+      const uniqueOption = Object.values(optionMap)?.filter((item) => textToString(item?.value));
+      return uniqueOption;
+    },
+    // 初始化搜索数据，包括属性变化/搜索值变化
+    _initFetchData: function ({ queryParam = this.data.queryParam, searchValue = '' }) {
+      clearTimeout(this.data.fetchTimed);
+      if (!isFormatWithFilterable(this.data.format)) {
+        return;
       }
-
-      this.setData({ displayValue });
+      this.setData({ option: [], pageNo: 1, status: STATUS_LOADING });
+      // eslint-disable-next-line rulesdir/no-timer
+      this.data.fetchTimed = setTimeout(() => {
+        this._fetchData({ queryParam, searchValue, _init: true });
+      }, 200);
+    },
+    onChange(e) {
+      this.triggerEvent('change', e.detail);
+      this.triggerEvent('updateSelect', { value: e.detail.value, option: this.data.option });
     },
     onCancel(e) {
       this.triggerEvent('cancel', e.detail);
     },
     onSearch(event) {
-      this.triggerEvent('search', { value: event.detail.value });
+      const { noEvent, value: searchValue } = event.detail;
+
+      // 取消不触发搜索事件
+      if (!noEvent) {
+        this.triggerEvent('search', { value: searchValue });
+      }
+
+      this._initFetchData({ searchValue: event.detail.value });
     },
   },
 });

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

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