航班视图修改

src/views/advancedQuery/views/advancedHome.vue

@@ -468,14 +468,14 @@ export default {
           sortable: true
         },
         {
-          prop: 'PreFlightNONotNull',
+          prop: 'PreFlightNO',
           label: '中转进航班',
           width: 110,
           filterable: true,
           sortable: true
         },
         {
-          prop: 'PreFlightNONull',
+          prop: 'TransferFlightNO',
           label: '中转出航班',
           width: 110,
           filterable: true,

src/views/baggageManagement/components/flight/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-17 10:39:22
- * @LastEditTime: 2022-06-22 17:52:18
+ * @LastEditTime: 2022-06-23 13:59:49
  * @LastEditors: your name
  * @Description: 航班视图
 -->
@@ -335,13 +335,25 @@
           />
         </el-table>
       </div>
+      <div
+        class="drag-mask"
+        :class="{ 'active': dragActive }"
+      />
       <div
         class="part4"
         :style="draggableStyle"
       >
-        <!-- <div class="drag-line">
-          <i class="drag-icon el-icon-d-carer" />
-        </div> -->
+        <div
+          v-drag-height
+          class="drag-box"
+          :class="{ 'active': dragActive }"
+        >
+          <i class="drag-icon el-icon-d-caret" />
+          <div
+            class="drag-line"
+            :style="dragLineStyle"
+          />
+        </div>
         <div class="title">
           <!-- <el-cascader
             placeholder="全部行李"
@@ -552,7 +564,44 @@ export default {
       filterValues: {},
       tableDataSortRules: {},
       warningContainers: [],
-      dragHeight: 0
+      dragHeight: 0,
+      dragY: 0,
+      dragActive: false
+    }
+  },
+  directives: {
+    dragHeight: {
+      inserted(el, binding, vnode) {
+        const that = vnode.context
+        let mousedownY
+        let dragY
+        let dragHeight
+        const offsetTop = el.offsetParent.offsetTop
+        function mousemoveHandler(e) {
+          e.stopPropagation()
+          e.preventDefault()
+          dragY = dragHeight + mousedownY - e.screenY
+          dragY = dragY < 0 ? 0 : dragY > offsetTop ? offsetTop : dragY
+          that.dragY = dragY
+        }
+        function mouseupHandler(e) {
+          e.stopPropagation()
+          e.preventDefault()
+          that.dragHeight = that.dragY
+          that.dragY = 0
+          that.dragActive = false
+          document.removeEventListener('mousemove', mousemoveHandler)
+          document.removeEventListener('mouseup', mouseupHandler)
+        }
+        el.addEventListener('mousedown', e => {
+          that.dragActive = true
+          mousedownY = e.screenY
+          dragHeight = that.dragHeight
+          that.dragY = dragHeight
+          document.addEventListener('mousemove', mousemoveHandler)
+          document.addEventListener('mouseup', mouseupHandler)
+        })
+      }
     }
   },
   computed: {
@@ -584,6 +633,11 @@ export default {
       return {
         height: `calc(100vh - 80px - 16px - 16px - 344px - 8px - 204px + ${this.dragHeight}px)`
       }
+    },
+    dragLineStyle() {
+      return {
+        transform: `translateY(${this.dragHeight - this.dragY}px)`
+      }
     }
   },
   watch: {
@@ -878,9 +932,9 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
+    align-content: flex-start;
     flex-wrap: wrap;
-    overflow: auto;
-    // position: relative;
+    position: relative;
     .part1 {
       width: 71.15%;
       height: 344px;
@@ -966,23 +1020,55 @@ export default {
     }
     .part4 {
       width: 100%;
-      // position: fixed;
-      // bottom: 0;
-      // .drag-line {
-      //   position: absolute;
-      //   top: 0;
-      //   width: 100%;
-      //   .drag-icon {
-      //     margin: 0 auto;
-      //     font-size: 16px;
-      //   }
-      // }
+      position: absolute;
+      z-index: 100;
+      bottom: 0;
+      .drag-box {
+        position: absolute;
+        top: 52px;
+        width: 100%;
+        height: 20px;
+        cursor: n-resize;
+        .drag-icon {
+          display: none;
+          width: 16px;
+          height: 16px;
+          line-height: 14px;
+          position: absolute;
+          z-index: 101;
+          top: 4px;
+          left: 0;
+          right: 0;
+          margin: auto;
+          font-size: 12px;
+          text-align: center;
+          border-radius: 50%;
+          border: 1px solid;
+          background: #ffffff;
+        }
+        &:hover .drag-icon {
+          display: block;
+        }
+        .drag-line {
+          display: none;
+          width: 100%;
+          height: 50%;
+          border-bottom: 1px dashed #000000;
+          position: absolute;
+          top: 0;
+          z-index: 101;
+        }
+        &.active .drag-line {
+          display: block;
+        }
+      }
       .title {
         padding: 16px 0;
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
         align-items: center;
+        background: #dfe3ea;
         .search {
           display: flex;
           flex-direction: row;
@@ -1000,6 +1086,17 @@ export default {
         }
       }
     }
+    .drag-mask {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      z-index: 99;
+      display: none;
+      &.active {
+        display: block;
+      }
+    }
   }
   ::v-deep .el-table {
     .cell-click {