@cloudbase/weda-ui-mp 0.2.20

package/components/form/select/index.json

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

package/components/form/select/index.wxml

@@ -0,0 +1,57 @@
+<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="{{displayValue}}">
+    <view class="{{subCls}}">
+      <view class="weui-cell__bd">
+        <block wx:if="{{mode === 'mutiRegion'}}">
+          <picker mode="multiSelector" disabled="{{disabled}}" range="{{multiArray}}" range-key="value" bindcolumnchange="columnchange" value="{{multiIndex}}" bindchange="onChange" class="weui-picker__group weui-input">
+            <label class="select-picker-input {{displayValue ? '' : 'weui-input__placeholder'}}">{{displayValue || placeholder}}</label>
+          </picker>
+        </block>
+        <block wx:elif="{{mode === 'date'}}">
+          <block wx:if="{{dateMode === 'datetime'}}">
+            <view class="weui-picker__group weui-input all-time-picker" bindtap="onAllTimePicker" data-show="true">
+              <input placeholder="{{placeholder}}" disabled="true" value="{{value}}" />
+            </view>
+            <block wx:if="{{allPickerShow}}">
+              <datetimepicker startDateTime="{{startDate}}" endDateTime="{{endDate}}" defaultDateTime="{{value}}" bind:onAllTimePicker="onAllTimePicker" />
+            </block>
+          </block>
+          <block wx:else>
+            <picker class="weui-picker__group weui-input" bindchange="onChange" bindcancel="onCancel" mode="{{mode}}" disabled="{{disabled}}" start="{{start}}" end="{{end}}" value="{{value}}" fields="{{dateMode}}">
+              <label class="select-picker-input {{displayValue ? '' : 'weui-input__placeholder'}}">{{displayValue || placeholder}}</label>
+            </picker>
+          </block>
+        </block>
+        <block wx:elif="{{mode === 'time'}}">
+          <picker class="weui-picker__group weui-input" bindchange="onChange" bindcancel="onCancel" mode="{{mode}}" disabled="{{disabled}}" start="{{start}}" end="{{end}}" value="{{value}}">
+            <label class="select-picker-input {{displayValue  ? '' :  'weui-input__placeholder'}}">{{displayValue || placeholder}}</label>
+          </picker>
+        </block>
+        <block wx:else>
+          <view class="weui-picker__group weui-input select-picker" id="select-picker" bindchange="onChange" bindtap="onSelectPicker" data-show="true">
+            <label class="select-picker-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>
+        </block>
+      </view>
+    </view>
+  </wd-form-item-read-only>
+</formcell>

package/components/form/select/index.wxss

@@ -0,0 +1,61 @@
+@import '../../../style/weda-ui.wxss';
+.weda-ui .weui-cell.weui-check__label {
+  padding: 16px;
+}
+.weda-ui .weui-flex__item .weui-cell.weui-check__label {
+  padding-left: 0;
+}
+
+.weda-ui.weda-select .weui-cell_form {
+  padding: 0 16px;
+}
+
+.weda-ui.weda-select .weui-flex__item .weui-cell_form {
+  padding: 0;
+  padding-right: 16px;
+}
+
+.weui-picker__group.weui-input.select-picker::after {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: block;
+  position: absolute;
+  right: -6px;
+  top: 12px;
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect opacity='0.01' width='24' height='24' fill='%23D8D8D8'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.6003 12.5769L7.93943 20L6.99981 19.0875L14.3157 11.9986L6.99983 4.91249L7.93945 4L15.5754 11.3961C15.5858 11.4048 15.596 11.4139 15.6059 11.4235L15.8278 11.639C16.0302 11.8355 16.03 12.1605 15.8274 12.3568L15.6253 12.5526L15.6049 12.5725C15.6034 12.574 15.6018 12.5754 15.6003 12.5769Z' fill='black' fill-opacity='0.4'/%3E %3C/svg%3E ");
+}
+
+.weda-ui.weda-select .select-picker-input {
+  margin-right: 17.5px;
+}
+
+/* 标准化样式适配 start */
+.wd-form-item .wd-form-input-wrap .weda-select {
+  width: 100%;
+}
+
+.wd-form-item
+  .wd-form-input-wrap
+  .weda-select
+  .weui-picker__group.weui-input.select-picker::after {
+  display: none;
+}
+
+.wd-mp-select-root .weui-cells::before,
+.wd-mp-select-root .weui-cells::after {
+  display: none;
+}
+
+.wd-form-item .wd-form-input-wrap .weda-select .weda-ui .weui-input {
+  padding: 9px 0;
+}
+
+.wd-form-item
+  .wd-form-input-wrap
+  .weda-select
+  .weui-flex__item
+  .weui-cell_form {
+  padding-right: 0;
+}
+/* 标准化样式适配 end */

