test

src/App.vue

@@ -4,6 +4,7 @@
       <template #customToolButtons>
         <!-- <el-button type="normal" @click="printFormJson">测试按钮</el-button> -->
         <el-button type="normal" @click="insertFormJson">外部导入</el-button>
+        <el-button type="normal" @click="getFieldList">获取字段列表</el-button>
         <el-button type="primary" @click="printFormJson">外部导出</el-button>
       </template>
     </VFormDesigner>
@@ -56,6 +57,9 @@ export default {
     insertFormJson() {
       let jsonObj = require('./assets/testForm.json')
       this.$refs.vfDesignerRef.setFormJson(jsonObj)
+    },
+    getFieldList() {
+      console.log(this.$refs.vfDesignerRef.getFieldWidgets())
     }
   }
 }

src/components/form-designer/toolbar-panel/index.vue

@@ -62,6 +62,7 @@
       <code-editor v-model="testFunc" style="display: none"></code-editor>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="getFormData">{{i18nt('designer.hint.getFormData')}}</el-button>
+        <el-button type="primary" @click="getFieldList">{{i18nt('designer.hint.getFieldListData')}}</el-button>
         <el-button type="primary" @click="resetForm">{{i18nt('designer.hint.resetForm')}}</el-button>
         <el-button type="primary" @click="setFormDisabled">{{i18nt('designer.hint.disableForm')}}</el-button>
         <el-button type="primary" @click="setFormEnabled">{{i18nt('designer.hint.enableForm')}}</el-button>
@@ -138,6 +139,22 @@
       </div>
     </el-dialog>
 
+    <el-dialog :title="i18nt('designer.hint.exportFieldListData')" :visible.sync="showFieldListDataDialogFlag"
+               v-if="showFieldListDataDialogFlag" :show-close="true" class="dialog-title-light-bg" center v-dialog-drag
+               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"
+               :append-to-body="true">
+      <div style="border: 1px solid #DCDFE6">
+        <code-editor :mode="'json'" :readonly="true" v-model="fieldListJson"></code-editor>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" class="copy-form-data-json-btn" :data-clipboard-text="fieldListRawJson" @click="copyFieldListDataJson">
+          {{i18nt('designer.hint.copyFormData')}}</el-button>
+        <el-button @click="saveFieldListData">{{i18nt('designer.hint.saveFormData')}}</el-button>
+        <el-button type="" @click="showFieldListDataDialogFlag = false">
+          {{i18nt('designer.hint.closePreview')}}</el-button>
+      </div>
+    </el-dialog>
+
     <el-dialog :title="i18nt('designer.toolbar.generateSFC')" :visible.sync="showExportSFCDialogFlag"
                v-if="showExportSFCDialogFlag" :show-close="true" class="small-padding-dialog" center append-to-body v-dialog-drag
                width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
@@ -208,6 +225,7 @@
         showExportJsonDialogFlag: false,
         showExportCodeDialogFlag: false,
         showFormDataDialogFlag: false,
+        showFieldListDataDialogFlag: false,
         showExportSFCDialogFlag: false,
         showNodeTreeDrawerFlag: false,
 
@@ -221,6 +239,9 @@
         formDataJson: '',
         formDataRawJson: '',
 
+        fieldListJson: '',
+        fieldListRawJson: '',
+
         vueCode: '',
         htmlCode: '',
 
@@ -578,6 +599,37 @@
         })
       },
 
+      getFieldListPromiseWrap () {
+        let callback = function nullFunc() {}
+        let promise = new window.Promise(function (resolve, reject) {
+          callback = function(fieldListJson, fieldListRawJson, error) {
+            !error ? resolve(fieldListJson, fieldListRawJson) : reject(error);
+          };
+        });
+        try {
+          const fieldListData = this.$refs['preForm'].getFieldWidgets()
+          const fieldListJson = JSON.stringify(fieldListData, null, '  ')
+          const fieldListRawJson = JSON.stringify(fieldListData)
+          callback(fieldListJson, fieldListRawJson)
+        } catch (error) {
+          callback(this.formDataModel, this.i18nt('render.hint.fieldListGenerateFailed'))
+        }
+
+        return promise
+      },
+
+      getFieldList () {
+        // console.log('【getFieldWidgets】',this.$refs['preForm'].getFieldWidgets())
+        // console.log('【getContainerWidgets】',this.$refs['preForm'].getContainerWidgets())
+        this.getFieldListPromiseWrap().then((fieldListJson, fieldListRawJson)=>{
+          this.fieldListJson = fieldListJson
+          this.fieldListRawJson = fieldListRawJson
+          this.showFieldListDataDialogFlag = true
+        }).catch(error => {
+          this.$message.error(error)
+        })
+      },
+
       copyFormDataJson(e) {
         copyToClipboard(this.formDataRawJson, e,
             this.$message,
@@ -586,10 +638,23 @@
         )
       },
 
+      copyFieldListJson(e) {
+        copyToClipboard(this.fieldListRawJson, e,
+            this.$message,
+            this.i18nt('designer.hint.copyJsonSuccess'),
+            this.i18nt('designer.hint.copyJsonFail')
+        )
+      },
+
+
       saveFormData() {
         this.saveAsFile(this.htmlCode, `formData${generateId()}.json`)
       },
 
+      savefieldListData() {
+        this.saveAsFile(this.htmlCode, `fieldListData${generateId()}.json`)
+      },
+
       resetForm() {
         this.$refs['preForm'].resetForm()
       },

src/lang/zh-CN.js

@@ -92,10 +92,12 @@ export default {
       saveVueCode: '保存Vue文件',
       saveHtmlCode: '保存Html文件',
       getFormData: '获取数据',
+      getFieldListData: '获取字段列表',
       resetForm: '重置表单',
       disableForm: '禁用编辑',
       enableForm: '恢复编辑',
       exportFormData: '表单数据',
+      exportFieldListData: '表单字段列表',
       copyFormData: '复制JSON',
       saveFormData: '保存为文件',
       copyVue2SFC: '复制Vue2代码',

src/lang/zh-CN_render.js

@@ -26,6 +26,7 @@ export default {
       downloadFile: '下载',
       removeFile: '移除',
       validationFailed: '表单数据校验失败',
+      fieldListGenerateFailed: '表单字段列表生成失败',
 
       subFormAction: '操作',
       subFormAddAction: '新增',