x-php-Admin/src/views/home/widgets/index.vue

<template>
	<div :class="['widgets-home', customizing?'customizing':'']" ref="main">
		<div class="widgets-content">
			<div class="widgets-top-actions">
				<el-button v-if="customizing" type="primary" icon="el-icon-check" round @click="save">完成</el-button>
				<el-button v-else type="primary" icon="el-icon-edit" round @click="custom">自定义</el-button>
			</div>
			<div class="widgets" ref="widgets">
				<div class="widgets-wrapper">
					<div v-if="widgets.length<=0" class="no-widgets">
						<el-empty description="没有部件啦" :image-size="280"></el-empty>
					</div>

					<el-row :gutter="15">
						<draggable v-model="widgets" animation="100" handle=".customize-overlay" group="people" item-key="com" force-fallback fallbackOnBody class="draggable-box">
							<template #item="{ element }">
								<el-col :md="parseInt(element.layout) || 24" :xs="24">
									<div class="widgets-item">
										<component :is="allComps[element.name]"></component>
										<div v-if="customizing" class="customize-overlay">
											<el-button class="close" type="danger" plain icon="el-icon-close" size="small" @click="remove(element.name)"></el-button>
											<label>
												<el-icon><component :is="allComps[element.name].icon" /></el-icon>
												{{ allComps[element.name].title }}
											</label>
											<el-input-number v-model="element.layout" :min="4" :max="24" />
										  	<!-- <el-slider v-model="element.layout" :min="4" :max="24" :step="1" show-stops /> -->
										</div>
									</div>
								</el-col>
							</template>
						</draggable>
					</el-row>
				</div>
			</div>
		</div>
		<div v-if="customizing" class="widgets-aside">
			<el-container>
				<el-header>
					<div class="widgets-aside-title"><el-icon><el-icon-circle-plus-filled/></el-icon>添加部件</div>
					<div class="widgets-aside-close" @click="close()"><el-icon><el-icon-close /></el-icon></div>
				</el-header>
				<el-main class="nopadding">
					<div class="widgets-list">
						<div v-if="myCompsList.length<=0" class="widgets-list-nodata">
							<el-empty description="没有部件啦" :image-size="60"></el-empty>
						</div>
						<div v-for="item in myCompsList" :key="item.title" class="widgets-list-item">
							<div class="item-logo"><el-icon><component :is="item.icon" /></el-icon></div>
							<div class="item-info">
								<h2>{{ item.title }}</h2>
								<p>{{ item.description }}</p>
							</div>
							<div class="item-actions">
								<el-button type="primary" icon="el-icon-plus" size="small" @click="push(item)"></el-button>
							</div>
						</div>
					</div>
				</el-main>
				<el-footer style="height:51px;">
					<el-button size="small" @click="backDefaul()">恢复默认</el-button>
				</el-footer>
			</el-container>
		</div>
	</div>
</template>

<script>
	import draggable from 'vuedraggable'
	import allComps from './components'

	export default {
		components: {
			draggable
		},
		data() {
			return {
				customizing: false,
				allComps: allComps,
				selectLayout: [],
				defaultGrid: [],
				widgets: [],
			}
		},
		created(){
			this.defaultGrid = this.$tool.data.get("defaultgrid") || this.$config.DEFAULT_GRID

			this.widgets = this.$tool.data.get('widgets');
			if (this.widgets.length==0) {
				this.widgets = JSON.parse(JSON.stringify(this.defaultGrid))
			}
		},
		mounted() {
			this.$emit('on-mounted')
		},
		computed: {
			allCompsList(){
				var allCompsList = []
				for(var key in this.allComps){
					allCompsList.push({
						key: key,
						title: allComps[key].title,
						icon: allComps[key].icon,
						description: allComps[key].description
					})
				}

				var myCopmsList = this.widgets
				for(let comp of allCompsList){
					const _item = myCopmsList.find((item)=>{return item.name === comp.key})
					if(_item){
						comp.disabled = true
					}
				}
				return allCompsList
			},
			myCompsList(){
				var myGrid = this.$tool.data.get("dashboardgrid")
				if (myGrid.length>0) {
					return this.allCompsList.filter(item => !item.disabled && myGrid.includes(item.key))
				}
				return this.allCompsList.filter(item => !item.disabled)
			},
		},
		methods: {
			//开启自定义
			custom(){
				this.customizing = true
				const oldWidth = this.$refs.widgets.offsetWidth
				this.$nextTick(() => {
					const scale =  this.$refs.widgets.offsetWidth / oldWidth
					this.$refs.widgets.style.setProperty('transform', `scale(${scale})`)
				})
			},
			//追加
			push(item){
				this.widgets.push({
					name:item.key,
					layout:item.layout || 24
				})
			},
			//隐藏组件
			remove(item){
				var newCopmsList = this.widgets
				newCopmsList.splice(newCopmsList.findIndex(o => o.name === item), 1);
			},
			//保存
			save(){
				this.customizing = false
				this.$refs.widgets.style.removeProperty('transform')
				this.$tool.data.set("widgets", this.widgets)
				this.$http.post('widgets', {name:'widgets', event:'update', data:this.widgets }).then((res) => {
					if (res.code == 200 ) {
						return;
					}
					this.$alert(res.message, "提示", {type: 'error'});
	            });

			},
			//恢复默认
			backDefaul(){
				this.customizing = false
				this.$refs.widgets.style.removeProperty('transform')
				this.widgets =  JSON.parse(JSON.stringify(this.defaultGrid))
				this.$tool.data.remove("widgets")
			},
			//关闭
			close(){
				this.customizing = false
				this.$refs.widgets.style.removeProperty('transform')
			}
		}
	}
