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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/@idooel/components.esm.js +210 -156
  2. package/dist/@idooel/components.umd.js +210 -156
  3. package/package.json +1 -1
  4. package/packages/composite-components/modal-form/src/index.vue +2 -2
  5. package/packages/form/src/index.vue +101 -50
  6. package/packages/models/form-group-model/src/index.vue +3 -5
  7. package/packages/models/form-model/src/index.vue +3 -3
package/dist/@idooel/components.esm.js CHANGED
@@ -3941,11 +3941,9 @@ var script$A = {
3941
3941
  form.evalDisabledExpression(data[idx]);
3942
3942
  });
3943
3943
  },
3944
- [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
3945
- const status = this.getFormRefs.map(form => {
3946
- const status = form.validateFields();
3947
- return status;
3948
- }).every(item => item);
3944
+ async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
3945
+ const statusResults = await Promise.all(this.getFormRefs.map(form => form.validateFields()));
3946
+ const status = statusResults.every(item => item);
3949
3947
  if (status) {
3950
3948
  return this.submitRequestTrigger(props);
3951
3949
  } else {
@@ -4100,11 +4098,11 @@ __vue_render__$A._withStripped = true;
4100
4098
  /* style */
4101
4099
  const __vue_inject_styles__$A = function (inject) {
4102
4100
  if (!inject) return
4103
- 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 });
4101
+ 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 });
4104
4102
 
4105
4103
  };
4106
4104
  /* scoped */
4107
- const __vue_scope_id__$A = "data-v-b64cef74";
4105
+ const __vue_scope_id__$A = "data-v-e28e6ea2";
4108
4106
  /* module identifier */
4109
4107
  const __vue_module_identifier__$A = undefined;
4110
4108
  /* functional template */
