Update: 智能表单代码

datax-ui/package.json

@@ -29,6 +29,7 @@
     "vue-draggable-resizable-gorkys": "^2.4.4",
     "vue-grid-layout": "^2.3.11",
     "vue-router": "3.0.6",
+    "vue2-editor": "^2.10.2",
     "vuedraggable": "^2.24.0",
     "vuex": "3.1.0"
   },

datax-ui/src/router/index.js

@@ -97,6 +97,12 @@ export const constantRoutes = [
   },
 
   {
+    path: '/form/making',
+    component: () => import('@/views/dynamicform/formmaking/FormDesign'),
+    hidden: true
+  },
+
+  {
     path: '/',
     component: Layout,
     redirect: '/dashboard',

datax-ui/src/views/dynamicform/formmaking/FormDesign.vue

+<template>
+  <div class="form-design-container">
+    <el-container class="form-design-content">
+      <el-aside class="left" width="250px">
+        <template v-if="formComponents.length">
+          <div class="widget-cate">表单组件</div>
+          <draggable
+            tag="ul"
+            :list="formComponents"
+            v-bind="{ group: { name: 'form-draggable', pull: 'clone', put: false }, sort: false, animation: 180, ghostClass: 'moving' }"
+          >
+            <li v-for="(item, index) in formComponents" :key="index" @click="handleListPush(item)">
+              <a>
+                <i class="icon el-icon-star-off" />
+                <span>{{ item.label }}</span>
+              </a>
+            </li>
+          </draggable>
+        </template>
+        <template v-if="layoutComponents.length">
+          <div class="widget-cate">布局组件</div>
+          <draggable
+            tag="ul"
+            :list="layoutComponents"
+            v-bind="{ group: { name: 'form-draggable', pull: 'clone', put: false }, sort: false, animation: 180, ghostClass: 'moving' }"
+          >
+            <li v-for="(item, index) in layoutComponents" :key="index" @click="handleListPush(item)">
+              <a>
+                <i class="icon el-icon-star-off" />
+                <span>{{ item.label }}</span>
+              </a>
+            </li>
+          </draggable>
+        </template>
+      </el-aside>
+      <el-container class="widget-center-container" direction="vertical">
+        <el-header class="btn-bar" style="height: 45px;">
+          <el-button type="text" size="medium" icon="el-icon-view">预览</el-button>
+          <el-button type="text" size="medium" icon="el-icon-refresh">重置</el-button>
+          <el-button type="text" size="medium" icon="el-icon-plus">保存</el-button>
+          <el-button type="text" size="medium" icon="el-icon-delete">清空</el-button>
+        </el-header>
+        <el-main>
+          <widget-form :data="widgetData" :select.sync="selectWidget" />
+        </el-main>
+      </el-container>
+      <el-aside class="right">Aside</el-aside>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import { formComponents, layoutComponents } from './config/componentsConfig.js'
+import draggable from 'vuedraggable'
+import WidgetForm from './components/WidgetForm'
+
+export default {
+  name: 'FormDesign',
+  components: {
+    draggable,
+    WidgetForm
+  },
+  data() {
+    return {
+      formComponents,
+      layoutComponents,
+      widgetData: {
+        list: [],
+        config: {
+          width: 100,
+          size: 'small',
+          labelWidth: 100,
+          labelPosition: 'right',
+          customStyle: ''
+        }
+      },
+      selectWidget: {}
+    }
+  },
+  methods: {
+    handleListPush(item) {
+      // 双击组件push到list
+      const key = new Date().getTime()
+      item = {
+        ...item,
+        key,
+        model: item.type + '_' + key
+      }
+      // json深拷贝一次
+      const element = JSON.parse(JSON.stringify(item))
+      // 删除icon属性
+      delete element.icon
+      this.widgetData.list.push(element)
+      this.selectWidget = element
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/styles/form-design.scss'
+</style>

datax-ui/src/views/dynamicform/formmaking/components/WidgetForm.vue

+<template>
+  <div class="widget-form-wrapper" :style="{ width: data.config.width + '%' }">
+    <el-form :size="data.config.size" label-suffix=":" :label-position="data.config.labelPosition" :label-width="data.config.labelWidth + 'px'">
+      <div v-if="data.list.length === 0" class="form-empty">从左侧拖拽或点击来添加字段</div>
+      <draggable
+        tag="div"
+        class="draggable-box"
+        v-model="data.list"
+        v-bind="{ group: 'form-draggable', ghostClass: 'moving', animation: 180, handle: '.drag-widget' }"
+        @add="handleWidgetAdd"
+      >
+        <transition-group name="list" tag="div" class="draggable-list">
+          <widget-draggable-item
+            class="draggable-move"
+            v-for="(element, index) in data.list"
+            :key="element.key"
+            :index="index"
+            :element="element"
+            :select.sync="selectWidget"
+            :data="data"
+          />
+        </transition-group>
+      </draggable>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import WidgetDraggableItem from './WidgetDraggableItem'
+
+export default {
+  name: 'WidgetForm',
+  components: {
+    draggable,
+    WidgetDraggableItem
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+    select: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      selectWidget: this.select
+    }
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit('update:select', val)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleSelectWidget(index) {
+      this.selectWidget = this.data.list[index]
+    },
+    handleWidgetAdd(evt) {
+      // 为拖拽到容器的组件push到list
+      const newIndex = evt.newIndex
+      const key = new Date().getTime()
+      this.$set(this.data.list, newIndex, {
+        ...this.data.list[newIndex],
+        key,
+        model: this.data.list[newIndex].type + '_' + key
+      })
+      // 删除icon属性
+      delete this.data.list[newIndex].icon
+      this.selectWidget = this.data.list[newIndex]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

datax-ui/src/views/dynamicform/index.vue

+<template>
+  <div class="app-container">
+    DynamicForm
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DynamicForm'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>