diff --git a/epmet-oper-web/.env.development b/epmet-oper-web/.env.development
index 93a8bde..4f5c1a9 100644
--- a/epmet-oper-web/.env.development
+++ b/epmet-oper-web/.env.development
@@ -3,6 +3,6 @@ NODE_ENV=development
 VUE_APP_API_SERVER =  http://192.168.1.144/api
 # VUE_APP_API_SERVER =  http://192.168.51.36:8080/api
 # VUE_APP_API_SERVER =  https://epmet-dev.elinkservice.cn/api
-VUE_APP_NODE_ENV=dev 
+VUE_APP_NODE_ENV=dev
 #项目根路径
-VUE_APP_PUBLIC_PATH=epmet-oper
\ No newline at end of file
+VUE_APP_PUBLIC_PATH=epmet-oper
diff --git a/epmet-oper-web/src/views/modules/dyform/createFormItem.vue b/epmet-oper-web/src/views/modules/dyform/createFormItem.vue
new file mode 100644
index 0000000..24105c6
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/dyform/createFormItem.vue
@@ -0,0 +1,360 @@
+<template>
+  <el-form :model="formModel" :rules="createRules" ref="createForm">
+    <el-form-item prop="customerId" label="客户" label-width="150px">
+      <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="150px">
+      <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="150px">
+      <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="父组件" label-width="150px">
+      <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-item prop="tableName" label="数据库表名称" label-width="150px">
+      <el-input v-model="formModel.tableName"></el-input>
+    </el-form-item>
+    <el-form-item prop="columnName" label="数据库列名称" label-width="150px">
+      <el-input v-model="formModel.columnName"></el-input>
+    </el-form-item>
+    <el-form-item prop="label" label="名称" label-width="150px">
+      <el-input v-model="formModel.label" style="width: 198px"></el-input>
+    </el-form-item>
+
+    <el-form-item prop="required" label="是否必填" label-width="150px">
+      <el-checkbox v-model="formModel.required"></el-checkbox>
+    </el-form-item>
+
+    <el-form-item prop="exportFlag" label="是否用于导出" label-width="150px">
+      <el-checkbox v-model="formModel.exportFlag"></el-checkbox>
+    </el-form-item>
+
+    <el-form-item prop="policyFlag" label="是否用于政策找人" label-width="150px">
+      <el-checkbox v-model="formModel.policyFlag"></el-checkbox>
+    </el-form-item>
+
+    <el-form-item prop="itemType" label="组件类型" label-width="150px">
+      <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="150px">
+      <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="150px">
+      <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>
+    <el-button @click="onCancelBtnClick" type="primary">取消</el-button>
+  </el-form>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      // 表单内容
+      formModel: {
+        customerId: null,
+        formId: null,
+        itemGroupId: null,
+        parentItemId: null,
+        label: null,
+        tableName: null,
+        columnName: null,
+        itemType: null,
+        required: false,
+        optionSourceType: null,
+        optionSourceValue: null,
+        exportFlag: null,
+        policyFlag: null
+      },
+      customerIdFixed: false,
+      customerList: [],
+      formList: [],
+      optionSourceTypeDisabled: false,
+      createRules: {
+        customerId: [
+          {required: true, message: '客户为必填项'}
+        ],
+        formId: [
+          {required: true, message: '表单为必填项'}
+        ],
+        itemGroupId: [
+          {required: true, message: '分组为必填项'}
+        ],
+        label: [
+          {required: true, message: '名称为必填项'}
+        ],
+        itemType: [
+          {required: true, message: '组件类型为必填项'}
+        ],
+        optionSourceType: [
+          {required: true, message: '选项来源类型为必填项'}
+        ], exportFlag: [
+          {required: true, message: '是否可用于导出为必填项'}
+        ], policyFlag: [
+          {required: true, message: '是否可用于政策找人为必填项'}
+        ],
+      },
+
+      // 分组列表
+      groupList: [],
+
+      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获取',
+        }
+      ]
+    }
+
+
+  },
+
+  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')
+    },
+
+    // 加载分组列表
+    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;
+          })
+    },
+
+    /**
+     * 加载客户列表
+     */
+    loadCustomerList() {
+      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() {
+      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: httpdata.msg
+              })
+            }
+
+            console.log('客户加载完成')
+          })
+    },
+
+    /**
+     * 分组选中
+     */
+    onGroupChanged() {
+      this.listItemsByGroupId();
+    },
+
+    /**
+     * 加载分组下的item列表
+     */
+    listItemsByGroupId() {
+      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;
+          })
+    },
+
+    /**
+     * 组件类型选项变更
+     */
+    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(`/oper/customize/icform/config/createItem`, this.formModel).then(({status:httpStatus, data: httpData}) => {
+          if (httpData.code === 0) {
+            this.$message({
+              type: 'success',
+              message:"提交成功"
+            });
+
+            this.resetForm()
+            this.$emit("onClose", { type: 'submit' }) // 关闭窗口
+          } else {
+            this.$message({
+              type: 'error',
+              message: httpData.msg
+            });
+          }
+        })
+      })
+
+    },
+
+    /**
+     * 取消
+     */
+    onCancelBtnClick() {
+      this.resetForm()
+      this.$emit("onClose", { type: 'cancel' })
+    },
+
+    resetForm() {
+      this.$refs['createForm'].resetFields();
+    },
+
+    /**
+     * 客户选中事件
+     */
+    onCustomerChanged() {
+      this.loadFormList()
+    },
+
+    onFormChanged() {
+      this.loadGroups();
+    }
+  }
+
+
+}
+
+</script>
+<style lang="scss">
+.test {
+  width: 100px;
+}
+</style>
diff --git a/epmet-oper-web/src/views/modules/dyform/editFormItem.vue b/epmet-oper-web/src/views/modules/dyform/editFormItem.vue
new file mode 100644
index 0000000..c2d3201
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/dyform/editFormItem.vue
@@ -0,0 +1,374 @@
+<template>
+  <el-form :model="formModel" :rules="createRules" ref="editForm">
+    <el-form-item prop="customerId" label="客户" label-width="150px">
+      <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="150px">
+      <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="150px">
+      <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="父组件" label-width="150px">
+      <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-item prop="tableName" label="数据库表名称" label-width="150px">
+      <el-input v-model="formModel.tableName"></el-input>
+    </el-form-item>
+    <el-form-item prop="columnName" label="数据库列名称" label-width="150px">
+      <el-input v-model="formModel.columnName"></el-input>
+    </el-form-item>
+    <el-form-item prop="label" label="名称" label-width="150px">
+      <el-input v-model="formModel.label" style="width: 198px"></el-input>
+    </el-form-item>
+
+    <el-form-item prop="required" label="是否必填" label-width="150px">
+      <el-checkbox v-model="formModel.required"></el-checkbox>
+    </el-form-item>
+
+    <el-form-item prop="exportFlag" label="是否用于导出" label-width="150px">
+      <el-checkbox v-model="formModel.exportFlag"></el-checkbox>
+    </el-form-item>
+
+    <el-form-item prop="policyFlag" label="是否用于政策找人" label-width="150px">
+      <el-checkbox v-model="formModel.policyFlag"></el-checkbox>
+    </el-form-item>
+
+    <el-form-item prop="itemType" label="组件类型" label-width="150px">
+      <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="150px">
+      <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="150px">
+      <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>
+    <el-button @click="onCancelBtnClick" type="primary">取消</el-button>
+  </el-form>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      // 表单内容
+      formModel: {
+        id: null,
+        customerId: null,
+        formId: null,
+        itemGroupId: null,
+        parentItemId: null,
+        label: null,
+        tableName: null,
+        columnName: null,
+        itemType: null,
+        required: false,
+        optionSourceType: null,
+        optionSourceValue: null,
+        exportFlag: null,
+        policyFlag: null
+      },
+      customerIdFixed: false,
+      customerList: [],
+      formList: [],
+      optionSourceTypeDisabled: false,
+      createRules: {
+        customerId: [
+          { required: true, message: '客户为必填项' }
+        ],
+        formId: [
+          { required: true, message: '表单为必填项' }
+        ],
+        itemGroupId: [
+          {required: true, message: '分组为必填项'}
+        ],
+        label: [
+          {required: true, message: '名称为必填项'}
+        ],
+        itemType: [
+          {required: true, message: '组件类型为必填项'}
+        ],
+        optionSourceType: [
+          {required: true, message: '选项来源类型为必填项'}
+        ]
+        , optionSourceValue: [
+          {required: true, message: '选项来源为必填项'}
+        ], exportFlag: [
+          {required: true, message: '是否可用于导出为必填项'}
+        ], policyFlag: [
+          {required: true, message: '是否可用于政策找人为必填项'}
+        ],
+      },
+
+      // 分组列表
+      groupList: [],
+
+      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获取',
+        }
+      ]
+    }
+
+
+  },
+
+  activated() {
+
+    // this.loadCustomerList()
+
+    this.initData({})
+
+  },
+
+  methods: {
+    initData(id) {
+      this.customerIdFixed = true;
+
+      this.getItemDetail(id).then(() => {
+        this.loadCustomerList()
+        this.loadFormList()
+        this.loadGroups();
+        this.listItemsByGroupId()
+      })
+    },
+
+    /**
+     * 加载详情
+     */
+    async getItemDetail(id) {
+      await this.$http.get(`/oper/customize/icform/config/getFormItemDetail?formItemId=${id}`).then(({status: httpStatus, data: result}) => {
+        if (result.code !== 0) {
+          this.$message({
+            type: 'error',
+            message: result.msg
+          })
+          return
+        }
+        this.formModel = result.data
+      })
+    },
+
+    // 加载分组列表
+    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;
+          })
+    },
+
+    /**
+     * 加载客户列表
+     */
+    loadCustomerList() {
+      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() {
+      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',
+                message: httpdata.msg
+              })
+            }
+
+            console.log('客户加载完成')
+          })
+    },
+
+    /**
+     * 分组选中
+     */
+    onGroupChanged() {
+      this.listItemsByGroupId();
+    },
+
+    /**
+     * 加载分组下的item列表
+     */
+    listItemsByGroupId() {
+      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;
+          })
+    },
+
+    /**
+     * 组件类型选项变更
+     */
+    onItemTypeChanged(newValue) {
+      if (['select', 'cascader', 'radio', 'checkbox'].indexOf(newValue) >= 0) {
+        // 如果是这些，则需要定义选项来源
+        this.optionSourceTypeDisabled = false;
+        this.optionSourceType = "local";
+      } else {
+        this.optionSourceTypeDisabled = true;
+      }
+    },
+
+    /**
+     * 提交
+     */
+    onSubmitBtnClick() {
+      this.$refs['editForm'].validate(rst => {
+        if (!rst) {
+          return
+        }
+
+        this.$http.post(`/oper/customize/icform/config/updateItem`, this.formModel).then(({status:httpStatus, data: httpData}) => {
+          if (httpData.code === 0) {
+            this.$message({
+              type: 'success',
+              message:"提交成功"
+            });
+
+            this.resetForm()
+            this.$emit("onClose", { type: 'submit' }) // 关闭窗口
+          } else {
+            this.$message({
+              type: 'error',
+              message: httpData.msg
+            });
+          }
+        })
+      })
+
+    },
+
+    /**
+     * 取消
+     */
+    onCancelBtnClick() {
+      this.resetForm()
+      this.$emit("onClose", { type: 'cancel' })
+    },
+
+    resetForm() {
+      this.$refs['editForm'].resetFields();
+    },
+
+    /**
+     * 客户选中事件
+     */
+    onCustomerChanged() {
+      this.loadFormList()
+    },
+
+    onFormChanged() {
+      this.loadGroups();
+    }
+  }
+
+
+}
+
+</script>
+<style lang="scss">
+.test {
+  width: 100px;
+}
+</style>
diff --git a/epmet-oper-web/src/views/modules/dyform/formList.vue b/epmet-oper-web/src/views/modules/dyform/formList.vue
new file mode 100644
index 0000000..efd0935
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/dyform/formList.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="registerList">
+    <el-card shadow="never" class="aui-card--fill">
+      <div class="mod-demo__demo}">
+        <el-form :inline="true" ref="queryForm" :model="formQueryParams">
+          <el-form-item label="选择客户" prop="customerId">
+            <el-select v-model="formQueryParams.customerId" clearable placeholder="请选择">
+              <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="formName">
+            <el-input
+                placeholder="请输入内容"
+                v-model="formQueryParams.formName"
+                clearable>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="onSearchClicked">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="onResetBtnClicked">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+
+    <el-card>
+      <el-table
+          :data="formList"
+          style="width: 100%;margin-bottom: 20px;"
+          row-key="id"
+          border
+          default-expand-all
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+        <el-table-column
+            prop="customerName"
+            label="客户"
+            sortable
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="formCode"
+            label="表单编码"
+            sortable
+            width="180">
+        </el-table-column>
+        <el-table-column
+            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
+          background
+          layout="prev, pager, next"
+          @current-change="onCurrentPageChanged"
+          :current-page="this.pageArgs.currentPage"
+          :page-size="this.pageArgs.pageSize"
+          :total="this.pageArgs.total">
+      </el-pagination>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from 'vuex';
+import {Loading} from 'element-ui'; // 引入Loading服务
+
+let loading; // 加载动画
+export default {
+  data() {
+    return {
+      customerList: [],
+      formQueryParams: {
+        customerId: '',
+        formName: ''
+      },
+      formList: [],
+      pageArgs: {
+        pageSize: 20,
+        currentPage: 1,
+        total: 0
+      }
+    };
+  },
+  components: {},
+  activated() {
+    this.$nextTick(() => {
+      // this.$refs.table.doLayout(); // 解决表格错位
+    });
+  },
+  mounted() {
+    // eslint-disable-next-line
+    this.loadCustomerList();
+    this.searchFormList();
+  },
+  computed: {
+    tableHeight() {
+      return this.clientHeight - 60 - 80 - 80 - 70;
+    },
+    ...mapGetters(['clientHeight', 'env'])
+  },
+  methods: {
+    /**
+     * 加载客户列表
+     */
+    loadCustomerList() {
+      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)
+        }
+      })
+    },
+
+    searchFormList() {
+      this.$http.get(`/oper/customize/icform/config/listForms?customerId=${this.formQueryParams.customerId}&formName=${this.formQueryParams.formName}&pageNo=${this.pageArgs.currentPage}&pageSize=${this.pageArgs.pageSize}`)
+          .then(({data: httpdata, status: httpStatus}) => {
+            if (httpdata.code === 0) {
+              this.formList = httpdata.data.list;
+              this.pageArgs.total = httpdata.data.total;
+            } else {
+              this.$message({
+                type: 'error',
+                nessage: res.msg
+              })
+            }
+
+            console.log(this.pageArgs)
+          })
+    },
+
+    /**
+     * 搜索事件
+     */
+    onSearchClicked() {
+      this.searchFormList();
+    },
+
+    onResetBtnClicked() {
+      this.$refs['queryForm'].resetFields();
+    },
+
+    onCurrentPageChanged(currPage) {
+      this.pageArgs.currentPage = currPage;
+      this.searchFormList();
+    },
+
+    // 开启加载动画
+    startLoading() {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      });
+    },
+    // 结束加载动画
+    endLoading() {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+
+    /**
+     * 编辑表单项按钮按下
+     */
+    onEditItemsBtnClicked(row) {
+      this.$router.push({
+        path: '/dyform-itemList',
+        query: {
+          customerIdFixed: 1,
+          customerId: row.customerId,
+          formId: row.id
+        }
+      })
+    }
+  }
+};
+</script>
+<style lang="css">
+.aaa {
+  height: 100px;
+}
+
+/* .register .el-table .el-table__header-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+}*/
+/*
+.register .el-table .el-table__fixed-body-wrapper {
+  height: calc(100% - 44px);
+  margin-top: 44px;
+  overflow-y: auto !important;
+} */
+</style>
diff --git a/epmet-oper-web/src/views/modules/dyform/itemList.vue b/epmet-oper-web/src/views/modules/dyform/itemList.vue
new file mode 100644
index 0000000..c8b7275
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/dyform/itemList.vue
@@ -0,0 +1,447 @@
+<template>
+  <div>
+    <el-card shadow="never" class="aui-card--fill">
+      <el-form :inline="true" ref="queryForm" :model="formQueryParams" :rules="formQueryRules">
+        <el-form-item label="选择客户" prop="customerId">
+          <!--          @change="onCustomerSelChanged"-->
+          <el-select v-model="formQueryParams.customerId" clearable placeholder="请选择" :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">
+          <el-select v-model="formQueryParams.formId" clearable placeholder="请选择" :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>
+          <el-button @click="onSearchClicked">搜索</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>
+<!--      :span-method="mergeCells"-->
+<!--      default-expand-all-->
+      <el-table
+          :data="formItemList"
+          :span-method="mergeCells"
+          style="width: 100%"
+          row-key="id"
+          border
+          :tree-props="{children: 'children'}">
+        <el-table-column
+            prop="formCode"
+            label="表单编码"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="itemGroupName"
+            label="所属分组"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="label"
+            label="表单项名称"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="parentItemLabel"
+            label="上级表单项"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="optionSourceType"
+            label="选项来源类型">
+          <template slot-scope="scope">
+            {{ 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="选项来源值">
+        </el-table-column>
+        <el-table-column
+            prop="tableName"
+            label="数据库表名">
+        </el-table-column>
+        <el-table-column
+            prop="columnName"
+            label="数据库列名">
+        </el-table-column>
+        <el-table-column
+            prop="exportFlag"
+            label="是否用于导出">
+          <template v-slot="scope">
+            {{ scope.row.exportFlag === 1 ? '是' : '否' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+            prop="policyFlag"
+            label="是否用于政策找人">
+          <template v-slot="scope">
+            {{ scope.row.policyFlag === 1 ? '是' : '否' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template v-slot="scope">
+            <el-button type="text" @click="onDeleteSinglBtnClicked(scope.row.id)">删除</el-button>
+            <el-button type="text" @click="onEditBtnClicked(scope.row.id)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog ref="createFormItemDlg" title="新增" :visible.sync="createDlgVisible" v-if="createDlgVisible">
+      <CreateFormItem ref="createFormItemComp" @onClose="onCreateDlgClose"></CreateFormItem>
+    </el-dialog>
+
+    <el-dialog ref="editFormItemDlg" title="编辑" :visible.sync="editDlgVisible" v-if="editDlgVisible">
+      <EditFormItem ref="editFormItemComp" @onClose="onEditDlgClose"></EditFormItem>
+    </el-dialog>
+  </div>
+</template>
+<script>
+
+import CreateFormItem from './createFormItem'
+import EditFormItem from './editFormItem'
+
+let loading; // 加载动画
+
+export default {
+  components: {
+    CreateFormItem, EditFormItem
+  },
+  data() {
+    return {
+      formQueryParams: {
+        customerId: '',
+        formId: '',
+      },
+      customerList: [],
+      formList: [],
+      formQueryRules: {
+        customerId: [{required: true, message: '请选择客户'}],
+        formId: [{required: true, message: '请选择表单'}]
+      },
+      formItemList: [],
+      mergeCellMap: {},
+      createDlgVisible: false,
+      editDlgVisible: false,
+      customerIdFixed: false
+    }
+  },
+
+  // 每次页面进入都会执行
+  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(() => {
+          // 自动赋值
+          if (this.customerIdFixed) {
+            this.formQueryParams.formId = formId;
+            this.loadItemList(); // 加载item列表
+          }
+        });
+  },
+
+  methods: {
+    /**
+     * 加载客户列表
+     */
+    async loadCustomerList() {
+      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('客户加载完成')
+      })
+    },
+
+    /**
+     * 加载表单列表
+     */
+    async loadFormList() {
+      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;
+            } else {
+              this.$message({
+                type: 'error',
+                nessage: res.msg
+              })
+            }
+
+            console.log('客户加载完成')
+          })
+    },
+
+    /**
+     * 加载表单项
+     */
+    loadItemList() {
+      this.$refs['queryForm'].validate(rst => {
+        if (!rst) {
+          return;
+        }
+
+        let url = `/oper/customize/icform/config/listItems?customerId=${this.formQueryParams.customerId}&formId=${this.formQueryParams.formId}`
+        this.$http.get(url).then(({
+                                    status: httpStatus,
+                                    data: httpData
+                                  }) => {
+
+          if (httpData.code !== 0) {
+            this.$message({
+              type: 'error',
+              message: httpData.msg
+            });
+            return;
+          }
+
+          this.mergeCellMap = {}
+
+          for (let i = httpData.data.length - 1; i >= 0; i--) {
+            let item = httpData.data[i];
+            // 合并单元格数
+            this.setMergeRowQty(httpData.data[i], httpData.data[i + 1], i === 0);
+
+            // 设置hasChildren属性
+            // item.hasChildren = (item.children.length > 0);
+          }
+
+          this.formItemList = httpData.data;
+          console.log(this.formItemList)
+        })
+      })
+    },
+
+    /**
+     * 合并单元格数
+     * @param rowData 当前数据行
+     * @param lastRowData 上一条数据
+     * @returns {{groupNameMergeRows, formCodeMergeRows}}
+     */
+    setMergeRowQty(rowData, lastRowData, isTheFirstRow) {
+      let formCode = rowData.formCode;
+      let itemGroupName = rowData.itemGroupName;
+
+      let {
+        groupChanged: formCodeGroupChanged,
+        mergeRowsQty4LastRow: formCodeMergeRowsQty4LastRow
+      } = this.setAndGetMergeRows('formCode', formCode);
+      let {
+        groupChanged: groupGroupChanged,
+        mergeRowsQty4LastRow: groupMergeRowsQty4LastRow
+      } = this.setAndGetMergeRows('groupName', itemGroupName);
+
+      // 若合并的分组变了，那么给上一条数据设置上值
+      if (formCodeGroupChanged) {
+        lastRowData.formCodeMergeRows = formCodeMergeRowsQty4LastRow;
+      }
+
+      if (groupGroupChanged) {
+        lastRowData.groupNameMergeRows = groupMergeRowsQty4LastRow;
+      }
+
+      if (isTheFirstRow) {
+        // 如果是最后一条
+        rowData.formCodeMergeRows = this.mergeCellMap['formCode']['mergeRowsQty'];
+        rowData.groupNameMergeRows = this.mergeCellMap['groupName']['mergeRowsQty'];
+      } else {
+        rowData.formCodeMergeRows = 0;
+        rowData.groupNameMergeRows = 0;
+      }
+    },
+
+    setAndGetMergeRows(columnKey, cellValue) {
+      let dict4ThisColumn = this.mergeCellMap[columnKey];
+      if (!dict4ThisColumn) {
+        dict4ThisColumn = {};
+        dict4ThisColumn.cellValue = cellValue;
+        dict4ThisColumn.mergeRowsQty = 0;
+        this.mergeCellMap[columnKey] = dict4ThisColumn;
+      }
+
+      let groupChanged = false; // 分组是否变化
+      let mergeRowsQty4LastRow = dict4ThisColumn.mergeRowsQty; // 上个分组最后一条的数值
+
+      if (cellValue !== dict4ThisColumn.cellValue) {
+        // 分组变了
+        groupChanged = true;
+
+        dict4ThisColumn.cellValue = cellValue;
+        dict4ThisColumn.mergeRowsQty = 0;
+      } else {
+        // 分组没变
+        groupChanged = false;
+      }
+
+      dict4ThisColumn.mergeRowsQty++;
+
+      return {
+        groupChanged: groupChanged,
+        mergeRowsQty4LastRow: mergeRowsQty4LastRow,
+      };
+    },
+
+    /**
+     * 客户下拉框改变
+     * @param currCustomerId
+     */
+    onCustomerSelChanged(currCustomerId) {
+      this.formQueryParams.customerId = currCustomerId;
+      this.loadFormList();
+    },
+
+    /**
+     * 点击搜索按钮
+     */
+    onSearchClicked() {
+      this.loadItemList();
+    },
+
+    /**
+     * 合并单元格回调
+     * @param row
+     * @param column
+     * @param rowIndex
+     * @param columnIndex
+     * @returns {(default.methods.mergeCellMap.formCode.mergeRowsQty|number|*|number)[]|number[]}
+     */
+    mergeCells({row, column, rowIndex, columnIndex}) {
+
+      let columnKey = column.property;
+
+      if (columnKey !== 'formCode' && columnKey !== 'itemGroupName') {
+        // if (columnKey !== 'formCode') {
+        return [1, 1];
+      }
+
+      let rst;
+
+      if (columnKey === 'formCode') {
+        rst = [row.formCodeMergeRows, 1];
+      }
+
+      if (columnKey === 'itemGroupName') {
+        rst = [row.groupNameMergeRows, 1];
+      }
+
+      return rst;
+    },
+
+    /**
+     * "新增"按钮按下
+     */
+    onAddBtnClicked() {
+      this.createDlgVisible = true;
+      this.$nextTick(() => {
+        this.$refs['createFormItemComp'].initData({
+          formId: this.formQueryParams.formId,
+          customerId: this.formQueryParams.customerId
+        })
+      })
+    },
+
+    /**
+     * 编辑按钮按下
+     */
+    onEditBtnClicked(id) {
+      this.editDlgVisible = true;
+      this.$nextTick(() => {
+        this.$refs['editFormItemComp'].initData(id)
+      })
+    },
+
+    onCreateDlgClose({ type: type }) {
+      this.createDlgVisible = false;
+      if (type === 'submit') {
+        this.loadItemList() // 如果是提交，就重新加载表单
+      }
+    },
+
+    onEditDlgClose({ type: type }) {
+      this.editDlgVisible = false;
+      if (type === 'submit') {
+        this.loadItemList() // 如果是提交，就重新加载表单
+      }
+    },
+
+    /**
+     * 单个删除
+     */
+    onDeleteSinglBtnClicked(id) {
+      this.$confirm('删除操作不可恢复，确定删除该条数据吗？').then((result) => {
+        if (result) {
+          // 删除
+
+          this.$http.post('/oper/customize/icform/config/deleteSingleById', { id: id })
+              .then(({status: httpStatus, data: result}) => {
+                if (result.code !== 0) {
+                  this.$message({
+                    type: 'error',
+                    message: result.msg
+                  })
+                  return
+                }
+
+                this.$message({
+                  type: 'success',
+                  message:"删除成功"
+                })
+                this.loadItemList(); // 重新加载
+              })
+        }
+      })
+    }
+  },
+
+  watch: {
+    // 监听对象中的属性
+    'formQueryParams.customerId': {
+      handler: function (newVal, oldVal) {
+        // 要在watch中调用函数，不能使用箭头函数定义回调，必须用function
+        this.loadFormList();
+      },
+      immediate: true
+    },
+  }
+}
+
+</script>