待办页面更新

src/views/toBeDone/toBeDone.vue

@@ -13,13 +13,14 @@
     title-active-color="#36a7f3"
   >
     <van-tab title="待处理">
-      <van-list
-          v-model:loading="loading"
-          :finished="finished"
+      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+        <van-list
+          v-model:loading="loading1"
+          :finished="finished1"
           finished-text="没有更多了"
           @load="onLoad1"
         >
-          <van-swipe-cell v-for="item in toBeDone.toBeDoneList" :key="item.id">
+          <van-swipe-cell v-for="item in toBeDoneList" :key="item.id">
             <div class="list-item" @click="goToBeDoneinfo(item)">
               <van-col span="6" class="list-item-left">
                 <div>
@@ -67,166 +68,114 @@
             </div>
           </van-swipe-cell>
         </van-list>
-      <div class="list1">
-        
-        <!-- <van-row
-          class="list-item"
-          v-for="item in toBeDone.toBeDoneList"
-          :key="item.id"
-          @click="goToBeDoneinfo(item)"
-        >
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">{{ item.createDate.split(" ")[0] }}</p>
-              <p style="color: #a3a3a3">{{ item.createDate.split(" ")[1] }}</p>
-            </div>
-            <p
-              v-if="item.assignState == 1"
-              style="color: red; margin-top: 10px"
-            >
-              已发起
-            </p>
-            <p
-              v-else-if="item.assignState == 2"
-              style="color: red; margin-top: 10px"
-            >
-              待办中
-            </p>
-            <p
-              v-if="item.assignState == 5"
-              style="color: red; margin-top: 10px"
-            >
-              已超期
-            </p>
-          </van-col>
-          <van-col
-            span="18"
-            style="border-left: 1px solid #e3e3e3"
-            class="list-item-right"
-          >
-            <van-row>
-              <van-col span="24" style="height: 50px; overflow: hidden">
-                <span v-html="item.problemContent"></span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">{{ item.areaSelectName }}</van-col>
-              <van-col span="8">{{ item.assignTypeName }}</van-col>
-            </van-row>
-          </van-col>
-        </van-row> -->
-      </div>
+      </van-pull-refresh>
     </van-tab>
     <van-tab title="已处理">
-      <div class="list1">
+      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
         <van-list
-          v-model:loading="loading"
-          :finished="finished"
+          v-model:loading="loading2"
+          :finished="finished2"
           finished-text="没有更多了"
           @load="onLoad2"
         >
-          <van-swipe-cell
-            v-for="item in toBeDone.toBeDoneList2"
-            :key="item.id"
-          >
-          <div class="list-item" @click="goToBeDoneinfo(item)">
-            <van-col span="6" class="list-item-left">
-              <div>
-                <p style="color: #a3a3a3">
-                  {{ item.createDate.split(" ")[0] }}
+          <van-swipe-cell v-for="item in toBeDoneList2" :key="item.id">
+            <div class="list-item" @click="goToBeDoneinfo(item)">
+              <van-col span="6" class="list-item-left">
+                <div>
+                  <p style="color: #a3a3a3">
+                    {{ item.createDate.split(" ")[0] }}
+                  </p>
+                  <p style="color: #a3a3a3">
+                    {{ item.createDate.split(" ")[1] }}
+                  </p>
+                </div>
+                <p
+                  v-if="item.assignState == 3"
+                  style="color: red; margin-top: 10px"
+                >
+                  已反馈
                 </p>
-                <p style="color: #a3a3a3">
-                  {{ item.createDate.split(" ")[1] }}
+                <p
+                  v-if="item.assignState == 4"
+                  style="color: red; margin-top: 10px"
+                >
+                  已归档
                 </p>
-              </div>
-              <p
-                v-if="item.assignState == 3"
-                style="color: red; margin-top: 10px"
-              >
-                已反馈
-              </p>
-              <p
-                v-if="item.assignState == 4"
-                style="color: red; margin-top: 10px"
+              </van-col>
+              <van-col
+                span="18"
+                style="border-left: 1px solid #e3e3e3"
+                class="list-item-right"
               >
