xw_admin/src/views/home/console/components/shortcuts.vue

<template>
	<view class="pointBox inletView">
		<el-scrollbar height="100%" class="boxScrollbar">
			<div class="leftBox">
				<div class="item" v-for="(item,index) in inletList" :key="index" @click="linkDetail(item)">
					<div class="img">
						<el-icon size="36" color="#fff" class="icon" v-if="item.meta && item.meta.icon"><component :is="item.meta.icon || 'el-icon-menu'" /></el-icon>
					</div>
					<text class="text">{{item.meta && item.meta.title}}</text>
				</div>
				<div class="item add" @click="inletVisible=true">
					<div class="addBack">
						<i class="icon"><sc-icon-HomeAdd /></i>
					</div>
					<text class="text">添加</text>
				</div>
			</div>
		</el-scrollbar>
	</view>

	<el-drawer v-model="inletVisible" :size="450" title="快捷功能管理" destroy-on-close>
		<el-container>
			<el-main>
				<div class="dragList">
					<div class="title">已选快捷功能</div>
					<draggable class="dragView" v-model="inletList" animation="200" item-key="id" group="people">
						<template #item="{ element }">
							<div class="box">
								<div class="img">
									<el-icon size="36" color="#fff" class="icon" v-if="element.meta && element.meta.icon"><component :is="element.meta.icon || 'el-icon-menu'" /></el-icon>
								</div>
								<div class="text">{{element.meta && element.meta.title}}</div>
							</div>
						</template>
					</draggable>
					<el-empty v-if="inletList.length==0" :image-size="80" description="未添加任何快捷功能"></el-empty>
				</div>
				<div class="dragList">
					<div class="title">常用功能拖拽到上方快捷功能中</div>
					<draggable class="dragView" v-model="list" animation="200" item-key="id" group="people">
						<template #item="{ element }">
							<div class="box">
								<div class="img imgDis">
									<el-icon size="36" color="#fff" class="icon" v-if="element.meta && element.meta.icon"><component :is="element.meta.icon || 'el-icon-menu'" /></el-icon>
								</div>
								<div class="text">{{element.meta && element.meta.title}}</div>
							</div>
						</template>
					</draggable>
					<el-empty v-if="list.length==0" :image-size="80" description="暂无数据"></el-empty>
				</div>
			</el-main>
			<el-footer style="padding:10px;">
				<el-button type="primary" @click="save" :loading="isSave">保存配置</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
import draggable from 'vuedraggable'
export default {
	name: "shortcuts",
	components:{
		draggable
	},
	data(){
		return{
			isSave:false,
			listData:[],
			inletList:[],
			inletVisible:false,
			list:[]
		}
	},
	watch:{

	},
	mounted() {
		this.getList()
	},
	methods:{
		async getList() {
			const res = await this.$API.home.quickList.post();
			if(res.code == 200){
				let isCheArr = [];
				let noList = [];
				res.data.forEach(item=>{
					if(item.checked){
						isCheArr.push(item);
					}else{
						noList.push(item);
					}
				})
				this.listData = res.data;
				this.inletList = isCheArr;
				this.list = noList;
			}
		},
		linkDetail(item){
			this.$router.push({
				path: item.path,
				query: {}
			})
		},
		async save() {
			if(this.inletList && this.inletList.length>0){
				this.inletList.forEach(item=>{
					item.checked = true;
				})
			}
			if(this.list && this.list.length>0){
				this.list.forEach(item=>{
					item.checked = false
				})
			}
			let newArr = [...this.inletList,...this.list];
			this.isSave = true;
			const params = newArr.map((item,index)=>({name:item.name,status:item.checked,sort:index+1}))
			const res = await this.$API.home.quickSave.post(params);
			this.isSave = false;
			if (res.code == 200) {
				this.$message.success('保存成功');
				await this.getList();
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.pointBox{width: 100%;height: 100%;overflow: hidden;display: flex;align-items: center;justify-content: flex-start;}
	.icon{color: #fff;}

	.dragList{
		.title{
			border-top: 1px solid #f2f2f2;
			padding-top: 10px;
		}
	}
	.dragView{
		min-height: 40px;
		display: flex;flex-wrap: wrap;
		.box{
			display: flex;
			align-items: center;
			flex-direction: column;
			margin:0 20px 0 0;
			padding:10px 0 10px 0;
			width: 50px;
			.img{
				width: 50px;height: 50px;background: var(--el-color-primary);border-radius: 8px;
				display: flex;align-items: center;justify-content: center;
				cursor: pointer;
			}
			.imgDis{
				background: var(--el-color-primary-light-8);
			}
			.text{
				margin-top: 8px;
				width: 100%;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;
			}
		}
	}
</style>