|
|
@@ -10,16 +10,24 @@ |
|
|
|
<div |
|
|
|
class="app-container" |
|
|
|
style="margin-right: 12px; border-radius: 8px; background: #fff"> |
|
|
|
<div class="factory-list__selector" style="" title="点击切换工厂"> |
|
|
|
<div |
|
|
|
class="factory-list__selector" |
|
|
|
style="" |
|
|
|
title="点击切换工厂" |
|
|
|
@mouseenter="factoryListOpen = true" |
|
|
|
@mouseleave="factoryListOpen = false"> |
|
|
|
{{ currentFactory || '工厂名称' }} |
|
|
|
<div class="factory-list__wrapper"> |
|
|
|
<ul class="factory-list"> |
|
|
|
<div class="factory-list__wrapper" :class="{ open: factoryListOpen }"> |
|
|
|
<ul class="factory-list" v-if="factoryList.length" @click.prevent="factoryChangeHandler"> |
|
|
|
<li |
|
|
|
v-for="fc in factoryList" |
|
|
|
:key="fc.id" |
|
|
|
@click="factoryChangeHandler" |
|
|
|
class="factory-list__item"></li> |
|
|
|
:value="fc.value" |
|
|
|
class="factory-list__item"> |
|
|
|
{{ fc.name }} |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<div v-else style="color: #0008; width: 128px; text-align: center;">- 无 -</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- side bar --> |
|
|
@@ -95,6 +103,16 @@ export default { |
|
|
|
props: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
factoryListOpen: false, |
|
|
|
currentFactory: null, |
|
|
|
factoryList: [ |
|
|
|
{ name: '1', value: 1 }, |
|
|
|
{ name: '2', value: 2 }, |
|
|
|
{ name: '3', value: 3 }, |
|
|
|
{ name: '4', value: 4 }, |
|
|
|
{ name: '5', value: 5 }, |
|
|
|
{ name: '6', value: 6 }, |
|
|
|
], |
|
|
|
sidebarContent: [ |
|
|
|
// { |
|
|
|
// id: 'fc1', |
|
|
@@ -295,6 +313,11 @@ export default { |
|
|
|
console.log('handle tab click: ', tab, event); |
|
|
|
}, |
|
|
|
|
|
|
|
factoryChangeHandler(event) { |
|
|
|
console.log('clicked factory change.......'); |
|
|
|
this.factoryListOpen = false; |
|
|
|
}, |
|
|
|
|
|
|
|
handleSidebarItemClick({ label, id, type }) { |
|
|
|
console.log('lable clicked!', label, id, type); |
|
|
|
switch (type) { |
|
|
@@ -420,4 +443,51 @@ export default { |
|
|
|
/* cursor: pointer; */ |
|
|
|
border-left-color: #0008; |
|
|
|
} |
|
|
|
|
|
|
|
.factory-list__wrapper { |
|
|
|
visibility: hidden; |
|
|
|
position: absolute; |
|
|
|
background: #fff; |
|
|
|
box-shadow: 0 0 32px 10px #0002; |
|
|
|
border-radius: 8px; |
|
|
|
top: 36px; |
|
|
|
left: 90px; |
|
|
|
/* max-width: 128px; */ |
|
|
|
height: auto; |
|
|
|
padding: 8px; |
|
|
|
overflow: hidden; |
|
|
|
/* transition: all 0.3s ease-out; */ |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
|
|
|
|
.factory-list__wrapper.open { |
|
|
|
visibility: visible; |
|
|
|
} |
|
|
|
|
|
|
|
ul, |
|
|
|
li { |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
list-style: none; |
|
|
|
} |
|
|
|
|
|
|
|
.factory-list { |
|
|
|
padding: 1px; |
|
|
|
color: #0008; |
|
|
|
max-height: 240px; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.factory-list__item { |
|
|
|
border-radius: 4px; |
|
|
|
font-size: 16px; |
|
|
|
line-height: 1; |
|
|
|
padding: 8px 4px; |
|
|
|
min-width: 64px; |
|
|
|
} |
|
|
|
|
|
|
|
.factory-list__item:hover { |
|
|
|
background: #ccc6; |
|
|
|
color: #000e; |
|
|
|
} |
|
|
|
</style> |