school-developer/src/flow/components/form-create/designer.vue

<template>
    <div :class="!props.layoutPadding ? '' : 'layout-padding'">
        <div :class="!props.layoutPadding ? '' : 'layout-padding-auto layout-padding-view'">
            <fc-designer ref="designer" height="100vh" :config="config.designer" :handle="config.handle" @save="props.saveFormInfo"/>
        </div>
    </div>
</template>

<script setup lang="ts" name="FlowForm">
    import FcDesigner from 'form-create-designer';
    import type { Config, DragRule } from 'form-create-designer';
    import ZhCn from 'form-create-designer/src/locale/zh-cn';
    import En from 'form-create-designer/src/locale/en';
    import {Local} from '/@/utils/storage';
    import { rules } from './rules';
    import {useI18n} from "vue-i18n"
    import {validateNull} from "/@/utils/validate";
    import {useUserInfo} from "/@/stores/userInfo";
    import {deepClone} from "/@/utils/other";
    import {notifyLeft} from "../../index";
    import {initFcDesignerFetch} from "./api";

    const {t} = useI18n();
    const {proxy} = getCurrentInstance();
    const props = defineProps({
        currFlowForm: {
            type: Object,
            default: null,
        },
        layoutPadding:  {
            type: Boolean,
            default: true,
        },
        showSaveBtn:  {
            type: Boolean,
            default: false,
        },
        saveFormInfo:  {
            type: Function,
            default: null,
        },
    });

    // 组件引用
    const designer = ref<InstanceType<typeof FcDesigner> | null>(null);

    // 设计器配置
    const config = {
        designer: {
            fieldReadonly: false, // 字段是否只读
            showSaveBtn: props.showSaveBtn,
        },
        handle: [
            {
                label: '中英切换',
                handle: () => {
                    changeLocale();
                },
            },
        ],
        locale: null,
    }

    function changeLocale(isInit?) {
        if (!isInit) {
            if (config.locale === En) {
                config.locale = ZhCn;
            } else {
                config.locale = En;
            }
        } else {
            // 语言
            let globalI18n = Local.get('themeConfig').globalI18n;
            if (globalI18n === 'en') {
                config.locale = En;
            } else {
                config.locale = ZhCn;
            }
        }
        FcDesigner.useLocale(config.locale);
    }

    const methods = {
        syncCurrFlowForm() {
            // 保存表单
            let json = designer.value.getRule()
            if (validateNull(json)) props.currFlowForm.formInfo = null
            else {
                let options = designer.value.getOptions()
                options.widgetList = json
                props.currFlowForm.formInfo = options
            }
        },
        handleSubmit(callback, isNotify) {
            methods.syncCurrFlowForm()
            let json = props.currFlowForm.formInfo
            if (validateNull(json)) {
                if (isNotify) notifyLeft('表单设计请添加组件', 'warning')
                return false
            }
            props.currFlowForm.formDesign = true
            if (callback) callback()
            return true
        }
    }

    const data = reactive({
        globalDsv: {
            type: Object,
            default: {},
        }
    });

    function initFcDesigner() {
        designer.value.addMenu({ name: 'biz', title: '业务组件', list: []});
        // Add all rules at once
        rules.forEach((rule) => {
            designer.value?.addComponent(rule as DragRule);
        });

        initFcDesignerFetch(designer.value, null, data.globalDsv)
        changeLocale(true);
    }

    function getFormInfo() {
        initFcDesigner()
        data.globalDsv.userInfos = useUserInfo().userInfos
        let formInfo = deepClone(props.currFlowForm.formInfo)
        if (validateNull(formInfo)) {
            designer.value.setRule([]);
            return
        }
        designer.value.setRule(formInfo.widgetList);
        delete formInfo.widgetList
        designer.value.setOptions(formInfo);
    }

    onMounted(() => {
        nextTick(() => {
            getFormInfo();
        })
    });

    // 暴露变量
    defineExpose({
        handleSubmit: methods.handleSubmit
    });
</script>

<style lang="scss">
  .fc-form-row {
    // 选中效果
    ._fd-drag-tool.active {
      outline: 2px solid #2e73ff !important;
    }
    // 栅格线条
    ._fd-drag-tool {
      outline: 1px dashed var(--fc-tool-border-color)!important;
    }
  }
  // 设置事件样式
  ._fd-event-l {
    .el-menu-item {
      line-height: 1em!important;
    }
  }
</style>