@cloudbase/weda-ui-mp 3.6.0

package/components/form/checkbox/index.js

@@ -0,0 +1,145 @@
+import classNames from '../../../utils/classnames';
+import destr from '../../../utils/destr';
+import handleEvents from '../../../utils/handleEvents';
+import { callWedaApi } from '../../../utils/tcb';
+import deepEqual from '../../../utils/deepEqual';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    label: {
+      type: String,
+      value: '标题',
+    },
+    labelVisible: {
+      type: Boolean,
+      value: true,
+    },
+    range: {
+      type: Array,
+      value: [
+        { name: '多选-选项一', value: 'first', checked: true },
+        { name: '多选-选项二', value: 'second', checked: false },
+      ],
+    },
+    layout: {
+      type: String,
+      value: 'horizontal',
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    requiredFlag: {
+      type: Boolean,
+      value: false,
+    },
+    format: {
+      type: String,
+      value: '',
+    },
+    enumName: {
+      type: String,
+      value: '',
+    },
+    controlValue: {
+      type: Array,
+      value: [],
+    },
+  },
+  data: {
+    cls: '',
+    subCls: '',
+    isFlex: true,
+    defaultRange: [],
+    enumOption: [],
+  },
+  lifetimes: {
+    attached() {
+      const { className, layout, disabled, range } = this.properties;
+      const isFlex = layout !== 'vertical';
+      const cls = classNames({
+        'weda-ui': true,
+        'weda-checkbox': true,
+        [className]: className,
+      });
+      const subCls = classNames({
+        'weui-cell': true,
+        'weui-cell_active': true,
+        'weui-check__label': true,
+        'weui-cell_disabled': disabled,
+      });
+
+      this.setData({ cls, subCls, isFlex, defaultRange: range });
+    },
+  },
+  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 enumOption = config.map((item) => {
+        return {
+          label: item.value,
+          value: item.key,
+          checked: false,
+        };
+      });
+      this.setData({ enumOption: enumOption });
+      this.handleCheckItem();
+    },
+    handleCheckItem() {
+      const { controlValue, enumOption } = this.properties;
+      const option =
+        enumOption &&
+        enumOption.map((item) => {
+          const checked =
+            controlValue && controlValue.find((val) => val === item.value);
+          return {
+            value: item.value,
+            label: item.label,
+            checked: !!checked,
+          };
+        });
+      this.setData({ defaultRange: option });
+    },
+
+    ...handleEvents([
+      {
+        name: 'change',
+        title: '值改变',
+      },
+    ]),
+  },
+  observers: {
+    range: function (range) {
+      if (
+        this.properties.format !== 'x-enum' &&
+        !deepEqual(range, this.data.defaultRange)
+      ) {
+        this.setData({ defaultRange: range });
+      }
+    },
+    format: function (format) {
+      if (format === 'x-enum' && this.properties.enumName) {
+        this._fetchData();
+      }
+    },
+  },
+});

package/components/form/checkbox/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "formcell": "../formcell"
+  }
+}

package/components/form/checkbox/index.wxml

@@ -0,0 +1,13 @@
+<formcell className="{{cls}}" style="{{style}}" label="{{labelVisible ? label : ''}}" layout="{{layout}}" multiCell="{{true}}" requiredFlag="{{requiredFlag}}">
+  <checkbox-group class="{{isFlex ? 'weui-flex__item' : ''}}" bindchange="change">
+    <label class="{{subCls}}" wx:for="{{defaultRange}}" wx:key="value">
+      <view class="weui-cell__hd">
+        <checkbox class="weui-check" value="{{item.value}}" checked="{{item.checked}}" disabled="{{disabled}}" />
+        <i class="weui-icon-checked" />
+      </view>
+      <view class="weui-cell__bd">
+        <view>{{item.label}}</view>
+      </view>
+    </label>
+  </checkbox-group>
+</formcell>

package/components/form/checkbox/index.wxss

@@ -0,0 +1 @@
+@import '../../../style/weda-ui.wxss';

package/components/form/form/index.js

