item-management-vant/src/views/home/todo.vue

<template>
  <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()">
        <van-list v-model:loading="loading" :finished="personalFinished" finished-text="没有待办了" @load="personalTodoList()">
          <div class="card" v-for="item in personalListData" :key="item.id" @click="toPersonalDetail(item)">
            <h3>
              <van-icon name="link-o" />
              &nbsp;{{ item.orderId }}
            </h3>
            <p class="projectName">
              <van-icon name="location-o" />
              &nbsp;{{ item.location }}
            </p>
            <p>
              <van-icon name="contact-o" />
              &nbsp;{{ item.clientName }}-{{ item.clientSubName}}
            </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="major">
      <van-search v-model="majorListQuery.keyword" placeholder="请输入搜索关键词" @search="onMajorSearch()" />
      <van-pull-refresh v-model="loading" @refresh="onMajorRefresh()">
        <van-list v-model:loading="loading" :finished="majorFinished" 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">
      <van-search v-model="assetsListQuery.keyWord" placeholder="请输入搜索关键词" @search="onAssetsSearch()" />
      <van-pull-refresh v-model="loading" @refresh="onAssetsRefresh()">
        <van-list v-model:loading="loading" :finished="assetsFinished" 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,
      // 加载完成状态
      personalFinished: false,
      majorFinished: false,
      assetsFinished: false,
      personalListQuery: {
        // 当前页数
        current: 1,
        // 查询关键字
        keyword: null,
      },
      majorListQuery: {
        // 当前页数
        current: 1,
        // 查询关键字
        keyword: null,
      },
      assetsListQuery: {
        // 当前页数
        current: 1,
        // 查询关键字
        keyWord: null,
      },
    };
  },
  created() {
    this.personalFinished = false;
    this.majorFinished = false;
    this.assetsFinished = false;
    this.personalTodoList();
  },
  methods: {
    // 监听标签页改变
    tabChange() {
      switch (this.activeName) {
        case 'personal':
          break;
        case 'major':
          break;
        case 'assets':
          break;
        default:
          break;
      }
    },
    // 个贷待办列表刷新
    onPersonalRefresh() {
      this.personalListQuery.current = 1;
      this.personalFinished = false;
      this.personalListData = [];
      this.personalTodoList();
    },
    // 个贷待办列表关键字搜索
    onPersonalSearch() {
      this.personalListQuery.current = 1;
      this.personalFinished = false;
      this.personalListData = [];
      this.personalTodoList();
    },
    // 获取个贷待办
    personalTodoList() {
      this.loading = true;
      getPersonalTodoList(this.personalListQuery).then((res) => {
        if (res.code == 200) {
          if (res.data.records) {
            this.personalListData = this.personalListData.concat(res.data.records);
          }
          // 判断是否还有下一页
          if (res.data.pages > this.personalListQuery.current) {
            // 服务端返回的总页数大于当前页数, 将当前页数+1
            this.personalListQuery.current++;
          } else {
            // 反之停止加载
            this.personalFinished = true;
          }
        }
        this.loading = false;
      });
    },
    // 大中型待办列表刷新
    onMajorRefresh() {
      this.majorListQuery.current = 1;
      this.majorFinished = false;
      this.majorListData = [];
      this.majorTodoList();
    },
    // 大中型待办列表关键字搜索
    onMajorSearch() {
      this.majorListQuery.current = 1;
      this.majorFinished = 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.majorFinished = true;
          }
        }
        this.loading = false;
      });
    },
    // 资产待办列表刷新
    onAssetsRefresh() {
      this.assetsListQuery.current = 1;
      this.assetsFinished = false;
      this.assetsListData = [];
      this.assetsTodoList();
    },
    // 资产待办列表关键字搜索
    onAssetsSearch() {
      this.assetsListQuery.current = 1;
      this.assetsFinished = 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.assetsFinished = true;
          }
        }
        this.loading = false;
      });
    },
    // 个贷前往待办详情页
    toPersonalDetail(row) {
      const nodeCode = row.nodeCode;
      switch (nodeCode) {
        case 'REPORT_OUT_APPLY':
        case 'LETTER_OUT_APPLY':
        case 'REPORT_OUT_DEPARTMENT_CHECK':
        case 'LETTER_OUT_DEPARTMENT_CHECK':
        case 'BUSINESS_ARCHIVING':
        case 'STATEMENT_IN':
        case 'STATEMENT_OUT':
        case 'REPORT_IN':
        case 'REPORT_OUT':
        case 'LETTER_IN':
        case 'LETTER_OUT':
          showDialog({
            message: '当前节点需要业务操作, 请在电脑端处理节点',
          }).then(() => {
            // on close
          });
          break;
        default:
          this.$router.push(`/index/personal/todoDetail?id=${row.businessId}&currentNodeCode=${row.nodeCode}&orderId=${row.orderId}&doWorkflow=${true}&isOnline=${row.isOnline}&handlerName=${row.handlerName}&nodeTime=${row.nodeCreated}`);
          break;
      }
    },
  },
};
</script>

<style scoped>
.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin: 10px;
}

.productionNo {
  width: 100%;
  font-size: 14px;
}

.projectName {
  width: 100%;
  /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; */
}
</style>