realty/virgo.wzfrontend/workark/src/views/work/oa/ai/app.vue

<template>
	<div class="hui-flex border-box ai-website">
		<div class="website-form hui-flex">
			<div class="website-form-title">
				网站信息
			</div>
			<div class="hui-flex-box">
				<ai-flow-chat @previewWebSite="previewWebSite"></ai-flow-chat>
			</div>
		</div>
		<div class="website-show hui-flex">
			<div class="website-form-title">
				<span>网站展示</span>
				<website-upload ref="upload" v-show="false" @reload="successFunc">
				</website-upload>
				{{websiteUrl}}
			</div>
			<div class="hui-flex-box">
				<div class="no-empty" v-if="!websiteUrl">
					<el-empty description="请先预览网站"></el-empty>
				</div>
				<div class="html-box" v-else v-loading="loading">
					<iframe ref="iframeDom" :src="websiteUrl" width="100%" height="100%" frameborder="0"
						@load="onloadIframe">
					</iframe>
				</div>
			</div>
			<div class="hui-drawer-submit">
				<el-button size="mini" :disabled="!websiteUrl" @click="cancelIframe" v-if="iframeEdit">取消</el-button>
				<el-button type="primary" size="mini" :disabled="!websiteUrl" @click="saveIframe" v-if="iframeEdit">
					保存
				</el-button>
				<el-button type="primary" size="mini" :disabled="!websiteUrl" @click="editIframe" v-if="!iframeEdit">
					编辑
				</el-button>
				<el-button type="primary" size="mini" :disabled="!websiteUrl" @click="submit" v-if="!iframeEdit">
					发布
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getAIData,
		saveHtmlData,
		getHtmlData,
		updateHtmlData
	} from '@/api/ai'
	import aiFlowChat from '@/components/work/common/aiFlowChat.vue'
	import websiteUpload from '@/components/work/common/websiteUpload.vue'
	import config from '@/config'
	export default {
		components: {
			aiFlowChat,
			websiteUpload
		},
		data() {
			return {
				websiteUrl: '',
				loading: false,
				simpleUUID: '',
				iframeEdit: false,
				imageELement: null,
				htmlData: {}
			}
		},
		mounted() {},
		methods: {
			async previewWebSite(html, simpleUUID) {
				if (this.simpleUUID === simpleUUID) return;
				this.iframeEdit = false;
				this.loading = true;
				this.simpleUUID = simpleUUID;
				let htmlData = await getHtmlData({
					simpleUUID: simpleUUID
				})
				if (!htmlData.state) return this.websiteUrl = '';
				if (htmlData.data.length > 0) {
					this.htmlData = htmlData.data[0];
					return this.websiteUrl = `${config.baseURL}/api/enterprise/${simpleUUID}`
				}
				let saveData = await saveHtmlData({
					data: html,
					simpleUUID: simpleUUID
				})
				if (!saveData.state) return this.websiteUrl = '';
				this.htmlData = saveData.data;
				return this.websiteUrl = `${config.baseURL}/api/enterprise/${simpleUUID}`
			},
			submit() {
				this.$confirm('是否发布该官网？', () => {
					this.$prompt('发布连接', 'WorkArk提示', {
						confirmButtonText: '打开链接',
						cancelButtonText: '取消',
						inputValue: `https://workark.com/api/enterprise/${this.simpleUUID}`
					}).then(() => {
						window.open(`https://workark.com/api/enterprise/${this.simpleUUID}`, "_blank");
					}).catch(() => {});
				})
			},
			onloadIframe() {
				this.loading = false;
			},
			cancelIframe() {
				const iframe = this.$refs.iframeDom;
				iframe.contentWindow.location.reload();
				this.iframeEdit = false;
			},
			saveIframe() {
				const iframe = this.$refs.iframeDom;
				const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
				const a = iframeDoc.querySelectorAll('a');
				a.forEach(element => {
					element.href = element.oldHref;
					element.removeAttribute('oldHref');
				});
				const allElements = iframeDoc.querySelectorAll('*');
				allElements.forEach(element => {
					element.removeAttribute('contentEditable');
				});
				const img = iframeDoc.querySelectorAll('img');
				img.forEach(element => {
					element.style.cursor = 'pointer';
					element.onclick = null;
				});
				const iframeDocs = iframe.contentDocument || iframe.contentWindow.document;
				const htmlContent = iframeDocs.documentElement.outerHTML;
				updateHtmlData({
					data: htmlContent,
					id: this.htmlData.id
				}).then(res => {
					if (res.state) {
						this.$message.success('操作成功');
						this.iframeEdit = false;
					}
				})
			},
			editIframe() {
				let _self = this;
				const iframe = _self.$refs.iframeDom;
				if (iframe.contentDocument) {
					const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
					//编辑时a标签不要跳转
					const a = iframeDoc.querySelectorAll('a');
					a.forEach(element => {
						element.oldHref = element.href;
						element.href = 'javascript:void(0);'
					});
					// 获取页面所有元素
					const allElements = iframeDoc.querySelectorAll('*');
					// 为每个元素设置contenteditable=true
					allElements.forEach(element => {
						if (element.nodeName !== 'IMG') element.contentEditable = 'true';
					});
					// 获取页面所有元素
					const img = iframeDoc.querySelectorAll('img');
					// 为每个元素设置contenteditable=true
					img.forEach(element => {
						element.style.cursor = 'pointer';
						element.onclick = function() {
							_self.imageELement = this;
							_self.$refs.upload.reloadUpload();
						}
					});
					_self.iframeEdit = true;
				}
			},
			successFunc(url) {
				if (this.imageELement) this.imageELement.src = url;
			},
			handleSend() {

			}
		}
	}
</script>

<style lang="scss">
	.ai-website {
		flex-direction: row;

		.html-box {
			width: 100%;
			overflow: hidden;
			height: 100%;
		}

		.iframe-class {
			width: 100%;
			height: 100%;
			border: none;
			overflow: hidden;
		}

		.website-form-title {
			height: 44px;
			line-height: 44px;
			border-bottom: 1px solid $--border-color-light;
			padding: 0 10px;
			font-weight: bold;
		}

		.website-form {
			width: 300px;
			border-right: 1px solid $--border-color-light;
		}

		.no-empty {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.website-show {
			flex: 1;
			width: 0;
		}

		.website-form-content {
			padding: 10px;

			.el-form {
				display: block;

				.el-form-item {
					width: 100%;
					padding: 0 !important;
					margin-bottom: 15px;
				}
			}
		}
	}
</style>