diff --git a/src/api/warehouse/warehouseRetentionRecord.js b/src/api/warehouse/warehouseRetentionRecord.js
index 4bc5c88e..df93faa2 100644
--- a/src/api/warehouse/warehouseRetentionRecord.js
+++ b/src/api/warehouse/warehouseRetentionRecord.js
@@ -8,9 +8,9 @@ export const getList = (current, size, params) => {
       ...params,
       current,
       size,
-    }
-  })
-}
+    },
+  });
+};
 export const getwaybillList = (current, size, params) => {
   return request({
     url: '/api/logpm-warehouse/warehouseRetentionRecord/waybill',
@@ -19,45 +19,45 @@ export const getwaybillList = (current, size, params) => {
       ...params,
       current,
       size,
-    }
-  })
-}
+    },
+  });
+};
 
-export const getDetail = (id) => {
+export const getDetail = id => {
   return request({
     url: '/api/logpm-warehouse/warehouseRetentionRecord/detail',
     method: 'get',
     params: {
-      id
-    }
-  })
-}
+      id,
+    },
+  });
+};
 
-export const remove = (ids) => {
+export const remove = ids => {
   return request({
     url: '/api/logpm-warehouse/warehouseRetentionRecord/remove',
     method: 'post',
     params: {
       ids,
-    }
-  })
-}
+    },
+  });
+};
 
-export const add = (row) => {
+export const add = row => {
   return request({
     url: '/api/logpm-warehouse/warehouseRetentionRecord/submit',
     method: 'post',
-    data: row
-  })
-}
+    data: row,
+  });
+};
 
-export const update = (row) => {
+export const update = row => {
   return request({
     url: '/api/logpm-warehouse/warehouseRetentionRecord/submit',
     method: 'post',
-    data: row
-  })
-}
+    data: row,
+  });
+};
 
 //滞留运单导出
 export const $_warehouseRetentionRecord = params => {
@@ -69,7 +69,6 @@ export const $_warehouseRetentionRecord = params => {
   });
 };
 
-;
 // 滞留导出
 export const $_RetentionWarehouseRetentionRecord = params => {
   return request({
@@ -78,4 +77,12 @@ export const $_RetentionWarehouseRetentionRecord = params => {
     params,
     responseType: 'blob',
   });
-};
\ No newline at end of file
+};
+
+export const $_warehouseRetentionRecordPage = params => {
+  return request({
+    url: '/api/logpm-warehouse/warehouseRetentionRecord/page',
+    method: 'get',
+    params,
+  });
+};
diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index f06e9713..f4890d9a 100644
--- a/src/page/index/index.vue
+++ b/src/page/index/index.vue
@@ -15,7 +15,7 @@
         <!-- 主体视图层 -->
         <div id="avue-view" v-show="!isSearch" v-if="isRefresh">
           <router-view #="{ Component }">
-            <keep-alive :include="$store.getters.tagsKeep">   
+            <keep-alive :include="$store.getters.tagsKeep">
               <component :is="Component" />
             </keep-alive>
           </router-view>
@@ -77,8 +77,11 @@ export default {
   },
   created() {
     getMyCurrentWarehouse().then(res => {
-      console.log(res, '初始化请求参数');
-      console.log(res.data.data.name, '仓库名称');
+      if (res.data.data == null) {
+        console.log('当前没有数据');
+        localStorage.setItem('WarehouseName', undefined);
+        return;
+      }
       localStorage.setItem('WarehouseName', res.data.data.name);
     });
   },
diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue
index 0e2c84ef..1c629557 100644
--- a/src/page/index/top/index.vue
+++ b/src/page/index/top/index.vue
@@ -120,10 +120,10 @@ export default {
     };
   },
   mounted() {
-    getMyWarehouseList().then(res => {
-      let arr = [{ name: this.dataName ? this.dataName : '', id: '0' }];
-      this.datalist = arr.concat(res.data.data);
-    });
+    // getMyWarehouseList().then(res => {
+    //   let arr = [{ name: this.dataName ? this.dataName : '', id: '0' }];
+    //   this.datalist = arr.concat(res.data.data);
+    // });
     this.checkwarehousevalue = Number(localStorage.getItem('checkwarehousevalue'));
   },
   filters: {},
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 532cf9fb..1d0a5d9c 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -1049,6 +1049,18 @@ export default [
       },
     ],
   },
+  {
+    path: '/Aftersales/AbnormalworkOrder',
+    component: Layout,
+    redirect: '/Aftersales/AbnormalworkOrder',
+    children: [
+      {
+        path: '/Aftersales/AbnormalworkOrder',
+        name: '异常工单',
+        component: () => import('@/views/Aftersales/AbnormalworkOrder.vue'),
+      },
+    ],
+  },
   // {
   //   path: '/distribution/turndelivery/devtmp',
   //   component: Layout,
diff --git a/src/views/Aftersales/AbnormalworkOrder.vue b/src/views/Aftersales/AbnormalworkOrder.vue
new file mode 100644
index 00000000..4f3123dd
--- /dev/null
+++ b/src/views/Aftersales/AbnormalworkOrder.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-tabs type="border-card" class="demo-tabs">
+    <el-tab-pane v-for="item in Tabs" :key="item.name">
+      <template #label>
+        <span class="custom-tabs-label">
+          <el-icon><component :is="item.icon" /></el-icon>
+          <span>{{ item.label }}</span>
+        </span>
+      </template>
+      <!-- 顶部搜索框 -->
+      <el-form :inline="true" :model="formInput" class="demo-form-inline">
+        <el-form-item label="Approved by">
+          <el-input v-model="formInput.user" placeholder="Approved by" clearable />
+        </el-form-item>
+        <el-form-item label="Activity zone">
+          <el-select v-model="formInput.region" placeholder="Activity zone" clearable>
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Activity time">
+          <el-date-picker
+            v-model="formInput.date"
+            type="date"
+            placeholder="Pick a date"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">Query</el-button>
+        </el-form-item>
+      </el-form>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed, watch } from 'vue';
+// 标题栏
+const Tabs = ref([
+  { label: '处理中', name: 0, icon: 'Monitor' },
+  { label: '理赔金额未出', name: 1, icon: 'Coin' },
+  { label: '处理完毕', name: 2, icon: 'Check' },
+  { label: '完结', name: 3, icon: 'Reading' },
+  { label: '仲裁中', name: 4, icon: 'List' },
+  { label: '全部', name: 5, icon: 'Notification' },
+]);
+// 搜索框
+const formInput = ref({}); //搜索框
+</script>
+
+<style lang="scss" scoped>
+.custom-tabs-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  i {
+    margin-right: 6px;
+  }
+}
+</style>
diff --git a/src/views/basicdata/warehouse/goodsShelf/basicdataGoodsShelfView.vue b/src/views/basicdata/warehouse/goodsShelf/basicdataGoodsShelfView.vue
index 257db009..6fe33a81 100644
--- a/src/views/basicdata/warehouse/goodsShelf/basicdataGoodsShelfView.vue
+++ b/src/views/basicdata/warehouse/goodsShelf/basicdataGoodsShelfView.vue
@@ -78,12 +78,12 @@
       总货位:
       <span class="def">{{ boxdetails.cargoNub }}</span>
     </div>
-      <el-divider direction="vertical" />
+    <el-divider direction="vertical" />
     <div>
       占用货位:
       <span class="red">{{ boxdetails.employNub }}</span>
     </div>
-      <el-divider direction="vertical" />
+    <el-divider direction="vertical" />
     <div>
       未用货位:
       <span class="green">{{ boxdetails.unusedNub }}</span>
@@ -92,82 +92,99 @@
       禁用货位:
       <span class="red">{{ boxdetails.disableNub }}</span>
     </div>
-      <el-divider direction="vertical" />
+    <el-divider direction="vertical" />
     <div>
       货物总数:
       <span class="red">{{ boxdetails.goodsNub }}</span>
     </div>
   </div>
   <div class="mabx">
-    <el-scrollbar max-height="70vh" class="contentbj">
-      <div class="contentbx" :style="contenbxsty">
-        <div class="itemwbox" v-for="item in contenarr">
-          <div
-            :class="ite.enableStatus == 2 ? 'itemmibox rotate' : 'itemmibox'"
-            v-for="ite in item"
-          >
-            <div v-if="ite.enableStatus == 2">禁用货位</div>
-            <el-tooltip
-              :disabled="Number(ite.enableStatus) == 2"
-              placement="bottom"
-              hide-after="50"
-              v-else
+    <el-scrollbar>
+      <div class="scrollbar-flex-content">
+        <div class="contentbx" :style="contenbxsty">
+          <div class="itemwbox scrollbar-demo-item" v-for="item in contenarr">
+            <div
+              :class="ite.enableStatus == 2 ? 'itemmibox rotate' : 'itemmibox'"
+              v-for="ite in item"
             >
-              <template #content>
-                <div v-if="ite.allocationStatus == 1">没有货位信息</div>
-                <div class="tip" v-if="ite.allocationStatus == 2 || ite.allocationStatus == 3">
-                  <div>
-                    <div>货位：{{ ite.goodsAllocationName }}</div>
-                    <div class="fwhserveNub">
-                      <div>服务号：</div>
-                      <div v-for="it in ite.serveNub || []">
-                        {{ it.serviceNumber }}
+              <div v-if="ite.enableStatus == 2">禁用货位</div>
+              <el-tooltip
+                :disabled="Number(ite.enableStatus) == 2"
+                placement="bottom"
+                hide-after="50"
+                v-else
+              >
+                <template #content>
+                  <div v-if="ite.allocationStatus == 1">没有货位信息</div>
+                  <!-- v-if="ite.allocationStatus == 2 || ite.allocationStatus == 3" -->
+                  <div class="tip">
+                    <div>
+                      <div>货位：{{ ite.goodsAllocationName }}</div>
+                      <div class="fwhserveNub">
+                        <div>服务号：</div>
+                        <div v-for="it in ite.serveNub || []">
+                          {{ it.serviceNumber }}
+                        </div>
                       </div>
