动态表单配置

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

@@ -238,7 +238,7 @@ export default {
             } else {
               this.$message({
                 type: 'error',
-                nessage: res.msg
+                nessage: httpdata.msg
               })
             }
 
@@ -250,6 +250,13 @@ export default {
      * 分组选中
      */
     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

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

@@ -0,0 +1,360 @@
+<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"
+                   :key="group.groupId"
+                   :label="group.groupLabel"
+                   :value="group.groupId">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <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"
+                   :label="pi.label"
+                   :value="pi.id">
+        </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>
+
+    <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.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
+      },
+      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: '选项来源为必填项'}
+        ],
+      },
+
+      // 分组列表
+      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
+        debugger
+      })
+    },
+
+    // 加载分组列表
+    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['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>

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

@@ -26,9 +26,6 @@
         <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>
 
       <!--        按钮组-->
@@ -91,23 +88,34 @@
             prop="columnName"
             label="数据库列名">
         </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="onClose"></CreateFormItem>
+      <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
+    CreateFormItem, EditFormItem
   },
   data() {
     return {
@@ -124,6 +132,7 @@ export default {
       formItemList: [],
       mergeCellMap: {},
       createDlgVisible: false,
+      editDlgVisible: false,
       customerIdFixed: false
     }
   },
@@ -357,11 +366,56 @@ export default {
       })
     },
 
-    onClose({ type: type }) {
+    /**
+     * 编辑按钮按下
+     */
+    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.createDlgVisible = 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(); // 重新加载
+              })
+        }
+      })
     }
   },