From bdebaaf99d35c4cbf511593c3d576798ee826150 Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Sun, 25 Apr 2021 23:35:46 +0800
Subject: [PATCH] UP

---
 package.json                           |  1 +
 src/router/index.js                    |  2 +-
 src/views/home/components/C1.vue       | 14 ++++++
 src/views/home/components/C2.vue       | 14 ++++++
 src/views/home/components/C3.vue       | 14 ++++++
 src/views/home/components/C4.vue       | 14 ++++++
 src/views/home/components/index.js     | 12 +++++
 src/views/{home.vue => home/index.vue} | 62 +++++++++++++++++++++++++-
 8 files changed, 130 insertions(+), 3 deletions(-)
 create mode 100644 src/views/home/components/C1.vue
 create mode 100644 src/views/home/components/C2.vue
 create mode 100644 src/views/home/components/C3.vue
 create mode 100644 src/views/home/components/C4.vue
 create mode 100644 src/views/home/components/index.js
 rename src/views/{home.vue => home/index.vue} (59%)

diff --git a/package.json b/package.json
index f70e7baf..7a369398 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
 		"nprogress": "^0.2.0",
 		"vue": "^3.0.0",
 		"vue-router": "^4.0.0-0",
+		"vuedraggable": "^4.0.1",
 		"vuex": "^4.0.0-0"
 	},
 	"devDependencies": {
diff --git a/src/router/index.js b/src/router/index.js
index 881f713e..fe9e51e0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -27,7 +27,7 @@ const routes = [{
 							title: "控制台",
 							affix: true
 						},
-						component: () => import(/* webpackChunkName: "home" */ '@/views/home'),
+						component: () => import(/* webpackChunkName: "home" */ '@/views/home/index'),
 					}
 				]
 			}
diff --git a/src/views/home/components/C1.vue b/src/views/home/components/C1.vue
new file mode 100644
index 00000000..0d33f58e
--- /dev/null
+++ b/src/views/home/components/C1.vue
@@ -0,0 +1,14 @@
+<template>
+	<el-skeleton />
+</template>
+
+<script>
+	export default {
+		props: {
+			msg: String
+		},
+		mounted(){
+			console.log("加载C1");
+		}
+	}
+</script>
diff --git a/src/views/home/components/C2.vue b/src/views/home/components/C2.vue
new file mode 100644
index 00000000..36f6f136
--- /dev/null
+++ b/src/views/home/components/C2.vue
@@ -0,0 +1,14 @@
+<template>
+	<el-skeleton />
+</template>
+
+<script>
+	export default {
+		props: {
+			msg: String
+		},
+		mounted(){
+			console.log("加载C2");
+		}
+	}
+</script>
diff --git a/src/views/home/components/C3.vue b/src/views/home/components/C3.vue
new file mode 100644
index 00000000..4ccf1e4d
--- /dev/null
+++ b/src/views/home/components/C3.vue
@@ -0,0 +1,14 @@
+<template>
+	<el-empty description="描述文字"></el-empty>
+</template>
+
+<script>
+	export default {
+		props: {
+			msg: String
+		},
+		mounted(){
+			console.log("加载C3");
+		}
+	}
+</script>
diff --git a/src/views/home/components/C4.vue b/src/views/home/components/C4.vue
new file mode 100644
index 00000000..1746bda5
--- /dev/null
+++ b/src/views/home/components/C4.vue
@@ -0,0 +1,14 @@
+<template>
+	<el-empty description="描述文字"></el-empty>
+</template>
+
+<script>
+	export default {
+		props: {
+			msg: String
+		},
+		mounted(){
+			console.log("加载C4");
+		}
+	}
+</script>
diff --git a/src/views/home/components/index.js b/src/views/home/components/index.js
new file mode 100644
index 00000000..ec097fb4
--- /dev/null
+++ b/src/views/home/components/index.js
@@ -0,0 +1,12 @@
+import {markRaw} from 'vue';
+const resultComps = {}
+let requireComponent = require.context(
+	'./', // 在当前目录下查找
+	false, // 不遍历子文件夹
+	/\.vue$/ // 正则匹配 以 .vue结尾的文件
+)
+requireComponent.keys().forEach(fileName => {
+	let comp = requireComponent(fileName)
+	resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
+})
+export default markRaw(resultComps)
diff --git a/src/views/home.vue b/src/views/home/index.vue
similarity index 59%
rename from src/views/home.vue
rename to src/views/home/index.vue
index d9ad516d..21dd7ead 100644
--- a/src/views/home.vue
+++ b/src/views/home/index.vue
@@ -32,7 +32,7 @@
 
 		<el-row :gutter="15">
 			<el-col :span="24">
-				<el-card shadow="never" header="User Permissions">
+				<el-card shadow="never" header="当前用户权限">
 					<el-tag v-if="$HAS('user.add')">user.add</el-tag>
 					<el-tag v-if="$HAS('user.edit')">user.edit</el-tag>
 					<el-tag v-if="$HAS('user.delete')">user.delete</el-tag>
@@ -42,20 +42,72 @@
 				</el-card>
 			</el-col>
 		</el-row>
+
+		<div class="diy-grid-layout">
+			<el-row :gutter="15">
+				<el-col :span="16">
+					 <draggable v-model="grid[0]" :disabled="false" animation="200" handle=".el-card__header" group="people" @end="end" item-key="id">
+						<template #item="{ element }">
+							<div>
+								<el-card shadow="never" :header="element.name">
+									<component :is="allComps[element.name]" msg="demo"></component>
+								</el-card>
+							</div>
+						</template>
+					</draggable>
+				</el-col>
+				<el-col :span="8">
+					<draggable v-model="grid[1]" animation="200" handle=".el-card__header" group="people" @end="end" item-key="id">
+						<template #item="{ element }">
+							<div >
+								<el-card shadow="never" :header="element.name">
+									<component :is="allComps[element.name]" msg="demo"></component>
+								</el-card>
+							</div>
+						</template>
+					</draggable>
+				</el-col>
+			</el-row>
+		</div>
+
+		<pre>{{ grid }}</pre>
+
+
 	</el-main>
 </template>
 
 <script>
+	import draggable from 'vuedraggable'
+	import allComps from './components'
 	export default {
 		name: "dashboard",
+		components: {
+			draggable
+		},
 		data() {
 			return {
-
+				allComps: allComps,
+				grid:[
+					[
+						{ name: "C1", id: 1 },
+						{ name: "C2", id: 2 }
+					],
+					[
+						{ name: "C3", id: 5 },
+						{ name: "C4", id: 6 }
+					]
+				]
 			}
 		},
 		mounted(){
 			console.log("home.vue mounted #57");
+		},
+		methods: {
+			end(){
+				console.log("拖动结束");
+			}
 		}
+
 	}
 </script>
 
@@ -71,4 +123,10 @@
 	.welTop .icons {margin-left:auto;text-align: center;}
 	.welTop .icons p {font-size: 12px;}
 	.avatar-list .avatar {margin-left: -10px;border: 3px solid #fff;cursor: pointer;}
+
+	.diy-grid-layout .el-card {margin-bottom:15px;}
+	.sortable-ghost {
+	  opacity: 0.5;
+	  background: #c8ebfb;
+	}
 </style>