Skip to content

Commit 5c3d1ac

Browse files
author
张晨曦
committed
修改tab样式
1 parent 1ea1915 commit 5c3d1ac

File tree

6 files changed

+268
-150
lines changed

6 files changed

+268
-150
lines changed

‎web/src/apps/dataGovernance/module/dataGovernance/assetsIndex.vue

Lines changed: 89 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,15 @@
1515
</div>
1616
<div class="top-r-container">
1717
<template v-for="(work, index) in topTapList">
18-
<div
18+
<we-tab
1919
:key="work.id"
20-
:class="{
21-
active: currentTab.guid === work.guid && !textColor
22-
}"
23-
class="tab-item"
20+
:index="index"
21+
:work="work"
22+
:isActive="currentTab.guid === work.guid && !textColor"
23+
@on-choose="onChooseWork"
24+
@on-remove="onRemoveWork"
2425
ref="work_item"
25-
>
26-
<we-tab
27-
:index="index"
28-
:work="work"
29-
@on-choose="onChooseWork"
30-
@on-remove="onRemoveWork"
31-
/>
32-
</div>
26+
/>
3327
</template>
3428
</div>
3529
</slot>
@@ -44,111 +38,111 @@
4438
</template>
4539
<script>
4640
//import api from "@/common/service/api";
47-
import weTab from "../../../workflows/module/common/tabList/tabs.vue";
48-
import { EventBus } from "../common/eventBus/event-bus";
41+
import weTab from "@component/lubanTab/index.vue"
42+
import { EventBus } from "../common/eventBus/event-bus"
4943
export default {
5044
components: {
51-
weTab
45+
weTab,
5246
},
5347
data() {
5448
return {
5549
textColor: true,
5650
index: 0,
5751
work: {},
5852
currentTab: {},
59-
topTapList: []
60-
};
53+
topTapList: [],
54+
}
6155
},
6256
created() {},
6357
mounted() {
64-
EventBus.$on("on-choose-card", model => {
65-
let that = this;
66-
that.textColor = false;
67-
const topTapList = that.topTapList.slice(0);
68-
const { guid } = model;
69-
that.currentTab = model;
70-
if (topTapList.some(model => model.guid === guid)) {
71-
return false;
58+
EventBus.$on("on-choose-card", (model) => {
59+
let that = this
60+
that.textColor = false
61+
const topTapList = that.topTapList.slice(0)
62+
const { guid } = model
63+
that.currentTab = model
64+
if (topTapList.some((model) => model.guid === guid)) {
65+
return false
7266
}
73-
topTapList.push(model);
74-
that.topTapList = topTapList;
75-
});
67+
topTapList.push(model)
68+
that.topTapList = topTapList
69+
})
7670
},
7771
beforeDestroy() {
7872
// 销毁 eventBus
79-
EventBus.$off("on-choose-card");
73+
EventBus.$off("on-choose-card")
8074
},
8175
methods: {
8276
// 面包屑相关
8377
selectProject() {
8478
// 返回到 目录 即搜索页面
85-
const workspaceId = this.$route.query.workspaceId;
79+
const workspaceId = this.$route.query.workspaceId
8680
this.$router.push({
8781
name: "dataGovernance/assets/search",
88-
query: { workspaceId }
89-
});
90-
this.textColor = true;
82+
query: { workspaceId },
83+
})
84+
this.textColor = true
9185
},
9286
onChooseWork(modal) {
93-
const workspaceId = this.$route.query.workspaceId;
94-
const { guid } = modal;
87+
const workspaceId = this.$route.query.workspaceId
88+
const { guid } = modal
9589
this.$router.push({
9690
name: "dataGovernance/assets/info",
9791
params: { guid },
98-
query: { workspaceId }
99-
});
100-
this.currentTab = modal;
101-
this.textColor = false;
92+
query: { workspaceId },
93+
})
94+
this.currentTab = modal
95+
this.textColor = false
10296
},
10397
onRemoveWork(modal) {
104-
let that = this;
105-
let topTapList = that.topTapList.slice(0);
106-
let len = topTapList.length;
107-
let idx = 0;
98+
let that = this
99+
let topTapList = that.topTapList.slice(0)
100+
let len = topTapList.length
101+
let idx = 0
108102
109103
topTapList.forEach((item, index) => {
110104
if (item.guid === modal.guid) {
111-
return (idx = index);
105+
return (idx = index)
112106
}
113-
});
107+
})
114108
115109
const removeAction = () => {
116110
if (that.currentTab.guid === modal.guid) {
117-
const workspaceId = that.$route.query.workspaceId;
111+
const workspaceId = that.$route.query.workspaceId
118112
if (len > 1 && idx < len - 1) {
119-
that.currentTab = topTapList[idx + 1];
120-
let guid = that.currentTab.guid;
113+
that.currentTab = topTapList[idx + 1]
114+
let guid = that.currentTab.guid
121115
that.$router.push({
122116
name: "dataGovernance/assets/info",
123117
params: { guid },
124-
query: { workspaceId }
125-
});
118+
query: { workspaceId },
119+
})
126120
} else if (len > 1 && idx == len - 1) {
127-
that.currentTab = topTapList[idx - 1];
128-
let guid = that.currentTab.guid;
121+
that.currentTab = topTapList[idx - 1]
122+
let guid = that.currentTab.guid
129123
that.$router.push({
130124
name: "dataGovernance/assets/info",
131125
params: { guid },
132-
query: { workspaceId }
133-
});
126+
query: { workspaceId },
127+
})
134128
} else {
135-
that.currentTab = {};
136-
that.textColor = true;
129+
that.currentTab = {}
130+
that.textColor = true
137131
that.$router.push({
138132
name: "dataGovernance/assets/search",
139-
query: { workspaceId }
140-
});
133+
query: { workspaceId },
134+
})
141135
}
142136
}
143-
topTapList.splice(idx, 1);
144-
that.topTapList = topTapList;
145-
};
137+
topTapList.splice(idx, 1)
138+
that.topTapList = topTapList
139+
}
146140
147-
removeAction();
148-
}
141+
removeAction()
142+
},
149143
// 通过 eventBus 获取 面包屑数据
150-
}
151-
};
144+
},
145+
}
152146
</script>
153147
<style lang="scss" scoped>
154148
@import "@/common/style/variables.scss";
@@ -190,23 +184,43 @@ export default {
190184
margin: 0 15px;
191185
}
192186
}
193-
.active {
194-
border-bottom: 2px solid $primary-color;
195-
@include border-color($primary-color, $dark-primary-color);
196-
}
197187
.top-r-container {
198188
flex: 1;
199189
height: 40px;
190+
display: flex;
191+
align-items: center;
192+
padding: 0 15px;
200193
.tab-item {
201194
display: inline-block;
202-
height: 40px;
203-
line-height: 40px;
204-
@include font-color(rgba(0, 0, 0, 0.85), $dark-text-color);
195+
height: 24px;
196+
line-height: 24px;
197+
// color: $title-color;
198+
@include font-color(
199+
$workspace-title-color,
200+
$dark-workspace-title-color
201+
);
205202
cursor: pointer;
206-
min-width: 100px;
203+
min-width: 90px;
207204
max-width: 200px;
205+
padding: 0 10px;
208206
overflow: hidden;
209-
margin-right: 2px;
207+
margin-right: 8px;
208+
@include bg-color(#e1e5ea, $dark-workspace-body-bg-color);
209+
border-radius: 12px;
210+
&.active {
211+
height: 24px;
212+
@include font-color($primary-color, $dark-primary-color);
213+
line-height: 24px;
214+
@include bg-color(#e8eef4, $dark-workspace-body-bg-color);
215+
border-radius: 12px;
216+
}
217+
&:hover {
218+
height: 24px;
219+
@include font-color($primary-color, $dark-primary-color);
220+
line-height: 24px;
221+
border-radius: 12px;
222+
@include bg-color(#d1d7dd, $dark-workspace-body-bg-color);
223+
}
210224
}
211225
}
212226
}

‎web/src/apps/dataService/module/dataService/apiConfig.vue

Lines changed: 35 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,15 @@
55
</div>
66
<div class="tabWrap" v-if="tabDatas.length > 0">
77
<template v-for="(work, index) in tabDatas">
8-
<div
8+
<webTab
9+
:index="index"
10+
:work="work"
11+
:isActive="work.isActive"
912
:key="index"
10-
:class="{ active: work.isActive }"
11-
class="tab-item"
1213
ref="work_item"
13-
>
14-
<webTab
15-
:index="index"
16-
:work="work"
17-
@on-choose="onChooseWork"
18-
@on-remove="removeWork"
19-
/>
20-
</div>
14+
@on-choose="onChooseWork"
15+
@on-remove="removeWork"
16+
/>
2117
</template>
2218
</div>
2319

@@ -32,80 +28,80 @@
3228
</div>
3329
</template>
3430
<script>
35-
import webTab from "@/apps/workflows/module/common/tabList/tabs.vue";
36-
import paramsConfig from "./paramsConfig.vue";
37-
import emptyGuide from "./emptyGuide.vue";
31+
import webTab from "@component/lubanTab/index.vue"
32+
import paramsConfig from "./paramsConfig.vue"
33+
import emptyGuide from "./emptyGuide.vue"
3834
// import api from "@/common/service/api";
3935
export default {
4036
components: {
4137
webTab,
4238
paramsConfig,
43-
emptyGuide
39+
emptyGuide,
4440
},
4541
props: {
4642
tabDatas: {
4743
type: Array,
48-
default: () => []
44+
default: () => [],
4945
},
5046
showApiForm: {
51-
type: Function
52-
}
47+
type: Function,
48+
},
5349
},
5450
data() {
5551
return {
5652
currentTab: { name: "sdfsaf", id: 1 },
5753
navFold: false,
5854
confirmLoading: false,
5955
modalType: "",
60-
modalVisible: false
61-
};
56+
modalVisible: false,
57+
}
6258
},
6359
computed: {
6460
choosedData() {
65-
console.log(12333);
66-
return this.tabDatas.find(item => item.isActive);
67-
}
61+
console.log(12333)
62+
return this.tabDatas.find((item) => item.isActive)
63+
},
6864
},
6965
methods: {
7066
removeWork(tabData) {
71-
this.$emit("removeTab", tabData.id);
67+
this.$emit("removeTab", tabData.id)
7268
},
7369
onChooseWork(tabData) {
7470
if (tabData.isActive) {
75-
return;
71+
return
7672
} else {
77-
this.$emit("changeTab", tabData.id);
73+
this.$emit("changeTab", tabData.id)
7874
}
7975
},
8076
showApiModel(apiData) {
81-
console.log(apiData);
82-
this.$emit("showApiForm", apiData);
77+
console.log(apiData)
78+
this.$emit("showApiForm", apiData)
8379
},
8480
updateApiData(data) {
85-
console.log(data);
86-
this.$emit("updateApiData", data);
87-
}
88-
}
89-
};
81+
console.log(data)
82+
this.$emit("updateApiData", data)
83+
},
84+
},
85+
}
9086
</script>
9187

