From 6006797280992094ff727adbc6156d29ce9dca0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=90=8C=E6=B5=B7?= <963808678@qq.com>
Date: Fri, 2 Dec 2022 16:27:00 +0800
Subject: [PATCH] 12/2

---
 src/components/IconSelector/IconSelector.vue  |  54 +++----
 src/components/MultiTab/MultiTab.vue          | 132 ++++++++++++------
 .../detail/modules/rightContent.vue           |   1 +
 src/views/main/BookingLedger/list/index.vue   |  28 ++--
 4 files changed, 135 insertions(+), 80 deletions(-)

diff --git a/src/components/IconSelector/IconSelector.vue b/src/components/IconSelector/IconSelector.vue
index 810d297..07b9a27 100644
--- a/src/components/IconSelector/IconSelector.vue
+++ b/src/components/IconSelector/IconSelector.vue
@@ -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>
diff --git a/src/components/MultiTab/MultiTab.vue b/src/components/MultiTab/MultiTab.vue
index bfb6e57..7fc1706 100644
--- a/src/components/MultiTab/MultiTab.vue
+++ b/src/components/MultiTab/MultiTab.vue
@@ -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>
diff --git a/src/views/main/BookingLedger/detail/modules/rightContent.vue b/src/views/main/BookingLedger/detail/modules/rightContent.vue
index e18b3ef..0186246 100644
--- a/src/views/main/BookingLedger/detail/modules/rightContent.vue
+++ b/src/views/main/BookingLedger/detail/modules/rightContent.vue
@@ -283,6 +283,7 @@ export default {
       handler(nD, oD) {
         if (!nD.id) {
           this.BookingDetail = []
+          this.bookingLogList = []
           this.bookingServiceItem = []
           this.fileList = []
           this.remarkList = []
diff --git a/src/views/main/BookingLedger/list/index.vue b/src/views/main/BookingLedger/list/index.vue
index 0a202b0..4c439bf 100644
--- a/src/views/main/BookingLedger/list/index.vue
+++ b/src/views/main/BookingLedger/list/index.vue
@@ -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)
@@ -563,15 +567,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;
   }
 }
 /*列表分页 */
@@ -811,15 +816,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;
   }
 }