设计器增加获取后端字段列表接口属性。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "variant-form",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --open src/main.js",

src/components/form-designer/designer.js

@@ -121,9 +121,12 @@ export function createDesigner(vueInstance) {
       }
     },
 
-    updateSelectedWidgetNameAndRef(selectedWidget, newName) {
+    updateSelectedWidgetNameAndRef(selectedWidget, newName, newLabel) {
       this.selectedWidgetName = newName
-      selectedWidget.options.name = newName
+      //selectedWidget.options.name = newName  //此行多余
+      if (!!newLabel && (Object.keys(selectedWidget.options).indexOf('label') > -1)) {
+        selectedWidget.options.label = newLabel
+      }
     },
 
     clearSelected() {

src/components/form-designer/form-widget/field-widget/fieldMixin.js

@@ -270,6 +270,8 @@ export default {
     },
 
     handleInputCustomEvent(value) {
+      this.syncUpdateFormModel(value)
+
       if (!!this.field.options.onInput) {
         let customFn = new Function('value', this.field.options.onInput)
         customFn.call(this, value)

src/components/form-designer/index.vue

@@ -61,7 +61,7 @@
   import SettingPanel from './setting-panel/index'
   import VFormWidget from './form-widget/index'
   import {createDesigner} from "@/components/form-designer/designer";
-  import {addWindowResizeHandler, getQueryParam} from "@/utils/util";
+  import {addWindowResizeHandler, deepClone, getQueryParam} from "@/utils/util";
   import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config";
   import i18n, { changeLocale } from "@/utils/i18n";
 
@@ -75,6 +75,12 @@
       SettingPanel,
       VFormWidget,
     },
+    props: {
+      fieldListApi: {
+        type: Object,
+        default: null,
+      }
+    },
     data() {
       return {
         vFormVersion: VARIANT_FORM_VERSION,
@@ -91,11 +97,13 @@
         scrollerHeight: 0,
 
         designer: createDesigner(this),
+
+        fieldList: []
       }
     },
     provide() {
       return {
-        //
+        serverFieldList: this.fieldList,
       }
     },
     created() {
@@ -113,6 +121,8 @@
       })
 
       this.loadCase()
+
+      this.loadFieldListFromServer()
     },
     methods: {
       openHome() {
@@ -172,6 +182,26 @@
         this.changeLanguage(curLocale)
       },
 
+      loadFieldListFromServer() {
+        if (!this.fieldListApi) {
+          return
+        }
+
+        axios.get(this.fieldListApi.URL).then(res => {
+          let labelKey = this.fieldListApi.labelKey || 'label'
+          let nameKey = this.fieldListApi.nameKey || 'name'
+
+          res.data.forEach(fieldItem => {
+            this.fieldList.push({
+              label: fieldItem[labelKey],
+              name: fieldItem[nameKey]
+            })
+          })
+        }).catch(error => {
+          this.$message.error(error)
+        })
+      },
+
       handleLanguageChanged(command) {
         this.changeLanguage(command)
         this.curLangName = this.i18nt('application.' + command)
@@ -196,6 +226,13 @@
         }
       },
 
+      getFormJson() {
+        return {
+          widgetList: deepClone(this.designer.widgetList),
+          formConfig: deepClone(this.designer.formConfig)
+        }
+      },
+
       //TODO: 增加更多方法！！
 
     }

src/components/form-designer/setting-panel/property-editor/name-editor.vue

@@ -1,6 +1,13 @@
 <template>
   <el-form-item :label="i18nt('designer.setting.uniqueName')" :rules="nameRequiredRule">
-    <el-input type="text" v-model="optionModel.name" @change="updateWidgetNameAndRef"></el-input>
+    <template v-if="!!selectedWidget.category">
+      <el-input type="text" v-model="optionModel.name" @change="updateWidgetNameAndRef"></el-input>
+    </template>
+    <template v-else>
+      <el-select v-model="optionModel.name" allow-create filterable @change="updateWidgetNameAndRef">
+        <el-option v-for="(sf, sfIdx) in serverFieldList" :key="sfIdx" :label="sf.label" :value="sf.name"></el-option>
+      </el-select>
+    </template>
   </el-form-item>
 </template>
 
@@ -16,6 +23,7 @@
       selectedWidget: Object,
       optionModel: Object,
     },
+    inject: ['serverFieldList'],
     data() {
       return {
         nameRequiredRule: [{required: true, message: 'name required'}],
@@ -41,12 +49,22 @@
 
           let fieldWidget = this.designer.formWidget.getWidgetRef(oldName)
           if (!!fieldWidget && !!fieldWidget.registerToRefList) {
-            fieldWidget.registerToRefList(oldName)
+            fieldWidget.registerToRefList(oldName)  //注册组件新的ref名称并删除老的ref！！
-            this.designer.updateSelectedWidgetNameAndRef(this.selectedWidget, newName)
+            let newLabel = this.getLabelByFieldName(newName)
+            this.designer.updateSelectedWidgetNameAndRef(this.selectedWidget, newName, newLabel)
           }
         }
       },
 
