フォーム作成ピットクライミングメモ (jeecg プロジェクトがフォームデザイナーを置き換えます)

材料

公式ウェブサイト

オンライン デモ Web サイト - 基本版

基本版 - ドキュメント

オンライン デモ Web サイト - プレミアム

プレミアム エディション - ドキュメント

バージョン比較

	基本バージョン	プレミアムバージョン
関数	いくつかの基本的なフォーム コントロール、フォーム検証、データ取得、およびその他の基本的な機能を提供します。	基本バージョンと比較して、上級バージョンはより豊富な機能を提供し、ページがより美しくなります。
		クリックするだけでフィールドをすばやく追加できます。
		データ ソースやフォーム イベントなどのプロパティ設定の追加。
		追加のコントロール フィールド (サブフォーム、カスタム コンポーネントなど)。
		より多くのレイアウト コンテナーがあり、入れ子にすることができます (グリッド、テーブル、タブ)。
		より複雑なビジネス ニーズを満たすための API の追加。
		カスタム フィールドを追加すると、独自に開発したコンポーネントを迅速に導入できます。
		カスタム スタイルをすばやく追加します。
		データソースをサポートし、便利なフォームデータ構成;
		アクション イベントをサポートし、フォームをより柔軟に構成できます。
		マルチターミナル適応ディスプレイ。
		Ant Design スタイルのコンポーネントが提供されます (antd vue の導入によって変更されています)。
デモアドレス	http://form.making.link/basic-version	http://form.making.link/sample
オープンソースですか	はい	いいえ
利用規約	LGPL	ライセンス契約
商業的に使用できますか?	いいえ	はい
住所	Github、Gitee	公式ウェブサイト
書類	ギットハブ	公式文書
仕える	随時更新してバグを修正する	定期的なアップデートとバグ修正
技術サポート		関連する意見が私たちの主な考慮事項となります

結果

私たちのプロジェクトではカスタム フォーム デザイナー コンポーネントが最も必要であるため、上級バージョンをメモに記録します。

入門

1. コンソールにform-makingダウンロードしたソースコードをlibプロジェクトディレクトリに配置します。

   注: プロジェクトにディレクトリがない場合はlib、新しいディレクトリを作成してください。

   ├── lib                       # 项目lib目录，用于放置FormMaking产品
   │   │── vue-form-making       # 从网站下载的FormMaking程序包
   │   │   │── src				  # FormMaking 源码包，源码版本才有该目录										
   │   │   │── dist              # FormMaking 打包后的文件目录
   │   │   │── package.json	  # 配置文件
   ├── src                       # 项目代码
   ├── package.json              # package.json
   ├── vue.config.js             # vue-cli 配置
   

   フルバージョンのディレクトリ分析

   ├── public                                       # 静态资源
   │   │── lib                                      # 第三方插件库
   │   │── index.html                               # html模板
   ├── src                                          # 源代码
   │   │── assets                                   # 图片等静态资源
   │   │── components                               # 组件库
   │   │   │── AntdvGenerator                       # Ant Design Vue 生成器目录
   │   │   │── CodeEditor                           # 代码编辑器组件
   │   │   │── Editor                               # 富文本编辑器组件
   │   │   │── FormTable                            # 子表单生成器组件
   │   │   │── Upload                               # 上传组件
   │   │   │── CodeDialog.vue                       # 代码编辑器弹框组件
   │   │   │── componentsConfig.js                  # 设计器字段配置
   │   │   │── Container.vue                        # 设计器入口组件
   │   │   │── CusDialog.vue                        # 封装的公用的弹框组件
   │   │   │── FormConfig.vue                       # 设计器表单属性配置
   │   │   │── generateCode.js                      # 生成代码js文件
   │   │   │── GenerateColItem.vue                  # 生成栅格布局
   │   │   │── GenerateElementItem.vue              # 生成表单子项对应的组件
   │   │   │── GenerateForm.vue                     # 生成器入口组件
   │   │   │── GenerateFormItem.vue                 # 生成表单子项
   │   │   │── GenerateReport.vue                   # 生成表格组件
   │   │   │── GenerateTabItem.vue                  # 生成标签组件
   │   │   │── WidgetColItem.vue                    # 栅格设计组件
   │   │   │── WidgetConfig.vue                     # 设计器字段属性配置
   │   │   │── WidgetElementItem.vue                # 设计器表单子项内部详细组件
   │   │   │── WidgetForm.vue                       # 设计器表单设计区域
   │   │   │── WidgetFormItem.vue                   # 设计器表单子项设计
   │   │   │── WidgetReport.vue                     # 设计器表格组件
   │   │   │── WidgetTabItem.vue                    # 设计器标签组件
   │   │   │── WidgetTable.vue                      # 设计器子表单组件
   │   │   │── WidgetTableItem.vue                  # 设计器子表单内部组件
   │   │── demo                                     # 示例demo
   │   │   │── CustomComponent.vue                  # 演示自定义组件
   │   │   │── Home.vue                             # 演示设计器
   │   │   │── Test.vue                             # 测试功能
   │   │── directive                                # 全局指令
   │   │── iconfont                                 # iconfont 字体库
   │   │── lang                                     # 国际化配置
   │   │── router                                   # 路由
   │   │── styles                                   # 全局样式
   │   │── util                                     # 全局公用方法
   │   │── App.vue                                  # 入口页面
   │   │── editorBundle.js                          # 打包 VueEditor
   │   │── index.js                                 # 设计器打包入口
   │   │── main.js                                  # 入口文件 加载组件 初始化等
   ├── package.json                                 # package.json
   ├── vue.config.js                                # vue-cli 配置
   

