分单删除

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

@@ -133,6 +133,7 @@
           :checkFrom="checkFrom"
           :scrollTop="scrollTop"
           @changeHB="changeHBFun"
+          @sedOrderRemove="sedOrderRemoveFun"
         ></sedOrder>
       </a-tab-pane>
     </a-tabs>
@@ -413,18 +414,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
-      'bookingList',
-      'needSavePages',
-      'hasbookingDetail',
-      'bookingList',
-      'bookingGridOptions',
-      'carrierList',
-      'yardList',
-      'packageList',
-      'issuetypeList',
-      'blfrtList'
-    ])
+    ...mapGetters(['bookingList', 'needSavePages', 'hasbookingDetail', 'bookingList', 'bookingGridOptions', 'carrierList', 'yardList', 'packageList', 'issuetypeList', 'blfrtList'])
   },
   created() {
     this.init()
@@ -1388,6 +1378,15 @@ export default {
       if (type) {
         this.$refs.mailingInfo.$data.userHasLine = !!this.bookingDetails.lineName
       }
+    },
+    sedOrderRemoveFun(sedData) {
+      console.log('== 父组件收到子单删除数据 ==', sedData, this.bookingDetails.hbList)
+      this.$set(this.bookingDetails, 'hbList', sedData)
+      if (sedData.length === 0) {
+        console.log('== 子单删除完毕 ==')
+        this.Showtabs = false
+        this.tabActiveKey = '1'
+      }
     }
   }
 }
@@ -1399,4 +1398,5 @@ export default {
       display: none !important;
     }
   }
+
 </style>

src/views/main/BookingLedger/detail/modules/sedOperationArea.vue

@@ -8,7 +8,15 @@
         <button @click="copyFun"><span class="iconfont icon-fuzhi1"></span>复制</button>
         <button @click="saveFun"><span class="iconfont icon-icon_baocun"></span>保存</button>
         <button @click="FSnhowPrintModal"><span class="iconfont icon-printing"></span>打印</button>
-        <!-- <button><span class="iconfont icon-shanchu1"></span>删除</button> -->
+        <a-popconfirm
+          title="确定删除分单？"
+          ok-text="是"
+          cancel-text="否"
+          @confirm="removeOrder"
+          @cancel="cancelRemove"
+        >
+          <button><span class="iconfont icon-shanchu1"></span>删除</button>
+        </a-popconfirm>
       </div>
     </a-card>
     <!-- 打印弹窗 start -->
@@ -140,6 +148,12 @@ export default {
         .catch(err => {
           console.log(err)
         })
+    },
+    removeOrder () {
+      this.$emit('remove')
+    },
+    cancelRemove () {
+      console.log('= 取消删除 =')
     }
   }
 }

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

@@ -14,12 +14,20 @@
               v-for="(sedDetail, sindex) in sedOrderList"
               :key="sindex"
               :class="{ active: editIndex === sindex }"
-              @click="changeOrder(sindex)"
             >
-              <i class="iconfont icon-dingdan"></i>
-              分单{{ sindex + 1 }}: {{ sedDetail.hblno || '请填写分单号' }}
+              <div class="left" @click.stop="changeOrder(sindex)">
+                <i class="iconfont icon-dingdan"></i>分单{{ sindex + 1 }}: {{ sedDetail.hblno || '请填写分单号' }}
+              </div>
               <span class="no-save" v-if="sedDetail.isNoSave && editIndex !== sindex">（未保存） </span>
-              <!-- <i class="remove-btn iconfont icon-shanchu1"></i> -->
+              <a-popconfirm
+                title="确定删除分单？"
+                ok-text="是"
+                cancel-text="否"
+                @confirm.stop="removeSedOrderFun(sedDetail, sindex)"
+                @cancel="cancelRemove"
+              >
+                <span class="remove-btn iconfont icon-shanchu1"></span>
+              </a-popconfirm>
             </div>
             <div class="sed-order-btn" @click="addSedOrder"><i class="iconfont icon-jiahao2fill"></i>添加分单</div>
           </div>
@@ -36,6 +44,7 @@
             :class="scrollTop < 100 ? 'normal-nav' : 'fixed-nav'"
             @save="saveFun"
             @copy="copyFun"
