vue#provide JavaScript Examples

provideClients = () => {
    const state = reactive({
        clients: []
    });
    provide(provideClientsKey, state);

    setInterval(() => {
        if (websocketState.connected) {
            getClients().then((res) => {
                res.forEach(c => {
                    c.udpConnectType = c.UdpConnected ? c.UdpConnectType : Number(c.UdpConnected);
                    c.tcpConnectType = c.TcpConnected ? c.TcpConnectType : Number(c.TcpConnected);

                    c.udpConnectTypeStr = connectTypeStrs[c.udpConnectType];
                    c.udpConnectTypeStyle = connectTypeColors[c.udpConnectType];

                    c.tcpConnectTypeStr = connectTypeStrs[c.tcpConnectType];
                    c.tcpConnectTypeStyle = connectTypeColors[c.tcpConnectType];
                });
                state.clients = res;
            })
        } else {
            state.clients = [];
        }
    }, 1000);
}

provideWebsocket = () => {
    const state = reactive({
        connected: false
    });
    provide(provideWebsocketKey, state);

    subWebsocketState((connected) => {
        state.connected = connected;
    });
}

provideRegister = () => {
    const state = reactive({
        ClientConfig: {
            GroupId: '',
            Name: '',
            AutoReg: false,
            UseMac: false,
            Encode: false
        },
        ServerConfig: {
            Ip: '',
            UdpPort: 0,
            TcpPort: 0,
            Encode: false
        },
        LocalInfo: {
            RouteLevel: 0,
            Mac: '',
            Port: 0,
            TcpPort: 0,
            IsConnecting: false,
            UdpConnected: false,
            TcpConnected: false,
            LocalIp: ''
        },
        RemoteInfo: {
            Ip: '',
            UdpPort: 0,
            TcpPort: 0,
            ConnectId: 0,
        }
    });
    provide(provideRegisterKey, state);

    setInterval(() => {
        if (websocketState.connected) {
            getRegisterInfo().then((json) => {
                state.LocalInfo.UdpConnected = json.LocalInfo.UdpConnected;
                state.LocalInfo.TcpConnected = json.LocalInfo.TcpConnected;
                state.LocalInfo.UdpPort = json.LocalInfo.UdpPort;
                state.LocalInfo.TcpPort = json.LocalInfo.TcpPort;
                state.LocalInfo.Mac = json.LocalInfo.Mac;
                state.LocalInfo.LocalIp = json.LocalInfo.LocalIp;

                state.RemoteInfo.UdpPort = json.RemoteInfo.UdpPort;
                state.RemoteInfo.TcpPort = json.RemoteInfo.TcpPort;
                state.RemoteInfo.Ip = json.RemoteInfo.Ip;
                state.RemoteInfo.ConnectId = json.RemoteInfo.ConnectId;

                state.LocalInfo.IsConnecting = json.LocalInfo.IsConnecting;
                state.LocalInfo.RouteLevel = json.LocalInfo.RouteLevel;
                if (!state.ClientConfig.GroupId) {
                    state.ClientConfig.GroupId = json.ClientConfig.GroupId;
                }
                if (!state.ServerConfig.Ip) {
                    state.ServerConfig.Ip = json.ServerConfig.Ip;
                    state.ServerConfig.UdpPort = json.ServerConfig.UdpPort;
                    state.ServerConfig.TcpPort = json.ServerConfig.TcpPort;
                }
            })
        } else {
            state.UdpConnected = false;
            state.TcpConnected = false;
        }
    }, 300);
}

provideShareData = () => {
    const state = reactive({
        aliveTypes: { 1: '长连接', 2: '短链接' },
        tunnelTypes: { 2: '只tcp', 4: '只udp', 8: '优先tcp', 16: '优先udp' },
    });
    provide(shareDataKey, state);
}

provideFilesData = () => {
    const state = reactive({
        clientId: null,
        locals: [],
        remotes: []
    });
    provide(provideFilesDataKey, state);
}

provideRegister = () => {
    const state = reactive({
        ClientConfig: {
            GroupId: '',
            Name: '',
            AutoReg: false,
            UseMac: false,
        },
        ServerConfig: {
            Ip: '',
            UdpPort: 0,
            TcpPort: 0,
        },
        LocalInfo: {
            RouteLevel: 0,
            Mac: '',
            Port: 0,
            TcpPort: 0,
            IsConnecting: false,
            UdpConnected: false,
            TcpConnected: false,
            LocalIp: ''
        },
        RemoteInfo: {
            Ip: '',
            UdpPort: 0,
            TcpPort: 0,
            ConnectId: 0,
        }
    });
    provide(provideRegisterKey, state);

    setInterval(() => {
        if (websocketState.connected) {
            getRegisterInfo().then((json) => {
                state.LocalInfo.UdpConnected = json.LocalInfo.UdpConnected;
                state.LocalInfo.TcpConnected = json.LocalInfo.TcpConnected;
                state.LocalInfo.UdpPort = json.LocalInfo.UdpPort;
                state.LocalInfo.TcpPort = json.LocalInfo.TcpPort;
                state.LocalInfo.Mac = json.LocalInfo.Mac;
                state.LocalInfo.LocalIp = json.LocalInfo.LocalIp;

                state.RemoteInfo.UdpPort = json.RemoteInfo.UdpPort;
                state.RemoteInfo.TcpPort = json.RemoteInfo.TcpPort;
                state.RemoteInfo.Ip = json.RemoteInfo.Ip;
                state.RemoteInfo.ConnectId = json.RemoteInfo.ConnectId;

                state.LocalInfo.IsConnecting = json.LocalInfo.IsConnecting;
                state.LocalInfo.RouteLevel = json.LocalInfo.RouteLevel;
                if (!state.ClientConfig.GroupId) {

                    state.ClientConfig.GroupId = json.ClientConfig.GroupId;
                }
            })
        } else {
            state.UdpConnected = false;
            state.TcpConnected = false;
        }
    }, 300);
}

