@idooel/components 0.0.1-beta.13 → 0.0.1-beta.14
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,
|
|
@@ -4481,7 +4480,7 @@ 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
|
});
|
|
4487
4486
|
});
|
|
@@ -4529,7 +4528,7 @@ var script$7 = {
|
|
|
4529
4528
|
validateFields() {
|
|
4530
4529
|
return this.$refs[this.formRef].validateFields();
|
|
4531
4530
|
},
|
|
4532
|
-
[BUILT_IN_EVENT_NAMES.SUBMIT](props) {
|
|
4531
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
|
|
4533
4532
|
const status = this.$refs[this.formRef].validateFields();
|
|
4534
4533
|
if (status) {
|
|
4535
4534
|
//TODO fieldMap
|
|
@@ -4538,9 +4537,9 @@ var script$7 = {
|
|
|
4538
4537
|
console.log('error');
|
|
4539
4538
|
}
|
|
4540
4539
|
},
|
|
4541
|
-
[BUILT_IN_EVENT_NAMES.CANCEL](props) {
|
|
4540
|
+
[BUILT_IN_EVENT_NAMES.CANCEL](props = {}) {
|
|
4542
4541
|
this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, {
|
|
4543
|
-
props
|
|
4542
|
+
...props
|
|
4544
4543
|
});
|
|
4545
4544
|
}
|
|
4546
4545
|
},
|
|
@@ -4596,11 +4595,11 @@ __vue_render__$7._withStripped = true;
|
|
|
4596
4595
|
/* style */
|
|
4597
4596
|
const __vue_inject_styles__$7 = function (inject) {
|
|
4598
4597
|
if (!inject) return
|
|
4599
|
-
inject("data-v-
|
|
4598
|
+
inject("data-v-a6743918_0", { source: ".form__model--wrapper[data-v-a6743918] {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-a6743918] {\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-a6743918] {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-a6743918] {\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":"AAoIA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;ACnIA;ADoIA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AClIA;ADoIA;EACA,aAAA;AClIA;ADoIA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AClIA;;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 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 })\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 this.submitRequestTrigger(props)\r\n } else {\r\n console.log('error')\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
4599
|
|
|
4601
4600
|
};
|
|
4602
4601
|
/* scoped */
|
|
4603
|
-
const __vue_scope_id__$7 = "data-v-
|
|
4602
|
+
const __vue_scope_id__$7 = "data-v-a6743918";
|
|
4604
4603
|
/* module identifier */
|
|
4605
4604
|
const __vue_module_identifier__$7 = undefined;
|
|
4606
4605
|
/* functional template */
|
|
@@ -4642,16 +4641,11 @@ var script$6 = {
|
|
|
4642
4641
|
},
|
|
4643
4642
|
data() {
|
|
4644
4643
|
return {
|
|
4645
|
-
current: 0
|
|
4644
|
+
current: 0,
|
|
4645
|
+
currentSlotComponentRef: null
|
|
4646
4646
|
};
|
|
4647
4647
|
},
|
|
4648
4648
|
computed: {
|
|
4649
|
-
currentSlotComponentRef() {
|
|
4650
|
-
const {
|
|
4651
|
-
$children: [component]
|
|
4652
|
-
} = this.$children[this.current];
|
|
4653
|
-
return component.getModel();
|
|
4654
|
-
},
|
|
4655
4649
|
currentSlotName() {
|
|
4656
4650
|
return this.scopedSlotsNames[this.current];
|
|
4657
4651
|
},
|
|
@@ -4709,9 +4703,25 @@ var script$6 = {
|
|
|
4709
4703
|
this.current = idx;
|
|
4710
4704
|
},
|
|
4711
4705
|
immediate: true
|
|
4706
|
+
},
|
|
4707
|
+
current: {
|
|
4708
|
+
handler() {
|
|
4709
|
+
this.$nextTick(() => {
|
|
4710
|
+
this.currentSlotComponentRef = this.getCurrentSlotComponentRef();
|
|
4711
|
+
});
|
|
4712
|
+
},
|
|
4713
|
+
immediate: true
|
|
4712
4714
|
}
|
|
4713
4715
|
},
|
|
4714
4716
|
methods: {
|
|
4717
|
+
getCurrentSlotComponentRef() {
|
|
4718
|
+
const includeMetaCmp = this.$children.find(child => child.meta);
|
|
4719
|
+
if (!includeMetaCmp) return null;
|
|
4720
|
+
const {
|
|
4721
|
+
$children: [component]
|
|
4722
|
+
} = includeMetaCmp;
|
|
4723
|
+
return component.getModel ? component.getModel() : null;
|
|
4724
|
+
},
|
|
4715
4725
|
setCurrentStep(index) {
|
|
4716
4726
|
this.current = index;
|
|
4717
4727
|
},
|
|
@@ -4817,11 +4827,11 @@ __vue_render__$6._withStripped = true;
|
|
|
4817
4827
|
/* style */
|
|
4818
4828
|
const __vue_inject_styles__$6 = function (inject) {
|
|
4819
4829
|
if (!inject) return
|
|
4820
|
-
inject("data-v-
|
|
4830
|
+
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
4831
|
|
|
4822
4832
|
};
|
|
4823
4833
|
/* scoped */
|
|
4824
|
-
const __vue_scope_id__$6 = "data-v-
|
|
4834
|
+
const __vue_scope_id__$6 = "data-v-86ff892c";
|
|
4825
4835
|
/* module identifier */
|
|
4826
4836
|
const __vue_module_identifier__$6 = undefined;
|
|
4827
4837
|
/* 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,
|
|
@@ -4488,7 +4487,7 @@
|
|
|
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
|
});
|
|
4494
4493
|
});
|
|
@@ -4536,7 +4535,7 @@
|
|
|
4536
4535
|
validateFields() {
|
|
4537
4536
|
return this.$refs[this.formRef].validateFields();
|
|
4538
4537
|
},
|
|
4539
|
-
[BUILT_IN_EVENT_NAMES.SUBMIT](props) {
|
|
4538
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT](props = {}) {
|
|
4540
4539
|
const status = this.$refs[this.formRef].validateFields();
|
|
4541
4540
|
if (status) {
|
|
4542
4541
|
//TODO fieldMap
|
|
@@ -4545,9 +4544,9 @@
|
|
|
4545
4544
|
console.log('error');
|
|
4546
4545
|
}
|
|
4547
4546
|
},
|
|
4548
|
-
[BUILT_IN_EVENT_NAMES.CANCEL](props) {
|
|
4547
|
+
[BUILT_IN_EVENT_NAMES.CANCEL](props = {}) {
|
|
4549
4548
|
this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, {
|
|
4550
|
-
props
|
|
4549
|
+
...props
|
|
4551
4550
|
});
|
|
4552
4551
|
}
|
|
4553
4552
|
},
|
|
@@ -4603,11 +4602,11 @@
|
|
|
4603
4602
|
/* style */
|
|
4604
4603
|
const __vue_inject_styles__$7 = function (inject) {
|
|
4605
4604
|
if (!inject) return
|
|
4606
|
-
inject("data-v-
|
|
4605
|
+
inject("data-v-a6743918_0", { source: ".form__model--wrapper[data-v-a6743918] {\n width: 100%;\n height: 100%;\n overflow: auto;\n background: #fff;\n}\n.form__model--wrapper .form-model__title[data-v-a6743918] {\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-a6743918] {\n padding: 16px;\n}\n.form__model--wrapper .form-model__footer[data-v-a6743918] {\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":"AAoIA;EACA,WAAA;EACA,YAAA;EACA,cAAA;EACA,gBAAA;ACnIA;ADoIA;EACA,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8DAAA;AClIA;ADoIA;EACA,aAAA;AClIA;ADoIA;EACA,iBAAA;EACA,YAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AClIA;;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 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 })\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 this.submitRequestTrigger(props)\r\n } else {\r\n console.log('error')\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
4606
|
|
|
4608
4607
|
};
|
|
4609
4608
|
/* scoped */
|
|
4610
|
-
const __vue_scope_id__$7 = "data-v-
|
|
4609
|
+
const __vue_scope_id__$7 = "data-v-a6743918";
|
|
4611
4610
|
/* module identifier */
|
|
4612
4611
|
const __vue_module_identifier__$7 = undefined;
|
|
4613
4612
|
/* functional template */
|
|
@@ -4649,16 +4648,11 @@
|
|
|
4649
4648
|
},
|
|
4650
4649
|
data() {
|
|
4651
4650
|
return {
|
|
4652
|
-
current: 0
|
|
4651
|
+
current: 0,
|
|
4652
|
+
currentSlotComponentRef: null
|
|
4653
4653
|
};
|
|
4654
4654
|
},
|
|
4655
4655
|
computed: {
|
|
4656
|
-
currentSlotComponentRef() {
|
|
4657
|
-
const {
|
|
4658
|
-
$children: [component]
|
|
4659
|
-
} = this.$children[this.current];
|
|
4660
|
-
return component.getModel();
|
|
4661
|
-
},
|
|
4662
4656
|
currentSlotName() {
|
|
4663
4657
|
return this.scopedSlotsNames[this.current];
|
|
4664
4658
|
},
|
|
@@ -4716,9 +4710,25 @@
|
|
|
4716
4710
|
this.current = idx;
|
|
4717
4711
|
},
|
|
4718
4712
|
immediate: true
|
|
4713
|
+
},
|
|
4714
|
+
current: {
|
|
4715
|
+
handler() {
|
|
4716
|
+
this.$nextTick(() => {
|
|
4717
|
+
this.currentSlotComponentRef = this.getCurrentSlotComponentRef();
|
|
4718
|
+
});
|
|
4719
|
+
},
|
|
4720
|
+
immediate: true
|
|
4719
4721
|
}
|
|
4720
4722
|
},
|
|
4721
4723
|
methods: {
|
|
4724
|
+
getCurrentSlotComponentRef() {
|
|
4725
|
+
const includeMetaCmp = this.$children.find(child => child.meta);
|
|
4726
|
+
if (!includeMetaCmp) return null;
|
|
4727
|
+
const {
|
|
4728
|
+
$children: [component]
|
|
4729
|
+
} = includeMetaCmp;
|
|
4730
|
+
return component.getModel ? component.getModel() : null;
|
|
4731
|
+
},
|
|
4722
4732
|
setCurrentStep(index) {
|
|
4723
4733
|
this.current = index;
|
|
4724
4734
|
},
|
|
@@ -4824,11 +4834,11 @@
|
|
|
4824
4834
|
/* style */
|
|
4825
4835
|
const __vue_inject_styles__$6 = function (inject) {
|
|
4826
4836
|
if (!inject) return
|
|
4827
|
-
inject("data-v-
|
|
4837
|
+
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
4838
|
|
|
4829
4839
|
};
|
|
4830
4840
|
/* scoped */
|
|
4831
|
-
const __vue_scope_id__$6 = "data-v-
|
|
4841
|
+
const __vue_scope_id__$6 = "data-v-86ff892c";
|
|
4832
4842
|
/* module identifier */
|
|
4833
4843
|
const __vue_module_identifier__$6 = undefined;
|
|
4834
4844
|
/* functional template */
|
package/package.json
CHANGED
|
@@ -83,11 +83,11 @@ 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
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 })
|
|
90
|
+
this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: this.formModels })
|
|
91
91
|
})
|
|
92
92
|
},
|
|
93
93
|
async infoRequestTrigger () {
|
|
@@ -109,7 +109,7 @@ export default {
|
|
|
109
109
|
validateFields () {
|
|
110
110
|
return this.$refs[this.formRef].validateFields()
|
|
111
111
|
},
|
|
112
|
-
[BUILT_IN_EVENT_NAMES.SUBMIT] (props) {
|
|
112
|
+
[BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
|
|
113
113
|
const status = this.$refs[this.formRef].validateFields()
|
|
114
114
|
if (status) {
|
|
115
115
|
//TODO fieldMap
|
|
@@ -118,8 +118,8 @@ export default {
|
|
|
118
118
|
console.log('error')
|
|
119
119
|
}
|
|
120
120
|
},
|
|
121
|
-
[BUILT_IN_EVENT_NAMES.CANCEL] (props) {
|
|
122
|
-
this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { props })
|
|
121
|
+
[BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {
|
|
122
|
+
this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })
|
|
123
123
|
}
|
|
124
124
|
},
|
|
125
125
|
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'
|