@dhccmobile/vue3-lo-form 2.0.61 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhccmobile/vue3-lo-form",
-  "version": "2.0.61",
+  "version": "2.1.1",
   "description": "VUE3动态表单",
   "private": false,
   "main": "dist/vue3-lo-form.umd.js",

package/src/App.vue

@@ -102,7 +102,7 @@
         </div>
         <div class="lo-input">
           <!--styleMode="credit-rd" :formId="'773549593606574080'"-->
-          <dy-form v-if="showForm" :formId="'984119606230257664'" v-model:edit="formApi.edit" :formApi="formApi" @change="onChange($event)" @click="onClick($event)" @focus="onFocus($event)" @blur="onBlur($event)" @addon-before="onAddonBeforeHandler($event)" @addon-after="onAddonAfterHandler($event)" @add-item="selectAddItem($event)">
+          <dy-form v-if="showForm" :formId="'1153352233392410624'" v-model:edit="formApi.edit" :formApi="formApi" @change="onChange($event)" @click="onClick($event)" @focus="onFocus($event)" @blur="onBlur($event)" @addon-before="onAddonBeforeHandler($event)" @addon-after="onAddonAfterHandler($event)" @add-item="selectAddItem($event)">
             <template #combinationSelector="{ control, onChange }">
               <div class="lo-custom-control-box">
                 <a-input v-model:value="control.formControl.value" @input="onChange(control.formControl)" v-if="control && control.formControl" />

package/src/components/form/DvForm.vue

