@bdsoft/element 1.1.0

package/package-form/core/frame/fetch.js

@@ -0,0 +1,119 @@
+// https://github.com/ElemeFE/element/blob/dev/packages/upload/src/ajax.js
+
+import is from '@bdsoft-element/utils/lib/type';
+import {parseFn} from '@bdsoft-element/utils/lib/json';
+import {deepGet} from './util';
+
+function getError(action, option, xhr) {
+    const msg = `fail to ${action} ${xhr.status}'`;
+    const err = new Error(msg);
+    err.status = xhr.status;
+    err.url = action;
+    return err;
+}
+
+function getBody(xhr) {
+    const text = xhr.responseText || xhr.response;
+    if (!text) {
+        return text;
+    }
+
+    try {
+        return JSON.parse(text);
+    } catch (e) {
+        return text;
+    }
+}
+
+export default function fetch(option) {
+    if (typeof XMLHttpRequest === 'undefined') {
+        return;
+    }
+
+    const xhr = new XMLHttpRequest();
+    let action = option.action || '';
+
+    if (xhr.upload && option.onProgress) {
+        xhr.upload.addEventListener('progress', (evt) => {
+            evt.percent = evt.total > 0 ? (evt.loaded / evt.total) * 100 : 0
+            option.onProgress(evt)
+        })
+    }
+
+    if (option.query) {
+        const queryString = new URLSearchParams(option.query).toString();
+        if (action.includes('?')) {
+            action += `&${queryString}`;
+        } else {
+            action += `?${queryString}`;
+        }
+    }
+
+    xhr.onerror = function error(e) {
+        option.onError(e);
+    };
+
+    xhr.onload = function onload() {
+        if (xhr.status < 200 || xhr.status >= 300) {
+            return option.onError(getError(action, option, xhr), getBody(xhr));
+        }
+
+        option.onSuccess(getBody(xhr));
+    };
+
+    xhr.open(option.method || 'get', action, true);
+
+    let formData;
+    if (option.data || option.file) {
+        if (option.file || (option.dataType || '').toLowerCase() !== 'json') {
+            formData = new FormData();
+            Object.keys(option.data || {}).map(key => {
+                formData.append(key, option.data[key]);
+            });
+        } else {
+            formData = JSON.stringify(option.data || {});
+            xhr.setRequestHeader('content-type', 'application/json');
+        }
+    }
+
+    if(option.file){
+        formData.append(option.filename, option.file, option.file.name)
+    }
+
+    if (option.withCredentials && 'withCredentials' in xhr) {
+        xhr.withCredentials = true;
+    }
+
+    const headers = option.headers || {};
+
+    Object.keys(headers).forEach(item => {
+        if (headers[item] != null) {
+            xhr.setRequestHeader(item, headers[item]);
+        }
+    });
+    xhr.send(formData);
+}
+
+
+export function asyncFetch(config, _fetch, api) {
+    return new Promise((resolve, reject) => {
+        (_fetch || fetch)({
+            ...config,
+            onSuccess(res) {
+                let fn = (v) => v;
+                const parse = parseFn(config.parse);
+                if (is.Function(parse)) {
+                    fn = parse;
+                } else if (parse && is.String(parse)) {
+                    fn = (v) => {
+                        return deepGet(v, parse);
+                    }
+                }
+                resolve(fn(res, undefined, api));
+            },
+            onError(err) {
+                reject(err);
+            }
+        })
+    });
+}

package/package-form/core/frame/formCreate.js