-                    </div>
-                    <div class="fwhserveNub">
-                      <div>库存品：</div>
-                      <div v-for="it in ite.inventoryName || []">
-                        {{ it.name + '--' + it.productCode }}
+                      <div class="fwhserveNub">
+                        <div>库存品：</div>
+                        <div v-for="it in ite.inventoryName || []" class="KcpList">
+                          {{ it.name + '--' + it.productCode }}
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              </template>
-              <div
-                @click="checkitem(ite)"
-                v-if="Number(ite.enableStatus) != 2"
-                :class="
-                  ite.allocationStatus == 1
-                    ? 'itembox type2'
-                    : ite.allocationStatus == 2
-                    ? 'itembox type3'
-                    : ite.allocationStatus == 3
-                    ? 'itembox type4'
-                    : 'itembox'
-                "
-              >
-                <div class="titls">
-                  {{
-                    arrlist[checkselect]?.warehouseGoodsAreaVOList[checkregionselect].headline +
-                    '-' +
-                    ite.layerNum +
-                    '层' +
-                    '-' +
-                    ite.columnNum +
-                    '列'
-                  }}
-                </div>
+                </template>
                 <div
-                  class="tilts-info"
-                  v-if="ite.packageNum || ite.orderNum || ite.lessNum || ite.inventoryNum"
+                  @click="checkitem(ite)"
+                  v-if="Number(ite.enableStatus) != 2"
+                  :class="
+                    ite.allocationStatus == 1
+                      ? 'itembox type2'
+                      : ite.allocationStatus == 2
+                      ? 'itembox type3'
+                      : ite.allocationStatus == 3
+                      ? 'itembox type4'
+                      : 'itembox'
+                  "
                 >
-                  <span>包件数:{{ Number(ite.packageNum) }}</span>
-                  <span>订单数:{{ Number(ite.orderNum) }}</span>
-                  <span>零担数:{{ Number(ite.lessNum) }}</span>
-                  <span>库存品数:{{ Number(ite.inventoryNum) }}</span>
+                  <div class="titls">
+                    {{
+                      arrlist[checkselect]?.warehouseGoodsAreaVOList[checkregionselect].headline +
+                      '—' +
+                      ite.layerNum +
+                      '层' +
+                      '—' +
+                      ite.columnNum +
+                      '列'
+                    }}
+                  </div>
+                  <div class="tilts-info">
+                    <!-- v-if="ite.packageNum || ite.orderNum || ite.lessNum || ite.inventoryNum" -->
+                    <div>
+                      <span>
+                        <span class="name"> 包件数 </span>
+                        <span class="data"> {{ Number(ite.packageNum) }} </span>
+                      </span>
+                      <span
+                        ><span class="name"> 零担数 </span>
+                        <span class="data">{{ Number(ite.lessNum) }} </span></span
+                      >
+                    </div>
+                    <div>
+                      <span
+                        ><span class="name"> 订单数 </span>
+                        <span class="data">{{ Number(ite.orderNum) }} </span></span
+                      >
+                      <span
+                        ><span class="name"> 库存品数 </span>
+                        <span class="data">{{ Number(ite.inventoryNum) }} </span></span
+                      >
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </el-tooltip>
+              </el-tooltip>
+            </div>
           </div>
         </div>
       </div>
