@bdsoft/element 1.1.0

package/package-form/core/handler/inject.js

@@ -0,0 +1,145 @@
+import extend from '@bdsoft-element/utils/lib/extend';
+import is from '@bdsoft-element/utils/lib/type';
+import toLine from '@bdsoft-element/utils/lib/toline';
+import {extractVar, parseFn} from '../frame/util';
+
+
+export default function useInject(Handler) {
+    extend(Handler.prototype, {
+        parseInjectEvent(rule, on) {
+            const inject = rule.inject || this.options.injectEvent;
+            return this.parseEventLst(rule, on, inject);
+        },
+        parseEventLst(rule, data, inject, deep) {
+            Object.keys(data).forEach(k => {
+                const fn = this.parseEvent(rule, data[k], inject, deep);
+                if (fn) {
+                    data[k] = fn;
+                }
+            });
+            return data;
+        },
+        parseEvent(rule, fn, inject, deep) {
+            if (is.Function(fn) && ((inject !== false && !is.Undef(inject)) || fn.__inject)) {
+                return this.inject(rule, fn, inject)
+            } else if (!deep && Array.isArray(fn) && fn[0] && (is.String(fn[0]) || is.Function(fn[0]))) {
+                return this.parseEventLst(rule, fn, inject, true);
+            } else if (is.String(fn)) {
+                const val = parseFn(fn);
+                if (val && fn !== val) {
+                    return val.__inject ? this.parseEvent(rule, val, inject, true) : val;
+                }
+            }
+        },
+        parseEmit(ctx) {
+            let event = {}, rule = ctx.rule, {emitPrefix, field, name, inject} = rule;
+            let emit = rule.emit || [];
+            if (is.trueArray(emit)) {
+                emit.forEach(eventName => {
+                    if (!eventName) return;
+                    let eventInject;
+                    let emitKey = emitPrefix || field || name;
+                    if (is.Object(eventName)) {
+                        eventInject = eventName.inject;
+                        eventName = eventName.name;
+                        emitKey = eventName.prefix || emitKey;
+                    }
+                    if (emitKey) {
+                        const fieldKey = toLine(`${emitKey}-${eventName}`);
+                        const fn = (...arg) => {
+                            if (this.vm.emitsOptions) {
+                                this.vm.emitsOptions[fieldKey] = null;
+                            }
+                            this.vm.emit(fieldKey, ...arg);
+                            this.vm.emit('emit-event', fieldKey, ...arg);
+                            this.bus.$emit(fieldKey, ...arg);
+                        };
+                        fn.__emit = true;
+
+                        if (!eventInject && inject === false) {
+                            event[eventName] = fn;
+                        } else {
+                            let _inject = eventInject || inject || this.options.injectEvent;
+                            event[eventName] = is.Undef(_inject) ? fn : this.inject(rule, fn, _inject);
+                        }
+                    }
+
+                });
+            }
+            ctx.computed.on = event;
+            return event;
+        },
+        getInjectData(self, inject) {
+            const $api = self.__fc__ && self.__fc__.$api;
+            const vm = (self.__fc__ && self.__fc__.$handle.vm) || this.vm;
+            const {option, rule} = vm.props;
+            return {
+                $f: $api || this.api,
+                api: $api || this.api,
+                rule,
+                self: self.__origin__,
+                option,
+                inject
+            };
+        },
+        inject(self, _fn, inject) {
+            if (_fn.__origin) {
+                if (this.watching && !this.loading)
+                    return _fn;
+                _fn = _fn.__origin;
+            }
+
+            const h = this;
+
+            const fn = function (...args) {
+                const data = h.getInjectData(self, inject);
+                data.args = [...args];
+                args.unshift(data);
+                return _fn.apply(this, args);
+            };
+            fn.__origin = _fn;
+            fn.__json = _fn.__json;
+            return fn;
+        },
+        loadStrVar(str, get) {
+            if (str && typeof str === 'string' && str.indexOf('{{') > -1 && str.indexOf('}}') > -1) {
+                const tmp = str;
+                const vars = extractVar(str);
+                let lastVal;
+                vars.forEach(v => {
+                    const split = v.split('||');
+                    const field = split[0].trim();
+                    if (field) {
+                        const def = (split[1] || '').trim();
+                        const val = get ? get(field, def) : this.fc.getLoadData(field, def);
+                        lastVal = val;
+                        str = str.replaceAll(`{{${v}}}`, val == null ? '' : val);
+                    }
+                })
+                if (vars.length === 1 && tmp === `{{${vars[0]}}}`) {
+                    return lastVal;
+                }
+            }
+            return str;
+        },
+        loadFetchVar(options, get) {
+            const loadVal = str => {
+                return this.loadStrVar(str, get);
+            }
+
+            options.action = loadVal(options.action || '');
+
+            ['headers', 'data', 'query'].forEach(key => {
+                if (options[key]) {
+                    const data = {};
+                    Object.keys(options[key]).forEach(k => {
+                        data[loadVal(k)] = loadVal(options[key][k]);
+                    });
+                    options[key] = data;
+                }
+            });
+
+            return options;
+        }
+    })
+}

