动态表单配置

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

@@ -0,0 +1,125 @@
+<template>
+  <el-form v-model="formModel" :rules="createRules">
+    <el-form-item prop="" label="分组">
+      <el-select v-model="formModel.itemGroupId" @change="onGroupChanged">
+        <el-option v-for="group in groupList"
+                   :key="group.groupId"
+                   :label="group.groupLabel"
+                   :value="group.groupId">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="parentItemId" label="父组件">
+    <el-select v-model="formModel.parentItemId">
+      <el-option v-for="pi in parentItemsList"
+                 :key="pi.id"
+                 :label="pi.label"
+                 :value="pi.id">
+      </el-option>
+    </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      // 表单内容
+      formModel: {
+        customerId: null,
+        formId: null,
+        itemGroupId: null,
+        parentItemId: null,
+        label: null,
+        itemType: null,
+        required: null,
+        optionSourceType: null,
+        optionSourceValue: null
+      },
+
+      createRules: {},
+
+      formList: [],
+      // 分组列表
+      groupList: [],
+
+      parentItemsList: []
+    }
+
+
+  },
+
+  activated() {
+  },
+
+  methods: {
+    initData({formId: formId, customerId: customerId}) {
+      this.formModel.formId = formId;
+      this.formModel.customerId = customerId;
+      this.loadGroups();
+    },
+
+    // 加载分组列表
+    loadGroups() {
+      this.$http.get(`/oper/customize/icform/config/listGroups?formId=${this.formModel.formId}&customerId=${this.formModel.customerId}`)
+          .then((resp) => {
+            let { data: result } = resp;
+            if (result.code !== 0) {
+              this.$message({
+                type: 'error',
+                message: result.msg
+              })
+              return;
+            }
+
+            this.groupList = result.data;
+          })
+    },
+
+    // /**
+    //  * 加载表单列表
+    //  */
+    // loadFormList() {
+    //   debugger
+    //   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
+    //           })
+    //         }
+    //       })
+    // },
+
+    /**
+     * 分组选中
+     */
+    onGroupChanged() {
+      this.$http.get(`/oper/customize/icform/config/listItems?customerId=${this.formModel.customerId}&formId=${this.formModel.formId}&itemGroupId=${this.formModel.itemGroupId}`)
+          .then((resp) => {
+            let result = resp.data
+            if (result.code !== 0) {
+              this.$message({
+                message: result.msg,
+                type: 'error'
+              });
+              return;
+            }
+
+            this.parentItemsList = result.data;
+          })
+    },
+
+    onFormChanged() {
+      this.loadGroups();
+    }
+  }
+
+
+}
+
+</script>

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

@@ -54,6 +54,13 @@
             prop="formName"
             label="表单名称">
         </el-table-column>
+        <el-table-column>
+          <template v-slot="scope">
+            <el-button type="text" @click="onEditItemsBtnClicked(scope.row)">
+              编辑表单
+            </el-button>
+          </template>
+        </el-table-column>
       </el-table>
 
       <el-pagination
@@ -92,7 +99,7 @@ export default {
   components: {},
   activated() {
     this.$nextTick(() => {
-      this.$refs.table.doLayout(); // 解决表格错位
+      // this.$refs.table.doLayout(); // 解决表格错位
     });
   },
   mounted() {
@@ -168,6 +175,20 @@ export default {
       if (loading) {
         loading.close();
       }
+    },
+
+    /**
+     * 编辑表单项按钮按下
+     */
+    onEditItemsBtnClicked(row) {
+      this.$router.push({
+        path: '/dyform-itemList',
+        query: {
+          customerIdFixed: 1,
+          customerId: row.customerId,
+          formId: row.id
+        }
+      })
     }
   }
 };

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

@@ -3,7 +3,8 @@
     <el-card shadow="never" class="aui-card--fill">
       <el-form :inline="true" ref="queryForm" :model="formQueryParams" :rules="formQueryRules">
         <el-form-item label="选择客户" prop="customerId">
-          <el-select v-model="formQueryParams.customerId" clearable placeholder="请选择" @change="onCustomerSelChanged">
+          <!--          @change="onCustomerSelChanged"-->
+          <el-select v-model="formQueryParams.customerId" clearable placeholder="请选择" :disabled="customerIdFixed">
             <el-option
                 v-for="item in customerList"
                 :key="item.customerId"
@@ -13,7 +14,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="选择表单" prop="formId">
-          <el-select v-model="formQueryParams.formId" clearable placeholder="请选择">
+          <el-select v-model="formQueryParams.formId" clearable placeholder="请选择" :disabled="customerIdFixed">
             <el-option
                 v-for="item in formList"
                 :key="item.id"
@@ -29,6 +30,11 @@
           <!--        <el-button @click="onResetBtnClicked">重置</el-button>-->
         </el-form-item>
       </el-form>
+
+      <!--        按钮组-->
+      <el-button-group>
+        <el-button type="primary" @click="onAddBtnClicked">新增</el-button>
+      </el-button-group>
     </el-card>
 
     <el-card>
@@ -62,6 +68,11 @@
             {{ scope.row.optionSourceType == 'local' ? '直接定义' : 'api获取' }}
           </template>
         </el-table-column>
