lilu 2 years ago
commit 9b06cde0ff

@ -3,7 +3,12 @@
<a-tabs v-model="currentTab" @change="handleTabChange">
<a-tab-pane v-for="v in icons" :tab="v.title" :key="v.key">
<ul>
<li v-for="(icon, key) in v.icons" :key="`${v.key}-${key}`" :class="{ 'active': selectedIcon==icon }" @click="handleSelectedIcon(icon)" >
<li
v-for="(icon, key) in v.icons"
:key="`${v.key}-${key}`"
:class="{ active: selectedIcon == icon }"
@click="handleSelectedIcon(icon)"
>
<a-icon :type="icon" :style="{ fontSize: '36px' }" />
</li>
</ul>
@ -27,7 +32,7 @@ export default {
type: String
}
},
data () {
data() {
return {
selectedIcon: this.value || '',
currentTab: 'directional',
@ -35,25 +40,25 @@ export default {
}
},
watch: {
value (val) {
value(val) {
this.selectedIcon = val
this.autoSwitchTab()
}
},
created () {
created() {
if (this.value) {
this.autoSwitchTab()
}
},
methods: {
handleSelectedIcon (icon) {
handleSelectedIcon(icon) {
this.selectedIcon = icon
this.$emit('change', icon)
},
handleTabChange (activeKey) {
handleTabChange(activeKey) {
this.currentTab = activeKey
},
autoSwitchTab () {
autoSwitchTab() {
icons.some(item => item.icons.some(icon => icon === this.value) && (this.currentTab = item.key))
}
}
@ -61,26 +66,27 @@ export default {
</script>
<style lang="less" scoped>
@import "../index.less";
@import '../index.less';
ul{
list-style: none;
padding: 0;
overflow-y: scroll;
height: 250px;
ul {
list-style: none;
padding: 0;
overflow-y: scroll;
height: 250px;
li{
display: inline-block;
padding: @padding-sm;
margin: 3px 0;
border-radius: @border-radius-base;
li {
display: inline-block;
padding: @padding-sm;
margin: 3px 0;
border-radius: @border-radius-base;
&:hover, &.active{
// box-shadow: 0px 0px 5px 2px @primary-color;
cursor: pointer;
color: @white;
background-color: @primary-color;
}
&:hover,
&.active {
// box-shadow: 0px 0px 5px 2px @primary-color;
cursor: pointer;
color: @white;
background-color: @primary-color;
}
}
}
</style>

@ -1,9 +1,9 @@
<script>
import events from './events'
import { BookingOrderGet } from '@/api/modular/main/BookingLedger'
export default {
name: 'MultiTab',
data () {
data() {
return {
fullPathList: [],
pages: [],
@ -11,38 +11,54 @@ export default {
newTabIndex: 0
}
},
created () {
created() {
// bind event
events.$on('open', val => {
if (!val) {
throw new Error(`multi-tab: open tab ${val} err`)
}
this.activeKey = val
}).$on('close', val => {
if (!val) {
this.closeThat(this.activeKey)
return
}
this.closeThat(val)
}).$on('rename', ({ key, name }) => {
console.log('rename', key, name)
try {
const item = this.pages.find(item => item.path === key)
item.meta.customTitle = name
this.$forceUpdate()
} catch (e) {
}
})
events
.$on('open', val => {
if (!val) {
throw new Error(`multi-tab: open tab ${val} err`)
}
this.activeKey = val
})
.$on('close', val => {
if (!val) {
this.closeThat(this.activeKey)
return
}
this.closeThat(val)
})
.$on('rename', ({ key, name }) => {
console.log('rename', key, name)
try {
const item = this.pages.find(item => item.path === key)
item.meta.customTitle = name
this.$forceUpdate()
} catch (e) {}
})
this.pages.push(this.$route)
this.fullPathList.push(this.$route.fullPath)
this.selectedLastPath()
},
methods: {
onEdit (targetKey, action) {
onEdit(targetKey, action) {
// let _that = this
// if (targetKey.split('?')[0] == '/BookingDetail') {
// this.$confirm({
// title: '',
// content: ' ',
// onOk() {
// _that[action](targetKey)
// },
// onCancel() {}
// })
// } else {
// this[action](targetKey)
// }
this[action](targetKey)
console.log('关闭?', targetKey, action)
},
remove (targetKey) {
remove(targetKey) {
this.pages = this.pages.filter(page => page.fullPath !== targetKey)
this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
//
@ -50,12 +66,12 @@ export default {
this.selectedLastPath()
}
},
selectedLastPath () {
selectedLastPath() {
this.activeKey = this.fullPathList[this.fullPathList.length - 1]
},
// content menu
closeThat (e) {
closeThat(e) {
//
if (this.fullPathList.length > 1) {
this.remove(e)
@ -63,7 +79,7 @@ export default {
this.$message.info('这是最后一个标签了, 无法被关闭')
}
},
closeLeft (e) {
closeLeft(e) {
const currentIndex = this.fullPathList.indexOf(e)
if (currentIndex > 0) {
this.fullPathList.forEach((item, index) => {
@ -75,9 +91,9 @@ export default {
this.$message.info('左侧没有标签')
}
},
closeRight (e) {
closeRight(e) {
const currentIndex = this.fullPathList.indexOf(e)
if (currentIndex < (this.fullPathList.length - 1)) {
if (currentIndex < this.fullPathList.length - 1) {
this.fullPathList.forEach((item, index) => {
if (index > currentIndex) {
this.remove(item)
@ -87,7 +103,7 @@ export default {
this.$message.info('右侧没有标签')
}
},
closeAll (e) {
closeAll(e) {
const currentIndex = this.fullPathList.indexOf(e)
this.fullPathList.forEach((item, index) => {
if (index !== currentIndex) {
@ -95,12 +111,20 @@ export default {
}
})
},
closeMenuClick (key, route) {
closeMenuClick(key, route) {
this[key](route)
},
renderTabPaneMenu (e) {
renderTabPaneMenu(e) {
return (
<a-menu {...{ on: { click: ({ key, item, domEvent }) => { this.closeMenuClick(key, e) } } }}>
<a-menu
{...{
on: {
click: ({ key, item, domEvent }) => {
this.closeMenuClick(key, e)
}
}
}}
>
<a-menu-item key="closeThat">关闭当前标签</a-menu-item>
<a-menu-item key="closeRight">关闭右侧</a-menu-item>
<a-menu-item key="closeLeft">关闭左侧</a-menu-item>
@ -109,38 +133,55 @@ export default {
)
},
// render
renderTabPane (title, keyPath) {
renderTabPane(title, keyPath) {
console.log(title, keyPath)
let name = title
let data = Object.fromEntries(new URLSearchParams(keyPath.split('?')[1]))
const menu = this.renderTabPaneMenu(keyPath)
if (keyPath.split('?')[0] == '/BookingDetail') {
if (data.id) {
if (data.isCopy) {
name = '订舱复制'
} else {
name = `${data.mblno}详情`
}
} else {
name = '订舱新增'
}
}
return (
<a-dropdown overlay={menu} trigger={['contextmenu']}>
<span style={{ userSelect: 'none' }}>{ title }</span>
<span style={{ userSelect: 'none' }}>{name}</span>
</a-dropdown>
)
}
},
watch: {
'$route': function (newVal) {
$route: function(newVal) {
this.activeKey = newVal.fullPath
if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
this.fullPathList.push(newVal.fullPath)
this.pages.push(newVal)
}
},
activeKey: function (newPathKey) {
activeKey: function(newPathKey) {
this.$router.push({ path: newPathKey })
}
},
render () {
const { onEdit, $data: { pages } } = this
render() {
const {
onEdit,
$data: { pages }
} = this
const panes = pages.map(page => {
return (
<a-tab-pane
style={{ height: 0 }}
tab={this.renderTabPane(page.meta.customTitle || page.meta.title, page.fullPath)}
key={page.fullPath} closable={pages.length > 1}
>
</a-tab-pane>)
key={page.fullPath}
closable={pages.length > 1}
></a-tab-pane>
)
})
return (
@ -151,7 +192,8 @@ export default {
type={'editable-card'}
v-model={this.activeKey}
tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }}
{...{ on: { edit: onEdit } }}>
{...{ on: { edit: onEdit } }}
>
{panes}
</a-tabs>
</div>

@ -283,6 +283,7 @@ export default {
handler(nD, oD) {
if (!nD.id) {
this.BookingDetail = []
this.bookingLogList = []
this.bookingServiceItem = []
this.fileList = []
this.remarkList = []

@ -34,8 +34,12 @@
>
<a-button type="primary" @click="tableRefresh"></a-button>
<a-button class="reset" @click="tableReset"></a-button>
<a-button class="more-search" @click="tableMoreRefresh"><a-icon type="search"/></a-button>
<span class="tab-btn" @click="formSetting"><a-icon type="setting" :style="{ marginLeft: '0px' }"/></span>
<a-button class="more-search" @click="tableMoreRefresh"
>多提单号查询<a-icon type="search"
/></a-button>
<span class="tab-btn" @click="formSetting"
><a-icon type="setting" :style="{ marginLeft: '0px' }"
/></span>
<a class="senior-search" @click="toggleAdvanced">
{{ advanced ? '收起查询' : '更多查询' }}
<!-- <a-icon :type="advanced ? 'up' : 'down'" /> -->
@ -448,7 +452,7 @@ export default {
},
editColumns(row) {
console.log(row)
this.$router.push({ name: 'BookingDetail', query: { id: row.id, type: row.carrierid } })
this.$router.push({ name: 'BookingDetail', query: { id: row.id, type: row.carrierid, mblno: row.mblno } })
},
getList(queryParam = {}) {
this.$set(this.gridOptions, 'loading', true)
@ -572,15 +576,16 @@ export default {
// background-color: #f5f9fe !important;
position: relative;
background: #fff !important;
&::after{
&::after {
content: '';
position: absolute;
top: 0;left: 0;
width:100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: @primary-color;
opacity: .04;
opacity: 0.04;
}
}
/*列表分页 */
@ -820,15 +825,16 @@ export default {
position: relative;
background: #fff;
z-index: 1;
&::after{
&::after {
content: '';
position: absolute;
top: 0;left: 0;
width:100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: @primary-color;
opacity: .04;
opacity: 0.04;
z-index: -1;
}
}

Loading…
Cancel
Save