成人欧美一区二区三区的电影,日韩一级一欧美一级国产,国产成人国拍亚洲精品,无码人妻精品一区二区三区毛片,伊人久久无码大香线蕉综合

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

Vue 開源項(xiàng)目低代碼表單設(shè)計(jì)器FcDesigner，兼容Element Plus/Ant Design/Vant,支持PC/移動(dòng)端
freeflydom
2025年10月13日 10:49 本文熱度 914

FcDesigner 是一款基于 Vue 的低代碼可視化表單設(shè)計(jì)器工具，通過數(shù)據(jù)驅(qū)動(dòng)表單渲染。可以通過拖拽的方式快速創(chuàng)建表單，提高開發(fā)者對(duì)表單的開發(fā)效率，節(jié)省開發(fā)者的時(shí)間。并廣泛應(yīng)用于在政務(wù)系統(tǒng)、OA 系統(tǒng)、ERP 系統(tǒng)、電商系統(tǒng)、流程管理等領(lǐng)域。

源碼地址: Github | Gitee | 文檔 | 在線演示

核心功能??

  • 內(nèi)置表單多語言體系，輕松打破語言隔閡。
  • 提供 30+ 常用組件，涵蓋表單組件、布局組件、輔助類組件等各類實(shí)用模塊。
  • 支持靈活擴(kuò)展自定義組件，個(gè)性化開發(fā)輕松拿捏。支持二次擴(kuò)展開發(fā)，深度定制不在話下。
  • 支持組件樣式配置，動(dòng)態(tài)調(diào)整組件尺寸、顏色、間距等樣式屬性。
  • 支持事件交互配置，靈活配置組件事件響應(yīng)邏輯，實(shí)現(xiàn)復(fù)雜交互場景。
  • 表單大綱、操作記錄、數(shù)據(jù)錄入、組件生成、事件配置、表單驗(yàn)證、柵格布局、表格布局等。

3.3 版本更新內(nèi)容

? 新增功能:

  • 增強(qiáng)表格布局組件，支持批量操作格子樣式，清空，合并等操作，雙擊快速添加內(nèi)容，支持通過拖動(dòng)設(shè)置格子寬和高

  • 操作權(quán)限控制

    • config 增加 componentPermission 配置，可精確控制每個(gè)組件的可見配置項(xiàng)和允許的操作
    • config 增加 beforeRemoveRule 和 beforeActiveRule 回調(diào)控制組件是否可以刪除和選中
    • 拖拽規(guī)則增加 allowDragTo 配置項(xiàng)，控制當(dāng)前組件允許拖入到那些組件中
    • 拖拽規(guī)則增加 maxChildren 配置項(xiàng)，限制子組件拖入數(shù)量
    • 拖拽規(guī)則和 config 增加 checkDrag 回調(diào)控制組件是否可以拖入

  • 增加手寫簽名組件和標(biāo)題組件

  • 左右兩側(cè)板塊增加展開收齊按鈕

  • 完善快捷鍵

  • 增加 getHtml 方法，導(dǎo)出 Html
// 將表單導(dǎo)出為 HTML
this.$refs.designer.getHtml()

  • 增加標(biāo)題和手寫簽名組件

  • 遠(yuǎn)程請(qǐng)求支持前置處理回調(diào)

  • 完善表格表單組件，新增最小行，是否可刪除開關(guān)，是否可新增開關(guān)和標(biāo)題位置的配置項(xiàng)

  • 增加 previewSubmit 和 previewReset 事件，預(yù)覽彈窗表單提交和重置時(shí)觸發(fā)

  • config 增加 beforeRemoveRule 和 beforeActiveRule 回調(diào)控制組件是否可以刪除和選中

  • 表單增加 beforeSubmit 事件

  • 增加 changeField 事件，監(jiān)聽組件的字段 ID 變化

  • 增加 showMenuBar 配置項(xiàng)，控制是否顯示最左側(cè)菜單欄

  • 增加 showPreviewBtn 配置項(xiàng)，控制是否顯示預(yù)覽按鈕

  • 增加 exitConfirm 配置項(xiàng)，控制關(guān)閉設(shè)計(jì)器時(shí)是否彈出確認(rèn)操作彈窗