package/package-form/core/handler/input.js

@@ -0,0 +1,197 @@
+import extend from '@bdsoft-element/utils/lib/extend';
+import {$set} from '@bdsoft-element/utils/lib/modify';
+import is, {hasProperty} from '@bdsoft-element/utils/lib/type';
+import {invoke} from '../frame/util';
+import {nextTick, reactive, toRef} from 'vue';
+
+export default function useInput(Handler) {
+    extend(Handler.prototype, {
+        setValue(ctx, value, formValue, setFlag) {
+            if (ctx.deleted) return;
+            ctx.rule.value = value;
+            this.changeStatus = true;
+            this.nextRefresh();
+            this.$render.clearCache(ctx);
+            this.setFormData(ctx, formValue);
+            this.syncValue();
+            this.valueChange(ctx, value);
+            this.vm.emit('change', ctx.field, value, ctx.origin, this.api, setFlag || false);
+            this.effect(ctx, 'value');
+            this.targetHook(ctx, 'value', {value});
+            this.emitEvent('change', ctx.field, value, {
+                rule: ctx.origin,
+                api: this.api,
+                setFlag: setFlag || false
+            })
+            if (setFlag) {
+                nextTick(() => {
+                    nextTick(() => {
+                        nextTick(() => {
+                            this.api.clearValidateState(ctx.id);
+                        });
+                    });
+                });
+            }
+        },
+        onInput(ctx, value) {
+            let val;
+            if (ctx.input && (this.isQuote(ctx, val = ctx.parser.toValue(value, ctx)) || this.isChange(ctx, value))) {
+                this.setValue(ctx, val, value);
+            }
+        },
+        onUpdateValue(ctx, data) {
+            this.deferSyncValue(() => {
+                const group = ctx.getParentGroup();
+                const subForm = group ? this.subRuleData[group.id] : null;
+                const subData = {};
+                Object.keys(data || {}).forEach(k => {
+                    if (subForm && hasProperty(subForm, k)) {
+                        subData[k] = data[k];
+                    } else if (hasProperty(this.api.form, k)) {
+                        this.api.form[k] = data[k];
+                    } else if (this.api.top !== this.api && hasProperty(this.api.top.form, k)) {
+                        this.api.top.form[k] = data[k];
+                    }
+                });
+                if (Object.keys(subData).length) {
+                    this.api.setChildrenFormData(group.rule, subData);
+                }
+            })
+        },
+        onBaseInput(ctx, value) {
+            this.setFormData(ctx, value);
+            ctx.modelValue = value;
+            this.nextRefresh();
+            this.$render.clearCache(ctx);
+        },
+        setFormData(ctx, value) {
+            ctx.modelValue = value;
+            const group = ctx.getParentGroup();
+            if (group) {
+                if (!this.subRuleData[group.id]) {
+                    this.subRuleData[group.id] = {};
+                }
+                this.subRuleData[group.id][ctx.field] = ctx.rule.value;
+            }
+            $set(this.formData, ctx.id, value);
+        },
+        rmSubRuleData(ctx) {
+            const group = ctx.getParentGroup();
+            if (group && this.subRuleData[group.id]) {
+                delete this.subRuleData[group.id][ctx.field];
+            }
+        },
+        getFormData(ctx) {
+            return this.formData[ctx.id];
+        },
+        syncForm() {
+            const data = reactive({});
+            const fields = this.fields();
+            const ignoreFields = [];
+            if (this.options.appendValue !== false) {
+                Object.keys(this.appendData).reduce((initial, field) => {
+                    if (fields.indexOf(field) === -1) {
+                        initial[field] = toRef(this.appendData, field);
+                    }
+                    return initial;
+                }, data);
+            }
+            fields.reduce((initial, field) => {
+                const ctx = (this.fieldCtx[field] || []).filter(ctx => !this.isIgnore(ctx.rule))[0] || (this.fieldCtx[field][0]);
+                if (this.isIgnore(ctx.rule)) {
+                    ignoreFields.push(field);
+                }
+                initial[field] = toRef(ctx.rule, 'value');
+                return initial;
+            }, data);
+            this.form = data;
+            this.ignoreFields = ignoreFields;
+            this.syncValue();
+        },
+        isIgnore(rule) {
+            return rule.ignore === true || (rule.ignore === 'hidden' && rule.hidden) || (this.options.ignoreHiddenFields && rule.hidden);
+        },
+        appendValue(rule) {
+            if ((!rule.field || !hasProperty(this.appendData, rule.field)) && !this.options.forceCoverValue) {
+                return;
+            }
+            rule.value = this.appendData[rule.field];
+            delete this.appendData[rule.field];
+        },
+        addSubForm(ctx, subForm) {
+            this.subForm[ctx.id] = subForm;
+        },
+        deferSyncValue(fn, sync) {
+            if (!this.deferSyncFn) {
+                this.deferSyncFn = fn;
+            }
+            if (!this.deferSyncFn.sync) {
+                this.deferSyncFn.sync = sync;
+            }
+            invoke(fn);
+            if (this.deferSyncFn === fn) {
+                this.deferSyncFn = null;
+                if (fn.sync) {
+                    this.syncForm();
+                }
+            }
+        },
+        syncValue() {
+            if (this.deferSyncFn) {
+                return this.deferSyncFn.sync = true;
+            }
+            const data = {};
+            Object.keys(this.form).forEach(k => {
+                if (this.ignoreFields.indexOf(k) === -1) {
+                    data[k] = this.form[k];
+                }
+            });
+            this.vm.setupState.updateValue(data);
+        },
+        isChange(ctx, value) {
+            return JSON.stringify(this.getFormData(ctx), strFn) !== JSON.stringify(value, strFn);
+        },
+        isQuote(ctx, value) {
+            return (is.Object(value) || Array.isArray(value)) && value === ctx.rule.value;
+        },
+        refreshUpdate(ctx, val, origin, field) {
+            if (is.Function(ctx.rule.update)) {
+                const state = invoke(() => ctx.rule.update(val, ctx.origin, this.api, {
+                    origin: origin || 'change',
+                    linkField: field
+                }));
+                if (state === undefined) return;
+                ctx.rule.hidden = state === true;
+            }
+        },
+        valueChange(ctx, val) {
+            this.refreshRule(ctx, val);
+            this.bus.$emit('change-' + ctx.field, val);
+        },
+        refreshRule(ctx, val, origin, field) {
+            if (this.refreshControl(ctx)) {
+                this.$render.clearCacheAll();
+                this.loadRule();
+                this.bus.$emit('update', this.api);
+                this.refresh();
+            }
+            this.refreshUpdate(ctx, val, origin, field);
+        },
+        appendLink(ctx) {
+            const link = ctx.rule.link;
+            is.trueArray(link) && link.forEach(field => {
+                const fn = () => this.refreshRule(ctx, ctx.rule.value, 'link', field);
+
+                this.bus.$on('change-' + field, fn);
+                ctx.linkOn.push(() => this.bus.$off('change-' + field, fn));
+            });
+        },
+        fields() {
+            return Object.keys(this.fieldCtx);
+        },
+    });
+}
+
+function strFn(key, val) {
+    return typeof val === 'function' ? '' + val : val;
+}

