@dhccmobile/vue3-lo-form 2.0.0 → 2.0.1

package/src/App.vue

@@ -1,741 +1,741 @@
-<template>
-  <div class="lo-container" ref="scrollView">
-    <div class="lo-content">
-      <div class="lo-title">form API测试</div>
-      <div class="lo-ins">
-        <div class="lo-api">
-          <div class="lo-api-item">
-            <div class="lo-item-title">编辑模式:</div>
-            <div class="lo-item-opts">
-              <a-switch v-model:checked="formApi.edit" checked-children="开" un-checked-children="关" />
-            </div>
-          </div>
-        </div>
-        <div class="lo-api">
-          <div class="lo-api-item">
-            <div class="lo-item-title">控件对象key值:</div>
-            <div class="lo-item-opts">
-              <a-input v-model:value="controlKey" placeholder="请输入控件key值" />
-            </div>
-          </div>
-          <div class="lo-api-item">
-            <div class="lo-item-title">目标属性:</div>
-            <div class="lo-item-opts">
-              <a-select v-model:value="controlAttr" show-search :filter-option="filterOption" style="width: 150px">
-                <a-select-option :value="''">请选择</a-select-option>
-                <a-select-option v-for="(propName, i) of Object.keys(attribute)" :value="attribute[propName]" :key="i" placeholder="属性名称">
-                  {{ propName }}
-                </a-select-option>
-              </a-select>
-            </div>
-          </div>
-          <div class="lo-api-item">
-            <div class="lo-item-title">设置值:</div>
-            <div class="lo-item-opts">
-              <a-input v-model:value="controlvalue" placeholder="相关值" />
-            </div>
-          </div>
-          <div class="lo-api-item">
-            <div class="lo-item-title">读操作:</div>
-            <div class="lo-item-opts">
-              <a-button type="primary" class="ml-5" @click="getControl()">获取控件对象</a-button>
-              <a-button type="primary" class="ml-5" @click="getControlEl()">获取控件dom对象</a-button>
-              <a-button type="primary" class="ml-5" @click="getValue()">获取值</a-button>
-              <a-button type="primary" class="ml-5" @click="getText()">获取文本</a-button>
-              <a-button type="primary" class="ml-5" @click="getOptions()">获取可选项</a-button>
-              <a-button type="primary" class="ml-5" @click="getValidate()">获取校验</a-button>
-              <a-button type="primary" class="ml-5" @click="removeValidate()">移除校验</a-button>
-              <a-button type="primary" class="ml-5" @click="getValidates()">获取校验集合</a-button>
-              <a-button type="primary" class="ml-5" @click="refreshValidate()">校验指定控件</a-button>
-              <a-button type="primary" class="ml-5" @click="validateReport()">校验表单</a-button>
-              <a-button type="primary" class="ml-5" @click="validateTips()">校验表单并弹出提示</a-button>
-            </div>
-          </div>
-        </div>
-        <div class="lo-api">
-          <div class="lo-api-item">
-            <div class="lo-item-title">写操作:</div>
-            <div class="lo-item-opts">
-              <a-button type="primary" class="ml-5" @click="setValue()">设置值</a-button>
-              <a-button type="primary" class="ml-5" @click="setOptions()">设置可选项</a-button>
-              <a-button type="primary" class="ml-5" @click="setAttribute()">设置常规属性</a-button>
-              <a-button type="primary" class="ml-5" @click="setValidate()">设置校验</a-button>
-              <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
-              <a-button type="primary" class="ml-5" @click="setFormData()">赋值整个表单</a-button>
-              <a-button type="primary" class="ml-5" @click="setFormOldData()">赋值整个表单-新旧值对比</a-button>
-              <a-button type="primary" class="ml-5" @click="resetValue()">重置整个表单</a-button>
-              <a-button type="primary" class="ml-5" @click="refreshAndUpdateData()">刷新与更新整个表单</a-button>
-              <a-button type="primary" class="ml-5" @click="resetFormValidateState()">重置表单校验状态</a-button>
-              <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
-              <a-button type="primary" class="ml-5" @click="setFieldChangeHistory()">设置变更历史</a-button>
-              <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
-              <a-button type="primary" class="ml-5" @click="setAutoCompleteOptions()">设置自动完成数据</a-button>
-              <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
-              <a-button type="primary" class="ml-5" @click="setControl()">api方式新增控件对象</a-button>
-            </div>
-          </div>
-        </div>
-        <div class="lo-api">
-          <div class="lo-api-item">
-            <div class="lo-item-title">写操作:</div>
-            <div class="lo-item-opts">
-              <a-button type="primary" class="ml-5" @click="getAttribute()">获取常规属性</a-button>
-              <a-button type="primary" class="ml-5" @click="setAttribute()">设置常规属性</a-button>
-            </div>
-          </div>
-        </div>
-        <div class="lo-api">
-          <div class="lo-api-item">
-            <div class="lo-item-title">自定义类型:</div>
-            <div class="lo-item-opts">
-              <a-input v-model:value="controlCustomType" placeholder="相关值" />
-            </div>
-          </div>
-          <div class="lo-api-item">
-            <div class="lo-item-title">操作:</div>
-            <div class="lo-item-opts">
-              <a-button type="primary" class="ml-5" @click="setFormatDisplayAndOutput()">设置自定义控件格式化显示和输出</a-button>
-              |
-              <a-button type="primary" class="ml-5" @click="submit()">提交表单显示</a-button>
-            </div>
-          </div>
-        </div>
-        <div class="lo-input">
-          <!--styleMode="credit-rd" :formId="'773549593606574080'"-->
-          <dy-form v-if="showForm" :formId="'995416144285929472'" 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" />
-                <!--                <a-input-number style="flex-grow: 1" v-model="control.formControl.value" :min="1" :max="100" @change="onChange(control)" />
-                  <a-select style="flex-basis: 100px; max-width: 100px">
-                    <a-select-option value="jack"> Jack </a-select-option>
-                    <a-select-option value="lucy"> Lucy </a-select-option>
-                  </a-select>-->
-              </div>
-            </template>
-            <!--<template v-slot:input:prefix:testx1-1>￥</template>
-              <template v-slot:input:suffix:testx1-1>RMB</template>
-              <template v-slot:input:addonBefore:testx1-1>https://</template>
-              <template v-slot:input:addonAfter:testx1-1>.cn</template>
-              <template v-slot:select:suffixIcon:testx1-1-1>哇哈哈</template>-->
-            <!--<template v-slot:select:suffixIcon:testx1-1-1>哇哈哈</template>-->
-            <template v-slot:select:suffixIcon:productName>
-              <div class="lo-multiple-select-suffix-icon" @click="handleMultiChoiceEmbeddedCustomization">
-                <img :src="dropDownListSvg" />
-              </div>
-            </template>
-          </dy-form>
-        </div>
-        <div class="lo-value">
-          <span class="lo-title">输出: {{ formApi.formData }}</span>
-        </div>
-        <div>
-          <pre>
-              {{ dictionaryFormatCollection.sysDictTreeDetailOptions }}
-            </pre
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Ref } from "vue-property-decorator";
-import { FormRestfulResponse } from "./domain/FormRestfulResponse";
-import { Attribute, FormApi } from "./core/index";
-import DyForm from "./components/form/DvForm.vue";
-import { Switch, Button, Input, Select, InputNumber } from "ant-design-vue";
-import { Control, CustomFormat, DesForm, DesFormControl, FieldChangeHistory, FormControl, Validate, ValidateReport } from "./domain/index";
-import { ValidateRules, ValidateStatus } from "./constants/enum/index";
-import { DROP_DOWN_LIST_SVG_XML } from "./constants/encode-assets/svg";
-import { formTemplate } from "./constants/config/form-template.config";
-import { DictionaryFormatCollection, formToolsService } from "./services/form-tools.service";
-import { Options, Vue } from "vue-property-decorator";
-@Options({
-  name: "vf-app",
-  components: {
-    DyForm,
-    [Switch.name]: Switch,
-    [Button.name]: Button,
-    [Input.name]: Input,
-    [InputNumber.name]: InputNumber,
-    [Select.name]: Select,
-    [Select.Option.displayName + ""]: Select.Option,
-    [Select.OptGroup.displayName + ""]: Select.OptGroup,
-  },
-})
-export default class App extends Vue {
-  @Ref() scrollView: any;
-  dropDownListSvg = DROP_DOWN_LIST_SVG_XML;
-  showForm = false;
-  controlKey = "productName";
-  controlvalue = "productName";
-  controlCustomType = "combinationSelector";
-  controlAttr: Attribute | any = "";
-  attribute = Attribute;
-  srcDesForm: DesForm | undefined;
-  fieldChangeHistory: FieldChangeHistory = {
-    productName: [
-      { time: "2021-09-08", before: "玖龙", after: "玲珑", author: "爱笑笑" },
-      { time: "2021-09-09", before: "玲珑", after: "黑珑", author: "爱笑笑" },
-      { time: "2021-09-11", before: "玖龙", after: "玲珑", author: "爱笑笑" },
-      { time: "2021-09-12", before: "玲珑", after: "黑珑", author: "爱笑笑" },
-      { time: "2021-09-13", before: "玖龙", after: "玲珑", author: "爱笑笑" },
-      { time: "2021-09-14", before: "玲珑", after: "黑珑", author: "爱笑笑" },
-      { time: "2021-09-17", before: "玖龙", after: "玲珑", author: "爱笑笑" },
-      { time: "2021-09-16", before: "玲珑", after: "黑珑", author: "爱笑笑" },
-    ],
-  };
-  formApi: FormApi = new FormApi({
-    edit: true,
-  });
-  dictionaryFormatCollection: DictionaryFormatCollection = {
-    sysDictDetailOptions: [],
-    sysDictTreeDetailOptions: [],
-  };
-  mounted(): void {
-    const desForm: DesForm | any = formTemplate;
-    desForm.desFormLayouts[0].desFormControls.push({
-      formFieldId: "1",
-      layoutId: "1",
-      boundProperty: "xx.applyId",
-      extendBoundPropertyOne: "",
-      extendBoundPropertyTwo: "",
-      formFieldDescribe: "申请编号",
-      controlType: "1",
-      tableFieldOrder: 1,
-      fieldDefaultValue: '""',
-      titleWidth: "",
-      isBoldTitle: "0",
-      isHideTitle: "0",
-      titleColor: "",
-      placeholder: "",
-      tips: "",
-      isNotEdit: "0",
-      bindingPrefix: "",
-      bindingSuffix: "",
-      builtInFrontLabel: "",
-      builtInPostLabel: "",
-      isHideControl: "0",
-      controlWidth: "",
-      isPasswordBox: "0",
-      initRowHeight: null,
-      isFixedRowHeight: "0",
-      formatType: "1",
-      minValue: null,
-      maxValue: null,
-      step: null,
-      decimalPlaces: null,
-      thousandthPercentileFormat: "0",
-      unit: "",
-      moneyUnit: "[]",
-      defineOptionalUnits: "",
-      defineOptionalUnitsDefault: "",
-      zoomType: "",
-      zoomMultiple: null,
-      isShowCapitalization: "0",
-      isLineFeedDisplay: "0",
-      isOptionType: "2",
-      optionConfig: "",
-      dynamicOptionType: "1",
-      generalDictionary: "",
-      generalDictionaryOptions: "",
-      treeShape: "",
-      treeShapeOptions: "",
-      disableNonLeafNodes: "0",
-      dateFormat: "YYYY-MM-DD",
-      timeFormat: "HH:mm:ss",
-      isSupportMultiple: "0",
-      maxUploadNumber: null,
-      limitSize: null,
-      supportUploadType: "1",
-      extendUploadType: "",
-      customUploadType: "",
-      attachmentExtendProperties: "",
-      isMultipleChoice: "0",
-      isSearchable: "0",
-      canAddEntry: "0",
-      isClearButton: "0",
-      onOpeningValue: "",
-      whenClosedValue: "",
-      onOpeningText: "",
-      whenClosedText: "",
-      customFieldName: "",
-      verificationRules: "[]",
-      busAttr: '{"submittedType":"","isSupplement":false,"isKeyElements":false,"isTrack":false}',
-    });
-    this.srcDesForm = formToolsService.formatDesForm(desForm);
-    this.$formToolsService.init().then((res: FormRestfulResponse) => {
-      this.showForm = true;
-      // this.formApi.setAttribute("testx1-1-1", Attribute.TextFold, true);
-      // this.formApi.setAttribute("testx1-1-1", Attribute.HiddenDropdown, true);
-    });
-    // this.dictLocalcConvert();
-  }
-
-  created() {}
-
-  onChange(e: any): void {
-    if (e instanceof FormControl) {
-      e.formControl = e;
-    }
-    const paymentType = this.formApi.getValue("productName");
-    const comId = this.formApi.getValue("comId");
-    if (e.formControl && e.formControl.key === "productName") {
-      // this.formApi.setAttribute("productId", Attribute.IsHideControl, paymentType === "2");
-      this.formApi.setRequiredValidate("productCode", paymentType === "2");
-    } else if (e.formControl && e.formControl.key === "comId") {
-      this.formApi.setAttribute("productId", Attribute.IsHideControl, comId);
-    }
-    console.log(e);
-  }
-
-  onClick(e: any): void {
-    /*console.log(e);*/
-  }
-
-  onFocus(e: any): void {
-    /*console.log(e);*/
-  }
-
-  onBlur(e: any): void {
-    /*console.log(e);*/
-  }
-
-  /**
-   * @description: 内置前置标签事件
-   * @author ChenRui
-   * @date 2021/4/23 9:42
-   */
-  onAddonBeforeHandler(event: any): void {
-    console.log("AddonBefore", event);
-  }
-
-  /**
-   * @description: 内置后置标签事件
-   * @author ChenRui
-   * @date 2021/4/23 9:43
-   */
-  onAddonAfterHandler(event: any): void {
-    console.log("AddonAfter", event);
-  }
-
-  selectAddItem(e: any): void {
-    /*console.log(e);*/
-  }
-
-  filterOption(input: any, option: any) {
-    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-  }
-
-  /**
-   * @description: 获取监控对象
-   * @author ChenRui
-   * @date 2021/1/29 10:05
-   */
-  getControl(): void {
-    const control: Control = this.formApi.getControl(this.controlKey);
-    /*const it: IterableIterator<any> = this.formApi.encodedFormData;
-        let val = it.next().value;
-        while (val) {
-          console.log(val);
-          val = it.next().value;
-        }*/
-    console.log("控件对象:", control);
-  }
-
-  /**
-   * @description: 获取值
-   * @author ChenRui
-   * @date 2021/1/29 14:58
-   */
-  getValue(): void {
-    const val: any = this.formApi.getValue(this.controlKey);
-    console.log("控件值:", val);
-  }
-
-  /**
-   * @description: 设置值
-   * @author ChenRui
-   * @date 2021/1/29 16:37
-   */
-  setValue(): void {
-    this.formApi.setValue(this.controlKey, this.controlvalue);
-  }
-
-  /**
-   * @description: 重置数据
-   * @author ChenRui
-   * @date 2021/2/22 17:40
-   */
-  resetValue(): void {
-    this.formApi.resetValue();
-  }
-
-  /**
-   * @description: 刷新整个表单
-   * @author ChenRui
-   * @date 2022/4/6 11:24
-   */
-  refreshAndUpdateData(): void {
-    this.formApi.refreshAndUpdateData();
-  }
-
-  /**
-   * @description: 重置表单校验状态
-   * @author ChenRui
-   * @date 2022/4/6 12:04
-   */
-  resetFormValidateState(): void {
-    this.formApi.resetFormValidateState();
-  }
-
-  /**
-   * @description: 新增控件对象
-   * @author ChenRui
-   * @date 2021/8/27 11:19
-   */
-  setControl(): void {
-    // const control: Control = this.formApi.setControl(this.controlKey);
-  }
-
-  /**
-   * @description: 设置字段变更历史
-   * @author ChenRui
-   * @date 2021/4/25 16:36
-   */
-  setFieldChangeHistory(): void {
-    this.formApi.setFieldChangeHistory(this.fieldChangeHistory);
-  }
-
-  /**
-   * @description: 设置自动完成数据
-   * @author ChenRui
-   * @date 2022/5/7 18:16
-   */
-  setAutoCompleteOptions(): void {
-    this.formApi.setAttribute(this.controlKey, Attribute.AutoCompleteOptions, ["张三"]);
-  }
-
-  /**
-   * @description: 获取文本
-   * @author ChenRui
-   * @date 2021/1/29 15:14
-   */
-  getText(): void {
-    const text: any = this.formApi.getText(this.controlKey);
-    console.log("文本:", text);
-  }
-
-  /**
-   * @description: 获取可选项
-   * @author ChenRui
-   * @date 2021/1/29 16:20
-   */
-  getOptions(): void {
-    const options: any[] = this.formApi.getOptions(this.controlKey);
-    console.log("可选项:", options);
-  }
-
-  /**
-   * @description: 设置可选项
-   * @author ChenRui
-   * @date 2021/1/29 16:21
-   */
-  setOptions(): void {
-    const data: any[] = [
-      { value: "1", title: "张三" },
-      { value: "2", title: "李四" },
-      { value: "3", title: "王五" },
-      { value: "4", title: "赵六" },
-      { value: "5", title: "孙七" },
-      { value: "6", title: "周八" },
-      { value: "7", title: "吴九" },
-      { value: "8", title: "郑十" },
-    ];
-    this.formApi.setOptions(this.controlKey, data, "2");
-  }
-
-  /**
-   * @description: 设置常规属性
-   * @author ChenRui
-   * @date 2021/1/29 17:29
-   */
-  setAttribute(): void {
-    if (this.controlAttr) {
-      this.formApi.setAttribute(this.controlKey, this.controlAttr, this.controlvalue);
-    }
-  }
-
-  /**
-   * @description: 获取常规属性
-   * @author ChenRui
-   * @date 2021/1/29 18:11
-   */
-  getAttribute(): void {
-    if (this.controlAttr) {
-      const attr: any = this.formApi.getAttribute(this.controlKey, this.controlAttr);
-      console.log("属性值:", attr);
-    }
-  }
-
-  /**
-   * @description: 获取校验
-   * @author ChenRui
-   * @date 2021/1/30 11:49
-   */
-  getValidate(): void {
-    const validate: any = this.formApi.getValidate(this.controlKey, this.controlvalue);
-    console.log("字段校验结果:", validate);
-  }
-
-  /**
-   * @description: 获取校验集合
-   * @author ChenRui
-   * @date 2021/1/30 11:50
-   */
-  getValidates(): void {
-    const validates: any[] = this.formApi.getValidates(this.controlKey);
-    console.log("表单校验结果:", validates);
-  }
-
-  refreshValidate(): void {
-    this.formApi.refreshValidate(this.controlKey);
-  }
-
-  /**
-   * @description:
-   * @author ChenRui
-   * @date 2021/4/1 21:29
-   */
-  removeValidate(): void {
-    this.formApi.removeValidate(this.controlKey, ValidateRules.Required.code);
-  }
-
-  /**
-   * @description: 获取控件dom对象
-   * @author ChenRui
-   * @date 2021/2/26 17:16
-   */
-  getControlEl(): void {
-    const controlEl: any = this.formApi.getControlEl(this.controlKey);
-    console.log("控件选项:", controlEl);
-  }
-
-  /**
-   * @description: 获取校验报告
-   * @author ChenRui
-   * @date 2021/2/22 14:08
-   */
-  validateReport(): void {
-    const result: boolean = this.formApi.validate();
-    // this.formApi.setAttribute("testx1-1", Attribute.IsHideControl, true);
-    const validateResults: ValidateReport[] = this.formApi.validateReport();
-    console.log("校验结果:", validateResults);
-  }
-
-  /**
-   * @description: 校验表单并提示
-   * @author ChenRui
-   * @date 2021/8/18 17:38
-   */
-  validateTips(): void {
-    // this.$formToolsService.validateTips(this.formApi, this.scrollView);
-    // this.formApi.validateTips(this.scrollView);
-    this.formApi.validateTips(window);
-  }
-
-  /**
-   * @description: 设置校验
-   * @author ChenRui
-   * @date 2021/1/30 11:56
-   */
-  setValidate(): void {
-    const validates: Validate[] = [
-      {
-        name: "define",
-        validateFunc: (val: any) => {
-          if (val == null || val === "") {
-            return {
-              validateStatus: ValidateStatus.Error.code,
-              errorMsg: "空空空",
-            };
-          }
-          return {
-            validateStatus: ValidateStatus.Success.code,
-          };
-        },
-      },
-    ];
-    // this.formApi.setValidate(this.controlKey, validates);
-    this.formApi.setValidate("testx1-5-4", {
-      ruleType: ValidateRules.Required.code,
-    });
-  }
-
-  /**
-   * @description: 设置格式化显示与输出
-   * @author ChenRui
-   * @date 2021/2/4 19:55
-   */
-  setFormatDisplayAndOutput(): void {
-    const customFormat: CustomFormat = {
-      display: (val: any, desFormControl: DesFormControl) => {
-        return val + "$";
-      },
-      output: (val: any, desFormControl: DesFormControl) => {
-        return val + "$$";
-      },
-    };
-    this.formApi.setFormatDisplayAndOutput(this.controlCustomType, customFormat);
-  }
-
-  /**
-   * @description: 提交表单
-   * @author ChenRui
-   * @date 2021/11/15 22:44
-   */
-  submit(): void {
-    console.log(this.formApi.formData);
-    console.log(this.formApi.encodedFormData);
-  }
-
-  /**
-   * @description: 赋值整个表单
-   * @author ChenRui
-   * @date 2021/2/4 10:32
-   */
-  setFormData(): void {
-    /*const data: any = {
-        "testx1-1": "笑哈哈",
-        "testx1-2": 40,
-        "test1-1": {
-          "testx1-1-1": "1",
-          "testx1-1-2": "2",
-        },
-        "test1-2": {
-          "testx1-2-1": "1,2",
-          "testx1-2-2": "00001,00002",
-        },
-        "test1-4": {
-          "testx1-4-1": "9921313@qq.com",
-        },
-        "test1-5": {
-          "testx1-5-1": "04:23:55",
-          "testx1-5-2": "2021-12-04",
-        },
-      };*/
-    const data = {
-      productId: "2222",
-    };
-    this.formApi.setFormData(data, false, false);
-  }
-
-  /**
-   * @description: 赋值整个表单
-   * @author ChenRui
-   * @date 2021/2/4 10:32
-   */
-  setFormOldData(): void {
-    const data = {
-      productId: "2222",
-      productCode: 11111,
-      comId: 1,
-      productName: "1",
-      deptId: "2121",
-      engName: "2",
-      updateUser: "1",
-      productVersion: "1",
-      productManangerName: "2",
-      productMananger: "1992-06-13",
-      mark: "111",
-      createTime: "1,11,111",
-      xxx: "2222",
-    };
-    this.formApi.setFormData(data, false, false, data);
-  }
-
-  handleMultiChoiceEmbeddedCustomization(): void {
-    console.log("下了多选自定义事件");
-  }
-
-  dictLocalcConvert(): void {
-    /*const appData = require("./assets/x.json");
-      const dictionaryFormatCollection: DictionaryFormatCollection = formToolsService.inidDictOptions(appData);
-      this.dictionaryFormatCollection = dictionaryFormatCollection;*/
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.ml-5 {
-  margin-left: 5px;
-}
-.lo-container {
-  display: flex;
-  flex-direction: column;
-  .lo-content {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 20px;
-    padding: 10px 20px;
-    border: 1px solid #f0f0f0;
-    .lo-title {
-      font-size: 16px;
-      margin-bottom: 15px;
-    }
-    .lo-ins {
-      display: flex;
-      flex-direction: column;
-      .lo-api {
-        display: flex;
-        flex-wrap: wrap;
-        margin-bottom: 10px;
-        .lo-api-item {
-          display: flex;
-          flex-direction: row;
-          margin-right: 20px;
-          .lo-item-title {
-            min-width: 100px;
-            margin-right: 5px;
-            display: flex;
-            align-items: center;
-          }
-          .lo-item-opts {
-            display: flex;
-            flex-wrap: wrap;
-          }
-        }
-      }
-      .lo-input {
-        margin: 5px 0;
-      }
-      .lo-value {
-        .lo-title {
-          margin-right: 10px;
-        }
-      }
-    }
-  }
-}
-.d-flex {
-  display: flex;
-}
-.flex-row {
-  flex-direction: row;
-}
-.mt-1 {
-  margin-top: 3px;
-}
-.mb-2 {
-  margin-bottom: 6px;
-}
-.mr-2 {
-  margin-right: 6px;
-}
-.lo-combination-selector {
-  display: flex;
-  flex-direction: row;
-}
-</style>
+<template>
+  <div class="lo-container" ref="scrollView">
+    <div class="lo-content">
+      <div class="lo-title">form API测试</div>
+      <div class="lo-ins">
+        <div class="lo-api">
+          <div class="lo-api-item">
+            <div class="lo-item-title">编辑模式:</div>
+            <div class="lo-item-opts">
+              <a-switch v-model:checked="formApi.edit" checked-children="开" un-checked-children="关" />
+            </div>
+          </div>
+        </div>
+        <div class="lo-api">
+          <div class="lo-api-item">
+            <div class="lo-item-title">控件对象key值:</div>
+            <div class="lo-item-opts">
+              <a-input v-model:value="controlKey" placeholder="请输入控件key值" />
+            </div>
+          </div>
+          <div class="lo-api-item">
+            <div class="lo-item-title">目标属性:</div>
+            <div class="lo-item-opts">
+              <a-select v-model:value="controlAttr" show-search :filter-option="filterOption" style="width: 150px">
+                <a-select-option :value="''">请选择</a-select-option>
+                <a-select-option v-for="(propName, i) of Object.keys(attribute)" :value="attribute[propName]" :key="i" placeholder="属性名称">
+                  {{ propName }}
+                </a-select-option>
+              </a-select>
+            </div>
+          </div>
+          <div class="lo-api-item">
+            <div class="lo-item-title">设置值:</div>
+            <div class="lo-item-opts">
+              <a-input v-model:value="controlvalue" placeholder="相关值" />
+            </div>
+          </div>
+          <div class="lo-api-item">
+            <div class="lo-item-title">读操作:</div>
+            <div class="lo-item-opts">
+              <a-button type="primary" class="ml-5" @click="getControl()">获取控件对象</a-button>
+              <a-button type="primary" class="ml-5" @click="getControlEl()">获取控件dom对象</a-button>
+              <a-button type="primary" class="ml-5" @click="getValue()">获取值</a-button>
+              <a-button type="primary" class="ml-5" @click="getText()">获取文本</a-button>
+              <a-button type="primary" class="ml-5" @click="getOptions()">获取可选项</a-button>
+              <a-button type="primary" class="ml-5" @click="getValidate()">获取校验</a-button>
+              <a-button type="primary" class="ml-5" @click="removeValidate()">移除校验</a-button>
+              <a-button type="primary" class="ml-5" @click="getValidates()">获取校验集合</a-button>
+              <a-button type="primary" class="ml-5" @click="refreshValidate()">校验指定控件</a-button>
+              <a-button type="primary" class="ml-5" @click="validateReport()">校验表单</a-button>
+              <a-button type="primary" class="ml-5" @click="validateTips()">校验表单并弹出提示</a-button>
+            </div>
+          </div>
+        </div>
+        <div class="lo-api">
+          <div class="lo-api-item">
+            <div class="lo-item-title">写操作:</div>
+            <div class="lo-item-opts">
+              <a-button type="primary" class="ml-5" @click="setValue()">设置值</a-button>
+              <a-button type="primary" class="ml-5" @click="setOptions()">设置可选项</a-button>
+              <a-button type="primary" class="ml-5" @click="setAttribute()">设置常规属性</a-button>
+              <a-button type="primary" class="ml-5" @click="setValidate()">设置校验</a-button>
+              <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
+              <a-button type="primary" class="ml-5" @click="setFormData()">赋值整个表单</a-button>
+              <a-button type="primary" class="ml-5" @click="setFormOldData()">赋值整个表单-新旧值对比</a-button>
+              <a-button type="primary" class="ml-5" @click="resetValue()">重置整个表单</a-button>
+              <a-button type="primary" class="ml-5" @click="refreshAndUpdateData()">刷新与更新整个表单</a-button>
+              <a-button type="primary" class="ml-5" @click="resetFormValidateState()">重置表单校验状态</a-button>
+              <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
+              <a-button type="primary" class="ml-5" @click="setFieldChangeHistory()">设置变更历史</a-button>
+              <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
+              <a-button type="primary" class="ml-5" @click="setAutoCompleteOptions()">设置自动完成数据</a-button>
+              <div style="display: inline-block; margin: 0 10px 0 15px">|</div>
+              <a-button type="primary" class="ml-5" @click="setControl()">api方式新增控件对象</a-button>
+            </div>
+          </div>
+        </div>
+        <div class="lo-api">
+          <div class="lo-api-item">
+            <div class="lo-item-title">写操作:</div>
+            <div class="lo-item-opts">
+              <a-button type="primary" class="ml-5" @click="getAttribute()">获取常规属性</a-button>
+              <a-button type="primary" class="ml-5" @click="setAttribute()">设置常规属性</a-button>
+            </div>
+          </div>
+        </div>
+        <div class="lo-api">
+          <div class="lo-api-item">
+            <div class="lo-item-title">自定义类型:</div>
+            <div class="lo-item-opts">
+              <a-input v-model:value="controlCustomType" placeholder="相关值" />
+            </div>
+          </div>
+          <div class="lo-api-item">
+            <div class="lo-item-title">操作:</div>
+            <div class="lo-item-opts">
+              <a-button type="primary" class="ml-5" @click="setFormatDisplayAndOutput()">设置自定义控件格式化显示和输出</a-button>
+              |
+              <a-button type="primary" class="ml-5" @click="submit()">提交表单显示</a-button>
+            </div>
+          </div>
+        </div>
+        <div class="lo-input">
+          <!--styleMode="credit-rd" :formId="'773549593606574080'"-->
+          <dy-form v-if="showForm" :formId="'995416144285929472'" 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" />
+                <!--                <a-input-number style="flex-grow: 1" v-model="control.formControl.value" :min="1" :max="100" @change="onChange(control)" />
+                  <a-select style="flex-basis: 100px; max-width: 100px">
+                    <a-select-option value="jack"> Jack </a-select-option>
+                    <a-select-option value="lucy"> Lucy </a-select-option>
+                  </a-select>-->
+              </div>
+            </template>
+            <!--<template v-slot:input:prefix:testx1-1>￥</template>
+              <template v-slot:input:suffix:testx1-1>RMB</template>
+              <template v-slot:input:addonBefore:testx1-1>https://</template>
+              <template v-slot:input:addonAfter:testx1-1>.cn</template>
+              <template v-slot:select:suffixIcon:testx1-1-1>哇哈哈</template>-->
+            <!--<template v-slot:select:suffixIcon:testx1-1-1>哇哈哈</template>-->
+            <template v-slot:select:suffixIcon:productName>
+              <div class="lo-multiple-select-suffix-icon" @click="handleMultiChoiceEmbeddedCustomization">
+                <img :src="dropDownListSvg" />
+              </div>
+            </template>
+          </dy-form>
+        </div>
+        <div class="lo-value">
+          <span class="lo-title">输出: {{ formApi.formData }}</span>
+        </div>
+        <div>
+          <pre>
+              {{ dictionaryFormatCollection.sysDictTreeDetailOptions }}
+            </pre
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Ref } from "vue-property-decorator";
+import { FormRestfulResponse } from "./domain/FormRestfulResponse";
+import { Attribute, FormApi } from "./core/index";
+import DyForm from "./components/form/DvForm.vue";
+import { Switch, Button, Input, Select, InputNumber } from "ant-design-vue";
+import { Control, CustomFormat, DesForm, DesFormControl, FieldChangeHistory, FormControl, Validate, ValidateReport } from "./domain/index";
+import { ValidateRules, ValidateStatus } from "./constants/enum/index";
+import { DROP_DOWN_LIST_SVG_XML } from "./constants/encode-assets/svg";
+import { formTemplate } from "./constants/config/form-template.config";
+import { DictionaryFormatCollection, formToolsService } from "./services/form-tools.service";
+import { Options, Vue } from "vue-property-decorator";
+@Options({
+  name: "vf-app",
+  components: {
+    DyForm,
+    [Switch.name]: Switch,
+    [Button.name]: Button,
+    [Input.name]: Input,
+    [InputNumber.name]: InputNumber,
+    [Select.name]: Select,
+    [Select.Option.displayName + ""]: Select.Option,
+    [Select.OptGroup.displayName + ""]: Select.OptGroup,
+  },
+})
+export default class App extends Vue {
+  @Ref() scrollView: any;
+  dropDownListSvg = DROP_DOWN_LIST_SVG_XML;
+  showForm = false;
+  controlKey = "productName";
+  controlvalue = "productName";
+  controlCustomType = "combinationSelector";
+  controlAttr: Attribute | any = "";
+  attribute = Attribute;
+  srcDesForm: DesForm | undefined;
+  fieldChangeHistory: FieldChangeHistory = {
+    productName: [
+      { time: "2021-09-08", before: "玖龙", after: "玲珑", author: "爱笑笑" },
+      { time: "2021-09-09", before: "玲珑", after: "黑珑", author: "爱笑笑" },
+      { time: "2021-09-11", before: "玖龙", after: "玲珑", author: "爱笑笑" },
+      { time: "2021-09-12", before: "玲珑", after: "黑珑", author: "爱笑笑" },
+      { time: "2021-09-13", before: "玖龙", after: "玲珑", author: "爱笑笑" },
+      { time: "2021-09-14", before: "玲珑", after: "黑珑", author: "爱笑笑" },
+      { time: "2021-09-17", before: "玖龙", after: "玲珑", author: "爱笑笑" },
+      { time: "2021-09-16", before: "玲珑", after: "黑珑", author: "爱笑笑" },
+    ],
+  };
+  formApi: FormApi = new FormApi({
+    edit: true,
+  });
+  dictionaryFormatCollection: DictionaryFormatCollection = {
+    sysDictDetailOptions: [],
+    sysDictTreeDetailOptions: [],
+  };
+  mounted(): void {
+    const desForm: DesForm | any = formTemplate;
+    desForm.desFormLayouts[0].desFormControls.push({
+      formFieldId: "1",
+      layoutId: "1",
+      boundProperty: "xx.applyId",
+      extendBoundPropertyOne: "",
+      extendBoundPropertyTwo: "",
+      formFieldDescribe: "申请编号",
+      controlType: "1",
+      tableFieldOrder: 1,
+      fieldDefaultValue: '""',
+      titleWidth: "",
+      isBoldTitle: "0",
+      isHideTitle: "0",
+      titleColor: "",
+      placeholder: "",
+      tips: "",
+      isNotEdit: "0",
+      bindingPrefix: "",
+      bindingSuffix: "",
+      builtInFrontLabel: "",
+      builtInPostLabel: "",
+      isHideControl: "0",
+      controlWidth: "",
+      isPasswordBox: "0",
+      initRowHeight: null,
+      isFixedRowHeight: "0",
+      formatType: "1",
+      minValue: null,
+      maxValue: null,
+      step: null,
+      decimalPlaces: null,
+      thousandthPercentileFormat: "0",
+      unit: "",
+      moneyUnit: "[]",
+      defineOptionalUnits: "",
+      defineOptionalUnitsDefault: "",
+      zoomType: "",
+      zoomMultiple: null,
+      isShowCapitalization: "0",
+      isLineFeedDisplay: "0",
+      isOptionType: "2",
+      optionConfig: "",
+      dynamicOptionType: "1",
+      generalDictionary: "",
+      generalDictionaryOptions: "",
+      treeShape: "",
+      treeShapeOptions: "",
+      disableNonLeafNodes: "0",
+      dateFormat: "YYYY-MM-DD",
+      timeFormat: "HH:mm:ss",
+      isSupportMultiple: "0",
+      maxUploadNumber: null,
+      limitSize: null,
+      supportUploadType: "1",
+      extendUploadType: "",
+      customUploadType: "",
+      attachmentExtendProperties: "",
+      isMultipleChoice: "0",
+      isSearchable: "0",
+      canAddEntry: "0",
+      isClearButton: "0",
+      onOpeningValue: "",
+      whenClosedValue: "",
+      onOpeningText: "",
+      whenClosedText: "",
+      customFieldName: "",
+      verificationRules: "[]",
+      busAttr: '{"submittedType":"","isSupplement":false,"isKeyElements":false,"isTrack":false}',
+    });
+    this.srcDesForm = formToolsService.formatDesForm(desForm);
+    this.$formToolsService.init().then((res: FormRestfulResponse) => {
+      this.showForm = true;
+      // this.formApi.setAttribute("testx1-1-1", Attribute.TextFold, true);
+      // this.formApi.setAttribute("testx1-1-1", Attribute.HiddenDropdown, true);
+    });
+    // this.dictLocalcConvert();
+  }
+
+  created() {}
+
+  onChange(e: any): void {
+    if (e instanceof FormControl) {
+      e.formControl = e;
+    }
+    const paymentType = this.formApi.getValue("productName");
+    const comId = this.formApi.getValue("comId");
+    if (e.formControl && e.formControl.key === "productName") {
+      // this.formApi.setAttribute("productId", Attribute.IsHideControl, paymentType === "2");
+      this.formApi.setRequiredValidate("productCode", paymentType === "2");
+    } else if (e.formControl && e.formControl.key === "comId") {
+      this.formApi.setAttribute("productId", Attribute.IsHideControl, comId);
+    }
+    console.log(e);
+  }
+
+  onClick(e: any): void {
+    /*console.log(e);*/
+  }
+
+  onFocus(e: any): void {
+    /*console.log(e);*/
+  }
+
+  onBlur(e: any): void {
+    /*console.log(e);*/
+  }
+
+  /**
+   * @description: 内置前置标签事件
+   * @author ChenRui
+   * @date 2021/4/23 9:42
+   */
+  onAddonBeforeHandler(event: any): void {
+    console.log("AddonBefore", event);
+  }
+
+  /**
+   * @description: 内置后置标签事件
+   * @author ChenRui
+   * @date 2021/4/23 9:43
+   */
+  onAddonAfterHandler(event: any): void {
+    console.log("AddonAfter", event);
+  }
+
+  selectAddItem(e: any): void {
+    /*console.log(e);*/
+  }
+
+  filterOption(input: any, option: any) {
+    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  }
+
+  /**
+   * @description: 获取监控对象
+   * @author ChenRui
+   * @date 2021/1/29 10:05
+   */
+  getControl(): void {
+    const control: Control = this.formApi.getControl(this.controlKey);
+    /*const it: IterableIterator<any> = this.formApi.encodedFormData;
+        let val = it.next().value;
+        while (val) {
+          console.log(val);
+          val = it.next().value;
+        }*/
+    console.log("控件对象:", control);
+  }
+
+  /**
+   * @description: 获取值
+   * @author ChenRui
+   * @date 2021/1/29 14:58
+   */
+  getValue(): void {
+    const val: any = this.formApi.getValue(this.controlKey);
+    console.log("控件值:", val);
+  }
+
+  /**
+   * @description: 设置值
+   * @author ChenRui
+   * @date 2021/1/29 16:37
+   */
+  setValue(): void {
+    this.formApi.setValue(this.controlKey, this.controlvalue);
+  }
+
+  /**
+   * @description: 重置数据
+   * @author ChenRui
+   * @date 2021/2/22 17:40
+   */
+  resetValue(): void {
+    this.formApi.resetValue();
+  }
+
+  /**
+   * @description: 刷新整个表单
+   * @author ChenRui
+   * @date 2022/4/6 11:24
+   */
+  refreshAndUpdateData(): void {
+    this.formApi.refreshAndUpdateData();
+  }
+
+  /**
+   * @description: 重置表单校验状态
+   * @author ChenRui
+   * @date 2022/4/6 12:04
+   */
+  resetFormValidateState(): void {
+    this.formApi.resetFormValidateState();
+  }
+
+  /**
+   * @description: 新增控件对象
+   * @author ChenRui
+   * @date 2021/8/27 11:19
+   */
+  setControl(): void {
+    // const control: Control = this.formApi.setControl(this.controlKey);
+  }
+
+  /**
+   * @description: 设置字段变更历史
+   * @author ChenRui
+   * @date 2021/4/25 16:36
+   */
+  setFieldChangeHistory(): void {
+    this.formApi.setFieldChangeHistory(this.fieldChangeHistory);
+  }
+
+  /**
+   * @description: 设置自动完成数据
+   * @author ChenRui
+   * @date 2022/5/7 18:16
+   */
+  setAutoCompleteOptions(): void {
+    this.formApi.setAttribute(this.controlKey, Attribute.AutoCompleteOptions, ["张三"]);
+  }
+
+  /**
+   * @description: 获取文本
+   * @author ChenRui
+   * @date 2021/1/29 15:14
+   */
+  getText(): void {
+    const text: any = this.formApi.getText(this.controlKey);
+    console.log("文本:", text);
+  }
+
+  /**
+   * @description: 获取可选项
+   * @author ChenRui
+   * @date 2021/1/29 16:20
+   */
+  getOptions(): void {
+    const options: any[] = this.formApi.getOptions(this.controlKey);
+    console.log("可选项:", options);
+  }
+
+  /**
+   * @description: 设置可选项
+   * @author ChenRui
+   * @date 2021/1/29 16:21
+   */
+  setOptions(): void {
+    const data: any[] = [
+      { value: "1", title: "张三" },
+      { value: "2", title: "李四" },
+      { value: "3", title: "王五" },
+      { value: "4", title: "赵六" },
+      { value: "5", title: "孙七" },
+      { value: "6", title: "周八" },
+      { value: "7", title: "吴九" },
+      { value: "8", title: "郑十" },
+    ];
+    this.formApi.setOptions(this.controlKey, data, "2");
+  }
+
+  /**
+   * @description: 设置常规属性
+   * @author ChenRui
+   * @date 2021/1/29 17:29
+   */
+  setAttribute(): void {
+    if (this.controlAttr) {
+      this.formApi.setAttribute(this.controlKey, this.controlAttr, this.controlvalue);
+    }
+  }
+
+  /**
+   * @description: 获取常规属性
+   * @author ChenRui
+   * @date 2021/1/29 18:11
+   */
+  getAttribute(): void {
+    if (this.controlAttr) {
+      const attr: any = this.formApi.getAttribute(this.controlKey, this.controlAttr);
+      console.log("属性值:", attr);
+    }
+  }
+
+  /**
+   * @description: 获取校验
+   * @author ChenRui
+   * @date 2021/1/30 11:49
+   */
+  getValidate(): void {
+    const validate: any = this.formApi.getValidate(this.controlKey, this.controlvalue);
+    console.log("字段校验结果:", validate);
+  }
+
+  /**
+   * @description: 获取校验集合
+   * @author ChenRui
+   * @date 2021/1/30 11:50
+   */
+  getValidates(): void {
+    const validates: any[] = this.formApi.getValidates(this.controlKey);
+    console.log("表单校验结果:", validates);
+  }
+
+  refreshValidate(): void {
+    this.formApi.refreshValidate(this.controlKey);
+  }
+
+  /**
+   * @description:
+   * @author ChenRui
+   * @date 2021/4/1 21:29
+   */
+  removeValidate(): void {
+    this.formApi.removeValidate(this.controlKey, ValidateRules.Required.code);
+  }
+
+  /**
+   * @description: 获取控件dom对象
+   * @author ChenRui
+   * @date 2021/2/26 17:16
+   */
+  getControlEl(): void {
+    const controlEl: any = this.formApi.getControlEl(this.controlKey);
+    console.log("控件选项:", controlEl);
+  }
+
+  /**
+   * @description: 获取校验报告
+   * @author ChenRui
+   * @date 2021/2/22 14:08
+   */
+  validateReport(): void {
+    const result: boolean = this.formApi.validate();
+    // this.formApi.setAttribute("testx1-1", Attribute.IsHideControl, true);
+    const validateResults: ValidateReport[] = this.formApi.validateReport();
+    console.log("校验结果:", validateResults);
+  }
+
+  /**
+   * @description: 校验表单并提示
+   * @author ChenRui
+   * @date 2021/8/18 17:38
+   */
+  validateTips(): void {
+    // this.$formToolsService.validateTips(this.formApi, this.scrollView);
+    // this.formApi.validateTips(this.scrollView);
+    this.formApi.validateTips(window);
+  }
+
+  /**
+   * @description: 设置校验
+   * @author ChenRui
+   * @date 2021/1/30 11:56
+   */
+  setValidate(): void {
+    const validates: Validate[] = [
+      {
+        name: "define",
+        validateFunc: (val: any) => {
+          if (val == null || val === "") {
+            return {
+              validateStatus: ValidateStatus.Error.code,
+              errorMsg: "空空空",
+            };
+          }
+          return {
+            validateStatus: ValidateStatus.Success.code,
+          };
+        },
+      },
+    ];
+    // this.formApi.setValidate(this.controlKey, validates);
+    this.formApi.setValidate("testx1-5-4", {
+      ruleType: ValidateRules.Required.code,
+    });
+  }
+
+  /**
+   * @description: 设置格式化显示与输出
+   * @author ChenRui
+   * @date 2021/2/4 19:55
+   */
+  setFormatDisplayAndOutput(): void {
+    const customFormat: CustomFormat = {
+      display: (val: any, desFormControl: DesFormControl) => {
+        return val + "$";
+      },
+      output: (val: any, desFormControl: DesFormControl) => {
+        return val + "$$";
+      },
+    };
+    this.formApi.setFormatDisplayAndOutput(this.controlCustomType, customFormat);
+  }
+
+  /**
+   * @description: 提交表单
+   * @author ChenRui
+   * @date 2021/11/15 22:44
+   */
+  submit(): void {
+    console.log(this.formApi.formData);
+    console.log(this.formApi.encodedFormData);
+  }
+
+  /**
+   * @description: 赋值整个表单
+   * @author ChenRui
+   * @date 2021/2/4 10:32
+   */
+  setFormData(): void {
+    /*const data: any = {
+        "testx1-1": "笑哈哈",
+        "testx1-2": 40,
+        "test1-1": {
+          "testx1-1-1": "1",
+          "testx1-1-2": "2",
+        },
+        "test1-2": {
+          "testx1-2-1": "1,2",
+          "testx1-2-2": "00001,00002",
+        },
+        "test1-4": {
+          "testx1-4-1": "9921313@qq.com",
+        },
+        "test1-5": {
+          "testx1-5-1": "04:23:55",
+          "testx1-5-2": "2021-12-04",
+        },
+      };*/
+    const data = {
+      productId: "2222",
+    };
+    this.formApi.setFormData(data, false, false);
+  }
+
+  /**
+   * @description: 赋值整个表单
+   * @author ChenRui
+   * @date 2021/2/4 10:32
+   */
+  setFormOldData(): void {
+    const data = {
+      productId: "2222",
+      productCode: 11111,
+      comId: 1,
+      productName: "1",
+      deptId: "2121",
+      engName: "2",
+      updateUser: "1",
+      productVersion: "1",
+      productManangerName: "2",
+      productMananger: "1992-06-13",
+      mark: "111",
+      createTime: "1,11,111",
+      xxx: "2222",
+    };
+    this.formApi.setFormData(data, false, false, data);
+  }
+
+  handleMultiChoiceEmbeddedCustomization(): void {
+    console.log("下了多选自定义事件");
+  }
+
+  dictLocalcConvert(): void {
+    /*const appData = require("./assets/x.json");
+      const dictionaryFormatCollection: DictionaryFormatCollection = formToolsService.inidDictOptions(appData);
+      this.dictionaryFormatCollection = dictionaryFormatCollection;*/
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ml-5 {
+  margin-left: 5px;
+}
+.lo-container {
+  display: flex;
+  flex-direction: column;
+  .lo-content {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+    padding: 10px 20px;
+    border: 1px solid #f0f0f0;
+    .lo-title {
+      font-size: 16px;
+      margin-bottom: 15px;
+    }
+    .lo-ins {
+      display: flex;
+      flex-direction: column;
+      .lo-api {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 10px;
+        .lo-api-item {
+          display: flex;
+          flex-direction: row;
+          margin-right: 20px;
+          .lo-item-title {
+            min-width: 100px;
+            margin-right: 5px;
+            display: flex;
+            align-items: center;
+          }
+          .lo-item-opts {
+            display: flex;
+            flex-wrap: wrap;
+          }
+        }
+      }
+      .lo-input {
+        margin: 5px 0;
+      }
+      .lo-value {
+        .lo-title {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+.d-flex {
+  display: flex;
+}
+.flex-row {
+  flex-direction: row;
+}
+.mt-1 {
+  margin-top: 3px;
+}
+.mb-2 {
+  margin-bottom: 6px;
+}
+.mr-2 {
+  margin-right: 6px;
+}
+.lo-combination-selector {
+  display: flex;
+  flex-direction: row;
+}
+</style>