70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-card>
|
|
<div slot="header" class="clearfix">
|
|
<span style="font-weight: bold; font-size: 16px;">
|
|
<i class="el-icon-document"></i> 文档同步配置
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Tab切换 -->
|
|
<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
|
|
<el-tab-pane label="腾讯文档" name="tendoc">
|
|
<span slot="label">
|
|
<i class="el-icon-document"></i> 腾讯文档
|
|
</span>
|
|
<TencentDocConfig ref="tendocConfig" />
|
|
</el-tab-pane>
|
|
|
|
<el-tab-pane label="WPS365" name="wps365">
|
|
<span slot="label">
|
|
<i class="el-icon-document-copy"></i> WPS365
|
|
</span>
|
|
<WPS365Config ref="wps365Config" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TencentDocConfig from './components/TencentDocConfig'
|
|
import WPS365Config from './components/WPS365Config'
|
|
|
|
export default {
|
|
name: 'DocSync',
|
|
components: {
|
|
TencentDocConfig,
|
|
WPS365Config
|
|
},
|
|
data() {
|
|
return {
|
|
activeTab: 'tendoc'
|
|
}
|
|
},
|
|
methods: {
|
|
handleTabClick(tab) {
|
|
// Tab切换时的处理
|
|
this.$nextTick(() => {
|
|
if (tab.name === 'tendoc' && this.$refs.tendocConfig) {
|
|
this.$refs.tendocConfig.refresh()
|
|
} else if (tab.name === 'wps365' && this.$refs.wps365Config) {
|
|
this.$refs.wps365Config.refresh()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
::v-deep .el-tabs__header {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
|