2. Vueフルバージョンをインポートする

   vue.config.jsファイルの中に

   chainWebpack: config => {
         
         
       config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
   }
   

3. インストールとインポートelement-ui

   糸追加要素 ui

   次に、プロジェクトのファイルmain.jsにグローバルにインポートして登録します

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   
   Vue.use(ElementUI);
   

4. 導入FormMaking

   main.jsファイルの中に

   import FormMaking from '@/lib/vue-form-making'
   import '@/lib/vue-form-making/dist/FormMaking.css'
   
   Vue.use(FormMaking)
   

5. 公式ドキュメントには変更すべき設定がありますbabelが、ここでは何も変更していません

   プロジェクトの状況に応じて選択する 2 つの方法があります。

   // 在package.json中如下配置，适用于项目babel配置在package.json中
   "babel": {
         
         
   "sourceType": "unambiguous"
   }
   
   // 在 babel.config.js 中如下配置，适用于项目 babel 配置在单独的 babel.config.js 文件中
   module.exports = {
         
         
   sourceType: 'unambiguous'
   }
   

6. デモページでは、

   <template>
   <fm-making-form 
       ref="makingform" 
       style="height: 500px;" 
       preview 
       generate-code 
       generate-json
   >
   </fm-making-form>
   </template>
   

コード構成を変更する

1. いくつかの穴を踏んだ

   1. 注: コンポーネントはdistのコードではなく、 のsrcコードを直接参照するため、すべての変更を有効にするには再パッケージ化する必要があります。

   2. ローカルにインストールする必要がありますvue-cli:npm install -g @vue/cli

   3. 次に、この部分をインストールする必要があります。ソース コードのこの部分は利用可能ですが、パッケージは利用できないことがnode_modulesわかります。package.jsondistnode_modules

      ただし、コードを修正する必要がない場合は、通常通り dist を参照するだけで済みます。

   4. 次に、ソース コードのルート ディレクトリにパッケージ化する必要があります (プロジェクトのルート ディレクトリではないことに注意してください)。npm run build-bundle

      ここで失敗した場合（私もいくつかの状況で失敗しました）、次の方法を試してください

      1. 削除node_modules後に再インストールしてからパッケージ化する

      2. それが機能しない場合は、を使用npmせずにインストールし、cnpmyarn

   5. ここでパッケージ化が成功するとdist、理論的にはプロジェクトが再更新されてビルドされます。

      ただし、一部のモジュールまたはファイルが見つからないというエラーが報告される可能性も否定できません。この場合は、プロジェクトを再起動してください (これは私のケースでもありました)。

2. 上記の手順に従って、dist変更したコードを追加すると、それが正常に有効になることがわかります。

