forest-map-back/src/view/a-picture/index.vue

<template>
	<!-- 一张图 -->
	<div style="height: 100%;">
		<div class="page-header"><el-input style="width: 260px;" placeholder="请输入大屏名称" prefix-icon="el-icon-search" clearable v-model="mapName"></el-input></div>
		<div class="content-list" v-infinite-scroll="searchMap" infinite-scroll-disabled="disabled" v-loading="loading">
			<el-row :gutter="20">
				<el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4" v-if="auth.includes('save')">
					<div class="li-item" @click="centerDialogVisible = true">
						<div class="add">
							<i class="el-icon-plus"></i>
							新增大屏
						</div>
					</div>
				</el-col>
				<el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4" v-for="(li, index) in mapListData" :key="li.id">
					<div class="li-item">
						<div class="li-item-box">
							<div class="li-item-box-top">
								<el-image class="bg-img" :src="li.img | defaultImg" lazy></el-image>
								<div class="control-btn">
									<el-button round v-if="!!(li.state - 0)" size="mini" type="primary" @click="release(index)">预览</el-button>
									<el-button round v-if="auth.includes('publish') && !(li.state - 0)" size="mini" type="primary" @click="release(index)">发布</el-button>
									<el-button round v-if="auth.includes('update')" size="mini" type="warning" @click="edit(li)">编辑</el-button>
									<el-button round v-if="auth.includes('delete')" size="mini" type="danger" @click="delMap(li)">删除</el-button>
								</div>
							</div>
							<div class="li-item-box-bottom">
								<span>{{ li.mapName }}</span>
								<span>{{ li.state | state }}</span>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<!-- <p class="loading-text" v-if="loading">加载中...</p> -->
			<p class="loading-text" v-if="noMore">没有数据了</p>
		</div>
		<el-dialog title="新建大屏" :visible.sync="centerDialogVisible" width="400">
			<el-form ref="form" :model="form" label-width="80px" :hide-required-asterisk="true">
				<el-form-item label="大屏名称"><el-input v-model="form.mapName"></el-input></el-form-item>
				<el-form-item label="大屏描述"><el-input type="textarea" v-model="form.mapDesc"></el-input></el-form-item>
				<el-form-item label="套用框架">
					<el-select v-model="form.templateId" placeholder="请选择框架" style="width: 100%;">
						<el-option v-for="i in tplSelectData" :label="i.name" :value="i.id" :key="i.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="onSubmit">创 建</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			//框架模板下拉
			tplSelectData: [],
			//新增大屏表单
			form: {
				mapName: '',
				templateId: '',
				mapDesc: ''
			},
			mapName: '',
			searchTimeFun: this.$timeFun(),
			//大屏列表
			listData: {
				total: -1 //默认值必须小于0
			},
			loading: false,
			centerDialogVisible: false,
			//当前选择大屏
			nowMapObj: {}
		};
	},
	filters: {
		state(value) {
			//0-未发布 1-已发布 2-撤回
			return value == 1 ? '已发布' : '未发布';
		},
		defaultImg(value) {
			return require('../../assets/images/map-defaut.jpg');
		}
	},
	computed: {
		//当前页权限
		auth() {
			const activePage = this.$route.path;
			return (
				this.$store.state.userTree
					.filter(x => {
						return x.url == activePage;
					})
					.map(x => {
						return x.auth;
					})[0] || []
			);
		},
		//大屏列表
		mapListData() {
			return (this.listData.list || []).map(x => {
				return {
					...x,
					tplSrc: '/public/'
				};
			});
		},
		//是否加载
		noMore() {
			const { list = [], total = -1 } = this.listData;
			return !this.loading && total >= list.length;
		},
		//滚动条加载控制
		disabled() {
			return this.loading || this.noMore;
		},
		//计算大屏展示地址
		mapSrc() {
			const { tplSrc = '', id = '' } = this.nowMapObj;
			return `${tplSrc}?v=${Math.random(1,9999,0)}&id=${id}`;
		}
	},
	mounted() {
		this.$port.findMapTemplate().then(res => {
			this.tplSelectData = res.list;
		});
	},
	watch: {
		mapName(n) {
			this.searchMap(n);
		}
	},
	methods: {
		//搜索大屏
		searchMap(n) {
			this.loading = true;
			this.searchTimeFun(() => {
				this.$port
					.getMap({
						mapName: n || ''
					})
					.then(res => {
						this.listData = res;
						this.loading = false;
					});
			});
		},
		//新增提交
		onSubmit() {
			this.centerDialogVisible = false;
			this.$port.addMap(this.form).then(res => {
				this.searchMap();
			});
		},
		delMap(li) {
			this.$confirm('此操作将永久删除该大屏再也不能找回了, 是否继续?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$port.delMap(li).then(res => {
						this.searchMap();
						this.$message({
							type: 'success',
							message: '删除成功!',
							duration:800
						});
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
						duration:800
					});
				});
		},
		edit(e) {
			const { id = '', mapName = '', tplSrc = '' } = e;
			this.$router.push({
				path: '/a-picture/edit',
				query: {
					id,
					tplSrc
				}
			});
		},
		//发布
		release(index) {
			const e = (this.nowMapObj = this.mapListData[index]);
			//e.state == 1 预览 e.state == 0
			if (e.state == 1) {
				// window.open(this.mapSrc, '', 'channelmode=1,fullscreen=1,left=0,top=0,location=0');
				window.open(this.mapSrc);
			} else {
				this.$port.releaseMap(e).then(res => {
					if (!(res.code - 0)) {
						e.state = 1;
						this.listData.list.splice(index, 1, e);
						this.$alert(`发布成功：<a href=${this.mapSrc} target=_blank style="word-wrap:break-word;">去预览</a>`, '提示', {
							confirmButtonText: '关闭',
							dangerouslyUseHTMLString: true,
							type: 'success'
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
.page-header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.content-list {
	margin-top: 10px;
	.loading-text {
		font-size: 14px;
		display: block;
		text-align: center;
	}
	height: calc(100% - 98px);
	overflow: auto;
	padding: 0 2%;
	.li-item {
		display: flex;
		cursor: pointer;
		margin: 10px 0;
		zoom: 1; //清除浮动
		//清除浮动
		&::after {
			display: block;
			clear: both;
			content: '';
			visibility: hidden;
			height: 0;
		}
		//支撑高度
		&::before {
			content: '';
			float: left;
			width: 0;
			height: 0;
			padding-top: 60%; //控制高度
			overflow: hidden;
			opacity: 0;
		}
		//新增样式控制
		.add {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #409eff;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
			border-radius: 8px;
			border: 1px dashed;
			font-size: 1.2em;
			i {
				font-size: 1.2em;
				margin-right: 0.5rem;
			}
			&::before {
				padding-top: calc(60% - 2px);
			}
		}
		&-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
			border-radius: 8px;
			&-top {
				position: relative;
				flex: 9;
				.bg-img,
				.control-btn {
					position: absolute;
					height: 100%;
					width: 100%;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					z-index: 0;
				}
				.control-btn {
					opacity: 0;
					transition: opacity 200ms;
					z-index: 1;
					background: rgba(255, 255, 255, 0.8);
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					&:hover {
						opacity: 1;
					}
				}
			}
			&-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 5%;
				flex: 3;
			}
		}
	}
}
</style>