?? 功能優(yōu)化:

  • 隱藏多語言后同步隱藏多語言選擇
  • 修改上傳組件事件配置參數(shù) (??不兼容)
  • 表單事件列表增加事件是否定義的狀態(tài)
  • menu 增加 before 參數(shù)，可以顯示在頂部
  • 優(yōu)化事件配置
  • 修改彈出框?qū)挾葹?nbsp;1080px
  • 支持配置事件的描述
  • 優(yōu)化設(shè)計(jì)器樣式

?? 問題修復(fù)：

  • ? 修復(fù) 預(yù)覽 json 時(shí)函數(shù)解析問題
  • ? 修復(fù) 事件保存時(shí)可能報(bào)錯(cuò)問題
  • ? 修復(fù) 自定義屬性可能保存失敗問題
  • ? 修復(fù) 默認(rèn)表單配置項(xiàng)可能不生效問題

配置面板

您可以根據(jù)業(yè)務(wù)需求隨心定制設(shè)計(jì)器界面和功能組合啦，系統(tǒng)會(huì)自動(dòng)生成對(duì)應(yīng)的配置參數(shù)，簡直不要太方便！

  • @form-create/designer ElementPlus/ElementUI表單設(shè)計(jì)器 ??

  • @form-create/antd-designer AntDesignVue表單設(shè)計(jì)器(Vue3) ??

  • @form-create/vant-designer Vant移動(dòng)端表單設(shè)計(jì)器(Vue3) ??

作者：無懈可擊
鏈接：https://juejin.cn/post/7505633505980907529
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

Element UI 版本表單設(shè)計(jì)器

本項(xiàng)目采用 Vue2.7 和 Element UI 進(jìn)行頁面構(gòu)建，內(nèi)置多語言解決方案，支持二次擴(kuò)展開發(fā)，支持自定義組件擴(kuò)展。演示站

安裝

要開始使用  @form-create/designer，首先需要將其安裝到您的項(xiàng)目中。可以通過 npm 安裝：

npm install @form-create/designer@^1
npm install @form-create/element-ui@^2.7
npm install element-ui

如已安裝舊版本渲染器，請(qǐng)執(zhí)行以下命令更新至最新版：

npm update @form-create/element-ui@^2.7

請(qǐng)檢查當(dāng)前 Vue 版本，若版本低于 2.7，請(qǐng)執(zhí)行以下升級(jí)命令：

npm update vue@^2.7

引入

Node.js 引入

對(duì)于 Node.js 項(xiàng)目，您需要通過 npm 安裝相關(guān)依賴，并在您的項(xiàng)目中引入并配置它們。

import Vue from 'vue';
import FcDesigner from '@form-create/designer';
import ELEMENT from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 使用 Element UI
Vue.use(ELEMENT);
// 使用 form-create 和 designer
Vue.use(FcDesigner);
Vue.use(FcDesigner.formCreate);

CDN 引入

如果您希望通過 CDN 方式引入 FcDesigner，請(qǐng)確保先引入 Vue.js 和 Element UI。然后引入  @form-create/element-ui 和  @form-create/designer，并在 Vue 實(shí)例中進(jìn)行配置

<!-- 引入 Vue.js -->
<script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
<!-- 引入 Element UI 樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入 Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="https://unpkg.com/@form-create/element-ui/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer/dist/index.min.js"></script>
<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<script>
    Vue.use(FcDesigner);
    Vue.use(FcDesigner.formCreate);
    new Vue().$mount('#app');
</script>

使用

在 Vue 組件中，您可以像下面這樣使用 fc-designer 組件：

<template>
    <fc-designer ref="designer" height="100vh" />
</template>

Element Plus 版本表單設(shè)計(jì)器

@form-create/designer 支持 Vue 3 環(huán)境，以下是如何在 Vue 3 項(xiàng)目中安裝和使用該庫的指南。

演示站

安裝

首先，安裝  @form-create/designer 的 Vue 3 版本

npm install @form-create/designer@^3
npm install @form-create/element-ui@^3
npm install element-plus

如已安裝舊版本渲染器，請(qǐng)執(zhí)行以下命令更新至最新版：

npm update @form-create/element-ui@^3

引入

Node.js 引入

對(duì)于使用 Node.js 的項(xiàng)目，按照以下步驟在您的 Vue 3 項(xiàng)目中引入并配置：

import { createApp } from 'vue';
import FcDesigner from '@form-create/designer';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// 創(chuàng)建 Vue 應(yīng)用
const app = createApp(App);
// 使用 Element Plus 和 FcDesigner
app.use(ElementPlus);
app.use(FcDesigner);
app.use(FcDesigner.formCreate);
// 掛載應(yīng)用
app.mount('#app');

