修改了延期审批页面增加了页签

src/views/danger/delayApproval/index.vue

 <template>
   <div>
-    <LHeader :text="text"></LHeader>
+    <van-sticky offset-top="0">
+      <LHeader :text="text"></LHeader>
+    </van-sticky>
     <van-sticky offset-top="1.5rem">
       <van-search
         v-model="searchValue"
@@ -15,71 +17,69 @@
     </van-sticky>
     <!-- 内容列表 -->
     <!-- 接口对接4 START -->
-    <div class="con-list" @touchmove="showIndex = null">
-      <van-cell-group
-        inset
-        v-for="(item, index) in messageList"
-        :key="index"
-        @click="touchstart(index, item)"
-      >
-        <van-row gutter="">
-          <van-col span="6">隐患编号：</van-col>
-          <van-col span="18">{{ item.businessId }}</van-col>
-        </van-row>
-        <van-row gutter="">
-          <van-col span="6">所属项目：</van-col>
-          <van-col span="18">{{ item.proId }}</van-col>
-        </van-row>
-        <van-row gutter="">
-          <van-col span="6">隐患级别：</van-col>
-          <van-col span="18">{{ item.hdLev | dangerText }}</van-col>
-        </van-row>
-        <!-- <van-row gutter="">
-          <van-col span="6">发现时间：</van-col>
-          <van-col span="18">{{ item.hdDiscoveryTime }}</van-col>
-        </van-row> -->
-        <!-- *接口对接4 END -->
-
-        <!-- 长按显示遮罩层 -->
-        <van-overlay :show="showIndex == index">
-          <div class="wrapper" @click.stop="showIndex = null">
-            <van-button round type="primary" @click="goDetail(item)"
-              >详情</van-button
-            >
-            <van-button round type="info" @click="goConfirm(item)"
-              >审批</van-button
-            >
-          </div>
-        </van-overlay>
-      </van-cell-group>
-    </div>
-    <!-- 暂无数据 -->
-    <div
-      style="
-        width: 100%;
-        text-align: center;
-        font-size: 0.48rem;
-        position: fixed;
-        top: 30%;
+    <van-tabs
+      v-model="active"
+      @change="
+        getList;
+        showIndex = null;
       "
-      v-if="isHaveNews"
+      color="#2980f7"
+      animated
+      :sticky="true"
+      offset-top="3rem"
     >
-      暂无数据
-    </div>
-    <tab-bar :index="1"></tab-bar>
+      <van-tab v-for="(item, key) in tabs" :key="key" :title="item.title">
+        <div
+          class="con-list"
+          @touchmove="showIndex = null"
+          v-if="key == active"
+        >
+          <van-cell-group
+            inset
+            v-for="(item, index) in messageList"
+            :key="index"
+            @click="touchstart(index, item)"
+          >
+            <van-row gutter="">
+              <van-col span="6">隐患编号：</van-col>
+              <van-col span="18">{{ item.businessId }}</van-col>
+            </van-row>
+            <van-row gutter="">
+              <van-col span="6">所属项目：</van-col>
+              <van-col span="18">{{ item.proId }}</van-col>
+            </van-row>
+            <van-row gutter="">
+              <van-col span="6">隐患级别：</van-col>
+              <van-col span="18">{{ item.hdLev | dangerText }}</van-col>
+            </van-row>
+            <!-- 长按显示遮罩层 -->
+            <template v-if="active == 0">
+              <van-overlay :show="showIndex == index">
+                <div class="wrapper" @click.stop="showIndex = null">
+                  <!-- <van-button round type="primary" @click="goDetail(item)"
+                    >详情</van-button
+                  > -->
+                  <van-button round type="info" @click="goConfirm(item)"
+                    >审批
+                  </van-button>
+                </div>
+              </van-overlay>
+            </template>
+          </van-cell-group>
+        </div>
+      </van-tab>
+    </van-tabs>
   </div>
 </template>
 
 <script>
-import tabBar from "@/components/TabBar";
 import LHeader from "@/components/header.vue";
-import {getFun,postFun} from "@/service/table.js";
+import { getFun, postFun } from "@/service/table.js";
 import { delayList } from "@/service/danger";
 
 export default {
   components: {
     LHeader,
-    tabBar,
   },
   data() {
     return {
@@ -89,6 +89,17 @@ export default {
       messageList: [],
       Loop: "", // 定时器
       showIndex: null, // 是否显示遮罩层
+      active: 0,
+      tabs: [
+        {
+          title: "待审批",
+          api: "/delayApply/list",
+        },
+        {
+          title: "已审批",
+          api: "/delayApply/finishList",
+        },
+      ],
     };
   },
   created() {
@@ -104,9 +115,9 @@ export default {
         loadingType: "spinner",
         duration: 0,
       });
-      let formdata=new FormData();
-      formdata.append('select',select);
-      postFun('/delayApply/list',formdata)
+      let formdata = new FormData();
+      formdata.append("select", select);
+      postFun(this.tabs[this.active]["api"], formdata)
         .then((res) => {
           this.$toast.clear();
           this.messageList = res.rows;
@@ -122,7 +133,7 @@ export default {
       /*接口对接3 END*/
     },
     onSearch() {
-      this.getList(this.searchValue)
+      this.getList(this.searchValue);
     },
     touchstart(index, item) {
       if (this.showIndex != null) {
@@ -133,15 +144,15 @@ export default {
     },
 
     // 详情
-    goDetail(data) {
-      this.$router.push({
-        name: "normal-detail",
-        params: {
-          id: data.businessId,
-        },
-      });
-      this.showIndex = null;
-    },
+    // goDetail(data) {
+    //   this.$router.push({
+    //     name: "normal-detail",
+    //     params: {
+    //       id: data.businessId,
+    //     },
+    //   });
+    //   this.showIndex = null;
+    // },
     // 审批
     goConfirm(data) {
       this.$router.push({