|
|
@ -4,12 +4,12 @@
|
|
|
|
<el-col :span="3">
|
|
|
|
<el-col :span="3">
|
|
|
|
<el-card style="height: calc(100vh - 125px)">
|
|
|
|
<el-card style="height: calc(100vh - 125px)">
|
|
|
|
<div slot="header">
|
|
|
|
<div slot="header">
|
|
|
|
<span><el-button type="text" size="small">新建标签页</el-button></span>
|
|
|
|
<span>导航</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-menu
|
|
|
|
<el-menu
|
|
|
|
:default-active="localIndex"
|
|
|
|
:default-active="localIndex"
|
|
|
|
@select="onSelect"
|
|
|
|
@select="onSelect"
|
|
|
|
mode="horizontal"
|
|
|
|
mode="vertical"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<el-menu-item v-for="(tab, index) in tabs"
|
|
|
|
<el-menu-item v-for="(tab, index) in tabs"
|
|
|
|
:key="index"
|
|
|
|
:key="index"
|
|
|
@ -66,7 +66,6 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
@ -129,63 +128,98 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
onSelect(index) {
|
|
|
|
onSelect(index) {
|
|
|
|
this.localIndex = index;
|
|
|
|
try {
|
|
|
|
this.queryParams.name = this.tabs[index].name;
|
|
|
|
this.localIndex = index;
|
|
|
|
this.handleQuery();
|
|
|
|
this.queryParams.name = this.tabs[index].name;
|
|
|
|
|
|
|
|
this.handleQuery();
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error('Error in onSelect:', error);
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onClick(tab) {
|
|
|
|
onClick(tab) {
|
|
|
|
this.localIndex = tab.name;
|
|
|
|
try {
|
|
|
|
this.queryParams.name = this.tabs[tab.name].name;
|
|
|
|
this.localIndex = tab.name;
|
|
|
|
this.handleQuery();
|
|
|
|
this.queryParams.name = this.tabs[tab.name].name;
|
|
|
|
|
|
|
|
this.handleQuery();
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error('Error in onClick:', error);
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handleQuery(queryParams) {
|
|
|
|
handleQuery(queryParams) {
|
|
|
|
if (queryParams) {
|
|
|
|
try {
|
|
|
|
this.queryParams = queryParams;
|
|
|
|
if (queryParams) {
|
|
|
|
|
|
|
|
this.queryParams = queryParams;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$emit('query', this.queryParams);
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error('Error in handleQuery:', error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.$emit('query', this.queryParams);
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handleReset() {
|
|
|
|
handleReset() {
|
|
|
|
this.$emit('reset', this.queryParams);
|
|
|
|
try {
|
|
|
|
|
|
|
|
this.$emit('reset', this.queryParams);
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error('Error in handleReset:', error);
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handleUpdate(row) {
|
|
|
|
handleUpdate(row) {
|
|
|
|
alert(row.id);
|
|
|
|
try {
|
|
|
|
|
|
|
|
alert(row.id);
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error('Error in handleUpdate:', error);
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handleSortChange() {
|
|
|
|
handleSortChange() {
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
// 处理排序变化
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error('Error in handleSortChange:', error);
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handlePageChange() {
|
|
|
|
handlePageChange() {
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
// 处理分页变化
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error('Error in handlePageChange:', error);
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
removeTab(targetName) {
|
|
|
|
removeTab(targetName) {
|
|
|
|
const tabs = this.tabs;
|
|
|
|
try {
|
|
|
|
let activeName = this.localIndex;
|
|
|
|
const tabs = this.tabs;
|
|
|
|
|
|
|
|
let activeName = this.localIndex;
|
|
|
|
|
|
|
|
|
|
|
|
if (activeName === targetName) {
|
|
|
|
if (activeName === targetName) {
|
|
|
|
tabs.forEach((tab, index) => {
|
|
|
|
tabs.forEach((tab, index) => {
|
|
|
|
if (tab.name === targetName) {
|
|
|
|
if (tab.name === targetName) {
|
|
|
|
const nextTab = tabs[index + 1] || tabs[index - 1];
|
|
|
|
const nextTab = tabs[index + 1] || tabs[index - 1];
|
|
|
|
if (nextTab) {
|
|
|
|
if (nextTab) {
|
|
|
|
activeName = nextTab.name;
|
|
|
|
activeName = nextTab.name;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.localIndex = activeName;
|
|
|
|
this.localIndex = activeName;
|
|
|
|
this.$emit('update:index', activeName);
|
|
|
|
this.$emit('update:index', activeName);
|
|
|
|
this.$emit('remove', targetName);
|
|
|
|
this.$emit('remove', targetName);
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error('Error in removeTab:', error);
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handleOperationClick(operation, row) {
|
|
|
|
handleOperationClick(operation, row) {
|
|
|
|
this.$emit('operation-click', operation, row);
|
|
|
|
try {
|
|
|
|
|
|
|
|
this.$emit('operation-click', operation, row);
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error('Error in handleOperationClick:', error);
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
console.log('Received props:', this.$props);
|
|
|
|
console.log('Received props:', this.$props);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
<style scoped>
|
|
|
|
.table-container {
|
|
|
|
.table-container {
|
|
|
|
height: calc(100vh - 250px); /* 调整高度以适应页面布局 */
|
|
|
|
height: calc(100vh - 250px); /* 调整高度以适应页面布局 */
|
|
|
|