@cloudbase/weda-ui 0.2.17 → 2.0.8

package/src/mp/components/form/input/index.wxss

@@ -1 +1,16 @@
 @import '../../../style/weda-ui.wxss';
+
+/*
+把weui-cell 的padding还回到input
+*/
+.weda-ui .weui-input {
+    padding: 28rpx 0;
+}
+
+.weui-btn_input-clear {
+    align-self: center;
+}
+
+/**
+ * END
+ */

package/src/mp/components/form/location/index.js

@@ -156,7 +156,48 @@ Component({
       };
       const { locationType, customLocation } = this.properties;
       if (locationType === 1 || locationType === 2) {
-        getCurrentLocation(locationType);
+        // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
+        wx.getSetting({
+          success: (res) => {
+            if (!res.authSetting['scope.userLocation']) {
+              // 没有授权
+              wx.authorize({
+                scope: 'scope.userLocation',
+                success: () => {
+                  // 用户已经同意小程序使用定位功能，后续调用 wx.getLocation 接口不会弹窗询问
+                  getCurrentLocation(locationType);
+                },
+                fail: (err) => {
+                  console.log('authorize fail', err);
+                  this.setData({
+                    currentPosition: {
+                      status: false,
+                      message: err.errMsg,
+                    },
+                    currentLocations: {},
+                  });
+                  this.triggerEvent('change', {
+                    value: null,
+                  });
+                  wx.showToast({
+                    icon: 'none',
+                    title: err.errMsg,
+                  });
+                },
+              });
+            } else {
+              // 已经授权
+              getCurrentLocation(locationType);
+            }
+          },
+          fail: (err) => {
+            console.log('getSetting fail', err);
+            wx.showToast({
+              icon: 'none',
+              title: 'getSetting fail',
+            });
+          },
+        });
       } else if (locationType === 3) {
         this.setData({
           currentPosition: {
@@ -299,7 +340,7 @@ Component({
       let location = {
         address: poiname,
         geopoint: {
-          coordinates: [latitude, longitude],
+          coordinates: [longitude, latitude],
           type: 'Point',
         },
       };

package/src/mp/components/form/location/index.wxss

@@ -1,8 +1,5 @@
 /* components/location/location.wxss */
 
-.form-location {
-}
-
 .form-location-warp {
   display: flex;
   white-space: nowrap;
@@ -26,10 +23,11 @@
   bottom: 0;
 }
 
-.form-location-con {
+.form-location_cell.form-location-con {
   flex: 1;
   display: flex;
   align-items: center;
+  padding-left: 0px;
 }
 
 .form-location-label_flag {
@@ -41,7 +39,7 @@
 }
 
 .form-location-label {
-  max-width: 150px;
+  width: 130px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -59,7 +57,7 @@
 }
 
 .form-location_cell {
-  padding: 16px 32px;
+  padding: 16px;
   line-height: 1.41176471;
   font-size: 17px;
   overflow: hidden;

package/src/mp/components/form/radio/index.js

@@ -1,5 +1,7 @@
 import classNames from '../../../utils/classnames';
+import destr from '../../../utils/destr';
 import handleEvents from '../../../utils/handleEvents';
+import { callWedaApi } from '../../../utils/tcb';
 
 Component({
   options: {
@@ -41,6 +43,14 @@ Component({
       type: Boolean,
       value: false,
     },
+    format: {
+      type: String,
+      value: '',
+    },
+    enumName: {
+      type: String,
+      value: '',
+    }
   },
   data: {
     cls: '',
@@ -68,6 +78,22 @@ Component({
     },
   },
   methods: {
+    _fetchData: 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,
+          checked: false
+        };
+      });
+      this.setData({ defaultRange: option });
+    },
+
     ...handleEvents([
       {
         name: 'change',
@@ -77,7 +103,14 @@ Component({
   },
   observers: {
     range: function (range) {
-      this.setData({ defaultRange: range });
+      if (this.properties.format !== 'x-enum') {
+        this.setData({ defaultRange: range });
+      }
     },
+    format: function (format) {
+      if (format === 'x-enum' && this.properties.enumName) {
+        this._fetchData();
+      }
+    }
   },
 });

package/src/mp/components/form/select/index.js

@@ -1,5 +1,34 @@
 import classNames from '../../../utils/classnames';
 import dayjs from '../../../utils/dayjs.min.js';
+import { getRegionTree, buildDisplayValue , provinces, cities, regions } from './region/index';
+import destr from '../../../utils/destr';
+import { callDataSourceApi, callWedaApi } from '../../../utils/tcb';
+import { REL_DICT } from '../../../utils/constant';
+import { isNil } from '../../../utils/lodash';
+
+const getWhereList = (where) => {
+  let result = [];
+  Array.isArray(where) &&
+    where.forEach((item1) => {
+      if (item1?.groupLogic !== 'or' && Array.isArray(item1?.logicData)) {
+        item1?.logicData.forEach((item2) => {
+          let [rel, val] = [REL_DICT[item2?.rel], item2?.value];
+          if ('_begin_with' === rel) {
+            rel = 'regex';
+            val = `^${val}`;
+          }
+          if ('_exclude' === rel) {
+            rel = 'regex';
+            val = `^((?!${val}).)*$`;
+          }
+          if (item2?.logic !== 'or' && item2?.key && rel && !isNil(val)) {
+            result.push({ key: item2.key, rel, val });
+          }
+        });
+      }
+    });
+  return result;
+};
 
 Component({
   options: {
@@ -34,10 +63,18 @@ Component({
       type: String,
       value: 'selector',
     },
+    dateMode: {
+      type: String,
+      value: 'day',
+    },
     disabled: {
       type: Boolean,
       value: false,
     },
+    regionType: {
+      type: String,
+      value: ''
+    },
     range: {
       type: Array,
       value: [
@@ -81,6 +118,10 @@ Component({
     defaultRegion: {
       type: Array,
     },
+    defaultMutiRegion: {
+      type: String,
+      value: ''
+    },
     separator: {
       type: String,
       value: ',',
@@ -89,6 +130,30 @@ Component({
       type: Boolean,
       value: false,
     },
+    format: {
+      type: String,
+      value: '',
+    },
+    dataSourceName: {
+      type: String,
+      value: '',
+    },
+    viewId: {
+      type: String,
+      value: '',
+    },
+    primaryField: {
+      type: String,
+      value: '',
+    },
+    enumName: {
+      type: String,
+      value: '',
+    },
+    where: {
+      type: Array,
+      value: []
+    }
   },
   data: {
     cls: '',
@@ -99,6 +164,12 @@ Component({
     value: '',
     displayValue: '',
     displayCls: '',
+    //省市级联动数据
+    multiArray: [[{ value: '地区数据加载中，请关闭弹窗后重试' }]],
+    multiIndex: [0, 0, 0], // 默认的下标
+    records: [],
+    option: [{ label: '', value: '' }],
+    whereEffected: []
   },
   lifetimes: {
     attached() {
@@ -112,6 +183,9 @@ Component({
         endTime,
         startDate,
         endDate,
+        dateMode,
+        defaultDate,
+        format,
       } = this.properties;
       const isFlex = layout !== 'vertical';
       const cls = classNames({
@@ -127,11 +201,15 @@ Component({
         'weui-cell_disabled': disabled,
       });
 
-      let selectRange, start, end;
+      let selectRange, start, end, displayValue;
 
       switch (mode) {
         case 'selector': {
-          selectRange = range.map((item) => item.label);
+          if (format === 'related' || format === 'father-son' || format === 'x-enum') {
+            selectRange = this.data.option.map((item) => item.label);
+          } else {
+            selectRange = range.map((item) => item.label);
+          }
           break;
         }
         case 'time': {
@@ -144,52 +222,60 @@ Component({
           break;
         }
         case 'date': {
-          start = startDate
-            ? this.converDate2Dayjs(startDate).format('YYYY-MM-DD')
-            : undefined;
-          end = endDate
-            ? this.converDate2Dayjs(endDate).format('YYYY-MM-DD')
-            : undefined;
+          start = this._coverNumber2Date(startDate, dateMode);
+          end = this._coverNumber2Date(endDate, dateMode);
+          displayValue = this._coverNumber2Date(defaultDate, dateMode);
           break;
         }
         case 'region': {
           break;
         }
+        case 'mutiRegion': {
+          this.getProvince();
+          break;
+        }
         default: {
           break;
         }
       }
-
       this.setData({
         cls,
         subCls,
         selectRange,
         start,
         end,
+        displayValue,
       });
     },
   },
   observers: {
-    'defaultValue, defaultTime, defaultDate, defaultRegion': function (
+    'defaultValue, defaultTime, defaultRegion,defaultMutiRegion,defaultDate': function (
       defaultValue,
       defaultTime,
-      defaultDate,
-      defaultRegion
+      defaultRegion,
+      defaultMutiRegion,
+      defaultDate
     ) {
-      const { range, mode, separator, placeholder } = this.properties;
+      const { range, mode, separator, placeholder, dateMode, format, option } =
+        this.properties;
       let value, displayValue;
       switch (mode) {
         case 'selector': {
-          const index = range.findIndex((item) => item.value === defaultValue);
-          value = index < 0 ? '' : defaultValue;
-          displayValue = index < 0 ? '' : range[index].label;
+          // TODO: == 故意的
+          if (format !== 'father-son' && format !== 'related' && format !== 'x-enum') {
+            const index = range.findIndex((item) => item.value == defaultValue);
+            value = index < 0 ? '' : defaultValue;
+            displayValue = index < 0 ? '' : range[index].label;
+          } else {
+            const index = option.findIndex((item) => item.value == defaultValue);
+            value = index < 0 ? '' : defaultValue;
+            displayValue = index < 0 ? '' : option[index].label;
+          }
           break;
         }
         case 'date': {
-          value = defaultDate
-            ? this.converDate2Dayjs(defaultDate).format('YYYY-MM-DD')
-            : undefined;
-          displayValue = value;
+          value = this._coverNumber2Date(defaultDate, dateMode);
+          displayValue = this._coverNumber2Date(defaultDate, dateMode, true);
           break;
         }
         case 'time': {
@@ -202,6 +288,10 @@ Component({
           displayValue = defaultRegion.join(separator);
           break;
         }
+        case 'mutiRegion': {
+          displayValue = defaultMutiRegion || '';
+          break;
+        }
         default: {
           break;
         }
@@ -213,11 +303,13 @@ Component({
       });
     },
     range: function (range) {
-      const { mode } = this.properties;
+      const { mode, format } = this.properties;
       let selectRange = '';
       switch (mode) {
         case 'selector': {
-          selectRange = range.map((item) => item.label);
+          if (format !== 'father-son' && format !== 'related' && format !== 'x-enum') {
+            selectRange = range.map((item) => item.label);
+          }
           break;
         }
         default: {
@@ -230,32 +322,215 @@ Component({
         });
       }
     },
+    enumName: function (enumName) {
+      if (this.properties.format === 'x-enum' && enumName) {
+        this._fetchEnumData();
+      }
+    },
+    where: function (where) {
+      const whereEffected = [].concat(getWhereList(where));
+      this.setData({ whereEffected });
+      const { format, dataSourceName, viewId } = this.properties;
+      if ((format === 'father-son' || format === 'related') && dataSourceName && viewId) {
+        this._fetchData(whereEffected);
+      }
+    },
+    'records': function (records) {
+      const { primaryField } = this.properties;
+      if (records && records.length !== 0 && primaryField) {
+        const option = records.map(item => {
+          return {
+            label: item[primaryField],
+            value: item._id,
+            name: item[primaryField]
+          };
+        });
+        this.setData({ selectRange: option.map((item) => item.label), option });
+      }
+    },
   },
   methods: {
+    // 获取数据列表
+    _fetchData: async function (param) {
+      const { dataSourceName, viewId } = this.properties;
+      let pageNo = 1;
+      let pageSize = 200;
+      let records = [];
+      let total = 99999;
+      for (let index = 0; index < Math.floor(total / pageSize) + 1; index++) {
+        let data = await callDataSourceApi({
+          dataSourceName: dataSourceName,
+          viewId: viewId,
+          methodName: 'wedaGetRecords',
+          params: {
+            where: param,
+            pageNo: pageNo,
+            pageSize: pageSize
+          },
+        });
+        pageNo = pageNo + 1;
+        if (data?.records) {
+          total = data?.total || 0;
+          records = records.concat(data?.records);
+        }
+
+      }
+
+      if (records) {
+        this.setData({ records });
+      }
+    },
+    //获取省
+    async getProvince() {
+      const { regionType, defaultMutiRegion } = this.properties;
+      const changeData = await getRegionTree(defaultMutiRegion || '');
+      //限制渲染时change事件触发，否则会有初始数据被覆盖问题
+      if (changeData?.result.length > 0) {
+        this.triggerEvent('change', changeData);
+      }
+      var provinceList = [...provinces];
+      var provinceArr = provinces.map((item) => { return { value: item.Value, code: item.Code }; }); //保存省级名称
+      this.setData({
+        multiArray: JSON.parse(JSON.stringify(provinceArr)),
+        provinceList,//保存省级原始数据
+        provinceArr, //省级所有的名称
+      });
+      var defaultCode = this.data.provinceList[0].Code;  // 使用第一项当作参数获取市级数据
+      this.setData({
+        currnetProvinceKey: defaultCode  // 保存在当前的省级key
+      });
+      if (regionType != 'levelOne') {
+        this.getCity(this.data.provinceList[0]);  // 获取市级数据
+      }
+    },
+    getCity(provinceInfo) { // 获取市级数据
+      const { regionType } = this.properties;
+      const code = provinceInfo.Code;
+      this.setData({
+        currnetProvinceKey: code  // 保存当前选择的市级code
+      });
+      var cityArr = [];
+      var cityList = [];
+      cities.forEach((item) => {
+        if (item.Code.substr(0, 2) == code.substr(0, 2)) {
+          cityArr.push({ value: item.Value, code: item.Code });
+          cityList.push(item);
+        }
+      });
+      this.setData({
+        cityList,  // 保存下市级原始数据
+        cityArr  // 市级所有的名称
+      });
+      if (regionType == 'levelTwo') {
+        const cityData = [this.data.provinceArr, cityArr];
+        this.setData({
+          multiArray: JSON.parse(JSON.stringify(cityData)),
+        });
+      }
+      var defaultCode = cityList[0]?.Code;
+      this.setData({
+        currnetCityKey: defaultCode  // 存下当前选择的城市key
+      });
+      if (regionType == 'levelThree') {
+        this.getRegion(cityList[0]);
+      }
+    },
+    getRegion(cityInfo) {
+      const code = cityInfo.Code;
+      this.setData({
+        currnetCityKey: code // 更新当前选择的市级key
+      });
+      var regionList = [];
+      var regionArr = [];
+      regions.forEach((item) => {
+        if (cityInfo.Type == 1 && cityInfo.CentralCity) {
+          if (item.Code.substr(0, 2) == code.substr(0, 2)) {
+            regionArr.push({ value: item.Value, code: item.Code });
+            regionList.push(item);
+          }
+        } else {
+          if (item.Code.substr(0, 4) == code.substr(0, 4)) {
+            regionArr.push({ value: item.Value, code: item.Code });
+            regionList.push(item);
+          }
+        }
+      });
+      const threeRegion = [this.data.provinceArr, this.data.cityArr, regionArr];
+      this.setData({
+        multiArray: JSON.parse(JSON.stringify(threeRegion)),
+        regionList,
+        regionArr
+      });
+      var defaultCode = regionList[0]?.Code;
+      this.setData({
+        currnetRegionKey: defaultCode  // 存下当前选择的城市key
+      });
+    },
+    columnchange(e) {  // 滚动选择器 触发的事件
+      const { regionType } = this.properties;
+      var column = e.detail.column;  // 当前改变的列
+      var data = {
+        multiIndex: JSON.parse(JSON.stringify(this.data.multiIndex)),
+        multiArray: JSON.parse(JSON.stringify(this.data.multiArray))
+      };
+      data.multiIndex[column] = e.detail.value;  // 第几列改变了就是对应multiIndex的第几个，更新它
+      switch (column) { // 处理不同的逻辑
+        case 0:   // 第一列更改 就是省级的更改
+          if (regionType != 'levelOne')
+            this.getCity(this.data.provinceList[e.detail.value]);  // 获取当前key下面的市级数据
+          data.multiIndex[1] = 0;  // 将市默认选择第一个
+          break;
+        case 1:  // 市发生变化
+          this.getRegion(this.data.cityList[e.detail.value]);   // 获取区
+          // }
+          data.multiIndex[2] = 0;  // 区默认为第一个
+          break;
+      }
+    },
+    // 获取通用选项集列表
+    _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 });
+    },
+
     onChange(e) {
-      const { range, mode, separator, placeholder } = this.properties;
+      const { range, mode, separator, placeholder, regionType, dateMode, format, option } = this.properties;
       let displayValue;
       switch (mode) {
         case 'selector': {
-          this.triggerEvent('change', range[e.detail.value]);
-          displayValue = range[e.detail.value].label;
+          if (format !== 'father-son' && format !== 'related' && format !== 'x-enum') {
+            this.triggerEvent('change', range[e.detail.value]);
+            displayValue = range[e.detail.value].label;
+          } else {
+            this.triggerEvent('change', option[e.detail.value]);
+            displayValue = option[e.detail.value].label;
+          }
           break;
         }
         case 'date':
         case 'time': {
           const value = e.detail.value;
-          let day =
-            mode === 'date'
-              ? this.converDate2Dayjs(value)
-              : this.converTime2Dayjs(value);
-
-          let timeSnap =
-            mode === 'date'
-              ? day.valueOf()
-              : (day.hour() * 60 * 60 + day.minute() * 60) * 1000;
-          this.triggerEvent('change', {
-            value: timeSnap,
-          });
+          let day, timeSnap;
+          if (mode === 'date') {
+            const dateValue = this._coverDateModeValue(value, dateMode);
+            day = this.converDate2Dayjs(dateValue);
+            timeSnap = day.valueOf();
+          } else {
+            day = this.converTime2Dayjs(value);
+            timeSnap = (day.hour() * 60 * 60 + day.minute() * 60) * 1000;
+          }
+          this.triggerEvent('change', { value: timeSnap });
           displayValue = e.detail.value;
           break;
         }
@@ -264,6 +539,16 @@ Component({
           displayValue = e.detail.value.join(separator);
           break;
         }
+        case 'mutiRegion': {
+          this.setData({
+            step: 1,
+            multiIndex: e.detail.value  // 更新下标字段
+          });
+          const value = buildDisplayValue(this.data.multiArray, this.data.multiIndex, regionType);
+          displayValue = value?.value;
+          this.triggerEvent('change', value);
+          break;
+        }
         default: {
           break;
         }
@@ -298,11 +583,36 @@ Component({
         return dayjs(time);
       }
     },
-    converDate2Dayjs(date) {
-      if (typeof date === 'string' && /^-?[0-9]*$/.test(date)) {
-        return dayjs(Number(date));
+    converDate2Dayjs(d) {
+      if (typeof d === 'string' && /^-?[0-9]*$/.test(d)) {
+        return dayjs(Number(d));
+      }
+      return dayjs(d);
+    },
+    // 将原始 number 类型值转成 YYYY-MM-DD 格式
+    _coverNumber2Date(d, dateMode = 'day', isDisplay = false) {
+      const day = d && this.converDate2Dayjs(d);
+      if (!day) return undefined;
+      let dayStr;
+      if (dateMode === 'year') {
+        dayStr = day.format('YYYY') + (isDisplay ? '' : '-01-01');
+      } else if (dateMode === 'month') {
+        dayStr = day.format('YYYY-MM') + (isDisplay ? '' : '-01');
+      } else {
+        dayStr = day.format('YYYY-MM-DD');
+      }
+      return dayStr;
+    },
+    // 将组件 onChange 返回的值，根据年/月/日模式，补齐返回 YYYY-MM-DD 格式
+    _coverDateModeValue(d, dateMode = 'day') {
+      if (dateMode === 'year' && /^\d{4}$/.test(d)) {
+        return `${d}-01-01`;
+      } else if (dateMode === 'month' && /^\d{4}-\d{2}$/.test(d)) {
+        return `${d}-01`;
+      } else {
+        return d;
       }
-      return dayjs(date);
     },
+
   },
 });