|
|
@@ -11,19 +11,30 @@
|
|
|
<div class="website-show hui-flex">
|
|
|
<div class="website-form-title">
|
|
|
<span>网站展示</span>
|
|
|
- <span></span>
|
|
|
+ <website-upload ref="upload" v-show="false" @reload="successFunc">
|
|
|
+ </website-upload>
|
|
|
</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 :src="websiteUrl" width="100%" height="100%" frameborder="0" @load="onloadIframe">
|
|
|
+ <iframe ref="iframeDom" :src="websiteUrl" width="100%" height="100%" frameborder="0"
|
|
|
+ @load="onloadIframe">
|
|
|
</iframe>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="hui-drawer-submit">
|
|
|
- <el-button type="primary" size="mini" :disabled="!websiteUrl" @click="submit">发布</el-button>
|
|
|
+ <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>
|
|
|
@@ -33,38 +44,49 @@
|
|
|
import {
|
|
|
getAIData,
|
|
|
saveHtmlData,
|
|
|
- getHtmlData
|
|
|
+ getHtmlData,
|
|
|
+ updateHtmlData
|
|
|
} from '@/api/ai'
|
|
|
import aiChat from '@/components/work/common/aiChat.vue'
|
|
|
+ import websiteUpload from '@/components/work/common/websiteUpload.vue'
|
|
|
+ import config from '@/config'
|
|
|
export default {
|
|
|
components: {
|
|
|
- aiChat
|
|
|
+ aiChat,
|
|
|
+ websiteUpload
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
websiteUrl: '',
|
|
|
loading: false,
|
|
|
- simpleUUID: ''
|
|
|
+ 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) return this.websiteUrl =
|
|
|
- `https://workark.com/api/enterprise/${simpleUUID}`
|
|
|
+ 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.websiteUrl = `https://workark.com/api/enterprise/${simpleUUID}`;
|
|
|
+ this.htmlData = saveData.data;
|
|
|
+ return this.websiteUrl = `${config.baseURL}/api/enterprise/${simpleUUID}`
|
|
|
},
|
|
|
submit() {
|
|
|
this.$confirm('是否发布该官网？', () => {
|
|
|
@@ -79,6 +101,74 @@
|
|
|
},
|
|
|
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() {
|
|
|
|