-                已归档
-              </p>
-            </van-col>
-            <van-col
-              span="18"
-              style="border-left: 1px solid #e3e3e3"
-              class="list-item-right"
-            >
-              <van-row>
-                <van-col span="24" style="height: 50px; overflow: hidden">
-                  <span v-html="item.problemContent"></span>
-                </van-col>
-              </van-row>
-              <van-row justify="space-between">
-                <van-col span="12">{{ item.areaSelectName }}</van-col>
-                <van-col span="8">{{ item.assignTypeName }}</van-col>
-              </van-row>
-            </van-col>
-          </div>
+                <van-row>
+                  <van-col span="24" style="height: 50px; overflow: hidden">
+                    <span v-html="item.problemContent"></span>
+                  </van-col>
+                </van-row>
+                <van-row justify="space-between">
+                  <van-col span="12">{{ item.areaSelectName }}</van-col>
+                  <van-col span="8">{{ item.assignTypeName }}</van-col>
+                </van-row>
+              </van-col>
+            </div>
           </van-swipe-cell>
         </van-list>
-        <van-row
-          class="list-item"
-          v-for="item in toBeDone.toBeDoneList2"
-          :key="item.id"
-          @click="goToBeDoneinfo(item)"
-        >
-        </van-row>
-      </div>
+      </van-pull-refresh>
     </van-tab>
   </van-tabs>
 </template>
 
 <script>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import ToBeDone from "@/api/toBeDone/toBeDone";
 export default {
   setup() {
-    const toBeDone = reactive({
-      //未处理
-      toBeDoneList: [],
-      //已处理
-      toBeDoneList2: [],
-    });
+    const toBeDoneList = ref([]);
+    const toBeDoneList2 = ref([]);
     const loading = ref(false);
     const finished = ref(false);
-    const active = ref(0);
-    let workDBList = ref([]);
+    let  index = 0;
     //获取待办列表
     const onLoad1 = () => {
       // 异步更新数据
-      new ToBeDone().list({}).then((res) => {
-        workDBList.value.push(...res.records);
-        toBeDone.toBeDoneList = workDBList;
-        // 加载状态结束
-        loading.value = false;
-        // 数据全部加载完成
-        if (list.value.length >= 40) {
-          finished.value = true;
-        }
-      });
-      new ToBeDone().list2({}).then((res) => {
-        toBeDone.toBeDoneList2.push(...res.records);
-      });
+      new ToBeDone()
+        .list({
+          current: index + 1,
+          size: 11,
+        })
+        .then(({ records, pages }) => {
+          toBeDoneList.value = toBeDoneList.value.concat(records);
+          // 加载状态结束
+          loading.value = false;
+          // 数据全部加载完成
+          if (index + 1 >= pages) {
+            finished.value = true;
+          }
+          index++
+        });
     };
+    const loading2 = ref(false);
+    const finished2 = ref(false);
+    let index2 = 0;
     //获取待办列表
     const onLoad2 = () => {
       // 异步更新数据
-      new ToBeDone().list2({}).then((res) => {
-        toBeDone.toBeDoneList2.push(...res.records);
-        // 加载状态结束
-        loading.value = false;
-        // 数据全部加载完成
-        if (list.value.length >= 40) {
-          finished.value = true;
-        }
-      });
+      new ToBeDone()
+        .list2({
+          current: index + 1,
+          size: 11,
+        })
+        .then(({ records, pages }) => {
+          toBeDoneList2.value = toBeDoneList2.value.concat(records);
+          // 加载状态结束
+          loading2.value = false;
+          // 数据全部加载完成
+          if (index2 + 1 >= pages) {
+            finished2.value = true;
+          }
+          index2++;
+        });
     };
 
     //跳转
@@ -252,12 +201,16 @@ export default {
     };
     return {
       onClickLeft,
-      toBeDone,
+      toBeDoneList,
+      toBeDoneList2,
       goToBeDoneinfo,
-      active,
       selectColor,
       onLoad1,
       onLoad2,
+      loading,
+      finished,
+      loading2,
+      finished2,
     };
   },
 };