@@ -0,0 +1,189 @@
+import {
+  getDataSourceByName,
+  callDataSource,
+  callConnector,
+} from '../../../utils/tcb';
+import equal from '../../../utils/deepEqual';
+const formTypeWithInitValue = ['edit', 'read'];
+
+Component({
+  options: {
+    multipleSlots: true,
+    virtualHost: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    formType: {
+      type: String,
+      value: '',
+    },
+    datasourceType: {
+      type: String,
+      value: '',
+    },
+    _id: {
+      type: String,
+      value: '',
+    },
+    dataSourceName: {
+      type: String,
+      value: '',
+    },
+    methodGetItem: {
+      type: String,
+      value: '',
+    },
+    paramGetItem: {
+      type: Object,
+      value: '',
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this._initDataSourceFieldsWithAuth();
+    },
+    detached: function () {
+      // 在组件实例被从页面节点树移除时执行
+    },
+  },
+  data: {
+    preParamGetItem: undefined,
+    preDataId: undefined,
+    delayRef: { current: { version: null, initTimer: null } },
+  },
+  methods: {
+    // 获取表单初始值
+    _initValue: async function () {
+      const fetchVersion = (this.data.delayRef.current.version = Date.now());
+      const {
+        formType,
+        datasourceType,
+        dataSourceName,
+        _id,
+        methodGetItem,
+        paramGetItem,
+      } = this.properties;
+      const isDataModel = !['connector', 'custom-connector'].includes(
+        datasourceType
+      );
+      try {
+        let callDb = callDataSource;
+        let methodName = 'wedaGetItem';
+        let params = _id ? { _id } : null;
+        if (!isDataModel) {
+          callDb = callConnector;
+          methodName = methodGetItem;
+          params = paramGetItem;
+        }
+        if (
+          formTypeWithInitValue.includes(formType) &&
+          dataSourceName &&
+          methodName &&
+          params &&
+          callDb
+        ) {
+          const initValue = await callDb({
+            dataSourceName,
+            methodName,
+            params,
+          });
+          if (
+            Object.keys(initValue).length !== 0 &&
+            fetchVersion === this.data.delayRef.current.version
+          ) {
+            this.triggerEvent('onInitValue', initValue);
+          }
+        }
+      } catch (e) {
+        this._alertError();
+      }
+    },
+    // 查询失败提示
+    _alertError: function (message = '表单容器数据查询失败') {
+      wx.showToast({
+        title: message,
+        icon: 'none',
+        duration: 2000,
+      });
+    },
+    // 获取表单字段权限
+    _initDataSourceFieldsWithAuth: async function () {
+      const { datasourceType, dataSourceName } = this.properties;
+      const isDataModel = !['connector', 'custom-connector'].includes(
+        datasourceType
+      );
+      const authValue = {
+        isDataModel,
+        dataSourceFields: undefined,
+        dataSourceFieldsWidthAuthList: undefined,
+      };
+      try {
+        if (isDataModel && dataSourceName) {
+          const datasource = await getDataSourceByName(dataSourceName);
+          // 判断是否是预览区，编辑器编辑区 dataSourceName 查询的返回一致，编辑区用的本地的数据源数据返回固定
+          authValue.dataSourceFieldsWidthAuthList =
+            datasource?.resourceCheckInfos
+              ?.filter((item) => !item?.RelationField)
+              ?.map((item) => item.ReadWrite);
+          authValue.dataSourceFields = Object.keys(
+            datasource?.schema?.properties || {}
+          );
+          this.triggerEvent('onInitDataSourceFieldsWithAuth', authValue);
+        } else {
+          // 表单元素 if 默认是 false，需要通过onInitDataSourceFieldsWithAuth设置为true
+          this.triggerEvent('onInitDataSourceFieldsWithAuth', { isDataModel });
+        }
+      } catch (err) {
+        console.log('getDataSourceFieldsWithAuth err', err);
+        this.triggerEvent('onInitDataSourceFieldsWithAuth', authValue);
+        this._alertError(
+          `获取数据源字段权限信息失败,字段权限可能无法正确展示,错误信息:${err}`
+        );
+      }
+    },
+  },
+  observers: {
+    'formType,datasourceType,dataSourceName,_id,methodGetItem,paramGetItem':
+      function (
+        formType,
+        datasourceType,
+        dataSourceName,
+        _id,
+        methodGetItem,
+        paramGetItem
+      ) {
+        clearTimeout(this.data.delayRef.current.initTimer);
+        // eslint-disable-next-line rulesdir/no-timer
+        this.data.delayRef.current.initTimer = setTimeout(() => {
+          const isDataModel = !['connector', 'custom-connector'].includes(
+            datasourceType
+          );
+          if (!dataSourceName) return;
+          if (isDataModel) {
+            if (_id && !equal(_id, this.data.preDataId)) {
+              this.setData({ preDataId: _id });
+              this._initValue();
+            }
+          } else {
+            if (
+              methodGetItem &&
+              paramGetItem &&
+              !equal(paramGetItem, this.data.preParamGetItem)
+            ) {
+              this.setData({ preParamGetItem: paramGetItem });
+              this._initValue();
+            }
+          }
+          // 因编辑器render时序问题暂不上线
+          this._initDataSourceFieldsWithAuth();
+        }, 100);
+      },
+  },
+});

package/components/form/form/index.json

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

package/components/form/form/index.wxml

@@ -0,0 +1,5 @@
+<view class="weui-form weda-ui {{className}}" style="{{style}}">
+  <view class="weui-cells__group weui-cells__group_form">
+    <slot name="contentSlot" />
+  </view>
+</view>

package/components/form/form/index.wxss

@@ -0,0 +1,3 @@
+@import '../../../style/weda-ui.wxss';
+@import '../../../style/wd-design.wxss';
+@import './wd-form.wxss';