张同海 2 years ago
parent e74111cf5d
commit 6006797280

@ -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>
@ -61,7 +66,7 @@ export default {
</script>
<style lang="less" scoped>
@import "../index.less";
@import '../index.less';
ul {
list-style: none;
@ -75,7 +80,8 @@ export default {
margin: 3px 0;
border-radius: @border-radius-base;
&:hover, &.active{
&:hover,
&.active {
// box-shadow: 0px 0px 5px 2px @primary-color;
cursor: pointer;
color: @white;

@ -1,6 +1,6 @@
<script>
import events from './events'
import { BookingOrderGet } from '@/api/modular/main/BookingLedger'
export default {
name: 'MultiTab',
data() {
@ -13,25 +13,27 @@ export default {
},
created() {
// bind event
events.$on('open', val => {
events
.$on('open', val => {
if (!val) {
throw new Error(`multi-tab: open tab ${val} err`)
}
this.activeKey = val
}).$on('close', val => {
})
.$on('close', val => {
if (!val) {
this.closeThat(this.activeKey)
return
}
this.closeThat(val)
}).$on('rename', ({ key, name }) => {
})
.$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) {
}
} catch (e) {}
})
this.pages.push(this.$route)
@ -40,7 +42,21 @@ export default {
},
methods: {
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) {
this.pages = this.pages.filter(page => page.fullPath !== targetKey)
@ -77,7 +93,7 @@ export default {
},
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)
@ -100,7 +116,15 @@ export default {
},
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>
@ -110,17 +134,30 @@ export default {
},
// render
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)
@ -132,15 +169,19 @@ export default {
}
},
render() {
const { onEdit, $data: { pages } } = this
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'" /> -->
@ -443,7 +447,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)
@ -566,12 +570,13 @@ export default {
&::after {
content: '';
position: absolute;
top: 0;left: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background: @primary-color;
opacity: .04;
opacity: 0.04;
}
}
/*列表分页 */
@ -814,12 +819,13 @@ export default {
&::after {
content: '';
position: absolute;
top: 0;left: 0;
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