@idooel/components 0.0.2-beta.26 → 0.0.2-beta.27

package/dist/@idooel/components.esm.js

@@ -3941,11 +3941,9 @@ var script$A = {
         form.evalDisabledExpression(data[idx]);
       });
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
-      const status = this.getFormRefs.map(form => {
-        const status = form.validateFields();
-        return status;
-      }).every(item => item);
+    async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+      const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()));
+      const status = statusResults.every(item => item);
       if (status) {
         return this.submitRequestTrigger(props);
       } else {
@@ -4100,11 +4098,11 @@ __vue_render__$A._withStripped = true;
   /* style */
   const __vue_inject_styles__$A = function (inject) {
     if (!inject) return
-    inject("data-v-b64cef74_0", { source: ".ele.form-group-model__wrapper[data-v-b64cef74] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-b64cef74] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-b64cef74]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-b64cef74] {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-b64cef74] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-b64cef74] {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA4OA;EACA,iBAAA;EACA,oBAAA;AC3OA;AD4OA;EACA,gBAAA;EACA,gBAAA;AC1OA;AD2OA;EACA,iBAAA;ACzOA;AD2OA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACzOA;AD2OA;EACA,aAAA;ACzOA;AD4OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC1OA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele form-group-model__wrapper\">\r\n    <template v-for=\"(group, idx) in innerGroupMeta\">\r\n      <div \r\n        class=\"form-group-model__from\"\r\n        v-if=\"!group.isGenTpl\"\r\n        :key=\"group.key || idx\">\r\n        <div class=\"form-group-model__form--title\">\r\n          <div>{{ group.title }}</div>\r\n          <div class=\"form-group-model__form--buttons\">\r\n            <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group-model__form--content\">\r\n          <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\r\n        </div>\r\n      </div>\r\n    </template>\r\n    <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { type, net } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  props: {\r\n    mode: {\r\n      type: String\r\n    },\r\n    fieldName: {\r\n      type: String,\r\n      default: 'formGroup'\r\n    },\r\n    groupMeta: {\r\n      type: Function,\r\n      default: () => []\r\n    },\r\n    footerMeta: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    preRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    infoRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    submitRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      increaseCount: 1,\r\n      innerGroupMeta: []\r\n    }\r\n  },\r\n  watch: {\r\n    readOnlyGroupMeta: {\r\n      handler (meta) {\r\n        this.innerGroupMeta = meta\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    },\r\n    readOnlyGroupMeta () {\r\n      return this.groupMeta.call(this)\r\n    },\r\n    showFooterMeta () {\r\n      return !type.isEmpty(this.footerMeta)\r\n    },\r\n    formRefBase () {\r\n      return uuidv4()\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\r\n        [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\r\n      }\r\n    },\r\n    getFormRefs () {\r\n      return this.innerGroupMeta.map((group, idx) => {\r\n        if (!group.isGenTpl) {\r\n          return this.$refs[group.key || `${this.formRefBase}__${idx}`]\r\n        }\r\n        return void 0\r\n      }).filter(item => !!item).flat()\r\n    },\r\n    formModels () {\r\n      if (this.mode === 'increase') {\r\n        //TODO increase mode to return formModels\r\n        return this.getFormRefs.map(form => {\r\n          return form.getFieldsValue()\r\n        })\r\n      } else {\r\n        return this.getFormRefs.map(form => {\r\n          const { $vnode: { data: { ref } } } = form\r\n          return {\r\n            key: ref,\r\n            value: form.getFieldsValue()\r\n          }\r\n        }).reduce((ret, props) => {\r\n          ret[props.key] = props.value\r\n          return ret\r\n        }, {})\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props, key) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      if (!this.preRequest) return\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    renderIncreaseForm (data = {}) {\r\n      const formGroupValuesLength = data[this.fieldName].length\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const notGenTplPoolLength = this.readOnlyGroupMeta.filter(item => !item.isGenTpl).length\r\n      const genNum = formGroupValuesLength - notGenTplPoolLength\r\n      new Array(genNum).fill().forEach(() => {\r\n        const form = this.genForm(genTplTarget)\r\n        this.innerGroupMeta.push(form)\r\n      })\r\n      const formGroupValues = data[this.fieldName]\r\n      this.$nextTick(() => {\r\n        this.setFieldsValue(formGroupValues)\r\n      })\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      if (!url) return\r\n      const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (data = []) {\r\n      this.getFormRefs.forEach((form, idx) => {\r\n        form.setFieldsValue(data[idx])\r\n        form.evalDisabledExpression(data[idx])\r\n      })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      const status = this.getFormRefs.map(form => {\r\n        const status = form.validateFields()\r\n        return status\r\n      }).every(item => item)\r\n      if (status) {\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    },\r\n    genForm (base) {\r\n      const { elements, title, buttonGroupMeta } = base\r\n      return {\r\n        elements: JSON.parse(JSON.stringify(elements)),\r\n        buttonGroupMeta,\r\n        title: `${title}${this.increaseCount++}`,\r\n        _gen: true\r\n      }\r\n    },\r\n    handleClickDelete (props = {}, attr = {}, idx) {\r\n      this.innerGroupMeta.splice(idx, 1)\r\n      this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const form = this.genForm(genTplTarget)\r\n      this.innerGroupMeta.push(form)\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n  &.form-group-model__wrapper {\r\n    background: unset;\r\n    padding-bottom: 80px;\r\n    .form-group-model__from {\r\n      background: #fff;\r\n      margin-top: 16px;\r\n      &:first-child {\r\n        margin-top: unset;\r\n      }\r\n      .form-group-model__form--title {\r\n        width: 100%;\r\n        height: 56px;\r\n        padding: 0 16px;\r\n        border-bottom: 1px solid;\r\n        border-color: var(--idooel-form-title-border-color);\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n      }\r\n      .form-group-model__form--content {\r\n        padding: 16px;\r\n      }\r\n    }\r\n    .form-group-model__form--footer {\r\n      width: 100%;\r\n      height: 64px;\r\n      background: #fff;\r\n      position: fixed;\r\n      bottom: 0;\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      justify-content: end;\r\n    }\r\n  }\r\n}\r\n</style>",".ele.form-group-model__wrapper {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-e28e6ea2_0", { source: ".ele.form-group-model__wrapper[data-v-e28e6ea2] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-e28e6ea2] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-e28e6ea2]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-e28e6ea2] {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-e28e6ea2] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-e28e6ea2] {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA0OA;EACA,iBAAA;EACA,oBAAA;ACzOA;AD0OA;EACA,gBAAA;EACA,gBAAA;ACxOA;ADyOA;EACA,iBAAA;ACvOA;ADyOA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACvOA;ADyOA;EACA,aAAA;ACvOA;AD0OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACxOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele form-group-model__wrapper\">\r\n    <template v-for=\"(group, idx) in innerGroupMeta\">\r\n      <div \r\n        class=\"form-group-model__from\"\r\n        v-if=\"!group.isGenTpl\"\r\n        :key=\"group.key || idx\">\r\n        <div class=\"form-group-model__form--title\">\r\n          <div>{{ group.title }}</div>\r\n          <div class=\"form-group-model__form--buttons\">\r\n            <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group-model__form--content\">\r\n          <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\r\n        </div>\r\n      </div>\r\n    </template>\r\n    <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { type, net } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  props: {\r\n    mode: {\r\n      type: String\r\n    },\r\n    fieldName: {\r\n      type: String,\r\n      default: 'formGroup'\r\n    },\r\n    groupMeta: {\r\n      type: Function,\r\n      default: () => []\r\n    },\r\n    footerMeta: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    preRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    infoRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    submitRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      increaseCount: 1,\r\n      innerGroupMeta: []\r\n    }\r\n  },\r\n  watch: {\r\n    readOnlyGroupMeta: {\r\n      handler (meta) {\r\n        this.innerGroupMeta = meta\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    },\r\n    readOnlyGroupMeta () {\r\n      return this.groupMeta.call(this)\r\n    },\r\n    showFooterMeta () {\r\n      return !type.isEmpty(this.footerMeta)\r\n    },\r\n    formRefBase () {\r\n      return uuidv4()\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\r\n        [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\r\n      }\r\n    },\r\n    getFormRefs () {\r\n      return this.innerGroupMeta.map((group, idx) => {\r\n        if (!group.isGenTpl) {\r\n          return this.$refs[group.key || `${this.formRefBase}__${idx}`]\r\n        }\r\n        return void 0\r\n      }).filter(item => !!item).flat()\r\n    },\r\n    formModels () {\r\n      if (this.mode === 'increase') {\r\n        //TODO increase mode to return formModels\r\n        return this.getFormRefs.map(form => {\r\n          return form.getFieldsValue()\r\n        })\r\n      } else {\r\n        return this.getFormRefs.map(form => {\r\n          const { $vnode: { data: { ref } } } = form\r\n          return {\r\n            key: ref,\r\n            value: form.getFieldsValue()\r\n          }\r\n        }).reduce((ret, props) => {\r\n          ret[props.key] = props.value\r\n          return ret\r\n        }, {})\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props, key) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      if (!this.preRequest) return\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    renderIncreaseForm (data = {}) {\r\n      const formGroupValuesLength = data[this.fieldName].length\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const notGenTplPoolLength = this.readOnlyGroupMeta.filter(item => !item.isGenTpl).length\r\n      const genNum = formGroupValuesLength - notGenTplPoolLength\r\n      new Array(genNum).fill().forEach(() => {\r\n        const form = this.genForm(genTplTarget)\r\n        this.innerGroupMeta.push(form)\r\n      })\r\n      const formGroupValues = data[this.fieldName]\r\n      this.$nextTick(() => {\r\n        this.setFieldsValue(formGroupValues)\r\n      })\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      if (!url) return\r\n      const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (data = []) {\r\n      this.getFormRefs.forEach((form, idx) => {\r\n        form.setFieldsValue(data[idx])\r\n        form.evalDisabledExpression(data[idx])\r\n      })\r\n    },\r\n    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()))\r\n      const status = statusResults.every(item => item)\r\n      if (status) {\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    },\r\n    genForm (base) {\r\n      const { elements, title, buttonGroupMeta } = base\r\n      return {\r\n        elements: JSON.parse(JSON.stringify(elements)),\r\n        buttonGroupMeta,\r\n        title: `${title}${this.increaseCount++}`,\r\n        _gen: true\r\n      }\r\n    },\r\n    handleClickDelete (props = {}, attr = {}, idx) {\r\n      this.innerGroupMeta.splice(idx, 1)\r\n      this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const form = this.genForm(genTplTarget)\r\n      this.innerGroupMeta.push(form)\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n  &.form-group-model__wrapper {\r\n    background: unset;\r\n    padding-bottom: 80px;\r\n    .form-group-model__from {\r\n      background: #fff;\r\n      margin-top: 16px;\r\n      &:first-child {\r\n        margin-top: unset;\r\n      }\r\n      .form-group-model__form--title {\r\n        width: 100%;\r\n        height: 56px;\r\n        padding: 0 16px;\r\n        border-bottom: 1px solid;\r\n        border-color: var(--idooel-form-title-border-color);\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n      }\r\n      .form-group-model__form--content {\r\n        padding: 16px;\r\n      }\r\n    }\r\n    .form-group-model__form--footer {\r\n      width: 100%;\r\n      height: 64px;\r\n      background: #fff;\r\n      position: fixed;\r\n      bottom: 0;\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      justify-content: end;\r\n    }\r\n  }\r\n}\r\n</style>",".ele.form-group-model__wrapper {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$A = "data-v-b64cef74";
+  const __vue_scope_id__$A = "data-v-e28e6ea2";
   /* module identifier */
   const __vue_module_identifier__$A = undefined;
   /* functional template */
@@ -4298,6 +4296,7 @@ var script$z = {
       }).then(resp => {
         this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, {
           ...props,
+          response: resp,
           formModel: {
             ...this.formModels(),
             ...(resp.data || {})
@@ -4371,9 +4370,9 @@ var script$z = {
     validateFields() {
       return this.$refs[this.formRef].validateFields();
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+    async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
       if (this.globalDisabled) return;
-      const status = this.$refs[this.formRef].validateFields();
+      const status = await this.$refs[this.formRef].validateFields();
       if (status) {
         //TODO fieldMap
         return this.submitRequestTrigger(props);
@@ -4465,11 +4464,11 @@ __vue_render__$z._withStripped = true;
   /* style */
   const __vue_inject_styles__$z = function (inject) {
     if (!inject) return
-    inject("data-v-1aa83856_0", { source: ".form__model--wrapper[data-v-1aa83856] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-1aa83856] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-1aa83856] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-1aa83856] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAgNA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC/MA;ADgNA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC9MA;ADgNA;EACA,aAAA;AC9MA;ADgNA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC9MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" @change=\"onChangeFormStatus($event)\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  provide () {\r\n    return {\r\n      [CONTEXT]: () => {\r\n        return {\r\n          exposed: this.exposed\r\n        }\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields,\r\n        getFieldsValue: this.getFieldsValue,\r\n        executeExpressions: this.executeExpressions,\r\n        route: this.$route,\r\n        [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })\r\n    },\r\n    formModels (fieldNames) {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.setFieldsValue(data)\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return type.isApi(url) ? url : this.executeExpression(url)\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.$refs[this.formRef].getFieldsValue(fieldNames)\r\n    },\r\n    executeExpressions () {\r\n      return this.$refs[this.formRef].evalShowExpression()\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    this.setFieldsValue(this.collectDefaultValues())\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n    this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-0377ec6e_0", { source: ".form__model--wrapper[data-v-0377ec6e] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-0377ec6e] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-0377ec6e] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-0377ec6e] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAgNA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC/MA;ADgNA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC9MA;ADgNA;EACA,aAAA;AC9MA;ADgNA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC9MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" @change=\"onChangeFormStatus($event)\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  provide () {\r\n    return {\r\n      [CONTEXT]: () => {\r\n        return {\r\n          exposed: this.exposed\r\n        }\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields,\r\n        getFieldsValue: this.getFieldsValue,\r\n        executeExpressions: this.executeExpressions,\r\n        route: this.$route,\r\n        [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })\r\n    },\r\n    formModels (fieldNames) {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, response: resp, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.setFieldsValue(data)\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return type.isApi(url) ? url : this.executeExpression(url)\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.$refs[this.formRef].getFieldsValue(fieldNames)\r\n    },\r\n    executeExpressions () {\r\n      return this.$refs[this.formRef].evalShowExpression()\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = await this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    this.setFieldsValue(this.collectDefaultValues())\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n    this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$z = "data-v-1aa83856";
+  const __vue_scope_id__$z = "data-v-0377ec6e";
   /* module identifier */
   const __vue_module_identifier__$z = undefined;
   /* functional template */
@@ -5075,11 +5074,11 @@ var script$w = {
       this.setFieldsValue(defaultValues);
     },
     validateFields() {
-      let ret = false;
-      this.form.validateFields((error, values) => {
-        ret = !error;
+      return new Promise(resolve => {
+        this.form.validateFields((error, values) => {
+          resolve(!error);
+        });
       });
-      return ret;
     },
     setFieldsValue(props = {}) {
       this.$nextTick(() => {
@@ -5687,11 +5686,11 @@ __vue_render__$w._withStripped = true;
   /* style */
   const __vue_inject_styles__$w = function (inject) {
     if (!inject) return
-    inject("data-v-6c735b44_0", { source: ".ele__form--wrapper[data-v-6c735b44] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiVA;EACA,gBAAA;AChVA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele__form--wrapper\">\r\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n      <a-row :gutter=\"24\">\r\n        <template v-for=\"ele in elements\">\r\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n            <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :max-length=\"ele.maxLength\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-input>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-textarea' || ele.type == 'Textarea'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-textarea \r\n                  @change=\"onChange($event, ele)\"\r\n                  :max-length=\"ele.maxLength\"\r\n                  :autosize=\"ele.autosize\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :allow-clear=\"ele.allowClear\"\r\n                  :placeholder=\"ele.placeholder\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n                  style=\"width:100%;\">\r\n                </ele-textarea>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select' || ele.type == 'Select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :mode=\"ele.mode\"\r\n                  :code=\"ele.code\"\r\n                  :init=\"ele.init\"\r\n                  :url=\"ele.url\"\r\n                  :params=\"ele.params\" \r\n                  @change=\"onChange($event, ele)\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-upload'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  :ext=\"ele.ext\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :accept=\"ele.accept\"\r\n                  :extensions=\"ele.extensions\"\r\n                  :size=\"ele.size\"\r\n                  :icon=\"ele.icon\"\r\n                  :url=\"ele.url\"\r\n                  :message=\"ele.message\" \r\n                  style=\"width:100%;\">\r\n                </ele-upload>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date-range \r\n                :disabled=\"executeExpression(ele._disabled)\" \r\n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                style=\"width:100%;\">\r\n              </ele-date-range>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date\r\n                  :format=\"ele.format\"\r\n                  :mode=\"ele.mode\"\r\n                  :show-time=\"ele.showTime\"\r\n                  :show-today=\"ele.showToday\"\r\n                  :value-format=\"ele.valueFormat\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-date>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input-number \r\n                  @change=\"onChange($event, ele)\" \r\n                  :precision=\"ele.precision\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  v-bind=\"ele.props\" \r\n                  style=\"width:100%;\">\r\n                </ele-input-number>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-checkbox \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-checkbox>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-radio' || ele.type == 'Radio'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-radio \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :data-source=\"ele.optionList\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-radio>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-form-img-crop\r\n                  @change=\"onChange($event, ele)\"\r\n                  :width=\"ele.width\"\r\n                  :height=\"ele.height\"\r\n                  :modal-title=\"ele.modalTitle\"\r\n                  :cropper-config=\"ele.cropperConfig\"\r\n                  :uploadFileConfig=\"ele.uploadFileConfig\"\r\n                  :oper-text=\"ele.operText\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-form-img-crop>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-tree-select\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-tree-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity-modal-table\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity-modal-table>\r\n              </a-form-item>\r\n            </template>\r\n          </a-col>\r\n        </template>\r\n      </a-row>\r\n    </a-form>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nimport { CONTEXT } from '../../utils'\r\nexport default {\r\n  name: 'ele-form',\r\n  props: {\r\n    value: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    formName: {\r\n      type: [Number, String],\r\n      default: 'coordinated'\r\n    },\r\n    elements: {\r\n      type: Array,\r\n      default: () => []\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      formModel: {}\r\n    }\r\n  },\r\n  inject: {\r\n    [CONTEXT]: {\r\n      default: () => (() => ({}))\r\n    }\r\n  },\r\n  computed: {\r\n    contextData () {\r\n      return this[CONTEXT].call(this)\r\n    },\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    form () {\r\n      const ref = this.$form.createForm(this, { name: this.formName, onFieldsChange: this.onFieldsChange })\r\n      return ref\r\n    },\r\n    exposedMethods () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        getFieldsValue: this.getFieldsValue\r\n      }\r\n    }\r\n  },\r\n  created () {\r\n    this.setDefaultValues()\r\n  },\r\n  methods: {\r\n    onFieldsChange () {\r\n      this.executeOptionListExpression()\r\n    },\r\n    executeOptionListExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (ele.optionList) {\r\n          const optionList = this.evalOptionListExpression(ele.optionList)\r\n          this.$set(ele, 'optionList', optionList)\r\n        }\r\n      })\r\n    },\r\n    evalOptionListExpression (optionList = []) {\r\n      const executeExpression = (expression) => {\r\n        if (type.isBool(expression)) return expression\r\n        if (type.isEmpty(expression)) return true\r\n        const ret = parse(expression, { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n        return ret\r\n      }\r\n      return optionList.map(item => {\r\n        const { show } = item\r\n        return { ...item, _show: executeExpression(show) }\r\n      })\r\n    },\r\n    setFormModel (props = {}) {\r\n      this.formModel = props\r\n      this.dispatchExpression()\r\n    },\r\n    rebuildRules (rules = []) {\r\n      //TODO\r\n      rules.map(rule => {\r\n        const { validator } = rule\r\n        if (validator) {\r\n          validator.formModel = this.getFieldsValue()\r\n          validator.exposed = this.exposedMethods\r\n        }\r\n      })\r\n      return rules\r\n    },\r\n    dispatchExpression () {\r\n      this.evalDisabledExpression()\r\n      this.evalShowExpression()\r\n    },\r\n    evalDisabledExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n        const { disabled } = ele\r\n        const ret = this.executeExpression(disabled)\r\n        this.$set(ele, '_disabled', ret)\r\n      })\r\n    },\r\n    evalShowExpression () {\r\n      this.elements.forEach(ele => {\r\n        const { show = true } = ele\r\n        const ret = this.executeExpression(show)\r\n        this.$set(ele, '_show', ret)\r\n      })\r\n    },\r\n    executeExpression (expression) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\r\n    },\r\n    onChange (value, props) {\r\n      const { name } = props\r\n      this.$set(this.formModel, name, value)\r\n      this.dispatchExpression()\r\n      this.setFieldsValue({ [name]: value })\r\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n    },\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    //TODO deprecated in the future, need to be implemented in the outer component\r\n    setDefaultValues () {\r\n      const defaultValues = this.collectDefaultValues()\r\n      this.setFormModel(defaultValues)\r\n      this.setFieldsValue(defaultValues)\r\n    },\r\n    validateFields () {\r\n      let ret = false\r\n      this.form.validateFields((error, values) => {\r\n        ret = !error\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (props = {}) {\r\n      this.$nextTick(() => {\r\n        this.form.setFieldsValue(props)\r\n      })\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.form.getFieldsValue(fieldNames)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\r\n    this.dispatchExpression()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n  background: #fff;\r\n  .ant-form-item {\r\n  }\r\n}\r\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-750019c0_0", { source: ".ele__form--wrapper[data-v-750019c0] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiVA;EACA,gBAAA;AChVA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele__form--wrapper\">\r\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n      <a-row :gutter=\"24\">\r\n        <template v-for=\"ele in elements\">\r\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n            <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :max-length=\"ele.maxLength\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-input>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-textarea' || ele.type == 'Textarea'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-textarea \r\n                  @change=\"onChange($event, ele)\"\r\n                  :max-length=\"ele.maxLength\"\r\n                  :autosize=\"ele.autosize\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :allow-clear=\"ele.allowClear\"\r\n                  :placeholder=\"ele.placeholder\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n                  style=\"width:100%;\">\r\n                </ele-textarea>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select' || ele.type == 'Select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :mode=\"ele.mode\"\r\n                  :code=\"ele.code\"\r\n                  :init=\"ele.init\"\r\n                  :url=\"ele.url\"\r\n                  :params=\"ele.params\" \r\n                  @change=\"onChange($event, ele)\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-upload'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  :ext=\"ele.ext\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :accept=\"ele.accept\"\r\n                  :extensions=\"ele.extensions\"\r\n                  :size=\"ele.size\"\r\n                  :icon=\"ele.icon\"\r\n                  :url=\"ele.url\"\r\n                  :message=\"ele.message\" \r\n                  style=\"width:100%;\">\r\n                </ele-upload>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date-range \r\n                :disabled=\"executeExpression(ele._disabled)\" \r\n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                style=\"width:100%;\">\r\n              </ele-date-range>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date\r\n                  :format=\"ele.format\"\r\n                  :mode=\"ele.mode\"\r\n                  :show-time=\"ele.showTime\"\r\n                  :show-today=\"ele.showToday\"\r\n                  :value-format=\"ele.valueFormat\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-date>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input-number \r\n                  @change=\"onChange($event, ele)\" \r\n                  :precision=\"ele.precision\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  v-bind=\"ele.props\" \r\n                  style=\"width:100%;\">\r\n                </ele-input-number>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-checkbox \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-checkbox>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-radio' || ele.type == 'Radio'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-radio \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :data-source=\"ele.optionList\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-radio>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-form-img-crop\r\n                  @change=\"onChange($event, ele)\"\r\n                  :width=\"ele.width\"\r\n                  :height=\"ele.height\"\r\n                  :modal-title=\"ele.modalTitle\"\r\n                  :cropper-config=\"ele.cropperConfig\"\r\n                  :uploadFileConfig=\"ele.uploadFileConfig\"\r\n                  :oper-text=\"ele.operText\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-form-img-crop>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-tree-select\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-tree-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity-modal-table\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity-modal-table>\r\n              </a-form-item>\r\n            </template>\r\n          </a-col>\r\n        </template>\r\n      </a-row>\r\n    </a-form>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nimport { CONTEXT } from '../../utils'\r\nexport default {\r\n  name: 'ele-form',\r\n  props: {\r\n    value: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    formName: {\r\n      type: [Number, String],\r\n      default: 'coordinated'\r\n    },\r\n    elements: {\r\n      type: Array,\r\n      default: () => []\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      formModel: {}\r\n    }\r\n  },\r\n  inject: {\r\n    [CONTEXT]: {\r\n      default: () => (() => ({}))\r\n    }\r\n  },\r\n  computed: {\r\n    contextData () {\r\n      return this[CONTEXT].call(this)\r\n    },\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    form () {\r\n      const ref = this.$form.createForm(this, { name: this.formName, onFieldsChange: this.onFieldsChange })\r\n      return ref\r\n    },\r\n    exposedMethods () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        getFieldsValue: this.getFieldsValue\r\n      }\r\n    }\r\n  },\r\n  created () {\r\n    this.setDefaultValues()\r\n  },\r\n  methods: {\r\n    onFieldsChange () {\r\n      this.executeOptionListExpression()\r\n    },\r\n    executeOptionListExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (ele.optionList) {\r\n          const optionList = this.evalOptionListExpression(ele.optionList)\r\n          this.$set(ele, 'optionList', optionList)\r\n        }\r\n      })\r\n    },\r\n    evalOptionListExpression (optionList = []) {\r\n      const executeExpression = (expression) => {\r\n        if (type.isBool(expression)) return expression\r\n        if (type.isEmpty(expression)) return true\r\n        const ret = parse(expression, { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n        return ret\r\n      }\r\n      return optionList.map(item => {\r\n        const { show } = item\r\n        return { ...item, _show: executeExpression(show) }\r\n      })\r\n    },\r\n    setFormModel (props = {}) {\r\n      this.formModel = props\r\n      this.dispatchExpression()\r\n    },\r\n    rebuildRules (rules = []) {\r\n      //TODO\r\n      rules.map(rule => {\r\n        const { validator } = rule\r\n        if (validator) {\r\n          validator.formModel = this.getFieldsValue()\r\n          validator.exposed = this.exposedMethods\r\n        }\r\n      })\r\n      return rules\r\n    },\r\n    dispatchExpression () {\r\n      this.evalDisabledExpression()\r\n      this.evalShowExpression()\r\n    },\r\n    evalDisabledExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n        const { disabled } = ele\r\n        const ret = this.executeExpression(disabled)\r\n        this.$set(ele, '_disabled', ret)\r\n      })\r\n    },\r\n    evalShowExpression () {\r\n      this.elements.forEach(ele => {\r\n        const { show = true } = ele\r\n        const ret = this.executeExpression(show)\r\n        this.$set(ele, '_show', ret)\r\n      })\r\n    },\r\n    executeExpression (expression) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\r\n    },\r\n    onChange (value, props) {\r\n      const { name } = props\r\n      this.$set(this.formModel, name, value)\r\n      this.dispatchExpression()\r\n      this.setFieldsValue({ [name]: value })\r\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n    },\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    //TODO deprecated in the future, need to be implemented in the outer component\r\n    setDefaultValues () {\r\n      const defaultValues = this.collectDefaultValues()\r\n      this.setFormModel(defaultValues)\r\n      this.setFieldsValue(defaultValues)\r\n    },\r\n    validateFields () {\r\n      return new Promise((resolve) => {\r\n        this.form.validateFields((error, values) => {\r\n          resolve(!error)\r\n        })\r\n      })\r\n    },\r\n    setFieldsValue (props = {}) {\r\n      this.$nextTick(() => {\r\n        this.form.setFieldsValue(props)\r\n      })\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.form.getFieldsValue(fieldNames)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\r\n    this.dispatchExpression()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n  background: #fff;\r\n  .ant-form-item {\r\n  }\r\n}\r\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$w = "data-v-6c735b44";
+  const __vue_scope_id__$w = "data-v-750019c0";
   /* module identifier */
   const __vue_module_identifier__$w = undefined;
   /* functional template */
@@ -14233,9 +14232,9 @@ var script$9 = {
     validateFields() {
       return this.$refs[this.formRef].validateFields();
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+    async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
       if (this.globalDisabled) return;
-      const status = this.$refs[this.formRef].validateFields();
+      const status = await this.$refs[this.formRef].validateFields();
       if (status) {
         //TODO fieldMap
         return this.submitRequestTrigger(props);

package/dist/@idooel/components.umd.js

@@ -3946,11 +3946,9 @@
           form.evalDisabledExpression(data[idx]);
         });
       },
-      [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
-        const status = this.getFormRefs.map(form => {
-          const status = form.validateFields();
-          return status;
-        }).every(item => item);
+      async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+        const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()));
+        const status = statusResults.every(item => item);
         if (status) {
           return this.submitRequestTrigger(props);
         } else {
@@ -4105,11 +4103,11 @@
     /* style */
     const __vue_inject_styles__$A = function (inject) {
       if (!inject) return
-      inject("data-v-b64cef74_0", { source: ".ele.form-group-model__wrapper[data-v-b64cef74] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-b64cef74] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-b64cef74]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-b64cef74] {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-b64cef74] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-b64cef74] {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA4OA;EACA,iBAAA;EACA,oBAAA;AC3OA;AD4OA;EACA,gBAAA;EACA,gBAAA;AC1OA;AD2OA;EACA,iBAAA;ACzOA;AD2OA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACzOA;AD2OA;EACA,aAAA;ACzOA;AD4OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC1OA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele form-group-model__wrapper\">\r\n    <template v-for=\"(group, idx) in innerGroupMeta\">\r\n      <div \r\n        class=\"form-group-model__from\"\r\n        v-if=\"!group.isGenTpl\"\r\n        :key=\"group.key || idx\">\r\n        <div class=\"form-group-model__form--title\">\r\n          <div>{{ group.title }}</div>\r\n          <div class=\"form-group-model__form--buttons\">\r\n            <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group-model__form--content\">\r\n          <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\r\n        </div>\r\n      </div>\r\n    </template>\r\n    <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { type, net } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  props: {\r\n    mode: {\r\n      type: String\r\n    },\r\n    fieldName: {\r\n      type: String,\r\n      default: 'formGroup'\r\n    },\r\n    groupMeta: {\r\n      type: Function,\r\n      default: () => []\r\n    },\r\n    footerMeta: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    preRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    infoRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    submitRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      increaseCount: 1,\r\n      innerGroupMeta: []\r\n    }\r\n  },\r\n  watch: {\r\n    readOnlyGroupMeta: {\r\n      handler (meta) {\r\n        this.innerGroupMeta = meta\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    },\r\n    readOnlyGroupMeta () {\r\n      return this.groupMeta.call(this)\r\n    },\r\n    showFooterMeta () {\r\n      return !type.isEmpty(this.footerMeta)\r\n    },\r\n    formRefBase () {\r\n      return uuidv4()\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\r\n        [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\r\n      }\r\n    },\r\n    getFormRefs () {\r\n      return this.innerGroupMeta.map((group, idx) => {\r\n        if (!group.isGenTpl) {\r\n          return this.$refs[group.key || `${this.formRefBase}__${idx}`]\r\n        }\r\n        return void 0\r\n      }).filter(item => !!item).flat()\r\n    },\r\n    formModels () {\r\n      if (this.mode === 'increase') {\r\n        //TODO increase mode to return formModels\r\n        return this.getFormRefs.map(form => {\r\n          return form.getFieldsValue()\r\n        })\r\n      } else {\r\n        return this.getFormRefs.map(form => {\r\n          const { $vnode: { data: { ref } } } = form\r\n          return {\r\n            key: ref,\r\n            value: form.getFieldsValue()\r\n          }\r\n        }).reduce((ret, props) => {\r\n          ret[props.key] = props.value\r\n          return ret\r\n        }, {})\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props, key) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      if (!this.preRequest) return\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    renderIncreaseForm (data = {}) {\r\n      const formGroupValuesLength = data[this.fieldName].length\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const notGenTplPoolLength = this.readOnlyGroupMeta.filter(item => !item.isGenTpl).length\r\n      const genNum = formGroupValuesLength - notGenTplPoolLength\r\n      new Array(genNum).fill().forEach(() => {\r\n        const form = this.genForm(genTplTarget)\r\n        this.innerGroupMeta.push(form)\r\n      })\r\n      const formGroupValues = data[this.fieldName]\r\n      this.$nextTick(() => {\r\n        this.setFieldsValue(formGroupValues)\r\n      })\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      if (!url) return\r\n      const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (data = []) {\r\n      this.getFormRefs.forEach((form, idx) => {\r\n        form.setFieldsValue(data[idx])\r\n        form.evalDisabledExpression(data[idx])\r\n      })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      const status = this.getFormRefs.map(form => {\r\n        const status = form.validateFields()\r\n        return status\r\n      }).every(item => item)\r\n      if (status) {\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    },\r\n    genForm (base) {\r\n      const { elements, title, buttonGroupMeta } = base\r\n      return {\r\n        elements: JSON.parse(JSON.stringify(elements)),\r\n        buttonGroupMeta,\r\n        title: `${title}${this.increaseCount++}`,\r\n        _gen: true\r\n      }\r\n    },\r\n    handleClickDelete (props = {}, attr = {}, idx) {\r\n      this.innerGroupMeta.splice(idx, 1)\r\n      this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const form = this.genForm(genTplTarget)\r\n      this.innerGroupMeta.push(form)\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n  &.form-group-model__wrapper {\r\n    background: unset;\r\n    padding-bottom: 80px;\r\n    .form-group-model__from {\r\n      background: #fff;\r\n      margin-top: 16px;\r\n      &:first-child {\r\n        margin-top: unset;\r\n      }\r\n      .form-group-model__form--title {\r\n        width: 100%;\r\n        height: 56px;\r\n        padding: 0 16px;\r\n        border-bottom: 1px solid;\r\n        border-color: var(--idooel-form-title-border-color);\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n      }\r\n      .form-group-model__form--content {\r\n        padding: 16px;\r\n      }\r\n    }\r\n    .form-group-model__form--footer {\r\n      width: 100%;\r\n      height: 64px;\r\n      background: #fff;\r\n      position: fixed;\r\n      bottom: 0;\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      justify-content: end;\r\n    }\r\n  }\r\n}\r\n</style>",".ele.form-group-model__wrapper {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-e28e6ea2_0", { source: ".ele.form-group-model__wrapper[data-v-e28e6ea2] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-e28e6ea2] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-e28e6ea2]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-e28e6ea2] {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-e28e6ea2] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-e28e6ea2] {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA0OA;EACA,iBAAA;EACA,oBAAA;ACzOA;AD0OA;EACA,gBAAA;EACA,gBAAA;ACxOA;ADyOA;EACA,iBAAA;ACvOA;ADyOA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACvOA;ADyOA;EACA,aAAA;ACvOA;AD0OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACxOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele form-group-model__wrapper\">\r\n    <template v-for=\"(group, idx) in innerGroupMeta\">\r\n      <div \r\n        class=\"form-group-model__from\"\r\n        v-if=\"!group.isGenTpl\"\r\n        :key=\"group.key || idx\">\r\n        <div class=\"form-group-model__form--title\">\r\n          <div>{{ group.title }}</div>\r\n          <div class=\"form-group-model__form--buttons\">\r\n            <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group-model__form--content\">\r\n          <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\r\n        </div>\r\n      </div>\r\n    </template>\r\n    <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { type, net } from '@idooel/shared'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  props: {\r\n    mode: {\r\n      type: String\r\n    },\r\n    fieldName: {\r\n      type: String,\r\n      default: 'formGroup'\r\n    },\r\n    groupMeta: {\r\n      type: Function,\r\n      default: () => []\r\n    },\r\n    footerMeta: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    preRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    infoRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    },\r\n    submitRequest: {\r\n      type: Object,\r\n      default: () => {}\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      increaseCount: 1,\r\n      innerGroupMeta: []\r\n    }\r\n  },\r\n  watch: {\r\n    readOnlyGroupMeta: {\r\n      handler (meta) {\r\n        this.innerGroupMeta = meta\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  computed: {\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    },\r\n    readOnlyGroupMeta () {\r\n      return this.groupMeta.call(this)\r\n    },\r\n    showFooterMeta () {\r\n      return !type.isEmpty(this.footerMeta)\r\n    },\r\n    formRefBase () {\r\n      return uuidv4()\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\r\n        [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\r\n      }\r\n    },\r\n    getFormRefs () {\r\n      return this.innerGroupMeta.map((group, idx) => {\r\n        if (!group.isGenTpl) {\r\n          return this.$refs[group.key || `${this.formRefBase}__${idx}`]\r\n        }\r\n        return void 0\r\n      }).filter(item => !!item).flat()\r\n    },\r\n    formModels () {\r\n      if (this.mode === 'increase') {\r\n        //TODO increase mode to return formModels\r\n        return this.getFormRefs.map(form => {\r\n          return form.getFieldsValue()\r\n        })\r\n      } else {\r\n        return this.getFormRefs.map(form => {\r\n          const { $vnode: { data: { ref } } } = form\r\n          return {\r\n            key: ref,\r\n            value: form.getFieldsValue()\r\n          }\r\n        }).reduce((ret, props) => {\r\n          ret[props.key] = props.value\r\n          return ret\r\n        }, {})\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props, key) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      if (!this.preRequest) return\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        if (this.mode === 'increase') {\r\n          this.renderIncreaseForm(data)\r\n        }\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    renderIncreaseForm (data = {}) {\r\n      const formGroupValuesLength = data[this.fieldName].length\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const notGenTplPoolLength = this.readOnlyGroupMeta.filter(item => !item.isGenTpl).length\r\n      const genNum = formGroupValuesLength - notGenTplPoolLength\r\n      new Array(genNum).fill().forEach(() => {\r\n        const form = this.genForm(genTplTarget)\r\n        this.innerGroupMeta.push(form)\r\n      })\r\n      const formGroupValues = data[this.fieldName]\r\n      this.$nextTick(() => {\r\n        this.setFieldsValue(formGroupValues)\r\n      })\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      if (!url) return\r\n      const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (data = []) {\r\n      this.getFormRefs.forEach((form, idx) => {\r\n        form.setFieldsValue(data[idx])\r\n        form.evalDisabledExpression(data[idx])\r\n      })\r\n    },\r\n    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()))\r\n      const status = statusResults.every(item => item)\r\n      if (status) {\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    },\r\n    genForm (base) {\r\n      const { elements, title, buttonGroupMeta } = base\r\n      return {\r\n        elements: JSON.parse(JSON.stringify(elements)),\r\n        buttonGroupMeta,\r\n        title: `${title}${this.increaseCount++}`,\r\n        _gen: true\r\n      }\r\n    },\r\n    handleClickDelete (props = {}, attr = {}, idx) {\r\n      this.innerGroupMeta.splice(idx, 1)\r\n      this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\r\n      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)\r\n      const form = this.genForm(genTplTarget)\r\n      this.innerGroupMeta.push(form)\r\n    }\r\n  },\r\n  async mounted() {\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n  &.form-group-model__wrapper {\r\n    background: unset;\r\n    padding-bottom: 80px;\r\n    .form-group-model__from {\r\n      background: #fff;\r\n      margin-top: 16px;\r\n      &:first-child {\r\n        margin-top: unset;\r\n      }\r\n      .form-group-model__form--title {\r\n        width: 100%;\r\n        height: 56px;\r\n        padding: 0 16px;\r\n        border-bottom: 1px solid;\r\n        border-color: var(--idooel-form-title-border-color);\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n      }\r\n      .form-group-model__form--content {\r\n        padding: 16px;\r\n      }\r\n    }\r\n    .form-group-model__form--footer {\r\n      width: 100%;\r\n      height: 64px;\r\n      background: #fff;\r\n      position: fixed;\r\n      bottom: 0;\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      justify-content: end;\r\n    }\r\n  }\r\n}\r\n</style>",".ele.form-group-model__wrapper {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n  width: 100%;\n  height: 56px;\n  padding: 0 16px;\n  border-bottom: 1px solid;\n  border-color: var(--idooel-form-title-border-color);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n  width: 100%;\n  height: 64px;\n  background: #fff;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$A = "data-v-b64cef74";
+    const __vue_scope_id__$A = "data-v-e28e6ea2";
     /* module identifier */
     const __vue_module_identifier__$A = undefined;
     /* functional template */
@@ -4303,6 +4301,7 @@
         }).then(resp => {
           this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, {
             ...props,
+            response: resp,
             formModel: {
               ...this.formModels(),
               ...(resp.data || {})
@@ -4376,9 +4375,9 @@
       validateFields() {
         return this.$refs[this.formRef].validateFields();
       },
-      [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+      async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
         if (this.globalDisabled) return;
-        const status = this.$refs[this.formRef].validateFields();
+        const status = await this.$refs[this.formRef].validateFields();
         if (status) {
           //TODO fieldMap
           return this.submitRequestTrigger(props);
@@ -4470,11 +4469,11 @@
     /* style */
     const __vue_inject_styles__$z = function (inject) {
       if (!inject) return
-      inject("data-v-1aa83856_0", { source: ".form__model--wrapper[data-v-1aa83856] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-1aa83856] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-1aa83856] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-1aa83856] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAgNA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC/MA;ADgNA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC9MA;ADgNA;EACA,aAAA;AC9MA;ADgNA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC9MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" @change=\"onChangeFormStatus($event)\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  provide () {\r\n    return {\r\n      [CONTEXT]: () => {\r\n        return {\r\n          exposed: this.exposed\r\n        }\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields,\r\n        getFieldsValue: this.getFieldsValue,\r\n        executeExpressions: this.executeExpressions,\r\n        route: this.$route,\r\n        [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })\r\n    },\r\n    formModels (fieldNames) {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.setFieldsValue(data)\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return type.isApi(url) ? url : this.executeExpression(url)\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.$refs[this.formRef].getFieldsValue(fieldNames)\r\n    },\r\n    executeExpressions () {\r\n      return this.$refs[this.formRef].evalShowExpression()\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    this.setFieldsValue(this.collectDefaultValues())\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n    this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-0377ec6e_0", { source: ".form__model--wrapper[data-v-0377ec6e] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-0377ec6e] {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content[data-v-0377ec6e] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-0377ec6e] {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAgNA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC/MA;ADgNA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC9MA;ADgNA;EACA,aAAA;AC9MA;ADgNA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC9MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"form__model--wrapper\">\r\n    <div class=\"form-model__title\" v-if=\"title\">\r\n      {{ title }}\r\n    </div>\r\n    <div class=\"form-model__content\">\r\n      <ele-alert style=\"margin-bottom: 16px;\" v-if=\"alertMeta\" v-bind=\"alertMeta\"></ele-alert>\r\n      <ele-form :ref=\"formRef\" @change=\"onChangeFormStatus($event)\" :elements=\"elements\" :disabled=\"globalDisabled\"></ele-form>\r\n    </div>\r\n    <div class=\"form-model__footer\" v-if=\"footerMeta\">\r\n      <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net, type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nexport default {\r\n  name: 'ele-form-model',\r\n  props: {\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    title: {\r\n      type: String\r\n    },\r\n    formMeta: {\r\n      type: Object\r\n    },\r\n    footerMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  data() {\r\n    return {}\r\n  },\r\n  provide () {\r\n    return {\r\n      [CONTEXT]: () => {\r\n        return {\r\n          exposed: this.exposed\r\n        }\r\n      }\r\n    }\r\n  },\r\n  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        validateFields: this.validateFields,\r\n        getFieldsValue: this.getFieldsValue,\r\n        executeExpressions: this.executeExpressions,\r\n        route: this.$route,\r\n        [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger\r\n      }\r\n    },\r\n    assignAttrForEvents () {\r\n      const events = this.footerElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\r\n        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]\r\n      }\r\n    },\r\n    elements () {\r\n      const { elements } = this.formMeta\r\n      return elements\r\n    },\r\n    preRequest () {\r\n      const { preRequest = {} } = this.formMeta\r\n      return preRequest\r\n    },\r\n    infoRequest () {\r\n      const { infoRequest = {} } = this.formMeta\r\n      return infoRequest\r\n    },\r\n    alertMeta () {\r\n      const { alert = {} } = this.formMeta\r\n      return type.isEmpty(alert) ? null : alert\r\n    },\r\n    submitRequest () {\r\n      const { submitRequest = {} } = this.formMeta\r\n      return submitRequest\r\n    },\r\n    footerElements () {\r\n      const { elements } = this.footerMeta\r\n      return elements.call(this)\r\n    },\r\n    expressionData () {\r\n      return {\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta\r\n      }\r\n    },\r\n    routeMetaMode () {\r\n      return this.$route.meta.mode\r\n    }\r\n  },\r\n  methods: {\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    onChangeFormStatus (props) {\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })\r\n    },\r\n    formModels (fieldNames) {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}\r\n    },\r\n    executeExpression (expression, dataSource = {}) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n    },\r\n    execFieldMap (fieldMap = {}, dataSource = {}) {\r\n      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})\r\n      return ret\r\n    },\r\n    async submitRequestTrigger (props = {}) {\r\n      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {\r\n        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, response: resp, formModel: { ...this.formModels(), ...resp.data || {} } })\r\n        return resp.data\r\n      })\r\n      return ret\r\n    },\r\n    async infoRequestTrigger () {\r\n      if (PAGE_STATUS.CREATE == this.routeMetaMode) return\r\n      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\r\n        const { data = {} } = resp\r\n        this.setFieldsValue(data)\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n      })\r\n    },\r\n    async preRequestTrigger () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n      const currentUrl = this.executeExpressionForUrl(url)\r\n      if (!currentUrl) return\r\n      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })\r\n      this.setFieldsValue(data)\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    executeExpressionForUrl (url) {\r\n      return type.isApi(url) ? url : this.executeExpression(url)\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.$refs[this.formRef].getFieldsValue(fieldNames)\r\n    },\r\n    executeExpressions () {\r\n      return this.$refs[this.formRef].evalShowExpression()\r\n    },\r\n    validateFields () {\r\n      return this.$refs[this.formRef].validateFields()\r\n    },\r\n    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      if (this.globalDisabled) return\r\n      const status = await this.$refs[this.formRef].validateFields()\r\n      if (status) {\r\n        //TODO fieldMap\r\n        return this.submitRequestTrigger(props)\r\n      } else {\r\n        return false\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n    }\r\n  },\r\n  async mounted() {\r\n    this.setFieldsValue(this.collectDefaultValues())\r\n    await this.preRequestTrigger()\r\n    await this.infoRequestTrigger()\r\n    this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  overflow: auto;\r\n  background: #fff;\r\n  .form-model__title {\r\n    height: 56px;\r\n    padding: 0 16px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n  }\r\n  .form-model__content {\r\n    padding: 16px;\r\n  }\r\n  .form-model__footer {\r\n    /* width: 100%; */\r\n    height: 64px;\r\n    position: fixed;\r\n    bottom: 0;\r\n    display: flex;\r\n    float: right;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: end;\r\n  }\r\n}\r\n</style>",".form__model--wrapper {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title {\n  height: 56px;\n  padding: 0 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n  /* width: 100%; */\n  height: 64px;\n  position: fixed;\n  bottom: 0;\n  display: flex;\n  float: right;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$z = "data-v-1aa83856";
+    const __vue_scope_id__$z = "data-v-0377ec6e";
     /* module identifier */
     const __vue_module_identifier__$z = undefined;
     /* functional template */
@@ -5080,11 +5079,11 @@
         this.setFieldsValue(defaultValues);
       },
       validateFields() {
-        let ret = false;
-        this.form.validateFields((error, values) => {
-          ret = !error;
+        return new Promise(resolve => {
+          this.form.validateFields((error, values) => {
+            resolve(!error);
+          });
         });
-        return ret;
       },
       setFieldsValue(props = {}) {
         this.$nextTick(() => {
@@ -5692,11 +5691,11 @@
     /* style */
     const __vue_inject_styles__$w = function (inject) {
       if (!inject) return
-      inject("data-v-6c735b44_0", { source: ".ele__form--wrapper[data-v-6c735b44] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiVA;EACA,gBAAA;AChVA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele__form--wrapper\">\r\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n      <a-row :gutter=\"24\">\r\n        <template v-for=\"ele in elements\">\r\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n            <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :max-length=\"ele.maxLength\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-input>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-textarea' || ele.type == 'Textarea'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-textarea \r\n                  @change=\"onChange($event, ele)\"\r\n                  :max-length=\"ele.maxLength\"\r\n                  :autosize=\"ele.autosize\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :allow-clear=\"ele.allowClear\"\r\n                  :placeholder=\"ele.placeholder\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n                  style=\"width:100%;\">\r\n                </ele-textarea>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select' || ele.type == 'Select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :mode=\"ele.mode\"\r\n                  :code=\"ele.code\"\r\n                  :init=\"ele.init\"\r\n                  :url=\"ele.url\"\r\n                  :params=\"ele.params\" \r\n                  @change=\"onChange($event, ele)\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-upload'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  :ext=\"ele.ext\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :accept=\"ele.accept\"\r\n                  :extensions=\"ele.extensions\"\r\n                  :size=\"ele.size\"\r\n                  :icon=\"ele.icon\"\r\n                  :url=\"ele.url\"\r\n                  :message=\"ele.message\" \r\n                  style=\"width:100%;\">\r\n                </ele-upload>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date-range \r\n                :disabled=\"executeExpression(ele._disabled)\" \r\n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                style=\"width:100%;\">\r\n              </ele-date-range>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date\r\n                  :format=\"ele.format\"\r\n                  :mode=\"ele.mode\"\r\n                  :show-time=\"ele.showTime\"\r\n                  :show-today=\"ele.showToday\"\r\n                  :value-format=\"ele.valueFormat\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-date>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input-number \r\n                  @change=\"onChange($event, ele)\" \r\n                  :precision=\"ele.precision\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  v-bind=\"ele.props\" \r\n                  style=\"width:100%;\">\r\n                </ele-input-number>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-checkbox \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-checkbox>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-radio' || ele.type == 'Radio'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-radio \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :data-source=\"ele.optionList\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-radio>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-form-img-crop\r\n                  @change=\"onChange($event, ele)\"\r\n                  :width=\"ele.width\"\r\n                  :height=\"ele.height\"\r\n                  :modal-title=\"ele.modalTitle\"\r\n                  :cropper-config=\"ele.cropperConfig\"\r\n                  :uploadFileConfig=\"ele.uploadFileConfig\"\r\n                  :oper-text=\"ele.operText\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-form-img-crop>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-tree-select\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-tree-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity-modal-table\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity-modal-table>\r\n              </a-form-item>\r\n            </template>\r\n          </a-col>\r\n        </template>\r\n      </a-row>\r\n    </a-form>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nimport { CONTEXT } from '../../utils'\r\nexport default {\r\n  name: 'ele-form',\r\n  props: {\r\n    value: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    formName: {\r\n      type: [Number, String],\r\n      default: 'coordinated'\r\n    },\r\n    elements: {\r\n      type: Array,\r\n      default: () => []\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      formModel: {}\r\n    }\r\n  },\r\n  inject: {\r\n    [CONTEXT]: {\r\n      default: () => (() => ({}))\r\n    }\r\n  },\r\n  computed: {\r\n    contextData () {\r\n      return this[CONTEXT].call(this)\r\n    },\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    form () {\r\n      const ref = this.$form.createForm(this, { name: this.formName, onFieldsChange: this.onFieldsChange })\r\n      return ref\r\n    },\r\n    exposedMethods () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        getFieldsValue: this.getFieldsValue\r\n      }\r\n    }\r\n  },\r\n  created () {\r\n    this.setDefaultValues()\r\n  },\r\n  methods: {\r\n    onFieldsChange () {\r\n      this.executeOptionListExpression()\r\n    },\r\n    executeOptionListExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (ele.optionList) {\r\n          const optionList = this.evalOptionListExpression(ele.optionList)\r\n          this.$set(ele, 'optionList', optionList)\r\n        }\r\n      })\r\n    },\r\n    evalOptionListExpression (optionList = []) {\r\n      const executeExpression = (expression) => {\r\n        if (type.isBool(expression)) return expression\r\n        if (type.isEmpty(expression)) return true\r\n        const ret = parse(expression, { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n        return ret\r\n      }\r\n      return optionList.map(item => {\r\n        const { show } = item\r\n        return { ...item, _show: executeExpression(show) }\r\n      })\r\n    },\r\n    setFormModel (props = {}) {\r\n      this.formModel = props\r\n      this.dispatchExpression()\r\n    },\r\n    rebuildRules (rules = []) {\r\n      //TODO\r\n      rules.map(rule => {\r\n        const { validator } = rule\r\n        if (validator) {\r\n          validator.formModel = this.getFieldsValue()\r\n          validator.exposed = this.exposedMethods\r\n        }\r\n      })\r\n      return rules\r\n    },\r\n    dispatchExpression () {\r\n      this.evalDisabledExpression()\r\n      this.evalShowExpression()\r\n    },\r\n    evalDisabledExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n        const { disabled } = ele\r\n        const ret = this.executeExpression(disabled)\r\n        this.$set(ele, '_disabled', ret)\r\n      })\r\n    },\r\n    evalShowExpression () {\r\n      this.elements.forEach(ele => {\r\n        const { show = true } = ele\r\n        const ret = this.executeExpression(show)\r\n        this.$set(ele, '_show', ret)\r\n      })\r\n    },\r\n    executeExpression (expression) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\r\n    },\r\n    onChange (value, props) {\r\n      const { name } = props\r\n      this.$set(this.formModel, name, value)\r\n      this.dispatchExpression()\r\n      this.setFieldsValue({ [name]: value })\r\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n    },\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    //TODO deprecated in the future, need to be implemented in the outer component\r\n    setDefaultValues () {\r\n      const defaultValues = this.collectDefaultValues()\r\n      this.setFormModel(defaultValues)\r\n      this.setFieldsValue(defaultValues)\r\n    },\r\n    validateFields () {\r\n      let ret = false\r\n      this.form.validateFields((error, values) => {\r\n        ret = !error\r\n      })\r\n      return ret\r\n    },\r\n    setFieldsValue (props = {}) {\r\n      this.$nextTick(() => {\r\n        this.form.setFieldsValue(props)\r\n      })\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.form.getFieldsValue(fieldNames)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\r\n    this.dispatchExpression()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n  background: #fff;\r\n  .ant-form-item {\r\n  }\r\n}\r\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+      inject("data-v-750019c0_0", { source: ".ele__form--wrapper[data-v-750019c0] {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiVA;EACA,gBAAA;AChVA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele__form--wrapper\">\r\n    <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\r\n      <a-row :gutter=\"24\">\r\n        <template v-for=\"ele in elements\">\r\n          <a-col v-if=\"executeExpression(ele._show)\" :span=\"ele.span\" :key=\"ele.name\">\r\n            <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :max-length=\"ele.maxLength\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-input>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-textarea' || ele.type == 'Textarea'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-textarea \r\n                  @change=\"onChange($event, ele)\"\r\n                  :max-length=\"ele.maxLength\"\r\n                  :autosize=\"ele.autosize\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :allow-clear=\"ele.allowClear\"\r\n                  :placeholder=\"ele.placeholder\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\"\r\n                  style=\"width:100%;\">\r\n                </ele-textarea>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select' || ele.type == 'Select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :mode=\"ele.mode\"\r\n                  :code=\"ele.code\"\r\n                  :init=\"ele.init\"\r\n                  :url=\"ele.url\"\r\n                  :params=\"ele.params\" \r\n                  @change=\"onChange($event, ele)\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-upload'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  :ext=\"ele.ext\"\r\n                  :multiple=\"ele.multiple\"\r\n                  :accept=\"ele.accept\"\r\n                  :extensions=\"ele.extensions\"\r\n                  :size=\"ele.size\"\r\n                  :icon=\"ele.icon\"\r\n                  :url=\"ele.url\"\r\n                  :message=\"ele.message\" \r\n                  style=\"width:100%;\">\r\n                </ele-upload>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date-range'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date-range \r\n                :disabled=\"executeExpression(ele._disabled)\" \r\n                v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                style=\"width:100%;\">\r\n              </ele-date-range>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-date'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-date\r\n                  :format=\"ele.format\"\r\n                  :mode=\"ele.mode\"\r\n                  :show-time=\"ele.showTime\"\r\n                  :show-today=\"ele.showToday\"\r\n                  :value-format=\"ele.valueFormat\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-date>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity' || ele.type == 'SelectEntity'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'InputNumber' || ele.type == 'ele-input-number'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-input-number \r\n                  @change=\"onChange($event, ele)\" \r\n                  :precision=\"ele.precision\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  v-bind=\"ele.props\" \r\n                  style=\"width:100%;\">\r\n                </ele-input-number>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-Checkbox' || ele.type == 'Checkbox'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-checkbox \r\n                  :data-source=\"ele.optionList\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-checkbox>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-radio' || ele.type == 'Radio'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-radio \r\n                  @change=\"onChange($event, ele)\" \r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  :data-source=\"ele.optionList\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-radio>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-form-img-crop'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-form-img-crop\r\n                  @change=\"onChange($event, ele)\"\r\n                  :width=\"ele.width\"\r\n                  :height=\"ele.height\"\r\n                  :modal-title=\"ele.modalTitle\"\r\n                  :cropper-config=\"ele.cropperConfig\"\r\n                  :uploadFileConfig=\"ele.uploadFileConfig\"\r\n                  :oper-text=\"ele.operText\"\r\n                  :disabled=\"executeExpression(ele._disabled)\" \r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-form-img-crop>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-tree-select'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-tree-select\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-tree-select>\r\n              </a-form-item>\r\n            </template>\r\n            <template v-else-if=\"ele.type == 'ele-select-entity-modal-table'\">\r\n              <a-form-item :label=\"`${ele.label}：`\">\r\n                <ele-select-entity-modal-table\r\n                  @change=\"onChange($event, ele)\"\r\n                  :disabled=\"executeExpression(ele._disabled)\"\r\n                  v-bind=\"ele.meta\"\r\n                  v-decorator=\"[ele.name, { rules: rebuildRules(ele.rules) }]\" \r\n                  style=\"width:100%;\">\r\n                </ele-select-entity-modal-table>\r\n              </a-form-item>\r\n            </template>\r\n          </a-col>\r\n        </template>\r\n      </a-row>\r\n    </a-form>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nimport { CONTEXT } from '../../utils'\r\nexport default {\r\n  name: 'ele-form',\r\n  props: {\r\n    value: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    disabled: {\r\n      type: [Boolean, String],\r\n      default: '_routeMeta.disabled'\r\n    },\r\n    formName: {\r\n      type: [Number, String],\r\n      default: 'coordinated'\r\n    },\r\n    elements: {\r\n      type: Array,\r\n      default: () => []\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      formModel: {}\r\n    }\r\n  },\r\n  inject: {\r\n    [CONTEXT]: {\r\n      default: () => (() => ({}))\r\n    }\r\n  },\r\n  computed: {\r\n    contextData () {\r\n      return this[CONTEXT].call(this)\r\n    },\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    form () {\r\n      const ref = this.$form.createForm(this, { name: this.formName, onFieldsChange: this.onFieldsChange })\r\n      return ref\r\n    },\r\n    exposedMethods () {\r\n      return {\r\n        setFieldsValue: this.setFieldsValue,\r\n        getFieldsValue: this.getFieldsValue\r\n      }\r\n    }\r\n  },\r\n  created () {\r\n    this.setDefaultValues()\r\n  },\r\n  methods: {\r\n    onFieldsChange () {\r\n      this.executeOptionListExpression()\r\n    },\r\n    executeOptionListExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (ele.optionList) {\r\n          const optionList = this.evalOptionListExpression(ele.optionList)\r\n          this.$set(ele, 'optionList', optionList)\r\n        }\r\n      })\r\n    },\r\n    evalOptionListExpression (optionList = []) {\r\n      const executeExpression = (expression) => {\r\n        if (type.isBool(expression)) return expression\r\n        if (type.isEmpty(expression)) return true\r\n        const ret = parse(expression, { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })\r\n        return ret\r\n      }\r\n      return optionList.map(item => {\r\n        const { show } = item\r\n        return { ...item, _show: executeExpression(show) }\r\n      })\r\n    },\r\n    setFormModel (props = {}) {\r\n      this.formModel = props\r\n      this.dispatchExpression()\r\n    },\r\n    rebuildRules (rules = []) {\r\n      //TODO\r\n      rules.map(rule => {\r\n        const { validator } = rule\r\n        if (validator) {\r\n          validator.formModel = this.getFieldsValue()\r\n          validator.exposed = this.exposedMethods\r\n        }\r\n      })\r\n      return rules\r\n    },\r\n    dispatchExpression () {\r\n      this.evalDisabledExpression()\r\n      this.evalShowExpression()\r\n    },\r\n    evalDisabledExpression () {\r\n      this.elements.forEach(ele => {\r\n        if (this.globalDisabled) return this.$set(ele, '_disabled', true)\r\n        const { disabled } = ele\r\n        const ret = this.executeExpression(disabled)\r\n        this.$set(ele, '_disabled', ret)\r\n      })\r\n    },\r\n    evalShowExpression () {\r\n      this.elements.forEach(ele => {\r\n        const { show = true } = ele\r\n        const ret = this.executeExpression(show)\r\n        this.$set(ele, '_show', ret)\r\n      })\r\n    },\r\n    executeExpression (expression) {\r\n      if (type.isBool(expression)) return expression\r\n      if (type.isEmpty(expression)) return false\r\n      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })\r\n    },\r\n    onChange (value, props) {\r\n      const { name } = props\r\n      this.$set(this.formModel, name, value)\r\n      this.dispatchExpression()\r\n      this.setFieldsValue({ [name]: value })\r\n      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\r\n    },\r\n    collectDefaultValues () {\r\n      const ret = this.elements.reduce((ret, props) => {\r\n        const { name, defaultValue } = props\r\n        if (defaultValue) {\r\n          ret[name] = defaultValue\r\n        }\r\n        return ret\r\n      }, {})\r\n      return ret\r\n    },\r\n    //TODO deprecated in the future, need to be implemented in the outer component\r\n    setDefaultValues () {\r\n      const defaultValues = this.collectDefaultValues()\r\n      this.setFormModel(defaultValues)\r\n      this.setFieldsValue(defaultValues)\r\n    },\r\n    validateFields () {\r\n      return new Promise((resolve) => {\r\n        this.form.validateFields((error, values) => {\r\n          resolve(!error)\r\n        })\r\n      })\r\n    },\r\n    setFieldsValue (props = {}) {\r\n      this.$nextTick(() => {\r\n        this.form.setFieldsValue(props)\r\n      })\r\n    },\r\n    getFieldsValue (fieldNames) {\r\n      return this.form.getFieldsValue(fieldNames)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$emit('x:mounted', { setFormModel: this.setFormModel })\r\n    this.dispatchExpression()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele__form--wrapper {\r\n  background: #fff;\r\n  .ant-form-item {\r\n  }\r\n}\r\n</style>",".ele__form--wrapper {\n  background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$w = "data-v-6c735b44";
+    const __vue_scope_id__$w = "data-v-750019c0";
     /* module identifier */
     const __vue_module_identifier__$w = undefined;
     /* functional template */
@@ -14238,9 +14237,9 @@
       validateFields() {
         return this.$refs[this.formRef].validateFields();
       },
-      [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
+      async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
         if (this.globalDisabled) return;
-        const status = this.$refs[this.formRef].validateFields();
+        const status = await this.$refs[this.formRef].validateFields();
         if (status) {
           //TODO fieldMap
           return this.submitRequestTrigger(props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.2-beta.26",
+  "version": "0.0.2-beta.27",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",

package/packages/composite-components/modal-form/src/index.vue

@@ -211,9 +211,9 @@ export default {
     validateFields () {
       return this.$refs[this.formRef].validateFields()
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
       if (this.globalDisabled) return
-      const status = this.$refs[this.formRef].validateFields()
+      const status = await this.$refs[this.formRef].validateFields()
       if (status) {
         //TODO fieldMap
         return this.submitRequestTrigger(props)

package/packages/form/src/index.vue

@@ -312,11 +312,11 @@ export default {
       this.setFieldsValue(defaultValues)
     },
     validateFields () {
-      let ret = false
-      this.form.validateFields((error, values) => {
-        ret = !error
+      return new Promise((resolve) => {
+        this.form.validateFields((error, values) => {
+          resolve(!error)
+        })
       })
-      return ret
     },
     setFieldsValue (props = {}) {
       this.$nextTick(() => {

package/packages/models/form-group-model/src/index.vue

@@ -192,11 +192,9 @@ export default {
         form.evalDisabledExpression(data[idx])
       })
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
-      const status = this.getFormRefs.map(form => {
-        const status = form.validateFields()
-        return status
-      }).every(item => item)
+    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+      const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()))
+      const status = statusResults.every(item => item)
       if (status) {
         return this.submitRequestTrigger(props)
       } else {

package/packages/models/form-model/src/index.vue

@@ -143,7 +143,7 @@ export default {
       const currentUrl = this.executeExpressionForUrl(url)
       if (!currentUrl) return
       const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {
-        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })
+        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, response: resp, formModel: { ...this.formModels(), ...resp.data || {} } })
         return resp.data
       })
       return ret
@@ -182,9 +182,9 @@ export default {
     validateFields () {
       return this.$refs[this.formRef].validateFields()
     },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
       if (this.globalDisabled) return
-      const status = this.$refs[this.formRef].validateFields()
+      const status = await this.$refs[this.formRef].validateFields()
       if (status) {
         //TODO fieldMap
         return this.submitRequestTrigger(props)