fix: 预览模式下脚本不可用的异常 #75

examples/pages/Preview.vue

@@ -19,6 +19,7 @@ dataState.loadPlugins([QuickDataPlugin, RestDataPlugin])
 
 onMounted(async () => {
   const snapshot = await snapShotState.latestRecord()
+  console.log(snapshot)
   if (snapshot) {
     viewer.value!.setLayoutData({
       canvasData: snapshot.canvasData as ComponentDataType[],

src/designer/Pane/RightSideBar/DataModule/DataAttr.tsx

@@ -171,7 +171,8 @@ export default defineComponent({
       }
     }
     return () =>
-      props.curComponent.dataMode === DataMode.UNIVERSAL ? (
+      props.curComponent.dataMode ||
+      props.curComponent.dataIntegrationMode === DataMode.UNIVERSAL ? (
         renderContainer()
       ) : (
         <NDescriptions>

src/designer/state/scripts.ts

@@ -1,12 +1,15 @@
+import type { BaseScript } from 'open-data-v/scripts'
 import CustomScriptPlugin from 'open-data-v/scripts/custom'
 import SystemScriptPlugin from 'open-data-v/scripts/system'
 import { reactive } from 'vue'
 
+type ScriptHandler = { new (key: string, ...args: any): BaseScript }
+
 interface ScriptPlugin {
   type: string
   name: string
   component: any
-  handler: any
+  handler: ScriptHandler
 }
 
 class ScriptState {

src/designer/utils.ts

@@ -45,8 +45,8 @@ const buildAfterCallback = (componentObj: CustomComponent, script?: ScriptOption
   if (!plugin) {
     return
   }
-  const scriptHandler = plugin.handler
-
+  const scriptHandlerClasss = plugin.handler
+  const scriptHandler = new scriptHandlerClasss(script.key)
   componentObj.afterCallbackChange(scriptHandler)
 }
 export function createComponent(component: ComponentDataType): any {
@@ -59,7 +59,7 @@ export function createComponent(component: ComponentDataType): any {
   obj.setStyleValue({ style: component.style })
   obj.dataMode = component.dataMode || DataMode.SELF
   const data = component.data
-  if (obj.dataMode === DataMode.UNIVERSAL) {
+  if (obj.dataMode || obj.dataIntegrationMode === DataMode.UNIVERSAL) {
     buildDataHandler(obj, data)
   }
   buildAfterCallback(obj, component.script)

src/models/component.ts

@@ -34,6 +34,10 @@ export class CustomComponent {
   show = true
   active = false
   dataMode: DataMode = DataMode.SELF
+  /**
+   * @deprecated dataIntegrationMode 即将弃用，建议使用 dataMode
+   */
+  dataIntegrationMode: DataMode = DataMode.SELF
   callbackProp?: (propKeys: Array<string>, value: any) => void
   callbackStyle?: (propKeys: Array<string>, value: any) => void
   callbackData?: (result: any, type?: string) => void
@@ -76,7 +80,7 @@ export class CustomComponent {
     }
     this.positionStyle.width = detail.width || 100
     this.positionStyle.height = detail.height || 100
-    this.dataMode = detail.dataMode || DataMode.SELF
+    this.dataMode = detail.dataMode || detail.dataIntegrationMode || DataMode.SELF
   }
 
   get propFromValue(): MetaContainerItem[] {
@@ -237,7 +241,7 @@ export class CustomComponent {
       propValue: this.propValue,
       style: this.style,
       subComponents: subComponents.length > 0 ? subComponents : undefined,
-      dataMode: this.dataMode,
+      dataMode: this.dataMode || this.dataIntegrationMode,
       script: this.scriptConfig?.toJSON()
     }
     if (this.dataConfig) {
@@ -382,10 +386,13 @@ export class CustomComponent {
     this.componentDataCallback = callback
     this.callbackData = this.buildDataCallback()
     const { dataInstance } = this.dataConfig || {}
-    if (dataInstance && dataInstance.close) {
+    if (!dataInstance) {
+      return
+    }
+    if (dataInstance.close) {
       dataInstance.close()
-      dataInstance.connect!(this.callbackData)
     }
+    dataInstance.connect!(this.callbackData)
   }
 
   buildDataCallback() {

src/models/type.ts

@@ -138,6 +138,10 @@ export interface ComponentType extends Pick<ComponentDataType, 'component' | 'na
   width?: number
   height?: number
   dataMode?: DataMode
+  /**
+   * deprecated: 即将废弃，请使用 dataMode 属性
+   */
+  dataIntegrationMode?: DataMode
 }
 interface CustomContainerProps {
   componentType: string | ConcreteComponent