修改上一票下一票，分单保存等

src/components/MultiTab/MultiTab.vue

@@ -1,6 +1,7 @@
 <script>
 import events from './events'
 import { BookingOrderGet } from '@/api/modular/main/BookingLedger'
+import { mapActions, mapGetters } from 'vuex'
 export default {
   name: 'MultiTab',
   data() {
@@ -11,6 +12,9 @@ export default {
       newTabIndex: 0
     }
   },
+  computed: {
+    ...mapGetters(['needSavePages'])
+  },
   created() {
     // bind event
     events
@@ -41,29 +45,30 @@ export default {
     this.selectedLastPath()
   },
   methods: {
+    ...mapActions(['setNeedSavePages']),
     onEdit(targetKey, action) {
-      let _that = this
+      const _that = this
-      let data = Object.fromEntries(new URLSearchParams(targetKey.split('?')[1]))
+      console.log(this.needSavePages[targetKey])
-      console.log(targetKey.split('?')[0] == '/BookingDetail')
+      if (this.needSavePages[targetKey].details || this.needSavePages[targetKey].hbList) {
-      console.log(localStorage.getItem(data.id))
-      console.log(localStorage.getItem(data.id) == 'true')
-      console.log(data.id != null)
-      console.log(
-        targetKey.split('?')[0] == '/BookingDetail' && data.id != null && localStorage.getItem(data.id) == 'true'
-      )
-      if (targetKey.split('?')[0] == '/BookingDetail' && data.id != null && localStorage.getItem(data.id) == 'true') {
         this.$confirm({
           title: '请确认无未保存数据！',
           content: '当点击确定按钮时，此页面 将会关闭。',
+          cancelText: targetKey === _that.activeKey ? '取消' : '前往保存',
           onOk() {
             _that[action](targetKey)
-            localStorage.removeItem(data.id)
+            const $data = _that.needSavePages
+            delete $data[targetKey]
+            _that.setNeedSavePages($data)
           },
-          onCancel() {}
+          onCancel() {
+            _that.activeKey = targetKey
+          }
         })
       } else {
         this[action](targetKey)
-        localStorage.removeItem(data.id)
+        const $data = this.needSavePages
+        delete $data[targetKey]
+        this.setNeedSavePages($data)
       }
       console.log('关闭？', targetKey, action)
     },
@@ -167,10 +172,19 @@ export default {
   },
   watch: {
     $route: function(newVal) {
-      this.activeKey = newVal.fullPath
+      if (!newVal.query.noOpenTab) {
-      if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
+        this.activeKey = newVal.fullPath
-        this.fullPathList.push(newVal.fullPath)
+        if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
-        this.pages.push(newVal)
+          this.fullPathList.push(newVal.fullPath)
+          this.pages.push(newVal)
+        }
+      } else {
+        this.pages.map((item, index) => {
+          if (item.fullPath === this.activeKey) {
+            this.pages[index] = newVal
+          }
+        })
+        this.activeKey = newVal.fullPath
       }
     },
     activeKey: function(newPathKey) {

src/store/modules/user.js

@@ -40,7 +40,7 @@ const user = {
     info: {},
     notices: [], // 接收的通知公告
     bookingList: {}, // 订舱台账列表
-    needSavePages: [] // 需要保存的页面
+    needSavePages: {} // 需要保存的页面
   },
 
   mutations: {

src/views/main/BookingLedger/detail/components/sedOrder.vue

@@ -108,30 +108,35 @@ export default {
     }
   },
   watch: {
-    sedOrderList (nval, oval) {
+    sedOrderList: {
-      if (nval.length > 0) {
+      handler (nval, oval) {
-        console.log(nval)
+        if (nval.length > 0) {
-        if (!nval[this.editIndex].bookingEDIExt) {
+          console.log(nval)
-          nval[this.editIndex].bookingEDIExt = {
+          if (!nval[this.editIndex].bookingEDIExt) {
-              weiTuoFang: '',
+            nval[this.editIndex].bookingEDIExt = {
-              ediAttn: '',
+                weiTuoFang: '',
-              ediAttnTel: '',
+                ediAttn: '',
-              ediAttnMail: ''
+                ediAttnTel: '',
+                ediAttnMail: ''
+              }
             }
-          }
+          this.editDetails = nval[this.editIndex]
-        this.editDetails = nval[this.editIndex]
+        } else {
-      } else {
+          this.editDetails = null
-        this.editDetails = null
+        }
-      }
+      },
+      deep: true
     },
     editDetails: {
       handler (nval, oval) {
-        console.log('分单更新', nval)
+        this.$emit('changeHB', this.sedOrderList)
-        if (nval !== oval && oval) {
+        if (nval !== oval) {
+          // localStorage.setItem(`${this.id}`, true)
           // this.sedOrderList[this.editIndex].isNoSave = true
           // console.log(this.editIndex, this.sedOrderList[this.editIndex].isNoSave)
         }
-      }
+      },
+      deep: true
     }
    },
   created() {
@@ -313,6 +318,7 @@ export default {
           this.sedOrderList[this.editIndex].isNoSave = false
           this.editDetails.isNoSave = false
           this.$message.success('保存成功')
+          this.$emit('changeHB', this.sedOrderList)
           this.$forceUpdate()
         } else {
           this.$message.error(res.message)
@@ -338,6 +344,7 @@ export default {
           this.editDetails.isNoSave = false
           this.sedOrderList[this.editIndex].id = res.data
           this.$message.success('保存成功')
+          this.$emit('changeHB', this.sedOrderList)
           this.$forceUpdate()
         } else {
           this.$message.error(res.message)

src/views/main/BookingLedger/detail/index.vue

@@ -82,6 +82,7 @@
           :details="bookingDetails"
           :sedOrderList="bookingDetails.hbList"
           :isAdd="isAdd"
+          @changeHB="changeHBFun"
         ></sedOrder>
       </a-tab-pane>
     </a-tabs>
@@ -107,6 +108,109 @@ import {
   BookingOrderAddOrUpdate
 } from '@/api/modular/main/BookingLedger'
 import { mapActions, mapGetters } from 'vuex'
+const initDetail = {
+    id: 0,
+    parentId: 0,
+    // 基本信息
+    customername: '',
+    customerid: '',
+    carrier: '',
+    carrierid: '',
+    forwarder: '',
+    pono: '',
+    mblno: '',
+    hblno: '',
+    bookingno: '',
+    contractno: '',
+    vessel: '',
+    voyno: '',
+    voynoinner: '',
+    lanecode: '',
+    etd: '',
+    atd: '',
+    lanename: '',
+    shipagency: '',
+    sale: '',
+    op: '',
+    doc: '',
+    custservice: '',
+    // 收发通信息
+    shipper: '',
+    consignee: '',
+    notifyparty: '',
+    yard: '',
+    customser: '',
+    trucker: '',
+    agentid: '',
+    eta: '',
+    closingdate: '',
+    closedocdate: '',
+    closevgmdate: '',
+    portload: '',
+    portloadid: '',
+    transport: '',
+    transportid: '',
+    portdischarge: '',
+    portdischargeid: '',
+    destination: '',
+    destinationid: '',
+    placedelivery: '',
+    placedeliveryid: '',
+    placereceipt: '',
+    placereceiptid: '',
+    pkgs: 0,
+    kindpkgs: '',
+    kgs: 0,
+    cbm: 0,
+    // 货物信息
+    marks: '',
+    cargoid: '',
+    hscode: '',
+    description: '',
+    totalno: '',
+    // 签单信息
+    issuetype: '',
+    issuedate: '',
+    issueplace: '',
+    issueplaceid: '',
+    nobill: 'THREE',
+    copynobilll: 'THREE',
+    prepardat: '',
+    payableat: '',
+    blfrt: '',
+    thirdpayaddr: '',
+    service: '',
+    reeferf: '',
+    tempset: '',
+    tempid: '',
+    tempmin: '',
+    tempmax: '',
+    humidity: '',
+    dclass: '',
+    dunno: '',
+    dpage: '',
+    dlabel: '',
+    linkman: '',
+    // 备注信息
+    soremark: '',
+    siremark: '',
+    // 箱型
+    ctnInputs: [],
+    // edi补充信息 (edi联系人等暂无字段)
+    weituo: '',
+    freightpayer: '',
+    scaccode: '',
+    itncode: '',
+    iscontainersoc: 0,
+    bookingEDIExt: {
+      weiTuoFang: '',
+      ediAttn: '',
+      ediAttnTel: '',
+      ediAttnMail: ''
+    },
+    // 分单信息未添加
+    hbList: []
+  }
 export default {
   name: 'BookingDetail',
   inject: ['reload'],
@@ -129,7 +233,8 @@ export default {
       id: this.$route.query.id,
       isCopy: this.$route.query.isCopy || false,
       inPageLoading: false,
-      bookingDetails: {},
+      // bookingDetails: {},
+      bookingDetails: initDetail,
       tabBarStyle: {
         background: '#fff',
         padding: '0 20px'
@@ -157,7 +262,7 @@ export default {
   watch: {
     bookingDetails: {
       handler(nval, oval) {
-        localStorage.setItem(`${this.id}`, true)
+        this.checkSaveFun({ type: 'details', hasChange: true })
       },
       deep: true
     }
@@ -165,9 +270,6 @@ export default {
   created() {
     this.init()
   },
-  updated() {
-    localStorage.setItem(`${this.id}`, false)
-  },
   beforeRouteUpdate(to, from, next) {
     if (!Object.keys(this.historyData).includes(this.$route.query.id)) {
       const hisData = {
@@ -230,7 +332,8 @@ export default {
       }
     },
     init() {
-      this.bookingDetails = {}
+      // this.bookingDetails = {}
+      this.bookingDetails = initDetail
       if (this.id) {
         this.isAdd = false
         this.getDetail()
@@ -367,10 +470,11 @@ export default {
     },
 
     getDetail() {
-      if (this.inPageLoading) {
+      this.inPageLoading = false
-        return false
+      // if (this.inPageLoading) {
-      }
+      //   return false
-      this.inPageLoading = true
+      // }
+      // this.inPageLoading = true
       // this.$message.loading({ content: '加载中...' });
       BookingOrderGet({
         id: this.id
@@ -392,6 +496,9 @@ export default {
             }
           }
           this.$set(this, 'bookingDetails', res.data)
+          setTimeout(() => {
+            this.checkSaveFun({ type: 'details', hasChange: false })
+          }, 600)
           this.$forceUpdate()
         })
         .catch(err => {
@@ -443,7 +550,7 @@ export default {
             this.$message.success('保存成功')
             this.$router.replace({
               name: 'BookingDetail',
-              query: { id: res.data, type: this.bookingDetails.carrierid }
+              query: { id: res.data, type: this.bookingDetails.carrierid, noOpenTab: true }
             })
             this.$forceUpdate()
           } else {
@@ -480,6 +587,25 @@ export default {
       this.excuteRulesType = type
     },
     changePageFun(type) {
+      const _this = this
+      const key = this.$route.fullPath
+      if (this.needSavePages[key].details || this.needSavePages[key].hbList) {
+        this.$confirm({
+          title: '请确认无未保存数据！',
+          content: '当点击确定按钮时，此页面 将会关闭。',
+          onOk() {
+            _this.changePage()
+            const $data = _this.needSavePages
+            delete $data[key]
+            _this.setNeedSavePages($data)
+          },
+          onCancel() {}
+        })
+      } else {
+        this.changePage()
+      }
+    },
+    changePage (type) {
       const nowId = this.$route.query.id
       const arr = Object.keys(this.bookingList)
       const index = arr.indexOf(nowId.toString())
@@ -492,7 +618,7 @@ export default {
         const prevType = this.bookingList[prevId].carrierid
         this.$router.replace({
           name: 'BookingDetail',
-          query: { id: prevId, type: prevType, mblno: this.bookingList[prevId].mblno }
+          query: { id: prevId, type: prevType, mblno: this.bookingList[prevId].mblno, noOpenTab: true }
         })
         // this.$route.query.id = 1123
       } else {
@@ -504,7 +630,7 @@ export default {
         const nextType = this.bookingList[nextId].carrierid
         this.$router.replace({
           name: 'BookingDetail',
-          query: { id: nextId, type: nextType, mblno: this.bookingList[nextId].mblno }
+          query: { id: nextId, type: nextType, mblno: this.bookingList[nextId].mblno, noOpenTab: true }
         })
       }
     },
@@ -527,6 +653,31 @@ export default {
       data.hblno = ''
       this.bookingDetails.hbList = [data]
       this.tabActiveKey = '2'
+    },
+    changeHBFun (data) {
+      const arr = data.map((item, index) => {
+        return item.isNoSave
+      })
+      if (arr.includes(true)) {
+        this.checkSaveFun({ type: 'hbList', hasChange: true })
+      } else {
+        this.checkSaveFun({ type: 'hbList', hasChange: false })
+      }
+
+    },
+    checkSaveFun (data) {
+      const lastPages = this.needSavePages
+      const $data = this.needSavePages[this.id] || {}
+      if (data.type === 'details') {
+        this.$set($data, 'details', data.hasChange)
+      } else if (data.type === 'hbList') {
+        this.$set($data, 'hbList', data.hasChange)
+      }
+      // const key = this.id
+      const key = this.$route.fullPath
+      this.$set(lastPages, key, $data)
+      this.setNeedSavePages(lastPages)
+      console.log(' ==== >  父组件监听到总数据改变: ', key, $data, lastPages, this.needSavePages)
     }
   }
 }