package/package-form/core/handler/lifecycle.js

@@ -0,0 +1,43 @@
+import extend from '@bdsoft-element/utils/lib/extend';
+import is from '@bdsoft-element/utils/lib/type';
+import {invoke, parseFn} from '../frame/util';
+import toCase from '@bdsoft-element/utils/lib/tocase';
+
+
+export default function useLifecycle(Handler) {
+    extend(Handler.prototype, {
+        mounted() {
+            const _mounted = () => {
+                this.isMounted = true;
+                this.lifecycle('mounted');
+            }
+            if (this.pageEnd) {
+                _mounted();
+            } else {
+                this.bus.$once('page-end', _mounted);
+            }
+        },
+        lifecycle(name) {
+            this.fc.targetFormDriver(name, this.api, this.fc);
+            this.vm.emit(name, this.api);
+            this.emitEvent(name, this.api);
+        },
+        emitEvent(name, ...args) {
+            const _fn = this.options[name] || this.options[toCase('on-' + name)];
+            if (_fn) {
+                const fn = parseFn(_fn);
+                is.Function(fn) && invoke(() => fn(...args));
+            }
+            this.bus.$emit(name, ...args);
+        },
+        targetHook(ctx, name, args) {
+            let hook = ctx.prop?.hook?.[name];
+            if (hook) {
+                hook = Array.isArray(hook) ? hook : [hook];
+                hook.forEach(fn => {
+                    invoke(() => fn({...args || {}, rule: ctx.rule, api: this.api}));
+                });
+            }
+        }
+    })
+}