+            @remove="removeFun"
           ></sedOperationArea>
           <ul class="sec-parent-tabs-box">
             <div class="parents-tabs-top">
@@ -146,7 +155,7 @@ import remarksInfo from './remarksInfo'
 import goodsTable from './goodsTable'
 import ediMore from './ediMore'
 import rules from '../rules'
-import { BookingOrderSave } from '@/api/modular/main/BookingLedger'
+import { BookingOrderSave, DeleteBookingOrder } from '@/api/modular/main/BookingLedger'
 export default {
   name: 'SedOrder',
   props: {
@@ -376,7 +385,7 @@ export default {
           ediAttnMail: ''
         }
       }
-      if (this.ifCompare(this.sedOrderList[this.editIndex], detail) && !this.inSecLoad) {
+      if (this.ifCompare(this.sedOrderList[this.editIndex], detail) && !this.inSecLoad && type !== 'save') {
         this.sedOrderList[this.editIndex].isNoSave = true
       }
       this.editDetails = detail
@@ -556,6 +565,60 @@ export default {
     },
     changeParentTabs(type) {
       this.mainOrderActiveKey = type
+    },
+    removeSedOrderFun (data, index) {
+      this.deleteBookingOrder(data.id, index)
+    },
+    removeFun () {
+      this.deleteBookingOrder(this.editDetails.id, this.editIndex)
+    },
+    deleteBookingOrder (id, index) {
+      // eslint-disable-next-line eqeqeq
+      if (id == 0) {
+        this.removeSucc(id, index)
+        return false
+      }
+      this.inSecLoad = true
+      DeleteBookingOrder([id].toString()).then(res => {
+        if (res.success) {
+          this.$message.success('删除成功')
+          this.removeSucc(id, index)
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+      .catch(err => {
+        console.log(err)
+      })
+    },
+    removeSucc (id, index) {
+      const removeIndex = index
+      console.log('当前删除分单index为', removeIndex)
+      this.sedOrderList.splice(removeIndex, 1)
+      this.$emit('sedOrderRemove', this.sedOrderList)
+      if (this.sedOrderList.length === 0) {
+        console.log('== 子单列表删除完毕 ==')
+        this.editIndex = 0
+        this.editDetails = null
+        return false
+      }
+      if (this.editDetails.id === id) {
+        console.log('== 删除数据为当前编辑数据 ==')
+        const num = this.editIndex === 0 ? 0 : this.editIndex - 1
+        this.editIndex = num > this.sedOrderList.length ? this.sedOrderList.length - 1 : num
+        this.editDetails = this.sedOrderList[this.editIndex]
+        console.log('== 删除数据为当前编辑数据 end ==', this.editIndex, this.editDetails)
+      } else {
+        this.editIndex = removeIndex < this.editIndex ? this.editIndex - 1 : this.editIndex
+        console.log('== 删除分单 index ==', this.editIndex)
+      }
+      setTimeout(() => {
+        this.inSecLoad = false
+      }, 200)
+      this.$forceUpdate()
+    },
+    cancelRemove () {
+      console.log('== 取消删除 ==')
     }
   }
 }

src/views/main/BookingLedger/detail/style/sedOrder.less

@@ -57,6 +57,14 @@
     padding-top: 0px;
     transition: 0.5s all;
     border-radius: 4px;
+    .remove-btn{
+      float: right;
+      color: #f6826b;
+      display: block;
+      width: 30px;
+      text-align: center;
+      cursor: pointer;
+    }
     &.show-nav {
       width: 100%;
       animation-name: showNav 0.6s;
@@ -156,13 +164,18 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       cursor: pointer;
-      // display: flex;
+      display: flex;
       padding-left: 10px;
+      .left{
+        flex: 1;
+        // float: left;
+      }
     }
     .active {
       color: @primary-color;
       // background: #f5f9fe;
       position: relative;
+      padding-right: 30px;
       &::after {
         content: '';
         position: absolute;
@@ -174,6 +187,9 @@
         background: @primary-color;
         opacity: 0.04;
       }
+      .remove-btn{
+        display: none;
+      }
     }
     .sed-order-btn {
       margin: 20px auto;