@idooel/components 0.0.1-beta.15 → 0.0.1-beta.17
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.
|
@@ -4479,11 +4479,15 @@ var script$7 = {
|
|
|
4479
4479
|
}, {
|
|
4480
4480
|
headers
|
|
4481
4481
|
}).then(resp => {
|
|
4482
|
+
console.log(resp.data);
|
|
4482
4483
|
this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, {
|
|
4483
4484
|
...props,
|
|
4484
|
-
formModel:
|
|
4485
|
+
formModel: {
|
|
4486
|
+
...this.formModels,
|
|
4487
|
+
...(resp.data || {})
|
|
4488
|
+
}
|
|
4485
4489
|
});
|
|
4486
|
-
return
|
|
4490
|
+
return resp.data;
|
|
4487
4491
|
});
|
|
4488
4492
|
return ret;
|
|
4489
4493
|
},
|
|
@@ -4597,11 +4601,11 @@ __vue_render__$7._withStripped = true;
|
|
|
4597
4601
|
/* style */
|
|
4598
4602
|
const __vue_inject_styles__$7 = function (inject) {
|
|
4599
4603
|
if (!inject) return
|
|
4600
|
-
inject("data-v-
|
|
4604
|
+
inject("data-v-0ac75164_0", { source: ".form__model--wrapper[data-v-0ac75164] {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-0ac75164] {\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-0ac75164] {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-0ac75164] {\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":"AAuIA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;ACtIA;ADuIA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;ACrIA;ADuIA;EACA,aAAA;ACrIA;ADuIA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACrIA;;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\"></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 } from '../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-form-model',\r\n components: {\r\n EleButtonGroup\r\n },\r\n props: {\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 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 formModels () {\r\n return this.$refs[this.formRef].getFieldsValue()\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 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 })\r\n },\r\n async preRequestTrigger () {\r\n const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n if (!url) return\r\n await net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers })\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 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 });
|
|
4601
4605
|
|
|
4602
4606
|
};
|
|
4603
4607
|
/* scoped */
|
|
4604
|
-
const __vue_scope_id__$7 = "data-v-
|
|
4608
|
+
const __vue_scope_id__$7 = "data-v-0ac75164";
|
|
4605
4609
|
/* module identifier */
|
|
4606
4610
|
const __vue_module_identifier__$7 = undefined;
|
|
4607
4611
|
/* functional template */
|
|
@@ -4695,7 +4699,8 @@ var script$6 = {
|
|
|
4695
4699
|
slotRef: this.currentSlotComponentRef,
|
|
4696
4700
|
setCurrentStep: this.setCurrentStep,
|
|
4697
4701
|
next: this.nextStep,
|
|
4698
|
-
prev: this.prevStep
|
|
4702
|
+
prev: this.prevStep,
|
|
4703
|
+
current: this.current
|
|
4699
4704
|
};
|
|
4700
4705
|
}
|
|
4701
4706
|
},
|
|
@@ -4829,11 +4834,11 @@ __vue_render__$6._withStripped = true;
|
|
|
4829
4834
|
/* style */
|
|
4830
4835
|
const __vue_inject_styles__$6 = function (inject) {
|
|
4831
4836
|
if (!inject) return
|
|
4832
|
-
inject("data-v-
|
|
4837
|
+
inject("data-v-040a7cc9_0", { source: ".ele-step-model__wrapper[data-v-040a7cc9] {\n width: 100%;\n height: 100vh;\n position: relative;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper[data-v-040a7cc9] {\n width: 100%;\n height: 64px;\n padding: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #fff;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper .ele-steps .ant-steps-item[data-v-040a7cc9] {\n text-align: left;\n}\n.ele-step-model__wrapper .ele-step-model__content--wrapper[data-v-040a7cc9] {\n width: 100%;\n width: 100%;\n margin-top: 16px;\n margin-bottom: 16px;\n height: calc(100vh - 64px - 64px - 16px - 16px);\n overflow: auto;\n}\n.ele-step-model__wrapper .ele-step-model__footer--wrapper[data-v-040a7cc9] {\n width: 100%;\n height: 64px;\n background: #fff;\n position: absolute;\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\\step-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAqIA;EACA,WAAA;EACA,aAAA;EACA,kBAAA;ACpIA;ADqIA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,gBAAA;ACnIA;ADqIA;EACA,gBAAA;ACnIA;ADuIA;EACA,WAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,+CAAA;EACA,cAAA;ACrIA;ADuIA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACrIA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele-step-model__wrapper\">\r\n <div class=\"ele-step-model__step--wrapper\">\r\n <a-steps class=\"ele-steps\" :current=\"current\" size=\"small\">\r\n <a-step v-for=\"step in elements\" :title=\"step.title\" :key=\"step.key\" />\r\n </a-steps>\r\n </div>\r\n <div class=\"ele-step-model__content--wrapper\">\r\n <template v-for=\"name in scopedSlotsNames\">\r\n <div v-if=\"currentSlotName == name\" :class=\"['ele-step-model__slot', `ele-step-model__slot--${name}`]\">\r\n <slot :name=\"name\"></slot>\r\n </div>\r\n </template>\r\n </div>\r\n <div class=\"ele-step-model__footer--wrapper\">\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 } from '../../utils'\r\nexport default {\r\n name: 'ele-step-model',\r\n components: {\r\n EleButtonGroup\r\n },\r\n props: {\r\n stepMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n footerMeta: {\r\n type: Object,\r\n default: () => ({})\r\n }\r\n },\r\n data() {\r\n return {\r\n current: 0,\r\n currentSlotComponentRef: null\r\n }\r\n },\r\n computed: {\r\n currentSlotName () {\r\n return this.scopedSlotsNames[this.current]\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, exposed: this.exposedMethods })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.NEXT]: this[BUILT_IN_EVENT_NAMES.NEXT],\r\n [BUILT_IN_EVENT_NAMES.PREVIOUS]: this[BUILT_IN_EVENT_NAMES.PREVIOUS]\r\n }\r\n },\r\n activeIndex () {\r\n const { activeIndex } = this.stepMeta\r\n return activeIndex\r\n },\r\n elements () {\r\n const { elements } = this.stepMeta\r\n return elements\r\n },\r\n scopedSlotsNames () {\r\n const slotNames = this.elements.map(item => item.key)\r\n return slotNames\r\n },\r\n exposedMethods () {\r\n return {\r\n slotRef: this.currentSlotComponentRef,\r\n setCurrentStep: this.setCurrentStep,\r\n next: this.nextStep,\r\n prev: this.prevStep,\r\n current: this.current\r\n }\r\n }\r\n },\r\n watch: {\r\n activeIndex: {\r\n handler (idx) {\r\n this.current = idx\r\n },\r\n immediate: true\r\n },\r\n current: {\r\n handler () {\r\n this.$nextTick(() => {\r\n this.currentSlotComponentRef = this.getCurrentSlotComponentRef()\r\n })\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n getCurrentSlotComponentRef () {\r\n const includeMetaCmp = this.$children.find(child => child.meta)\r\n if (!includeMetaCmp) return null\r\n const { $children: [component] } = includeMetaCmp\r\n return component.getModel ? component.getModel() : null\r\n },\r\n setCurrentStep (index) {\r\n this.current = index\r\n },\r\n nextStep () {\r\n if (this.current >= this.elements.length - 1) return\r\n this.current ++\r\n },\r\n prevStep () {\r\n if (this.current <= 0) return\r\n this.current --\r\n },\r\n [BUILT_IN_EVENT_NAMES.NEXT] (props) {\r\n this.$emit(BUILT_IN_EVENT_NAMES.NEXT, { ...props, exposed: { ...this.exposedMethods } })\r\n },\r\n [BUILT_IN_EVENT_NAMES.PREVIOUS] (props) {\r\n this.$emit(BUILT_IN_EVENT_NAMES.PREVIOUS, { ...props, exposed: { ...this.exposedMethods } })\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele-step-model__wrapper {\r\n width: 100%;\r\n height: 100vh;\r\n position: relative;\r\n .ele-step-model__step--wrapper {\r\n width: 100%;\r\n height: 64px;\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n background: #fff;\r\n .ele-steps {\r\n .ant-steps-item {\r\n text-align: left;\r\n }\r\n }\r\n }\r\n .ele-step-model__content--wrapper {\r\n width: 100%;\r\n width: 100%;\r\n margin-top: 16px;\r\n margin-bottom: 16px;\r\n height: calc(100vh - 64px - 64px - 16px - 16px);\r\n overflow: auto;\r\n }\r\n .ele-step-model__footer--wrapper {\r\n width: 100%;\r\n height: 64px;\r\n background: #fff;\r\n position: absolute;\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</style>import meta from '@/views/tree-table-page/meta'\r\n",".ele-step-model__wrapper {\n width: 100%;\n height: 100vh;\n position: relative;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper {\n width: 100%;\n height: 64px;\n padding: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #fff;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper .ele-steps .ant-steps-item {\n text-align: left;\n}\n.ele-step-model__wrapper .ele-step-model__content--wrapper {\n width: 100%;\n width: 100%;\n margin-top: 16px;\n margin-bottom: 16px;\n height: calc(100vh - 64px - 64px - 16px - 16px);\n overflow: auto;\n}\n.ele-step-model__wrapper .ele-step-model__footer--wrapper {\n width: 100%;\n height: 64px;\n background: #fff;\n position: absolute;\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 });
|
|
4833
4838
|
|
|
4834
4839
|
};
|
|
4835
4840
|
/* scoped */
|
|
4836
|
-
const __vue_scope_id__$6 = "data-v-
|
|
4841
|
+
const __vue_scope_id__$6 = "data-v-040a7cc9";
|
|
4837
4842
|
/* module identifier */
|
|
4838
4843
|
const __vue_module_identifier__$6 = undefined;
|
|
4839
4844
|
/* functional template */
|
|
@@ -4486,11 +4486,15 @@
|
|
|
4486
4486
|
}, {
|
|
4487
4487
|
headers
|
|
4488
4488
|
}).then(resp => {
|
|
4489
|
+
console.log(resp.data);
|
|
4489
4490
|
this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, {
|
|
4490
4491
|
...props,
|
|
4491
|
-
formModel:
|
|
4492
|
+
formModel: {
|
|
4493
|
+
...this.formModels,
|
|
4494
|
+
...(resp.data || {})
|
|
4495
|
+
}
|
|
4492
4496
|
});
|
|
4493
|
-
return
|
|
4497
|
+
return resp.data;
|
|
4494
4498
|
});
|
|
4495
4499
|
return ret;
|
|
4496
4500
|
},
|
|
@@ -4604,11 +4608,11 @@
|
|
|
4604
4608
|
/* style */
|
|
4605
4609
|
const __vue_inject_styles__$7 = function (inject) {
|
|
4606
4610
|
if (!inject) return
|
|
4607
|
-
inject("data-v-
|
|
4611
|
+
inject("data-v-0ac75164_0", { source: ".form__model--wrapper[data-v-0ac75164] {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-0ac75164] {\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-0ac75164] {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-0ac75164] {\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":"AAuIA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;ACtIA;ADuIA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;ACrIA;ADuIA;EACA,aAAA;ACrIA;ADuIA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACrIA;;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\"></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 } from '../../utils'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { net } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-form-model',\r\n components: {\r\n EleButtonGroup\r\n },\r\n props: {\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 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 formModels () {\r\n return this.$refs[this.formRef].getFieldsValue()\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 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 })\r\n },\r\n async preRequestTrigger () {\r\n const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\r\n if (!url) return\r\n await net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers })\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 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 });
|
|
4608
4612
|
|
|
4609
4613
|
};
|
|
4610
4614
|
/* scoped */
|
|
4611
|
-
const __vue_scope_id__$7 = "data-v-
|
|
4615
|
+
const __vue_scope_id__$7 = "data-v-0ac75164";
|
|
4612
4616
|
/* module identifier */
|
|
4613
4617
|
const __vue_module_identifier__$7 = undefined;
|
|
4614
4618
|
/* functional template */
|
|
@@ -4702,7 +4706,8 @@
|
|
|
4702
4706
|
slotRef: this.currentSlotComponentRef,
|
|
4703
4707
|
setCurrentStep: this.setCurrentStep,
|
|
4704
4708
|
next: this.nextStep,
|
|
4705
|
-
prev: this.prevStep
|
|
4709
|
+
prev: this.prevStep,
|
|
4710
|
+
current: this.current
|
|
4706
4711
|
};
|
|
4707
4712
|
}
|
|
4708
4713
|
},
|
|
@@ -4836,11 +4841,11 @@
|
|
|
4836
4841
|
/* style */
|
|
4837
4842
|
const __vue_inject_styles__$6 = function (inject) {
|
|
4838
4843
|
if (!inject) return
|
|
4839
|
-
inject("data-v-
|
|
4844
|
+
inject("data-v-040a7cc9_0", { source: ".ele-step-model__wrapper[data-v-040a7cc9] {\n width: 100%;\n height: 100vh;\n position: relative;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper[data-v-040a7cc9] {\n width: 100%;\n height: 64px;\n padding: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #fff;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper .ele-steps .ant-steps-item[data-v-040a7cc9] {\n text-align: left;\n}\n.ele-step-model__wrapper .ele-step-model__content--wrapper[data-v-040a7cc9] {\n width: 100%;\n width: 100%;\n margin-top: 16px;\n margin-bottom: 16px;\n height: calc(100vh - 64px - 64px - 16px - 16px);\n overflow: auto;\n}\n.ele-step-model__wrapper .ele-step-model__footer--wrapper[data-v-040a7cc9] {\n width: 100%;\n height: 64px;\n background: #fff;\n position: absolute;\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\\step-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAqIA;EACA,WAAA;EACA,aAAA;EACA,kBAAA;ACpIA;ADqIA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,gBAAA;ACnIA;ADqIA;EACA,gBAAA;ACnIA;ADuIA;EACA,WAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,+CAAA;EACA,cAAA;ACrIA;ADuIA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACrIA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"ele-step-model__wrapper\">\r\n <div class=\"ele-step-model__step--wrapper\">\r\n <a-steps class=\"ele-steps\" :current=\"current\" size=\"small\">\r\n <a-step v-for=\"step in elements\" :title=\"step.title\" :key=\"step.key\" />\r\n </a-steps>\r\n </div>\r\n <div class=\"ele-step-model__content--wrapper\">\r\n <template v-for=\"name in scopedSlotsNames\">\r\n <div v-if=\"currentSlotName == name\" :class=\"['ele-step-model__slot', `ele-step-model__slot--${name}`]\">\r\n <slot :name=\"name\"></slot>\r\n </div>\r\n </template>\r\n </div>\r\n <div class=\"ele-step-model__footer--wrapper\">\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 } from '../../utils'\r\nexport default {\r\n name: 'ele-step-model',\r\n components: {\r\n EleButtonGroup\r\n },\r\n props: {\r\n stepMeta: {\r\n type: Object,\r\n default: () => ({})\r\n },\r\n footerMeta: {\r\n type: Object,\r\n default: () => ({})\r\n }\r\n },\r\n data() {\r\n return {\r\n current: 0,\r\n currentSlotComponentRef: null\r\n }\r\n },\r\n computed: {\r\n currentSlotName () {\r\n return this.scopedSlotsNames[this.current]\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, exposed: this.exposedMethods })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.NEXT]: this[BUILT_IN_EVENT_NAMES.NEXT],\r\n [BUILT_IN_EVENT_NAMES.PREVIOUS]: this[BUILT_IN_EVENT_NAMES.PREVIOUS]\r\n }\r\n },\r\n activeIndex () {\r\n const { activeIndex } = this.stepMeta\r\n return activeIndex\r\n },\r\n elements () {\r\n const { elements } = this.stepMeta\r\n return elements\r\n },\r\n scopedSlotsNames () {\r\n const slotNames = this.elements.map(item => item.key)\r\n return slotNames\r\n },\r\n exposedMethods () {\r\n return {\r\n slotRef: this.currentSlotComponentRef,\r\n setCurrentStep: this.setCurrentStep,\r\n next: this.nextStep,\r\n prev: this.prevStep,\r\n current: this.current\r\n }\r\n }\r\n },\r\n watch: {\r\n activeIndex: {\r\n handler (idx) {\r\n this.current = idx\r\n },\r\n immediate: true\r\n },\r\n current: {\r\n handler () {\r\n this.$nextTick(() => {\r\n this.currentSlotComponentRef = this.getCurrentSlotComponentRef()\r\n })\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n getCurrentSlotComponentRef () {\r\n const includeMetaCmp = this.$children.find(child => child.meta)\r\n if (!includeMetaCmp) return null\r\n const { $children: [component] } = includeMetaCmp\r\n return component.getModel ? component.getModel() : null\r\n },\r\n setCurrentStep (index) {\r\n this.current = index\r\n },\r\n nextStep () {\r\n if (this.current >= this.elements.length - 1) return\r\n this.current ++\r\n },\r\n prevStep () {\r\n if (this.current <= 0) return\r\n this.current --\r\n },\r\n [BUILT_IN_EVENT_NAMES.NEXT] (props) {\r\n this.$emit(BUILT_IN_EVENT_NAMES.NEXT, { ...props, exposed: { ...this.exposedMethods } })\r\n },\r\n [BUILT_IN_EVENT_NAMES.PREVIOUS] (props) {\r\n this.$emit(BUILT_IN_EVENT_NAMES.PREVIOUS, { ...props, exposed: { ...this.exposedMethods } })\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele-step-model__wrapper {\r\n width: 100%;\r\n height: 100vh;\r\n position: relative;\r\n .ele-step-model__step--wrapper {\r\n width: 100%;\r\n height: 64px;\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n background: #fff;\r\n .ele-steps {\r\n .ant-steps-item {\r\n text-align: left;\r\n }\r\n }\r\n }\r\n .ele-step-model__content--wrapper {\r\n width: 100%;\r\n width: 100%;\r\n margin-top: 16px;\r\n margin-bottom: 16px;\r\n height: calc(100vh - 64px - 64px - 16px - 16px);\r\n overflow: auto;\r\n }\r\n .ele-step-model__footer--wrapper {\r\n width: 100%;\r\n height: 64px;\r\n background: #fff;\r\n position: absolute;\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</style>import meta from '@/views/tree-table-page/meta'\r\n",".ele-step-model__wrapper {\n width: 100%;\n height: 100vh;\n position: relative;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper {\n width: 100%;\n height: 64px;\n padding: 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n background: #fff;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper .ele-steps .ant-steps-item {\n text-align: left;\n}\n.ele-step-model__wrapper .ele-step-model__content--wrapper {\n width: 100%;\n width: 100%;\n margin-top: 16px;\n margin-bottom: 16px;\n height: calc(100vh - 64px - 64px - 16px - 16px);\n overflow: auto;\n}\n.ele-step-model__wrapper .ele-step-model__footer--wrapper {\n width: 100%;\n height: 64px;\n background: #fff;\n position: absolute;\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 });
|
|
4840
4845
|
|
|
4841
4846
|
};
|
|
4842
4847
|
/* scoped */
|
|
4843
|
-
const __vue_scope_id__$6 = "data-v-
|
|
4848
|
+
const __vue_scope_id__$6 = "data-v-040a7cc9";
|
|
4844
4849
|
/* module identifier */
|
|
4845
4850
|
const __vue_module_identifier__$6 = undefined;
|
|
4846
4851
|
/* functional template */
|
package/package.json
CHANGED
|
@@ -87,8 +87,9 @@ export default {
|
|
|
87
87
|
const { url, requestType, headers, params, fieldMap = {} } = this.submitRequest
|
|
88
88
|
if (!url) return
|
|
89
89
|
const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), ...this.formModels }, { headers }).then(resp => {
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
console.log(resp.data)
|
|
91
|
+
this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })
|
|
92
|
+
return resp.data
|
|
92
93
|
})
|
|
93
94
|
return ret
|
|
94
95
|
},
|