9288
<style lang="scss" scoped>
9389
@import "@/common/style/variables.scss";
94-
.apiConfigWrap {
95-
padding-top: 10px;
96-
}
97-
.emptyGuideWrap{
90+
.emptyGuideWrap {
9891
width: 100%;
9992
min-height: 400px;
100-
height: calc( 100vh - 140px );
93+
height: calc(100vh - 140px);
10194
min-width: 600px;
10295
display: flex;
10396
justify-content: center;
10497
align-items: center;
10598
@include bg-color(#fff, $dark-base-color);
10699
}
107100
.tabWrap {
108-
padding-left: 10px;
101+
align-items: center;
102+
padding: 0 16px;
103+
height: 40px;
104+
display: flex;
109105
.tab-item {
110106
display: inline-block;
111107
height: 40px;
@@ -128,7 +124,6 @@ export default {
128124
.toolBar {
129125
width: 100%;
130126
height: 48px;
131-
margin-top: -5px;
132127
background: #f8f9fc;
133128
border: 1px solid rgba($color: #000000, $alpha: 0.2);
134129
border-left-width: 0;

‎web/src/apps/dataService/module/dataService/paramsConfig.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1071,7 +1071,6 @@ export default {
10711071
.toolBar {
10721072
width: 100%;
10731073
height: 48px;
1074-
margin-top: -5px;
10751074
@include bg-color(#f8f9fc, $dark-menu-base-color);
10761075
border: 1px solid #dee4ec;
10771076
border-left-width: 0;

0 commit comments

Comments
 (0)