package/components/form/select/region/index.js

@@ -0,0 +1,120 @@
+import { callWedaApi } from '../../../../utils/tcb';
+
+export let provinces = [];
+export let cities = [];
+export let regions = [];
+export let regionData = [];
+/**
+ *  获取运行态地区数据
+ *  查询所有的省市区数据https://iwiki.woa.com/pages/viewpage.action?pageId=1582408865
+ */
+export async function getAreaCode() {
+  try {
+    const res = await callWedaApi({
+      action: 'QueryRuntimeAreaCode',
+      data: { Mask: '11100' },
+    });
+    return res?.AreaCodeList;
+  } catch (error) {
+    console.error('错误', error);
+    return {};
+  }
+}
+export const getRegionTree = async function (defaultValue) {
+  regionData = await getAreaCode();
+  splitAreaData(regionData, regionData);
+  return changeResult(defaultValue, regionData);
+};
+export const splitAreaData = (areaData) => {
+  provinces = [];
+  cities = [];
+  regions = [];
+  areaData.forEach((item) => {
+    if (!item.Deprecated) {
+      if (item?.Type == 1) {
+        provinces.push(item);
+      }
+      if (item?.Type == 2 || (item?.Type == 1 && item.CentralCity)) {
+        cities.push(item);
+      } else if (item?.Type == 3) {
+        regions.push(item);
+      }
+    }
+  });
+};
+/***
+ * 用于构建change事件result返回值
+ */
+export const changeResult = (regionValue, areaData) => {
+  const defaultValue = regionValue ? regionValue.split(',') : null;
+  const changeValue = [];
+  const defaultIndex = [];
+  if (defaultValue && defaultValue.length > 0) {
+    defaultValue.forEach((element, index) => {
+      areaData.map((item, id) => {
+        //区级判重
+        if (
+          (item?.Value == element && index != 2) ||
+          (item?.Value == element &&
+            item.Code.substr(0, 2) == changeValue[0].code.substr(0, 2) &&
+            index == 2)
+        ) {
+          changeValue.push({
+            value: item?.Value,
+            code: item?.Code,
+          });
+          defaultIndex.push(id);
+        }
+      });
+    });
+  }
+  return { value: regionValue, result: changeValue };
+};
+/**
+ * 拼接地区选择默认值显示规则
+ */
+export const buildDisplayValue = (data, indexList, type) => {
+  let provinceItem = [];
+  let cityItem;
+  let regionItem;
+  switch (type) {
+    case 'levelOne': {
+      provinceItem = data[0][indexList[0]];
+      return {
+        value: provinceItem.value,
+        result: [provinceItem],
+      };
+    }
+    case 'levelTwo': {
+      provinceItem = data[0][indexList[0]];
+      cityItem = data[1][indexList[1]];
+      return {
+        value: provinceItem.value + ',' + cityItem.value,
+        result: [provinceItem, cityItem],
+      };
+    }
+    case 'levelThree': {
+      provinceItem = data[0][indexList[0]];
+      cityItem = data[1][indexList[1]];
+      regionItem = data[2][indexList[2]];
+      return {
+        value:
+          provinceItem.value + ',' + cityItem.value + ',' + regionItem.value,
+        result: [provinceItem, cityItem, regionItem],
+      };
+    }
+  }
+};
+
+/**
+ * 获取默认地区值所在key
+ */
+export const getAreaKey = (list, value) => {
+  var index = 0;
+  (list || []).forEach((item, i) => {
+    if (item?.Value === value) {
+      index = i;
+    }
+  });
+  return index;
+};

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

