@cloudbase/weda-ui-mp 3.6.0

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

@@ -0,0 +1,305 @@
+.weda-ui-custom-mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.4);
+  transition: all 0.4s ease-in-out 0;
+  pointer-events: none;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.weda-ui-custom-picker {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 1001;
+}
+
+.weda-ui-custom-picker__inner {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #fff;
+  border-radius: 10px 10px 0 0;
+  height: 390px;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 30px;
+}
+
+.weda-ui-custom-picker__header {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: space-between;
+  padding: 12px 20px;
+  border-bottom: 0.5px solid #e3e6eb;
+}
+
+.weda-ui-custom-picker__body {
+  padding: 5px 16px;
+  overflow: auto;
+  flex: 1 1 0px;
+}
+
+.weda-ui-custom-picker__header-btn {
+  margin: 0;
+  background-color: transparent;
+  font-size: 16px;
+  padding: 0;
+  line-height: 24px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-ui-custom-picker__header-btn.is-primary {
+  color: var(--wd-color-brand, #0052d9);
+}
+
+.weda-ui-custom-picker__header-btn::after {
+  border: none;
+}
+
+.weda-ui-custom-picker__cloumns {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  /* padding: 0 16px; */
+  /* height: 200px; */
+  overflow: hidden;
+}
+
+.weda-ui-custom-picker__cloumn {
+  flex: 1 1 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: auto;
+  /* height: 199px; */
+}
+
+.weda-ui-custom-picker__cloumn::-webkit-scrollbar {
+  display: none;
+}
+
+.weda-ui-custom-picker__cloumn-item {
+  display: flex;
+  align-items: center;
+  white-space: pre-wrap;
+  height: 48px;
+  justify-content: flex-start;
+  color: rgba(0, 0, 0, 0.9);
+  position: relative;
+}
+
+.weda-ui-custom-picker__cloumn-item::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  background-color: #e7e7e7;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+}
+
+.weda-ui-custom-picker__cloumn-item.multiple.is-selected {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+/* theme */
+.weda-ui-custom-picker__cloumn-item.multiple.is-selected::after {
+  content: '';
+  width: 21px;
+  height: 21px;
+  border: none;
+  border-radius: 3px;
+  display: block;
+  position: absolute;
+  left: 0px;
+  background-color: var(--wd-color-brand, #0052d9);
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNDAxNDYgNy45NDI3QzMuNDAxNCA3Ljk0MjY0IDMuNDAxNTMgNy45NDI3NiAzLjQwMTQ2IDcuOTQyN0wwLjc1IDUuMjkxMjNMMi41NDM0OSAzLjU0OTE5TDUuMTcyMSA2LjE3NzhMMTEuMzY4NyAwTDEzLjEyNDQgMS43NTU3TDYuOTI3OCA3LjkzMzVMNi45MzcxOCA3Ljk0Mjg5TDYuOTExMDkgNy45NjgyM0M2Ljg1NyA4LjAyMDc3IDYuODAxMTQgOC4wNzAzNyA2Ljc0MzcxIDguMTE3MDRMNi4wNDEyMyA4LjgxNzM4QzUuNTUyODYgOS4zMDQyNyA0Ljc2MjQ0IDkuMzAzNjcgNC4yNzQ4MSA4LjgxNjA0TDMuNDAxNDYgNy45NDI3WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC45Ii8+Cjwvc3ZnPg==);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.weda-ui-custom-picker__cloumn-item.multiple::after {
+  content: '';
+  width: 20px;
+  height: 20px;
+  border: 1px solid #dcdcdc;
+  border-radius: 3px;
+  display: block;
+  position: absolute;
+  left: 0px;
+}
+
+.weda-ui-custom-picker__cloumn-item.is-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.weda-ui-custom-picker__empty {
+  color: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-ui-custom-picker__status {
+  left: 16px;
+  color: rgba(0, 0, 0, 0.4);
+  font-size: 14px;
+  height: 48px;
+  line-height: 48px;
+  display: flex;
+  vertical-align: middle;
+}
+
+.weda-ui-custom-picker__status--loading {
+  color: var(--wd-color-brand, #0052d9);
+  display: flex;
+  align-items: center;
+}
+
+.weda-ui-custom-picker__status--empty {
+  color: #00000042;
+}
+
+.weda-ui-custom-picker__loading-icon {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-image: url(data:image/png;base64,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);
+  background-repeat: no-repeat;
+  background-size: contain;
+  animation: rotate360 0.8s linear infinite;
+}
+
+@keyframes rotate360 {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.weda-ui-custom-picker__status--loading .weda-ui-custom-picker__loading-icon {
+  margin-right: 8px;
+}
+
+.weda-ui-custom-picker__btn {
+  background-color: transparent;
+  border: none;
+  font-size: 14px;
+  margin-left: 8px;
+}
+
+.weda-ui-custom-picker__btn--link {
+  color: var(--wd-color-brand, #0052d9);
+}
+
+/* 搜索 */
+.weda-ui-custom-search {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin: 10px 16px;
+}
+
+.weda-ui-custom-search-box {
+  display: flex;
+  align-items: center;
+  flex: 1 1 0px;
+  background-color: #f1f2f5;
+
+  border-radius: 4px;
+  height: 100%;
+  position: relative;
+  transition: all 0.8s linear;
+}
+
+.weda-ui-custom-search .weda-ui-input {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  font-size: 16px;
+  line-height: 24px;
+  background-color: inherit;
+  padding: 0 40px 0 40px;
+  caret-color: var(--wd-color-brand, #0052d9);
+  color: rgba(0, 0, 0, 0.9);
+  border-radius: 4px;
+}
+
+.weda-ui-custom-search-box__label {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.weda-ui-custom-search-box__search-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0Ljc2NTUgMTUuMzI3OUMxMy41Mzc4IDE2LjMyMjEgMTEuOTc0MSAxNi45MTc2IDEwLjI3MTQgMTYuOTE3NkM2LjMyNDUzIDE2LjkxNzYgMy4xMjUgMTMuNzE4MSAzLjEyNSA5Ljc3MTMyQzMuMTI1IDUuODI0NTEgNi4zMjQ1MyAyLjYyNSAxMC4yNzE0IDIuNjI1QzE0LjIxODIgMi42MjUgMTcuNDE3NyA1LjgyNDUxIDE3LjQxNzcgOS43NzEzMkMxNy40MTc3IDExLjQ3NDEgMTYuODIyMSAxMy4wMzc4IDE1LjgyOCAxNC4yNjU1TDIxLjEyNSAxOS41NjI1TDIwLjA2MjYgMjAuNjI1TDE0Ljc2NTUgMTUuMzI3OVpNMTUuOTE1MiA5Ljc3MTMyQzE1LjkxNTIgNi42NTQzNCAxMy4zODg0IDQuMTI3NTIgMTAuMjcxNCA0LjEyNzUyQzcuMTU0MzUgNC4xMjc1MiA0LjYyNzUyIDYuNjU0MzQgNC42Mjc1MiA5Ljc3MTMyQzQuNjI3NTIgMTIuODg4MyA3LjE1NDM1IDE1LjQxNTEgMTAuMjcxNCAxNS40MTUxQzEzLjM4ODQgMTUuNDE1MSAxNS45MTUyIDEyLjg4ODMgMTUuOTE1MiA5Ljc3MTMyWiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC40Ii8+Cjwvc3ZnPgo=);
+  background-repeat: no-repeat;
+}
+
+.weda-ui-custom-search-box__dismiss-icon {
+  position: absolute;
+  right: 12px;
+  width: 24px;
+  height: 24px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjUgMTJDMjIuNSA2LjIwMTAxIDE3Ljc5OSAxLjUgMTIgMS41QzYuMjAxMDEgMS41IDEuNSA2LjIwMTAxIDEuNSAxMkMxLjUgMTcuNzk5IDYuMjAxMDEgMjIuNSAxMiAyMi41QzE3Ljc5OSAyMi41IDIyLjUgMTcuNzk5IDIyLjUgMTJaTTguNTA2MzYgNy40MjEzMUwxMiAxMC45MzYxTDE1LjQ5MzcgNy40MjEzMUwxNi41NTc1IDguNDc4NzZMMTMuMDU3NSAxMkwxNi41NTc1IDE1LjUyMTJMMTUuNDkzNyAxNi41Nzg3TDEyIDEzLjA2MzlMOC41MDYzNyAxNi41Nzg3TDcuNDQyNTEgMTUuNTIxMkwxMC45NDI1IDEyTDcuNDQyNSA4LjQ3ODc2TDguNTA2MzYgNy40MjEzMVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNCIvPgo8L3N2Zz4K);
+  background-repeat: no-repeat;
+}
+
+/* theme */
+.weda-ui-custom-search__btn-cancle {
+  flex: 0 0 auto;
+  display: none;
+  margin-left: 16px;
+  color: var(--wd-color-brand, #0052d9);
+  font-size: 32rxp;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+.weda-ui-custom-search__btn-cancle::after {
+  border: none;
+}
+
+/* 获取焦点后 */
+.weda-ui-custom-search.is-focused .weda-ui-custom-search__btn-cancle {
+  display: inline-flex;
+}
+
+.weda-ui-custom-search.is-focused .weda-ui-custom-search-box__label {
+  left: 12px;
+  transform: translateX(0);
+}
+
+.weda-ui-custom-search.is-focused
+  .weda-ui-custom-search-box__search-placeholder {
+  display: none;
+}
+
+.weda-ui-custom-picker__cloumn-item-text.multiple {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 30px;
+}

package/components/form/selectMultiple/index.js

@@ -0,0 +1,328 @@
+import classNames from '../../../utils/classnames';
+import { isNil } from '../../../utils/lodash';
+import { callDataSourceApi } from '../../../utils/tcb';
+import { arrayToMap } from '../../../utils/tool';
+import lodashGet from 'lodash.get';
+
+// 判断值为空，展示placeholder
+export const isEmpty = (v) => {
+  if (typeof v === 'string') {
+    return v === '';
+  } else if (Array.isArray(v)) {
+    return v.length === 0;
+  } else {
+    return isNil(v);
+  }
+};
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    label: {
+      type: String,
+      value: '标题',
+    },
+    labelVisible: {
+      type: Boolean,
+      value: true,
+    },
+    placeholder: {
+      type: String,
+      value: '请选择',
+    },
+    layout: {
+      type: String,
+      value: 'horizontal',
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    range: {
+      type: Array,
+      value: [],
+    },
+    defaultValue: {
+      type: null,
+    },
+    requiredFlag: {
+      type: Boolean,
+      value: false,
+    },
+    format: {
+      type: String,
+      value: '',
+    },
+    dataSourceName: {
+      type: String,
+      value: '',
+    },
+    viewId: {
+      type: String,
+      value: '',
+    },
+    primaryField: {
+      type: String,
+      value: '',
+    },
+    allPickerShow: {
+      type: Boolean,
+      value: false,
+    },
+    version: {
+      type: String,
+      value: '',
+    },
+    readOnly: {
+      type: Boolean,
+      value: false,
+    },
+    ignoreCase: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    cls: '',
+    subCls: '',
+    value: [],
+    displayLabel: [],
+    displayCls: 'weui-input__placeholder',
+    records: [],
+    loadStatus: 0,
+    searchStatus: 0,
+    option: [],
+    searchOption: [],
+    width: '100%',
+    isEmpty: true,
+  },
+  lifetimes: {
+    attached() {
+      const { className, layout, disabled, range } = this.properties;
+      const isFlex = layout !== 'vertical';
+      const cls = classNames({
+        'weda-ui': true,
+        'weda-select': true,
+        [className]: className,
+      });
+      const subCls = classNames({
+        'weui-cell': true,
+        'weui-cell_active': true,
+        'weui-cell_form': true,
+        'weui-flex__item': isFlex,
+        'weui-cell_disabled': disabled,
+      });
+
+      let displayValue;
+
+      // 默认
+      this.setData({
+        option: range,
+        loadStatus: range.length > 0 ? 0 : -1,
+      });
+      this.setData({
+        value: this.properties.defaultValue,
+        cls,
+        subCls,
+        displayValue,
+      });
+    },
+    ready() {
+      // eslint-disable-next-line rulesdir/no-timer
+      setTimeout(() => {
+        const that = this;
+        const query = wx.createSelectorQuery().in(this);
+        query.select('#select-picker').boundingClientRect();
+        query.exec(function (res) {
+          if (res[0]?.width || res[0]?.width > 0) {
+            const w = parseInt(res[0].width);
+            const windowWidth = wx.getSystemInfoSync().windowWidth;
+            // 35为向右偏移量margin-right，防止内容过长覆盖箭头，不减去偏移量导致表单对不齐
+            that.setData({
+              width: ((w - 35) * 750) / windowWidth,
+            });
+          }
+        });
+      }, 200);
+    },
+  },
+  observers: {
+    defaultValue: function () {
+      this.setData({
+        value: this.properties.defaultValue,
+      });
+    },
+    'value,range': function () {
+      const { range, format } = this.properties;
+      if (format !== 'one-many' && format !== 'many-many') {
+        this.setData({ option: range });
+      }
+      const { option, value } = this.data;
+      const label = this.getLabels(value, option);
+      const checkRange = this.getChecks(value, option);
+      // 默认
+      this.setData({
+        option: checkRange,
+        displayLabel: label,
+      });
+    },
+    dataSourceName: function () {
+      const { format, dataSourceName, primaryField } = this.properties;
+      if (
+        (format === 'one-many' || format === 'many-many') &&
+        dataSourceName &&
+        primaryField
+      ) {
+        this.setData({
+          records: [],
+          option: [],
+          pageNo: 1,
+        });
+        this._fetchData(1);
+      }
+    },
+    displayLabel: function (displayLabel) {
+      this.setData({ isEmpty: isEmpty(displayLabel) });
+    },
+    option: function (options) {
+      this.triggerEvent('changeOptions', { value: { options } });
+    },
+  },
+  methods: {
+    onClosePicker: function () {
+      this.setData({
+        allPickerShow: false,
+      });
+    },
+    onOpenPicker: function () {
+      if (this.data.disabled === true) return;
+      this.setData({
+        allPickerShow: true,
+      });
+    },
+    // 最终选择的选项
+    onSelectPicker: function (e) {
+      if (this.data.disabled === true) return;
+      if (
+        e.detail.clear === 'true' ||
+        e.currentTarget.dataset.clear === 'true'
+      ) {
+        let options = this.properties.option.map((item) => ({
+          ...item,
+          check: false,
+        }));
+        this.setData({
+          displayLabel: null,
+          value: null,
+          allPickerShow: false,
+          option: options,
+        });
+        this.onChange({ detail: { value: null } });
+        return;
+      }
+      if (!e.detail.clear) {
+        const value = e.detail.map((v) => v.value);
+        this.setData({ value });
+        this.onChange({ detail: { value } });
+      }
+    },
+    onChange(e) {
+      this.triggerEvent('change', e.detail);
+    },
+    // 获取数据列表：一对多，多对多
+    _fetchData: async function (pageNo) {
+      const { dataSourceName, primaryField } = this.properties;
+      if (!dataSourceName) return;
+
+      const { records } = this.data;
+      let pageSize = 200;
+      let data = await callDataSourceApi({
+        dataSourceName: dataSourceName,
+        methodName: 'wedaGetRecords',
+        params: {
+          pageNo: pageNo,
+          pageSize: pageSize,
+        },
+      });
+      const results = data?.records.map((item) => {
+        return {
+          ...item,
+          label: item[primaryField],
+          value: item._id,
+        };
+      });
+      if (this.data.records.length === 0 && results?.length === 0) {
+        // 当异常的时候，主要为了不引起records的observer变化变化设置默认值
+        this.setData({
+          loadStatus: -1,
+        });
+      } else {
+        this.setData({
+          records: records.concat(results || []),
+          loadStatus: status,
+        });
+      }
+      const finalRecords = records.concat(results || []);
+
+      if (finalRecords && finalRecords.length > 0) {
+        const { value } = this.data;
+        const label = this.getLabels(value, finalRecords);
+        const stringRange = this.getChecks(value, finalRecords);
+        // 默认
+        this.setData({
+          option: stringRange,
+          loadStatus: results.length > 0 ? 0 : -1,
+          displayLabel: label,
+        });
+        return;
+      }
+      let status = 0;
+      if (!results) {
+        status = 2;
+      } else if (results.length === 0) {
+        status = 3;
+      } else {
+        status = results.length === 200 ? 1 : 0;
+      }
+    },
+    _childFetchData: function (e) {
+      const { pageNo } = e.detail;
+      this._fetchData(pageNo);
+    },
+    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];
+          return lodashGet(obj, 'text') ?? lodashGet(obj, 'label') ?? d;
+        });
+      }
+      return labels;
+    },
+    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;
+    },
+    onSearch(event) {
+      this.triggerEvent('search', { value: event.detail.value });
+    },
+  },
+});

package/components/form/selectMultiple/index.json

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

package/components/form/selectMultiple/index.wxml

@@ -0,0 +1,20 @@
+<formcell className="{{cls}}" style="{{style}}" label="{{labelVisible ? label : null}}" layout="{{layout}}" multiCell="{{false}}" requiredFlag="{{requiredFlag}}">
+  <wd-form-item-read-only version="{{version}}" readOnly="{{readOnly}}" readValue="{{displayLabel}}">
+    <view class="{{subCls}}">
+      <view class="weui-cell__bd">
+        <view class="weui-picker__group weui-input select-picker weda-ui-tag" id="select-picker" bindtap="onOpenPicker" data-show="true">
+          <block wx:if="{{!isEmpty}}">
+            <view class="weda-ui-show-label">{{displayLabel}}</view>
+            <view class="weda-ui-select-multiple-picker-clear-icon" catchtap="onSelectPicker" data-clear="true"></view>
+          </block>
+          <block wx:else>
+            <view><label class="weda-ui-placeholder weui-input__placeholder">{{placeholder}}</label></view>
+          </block>
+        </view>
+        <block wx:if="{{allPickerShow}}">
+          <dropdownSelect class="weui-picker__group weui-input" bindchange="onChange" bind:_childFetchData="_childFetchData" bind:onSelectPicker="onSelectPicker" bind:onClosePicker="onClosePicker" option="{{option}}" loadStatus="{{loadStatus}}" searchStatus="{{searchStatus}}" displayLabel="{{displayLabel}}" selectedValue="{{value}}" ignoreCase="{{ignoreCase}}" bind:search="onSearch" />
+        </block>
+      </view>
+    </view>
+  </wd-form-item-read-only>
+</formcell>