@idooel/components 0.0.1-beta.41 → 0.0.1-beta.42
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.
- package/dist/@idooel/components.esm.js +24 -15
- package/dist/@idooel/components.umd.js +24 -15
- package/package.json +1 -1
- package/packages/composite-components/button-group/src/index.vue +2 -2
- package/packages/models/form-model/src/index.vue +2 -2
- package/packages/models/step-model/src/index.vue +15 -6
|
@@ -3322,7 +3322,7 @@ var script$r = {
|
|
|
3322
3322
|
},
|
|
3323
3323
|
execFieldMap(fieldMap = {}, dataSource = {}) {
|
|
3324
3324
|
const ret = parseFieldMap(fieldMap, {
|
|
3325
|
-
|
|
3325
|
+
...this.expressionData,
|
|
3326
3326
|
...dataSource
|
|
3327
3327
|
});
|
|
3328
3328
|
return ret;
|
|
@@ -3397,7 +3397,7 @@ var script$r = {
|
|
|
3397
3397
|
data
|
|
3398
3398
|
} = await net[requestType.toLowerCase()](currentUrl, {
|
|
3399
3399
|
...params,
|
|
3400
|
-
...fieldMap
|
|
3400
|
+
...this.execFieldMap(fieldMap)
|
|
3401
3401
|
}, {
|
|
3402
3402
|
...headers
|
|
3403
3403
|
});
|
|
@@ -3499,11 +3499,11 @@ __vue_render__$r._withStripped = true;
|
|
|
3499
3499
|
/* style */
|
|
3500
3500
|
const __vue_inject_styles__$r = function (inject) {
|
|
3501
3501
|
if (!inject) return
|
|
3502
|
-
inject("data-v-
|
|
3502
|
+
inject("data-v-22c624b4_0", { source: ".form__model--wrapper[data-v-22c624b4] {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-22c624b4] {\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-22c624b4] {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-22c624b4] {\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\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6KA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC5KA;AD6KA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC3KA;AD6KA;EACA,aAAA;AC3KA;AD6KA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC3KA;;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\" :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 } 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 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 }\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 formModels () {\r\n return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}\r\n },\r\n executeExpression (expression, dataSource = {}) {\r\n if (type.isBool(expression)) return expression\r\n if (type.isEmpty(expression)) return false\r\n return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n },\r\n execFieldMap (fieldMap = {}, dataSource = {}) {\r\n const ret = parseFieldMap(fieldMap, { ...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.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n },\r\n executeExpressionForUrl (url) {\r\n return this.executeExpression(url) ? this.executeExpression(url) : url\r\n },\r\n setFieldsValue (props) {\r\n this.$refs[this.formRef].setFieldsValue(props)\r\n },\r\n validateFields () {\r\n return this.$refs[this.formRef].validateFields()\r\n },\r\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n if (this.globalDisabled) return\r\n const status = this.$refs[this.formRef].validateFields()\r\n if (status) {\r\n //TODO fieldMap\r\n return this.submitRequestTrigger(props)\r\n } else {\r\n return false\r\n }\r\n },\r\n [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n }\r\n },\r\n async mounted() {\r\n await this.preRequestTrigger()\r\n await this.infoRequestTrigger()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n background: #fff;\r\n .form-model__title {\r\n height: 56px;\r\n padding: 0 16px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n }\r\n .form-model__content {\r\n padding: 16px;\r\n }\r\n .form-model__footer {\r\n /* width: 100%; */\r\n height: 64px;\r\n position: fixed;\r\n bottom: 0;\r\n display: flex;\r\n float: right;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: end;\r\n }\r\n}\r\n</style>",".form__model--wrapper {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title {\n height: 56px;\n padding: 0 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n /* width: 100%; */\n height: 64px;\n position: fixed;\n bottom: 0;\n display: flex;\n float: right;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
3503
3503
|
|
|
3504
3504
|
};
|
|
3505
3505
|
/* scoped */
|
|
3506
|
-
const __vue_scope_id__$r = "data-v-
|
|
3506
|
+
const __vue_scope_id__$r = "data-v-22c624b4";
|
|
3507
3507
|
/* module identifier */
|
|
3508
3508
|
const __vue_module_identifier__$r = undefined;
|
|
3509
3509
|
/* functional template */
|
|
@@ -3547,9 +3547,18 @@ var script$q = {
|
|
|
3547
3547
|
innerFooterElements: []
|
|
3548
3548
|
};
|
|
3549
3549
|
},
|
|
3550
|
+
provide() {
|
|
3551
|
+
return {
|
|
3552
|
+
[CONTEXT]: () => {
|
|
3553
|
+
return {
|
|
3554
|
+
...this.expressionData
|
|
3555
|
+
};
|
|
3556
|
+
}
|
|
3557
|
+
};
|
|
3558
|
+
},
|
|
3550
3559
|
computed: {
|
|
3551
3560
|
routeMetaDisabled() {
|
|
3552
|
-
return this.
|
|
3561
|
+
return this.executeExpression(this.$route.meta.disabled);
|
|
3553
3562
|
},
|
|
3554
3563
|
expressionData() {
|
|
3555
3564
|
return {
|
|
@@ -3633,7 +3642,7 @@ var script$q = {
|
|
|
3633
3642
|
this.evalShowExpressionForFooterElements();
|
|
3634
3643
|
},
|
|
3635
3644
|
methods: {
|
|
3636
|
-
|
|
3645
|
+
executeExpression(expression) {
|
|
3637
3646
|
if (type.isBool(expression)) return expression;
|
|
3638
3647
|
if (type.isEmpty(expression)) return false;
|
|
3639
3648
|
return parse(expression, {
|
|
@@ -3643,16 +3652,16 @@ var script$q = {
|
|
|
3643
3652
|
evalShowExpressionForFooterElements() {
|
|
3644
3653
|
this.innerFooterElements = this.innerFooterElements.map(element => {
|
|
3645
3654
|
const {
|
|
3646
|
-
show,
|
|
3655
|
+
show = true,
|
|
3647
3656
|
key,
|
|
3648
3657
|
eventName
|
|
3649
3658
|
} = element;
|
|
3650
3659
|
if (key == BUILT_IN_EVENT_NAMES.SUBMIT || eventName == BUILT_IN_EVENT_NAMES.SUBMIT) {
|
|
3651
3660
|
// built in submit button should according to the route meta disabled
|
|
3652
|
-
this.$set(element, '_show',
|
|
3661
|
+
this.$set(element, '_show', this.executeExpression(show, this.expressionData) && !this.routeMetaDisabled);
|
|
3653
3662
|
return element;
|
|
3654
3663
|
}
|
|
3655
|
-
show && this.$set(element, '_show',
|
|
3664
|
+
show && this.$set(element, '_show', this.executeExpression(show, this.expressionData));
|
|
3656
3665
|
return element;
|
|
3657
3666
|
});
|
|
3658
3667
|
},
|
|
@@ -3785,11 +3794,11 @@ __vue_render__$q._withStripped = true;
|
|
|
3785
3794
|
/* style */
|
|
3786
3795
|
const __vue_inject_styles__$q = function (inject) {
|
|
3787
3796
|
if (!inject) return
|
|
3788
|
-
inject("data-v-
|
|
3797
|
+
inject("data-v-5952ba66_0", { source: ".ele-step-model__wrapper[data-v-5952ba66] {\n width: 100%;\n height: 100vh;\n position: relative;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper[data-v-5952ba66] {\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-5952ba66] {\n text-align: left;\n}\n.ele-step-model__wrapper .ele-step-model__content--wrapper[data-v-5952ba66] {\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-5952ba66] {\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\\models\\step-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwLA;EACA,WAAA;EACA,aAAA;EACA,kBAAA;ACvLA;ADwLA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,gBAAA;ACtLA;ADwLA;EACA,gBAAA;ACtLA;AD0LA;EACA,WAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,+CAAA;EACA,cAAA;ACxLA;AD0LA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACxLA;;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 :key=\"name\" 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 { BUILT_IN_EVENT_NAMES, CONTEXT } from '../../../utils'\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-step-model',\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 innerFooterElements: []\r\n }\r\n },\r\n provide() {\r\n return {\r\n [CONTEXT]: () => {\r\n return {\r\n ...this.expressionData\r\n }\r\n }\r\n }\r\n },\r\n computed: {\r\n routeMetaDisabled () {\r\n return this.executeExpression(this.$route.meta.disabled)\r\n },\r\n expressionData () {\r\n return {\r\n current: this.current,\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta\r\n }\r\n },\r\n currentSlotName () {\r\n return this.scopedSlotsNames[this.current]\r\n },\r\n footerElements () {\r\n return this.innerFooterElements\r\n },\r\n assignAttrForEvents () {\r\n const events = this.footerElements.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e) => {\r\n this.evalShowExpressionForFooterElements()\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 [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\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 created () {\r\n const { elements } = this.footerMeta\r\n this.innerFooterElements = elements.call(this)\r\n this.evalShowExpressionForFooterElements()\r\n },\r\n methods: {\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.expressionData })\r\n },\r\n evalShowExpressionForFooterElements () {\r\n this.innerFooterElements = this.innerFooterElements.map(element => {\r\n const { show = true, key, eventName } = element\r\n if(key == BUILT_IN_EVENT_NAMES.SUBMIT || eventName == BUILT_IN_EVENT_NAMES.SUBMIT) {\r\n // built in submit button should according to the route meta disabled\r\n this.$set(element, '_show', this.executeExpression(show, this.expressionData) && !this.routeMetaDisabled)\r\n return element\r\n }\r\n show && this.$set(element, '_show', this.executeExpression(show, this.expressionData))\r\n return element\r\n })\r\n },\r\n getCurrentSlotComponentRef () {\r\n const includeMetaCmp = this.$children.find(child => child.meta)\r\n if (!includeMetaCmp) return null\r\n const { $children: components } = includeMetaCmp\r\n const target = components.find(cmp => cmp.$options._componentTag === 'ele-tpl')\r\n return target.getModel ? target.getModel() : null\r\n },\r\n setCurrentStep (index) {\r\n this.current = index\r\n this.evalShowExpressionForFooterElements()\r\n },\r\n nextStep () {\r\n if (this.current >= this.elements.length - 1) return\r\n this.current ++\r\n this.evalShowExpressionForFooterElements()\r\n },\r\n prevStep () {\r\n if (this.current <= 0) return\r\n this.current --\r\n this.evalShowExpressionForFooterElements()\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 [BUILT_IN_EVENT_NAMES.SUBMIT] (props) {\r\n const currentComponent = this.getCurrentSlotComponentRef() || {}\r\n const hasSubmitMethod = currentComponent.hasOwnProperty(BUILT_IN_EVENT_NAMES.SUBMIT)\r\n hasSubmitMethod && currentComponent[BUILT_IN_EVENT_NAMES.SUBMIT]()\r\n this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...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'import meta from '@/views/tree-table-page/meta'\r\n\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 });
|
|
3789
3798
|
|
|
3790
3799
|
};
|
|
3791
3800
|
/* scoped */
|
|
3792
|
-
const __vue_scope_id__$q = "data-v-
|
|
3801
|
+
const __vue_scope_id__$q = "data-v-5952ba66";
|
|
3793
3802
|
/* module identifier */
|
|
3794
3803
|
const __vue_module_identifier__$q = undefined;
|
|
3795
3804
|
/* functional template */
|
|
@@ -7431,7 +7440,7 @@ var script$6 = {
|
|
|
7431
7440
|
},
|
|
7432
7441
|
inject: {
|
|
7433
7442
|
[CONTEXT]: {
|
|
7434
|
-
default: () => ({})
|
|
7443
|
+
default: () => () => ({})
|
|
7435
7444
|
}
|
|
7436
7445
|
},
|
|
7437
7446
|
computed: {
|
|
@@ -7439,7 +7448,7 @@ var script$6 = {
|
|
|
7439
7448
|
return {
|
|
7440
7449
|
_route: this.$route.query,
|
|
7441
7450
|
_routeMeta: this.$route.meta,
|
|
7442
|
-
...this[CONTEXT]
|
|
7451
|
+
...this[CONTEXT]()
|
|
7443
7452
|
};
|
|
7444
7453
|
}
|
|
7445
7454
|
},
|
|
@@ -7516,11 +7525,11 @@ __vue_render__$6._withStripped = true;
|
|
|
7516
7525
|
/* style */
|
|
7517
7526
|
const __vue_inject_styles__$6 = function (inject) {
|
|
7518
7527
|
if (!inject) return
|
|
7519
|
-
inject("data-v-
|
|
7528
|
+
inject("data-v-8779c4e0_0", { source: ".button-group__wrapper[data-v-8779c4e0] {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n}\n.button-group__wrapper .ant-btn[data-v-8779c4e0] {\n margin-left: 8px;\n}\n.button-group__wrapper .ant-btn[data-v-8779c4e0]:first-child {\n margin-left: 0;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\composite-components\\button-group\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6EA;EACA,aAAA;EACA,kBAAA;EACA,mBAAA;AC5EA;AD6EA;EACA,gBAAA;AC3EA;AD4EA;EACA,cAAA;AC1EA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"button-group__wrapper\">\r\n <template v-for=\"(item, idx) in innerDatasource\" >\r\n <ele-button\r\n v-if=\"isBool(item._show) ? item._show : true\"\r\n :type=\"item.type\"\r\n :icon=\"item.icon\"\r\n :mode=\"item.mode\"\r\n :data-source=\"item.optionList\"\r\n :event-name=\"item.eventName\"\r\n :record=\"item\"\r\n v-on=\"$listeners\"\r\n :key=\"idx\">\r\n {{ item.label }}\r\n </ele-button>\r\n </template>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nimport { CONTEXT } from '../../../utils'\r\nexport default {\r\n name: 'ele-button-group',\r\n props: {\r\n dataSource: {\r\n type: Array,\r\n default: () => []\r\n }\r\n },\r\n data() {\r\n return {\r\n innerDatasource: []\r\n }\r\n },\r\n inject: {\r\n [CONTEXT]: {\r\n default: () => (() => ({}))\r\n }\r\n },\r\n computed: {\r\n currentContext () {\r\n return {\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta,\r\n ...this[CONTEXT]()\r\n }\r\n }\r\n },\r\n watch: {\r\n dataSource: {\r\n handler (dataSource) {\r\n this.innerDatasource = dataSource.map(item => {\r\n return {\r\n ...item,\r\n _show: this.executeExpression(item.show)\r\n }\r\n })\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n executeExpression (expression) {\r\n if (type.isBool(expression)) return expression\r\n if (type.isEmpty(expression)) return true\r\n return parse(expression, { ...this.currentContext })\r\n },\r\n isBool (arg) {\r\n return type.isBool(arg)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.button-group__wrapper {\r\n display: flex;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n .ant-btn {\r\n margin-left: 8px;\r\n &:first-child {\r\n margin-left: 0;\r\n }\r\n }\r\n}\r\n</style>",".button-group__wrapper {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n}\n.button-group__wrapper .ant-btn {\n margin-left: 8px;\n}\n.button-group__wrapper .ant-btn:first-child {\n margin-left: 0;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
7520
7529
|
|
|
7521
7530
|
};
|
|
7522
7531
|
/* scoped */
|
|
7523
|
-
const __vue_scope_id__$6 = "data-v-
|
|
7532
|
+
const __vue_scope_id__$6 = "data-v-8779c4e0";
|
|
7524
7533
|
/* module identifier */
|
|
7525
7534
|
const __vue_module_identifier__$6 = undefined;
|
|
7526
7535
|
/* functional template */
|
|
@@ -3329,7 +3329,7 @@
|
|
|
3329
3329
|
},
|
|
3330
3330
|
execFieldMap(fieldMap = {}, dataSource = {}) {
|
|
3331
3331
|
const ret = parseFieldMap(fieldMap, {
|
|
3332
|
-
|
|
3332
|
+
...this.expressionData,
|
|
3333
3333
|
...dataSource
|
|
3334
3334
|
});
|
|
3335
3335
|
return ret;
|
|
@@ -3404,7 +3404,7 @@
|
|
|
3404
3404
|
data
|
|
3405
3405
|
} = await shared.net[requestType.toLowerCase()](currentUrl, {
|
|
3406
3406
|
...params,
|
|
3407
|
-
...fieldMap
|
|
3407
|
+
...this.execFieldMap(fieldMap)
|
|
3408
3408
|
}, {
|
|
3409
3409
|
...headers
|
|
3410
3410
|
});
|
|
@@ -3506,11 +3506,11 @@
|
|
|
3506
3506
|
/* style */
|
|
3507
3507
|
const __vue_inject_styles__$r = function (inject) {
|
|
3508
3508
|
if (!inject) return
|
|
3509
|
-
inject("data-v-
|
|
3509
|
+
inject("data-v-22c624b4_0", { source: ".form__model--wrapper[data-v-22c624b4] {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-22c624b4] {\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-22c624b4] {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-22c624b4] {\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\\models\\form-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6KA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;AC5KA;AD6KA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AC3KA;AD6KA;EACA,aAAA;AC3KA;AD6KA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC3KA;;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\" :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 } 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 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 }\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 formModels () {\r\n return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}\r\n },\r\n executeExpression (expression, dataSource = {}) {\r\n if (type.isBool(expression)) return expression\r\n if (type.isEmpty(expression)) return false\r\n return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })\r\n },\r\n execFieldMap (fieldMap = {}, dataSource = {}) {\r\n const ret = parseFieldMap(fieldMap, { ...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.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })\r\n },\r\n executeExpressionForUrl (url) {\r\n return this.executeExpression(url) ? this.executeExpression(url) : url\r\n },\r\n setFieldsValue (props) {\r\n this.$refs[this.formRef].setFieldsValue(props)\r\n },\r\n validateFields () {\r\n return this.$refs[this.formRef].validateFields()\r\n },\r\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n if (this.globalDisabled) return\r\n const status = this.$refs[this.formRef].validateFields()\r\n if (status) {\r\n //TODO fieldMap\r\n return this.submitRequestTrigger(props)\r\n } else {\r\n return false\r\n }\r\n },\r\n [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\r\n this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\r\n }\r\n },\r\n async mounted() {\r\n await this.preRequestTrigger()\r\n await this.infoRequestTrigger()\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.form__model--wrapper {\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n background: #fff;\r\n .form-model__title {\r\n height: 56px;\r\n padding: 0 16px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n border-bottom: 1px solid var(--idooel-form-title-border-color);\r\n }\r\n .form-model__content {\r\n padding: 16px;\r\n }\r\n .form-model__footer {\r\n /* width: 100%; */\r\n height: 64px;\r\n position: fixed;\r\n bottom: 0;\r\n display: flex;\r\n float: right;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: end;\r\n }\r\n}\r\n</style>",".form__model--wrapper {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title {\n height: 56px;\n padding: 0 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid var(--idooel-form-title-border-color);\n}\n.form__model--wrapper .form-model__content {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer {\n /* width: 100%; */\n height: 64px;\n position: fixed;\n bottom: 0;\n display: flex;\n float: right;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
3510
3510
|
|
|
3511
3511
|
};
|
|
3512
3512
|
/* scoped */
|
|
3513
|
-
const __vue_scope_id__$r = "data-v-
|
|
3513
|
+
const __vue_scope_id__$r = "data-v-22c624b4";
|
|
3514
3514
|
/* module identifier */
|
|
3515
3515
|
const __vue_module_identifier__$r = undefined;
|
|
3516
3516
|
/* functional template */
|
|
@@ -3554,9 +3554,18 @@
|
|
|
3554
3554
|
innerFooterElements: []
|
|
3555
3555
|
};
|
|
3556
3556
|
},
|
|
3557
|
+
provide() {
|
|
3558
|
+
return {
|
|
3559
|
+
[CONTEXT]: () => {
|
|
3560
|
+
return {
|
|
3561
|
+
...this.expressionData
|
|
3562
|
+
};
|
|
3563
|
+
}
|
|
3564
|
+
};
|
|
3565
|
+
},
|
|
3557
3566
|
computed: {
|
|
3558
3567
|
routeMetaDisabled() {
|
|
3559
|
-
return this.
|
|
3568
|
+
return this.executeExpression(this.$route.meta.disabled);
|
|
3560
3569
|
},
|
|
3561
3570
|
expressionData() {
|
|
3562
3571
|
return {
|
|
@@ -3640,7 +3649,7 @@
|
|
|
3640
3649
|
this.evalShowExpressionForFooterElements();
|
|
3641
3650
|
},
|
|
3642
3651
|
methods: {
|
|
3643
|
-
|
|
3652
|
+
executeExpression(expression) {
|
|
3644
3653
|
if (shared.type.isBool(expression)) return expression;
|
|
3645
3654
|
if (shared.type.isEmpty(expression)) return false;
|
|
3646
3655
|
return parse(expression, {
|
|
@@ -3650,16 +3659,16 @@
|
|
|
3650
3659
|
evalShowExpressionForFooterElements() {
|
|
3651
3660
|
this.innerFooterElements = this.innerFooterElements.map(element => {
|
|
3652
3661
|
const {
|
|
3653
|
-
show,
|
|
3662
|
+
show = true,
|
|
3654
3663
|
key,
|
|
3655
3664
|
eventName
|
|
3656
3665
|
} = element;
|
|
3657
3666
|
if (key == BUILT_IN_EVENT_NAMES.SUBMIT || eventName == BUILT_IN_EVENT_NAMES.SUBMIT) {
|
|
3658
3667
|
// built in submit button should according to the route meta disabled
|
|
3659
|
-
this.$set(element, '_show',
|
|
3668
|
+
this.$set(element, '_show', this.executeExpression(show, this.expressionData) && !this.routeMetaDisabled);
|
|
3660
3669
|
return element;
|
|
3661
3670
|
}
|
|
3662
|
-
show && this.$set(element, '_show',
|
|
3671
|
+
show && this.$set(element, '_show', this.executeExpression(show, this.expressionData));
|
|
3663
3672
|
return element;
|
|
3664
3673
|
});
|
|
3665
3674
|
},
|
|
@@ -3792,11 +3801,11 @@
|
|
|
3792
3801
|
/* style */
|
|
3793
3802
|
const __vue_inject_styles__$q = function (inject) {
|
|
3794
3803
|
if (!inject) return
|
|
3795
|
-
inject("data-v-
|
|
3804
|
+
inject("data-v-5952ba66_0", { source: ".ele-step-model__wrapper[data-v-5952ba66] {\n width: 100%;\n height: 100vh;\n position: relative;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper[data-v-5952ba66] {\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-5952ba66] {\n text-align: left;\n}\n.ele-step-model__wrapper .ele-step-model__content--wrapper[data-v-5952ba66] {\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-5952ba66] {\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\\models\\step-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAwLA;EACA,WAAA;EACA,aAAA;EACA,kBAAA;ACvLA;ADwLA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,gBAAA;ACtLA;ADwLA;EACA,gBAAA;ACtLA;AD0LA;EACA,WAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,+CAAA;EACA,cAAA;ACxLA;AD0LA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACxLA;;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 :key=\"name\" 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 { BUILT_IN_EVENT_NAMES, CONTEXT } from '../../../utils'\r\nimport { parse } from '@idooel/expression'\r\nimport { type } from '@idooel/shared'\r\nexport default {\r\n name: 'ele-step-model',\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 innerFooterElements: []\r\n }\r\n },\r\n provide() {\r\n return {\r\n [CONTEXT]: () => {\r\n return {\r\n ...this.expressionData\r\n }\r\n }\r\n }\r\n },\r\n computed: {\r\n routeMetaDisabled () {\r\n return this.executeExpression(this.$route.meta.disabled)\r\n },\r\n expressionData () {\r\n return {\r\n current: this.current,\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta\r\n }\r\n },\r\n currentSlotName () {\r\n return this.scopedSlotsNames[this.current]\r\n },\r\n footerElements () {\r\n return this.innerFooterElements\r\n },\r\n assignAttrForEvents () {\r\n const events = this.footerElements.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e) => {\r\n this.evalShowExpressionForFooterElements()\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 [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\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 created () {\r\n const { elements } = this.footerMeta\r\n this.innerFooterElements = elements.call(this)\r\n this.evalShowExpressionForFooterElements()\r\n },\r\n methods: {\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.expressionData })\r\n },\r\n evalShowExpressionForFooterElements () {\r\n this.innerFooterElements = this.innerFooterElements.map(element => {\r\n const { show = true, key, eventName } = element\r\n if(key == BUILT_IN_EVENT_NAMES.SUBMIT || eventName == BUILT_IN_EVENT_NAMES.SUBMIT) {\r\n // built in submit button should according to the route meta disabled\r\n this.$set(element, '_show', this.executeExpression(show, this.expressionData) && !this.routeMetaDisabled)\r\n return element\r\n }\r\n show && this.$set(element, '_show', this.executeExpression(show, this.expressionData))\r\n return element\r\n })\r\n },\r\n getCurrentSlotComponentRef () {\r\n const includeMetaCmp = this.$children.find(child => child.meta)\r\n if (!includeMetaCmp) return null\r\n const { $children: components } = includeMetaCmp\r\n const target = components.find(cmp => cmp.$options._componentTag === 'ele-tpl')\r\n return target.getModel ? target.getModel() : null\r\n },\r\n setCurrentStep (index) {\r\n this.current = index\r\n this.evalShowExpressionForFooterElements()\r\n },\r\n nextStep () {\r\n if (this.current >= this.elements.length - 1) return\r\n this.current ++\r\n this.evalShowExpressionForFooterElements()\r\n },\r\n prevStep () {\r\n if (this.current <= 0) return\r\n this.current --\r\n this.evalShowExpressionForFooterElements()\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 [BUILT_IN_EVENT_NAMES.SUBMIT] (props) {\r\n const currentComponent = this.getCurrentSlotComponentRef() || {}\r\n const hasSubmitMethod = currentComponent.hasOwnProperty(BUILT_IN_EVENT_NAMES.SUBMIT)\r\n hasSubmitMethod && currentComponent[BUILT_IN_EVENT_NAMES.SUBMIT]()\r\n this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...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'import meta from '@/views/tree-table-page/meta'\r\n\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 });
|
|
3796
3805
|
|
|
3797
3806
|
};
|
|
3798
3807
|
/* scoped */
|
|
3799
|
-
const __vue_scope_id__$q = "data-v-
|
|
3808
|
+
const __vue_scope_id__$q = "data-v-5952ba66";
|
|
3800
3809
|
/* module identifier */
|
|
3801
3810
|
const __vue_module_identifier__$q = undefined;
|
|
3802
3811
|
/* functional template */
|
|
@@ -7438,7 +7447,7 @@
|
|
|
7438
7447
|
},
|
|
7439
7448
|
inject: {
|
|
7440
7449
|
[CONTEXT]: {
|
|
7441
|
-
default: () => ({})
|
|
7450
|
+
default: () => () => ({})
|
|
7442
7451
|
}
|
|
7443
7452
|
},
|
|
7444
7453
|
computed: {
|
|
@@ -7446,7 +7455,7 @@
|
|
|
7446
7455
|
return {
|
|
7447
7456
|
_route: this.$route.query,
|
|
7448
7457
|
_routeMeta: this.$route.meta,
|
|
7449
|
-
...this[CONTEXT]
|
|
7458
|
+
...this[CONTEXT]()
|
|
7450
7459
|
};
|
|
7451
7460
|
}
|
|
7452
7461
|
},
|
|
@@ -7523,11 +7532,11 @@
|
|
|
7523
7532
|
/* style */
|
|
7524
7533
|
const __vue_inject_styles__$6 = function (inject) {
|
|
7525
7534
|
if (!inject) return
|
|
7526
|
-
inject("data-v-
|
|
7535
|
+
inject("data-v-8779c4e0_0", { source: ".button-group__wrapper[data-v-8779c4e0] {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n}\n.button-group__wrapper .ant-btn[data-v-8779c4e0] {\n margin-left: 8px;\n}\n.button-group__wrapper .ant-btn[data-v-8779c4e0]:first-child {\n margin-left: 0;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\composite-components\\button-group\\src\\index.vue","index.vue"],"names":[],"mappings":"AA6EA;EACA,aAAA;EACA,kBAAA;EACA,mBAAA;AC5EA;AD6EA;EACA,gBAAA;AC3EA;AD4EA;EACA,cAAA;AC1EA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n <div class=\"button-group__wrapper\">\r\n <template v-for=\"(item, idx) in innerDatasource\" >\r\n <ele-button\r\n v-if=\"isBool(item._show) ? item._show : true\"\r\n :type=\"item.type\"\r\n :icon=\"item.icon\"\r\n :mode=\"item.mode\"\r\n :data-source=\"item.optionList\"\r\n :event-name=\"item.eventName\"\r\n :record=\"item\"\r\n v-on=\"$listeners\"\r\n :key=\"idx\">\r\n {{ item.label }}\r\n </ele-button>\r\n </template>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { type } from '@idooel/shared'\r\nimport { parse } from '@idooel/expression'\r\nimport { CONTEXT } from '../../../utils'\r\nexport default {\r\n name: 'ele-button-group',\r\n props: {\r\n dataSource: {\r\n type: Array,\r\n default: () => []\r\n }\r\n },\r\n data() {\r\n return {\r\n innerDatasource: []\r\n }\r\n },\r\n inject: {\r\n [CONTEXT]: {\r\n default: () => (() => ({}))\r\n }\r\n },\r\n computed: {\r\n currentContext () {\r\n return {\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta,\r\n ...this[CONTEXT]()\r\n }\r\n }\r\n },\r\n watch: {\r\n dataSource: {\r\n handler (dataSource) {\r\n this.innerDatasource = dataSource.map(item => {\r\n return {\r\n ...item,\r\n _show: this.executeExpression(item.show)\r\n }\r\n })\r\n },\r\n immediate: true\r\n }\r\n },\r\n methods: {\r\n executeExpression (expression) {\r\n if (type.isBool(expression)) return expression\r\n if (type.isEmpty(expression)) return true\r\n return parse(expression, { ...this.currentContext })\r\n },\r\n isBool (arg) {\r\n return type.isBool(arg)\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.button-group__wrapper {\r\n display: flex;\r\n padding-left: 16px;\r\n padding-right: 16px;\r\n .ant-btn {\r\n margin-left: 8px;\r\n &:first-child {\r\n margin-left: 0;\r\n }\r\n }\r\n}\r\n</style>",".button-group__wrapper {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n}\n.button-group__wrapper .ant-btn {\n margin-left: 8px;\n}\n.button-group__wrapper .ant-btn:first-child {\n margin-left: 0;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
7527
7536
|
|
|
7528
7537
|
};
|
|
7529
7538
|
/* scoped */
|
|
7530
|
-
const __vue_scope_id__$6 = "data-v-
|
|
7539
|
+
const __vue_scope_id__$6 = "data-v-8779c4e0";
|
|
7531
7540
|
/* module identifier */
|
|
7532
7541
|
const __vue_module_identifier__$6 = undefined;
|
|
7533
7542
|
/* functional template */
|
package/package.json
CHANGED
|
@@ -36,7 +36,7 @@ export default {
|
|
|
36
36
|
},
|
|
37
37
|
inject: {
|
|
38
38
|
[CONTEXT]: {
|
|
39
|
-
default: () => ({})
|
|
39
|
+
default: () => (() => ({}))
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
computed: {
|
|
@@ -44,7 +44,7 @@ export default {
|
|
|
44
44
|
return {
|
|
45
45
|
_route: this.$route.query,
|
|
46
46
|
_routeMeta: this.$route.meta,
|
|
47
|
-
...this[CONTEXT]
|
|
47
|
+
...this[CONTEXT]()
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
},
|
|
@@ -109,7 +109,7 @@ export default {
|
|
|
109
109
|
return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })
|
|
110
110
|
},
|
|
111
111
|
execFieldMap (fieldMap = {}, dataSource = {}) {
|
|
112
|
-
const ret = parseFieldMap(fieldMap, {
|
|
112
|
+
const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})
|
|
113
113
|
return ret
|
|
114
114
|
},
|
|
115
115
|
async submitRequestTrigger (props = {}) {
|
|
@@ -137,7 +137,7 @@ export default {
|
|
|
137
137
|
const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest
|
|
138
138
|
const currentUrl = this.executeExpressionForUrl(url)
|
|
139
139
|
if (!currentUrl) return
|
|
140
|
-
const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...fieldMap }, { ...headers })
|
|
140
|
+
const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })
|
|
141
141
|
this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
|
|
142
142
|
},
|
|
143
143
|
executeExpressionForUrl (url) {
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
</template>
|
|
20
20
|
|
|
21
21
|
<script>
|
|
22
|
-
import { BUILT_IN_EVENT_NAMES } from '../../../utils'
|
|
22
|
+
import { BUILT_IN_EVENT_NAMES, CONTEXT } from '../../../utils'
|
|
23
23
|
import { parse } from '@idooel/expression'
|
|
24
24
|
import { type } from '@idooel/shared'
|
|
25
25
|
export default {
|
|
@@ -41,9 +41,18 @@ export default {
|
|
|
41
41
|
innerFooterElements: []
|
|
42
42
|
}
|
|
43
43
|
},
|
|
44
|
+
provide() {
|
|
45
|
+
return {
|
|
46
|
+
[CONTEXT]: () => {
|
|
47
|
+
return {
|
|
48
|
+
...this.expressionData
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
44
53
|
computed: {
|
|
45
54
|
routeMetaDisabled () {
|
|
46
|
-
return this.
|
|
55
|
+
return this.executeExpression(this.$route.meta.disabled)
|
|
47
56
|
},
|
|
48
57
|
expressionData () {
|
|
49
58
|
return {
|
|
@@ -118,20 +127,20 @@ export default {
|
|
|
118
127
|
this.evalShowExpressionForFooterElements()
|
|
119
128
|
},
|
|
120
129
|
methods: {
|
|
121
|
-
|
|
130
|
+
executeExpression (expression) {
|
|
122
131
|
if (type.isBool(expression)) return expression
|
|
123
132
|
if (type.isEmpty(expression)) return false
|
|
124
133
|
return parse(expression, { ...this.expressionData })
|
|
125
134
|
},
|
|
126
135
|
evalShowExpressionForFooterElements () {
|
|
127
136
|
this.innerFooterElements = this.innerFooterElements.map(element => {
|
|
128
|
-
const { show, key, eventName } = element
|
|
137
|
+
const { show = true, key, eventName } = element
|
|
129
138
|
if(key == BUILT_IN_EVENT_NAMES.SUBMIT || eventName == BUILT_IN_EVENT_NAMES.SUBMIT) {
|
|
130
139
|
// built in submit button should according to the route meta disabled
|
|
131
|
-
this.$set(element, '_show',
|
|
140
|
+
this.$set(element, '_show', this.executeExpression(show, this.expressionData) && !this.routeMetaDisabled)
|
|
132
141
|
return element
|
|
133
142
|
}
|
|
134
|
-
show && this.$set(element, '_show',
|
|
143
|
+
show && this.$set(element, '_show', this.executeExpression(show, this.expressionData))
|
|
135
144
|
return element
|
|
136
145
|
})
|
|
137
146
|
},
|