@dhccmobile/vue3-lo-form 0.1.2 → 0.1.5

package/package.json

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

package/src/App.vue

@@ -102,7 +102,7 @@
         <div class="lo-input">
           <!--styleMode="credit-rd" :formId="'773549593606574080'"-->
           <dy-form v-if="showForm" :formId="'961203806267904000'" 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:updateTime="{ control, onChange }">
+            <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" />
                 <!--                <a-input-number style="flex-grow: 1" v-model="control.formControl.value" :min="1" :max="100" @change="onChange(control)" />

package/src/components/form/DvFormLayout.vue

@@ -11,7 +11,6 @@
         :colon="colon"
         :labelAlign="labelAlign"
         :required="required && provideInjectData.edit"
-        :has-feedback="hasFeedback && provideInjectData.edit"
         :validate-status="validateResult.validateStatus"
         :help="provideInjectData.edit ? validateResult.errorMsg : null"
         :class="{
@@ -84,7 +83,7 @@
                 <template v-slot:suffix v-if="$slots['input:suffix:' + formControl.key]">
                   <slot :name="'input:suffix:' + formControl.key"></slot>
                 </template>
-                <template v-slot:addonBefore v-if="$slots['input:addonBefore:' + formControl.key] || controlAttr.bindingPrefix || controlAttr.builtInFrontLabel" @click="onAddonBeforeHandler(control)">
+                <template v-slot:addonBefore v-if="$slots['input:addonBefore:' + formControl.key] || controlAttr.bindingPrefix || controlAttr.builtInFrontLabel">
                   <template v-if="$slots['input:addonBefore:' + formControl.key]">
                     <slot :name="'input:addonBefore:' + formControl.key"> </slot>
                   </template>
@@ -94,8 +93,9 @@
                   <template v-else-if="controlAttr.builtInFrontLabel">
                     <ordered-list-outlined class="addon-icon" />
                   </template>
+                  <span class="addon-inner" @click="onAddonBeforeHandler(control)"></span>
                 </template>
-                <template v-slot:addonAfter v-if="$slots['input:addonAfter:' + formControl.key] || controlAttr.bindingSuffix || controlAttr.builtInPostLabel" @click="onAddonAfterHandler(control)">
+                <template v-slot:addonAfter v-if="$slots['input:addonAfter:' + formControl.key] || controlAttr.bindingSuffix || controlAttr.builtInPostLabel">
                   <template v-if="$slots['input:addonAfter:' + formControl.key]">
                     <slot :name="'input:addonAfter:' + formControl.key"></slot>
                   </template>
@@ -105,6 +105,7 @@
                   <template v-else-if="controlAttr.builtInPostLabel">
                     <ordered-list-outlined class="addon-icon" />
                   </template>
+                  <span class="addon-inner" @click="onAddonAfterHandler(control)"></span>
                 </template>
               </component>
             </template>
@@ -170,6 +171,7 @@
               :placeholder="controlAttr.placeholder"
               @change="onChange(control)"
               @click="onClick(control)"
+              :get-popup-container="getPopupContainer"
               :filter-option="filterOption"
             >
               <template #dropdownRender="{ menuNode: menu }">
@@ -206,20 +208,33 @@
             <a-switch v-model:checked="formControl.value" :checked-children="controlAttr.onOpeningText" :un-checked-children="controlAttr.whenClosedText" :disabled="controlAttr.isNotEdit" @change="onChange(control)" @click="onClick(control)" />
           </template>
           <template v-if="control.code === formFieldType.TimePicker.code">
-            <a-time-picker class="w-100" :use12-hours="is12Hours" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
+            <a-time-picker class="w-100" :get-popup-container="getPopupContainer" :locale="locale" :use12-hours="is12Hours" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
           </template>
           <template v-if="control.code === formFieldType.DatePicker.code">