3. いくつかの構成ファイルのパスを変更しました

   1. フォームプロパティ：デザイナ右側の[フォームプロパティ]、[フィールドプロパティ]

      1. src/components/Container.vue: 設定の追加 (フィールドの追加)

         export default{
                   
                   
         data () {
                   
                   
             return {
                   
                   
             widgetForm: {
                   
                   
                 list: [],
                 config: {
                   
                   
                 // 在此处扩展表单的配置信息，例如：
                 // width: '100%'
                 },
             }
             }
         }
         }
         

      2. src/components/FormConfig.vue: フォーム デザイナーに ui コンポーネントを追加します (追加されたフィールドに値を割り当てます)

         <el-form>
         <el-form-item label="宽度" >
             <el-input v-model="data.width" clearable></el-input>
         </el-form-item>
         </el-form>
         

      3. src/components/GenerateForm.vue: デザイナーが生成したフォームをレンダリングする方法 (追加されたフィールド値はフォームの制御に使用されます)

         <div :style="{width: data.config.width}" class="fm-form">...</div>
         

   2. フォームコンポーネント：デザイナ左側の[フォームコンポーネント]

      1. src/components/componentsConfig.js: 新しいコンポーネント構成を追加します (フィールドを追加)

         {
                   
                   
             type: 'input', // 组件类型，保持唯一
             name: '单行文本', //组件展示名称
             icon: 'icon-input', //组件展示icon, 如果需要自定义，请参考 如何自定义图标
             options: {
                   
                    // 组件配置信息，根据自定义组件自己添加配置
                 defaultValue: '', // 该值表示组件的默认值
                 // 根据自己的组件自定义添加配置参数
             }
         }
         

      2. src/components/Container.vue: このコンポーネントをフォーム デザイナの左側のドラッグ コンポーネントに追加します。

         export default {
                   
                   
         props: {
                   
                   
             basicFields: {
                   
                   
             type: Array,
             default: () => ['input']
             }
         }
         }
         

      3. src/components/WidgetElementItem.vue: 参照コンポーネント、つまり、デザイナーでドラッグ アンド ドロップ コンポーネントをレンダリングする方法

         <template v-if="element.type == 'input'">
         <custom-compontnets
             v-model="element.options.defaultValue"
         ></custom-compontnets>
         </template>
         
         <script>
         import CustomComponent from '...'
         export default {
                     
                     
             components: {
                     
                     
                 CustomComponent
             }
         }
         </script>
         

      4. src/components/WidgetConfig.vue: フォームコンポーネントの属性設定を追加します

         前のフォーム属性設定を参照してください。

      5. ここで、追加の手順を追加する必要があります。つまり、新しく追加したコンポーネントを定義するためにsrc/components、以下に

      6. src/components/GenerateElementItem.vue: ジェネレーターによって生成されたフォーム コンポーネントをレンダリングする方法については、前の手順で追加したコンポーネントを参照してください。

         <template v-if="widget.type == 'input'">  
         <div :style="{width: isTable ? '100%' : widget.options.width}">
             <custom-compontnets v-model="dataModel"></custom-compontnets>
         </div>
         </template>
         
         <script>
         import CustomComponent from '...'
         export default {
                     
                     
             components: {
                     
                     
                 CustomComponent
             }
         }
         </script>
         

   3. 追加する必要があるのは、中国語の説明がlib\vue-form-making\src\lang\zh-CN.jsこのファイルにあることです。

   4. レイアウトコンポーネント（フォームコンポーネントの一種でもあります）

      ここではinlineインラインコンポーネントの実装を模倣していますが、これは非常に良いアイデアです。

      最初のいくつかの手順はフォームコンポーネントと同じです

      1. src/components/componentsConfig.js: 新しいコンポーネント構成を追加します (フィールドを追加)

      2. src/components/Container.vue: このコンポーネントをフォーム デザイナの左側のドラッグ コンポーネントに追加します。

      3. zh-CN.js: 対応する中国語の説明を追加

      次のいくつかのステップ

      デザイナー関連

      1. src\components\FormMaking次のような新しいデザイナー コンポーネント実装ファイルをディレクトリに追加します。src\components\FormMaking\WidgetCard.vue

      2. src\components\FormMaking\WidgetColItem.vue:builder-griddesign は、このコンポーネントの参照とレンダリングを追加します

      3. src\components\FormMaking\WidgetConfig.vue: Builder コンポーネント構成ファイルとコンポーネントのレンダリング

      4. src\components\FormMaking\WidgetForm.vue: ビルダーフォームデザインエリアは、このコンポーネントの参照とレンダリングを追加します。

      5. src\components\FormMaking\WidgetReport.vue: ビルダー フォームは参照を追加し、コンポーネントにレンダリングします。

      6. src\components\FormMaking\WidgetTabItem.vue: builder タグはこのコンポーネントの参照とレンダリングを追加します

      7. src\components\FormMaking\WidgetReport.vue: ビルダー サブフォームはこのコンポーネントに参照を追加し、レンダリングします。

      発電機関連

      1. src\components\FormMaking次のようなジェネレーター コンポーネント実装ファイルをディレクトリに追加します。src\components\FormMaking\GenerateCard.vue

      2. src\components\FormMaking\GenerateForm.vue: このコンポーネントをジェネレータエントリコンポーネントに追加します

      3. src\components\FormMaking\GenerateColItem.vue: 生成されたグリッド レイアウト コンポーネントにこのコンポーネントを追加します

      4. src\components\FormMaking\GenerateReport.vue: 生成されたテーブルコンポーネントコンポーネントにこのコンポーネントを追加します

      5. src\components\FormMaking\GenerateTabItem.vue: このコンポーネントをジェネレータータグコンポーネントに追加します

      スタイル関連

      1. styles/index.cscc: 対応するスタイルをスタイル ファイルに追加する必要があります

      コードの生成関連

      1. src\components\FormMaking\generateCode.js: 生成されたコード内のコンテナコンポーネントの判定を高めます

