@dhccmobile/vue3-lo-form 0.1.0

package/src/components/form/DvFormLayout.vue

@@ -0,0 +1,1568 @@
+<template>
+  <div class="lo-control-container" :style="{ width: divWidthCompatibleToIe }" v-if="(control.type === formFieldClass.Base.code || control.type === formFieldClass.Senior.code) && !controlAttr.isHideControl">
+    <div class="lo-control-box">
+      <a-form-item
+        :labelCol="{
+          style: 'min-width: ' + labelSpanWidth + ';width:' + labelSpanWidth,
+        }"
+        :wrapperCol="{
+          style: 'max-width: ' + controlSpanMaxWidth + ';width: ' + controlSpanWidth,
+        }"
+        :labelAlign="labelAlign"
+        :required="required && provideInjectData.edit"
+        :has-feedback="hasFeedback && provideInjectData.edit"
+        :validate-status="validateResult.validateStatus"
+        :help="provideInjectData.edit ? validateResult.errorMsg : null"
+        :class="{
+          ['form-model-item-' + controlAttr.boundProperty]: true,
+          ['form-model-item-' + control.code]: true,
+          'lo-form-model-item-textarea-box': control.code === formFieldType.Textarea.code,
+        }"
+      >
+        <template v-slot:label>
+          <span v-if="!controlAttr.isHideTitle">
+            <span :class="{ 'lo-fw': controlAttr.isBoldTitle }" :style="{ color: controlAttr.titleColor }">{{ controlAttr.formFieldDescribe }}</span>
+            <a-tooltip class="lo-label-sub-type-icon" placement="right" :title="submittedTypeStr" overlayClassName="lo-form-item-tooltip" v-if="submittedType.length > 0">
+              <img :src="submittedSvg" />
+            </a-tooltip>
+            <a-tooltip class="lo-label-tips-icon" placement="right" :title="controlAttr.tips" overlayClassName="lo-form-item-tooltip" v-if="controlAttr.tips">
+              <question-circle-outlined style="font-size: 13px" />
+            </a-tooltip>
+            <a-popconfirm overlayClassName="lo-label-history-popconfirm" placement="right" ok-text="确定" v-if="formControl.history && formControl.history.length">
+              <template v-slot:title>
+                <div class="lo-history-popconfirm-title">历史修改</div>
+                <div>
+                  <a-timeline class="lo-history-timeline">
+                    <a-timeline-item v-for="(item, index) of formControl.history" :key="index">
+                      <template v-slot:dot>
+                        <clock-circle-outlined style="font-size: 13px" />
+                      </template>
+                      <div class="lo-history-context">
+                        <div>{{ item.time }}</div>
+                        <div class="lo-important lo-mx-10">
+                          {{ item.before }}
+                        </div>
+                        改为
+                        <div class="lo-important lo-mx-10">
+                          {{ item.after }}
+                        </div>
+                        修改人
+                        <div class="lo-important lo-ml-10">
+                          {{ item.author }}
+                        </div>
+                      </div>
+                    </a-timeline-item>
+                  </a-timeline>
+                </div>
+              </template>
+              <img class="lo-label-history-icon" :src="historySvg" />
+            </a-popconfirm>
+          </span>
+        </template>
+        <template v-if="provideInjectData.edit">
+          <template v-if="control.code === formFieldType.Input.code">
+            <template v-if="provideInjectData.edit">
+              <component :is="inputShape" v-model:value="formControl.value" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" :data-source="controlAttr.autoCompleteOptions" @focus="onFocus(control)" @blur="onBlur(control)" @input="onChange(control)" @click="onClick(control)">
+                <template v-slot:prefix>
+                  <div v-if="$slots['input:prefix:' + formControl.key]">
+                    <slot :name="'input:prefix:' + formControl.key"></slot>
+                  </div>
+                </template>
+                <template v-slot:suffix>
+                  <div v-if="$slots['input:suffix:' + formControl.key]">
+                    <slot :name="'input:suffix:' + formControl.key"></slot>
+                  </div>
+                </template>
+                <template v-slot:addonBefore>
+                  <div 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>
+                    <template v-else-if="controlAttr.bindingPrefix">
+                      {{ controlAttr.bindingPrefix }}
+                    </template>
+                    <template v-else-if="controlAttr.builtInFrontLabel">
+                      <ordered-list-outlined class="addon-icon" @click="onAddonBeforeHandler(control)" />
+                    </template>
+                  </div>
+                </template>
+                <template v-slot:addonAfter>
+                  <div 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>
+                    <template v-else-if="controlAttr.bindingSuffix">
+                      {{ controlAttr.bindingSuffix }}
+                    </template>
+                    <template v-else-if="controlAttr.builtInPostLabel">
+                      <ordered-list-outlined class="addon-icon" @click="onAddonAfterHandler(control)" />
+                    </template>
+                  </div>
+                </template>
+              </component>
+            </template>
+          </template>
+          <template v-else-if="control.code === formFieldType.Textarea.code">
+            <a-textarea v-model:value="control.formControl.value" :placeholder="controlAttr.placeholder" :disabled="controlAttr.isNotEdit" :rows="3" :showCount="!!maxCharacterCount" :maxlength="maxCharacterCount" @input="onChange(control)" @focus="onFocus(control)" @blur="onBlur(control)" @click="onClick(control)" />
+          </template>
+          <template v-if="control.code === formFieldType.InputNumber.code">
+            <a-popover v-model:value="numberPopoverVisible" trigger="focus">
+              <template #content>
+                <!--                {{ $filters.amountCapitalization($filters.zoomMultiple(formControl.value, formControl)) }}-->
+                {{ formControl.value }}
+              </template>
+              <span
+                class="lo-input-number-box"
+                :class="{
+                  'lo-with-unit': controlAttr.zoomType === zoomType.automatic.code && moneyUnits.length > 0,
+                  ['lo-unit-' + moneyUnitsIndentScale]: true,
+                }"
+              >
+                <a-input-number
+                  :step="controlAttr.step || 1"
+                  :min="controlAttr.minValue != null ? controlAttr.minValue : undefined"
+                  :max="controlAttr.maxValue != null ? controlAttr.maxValue : undefined"
+                  :formatter="numberFormatter"
+                  :parser="numberParser"
+                  :precision="controlAttr.decimalPlaces"
+                  :placeholder="controlAttr.placeholder"
+                  :disabled="controlAttr.isNotEdit"
+                  v-model:value="formControl.value"
+                  @change="onChange(control)"
+                  @click="onClick(control)"
+                  @focus="onInputNumberFocus(control)"
+                  @blur="onInputNumberBlur(control)"
+                />
+                <a-dropdown v-if="controlAttr.zoomType === zoomType.automatic.code && moneyUnits.length > 0">
+                  <template v-slot:overlay>
+                    <a-menu @click="handleMoneyUnitMenuClick">
+                      <a-menu-item v-for="unit in moneyUnits" :key="unit.code">{{ unit.name }}</a-menu-item>
+                    </a-menu>
+                  </template>
+                  <a-button>
+                    {{ defaultMoneyUnit.name }}
+                    <down-outlined v-if="moneyUnits.length > 1" />
+                  </a-button>
+                </a-dropdown>
+              </span>
+            </a-popover>
+          </template>
+          <template v-if="control.code === formFieldType.Select.code">
+            <a-select
+              class="lo-select"
+              :dropdownClassName="controlAttr.hiddenDropdown ? 'lo-select-hide-drop-down-content' : ''"
+              :class="{
+                'lo-select-multiple-suffix-icon': controlAttr.isMultipleChoice && ($slots['select:suffixIcon:' + formControl.key] || controlAttr.bindingSuffix),
+              }"
+              showArrow
+              v-model:value="formControl.value"
+              :allow-clear="controlAttr.isClearButton"
+              :show-search="controlAttr.isSearchable"
+              :mode="controlAttr.isMultipleChoice ? 'multiple' : ''"
+              :disabled="controlAttr.isNotEdit"
+              :placeholder="controlAttr.placeholder"
+              @change="onChange(control)"
+              @click="onClick(control)"
+              :filter-option="filterOption"
+            >
+              <template #dropdownRender="{ menuNode: menu }">
+                <v-nodes :vnodes="menu" />
+                <template v-if="controlAttr.canAddEntry">
+                  <a-divider style="margin: 4px 0" />
+                  <div style="padding: 4px 8px 6px 8px; cursor: pointer" @mousedown="(e) => e.preventDefault()" @click="selectAddItem(control)"><plus-outlined />新增</div>
+                </template>
+              </template>
+              <template #default>
+                <a-select-option v-for="item in options" :value="item.value" :key="item.value" :title="item.title">{{ item.title }}</a-select-option>
+              </template>
+              <template #suffixIcon v-if="$slots['select:suffixIcon:' + formControl.key] || controlAttr.bindingSuffix">
+                <template v-if="$slots['select:suffixIcon:' + formControl.key]">
+                  <slot :name="'select:suffixIcon:' + formControl.key"></slot>
+                </template>
+                <template v-else>
+                  {{ controlAttr.bindingSuffix }}
+                </template>
+              </template>
+            </a-select>
+          </template>
+          <template v-if="control.code === formFieldType.Radio.code">
+            <a-radio-group class="w-100" v-model:value="formControl.value" :disabled="controlAttr.isNotEdit" @change="onChange(control)" @click="onClick(control)">
+              <a-radio v-for="item in options" :key="item.value" :value="item.value">{{ item.title }}</a-radio>
+            </a-radio-group>
+          </template>
+          <template v-if="control.code === formFieldType.Checkbox.code">
+            <a-checkbox-group class="w-100" v-model:value="formControl.value" :disabled="controlAttr.isNotEdit" @change="onChange(control)" @click="onClick(control)">
+              <a-checkbox v-for="item in options" :key="item.value" :value="item.value">{{ item.title }}</a-checkbox>
+            </a-checkbox-group>
+          </template>
+          <template v-if="control.code === formFieldType.Switch.code">
+            <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)" />
+          </template>
+          <template v-if="control.code === formFieldType.DatePicker.code">
+            <a-month-picker v-if="useMonthPicker" 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 class="w-100" :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)" />
+          </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>
+          </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 />
+          </template>
+          <template v-if="control.code === formFieldType.Upload.code">
+            <a-upload :file-list="formControl.value" :accept="uploadType" :multiple="controlAttr.isMultipleChoice" @remove="handleRemove" :before-upload="beforeUpload" @change="handleUploadChange">
+              <a-button>
+                <upload-outlined />
+                选择文件
+              </a-button>
+            </a-upload>
+          </template>
+          <template v-if="control.code === formFieldType.Custom.code && controlAttr.customFieldName">
+            <slot :control="control" :onChange="onChange" :name="controlAttr.customFieldName"></slot>
+          </template>
+        </template>
+        <template v-else>
+          <stretch-text v-if="controlAttr.textFold" :content="formatData"></stretch-text>
+          <div class="lo-control-text" v-else>
+            {{ formatData }}
+          </div>
+        </template>
+      </a-form-item>
+    </div>
+  </div>
+  <a-form :class="'w-100 lo-empty-layout-container' + (controlAttr.layoutName ? ' lo-form-layout-' + controlAttr.layoutName : '')" :layout="layout" :style="emptyLayoutContainerStyle" v-else-if="control.type === formFieldClass.Layout.code && control.code === formFieldType.Empty.code">
+    <dv-form-layout v-for="(item, i) in control.subControls" :key="i" :index="i" :customFormats="customFormats" :control="item" :parentControl="control" @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 v-for="scopedPropName in Object.keys($slots)" v-slot:[scopedPropName]="{ control, onChange }">
+        <slot v-bind:control="control" v-bind:onChange="onChange" :name="scopedPropName"></slot>
+      </template>
+    </dv-form-layout>
+  </a-form>
+  <a-form :class="'w-100 lo-general-layout-container' + (controlAttr.layoutName ? ' lo-form-layout-' + controlAttr.layoutName : '')" :layout="layout" :style="generalLayoutContainerStyle" v-else-if="control.type === formFieldClass.Layout.code && control.code !== formFieldType.Empty.code">
+    <dv-form-layout
+      v-for="(item, i) in control.subControls"
+      :key="i"
+      :index="i"
+      :customFormats="customFormats"
+      :control="item"
+      :parentControl="control"
+      :class="controlAttr.layoutName ? 'lo-form-layout-' + controlAttr.layoutName : ''"
+      @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 v-for="scopedPropName in Object.keys($slots)" v-slot:[scopedPropName]="{ control, onChange }">
+        <slot v-bind:control="control" v-bind:onChange="onChange" :name="scopedPropName"></slot>
+      </template>
+    </dv-form-layout>
+  </a-form>
+</template>
+
+<script lang="ts">
+import { Options, Inject, Prop, Watch, Vue } from "vue-property-decorator";
+import { Control } from "@/domain";
+import { FormEnum } from "@/domain";
+import { FormFieldClass } from "@/constants";
+import { FormFieldType } from "@/constants";
+import generateGridTemplateColumns from "../../filtres/generate-grid-template-columns.filter";
+import generateGridColumnEnd from "../../filtres/generate-grid-column-end.filter";
+import { DesFormLayout } from "@/domain";
+import { DesFormControl } from "@/domain";
+
+import { AutoComplete, Cascader, Checkbox, DatePicker, Form, Input, InputNumber, Radio, Select, Switch, TimePicker, TreeSelect, Slider, Tooltip, Popover, Divider, Rate, Dropdown, Button, Menu, Upload, Popconfirm, Timeline, FormItem, SelectOption, RadioGroup, Textarea, CheckboxGroup, InputPassword, TimelineItem } from "ant-design-vue";
+import { VerticalArrangement } from "@/constants";
+import { formBeanUtilsService } from "@/services";
+import { ProvideInjectData } from "@/domain/ProvideInjectData";
+
+import "moment/locale/zh-cn";
+import moment from "moment";
+import amountCapitalization from "../../filtres/amount-capitalization.filter";
+import { FormControl, ValidateResult, CustomFormat } from "../../domain";
+import { FormBusAttr, SubmittedType, MoneyUnit, ControlFormatType, BuiltLabel, SupportUploadType } from "../../constants/enum";
+import { ValidateRules } from "@/constants";
+import { ZoomType } from "@/constants";
+import { extractOptions } from "@/filtres/extract-options.filter";
+import zoomMultiple from "../../filtres/zoom-multiple.filter";
+import switchEnumConvert from "../../filtres/switch-enum-convert.filter";
+import StretchText from "./StretchText.vue";
+import { SUBMITTED_SVG_XML, HISTORY_SVG_XML } from "../../constants/encode-assets/svg";
+import { PlusOutlined, QuestionCircleOutlined, ClockCircleOutlined, DownOutlined, OrderedListOutlined, UploadOutlined } from "@ant-design/icons-vue";
+@Options({
+  name: "DvFormLayout",
+  filters: {
+    amountCapitalization: amountCapitalization,
+    switchEnumConvert: switchEnumConvert,
+    zoomMultiple: zoomMultiple,
+  },
+  components: {
+    StretchText,
+    PlusOutlined,
+    [Form.name]: Form,
+    [FormItem.name]: FormItem,
+    [Input.name]: Input,
+    [Textarea.name]: Textarea,
+    [AutoComplete.name]: AutoComplete,
+    [InputNumber.name]: InputNumber,
+    [Select.name]: Select,
+    [SelectOption.name]: SelectOption,
+    [Radio.name]: Radio,
+    [RadioGroup.name]: RadioGroup,
+    [Checkbox.name]: Checkbox,
+    [CheckboxGroup.name]: CheckboxGroup,
+    [Switch.name]: Switch,
+    [TimePicker.name]: TimePicker,
+    [DatePicker.name]: DatePicker,
+    [Slider.name]: Slider,
+    [AutoComplete.name]: AutoComplete,
+    [Cascader.name]: Cascader,
+    [TreeSelect.name]: TreeSelect,
+    // [Icon.name]: Icon,
+    [Tooltip.name]: Tooltip,
+    [InputPassword.name]: InputPassword,
+    [Popover.name]: Popover,
+    [Popconfirm.name]: Popconfirm,
+    [Timeline.name]: Timeline,
+    [TimelineItem.name]: TimelineItem,
+    [Rate.name]: Rate,
+    [Dropdown.name]: Dropdown,
+    [Menu.name]: Menu,
+    [Menu.Item.name]: Menu.Item,
+    [Upload.name]: Upload,
+    [Button.name]: Button,
+    [Divider.name]: Divider,
+    [DatePicker.MonthPicker.name]: DatePicker.MonthPicker,
+    [StretchText.name]: StretchText,
+    VNodes: (_, { attrs }) => {
+      return attrs.vnodes;
+    },
+    QuestionCircleOutlined,
+    ClockCircleOutlined,
+    DownOutlined,
+    OrderedListOutlined,
+    UploadOutlined,
+  },
+})
+export default class DvFormLayout extends Vue {
+  submittedSvg = SUBMITTED_SVG_XML; // 上报图标
+  historySvg = HISTORY_SVG_XML; // 历史记录图标
+
+  momentUtil = moment; // 日期工具包
+  numberPopoverVisible = false; // 是否开启数字气泡弹窗
+  validateResult: ValidateResult = {}; // 校验规则
+  metaRefresh: any; // 刷新标识
+  defaultMoneyUnit: any = {}; // 默认单位
+  zoomType = ZoomType; // 缩放类型
+  builtLabel = BuiltLabel; // 内置前/后置标签
+  filterOption(input: any, option: any) {
+    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  }
+
+  @Prop() index: number | undefined;
+  @Prop() control: Control | undefined;
+  @Prop() parentControl: Control | undefined;
+  @Prop({ type: Object, default: () => ({}) }) customFormats: { [key: string]: CustomFormat } | undefined;
+  @Inject() provideInjectData: ProvideInjectData | any;
+
+  readonly formFieldClass: FormEnum = FormFieldClass; // 表单字段分类
+  readonly formFieldType: FormEnum = FormFieldType; // 表单字段类型
+
+  @Watch("defaultMoneyUnit", { immediate: true })
+  onDefaultMoneyUnitHandler(newVal: any): void {
+    if (newVal.code != null) {
+      switch (newVal.code) {
+        case MoneyUnit.Yuan.code:
+          (this.controlAttr as DesFormControl).zoomMultiple = 1;
+          break;
+        case MoneyUnit.TenThousandYuan.code:
+          (this.controlAttr as DesFormControl).zoomMultiple = 10000;
+          break;
+        case MoneyUnit.HundredMillionYuan.code:
+          (this.controlAttr as DesFormControl).zoomMultiple = 100000000;
+          break;
+      }
+    }
+  }
+
+  /**
+   * @description: 校验反馈
+   * @author ChenRui
+   * @date 2021/2/26 14:24
+   */
+  @Watch("provideInjectData.refreshCheckFeedbackFlag")
+  @Watch("control.formControl.refreshValidate")
+  onValidationFeedbackHandle(): void {
+    this.validateResult = this.formControl.validate();
+  }
+
+  /**
+   * @description: 表单校验
+   * @author ChenRui
+   * @date 2022/4/6 14:12
+   */
+  @Watch("provideInjectData.formValidateStateResetMark")
+  onFormValidateStateResetMarkHandle(): void {
+    this.validateResult = {};
+  }
+
+  /**
+   * @description: 输入框形态
+   * @author ChenRui
+   * @date 2022/5/7 17:48
+   */
+  get inputShape(): string {
+    if ((this.controlAttr as DesFormControl).isPasswordBox) {
+      return "a-input-password";
+    } else if ((this.controlAttr as DesFormControl).enableAutoComplete) {
+      return "a-auto-complete";
+    } else {
+      return "a-input";
+    }
+  }
+
+  /**
+   * @description: 获取控件对象
+   * @author ChenRui
+   * @date 2021/1/27 11:07
+   */
+  get formControl(): FormControl {
+    if (this.control && this.control.formControl) {
+      // 初始化部分数据
+      this.initFormControlData();
+      return this.control.formControl;
+    }
+    return new FormControl();
+  }
+
+  /**
+   * @description: 获取控件配置参数
+   * @author ChenRui
+   * @date 2021/1/5 11:26
+   */
+  get controlAttr(): DesFormControl | DesFormLayout {
+    return this.control?.controlAttr as any;
+  }
+
+  /**
+   * @description: 获取控件配置参数
+   * @author ChenRui
+   * @date 2021/1/5 11:26
+   */
+  get parentControlAttr(): DesFormLayout {
+    return this.parentControl?.controlAttr as DesFormLayout;
+  }
+
+  /**
+   * @description: 获取布局方式
+   * @author ChenRui
+   * @date 2020/12/30 18:19
+   */
+  get layout(): string {
+    for (const propName of Object.keys(VerticalArrangement)) {
+      if ((VerticalArrangement as any)[propName]["code"] === (this.controlAttr as DesFormLayout).gridVerticalArrangement) {
+        return (VerticalArrangement as any)[propName]["value"];
+      }
+    }
+    return VerticalArrangement.AlignRight.value;
+  }
+
+  /**
+   * @description: 当前输入的字符长度
+   * @author ChenRui
+   * @date 2021/4/20 15:55
+   */
+  get currentCharacterCount(): any {
+    return this.control!.formControl && this.control!.formControl.value ? this.control!.formControl.value.length : 0;
+  }
+
+  /**
+   * @description: 最大字数限制
+   * @author ChenRui
+   * @date 2021/4/20 15:38
+   */
+  get maxCharacterCount(): any {
+    const controlAttr: DesFormControl = this.controlAttr as DesFormControl;
+    if (controlAttr.verificationRules && controlAttr.verificationRules.length > 0) {
+      const verificationRule: any = controlAttr.verificationRules.find((item: any) => item.ruleType === ValidateRules.MaxTextLength.code);
+      if (verificationRule != null && verificationRule.ruleContent) {
+        return Number(verificationRule.ruleContent);
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * @description: 数字格式化
+   * @author ChenRui
+   * @date 2021/1/14 16:30
+   */
+  get numberFormatter(): any {
+    const controlAttr: any = this.controlAttr as DesFormControl;
+    const controlFormatType: string = controlAttr.formatType ? controlAttr.formatType : ControlFormatType.GENERAL.code;
+    return (value: any) => {
+      let val: any = value != undefined ? String(value) : "";
+      switch (controlFormatType) {
+        case ControlFormatType.GENERAL.code:
+        case ControlFormatType.AMOUNT_OF_MONEY.code:
+          if (controlFormatType === ControlFormatType.AMOUNT_OF_MONEY.code && val != null && controlAttr.thousandthPercentileFormat) {
+            val = `${val}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+          }
+          if (controlAttr.zoomType !== ZoomType.automatic.code && val != null && val != "" && controlAttr.unit) {
+            val = `${val}${controlAttr.unit}`;
+          }
+          return val;
+        case ControlFormatType.BANK_CARD_NUMBER.code:
+          if (val != null) {
+            val = val.replace(/[\s]/g, "").replace(/(\d{4})(?=\d)/g, "$1 ");
+          }
+          return val;
+        case ControlFormatType.CELL_PHONE_NUMBER.code:
+          if (val != null) {
+            val = val.replace(/\D/g, "").substr(0, 11); // 不允许输入非数字字符，超过11位数字截取前11位
+            const len = val.length;
+            if (len > 3 && len < 8) {
+              val = val.replace(/^(\d{3})/g, "$1 ");
+            } else if (len >= 8) {
+              val = val.replace(/^(\d{3})(\d{4})/g, "$1 $2 ");
+            }
+          }
+          return val;
+        case ControlFormatType.LANDLINE_NUMBER.code:
+          return val;
+        default: {
+          return value;
+        }
+      }
+    };
+  }
+
+  /**
+   * @description: 数字反格式化
+   * @author ChenRui
+   * @date 2021/1/14 16:31
+   */
+  get numberParser(): any {
+    const controlAttr: any = this.controlAttr as DesFormControl;
+    const zoomType: string = controlAttr.formatType ? controlAttr.formatType : ControlFormatType.GENERAL.code;
+    return (value: any) => {
+      let val: any = value;
+      switch (zoomType) {
+        case ControlFormatType.GENERAL.code:
+        case ControlFormatType.AMOUNT_OF_MONEY.code:
+          if (zoomType === ControlFormatType.AMOUNT_OF_MONEY.code && val != null && controlAttr.thousandthPercentileFormat) {
+            val = val.replace(/\$\s?|(,*)/g, "");
+          }
+          if (controlAttr.zoomType !== ZoomType.automatic.code && val != null && val != "" && controlAttr.unit) {
+            const replaceUnit: string[] = controlAttr.unit.split("");
+            replaceUnit.forEach((item) => {
+              val = val.replace(item, "");
+            });
+          }
+          return val;
+        case ControlFormatType.BANK_CARD_NUMBER.code:
+        case ControlFormatType.CELL_PHONE_NUMBER.code:
+          if (val != null) {
+            val = val.replace(/\s/g, "");
+          }
+          return val;
+        case ControlFormatType.LANDLINE_NUMBER.code:
+          return val;
+        default: {
+          return val;
+        }
+      }
+    };
+  }
+
+  /**
+   * @description: label 宽度
+   * @author ChenRui
+   * @date 2021/1/5 11:59
+   */
+  get labelSpanWidth(): any {
+    const controlAttr: DesFormControl = this.controlAttr as DesFormControl;
+    const parentControlAttr: DesFormLayout = this.parentControlAttr as DesFormLayout;
+    if (controlAttr.titleWidth) {
+      return controlAttr.titleWidth;
+    } else if (parentControlAttr.labelSpan) {
+      return parentControlAttr.labelSpan;
+    } else {
+      return this.provideInjectData.labelSpan;
+    }
+  }
+
+  /**
+   * @description: 最大宽度设置
+   * @author ChenRui
+   * @date 2021/7/8 16:39
+   */
+  get controlSpanMaxWidth(): any {
+    const controlAttr: DesFormControl = this.controlAttr as DesFormControl;
+    const parentControlAttr: DesFormLayout = this.parentControlAttr as DesFormLayout;
+    if (controlAttr.controlWidth) {
+      return controlAttr.controlWidth;
+    } else if (parentControlAttr.controlSpan) {
+      return parentControlAttr.controlSpan;
+    } else if (this.provideInjectData.controlSpan) {
+      return this.provideInjectData.controlSpan;
+    } else {
+      return "none";
+    }
+  }
+
+  /**
+   * @description: 控件宽度
+   * @author ChenRui
+   * @date 2021/1/5 15:11
+   */
+  get controlSpanWidth(): any {
+    const controlAttr: DesFormControl = this.controlAttr as DesFormControl;
+    const parentControlAttr: DesFormLayout = this.parentControlAttr as DesFormLayout;
+    if (controlAttr.controlWidth) {
+      return controlAttr.controlWidth;
+    } else if (parentControlAttr.controlSpan) {
+      return parentControlAttr.controlSpan;
+    } else if (this.provideInjectData.controlSpan) {
+      return this.provideInjectData.controlSpan;
+    } else {
+      return 0;
+    }
+  }
+
+  /**
+   * @description: label 标签的文本对齐方式
+   * @author ChenRui
+   * @date 2021/1/5 11:59
+   */
+  get labelAlign(): string {
+    for (const propName of Object.keys(VerticalArrangement)) {
+      if ((VerticalArrangement as any)[propName]["code"] === (this.controlAttr as DesFormLayout).gridVerticalArrangement) {
+        return (VerticalArrangement as any)[propName]["textAlign"];
+      }
+    }
+    return VerticalArrangement.AlignRight.textAlign;
+  }
+
+  /**
+   * @description: 获取金额转换单位
+   * @author ChenRui
+   * @date 2021/2/20 17:43
+   */
+  get moneyUnits(): any[] {
+    const moneyUnits: any[] = [];
+    const moneyUnit: any[] = formBeanUtilsService.parse((this.controlAttr as DesFormControl).moneyUnit);
+    if ((this.controlAttr as DesFormControl).moneyUnit) {
+      Object.values(MoneyUnit).forEach((item) => {
+        if (moneyUnit.findIndex((it) => it === item.code) !== -1) {
+          moneyUnits.push(item);
+        }
+      });
+    }
+
+    if (moneyUnits && moneyUnits.length > 0) {
+      this.defaultMoneyUnit = moneyUnits[0];
+    }
+    return moneyUnits;
+  }
+
+  /**
+   * @description: 单位缩放比例
+   * @author ChenRui
+   * @date 2022/5/7 10:31
+   */
+  get moneyUnitsIndentScale(): number {
+    const moneyUnit: any = this.defaultMoneyUnit;
+    if (moneyUnit != null && moneyUnit.code) {
+      return Number(moneyUnit.code);
+    }
+    return 0;
+  }
+
+  /**
+   * @description: 获取select、checkbox、radio可选项
+   * @author ChenRui
+   * @date 2020/12/2 14:36
+   */
+  get options(): any[] {
+    return extractOptions(this.controlAttr);
+  }
+
+  /**
+   * @description: 使用月份组件
+   * @author ChenRui
+   * @date 2021/5/19 16:12
+   */
+  get useMonthPicker(): boolean {
+    const dateFormat: any = (this.controlAttr as DesFormControl).dateFormat;
+    if (dateFormat && dateFormat.toLowerCase() === "yyyy-mm") {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * @description: 级联选择框
+   * @author ChenRui
+   * @date 2021/1/5 16:31
+   */
+  get cascaderOptions(): any[] {
+    const value: any[] = this.options;
+    let options: any[] = [];
+    if (value && value.length > 0) {
+      const items = formBeanUtilsService.copy(value);
+      options = this.cascaderRecursion(items);
+    }
+    return options;
+  }
+
+  /**
+   * @description: 树形下拉选项
+   * @author ChenRui
+   * @date 2021/1/5 16:44
+   */
+  get treeSelectOptions(): any[] {
+    const value: any[] = this.options;
+    console.log(value);
+    if (value && value.length > 0) {
+      const items = formBeanUtilsService.copy(value);
+      this.treeSelectRecursion(items);
+      return items;
+    }
+    return [];
+  }
+
+  /**
+   * @description: 是否12小时制
+   * @author ChenRui
+   * @date 2021/1/18 10:54
+   */
+  get is12Hours(): boolean {
+    return !!(this.controlAttr as DesFormControl).timeFormat && (this.controlAttr as DesFormControl).timeFormat.indexOf(":ss") < 0;
+  }
+
+  /**
+   * @description: 是否添加反馈
+   * @author ChenRui
+   * @date 2021/1/21 10:43
+   */
+  get hasFeedback(): boolean {
+    return this.control!.formControl != null && this.control!.formControl!.validates && this.control!.formControl!.validates.length > 0;
+  }
+
+  /**
+   * @description: 是否必填，仅影响样式
+   * @author ChenRui
+   * @date 2021/1/21 10:50
+   */
+  get required(): boolean {
+    if (this.hasFeedback && this.control!.formControl!.validates.findIndex((item: any) => String(item.name) === String(ValidateRules.Required.code)) !== -1) {
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * @description: 格式化数据
+   * @author ChenRui
+   * @date 2021/1/8 11:30
+   */
+  get formatData(): string {
+    this.metaRefresh = this.provideInjectData.metaRefresh; // 刷新标识
+    let val = "";
+    let data: any = this.control!.formControl!.value;
+    let option: any;
+    let options: any[];
+    let context: any[];
+    const controlAttr: DesFormControl = this.controlAttr as DesFormControl;
+    switch (this.control!.code) {
+      case FormFieldType.Input.code:
+        if (controlAttr.bindingPrefix) {
+          val += controlAttr.bindingPrefix;
+        }
+        val += data || "";
+        if (controlAttr.bindingSuffix) {
+          val += controlAttr.bindingSuffix;
+        }
+        data = val;
+        break;
+      case FormFieldType.InputNumber.code:
+        if (this.numberFormatter) {
+          data = this.numberFormatter(data);
+        }
+        // 自动补0
+        if (data && controlAttr.decimalPlaces != undefined && (controlAttr.decimalPlaces as any) !== "") {
+          let index;
+          if (data.indexOf(".") == -1) {
+            index = controlAttr.decimalPlaces;
+            data += ".";
+          } else {
+            index = controlAttr.decimalPlaces - (data.length - 1 - data.indexOf("."));
+          }
+          for (let i = 0; i < index; i++) {
+            data += "0";
+          }
+
+          if (controlAttr.zoomType !== ZoomType.automatic.code && data != null && data != "" && controlAttr.unit) {
+            data = data.replace(controlAttr.unit, "");
+            data = `${data}${controlAttr.unit}`;
+          }
+        }
+        return data;
+      case FormFieldType.Select.code:
+      case FormFieldType.Radio.code:
+        if (data != null && Array.isArray(data)) {
+          const context: string[] = [];
+          this.options.find((item) => {
+            for (let i = 0; i < data.length; i++) {
+              if (item.value === data[i]) {
+                context.push(item.title);
+              }
+            }
+          });
+          return context.join("，");
+        } else {
+          const option = this.options.find((item) => item.value === data);
+          return option ? option.title : "";
+        }
+      case FormFieldType.Checkbox.code:
+        options = data || [];
+        context = [];
+        options.forEach((it) => {
+          this.options.find((item) => {
+            if (item.value === it) {
+              context.push(item.title);
+            }
+          });
+        });
+        return context.join(" , ");
+      case FormFieldType.Switch.code:
+        if (data !== undefined) {
+          if (data === true && controlAttr.onOpeningValue != undefined && controlAttr.onOpeningValue !== "") {
+            return controlAttr.onOpeningValue;
+          } else if (data === false && controlAttr.whenClosedValue != undefined && controlAttr.whenClosedValue !== "") {
+            return controlAttr.whenClosedValue;
+          } else {
+            return data ? "是" : "否";
+          }
+        }
+        return "";
+      case FormFieldType.TimePicker.code:
+        if (data != null) {
+          return moment(data).format(controlAttr.timeFormat || "HH:mm:ss");
+        }
+        return "";
+      case FormFieldType.DatePicker.code:
+        if (data != null) {
+          return moment(data).format("LL");
+        }
+        return "";
+      case FormFieldType.Cascader.code:
+        if (data != null) {
+          return this.cascaderContextRecursion(data, this.cascaderOptions);
+        }
+        return "";
+      case FormFieldType.TreeSelect.code:
+        if (data != null) {
+          return this.treeSelectContextRecursion(data, this.treeSelectOptions);
+        }
+        return "";
+      case FormFieldType.Custom.code:
+        if (this.customFormats && this.customFormats[controlAttr.customFieldName]) {
+          const customFormat: CustomFormat = this.customFormats[controlAttr.customFieldName];
+          if (customFormat && customFormat.display) {
+            return customFormat.display(data, controlAttr);
+          }
+        }
+    }
+    return data;
+  }
+
+  /**
+   * @description: 支持的上传类型
+   * @author ChenRui
+   * @date 2021/4/25 11:50
+   */
+  get uploadType(): any {
+    const controlAttr = this.controlAttr as DesFormControl;
+    if (controlAttr.supportUploadType === SupportUploadType.Arbitrarily.code) {
+      return undefined;
+    } else if (controlAttr.supportUploadType === SupportUploadType.Custom.code) {
+      return controlAttr.customUploadType;
+    }
+    return undefined;
+  }
+
+  /**
+   * @description: 下拉选项新增
+   * @author ChenRui
+   * @date 2021/1/14 20:05
+   */
+  selectAddItem(event: any): void {
+    this.$emit("add-item", event);
+    /*const controlAttr: DesFormControl = this.controlAttr as DesFormControl;
+    if (controlAttr != null) {
+      if (controlAttr.isOptionType === OptionType.Fixed.code) {
+        console.log(controlAttr.optionConfig);
+      } else if (controlAttr.isOptionType === OptionType.Dynamic.code) {
+        if (controlAttr.dynamicOptionType === DynamicOptionType.GeneralDictionary.code) {
+          console.log(controlAttr.generalDictionaryOptions);
+        }
+      }
+    }*/
+  }
+
+  /**
+   * @description: 级联搜索
+   * @author ChenRui
+   * @date 2021/5/19 17:23
+   */
+  cascaderFilter(inputValue: any, path: any): any {
+    return path.some((option: any) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+  }
+
+  /**
+   * @description: 递归生成树形下拉选项
+   * @author ChenRui
+   * @date 2021/1/5 16:44
+   */
+  treeSelectRecursion(items: any[]): any[] {
+    const options: any[] = [];
+    items.forEach((item) => {
+      item.disabled = false;
+      item.key = item.value;
+      if (item.children && item.children.length > 0) {
+        this.treeSelectRecursion(item.children);
+      }
+    });
+    return options;
+  }
+
+  /**
+   * @description: 级联递归
+   * @author ChenRui
+   * @date 2021/1/5 16:35
+   */
+  cascaderRecursion(items: any[]): any[] {
+    const options: any[] = [];
+    items.forEach((item) => {
+      const option: any = {
+        value: item.value,
+        label: item.title,
+        isLeaf: false,
+      };
+      options.push(option);
+      if (item.children && item.children.length > 0) {
+        option.children = this.cascaderRecursion(item.children);
+      } else {
+        option.isLeaf = true;
+      }
+    });
+    return options;
+  }
+
+  /**
+   * @description: 递归获取级联选项对应的文本
+   * @author ChenRui
+   * @date 2021/1/8 14:45
+   */
+  cascaderContextRecursion(val: any[], cascaderOptions: any[], index = 0): string {
+    if (val && val.length > 0 && cascaderOptions && cascaderOptions.length > 0) {
+      if (val.length > index) {
+        const currentIndex = val[index];
+        const cascaderOption = cascaderOptions.find((item) => item.value === currentIndex);
+        if (cascaderOption != null) {
+          let currentText = cascaderOption.label;
+          if (val.length > index + 1) {
+            const subText = this.cascaderContextRecursion(val, cascaderOption.children, index + 1);
+            currentText += " / " + subText;
+          }
+          return currentText;
+        }
+      }
+    }
+    return "";
+  }
+
+  /**
+   * @description:
+   * @author ChenRui
+   * @date 2021/1/8 15:05
+   */
+
+  treeSelectContextRecursion(val: string, treeSelectOptions: any[]): string {
+    if (val && treeSelectOptions && treeSelectOptions.length > 0) {
+      for (let i = 0; i < treeSelectOptions.length; i++) {
+        if (treeSelectOptions[i].value === val) {
+          return treeSelectOptions[i].title;
+        } else if (treeSelectOptions[i].children && treeSelectOptions[i].children.length > 0) {
+          const subTitle: string = this.treeSelectContextRecursion(val, treeSelectOptions[i].children);
+          if (subTitle) {
+            return subTitle;
+          }
+        }
+      }
+    }
+    return "";
+  }
+
+  /**
+   * @description: 是否为ie
+   * @author ChenRui
+   * @date 2021/3/25 14:44
+   */
+  get isIe(): boolean {
+    return !!this.provideInjectData.widthCompatibleMode || !!window.ActiveXObject || "ActiveXObject" in window;
+  }
+
+  /**
+   * @description: ie 兼容性宽度布局
+   * @author ChenRui
+   * @date 2021/3/25 12:53
+   */
+  get divWidthCompatibleToIe(): any {
+    if (this.isIe) {
+      const desFormLayout: DesFormLayout = this.parentControlAttr as DesFormLayout;
+      const configIndex: number = this.index! % desFormLayout.gridColumnConfig.length; // 索引位置
+      const proportion: number = desFormLayout.gridColumnConfig[configIndex].value; // 比重
+      let total = 0; // 总值
+      desFormLayout.gridColumnConfig.forEach((item: any) => {
+        total += Number(item.value);
+      });
+      const ratio = proportion / total; // 比值
+      const val = Number(ratio) * 100;
+      return `calc( ${val}% - 1px)`;
+    } else {
+      return "100%";
+    }
+  }
+
+  /**
+   * @description: 根节点容器布局样式
+   * @author ChenRui
+   * @date 2021/3/25 14:52
+   */
+  get emptyLayoutContainerStyle(): any {
+    let style: any = {};
+    if (this.isIe) {
+      style = { display: "flex", "flex-wrap": "wrap" };
+    } else {
+      const gridTemplateColumns: any = generateGridTemplateColumns((this.control?.controlAttr as DesFormLayout)?.gridColumnConfig);
+      style = { "grid-template-columns": gridTemplateColumns };
+    }
+    return style;
+  }
+
+  /**
+   * @description: 常规布局容器样式
+   * @author ChenRui
+   * @date 2021/3/25 14:42
+   */
+  get generalLayoutContainerStyle(): any {
+    let style: any = {};
+    if (this.isIe) {
+      style = { display: "flex", "flex-wrap": "wrap" };
+    } else {
+      const gridColumnEnd: any = generateGridColumnEnd((this.parentControl?.controlAttr as DesFormLayout)?.gridColumnConfig);
+      const gridTemplateColumns: any = generateGridTemplateColumns((this.control?.controlAttr as DesFormLayout)?.gridColumnConfig);
+      style = {
+        "grid-column-end": gridColumnEnd,
+        "grid-template-columns": gridTemplateColumns,
+      };
+    }
+    return style;
+  }
+
+  /**
+   * @description: 初始化部分数据
+   * @author ChenRui
+   * @date 2021/1/29 15:28
+   */
+  initFormControlData(): void {
+    if (this.control && this.control.formControl) {
+      if (this.control!.code === FormFieldType.DatePicker.code || this.control!.code === FormFieldType.TimePicker.code) {
+        if (this.control.formControl.value) {
+          if (typeof this.control.formControl.value === "string") {
+            this.control.formControl.value = this.momentUtil(new Date(this.control.formControl.value));
+          } else if (this.control.formControl.value instanceof Date) {
+            this.control.formControl.value = this.momentUtil(this.control.formControl.value);
+          }
+        }
+      }
+      if (this.control.formControl.textNoticeCallback == null) {
+        this.control.formControl.textNoticeCallback = (event: any) => {
+          return this.formatData;
+        };
+      }
+      const controlAttr: DesFormControl = this.controlAttr as DesFormControl;
+      if (controlAttr.maxValue == null || (controlAttr.maxValue as any) === "") {
+        const maxValue = "9999999999999999";
+        if (controlAttr.decimalPlaces != undefined && (controlAttr.decimalPlaces as any) !== "" && controlAttr.decimalPlaces > 0) {
+          if (controlAttr.decimalPlaces > 16) {
+            controlAttr.decimalPlaces = 16;
+          }
+          controlAttr.maxValue = Number(maxValue.slice(0, maxValue.length - controlAttr.decimalPlaces) + "." + maxValue.slice(maxValue.length - controlAttr.decimalPlaces, maxValue.length));
+        } else {
+          controlAttr.maxValue = Number(maxValue);
+        }
+      }
+    }
+  }
+
+  /**
+   * @description: 业务属性
+   * @author ChenRui
+   * @date 2021/2/1 14:38
+   */
+  get busAttr(): any {
+    const controlAttr: DesFormControl = this.controlAttr as DesFormControl;
+    let busAttr: any;
+    let attrSubmittedType: any[] = [];
+    if (controlAttr.busAttr) {
+      busAttr = formBeanUtilsService.parse(controlAttr.busAttr);
+      if (busAttr[FormBusAttr.SUBMITTED_TYPE.code]) {
+        attrSubmittedType = busAttr[FormBusAttr.SUBMITTED_TYPE.code].split(",").filter((item: any) => !!item);
+      }
+    }
+    const submittedType: any[] = Object.values(SubmittedType).map((val: any) => ({ label: val.name, value: val.code }));
+    const submittedTypeCheckedNode: any[] = [];
+    submittedType.forEach((item) => {
+      if (attrSubmittedType.findIndex((it) => it === item.value) > -1) {
+        submittedTypeCheckedNode.push(item);
+      }
+    });
+    return {
+      [FormBusAttr.SUBMITTED_TYPE.code]: submittedTypeCheckedNode,
+      [FormBusAttr.IS_SUPPLEMENT.code]: busAttr ? busAttr[FormBusAttr.IS_SUPPLEMENT.code] : false,
+      [FormBusAttr.IS_KEY_ELEMENTS.code]: busAttr ? busAttr[FormBusAttr.IS_KEY_ELEMENTS.code] : false,
+      [FormBusAttr.IS_TRACK.code]: busAttr ? busAttr[FormBusAttr.IS_TRACK.code] : false,
+    };
+  }
+
+  /**
+   * @description: 报送类型
+   * @author ChenRui
+   * @date 2021/2/1 15:05
+   */
+  get submittedType(): any[] {
+    if (this.busAttr && this.busAttr[FormBusAttr.SUBMITTED_TYPE.code].length > 0) {
+      return this.busAttr[FormBusAttr.SUBMITTED_TYPE.code];
+    }
+    return [];
+  }
+
+  /**
+   * @description: 报送类型字符串
+   * @author ChenRui
+   * @date 2021/2/1 15:08
+   */
+  get submittedTypeStr(): string {
+    return this.submittedType.map((item) => item.label).join("、");
+  }
+
+  /**
+   * @description: 清除特殊字符
+   * @author ChenRui
+   * @date 2021/6/22 15:41
+   */
+  private clearNoNum(value: any) {
+    if (value) {
+      value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
+      value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
+      value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
+      // eslint-disable-next-line no-useless-escape
+      value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
+      if (value.indexOf(".") < 0 && value != "") {
+        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
+        value = parseFloat(value);
+      }
+    }
+    return value;
+  }
+
+  /**
+   * @description: 校验数字是否超过16位纯编码
+   * @author ChenRui
+   * @date 2021/6/22 14:58
+   */
+  private validateNumBeyondLimit(value: any): boolean {
+    if (value) {
+      const pureNumber: string = value.replace(/[^0-9]/gi, "");
+      return pureNumber.length > 16;
+    }
+    return false;
+  }
+
+  /**
+   * @description: 删除文件
+   * @author ChenRui
+   * @date 2021/4/25 11:35
+   */
+  handleRemove(file: any): void {
+    const index = this.formControl.value.indexOf(file);
+    const newFileList = this.formControl.value.slice();
+    newFileList.splice(index, 1);
+    this.formControl.value = newFileList;
+  }
+
+  /**
+   * @description: 文件上传前回调函数
+   * @author ChenRui
+   * @date 2021/4/25 11:23
+   */
+  beforeUpload(file: any): boolean {
+    const fileList: any[] = [...this.formControl.value, file];
+    this.formControl.value = fileList;
+    return false;
+  }
+
+  /**
+   * @description: 文件上传变更
+   * @author ChenRui
+   * @date 2021/4/25 11:29
+   */
+  handleUploadChange(event: any): any {
+    let fileList: any[] = [...this.formControl.value];
+    const controlAttr: DesFormControl = this.controlAttr as DesFormControl;
+    if (controlAttr.maxUploadNumber && controlAttr.maxUploadNumber > 0) {
+      fileList = fileList.slice(0 - Number(controlAttr.maxUploadNumber));
+    }
+    fileList = fileList.map((file) => {
+      if (file.response) {
+        file.url = file.response.url;
+      }
+      return file;
+    });
+    this.formControl.value = fileList;
+    if (event && event.file && (event.file.status === undefined || event.file.status === "removed")) {
+      this.onChange(this.control!);
+    }
+  }
+
+  /**
+   * @description: 金额菜单单机事件
+   * @author ChenRui
+   * @date 2021/2/20 17:21
+   */
+  handleMoneyUnitMenuClick(e: any): void {
+    this.defaultMoneyUnit = this.moneyUnits.find((item) => item.code === e.key);
+  }
+
+  /**
+   * @description: 输入事件处理
+   * @author ChenRui
+   * @date 2020/12/2 14:37
+   */
+  onChange(event: Control): void {
+    if (this.control && (this.control.type === FormFieldClass.Base.code || this.control.type === FormFieldClass.Senior.code)) {
+      this.validateResult = this.formControl.validate(event.formControl?.value);
+    }
+    this.$emit("change", event);
+  }
+
+  /**
+   * @description: 点击事件
+   * @author ChenRui
+   * @date 2021/3/4 11:37
+   */
+  onClick(event: Control): void {
+    this.$emit("click", event);
+  }
+
+  /**
+   * @description: 内置前置标签事件
+   * @author ChenRui
+   * @date 2021/4/23 9:42
+   */
+  onAddonBeforeHandler(event: any): void {
+    this.$emit("addon-before", event);
+  }
+
+  /**
+   * @description: 内置后置标签事件
+   * @author ChenRui
+   * @date 2021/4/23 9:43
+   */
+  onAddonAfterHandler(event: any): void {
+    this.$emit("addon-after", event);
+  }
+
+  /**
+   * @description: 数字框失焦点
+   * @author ChenRui
+   * @date 2021/3/4 11:51
+   */
+  onInputNumberFocus(event: Control): void {
+    this.onFocus(event);
+    if ((this.controlAttr as DesFormControl).isShowCapitalization) {
+      this.numberPopoverVisible = true;
+    }
+  }
+
+  /**
+   * @description: 数字输入框失焦
+   * @author ChenRui
+   * @date 2021/3/4 11:43
+   */
+  onInputNumberBlur(event: Control): void {
+    this.onBlur(event);
+    if ((this.controlAttr as DesFormControl).isShowCapitalization) {
+      this.numberPopoverVisible = false;
+    }
+  }
+
+  /**
+   * @description: 获取焦点
+   * @author ChenRui
+   * @date 2021/3/4 11:46
+   */
+  onFocus(event: Control): void {
+    this.$emit("focus", event);
+  }
+
+  /**
+   * @description: 失焦事件
+   * @author ChenRui
+   * @date 2021/3/4 11:38
+   */
+  onBlur(event: Control): void {
+    this.$emit("blur", event);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.w-100 {
+  width: 100%;
+}
+.h-100 {
+  height: 100%;
+}
+.lo-fw {
+  font-weight: 600;
+}
+.ant-form-horizontal {
+  .lo-control-container {
+    .lo-control-box {
+      .ant-form-item {
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+        ::v-deep {
+          .ant-form-item-label {
+            border-right: 1px solid #e4e4e4;
+            background-color: #f5f7fa;
+            label {
+              display: block;
+              white-space: pre-wrap;
+              word-break: break-all;
+              line-height: normal;
+              padding: 8px 0;
+            }
+          }
+          .ant-form-item-control {
+            padding: 5px 5px;
+            .ant-form-item-control-input {
+              .ant-form-item-control-input-content {
+                textarea {
+                  margin-top: 4px;
+                }
+              }
+            }
+          }
+          .ant-input,
+          .ant-select-selector,
+          .ant-btn,
+          .ant-input-number {
+            border-radius: 5px;
+          }
+        }
+      }
+    }
+  }
+}
+.ant-form-vertical {
+  .lo-control-container {
+    .lo-control-box {
+      .ant-form-item {
+        padding-bottom: 0;
+        ::v-deep {
+          .ant-form-item-label {
+            padding: 8px;
+          }
+          .ant-form-item-control-wrapper {
+            padding: 0 5px 5px 5px;
+          }
+        }
+      }
+    }
+  }
+}
+.lo-control-container {
+  box-sizing: border-box;
+  border: 1px solid #e4e4e4;
+  .lo-control-box {
+    height: 100%;
+    .ant-form-item {
+      margin-bottom: 0;
+      .lo-select {
+        ::v-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 {
+          ::v-deep {
+            .ant-select-arrow {
+              margin: 0;
+              height: 100%;
+              top: 0;
+              right: 0;
+              .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;
+        ::v-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: 13px;
+      }
+      .lo-label-tips-icon {
+        color: #2858d6;
+        cursor: pointer;
+        font-size: 13px;
+        margin-left: 4px;
+      }
+      ::v-deep {
+        .ant-form-item-label {
+          label {
+            color: #77797f;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+          }
+        }
+        .ant-form-item-control-wrapper {
+          flex-grow: 1;
+          color: #333333;
+        }
+      }
+      .addon-icon {
+        font-size: 15px;
+        cursor: pointer;
+      }
+    }
+    .lo-textarea-count {
+      position: absolute;
+      line-height: 10px;
+      right: 0;
+      color: rgba(0, 0, 0, 0.45);
+    }
+    .lo-input-number-box {
+      ::v-deep {
+        .ant-input-number {
+          width: 100%;
+        }
+      }
+      &.lo-with-unit {
+        ::v-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 {
+          ::v-deep {
+            .ant-input-number {
+              width: calc(100% - 50px);
+            }
+            .ant-dropdown-trigger {
+              min-width: 50px;
+            }
+          }
+        }
+        &.lo-unit-2 {
+          ::v-deep {
+            .ant-input-number {
+              width: calc(100% - 80px);
+            }
+            .ant-dropdown-trigger {
+              min-width: 80px;
+            }
+          }
+        }
+        &.lo-unit-3 {
+          ::v-deep {
+            .ant-input-number {
+              width: calc(100% - 110px);
+            }
+            .ant-dropdown-trigger {
+              min-width: 110px;
+            }
+          }
+        }
+      }
+    }
+    .lo-control-text {
+      white-space: pre-wrap;
+      word-break: break-all;
+      line-height: 22px;
+      padding: 8px;
+      color: #333333;
+      font-size: 14px;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+    }
+  }
+}
+.lo-empty-layout-container {
+  box-sizing: border-box;
+  display: grid;
+}
+.lo-general-layout-container {
+  box-sizing: border-box;
+  display: grid;
+  grid-column-start: 1;
+}
+</style>