From 7f60c7bfa7ce1a38584f55476a42700c7bb2bfbe Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Sun, 25 Jul 2021 23:02:44 +0800
Subject: [PATCH] =?UTF-8?q?ADD=20work=E6=8E=A7=E5=88=B6=E5=8F=B0=E6=88=91?=
 =?UTF-8?q?=E7=9A=84=E5=B8=B8=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/work/components/myapp.vue | 136 +++++++++++++++++++++++
 src/views/home/work/index.vue            |  43 ++-----
 src/views/userCenter/login.vue           |   1 +
 3 files changed, 149 insertions(+), 31 deletions(-)
 create mode 100644 src/views/home/work/components/myapp.vue

diff --git a/src/views/home/work/components/myapp.vue b/src/views/home/work/components/myapp.vue
new file mode 100644
index 00000000..fea7035e
--- /dev/null
+++ b/src/views/home/work/components/myapp.vue
@@ -0,0 +1,136 @@
+<template>
+	<div>
+		<ul class="myMods">
+			<li v-for="mod in myMods" :key="mod.path" :style="{background:mod.meta.color||'#909399'}">
+				<a v-if="mod.meta.type=='link'" :href="mod.path" target="_blank">
+					<i :class="mod.meta.icon||'el-icon-menu'"></i>
+					<p>{{ mod.meta.title }}</p>
+				</a>
+				<router-link v-else :to="{ path: mod.path }">
+					<i :class="mod.meta.icon||'el-icon-menu'"></i>
+					<p>{{ mod.meta.title }}</p>
+				</router-link>
+			</li>
+			<li class="modItem-add" @click="addMods">
+				<a href="javascript:void(0)">
+					<i class="el-icon-plus"></i>
+				</a>
+			</li>
+		</ul>
+
+		<el-drawer title="添加应用" v-model="modsDrawer" :size="570" destroy-on-close>
+			<el-container>
+				<el-main class="nopadding">
+					<el-scrollbar>
+						<div class="setMods">
+							<h4>我的常用 ( {{myMods.length}} )</h4>
+							<draggable tag="ul" v-model="myMods" animation="200" item-key="path" group="people">
+								<template #item="{ element }">
+									<li :style="{background:element.meta.color||'#909399'}">
+										<i :class="element.meta.icon||'el-icon-menu'"></i>
+										<p>{{element.meta.title}}</p>
+									</li>
+								</template>
+							</draggable>
+						</div>
+						<div class="setMods">
+							<h4>全部应用 ( {{filterMods.length}} )</h4>
+							<draggable tag="ul" v-model="filterMods" animation="200" item-key="path" :sort="false" group="people">
+								<template #item="{ element }">
+									<li :style="{background:element.meta.color||'#909399'}">
+										<i :class="element.meta.icon||'el-icon-menu'"></i>
+										<p>{{element.meta.title}}</p>
+									</li>
+								</template>
+							</draggable>
+						</div>
+					</el-scrollbar>
+				</el-main>
+				<el-footer>
+					<el-button type="primary" size="small" @click="saveMods">保存</el-button>
+				</el-footer>
+			</el-container>
+		</el-drawer>
+	</div>
+</template>
+
+<script>
+	import draggable from 'vuedraggable'
+
+	export default {
+		components: {
+			draggable
+		},
+		data() {
+			return {
+				mods: [],
+				myMods: [],
+				myModsName: [],
+				filterMods: [],
+				modsDrawer: false
+			}
+		},
+		mounted(){
+			this.getMods()
+		},
+		methods: {
+			addMods(){
+				this.modsDrawer = true
+			},
+			getMods(){
+				//这里可用改为读取远程数据
+				this.myModsName = this.$TOOL.data.get("my-mods") || []
+				var menuTree = this.$TOOL.data.get("user").menuList
+				this.filterMenu(menuTree)
+				this.myMods = this.mods.filter(item => {
+					return this.myModsName.includes(item.name)
+				})
+				this.filterMods =  this.mods.filter(item => {
+					return !this.myModsName.includes(item.name)
+				})
+			},
+			filterMenu(map){
+				map.forEach(item => {
+					if(item.meta.hidden){
+						return false
+					}
+					if(item.meta.type=='iframe'){
+						item.path = `/i/${item.name}`
+					}
+					if(item.children&&item.children.length > 0){
+						this.filterMenu(item.children)
+					}else{
+						this.mods.push(item)
+					}
+				})
+			},
+			saveMods(){
+				const myModsName = this.myMods.map(v => v.name)
+				this.$TOOL.data.set("my-mods", myModsName)
+				this.$message.success("设置常用成功")
+				this.modsDrawer = false
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.myMods {list-style:none;margin:-10px;}
+	.myMods li {display: inline-block;width: 100px;height:100px;vertical-align: top;transition:all 0.3s ease;margin:10px;border-radius:5px;}
+	.myMods li:hover {opacity: 0.8;}
+	.myMods li a {width: 100%;height: 100%;padding:10px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: #fff;}
+	.myMods li i {font-size: 26px;color: #fff;}
+	.myMods li p {font-size: 12px;color: #fff;margin-top: 10px;width: 100%;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}
+
+	.modItem-add {background: #fff;border: 1px dashed #ddd;cursor: pointer;}
+	.modItem-add i {font-size: 30px;color: #999!important;}
+	.modItem-add:hover,.modItem-add:hover i {border-color: #409EFF;color: #409EFF!important;}
+
+	.setMods {padding:0 20px;}
+	.setMods h4 {font-size: 14px;font-weight: normal;}
+	.setMods ul {margin:20px -5px;min-height: 90px;}
+	.setMods li {display: inline-block;width: 80px;height:80px;text-align: center;margin:5px;color: #fff;vertical-align: top;padding:4px;padding-top:15px;cursor: move;border-radius: 3px;}
+	.setMods li i {font-size: 20px;}
+	.setMods li p {font-size: 12px;margin-top: 10px;}
+	.setMods li.sortable-ghost {opacity: 0.3;}
+</style>
diff --git a/src/views/home/work/index.vue b/src/views/home/work/index.vue
index ea3eeb55..2c512666 100644
--- a/src/views/home/work/index.vue
+++ b/src/views/home/work/index.vue
@@ -2,28 +2,9 @@
 	<el-main>
 		<el-alert title="根据角色配置,可让不同角色访问不同的控制台视图,参数值在登录成功后返回 dashboard:{type}" type="success" style="margin-bottom:20px;"></el-alert>
 		<el-row :gutter="15">
-			<el-col :span="24">
-				<el-card shadow="never" header="模板">
-					<ul class="item-list">
-						<li>
-							<router-link :to="{ path: '/template/blank' }">
-								<i class="el-icon-folder" style="background: #409EFF;"></i>
-								<p>空白模板</p>
-							</router-link>
-						</li>
-						<li>
-							<router-link :to="{ path: '/template/chartlist' }">
-								<i class="el-icon-data-analysis" style="background: #67C23A;"></i>
-								<p>统计列表</p>
-							</router-link>
-						</li>
-						<li>
-							<router-link :to="{ path: '/template/calendar' }">
-								<i class="el-icon-date" style="background: #c71585;"></i>
-								<p>日历计划</p>
-							</router-link>
-						</li>
-					</ul>
+			<el-col :lg="24">
+				<el-card shadow="never" header="我的常用">
+					<myapp></myapp>
 				</el-card>
 			</el-col>
 		</el-row>
@@ -31,26 +12,26 @@
 </template>
 
 <script>
+	import myapp from './components/myapp';
+
 	export default {
+		components: {
+			myapp
+		},
 		data() {
-			return {}
+			return {
+
+			}
 		},
 		mounted(){
 			this.$emit('on-mounted')
 		},
 		methods: {
-			//获取当前用户可操作菜单
 
 		}
 	}
 </script>
 
 <style scoped>
-	.el-row {margin-bottom:15px;}
-	.item-list {display: flex;flex-wrap:wrap;}
-	.item-list li {list-style: none;text-align: center;}
-	.item-list li a {padding:20px;border-radius: 5px;cursor: pointer;display: inline-block;}
-	.item-list li i {width:70px;height:70px;border-radius: 28px;font-size: 25px;color: #fff;background: #ddd;display: flex;justify-content: center;align-items: center;}
-	.item-list li p {margin-top: 15px;color: #555;}
-	.item-list li a:hover {background: #ecf5ff;}
+
 </style>
diff --git a/src/views/userCenter/login.vue b/src/views/userCenter/login.vue
index 57a6a67d..4c648b48 100644
--- a/src/views/userCenter/login.vue
+++ b/src/views/userCenter/login.vue
@@ -151,6 +151,7 @@
 		created: function() {
 			this.$TOOL.data.remove("user")
 			this.$TOOL.data.remove("grid")
+			this.$TOOL.data.remove("my-mods")
 			this.$store.commit("clearViewTags")
 			this.$store.commit("clearKeepLive")
 			this.$store.commit("clearIframeList")