</script>

<style scoped lang="scss">

	.el-input-number {
		position: absolute;
	    top: 15px;
	    left: 10px;
	    width: 100px;
	}

	.el-slider {
		position: absolute;
	    top: 12px;
	    left: 5px;
	    width: calc( 100% - 68px );
	}

	.widgets-home {display: flex;flex-direction: row;flex: 1;height: 100%;}
	.widgets-content {flex: 1;overflow: auto;overflow-x:hidden;padding:10px 10px;}
	.widgets-aside {z-index: 999; width: 380px;background: #fff;box-shadow: 0 0 10px rgba(0,0,0,.1);position: relative;overflow: auto;}
	.widgets-aside-title {font-size: 14px;display: flex;align-items: center;justify-content: center;}
	.widgets-aside-title i {margin-right: 10px;font-size: 18px;}
	.widgets-aside-close {font-size: 18px;width:30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 3px;cursor: pointer;}
	.widgets-aside-close:hover {background: rgba(180,180,180,0.1);}

	.widgets-top {margin-bottom: 15px;display: flex;justify-content: space-between;align-items: center;}
	.widgets-top-title {font-size: 18px;font-weight: bold;}

	.widgets {transform-origin: top left;transition: transform .15s;}
	.widgets-top-actions {
		position: fixed;
	    right: 30px;
	    bottom: 10px;
	    z-index: 1000;
	    -webkit-animation-duration: 3s;
	    -o-animation-duration: 3s;
	    animation-duration: 3s;
	}

	.draggable-box {height: 100%;width: 100%; display: contents; }

	.customizing .widgets-wrapper {margin-right:-360px}
	.customizing .widgets-wrapper .el-col {padding-bottom:15px;}
	.customizing .widgets-wrapper .draggable-box {border: 1px dashed var(--el-color-primary);padding:15px;}
	.customizing .widgets-wrapper .no-widgets {display: none;}
	.customizing .widgets-item {
		position: relative;margin-bottom: 15px;
		border: 1px dashed var(--el-color-primary);
		    padding: 15px;
	}
	.customize-overlay {position: absolute;top:0;right:0;bottom:0;left:0;z-index: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;background: rgba(255,255,255,0.9);cursor: move;}
	.customize-overlay label {background: var(--el-color-primary);color: #fff;height:40px;padding:0 30px;border-radius: 40px;font-size: 18px;display: flex;align-items: center;justify-content: center;cursor: move;}
	.customize-overlay label i {margin-right: 15px;font-size: 24px;}
	.customize-overlay .close {position: absolute;top:15px;right:15px;}
	.customize-overlay .close:focus, .customize-overlay .close:hover {background: var(--el-button-hover-color);color: var(--el-color-danger);}

	.widgets-list {}
	.widgets-list-item {display: flex;flex-direction: row;padding:15px;align-items: center;}
	.widgets-list-item .item-logo {width: 40px;height: 40px;border-radius: 50%;background: rgba(180,180,180,0.1);display: flex;align-items: center;justify-content: center;font-size: 18px;margin-right: 15px;color: #6a8bad;}
	.widgets-list-item .item-info {flex: 1;}
	.widgets-list-item .item-info h2 {font-size: 16px;font-weight: normal;cursor: default;}
	.widgets-list-item .item-info p {font-size: 12px;color: #999;cursor: default;}
	.widgets-list-item:hover {background: rgba(180,180,180,0.1);}

	.widgets-wrapper .sortable-ghost {opacity: 0.5;}

	.selectLayout {width: 100%;display: flex;}
	.selectLayout-item {width:60px;height:60px;border: 2px solid var(--el-border-color-light);padding:5px;cursor: pointer;margin-right: 15px;}
	.selectLayout-item span {display: block;background: var(--el-border-color-light);height:46px;}
	.selectLayout-item.item02 span {height:30px;}
	.selectLayout-item.item02 .el-col:nth-child(1) span {height:14px;margin-bottom: 2px;}
	.selectLayout-item.item03 span {height:14px;margin-bottom: 2px;}
	.selectLayout-item:hover {border-color: var(--el-color-primary);}
	.selectLayout-item.active {border-color: var(--el-color-primary);}
	.selectLayout-item.active span {background: var(--el-color-primary);}


	.dark {
		.widgets-aside {background: #2b2b2b;}
		.customize-overlay {background: rgba(43,43,43,0.9);}
	}

	@media (max-width: 992px){
		.customizing .widgets {transform: scale(1) !important;}
		.customizing .widgets-aside {width: 100%;position: absolute;top:50%;right:0;bottom:0;}
		.customizing .widgets-wrapper {margin-right:0;}
	}

</style>