解决 crud 模块下实例组件无法渲染问题

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "front-next",
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"scripts": {
 		"dev": "vite",
 		"build": "vue-tsc --noEmit --skipLibCheck && vite build",

src/cool/modules/base/types/index.d.ts

@@ -1,17 +1,17 @@
-export interface Token {
+export declare interface Token {
 	expire: number;
 	refreshExpire: number;
 	refreshToken: string;
 	token: string;
 }
 
-export enum MenuType {
+export declare enum MenuType {
 	"目录" = 0,
 	"菜单" = 1,
 	"权限" = 2
 }
 
-export interface MenuItem {
+export declare interface MenuItem {
 	id: number;
 	parentId: number;
 	path: string;

src/cool/modules/crud/types/adv-search.d.ts

@@ -1,3 +1,3 @@
 import { FormItem } from "./form";
 
-export type AdvSearchItem = FormItem;
+export declare type AdvSearchItem = FormItem;

src/cool/modules/crud/types/browser.d.ts

@@ -1,4 +1,4 @@
-export type Browser = {
+export declare type Browser = {
 	screen: string;
 	isMini: boolean;
 };

src/cool/modules/crud/types/context-menu.d.ts

@@ -1,4 +1,4 @@
-export interface ContextMenuItem {
+export declare interface ContextMenuItem {
 	label: string;
 	"prefix-icon"?: string;
 	"suffix-icon"?: string;
@@ -10,6 +10,6 @@ export interface ContextMenuItem {
 	callback?(item: ContextMenuItem, done: Function): void;
 }
 
-export interface ContextMenuOptions {
+export declare interface ContextMenuOptions {
 	list?: ContextMenuItem[];
 }

src/cool/modules/crud/types/crud.d.ts

@@ -1,8 +1,8 @@
 import { TableOptions } from "./table";
 
-export type ServiceName = "page" | "list" | "add" | "delete" | "update" | "info" | string;
+export declare type ServiceName = "page" | "list" | "add" | "delete" | "update" | "info" | string;
 
-export interface Service {
+export declare interface Service {
 	page?(
 		params?: any
 	): Promise<{
@@ -20,7 +20,7 @@ export interface Service {
 	info?(params: any): Promise<any>;
 }
 
-export interface Dict {
+export declare interface Dict {
 	api: {
 		list: string;
 		add: string;
@@ -53,7 +53,7 @@ export interface Dict {
 	};
 }
 
-export interface Permission {
+export declare interface Permission {
 	page?: boolean;
 	list?: boolean;
 	add?: boolean;
@@ -62,23 +62,23 @@ export interface Permission {
 	info?: boolean;
 }
 
-interface LoadCtx {
+declare interface LoadCtx {
 	service(s: Service): LoadCtx;
 	permission(p: Function | any): LoadCtx;
 	set(key: "dict" | "style", value: any): LoadCtx;
 	done(): void;
 }
 
-interface LoadApp {
+declare interface LoadApp {
 	refresh(params?: any): Promise<any>;
 }
 
-export interface CrudLoad {
+export declare interface CrudLoad {
 	app: LoadApp;
 	ctx: LoadCtx;
 }
 
-export interface CrudRef {
+export declare interface CrudRef {
 	getPermission(key?: string): boolean;
 	rowAdd(): any;
 	rowEdit(data: any): any;
@@ -90,7 +90,7 @@ export interface CrudRef {
 	refresh(params?: any): void;
 }
 
-export interface Crud extends CrudRef {
+export declare interface Crud extends CrudRef {
 	crudRef: any;
 	permission: Permission;
 	service: any;
@@ -101,7 +101,7 @@ export interface Crud extends CrudRef {
 	loading: boolean;
 }
 
-export interface Mitt {
+export declare interface Mitt {
 	on(name: string, ...args: any[]): void;
 	emit(name: string, ...args: any[]): void;
 	off(name: string, ...args: any[]): void;

src/cool/modules/crud/types/form.d.ts

@@ -1,6 +1,6 @@
 import { RenderOptions } from "./render";
 
-export interface FormItem {
+export declare interface FormItem {
 	type?: "tabs" | string;
 	prop?: string;
 	props?: {
@@ -23,16 +23,28 @@ export interface FormItem {
 	append?: RenderOptions;
 	rules?: any;
 }
-export interface Form {
+
+declare interface FormOpenEvent {
+	close(): void;
+	submit(): void;
+	done(): void;
+}
+
+declare interface FormSubmitEvent {
+	done(): void;
+	close(): void;
+}
+
+export declare interface Form {
 	title?: string;
 	width?: string;
 	props?: any;
 	items: Array<FormItem>;
 	form?: any;
 	on?: {
-		open?(form: any, { close, submit, done }: any): void;
+		open?(form: any, event: FormOpenEvent): void;
 		close?(done: Function): void;
-		submit?(data: any, { done, close }: any): void;
+		submit?(data: any, event: FormSubmitEvent): void;
 	};
 	op?: {
 		hidden?: boolean;
@@ -48,7 +60,7 @@ export interface Form {
 	_data?: any;
 }
 
-export interface FormRef {
+export declare interface FormRef {
 	create(options: Form): FormRef;
 	open(options: Form): FormRef;
 	close(): void;

src/cool/modules/crud/types/op.d.ts

@@ -1,4 +1,4 @@
-export interface RefreshOp {
+export declare interface RefreshOp {
 	/**
 	 * 渲染
 	 * @param list 数据列表
@@ -18,11 +18,11 @@ export interface RefreshOp {
 	done(): void;
 }
 
-export interface DeleteOp {
+export declare interface DeleteOp {
 	next(params?: any): Promise<any>;
 }
 
-export interface UpsertOpenOp {
+export declare interface UpsertOpenOp {
 	/**
 	 * 提交表单
 	 * @param form 表单值
@@ -40,14 +40,14 @@ export interface UpsertOpenOp {
 	close(): void;
 }
 
-export interface UpsertCloseOp {
+export declare interface UpsertCloseOp {
 	/**
 	 * 关闭弹窗
 	 */
 	done(): void;
 }
 
-export interface UpsertInfoOp {
+export declare interface UpsertInfoOp {
 	/**
 	 * 继续执行获取详情
 	 * @param params 请求参数
@@ -65,7 +65,7 @@ export interface UpsertInfoOp {
 	close(): void;
 }
 
-export interface UpsertSubmitOp {
+export declare interface UpsertSubmitOp {
 	/**
 	 * 继续执行提交
 	 * @param params 请求参数
@@ -83,7 +83,7 @@ export interface UpsertSubmitOp {
 	close(): void;
 }
 
-export interface AdvOpenOp {
+export declare interface AdvOpenOp {
 	/**
 	 * 继续执行打开
 	 * @param data 筛选参数
@@ -91,14 +91,14 @@ export interface AdvOpenOp {
 	next(data: any): Promise<any>;
 }
 
-export interface AdvCloseOp {
+export declare interface AdvCloseOp {
 	/**
 	 * 关闭抽屉
 	 */
 	done(): void;
 }
 
-export interface AdvSearchOp {
+export declare interface AdvSearchOp {
 	/**
 	 * 继续执行搜索
 	 * @param params 请求参数

src/cool/modules/crud/types/query.d.ts

@@ -1,4 +1,4 @@
-export interface QueryList {
+export declare interface QueryList {
 	label: string;
 	value: any;
 }

src/cool/modules/crud/types/render.d.ts

@@ -1,6 +1,6 @@
 import { ComponentOptions } from "vue";
 
-export interface Options extends ComponentOptions {
+export declare interface Options extends ComponentOptions {
 	name: string;
 
 	options?: Array<{
@@ -9,4 +9,4 @@ export interface Options extends ComponentOptions {
 	}>;
 }
 
-export type RenderOptions = Options | Function;
+export declare type RenderOptions = Options | Function;

src/cool/modules/crud/types/table.d.ts

@@ -1,7 +1,7 @@
 import { ContextMenuItem } from "./context-menu";
 import { RenderOptions } from "./render";
 
-export interface TableOptions {
+export declare interface TableOptions {
 	"context-menu"?:
 		| boolean
 		| Array<
@@ -16,7 +16,7 @@ export interface TableOptions {
 		  >;
 }
 
-export interface TableColumn {
+export declare interface TableColumn {
 	value?: any;
 	type?: "index" | "selection" | "expand" | "op";
 	hidden?: boolean | (({ scope }: any) => boolean);
@@ -60,7 +60,7 @@ export interface TableColumn {
 	sortOrders?: unknown[];
 }
 
-export interface Table extends TableOptions {
+export declare interface Table extends TableOptions {
 	props?: {};
 	columns: TableColumn[];
 }

src/cool/modules/crud/types/upsert.d.ts

@@ -1,7 +1,7 @@
 import { Form, FormItem, FormRef } from "./form";
 
-export type UpsertItem = FormItem;
+export declare type UpsertItem = FormItem;
 
-export type UpsertRef = FormRef;
+export declare type UpsertRef = FormRef;
 
-export type Upsert = Form;
+export declare type Upsert = Form;

src/cool/modules/crud/utils/vnode.tsx

@@ -1,6 +1,9 @@
-import { h, resolveComponent } from "vue";
+// @ts-nocheck
+import { h, resolveComponent, toRaw } from "vue";
 import { isFunction, isString, isObject } from "./index";
 
+const Regs: string[] = [];
+
 /**
  * 解析节点
  * @param {*} vnode
@@ -20,11 +23,21 @@ function parseNode(vnode: any, options: any) {
 		}
 	}
 
+	// 是否全局注册
+	let isReg: boolean = Regs.includes(vnode.name);
+
+	// 实例模式下，先注册到全局，再分解组件渲染
+	if (vnode.__file && !isReg) {
+		window.__app__.component(vnode.name, vnode);
+		isReg = true;
+		Regs.push(vnode.name);
+	}
+
 	// 组件参数
 	const props = {
+		...vnode.props,
 		...vnode,
 		...vnode.attrs,
-		...vnode.props,
 		scope
 	};
 
@@ -40,12 +53,11 @@ function parseNode(vnode: any, options: any) {
 	}
 
 	// 组件实例渲染
-	if (props.render) {
+	if (props.render && !isReg) {
 		return h(props, props);
 	}
 
-	// @ts-ignore
-	return h(resolveComponent(vnode.name), props, {
+	return h(toRaw(resolveComponent(vnode.name)), props, {
 		default: () => {
 			return vnode._children;
 		}

src/cool/modules/demo/components/crud/form.vue

@@ -84,6 +84,8 @@ export default defineComponent({
 			},
 			{
 				label: ".vue 组件",
+				value: 10,
+				prop: "vue",
 				component: Test
 			},
 			{

src/main.ts

@@ -40,3 +40,6 @@ bootstrap(app)
 	});
 
 store.dispatch("appLoad");
+
+// @ts-ignore
+window.__app__ = app;