加入动态列，动态查询条件可配置。 （待优化）

src/api/system/form.js

@@ -1,12 +1,23 @@
 import fetch from '@/utils/fetch'
 export function getTables(){
     return fetch({
-        url: '/form/GetTables',
+        url: '/form/getTables',
         method: 'post',
 
       })
 }
 
+export function getKeyBytableName(tablename){
+    return fetch({
+        url: '/form/getKey',
+        method: 'post',
+        params:{
+            tablename
+        }
+
+      })
+}
+
 export function GetFormDetail(tablename){
     return fetch({
         url: '/form/detail',

src/components/FormDesigner/Container.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container>
-    <el-aside style="wdith: 250px;">
+    <el-aside style="width: 20%;max-width:250px">
 
       <div class="components-list">
         <div class="widget-cate">基础字段</div>
@@ -71,15 +71,19 @@
       </el-main>
     </el-container>
 
-    <el-aside class="widget-config-container">
+    <el-aside class="widget-config-container" style="width:30%;">
       <el-container>
         <el-header height="45px">
           <div class="config-tab" :class="{active: configTab=='widget'}" @click="handleConfigSelect('widget')">字段属性</div>
           <div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">表单属性</div>
+               <div class="config-tab" :class="{active: configTab=='list'}" @click="handleConfigSelect('list')">列表属性</div>
+
         </el-header>
         <el-main class="config-content">
           <widget-config v-show="configTab=='widget'" :data="widgetFormSelect"></widget-config>
           <form-config v-show="configTab=='form'" :data="widgetForm.config"></form-config>
+          <list-config v-show="configTab=='list'" :data="widgetForm.config" :tablename="selectform"></list-config>
+
         </el-main>
       </el-container>
 
@@ -152,6 +156,8 @@
 import Draggable from 'vuedraggable'
 import WidgetConfig from './WidgetConfig'
 import FormConfig from './FormConfig'
+import ListConfig from './ListConfig'
+
 import WidgetForm from './WidgetForm'
 import CusDialog from './CusDialog'
 import icon from 'vue-awesome/components/Icon'
@@ -175,8 +181,8 @@ import 'vue-awesome/icons/chalkboard'
 import 'vue-awesome/icons/upload'
 
 import GenerateForm from './GenerateForm'
-// import JSONEditor from 'jsoneditor'
-// import 'jsoneditor/dist/jsoneditor.min.css'
+ import JSONEditor from 'jsoneditor'
+ import 'jsoneditor/dist/jsoneditor.min.css'
 import Clipboard from 'clipboard'
 import {basicComponents, layoutComponents, advanceComponents} from './componentsConfig.js'
 
@@ -193,6 +199,7 @@ export default {
     Draggable,
     WidgetConfig,
     FormConfig,
+    ListConfig,
     WidgetForm,
     CusDialog,
     GenerateForm,
@@ -207,11 +214,14 @@ export default {
         list: [],
         config: {
           labelWidth: 100,
-          labelPosition: 'top'
+          labelPosition: 'top',
+                    columnList:[]
+
         },
+       
       },
       configTab: 'widget',
-      widgetFormSelect: null,
+      widgetFormSelect: "",
       previewVisible: false,
       jsonVisible: false,
       codeVisible: false,
@@ -278,8 +288,8 @@ export default {
       this.jsonTemplate = this.widgetForm
       this.$nextTick(() => {
 
-        // const editor = ace.edit('jsoneditor')
-        // // editor.session.setMode("ace/mode/json")
+        const editor = ace.edit('jsoneditor')
+       editor.session.setMode("ace/mode/json")
 
         const btnCopy = new Clipboard('#copybtn')
       })
@@ -322,8 +332,11 @@ export default {
         list: [],
         config: {
           labelWidth: 100,
-          labelPosition: 'top'
+          labelPosition: 'top',
+                              columnList:[]
+
         },
+      
       },
           this.IsNew = true;
           this.ID = "";
@@ -347,8 +360,11 @@ export default {
 @import './styles/index.scss';
 
 .widget-empty{
-  background: url('./assets/form_empty.png') no-repeat;
-  background-position: 50%;
+  background: url('../../assets/form_bg.png') no-repeat;
+  background-position: 50% 30%;
+  background-size:80%;
+  // background-size: 30% 30%;
+  
 }
 
 </style>

src/components/FormDesigner/GenerateForm.vue

@@ -39,100 +39,102 @@
 
 <script>
 //常规组件
-import GenetateFormItem from './GenerateFormItem'
-
+import GenetateFormItem from "./GenerateFormItem";
 
 ///自定义组件
-import UploadAffix from '@/components/UploadAffix'  //上传模块
+import UploadAffix from "@/components/UploadAffix"; //上传模块
 
 export default {
-  name: 'fm-generate-form',
+  name: "fm-generate-form",
   components: {
     GenetateFormItem,
     UploadAffix
   },
-  props: ['data', 'remote', 'value','clear','disabled','upload_params'],  
-   //data 初始化表单
-   //remote 异步远程请求方法
-   //value 表单赋值
-   //clear 清空表单
-   //disabled 表单只读
-   //upload_params 自定义 文件上传模块的参数  
-  data () {
+  props: ["data", "remote", "value", "clear", "disabled", "upload_params"],
+  //data 初始化表单
+  //remote 异步远程请求方法
+  //value 表单赋值
+  //clear 清空表单
+  //disabled 表单只读
+  //upload_params 自定义 文件上传模块的参数
+  data() {
     return {
       models: {},
       rules: {}
-    }
+    };
   },
-  created () {
-    this.generateModle(this.data.list)
+  created() {
+    this.generateModle(this.data.list);
   },
   methods: {
-    generateModle (genList) {
+    generateModle(genList) {
       for (let i = 0; i < genList.length; i++) {
-        if (genList[i].type === 'grid') {
+        if (genList[i].type === "grid") {
           genList[i].columns.forEach(item => {
-            this.generateModle(item.list)
-          })
+            this.generateModle(item.list);
+          });
         } else {
           if (Object.keys(this.value).indexOf(genList[i].model) >= 0) {
-            this.models[genList[i].model] = this.value[genList[i].model]
+            this.models[genList[i].model] = this.value[genList[i].model];
           } else {
-            if (genList[i].type === 'blank') {
-              this.models[genList[i].model] = genList[i].options.defaultType === 'String' ? '' : (genList[i].options.defaultType === 'Object' ? {} : [])
+            if (genList[i].type === "blank") {
+              this.models[genList[i].model] =
+                genList[i].options.defaultType === "String"
+                  ? ""
+                  : genList[i].options.defaultType === "Object"
+                    ? {}
+                    : [];
             } else {
-              this.models[genList[i].model] = genList[i].options.defaultValue
+              this.models[genList[i].model] = genList[i].options.defaultValue;
             }
-            
           }
-          
+
           if (this.rules[genList[i].model]) {
-            this.rules[genList[i].model] = [...this.rules[genList[i].model], ...genList[i].rules]
+            this.rules[genList[i].model] = [
+              ...this.rules[genList[i].model],
+              ...genList[i].rules
+            ];
           } else {
-            this.rules[genList[i].model] = [...genList[i].rules]
+            this.rules[genList[i].model] = [...genList[i].rules];
           }
-          
         }
       }
-
     },
-    getData () {
+    getData() {
       return new Promise((resolve, reject) => {
         this.$refs.generateForm.validate(valid => {
           if (valid) {
-            resolve(this.models)
+            resolve(this.models);
           } else {
-            reject(new Error('表单数据校验失败').message)
+            reject(new Error("表单数据校验失败").message);
           }
-        })
-      })
+        });
+      });
     },
-    refresh () {
-
-                  for(let key in this.models){
-                    console.log(key)
-                    this.models[key] = ""
-                  }
+    refresh() {
+      for (let key in this.models) {
+        console.log(key);
+        this.models[key] = "";
+      }
     }
   },
   watch: {
     value: {
       deep: true,
-      handler (val) {
-        console.log(JSON.stringify(val))
-        this.$refs.generateForm.clearValidate()
-        this.models = {...this.models, ...val}
+      handler(val) {
+        console.log(JSON.stringify(val));
+        this.$refs.generateForm.clearValidate();
+        this.models = { ...this.models, ...val };
       }
     },
-    clear:{
-      immediate:true,
-      deep:true,
-      handler(val){
-        console.log(val)
-        if(val)
-        this.refresh()
+    clear: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        console.log(val);
+        if (val) this.refresh();
       }
     }
   }
-}
+};
 </script>

src/components/FormDesigner/ListConfig.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-transfer
+    v-model="selectList"
+    :props="{
+      key: 'COLUMN_NAME',
+      label: 'COLUMN_COMMENT'
+    }"
+    :data="allList"
+    :right-default-checked="already_list">
+  </el-transfer>
+</template>
+
+<script>
+import { getKeyBytableName } from "@/api/system/form";
+export default {
+  data() {
+    return {
+      allList: [],
+      selectList:[]
+    };
+  },
+  computed:{
+      already_list(){
+        let arr = [];
+        this.data.columnList.forEach(item=>{
+          arr.push(item.value)
+        })
+        return arr
+      }
+
+  },
+  props: ["data", "tablename"],
+  watch: {
+    tablename: {
+      handler(val) {
+        getKeyBytableName(val).then(res => {
+          console.log(res);
+          this.allList = res.data;
+
+          this.allList.forEach(item => {
+            item.COLUMN_NAME = item.COLUMN_NAME.toLowerCase();
+          });
+        });
+      }
+    },
+    selectList: {
+      handler(val) {
+        let arr = this.selectList;
+
+        console.log(this.selectList);
+        let newarr = [];
+
+        arr.forEach(item => {
+            this.allList.forEach(temp => {
+              let obj = temp;
+              if (obj.COLUMN_NAME == item) {
+                newarr.push({
+                  label: obj.COLUMN_COMMENT,
+                  value: obj.COLUMN_NAME
+                });
+              }
+            });
+        });
+
+        this.data.columnList = newarr;
+      }
+    }
+  }
+};
+</script>

src/components/FormDesigner/WidgetForm.vue

@@ -62,11 +62,30 @@
 <script>
 import Draggable from 'vuedraggable'
 import WidgetFormItem from './WidgetFormItem'
-
+import icon from 'vue-awesome/components/Icon'
+import 'vue-awesome/icons/regular/keyboard'
+import 'vue-awesome/icons/regular/trash-alt'
+import 'vue-awesome/icons/regular/clone'
+import 'vue-awesome/icons/regular/dot-circle'
+import 'vue-awesome/icons/regular/check-square'
+import 'vue-awesome/icons/bars'
+import 'vue-awesome/icons/regular/calendar-alt'
+import 'vue-awesome/icons/regular/clock'
+import 'vue-awesome/icons/th'
+import 'vue-awesome/icons/sort-numeric-up'
+import 'vue-awesome/icons/regular/star'
+import 'vue-awesome/icons/palette'
+import 'vue-awesome/icons/regular/caret-square-down'
+import 'vue-awesome/icons/toggle-off'
+import 'vue-awesome/icons/sliders-h'
+import 'vue-awesome/icons/regular/image'
+import 'vue-awesome/icons/chalkboard'
+import 'vue-awesome/icons/upload'
 export default {
   components: {
     Draggable,
-    WidgetFormItem
+    WidgetFormItem,
+    icon
   },
   props: ['data', 'select'],
   data () {