@@ -0,0 +1,274 @@
+import {
+    defineComponent,
+    getCurrentInstance,
+    inject,
+    markRaw,
+    nextTick,
+    onBeforeMount,
+    onBeforeUnmount,
+    onMounted,
+    onUpdated,
+    provide,
+    reactive,
+    toRefs,
+    watch, watchEffect
+} from 'vue';
+import toArray from '@bdsoft-element/utils/lib/toarray';
+import debounce from '@bdsoft-element/utils/lib/debounce';
+import toLine from '@bdsoft-element/utils/lib/toline';
+
+const getGroupInject = (vm, parent) => {
+    if (!vm || vm === parent) {
+        return;
+    }
+    if (vm.props.formCreateInject) {
+        return vm.props.formCreateInject
+    }
+    if (vm.parent) {
+        return getGroupInject(vm.parent, parent);
+    }
+}
+
+export default function $FormCreate(FormCreate, components, directives) {
+    return defineComponent({
+        name: 'FormCreate' ,
+        components,
+        directives,
+        props: {
+            rule: {
+                type: Array,
+                required: true,
+                default: () => []
+            },
+            option: {
+                type: Object,
+                default: () => ({})
+            },
+            extendOption: Boolean,
+            driver: [String, Object],
+            modelValue: Object,
+            disabled: {
+                type: Boolean,
+                default: undefined,
+            },
+            preview: {
+                type: Boolean,
+                default: undefined,
+            },
+            index: [String, Number],
+            api: Object,
+            locale: [String, Object],
+            name: String,
+            subForm: {
+                type: Boolean,
+                default: true
+            },
+            inFor: Boolean,
+        },
+        emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'reset', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync', 'reload', 'repeat-field', 'update', 'validate-field-fail', 'validate-fail', 'created'],
+        render() {
+            return this.fc.render();
+        },
+        setup(props) {
+            const vm = getCurrentInstance();
+            provide('parentFC', vm);
+            const parent = inject('parentFC', null);
+            let top = parent;
+
+            if (parent) {
+                while (top.setupState.parent) {
+                    top = top.setupState.parent;
+                }
+            } else {
+                top = vm;
+            }
+
+            const {rule, modelValue, subForm, inFor} = toRefs(props);
+
+            const data = reactive({
+                ctxInject: {},
+                destroyed: false,
+                isShow: true,
+                unique: 1,
+                renderRule: [...rule.value || []],
+                updateValue: JSON.stringify(modelValue.value || {}),
+            });
+
+            const fc = new FormCreate(vm);
+            const fapi = fc.api();
+
+            const isMore = inFor.value;
+
+            const addSubForm = () => {
+                if (parent) {
+                    const inject = getGroupInject(vm, parent);
+                    if (inject) {
+                        let sub;
+                        if (isMore) {
+                            sub = toArray(inject.getSubForm());
+                            sub.push(fapi);
+
+                        } else {
+                            sub = fapi;
+                        }
+                        inject.subForm(sub);
+                    }
+                }
+            };
+
+            const rmSubForm = () => {
+                const inject = getGroupInject(vm, parent);
+                if (inject) {
+                    if (isMore) {
+                        const sub = toArray(inject.getSubForm());
+                        const idx = sub.indexOf(fapi);
+                        if (idx > -1) {
+                            sub.splice(idx, 1);
+                        }
+                    } else {
+                        inject.subForm();
+                    }
+                }
+            };
+
+            let styleEl = null;
+
+            onBeforeMount(() => {
+                watchEffect(() => {
+                    let content = '';
+                    const globalClass = (props.option && props.option.globalClass) || {};
+                    Object.keys(globalClass).forEach(k => {
+                        let subCss = '';
+                        globalClass[k].style && Object.keys(globalClass[k].style).forEach(key => {
+                            subCss += toLine(key) + ':' + globalClass[k].style[key] + ';';
+                        });
+                        if (globalClass[k].content) {
+                            subCss += globalClass[k].content + ';';
+                        }
+                        if (subCss) {
+                            content += `.${k}{${subCss}}`;
+                        }
+                    });
+                    if (props.option && props.option.style) {
+                        content += props.option.style;
+                    }
+                    if (!styleEl) {
+                        styleEl = document.createElement('style');
+                        styleEl.type = 'text/css';
+                        document.head.appendChild(styleEl);
+                    }
+                    styleEl.innerHTML = content || '';
+                })
+            });
+
+            const emit$topForm = debounce(() => {
+                fc.bus.$emit('$loadData.$topForm');
+            }, 100);
+
+            const emit$form = debounce(() => {
+                fc.bus.$emit('$loadData.$form');
+            }, 100);
+
+            const emit$change = (field) => {
+                fc.bus.$emit('change-$form.' + field);
+            };
+
+            onMounted(() => {
+                if (parent) {
+                    fapi.top.bus.$on('$loadData.$form', emit$topForm);
+                    fapi.top.bus.$on('change', emit$change);
+                }
+                fc.mounted();
+            });
+
+            onBeforeUnmount(() => {
+                if (parent) {
+                    fapi.top.bus.$off('$loadData.$form', emit$topForm);
+                    fapi.top.bus.$off('change', emit$change);
+                }
+                styleEl && document.head.removeChild(styleEl);
+                rmSubForm();
+                data.destroyed = true;
+                fc.unmount();
+            })
+
+            onUpdated(() => {
+                fc.updated();
+            });
+
+            watch(subForm, (n) => {
+                n ? addSubForm() : rmSubForm();
+            }, {immediate: true});
+
+            watch(() => [...rule.value], (n) => {
+                if (fc.$handle.isBreakWatch() || n.length === data.renderRule.length && n.every(v => data.renderRule.indexOf(v) > -1)) return;
+                fc.$handle.updateAppendData();
+                fc.$handle.reloadRule(rule.value);
+                vm.setupState.renderRule();
+            })
+
+            watch(() => props.option, () => {
+                fc.initOptions();
+                fapi.refresh();
+            }, {deep: true});
+
+            watch(() => [props.disabled, props.preview], () => {
+                fapi.refresh();
+            });
+
+            watch(modelValue, (n) => {
+                if (JSON.stringify(n || {}) === data.updateValue) return;
+                if (fapi.config.forceCoverValue) {
+                    fapi.coverValue(n || {});
+                } else {
+                    fapi.setValue(n || {});
+                }
+            }, {deep: true, flush: 'post'});
+
+            watch(() => props.index, () => {
+                fapi.coverValue({});
+                fc.$handle.updateAppendData();
+                nextTick(() => {
+                    nextTick(() => {
+                        fapi.clearValidateState();
+                    });
+                });
+            }, {flush: 'sync'});
+
+            return {
+                fc: markRaw(fc),
+                parent: parent ? markRaw(parent) : parent,
+                top: markRaw(top),
+                fapi: markRaw(fapi),
+                ...toRefs(data),
+                getGroupInject: () => getGroupInject(vm, parent),
+                refresh() {
+                    ++data.unique;
+                },
+                renderRule() {
+                    data.renderRule = [...rule.value || []];
+                },
+                updateValue(value) {
+                    if (data.destroyed) return;
+                    const json = JSON.stringify(value);
+                    if (data.updateValue === json) {
+                        return;
+                    }
+                    data.updateValue = json;
+                    vm.emit('update:modelValue', value);
+                    nextTick(() => {
+                        emit$form();
+                        if (!parent) {
+                            emit$topForm();
+                        }
+                    });
+                }
+            }
+        },
+        created() {
+            const vm = getCurrentInstance();
+            vm.emit('update:api', vm.setupState.fapi);
+            vm.setupState.fc.init();
+        },
+    })
+}