wans

src/views/custom/form/modules/BaseForm.vue

@@ -70,11 +70,11 @@
         :labelCol="BaseTool.Constant.labelCol"
         :wrapperCol="BaseTool.Constant.wrapperCol"
       >
-        <a-checkbox-group v-model="formValue.queryField" @change="onChange">
+        <a-checkbox-group v-model="formValue.queryFields" @change="onChange">
           <a-row>
-            <a-col :span="8" v-for="item in formComponentConfig.components" :key="item.value">
-              <a-checkbox :value="item.value">
-                {{ item.label }}
+            <a-col :span="8" v-for="item in queryFields" :key="item.fieldName">
+              <a-checkbox :value="item">
+                {{ item.comments }}
               </a-checkbox>
             </a-col>
           </a-row>
@@ -107,6 +107,18 @@ export default {
       formComponentConfig: {}
     }
   },
+  computed: {
+    queryFields () {
+      return this.formComponentConfig.components.map(item => {
+        return {
+          comments: item.label,
+          fieldName: item.value,
+          dataType: item.type,
+          dataJson: JSON.stringify(item.attrs)
+        }
+      })
+    }
+  },
   props: {},
   created () {
     // 下拉框map

src/views/test/Test1 copy.vue

@@ -0,0 +1,225 @@
+<template>
+  <a-row :gutter="10">
+    <a-col :span="5">
+      <a-card title="基础" >
+        <a-row>
+          <VueDraggable
+            v-model="componentBaseList"
+            :animation="150"
+            :group="{ name: 'people', pull: 'clone', put: false }"
+            :sort="false"
+            :clone="onClone"
+          >
+            <a-col
+              :span="12"
+              v-for="item in componentBaseList"
+              :key="item.id">
+              <div
+                class="hover type"
+              >
+                <a-space>
+                  <a-icon type="profile" /> {{ item.name }}
+                </a-space>
+              </div>
+            </a-col>
+          </VueDraggable>
+        </a-row>
+      </a-card>
+      <a-card title="高级" >
+        <a-row>
+          <VueDraggable
+            v-model="componenHidetList"
+            :animation="150"
+            :group="{ name: 'people', pull: 'clone', put: false }"
+            :sort="false"
+            :clone="onClone"
+          >
+            <a-col
+              :span="12"
+              v-for="item in componenHidetList"
+              :key="item.id">
+              <div
+                class="hover type"
+              >
+                <a-space>
+                  <a-icon type="profile" /> {{ item.name }}
+                </a-space>
+              </div>
+            </a-col>
+          </VueDraggable>
+        </a-row>
+      </a-card>
+    </a-col>
+    <a-col :span="15">
+      <a-card>
+        <a-form
+          :form="form"
+          :labelCol="BaseTool.Constant.labelCol"
+          :wrapperCol="BaseTool.Constant.wrapperCol">
+          <a-row>
+            <VueDraggable
+              v-model="list2"
+              :animation="150"
+              group="people"
+              style="min-height:600px"
+            >
+              <MComponent
+                class="hover"
+                v-for="item in list2"
+                :key="item.id"
+                :config="config"
+                :detail="item"
+                @select="handleSelect"
+                @selectInfo="handleInfoSelect"
+              />
+            </VueDraggable>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-button type="primary" @click="handleSubmit">提交</a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-card>
+    </a-col>
+    <a-col :span="4">
+      <Detail :config="config" ref="detail" @delete="handleDelete" @addForm="addForm"/>
+    </a-col>
+    <SelectInfo ref="selectInfo" @selected="handleInfoSelected" />
+  </a-row>
+</template>
+
+<script>
+import { VueDraggable } from 'vue-draggable-plus'
+import Detail from './modules/Detail.vue'
+import MComponent from './modules/Component.vue'
+import SelectInfo from './modules/SelectInfo'
+
+import { componentBaseList, componenHidetList } from './modules/components'
+export default {
+  name: 'Test1',
+  components: {
+    VueDraggable,
+    Detail,
+    MComponent,
+    SelectInfo
+  },
+  data () {
+    return {
+      form: this.$form.createForm(this),
+      componentBaseList,
+      componenHidetList,
+      list2: [],
+      num: 1,
+      detail: {},
+      config: {
+        layout: 2
+      }
+    }
+  },
+  provide () {
+    return {
+      getFormList: () => {
+        return this.list2
+      }
+    }
+  },
+  watch: {
+    list2: {
+      deep: true,
+      handler (val) {
+        this.num++
+      }
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.handleSelect({}, this.config)
+  },
+  methods: {
+    onClone (element) {
+      // 生成随机id
+      const val = {
+        ...JSON.parse(JSON.stringify(element)),
+        value: `${element.value}${this.num}`,
+        id: Math.floor(Math.random() * 10000000000000)
+      }
+      this.handleSelect(val)
+      return val
+    },
+    update (val) {
+      console.log(val)
+    },
+    addForm (val) {
+      val.forEach(item => {
+        this.list2.push({
+          id: item.bind,
+          name: '单行文本',
+          type: 'input',
+          value: item.bind,
+          dependentId: false,
+          required: true,
+          label: item.columnComment,
+          attrs: {
+            placeholder: '请输入',
+            disabled: true
+          }
+        })
+      })
+    },
+    handleDelete (val) {
+      this.list2 = this.list2.filter(v => v.id !== val.id)
+    },
+    handleSubmit () {
+      const {
+        form: { validateFieldsAndScroll }
+      } = this
+      this.confirmLoading = true
+      validateFieldsAndScroll((errors, values) => {
+        console.log(values)
+        if (errors) {
+          this.confirmLoading = false
+        }
+      })
+    },
+    handleSelect (item) {
+      this.$refs.detail.base(item, this.config)
+    },
+    handleInfoSelect (item) {
+      this.$refs.selectInfo.base(item)
+    },
+    handleInfoSelected (keys, rows, detail) {
+      const {
+        form: { setFieldsValue }
+      } = this
+      if (detail.attrs.selectType === 'radio') {
+        const data = rows[0]
+        const value = {}
+        detail.attrs.connect.forEach(item => {
+          value[item.bind] = data[item.columnName]
+        })
+        this.$nextTick(() => {
+          setFieldsValue(value)
+        })
+      } else {
+        this.$nextTick(() => {
+          setFieldsValue({
+            [detail.attrs.connect[0].bind]: keys
+          })
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.type{
+border: 1px solid #ccc;
+padding: 5px;
+margin: 5px;
+border-radius: 5px;
+}
+
+</style>

src/views/test/Test1.vue

@@ -1,225 +1,36 @@
 <template>
   <a-row :gutter="10">
     <a-col :span="5">
-      <a-card title="基础" >
-        <a-row>
-          <VueDraggable
-            v-model="componentBaseList"
-            :animation="150"
-            :group="{ name: 'people', pull: 'clone', put: false }"
-            :sort="false"
-            :clone="onClone"
-          >
-            <a-col
-              :span="12"
-              v-for="item in componentBaseList"
-              :key="item.id">
-              <div
-                class="hover type"
-              >
-                <a-space>
-                  <a-icon type="profile" /> {{ item.name }}
-                </a-space>
-              </div>
-            </a-col>
-          </VueDraggable>
-        </a-row>
-      </a-card>
-      <a-card title="高级" >
-        <a-row>
-          <VueDraggable
-            v-model="componenHidetList"
-            :animation="150"
-            :group="{ name: 'people', pull: 'clone', put: false }"
-            :sort="false"
-            :clone="onClone"
-          >
-            <a-col
-              :span="12"
-              v-for="item in componenHidetList"
-              :key="item.id">
-              <div
-                class="hover type"
-              >
-                <a-space>
-                  <a-icon type="profile" /> {{ item.name }}
-                </a-space>
-              </div>
-            </a-col>
-          </VueDraggable>
-        </a-row>
-      </a-card>
     </a-col>
-    <a-col :span="15">
-      <a-card>
-        <a-form
-          :form="form"
-          :labelCol="BaseTool.Constant.labelCol"
-          :wrapperCol="BaseTool.Constant.wrapperCol">
-          <a-row>
-            <VueDraggable
-              v-model="list2"
-              :animation="150"
-              group="people"
-              style="min-height:600px"
-            >
-              <MComponent
-                class="hover"
-                v-for="item in list2"
-                :key="item.id"
-                :config="config"
-                :detail="item"
-                @select="handleSelect"
-                @selectInfo="handleInfoSelect"
-              />
-            </VueDraggable>
-          </a-row>
-          <a-row>
-            <a-col :span="24">
-              <a-button type="primary" @click="handleSubmit">提交</a-button>
-            </a-col>
-          </a-row>
-        </a-form>
-      </a-card>
-    </a-col>
-    <a-col :span="4">
-      <Detail :config="config" ref="detail" @delete="handleDelete" @addForm="addForm"/>
-    </a-col>
-    <SelectInfo ref="selectInfo" @selected="handleInfoSelected" />
+    <a-col :span="19"></a-col>
   </a-row>
 </template>
 
 <script>
-import { VueDraggable } from 'vue-draggable-plus'
-import Detail from './modules/Detail.vue'
-import MComponent from './modules/Component.vue'
-import SelectInfo from './modules/SelectInfo'
-
-import { componentBaseList, componenHidetList } from './modules/components'
+import jsPlumb from 'jsplumb'
 export default {
-  name: 'Test1',
-  components: {
-    VueDraggable,
-    Detail,
-    MComponent,
-    SelectInfo
-  },
   data () {
     return {
-      form: this.$form.createForm(this),
-      componentBaseList,
-      componenHidetList,
-      list2: [],
-      num: 1,
-      detail: {},
-      config: {
-        layout: 2
-      }
-    }
-  },
-  provide () {
-    return {
-      getFormList: () => {
-        return this.list2
-      }
-    }
-  },
-  watch: {
-    list2: {
-      deep: true,
-      handler (val) {
-        this.num++
-      }
+      jsPlumb: null
     }
   },
-  created () {
-  },
   mounted () {
-    this.handleSelect({}, this.config)
+    this.jsPlumb = jsPlumb.getInstance({
+      Container: 'canvas'
+    })
   },
   methods: {
-    onClone (element) {
-      // 生成随机id
-      const val = {
-        ...JSON.parse(JSON.stringify(element)),
-        value: `${element.value}${this.num}`,
-        id: Math.floor(Math.random() * 10000000000000)
-      }
-      this.handleSelect(val)
-      return val
-    },
-    update (val) {
-      console.log(val)
-    },
-    addForm (val) {
-      val.forEach(item => {
-        this.list2.push({
-          id: item.bind,
-          name: '单行文本',
-          type: 'input',
-          value: item.bind,
-          dependentId: false,
-          required: true,
-          label: item.columnComment,
-          attrs: {
-            placeholder: '请输入',
-            disabled: true
-          }
-        })
-      })
-    },
-    handleDelete (val) {
-      this.list2 = this.list2.filter(v => v.id !== val.id)
-    },
-    handleSubmit () {
-      const {
-        form: { validateFieldsAndScroll }
-      } = this
-      this.confirmLoading = true
-      validateFieldsAndScroll((errors, values) => {
-        console.log(values)
-        if (errors) {
-          this.confirmLoading = false
-        }
+    init () {
+      // 初始化连接线
+      this.jsPlumb.ready(() => {
+        // 设置连接线样式
+        this.jsPlumb.setConnector('Bezier', { curviness: 100 })
       })
-    },
-    handleSelect (item) {
-      this.$refs.detail.base(item, this.config)
-    },
-    handleInfoSelect (item) {
-      this.$refs.selectInfo.base(item)
-    },
-    handleInfoSelected (keys, rows, detail) {
-      const {
-        form: { setFieldsValue }
-      } = this
-      if (detail.attrs.selectType === 'radio') {
-        const data = rows[0]
-        const value = {}
-        detail.attrs.connect.forEach(item => {
-          value[item.bind] = data[item.columnName]
-        })
-        this.$nextTick(() => {
-          setFieldsValue(value)
-        })
-      } else {
-        this.$nextTick(() => {
-          setFieldsValue({
-            [detail.attrs.connect[0].bind]: keys
-          })
-        })
-      }
     }
   }
 }
 </script>
 
-<style lang="less" scoped>
-.type{
-border: 1px solid #ccc;
-padding: 5px;
-margin: 5px;
-border-radius: 5px;
-}
+<style>
 
 </style>