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/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/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>