@idooel/components 0.0.1-beta.19 → 0.0.1-beta.20
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.
|
@@ -3696,28 +3696,56 @@ var script$9 = {
|
|
|
3696
3696
|
EleRadio: __vue_component__$a
|
|
3697
3697
|
},
|
|
3698
3698
|
props: {
|
|
3699
|
+
formName: {
|
|
3700
|
+
type: [Number, String],
|
|
3701
|
+
default: 'coordinated'
|
|
3702
|
+
},
|
|
3699
3703
|
elements: {
|
|
3700
3704
|
type: Array,
|
|
3701
3705
|
default: () => []
|
|
3702
3706
|
}
|
|
3703
3707
|
},
|
|
3704
3708
|
data() {
|
|
3705
|
-
return {
|
|
3706
|
-
some: '1',
|
|
3707
|
-
form: this.$form.createForm(this, {
|
|
3708
|
-
name: 'coordinated'
|
|
3709
|
-
})
|
|
3710
|
-
};
|
|
3709
|
+
return {};
|
|
3711
3710
|
},
|
|
3712
3711
|
computed: {
|
|
3712
|
+
form() {
|
|
3713
|
+
return this.$form.createForm(this, {
|
|
3714
|
+
name: this.formName
|
|
3715
|
+
});
|
|
3716
|
+
},
|
|
3713
3717
|
exposedMethods() {
|
|
3714
3718
|
return {
|
|
3715
|
-
setFieldsValue: this.setFieldsValue
|
|
3719
|
+
setFieldsValue: this.setFieldsValue,
|
|
3720
|
+
getFieldsValue: this.getFieldsValue
|
|
3716
3721
|
};
|
|
3717
3722
|
}
|
|
3718
3723
|
},
|
|
3719
3724
|
methods: {
|
|
3725
|
+
evalDisabledExpression() {
|
|
3726
|
+
this.elements.forEach(ele => {
|
|
3727
|
+
const {
|
|
3728
|
+
disabled
|
|
3729
|
+
} = ele;
|
|
3730
|
+
const ret = this.executeExpression(disabled);
|
|
3731
|
+
this.$set(ele, '_disabled', ret);
|
|
3732
|
+
});
|
|
3733
|
+
},
|
|
3734
|
+
executeExpression(expression) {
|
|
3735
|
+
if (type.isBool(expression)) return expression;
|
|
3736
|
+
if (type.isEmpty(expression)) return false;
|
|
3737
|
+
return parse(expression, {
|
|
3738
|
+
...this.getFieldsValue()
|
|
3739
|
+
});
|
|
3740
|
+
},
|
|
3720
3741
|
onChange(value, props) {
|
|
3742
|
+
const {
|
|
3743
|
+
name
|
|
3744
|
+
} = props;
|
|
3745
|
+
this.setFieldsValue({
|
|
3746
|
+
[name]: value
|
|
3747
|
+
});
|
|
3748
|
+
this.evalDisabledExpression();
|
|
3721
3749
|
this.$emit('change', {
|
|
3722
3750
|
value,
|
|
3723
3751
|
props,
|
|
@@ -3759,6 +3787,7 @@ var script$9 = {
|
|
|
3759
3787
|
},
|
|
3760
3788
|
mounted() {
|
|
3761
3789
|
this.setDefaultValues();
|
|
3790
|
+
this.evalDisabledExpression();
|
|
3762
3791
|
}
|
|
3763
3792
|
};
|
|
3764
3793
|
|
|
@@ -3807,7 +3836,7 @@ var __vue_render__$9 = function () {
|
|
|
3807
3836
|
],
|
|
3808
3837
|
staticStyle: { width: "100%" },
|
|
3809
3838
|
attrs: {
|
|
3810
|
-
disabled: ele.
|
|
3839
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
3811
3840
|
"max-length": ele.maxLength,
|
|
3812
3841
|
},
|
|
3813
3842
|
on: {
|
|
@@ -3840,7 +3869,7 @@ var __vue_render__$9 = function () {
|
|
|
3840
3869
|
attrs: {
|
|
3841
3870
|
"max-length": ele.maxLength,
|
|
3842
3871
|
autosize: ele.autosize,
|
|
3843
|
-
disabled: ele.
|
|
3872
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
3844
3873
|
"allow-clear": ele.allowClear,
|
|
3845
3874
|
placeholder: ele.placeholder,
|
|
3846
3875
|
},
|
|
@@ -3873,7 +3902,7 @@ var __vue_render__$9 = function () {
|
|
|
3873
3902
|
staticStyle: { width: "100%" },
|
|
3874
3903
|
attrs: {
|
|
3875
3904
|
"data-source": ele.optionList,
|
|
3876
|
-
disabled: ele.
|
|
3905
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
3877
3906
|
code: ele.code,
|
|
3878
3907
|
params: ele.params,
|
|
3879
3908
|
},
|
|
@@ -3921,6 +3950,9 @@ var __vue_render__$9 = function () {
|
|
|
3921
3950
|
},
|
|
3922
3951
|
],
|
|
3923
3952
|
staticStyle: { width: "100%" },
|
|
3953
|
+
attrs: {
|
|
3954
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
3955
|
+
},
|
|
3924
3956
|
}),
|
|
3925
3957
|
],
|
|
3926
3958
|
1
|
|
@@ -3968,7 +4000,17 @@ var __vue_render__$9 = function () {
|
|
|
3968
4000
|
},
|
|
3969
4001
|
],
|
|
3970
4002
|
staticStyle: { width: "100%" },
|
|
3971
|
-
attrs: {
|
|
4003
|
+
attrs: {
|
|
4004
|
+
precision: ele.precision,
|
|
4005
|
+
disabled: _vm.executeExpression(
|
|
4006
|
+
ele._disabled
|
|
4007
|
+
),
|
|
4008
|
+
},
|
|
4009
|
+
on: {
|
|
4010
|
+
change: function ($event) {
|
|
4011
|
+
return _vm.onChange($event, ele)
|
|
4012
|
+
},
|
|
4013
|
+
},
|
|
3972
4014
|
},
|
|
3973
4015
|
"ele-input-number",
|
|
3974
4016
|
ele.props,
|
|
@@ -3996,7 +4038,10 @@ var __vue_render__$9 = function () {
|
|
|
3996
4038
|
},
|
|
3997
4039
|
],
|
|
3998
4040
|
staticStyle: { width: "100%" },
|
|
3999
|
-
attrs: {
|
|
4041
|
+
attrs: {
|
|
4042
|
+
"data-source": ele.optionList,
|
|
4043
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
4044
|
+
},
|
|
4000
4045
|
}),
|
|
4001
4046
|
],
|
|
4002
4047
|
1
|
|
@@ -4019,7 +4064,10 @@ var __vue_render__$9 = function () {
|
|
|
4019
4064
|
},
|
|
4020
4065
|
],
|
|
4021
4066
|
staticStyle: { width: "100%" },
|
|
4022
|
-
attrs: {
|
|
4067
|
+
attrs: {
|
|
4068
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
4069
|
+
"data-source": ele.optionList,
|
|
4070
|
+
},
|
|
4023
4071
|
on: {
|
|
4024
4072
|
change: function ($event) {
|
|
4025
4073
|
return _vm.onChange($event, ele)
|
|
@@ -4050,11 +4098,11 @@ __vue_render__$9._withStripped = true;
|
|
|
4050
4098
|
/* style */
|
|
4051
4099
|
const __vue_inject_styles__$9 = function (inject) {
|
|
4052
4100
|
if (!inject) return
|
|
4053
|
-
inject("data-v-
|
|
4101
|
+
inject("data-v-18e5775b_0", { source: ".ele__form--wrapper[data-v-18e5775b] {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/form/src/index.vue","index.vue"],"names":[],"mappings":"AA6MA;EACA,gBAAA;AC5MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele__form--wrapper\">\n <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\n <a-row :gutter=\"24\">\n <a-col :span=\"ele.span\" v-for=\"ele in elements\" :key=\"ele.name\">\n <template v-if=\"ele.type == 'Input'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-input \n @change=\"onChange($event, ele)\" \n :disabled=\"executeExpression(ele._disabled)\" \n :max-length=\"ele.maxLength\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-input>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Textarea'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-textarea \n @change=\"onChange($event, ele)\"\n :max-length=\"ele.maxLength\"\n :autosize=\"ele.autosize\"\n :disabled=\"executeExpression(ele._disabled)\"\n :allow-clear=\"ele.allowClear\"\n :placeholder=\"ele.placeholder\"\n v-decorator=\"[ele.name, { rules: ele.rules }]\"\n style=\"width:100%;\">\n </ele-textarea>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Select'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-select \n :data-source=\"ele.optionList\" \n :disabled=\"executeExpression(ele._disabled)\" \n :code=\"ele.code\" \n :params=\"ele.params\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-select>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'ele-upload'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-upload v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-upload>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'ele-date-range'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-date-range \n :disabled=\"executeExpression(ele._disabled)\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-date-range>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'SelectEntity'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-select-entity \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-select-entity>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'InputNumber'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-input-number \n @change=\"onChange($event, ele)\" \n :precision=\"ele.precision\" \n :disabled=\"executeExpression(ele._disabled)\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n v-bind=\"ele.props\" \n style=\"width:100%;\">\n </ele-input-number>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Checkbox'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-checkbox \n :data-source=\"ele.optionList\" \n :disabled=\"executeExpression(ele._disabled)\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-checkbox>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Radio'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-radio \n @change=\"onChange($event, ele)\" \n :disabled=\"executeExpression(ele._disabled)\" \n :data-source=\"ele.optionList\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-radio>\n </a-form-item>\n </template>\n </a-col>\n </a-row>\n </a-form>\n </div>\n</template>\n\n<script>\nimport EleSelect from '../../select/src/index.vue'\nimport EleInput from '../../input/src/index.vue'\nimport EleTextarea from '../../textarea/src/index.vue'\nimport EleUpload from '../../upload/src/index.vue'\nimport EleSelectEntity from '../../select-entity/src/index.vue'\nimport EleInputNumber from '../../input-number/src/index.vue'\nimport EleCheckbox from '../../checkbox/src/index.vue'\nimport EleRadio from '../../radio/src/index.vue'\nimport { parse } from '@idooel/expression'\nimport { type } from '@idooel/shared'\nexport default {\n name: 'ele-form',\n components: {\n EleSelect,\n EleInput,\n EleTextarea,\n EleUpload,\n EleSelectEntity,\n EleInputNumber,\n EleCheckbox,\n EleRadio\n },\n props: {\n formName: {\n type: [Number, String],\n default: 'coordinated'\n },\n elements: {\n type: Array,\n default: () => []\n }\n },\n data () {\n return {}\n },\n computed: {\n form () {\n return this.$form.createForm(this, { name: this.formName })\n },\n exposedMethods () {\n return {\n setFieldsValue: this.setFieldsValue,\n getFieldsValue: this.getFieldsValue\n }\n }\n },\n methods: {\n evalDisabledExpression () {\n this.elements.forEach(ele => {\n const { disabled } = ele\n const ret = this.executeExpression(disabled)\n this.$set(ele, '_disabled', ret)\n })\n },\n executeExpression (expression) {\n if (type.isBool(expression)) return expression\n if (type.isEmpty(expression)) return false\n return parse(expression, { ...this.getFieldsValue() })\n },\n onChange (value, props) {\n const { name } = props\n this.setFieldsValue({ [name]: value })\n this.evalDisabledExpression()\n this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\n },\n collectDefaultValues () {\n const ret = this.elements.reduce((ret, props) => {\n const { name, defaultValue } = props\n if (defaultValue) {\n ret[name] = defaultValue\n }\n return ret\n }, {})\n return ret\n },\n setDefaultValues () {\n const defaultValues = this.collectDefaultValues()\n this.setFieldsValue(defaultValues)\n },\n validateFields () {\n let ret = false\n this.form.validateFields((error, values) => {\n ret = !error\n })\n return ret\n },\n setFieldsValue (props = {}) {\n this.form.setFieldsValue(props)\n },\n getFieldsValue () {\n return this.form.getFieldsValue()\n }\n },\n mounted() {\n this.setDefaultValues()\n this.evalDisabledExpression()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__form--wrapper {\n background: #fff;\n .ant-form-item {\n }\n}\n</style>",".ele__form--wrapper {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
4054
4102
|
|
|
4055
4103
|
};
|
|
4056
4104
|
/* scoped */
|
|
4057
|
-
const __vue_scope_id__$9 = "data-v-
|
|
4105
|
+
const __vue_scope_id__$9 = "data-v-18e5775b";
|
|
4058
4106
|
/* module identifier */
|
|
4059
4107
|
const __vue_module_identifier__$9 = undefined;
|
|
4060
4108
|
/* functional template */
|
|
@@ -4331,7 +4379,7 @@ var script$8 = {
|
|
|
4331
4379
|
buttonGroupMeta
|
|
4332
4380
|
} = base;
|
|
4333
4381
|
return {
|
|
4334
|
-
elements,
|
|
4382
|
+
elements: JSON.parse(JSON.stringify(elements)),
|
|
4335
4383
|
buttonGroupMeta,
|
|
4336
4384
|
title: `${title}${this.increaseCount++}`,
|
|
4337
4385
|
_gen: true
|
|
@@ -4419,7 +4467,10 @@ var __vue_render__$8 = function () {
|
|
|
4419
4467
|
_c("ele-form", {
|
|
4420
4468
|
ref: group.key || _vm.formRefBase + "__" + idx,
|
|
4421
4469
|
refInFor: true,
|
|
4422
|
-
attrs: {
|
|
4470
|
+
attrs: {
|
|
4471
|
+
"form-name": group.key || idx,
|
|
4472
|
+
elements: group.elements,
|
|
4473
|
+
},
|
|
4423
4474
|
on: {
|
|
4424
4475
|
change: function ($event) {
|
|
4425
4476
|
return _vm.onChangeFormStatus(
|
|
@@ -4464,11 +4515,11 @@ __vue_render__$8._withStripped = true;
|
|
|
4464
4515
|
/* style */
|
|
4465
4516
|
const __vue_inject_styles__$8 = function (inject) {
|
|
4466
4517
|
if (!inject) return
|
|
4467
|
-
inject("data-v-70c38ae2_0", { source: ".ele.form-group-model__wrapper[data-v-70c38ae2] {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-70c38ae2] {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-70c38ae2]:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-70c38ae2] {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-70c38ae2] {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-70c38ae2] {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/form-group-model/src/index.vue","index.vue"],"names":[],"mappings":"AA4NA;EACA,iBAAA;EACA,oBAAA;AC3NA;AD4NA;EACA,gBAAA;EACA,gBAAA;AC1NA;AD2NA;EACA,iBAAA;ACzNA;AD2NA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACzNA;AD2NA;EACA,aAAA;ACzNA;AD4NA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC1NA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele form-group-model__wrapper\">\n <template v-for=\"(group, idx) in groupMeta\">\n <div \n class=\"form-group-model__from\"\n v-if=\"!group.isGenTpl\"\n :key=\"group.key || idx\">\n <div class=\"form-group-model__form--title\">\n <div>{{ group.title }}</div>\n <div class=\"form-group-model__form--buttons\">\n <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\n </div>\n </div>\n <div class=\"form-group-model__form--content\">\n <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\n </div>\n </div>\n </template>\n <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\n <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\n </div>\n </div>\n</template>\n\n<script>\nimport Form from '../../form/src/index.vue'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap } from '../../utils'\nimport { v4 as uuidv4 } from 'uuid'\nimport { type, net } from '@idooel/shared'\nimport EleButtonGroup from '../../composite-components/button-group/src/index.vue'\nexport default {\n name: 'ele-form-group-model',\n components: {\n [Form.name]: Form,\n [EleButtonGroup.name]: EleButtonGroup\n },\n props: {\n mode: {\n type: String\n },\n fieldName: {\n type: String,\n default: 'formGroup'\n },\n groupMeta: {\n type: Array,\n default: () => []\n },\n footerMeta: {\n type: Object,\n default: () => {}\n },\n preRequest: {\n type: Object,\n default: () => {}\n },\n infoRequest: {\n type: Object,\n default: () => {}\n },\n submitRequest: {\n type: Object,\n default: () => {}\n }\n },\n data () {\n return {\n increaseCount: 1\n }\n },\n computed: {\n showFooterMeta () {\n return !type.isEmpty(this.footerMeta)\n },\n formRefBase () {\n return uuidv4()\n },\n footerElements () {\n const { elements } = this.footerMeta\n return elements.call(this)\n },\n assignAttrForEvents () {\n const events = this.footerElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\n [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\n [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\n }\n },\n getFormRefs () {\n return this.groupMeta.map((group, idx) => {\n if (!group.isGenTpl) {\n return this.$refs[group.key || `${this.formRefBase}__${idx}`]\n }\n return void 0\n }).filter(item => !!item).flat()\n },\n formModels () {\n if (this.mode === 'increase') {\n //TODO increase mode to return formModels\n return this.getFormRefs.map(form => {\n return form.getFieldsValue()\n })\n } else {\n return this.getFormRefs.map(form => {\n const { $vnode: { data: { ref } } } = form\n return {\n key: ref,\n value: form.getFieldsValue()\n }\n }).reduce((ret, props) => {\n ret[props.key] = props.value\n return ret\n }, {})\n }\n }\n },\n methods: {\n execFieldMap (fieldMap = {}, dataSource = {}) {\n const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\n return ret\n },\n onChangeFormStatus (props, key) {\n this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\n },\n async infoRequestTrigger () {\n const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\n if (!url) return\n net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\n const { data = {} } = resp\n if (this.mode === 'increase') {\n this.renderIncreaseForm(data)\n }\n })\n },\n async preRequestTrigger () {\n const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\n if (!url) return\n net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\n const { data = {} } = resp\n if (this.mode === 'increase') {\n this.renderIncreaseForm(data)\n }\n })\n },\n renderIncreaseForm (data = {}) {\n const formGroupValuesLength = data[this.fieldName].length\n const genTplTarget = this.groupMeta.find(item => item.isGenTpl)\n const notGenTplPoolLength = this.groupMeta.filter(item => !item.isGenTpl).length\n const genNum = formGroupValuesLength - notGenTplPoolLength\n new Array(genNum).fill().forEach(() => {\n const form = this.genForm(genTplTarget)\n this.groupMeta.push(form)\n })\n const formGroupValues = data[this.fieldName]\n this.setFieldsValue(formGroupValues)\n },\n async submitRequestTrigger (props = {}) {\n const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\n if (!url) return\n const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\n this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\n return resp.data\n })\n return ret\n },\n setFieldsValue (data = []) {\n this.getFormRefs.forEach((form, idx) => {\n form.setFieldsValue(data[idx])\n })\n },\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n const status = this.getFormRefs.map(form => {\n const status = form.validateFields()\n return status\n }).every(item => item)\n if (status) {\n return this.submitRequestTrigger(props)\n } else {\n return false\n }\n },\n [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\n this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\n },\n genForm (base) {\n const { elements, title, buttonGroupMeta } = base\n return {\n elements,\n buttonGroupMeta,\n title: `${title}${this.increaseCount++}`,\n _gen: true\n }\n },\n handleClickDelete (props = {}, attr = {}, idx) {\n this.groupMeta.splice(idx, 1)\n this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\n },\n [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\n const genTplTarget = this.groupMeta.find(item => item.isGenTpl)\n const form = this.genForm(genTplTarget)\n this.groupMeta.push(form)\n }\n },\n async mounted() {\n await this.preRequestTrigger()\n await this.infoRequestTrigger()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n &.form-group-model__wrapper {\n background: unset;\n padding-bottom: 80px;\n .form-group-model__from {\n background: #fff;\n margin-top: 16px;\n &:first-child {\n margin-top: unset;\n }\n .form-group-model__form--title {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n .form-group-model__form--content {\n padding: 16px;\n }\n }\n .form-group-model__form--footer {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n }\n }\n}\n</style>",".ele.form-group-model__wrapper {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
4518
|
+
inject("data-v-cf97e098_0", { source: ".ele.form-group-model__wrapper[data-v-cf97e098] {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-cf97e098] {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-cf97e098]:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-cf97e098] {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-cf97e098] {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-cf97e098] {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/form-group-model/src/index.vue","index.vue"],"names":[],"mappings":"AA4NA;EACA,iBAAA;EACA,oBAAA;AC3NA;AD4NA;EACA,gBAAA;EACA,gBAAA;AC1NA;AD2NA;EACA,iBAAA;ACzNA;AD2NA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACzNA;AD2NA;EACA,aAAA;ACzNA;AD4NA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC1NA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele form-group-model__wrapper\">\n <template v-for=\"(group, idx) in groupMeta\">\n <div \n class=\"form-group-model__from\"\n v-if=\"!group.isGenTpl\"\n :key=\"group.key || idx\">\n <div class=\"form-group-model__form--title\">\n <div>{{ group.title }}</div>\n <div class=\"form-group-model__form--buttons\">\n <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\n </div>\n </div>\n <div class=\"form-group-model__form--content\">\n <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\n </div>\n </div>\n </template>\n <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\n <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\n </div>\n </div>\n</template>\n\n<script>\nimport Form from '../../form/src/index.vue'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap } from '../../utils'\nimport { v4 as uuidv4 } from 'uuid'\nimport { type, net } from '@idooel/shared'\nimport EleButtonGroup from '../../composite-components/button-group/src/index.vue'\nexport default {\n name: 'ele-form-group-model',\n components: {\n [Form.name]: Form,\n [EleButtonGroup.name]: EleButtonGroup\n },\n props: {\n mode: {\n type: String\n },\n fieldName: {\n type: String,\n default: 'formGroup'\n },\n groupMeta: {\n type: Array,\n default: () => []\n },\n footerMeta: {\n type: Object,\n default: () => {}\n },\n preRequest: {\n type: Object,\n default: () => {}\n },\n infoRequest: {\n type: Object,\n default: () => {}\n },\n submitRequest: {\n type: Object,\n default: () => {}\n }\n },\n data () {\n return {\n increaseCount: 1\n }\n },\n computed: {\n showFooterMeta () {\n return !type.isEmpty(this.footerMeta)\n },\n formRefBase () {\n return uuidv4()\n },\n footerElements () {\n const { elements } = this.footerMeta\n return elements.call(this)\n },\n assignAttrForEvents () {\n const events = this.footerElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\n [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\n [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\n }\n },\n getFormRefs () {\n return this.groupMeta.map((group, idx) => {\n if (!group.isGenTpl) {\n return this.$refs[group.key || `${this.formRefBase}__${idx}`]\n }\n return void 0\n }).filter(item => !!item).flat()\n },\n formModels () {\n if (this.mode === 'increase') {\n //TODO increase mode to return formModels\n return this.getFormRefs.map(form => {\n return form.getFieldsValue()\n })\n } else {\n return this.getFormRefs.map(form => {\n const { $vnode: { data: { ref } } } = form\n return {\n key: ref,\n value: form.getFieldsValue()\n }\n }).reduce((ret, props) => {\n ret[props.key] = props.value\n return ret\n }, {})\n }\n }\n },\n methods: {\n execFieldMap (fieldMap = {}, dataSource = {}) {\n const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\n return ret\n },\n onChangeFormStatus (props, key) {\n this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\n },\n async infoRequestTrigger () {\n const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\n if (!url) return\n net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\n const { data = {} } = resp\n if (this.mode === 'increase') {\n this.renderIncreaseForm(data)\n }\n })\n },\n async preRequestTrigger () {\n const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\n if (!url) return\n net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\n const { data = {} } = resp\n if (this.mode === 'increase') {\n this.renderIncreaseForm(data)\n }\n })\n },\n renderIncreaseForm (data = {}) {\n const formGroupValuesLength = data[this.fieldName].length\n const genTplTarget = this.groupMeta.find(item => item.isGenTpl)\n const notGenTplPoolLength = this.groupMeta.filter(item => !item.isGenTpl).length\n const genNum = formGroupValuesLength - notGenTplPoolLength\n new Array(genNum).fill().forEach(() => {\n const form = this.genForm(genTplTarget)\n this.groupMeta.push(form)\n })\n const formGroupValues = data[this.fieldName]\n this.setFieldsValue(formGroupValues)\n },\n async submitRequestTrigger (props = {}) {\n const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\n if (!url) return\n const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\n this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\n return resp.data\n })\n return ret\n },\n setFieldsValue (data = []) {\n this.getFormRefs.forEach((form, idx) => {\n form.setFieldsValue(data[idx])\n })\n },\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n const status = this.getFormRefs.map(form => {\n const status = form.validateFields()\n return status\n }).every(item => item)\n if (status) {\n return this.submitRequestTrigger(props)\n } else {\n return false\n }\n },\n [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\n this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\n },\n genForm (base) {\n const { elements, title, buttonGroupMeta } = base\n return {\n elements: JSON.parse(JSON.stringify(elements)),\n buttonGroupMeta,\n title: `${title}${this.increaseCount++}`,\n _gen: true\n }\n },\n handleClickDelete (props = {}, attr = {}, idx) {\n this.groupMeta.splice(idx, 1)\n this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\n },\n [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\n const genTplTarget = this.groupMeta.find(item => item.isGenTpl)\n const form = this.genForm(genTplTarget)\n this.groupMeta.push(form)\n }\n },\n async mounted() {\n await this.preRequestTrigger()\n await this.infoRequestTrigger()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n &.form-group-model__wrapper {\n background: unset;\n padding-bottom: 80px;\n .form-group-model__from {\n background: #fff;\n margin-top: 16px;\n &:first-child {\n margin-top: unset;\n }\n .form-group-model__form--title {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n .form-group-model__form--content {\n padding: 16px;\n }\n }\n .form-group-model__form--footer {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n }\n }\n}\n</style>",".ele.form-group-model__wrapper {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
4468
4519
|
|
|
4469
4520
|
};
|
|
4470
4521
|
/* scoped */
|
|
4471
|
-
const __vue_scope_id__$8 = "data-v-
|
|
4522
|
+
const __vue_scope_id__$8 = "data-v-cf97e098";
|
|
4472
4523
|
/* module identifier */
|
|
4473
4524
|
const __vue_module_identifier__$8 = undefined;
|
|
4474
4525
|
/* functional template */
|
|
@@ -3703,28 +3703,56 @@
|
|
|
3703
3703
|
EleRadio: __vue_component__$a
|
|
3704
3704
|
},
|
|
3705
3705
|
props: {
|
|
3706
|
+
formName: {
|
|
3707
|
+
type: [Number, String],
|
|
3708
|
+
default: 'coordinated'
|
|
3709
|
+
},
|
|
3706
3710
|
elements: {
|
|
3707
3711
|
type: Array,
|
|
3708
3712
|
default: () => []
|
|
3709
3713
|
}
|
|
3710
3714
|
},
|
|
3711
3715
|
data() {
|
|
3712
|
-
return {
|
|
3713
|
-
some: '1',
|
|
3714
|
-
form: this.$form.createForm(this, {
|
|
3715
|
-
name: 'coordinated'
|
|
3716
|
-
})
|
|
3717
|
-
};
|
|
3716
|
+
return {};
|
|
3718
3717
|
},
|
|
3719
3718
|
computed: {
|
|
3719
|
+
form() {
|
|
3720
|
+
return this.$form.createForm(this, {
|
|
3721
|
+
name: this.formName
|
|
3722
|
+
});
|
|
3723
|
+
},
|
|
3720
3724
|
exposedMethods() {
|
|
3721
3725
|
return {
|
|
3722
|
-
setFieldsValue: this.setFieldsValue
|
|
3726
|
+
setFieldsValue: this.setFieldsValue,
|
|
3727
|
+
getFieldsValue: this.getFieldsValue
|
|
3723
3728
|
};
|
|
3724
3729
|
}
|
|
3725
3730
|
},
|
|
3726
3731
|
methods: {
|
|
3732
|
+
evalDisabledExpression() {
|
|
3733
|
+
this.elements.forEach(ele => {
|
|
3734
|
+
const {
|
|
3735
|
+
disabled
|
|
3736
|
+
} = ele;
|
|
3737
|
+
const ret = this.executeExpression(disabled);
|
|
3738
|
+
this.$set(ele, '_disabled', ret);
|
|
3739
|
+
});
|
|
3740
|
+
},
|
|
3741
|
+
executeExpression(expression) {
|
|
3742
|
+
if (shared.type.isBool(expression)) return expression;
|
|
3743
|
+
if (shared.type.isEmpty(expression)) return false;
|
|
3744
|
+
return parse(expression, {
|
|
3745
|
+
...this.getFieldsValue()
|
|
3746
|
+
});
|
|
3747
|
+
},
|
|
3727
3748
|
onChange(value, props) {
|
|
3749
|
+
const {
|
|
3750
|
+
name
|
|
3751
|
+
} = props;
|
|
3752
|
+
this.setFieldsValue({
|
|
3753
|
+
[name]: value
|
|
3754
|
+
});
|
|
3755
|
+
this.evalDisabledExpression();
|
|
3728
3756
|
this.$emit('change', {
|
|
3729
3757
|
value,
|
|
3730
3758
|
props,
|
|
@@ -3766,6 +3794,7 @@
|
|
|
3766
3794
|
},
|
|
3767
3795
|
mounted() {
|
|
3768
3796
|
this.setDefaultValues();
|
|
3797
|
+
this.evalDisabledExpression();
|
|
3769
3798
|
}
|
|
3770
3799
|
};
|
|
3771
3800
|
|
|
@@ -3814,7 +3843,7 @@
|
|
|
3814
3843
|
],
|
|
3815
3844
|
staticStyle: { width: "100%" },
|
|
3816
3845
|
attrs: {
|
|
3817
|
-
disabled: ele.
|
|
3846
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
3818
3847
|
"max-length": ele.maxLength,
|
|
3819
3848
|
},
|
|
3820
3849
|
on: {
|
|
@@ -3847,7 +3876,7 @@
|
|
|
3847
3876
|
attrs: {
|
|
3848
3877
|
"max-length": ele.maxLength,
|
|
3849
3878
|
autosize: ele.autosize,
|
|
3850
|
-
disabled: ele.
|
|
3879
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
3851
3880
|
"allow-clear": ele.allowClear,
|
|
3852
3881
|
placeholder: ele.placeholder,
|
|
3853
3882
|
},
|
|
@@ -3880,7 +3909,7 @@
|
|
|
3880
3909
|
staticStyle: { width: "100%" },
|
|
3881
3910
|
attrs: {
|
|
3882
3911
|
"data-source": ele.optionList,
|
|
3883
|
-
disabled: ele.
|
|
3912
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
3884
3913
|
code: ele.code,
|
|
3885
3914
|
params: ele.params,
|
|
3886
3915
|
},
|
|
@@ -3928,6 +3957,9 @@
|
|
|
3928
3957
|
},
|
|
3929
3958
|
],
|
|
3930
3959
|
staticStyle: { width: "100%" },
|
|
3960
|
+
attrs: {
|
|
3961
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
3962
|
+
},
|
|
3931
3963
|
}),
|
|
3932
3964
|
],
|
|
3933
3965
|
1
|
|
@@ -3975,7 +4007,17 @@
|
|
|
3975
4007
|
},
|
|
3976
4008
|
],
|
|
3977
4009
|
staticStyle: { width: "100%" },
|
|
3978
|
-
attrs: {
|
|
4010
|
+
attrs: {
|
|
4011
|
+
precision: ele.precision,
|
|
4012
|
+
disabled: _vm.executeExpression(
|
|
4013
|
+
ele._disabled
|
|
4014
|
+
),
|
|
4015
|
+
},
|
|
4016
|
+
on: {
|
|
4017
|
+
change: function ($event) {
|
|
4018
|
+
return _vm.onChange($event, ele)
|
|
4019
|
+
},
|
|
4020
|
+
},
|
|
3979
4021
|
},
|
|
3980
4022
|
"ele-input-number",
|
|
3981
4023
|
ele.props,
|
|
@@ -4003,7 +4045,10 @@
|
|
|
4003
4045
|
},
|
|
4004
4046
|
],
|
|
4005
4047
|
staticStyle: { width: "100%" },
|
|
4006
|
-
attrs: {
|
|
4048
|
+
attrs: {
|
|
4049
|
+
"data-source": ele.optionList,
|
|
4050
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
4051
|
+
},
|
|
4007
4052
|
}),
|
|
4008
4053
|
],
|
|
4009
4054
|
1
|
|
@@ -4026,7 +4071,10 @@
|
|
|
4026
4071
|
},
|
|
4027
4072
|
],
|
|
4028
4073
|
staticStyle: { width: "100%" },
|
|
4029
|
-
attrs: {
|
|
4074
|
+
attrs: {
|
|
4075
|
+
disabled: _vm.executeExpression(ele._disabled),
|
|
4076
|
+
"data-source": ele.optionList,
|
|
4077
|
+
},
|
|
4030
4078
|
on: {
|
|
4031
4079
|
change: function ($event) {
|
|
4032
4080
|
return _vm.onChange($event, ele)
|
|
@@ -4057,11 +4105,11 @@
|
|
|
4057
4105
|
/* style */
|
|
4058
4106
|
const __vue_inject_styles__$9 = function (inject) {
|
|
4059
4107
|
if (!inject) return
|
|
4060
|
-
inject("data-v-
|
|
4108
|
+
inject("data-v-18e5775b_0", { source: ".ele__form--wrapper[data-v-18e5775b] {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/form/src/index.vue","index.vue"],"names":[],"mappings":"AA6MA;EACA,gBAAA;AC5MA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele__form--wrapper\">\n <a-form :form=\"form\" layout=\"vertical\" class=\"ant-advanced-search-form\">\n <a-row :gutter=\"24\">\n <a-col :span=\"ele.span\" v-for=\"ele in elements\" :key=\"ele.name\">\n <template v-if=\"ele.type == 'Input'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-input \n @change=\"onChange($event, ele)\" \n :disabled=\"executeExpression(ele._disabled)\" \n :max-length=\"ele.maxLength\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-input>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Textarea'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-textarea \n @change=\"onChange($event, ele)\"\n :max-length=\"ele.maxLength\"\n :autosize=\"ele.autosize\"\n :disabled=\"executeExpression(ele._disabled)\"\n :allow-clear=\"ele.allowClear\"\n :placeholder=\"ele.placeholder\"\n v-decorator=\"[ele.name, { rules: ele.rules }]\"\n style=\"width:100%;\">\n </ele-textarea>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Select'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-select \n :data-source=\"ele.optionList\" \n :disabled=\"executeExpression(ele._disabled)\" \n :code=\"ele.code\" \n :params=\"ele.params\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-select>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'ele-upload'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-upload v-decorator=\"[ele.name, { rules: ele.rules }]\" style=\"width:100%;\"></ele-upload>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'ele-date-range'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-date-range \n :disabled=\"executeExpression(ele._disabled)\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-date-range>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'SelectEntity'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-select-entity \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-select-entity>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'InputNumber'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-input-number \n @change=\"onChange($event, ele)\" \n :precision=\"ele.precision\" \n :disabled=\"executeExpression(ele._disabled)\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n v-bind=\"ele.props\" \n style=\"width:100%;\">\n </ele-input-number>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Checkbox'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-checkbox \n :data-source=\"ele.optionList\" \n :disabled=\"executeExpression(ele._disabled)\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-checkbox>\n </a-form-item>\n </template>\n <template v-else-if=\"ele.type == 'Radio'\">\n <a-form-item :label=\"`${ele.label}：`\">\n <ele-radio \n @change=\"onChange($event, ele)\" \n :disabled=\"executeExpression(ele._disabled)\" \n :data-source=\"ele.optionList\" \n v-decorator=\"[ele.name, { rules: ele.rules }]\" \n style=\"width:100%;\">\n </ele-radio>\n </a-form-item>\n </template>\n </a-col>\n </a-row>\n </a-form>\n </div>\n</template>\n\n<script>\nimport EleSelect from '../../select/src/index.vue'\nimport EleInput from '../../input/src/index.vue'\nimport EleTextarea from '../../textarea/src/index.vue'\nimport EleUpload from '../../upload/src/index.vue'\nimport EleSelectEntity from '../../select-entity/src/index.vue'\nimport EleInputNumber from '../../input-number/src/index.vue'\nimport EleCheckbox from '../../checkbox/src/index.vue'\nimport EleRadio from '../../radio/src/index.vue'\nimport { parse } from '@idooel/expression'\nimport { type } from '@idooel/shared'\nexport default {\n name: 'ele-form',\n components: {\n EleSelect,\n EleInput,\n EleTextarea,\n EleUpload,\n EleSelectEntity,\n EleInputNumber,\n EleCheckbox,\n EleRadio\n },\n props: {\n formName: {\n type: [Number, String],\n default: 'coordinated'\n },\n elements: {\n type: Array,\n default: () => []\n }\n },\n data () {\n return {}\n },\n computed: {\n form () {\n return this.$form.createForm(this, { name: this.formName })\n },\n exposedMethods () {\n return {\n setFieldsValue: this.setFieldsValue,\n getFieldsValue: this.getFieldsValue\n }\n }\n },\n methods: {\n evalDisabledExpression () {\n this.elements.forEach(ele => {\n const { disabled } = ele\n const ret = this.executeExpression(disabled)\n this.$set(ele, '_disabled', ret)\n })\n },\n executeExpression (expression) {\n if (type.isBool(expression)) return expression\n if (type.isEmpty(expression)) return false\n return parse(expression, { ...this.getFieldsValue() })\n },\n onChange (value, props) {\n const { name } = props\n this.setFieldsValue({ [name]: value })\n this.evalDisabledExpression()\n this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })\n },\n collectDefaultValues () {\n const ret = this.elements.reduce((ret, props) => {\n const { name, defaultValue } = props\n if (defaultValue) {\n ret[name] = defaultValue\n }\n return ret\n }, {})\n return ret\n },\n setDefaultValues () {\n const defaultValues = this.collectDefaultValues()\n this.setFieldsValue(defaultValues)\n },\n validateFields () {\n let ret = false\n this.form.validateFields((error, values) => {\n ret = !error\n })\n return ret\n },\n setFieldsValue (props = {}) {\n this.form.setFieldsValue(props)\n },\n getFieldsValue () {\n return this.form.getFieldsValue()\n }\n },\n mounted() {\n this.setDefaultValues()\n this.evalDisabledExpression()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele__form--wrapper {\n background: #fff;\n .ant-form-item {\n }\n}\n</style>",".ele__form--wrapper {\n background: #fff;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
4061
4109
|
|
|
4062
4110
|
};
|
|
4063
4111
|
/* scoped */
|
|
4064
|
-
const __vue_scope_id__$9 = "data-v-
|
|
4112
|
+
const __vue_scope_id__$9 = "data-v-18e5775b";
|
|
4065
4113
|
/* module identifier */
|
|
4066
4114
|
const __vue_module_identifier__$9 = undefined;
|
|
4067
4115
|
/* functional template */
|
|
@@ -4338,7 +4386,7 @@
|
|
|
4338
4386
|
buttonGroupMeta
|
|
4339
4387
|
} = base;
|
|
4340
4388
|
return {
|
|
4341
|
-
elements,
|
|
4389
|
+
elements: JSON.parse(JSON.stringify(elements)),
|
|
4342
4390
|
buttonGroupMeta,
|
|
4343
4391
|
title: `${title}${this.increaseCount++}`,
|
|
4344
4392
|
_gen: true
|
|
@@ -4426,7 +4474,10 @@
|
|
|
4426
4474
|
_c("ele-form", {
|
|
4427
4475
|
ref: group.key || _vm.formRefBase + "__" + idx,
|
|
4428
4476
|
refInFor: true,
|
|
4429
|
-
attrs: {
|
|
4477
|
+
attrs: {
|
|
4478
|
+
"form-name": group.key || idx,
|
|
4479
|
+
elements: group.elements,
|
|
4480
|
+
},
|
|
4430
4481
|
on: {
|
|
4431
4482
|
change: function ($event) {
|
|
4432
4483
|
return _vm.onChangeFormStatus(
|
|
@@ -4471,11 +4522,11 @@
|
|
|
4471
4522
|
/* style */
|
|
4472
4523
|
const __vue_inject_styles__$8 = function (inject) {
|
|
4473
4524
|
if (!inject) return
|
|
4474
|
-
inject("data-v-70c38ae2_0", { source: ".ele.form-group-model__wrapper[data-v-70c38ae2] {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-70c38ae2] {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-70c38ae2]:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-70c38ae2] {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-70c38ae2] {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-70c38ae2] {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/form-group-model/src/index.vue","index.vue"],"names":[],"mappings":"AA4NA;EACA,iBAAA;EACA,oBAAA;AC3NA;AD4NA;EACA,gBAAA;EACA,gBAAA;AC1NA;AD2NA;EACA,iBAAA;ACzNA;AD2NA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACzNA;AD2NA;EACA,aAAA;ACzNA;AD4NA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC1NA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele form-group-model__wrapper\">\n <template v-for=\"(group, idx) in groupMeta\">\n <div \n class=\"form-group-model__from\"\n v-if=\"!group.isGenTpl\"\n :key=\"group.key || idx\">\n <div class=\"form-group-model__form--title\">\n <div>{{ group.title }}</div>\n <div class=\"form-group-model__form--buttons\">\n <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\n </div>\n </div>\n <div class=\"form-group-model__form--content\">\n <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\n </div>\n </div>\n </template>\n <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\n <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\n </div>\n </div>\n</template>\n\n<script>\nimport Form from '../../form/src/index.vue'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap } from '../../utils'\nimport { v4 as uuidv4 } from 'uuid'\nimport { type, net } from '@idooel/shared'\nimport EleButtonGroup from '../../composite-components/button-group/src/index.vue'\nexport default {\n name: 'ele-form-group-model',\n components: {\n [Form.name]: Form,\n [EleButtonGroup.name]: EleButtonGroup\n },\n props: {\n mode: {\n type: String\n },\n fieldName: {\n type: String,\n default: 'formGroup'\n },\n groupMeta: {\n type: Array,\n default: () => []\n },\n footerMeta: {\n type: Object,\n default: () => {}\n },\n preRequest: {\n type: Object,\n default: () => {}\n },\n infoRequest: {\n type: Object,\n default: () => {}\n },\n submitRequest: {\n type: Object,\n default: () => {}\n }\n },\n data () {\n return {\n increaseCount: 1\n }\n },\n computed: {\n showFooterMeta () {\n return !type.isEmpty(this.footerMeta)\n },\n formRefBase () {\n return uuidv4()\n },\n footerElements () {\n const { elements } = this.footerMeta\n return elements.call(this)\n },\n assignAttrForEvents () {\n const events = this.footerElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\n [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\n [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\n }\n },\n getFormRefs () {\n return this.groupMeta.map((group, idx) => {\n if (!group.isGenTpl) {\n return this.$refs[group.key || `${this.formRefBase}__${idx}`]\n }\n return void 0\n }).filter(item => !!item).flat()\n },\n formModels () {\n if (this.mode === 'increase') {\n //TODO increase mode to return formModels\n return this.getFormRefs.map(form => {\n return form.getFieldsValue()\n })\n } else {\n return this.getFormRefs.map(form => {\n const { $vnode: { data: { ref } } } = form\n return {\n key: ref,\n value: form.getFieldsValue()\n }\n }).reduce((ret, props) => {\n ret[props.key] = props.value\n return ret\n }, {})\n }\n }\n },\n methods: {\n execFieldMap (fieldMap = {}, dataSource = {}) {\n const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\n return ret\n },\n onChangeFormStatus (props, key) {\n this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\n },\n async infoRequestTrigger () {\n const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\n if (!url) return\n net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\n const { data = {} } = resp\n if (this.mode === 'increase') {\n this.renderIncreaseForm(data)\n }\n })\n },\n async preRequestTrigger () {\n const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\n if (!url) return\n net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\n const { data = {} } = resp\n if (this.mode === 'increase') {\n this.renderIncreaseForm(data)\n }\n })\n },\n renderIncreaseForm (data = {}) {\n const formGroupValuesLength = data[this.fieldName].length\n const genTplTarget = this.groupMeta.find(item => item.isGenTpl)\n const notGenTplPoolLength = this.groupMeta.filter(item => !item.isGenTpl).length\n const genNum = formGroupValuesLength - notGenTplPoolLength\n new Array(genNum).fill().forEach(() => {\n const form = this.genForm(genTplTarget)\n this.groupMeta.push(form)\n })\n const formGroupValues = data[this.fieldName]\n this.setFieldsValue(formGroupValues)\n },\n async submitRequestTrigger (props = {}) {\n const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\n if (!url) return\n const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\n this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\n return resp.data\n })\n return ret\n },\n setFieldsValue (data = []) {\n this.getFormRefs.forEach((form, idx) => {\n form.setFieldsValue(data[idx])\n })\n },\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n const status = this.getFormRefs.map(form => {\n const status = form.validateFields()\n return status\n }).every(item => item)\n if (status) {\n return this.submitRequestTrigger(props)\n } else {\n return false\n }\n },\n [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\n this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\n },\n genForm (base) {\n const { elements, title, buttonGroupMeta } = base\n return {\n elements,\n buttonGroupMeta,\n title: `${title}${this.increaseCount++}`,\n _gen: true\n }\n },\n handleClickDelete (props = {}, attr = {}, idx) {\n this.groupMeta.splice(idx, 1)\n this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\n },\n [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\n const genTplTarget = this.groupMeta.find(item => item.isGenTpl)\n const form = this.genForm(genTplTarget)\n this.groupMeta.push(form)\n }\n },\n async mounted() {\n await this.preRequestTrigger()\n await this.infoRequestTrigger()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n &.form-group-model__wrapper {\n background: unset;\n padding-bottom: 80px;\n .form-group-model__from {\n background: #fff;\n margin-top: 16px;\n &:first-child {\n margin-top: unset;\n }\n .form-group-model__form--title {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n .form-group-model__form--content {\n padding: 16px;\n }\n }\n .form-group-model__form--footer {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n }\n }\n}\n</style>",".ele.form-group-model__wrapper {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
4525
|
+
inject("data-v-cf97e098_0", { source: ".ele.form-group-model__wrapper[data-v-cf97e098] {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-cf97e098] {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from[data-v-cf97e098]:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title[data-v-cf97e098] {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content[data-v-cf97e098] {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer[data-v-cf97e098] {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["/Users/huangshan/Goldgov/front/ganjiao/base-elearning-frontend-model/packages/components/packages/form-group-model/src/index.vue","index.vue"],"names":[],"mappings":"AA4NA;EACA,iBAAA;EACA,oBAAA;AC3NA;AD4NA;EACA,gBAAA;EACA,gBAAA;AC1NA;AD2NA;EACA,iBAAA;ACzNA;AD2NA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,wBAAA;EACA,mDAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;ACzNA;AD2NA;EACA,aAAA;ACzNA;AD4NA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;AC1NA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\n <div class=\"ele form-group-model__wrapper\">\n <template v-for=\"(group, idx) in groupMeta\">\n <div \n class=\"form-group-model__from\"\n v-if=\"!group.isGenTpl\"\n :key=\"group.key || idx\">\n <div class=\"form-group-model__form--title\">\n <div>{{ group.title }}</div>\n <div class=\"form-group-model__form--buttons\">\n <ele-button-group v-if=\"group.buttonGroupMeta\" v-on=\"assignAttrForEvents\" @delete=\"handleClickDelete($event, group, idx)\" :data-source=\"group.buttonGroupMeta.elements.call(this)\"></ele-button-group>\n </div>\n </div>\n <div class=\"form-group-model__form--content\">\n <ele-form @change=\"onChangeFormStatus($event, group.key || idx)\" :form-name=\"group.key || idx\" :ref=\"group.key || `${formRefBase}__${idx}`\" :elements=\"group.elements\"></ele-form>\n </div>\n </div>\n </template>\n <div v-if=\"showFooterMeta\" class=\"form-group-model__form--footer\">\n <ele-button-group v-on=\"assignAttrForEvents\" :data-source=\"footerElements\"></ele-button-group>\n </div>\n </div>\n</template>\n\n<script>\nimport Form from '../../form/src/index.vue'\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap } from '../../utils'\nimport { v4 as uuidv4 } from 'uuid'\nimport { type, net } from '@idooel/shared'\nimport EleButtonGroup from '../../composite-components/button-group/src/index.vue'\nexport default {\n name: 'ele-form-group-model',\n components: {\n [Form.name]: Form,\n [EleButtonGroup.name]: EleButtonGroup\n },\n props: {\n mode: {\n type: String\n },\n fieldName: {\n type: String,\n default: 'formGroup'\n },\n groupMeta: {\n type: Array,\n default: () => []\n },\n footerMeta: {\n type: Object,\n default: () => {}\n },\n preRequest: {\n type: Object,\n default: () => {}\n },\n infoRequest: {\n type: Object,\n default: () => {}\n },\n submitRequest: {\n type: Object,\n default: () => {}\n }\n },\n data () {\n return {\n increaseCount: 1\n }\n },\n computed: {\n showFooterMeta () {\n return !type.isEmpty(this.footerMeta)\n },\n formRefBase () {\n return uuidv4()\n },\n footerElements () {\n const { elements } = this.footerMeta\n return elements.call(this)\n },\n assignAttrForEvents () {\n const events = this.footerElements.reduce((ret, ele) => {\n ret[ele.eventName] = (e) => {\n this.$emit(ele.eventName || 'click', { ...e })\n }\n return ret\n }, {})\n return {\n ...this.$listeners,\n ...events,\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],\n [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL],\n [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]\n }\n },\n getFormRefs () {\n return this.groupMeta.map((group, idx) => {\n if (!group.isGenTpl) {\n return this.$refs[group.key || `${this.formRefBase}__${idx}`]\n }\n return void 0\n }).filter(item => !!item).flat()\n },\n formModels () {\n if (this.mode === 'increase') {\n //TODO increase mode to return formModels\n return this.getFormRefs.map(form => {\n return form.getFieldsValue()\n })\n } else {\n return this.getFormRefs.map(form => {\n const { $vnode: { data: { ref } } } = form\n return {\n key: ref,\n value: form.getFieldsValue()\n }\n }).reduce((ret, props) => {\n ret[props.key] = props.value\n return ret\n }, {})\n }\n }\n },\n methods: {\n execFieldMap (fieldMap = {}, dataSource = {}) {\n const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})\n return ret\n },\n onChangeFormStatus (props, key) {\n this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })\n },\n async infoRequestTrigger () {\n const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest\n if (!url) return\n net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {\n const { data = {} } = resp\n if (this.mode === 'increase') {\n this.renderIncreaseForm(data)\n }\n })\n },\n async preRequestTrigger () {\n const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest\n if (!url) return\n net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {\n const { data = {} } = resp\n if (this.mode === 'increase') {\n this.renderIncreaseForm(data)\n }\n })\n },\n renderIncreaseForm (data = {}) {\n const formGroupValuesLength = data[this.fieldName].length\n const genTplTarget = this.groupMeta.find(item => item.isGenTpl)\n const notGenTplPoolLength = this.groupMeta.filter(item => !item.isGenTpl).length\n const genNum = formGroupValuesLength - notGenTplPoolLength\n new Array(genNum).fill().forEach(() => {\n const form = this.genForm(genTplTarget)\n this.groupMeta.push(form)\n })\n const formGroupValues = data[this.fieldName]\n this.setFieldsValue(formGroupValues)\n },\n async submitRequestTrigger (props = {}) {\n const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest\n if (!url) return\n const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels }), [this.fieldName]: this.formModels }, { headers }).then(resp => {\n this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })\n return resp.data\n })\n return ret\n },\n setFieldsValue (data = []) {\n this.getFormRefs.forEach((form, idx) => {\n form.setFieldsValue(data[idx])\n })\n },\n [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\n const status = this.getFormRefs.map(form => {\n const status = form.validateFields()\n return status\n }).every(item => item)\n if (status) {\n return this.submitRequestTrigger(props)\n } else {\n return false\n }\n },\n [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {\n this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })\n },\n genForm (base) {\n const { elements, title, buttonGroupMeta } = base\n return {\n elements: JSON.parse(JSON.stringify(elements)),\n buttonGroupMeta,\n title: `${title}${this.increaseCount++}`,\n _gen: true\n }\n },\n handleClickDelete (props = {}, attr = {}, idx) {\n this.groupMeta.splice(idx, 1)\n this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })\n },\n [BUILT_IN_EVENT_NAMES.INCREASE] (props) {\n const genTplTarget = this.groupMeta.find(item => item.isGenTpl)\n const form = this.genForm(genTplTarget)\n this.groupMeta.push(form)\n }\n },\n async mounted() {\n await this.preRequestTrigger()\n await this.infoRequestTrigger()\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.ele {\n &.form-group-model__wrapper {\n background: unset;\n padding-bottom: 80px;\n .form-group-model__from {\n background: #fff;\n margin-top: 16px;\n &:first-child {\n margin-top: unset;\n }\n .form-group-model__form--title {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n }\n .form-group-model__form--content {\n padding: 16px;\n }\n }\n .form-group-model__form--footer {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n }\n }\n}\n</style>",".ele.form-group-model__wrapper {\n background: unset;\n padding-bottom: 80px;\n}\n.ele.form-group-model__wrapper .form-group-model__from {\n background: #fff;\n margin-top: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__from:first-child {\n margin-top: unset;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--title {\n width: 100%;\n height: 56px;\n padding: 0 16px;\n border-bottom: 1px solid;\n border-color: var(--idooel-form-title-border-color);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n.ele.form-group-model__wrapper .form-group-model__from .form-group-model__form--content {\n padding: 16px;\n}\n.ele.form-group-model__wrapper .form-group-model__form--footer {\n width: 100%;\n height: 64px;\n background: #fff;\n position: fixed;\n bottom: 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: end;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
|
|
4475
4526
|
|
|
4476
4527
|
};
|
|
4477
4528
|
/* scoped */
|
|
4478
|
-
const __vue_scope_id__$8 = "data-v-
|
|
4529
|
+
const __vue_scope_id__$8 = "data-v-cf97e098";
|
|
4479
4530
|
/* module identifier */
|
|
4480
4531
|
const __vue_module_identifier__$8 = undefined;
|
|
4481
4532
|
/* functional template */
|
package/package.json
CHANGED
|
@@ -5,7 +5,13 @@
|
|
|
5
5
|
<a-col :span="ele.span" v-for="ele in elements" :key="ele.name">
|
|
6
6
|
<template v-if="ele.type == 'Input'">
|
|
7
7
|
<a-form-item :label="`${ele.label}：`">
|
|
8
|
-
<ele-input
|
|
8
|
+
<ele-input
|
|
9
|
+
@change="onChange($event, ele)"
|
|
10
|
+
:disabled="executeExpression(ele._disabled)"
|
|
11
|
+
:max-length="ele.maxLength"
|
|
12
|
+
v-decorator="[ele.name, { rules: ele.rules }]"
|
|
13
|
+
style="width:100%;">
|
|
14
|
+
</ele-input>
|
|
9
15
|
</a-form-item>
|
|
10
16
|
</template>
|
|
11
17
|
<template v-else-if="ele.type == 'Textarea'">
|
|
@@ -14,7 +20,7 @@
|
|
|
14
20
|
@change="onChange($event, ele)"
|
|
15
21
|
:max-length="ele.maxLength"
|
|
16
22
|
:autosize="ele.autosize"
|
|
17
|
-
:disabled="ele.
|
|
23
|
+
:disabled="executeExpression(ele._disabled)"
|
|
18
24
|
:allow-clear="ele.allowClear"
|
|
19
25
|
:placeholder="ele.placeholder"
|
|
20
26
|
v-decorator="[ele.name, { rules: ele.rules }]"
|
|
@@ -24,7 +30,14 @@
|
|
|
24
30
|
</template>
|
|
25
31
|
<template v-else-if="ele.type == 'Select'">
|
|
26
32
|
<a-form-item :label="`${ele.label}：`">
|
|
27
|
-
<ele-select
|
|
33
|
+
<ele-select
|
|
34
|
+
:data-source="ele.optionList"
|
|
35
|
+
:disabled="executeExpression(ele._disabled)"
|
|
36
|
+
:code="ele.code"
|
|
37
|
+
:params="ele.params"
|
|
38
|
+
v-decorator="[ele.name, { rules: ele.rules }]"
|
|
39
|
+
style="width:100%;">
|
|
40
|
+
</ele-select>
|
|
28
41
|
</a-form-item>
|
|
29
42
|
</template>
|
|
30
43
|
<template v-else-if="ele.type == 'ele-upload'">
|
|
@@ -34,27 +47,52 @@
|
|
|
34
47
|
</template>
|
|
35
48
|
<template v-else-if="ele.type == 'ele-date-range'">
|
|
36
49
|
<a-form-item :label="`${ele.label}：`">
|
|
37
|
-
<ele-date-range
|
|
50
|
+
<ele-date-range
|
|
51
|
+
:disabled="executeExpression(ele._disabled)"
|
|
52
|
+
v-decorator="[ele.name, { rules: ele.rules }]"
|
|
53
|
+
style="width:100%;">
|
|
54
|
+
</ele-date-range>
|
|
38
55
|
</a-form-item>
|
|
39
56
|
</template>
|
|
40
57
|
<template v-else-if="ele.type == 'SelectEntity'">
|
|
41
58
|
<a-form-item :label="`${ele.label}：`">
|
|
42
|
-
<ele-select-entity
|
|
59
|
+
<ele-select-entity
|
|
60
|
+
v-decorator="[ele.name, { rules: ele.rules }]"
|
|
61
|
+
style="width:100%;">
|
|
62
|
+
</ele-select-entity>
|
|
43
63
|
</a-form-item>
|
|
44
64
|
</template>
|
|
45
65
|
<template v-else-if="ele.type == 'InputNumber'">
|
|
46
66
|
<a-form-item :label="`${ele.label}：`">
|
|
47
|
-
<ele-input-number
|
|
67
|
+
<ele-input-number
|
|
68
|
+
@change="onChange($event, ele)"
|
|
69
|
+
:precision="ele.precision"
|
|
70
|
+
:disabled="executeExpression(ele._disabled)"
|
|
71
|
+
v-decorator="[ele.name, { rules: ele.rules }]"
|
|
72
|
+
v-bind="ele.props"
|
|
73
|
+
style="width:100%;">
|
|
74
|
+
</ele-input-number>
|
|
48
75
|
</a-form-item>
|
|
49
76
|
</template>
|
|
50
77
|
<template v-else-if="ele.type == 'Checkbox'">
|
|
51
78
|
<a-form-item :label="`${ele.label}：`">
|
|
52
|
-
<ele-checkbox
|
|
79
|
+
<ele-checkbox
|
|
80
|
+
:data-source="ele.optionList"
|
|
81
|
+
:disabled="executeExpression(ele._disabled)"
|
|
82
|
+
v-decorator="[ele.name, { rules: ele.rules }]"
|
|
83
|
+
style="width:100%;">
|
|
84
|
+
</ele-checkbox>
|
|
53
85
|
</a-form-item>
|
|
54
86
|
</template>
|
|
55
87
|
<template v-else-if="ele.type == 'Radio'">
|
|
56
88
|
<a-form-item :label="`${ele.label}：`">
|
|
57
|
-
<ele-radio
|
|
89
|
+
<ele-radio
|
|
90
|
+
@change="onChange($event, ele)"
|
|
91
|
+
:disabled="executeExpression(ele._disabled)"
|
|
92
|
+
:data-source="ele.optionList"
|
|
93
|
+
v-decorator="[ele.name, { rules: ele.rules }]"
|
|
94
|
+
style="width:100%;">
|
|
95
|
+
</ele-radio>
|
|
58
96
|
</a-form-item>
|
|
59
97
|
</template>
|
|
60
98
|
</a-col>
|
|
@@ -72,6 +110,8 @@ import EleSelectEntity from '../../select-entity/src/index.vue'
|
|
|
72
110
|
import EleInputNumber from '../../input-number/src/index.vue'
|
|
73
111
|
import EleCheckbox from '../../checkbox/src/index.vue'
|
|
74
112
|
import EleRadio from '../../radio/src/index.vue'
|
|
113
|
+
import { parse } from '@idooel/expression'
|
|
114
|
+
import { type } from '@idooel/shared'
|
|
75
115
|
export default {
|
|
76
116
|
name: 'ele-form',
|
|
77
117
|
components: {
|
|
@@ -85,26 +125,46 @@ export default {
|
|
|
85
125
|
EleRadio
|
|
86
126
|
},
|
|
87
127
|
props: {
|
|
128
|
+
formName: {
|
|
129
|
+
type: [Number, String],
|
|
130
|
+
default: 'coordinated'
|
|
131
|
+
},
|
|
88
132
|
elements: {
|
|
89
133
|
type: Array,
|
|
90
134
|
default: () => []
|
|
91
135
|
}
|
|
92
136
|
},
|
|
93
137
|
data () {
|
|
94
|
-
return {
|
|
95
|
-
some: '1',
|
|
96
|
-
form: this.$form.createForm(this, { name: 'coordinated' })
|
|
97
|
-
}
|
|
138
|
+
return {}
|
|
98
139
|
},
|
|
99
140
|
computed: {
|
|
141
|
+
form () {
|
|
142
|
+
return this.$form.createForm(this, { name: this.formName })
|
|
143
|
+
},
|
|
100
144
|
exposedMethods () {
|
|
101
145
|
return {
|
|
102
|
-
setFieldsValue: this.setFieldsValue
|
|
146
|
+
setFieldsValue: this.setFieldsValue,
|
|
147
|
+
getFieldsValue: this.getFieldsValue
|
|
103
148
|
}
|
|
104
149
|
}
|
|
105
150
|
},
|
|
106
151
|
methods: {
|
|
152
|
+
evalDisabledExpression () {
|
|
153
|
+
this.elements.forEach(ele => {
|
|
154
|
+
const { disabled } = ele
|
|
155
|
+
const ret = this.executeExpression(disabled)
|
|
156
|
+
this.$set(ele, '_disabled', ret)
|
|
157
|
+
})
|
|
158
|
+
},
|
|
159
|
+
executeExpression (expression) {
|
|
160
|
+
if (type.isBool(expression)) return expression
|
|
161
|
+
if (type.isEmpty(expression)) return false
|
|
162
|
+
return parse(expression, { ...this.getFieldsValue() })
|
|
163
|
+
},
|
|
107
164
|
onChange (value, props) {
|
|
165
|
+
const { name } = props
|
|
166
|
+
this.setFieldsValue({ [name]: value })
|
|
167
|
+
this.evalDisabledExpression()
|
|
108
168
|
this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })
|
|
109
169
|
},
|
|
110
170
|
collectDefaultValues () {
|
|
@@ -137,6 +197,7 @@ export default {
|
|
|
137
197
|
},
|
|
138
198
|
mounted() {
|
|
139
199
|
this.setDefaultValues()
|
|
200
|
+
this.evalDisabledExpression()
|
|
140
201
|
}
|
|
141
202
|
}
|
|
142
203
|
</script>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
</div>
|
|
13
13
|
</div>
|
|
14
14
|
<div class="form-group-model__form--content">
|
|
15
|
-
<ele-form @change="onChangeFormStatus($event, group.key || idx)" :ref="group.key || `${formRefBase}__${idx}`" :elements="group.elements"></ele-form>
|
|
15
|
+
<ele-form @change="onChangeFormStatus($event, group.key || idx)" :form-name="group.key || idx" :ref="group.key || `${formRefBase}__${idx}`" :elements="group.elements"></ele-form>
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
|
18
18
|
</template>
|
|
@@ -193,7 +193,7 @@ export default {
|
|
|
193
193
|
genForm (base) {
|
|
194
194
|
const { elements, title, buttonGroupMeta } = base
|
|
195
195
|
return {
|
|
196
|
-
elements,
|
|
196
|
+
elements: JSON.parse(JSON.stringify(elements)),
|
|
197
197
|
buttonGroupMeta,
|
|
198
198
|
title: `${title}${this.increaseCount++}`,
|
|
199
199
|
_gen: true
|