-            <a-month-picker v-if="useMonthPicker" :locale="locale" class="w-100" :format="controlAttr.dateFormat" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
-            <a-date-picker v-else :locale="locale" class="w-100" :showTime="showPickerTime(controlAttr.dateFormat)" :format="controlAttr.dateFormat" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
+            <a-month-picker v-if="useMonthPicker" class="w-100" :get-popup-container="getPopupContainer" :locale="locale" :format="controlAttr.dateFormat" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
+            <a-date-picker v-else class="w-100" :get-popup-container="getPopupContainer" :locale="locale" :showTime="showPickerTime(controlAttr.dateFormat)" :format="controlAttr.dateFormat" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
           </template>
           <template v-if="control.code === formFieldType.Slider.code">
             <a-slider v-model:value="formControl.value" :disabled="controlAttr.isNotEdit" @change="onChange(control)" @click="onClick(control)" />
           </template>
           <template v-if="control.code === formFieldType.Cascader.code">
-            <a-cascader :placeholder="controlAttr.placeholder" :show-search="controlAttr.isSearchable ? { cascaderFilter } : undefined" :disabled="controlAttr.isNotEdit" :options="cascaderOptions" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
+            <a-cascader :get-popup-container="getPopupContainer" :placeholder="controlAttr.placeholder" :show-search="controlAttr.isSearchable ? { cascaderFilter } : undefined" :disabled="controlAttr.isNotEdit" :options="cascaderOptions" v-model:value="formControl.value" @change="onChange(control)" @click="onClick(control)" />
           </template>
           <template v-if="control.code === formFieldType.TreeSelect.code">
-            <a-tree-select v-model:value="formControl.value" :show-search="controlAttr.isSearchable" :treeNodeFilterProp="'title'" :disabled="controlAttr.isNotEdit" :placeholder="controlAttr.placeholder" :dropdown-style="{ maxHeight: '250px', overflow: 'auto' }" :tree-data="treeSelectOptions" @change="onChange(control)" @click="onClick(control)" tree-default-expand-all> </a-tree-select>
+            <a-tree-select
+              :get-popup-container="getPopupContainer"
+              v-model:value="formControl.value"
+              :show-search="controlAttr.isSearchable"
+              :treeNodeFilterProp="'title'"
+              :disabled="controlAttr.isNotEdit"
+              :placeholder="controlAttr.placeholder"
+              :dropdown-style="{ maxHeight: '250px', overflow: 'auto' }"
+              :tree-data="treeSelectOptions"
+              @change="onChange(control)"
+              @click="onClick(control)"
+              tree-default-expand-all
+            >
+            </a-tree-select>
           </template>
           <template v-if="control.code === formFieldType.Rate.code">
             <a-rate v-model:value="formControl.value" :disabled="controlAttr.isNotEdit" @change="onChange(control)" @click="onClick(control)" allow-half />
@@ -233,7 +248,7 @@
             </a-upload>
           </template>
           <template v-if="control.code === formFieldType.Custom.code && controlAttr.customFieldName">
-            <slot :control="control" :onChange="onChange" :name="'combinationSelector:' + formControl.key"></slot>
+            <slot :control="control" :onChange="onChange" :name="controlAttr.customFieldName"></slot>
           </template>
         </template>
         <template v-else>
@@ -1283,6 +1298,15 @@ export default class DvFormLayout extends Vue {
     this.defaultMoneyUnit = this.moneyUnits.find((item) => item.code === e.key);
   }
 
+  /**
+   * @description: 将下拉弹层渲染节点固定在触发器的父元素中
+   * @author ZPFly
+   * @date 2022/8/31 11:30
+   */
+  getPopupContainer(triggerNode: any) {
+    return triggerNode.parentNode;
+  }
+
   /**
    * @description: 输入事件处理
    * @author ChenRui
@@ -1474,6 +1498,7 @@ export default class DvFormLayout extends Vue {
               height: 100%;
               top: 0;
               right: 0;
+              width: fit-content;
               .ant-select-arrow-icon {
                 height: 100%;
                 display: flex;
@@ -1522,10 +1547,25 @@ export default class DvFormLayout extends Vue {
           color: #333333;
         }
       }
+      :deep(.ant-input-group-addon:last-child) {
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+      }
       .addon-icon {
         font-size: 15px;
         cursor: pointer;
       }
+      .addon-inner {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+      }
+      .addon-inner:active {
+        background: rgba(240, 240, 240, 0.3);
+      }
     }
     .lo-textarea-count {
       position: absolute;