@dhccmobile/vue3-lo-form 2.0.4 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dhccmobile/vue3-lo-form",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "VUE3动态表单",
   "private": false,
   "main": "dist/vue3-lo-form.umd.js",
@@ -42,18 +42,18 @@
     "@types/moment": "^2.13.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-typescript": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
+    "@vue/cli-plugin-babel": "~4.5.10",
+    "@vue/cli-plugin-eslint": "~4.5.10",
+    "@vue/cli-plugin-router": "~4.5.10",
+    "@vue/cli-plugin-typescript": "~4.5.17",
+    "@vue/cli-plugin-vuex": "~4.5.10",
+    "@vue/cli-service": "~4.5.10",
     "@vue/compiler-sfc": "3.4.35",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
     "eslint": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^8.0.1",
+    "eslint-plugin-vue": "^7.0.0",
     "less": "^4.2.0",
     "less-loader": "^11.0.0",
     "prettier": "^2.2.1",

package/src/App.vue

@@ -102,7 +102,7 @@
         </div>
         <div class="lo-input">
           <!--styleMode="credit-rd" :formId="'773549593606574080'"-->
-          <dy-form v-if="showForm" :formId="'984034993956851712'" :form-limits="formLimits" v-model:edit="formApi.edit" v-model: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="'984119606230257664'" v-model:edit="formApi.edit" v-model: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" />
@@ -194,14 +194,6 @@ export default class App extends Vue {
     sysDictDetailOptions: [],
     sysDictTreeDetailOptions: [],
   };
-  /**
-   * 表单权限控制属性
-   * id: 表单字段
-   * isHide: 0-显示 1-隐藏
-   * isNotEdit: 0-可编辑 1-不可编辑
-   * isMustFill: 0-可为空 1-必填
-   */
-  formLimits = [{ id: "deptNm", isHide: "0", isNotEdit: "0", isMustFill: "1" }];
   mounted(): void {
     const desForm: DesForm | any = formTemplate;
     desForm.desFormLayouts[0].desFormControls.push({

package/src/components/form/DvForm.vue

@@ -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];
   }

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(),
         }"
       >
@@ -302,7 +302,9 @@
             </a-upload>
           </template>
           <template v-if="control.code === formFieldType.Custom.code && controlAttr.customFieldName">
-            <slot :control="control" :onChange="onChange" :name="controlAttr.customFieldName"></slot>
+            <div class="custom-border">
+              <slot :control="control" :onChange="onChange" :name="controlAttr.customFieldName"></slot>
+            </div>
           </template>
         </template>
         <template v-else>
@@ -782,7 +784,7 @@ export default class DvFormLayout extends Vue {
     } else if (this.provideInjectData.controlSpan) {
       return this.provideInjectData.controlSpan;
     } else {
-      return 0;
+      return "none";
     }
   }
 
@@ -957,6 +959,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) {
@@ -1033,6 +1036,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

package/src/main.ts

@@ -15,3 +15,5 @@ app
     loadMode: "dynamic",
   })
   .mount("#app");
+const win: any = window;
+win.$loFormTheme = "labelWrap"; // 指定主题

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%;
+}