@@ -45,7 +45,7 @@ export type NfFormTheme = "default" | "gray";
   },
 })
 export default class DyForm extends Vue {
-  @Prop({ default: "刘波", type: String }) formId: string | undefined;
+  @Prop() formId: string | undefined;
   @Prop() mode: NfFormMode | undefined;
   @Prop({ type: String, default: "default" }) styleMode!: NfStyleMode;
   @Prop() srcDesForm: DesForm | undefined;
@@ -99,7 +99,7 @@ export default class DyForm extends Vue {
    * @date 2022/4/6 14:17
    */
   @Watch("formValidateStateResetMark")
-  onPropFormValidateStateResetHandler(newVal: any): void {
+  onPropFormValidateStateResetHandler(): void {
     if ((this as any)._provided) {
       ((this as any)._provided as any).provideInjectData.formValidateStateResetMark = this.formValidateStateResetMark;
     }
@@ -116,7 +116,7 @@ export default class DyForm extends Vue {
   @Watch("metaRefresh")
   @Watch("refreshCheckFeedbackFlag")
   @Watch("widthCompatibleMode")
-  onPropHandler(newVal: any): void {
+  onPropHandler(): void {
     if (this) {
       this.provideInjectData.edit = this.edit;
       this.provideInjectData.labelSpan = this.labelSpan;
@@ -129,7 +129,8 @@ export default class DyForm extends Vue {
 
   get loFormTheme(): string {
     const win: any = window;
-    const themes = ["default", "gray"];
+    // 默认， 灰度， 某北某方，label换行
+    const themes = ["default", "gray", "nitic", "labelWrap"];
     const formTheme = themes.indexOf(this.formTheme) > -1 ? this.formTheme : win.$loFormTheme;
     return themes.indexOf(formTheme) > -1 ? formTheme : themes[0];
   }
@@ -183,8 +184,10 @@ export default class DyForm extends Vue {
    */
   private initDesForm(): void {
     if (this.formId != null && this.formId !== "") {
-      this.desForm = formToolsService.loadResource(this.formId);
-      this.formatDesForm();
+      formToolsService.initResource(this.formId).then((form: any) => {
+        this.desForm = form;
+        this.formatDesForm();
+      });
     }
   }
 

package/src/components/form/DvFormLayout.vue

@@ -16,7 +16,7 @@
         :class="{
           ['form-model-item-' + controlAttr.boundProperty]: true,
           ['form-model-item-' + control.code]: true,
-          'lo-form-model-item-textarea-box': control.code === formFieldType.Textarea.code,
+          'lo-form-model-item-textarea-box lo-theme-textarea-box': control.code === formFieldType.Textarea.code,
           'lo-form-item-mobile': isMobileBrowser(),
         }"
       >
@@ -321,7 +321,7 @@
           </template>
           <template v-if="controlAttr.isDesensitize">
             <div @click="handlerMasking(formControl)">
-              <eye-outlined v-if="!isAfterClick" class="addon-icon" />
+              <eye-outlined v-if="isAfterClick" class="addon-icon" />
               <eye-invisible-outlined v-else class="addon-icon" />
             </div>
           </template>
@@ -344,6 +344,7 @@
       @focus="onFocus($event)"
       @blur="onBlur($event)"
       @addon-before="onAddonBeforeHandler($event)"
+      @addon-after="onAddonAfterHandler($event)"
       @add-item="selectAddItem($event)"
       @fixFormLayout="onHideControl"
     >
@@ -479,6 +480,7 @@ export default class DvFormLayout extends Vue {
   amountCapitalization = amountCapitalization; // 大写转换
   zoomMultiple = zoomMultiple; // 缩放
   isAfterClick = false; // 后缀图标是否被点击了 2026年4月17日 15:21:53
+  private lastClickTime = 0; // 上次点击时间戳 2026年5月15日 12:12:53
   filterOption(value: any, item: any) {
     if (!item.title) {
       return false;
@@ -785,7 +787,7 @@ export default class DvFormLayout extends Vue {
     } else if (this.provideInjectData.controlSpan) {
       return this.provideInjectData.controlSpan;
     } else {
-      return 0;
+      return "none";
     }
   }
 
@@ -960,6 +962,7 @@ export default class DvFormLayout extends Vue {
           for (let i = 0; i < index; i++) {
             data += "0";
           }
+          data = this.countDecimalPlaces(data, controlAttr.decimalPlaces);
         }
         // 金额后缀不依赖于是否设置了小数位
         if (controlAttr.zoomType !== ZoomType.automatic.code && data != null && data != "" && controlAttr.unit) {
@@ -1036,6 +1039,39 @@ export default class DvFormLayout extends Vue {
     return data;
   }
 
+  /**
+   * 数字小数位数计算
+   * @author JiangTao
+   * @since 2026-04-16 16:40:23
+   */
+  countDecimalPlaces(data: string | number, decimalPlaces: number | undefined): string {
+    // 1. 安全处理
+    const digits = decimalPlaces ?? 0;
+    const str = String(data).trim();
+    if (!str) return digits > 0 ? `0.${"0".repeat(digits)}` : "0";
+
+    // 2. 判断是否有小数
+    const hasDot = str.includes(".");
+    const intPart = hasDot ? str.split(".")[0] : str;
+    const decimalPart = hasDot ? str.split(".")[1] : "";
+
+    // 3. 拼接成纯数字用于四舍五入计算
+    const pureNumStr = intPart.replace(/,/g, "") + (hasDot ? "." + decimalPart : "");
+    const num = parseFloat(pureNumStr);
+    if (isNaN(num)) return intPart + (digits > 0 ? `.${"0".repeat(digits)}` : "");
+
+    // 4. 四舍五入保留 digits 位
+    const factor = Math.pow(10, digits);
+    const rounded = (Math.round(num * factor) / factor).toFixed(digits);
+
+    // 5. 拆分四舍五入后的整数与小数
+    const [, roundedDecimal = ""] = rounded.split(".");
+
+    // 6. 最终结果：原始整数部分 + 处理后的小数部分
+    if (digits <= 0) return intPart;
+    return `${intPart}.${roundedDecimal}`;
+  }
+
   /**
    * @description: 支持的上传类型
    * @author ChenRui
@@ -1496,6 +1532,17 @@ export default class DvFormLayout extends Vue {
    * @private  私有方法
    */
   handlerMasking(formControl: any): void {
+    const now = Date.now();
+    // 防止频繁点击，间隔小于1秒则提示
+    if (now - this.lastClickTime < 1000) {
+      notification.open({
+        message: "点击过于频繁，请稍后再试",
+        duration: 2,
+        icon: () => h(ExclamationCircleOutlined, { style: "color: #FBBC05" }),
+      });
+      return;
+    }
+    this.lastClickTime = now;
     const path = this.$qlForm.desApiAddr;
     if (!path) {
       notification.open({
@@ -1661,12 +1708,13 @@ export default class DvFormLayout extends Vue {
   }
 }
 .addon-icon {
+  color: #429eff;
   width: 40px !important;
   user-select: none;
 }
 .addon-icon:hover {
-  color: #429eff !important;
   font-weight: bold;
+  opacity: 0.5;
 }
 .addon-icon:active {
   opacity: 0.7;

package/src/main.ts

@@ -9,8 +9,8 @@ const app = createApp(App);
 app.config.performance = true;
 app
   .use(VueLoForm, {
-    url: "http://82.156.213.34:8080",
-    appId: "1009549397931601920",
+    url: "https://portal-test.fotic.com.cn:1443/dy-form",
+    appId: "1144982574721011712",
     onlySimpleLoadConfig: false,
     loadMode: "dynamic",
     desApiAddr: "http://82.156.213.34:8080/ms-loong/api/v1/des-cache-info/xxx-yyy-zzz",

package/src/services/form-tools.service.ts

@@ -703,6 +703,34 @@ class FormToolsService {
     }
   }
 
+  initResource(formId: string): Promise<void | DesForm> {
+    if (this.desForms.length === 0) {
+      return new Promise((resolve, reject) => {
+        Promise.all([dictStore.getDicts(), dictStore.getTreeDicts(), dictStore.getMapDicts(), dictStore.getMapTreeDicts(), formStore.getForms()]).then(([dicts, treeDicts, mapDicts, mapTreeDicts, forms]: any[]) => {
+          this.desForms = forms;
+          this.sysDictDetailOptions = dicts;
+          this.sysDictTreeDetailOptions = treeDicts;
+          this.mapSysDictDetailOptions = mapDicts;
+          this.mapSysDictTreeDetailOptions = mapTreeDicts;
+          const desForm: DesForm | undefined = this.desForms.find((item) => item.formId === formId);
+          if (desForm != null) {
+            resolve(formBeanUtilsService.copy(desForm));
+            return formBeanUtilsService.copy(desForm);
+          } else {
+            reject(new DesForm({ formId: formId }));
+          }
+        });
+      });
+    } else {
+      const desForm: DesForm | undefined = this.desForms.find((item) => item.formId === formId);
+      if (desForm != null) {
+        return Promise.resolve(formBeanUtilsService.copy(desForm));
+      } else {
+        return Promise.reject(new DesForm({ formId: formId }));
+      }
+    }
+  }
+
   /**
    * @description: rest客户端
    * @author ChenRui

package/src/styles/index.scss

@@ -193,3 +193,9 @@
 .ant-select-arrow {
   z-index: 10;
 }
+/** 下拉框占位符的样式 */
+.ant-select-selection-placeholder {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: start;
+}

package/src/styles/theme-3.scss

@@ -0,0 +1,371 @@
+.ant-form-horizontal {
+  .lo-control-container {
+    /**非编辑状态下的样式*/
+    .is-disable-input {
+      :deep(.ant-form-item-control) {
+        border-radius: 5px;
+        border: rgba(229,229,229, 0.7) 1px solid;
+      }
+    }
+    .lo-control-box {
+      .ant-form-item {
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+        :deep {
+          .ant-form-item-control {
+            min-height: 40px;
+            //box-shadow: 0 0 0 1px rgba(229,229,229, 0.5);
+            margin-top: 1px;
+          }
+          .ant-form-item-label {
+            position: relative;
+            //box-shadow: 0 0 0 1px #fff;
+            background-color: transparent;
+            z-index: 1;
+            label {
+              display: block;
+              width: 100%;
+              height: auto;
+              white-space: pre-wrap;
+              word-break: break-all;
+              line-height: normal;
+              padding: 8px 0;
+            }
+          }
+          .ant-input,
+          .ant-input-affix-wrapper,
+          .ant-select-selector,
+          .ant-picker,
+          .ant-btn,
+          .ant-input-number {
+            border-radius: .5rem;
+            min-height: 40px;
+            max-height: 40px;
+            padding: 0 6px;
+            height: 100%;
+            color: #333333;
+          }
+          .ant-input-number-input, input[type=search] {
+            min-height: 40px;
+            padding: 0;
+            height: 100%;
+            color: #333333;
+          }
+          .ant-input-number-group,
+          .ant-input-number-group-wrapper,
+          .ant-input-number-input-wrap {
+            width: 100%;
+            height: 100%;
+          }
+          .ant-picker-input > input {
+            color: #333333;
+          }
+          .ant-radio-group {
+            padding: 0 6px;
+            margin: auto 0;
+          }
+          .ant-checkbox-group {
+            padding: 8px 6px;
+          }
+          .ant-picker-suffix, .ant-select-arrow {
+            width: 40px;
+          }
+          .ant-picker-suffix {
+            text-align: center;
+            margin-right: -6px;
+          }
+          .ant-select-arrow {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            top: 5px;
+            right: 0;
+            z-index: 10;
+          }
+          .ant-form-item-control-input-content {
+            display: flex;
+            align-items: center;
+          }
+          .ant-form-item-control-input, .ant-form-item-control-input-content {
+            height: 100%;
+            align-items: center;
+          }
+          .ant-input:focus,
+          .ant-input-number-focused,
+          .ant-picker-focused,
+          .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
+            box-shadow: 0 0 0 1px #4094f3;
+            z-index: 10;
+          }
+          .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector,
+          .ant-picker-input > input[disabled],
+          .ant-input-number-disabled,
+          .ant-input[disabled] {
+            color: #666666;
+            background-color: #fbfbfb;
+          }
+          .ant-picker-disabled {
+            background-color: #fbfbfb;
+          }
+          .ant-form-item-explain-error {
+            line-height: 24px;
+            color: #ff2d4b;
+            font-size: 12px;
+            padding: 0 6px;
+            background: rgba(255, 45, 75, 0.2)
+          }
+          .ant-select-selection-item {
+            display: inline-flex;
+            align-items: center;
+          }
+          .ant-select-selection-overflow {
+            padding-right: 40px;
+          }
+          .ant-select-multiple {
+            .ant-select-selection-search {
+              margin-start: 0;
+              margin-inline-start: 0;
+            }
+            .ant-select-selection-placeholder {
+              left: 6px;
+              right: 40px;
+            }
+          }
+          .ant-select-single {
+            .ant-select-selection-item,
+            .ant-select-selection-search {
+              position: absolute;
+              left: 6px;
+              right: 40px;
+              top: 0;
+              bottom: 0;
+            }
+          }
+        }
+      }
+      :deep .ant-form-item-has-error {
+        .ant-input:focus,
+        .ant-input-number-focused,
+        .ant-picker-focused,
+        .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
+          box-shadow: 0 0 0 1px #ff194c;
+          color: #ff194c;
+          z-index: 10;
+        }
+      }
+    }
+  }
+}
+.lo-control-container {
+  box-sizing: border-box;
+  margin-bottom: 1.5rem;
+  .lo-control-box {
+    height: 100%;
+    .ant-form-item {
+      margin-bottom: 0;
+      .lo-select {
+        :deep {
+          .ant-select-selection-selected-value {
+            width: 100%;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            word-break: break-all;
+          }
+        }
+        &.lo-select-multiple-suffix-icon {
+          :deep {
+            .ant-select-arrow {
+              margin: 0;
+              height: 100%;
+              top: 0;
+              right: 0;
+              width: fit-content;
+              .ant-select-arrow-icon {
+                height: 100%;
+                display: flex;
+                align-items: center;
+              }
+            }
+          }
+        }
+      }
+      .lo-label-sub-type-icon {
+        color: #3fb5eb;
+        cursor: pointer;
+        margin-left: 4px;
+        margin-bottom: 3px;
+        display: inline-block;
+        :deep {
+          svg {
+            display: inline-block;
+            margin-bottom: -2.5px;
+          }
+        }
+      }
+      .lo-label-history-icon {
+        display: inline-block;
+        line-height: 0;
+        margin-left: 4px;
+        margin-bottom: 3px;
+        cursor: pointer;
+        font-size: 14px;
+      }
+      .lo-label-tips-icon {
+        color: #4094f3;
+        cursor: pointer;
+        font-size: 14px !important;
+        margin-left: 4px;
+      }
+      :deep {
+        .ant-form-item-label {
+          label {
+            color: #333333;
+          }
+        }
+        .ant-form-item-control-wrapper {
+          flex-grow: 1;
+          color: #333333;
+        }
+      }
+      :deep {
+        .ant-input-group-addon, .ant-input-number-group-addon {
+          width: 40px;
+          min-height: 38px;
+          position: absolute;
+          right: 2px;
+          top: 1px;
+          border: none;
+          z-index: 999;
+          &:active {
+            opacity: .7;
+          }
+        }
+      }
+      .addon-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        font-size: 15px;
+        cursor: pointer;
+        background-color: #fff;
+      }
+      .addon-inner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+        color: #999999;
+        background-color: #f2f2f2;
+      }
+      .addon-inner:active {
+        background: rgba(240, 240, 240, 0.3);
+      }
+    }
+    .lo-textarea-count {
+      position: absolute;
+      line-height: 10px;
+      right: 0;
+      color: rgba(0, 0, 0, 0.45);
+    }
+    .lo-input-number-box {
+      width: 100%;
+      :deep {
+        .ant-input-number {
+          width: 100%;
+        }
+      }
+      &.lo-with-unit {
+        :deep {
+          .ant-input-number {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 0;
+            .ant-input-number-handler-wrap {
+              border-top-right-radius: 0;
+              border-bottom-right-radius: 0;
+              opacity: 1;
+            }
+          }
+          .ant-dropdown-trigger {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+        }
+        &.lo-unit-1 {
+          :deep {
+            .ant-input-number {
+              width: calc(100% - 50px);
+            }
+            .ant-dropdown-trigger {
+              min-width: 50px;
+            }
+          }
+        }
+        &.lo-unit-2 {
+          :deep {
+            .ant-input-number {
+              width: calc(100% - 80px);
+            }
+            .ant-dropdown-trigger {
+              min-width: 80px;
+            }
+          }
+        }
+        &.lo-unit-3 {
+          :deep {
+            .ant-input-number {
+              width: calc(100% - 110px);
+            }
+            .ant-dropdown-trigger {
+              min-width: 110px;
+            }
+          }
+        }
+      }
+    }
+    .lo-input-content {
+      align-items: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #333333;
+      font-size: 14px;
+      padding: 0 6px;
+    }
+    .lo-control-text {
+      white-space: pre-wrap;
+      word-break: break-all;
+      line-height: 22px;
+    }
+  }
+
+  :deep .ant-select-multiple .ant-select-selection-item {
+     height: 40px !important;
+     margin: 0 4px 0 0 !important;
+  }
+}
+.lo-empty-layout-container {
+  box-sizing: border-box;
+  display: grid;
+  border: none;
+}
+.lo-general-layout-container {
+  box-sizing: border-box;
+  display: grid;
+  grid-column-start: 1;
+}
+:deep .ant-form-item-label > label.ant-form-item-no-colon::after {
+  display: none;
+}
+.ant-input-textarea {
+  width: 100%;
+}