|
|
@@ -1,74 +1,84 @@
|
|
|
<template>
|
|
|
- <el-tabs :value="active" v-bind="{...$attrs}" v-on="{...$listeners, 'tab-click': tab}">
|
|
|
- <slot/>
|
|
|
+ <el-tabs
|
|
|
+ :value="active"
|
|
|
+ v-bind="{ ...$attrs }"
|
|
|
+ v-on="{ ...$listeners, 'tab-click': tab }"
|
|
|
+ >
|
|
|
+ <slot />
|
|
|
</el-tabs>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import qs from 'qs'
|
|
|
+import qs from "qs";
|
|
|
+import merge from 'webpack-merge'
|
|
|
export default {
|
|
|
- name: 'tab-router',
|
|
|
+ name: "tab-router",
|
|
|
props: {
|
|
|
searchKey: {
|
|
|
type: String,
|
|
|
- default: 'tabrouter'
|
|
|
+ default: "tabrouter",
|
|
|
},
|
|
|
lazy: {
|
|
|
type: Boolean,
|
|
|
- defaule: true
|
|
|
+ defaule: true,
|
|
|
},
|
|
|
value: {
|
|
|
type: String,
|
|
|
- default: ''
|
|
|
- }
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- active: '',
|
|
|
+ active: "",
|
|
|
panels: [],
|
|
|
- panelsByName: {}
|
|
|
- }
|
|
|
+ panelsByName: {},
|
|
|
+ };
|
|
|
},
|
|
|
methods: {
|
|
|
getAllPanel() {
|
|
|
- const data = {}
|
|
|
- const routes = []
|
|
|
- this.panels = this.$slots.default.filter(item => {
|
|
|
- const isPanel = item.tag && item.tag.indexOf('ElTabPane') > -1
|
|
|
+ const data = {};
|
|
|
+ const routes = [];
|
|
|
+ this.panels = this.$slots.default.filter((item) => {
|
|
|
+ const isPanel = item.tag && item.tag.indexOf("ElTabPane") > -1;
|
|
|
if (isPanel && item.child) {
|
|
|
- data[item.child.name] = item.child
|
|
|
+ data[item.child.name] = item.child;
|
|
|
}
|
|
|
- return isPanel
|
|
|
- })
|
|
|
- const search = qs.parse(location.hash.split('?')[1])
|
|
|
+ return isPanel;
|
|
|
+ });
|
|
|
+ const search = qs.parse(location.hash.split("?")[1]);
|
|
|
if (this.panels.length) {
|
|
|
this.$nextTick(() => {
|
|
|
- this.active= search[this.searchKey] || this.panels[0].child?.name
|
|
|
- })
|
|
|
+ this.active = search[this.searchKey] || this.panels[0].child?.name;
|
|
|
+ });
|
|
|
}
|
|
|
- this.panelsByName = data
|
|
|
+ this.panelsByName = data;
|
|
|
},
|
|
|
tab(item, evt) {
|
|
|
- const { query } = this.$route
|
|
|
+ let { query } = this.$route;
|
|
|
const search = qs.stringify({
|
|
|
...query,
|
|
|
- [this.searchKey]: item.name
|
|
|
- })
|
|
|
- this.active = item.name
|
|
|
- history.replaceState(location.pathname, null, `#${this.$route.path}?${search}`)
|
|
|
- const parentClick = this.$listeners['tab-click']
|
|
|
+ [this.searchKey]: item.name,
|
|
|
+ });
|
|
|
+ this.active = item.name;
|
|
|
+ this.$router.replace({
|
|
|
+ query: merge(this.$route.query, {
|
|
|
+ ...query,
|
|
|
+ [this.searchKey]: item.name,
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ this.$store.dispatch("addVisitedViews", this.$route);
|
|
|
+ const parentClick = this.$listeners["tab-click"];
|
|
|
if (parentClick) {
|
|
|
- parentClick(item, evt)
|
|
|
+ parentClick(item, evt);
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
beforeUpdate() {
|
|
|
- this.getAllPanel()
|
|
|
+ this.getAllPanel();
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getAllPanel()
|
|
|
- }
|
|
|
-}
|
|
|
+ this.getAllPanel();
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-
|
|
|
</style>
|
mo