init

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

@@ -0,0 +1,167 @@
+<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>