|
|
@@ -2,7 +2,7 @@
|
|
|
<script setup lang="ts">
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
import type { Config, Handle } from '@form-create/designer'
|
|
|
-import { formConfig } from './form.config.ts'
|
|
|
+import { formConfig, formSubmitSave } from './form.config.ts'
|
|
|
import FcDesigner from '@form-create/designer'
|
|
|
// 组件
|
|
|
import { RcSelect } from './plugins/components/rc-select.config.ts'
|
|
|
@@ -12,7 +12,8 @@ import { RcCheckbox } from './plugins/components/rc-checkbox.config.ts'
|
|
|
import { MenuOptions } from './plugins/menu/options.ts'
|
|
|
|
|
|
import type { FcDesignerInstance } from '@form-create/designer' // 注册组件
|
|
|
-import type { Rule } from '@form-create/element-ui'
|
|
|
+import type { Options, Rule } from '@form-create/element-ui'
|
|
|
+import type { Option } from './components/rc-options/createOptions.ts'
|
|
|
|
|
|
/**
|
|
|
* @see https://view.form-create.com/methods
|
|
|
@@ -25,7 +26,7 @@ declare global {
|
|
|
} // 事件中心
|
|
|
__QIANKUN__REQUSET__: any // 请求API接口
|
|
|
__QIANKUN__GUID__: () => string // 获取唯一标识
|
|
|
- __QIANKUN__OPEN__TAG__: () => void // 打开标签页
|
|
|
+ __QIANKUN__OPEN__TAG__: (tags: Option['tags']) => void // 打开标签页
|
|
|
__QIANKUN__QUITE__: () => void // 返回页面
|
|
|
}
|
|
|
}
|
|
|
@@ -39,26 +40,33 @@ 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
|
|
|
- // 接收从主应用过来的事件
|
|
|
- window.__QIANKUN__EVENT__?.emit('save', {
|
|
|
+
|
|
|
+ formSubmitSave({
|
|
|
rule: JSON.parse(rule),
|
|
|
options: JSON.parse(options),
|
|
|
original: config,
|
|
|
+ id,
|
|
|
+ onSuccess() {
|
|
|
+ window.__QIANKUN__QUITE__()
|
|
|
+ },
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-const rule = ref(
|
|
|
- '[{"type":"rc-checkbox","title":"多选框","props":{"clearable":true,"options":[{"key":"cw_1iqn0n3e6mgc1vgp7di8as15s55","label":"123421","value":"123421","validate":false,"tags":[],"default":""}]},"_fc_id":"id_Fsbmmaeu7rtlabc","name":"ref_Finhmaeu7rtlacc","field":"Ft20maeu7rtladc","display":true,"hidden":false,"_fc_drag_tag":"rc-checkbox","options":[{"key":"cw_1iqn0n3e6mgc1vgp7di8as15s55","label":"123421","value":"123421","validate":false,"tags":[],"default":""}]},{"type":"rc-select","title":"下拉框","props":{"placeholder":"请选择","clearable":true,"options":[{"key":"cw_1iqn0n6gm1uos105812fafne1mqj6","label":"223","value":"223","validate":false,"tags":[],"default":""}]},"_fc_id":"id_Fuf6maeu7skxaec","name":"ref_Fgfdmaeu7skxafc","field":"Fgckmaeu7skxagc","display":true,"hidden":false,"_fc_drag_tag":"rc-select","options":[{"key":"cw_1iqn0n6gm1uos105812fafne1mqj6","label":"223","value":"223","validate":false,"tags":[],"default":""}],"synchronize_field":{"name":"备注名"}}]',
|
|
|
-)
|
|
|
-
|
|
|
window.__QIANKUN__EVENT__.on('formCoverChange', (cover: string) => {
|
|
|
- const newRule = JSON.parse(rule.value)
|
|
|
+ const newRule = designer.value!.getRule() as Rule[]
|
|
|
+ if (!cover) {
|
|
|
+ newRule.shift()
|
|
|
+ designer.value?.setRule(newRule)
|
|
|
+ return
|
|
|
+ }
|
|
|
const firstType = newRule[0]?.type
|
|
|
if (firstType === 'rc-image') {
|
|
|
- newRule[0].props.cover = cover
|
|
|
+ newRule[0]!.props!.cover = cover
|
|
|
} else {
|
|
|
newRule.unshift({
|
|
|
type: 'rc-image',
|
|
|
@@ -68,19 +76,29 @@ window.__QIANKUN__EVENT__.on('formCoverChange', (cover: string) => {
|
|
|
} as Rule)
|
|
|
}
|
|
|
|
|
|
- rule.value = JSON.stringify(newRule)
|
|
|
- designer.value?.setRule(rule.value) // 重新赋值
|
|
|
+ designer.value?.setRule(JSON.stringify(newRule)) // 重新赋值
|
|
|
})
|
|
|
|
|
|
onMounted(async () => {
|
|
|
+ console.log(window.__QIANKUN__EVENT__)
|
|
|
+
|
|
|
// 注册拖拽规则
|
|
|
designer.value?.addMenu(MenuOptions)
|
|
|
designer.value?.addComponent(RcSelect)
|
|
|
designer.value?.addComponent(RcRadio)
|
|
|
designer.value?.addComponent(RcCheckbox)
|
|
|
|
|
|
- // 设置拖拽规则
|
|
|
- designer.value?.setRule(rule.value)
|
|
|
+ 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>
|
|
|
|
