@idooel/components 0.0.1-beta.23 → 0.0.1-beta.24

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

@@ -4172,6 +4172,12 @@ const BUILT_IN_EVENT_NAMES = {
   NEXT: 'next',
   PREVIOUS: 'previous'
 };
+const PAGE_STATUS = {
+  CREATE: 'create',
+  //TODO implement edit and view
+  EDIT: 'edit',
+  VIEW: 'view'
+};
 const RESERVE_EVENT_NAMES = {
   WATCH_FORM_STATUS: 'watch-form-status',
   INIT_FORM: 'init-form'
@@ -4235,6 +4241,9 @@ var script$b = {
     }
   },
   computed: {
+    routeMetaMode() {
+      return this.$route.meta.mode;
+    },
     readOnlyGroupMeta() {
       return this.groupMeta.call(this);
     },
@@ -4316,7 +4325,7 @@ var script$b = {
       });
     },
     async infoRequestTrigger() {
-      if (!this.infoRequest) return;
+      if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return;
       const {
         url,
         requestType,
@@ -4576,11 +4585,11 @@ __vue_render__$b._withStripped = true;
   /* style */
   const __vue_inject_styles__$b = function (inject) {
     if (!inject) return
-    inject("data-v-1489daf3_0", { source: ".ele.form-group-model__wrapper[data-v-1489daf3] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-1489daf3] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-1489daf3]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-1489daf3] {\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-1489daf3] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-1489daf3] {\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:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA8OA;EACA,iBAAA;EACA,oBAAA;AC7OA;AD8OA;EACA,gBAAA;EACA,gBAAA;AC5OA;AD6OA;EACA,iBAAA;AC3OA;AD6OA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;AC3OA;AD6OA;EACA,aAAA;AC3OA;AD8OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC5OA;;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 Form from '../../form/src/index.vue'\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap } from '../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { type, net } from '@idooel/shared'\r\nimport EleButtonGroup from '../../composite-components/button-group/src/index.vue'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  components: {\r\n    [Form.name]: Form,\r\n    [EleButtonGroup.name]: EleButtonGroup\r\n  },\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    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) 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      })\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-ab264274_0", { source: ".ele.form-group-model__wrapper[data-v-ab264274] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-ab264274] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-ab264274]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-ab264274] {\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-ab264274] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-ab264274] {\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:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiPA;EACA,iBAAA;EACA,oBAAA;AChPA;ADiPA;EACA,gBAAA;EACA,gBAAA;AC/OA;ADgPA;EACA,iBAAA;AC9OA;ADgPA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;AC9OA;ADgPA;EACA,aAAA;AC9OA;ADiPA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC/OA;;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 Form from '../../form/src/index.vue'\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\nimport EleButtonGroup from '../../composite-components/button-group/src/index.vue'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  components: {\r\n    [Form.name]: Form,\r\n    [EleButtonGroup.name]: EleButtonGroup\r\n  },\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      })\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 });
 
   };
   /* scoped */
-  const __vue_scope_id__$b = "data-v-1489daf3";
+  const __vue_scope_id__$b = "data-v-ab264274";
   /* module identifier */
   const __vue_module_identifier__$b = undefined;
   /* functional template */
@@ -4687,6 +4696,9 @@ var script$a = {
         _route: this.$route.query,
         _routeMeta: this.$route.meta
       };
+    },
+    routeMetaMode() {
+      return this.$route.meta.mode;
     }
   },
   methods: {
@@ -4740,6 +4752,7 @@ var script$a = {
       return ret;
     },
     async infoRequestTrigger() {
+      if (PAGE_STATUS.CREATE == this.routeMetaMode) return;
       const {
         url,
         requestType,
@@ -4863,11 +4876,11 @@ __vue_render__$a._withStripped = true;
   /* style */
   const __vue_inject_styles__$a = function (inject) {
     if (!inject) return
-    inject("data-v-d0737210_0", { source: ".form__model--wrapper[data-v-d0737210] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-d0737210] {\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-d0737210] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-d0737210] {\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:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6JA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC5JA;AD6JA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC3JA;AD6JA;EACA,aAAA;AC3JA;AD6JA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC3JA;;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-form :ref=\"formRef\" :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 EleButtonGroup from '../../composite-components/button-group/src/index.vue'\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_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  components: {\r\n    EleButtonGroup\r\n  },\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  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\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() })\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    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  },\r\n  methods: {\r\n    formModels () {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}\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, { _route: this.$route.query, ...dataSource})\r\n      return ret\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.formModels() }, { headers }).then(resp => {\r\n        console.log(resp.data)\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      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        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      if (!url) return\r\n      const { data } = await net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers })\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\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    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.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-cf22dd60_0", { source: ".form__model--wrapper[data-v-cf22dd60] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-cf22dd60] {\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-cf22dd60] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-cf22dd60] {\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:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiKA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AChKA;ADiKA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC/JA;ADiKA;EACA,aAAA;AC/JA;ADiKA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC/JA;;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-form :ref=\"formRef\" :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 EleButtonGroup from '../../composite-components/button-group/src/index.vue'\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS } 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  components: {\r\n    EleButtonGroup\r\n  },\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  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\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() })\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    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    formModels () {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}\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, { _route: this.$route.query, ...dataSource})\r\n      return ret\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.formModels() }, { headers }).then(resp => {\r\n        console.log(resp.data)\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      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...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      if (!url) return\r\n      const { data } = await net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers })\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\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    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.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__$a = "data-v-d0737210";
+  const __vue_scope_id__$a = "data-v-cf22dd60";
   /* module identifier */
   const __vue_module_identifier__$a = undefined;
   /* functional template */

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

@@ -4179,6 +4179,12 @@
     NEXT: 'next',
     PREVIOUS: 'previous'
   };
+  const PAGE_STATUS = {
+    CREATE: 'create',
+    //TODO implement edit and view
+    EDIT: 'edit',
+    VIEW: 'view'
+  };
   const RESERVE_EVENT_NAMES = {
     WATCH_FORM_STATUS: 'watch-form-status',
     INIT_FORM: 'init-form'
@@ -4242,6 +4248,9 @@
       }
     },
     computed: {
+      routeMetaMode() {
+        return this.$route.meta.mode;
+      },
       readOnlyGroupMeta() {
         return this.groupMeta.call(this);
       },
@@ -4323,7 +4332,7 @@
         });
       },
       async infoRequestTrigger() {
-        if (!this.infoRequest) return;
+        if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return;
         const {
           url,
           requestType,
@@ -4583,11 +4592,11 @@
     /* style */
     const __vue_inject_styles__$b = function (inject) {
       if (!inject) return
-      inject("data-v-1489daf3_0", { source: ".ele.form-group-model__wrapper[data-v-1489daf3] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-1489daf3] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-1489daf3]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-1489daf3] {\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-1489daf3] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-1489daf3] {\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:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA8OA;EACA,iBAAA;EACA,oBAAA;AC7OA;AD8OA;EACA,gBAAA;EACA,gBAAA;AC5OA;AD6OA;EACA,iBAAA;AC3OA;AD6OA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;AC3OA;AD6OA;EACA,aAAA;AC3OA;AD8OA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC5OA;;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 Form from '../../form/src/index.vue'\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap } from '../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { type, net } from '@idooel/shared'\r\nimport EleButtonGroup from '../../composite-components/button-group/src/index.vue'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  components: {\r\n    [Form.name]: Form,\r\n    [EleButtonGroup.name]: EleButtonGroup\r\n  },\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    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) 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      })\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-ab264274_0", { source: ".ele.form-group-model__wrapper[data-v-ab264274] {\n  background: unset;\n  padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-ab264274] {\n  background: #fff;\n  margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-ab264274]:first-child {\n  margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-ab264274] {\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-ab264274] {\n  padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-ab264274] {\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:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form-group-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiPA;EACA,iBAAA;EACA,oBAAA;AChPA;ADiPA;EACA,gBAAA;EACA,gBAAA;AC/OA;ADgPA;EACA,iBAAA;AC9OA;ADgPA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;AC9OA;ADgPA;EACA,aAAA;AC9OA;ADiPA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC/OA;;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 Form from '../../form/src/index.vue'\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\nimport EleButtonGroup from '../../composite-components/button-group/src/index.vue'\r\nexport default {\r\n  name: 'ele-form-group-model',\r\n  components: {\r\n    [Form.name]: Form,\r\n    [EleButtonGroup.name]: EleButtonGroup\r\n  },\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      })\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 });
 
     };
     /* scoped */
-    const __vue_scope_id__$b = "data-v-1489daf3";
+    const __vue_scope_id__$b = "data-v-ab264274";
     /* module identifier */
     const __vue_module_identifier__$b = undefined;
     /* functional template */
@@ -4694,6 +4703,9 @@
           _route: this.$route.query,
           _routeMeta: this.$route.meta
         };
+      },
+      routeMetaMode() {
+        return this.$route.meta.mode;
       }
     },
     methods: {
@@ -4747,6 +4759,7 @@
         return ret;
       },
       async infoRequestTrigger() {
+        if (PAGE_STATUS.CREATE == this.routeMetaMode) return;
         const {
           url,
           requestType,
@@ -4870,11 +4883,11 @@
     /* style */
     const __vue_inject_styles__$a = function (inject) {
       if (!inject) return
-      inject("data-v-d0737210_0", { source: ".form__model--wrapper[data-v-d0737210] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-d0737210] {\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-d0737210] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-d0737210] {\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:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6JA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC5JA;AD6JA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC3JA;AD6JA;EACA,aAAA;AC3JA;AD6JA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC3JA;;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-form :ref=\"formRef\" :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 EleButtonGroup from '../../composite-components/button-group/src/index.vue'\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_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  components: {\r\n    EleButtonGroup\r\n  },\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  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\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() })\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    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  },\r\n  methods: {\r\n    formModels () {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}\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, { _route: this.$route.query, ...dataSource})\r\n      return ret\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.formModels() }, { headers }).then(resp => {\r\n        console.log(resp.data)\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      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        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      if (!url) return\r\n      const { data } = await net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers })\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\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    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.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-cf22dd60_0", { source: ".form__model--wrapper[data-v-cf22dd60] {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-cf22dd60] {\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-cf22dd60] {\n  padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-cf22dd60] {\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:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAiKA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AChKA;ADiKA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC/JA;ADiKA;EACA,aAAA;AC/JA;ADiKA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC/JA;;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-form :ref=\"formRef\" :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 EleButtonGroup from '../../composite-components/button-group/src/index.vue'\r\nimport { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS } 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  components: {\r\n    EleButtonGroup\r\n  },\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  computed: {\r\n    globalDisabled () {\r\n      return this.executeExpression(this.disabled)\r\n    },\r\n    formRef () {\r\n      return uuidv4()\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() })\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    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    formModels () {\r\n      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}\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, { _route: this.$route.query, ...dataSource})\r\n      return ret\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.formModels() }, { headers }).then(resp => {\r\n        console.log(resp.data)\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      if (!url) return\r\n      net[requestType.toLowerCase()](url, { ...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      if (!url) return\r\n      const { data } = await net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers })\r\n      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n    },\r\n    setFieldsValue (props) {\r\n      this.$refs[this.formRef].setFieldsValue(props)\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    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.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__$a = "data-v-d0737210";
+    const __vue_scope_id__$a = "data-v-cf22dd60";
     /* module identifier */
     const __vue_module_identifier__$a = undefined;
     /* functional template */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idooel/components",
-  "version": "0.0.1-beta.23",
+  "version": "0.0.1-beta.24",
   "description": "",
   "private": false,
   "main": "dist/@idooel/components.umd.js",

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

@@ -24,7 +24,7 @@
 
 <script>
 import Form from '../../form/src/index.vue'
-import { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap } from '../../utils'
+import { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../utils'
 import { v4 as uuidv4 } from 'uuid'
 import { type, net } from '@idooel/shared'
 import EleButtonGroup from '../../composite-components/button-group/src/index.vue'
@@ -78,6 +78,9 @@ export default {
     }
   },
   computed: {
+    routeMetaMode () {
+      return this.$route.meta.mode
+    },
     readOnlyGroupMeta () {
       return this.groupMeta.call(this)
     },
@@ -143,7 +146,7 @@ export default {
       this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })
     },
     async infoRequestTrigger () {
-      if (!this.infoRequest) return
+      if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) return
       const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest
       if (!url) return
       net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {

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

@@ -14,7 +14,7 @@
 
 <script>
 import EleButtonGroup from '../../composite-components/button-group/src/index.vue'
-import { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES } from '../../utils'
+import { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS } from '../../utils'
 import { v4 as uuidv4 } from 'uuid'
 import { net, type } from '@idooel/shared'
 import { parse } from '@idooel/expression'
@@ -87,6 +87,9 @@ export default {
         _route: this.$route.query,
         _routeMeta: this.$route.meta
       }
+    },
+    routeMetaMode () {
+      return this.$route.meta.mode
     }
   },
   methods: {
@@ -113,6 +116,7 @@ export default {
       return ret
     },
     async infoRequestTrigger () {
+      if (PAGE_STATUS.CREATE == this.routeMetaMode) return
       const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest
       if (!url) return
       net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {

package/packages/utils/index.js

@@ -8,7 +8,12 @@ export const BUILT_IN_EVENT_NAMES = {
   NEXT: 'next',
   PREVIOUS: 'previous'
 }
-
+export const PAGE_STATUS = {
+  CREATE: 'create',
+  //TODO implement edit and view
+  EDIT: 'edit',
+  VIEW: 'view'
+}
 export const RESERVE_EVENT_NAMES = {
   WATCH_FORM_STATUS: 'watch-form-status',
   INIT_FORM: 'init-form'