@@ -2453,7 +2470,7 @@ const {
   // box-sizing: border-box;
   box-sizing: border-box;
   .contentbx {
-    width: calc(150 * var(--length) * 0.0521vw);
+    // width: calc(150 * var(--length) * 0.0521vw);
 
     // border: 0 !important;
 
@@ -2471,13 +2488,13 @@ const {
     }
     .itemwbox {
       // height: 90px;
-      width: 150px;
+      width: 320px;
       box-sizing: border-box;
       margin-right: 2px;
       // border-right: 1.5px solid var(--boxcolor);
-      &:nth-last-child(1) {
-        border-right: 0;
-      }
+      // &:nth-last-child(1) {
+      //   border-right: 0;
+      // }
 
       &:nth-last-child(1) {
         .itemmibox {
@@ -2528,14 +2545,16 @@ const {
     flex-direction: column;
     // font-size: 14px;
   }
-  .type1 {
-    background-color: #fff !important;
-  }
   .type2 {
-    background-color: rgba(30, 183, 98, 0.3) !important;
+    border: 1px solid #3AD8BC;
+    background: #ffffff;
+    border-radius: 4px 4px 4px 4px;
   }
   .type3 {
-    background-color: rgba(237, 25, 25, 0.3) !important;
+    width: 320px;
+    background: #ffffff;
+    border-radius: 4px 4px 4px 4px;
+    border: 1px solid #f8544b;
   }
   .type4 {
     background-color: rgba(255, 15, 15, 0.3) !important;
@@ -2572,8 +2591,8 @@ const {
     font-size: 15px;
   }
   .xz {
-    width: 68px;
-    height: 28px;
+    width: 120px;
+    height: 36px;
     background: #2f4370;
     border-radius: 4px 4px 4px 4px;
     opacity: 1;
@@ -2646,7 +2665,7 @@ const {
   }
   > div {
     font-weight: 500;
-    margin:0 10px;
+    margin: 0 10px;
   }
   .def {
     color: rgb(30, 159, 255);
@@ -2688,7 +2707,29 @@ const {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  width: 120px;
+  width: 100%;
+  justify-content: space-around;
+  flex: 1;
+  flex-wrap: wrap;
+  padding: 0 24px;
+  box-sizing: border-box;
+  div {
+    flex-direction: column;
+    width: 50%;
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+  }
+  .name {
+    color: #90a0af;
+    width: 100px;
+    display: inline-block;
+    font-size: 16px;
+  }
+  .data {
+    color: #092c4d;
+    font-weight: 500;
+  }
 }
 .itemmibox {
   border: 0 !important;
@@ -2744,4 +2785,40 @@ const {
   color: #d3832a;
   cursor: pointer;
 }
+.scrollbar-flex-content {
+  display: flex;
+}
+.scrollbar-demo-item {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20px !important;
+  .itemmibox {
+    width: 100% !important;
+    margin-bottom: 20px !important;
+  }
+  .itemmibox:first-child {
+    /* 在这里添加您想要的样式 */
+    margin-top: 20px !important;
+  }
+}
+.scrollbar-demo-item:last-child {
+  /* 在这里添加您想要的样式 */
+  margin-right: 0 !important;
+}
+.itembox {
+  .titls {
+    width: 100%;
+    line-height: 36px;
+    padding: 0 25px;
+    box-sizing: border-box;
+    color: #333;
+    font-size: 16px;
+    font-weight: bold;
+  }
+}
+.KcpList {
+  margin-bottom: 50px !important;
+}
 </style>
diff --git a/src/views/distribution/reservation/reservation.vue b/src/views/distribution/reservation/reservation.vue
index f5fb074e..08f6e33b 100644
--- a/src/views/distribution/reservation/reservation.vue
+++ b/src/views/distribution/reservation/reservation.vue
@@ -459,7 +459,7 @@ export default {
         },
         {
           prop: 'mallName',
-          label: '商城',
+          label: '收货单位',
           type: 2,
           values: '',
           width: '130',
diff --git a/src/views/distribution/reservation/reservationAddFrom.vue b/src/views/distribution/reservation/reservationAddFrom.vue
index 1b4547d4..4ead8b4e 100644
--- a/src/views/distribution/reservation/reservationAddFrom.vue
+++ b/src/views/distribution/reservation/reservationAddFrom.vue
@@ -1925,9 +1925,7 @@ export default {
       let page = this.page;
       let params = {};
       this.query.serviceType = '2';
-      console.log('this.marketName :>> ', this.marketName);
       params.marketName = this.marketName;
-      console.log('params :>> ', params);
       getInventoryList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(
         res => {
           const inventoryList = res.data.data;
@@ -1938,14 +1936,18 @@ export default {
           this.page.total = inventoryList.total;
           console.log('res :>> ', res);
 
-          this.inventoryInfo = inventoryList.records;
+
+          // 过滤掉已选择的数量
+
+          const _inventoryInfo = inventoryList.records;
+          this.inventoryInfo = _inventoryInfo
           if (this.inventoryData.length !== 0) {
             // 获取ids的映射数组
             const ids = this.inventoryData.map(val => val.id);
             // 赋值给回显勾选的数组
-            this.inventorySelectList = this.inventoryInfo.filter(val => {
+           this.inventoryInfo = _inventoryInfo.filter(val => {
               // 循环获取符合条件的库存品组成数组
-              return ids.includes(val.id);
+              return !ids.includes(val.id);
             });
           }
           this.loading = false;
@@ -2628,18 +2630,7 @@ export default {
       }
       this.marketName = _marketName;
       console.log('this.inventoryList :>> ', this.inventoryList);
-      this.inventoryData = this.inventoryList;
-
-      // if (this.orderData.length) {
-      //   this.inventoryList.some(i => {
-      //     let a = this.inventoryData.filter((ele) => ele.id == i.id).length >= 1;
-      //     if (!a) {
-      //       this.inventoryData.push(i);
-      //     }
-      //   });
-      // } else {
-      //   this.inventoryData = this.selectionList;
-      // }
+      this.inventoryData = [...this.inventoryData,...this.inventoryList];
 
       this.stockListShow = false;
     },
@@ -2841,7 +2832,8 @@ export default {
       });
       if (this.orderData.length !== 0) {
         const ids = this.orderData.map(val => val.id);
-        this.orderSelectList = this.stockArticleInfo.filter(val => ids.includes(val.id));
+        const _orderData = this.stockArticleInfo.filter(val => !ids.includes(val.id))
+        // this.orderSelectList = this.stockArticleInfo.filter(val => ids.includes(val.id));
         console.log('orderSelectList :>> ', this.orderSelectList);
       }
       this.orderList = [];
diff --git a/src/views/distribution/turndelivery/deliveryMarket.vue b/src/views/distribution/turndelivery/deliveryMarket.vue
index 6388838f..c8cd832d 100644
--- a/src/views/distribution/turndelivery/deliveryMarket.vue
+++ b/src/views/distribution/turndelivery/deliveryMarket.vue
@@ -895,8 +895,7 @@
         if (row.signingStatusName === '已签收'
           || row.signingStatusName === '部分签收'
           || row.signingStatus !== '10'
-          || row.loadingStatusName === '已装车'
-          || row.loadingStatus === '30' ){
+          || row.loadingStatus !== '10' ){
           this.$message({
             message: '无法移除该预约单!!!',
             type: 'warning'
diff --git a/src/views/reservation/lnventory_list.vue b/src/views/reservation/lnventory_list.vue
index c7dbfa4e..abc126d9 100644
--- a/src/views/reservation/lnventory_list.vue
+++ b/src/views/reservation/lnventory_list.vue
@@ -53,7 +53,7 @@
         >
           <template #default="slotProps">
             <el-text type="primary" text icon="el-icon-view" @click="handleViewDetails(slotProps.scope)">查看</el-text>
-            <el-text type="primary" text icon="el-icon-view" @click="handleViewDismantle(slotProps.scope)">拆包</el-text>
+            <!-- <el-text type="primary" text icon="el-icon-view" @click="handleViewDismantle(slotProps.scope)">拆包</el-text> -->
           </template>
         </tablecmt>
       </el-row>
diff --git a/src/views/reservation/reservation_list.vue b/src/views/reservation/reservation_list.vue
index aef1da17..08f6e33b 100644
--- a/src/views/reservation/reservation_list.vue
+++ b/src/views/reservation/reservation_list.vue
@@ -3,142 +3,289 @@
     <div class="avue-crud">
       <el-row v-if="!search">
         <!-- 查询模块 -->
-        <el-form :inline="true" :model="query" class='fr-fo'>
-          <div>
-          <el-form-item label="预约单编号:">
-            <el-input v-model="query.reservationCode" placeholder="请输入预约单编号"></el-input>
-          </el-form-item>
-          <el-form-item label="订单自编号:">
-            <el-input v-model="query.stockArticleId" placeholder="请输入订单自编号"></el-input>
-          </el-form-item>
-          <el-form-item label="收货人:">
-            <el-input v-model="query.consignee" placeholder="请输入收货人"></el-input>
-          </el-form-item>
-          <el-form-item label="收货地址:">
-            <el-input v-model="query.deliveryAddress" placeholder="请输入收货地址"></el-input>
-          </el-form-item>
-          <el-form-item label="收件人电话:">
-            <el-input v-model="query.deliveryPhone" placeholder="请输入收件人电话"></el-input>
-          </el-form-item>
-        </div>
-          <el-form-item class='el-btn'>
+        <el-form :inline="true" :model="query">
+          <div class="fo-rl">
+            <el-form-item label="预约单编号:">
+              <el-input v-model="query.reservationCode" placeholder="请输入预约单编号"></el-input>
+            </el-form-item>
+            <el-form-item label="订单自编号:">
+              <el-input v-model="query.stockArticleId" placeholder="请输入订单自编号"></el-input>
+            </el-form-item>
+            <el-form-item label="收货人:">
+              <el-input v-model="query.consignee" placeholder="请输入收货人"></el-input>
+            </el-form-item>
+            <el-form-item label="收货地址:">
+              <el-input v-model="query.deliveryAddress" placeholder="请输入收货地址"></el-input>
+            </el-form-item>
+            <el-form-item label="收件人电话:">
+              <el-input v-model="query.deliveryPhone" placeholder="请输入收件人电话"></el-input>
+            </el-form-item>
+
+            <!--                        <el-form-item label="顾客姓名:">-->
+            <!--                            <el-input v-model="query.customerName" placeholder="请输入服务类型"></el-input>-->
+            <!--                        </el-form-item>-->
+            <!-- 查询按钮 -->
+          </div>
+          <el-form-item class="fo-btn">
             <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
             <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
           </el-form-item>
         </el-form>
       </el-row>
-      <el-row>
+      <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="待确认" name="nocheck">
+          <el-row>
+            <el-button-group>
+              <!--                    <el-button type="primary" icon="el-icon-view" @click="ccc">全部</el-button>-->
+            </el-button-group>
+            <div class="avue-crud__header">
+              <!-- 头部左侧按钮模块 -->
+              <div class="avue-crud__left">
+                <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
+                  >添加预约
+                </el-button>
+                <el-button
+                  v-if="this.queryA.reservationStatus === '1'"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="handleConfirmReservations"
+                  plain
+                  >批量确认
+                </el-button>
+                <el-button
+                  v-if="this.queryA.reservationStatus === '2'"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="handleStockUp()"
+                  plain
+                  >批量转备货
+                </el-button>
+                <el-button
+                  v-if="this.queryA.reservationStatus === '2'"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="handleDeliverys"
+                  plain
+                  >批量转配送
+                </el-button>
+                <el-button type="danger" icon="el-icon-download" @click="handleExportInfo(1)" plain
+                  >导出
+                </el-button>
+              </div>
+              <!-- 头部右侧按钮模块 -->
+              <div class="avue-crud__right">
+                <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+                <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+                <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
+              </div>
+            </div>
+          </el-row>
+          <el-row>
+            <template v-if="this.activename === 'nocheck'">
+              <!-- 列表模块 -->
+              <tablecmt
+                :columnList="columnList"
+                :tableData="data"
+                :loading="loading"
+                @inputTxt="inputscA"
+                @timeCheck="timescA"
+                @btnCheck="btnsc"
+                @selectCheck="selectscA"
+                @selection="selectionChange"
+              >
+                <template #default="slotProps">
+                  <el-text
+                    size="small"
+                    type="primary"
+                    link
+                    icon="el-icon-view"
+                    @click="viewReservation(slotProps.scope)"
+                    >查看
+                  </el-text>
+                  <el-text
+                    size="small"
+                    type="primary"
+                    link
+                    icon="el-icon-view"
+                    @click="editsolt(slotProps.scope)"
+                    >编辑
+                  </el-text>
+                  <el-text
+                    size="small"
+                    type="primary"
+                    link
+                    icon="el-icon-view"
+                    @click="cancelReservation(slotProps.scope)"
+                    >取消预约
+                  </el-text>
+                  <el-text
+                    v-if="this.queryA.reservationStatus === '1' ? true : false"
+                    size="small"
+                    @click="confirmReservation(slotProps.scope)"
+                    >确认预约
+                  </el-text>
+                </template>
+              </tablecmt>
+            </template>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="已确认" name="yescheck">
+          <el-row>
+            <el-button-group>
+              <!--                    <el-button type="primary" icon="el-icon-view" @click="ccc">全部</el-button>-->
+            </el-button-group>
+            <div class="avue-crud__header">
+              <!-- 头部左侧按钮模块 -->
+              <div class="avue-crud__left">
+                <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
+                  >添加预约
+                </el-button>
+                <el-button
+                  v-if="this.queryB.reservationStatus === '1'"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="handleConfirmReservations"
+                  plain
+                  >批量确认
+                </el-button>
+                <el-button
+                  v-if="this.queryB.reservationStatus === '2'"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="handleStockUp()"
+                  plain
+                  >批量转备货
+                </el-button>
+                <el-button
+                  v-if="this.queryB.reservationStatus === '2'"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="handleDeliverys"
+                  plain
+                  >批量转配送
+                </el-button>
+                <el-button
+                  v-if="this.queryB.reservationStatus === '2'"
+                  type="danger"
+                  icon="el-icon-delete"
+                  @click="batchPrintData"
+                  plain
+                  >批量打印
+                </el-button>
+                <el-button type="danger" icon="el-icon-download" @click="handleExportInfo(2)" plain
+                  >导出
+                </el-button>
+              </div>
+              <!-- 头部右侧按钮模块 -->
+              <div class="avue-crud__right">
+                <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
+                <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
+                <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
+              </div>
+            </div>
+          </el-row>
+          <el-row>
+            <template v-if="this.activename === 'yescheck'">
+              <!-- 列表模块 -->
+              <tablecmt
+                :columnList="columnList"
+                :tableData="data"
+                :loading="loading"
+                @inputTxt="inputscB"
+                @timeCheck="timescB"
+                @btnCheck="btnsc"
+                @selectCheck="selectscB"
+                @selection="selectionChange"
+              >
+                <template #default="slotProps">
+                  <el-text
+                    size="small"
+                    type="primary"
+                    link
+                    icon="el-icon-view"
+                    @click="viewReservation(slotProps.scope)"
+                    >查看
+                  </el-text>
+                  <el-text
+                    size="small"
+                    type="primary"
+                    link
+                    icon="el-icon-view"
+                    @click="editsolt(slotProps.scope)"
+                    >编辑
+                  </el-text>
+                  <el-text
+                    size="small"
+                    type="primary"
+                    link
+                    icon="el-icon-view"
+                    @click="cancelReservation(slotProps.scope)"
+                    >取消预约
+                  </el-text>
+                  <el-text
+                    v-if="this.queryB.reservationStatus === '1' ? true : false"
+                    size="small"
+                    @click="confirmReservation(slotProps.scope)"
+                    >确认预约
+                  </el-text>
+                  <el-text
+                    size="small"
+                    type="primary"
+                    link
+                    icon="el-icon-view"
+                    @click="printData(slotProps.scope)"
+                    >打印
+                  </el-text>
+                </template>
+              </tablecmt>
+            </template>
+            <!--        <el-popover :visible="visible" placement="top-start" :width="160">-->
+            <!--          <p>Are you sure to delete this?</p>-->
+            <!--          <el-input v-model= 'this.message'-->
+            <!--                    type="textarea"-->
+            <!--                    :rows="1"-->
+            <!--                    placeholder="请输入取消原因"></el-input>-->
+            <!--          <div style="text-align: right; margin: 10%">-->
+            <!--            <el-button size="small" text @click="this.message='',visible = false">取消</el-button>-->
+            <!--            <el-button size="small" type="primary" @click="confirmReservation(slotProps.scope)"-->
+            <!--            >确认</el-button-->
+            <!--            >-->
+            <!--          </div>-->
+            <!--&lt;!&ndash;          <template #reference>&ndash;&gt;-->
+            <!--&lt;!&ndash;          </template>&ndash;&gt;-->
+            <!--        </el-popover>-->
+            <!-- <el-table ref="table" v-loading="loading"
+                                              @selection-change="selectionChange"
+                                              :data="data"
+                                              :height="height"
+                                              style="width: 100%"
+                                              :border="option.border">
+                                        <el-table-column type="selection" v-if="option.selection" width="55"
+                                                         align="center"></el-table-column>
+                                        <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
+                                        <el-table-column v-if="option.index" label="序号" type="index" width="80px"
+                                                         align="center"></el-table-column>
 
-        <div class="avue-crud__header">
-        <el-button-group>
-          <el-button type="primary" icon="el-icon-warning" @click="aaa">待确认</el-button>
-          <!-- <el-button type="primary" icon="el-icon-circle-check" @click="bbb"
-                  >已确认<i class="el-icon-arrow-right el-icon--right"></i
-                  ></el-button> -->
-          <!--                    <el-button type="primary" icon="el-icon-view" @click="ccc">全部</el-button>-->
-        </el-button-group>
-          <!-- 头部左侧按钮模块 -->
-          <div class="avue-crud__left">
-            <!-- <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加预约</el-button>
-                      <el-button
-                              v-if="this.query.reservationStatus === '1'"
-                              type="danger"
-                              icon="el-icon-delete"
-                              @click="handleConfirmReservations"
-                              plain
-                      >批量确认
-                      </el-button> -->
-            <el-button
-              v-if="this.query.reservationStatus === '2'"
-              type="danger"
-              icon="el-icon-delete"
-              @click="handleStockUp()"
-              plain
-              >批量转备货
-            </el-button>
-            <el-button
-              v-if="this.query.reservationStatus === '2'"
-              type="danger"
-              icon="el-icon-delete"
-              @click="handleDeliverys"
-              plain
-              >批量转配送
-            </el-button>
-          </div>
-          <!-- 头部右侧按钮模块 -->
-          <div class="avue-crud__right">
-            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
-            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
-            <el-button icon="el-icon-search" @click="searchHide" circle></el-button>
-          </div>
-        </div>
-      </el-row>
-      <el-row>
-        <!-- 列表模块 -->
-        <tablecmt
-          :columnList="columnList"
-          :tableData="data"
-          :loading="loading"
-          @inputTxt="inputsc"
-          @timeCheck="timesc"
-          @btnCheck="btnsc"
-          @selectCheck="selectsc"
-          @selection="selectionChange"
-        >
-          <template #default="slotProps">
-            <el-button size="small" @click="viewReservation(slotProps.scope)">查看</el-button>
-            <el-button size="small" @click="editsolt(slotProps.scope)">编辑</el-button>
-            <br />
-            <el-button size="small" @click="cancelReservation(slotProps.scope)">取消预约</el-button>
-            <br />
-            <!--                        ${{slotProps.scope}}-->
-            <!-- <el-button v-if="this.query.reservationStatus==='1'?true:false " type="small" @click="confirmReservation(slotProps.scope)">确认预约</el-button> -->
-          </template>
-        </tablecmt>
-        <!--        <el-popover :visible="visible" placement="top-start" :width="160">-->
-        <!--          <p>Are you sure to delete this?</p>-->
-        <!--          <el-input v-model= 'this.message'-->
-        <!--                    type="textarea"-->
-        <!--                    :rows="1"-->
-        <!--                    placeholder="请输入取消原因"></el-input>-->
-        <!--          <div style="text-align: right; margin: 10%">-->
-        <!--            <el-button size="small" text @click="this.message='',visible = false">取消</el-button>-->
-        <!--            <el-button size="small" type="primary" @click="confirmReservation(slotProps.scope)"-->
-        <!--            >确认</el-button-->
-        <!--            >-->
-        <!--          </div>-->
-        <!--&lt;!&ndash;          <template #reference>&ndash;&gt;-->
-        <!--&lt;!&ndash;          </template>&ndash;&gt;-->
-        <!--        </el-popover>-->
-        <!-- <el-table ref="table" v-loading="loading"
-                                @selection-change="selectionChange"
-                                :data="data"
-                                :height="height"
-                                style="width: 100%"
-                                :border="option.border">
-                          <el-table-column type="selection" v-if="option.selection" width="55"
-                                           align="center"></el-table-column>
-                          <el-table-column type="expand" v-if="option.expand" align="center"></el-table-column>
-                          <el-table-column v-if="option.index" label="序号" type="index" width="80px"
-                                           align="center"></el-table-column>
+                                        <template v-for="(item,index) in option.column">
+                                            <el-table-column v-if="item.hide!==true"
+                                                             :prop="item.prop"
+                                                             :label="item.label"
+                                                             :width="item.width"
+                                                             :key="index">
+                                            </el-table-column>
+                                        </template>
+                                        <el-table-column prop="menu" label="操作" :width="220" align="center">
+                                            <template #="{row}">
+                                                <el-button type="primary" text icon="el-icon-view" @click="handleView(row)">查看</el-button>
+                                                <el-button type="primary" text icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
+                                                <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>
+                                            </template>
+                                        </el-table-column>
+                                    </el-table> -->
+          </el-row>
+        </el-tab-pane>
+      </el-tabs>
 
-                          <template v-for="(item,index) in option.column">
-                              <el-table-column v-if="item.hide!==true"
-                                               :prop="item.prop"
-                                               :label="item.label"
-                                               :width="item.width"
-                                               :key="index">
-                              </el-table-column>
-                          </template>
-                          <el-table-column prop="menu" label="操作" :width="220" align="center">
-                              <template #="{row}">
-                                  <el-button type="primary" text icon="el-icon-view" @click="handleView(row)">查看</el-button>
-                                  <el-button type="primary" text icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
-                                  <el-button type="primary" text icon="el-icon-delete" @click="rowDel(row)">删除</el-button>
-                              </template>
-                          </el-table-column>
-                      </el-table> -->
-      </el-row>
       <el-row>
         <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
           <div style="font-size: 14px">勾选数量: {{ selectionList.length }}</div>
@@ -157,6 +304,17 @@
           </el-pagination>
         </div>
       </el-row>
+
+      <el-dialog title="二维码" :visible.sync="dialogVisible" width="780px" v-model="dialogVisible">
+        <div>
+          <div v-html="html"></div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
+          <el-button type="primary" @click="printTemplate">打 印</el-button>
+          <el-button @click="dialogVisible = false">取 消</el-button>
+        </span>
+      </el-dialog>
     </div>
   </basic-container>
   <edittablehead
@@ -225,6 +383,8 @@ import {
   confirms,
   addReservations,
   cancelReservation,
+  patchPrintList,
+  reservationExport,
 } from '@/api/distribution/distributionReservation';
 import option from '@/option/distribution/distributionReservation';
 import { mapGetters } from 'vuex';
@@ -233,11 +393,18 @@ import { addAssign, getListUser } from '@/api/distribution/distributionStockup';
 import { getPostList } from '@/api/system/post';
 import { getListOwn } from '@/api/system/user';
 import { getListTeam } from '@/api/basicdata/basicdataTeamGroup';
-import { stockUp } from '@/api/basicdata/basicdataGoodsArea';
+import { getStockUpArea, stockUp } from '@/api/basicdata/basicdataGoodsArea';
+import dayjs from 'dayjs';
+import print from '@/utils/print';
+import { downloadXls } from '@/utils/util';
 
 export default {
   data() {
     return {
+      // 弹出框是否显示
+      dialogVisible: false,
+      // 打印模版的html
+      html: '',
       columnList: [
         {
           prop: '',
@@ -271,8 +438,8 @@ export default {
           head: false,
         },
         {
-          prop: 'consignee',
-          label: '收货人',
+          prop: 'serviceNumber',
+          label: '服务号',
           type: 2,
           values: '',
           width: '130',
@@ -281,8 +448,8 @@ export default {
           sortable: true,
         },
         {
-          prop: 'deliveryAddress',
-          label: '收货地址',
+          prop: 'warehouseName',
+          label: '仓库',
           type: 2,
           values: '',
           width: '130',
@@ -291,28 +458,19 @@ export default {
           sortable: true,
         },
         {
-          prop: 'deliveryPhone',
-          label: '收件人电话',
-          type: 3,
+          prop: 'mallName',
+          label: '收货单位',
+          type: 2,
           values: '',
           width: '130',
-          checkarr: [
-            {
-              label: '1231213',
-              value: '123121123',
-            },
-            {
-              label: '112121',
-              value: '12312123111123',
-            },
-          ],
+          checkarr: [],
           fixed: false,
           sortable: true,
         },
         {
-          prop: 'reservationDate',
-          label: '预约时间',
-          type: 5,
+          prop: 'storeName',
+          label: '门店',
+          type: 2,
           values: '',
           width: '130',
           checkarr: [],
@@ -320,9 +478,9 @@ export default {
           sortable: true,
         },
         {
-          prop: 'periodOfTime',
-          label: '时段',
-          type: 4,
+          prop: 'consignee',
+          label: '收货人',
+          type: 2,
           values: '',
           width: '130',
           checkarr: [],
@@ -330,70 +488,165 @@ export default {
           sortable: true,
         },
         {
-          prop: 'deliveryWay',
-          label: '配送方式',
+          prop: 'deliveryAddress',
+          label: '收货地址',
           type: 2,
           values: '',
-          width: '130',
+          width: '180',
           checkarr: [],
           fixed: false,
           sortable: true,
-          head: true,
         },
         {
-          prop: 'deliveryType',
-          label: '配送类型',
+          prop: 'deliveryPhone',
+          label: '收件人电话',
           type: 2,
           values: '',
           width: '130',
-          checkarr: [],
           fixed: false,
           sortable: true,
         },
         {
-          prop: 'serveType',
-          label: '服务类型',
-          type: 2,
+          prop: 'reservationDate',
+          label: '预约时间',
+          type: 4,
           values: '',
           width: '130',
           checkarr: [],
           fixed: false,
           sortable: true,
         },
+        // {
+        //   prop: 'periodOfTime',
+        //   label: '时段1',
+        //   type: 3,
+        //   values: '',
+        //   width: '180',
+        //   checkarr: [
+        //     {
+        //       label: '上午',
+        //       value: '1'
+        //     },
+        //     {
+        //       label: '下午',
+        //       value: '2'
+        //     },
+        //     {
+        //       label: '全天',
+        //       value: '3'
+        //     },
+        //   ],
+        //   fixed: false,
+        //   sortable: true,
+        //   head:true,
+        // },
         {
-          prop: 'reservationNum',
-          label: '预约包件数',
-          type: 1,
+          prop: 'periodOfTimeName',
+          label: '时段',
+          type: 3,
           values: '',
           width: '130',
-          checkarr: [],
+          checkarr: [
+            {
+              label: '上午',
+              value: '1',
+            },
+            {
+              label: '下午',
+              value: '2',
+            },
+            {
+              label: '全天',
+              value: '3',
+            },
+          ],
           fixed: false,
           sortable: true,
         },
         {
-          prop: 'reservationStockListNum',
-          label: '预约库存品数',
-          type: 1,
+          prop: 'deliveryWay',
+          label: '配送方式',
+          type: 3,
           values: '',
           width: '130',
           checkarr: [],
           fixed: false,
           sortable: true,
+          head: true,
         },
+        // {
+        //   prop: 'deliveryType',
+        //   label: '配送类型',
+        //   type: 3,
+        //   values: '',
+        //   width: '150',
+        //   checkarr: [
+        //     {
+        //       label: '商配',
+        //       value: '1',
+        //     },
+        //     {
+        //       label: '市配',
+        //       value: '2'
+        //     },
+        //   ],
+        //   fixed: false,
+        //   sortable: true
+        // },
+        // {
+        //   prop: 'serveType',
+        //   label: '服务类型1',
+        //   type: 2,
+        //   values: '',
+        //   width: '150',
+        //   checkarr: [],
+        //   fixed: false,
+        //   sortable: true,
+        //   hide:true,
+        // },
         {
-          prop: 'collectFee',
-          label: '到付运费',
-          type: 2,
+          prop: 'serveTypeName',
+          label: '服务类型',
+          type: 3,
           values: '',
           width: '130',
-          checkarr: [],
+          checkarr: [
+            {
+              label: '上楼',
+              value: '1',
+            },
+            {
+              label: '超区',
+              value: '2',
+            },
+            {
+              label: '拆样',
+              value: '3',
+            },
+            {
+              label: '返货',
+              value: '4',
+            },
+            {
+              label: '平移',
+              value: '5',
+            },
+            {
+              label: '分拣',
+              value: '6',
+            },
+            {
+              label: '专车',
+              value: '7',
+            },
+          ],
           fixed: false,
           sortable: true,
         },
         {
-          prop: 'otherFee',
-          label: '其他费用',
-          type: 2,
+          prop: 'reservationNum',
+          label: '预约包件数',
+          type: 1,
           values: '',
           width: '130',
           checkarr: [],
@@ -401,19 +654,19 @@ export default {
           sortable: true,
         },
         {
-          prop: 'replaceFee',
-          label: '代付运费',
-          type: 2,
+          prop: 'reservationStockListNum',
+          label: '预约库存品数',
+          type: 1,
           values: '',
-          width: '130',
+          width: '150',
           checkarr: [],
           fixed: false,
           sortable: true,
         },
         {
-          prop: 'fee',
-          label: '总费用',
-          type: 2,
+          prop: 'collectionFee',
+          label: '待收货款',
+          type: 1,
           values: '',
           width: '130',
           checkarr: [],
@@ -421,9 +674,9 @@ export default {
           sortable: true,
         },
         {
-          prop: 'reservationStatus',
-          label: '预约信息状态',
-          type: 4,
+          prop: 'otherFee',
+          label: '其他费用',
+          type: 1,
           values: '',
           width: '130',
           checkarr: [],
@@ -431,35 +684,122 @@ export default {
           sortable: true,
         },
         {
-          prop: 'orderSource',
-          label: '订单来源',
-          type: 4,
+          prop: 'replaceFee',
+          label: '代收运费',
+          type: 1,
           values: '',
           width: '130',
           checkarr: [],
           fixed: false,
           sortable: true,
         },
+        // {
+        //   prop: 'fee',
+        //   label: '总费用',
+        //   type: 2,
+        //   values: '',
+        //   width: '150',
+        //   checkarr: [],
+        //   fixed: false,
+        //   sortable: true
+        // },
+        // {
+        //   prop: 'reservationStatus',
+        //   label: '预约信息状态1',
+        //   type: 4,
+        //   values: '',
+        //   width: '180',
+        //   checkarr: [],
+        //   fixed: false,
+        //   sortable: true,
+        //   hide: true,
+        //
+        // },
         {
-          prop: 'stockupStatus',
-          label: '备货状态',
-          type: 2,
+          prop: 'reservationStatusName',
+          label: '预约信息状态',
+          type: 1,
           values: '',
-          width: '130',
-          checkarr: [],
+          width: '150',
+          checkarr: [
+            //   {
+            //   label: '待确认',
+            //   value: '1'
+            // },
+            //   {
+            //     label: '已确认',
+            //     value: '2'
+            //   },
+          ],
           fixed: false,
           sortable: true,
         },
+        // {
+        //   prop: 'orderSource',
+        //   label: '订单来源',
+        //   type: 4,
+        //   values: '',
+        //   width: '180',
+        //   checkarr: [],
+        //   fixed: false,
+        //   sortable: true
+        // },
+        // {
+        //   prop: 'stockupStatus',
+        //   label: '备货状态',
+        //   type: 3,
+        //   values: '',
+        //   width: '150',
+        //   checkarr: [
+        //         {
+        //           label: '待备货',
+        //           value: '1',
+        //         },{
+        //           label: '已备货',
+        //           value: '2',
+        //         },
+        //         {
+        //           label: '部分备货',
+        //           value: '3'
+        //         },
+        //   ],
+        //   fixed: false,
+        //   sortable: true
+        // },
         {
-          prop: 'goodsAreaName',
-          label: '备货区',
-          type: 2,
+          prop: 'stockupStatusName',
+          label: '备货状态',
+          type: 3,
           values: '',
           width: '130',
-          checkarr: [],
+          checkarr: [
+            {
+              label: '待备货',
+              value: '10',
+            },
+            {
+              label: '部分备货',
+              value: '20',
+            },
+            {
+              label: '已备货',
+              value: '30',
+            },
+          ],
           fixed: false,
           sortable: true,
         },
+
+        // {
+        //   prop: 'goodsAreaName',
+        //   label: '备货区',
+        //   type: 2,
+        //   values: '',
+        //   width: '130',
+        //   checkarr: [],
+        //   fixed: false,
+        //   sortable: true
+        // },
         // {
         //   prop: 'goodsAreaId',
         //   label: '备货区编号',
@@ -481,16 +821,7 @@ export default {
         //   fixed: false,
         //   sortable: true,
         // },
-        {
-          prop: 'serviceNumber',
-          label: '服务号',
-          type: 2,
-          values: '',
-          width: '130',
-          checkarr: [],
-          fixed: false,
-          sortable: true,
-        },
+
         // {
         //   prop: 'notes',
         //   label: '备注',
@@ -527,11 +858,12 @@ export default {
       // 是否为查看模式
       view: false,
       // 查询信息
-      query: {},
+      queryA: {},
+      queryB: {},
       // 分页信息
       page: {
         currentPage: 1,
-        pageSize: 10,
+        pageSize: 30,
         total: 40,
       },
       // 表单数据
@@ -561,8 +893,21 @@ export default {
       goodsAreaIdData: [],
       deptId: '',
       cancelReservationRow: {},
+      activeName: 'nocheck',
+      activename: 'nocheck',
     };
   },
+  watch: {
+    // '$route.query.reservationId': {
+    handler(newVal, oldVal) {
+      console.log(newVal, oldVal);
+      // this.fetchData();
+      this.onLoad(this.page);
+    },
+    deep: false,
+    immediate: true,
+    // }
+  },
   mounted() {
     this.init();
     this.onLoad(this.page);
@@ -651,6 +996,31 @@ export default {
     },
   },
   methods: {
+    /**
+     * 导出
+     * */
+    handleExportInfo(type) {
+      let row = {};
+      if (!!this.ids) {
+        row.ids = this.ids;
+      }
+      let nulName;
+      if (type === 1) {
+        // 未
+        nulName = '待确定预约单数据.xlsx';
+        row = { ...row, ...this.queryA };
+        row.reservationStatus = '1';
+      } else {
+        // 已
+        nulName = '已确定预约单数据.xlsx';
+        row = { ...row, ...this.queryB };
+        row.reservationStatus = '2';
+      }
+      reservationExport(row).then(res => {
+        console.log(res.data);
+        downloadXls(res.data, nulName);
+      });
+    },
     showdrawer(value) {
       this.drawerShow = value;
     },
@@ -687,9 +1057,10 @@ export default {
     editsolt(scope) {
       const { row } = scope;
       this.$router.push({
-        path: '/distribution/reservation/reservationFrom',
+        path: '/distribution/reservation/reservationAddFrom',
         query: {
           reservationId: row.id,
+          name: '编辑预约单',
         },
       });
       console.log(row);
@@ -707,18 +1078,86 @@ export default {
     btnsc(index, row) {
       console.log(index, row);
     },
-    selectsc(index, row) {
+    selectscA(index, row) {
+      console.log(index, row);
+      if (row.prop === 'periodOfTimeName') {
+        this.queryA['periodOfTime'] = index;
+      } else if (row.prop === 'stockupStatusName') {
+        this.queryA['stockupStatus'] = index;
+      } else if (row.prop === 'serveTypeName') {
+        this.queryA['serveType'] = index;
+        console.log(this.queryA, '----------->');
+      } else {
+        this.queryA[row.prop] = index;
+      }
+      this.onLoad(this.page);
+    },
+    selectscB(index, row) {
+      console.log(index, row);
+      if (row.prop === 'periodOfTimeName') {
+        this.queryB['periodOfTime'] = index;
+      } else if (row.prop === 'stockupStatusName') {
+        this.queryB['stockupStatus'] = index;
+      } else if (row.prop === 'serveTypeName') {
+        this.queryB['serveType'] = index;
+        console.log(this.queryB, '----------->');
+      } else {
+        this.queryB[row.prop] = index;
+      }
+      this.onLoad(this.page);
+    },
+    timescA(index, row) {
+      console.log(index, row);
+      console.log(index, row);
+      if (!!index) {
+        index = dayjs(index).format('YYYY-MM-DD');
+      }
+      this.queryA[row.prop] = index;
+      if (!index) {
+        delete this.queryA[row.prop];
+      }
+      this.onLoad(this.page);
+    },
+    timescB(index, row) {
+      console.log(index, row);
       console.log(index, row);
+      if (!!index) {
+        index = dayjs(index).format('YYYY-MM-DD');
+      }
+      this.queryB[row.prop] = index;
+      if (!index) {
+        delete this.queryB[row.prop];
+      }
+      this.onLoad(this.page);
     },
-    timesc(index, row) {
+    inputscA(index, row) {
       console.log(index, row);
+      this.queryA[row.prop] = index;
+      if (!index) delete this.queryA[row.prop];
+      this.onLoad(this.page);
     },
-    inputsc(index, row) {
+    inputscB(index, row) {
       console.log(index, row);
+      this.queryB[row.prop] = index;
+      if (!index) delete this.queryB[row.prop];
+      this.onLoad(this.page);
     },
     init() {
       this.height = this.setPx(document.body.clientHeight - 340);
     },
+    handleClick(e) {
+      console.log('e :>> ', e.props.name);
+      // 切换选项卡时, 清空备选中的数组
+      this.selectionList = [];
+      this.activename = e.props.name;
+      this.onLoad(this.page);
+      // if (e.props.name === 'yescheck') {
+      //   this.bbb();
+      // } else {
+      //   this.aaa();
+      // }
+      // console.log('this.activename :>> ', this.activename);
+    },
     cancelReservationConfirm() {
       if (!this.cancel.message) {
         this.$message.warning('请输入取消原因!!');
@@ -754,22 +1193,18 @@ export default {
       //订单来源
       getDictionaryBiz('order_source').then(res => {
         this.orderSourceData = res.data.data;
-        console.log(this.deliveryTypeData);
       });
       //预约状态
       getDictionaryBiz('resvervation_status').then(res => {
         this.resvervationStatusData = res.data.data;
-        console.log(this.deliveryTypeData);
       });
       //备货状态
       getDictionaryBiz('stockup_status').then(res => {
         this.stockupStatusData = res.data.data;
-        console.log(this.deliveryTypeData);
       });
       //时段
       getDictionaryBiz('period_of_time').then(res => {
         this.periodOfTimeData = res.data.data;
-        console.log(this.deliveryTypeData);
       });
       getDictionaryBiz('delivery_way').then(res => {
         this.deliveryWayData = res.data.data;
@@ -821,7 +1256,7 @@ export default {
       getListTeam(
         this.page.currentPage,
         this.page.pageSize,
-        Object.assign(params, this.query)
+        Object.assign(params, this.queryB)
       ).then(res => {
         // console.log(">><><",res.data.data.records);
         let fo = [];
@@ -840,7 +1275,7 @@ export default {
       let params = {
         department: this.deptId,
       };
-      stockUp(params).then(res => {
+      getStockUpArea().then(res => {
         // console.log("res>>>",res.data.data);
         let fo = [];
         res.data.data.forEach(i => {
@@ -860,7 +1295,8 @@ export default {
       this.onLoad(this.page);
     },
     searchReset() {
-      this.query = {};
+      this.queryA = {};
+      this.queryB = {};
       this.page.currentPage = 1;
       this.onLoad(this.page);
     },
@@ -906,24 +1342,24 @@ export default {
     },
     handleAdd() {
       this.$router.push({
-        path: '/distribution/reservation/reservationFrom',
+        path: '/distribution/reservation/reservationAddFrom',
       });
     },
     handleEdit(row) {
       console.log(row);
       this.$router.push({
-        path: '/distribution/reservation/reservationFrom',
+        path: '/distribution/reservation/reservationAddFrom',
         query: {
           reservationId: row.id,
         },
       });
     },
     aaa() {
-      this.query.reservationStatus = '1';
+      this.queryA.reservationStatus = '1';
       this.onLoad(this.page);
     },
     bbb() {
-      this.query.reservationStatus = '2';
+      this.queryB.reservationStatus = '2';
       this.onLoad(this.page);
     },
     handleView(row) {
@@ -958,6 +1394,7 @@ export default {
       });
       // console.log(">>>>>>>>>>",ids);
     },
+    //批量转备货
     handleStockUp() {
       this.info = {};
       if (this.selectionList.length === 0) {
@@ -966,16 +1403,27 @@ export default {
       }
       let data = this.selectionList;
       let a = [];
+      let b = [];
+      console.log('>>>>>>>>>>>>>', data);
       data.forEach(d => {
-        if (d.stockupStatus !== '未备货') {
+        if (d.stockupStatus === '20' || d.stockupStatusName === '待备货') {
           a.push(d.reservationCode);
         }
+        if (d.stockupStatus === '30' || d.stockupStatusName === '已备货') {
+          b.push(d.reservationCode);
+        }
       });
       if (a.length >= 1) {
         this.$message.warning(a.join(',') + '预约单存在备货任务,请勿重复添加');
         return;
       }
+      if (b.length >= 1) {
+        this.$message.warning(a.join(',') + '预约单备货任务已完成,请勿重复添加');
+        return;
+      }
       this.dialogFormCustomer = true;
+      this.info.stockupDate = dayjs().format('YYYY-MM-DD HH:mm:ss');
+
       this.getFork();
       this.getTeam();
     },
@@ -988,7 +1436,6 @@ export default {
           this.info.goodsAreaName = item.dictValue;
         }
       });
-
       confirms(this.info).then(res => {
         this.$message({
           type: 'success',
@@ -1060,77 +1507,168 @@ export default {
 
     onLoad(page, params = {}) {
       this.loading = true;
-      if (!this.query.reservationStatus) {
-        this.query.reservationStatus = '1';
+      // if (!this.query.reservationStatus) {
+      //   this.query.reservationStatus = '1';
+      // }
+      let query = this.queryB;
+      query.reservationStatus = '2';
+      console.log('this.activename :>> ', this.activename);
+      if (this.activename === 'nocheck') {
+        console.log('123123 :>> ', 123123);
+        query = this.queryA;
+        query.reservationStatus = this.queryA.reservationStatus || '1';
       }
-      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+      // if (this.queryA.reservationStatus)
+      getList(page.currentPage, page.pageSize, Object.assign(params, query)).then(res => {
         const data = res.data.data;
         console.log('>>>>>>>', data);
-        data.records.forEach(item => {
-          this.orderSourceData.forEach(a => {
-            if (item.orderSource === a.dictKey) {
-              item.orderSource = a.dictValue;
-            }
-          });
-          this.stockupStatusData.forEach(b => {
-            if (item.stockupStatus === b.dictKey) {
-              item.stockupStatus = b.dictValue;
-            }
-          });
-          this.resvervationStatusData.forEach(e => {
-            if (item.reservationStatus === e.dictKey) {
-              item.reservationStatus = e.dictValue;
-            }
-          });
-          this.deliveryTypeData.forEach(c => {
-            if (item.deliveryType === c.dictKey) {
-              item.deliveryType = c.dictValue;
-            }
-          });
+        if (data.records) {
+          data.records.forEach(item => {
+            this.orderSourceData.forEach(a => {
+              if (item.orderSource === a.dictKey) {
+                item.orderSource = a.dictValue;
+              }
+            });
+            // this.stockupStatusData.forEach(b => {
+            //   if (item.stockupStatus === b.dictKey) {
+            //     item.stockupStatus = b.dictValue;
+            //   }
+            // });
+            this.resvervationStatusData.forEach(e => {
+              if (item.reservationStatus === e.dictKey) {
+                item.reservationStatus = e.dictValue;
+              }
+            });
+            this.deliveryTypeData.forEach(c => {
+              if (item.deliveryType === c.dictKey) {
+                item.deliveryType = c.dictValue;
+              }
+            });
 
-          this.deliveryWayData.forEach(c => {
-            if (item.deliveryWay === c.dictKey) {
-              item.deliveryWay = c.dictValue;
-            }
-          });
-          this.periodOfTimeData.forEach(d => {
-            console.log('11111111111');
-            if (item.periodOfTime === d.dictKey) {
-              item.periodOfTime = d.dictValue;
-            }
-          });
-          let pa = [];
-          if (item.serveType.length > 1) {
-            pa = item.serveType.split(',');
-          } else {
-            pa.push(item.serveType);
-          }
-          this.addvalueServeTypeData.forEach(f => {
-            pa.forEach((p, index) => {
-              if (p === f.dictKey) {
-                pa[index] = f.dictValue;
+            this.deliveryWayData.forEach(c => {
+              if (item.deliveryWay === c.dictKey) {
+                item.deliveryWay = c.dictValue;
+              }
+            });
+            this.periodOfTimeData.forEach(d => {
+              console.log('11111111111');
+              if (item.periodOfTime === d.dictKey) {
+                item.periodOfTime = d.dictValue;
               }
             });
+            let pa = [];
+            if (item.serveType.length > 1) {
+              pa = item.serveType.split(',');
+            } else {
+              pa.push(item.serveType);
+            }
+            this.addvalueServeTypeData.forEach(f => {
+              pa.forEach((p, index) => {
+                if (p === f.dictKey) {
+                  pa[index] = f.dictValue;
+                }
+              });
+            });
+            item.serveType = pa.join(',');
           });
-          item.serveType = pa.join(',');
-        });
+        }
         this.page.total = data.total;
         this.data = data.records;
         this.loading = false;
         this.selectionClear();
       });
     },
+
+    /**
+     * 请求打印模版
+     */
+    async batchPrint(ids) {
+      const res = await patchPrintList({ ids: ids.join(',') });
+      return res;
+    },
+
+    /**
+     * 批量打印
+     */
+    async batchPrintData() {
+      if (this.selectionList.length === 0) {
+        this.$message({
+          type: 'error',
+          message: '最少选择一条数据哦',
+        });
+        return;
+      }
+      const ids = this.selectionList.map(item => item.id);
+      const res = await this.batchPrint(ids);
+      const { code, data } = res.data;
+      if (code === 200) {
+        this.dialogVisible = true;
+        console.log('data :>> ', data);
+        this.html = '';
+        data.forEach(item => {
+          return (this.html += item.templateHtml);
+        });
+        this.html;
+      }
+    },
+
+    /**
+     * 单独打印
+     */
+    async printData(rowData) {
+      const res = await this.batchPrint([rowData.row.id]);
+      const { code, data } = res.data;
+      if (code === 200) {
+        this.dialogVisible = true;
+        console.log('data :>> ', data);
+        this.html = '';
+        data.forEach(item => {
+          return (this.html += item.templateHtml);
+        });
+        this.html;
+      }
+    },
+
+    /**
+     * 调用打印机
+     */
+    printTemplate() {
+      const orderNodeList = document.querySelectorAll('.el-dialog__body>div>div>div');
+      print(orderNodeList);
+    },
   },
 };
 </script>
-
-<style scoped lang='scss'>
-.fr-fo{
+<style lang="scss" scoped>
+// .el-tab-pane{
+//   margin-top: -20px;
+// }
+:deep(.el-dialog) {
+  width: fit-content !important;
+}
+.el-input__inner {
+  font-weight: normal;
+}
+:deep(.el-pager li.is-active) {
+  font-weight: normal !important;
+}
+.el-input {
+  margin-left: 8px;
+}
+.el-form {
   width: 100%;
   display: flex;
   justify-content: space-between;
 }
-.el-btn{
-  margin-right:0;
+.fo-rl {
+  .el-form-item {
+    margin-right: 10px !important;
+  }
+}
+.fo-btn {
+  margin-right: 0;
+}
+:deep(.el-form-item__label) {
+  padding: 0;
 }
 </style>
diff --git a/src/views/warehouse/warehouseRetentionRecord/warehouseRetentionRecord.vue b/src/views/warehouse/warehouseRetentionRecord/warehouseRetentionRecord.vue
index a58b2d80..9314b706 100644
--- a/src/views/warehouse/warehouseRetentionRecord/warehouseRetentionRecord.vue
+++ b/src/views/warehouse/warehouseRetentionRecord/warehouseRetentionRecord.vue
@@ -1,267 +1,386 @@
 <template>
-  <basic-container>
-    
-      <!-- <el-row> -->
-        <!-- <div class="avue-crud__header"> -->
-          <!-- 头部左侧按钮模块 -->
-          <!-- <div class="avue-crud__left">
-            <el-button type="danger" icon="el-icon-bottom" @click="handleExportInfo" plain
-              >导出 -->
-            <!-- </el-button>
-          </div>
-        </div> -->
-      <!-- </el-row> -->
-    <avue-crud :option="option"
-               v-model:search="search"
-               v-model:page="page"
-               v-model="form"
-               :table-loading="loading"
-               :data="data"
-               :permission="permissionList"
-               :before-open="beforeOpen"
-               ref="crud"
-               @row-update="rowUpdate"
-               @row-save="rowSave"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="refreshChange"
-               @on-load="onLoad">
-      <template #menu-left>
-        <el-button type="danger"
-                   icon="el-icon-delete"
-                   plain
-                   v-if="permission.warehouseRetentionRecord_delete"
-                   @click="handleDelete">删 除
-        </el-button>
-<!--        <el-button type="warning"-->
-<!--                   plain-->
-<!--                   icon="el-icon-download"-->
-<!--                   @click="handleExport">导 出-->
-<!--        </el-button>-->
-      </template>
-    </avue-crud>
-  </basic-container>
-</template>
+  <div class="maxContent">
+    <!-- 搜索功能  -->
+    <div>
+      <div class="SoInput" v-show="searchSo">
+        <el-form :model="SoInfoData">
+          <el-form-item label="搜索框1:">
+            <el-input v-model="SoInfoData.a" placeholder="请输入1" />
+          </el-form-item>
+          <el-form-item label="搜索框2:">
+            <el-input v-model="SoInfoData.b" placeholder="请输入2" />
+          </el-form-item>
+          <el-form-item label="搜索框3:">
+            <el-input v-model="SoInfoData.c" placeholder="请输入3" />
+          </el-form-item>
+          <el-form-item label="搜索框4:">
+            <el-input v-model="SoInfoData.d" placeholder="请输入4" />
+          </el-form-item>
+        </el-form>
+        <div class="SoBtn">
+          <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+        </div>
+      </div>
+      <!-- 查询按钮 -->
+      <!-- 头部右侧按钮模块 -->
+      <div class="avue-crud__right">
+        <el-button icon="el-icon-refresh" @click="Refresh" circle></el-button>
+        <el-button icon="el-icon-search" @click="searchSo = !searchSo" circle></el-button>
+      </div>
+      <!-- 表格开始 -->
+      <el-table
+        v-loading="loading"
+        element-loading-text="数据正在更新中..."
+        :data="ElData"
+        row-key="name"
+        border
+        height="600"
+        style="width: 100%"
+        ref="tableRef"
+        @select-all="selectAll"
+        @select="selectChange"
+      >
+        <el-table-column type="selection" width="55" fixed />
+        <el-table-column type="index" fixed width="50" height="100" label="#" align="center" />
 
-<script>
-  import {getList, getDetail, add, update, remove,$_RetentionWarehouseRetentionRecord} from "@/api/warehouse/warehouseRetentionRecord";
-  import option from "@/option/warehouse/warehouseRetentionRecord";
-  import {mapGetters} from "vuex";
-  import {exportBlob} from "@/api/common";
-  import {getToken} from '@/utils/auth';
-  import {downloadXls} from "@/utils/util";
-  import {dateNow} from "@/utils/date";
-  import NProgress from 'nprogress';
-  import 'nprogress/nprogress.css';
+        <!-- 
+            Type ===1 普通文本
+            Type ===2 图片显示
+            Type ===3 操作功能
+            label:    标题
+            width:    宽度
+            prop:     数据字段
+           -->
 
-  export default {
-    data() {
-      return {
-        form: {},
-        query: {},
-        search: {},
-        loading: true,
-        page: {
-          pageSize: 30,
-          currentPage: 1,
-          total: 0
-        },
-        selectionList: [],
-        option: option,
-        data: []
-      };
-    },
-    computed: {
-      ...mapGetters(["permission"]),
-      permissionList() {
-        return {
-          addBtn: this.validData(this.permission.warehouseRetentionRecord_add, false),
-          viewBtn: this.validData(this.permission.warehouseRetentionRecord_view, false),
-          delBtn: this.validData(this.permission.warehouseRetentionRecord_delete, false),
-          editBtn: this.validData(this.permission.warehouseRetentionRecord_edit, false)
-        };
-      },
-      ids() {
-        let ids = [];
-        this.selectionList.forEach(ele => {
-          ids.push(ele.id);
-        });
-        return ids.join(",");
-      }
-    },
-    methods: {
-      rowSave(row, done, loading) {
-        add(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          loading();
-          window.console.log(error);
-        });
-      },
-      rowUpdate(row, index, done, loading) {
-        update(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          loading();
-          console.log(error);
-        });
-      },
-      rowDel(row) {
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(row.id);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-          });
-      },
-      handleDelete() {
-        if (this.selectionList.length === 0) {
-          this.$message.warning("请选择至少一条数据");
-          return;
-        }
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(this.ids);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-            this.$refs.crud.toggleSelection();
-          });
-      },
-      // handleExport() {
-      //   let downloadUrl = `/retentionRecord/warehouseRetentionRecord/export-warehouseRetentionRecord?${this.website.tokenHeader}=${getToken()}`;
-      //   const {
-      //   } = this.query;
-      //   let values = {
-      //   };
-      //   this.$confirm("是否导出数据?", "提示", {
-      //     confirmButtonText: "确定",
-      //     cancelButtonText: "取消",
-      //     type: "warning"
-      //   }).then(() => {
-      //     NProgress.start();
-      //     exportBlob(downloadUrl, values).then(res => {
-      //       downloadXls(res.data, `滞留记录${dateNow()}.xlsx`);
-      //       NProgress.done();
-      //     })
-      //   });
-      // },
-     // 导出功能
-    handleExportInfo() {
-      let row = {};
-      if (!!this.ids) {
-        row.ids = this.ids;
-      } else {
-        row.ids = '';
-      }
-      $_RetentionWarehouseRetentionRecord(row).then(res => {
-        downloadXls(res.data, '滞留包条数据.xlsx');
-      });
-    },
+        <el-table-column
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :fixed="item.fixed"
+          align="center"
+          v-for="(item, index) in menuData"
+          :key="item.label"
+        >
+          <el-table-column
+            :prop="item.prop"
+            :label="item.label"
+            :width="item.width"
+            :fixed="item.fixed"
+            align="center"
+          >
+            <template #header>
+              <!-- <el-input
+                @change="InputSo(item)"
+                clearable
+                v-if="item.type == 4"
+                v-model="item.values"
+                :placeholder="`请输入${item.label}`"
+              /> -->
+            </template>
 
-      beforeOpen(done, type) {
-        if (["edit", "view"].includes(type)) {
-          getDetail(this.form.id).then(res => {
-            this.form = res.data.data;
-          });
-        }
-        done();
-      },
-      searchReset() {
-        this.query = {};
-        this.onLoad(this.page);
-      },
-      searchChange(params, done) {
-        this.query = params;
-        this.page.currentPage = 1;
-        this.onLoad(this.page, params);
-        done();
-      },
-      selectionChange(list) {
-        this.selectionList = list;
-      },
-      selectionClear() {
-        this.selectionList = [];
-        this.$refs.crud.toggleSelection();
-      },
-      currentChange(currentPage){
-        this.page.currentPage = currentPage;
-      },
-      sizeChange(pageSize){
-        this.page.pageSize = pageSize;
-      },
-      refreshChange() {
-        this.onLoad(this.page, this.query);
-      },
-      onLoad(page, params = {}) {
-        this.loading = true;
+            <template #default="props">
+              <img :src="props.row[item.prop]" class="el-Img" v-if="item.type === 2" />
 
-        const {
-        } = this.query;
-
-        let values = {
-        };
+              <div :class="ElBtnClass" v-if="item.type == 3">
+                <el-button
+                  :link="ElButtonS[0].link"
+                  :class="ElButtonS[0].class"
+                  :auto-insert-space="ElButtonS[0].space"
+                  :size="ElButtonS[0].size"
+                  :icon="ElButtonS[0].icon"
+                  @click="ViewEvent(props.row)"
+                  >详情</el-button
+                >
+              </div>
+              <span v-if="item.type == 6">{{
+                props.row[item.prop] == 1
+                  ? '装车滞留'
+                  : props.row[item.prop] == 2
+                  ? '配送滞留'
+                  : props.row[item.prop] == 3
+                  ? '出库滞留滞留'
+                  : '/'
+              }}</span>
+              <span v-if="item.type == 1">{{
+                props.row[item.prop] ? props.row[item.prop] : '/'
+              }}</span>
+            </template>
+          </el-table-column>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 表格翻页功能 -->
+    <div class="demo-pagination-block TCdemo-pagination-block">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="pageList"
+        :disabled="disabled"
+        :background="background"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="PageSizeChange"
+        @current-change="SizeChange"
+      />
+    </div>
+    <!-- 弹窗详情 -->
+    <el-dialog v-model="PopupDetails" title="详情数据展示" width="70%" :before-close="handleClose">
+      <el-tabs type="border-card" class="demo-tabs">
+        <el-tab-pane v-for="item in Tabs" :key="item.name">
+          <template #label>
+            <span class="custom-tabs-label">
+              <el-icon><component :is="item.icon" /></el-icon>
+              <span>{{ item.label }}</span>
+            </span>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button>Cancel</el-button>
+          <el-button type="primary"> Confirm </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
 
-        getList(page.currentPage, page.pageSize, values).then(res => {
-          const data = res.data.data;
-          this.page.total = data.total;
-          this.data = data.records;
-          this.loading = false;
-          this.selectionClear();
-        });
-      }
-    }
+<script setup>
+import { ref, reactive, onMounted, computed } from 'vue';
+import { $_warehouseRetentionRecordPage } from '@/api/warehouse/warehouseRetentionRecord.js';
+import { ElMessage } from 'element-plus';
+const SoInfoData = ref({}); //搜索框参数
+const searchSo = ref(false); //搜索框
+const ElData = ref([]); //表格的值
+const currentPage = ref(1); // 默认页码
+const pageSize = ref(20); // 默认每一页几条
+const pageList = ref([5, 10, 50, 100, 200]); // 选择每页显示多少条
+const background = ref(true); // 是否开启背景颜色
+const disabled = ref(false); // 是否禁止使用页码功能
+const total = ref(10); //页码总数
+const loading = ref(false); //表格加载Load
+const PopupDetails = ref(false); //弹窗详情是否展示
+const Tabs = ref([
+  // 标题栏
+  { label: '处理中', name: 0, icon: 'Monitor' },
+  { label: '理赔金额未出', name: 1, icon: 'Coin' },
+  { label: '处理完毕', name: 2, icon: 'Check' },
+  { label: '完结', name: 3, icon: 'Reading' },
+  { label: '仲裁中', name: 4, icon: 'List' },
+  { label: '全部', name: 5, icon: 'Notification' },
+]);
+// 菜单表头
+const menuData = ref([
+  {
+    prop: 'retentionCarNo',
+    label: '滞留车次号',
+    type: 4,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    search: true,
+    head: true,
+  },
+  {
+    prop: 'retentionType',
+    label: '滞留类型',
+    type: 6,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    search: true,
+    head: true,
+  },
+  {
+    prop: 'assembleCarPersonName',
+    label: '装车人名称',
+    type: 4,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    search: false,
+    head: true,
+  },
+  {
+    prop: 'retentionRemarks',
+    label: '备注',
+    type: 4,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    search: false,
+    head: true,
+  },
+  {
+    prop: '',
+    label: '预留1',
+    type: 4,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    search: false,
+    head: true,
+  },
+  {
+    prop: '',
+    label: '预留2',
+    type: 4,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    search: false,
+    head: true,
+  },
+  {
+    prop: '',
+    label: '预留3',
+    type: 4,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    search: false,
+    head: true,
+  },
+  {
+    prop: '',
+    label: '预留4',
+    type: 4,
+    values: '',
+    width: '150',
+    checkarr: [],
+    fixed: false,
+    search: false,
+    head: true,
+  },
+  {
+    prop: '',
+    label: '操作',
+    type: 3,
+    values: '',
+    width: '130',
+    checkarr: [],
+    fixed: 'right',
+    search: false,
+    head: true,
+  },
+]); //表头结构
+// 按钮配置
+const ElButtonS = ref([
+  // 1.link    切换按钮样式(文本模式-false ,按钮模式-tre)
+  // 2.class   按钮样式名(用于切换按钮样式)
+  // 3.space   是否开启按钮文子直接间距(true开启 ,false关闭)
+  // 4.size    按钮尺寸默认小尺寸('large'| 'default'| 'small')
+  // 5.icon    按钮图标
+  // 6.table   按钮名称
+  {
+    link: false,
+    class: 'el-btn-view',
+    space: true,
+    size: 'small',
+    icon: 'el-icon-view',
+    table: '详情',
+  },
+]);
+// 页面初始化请求
+function onLoad() {
+  loading.value = true; //开启表格加载
+  let Data = {
+    current: currentPage.value, //页码
+    size: pageSize.value, //条数
   };
+  $_warehouseRetentionRecordPage(Data).then(res => {
+    console.log(res, '滞留初始化页面获取到的值');
+    ElData.value = res.data.data.records;
+    total.value = res.data.data.total; //数据总条数
+    loading.value = false; //关闭表格加载
+  });
+}
+// 调用页面初始化获取数据
+onLoad();
+const InputSo = val => {
+  console.log(val);
+};
+// 表格筛选
+const selectChange = () => {
+  console.log('触发了选择');
+};
+// 表格筛选
+const selectAll = () => {
+  console.log('触发了选择');
+};
+// 重置搜索表单
+const searchReset = () => {
+  SoInfoData.value = {};
+};
+// 点击详情按钮
+const ViewEvent = val => {
+  console.log(val);
+  PopupDetails.value = true;
+};
+// 关闭弹窗关闭回调
+const handleClose = () => {
+  PopupDetails.value = false;
+};
+// 刷新页面按钮(初始化页面参数)
+const Refresh = () => {
+  onLoad(); //初始化表格数据
+};
 </script>
 
-<style lang='scss' scoped>
-:deep(.avue-crud) {
-  display: flex;
+<style lang="scss" scoped>
+.maxContent {
+  width: 100%;
+  box-sizing: border-box;
   height: 100%;
+  display: flex;
   flex-direction: column;
 }
-:deep(.el-card__body) {
-  height: 100%;
+.SoInput {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px;
+  margin-top: 10px;
+  form {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 5px;
+    :deep(.el-form-item) {
+      margin-bottom: 0;
+    }
+  }
+  .SoBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
-:deep(.el-card) {
-  height: 100%;
+.avue-crud__right {
+  margin-top: 5px;
   display: flex;
-  flex-direction: column;
+  justify-content: flex-end;
+  margin-bottom: 5px;
+  padding: 0 10px;
 }
-.el-fy {
+:deep(.cell) {
+  padding: 0;
+}
+.demo-pagination-block {
   flex: 1;
   display: flex;
- align-items: flex-end;
+  align-items: flex-end;
+  margin-bottom: 8px;
+  justify-content: flex-end;
+  margin-right: 6px;
+}
+:deep(.el-table-column--selection) {
+  text-align: center;
 }
 </style>