whm
/
BookingHeChuanFront
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

12/2

Browse Source
dev
张同海 2 years ago
parent e74111cf5d
commit 6006797280
4 changed files with 135 additions and 80 deletions
Show Stats Download Patch File Download Diff File

54
src/components/IconSelector/IconSelector.vue
Unescape Escape View File

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

132
src/components/MultiTab/MultiTab.vue
Unescape Escape View File

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

1
src/views/main/BookingLedger/detail/modules/rightContent.vue
Unescape Escape View File

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

28
src/views/main/BookingLedger/list/index.vue
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save