@@ -4298,6 +4296,7 @@ var script$z = {
4298
4296
  }).then(resp => {
4299
4297
  this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, {
4300
4298
  ...props,
4299
+ response: resp,
4301
4300
  formModel: {
4302
4301
  ...this.formModels(),
4303
4302
  ...(resp.data || {})
@@ -4371,9 +4370,9 @@ var script$z = {
4371
4370
  validateFields() {
4372
4371
  return this.$refs[this.formRef].validateFields();
4373
4372
  },
4374
- [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
4373
+ async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
4375
4374
  if (this.globalDisabled) return;
4376
- const status = this.$refs[this.formRef].validateFields();
4375
+ const status = await this.$refs[this.formRef].validateFields();
4377
4376
  if (status) {
4378
4377
  //TODO fieldMap
4379
4378
  return this.submitRequestTrigger(props);
@@ -4465,11 +4464,11 @@ __vue_render__$z._withStripped = true;
4465
4464
  /* style */
4466
4465
  const __vue_inject_styles__$z = function (inject) {
4467
4466
  if (!inject) return
4468
- 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 });
4467
+ 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 });
4469
4468
 
4470
4469
  };
4471
4470
  /* scoped */
4472
- const __vue_scope_id__$z = "data-v-1aa83856";
4471
+ const __vue_scope_id__$z = "data-v-0377ec6e";
4473
4472
  /* module identifier */
4474
4473
  const __vue_module_identifier__$z = undefined;
4475
4474
  /* functional template */
@@ -4957,6 +4956,7 @@ var script$w = {
4957
4956
  methods: {
4958
4957
  onFieldsChange() {
4959
4958
  this.executeOptionListExpression();
4959
+ this.dispatchExpression();
4960
4960
  },
4961
4961
  executeOptionListExpression() {
4962
4962
  this.elements.forEach(ele => {
@@ -4992,22 +4992,81 @@ var script$w = {
4992
4992
  this.formModel = props;
4993
4993
  this.dispatchExpression();
4994
4994
  },
4995
- rebuildRules(rules = []) {
4996
- //TODO
4997
- rules.map(rule => {
4995
+ rebuildRules(ele) {
4996
+ const {
4997
+ rules = []
4998
+ } = ele;
4999
+ const nextRules = rules.map(rule => {
5000
+ const nextRule = {
5001
+ ...rule
5002
+ };
4998
5003
  const {
4999
- validator
5000
- } = rule;
5004
+ validator,
5005
+ required
5006
+ } = nextRule;
5007
+ // 支持 validator 函数
5001
5008
  if (validator) {
5002
- validator.formModel = this.getFieldsValue();
5003
- validator.exposed = this.exposedMethods;
5009
+ nextRule.validator = (rule, value, cb) => {
5010
+ validator.formModel = this.getFieldsValue();
5011
+ validator.exposed = this.exposedMethods;
5012
+ return validator(rule, value, cb);
5013
+ };
5014
+ }
5015
+ // 支持 rules 内部的 required 表达式
5016
+ if (required !== undefined && type.isStr(required)) {
5017
+ nextRule.required = this.executeExpression(required);
5004
5018
  }
5019
+ return nextRule;
5005
5020
  });
5006
- return rules;
5021
+ // 支持顶层 required 表达式（优先级高于 rules 内部）
5022
+ const {
5023
+ required
5024
+ } = ele;
5025
+ if (required !== undefined) {
5026
+ const isRequired = this.executeExpression(required);
5027
+ const hasRequiredRule = nextRules.some(r => Object.keys(r).includes('required'));
5028
+ if (!hasRequiredRule) {
5029
+ nextRules.unshift({
5030
+ required: isRequired,
5031
+ message: `${ele.label}是必填项`
5032
+ });
5033
+ } else {
5034
+ nextRules.forEach(r => {
5035
+ if (Object.keys(r).includes('required')) {
5036
+ r.required = isRequired;
5037
+ }
5038
+ });
5039
+ }
5040
+ }
5041
+ return nextRules;
5007
5042
  },
5008
5043
  dispatchExpression() {
5009
5044
  this.evalDisabledExpression();
5010
5045
  this.evalShowExpression();
5046
+ this.evalRequiredExpression();
5047
+ },
5048
+ evalRequiredExpression() {
5049
+ this.elements.forEach(ele => {
5050
+ // 优先使用顶层 required 表达式
5051
+ let requiredExpr = ele.required;
5052
+ // 如果顶层没有，则从 rules 中查找
5053
+ if (requiredExpr === undefined && ele.rules) {
5054
+ const requiredRule = ele.rules.find(r => r.required !== undefined);
5055
+ if (requiredRule) {
5056
+ requiredExpr = requiredRule.required;
5057
+ }
5058
+ }
5059
+ if (requiredExpr !== undefined) {
5060
+ const ret = this.executeExpression(requiredExpr);
5061
+ const oldRequired = ele._required;
5062
+ this.$set(ele, '_required', ret);
5063
+ // 初始化或状态变化时更新版本号，强制组件重新渲染
5064
+ if (oldRequired === undefined || oldRequired !== ret) {
5065
+ const currentVersion = ele._rulesVersion || 0;
5066
+ this.$set(ele, '_rulesVersion', currentVersion + 1);
5067
+ }
5068
+ }
5069
+ });
5011
5070
  },
5012
5071
  evalDisabledExpression() {
5013
5072
  this.elements.forEach(ele => {
@@ -5031,12 +5090,13 @@ var script$w = {
5031
5090
  executeExpression(expression) {
5032
5091
  if (type.isBool(expression)) return expression;
5033
5092
  if (type.isEmpty(expression)) return false;
5034
- return parse$1(expression, {
5035
- ...this.getFieldsValue(),
5093
+ const scope = {
5036
5094
  ...this.formModel,
5095
+ ...this.getFieldsValue(),
5037
5096
  _route: this.$route.query,
5038
5097
  _routeMeta: this.$route.meta
5039
- });
5098
+ };
5099
+ return parse$1(expression, scope);
5040
5100
  },
5041
5101
  onChange(value, props) {
5042
5102
  const {
@@ -5075,11 +5135,11 @@ var script$w = {
5075
5135
  this.setFieldsValue(defaultValues);
5076
5136
  },
5077
5137
  validateFields() {
5078
- let ret = false;
5079
- this.form.validateFields((error, values) => {
5080
- ret = !error;
5138
+ return new Promise(resolve => {
5139
+ this.form.validateFields((error, values) => {
5140
+ resolve(!error);
5141
+ });
5081
5142
  });
5082
- return ret;
5083
5143
  },
5084
5144
  setFieldsValue(props = {}) {
5085
5145
  this.$nextTick(() => {
@@ -5123,16 +5183,24 @@ var __vue_render__$w = function () {
5123
5183
  [
5124
5184
  _vm._l(_vm.elements, function (ele) {
5125
5185
  return [
5126
- _vm.executeExpression(ele._show)
5186
+ ele._show
5127
5187
  ? _c(
5128
5188
  "a-col",
5129
- { key: ele.name, attrs: { span: ele.span } },
5189
+ {
5190
+ key: ele.name + "_" + (ele._rulesVersion || 0),
5191
+ attrs: { span: ele.span },
5192
+ },
5130
5193
  [
5131
5194
  ele.type == "ele-input" || ele.type == "Input"
5132
5195
  ? [
5133
5196
  _c(
5134
5197
  "a-form-item",
5135
- { attrs: { label: ele.label + "：" } },
5198
+ {
5199
+ attrs: {
5200
+ label: ele.label + "：",
5201
+ required: ele._required,
5202
+ },
5203
+ },
5136
5204
  [
5137
5205
  _c("ele-input", {
5138
5206
  directives: [
@@ -5141,21 +5209,15 @@ var __vue_render__$w = function () {
5141
5209
  rawName: "v-decorator",
5142
5210
  value: [
5143
5211
  ele.name,
5144
- {
5145
- rules: _vm.rebuildRules(
5146
- ele.rules
5147
- ),
5148
- },
5212
+ { rules: _vm.rebuildRules(ele) },
5149
5213
  ],
5150
5214
  expression:
5151
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5215
+ "[ele.name, { rules: rebuildRules(ele) }]",
5152
5216
  },
5153
5217
  ],
5154
5218
  staticStyle: { width: "100%" },
5155
5219
  attrs: {
5156
- disabled: _vm.executeExpression(
5157
- ele._disabled
5158
- ),
5220
+ disabled: ele._disabled,
5159
5221
  "max-length": ele.maxLength,
5160
5222
  },
5161
5223
  on: {
@@ -5173,7 +5235,12 @@ var __vue_render__$w = function () {
5173
5235
  ? [
5174
5236
  _c(
5175
5237
  "a-form-item",
5176
- { attrs: { label: ele.label + "：" } },
5238
+ {
5239
+ attrs: {
5240
+ label: ele.label + "：",
5241
+ required: ele._required,
5242
+ },
5243
+ },
5177
5244
  [
5178
5245
  _c("ele-textarea", {
5179
5246
  directives: [
@@ -5182,23 +5249,17 @@ var __vue_render__$w = function () {
5182
5249
  rawName: "v-decorator",
5183
5250
  value: [
5184
5251
  ele.name,
5185
- {
5186
- rules: _vm.rebuildRules(
5187
- ele.rules
5188
- ),
5189
- },
5252
+ { rules: _vm.rebuildRules(ele) },
5190
5253
  ],
5191
5254
  expression:
5192
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5255
+ "[ele.name, { rules: rebuildRules(ele) }]",
5193
5256
  },
5194
5257
  ],
5195
5258
  staticStyle: { width: "100%" },
5196
5259
  attrs: {
5197
5260
  "max-length": ele.maxLength,
5198
5261
  autosize: ele.autosize,
5199
- disabled: _vm.executeExpression(
5200
- ele._disabled
5201
- ),
5262
+ disabled: ele._disabled,
5202
5263
  "allow-clear": ele.allowClear,
5203
5264
  placeholder: ele.placeholder,
5204
5265
  },
@@ -5216,7 +5277,12 @@ var __vue_render__$w = function () {
5216
5277
  ? [
5217
5278
  _c(
5218
5279
  "a-form-item",
5219
- { attrs: { label: ele.label + "：" } },
5280
+ {
5281
+ attrs: {
5282
+ label: ele.label + "：",
5283
+ required: ele._required,
5284
+ },
5285
+ },
5220
5286
  [
5221
5287
  _c("ele-select", {
5222
5288
  directives: [
@@ -5225,22 +5291,16 @@ var __vue_render__$w = function () {
5225
5291
  rawName: "v-decorator",
5226
5292
  value: [
5227
5293
  ele.name,
5228
- {
5229
- rules: _vm.rebuildRules(
5230
- ele.rules
5231
- ),
5232
- },
5294
+ { rules: _vm.rebuildRules(ele) },
5233
5295
  ],
5234
5296
  expression:
5235
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5297
+ "[ele.name, { rules: rebuildRules(ele) }]",
5236
5298
  },
5237
5299
  ],
5238
5300
  staticStyle: { width: "100%" },
5239
5301
  attrs: {
5240
5302
  "data-source": ele.optionList,
5241
- disabled: _vm.executeExpression(
5242
- ele._disabled
5243
- ),
5303
+ disabled: ele._disabled,
5244
5304
  multiple: ele.multiple,
5245
5305
  mode: ele.mode,
5246
5306
  code: ele.code,
@@ -5262,7 +5322,12 @@ var __vue_render__$w = function () {
5262
5322
  ? [
5263
5323
  _c(
5264
5324
  "a-form-item",
5265
- { attrs: { label: ele.label + "：" } },
5325
+ {
5326
+ attrs: {
5327
+ label: ele.label + "：",
5328
+ required: ele._required,
5329
+ },
5330
+ },
5266
5331
  [
5267
5332
  _c("ele-upload", {
5268
5333
  directives: [
@@ -5271,14 +5336,10 @@ var __vue_render__$w = function () {
5271
5336
  rawName: "v-decorator",
5272
5337
  value: [
5273
5338
  ele.name,
5274
- {
5275
- rules: _vm.rebuildRules(
5276
- ele.rules
5277
- ),
5278
- },
5339
+ { rules: _vm.rebuildRules(ele) },
5279
5340
  ],
5280
5341
  expression:
5281
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5342
+ "[ele.name, { rules: rebuildRules(ele) }]",
5282
5343
  },
5283
5344
  ],
5284
5345
  staticStyle: { width: "100%" },
@@ -5301,7 +5362,12 @@ var __vue_render__$w = function () {
5301
5362
  ? [
5302
5363
  _c(
5303
5364
  "a-form-item",
5304
- { attrs: { label: ele.label + "：" } },
5365
+ {
5366
+ attrs: {
5367
+ label: ele.label + "：",
5368
+ required: ele._required,
5369
+ },
5370
+ },
5305
5371
  [
5306
5372
  _c("ele-date-range", {
5307
5373
  directives: [
@@ -5310,22 +5376,14 @@ var __vue_render__$w = function () {
5310
5376
  rawName: "v-decorator",
5311
5377
  value: [
5312
5378
  ele.name,
5313
- {
5314
- rules: _vm.rebuildRules(
5315
- ele.rules
5316
- ),
5317
- },
5379
+ { rules: _vm.rebuildRules(ele) },
5318
5380
  ],
5319
5381
  expression:
5320
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5382
+ "[ele.name, { rules: rebuildRules(ele) }]",
5321
5383
  },
5322
5384
  ],
5323
5385
  staticStyle: { width: "100%" },
5324
- attrs: {
5325
- disabled: _vm.executeExpression(
5326
- ele._disabled
5327
- ),
5328
- },
5386
+ attrs: { disabled: ele._disabled },
5329
5387
  }),
5330
5388
  ],
5331
5389
  1
@@ -5335,7 +5393,12 @@ var __vue_render__$w = function () {
5335
5393
  ? [
5336
5394
  _c(
5337
5395
  "a-form-item",
5338
- { attrs: { label: ele.label + "：" } },
5396
+ {
5397
+ attrs: {
5398
+ label: ele.label + "：",
5399
+ required: ele._required,
5400
+ },
5401
+ },
5339
5402
  [
5340
5403
  _c("ele-date", {
5341
5404
  directives: [
@@ -5344,14 +5407,10 @@ var __vue_render__$w = function () {
5344
5407
  rawName: "v-decorator",
5345
5408
  value: [
5346
5409
  ele.name,
5347
- {
5348
- rules: _vm.rebuildRules(
5349
- ele.rules
5350
- ),
5351
- },
5410
+ { rules: _vm.rebuildRules(ele) },
5352
5411
  ],
5353
5412
  expression:
5354
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5413
+ "[ele.name, { rules: rebuildRules(ele) }]",
5355
5414
  },
5356
5415
  ],
5357
5416
  staticStyle: { width: "100%" },
@@ -5361,9 +5420,7 @@ var __vue_render__$w = function () {
5361
5420
  "show-time": ele.showTime,
5362
5421
  "show-today": ele.showToday,
5363
5422
  "value-format": ele.valueFormat,
5364
- disabled: _vm.executeExpression(
5365
- ele._disabled
5366
- ),
5423
+ disabled: ele._disabled,
5367
5424
  },
5368
5425
  }),
5369
5426
  ],
@@ -5375,7 +5432,12 @@ var __vue_render__$w = function () {
5375
5432
  ? [
5376
5433
  _c(
5377
5434
  "a-form-item",
5378
- { attrs: { label: ele.label + "：" } },
5435
+ {
5436
+ attrs: {
5437
+ label: ele.label + "：",
5438
+ required: ele._required,
5439
+ },
5440
+ },
5379
5441
  [
5380
5442
  _c("ele-select-entity", {
5381
5443
  directives: [
@@ -5384,14 +5446,10 @@ var __vue_render__$w = function () {
5384
5446
  rawName: "v-decorator",
5385
5447
  value: [
5386
5448
  ele.name,
5387
- {
5388
- rules: _vm.rebuildRules(
5389
- ele.rules
5390
- ),
5391
- },
5449
+ { rules: _vm.rebuildRules(ele) },
5392
5450
  ],
5393
5451
  expression:
5394
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5452
+ "[ele.name, { rules: rebuildRules(ele) }]",
5395
5453
  },
5396
5454
  ],
5397
5455
  staticStyle: { width: "100%" },
@@ -5405,7 +5463,12 @@ var __vue_render__$w = function () {
5405
5463
  ? [
5406
5464
  _c(
5407
5465
  "a-form-item",
5408
- { attrs: { label: ele.label + "：" } },
5466
+ {
5467
+ attrs: {
5468
+ label: ele.label + "：",
5469
+ required: ele._required,
5470
+ },
5471
+ },
5409
5472
  [
5410
5473
  _c(
5411
5474
  "ele-input-number",
@@ -5418,21 +5481,17 @@ var __vue_render__$w = function () {
5418
5481
  value: [
5419
5482
  ele.name,
5420
5483
  {
5421
- rules: _vm.rebuildRules(
5422
- ele.rules
5423
- ),
5484
+ rules: _vm.rebuildRules(ele),
5424
5485
  },
5425
5486
  ],
5426
5487
  expression:
5427
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5488
+ "[ele.name, { rules: rebuildRules(ele) }]",
5428
5489
  },
5429
5490
  ],
5430
5491
  staticStyle: { width: "100%" },
5431
5492
  attrs: {
5432
5493
  precision: ele.precision,
5433
- disabled: _vm.executeExpression(
5434
- ele._disabled
5435
- ),
5494
+ disabled: ele._disabled,
5436
5495
  },
5437
5496
  on: {
5438
5497
  change: function ($event) {
@@ -5454,7 +5513,12 @@ var __vue_render__$w = function () {
5454
5513
  ? [
5455
5514
  _c(
5456
5515
  "a-form-item",
5457
- { attrs: { label: ele.label + "：" } },
5516
+ {
5517
+ attrs: {
5518
+ label: ele.label + "：",
5519
+ required: ele._required,
5520
+ },
5521
+ },
5458
5522
  [
5459
5523
  _c("ele-checkbox", {
5460
5524
  directives: [
@@ -5463,22 +5527,16 @@ var __vue_render__$w = function () {
5463
5527
  rawName: "v-decorator",
5464
5528
  value: [
5465
5529
  ele.name,
5466
- {
5467
- rules: _vm.rebuildRules(
5468
- ele.rules
5469
- ),
5470
- },
5530
+ { rules: _vm.rebuildRules(ele) },
5471
5531
  ],
5472
5532
  expression:
5473
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5533
+ "[ele.name, { rules: rebuildRules(ele) }]",
5474
5534
  },
5475
5535
  ],
5476
5536
  staticStyle: { width: "100%" },
5477
5537
  attrs: {
5478
5538
  "data-source": ele.optionList,
5479
- disabled: _vm.executeExpression(
5480
- ele._disabled
5481
- ),
5539
+ disabled: ele._disabled,
5482
5540
  },
5483
5541
  }),
5484
5542
  ],
@@ -5489,7 +5547,12 @@ var __vue_render__$w = function () {
5489
5547
  ? [
5490
5548
  _c(
5491
5549
  "a-form-item",
5492
- { attrs: { label: ele.label + "：" } },
5550
+ {
5551
+ attrs: {
5552
+ label: ele.label + "：",
5553
+ required: ele._required,
5554
+ },
5555
+ },
5493
5556
  [
5494
5557
  _c("ele-radio", {
5495
5558
  directives: [
@@ -5498,21 +5561,15 @@ var __vue_render__$w = function () {
5498
5561
  rawName: "v-decorator",
5499
5562
  value: [
5500
5563
  ele.name,
5501
- {
5502
- rules: _vm.rebuildRules(
5503
- ele.rules
5504
- ),
5505
- },
5564
+ { rules: _vm.rebuildRules(ele) },
5506
5565
  ],
5507
5566
  expression:
5508
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5567
+ "[ele.name, { rules: rebuildRules(ele) }]",
5509
5568
  },
5510
5569
  ],
5511
5570
  staticStyle: { width: "100%" },
5512
5571
  attrs: {
5513
- disabled: _vm.executeExpression(
5514
- ele._disabled
5515
- ),
5572
+ disabled: ele._disabled,
5516
5573
  "data-source": ele.optionList,
5517
5574
  },
5518
5575
  on: {
@@ -5529,7 +5586,12 @@ var __vue_render__$w = function () {
5529
5586
  ? [
5530
5587
  _c(
5531
5588
  "a-form-item",
5532
- { attrs: { label: ele.label + "：" } },
5589
+ {
5590
+ attrs: {
5591
+ label: ele.label + "：",
5592
+ required: ele._required,
5593
+ },
5594
+ },
5533
5595
  [
5534
5596
  _c("ele-form-img-crop", {
5535
5597
  directives: [
@@ -5538,14 +5600,10 @@ var __vue_render__$w = function () {
5538
5600
  rawName: "v-decorator",
5539
5601
  value: [
5540
5602
  ele.name,
5541
- {
5542
- rules: _vm.rebuildRules(
5543
- ele.rules
5544
- ),
5545
- },
5603
+ { rules: _vm.rebuildRules(ele) },
5546
5604
  ],
5547
5605
  expression:
5548
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5606
+ "[ele.name, { rules: rebuildRules(ele) }]",
5549
5607
  },
5550
5608
  ],
5551
5609
  staticStyle: { width: "100%" },
@@ -5556,9 +5614,7 @@ var __vue_render__$w = function () {
5556
5614
  "cropper-config": ele.cropperConfig,
5557
5615
  uploadFileConfig: ele.uploadFileConfig,
5558
5616
  "oper-text": ele.operText,
5559
- disabled: _vm.executeExpression(
5560
- ele._disabled
5561
- ),
5617
+ disabled: ele._disabled,
5562
5618
  },
5563
5619
  on: {
5564
5620
  change: function ($event) {
@@ -5574,7 +5630,12 @@ var __vue_render__$w = function () {
5574
5630
  ? [
5575
5631
  _c(
5576
5632
  "a-form-item",
5577
- { attrs: { label: ele.label + "：" } },
5633
+ {
5634
+ attrs: {
5635
+ label: ele.label + "：",
5636
+ required: ele._required,
5637
+ },
5638
+ },
5578
5639
  [
5579
5640
  _c(
5580
5641
  "ele-tree-select",
@@ -5587,21 +5648,15 @@ var __vue_render__$w = function () {
5587
5648
  value: [
5588
5649
  ele.name,
5589
5650
  {
5590
- rules: _vm.rebuildRules(
5591
- ele.rules
5592
- ),
5651
+ rules: _vm.rebuildRules(ele),
5593
5652
  },
5594
5653
  ],
5595
5654
  expression:
5596
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5655
+ "[ele.name, { rules: rebuildRules(ele) }]",
5597
5656
  },
5598
5657
  ],
5599
5658
  staticStyle: { width: "100%" },
5600
- attrs: {
5601
- disabled: _vm.executeExpression(
5602
- ele._disabled
5603
- ),
5604
- },
5659
+ attrs: { disabled: ele._disabled },
5605
5660
  on: {
5606
5661
  change: function ($event) {
5607
5662
  return _vm.onChange($event, ele)
@@ -5621,7 +5676,12 @@ var __vue_render__$w = function () {
5621
5676
  ? [
5622
5677
  _c(
5623
5678
  "a-form-item",
5624
- { attrs: { label: ele.label + "：" } },
5679
+ {
5680
+ attrs: {
5681
+ label: ele.label + "：",
5682
+ required: ele._required,
5683
+ },
5684
+ },
5625
5685
  [
5626
5686
  _c(
5627
5687
  "ele-select-entity-modal-table",
@@ -5634,21 +5694,15 @@ var __vue_render__$w = function () {
5634
5694
  value: [
5635
5695
  ele.name,
5636
5696
  {
5637
- rules: _vm.rebuildRules(
5638
- ele.rules
5639
- ),
5697
+ rules: _vm.rebuildRules(ele),
5640
5698
  },
5641
5699
  ],
5642
5700
  expression:
5643
- "[ele.name, { rules: rebuildRules(ele.rules) }]",
5701
+ "[ele.name, { rules: rebuildRules(ele) }]",
5644
5702
  },
5645
5703
  ],
5646
5704
  staticStyle: { width: "100%" },
5647
- attrs: {
5648
- disabled: _vm.executeExpression(
5649
- ele._disabled
5650
- ),
5651
- },
5705
+ attrs: { disabled: ele._disabled },
5652
5706
  on: {
5653
5707
  change: function ($event) {
5654
5708
  return _vm.onChange($event, ele)
@@ -5687,11 +5741,11 @@ __vue_render__$w._withStripped = true;
5687
5741
  /* style */
5688
5742
  const __vue_inject_styles__$w = function (inject) {
5689
5743
  if (!inject) return
5690
- 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 });
5744
+ inject("data-v-7561ae99_0", { source: ".ele__form--wrapper[data-v-7561ae99] {\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":"AAoYA;EACA,gBAAA;ACnYA;;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=\"ele._show\" :span=\"ele.span\" :key=\"`${ele.name}_${ele._rulesVersion || 0}`\">\r\n <template v-if=\"ele.type == 'ele-input' || ele.type == 'Input'\">\r\n <a-form-item :label=\"`${ele.label}：`\" :required=\"ele._required\">\r\n <ele-input \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"ele._disabled\" \r\n :max-length=\"ele.maxLength\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-textarea \r\n @change=\"onChange($event, ele)\"\r\n :max-length=\"ele.maxLength\"\r\n :autosize=\"ele.autosize\"\r\n :disabled=\"ele._disabled\"\r\n :allow-clear=\"ele.allowClear\"\r\n :placeholder=\"ele.placeholder\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\"\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}：`\" :required=\"ele._required\">\r\n <ele-select \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"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) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-upload v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-date-range \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\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=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-select-entity \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-input-number \r\n @change=\"onChange($event, ele)\" \r\n :precision=\"ele.precision\" \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-checkbox \r\n :data-source=\"ele.optionList\" \r\n :disabled=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-radio \r\n @change=\"onChange($event, ele)\" \r\n :disabled=\"ele._disabled\" \r\n :data-source=\"ele.optionList\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\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=\"ele._disabled\" \r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-tree-select\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"ele._disabled\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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}：`\" :required=\"ele._required\">\r\n <ele-select-entity-modal-table\r\n @change=\"onChange($event, ele)\"\r\n :disabled=\"ele._disabled\"\r\n v-bind=\"ele.meta\"\r\n v-decorator=\"[ele.name, { rules: rebuildRules(ele) }]\" \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 this.dispatchExpression()\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 (ele) {\r\n const { rules = [] } = ele\r\n const nextRules = rules.map(rule => {\r\n const nextRule = { ...rule }\r\n const { validator, required } = nextRule\r\n // 支持 validator 函数\r\n if (validator) {\r\n nextRule.validator = (rule, value, cb) => {\r\n validator.formModel = this.getFieldsValue()\r\n validator.exposed = this.exposedMethods\r\n return validator(rule, value, cb)\r\n }\r\n }\r\n // 支持 rules 内部的 required 表达式\r\n if (required !== undefined && type.isStr(required)) {\r\n nextRule.required = this.executeExpression(required)\r\n }\r\n return nextRule\r\n })\r\n // 支持顶层 required 表达式（优先级高于 rules 内部）\r\n const { required } = ele\r\n if (required !== undefined) {\r\n const isRequired = this.executeExpression(required)\r\n const hasRequiredRule = nextRules.some(r => Object.keys(r).includes('required'))\r\n if (!hasRequiredRule) {\r\n nextRules.unshift({ required: isRequired, message: `${ele.label}是必填项` })\r\n } else {\r\n nextRules.forEach(r => {\r\n if (Object.keys(r).includes('required')) {\r\n r.required = isRequired\r\n }\r\n })\r\n }\r\n }\r\n return nextRules\r\n },\r\n dispatchExpression () {\r\n this.evalDisabledExpression()\r\n this.evalShowExpression()\r\n this.evalRequiredExpression()\r\n },\r\n evalRequiredExpression () {\r\n this.elements.forEach(ele => {\r\n // 优先使用顶层 required 表达式\r\n let requiredExpr = ele.required\r\n // 如果顶层没有，则从 rules 中查找\r\n if (requiredExpr === undefined && ele.rules) {\r\n const requiredRule = ele.rules.find(r => r.required !== undefined)\r\n if (requiredRule) {\r\n requiredExpr = requiredRule.required\r\n }\r\n }\r\n if (requiredExpr !== undefined) {\r\n const ret = this.executeExpression(requiredExpr)\r\n const oldRequired = ele._required\r\n this.$set(ele, '_required', ret)\r\n // 初始化或状态变化时更新版本号，强制组件重新渲染\r\n if (oldRequired === undefined || oldRequired !== ret) {\r\n const currentVersion = ele._rulesVersion || 0\r\n this.$set(ele, '_rulesVersion', currentVersion + 1)\r\n }\r\n }\r\n })\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 const scope = { ...this.formModel, ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta }\r\n return parse(expression, scope)\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 });
5691
5745
 
5692
5746
  };
5693
5747
  /* scoped */
5694
- const __vue_scope_id__$w = "data-v-6c735b44";
5748
+ const __vue_scope_id__$w = "data-v-7561ae99";
5695
5749
  /* module identifier */
5696
5750
  const __vue_module_identifier__$w = undefined;
5697
5751
  /* functional template */
@@ -14233,9 +14287,9 @@ var script$9 = {
14233
14287
  validateFields() {
14234
14288
  return this.$refs[this.formRef].validateFields();
14235
14289
  },
14236
- [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
14290
+ async [BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
14237
14291
  if (this.globalDisabled) return;
14238
- const status = this.$refs[this.formRef].validateFields();
14292
+ const status = await this.$refs[this.formRef].validateFields();
14239
14293
  if (status) {
14240
14294
  //TODO fieldMap
14241
14295
  return this.submitRequestTrigger(props);