1.大中型待办与资产待办页面开发

src/api/assets.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request'
+
+// 获取资产待办任务
+export function getAssetsTodoList(params) {
+    return request.get('assets/selectPage', {params: params})
+}

src/views/home/todo.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-tabs v-model:active="activeName">
+  <van-tabs v-model:active="activeName" @change="tabChange()">
     <van-tab title="个贷待办" name="personal">
       <van-search v-model="personalListQuery.keyword" placeholder="请输入搜索关键词" @search="onPersonalSearch()" />
       <van-pull-refresh v-model="loading" @refresh="onPersonalRefresh()">
@@ -28,22 +28,82 @@
       <van-back-top right="10vw" bottom="10vh" />
     </van-tab>
     <van-tab title="大中型待办" name="major">
-      <h1>大中型待办</h1>
+      <van-search v-model="majorListQuery.keyword" placeholder="请输入搜索关键词" @search="onMajorSearch()" />
+      <van-pull-refresh v-model="loading" @refresh="onMajorRefresh()">
+        <van-list v-model:loading="loading" :finished="finished" finished-text="没有待办了" @load="majorTodoList()">
+          <div class="card" v-for="item in majorListData" :key="item.id">
+            <h3>
+              <van-icon name="link-o" />
+              &nbsp;{{ item.orderId }}
+            </h3>
+            <p class="productionNo" v-if="item.statementNo || item.reportNo">
+              <van-icon name="coupon-o" />
+              &nbsp;
+              {{ item.statementNo }}
+              <!-- 产品号都不为空才显示中间的分割空格, 以保持页面间距统一 -->
+              <span v-if="item.statementNo && item.reportNo">&nbsp;&nbsp;</span>
+              {{ item.reportNo }}
+            </p>
+            <p class="projectName">
+              <van-icon name="location-o" />
+              &nbsp;{{ item.productionName == null ? item.orderName : item.productionName }}
+            </p>
+            <p>
+              <van-tag type="primary" size="medium">{{ item.nodeName }}</van-tag>&nbsp;
+              <van-tag type="success" size="medium">{{ item.clientManager }}</van-tag>&nbsp;
+              <van-tag color="#969799" size="medium">{{ item.created }}</van-tag>
+            </p>
+          </div>
+        </van-list>
+      </van-pull-refresh>
+      <van-back-top right="10vw" bottom="10vh" />
     </van-tab>
     <van-tab title="资产待办" name="assets">
-      <h1>资产待办</h1>
+      <van-search v-model="assetsListQuery.keyWord" placeholder="请输入搜索关键词" @search="onAssetsSearch()" />
+      <van-pull-refresh v-model="loading" @refresh="onAssetsRefresh()">
+        <van-list v-model:loading="loading" :finished="finished" finished-text="没有待办了" @load="assetsTodoList()">
+          <div class="card" v-for="item in assetsListData" :key="item.id">
+            <h3>
+              <van-icon name="link-o" />
+              &nbsp;{{ item.orderId }}
+            </h3>
+            <p class="productionNo" v-if="item.statementNo || item.reportNo">
+              <van-icon name="coupon-o" />
+              &nbsp;
+              {{ item.statementNo }}
+              <!-- 产品号都不为空才显示中间的分割空格, 以保持页面间距统一 -->
+              <span v-if="item.statementNo && item.reportNo">&nbsp;&nbsp;</span>
+              {{ item.reportNo }}
+            </p>
+            <p class="projectName">
+              <van-icon name="location-o" />
+              &nbsp;{{ item.reportName || item.statementName || item.name }}
+            </p>
+            <p>
+              <van-tag type="primary" size="medium">{{ item.currentNodeName }}</van-tag>&nbsp;
+              <van-tag type="success" size="medium">{{ item.clientManagerName }}</van-tag>&nbsp;
+              <van-tag color="#969799" size="medium">{{ item.created }}</van-tag>
+            </p>
+          </div>
+        </van-list>
+      </van-pull-refresh>
+      <van-back-top right="10vw" bottom="10vh" />
     </van-tab>
   </van-tabs>
 </template>
 
 <script>
 import { getPersonalTodoList } from '@/api/personal';