CDN 引入

如果您選擇使用 CDN，可以按照以下步驟在 HTML 文件中引入相關(guān)依賴：

<!-- 引入 Element Plus 樣式 -->
<link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet" />
<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue"></script>
<!-- 引入 Element Plus -->
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script>
<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<script>
    const { createApp } = Vue;
    const app = createApp({});
    app.use(ElementPlus);
    app.use(FcDesigner);
    app.use(FcDesigner.formCreate);
    app.mount('#app');
</script>

使用

在 Vue 3 組件中，您可以通過以下方式使用 fc-designer 組件：

<template>
    <fc-designer ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此處獲取設(shè)計(jì)器實(shí)例或進(jìn)行其他操作
    const designer = ref(null);
</script>

AntDesignVue 版本 PC 端表單設(shè)計(jì)器

演示站

本項(xiàng)目采用 Vue3.0 和 Ant Design Vue 進(jìn)行頁面構(gòu)建，內(nèi)置多語言解決方案，支持二次擴(kuò)展開發(fā)，支持自定義組件擴(kuò)展。

安裝

首先，安裝  @form-create/antd-designer

npm install @form-create/antd-designer@^3
npm install @form-create/ant-design-vue@^3
npm install ant-design-vue

如已安裝舊版本渲染器，請(qǐng)執(zhí)行以下命令更新至最新版：

npm update @form-create/ant-design-vue@^3

引入

Node.js 引入

對(duì)于使用 Node.js 的項(xiàng)目，按照以下步驟在您的 Vue 3 項(xiàng)目中引入并配置：

import FcDesigner from '@form-create/antd-designer'
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
// 創(chuàng)建 Vue 應(yīng)用
const app = createApp(App);
app.use(antd)
app.use(FcDesigner)
app.use(FcDesigner.formCreate)
// 掛載應(yīng)用
app.mount('#app');

CDN 引入

如果您選擇使用 CDN，可以按照以下步驟在 HTML 文件中引入相關(guān)依賴：

<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4/dist/reset.css"></link>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"></link>
<!-- 引入 Vue 及所需組件 -->
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/ant-design-vue@4/dist/antd.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<!-- 引入 form-create 及 fcDesigner -->
<script src="https://unpkg.com/@form-create/ant-design-vue@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/antd-designer@^3/dist/index.umd.js"></script>
<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<!-- 掛載組件 -->
<script>
    // 創(chuàng)建 Vue 應(yīng)用實(shí)例
    const app = Vue.createApp({});
    // 掛載 AntDesignVue
    app.use(antd);
    // 掛載 fcDesignerPro 組件
    app.use(FcDesigner);
    // 掛載 formCreate
    app.use(FcDesigner.formCreate);
    // 掛載 Vue 應(yīng)用
    app.mount('#app');
</script>

使用

在 Vue 3 組件中，您可以通過以下方式使用 fc-designer 組件：

<template>
    <fc-designer ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此處獲取設(shè)計(jì)器實(shí)例或進(jìn)行其他操作
    const designer = ref(null);
</script>

移動(dòng)端表單設(shè)計(jì)器

演示站

本項(xiàng)目采用 Vue3.0 和 ElementPlus 進(jìn)行移動(dòng)端頁面構(gòu)建，移動(dòng)端使用的是 vant4.0 版本，內(nèi)置多語言解決方案，支持二次擴(kuò)展開發(fā)，支持自定義組件擴(kuò)展。

安裝

首先，安裝  @form-create/vant-designer

npm install @form-create/vant-designer@^3
npm install @form-create/element-ui@^3
npm install @form-create/vant@^3
npm install element-plus
npm install vant

如已安裝舊版本渲染器，請(qǐng)執(zhí)行以下命令更新至最新版：

npm update @form-create/element-ui@^3
npm update @form-create/vant@^3

引入

Node.js 引入

對(duì)于使用 Node.js 的項(xiàng)目，按照以下步驟在您的 Vue 3 項(xiàng)目中引入并配置：

