动态表单配置

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

@@ -1,5 +1,25 @@
 <template>
   <el-form :model="formModel" :rules="createRules" ref="createForm">
+    <el-form-item prop="customerId" label="客户" label-width="100px">
+      <el-select v-model="formModel.customerId" @change="onCustomerChanged" :disabled="customerIdFixed">
+        <el-option
+            v-for="item in customerList"
+            :key="item.customerId"
+            :label="item.customerName"
+            :value="item.customerId">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="选择表单" prop="formId" label-width="100px">
+      <el-select v-model="formModel.formId" clearable placeholder="请选择" @change="onFormChanged" :disabled="customerIdFixed">
+        <el-option
+            v-for="item in formList"
+            :key="item.id"
+            :label="item.formName"
+            :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
     <el-form-item prop="itemGroupId" label="分组" label-width="100px">
       <el-select v-model="formModel.itemGroupId" @change="onGroupChanged">
         <el-option v-for="group in groupList"
@@ -18,7 +38,12 @@
         </el-option>
       </el-select>
     </el-form-item>
-
+    <el-form-item prop="tableName" label="数据库表名称" label-width="100px">
+      <el-input v-model="formModel.tableName"></el-input>
+    </el-form-item>
+    <el-form-item prop="columnName" label="数据库列名称" label-width="100px">
+      <el-input v-model="formModel.columnName"></el-input>
+    </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>
@@ -40,7 +65,8 @@
     </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-input v-model="formModel.optionSourceValue" :disabled="optionSourceTypeDisabled"
+                placeholder="如果是为直接定义，格式请保持为:  value1:label1,vaalue2:label2。如果是调用api则定义api地址（全为半角符号）"></el-input>
     </el-form-item>
 
     <el-button @click="onSubmitBtnClick" type="primary">提交</el-button>
@@ -59,28 +85,33 @@ export default {
         itemGroupId: null,
         parentItemId: null,
         label: null,
+        tableName: null,
+        columnName: null,
         itemType: null,
         required: null,
         optionSourceType: null,
         optionSourceValue: null
       },
+      customerIdFixed: false,
+      customerList: [],
+      formList: [],
       optionSourceTypeDisabled: false,
       createRules: {
+        customerId: [
+          { required: true, message: '客户为必填项' }
+        ],
+        formId: [
+          { required: true, message: '表单为必填项' }
+        ],
         itemGroupId: [
           {required: true, message: '分组为必填项'}
         ],
-        parentItemId: [
-          { required:true, message:'父组件为必填项' }
-        ],
         label: [
           {required: true, message: '名称为必填项'}
         ],
         itemType: [
           {required: true, message: '组件类型为必填项'}
         ],
-        required: [
-          { required:true, message:'是否必填为必填项' }
-        ],
         optionSourceType: [
           {required: true, message: '选项来源类型为必填项'}
         ]
@@ -89,7 +120,6 @@ export default {
         ],
       },
 
-      formList: [],
       // 分组列表
       groupList: [],
 
@@ -140,13 +170,29 @@ export default {
   },
 
   activated() {
+
+    // this.loadCustomerList()
+
+    this.initData({})
+
   },
 
   methods: {
     initData({formId: formId, customerId: customerId}) {
       this.formModel.formId = formId;
       this.formModel.customerId = customerId;
+
+      if (formId && customerId) {
+        this.customerIdFixed = true;
+      } else {
+        this.customerIdFixed = false;
+      }
+
+      this.loadCustomerList()
+      this.loadFormList()
       this.loadGroups();
+
+      // console.log('执行了initData')
     },
 
     // 加载分组列表
@@ -166,23 +212,39 @@ export default {
           })
     },
 
-    // /**
+    /**
-    //  * 加载表单列表
+     * 加载客户列表
-    //  */
+     */
-    // loadFormList() {
+    loadCustomerList() {
-    //   debugger
+      this.$http.get('/oper/crm/customer/getvalidcustomerlist').then(({data: res}) => {
-    //   this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formModel.customerId}&formName=&pageNo=1&pageSize=100`)
+        if (res.code === 0) {
-    //       .then(({data: httpdata, status: httpStatus}) => {
+          this.customerList = res.data;
-    //         if (httpdata.code === 0) {
+          this.customerList.unshift({"customerId": "default", "customerName": "模板"})
-    //           this.formList = httpdata.data.list;
+        } else {
-    //         } else {
+          this.$message.error(res.msg)
-    //           this.$message({
+        }
-    //             type: 'error',
+        console.log('客户加载完成')
-    //             nessage: res.msg
+      })
-    //           })
+    },
-    //         }
+
-    //       })
+    /**
-    // },
+     * 加载表单列表
+     */
+    loadFormList() {
+      this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formModel.customerId}&formName=&pageNo=1&pageSize=100`)
+          .then(({data: httpdata, status: httpStatus}) => {
+            if (httpdata.code === 0) {
+              this.formList = httpdata.data.list;
+            } else {
+              this.$message({
+                type: 'error',
+                nessage: res.msg
+              })
+            }
+
+            console.log('客户加载完成')
+          })
+    },
 
     /**
      * 分组选中
@@ -225,10 +287,23 @@ export default {
           return
         }
 
-        this.$http.post()
+        this.$http.post(`/oper/customize/icform/config/createItem`, this.formModel).then(({status:httpStatus, data: httpData}) => {
-      })
+          if (httpData.code === 0) {
+            this.$message({
+              type: 'success',
+              message:"新增成功"
+            });
 
-      console.log(this.formModel)
+            this.resetForm()
+            this.$emit("onClose") // 关闭窗口
+          } else {
+            this.$message({
+              type: 'error',
+              message: httpData.msg
+            });
+          }
+        })
+      })
 
     },
 
@@ -236,8 +311,19 @@ export default {
      * 取消
      */
     onCancelBtnClick() {
+      this.resetForm()
+      this.$emit("onClose")
+    },
+
+    resetForm() {
       this.$refs['createForm'].resetFields();
-      this.$emit("onCancel")
+    },
+
+    /**
+     * 客户选中事件
+     */
+    onCustomerChanged() {
+      this.loadFormList()
     },
 
     onFormChanged() {

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

@@ -88,8 +88,8 @@
       </el-table>
     </el-card>
 
-    <el-dialog ref="createFormItemDlg" title="新增" :visible.sync="createDlgVisible">
+    <el-dialog ref="createFormItemDlg" title="新增" :visible.sync="createDlgVisible" v-if="createDlgVisible">
-      <CreateFormItem ref="createFormItemComp" @onCancel="onCancel"></CreateFormItem>
+      <CreateFormItem ref="createFormItemComp" @onClose="onClose"></CreateFormItem>
     </el-dialog>
   </div>
 </template>
@@ -130,6 +130,7 @@ export default {
 
     this.loadCustomerList()
         .then(() => {
+          // 自动赋值
           if (this.customerIdFixed) {
             this.formQueryParams.customerId = customerId;
           }
@@ -138,10 +139,10 @@ export default {
           await this.loadFormList();
         })
         .then(() => {
-          console.log('自动选中1')
+          // 自动赋值
           if (this.customerIdFixed) {
             this.formQueryParams.formId = formId;
-            console.log('自动选中1:', this.formQueryParams.formId)
+            this.loadItemList(); // 加载item列表
           }
         });
   },
@@ -348,8 +349,9 @@ export default {
       })
     },
 
-    onCancel() {
+    onClose() {
       this.createDlgVisible = false;
+
     }
   },