yudao-dev/src/views/print/design.vue

<!-- 
    filename: design.vue
    author: liubin
    date: 2023-10-07 13:14:40
    description: 设计打印模板
-->

<template>
	<div class="print-design">
		<section id="menu">
			<NavMenu @action="handleAction" :menu="menu" />
		</section>
		<section id="main-panel">
			<section id="left-panel">
				<h2>组件</h2>
				<div id="components"></div>
			</section>
			<section id="edit-panel"></section>
			<section id="right-panel">
				<h2>设置</h2>
				<div id="settings"></div>
			</section>
		</section>
	</div>
</template>

<script>

import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
hiprint.init({
  providers: [defaultElementTypeProvider()],
});

const NavSelector = {
	name: 'NavSelector',
	props: ['name', 'options'],
	data() {
		return {
			open: false,
		};
	},
	methods: {
		handleOpen() {
			// this.$emit('closeOtherMenu', this)
			// this.$emit('hover', this)
			this.open = !this.open;
		},
		handleClickItem(e) {
			this.$emit('click', e.target.innerText)
		},
		// 暴露一个close方法，供父组件调用
		closeSubMenu() {
			this.open = false;
		},
	},
	render: function (h) {
		return (
			<li class={'nav-selector__item'} onMouseenter={this.handleOpen} onMouseleave={this.handleOpen}>
				<span class={'nav-selector__name'}>{this.name}</span>
				<ul class={`${this.open ? '' : 'hidden'} nav-selector__submenu-items`}>
					{this.options.map((item) => {
						return <li onClick={this.handleClickItem}>{item}</li>;
					})}
				</ul>
			</li>
		);
	},
};

const NavMenu = {
	name: 'NavMenu',
	props: ['menu'],
	components: { NavSelector },
	data() {
		return {}
	},
	methods: {
		handleCloseOtherMenu(vueInstance) {
			this.$children.forEach(vm => {
				if (vm != vueInstance) {
					vm.closeSubMenu()
				}
			})
		},
		handleItemClicked(e) {
			this.$emit('action', e);
		}
	},
	render: function (h) {
		return (
			<ul class={'nav-menu'}>
				{this.menu.map((item) => {
					return <NavSelector onClick={this.handleItemClicked} onCloseOtherMenu={this.handleCloseOtherMenu} name={item.name} options={item.options} />;
				})}
			</ul>
		);
	},
};

export default {
	name: 'PrintDesignPage',
	components: { NavMenu },
	props: {},
	data() {
		return {
			hiprintTemplate: null,
			menu: [
				{
					name: '菜单',
					options: ['新建', '打开', '保存', '另存为', '导出', '打印', '退出'],
				},
				{
					name: '视图',
					options: ['编辑', '布局'],
				},
			],
		};
	},
	computed: {},
	mounted() {
		this.loadSideBar();
		this.loadDesigner();
	},
	methods: {
		loadDesigner() {
			$("#edit-panel").empty();  
			this.hiprintTemplate = new hiprint.PrintTemplate({
				settingContainer: "#settings",
			});
			this.hiprintTemplate.design("#edit-panel");
		},
		loadSideBar() {
			this.loadProviders();
			this.loadSettings();
		},
		loadProviders() { },
		loadSettings() { },
		handleAction(name) {
			console.log('name', name)
		}
	},
};
</script>

<style scoped lang="scss">
.print-design {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

#main-panel {
	height: 1px;
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	grid-auto-rows: 1fr;
	grid-template-areas: 'left main right';
}

#menu {
	// background: black;
	// color: white;
	background: #fff;
	border-bottom: 1px solid #ccc;

	>ul {
		// background: #32aa32;
		padding: 0;
		list-style: none;
		margin: 0;
		margin-left: 10px;
		display: flex;
	}
}

#left-panel {
	overflow: auto;
	grid-area: left;
	background: #fff;
	
	h2 {
		margin: 0;
		font-weight: 400;
		padding: 4px 20px;
		border-bottom: 1px solid #ccc;
		background: #ccc;
	}
}

#edit-panel {
	padding: 20px;
	overflow: auto;
	grid-area: main;
	justify-items: center;
	background: #fff;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

#right-panel {
	overflow: auto;
	grid-area: right;
	background: #fff;

	h2 {
		margin: 0;
		font-weight: 400;
		padding: 4px 12px;
		border-bottom: 1px solid #ccc;
		background: #ccc;
	}
}
</style>

<style lang="scss">
// 子组件的样式
.nav-selector__item {
	font-size: 18px;
	letter-spacing: 1px;
	// font-weight: 600;
	padding: 6px 12px;
	line-height: 1.25;
	position: relative;
	cursor: pointer;

	&:hover {
		background: #f1f1f1;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		min-width: 128px;
		left: 0px;
		background: #fff;
		border: 1px solid #ccc;
		// border-radius: 4px;
		margin: 0;
		box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
		z-index: 100;

		li {
			padding: 6px 12px;
			cursor: pointer;

			&:hover {
				background: #f1f1f1;
			}
		}
	}

	.hidden {
		display: none;
	}
}
</style>