フォーム検証構成の実装

1. デザイナー コンポーネントの構成により、コンポーネント検証フィールドの構成が設定されます。src/components/WidgetConfig.vue

   これは、右側に設定されたフィールド構成です。

   このコード部分を検索します: <el-form-item :label="$t('fm.config.widget.validate')">、約 1400 行

2. デザイナー コンポーネント ルールに関連するジェネレーター関数:src/components/WidgetConfig.vue

   ここでは、設定されたフィールドの構成を確認して配列に整理します

   1. 検証必須

   2. データ型の検証

   3. パターンを検証する

   4. 生成ルール

3. ジェネレーターコンポーネントのルールは、element-uiフォームで必要な形式にソートされます。

   1. ファイルの場所:src/components/GenerateForm.vue

   2. 書式設定機能:generateModel

   3. 使用する場所:el-formコンポーネントのrulesプロパティ

   4. rulesルールでは、elementルールform、具体的にはhttps://github.com/yiminghe/async-validatorを使用します。

いくつかのヒント

1. 初めてフォーム検証がクリアされると、さらに英語のプロンプトが表示されます

   理由:elemenet-uiコンポーネントの属性が のel-form-item場合、フォームにバインドされているフィールドが検証されますが、実際には、通常、フォーム内の特定のコンポーネントに検証ルールを追加します。これはここで繰り返され、冗長になります。デフォルトがもう 1 つあります。英語のプロンプトrequiretrue

   解決策: フォームの特定のコンポーネントに対して正確な独自のカスタム検証ルールを追加しているため、

2. this.setData() メソッドは読み取り専用モードでは有効になりません

   公式ドキュメントにパラメータが 1 つ欠けている場合、コードは 2 番目のパラメータをサポートします (このパラメータは setData を読み取り専用モードで実行するかどうかを示し、デフォルトは true で実行しないことを示します)。

   setData(value, addOnly = true) {
         
          // addOnly 仅编辑状态下执行
     if (!addOnly || this.edit) {
         
         
       Object.keys(value).forEach((item) => {
         
         
         this.$set(this.models, item, value[item]);
       });
     }
   }
   

   以下のように使えるように調整しました

   // 原来的使用
   this.setData({
         
         name: 123});
   
   // 现在的使用
   this.setData({
         
         name: 123}, false);