@cloudbase/weda-ui-mp 3.14.2 → 3.15.0

package/components/wd-form/index.js

@@ -1,22 +1,12 @@
 /* eslint max-lines: [error, 800] */
 import { commonCompBehavior } from '../../utils/common-behavior';
-import {
-  getDataSourceByName,
-  callDataSource,
-  callConnector,
-} from '../../utils/tcb';
+import { getDataSourceByName, callDataSource, callConnector } from '../../utils/tcb';
 import equal from '../../utils/deepEqual';
 import { emptyArray, noop } from '../../utils/constant';
 import { isNil } from '../../utils/lodash';
-import {
-  convertFormDataToSubmitParams,
-  convertRemoteValueToFormData,
-} from './remote-value';
+import { convertFormDataToSubmitParams, convertRemoteValueToFormData } from './remote-value';
 import { WdCompError } from '../../utils/error';
-import {
-  getErrorObjectFromValidateResult,
-  getFormDataFromItemMap,
-} from './form-utils';
+import { getErrorObjectFromValidateResult, getFormDataFromItemMap } from './form-utils';
 import lodashGet from 'lodash.get';
 import debounce from '../../utils/debounce';
 
@@ -173,15 +163,9 @@ Component({
       const errorObj = await this.validate();
       if (Object.keys(errorObj ?? {}).length === 0) {
         this.triggerEvent('validateSuccess', { errors: {} });
-        const formData = getFormDataFromItemMap(
-          this.data._formItemMap,
-          formType
-        );
+        const formData = getFormDataFromItemMap(this.data._formItemMap, formType);
         const extra = ['read', 'edit'].includes(formType) && _id ? { _id } : {};
-        this.triggerEvent(
-          'submit',
-          JSON.parse(JSON.stringify({ ...extra, ...formData }))
-        );
+        this.triggerEvent('submit', JSON.parse(JSON.stringify({ ...extra, ...formData })));
         // 流程用了
         return formData;
       } else {
@@ -212,7 +196,7 @@ Component({
     },
     // 获取子表单初始值
     _initValueFormDetail: function () {
-      console.log(this.data._formItemMap);
+      // console.log(this.data._formItemMap);
       const { _formItemMap } = this.data;
       const formDetailInitValue = {};
       Object.keys(_formItemMap ?? {}).forEach((name) => {
@@ -227,21 +211,10 @@ Component({
     },
     // 获取表单初始值
     _initValue: async function () {
-      console.log('_initValue');
+      // console.log('_initValue');
       const fetchVersion = (this.data._delayRef.current.version = Date.now());
-      const {
-        formType,
-        datasourceType,
-        dataSourceName,
-        _id,
-        methodGetItem,
-        paramGetItem,
-      } = this.properties;
-      const isDataModel = ![
-        'connector',
-        'custom-connector',
-        'expression',
-      ].includes(datasourceType);
+      const { formType, datasourceType, dataSourceName, _id, methodGetItem, paramGetItem } = this.properties;
+      const isDataModel = !['connector', 'custom-connector', 'expression'].includes(datasourceType);
       try {
         const allSelectFields = this.getSelectFields();
         let callDb = callDataSource;
@@ -261,10 +234,7 @@ Component({
 
         if (
           (datasourceType === 'expression' ||
-            (formTypeWithInitValue.includes(formType) &&
-              dataSourceName &&
-              methodName &&
-              params)) &&
+            (formTypeWithInitValue.includes(formType) && dataSourceName && methodName && params)) &&
           callDb
         ) {
           let initValue;
@@ -284,17 +254,10 @@ Component({
             this.setReadonlyAttributes({ remoteValue: cleanInitValue });
           }
           this.setData({ isLoadingData: false });
-          if (
-            Object.keys(initValue).length !== 0 &&
-            fetchVersion === this.data._delayRef.current.version
-          ) {
+          if (Object.keys(initValue).length !== 0 && fetchVersion === this.data._delayRef.current.version) {
             const dataSourceProfile = await this.getDataSourceProfile();
 
-            const initFormData = convertRemoteValueToFormData(
-              datasourceType,
-              dataSourceProfile,
-              cleanInitValue
-            );
+            const initFormData = convertRemoteValueToFormData(datasourceType, dataSourceProfile, cleanInitValue);
             const formDetailInitValue = this._initValueFormDetail();
             const initValues = { ...formDetailInitValue, ...initFormData };
             this.setValue(initValues);
@@ -374,11 +337,7 @@ Component({
     // 获取表单字段权限
     _initDataSourceFieldsWithAuth: async function () {
       const { datasourceType, dataSourceName } = this.properties;
-      const isDataModel = ![
-        'connector',
-        'custom-connector',
-        'expression',
-      ].includes(datasourceType);
+      const isDataModel = !['connector', 'custom-connector', 'expression'].includes(datasourceType);
       const authValue = {
         isDataModel,
         dataSourceFields: undefined,
@@ -388,31 +347,23 @@ Component({
         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 || {}
-          );
+          authValue.dataSourceFieldsWidthAuthList = datasource?.resourceCheckInfos
+            ?.filter((item) => !item?.RelationField)
+            ?.map((item) => item.ReadWrite);
+          authValue.dataSourceFields = Object.keys(datasource?.schema?.properties || {});
           this.setData({ authValue, dataSourceProfile: datasource });
           // this.triggerEvent('onInitDataSourceFieldsWithAuth', authValue);
         }
       } catch (err) {
         console.error('getDataSourceFieldsWithAuth err', err);
-        this._alertError(
-          `获取数据源字段权限信息失败,字段权限可能无法正确展示,错误信息:${err}`
-        );
+        this._alertError(`获取数据源字段权限信息失败,字段权限可能无法正确展示,错误信息:${err}`);
       }
     },
     updateFormContext: function () {
       if (this._attached !== true) {
         return;
       }
-      const formData = getFormDataFromItemMap(
-        this.data._formItemMap,
-        this.data.formType
-      );
+      const formData = getFormDataFromItemMap(this.data._formItemMap, this.data.formType);
       this.setData({ formData });
       this.triggerEvent('onDataChange', {
         data: JSON.parse(JSON.stringify(formData)),
@@ -420,11 +371,7 @@ Component({
     },
     getDataSourceProfile: async function () {
       const { datasourceType, dataSourceName } = this.properties;
-      const isDataModel = ![
-        'connector',
-        'custom-connector',
-        'expression',
-      ].includes(datasourceType);
+      const isDataModel = !['connector', 'custom-connector', 'expression'].includes(datasourceType);
       if (isDataModel && dataSourceName) {
         if (!isNil(this.data.dataSourceProfile)) {
           // datasourceName 不能绑变量的，所以组件级别缓存
@@ -432,8 +379,7 @@ Component({
         }
         const datasource = await getDataSourceByName(dataSourceName);
         this.setData({ dataSourceProfile: datasource });
-        this.setReadonlyAttributes &&
-          this.setReadonlyAttributes({ dataSourceProfile: datasource });
+        this.setReadonlyAttributes && this.setReadonlyAttributes({ dataSourceProfile: datasource });
         return datasource;
       }
       return null;
@@ -506,22 +452,12 @@ Component({
           },
           initialValues: that.data.initialValues,
           addFormItem(name, w) {
-            if (
-              isNil(name) ||
-              (typeof name === 'string' && name.length === 0)
-            ) {
+            if (isNil(name) || (typeof name === 'string' && name.length === 0)) {
               // name 没设置或为空串的时候不受表单容器控制
-              console.warn(
-                `组件 #${w?.id} 表单key(表单输入类组件 name 属性)没设置或为空串的时候不受表单容器控制`
-              );
+              console.warn(`组件 #${w?.id} 表单key(表单输入类组件 name 属性)没设置或为空串的时候不受表单容器控制`);
               return noop;
             }
-            if (
-              Object.prototype.hasOwnProperty.call(
-                that.data._formItemMap ?? {},
-                name
-              )
-            ) {
+            if (Object.prototype.hasOwnProperty.call(that.data._formItemMap ?? {}, name)) {
               that.data._formItemMap[name].push(w);
             } else {
               that.data._formItemMap[name] = [w];
@@ -530,9 +466,7 @@ Component({
               _formItemMap: that.data._formItemMap,
             });
             return () => {
-              const removedArr = that.data._formItemMap[name].filter(
-                (item) => item !== w
-              );
+              const removedArr = that.data._formItemMap[name].filter((item) => item !== w);
               if (removedArr.length <= 0) {
                 delete that.data._formItemMap[name];
               } else {
@@ -551,10 +485,7 @@ Component({
             } else {
               this.setData({ errors: errorObj });
               this.triggerEvent('validateFail', {
-                errors: getErrorObjectFromValidateResult(
-                  errorObj,
-                  this.data._formItemMap
-                ),
+                errors: getErrorObjectFromValidateResult(errorObj, this.data._formItemMap),
               });
               throw errorObj;
             }
@@ -620,77 +551,60 @@ Component({
       this.setData({ _previousFormType: formType });
       // eslint-disable-next-line @typescript-eslint/no-magic-numbers
     }, 1000),
-    'formType,datasourceType,dataSourceName,_id,methodGetItem,paramGetItem,value':
-      function (
-        formType,
-        datasourceType,
-        dataSourceName,
-        _id,
-        methodGetItem,
-        paramGetItem,
-        value
-      ) {
-        const isDataModel = ![
-          'connector',
-          'custom-connector',
-          'expression',
-        ].includes(datasourceType);
-        if (
-          isDataModel &&
-          formTypeWithInitValue &&
-          _id &&
-          !equal(_id, this.data._preDataId)
-        ) {
-          this.setData({ isLoadingData: true });
+    'formType,datasourceType,dataSourceName,_id,methodGetItem,paramGetItem,value': function (
+      formType,
+      datasourceType,
+      dataSourceName,
+      _id,
+      methodGetItem,
+      paramGetItem,
+      value,
+    ) {
+      const isDataModel = !['connector', 'custom-connector', 'expression'].includes(datasourceType);
+      if (isDataModel && formTypeWithInitValue && _id && !equal(_id, this.data._preDataId)) {
+        this.setData({ isLoadingData: true });
+      }
+      clearTimeout(this.data._delayRef.current.initTimer);
+      // eslint-disable-next-line rulesdir/no-timer
+      this.data._delayRef.current.initTimer = setTimeout(() => {
+        if (!dataSourceName) {
+          this.setData({ loadingStatus: 'done' });
+          if (datasourceType !== 'expression') {
+            return;
+          }
         }
-        clearTimeout(this.data._delayRef.current.initTimer);
-        // eslint-disable-next-line rulesdir/no-timer
-        this.data._delayRef.current.initTimer = setTimeout(() => {
-          if (!dataSourceName) {
-            this.setData({ loadingStatus: 'done' });
-            if (datasourceType !== 'expression') {
-              return;
-            }
+        if (isDataModel) {
+          if (_id && !equal(_id, this.data._preDataId)) {
+            this.setData({ _preDataId: _id });
+            this._initValue();
           }
-          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 });
+        } else {
+          if (methodGetItem && paramGetItem && !equal(paramGetItem, this.data.preParamGetItem)) {
+            this.setData({ preParamGetItem: paramGetItem });
+            this._initValue();
+          }
+          if (datasourceType === 'expression') {
+            if (!isNil(value) && !equal(value, this.data.preValue)) {
+              this.setData({ preValue: value });
               this._initValue();
             }
-            if (datasourceType === 'expression') {
-              if (!isNil(value) && !equal(value, this.data.preValue)) {
-                this.setData({ preValue: value });
-                this._initValue();
-              }
-            }
           }
-          // if (formType === 'create') {
-          //   this._initValueFormDetail();
-          // }
-          // this._initDataSourceFieldsWithAuth();
-        }, debounceMs);
-      },
+        }
+        // if (formType === 'create') {
+        //   this._initValueFormDetail();
+        // }
+        // this._initDataSourceFieldsWithAuth();
+      }, debounceMs);
+    },
     '_formItemMap, authValue': function (formItemMap, authValue) {
       if (typeof authValue !== 'object') return;
-      const { isDataModel, dataSourceFieldsWidthAuthList = emptyArray } =
-        authValue;
+      const { isDataModel, dataSourceFieldsWidthAuthList = emptyArray } = authValue;
       if (isDataModel) {
         Object.keys(formItemMap).forEach((name) => {
           const item = formItemMap[name];
-          const fieldPermissions = dataSourceFieldsWidthAuthList.filter(
-            (fieldPermission) => {
-              return fieldPermission[name];
-            }
-          );
+          const fieldPermissions = dataSourceFieldsWidthAuthList.filter((fieldPermission) => {
+            return fieldPermission[name];
+          });
           if (fieldPermissions.length > 0) {
             const fieldPermission = fieldPermissions[0][name];
             if (fieldPermission === 'rw') {
@@ -725,18 +639,13 @@ Component({
           authValue,
         });
     },
-    'dataSourceProfile, formData, formType, _id': function (
-      dataSourceProfile,
-      formData,
-      formType,
-      _id
-    ) {
+    'dataSourceProfile, formData, formType, _id': function (dataSourceProfile, formData, formType, _id) {
       const submitParams = convertFormDataToSubmitParams(
         dataSourceProfile,
         formData,
         formType,
         _id,
-        Object.keys(this.data._formItemMap)
+        Object.keys(this.data._formItemMap),
       );
       if (this.setReadonlyAttributes) {
         this.setReadonlyAttributes({ submitParams });

package/components/wd-form/wd-form.wxss

@@ -1109,4 +1109,19 @@ textarea {
 }
 .wd-mp-form-item-obj .wd-form-item--weui.wd-form-item {
   width: 100%;
+}
+
+.wd-input-password-icon {
+  padding: 0 5px;
+  display: flex;
+  cursor: pointer;
+}
+
+.wd-pc-input-password-icon {
+  position: absolute;
+  right: -30px;
+}
+
+.password-input .wd-form-item-wrap__control-wrap {
+  position: relative;
 }

package/components/wd-form-item/wd-form-item.wxss

@@ -1109,4 +1109,19 @@ textarea {
 }
 .wd-mp-form-item-obj .wd-form-item--weui.wd-form-item {
   width: 100%;
+}
+
+.wd-input-password-icon {
+  padding: 0 5px;
+  display: flex;
+  cursor: pointer;
+}
+
+.wd-pc-input-password-icon {
+  position: absolute;
+  right: -30px;
+}
+
+.password-input .wd-form-item-wrap__control-wrap {
+  position: relative;
 }

package/components/wd-form-item-obj/wd-form-item.wxss

@@ -1109,4 +1109,19 @@ textarea {
 }
 .wd-mp-form-item-obj .wd-form-item--weui.wd-form-item {
   width: 100%;
+}
+
+.wd-input-password-icon {
+  padding: 0 5px;
+  display: flex;
+  cursor: pointer;
+}
+
+.wd-pc-input-password-icon {
+  position: absolute;
+  right: -30px;
+}
+
+.password-input .wd-form-item-wrap__control-wrap {
+  position: relative;
 }

package/components/wd-input/inner-input/index.js

@@ -1,11 +1,6 @@
 import itemBehavior from '../../form-field-behavior/item-behavior';
 import { WD_PREFIX } from '../../../utils/constant';
-import {
-  converValueFix,
-  convertSize,
-  converInputValue,
-  convertIconSize,
-} from '../../../utils/getFormLegacy';
+import { converValueFix, convertSize, converInputValue, convertIconSize } from '../../../utils/getFormLegacy';
 import classNames from '../../../utils/classnames';
 import equal from '../../../utils/deepEqual';
 
@@ -48,24 +43,13 @@ Component({
     _size: 'md',
     _oldValue: null,
     _oldInputValue: null,
+
+    _password: false,
   },
   methods: {
     convertDetail: function (e) {
-      const {
-        before,
-        after,
-        type,
-        isUnionValue,
-        isConvert = true,
-      } = this.properties;
-      const value = converValueFix(
-        e.detail.value,
-        before,
-        after,
-        type,
-        isUnionValue,
-        isConvert
-      );
+      const { before, after, type, isUnionValue, isConvert = true } = this.properties;
+      const value = converValueFix(e.detail.value, before, after, type, isUnionValue, isConvert);
       return { ...e.detail, value };
     },
     handleFocus: function (e) {
@@ -106,38 +90,20 @@ Component({
       this.triggerEvent('changeForm', detail);
     },
     changeInput: function () {
-      const {
-        inputValue,
-        before,
-        after,
-        type,
-        isUnionValue,
-        isConvert = true,
-      } = this.properties;
-      const value = converValueFix(
-        inputValue,
-        before,
-        after,
-        type,
-        isUnionValue,
-        isConvert
-      );
+      const { inputValue, before, after, type, isUnionValue, isConvert = true } = this.properties;
+      const value = converValueFix(inputValue, before, after, type, isUnionValue, isConvert);
       this.setData({ currentInputValue: inputValue });
       this.changeForm({ value });
       this.data._oldInputValue = inputValue;
     },
+    changePasswordIcon: function () {
+      this.setData({ _password: !this.data._password });
+    },
   },
   observers: {
-    'disabled,clearable,isFocus,currentInputValue': function (
-      disabled,
-      clearable,
-      isFocus,
-      currentInputValue
-    ) {
-      const hasClearIcon =
-        clearable && isFocus && !disabled && currentInputValue?.length > 0;
-      const counter =
-        typeof currentInputValue === 'string' ? currentInputValue.length : 0;
+    'disabled,clearable,isFocus,currentInputValue': function (disabled, clearable, isFocus, currentInputValue) {
+      const hasClearIcon = clearable && isFocus && !disabled && currentInputValue?.length > 0;
+      const counter = typeof currentInputValue === 'string' ? currentInputValue.length : 0;
       this.setData({ hasClearIcon, counter });
     },
     'disabled,size,classRoot,wrapClassName,before,after': function (
@@ -146,7 +112,7 @@ Component({
       classRoot,
       wrapClassName,
       before,
-      after
+      after,
     ) {
       const _size = convertSize(size);
       const iconSize = convertIconSize(_size);
@@ -166,7 +132,7 @@ Component({
           [`${inputWrap}--no-radius-left`]: before,
           [`${inputWrap}--no-radius-right`]: after,
           [`${inputWrap}--no-radius`]: before && after,
-        }
+        },
       );
       const countCls = `${classPrefix}-input__limit-number`;
 
@@ -183,7 +149,7 @@ Component({
         after,
         this.properties.type,
         isUnionValue,
-        this.properties.isConvert
+        this.properties.isConvert,
       );
       this.changeForm({ value });
     },
@@ -191,15 +157,15 @@ Component({
     value: function (value) {
       if (equal(this.data._oldValue, value)) return;
       const { before, after, isUnionValue } = this.properties;
-      const currentInputValue = converInputValue(
-        value,
-        before,
-        after,
-        isUnionValue
-      );
+      const currentInputValue = converInputValue(value, before, after, isUnionValue);
       this.setData({ currentInputValue });
       this.data._oldValue = value;
     },
+    password: function (password) {
+      this.setData({
+        _password: password,
+      });
+    },
   },
   lifetimes: {
     attached: function () {

package/components/wd-input/inner-input/index.wxml

@@ -45,7 +45,7 @@
             name="{{name}}"
             auto-focus="{{focus}}"
             focus="{{focus}}"
-            password="{{password}}"
+            password="{{_password}}"
             maxlength="{{maxLength}}"
             cursor-spacing="{{cursorSpacing}}"
             bind:input="handleChange"
@@ -74,6 +74,10 @@
           <label class="{{countCls}}">{{counter}}/{{maxLength}}</label>
         </block>
       </view>
-    </wd-input-group>
+      </wd-input-group>
+      <view wx:if="{{password}}" class="{{classPrefix}}-input-password-icon">
+        <wd-icon name="{{_password?'td:browse-off':'td:browse'}}" size="{{iconSize}}" bind:tap="changePasswordIcon"></wd-icon>
+      </view>
+
   </wd-form-item>
 </block>

package/components/wd-input/inner-input/wd-input.wxss

@@ -1273,6 +1273,21 @@ textarea {
   width: 100%;
 }
 
+.wd-input-password-icon {
+  padding: 0 5px;
+  display: flex;
+  cursor: pointer;
+}
+
+.wd-pc-input-password-icon {
+  position: absolute;
+  right: -30px;
+}
+
+.password-input .wd-form-item-wrap__control-wrap {
+  position: relative;
+}
+
 .wd-form-input-wrap {
   --wd-form-input-wrap-border-radius: var(--wd-border-radius);
   --wd-form-input-wrap-text-default: var(--wd-color-text-form-default);

package/components/wd-progress/wd-progress.wxss

@@ -1144,4 +1144,19 @@ textarea {
 }
 .wd-mp-form-item-obj .wd-form-item--weui.wd-form-item {
   width: 100%;
+}
+
+.wd-input-password-icon {
+  padding: 0 5px;
+  display: flex;
+  cursor: pointer;
+}
+
+.wd-pc-input-password-icon {
+  position: absolute;
+  right: -30px;
+}
+
+.password-input .wd-form-item-wrap__control-wrap {
+  position: relative;
 }

package/components/wd-rating/wd-rating.wxss

@@ -1134,4 +1134,19 @@ textarea {
 }
 .wd-mp-form-item-obj .wd-form-item--weui.wd-form-item {
   width: 100%;
+}
+
+.wd-input-password-icon {
+  padding: 0 5px;
+  display: flex;
+  cursor: pointer;
+}
+
+.wd-pc-input-password-icon {
+  position: absolute;
+  right: -30px;
+}
+
+.password-input .wd-form-item-wrap__control-wrap {
+  position: relative;
 }