custom-form/src/App.vue

<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { Config, Handle } from '@form-create/designer'
import { formConfig } from './form.config.ts'
import FcDesigner from '@form-create/designer'
// 组件
import { RcSelect } from './plugins/components/rc-select.config.ts'
import { RcRadio } from './plugins/components/rc-radio.config.ts'
import { RcCheckbox } from './plugins/components/rc-checkbox.config.ts'
// 菜单
import { MenuOptions } from './plugins/menu/options.ts'
import { MenuUpload } from './plugins/menu/upload.ts'

import type { FcDesignerInstance } from '@form-create/designer' // 注册组件
import { RcUpload } from './plugins/components/rc-upload.config.ts'

/**
 * @see https://view.form-create.com/methods
 */
declare global {
  interface Window {
    __QIANKUN__EVENT__: {
      on: (name: string, fn: (...arg: any[]) => void) => void
      emit: (name: string, ...arg: any[]) => boolean
    } // 事件中心
    __QIANKUN__REQUSET__: any // 请求API接口
    __QIANKUN__GUID__: () => string // 获取唯一标识
    __QIANKUN__OPEN__TAG__: () => void // 打开标签页
    __QIANKUN__QUITE__: () => void // 返回页面
  }
}
// 表单实例
const designer = ref<FcDesignerInstance | null>(null)
const api = ref(null)
// 表单模板元素
// 判断是独立运行的还是qiankun子应用
const height = ref('100vh')
const config = ref<Config>(formConfig)
// 顶部更多操作按钮
const handle = ref<Handle>([])
// console.log('子应用', window.__QIANKUN__EVENT__)

const onSave = async (config: { options: string; rule: string }) => {
  const rule = config.rule
  const options = config.options
  // 接收从主应用过来的事件
  window.__QIANKUN__EVENT__?.emit('save', {
    rule: JSON.parse(rule),
    options: JSON.parse(options),
    original: config,
  })
}

const rule = ref(
  '[{"type":"rc-checkbox","title":"多选框","props":{"clearable":true,"options":[{"key":"cw_1iqkm6k0p1n4111p61q8g8katdn1","label":"1234","value":"1234","validate":false,"tags":[]}]},"_fc_id":"id_Fd0jmadjp53oaec","name":"ref_Fw5smadjp53oafc","field":"Fnqymadjp53oagc","display":true,"hidden":false,"_fc_drag_tag":"rc-checkbox","options":[{"key":"cw_1iqkm6k0p1n4111p61q8g8katdn1","label":"1234","value":"1234","validate":false,"tags":[]}]},{"type":"rc-radio","title":"单选框","props":{"clearable":true,"options":[{"key":"cw_1iqkm6nli1v4f8p01pn01rs715r62","label":"1234","value":"1234","validate":false,"tags":[]}]},"_fc_id":"id_Fo8imadjp7v1ahc","name":"ref_F6j0madjp7v1aic","field":"Fhyhmadjp7v1ajc","display":true,"hidden":false,"_fc_drag_tag":"rc-radio","options":[{"key":"cw_1iqkm6nli1v4f8p01pn01rs715r62","label":"1234","value":"1234","validate":false,"tags":[]}]},{"type":"rc-upload","title":"图片","props":{"clearable":true},"_fc_id":"id_Fyhlmadknfeuabc","name":"ref_Fz6bmadknfeuacc","field":"Fj86madknfeuadc","display":true,"hidden":false,"_fc_drag_tag":"rc-upload"}]',
)

onMounted(async () => {
  // 注册拖拽规则
  designer.value?.addMenu(MenuOptions)
  designer.value?.addMenu(MenuUpload)
  designer.value?.addComponent(RcSelect)
  designer.value?.addComponent(RcRadio)
  designer.value?.addComponent(RcCheckbox)
  designer.value?.addComponent(RcUpload)

  // 注册菜单
  console.log(designer.value)

  // 设置拖拽规则
  designer.value?.setRule(rule.value)
})
</script>

<template>
  <fc-designer
    ref="designer"
    :height="height"
    :handle="handle"
    :config="config"
    v-model:api="api"
    @save="onSave"
    @inputDate="
      () => {
        console.log(12313213)
      }
    "
  />
</template>