From f9b50a4f410e62e6aa1a560ee3da9bd8685a53b6 Mon Sep 17 00:00:00 2001
From: Nix <xinxintao@foxmail.com>
Date: Sat, 20 Jun 2020 22:49:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 h5/src/main.js                                |   2 +-
 h5/src/store/layout.js                        |  89 +++++---
 h5/src/views/index.vue                        |   8 +-
 .../views/layout/dashboard/componentItems.vue |  20 +-
 h5/src/views/layout/dashboard/workmeta.vue    | 212 +++++++++++++++++-
 5 files changed, 278 insertions(+), 53 deletions(-)

diff --git a/h5/src/main.js b/h5/src/main.js
index 253d3bb..9255cee 100755
--- a/h5/src/main.js
+++ b/h5/src/main.js
@@ -4,7 +4,7 @@ import router from './router/index.js'
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-Vue.use(ElementUI)
+Vue.use(ElementUI, { size: 'mini' })
 
 import VueI18n from 'vue-i18n'
 Vue.use(VueI18n)
diff --git a/h5/src/store/layout.js b/h5/src/store/layout.js
index b870c93..fbda3f0 100755
--- a/h5/src/store/layout.js
+++ b/h5/src/store/layout.js
@@ -2,59 +2,59 @@ const layout = {
   state: {
     elements: [
       {
-        name: "el-form",
+        name: 'el-form',
         props: {
-          "label-width": "180px",
-          "label-position": "rigth",
+          'label-width': '180px',
+          'label-position': 'rigth',
         },
         children: [
           {
-            name: "el-form-item",
+            name: 'el-form-item',
             props: {
-              label: "姓名",
-              value: "3131",
+              label: '姓名',
+              value: '3131',
             },
             children: [
               {
-                name: "el-input",
+                name: 'el-input',
                 props: {
-                  type: "textarea",
-                  size: "large",
-                  value: "3131",
-                  "v-model": "sddsds",
+                  type: 'textarea',
+                  size: 'large',
+                  value: '3131',
+                  'v-model': 'sddsds',
                 },
-                text: "username",
+                text: 'username',
               },
             ],
           },
           {
-            name: "el-form-item",
+            name: 'el-form-item',
             props: {
-              label: "请选择请选择请选择请选择",
+              label: '请选择请选择请选择请选择',
             },
             children: [
               {
-                name: "el-select",
+                name: 'el-select',
                 props: {
-                  size: "small",
-                  placeholder: "请选择",
-                  "v-model": "type",
-                  value: "1",
+                  size: 'small',
+                  placeholder: '请选择',
+                  'v-model': 'type',
+                  value: '1',
                   clearable: true,
                 },
                 children: [
                   {
-                    name: "el-option",
-                    text: "选项一",
+                    name: 'el-option',
+                    text: '选项一',
                     props: {
-                      value: "type",
+                      value: 'type',
                     },
                   },
                   {
-                    name: "el-option",
-                    text: "选项e",
+                    name: 'el-option',
+                    text: '选项e',
                     props: {
-                      value: "2",
+                      value: '2',
                     },
                   },
                 ],
@@ -64,17 +64,48 @@ const layout = {
         ],
       },
     ],
+    layouts: [
+      {
+        type: 'layout-container',
+        x: 0,
+        y: 0,
+        w: 24,
+        h: 4,
+        static: false,
+        i: 0,
+        children: [
+          {
+            type: 'form',
+            children: [
+              {
+                type: 'button',
+              },
+              {
+                type: 'input',
+              },
+              {
+                type: 'select',
+              },
+            ],
+          },
+          {
+            type: 'table',
+            columns: [{}],
+          },
+        ],
+      },
+    ],
   },
   mutations: {
     updateElements: (state, payload) => {
-      state.elements = payload;
+      state.elements = payload
     },
   },
   actions: {
     updateElements: ({ commit }, payload) => {
-      commit("updateElements", payload);
+      commit('updateElements', payload)
     },
   },
   getters: {},
-};
-export default layout;
+}
+export default layout
diff --git a/h5/src/views/index.vue b/h5/src/views/index.vue
index dd9892c..6b4243d 100755
--- a/h5/src/views/index.vue
+++ b/h5/src/views/index.vue
@@ -25,10 +25,10 @@
   </div>
 </template>
 <script>
-import sider from '@/layout/dashboard/sider'
-import top from '@/layout/dashboard/header'
-import workMeta from '@/layout/dashboard/workmeta'
-import right from '@/layout/dashboard/right/index'
+import sider from './layout/dashboard/sider'
+import top from './layout/dashboard/header'
+import workMeta from './layout/dashboard/workmeta'
+import right from './layout/dashboard/right/index'
 export default {
   data() {
     return {}
diff --git a/h5/src/views/layout/dashboard/componentItems.vue b/h5/src/views/layout/dashboard/componentItems.vue
index e3d5ad9..068290d 100755
--- a/h5/src/views/layout/dashboard/componentItems.vue
+++ b/h5/src/views/layout/dashboard/componentItems.vue
@@ -8,30 +8,30 @@
 </template>
 
 <script>
-import componentItem from "./componentItem";
-import { mapState, mapActions } from "vuex";
+import componentItem from './componentItem'
+import { mapState, mapActions } from 'vuex'
 export default {
   components: {
     componentItem,
-    draggable: () => import("vuedraggable"),
+    draggable: () => import('vuedraggable'),
   },
   data() {
-    return {};
+    return {}
   },
   computed: {
     items: {
       get() {
-        return this.$store.state.layout.elements;
+        return this.$store.state.layout.elements
       },
       set(value) {
-        this.updateElements(value);
+        this.updateElements(value)
       },
     },
   },
   methods: {
-    ...mapActions(["updateElements"]),
+    ...mapActions(['updateElements']),
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
@@ -39,8 +39,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-/deep/ form.el-form.el-form--label-rigth {
-  border: 1px solid orange;
-  padding: 5px;
-}
 </style>
diff --git a/h5/src/views/layout/dashboard/workmeta.vue b/h5/src/views/layout/dashboard/workmeta.vue
index fe46ae7..7328154 100755
--- a/h5/src/views/layout/dashboard/workmeta.vue
+++ b/h5/src/views/layout/dashboard/workmeta.vue
@@ -1,8 +1,48 @@
 <template>
   <div class="workmeta">
     <div class="main">
-      <template v-if="datas.length">
+      <!-- <template v-if="datas.length">
         <componentItems id="_workspace" />
+      </template> -->
+      <template v-if="datas.length">
+        <grid-layout
+          :layout="datas"
+          :col-num="colNum"
+          :row-height="rowHeight"
+          :is-draggable="draggable"
+          :is-resizable="resizable"
+          :is-mirrored="mirrored"
+          :vertical-compact="verticalCompact"
+          :margin="[10, 10]"
+          :use-css-transforms="true"
+          @layout-created="layoutCreatedEvent"
+          @layout-before-mount="layoutBeforeMountEvent"
+          @layout-mounted="layoutMountedEvent"
+          @layout-ready="layoutReadyEvent"
+          @layout-updated="layoutUpdatedEvent"
+          @move-event="moveEvent"
+          style="height:initial"
+        >
+          <grid-item
+            v-for="(item, index) in datas"
+            :x="item.x"
+            :y="item.y"
+            :w="item.w"
+            :h="item.h"
+            :i="item.i"
+            :min-h="1"
+            :min-w="6"
+            :key="index"
+            class="layout-item"
+            :static="item.static"
+            drag-allow-from=".vue-draggable-handle"
+            drag-ignore-from=".no-drag"
+            ><div class="vue-draggable-handle"></div>
+            <div class="no-drag">
+              <componentItems />
+            </div>
+          </grid-item>
+        </grid-layout>
       </template>
       <Empty v-else :emptyText="emptyText" />
     </div>
@@ -10,26 +50,133 @@
 </template>
 
 <script>
-import componentItems from "./componentItems";
-import Empty from "./Empty";
+import componentItems from './componentItems'
+import VueGridLayout from 'vue-grid-layout'
+import Empty from './Empty'
 export default {
   components: {
     componentItems,
     Empty,
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
   },
   data() {
     return {
-      datas: [1],
-      emptyText: "拖拽或添加组件到此处",
-    };
+      datas: [
+        {
+          type: 'layout-container',
+          x: 0,
+          y: 0,
+          w: 24,
+          h: 4,
+          static: false,
+          i: 0,
+          children: [
+            {
+              type: 'form',
+              children: [
+                {
+                  type: 'button',
+                },
+                {
+                  type: 'input',
+                },
+                {
+                  type: 'select',
+                },
+              ],
+            },
+            {
+              type: 'table',
+              columns: [{}],
+            },
+          ],
+        },
+        {
+          type: 'layout-container',
+          x: 0,
+          y: 0,
+          w: 24,
+          h: 4,
+          static: false,
+          i: 0,
+          children: [
+            {
+              type: 'form',
+              children: [
+                {
+                  type: 'button',
+                },
+                {
+                  type: 'input',
+                },
+                {
+                  type: 'select',
+                },
+              ],
+            },
+            {
+              type: 'table',
+              columns: [{}],
+            },
+          ],
+        },
+      ],
+      emptyText: '拖拽或添加组件到此处',
+      layouts: [],
+      draggable: true,
+      resizable: true,
+      mirrored: false,
+      rowHeight: 30,
+      colNum: 24,
+      verticalCompact: true,
+    }
+  },
+  methods: {
+    setProps(item) {
+      this.dialogVisible = true
+      this.item = item
+      item.props.type = ['primary', 'danger', 'info', 'warning', 'success'][parseInt(Math.random() * 4)]
+    },
+    delelteItem(i) {
+      this.$store.dispatch('delComponent', i)
+    },
+    layoutCreatedEvent: function(newLayout) {
+      console.log('Created layout: ', newLayout)
+    },
+    layoutBeforeMountEvent: function(newLayout) {
+      console.log('beforeMount layout: ', newLayout)
+    },
+    layoutMountedEvent: function(newLayout) {
+      console.log('Mounted layout: ', newLayout)
+    },
+    layoutReadyEvent: function(newLayout) {
+      console.log('Ready layout: ', newLayout)
+    },
+    layoutUpdatedEvent: function(newLayout) {
+      console.log('Updated layout: ', newLayout)
+    },
+    moveEvent: function(i, newX, newY) {
+      console.log('MOVE i=' + i + ', X=' + newX + ', Y=' + newY)
+    },
+    resizeEvent: function(i, newH, newW, newHPx, newWPx) {
+      console.log('RESIZE i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx)
+    },
+    movedEvent: function(i, newX, newY) {
+      console.log('MOVED i=' + i + ', X=' + newX + ', Y=' + newY)
+    },
+    resizedEvent: function(i, newH, newW, newHPx, newWPx) {
+      console.log('RESIZED i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx)
+    },
   },
-};
+}
 </script>
 
 <style lang="less" scoped>
 .workmeta {
   height: 100%;
   overflow-y: auto;
+  background-color: #ebebeb;
   .main {
     margin: 10px;
     border: 1px dashed;
@@ -37,5 +184,56 @@ export default {
     padding: 10px;
     min-height: -webkit-fill-available;
   }
+
+  .layout-item {
+    background: #fff;
+    padding: 10px;
+    box-sizing: border-box;
+    .vue-draggable-handle {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      top: 0;
+      left: 0;
+      background: url(data:image/svg+xml;utf8,<svg xmlns=http://www.w3.org/2000/svg width=10 height=10><circle cx=5 cy=5 r=5 fill=#999999/></svg>)
+        no-repeat;
+      background-position: bottom right;
+      padding: 0 8px 8px 0;
+      background-repeat: no-repeat;
+      background-origin: content-box;
+      box-sizing: border-box;
+      cursor: pointer;
+    }
+    .top-header {
+      display: flex;
+      justify-content: space-between;
+      height: 30px;
+
+      .top-button {
+        opacity: 0;
+      }
+    }
+
+    .layout-content {
+      // border: 1px dashed #333;
+      padding: 5px;
+      box-sizing: border-box;
+      height: calc(100% - 40px);
+      .empty-tip {
+        border: none;
+      }
+    }
+  }
+
+  .layout-item:hover {
+    background: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 16px 24px 0 rgba(170, 182, 206, 0.36);
+    transition: box-shadow 0.3s ease-in-out;
+
+    .top-button {
+      opacity: 1;
+      transition: opacity 0.9s;
+    }
+  }
 }
 </style>