+        <el-table-column prop="required" label="是否必填" width="80">
+          <template v-slot="scope">
+            {{ scope.row.required ? '是' : '否' }}
+          </template>
+        </el-table-column>
         <el-table-column
             prop="optionSourceValue"
             label="选项来源值">
@@ -76,16 +87,22 @@
         </el-table-column>
       </el-table>
     </el-card>
+
+    <el-dialog ref="createFormItemDlg" title="新增" :visible.sync="createDlgVisible">
+      <CreateFormItem ref="createFormItemComp"></CreateFormItem>
+    </el-dialog>
   </div>
 </template>
 <script>
 
-import {mapGetters} from 'vuex';
+import CreateFormItem from './createFormItem'
-import {Loading} from 'element-ui'; // 引入Loading服务
 
 let loading; // 加载动画
 
 export default {
+  components: {
+    CreateFormItem
+  },
   data() {
     return {
       formQueryParams: {
@@ -99,33 +116,57 @@ export default {
         formId: [{required: true, message: '请选择表单'}]
       },
       formItemList: [],
-      mergeCellMap: {}
+      mergeCellMap: {},
+      createDlgVisible: false,
+      customerIdFixed: false
     }
   },
-  mounted() {
+
-    this.loadCustomerList();
+  // 每次页面进入都会执行
+  async activated() {
+    this.customerIdFixed = this.$route.query.customerIdFixed === '1';
+    let formId = this.$route.query.formId
+    let customerId = this.$route.query.customerId;
+
+    this.loadCustomerList()
+        .then(() => {
+          if (this.customerIdFixed) {
+            this.formQueryParams.customerId = customerId;
+          }
+        })
+        .then(async () => {
+          await this.loadFormList();
+        })
+        .then(() => {
+          console.log('自动选中1')
+          if (this.customerIdFixed) {
+            this.formQueryParams.formId = formId;
+            console.log('自动选中1:', this.formQueryParams.formId)
+          }
+        });
   },
 
   methods: {
     /**
      * 加载客户列表
      */
-    loadCustomerList() {
+    async loadCustomerList() {
-      this.$http.get('/oper/crm/customer/getvalidcustomerlist').then(({data: res}) => {
+      await this.$http.get('/oper/crm/customer/getvalidcustomerlist').then(({data: res}) => {
         if (res.code === 0) {
           this.customerList = res.data;
           this.customerList.unshift({"customerId": "default", "customerName": "模板"})
         } else {
           this.$message.error(res.msg)
         }
+        console.log('客户加载完成')
       })
     },
 
     /**
      * 加载表单列表
      */
-    loadFormList() {
+    async loadFormList() {
-      this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formQueryParams.customerId}&formName=&pageNo=1&pageSize=100`)
+      await this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formQueryParams.customerId}&formName=&pageNo=1&pageSize=100`)
           .then(({data: httpdata, status: httpStatus}) => {
             if (httpdata.code === 0) {
               this.formList = httpdata.data.list;
@@ -135,6 +176,8 @@ export default {
                 nessage: res.msg
               })
             }
+
+            console.log('客户加载完成')
           })
     },
 
@@ -187,8 +230,14 @@ export default {
       let formCode = rowData.formCode;
       let itemGroupName = rowData.itemGroupName;
 
-      let {groupChanged: formCodeGroupChanged, mergeRowsQty4LastRow: formCodeMergeRowsQty4LastRow} = this.setAndGetMergeRows('formCode', formCode);
+      let {
-      let {groupChanged: groupGroupChanged, mergeRowsQty4LastRow: groupMergeRowsQty4LastRow} = this.setAndGetMergeRows('groupName', itemGroupName);
+        groupChanged: formCodeGroupChanged,
+        mergeRowsQty4LastRow: formCodeMergeRowsQty4LastRow
+      } = this.setAndGetMergeRows('formCode', formCode);
+      let {
+        groupChanged: groupGroupChanged,
+        mergeRowsQty4LastRow: groupMergeRowsQty4LastRow
+      } = this.setAndGetMergeRows('groupName', itemGroupName);
 
       // 若合并的分组变了，那么给上一条数据设置上值
       if (formCodeGroupChanged) {
@@ -281,11 +330,35 @@ export default {
 
       if (columnKey === 'itemGroupName') {
         rst = [row.groupNameMergeRows, 1];
-        console.log(columnKey, ":", rst)
       }
 
       return rst;
-    }
+    },
+
+    /**
+     * "新增"按钮按下
+     */
+    onAddBtnClicked() {
+      this.createDlgVisible = true;
+      this.$nextTick(() => {
+        this.$refs['createFormItemComp'].initData({
+          formId: this.formQueryParams.formId,
+          customerId: this.formQueryParams.customerId
+        })
+      })
+    },
+  },
+
+  watch: {
+    // 监听对象中的属性
+    'formQueryParams.customerId': {
+      handler: function (newVal, oldVal) {
+        // 要在watch中调用函数，不能使用箭头函数定义回调，必须用function
+        this.loadFormList();
+      },
+      immediate: true
+    },
   }
 }
+
 </script>