+import { getMajorTodoList } from '@/api/major';
+import { getAssetsTodoList } from '@/api/assets';
 
 export default {
   data() {
     return {
       activeName: 'personal',
       personalListData: [],
+      majorListData: [],
+      assetsListData: [],
       // 加载状态
       loading: false,
       // 加载完成状态
@@ -54,12 +114,40 @@ export default {
         // 查询关键字
         keyword: null,
       },
+      majorListQuery: {
+        // 当前页数
+        current: 1,
+        // 查询关键字
+        keyword: null,
+      },
+      assetsListQuery: {
+        // 当前页数
+        current: 1,
+        // 查询关键字
+        keyWord: null,
+      },
     };
   },
   created() {
     this.personalTodoList();
   },
   methods: {
+    // 监听标签页改变
+    tabChange() {
+      switch (this.activeName) {
+        case 'personal':
+          this.personalTodoList();
+          break;
+        case 'major':
+          this.majorTodoList();
+          break;
+        case 'assets':
+          this.assetsTodoList();
+          break;
+        default:
+          break;
+      }
+    },
     // 个贷待办列表刷新
     onPersonalRefresh() {
       this.personalListQuery.current = 1;
@@ -83,10 +171,82 @@ export default {
             this.personalListData = this.personalListData.concat(res.data.records);
           }
           // 判断是否还有下一页
-          if (res.data.pages > this.personalListQuery.current) { // 服务端返回的总页数大于当前页数, 将当前页数+1
+          if (res.data.pages > this.personalListQuery.current) {
+            // 服务端返回的总页数大于当前页数, 将当前页数+1
             this.personalListQuery.current++;
-          }else { // 反之停止加载
-            this.finished = true; 
+          } else {
+            // 反之停止加载
+            this.finished = true;
+          }
+        }
+        this.loading = false;
+      });
+    },
+    // 大中型待办列表刷新
+    onMajorRefresh() {
+      this.majorListQuery.current = 1;
+      this.finished = false;
+      this.majorListData = [];
+      this.majorTodoList();
+    },
+    // 大中型待办列表关键字搜索
+    onMajorSearch() {
+      this.majorListQuery.current = 1;
+      this.finished = false;
+      this.majorListData = [];
+      this.majorTodoList();
+    },
+    // 获取大中型待办
+    majorTodoList() {
+      this.loading = true;
+      getMajorTodoList(this.majorListQuery).then((res) => {
+        if (res.code == 200) {
+          if (res.data.records) {
+            this.majorListData = this.majorListData.concat(res.data.records);
+          }
+          // 判断是否还有下一页
+          if (res.data.pages > this.majorListQuery.current) {
+            // 服务端返回的总页数大于当前页数, 将当前页数+1
+            this.majorListQuery.current++;
+          } else {
+            // 反之停止加载
+            this.finished = true;
+          }
+        }
+        this.loading = false;
+      });
+    },
+    // 资产待办列表刷新
+    onAssetsRefresh() {
+      this.assetsListQuery.current = 1;
+      this.finished = false;
+      this.assetsListData = [];
+      this.assetsTodoList();
+    },
+    // 资产待办列表关键字搜索
+    onAssetsSearch() {
+      this.assetsListQuery.current = 1;
+      this.finished = false;
+      this.assetsListData = [];
+      this.assetsTodoList();
+    },
+    // 获取资产待办
+    assetsTodoList() {
+      this.loading = true;
+      // 查询待办必须要设置这个参数
+      this.assetsListQuery.handlerId = 1;
+      getAssetsTodoList(this.assetsListQuery).then((res) => {
+        if (res.code == 200) {
+          if (res.data.records) {
+            this.assetsListData = this.assetsListData.concat(res.data.records);
+          }
+          // 判断是否还有下一页
+          if (res.data.pages > this.assetsListQuery.current) {
+            // 服务端返回的总页数大于当前页数, 将当前页数+1
+            this.assetsListQuery.current++;
+          } else {
+            // 反之停止加载
+            this.finished = true;
           }
         }
         this.loading = false;
@@ -105,10 +265,15 @@ export default {
   margin: 10px;
 }
 
+.productionNo {
+  width: 100%;
+  font-size: 14px;
+}
+
 .projectName {
   width: 100%;
-  overflow: hidden;
+  /* overflow: hidden;
   white-space: nowrap;
-  text-overflow: ellipsis;
+  text-overflow: ellipsis; */
 }
 </style>