export default function createForm(globalOptions = {}) {
    const Form = {
        name: 'VueForm',
        props: vueProps,
        emits: ['update:modelValue', 'change', 'cancel', 'submit', 'validation-failed', 'form-mounted'],
        setup(props, { slots, emit }) {
            // global components
            const internalInstance = getCurrentInstance();
            if (!Form.installed && globalOptions.WIDGET_MAP.widgetComponents) {
                Object.entries(globalOptions.WIDGET_MAP.widgetComponents).forEach(
                    ([componentName, component]) => internalInstance.appContext.app.component(componentName, component)
                );

                // 只注册一次
                Form.installed = true;
            }

            // 使用provide 传递跨组件数据
            provide('genFormProvide', computed(() => ({
                fallbackLabel: props.fallbackLabel
            })));

            // rootFormData
            const rootFormData = ref(getDefaultFormState(props.schema, props.modelValue, props.schema, props.strictMode));
            const footerParams = computed(() => ({
                show: true,
                okBtn: '保存',
                okBtnProps: {},
                cancelBtn: '取消',
                ...props.formFooter
            }));

            // form组件实例，不需要响应式
            let formRef = null;

            // 更新formData
            const emitFormDataChange = (newValue, oldValue) => {
                // 支持v-model ，引用类型
                emit('update:modelValue', newValue);

                // change 事件，引用类型修改属性 newValue
                emit('change', {
                    newValue,
                    oldValue
                });
            };

            // 更新props
            const willReceiveProps = (newVal, oldVal) => {
                if (!deepEquals(newVal, oldVal)) {
                    const tempVal = getDefaultFormState(props.schema, props.modelValue, props.schema, props.strictMode);
                    if (!deepEquals(rootFormData.value, tempVal)) {
                        rootFormData.value = tempVal;
                    }
                }
            };

            // emit v-model，同步值
            watch(rootFormData, (newValue, oldValue) => {
                emitFormDataChange(newValue, oldValue);
            }, {
                deep: true
            });

            // schema 被重新赋值
            watch(() => props.schema, (newVal, oldVal) => {
                willReceiveProps(newVal, oldVal);
            });

            // model value 变更
            watch(() => props.modelValue, (newVal, oldVal) => {
                willReceiveProps(newVal, oldVal);
            });

            // 保持v-model双向数据及时性
            emitFormDataChange(rootFormData.value, props.modelValue);

            const getDefaultSlot = () => {
                if (slots.default) {
                    return slots.default({
                        formData: rootFormData,
                        formRefFn: () => formRef
                    });
                }

                if (footerParams.value.show) {
                    return h(FormFooter, {
                        globalOptions,
                        okBtn: footerParams.value.okBtn,
                        okBtnProps: footerParams.value.okBtnProps,
                        cancelBtn: footerParams.value.cancelBtn,
                        formItemAttrs: footerParams.value.formItemAttrs,
                        onCancel() {
                            emit('cancel');
                        },
                        onSubmit() {
                            // 优先获取组件 $$validate 方法，方便对 validate方法转换
                            (formRef.$$validate || formRef.validate)((isValid, resData) => {
                                if (isValid) {
                                    return emit('submit', rootFormData);
                                }
                                console.warn(resData);
                                return emit('validation-failed', resData);
                            });
                        }
                    });
                }

                return [];
            };

            return () => {
                const {
                    // eslint-disable-next-line no-unused-vars
                    layoutColumn = 1, inlineFooter, labelSuffix, isMiniDes, defaultSelectFirstOption, ...uiFormProps
                } = props.formProps;

                const { inline = false, labelPosition = 'top' } = uiFormProps;

                const schemaProps = {
                    schema: props.schema,
                    uiSchema: props.uiSchema,
                    errorSchema: props.errorSchema,
                    customFormats: props.customFormats,
                    customRule: props.customRule,
                    rootSchema: props.schema,
                    rootFormData: rootFormData.value, // 根节点的数据
                    curNodePath: '', // 当前节点路径
                    globalOptions, // 全局配置，差异化ui框架
                    formProps: {
                        labelPosition,
                        labelSuffix: '：',
                        defaultSelectFirstOption: true,
                        inline,
                        ...props.formProps
                    }
                };

                return h(
                    resolveComponent(globalOptions.COMPONENT_MAP.form),
                    {
                        class: {
                            genFromComponent: true,
                            formInlineFooter: inlineFooter,
                            formInline: inline,
                            [`genFromComponent_${props.schema.id}Form`]: !!props.schema.id,
                            layoutColumn: !inline,
                            [`layoutColumn-${layoutColumn}`]: !inline
                        },
                        setFormRef: (form) => {
                            formRef = form;
                            internalInstance.ctx.$$uiFormRef = formRef;

                            emit('form-mounted', form, {
                                formData: rootFormData.value
                            });
                        },
                        // 阻止form默认submit
                        onSubmit(e) {
                            e.preventDefault();
                        },
                        model: rootFormData,
                        labelPosition,
                        inline,
                        ...uiFormProps
                    },
                    {
                        default: () => [
                            h(
                                SchemaField,
                                schemaProps
                            ),
                            getDefaultSlot(),
                        ]
                    }
                );
            };
        },
    };

    Form.install = (vueApp, options = {}) => {
        vueApp.component(options.name || Form.name, Form);
    };

    return Form;
}