import FcDesignerMobile from '@form-create/vant-designer'
import ELEMENT from 'element-plus';
import vant from 'vant';
import 'vant/lib/index.css';
import 'element-plus/dist/index.css';
// 創(chuàng)建 Vue 應(yīng)用
const app = createApp(App);
app.use(ELEMENT)
app.use(vant)
app.use(FcDesignerMobile)
app.use(FcDesignerMobile.formCreate)
// 掛載應(yīng)用
app.mount('#app');

CDN 引入

如果您選擇使用 CDN，可以按照以下步驟在 HTML 文件中引入相關(guān)依賴：

<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
<link rel="stylesheet" href="https://unpkg.com/vant@4/lib/index.css"/>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/vant@4/lib/vant.min.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant-designer@next/dist/index.umd.js"></script>
<div id="app">
    <fc-designer-mobile height="100vh"></fc-designer-mobile>
</div>
<script>
    const { createApp } = Vue;
    const app = createApp({});
    app.use(ElementPlus);
    app.use(vant);
    app.use(FcDesignerMobile);
    app.use(FcDesignerMobile.formCreate);
    app.mount('#app');
</script>

使用

在 Vue 3 組件中，您可以通過以下方式使用 fc-designer 組件：

<template>
    <fc-designer-mobile ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此處獲取設(shè)計(jì)器實(shí)例或進(jìn)行其他操作
    const designer = ref(null);
</script>

獲取設(shè)計(jì)表單的數(shù)據(jù)

在表單設(shè)計(jì)器中，可以通過以下方法獲取表單的生成規(guī)則和配置，這些數(shù)據(jù)通常會(huì)被保存到數(shù)據(jù)庫中，以便后續(xù)加載和回顯。

//獲取表單的生成規(guī)則
const ruleJson = this.$refs.designer.getJson();
//獲取表單的配置
const optionsJson = this.$refs.designer.getOptionsJson();
//todo 保存JSON數(shù)據(jù)到數(shù)據(jù)庫中

這些數(shù)據(jù)可以用來保存到數(shù)據(jù)庫中，確保表單的狀態(tài)和配置可以在頁面刷新或重新加載時(shí)恢復(fù)。

回顯設(shè)計(jì)表單

當(dāng)需要回顯設(shè)計(jì)好的表單時(shí)，您需要加載之前保存的 JSON 規(guī)則和配置，并將其應(yīng)用到設(shè)計(jì)器中。

//todo 加載表單JSON規(guī)則
//回顯表單
this.$refs.designer.setOptions(optionsJson);
this.$refs.designer.setRule(ruleJson);

通過這些方法，可以將之前保存的表單規(guī)則和配置應(yīng)用到設(shè)計(jì)器中，從而恢復(fù)表單的狀態(tài)。

表單渲染

要渲染表單，您需要掛載 form-create 到 Vue 應(yīng)用中，并加載表單規(guī)則和配置。

//從設(shè)計(jì)器中導(dǎo)入 formCreate
import {formCreate} from '@form-create/designer';
//掛載 formCreate
app.use(formCreate);

表單渲染示例

<template>
    <div id="app">
        <form-create v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create>
    </div>
</template>
<script>
    import {formCreate} from '@form-create/designer';
    export default {
        data() {
            return {
                //實(shí)例對(duì)象
                fApi: {},
                //表單數(shù)據(jù)
                formData: {},
                //表單生成規(guī)則
                rule: [],
                //組件參數(shù)配置
                option: {}
            }
        },
        beforeCreate(){
            const rule,option;
            // todo 加載表單JSON規(guī)則
            this.rule = formCreate.parseJson(rule);
            this.option = formCreate.parseJson(option);
        }
    }
</script>

動(dòng)態(tài)加載和保存表單配置

可以通過 API 請(qǐng)求動(dòng)態(tài)加載表單規(guī)則和配置，并將表單數(shù)據(jù)保存到服務(wù)器。

import axios from 'axios';
// 加載表單配置
async function loadFormConfig() {
    try {
        const response = await axios.get('/api/form-config');
        return response.data;
    } catch (error) {
        console.error('加載表單配置失敗', error);
        return { rule: [], option: {} };
    }
}
// 保存表單配置
async function saveFormConfig(ruleJson, optionsJson) {
    try {
        await axios.post('/api/form-config', { rule: ruleJson, options: optionsJson });
    } catch (error) {
        console.error('保存表單配置失敗', error);
    }
}

轉(zhuǎn)自https://www.cnblogs.com/xaboy/p/18987286


該文章在 2025/10/13 10:49:04 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved