|
|
@@ -5,7 +5,7 @@
|
|
|
style="margin-top:40px;height: 100%;"
|
|
|
@click="parentClick($event)"
|
|
|
>
|
|
|
- <div style="width:100%;height: 100%;overflow: scroll;" class='parent' id='parent'></div>
|
|
|
+ <div style="width:100%;height: 100%;overflow: scroll;" class='parent' :id="containerId"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -13,12 +13,14 @@
|
|
|
<script>
|
|
|
import Vue from 'vue'
|
|
|
import { getExcelHtml } from '@/api/exctab/excelmodel'
|
|
|
+import { log } from '@antv/g2plot/lib/utils';
|
|
|
|
|
|
export default {
|
|
|
props: [
|
|
|
'pkeyId',
|
|
|
'initTableName',
|
|
|
- 'selectedTableKey' // 接收父组件传递的选中key
|
|
|
+ 'selectedTableKey' ,// 接收父组件传递的选中key
|
|
|
+ 'containerId'
|
|
|
],
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -26,6 +28,13 @@ export default {
|
|
|
exHtml: '',
|
|
|
currentComponent: null
|
|
|
}
|
|
|
+ },
|
|
|
+ // 确保每个实例有独立的容器ID
|
|
|
+ created() {
|
|
|
+ // 如果父组件没传，提供默认唯一ID
|
|
|
+ if (!this.containerId) {
|
|
|
+ this.containerId = `excel-container-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
pkeyId: {
|
|
|
@@ -34,6 +43,7 @@ export default {
|
|
|
handler(newVal) {
|
|
|
if (newVal) {
|
|
|
this.exHtml = ''
|
|
|
+
|
|
|
this.getExcelHtml(newVal)
|
|
|
} else {
|
|
|
this.exHtml = ''
|
|
|
@@ -53,59 +63,89 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
immediate: true
|
|
|
- }
|
|
|
+ },
|
|
|
+ containerId: {
|
|
|
+ handler(newVal) {
|
|
|
+ this.clearForm()
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- // 根据key高亮对应的元素组
|
|
|
- highlightElementsByKey(key) {
|
|
|
- // 提取key前缀（例如从key_1中提取key_1）
|
|
|
- const keyPrefix = key.split('__')[0];
|
|
|
-
|
|
|
- // 找到所有具有相同前缀的元素
|
|
|
- const samePrefixElements = document.querySelectorAll(`[id^="${keyPrefix}__"]`);
|
|
|
-
|
|
|
- // 如果没有找到带__的元素，直接查找当前key的元素
|
|
|
- if (samePrefixElements.length === 0) {
|
|
|
- const element = document.getElementById(key);
|
|
|
- if (element) {
|
|
|
- this.selectElements([element]);
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 选中这组元素
|
|
|
- this.selectElements(samePrefixElements);
|
|
|
- },
|
|
|
-
|
|
|
+ // 根据key高亮对应的元素组 // 确保所有DOM操作都限定在当前容器内
|
|
|
+ getContainerElement() {
|
|
|
+ return document.getElementById(this.containerId);
|
|
|
+ }, // 修改所有使用document.getElementById的地方，使用动态容器ID
|
|
|
+ highlightElementsByKey(key) {
|
|
|
+ if (!key) return;
|
|
|
+
|
|
|
+ // 确保在当前组件容器内操作
|
|
|
+ const parent = document.getElementById(this.containerId);
|
|
|
+ if (!parent) return;
|
|
|
+
|
|
|
+ const keyPrefix = key.split('__')[0];
|
|
|
+
|
|
|
+ // 修复：始终在当前容器内查找，避免污染其他实例
|
|
|
+ const samePrefixElements = parent.querySelectorAll(`[id^="${keyPrefix}__"]`);
|
|
|
+
|
|
|
+ if (samePrefixElements.length === 0) {
|
|
|
+ // 修复：使用 parent.querySelector 而不是 document.getElementById
|
|
|
+ const element = parent.querySelector(`#${key}`);
|
|
|
+ if (element) {
|
|
|
+ this.selectElements([element]);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.selectElements(samePrefixElements);
|
|
|
+},
|
|
|
async getExcelHtml(pkeyId) {
|
|
|
+ console.log(pkeyId,'pkeyId');
|
|
|
+
|
|
|
this.clearForm();
|
|
|
- const { data: res } = await getExcelHtml({ pkeyId })
|
|
|
- if (res.code === 200) {
|
|
|
- this.exHtml = res.data
|
|
|
- this.cop();
|
|
|
+ try {
|
|
|
+ const { data: res } = await getExcelHtml({ pkeyId })
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.exHtml = res.data
|
|
|
+ this.cop();
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取HTML失败:', error)
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- clearForm() {
|
|
|
- const parentElement = document.getElementById('parent')
|
|
|
+ clearForm() {
|
|
|
+ // 使用动态容器ID
|
|
|
+ const parentElement = document.getElementById(this.containerId)
|
|
|
if (parentElement) {
|
|
|
parentElement.innerHTML = ''
|
|
|
}
|
|
|
this.clearAllSelected()
|
|
|
},
|
|
|
|
|
|
- async cop() {
|
|
|
- let _that = this
|
|
|
- var MyComponent = await Vue.extend({
|
|
|
- template: this.exHtml,
|
|
|
- data() {
|
|
|
- return {
|
|
|
- formData: {},
|
|
|
- getTokenHeader: {},
|
|
|
- dap_site_data: {}
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
+
|
|
|
+ async cop() {
|
|
|
+ const _that = this;
|
|
|
+ const parentElement = this.getContainerElement();
|
|
|
+ if (!parentElement) {
|
|
|
+ console.error('父容器不存在:', this.containerId);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!parentElement) {
|
|
|
+ console.error('父容器不存在:', this.containerId);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const MyComponent = Vue.extend({
|
|
|
+ template: this.exHtml,
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ formData: {},
|
|
|
+ getTokenHeader: {},
|
|
|
+ dap_site_data: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
contextmenuClick() {},
|
|
|
getInformation() {},
|
|
|
formUploadSuccess() {},
|
|
|
@@ -125,17 +165,33 @@ export default {
|
|
|
keyupShiftRight() {},
|
|
|
inputLeftClick() {},
|
|
|
}
|
|
|
- })
|
|
|
- var component = new MyComponent().$mount()
|
|
|
- document.getElementById('parent').appendChild(component.$el);
|
|
|
-
|
|
|
- // 组件渲染后，检查是否需要高亮元素
|
|
|
+ })
|
|
|
+
|
|
|
+ await Vue.nextTick();
|
|
|
+
|
|
|
+ // 先销毁可能存在的旧组件
|
|
|
+ if (this.currentComponent) {
|
|
|
+ this.currentComponent.$destroy();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建新组件
|
|
|
+ this.currentComponent = new MyComponent().$mount();
|
|
|
+
|
|
|
+ // 清空并添加新内容
|
|
|
+ parentElement.innerHTML = '';
|
|
|
+ parentElement.appendChild(this.currentComponent.$el);
|
|
|
+ // 延迟执行高亮，确保DOM完全渲染
|
|
|
+ this.$nextTick(() => {
|
|
|
if (this.selectedTableKey) {
|
|
|
this.highlightElementsByKey(this.selectedTableKey);
|
|
|
}
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error('组件渲染失败:', error);
|
|
|
+ }
|
|
|
},
|
|
|
-
|
|
|
async parentClick(e) {
|
|
|
+
|
|
|
// 原有点击处理逻辑保持不变
|
|
|
let target = e.target;
|
|
|
while (target && !target.id && target.parentNode) {
|
|
|
@@ -160,7 +216,10 @@ export default {
|
|
|
}
|
|
|
|
|
|
const id = target.id;
|
|
|
+
|
|
|
+
|
|
|
const isAlreadySelected = this.selectedElements.some(item => item.id === id);
|
|
|
+ console.log(isAlreadySelected,'isAlreadySelected');
|
|
|
|
|
|
this.clearAllSelected();
|
|
|
|
|
|
@@ -181,11 +240,20 @@ export default {
|
|
|
},
|
|
|
|
|
|
selectElements(elements) {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
elements.forEach(el => {
|
|
|
const index = this.selectedElements.findIndex(item => item.id === el.id);
|
|
|
+ console.log(index,'index');
|
|
|
+
|
|
|
if (index === -1) {
|
|
|
el.style.backgroundColor = '#ffa500'; // 橙色背景
|
|
|
+ console.log(this.initTableName,'initTableName');
|
|
|
+
|
|
|
const elementId = this.initTableName + ':' + this.extractKeyPrefix(el.id);
|
|
|
+
|
|
|
+
|
|
|
const keyName = el.placeholder;
|
|
|
this.selectedElements.push({ tableElementKey: elementId, eName: keyName, id: el.id });
|
|
|
this.$emit('element-selected', { tableElementKey: elementId, eName: keyName, id: el.id }, true);
|
|
|
@@ -203,6 +271,9 @@ export default {
|
|
|
},
|
|
|
|
|
|
clearAllSelected() {
|
|
|
+ const container = this.getContainerElement();
|
|
|
+ if (!container) return
|
|
|
+
|
|
|
this.selectedElements.forEach(item => {
|
|
|
const element = document.getElementById(item.id);
|
|
|
if (element) {
|
