customform/src/App.vue

<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
<!-- 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, formSubmitSave } 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'
// @ts-expect-error
import type { FcDesignerInstance } from '@form-create/designer' // 注册组件
import type { Options, Rule } from '@form-create/element-ui'
import type { Option } from './components/rc-options/createOptions.ts'
import formCreate from '@form-create/element-ui'

/**
 * @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
      off: (name: string, fn?: (...arg: any[]) => void) => void
    } // 事件中心
    __QIANKUN__REQUSET__: any // 请求API接口
    __QIANKUN__GUID__: () => string // 获取唯一标识
    __QIANKUN__OPEN__TAG__: (tags: Option['tags']) => 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>([])

let id = ''

const onSave = async (config: { options: string; rule: string }) => {
  const rule = config.rule
  const options = config.options

  formSubmitSave({
    rule: JSON.parse(rule),
    options: JSON.parse(options),
    original: config,
    id,
    onSuccess() {
      window.__QIANKUN__QUITE__()
    },
  })
}

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

  const des = designer.value
  window.__QIANKUN__EVENT__.on('formCoverChange', (cover: string) => {
    const newRule = des?.getRule() as Rule[]
    if (!cover) {
      newRule.shift()
      des?.setRule(newRule)
      return
    }
    const firstType = newRule[0]?.type
    if (firstType === 'rc-image') {
      newRule[0]!.props!.cover = cover
    } else {
      newRule.unshift({
        type: 'rc-image',
        props: {
          cover,
        },
      } as Rule)
    }

    des?.setRule(JSON.stringify(newRule)) // 重新赋值
  })
  id = location.search?.substring(1).split('=')[1] || ''
  if (!id) return

  window.__QIANKUN__REQUSET__.CustomrForm._getDetail({ id }).then(
    (res: { data: { rule: string; options: string } }) => {
      if (!res) return
      // 设置拖拽规则
      designer.value?.setRule(res.data.rule)
      designer.value?.setOptions(res.data.options as Options) // 重新赋值
    },
  )
})
</script>

<template>
  <fc-designer
    ref="designer"
    name="form"
    :height="height"
    :handle="handle"
    :config="config"
    v-model:api="api"
    @save="onSave"
  />
</template>