+      getLabelByFieldName(fieldName) {
+        for (let i = 0; i < this.serverFieldList.length; i++) {
+          if (this.serverFieldList[i].name === fieldName) {
+            return this.serverFieldList[i].label
+          }
+        }
+
+        return null
+      },
 
     }
   }

src/components/form-render/index.vue

@@ -201,7 +201,7 @@
                 this.buildDataFromWidget(childItem, wItem)
               })
             }
-          } else {
+          } else {  //自定义容器组件
             if (!!wItem.widgetList && (wItem.widgetList.length > 0)) {
               wItem.widgetList.forEach((childItem) => {
                 this.buildDataFromWidget(childItem, wItem)
@@ -217,8 +217,6 @@
             this.$set(this.formDataModel, wItem.options.name, deepClone(initialValue))
           }
         }
-
-        //TODO: 如果是自定义容器组件，需要特殊处理！！！
       },
 
       addFieldChangeEventHandler() {

src/extension/extension-loader.js

@@ -33,6 +33,9 @@ export const loadExtension = function () {
   Vue.component(CardWidget.name, CardWidget)  //注册设计期的容器组件
   Vue.component(CardItem.name, CardItem)  //注册运行期的容器组件
   /* -------------------------------------------------- */
+  PERegister.registerCPEditor('folded', 'card-folded-editor',
+      PEFactory.createBooleanEditor('folded', 'extension.setting.cardFolded'))
+
   PERegister.registerCPEditor('cardWidth', 'card-cardWidth-editor',
       PEFactory.createInputTextEditor('cardWidth', 'extension.setting.cardWidth'))
 

src/extension/samples/card/card-item.vue

@@ -1,9 +1,12 @@
 <template>
   <container-item-wrapper :widget="widget">
-    <el-card :key="widget.id" class="card-container" :class="[customClass]"
+    <el-card :key="widget.id" class="card-container" :class="[!!widget.options.folded ? 'folded' : '', customClass]"
              :shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
              :ref="widget.id" v-show="!widget.options.hidden">
-      <div slot="header"><span>{{widget.options.label}}</span></div>
+      <div slot="header" class="clear-fix">
+        <span>{{widget.options.label}}</span>
+        <i class="float-right" :class="[!widget.options.folded ? 'el-icon-arrow-down' : 'el-icon-arrow-up']" @click="toggleCard"></i>
+      </div>
       <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
         <template v-for="(subWidget, swIdx) in widget.widgetList">
           <template v-if="'container' === subWidget.category">
@@ -53,6 +56,9 @@
       this.unregisterFromRefList()
     },
     methods: {
+      toggleCard() {
+        this.widget.options.folded = !this.widget.options.folded
+      },
 
     },
   }
@@ -63,4 +69,21 @@
     padding: 10px 12px;
   }
 
+  .folded ::v-deep .el-card__body {
+    display: none;
+  }
+
+  .clear-fix:before, .clear-fix:after {
+    display: table;
+    content: "";
+  }
+
+  .clear-fix:after {
+    clear: both;
+  }
+
+  .float-right {
+    float: right;
+  }
+
 </style>

src/extension/samples/card/card-widget.vue

@@ -3,10 +3,11 @@
                      :index-of-parent-list="indexOfParentList">
     <el-card :key="widget.id" class="card-container" @click.native.stop="selectWidget(widget)"
              :shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
-             :class="[selected ? 'selected' : '', customClass]">
+             :class="[selected ? 'selected' : '', !!widget.options.folded ? 'folded' : '', customClass]">
       <div slot="header" class="clear-fix">
         <span>{{widget.options.label}}</span>
-        <i class="el-icon-arrow-up float-right"></i>
+        <i class="float-right" :class="[!widget.options.folded ? 'el-icon-arrow-down' : 'el-icon-arrow-up']"
+           @click="toggleCard"></i>
       </div>
       <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
                  handle=".drag-handler"
@@ -70,7 +71,12 @@
        */
       checkContainerMove(evt) {
         return true
-      }
+      },
+
+      toggleCard() {
+        this.widget.options.folded = !this.widget.options.folded
+      },
+
     }
   }
 </script>
@@ -84,6 +90,10 @@
     padding: 10px 12px;
   }
 
+  .folded ::v-deep .el-card__body {
+    display: none;
+  }
+
   .clear-fix:before, .clear-fix:after {
     display: table;
     content: "";

src/extension/samples/extension-schema.js

@@ -7,6 +7,7 @@ export const cardSchema = {
     name: '',
     label: 'card',
     hidden: false,
+    folded: false,
     cardWidth: '100%',
     shadow: 'never',
     customClass: '',

src/lang/en-US_extension.js

@@ -6,6 +6,7 @@ export default {
     },
 
     setting: {
+      cardFolded: 'Folded',
       cardWidth: 'Width Of Card',
       cardShadow: 'Shadow',
 

src/lang/zh-CN_extension.js

@@ -6,6 +6,7 @@ export default {
     },
 
     setting: {
+      cardFolded: '是否收起',
       cardWidth: '卡片宽度',
       cardShadow: '显示阴影',
 

src/utils/config.js

@@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
 
 }
 
-export const VARIANT_FORM_VERSION = '2.1.3'
+export const VARIANT_FORM_VERSION = '2.1.4'
 
 export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'