动态表单配置

epmet-oper-web/src/views/modules/dyform/createFormItem.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-form v-model="formModel" :rules="createRules">
-    <el-form-item prop="" label="分组">
+  <el-form :model="formModel" :rules="createRules" ref="createForm">
+    <el-form-item prop="itemGroupId" label="分组" label-width="100px">
       <el-select v-model="formModel.itemGroupId" @change="onGroupChanged">
         <el-option v-for="group in groupList"
                    :key="group.groupId"
@@ -9,7 +9,7 @@
         </el-option>
       </el-select>
     </el-form-item>
-    <el-form-item prop="parentItemId" label="父组件">
+    <el-form-item prop="parentItemId" label="父组件" label-width="100px">
       <el-select v-model="formModel.parentItemId">
         <el-option v-for="pi in parentItemsList"
                    :key="pi.id"
@@ -18,6 +18,33 @@
         </el-option>
       </el-select>
     </el-form-item>
+
+    <el-form-item prop="label" label="名称" label-width="100px">
+      <el-input v-model="formModel.label" style="width: 198px"></el-input>
+    </el-form-item>
+
+    <el-form-item prop="required" label="是否必填" label-width="100px">
+      <el-checkbox v-model="formModel.required"></el-checkbox>
+    </el-form-item>
+
+    <el-form-item prop="itemType" label="组件类型" label-width="100px">
+      <el-select v-model="formModel.itemType" @change="onItemTypeChanged">
+        <el-option v-for="t in controls" :key="t.type" :value="t.type" :label="t.name"></el-option>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item prop="itemType" label="选项来源类型" label-width="100px">
+      <el-select v-model="formModel.optionSourceType" :disabled="optionSourceTypeDisabled">
+        <el-option v-for="t in optionSources" :key="t.type" :value="t.type" :label="t.name"></el-option>
+      </el-select>
+    </el-form-item>
+
+    <el-form-item prop="itemType" label="选项来源" label-width="100px">
+      <el-input v-model="formModel.optionSourceValueStr" :disabled="optionSourceTypeDisabled" placeholder="如果是为直接定义，格式请保持为:  value1:label1,vaalue2:label2。如果是调用api则定义api地址（全为半角符号）"></el-input>
+    </el-form-item>
+
+    <el-button @click="onSubmitBtnClick" type="primary">提交</el-button>
+    <el-button @click="onCancelBtnClick" type="primary">取消</el-button>
   </el-form>
 </template>
 <script>
@@ -37,14 +64,76 @@ export default {
         optionSourceType: null,
         optionSourceValue: null
       },
-
-      createRules: {},
+      optionSourceTypeDisabled: false,
+      createRules: {
+        itemGroupId: [
+          { required:true, message:'分组为必填项' }
+        ],
+        parentItemId: [
+          { required:true, message:'父组件为必填项' }
+        ],
+        label: [
+          { required:true, message:'名称为必填项' }
+        ],
+        itemType: [
+          { required:true, message:'组件类型为必填项' }
+        ],
+        required: [
+          { required:true, message:'是否必填为必填项' }
+        ],
+        optionSourceType: [
+          { required:true, message:'选项来源类型为必填项' }
+        ]
+        ,optionSourceValue: [
+          { required:true, message:'选项来源为必填项' }
+        ],
+      },
 
       formList: [],
       // 分组列表
       groupList: [],
 
-      parentItemsList: []
+      parentItemsList: [],
+      // 组件类型
+      controls: [
+        {
+          type: 'input',
+          name: '文本输入框',
+        }, {
+          type: 'inputNum',
+          name: '数字输入框',
+        }, {
+          type: 'textarea',
+          name: '多行文本域',
+        }, {
+          type: 'select',
+          name: '下拉框',
+        }, {
+          type: 'cascader',
+          name: '级联选择器',
+        }, {
+          type: 'radio',
+          name: '单选框',
+        }, {
+          type: 'checkbox',
+          name: '复选框',
+        }, {
+          type: 'datepicker',
+          name: '日期选择器',
+        }, {
+          type: 'divider',
+          name: '分割线',
+        }
+      ],
+      optionSources: [
+        {
+          type: 'local',
+          name: '直接定义',
+        }, {
+          type: 'remote',
+          name: 'api获取',
+        }
+      ]
     }
 
 
@@ -114,6 +203,43 @@ export default {
           })
     },
 
+    /**
+     * 组件类型选项变更
+     */
+    onItemTypeChanged(newValue) {
+      if (['select', 'cascader', 'radio', 'checkbox'].indexOf(newValue) >= 0) {
+        // 如果是这些，则需要定义选项来源
+        this.optionSourceTypeDisabled = false;
+        this.optionSourceType = "local";
+      } else {
+        this.optionSourceTypeDisabled = true;
+      }
+    },
+
+    /**
+     * 提交
+     */
+    onSubmitBtnClick() {
+      this.$refs['createForm'].validate(rst => {
+        if (!rst) {
+          return
+        }
+
+        this.$http.post()
+      })
+
+      console.log(this.formModel)
+
+    },
+
+    /**
+     * 取消
+     */
+    onCancelBtnClick() {
+      this.$refs['createForm'].resetFields();
+      this.$emit("onCancel")
+    },
+
     onFormChanged() {
       this.loadGroups();
     }
@@ -123,3 +249,8 @@ export default {
 }
 
 </script>
+<style lang="scss">
+.test {
+  width: 100px;
+}
+</style>

epmet-oper-web/src/views/modules/dyform/itemList.vue

@@ -89,7 +89,7 @@
     </el-card>
 
     <el-dialog ref="createFormItemDlg" title="新增" :visible.sync="createDlgVisible">
-      <CreateFormItem ref="createFormItemComp"></CreateFormItem>
+      <CreateFormItem ref="createFormItemComp" @onCancel="onCancel"></CreateFormItem>
     </el-dialog>
   </div>
 </template>
@@ -347,6 +347,10 @@ export default {
         })
       })
     },
+
+    onCancel() {
+      this.createDlgVisible = false;
+    }
   },
 
   watch: {