@@ -0,0 +1,231 @@
+Component({
+  properties: {
+    isActive: {
+      type: Boolean,
+      value: true,
+    },
+    mode: {
+      type: String,
+      value: 'selector',
+    },
+    option: {
+      type: Array,
+      value: [],
+    },
+    searchStatus: {
+      type: Number,
+      value: 0,
+    },
+    loadStatus: {
+      type: Number,
+      value: 0,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    displayLabel: {
+      type: Array,
+      value: [],
+    },
+    isTurnPages: {
+      type: Boolean,
+      isTurnPages: false,
+    },
+    ignoreCase: {
+      type: Boolean,
+      value: true,
+    },
+    staticSearchable: {
+      type: Boolean,
+      value: true,
+    },
+    selectedValue: {
+      type: Array,
+      value: [],
+    },
+  },
+  data: {
+    height: '390px',
+    focus: false,
+    searchValue: '',
+    disabledIndex: -1,
+    status: 0,
+    showOption: [],
+    searchPageNo: 1,
+    timeId: '',
+    pageNo: 1,
+    selectedCache: [], // 缓存当前选中值
+  },
+
+  lifetimes: {
+    detached() {
+      const id = this.data.timeId;
+      if (id !== '') {
+        clearTimeout(id);
+      }
+    },
+  },
+  methods: {
+    cancelPicker: function (e) {
+      this.triggerEvent('onSelectPicker', e.currentTarget.dataset);
+    },
+    isSelect: function () {
+      return true;
+    },
+    // 监听输入
+    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 });
+    },
+    closeModal: function () {
+      const { option } = this.properties;
+      this.setData({ selectedCache: option.filter((item) => item.check) });
+      this.triggerEvent('onClosePicker', false);
+    },
+    confirmModal: function () {
+      const { selectedCache } = this.data;
+      this.triggerEvent('onSelectPicker', selectedCache);
+      this.triggerEvent('onClosePicker', false);
+    },
+    // 获取焦点
+    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;
+      const selected = this.data.selectedCache;
+      if (selected.length > 48) {
+        const selectItem = selected.filter((el) => el === item.value);
+        if (selectItem.length > 0) {
+          this.setData({
+            selectedCache: this.dealSelectedValue(item),
+          });
+        } else {
+          wx.showToast({
+            title: '最多选择50条数据',
+            icon: 'none',
+            duration: 2000,
+          });
+        }
+      } else {
+        this.setData({
+          selectedCache: this.dealSelectedValue(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,staticSearchable': function (
+      option,
+      searchValue,
+      staticSearchable
+    ) {
+      const { ignoreCase } = this.properties;
+      if (searchValue === '') {
+        this.setData({
+          showOption: option,
+          status: option.length > 0 ? 0 : 3,
+        });
+      } else if (staticSearchable) {
+        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,
+        });
+      } else {
+        this.setData({
+          showOption: option,
+        });
+      }
+    },
+    selectedValue: function (selectedValue) {
+      const data = Array.isArray(selectedValue)
+        ? selectedValue
+        : [selectedValue];
+      const optionMap = this.properties.option.reduce((pre, cur) => {
+        pre[cur.value] = cur;
+        return pre;
+      }, {});
+      const selectedCache = data
+        .map((d) => optionMap[d])
+        .filter((item) => !!item);
+      this.setData({ selectedCache });
+    },
+  },
+});

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

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

package/components/form/selectMultiple/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="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 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">
+          <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 {{ tools.includes(selectedCache, item) ? 'is-selected':''}} {{ (i === disabledIndex || item.disabled) ? 'is-disabled':''}}" bindtap="onItemClick" data-value="{{item}}">
+            <text class="weda-ui-custom-picker__cloumn-item-text 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}}" 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>