Type Script 在流程設計器的落地實踐

declare module 'vue' {
  interface ComponentCustomProperties {
	/* 定義更新當前組件ID的混入方法 */
    updateCurrentUUID: (from: string) => void
     
  }
}

export default defineComponent({
  props: {
    /** 父組件的UUID */
    parentUUID: {
      type: Object
    }
  },
  data () {
    return {
      /** 當前組件的UUID */
      currentUUID: {
        uuid: v4(),
        from: '' // 驅動來源
      },
      /** 支持的級聯更新來源 */
      supportFroms: [
        'propertyReset', // 屬性面板重置
        'ruleChange'
      ]
    }
  }, 
  methods: {
    /** 初始化資料，要求所有子組件的初始化都放到該方法內 */
    initComponentData () {
	/* 子組件資料初始化的方法 */
	},
    /** 更新當前組件UUID */
    updateCurrentUUID (from: string) {
      this.currentUUID.from = from
      this.currentUUID.uuid = v4()
    }
  },
  watch: {
    /**  */
    parentUUID: {
      handler: function (val) {
        // 如果來源在 supportFroms 集合中，才支持重新初始化
        if (this.supportFroms.indexOf(val.from) > -1) {
          this.initComponentData()
          this.$forceUpdate()
          this.$nextTick(() => {
            this.updateCurrentUUID(val.from)
          })
        }
      },
      deep: true
    }
  }
})

declare module 'vue' {
  interface ComponentCustomProperties {
    componentValidate: (data?: any) => Promise<ValidateResult>
  }
}

/**
 * 組件驗證結果
 */
export interface ValidateResult {
  /** 是否驗證通過 */
  isOk: boolean,
  /** 驗證失敗的訊息 */
  msgs?: string[]
}

export default defineComponent({
  props: {
     
  },
  data () {
    return {
      
    }
  },
  mounted () {
    const pubSub = inject<PubSub>('pubSub')
    if (pubSub) {
      unref(pubSub).on(this.currentUUID.uuid, this.componentValidate)
    }
  },
  beforeUnmount () {
    const pubSub = inject<PubSub>('pubSub')
    if (pubSub) {
      unref(pubSub).off(this.currentUUID.uuid)
    }
  },
  unmounted () {
    const pubSub = inject<PubSub>('pubSub')
    if (pubSub) {
      unref(pubSub).off(this.currentUUID.uuid)
    }
  },
  methods: {
     
    /** 組件驗證 */
    componentValidate (data?: any): Promise<ValidateResult> {
      return Promise.resolve({
        isOk: true
      })
    }
  }
})


<template>
  <div>
     
  </div>
</template>

<script lang="ts">
 
export default defineComponent({
  name: 'BaseTabView',
  mixins: [resetMixin], // 混入組件驗證模塊
  props: {
     
  },
  data () {
    return {
       
    }
  },
  setup () {
     
  },
  mounted () {
     
  },
  methods: {
    componentValidate (data?: any): Promise<ValidateResult> {
      const result: ValidateResult = {
        isOk: true,
        msgs: []
      }
      return Promise.resolve(result)
    }
  }
})
</script>


export class PubSub {
  // eslint-disable-next-line @typescript-eslint/ban-types
  handles: Map<string, Function> = new Map<string, Function>()
  /** 訂閱事件 */
  on (eventType: string, handle: any) {
    if (this.handles.has(eventType)) {
      throw new Error('重復注冊的事件')
    }
    if (!handle) {
      throw new Error('缺少回呼函式')
    }
    this.handles.set(eventType, handle)
    return this
  }

  /** 發布事件 所有事件 */
  emitAll (data?: any): Promise<any[]> {
    const result: Promise<any>[] = []
    this.handles.forEach(item => {
      // eslint-disable-next-line prefer-spread
      result.push(item.apply(null, data))
    })
    return Promise.all(result)
  }

  /** 發布事件 */
  emit (eventType: string, data?: any) {
    if (!this.handles.has(eventType)) {
      throw new Error(`"${eventType}"事件未注冊`)
    }
    const handle = this.handles.get(eventType)!
    // eslint-disable-next-line prefer-spread
    handle.apply(null, data)
  }

  /** 洗掉事件 */
  off (eventType: string) {
    this.handles.delete(eventType)
  }
}