@idooel/components 0.0.1-beta.13 → 0.0.1-beta.15
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.
|
@@ -3741,7 +3741,6 @@ var script$9 = {
|
|
|
3741
3741
|
},
|
|
3742
3742
|
setDefaultValues() {
|
|
3743
3743
|
const defaultValues = this.collectDefaultValues();
|
|
3744
|
-
console.log(defaultValues, 'defaultValues');
|
|
3745
3744
|
this.setFieldsValue(defaultValues);
|
|
3746
3745
|
},
|
|
3747
3746
|
validateFields() {
|
|
@@ -4051,11 +4050,11 @@ __vue_render__$9._withStripped = true;
|
|
|
4051
4050
|
/* style */
|
|
4052
4051
|
const __vue_inject_styles__$9 = function (inject) {
|
|
4053
4052
|
if (!inject) return
|
|
4054
|
-
inject("data-v-
|
|
4053
|
+
inject("data-v-55fe862a_0", { source: ".ele__form--wrapper[data-v-55fe862a] {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAgJA;EACA,gBAAA;AC/IA;;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 <a-col :span=\"ele.span\" v-for=\"ele in elements\" :key=\"ele.name\">\r\n <template v-if=\"ele.type == 'Input'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-input @change=\"onChange($event, ele)\" :disabled=\"ele.disabled\" :max-length=\"ele.maxLength\" v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-input>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"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=\"ele.disabled\"\r\n :allow-clear=\"ele.allowClear\"\r\n :placeholder=\"ele.placeholder\"\r\n v-decorator=\"[ele.name, { rules: 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 == 'Select'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-select :data-source=\"ele.optionList\" :disabled=\"ele.disabled\" :code=\"ele.code\" :params=\"ele.params\" v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></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: ele.rules }]\" style=\"width:100%;\"></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 v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-date-range>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'SelectEntity'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-select-entity v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-select-entity>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'InputNumber'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-input-number :precision=\"ele.precision\" v-decorator=\"[ele.name, { rules: ele.rules }]\" v-bind=\"ele.props\" style=\"width:100%;\"></ele-input-number>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Checkbox'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-checkbox :data-source=\"ele.optionList\" v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-checkbox>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Radio'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-radio @change=\"onChange($event, ele)\" :data-source=\"ele.optionList\" v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-radio>\r\n </a-form-item>\r\n </template>\r\n </a-col>\r\n </a-row>\r\n </a-form>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport EleSelect from '../../select/src/index.vue'\r\nimport EleInput from '../../input/src/index.vue'\r\nimport EleTextarea from '../../textarea/src/index.vue'\r\nimport EleUpload from '../../upload/src/index.vue'\r\nimport EleSelectEntity from '../../select-entity/src/index.vue'\r\nimport EleInputNumber from '../../input-number/src/index.vue'\r\nimport EleCheckbox from '../../checkbox/src/index.vue'\r\nimport EleRadio from '../../radio/src/index.vue'\r\nexport default {\r\n name: 'ele-form',\r\n components: {\r\n EleSelect,\r\n EleInput,\r\n EleTextarea,\r\n EleUpload,\r\n EleSelectEntity,\r\n EleInputNumber,\r\n EleCheckbox,\r\n EleRadio\r\n },\r\n props: {\r\n elements: {\r\n type: Array,\r\n default: () => []\r\n }\r\n },\r\n data () {\r\n return {\r\n some: '1',\r\n form: this.$form.createForm(this, { name: 'coordinated' })\r\n }\r\n },\r\n computed: {\r\n exposedMethods () {\r\n return {\r\n setFieldsValue: this.setFieldsValue\r\n }\r\n }\r\n },\r\n methods: {\r\n onChange (value, props) {\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 setDefaultValues () {\r\n const defaultValues = this.collectDefaultValues()\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.form.setFieldsValue(props)\r\n },\r\n getFieldsValue () {\r\n return this.form.getFieldsValue()\r\n }\r\n },\r\n mounted() {\r\n this.setDefaultValues()\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 });
|
|
4055
4054
|
|
|
4056
4055
|
};
|
|
4057
4056
|
/* scoped */
|
|
4058
|
-
const __vue_scope_id__$9 = "data-v-
|
|
4057
|
+
const __vue_scope_id__$9 = "data-v-55fe862a";
|
|
4059
4058
|
/* module identifier */
|
|
4060
4059
|
const __vue_module_identifier__$9 = undefined;
|
|
4061
4060
|
/* functional template */
|
|
@@ -4462,7 +4461,7 @@ var script$7 = {
|
|
|
4462
4461
|
});
|
|
4463
4462
|
return ret;
|
|
4464
4463
|
},
|
|
4465
|
-
async submitRequestTrigger(props) {
|
|
4464
|
+
async submitRequestTrigger(props = {}) {
|
|
4466
4465
|
const {
|
|
4467
4466
|
url,
|
|
4468
4467
|
requestType,
|
|
@@ -4471,7 +4470,7 @@ var script$7 = {
|
|
|
4471
4470
|
fieldMap = {}
|
|
4472
4471
|
} = this.submitRequest;
|
|
4473
4472
|
if (!url) return;
|
|
4474
|
-
net[requestType.toLowerCase()](url, {
|
|
4473
|
+
const ret = await net[requestType.toLowerCase()](url, {
|
|
4475
4474
|
...params,
|
|
4476
4475
|
...this.execFieldMap(fieldMap, {
|
|
4477
4476
|
...this.formModels
|
|
@@ -4481,10 +4480,12 @@ var script$7 = {
|
|
|
4481
4480
|
headers
|
|
4482
4481
|
}).then(resp => {
|
|
4483
4482
|
this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, {
|
|
4484
|
-
props,
|
|
4483
|
+
...props,
|
|
4485
4484
|
formModel: this.formModels
|
|
4486
4485
|
});
|
|
4486
|
+
return true;
|
|
4487
4487
|
});
|
|
4488
|
+
return ret;
|
|
4488
4489
|
},
|
|
4489
4490
|
async infoRequestTrigger() {
|
|
4490
4491
|
const {
|
|
@@ -4529,18 +4530,18 @@ var script$7 = {
|
|
|
4529
4530
|
validateFields() {
|
|
4530
4531
|
return this.$refs[this.formRef].validateFields();
|
|
4531
4532
|
},
|
|
4532
|
-
[BUILT_IN_EVENT_NAMES.SUBMIT](props) {
|
|
4533
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
|
|
4533
4534
|
const status = this.$refs[this.formRef].validateFields();
|
|
4534
4535
|
if (status) {
|
|
4535
4536
|
//TODO fieldMap
|
|
4536
|
-
this.submitRequestTrigger(props);
|
|
4537
|
+
return this.submitRequestTrigger(props);
|
|
4537
4538
|
} else {
|
|
4538
|
-
|
|
4539
|
+
return false;
|
|
4539
4540
|
}
|
|
4540
4541
|
},
|
|
4541
|
-
[BUILT_IN_EVENT_NAMES.CANCEL](props) {
|
|
4542
|
+
[BUILT_IN_EVENT_NAMES.CANCEL](props = {}) {
|
|
4542
4543
|
this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, {
|
|
4543
|
-
props
|
|
4544
|
+
...props
|
|
4544
4545
|
});
|
|
4545
4546
|
}
|
|
4546
4547
|
},
|
|
@@ -4596,11 +4597,11 @@ __vue_render__$7._withStripped = true;
|
|
|
4596
4597
|
/* style */
|
|
4597
4598
|
const __vue_inject_styles__$7 = function (inject) {
|
|
4598
4599
|
if (!inject) return
|
|
4599
|
-
inject("data-v-
|
|
4600
|
+
inject("data-v-275e91c9_0", { source: ".form__model--wrapper[data-v-275e91c9] {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-275e91c9] {\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-275e91c9] {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-275e91c9] {\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":"AAsIA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;ACrIA;ADsIA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;ACpIA;ADsIA;EACA,aAAA;ACpIA;ADsIA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACpIA;;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 this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: this.formModels })\r\n return true\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 });
|
|
4600
4601
|
|
|
4601
4602
|
};
|
|
4602
4603
|
/* scoped */
|
|
4603
|
-
const __vue_scope_id__$7 = "data-v-
|
|
4604
|
+
const __vue_scope_id__$7 = "data-v-275e91c9";
|
|
4604
4605
|
/* module identifier */
|
|
4605
4606
|
const __vue_module_identifier__$7 = undefined;
|
|
4606
4607
|
/* functional template */
|
|
@@ -4642,16 +4643,11 @@ var script$6 = {
|
|
|
4642
4643
|
},
|
|
4643
4644
|
data() {
|
|
4644
4645
|
return {
|
|
4645
|
-
current: 0
|
|
4646
|
+
current: 0,
|
|
4647
|
+
currentSlotComponentRef: null
|
|
4646
4648
|
};
|
|
4647
4649
|
},
|
|
4648
4650
|
computed: {
|
|
4649
|
-
currentSlotComponentRef() {
|
|
4650
|
-
const {
|
|
4651
|
-
$children: [component]
|
|
4652
|
-
} = this.$children[this.current];
|
|
4653
|
-
return component.getModel();
|
|
4654
|
-
},
|
|
4655
4651
|
currentSlotName() {
|
|
4656
4652
|
return this.scopedSlotsNames[this.current];
|
|
4657
4653
|
},
|
|
@@ -4709,9 +4705,25 @@ var script$6 = {
|
|
|
4709
4705
|
this.current = idx;
|
|
4710
4706
|
},
|
|
4711
4707
|
immediate: true
|
|
4708
|
+
},
|
|
4709
|
+
current: {
|
|
4710
|
+
handler() {
|
|
4711
|
+
this.$nextTick(() => {
|
|
4712
|
+
this.currentSlotComponentRef = this.getCurrentSlotComponentRef();
|
|
4713
|
+
});
|
|
4714
|
+
},
|
|
4715
|
+
immediate: true
|
|
4712
4716
|
}
|
|
4713
4717
|
},
|
|
4714
4718
|
methods: {
|
|
4719
|
+
getCurrentSlotComponentRef() {
|
|
4720
|
+
const includeMetaCmp = this.$children.find(child => child.meta);
|
|
4721
|
+
if (!includeMetaCmp) return null;
|
|
4722
|
+
const {
|
|
4723
|
+
$children: [component]
|
|
4724
|
+
} = includeMetaCmp;
|
|
4725
|
+
return component.getModel ? component.getModel() : null;
|
|
4726
|
+
},
|
|
4715
4727
|
setCurrentStep(index) {
|
|
4716
4728
|
this.current = index;
|
|
4717
4729
|
},
|
|
@@ -4817,11 +4829,11 @@ __vue_render__$6._withStripped = true;
|
|
|
4817
4829
|
/* style */
|
|
4818
4830
|
const __vue_inject_styles__$6 = function (inject) {
|
|
4819
4831
|
if (!inject) return
|
|
4820
|
-
inject("data-v-
|
|
4832
|
+
inject("data-v-86ff892c_0", { source: ".ele-step-model__wrapper[data-v-86ff892c] {\n width: 100%;\n height: 100vh;\n position: relative;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper[data-v-86ff892c] {\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-86ff892c] {\n text-align: left;\n}\n.ele-step-model__wrapper .ele-step-model__content--wrapper[data-v-86ff892c] {\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-86ff892c] {\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":"AAoIA;EACA,WAAA;EACA,aAAA;EACA,kBAAA;ACnIA;ADoIA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,gBAAA;AClIA;ADoIA;EACA,gBAAA;AClIA;ADsIA;EACA,WAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,+CAAA;EACA,cAAA;ACpIA;ADsIA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACpIA;;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 }\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 });
|
|
4821
4833
|
|
|
4822
4834
|
};
|
|
4823
4835
|
/* scoped */
|
|
4824
|
-
const __vue_scope_id__$6 = "data-v-
|
|
4836
|
+
const __vue_scope_id__$6 = "data-v-86ff892c";
|
|
4825
4837
|
/* module identifier */
|
|
4826
4838
|
const __vue_module_identifier__$6 = undefined;
|
|
4827
4839
|
/* functional template */
|
|
@@ -3748,7 +3748,6 @@
|
|
|
3748
3748
|
},
|
|
3749
3749
|
setDefaultValues() {
|
|
3750
3750
|
const defaultValues = this.collectDefaultValues();
|
|
3751
|
-
console.log(defaultValues, 'defaultValues');
|
|
3752
3751
|
this.setFieldsValue(defaultValues);
|
|
3753
3752
|
},
|
|
3754
3753
|
validateFields() {
|
|
@@ -4058,11 +4057,11 @@
|
|
|
4058
4057
|
/* style */
|
|
4059
4058
|
const __vue_inject_styles__$9 = function (inject) {
|
|
4060
4059
|
if (!inject) return
|
|
4061
|
-
inject("data-v-
|
|
4060
|
+
inject("data-v-55fe862a_0", { source: ".ele__form--wrapper[data-v-55fe862a] {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\work\\code\\ganjiao\\ganjian-monorepo\\packages\\components\\packages\\form\\src\\index.vue","index.vue"],"names":[],"mappings":"AAgJA;EACA,gBAAA;AC/IA;;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 <a-col :span=\"ele.span\" v-for=\"ele in elements\" :key=\"ele.name\">\r\n <template v-if=\"ele.type == 'Input'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-input @change=\"onChange($event, ele)\" :disabled=\"ele.disabled\" :max-length=\"ele.maxLength\" v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-input>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"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=\"ele.disabled\"\r\n :allow-clear=\"ele.allowClear\"\r\n :placeholder=\"ele.placeholder\"\r\n v-decorator=\"[ele.name, { rules: 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 == 'Select'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-select :data-source=\"ele.optionList\" :disabled=\"ele.disabled\" :code=\"ele.code\" :params=\"ele.params\" v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></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: ele.rules }]\" style=\"width:100%;\"></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 v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-date-range>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'SelectEntity'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-select-entity v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-select-entity>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'InputNumber'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-input-number :precision=\"ele.precision\" v-decorator=\"[ele.name, { rules: ele.rules }]\" v-bind=\"ele.props\" style=\"width:100%;\"></ele-input-number>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Checkbox'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-checkbox :data-source=\"ele.optionList\" v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-checkbox>\r\n </a-form-item>\r\n </template>\r\n <template v-else-if=\"ele.type == 'Radio'\">\r\n <a-form-item :label=\"`${ele.label}：`\">\r\n <ele-radio @change=\"onChange($event, ele)\" :data-source=\"ele.optionList\" v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-radio>\r\n </a-form-item>\r\n </template>\r\n </a-col>\r\n </a-row>\r\n </a-form>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport EleSelect from '../../select/src/index.vue'\r\nimport EleInput from '../../input/src/index.vue'\r\nimport EleTextarea from '../../textarea/src/index.vue'\r\nimport EleUpload from '../../upload/src/index.vue'\r\nimport EleSelectEntity from '../../select-entity/src/index.vue'\r\nimport EleInputNumber from '../../input-number/src/index.vue'\r\nimport EleCheckbox from '../../checkbox/src/index.vue'\r\nimport EleRadio from '../../radio/src/index.vue'\r\nexport default {\r\n name: 'ele-form',\r\n components: {\r\n EleSelect,\r\n EleInput,\r\n EleTextarea,\r\n EleUpload,\r\n EleSelectEntity,\r\n EleInputNumber,\r\n EleCheckbox,\r\n EleRadio\r\n },\r\n props: {\r\n elements: {\r\n type: Array,\r\n default: () => []\r\n }\r\n },\r\n data () {\r\n return {\r\n some: '1',\r\n form: this.$form.createForm(this, { name: 'coordinated' })\r\n }\r\n },\r\n computed: {\r\n exposedMethods () {\r\n return {\r\n setFieldsValue: this.setFieldsValue\r\n }\r\n }\r\n },\r\n methods: {\r\n onChange (value, props) {\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 setDefaultValues () {\r\n const defaultValues = this.collectDefaultValues()\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.form.setFieldsValue(props)\r\n },\r\n getFieldsValue () {\r\n return this.form.getFieldsValue()\r\n }\r\n },\r\n mounted() {\r\n this.setDefaultValues()\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 });
|
|
4062
4061
|
|
|
4063
4062
|
};
|
|
4064
4063
|
/* scoped */
|
|
4065
|
-
const __vue_scope_id__$9 = "data-v-
|
|
4064
|
+
const __vue_scope_id__$9 = "data-v-55fe862a";
|
|
4066
4065
|
/* module identifier */
|
|
4067
4066
|
const __vue_module_identifier__$9 = undefined;
|
|
4068
4067
|
/* functional template */
|
|
@@ -4469,7 +4468,7 @@
|
|
|
4469
4468
|
});
|
|
4470
4469
|
return ret;
|
|
4471
4470
|
},
|
|
4472
|
-
async submitRequestTrigger(props) {
|
|
4471
|
+
async submitRequestTrigger(props = {}) {
|
|
4473
4472
|
const {
|
|
4474
4473
|
url,
|
|
4475
4474
|
requestType,
|
|
@@ -4478,7 +4477,7 @@
|
|
|
4478
4477
|
fieldMap = {}
|
|
4479
4478
|
} = this.submitRequest;
|
|
4480
4479
|
if (!url) return;
|
|
4481
|
-
shared.net[requestType.toLowerCase()](url, {
|
|
4480
|
+
const ret = await shared.net[requestType.toLowerCase()](url, {
|
|
4482
4481
|
...params,
|
|
4483
4482
|
...this.execFieldMap(fieldMap, {
|
|
4484
4483
|
...this.formModels
|
|
@@ -4488,10 +4487,12 @@
|
|
|
4488
4487
|
headers
|
|
4489
4488
|
}).then(resp => {
|
|
4490
4489
|
this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, {
|
|
4491
|
-
props,
|
|
4490
|
+
...props,
|
|
4492
4491
|
formModel: this.formModels
|
|
4493
4492
|
});
|
|
4493
|
+
return true;
|
|
4494
4494
|
});
|
|
4495
|
+
return ret;
|
|
4495
4496
|
},
|
|
4496
4497
|
async infoRequestTrigger() {
|
|
4497
4498
|
const {
|
|
@@ -4536,18 +4537,18 @@
|
|
|
4536
4537
|
validateFields() {
|
|
4537
4538
|
return this.$refs[this.formRef].validateFields();
|
|
4538
4539
|
},
|
|
4539
|
-
[BUILT_IN_EVENT_NAMES.SUBMIT](props) {
|
|
4540
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
|
|
4540
4541
|
const status = this.$refs[this.formRef].validateFields();
|
|
4541
4542
|
if (status) {
|
|
4542
4543
|
//TODO fieldMap
|
|
4543
|
-
this.submitRequestTrigger(props);
|
|
4544
|
+
return this.submitRequestTrigger(props);
|
|
4544
4545
|
} else {
|
|
4545
|
-
|
|
4546
|
+
return false;
|
|
4546
4547
|
}
|
|
4547
4548
|
},
|
|
4548
|
-
[BUILT_IN_EVENT_NAMES.CANCEL](props) {
|
|
4549
|
+
[BUILT_IN_EVENT_NAMES.CANCEL](props = {}) {
|
|
4549
4550
|
this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, {
|
|
4550
|
-
props
|
|
4551
|
+
...props
|
|
4551
4552
|
});
|
|
4552
4553
|
}
|
|
4553
4554
|
},
|
|
@@ -4603,11 +4604,11 @@
|
|
|
4603
4604
|
/* style */
|
|
4604
4605
|
const __vue_inject_styles__$7 = function (inject) {
|
|
4605
4606
|
if (!inject) return
|
|
4606
|
-
inject("data-v-
|
|
4607
|
+
inject("data-v-275e91c9_0", { source: ".form__model--wrapper[data-v-275e91c9] {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-275e91c9] {\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-275e91c9] {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-275e91c9] {\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":"AAsIA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;ACrIA;ADsIA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;ACpIA;ADsIA;EACA,aAAA;ACpIA;ADsIA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACpIA;;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 this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: this.formModels })\r\n return true\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 });
|
|
4607
4608
|
|
|
4608
4609
|
};
|
|
4609
4610
|
/* scoped */
|
|
4610
|
-
const __vue_scope_id__$7 = "data-v-
|
|
4611
|
+
const __vue_scope_id__$7 = "data-v-275e91c9";
|
|
4611
4612
|
/* module identifier */
|
|
4612
4613
|
const __vue_module_identifier__$7 = undefined;
|
|
4613
4614
|
/* functional template */
|
|
@@ -4649,16 +4650,11 @@
|
|
|
4649
4650
|
},
|
|
4650
4651
|
data() {
|
|
4651
4652
|
return {
|
|
4652
|
-
current: 0
|
|
4653
|
+
current: 0,
|
|
4654
|
+
currentSlotComponentRef: null
|
|
4653
4655
|
};
|
|
4654
4656
|
},
|
|
4655
4657
|
computed: {
|
|
4656
|
-
currentSlotComponentRef() {
|
|
4657
|
-
const {
|
|
4658
|
-
$children: [component]
|
|
4659
|
-
} = this.$children[this.current];
|
|
4660
|
-
return component.getModel();
|
|
4661
|
-
},
|
|
4662
4658
|
currentSlotName() {
|
|
4663
4659
|
return this.scopedSlotsNames[this.current];
|
|
4664
4660
|
},
|
|
@@ -4716,9 +4712,25 @@
|
|
|
4716
4712
|
this.current = idx;
|
|
4717
4713
|
},
|
|
4718
4714
|
immediate: true
|
|
4715
|
+
},
|
|
4716
|
+
current: {
|
|
4717
|
+
handler() {
|
|
4718
|
+
this.$nextTick(() => {
|
|
4719
|
+
this.currentSlotComponentRef = this.getCurrentSlotComponentRef();
|
|
4720
|
+
});
|
|
4721
|
+
},
|
|
4722
|
+
immediate: true
|
|
4719
4723
|
}
|
|
4720
4724
|
},
|
|
4721
4725
|
methods: {
|
|
4726
|
+
getCurrentSlotComponentRef() {
|
|
4727
|
+
const includeMetaCmp = this.$children.find(child => child.meta);
|
|
4728
|
+
if (!includeMetaCmp) return null;
|
|
4729
|
+
const {
|
|
4730
|
+
$children: [component]
|
|
4731
|
+
} = includeMetaCmp;
|
|
4732
|
+
return component.getModel ? component.getModel() : null;
|
|
4733
|
+
},
|
|
4722
4734
|
setCurrentStep(index) {
|
|
4723
4735
|
this.current = index;
|
|
4724
4736
|
},
|
|
@@ -4824,11 +4836,11 @@
|
|
|
4824
4836
|
/* style */
|
|
4825
4837
|
const __vue_inject_styles__$6 = function (inject) {
|
|
4826
4838
|
if (!inject) return
|
|
4827
|
-
inject("data-v-
|
|
4839
|
+
inject("data-v-86ff892c_0", { source: ".ele-step-model__wrapper[data-v-86ff892c] {\n width: 100%;\n height: 100vh;\n position: relative;\n}\n.ele-step-model__wrapper .ele-step-model__step--wrapper[data-v-86ff892c] {\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-86ff892c] {\n text-align: left;\n}\n.ele-step-model__wrapper .ele-step-model__content--wrapper[data-v-86ff892c] {\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-86ff892c] {\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":"AAoIA;EACA,WAAA;EACA,aAAA;EACA,kBAAA;ACnIA;ADoIA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,gBAAA;AClIA;ADoIA;EACA,gBAAA;AClIA;ADsIA;EACA,WAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,+CAAA;EACA,cAAA;ACpIA;ADsIA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;ACpIA;;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 }\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 });
|
|
4828
4840
|
|
|
4829
4841
|
};
|
|
4830
4842
|
/* scoped */
|
|
4831
|
-
const __vue_scope_id__$6 = "data-v-
|
|
4843
|
+
const __vue_scope_id__$6 = "data-v-86ff892c";
|
|
4832
4844
|
/* module identifier */
|
|
4833
4845
|
const __vue_module_identifier__$6 = undefined;
|
|
4834
4846
|
/* functional template */
|
package/package.json
CHANGED
|
@@ -83,12 +83,14 @@ export default {
|
|
|
83
83
|
const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})
|
|
84
84
|
return ret
|
|
85
85
|
},
|
|
86
|
-
async submitRequestTrigger (props) {
|
|
86
|
+
async submitRequestTrigger (props = {}) {
|
|
87
87
|
const { url, requestType, headers, params, fieldMap = {} } = this.submitRequest
|
|
88
88
|
if (!url) return
|
|
89
|
-
net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), ...this.formModels }, { headers }).then(resp => {
|
|
90
|
-
this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { props, formModel: this.formModels })
|
|
89
|
+
const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), ...this.formModels }, { headers }).then(resp => {
|
|
90
|
+
this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: this.formModels })
|
|
91
|
+
return true
|
|
91
92
|
})
|
|
93
|
+
return ret
|
|
92
94
|
},
|
|
93
95
|
async infoRequestTrigger () {
|
|
94
96
|
const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest
|
|
@@ -109,17 +111,17 @@ export default {
|
|
|
109
111
|
validateFields () {
|
|
110
112
|
return this.$refs[this.formRef].validateFields()
|
|
111
113
|
},
|
|
112
|
-
[BUILT_IN_EVENT_NAMES.SUBMIT] (props) {
|
|
114
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
|
|
113
115
|
const status = this.$refs[this.formRef].validateFields()
|
|
114
116
|
if (status) {
|
|
115
117
|
//TODO fieldMap
|
|
116
|
-
this.submitRequestTrigger(props)
|
|
118
|
+
return this.submitRequestTrigger(props)
|
|
117
119
|
} else {
|
|
118
|
-
|
|
120
|
+
return false
|
|
119
121
|
}
|
|
120
122
|
},
|
|
121
|
-
[BUILT_IN_EVENT_NAMES.CANCEL] (props) {
|
|
122
|
-
this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { props })
|
|
123
|
+
[BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {
|
|
124
|
+
this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })
|
|
123
125
|
}
|
|
124
126
|
},
|
|
125
127
|
async mounted() {
|
|
@@ -38,14 +38,11 @@ export default {
|
|
|
38
38
|
},
|
|
39
39
|
data() {
|
|
40
40
|
return {
|
|
41
|
-
current: 0
|
|
41
|
+
current: 0,
|
|
42
|
+
currentSlotComponentRef: null
|
|
42
43
|
}
|
|
43
44
|
},
|
|
44
45
|
computed: {
|
|
45
|
-
currentSlotComponentRef () {
|
|
46
|
-
const { $children: [component] } = this.$children[this.current]
|
|
47
|
-
return component.getModel()
|
|
48
|
-
},
|
|
49
46
|
currentSlotName () {
|
|
50
47
|
return this.scopedSlotsNames[this.current]
|
|
51
48
|
},
|
|
@@ -94,9 +91,23 @@ export default {
|
|
|
94
91
|
this.current = idx
|
|
95
92
|
},
|
|
96
93
|
immediate: true
|
|
94
|
+
},
|
|
95
|
+
current: {
|
|
96
|
+
handler () {
|
|
97
|
+
this.$nextTick(() => {
|
|
98
|
+
this.currentSlotComponentRef = this.getCurrentSlotComponentRef()
|
|
99
|
+
})
|
|
100
|
+
},
|
|
101
|
+
immediate: true
|
|
97
102
|
}
|
|
98
103
|
},
|
|
99
104
|
methods: {
|
|
105
|
+
getCurrentSlotComponentRef () {
|
|
106
|
+
const includeMetaCmp = this.$children.find(child => child.meta)
|
|
107
|
+
if (!includeMetaCmp) return null
|
|
108
|
+
const { $children: [component] } = includeMetaCmp
|
|
109
|
+
return component.getModel ? component.getModel() : null
|
|
110
|
+
},
|
|
100
111
|
setCurrentStep (index) {
|
|
101
112
|
this.current = index
|
|
102
113
|
},
|
|
@@ -130,6 +141,7 @@ export default {
|
|
|
130
141
|
display: flex;
|
|
131
142
|
flex-direction: row;
|
|
132
143
|
align-items: center;
|
|
144
|
+
background: #fff;
|
|
133
145
|
.ele-steps {
|
|
134
146
|
.ant-steps-item {
|
|
135
147
|
text-align: left;
|
|
@@ -156,4 +168,4 @@ export default {
|
|
|
156
168
|
justify-content: end;
|
|
157
169
|
}
|
|
158
170
|
}
|
|
159
|
-
</style>
|
|
171
|
+
</style>import meta from '@/views/tree-table-page/meta'
|