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

<template>
  <van-tabs v-model:active="activeName" @change="tabChange()" :ellipsis="false">
    <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)">
            <div class="businessTitle">
              <van-icon name="link-o" />
              {{ item.orderId }}
            </div>
            <div class="projectName">
              <div class="locaiton">
                <van-icon name="location-o" />
                {{ item.location }}
              </div>
            </div>
            <div class="clientInfo">
              <van-icon name="contact-o" />
              {{ item.clientName }}-{{ item.clientSubName}}
            </div>
            <div class="otherInfo">
              <van-tag type="primary" size="medium" class="van-tag">{{ item.nodeName }}</van-tag>
              <van-tag type="success" size="medium" class="van-tag">{{ item.clientManager }}</van-tag>
              <van-tag color="#969799" size="medium" class="van-tag">{{ item.created }}</van-tag>
            </div>
          </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" @click="toMajorDetail(item)">
            <div class="businessTitle">
              <van-icon name="link-o" />
              {{ item.orderId }}
            </div>
            <div class="productionNo" v-if="item.statementNo || item.reportNo">
              <van-icon name="coupon-o" />
              {{ item.statementNo }}
              <!-- 产品号都不为空才显示中间的分割空格, 以保持页面间距统一 -->
              <span v-if="item.statementNo && item.reportNo">&nbsp;&nbsp;</span>
              {{ item.reportNo }}
            </div>
            <div class="projectName">
              <div>
                <van-icon name="location-o" />
                {{ item.productionName == null ? item.orderName : item.productionName }}
              </div>
            </div>
            <div class="otherInfo">
              <van-tag type="primary" size="medium" class="van-tag">{{ item.nodeName }}</van-tag>
              <van-tag type="success" size="medium" class="van-tag">{{ item.clientManager }}</van-tag>
              <van-tag color="#969799" size="medium" class="van-tag">{{ item.created }}</van-tag>
            </div>
          </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" @click="toAssetsDetail(item)">
            <div class="businessTitle">
              <van-icon name="link-o" />
              {{ item.orderId }}
            </div>
            <div class="productionNo" v-if="item.statementNo || item.reportNo">
              <van-icon name="coupon-o" />
              {{ item.statementNo }}
              <!-- 产品号都不为空才显示中间的分割空格, 以保持页面间距统一 -->
              <span v-if="item.statementNo && item.reportNo">&nbsp;&nbsp;</span>
              {{ item.reportNo }}
            </div>
            <div class="projectName">
              <div>
                <van-icon name="location-o" />
                {{ item.reportName || item.statementName || item.name }}
              </div>
            </div>
            <div class="otherInfo">
              <van-tag type="primary" size="medium" class="van-tag">{{ item.currentNodeName }}</van-tag>
              <van-tag type="success" size="medium" class="van-tag">{{ item.clientManagerName }}</van-tag>
              <van-tag color="#969799" size="medium" class="van-tag">{{ item.created }}</van-tag>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
      <van-back-top right="10vw" bottom="10vh" />
    </van-tab>
  </van-tabs>
</template>

<script>
import { showDialog } from 'vant';
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 {
            console.log(this.majorFinished)
            // 反之停止加载
            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;
      }
    },
    // 大中型前往待办详情页
    toMajorDetail(row) {
      let reportNo = row.reportNo;
      let statementNo = row.statementNo;
      const nodeCode = row.nodeCode;
      switch (nodeCode) {
        case 'REPORT_OUT_APPLY':
        case 'LETTER_OUT_APPLY':
        case 'REPORT_OUT_FINANCE_CHECK':
        case 'REPORT_OUT_DEPARTMENT_CHECK':
        case 'LETTER_OUT_FINANCE_CHECK':
        case 'LETTER_OUT_DEPARTMENT_CHECK':
        case 'BUSINESS_ARCHIVING':
        case 'STATEMENT_DELIVERY':
        case 'STATEMENT_IN':
        case 'STATEMENT_OUT':
        case 'REPORT_IN':
        case 'REPORT_OUT':
        case 'LETTER_IN':
        case 'LETTER_OUT':
        case 'LEADER_ALLOCATION':
          showDialog({
            message: '当前节点需要业务操作, 请在电脑端处理节点',
          }).then(() => {
            // on close
          });
          break;
        default:
          if (reportNo && statementNo) {
            this.$router.push(
              `/index/major/todoDetail?id=${row.businessId}&orderId=${row.orderId}&reportNo=${reportNo}&statementNo=${row.statementNo}&doWorkflow=${true}&currentNodeId=${
                row.currentNodeId
              }&currentNodeCode=${row.nodeCode}&taskCreated=${row.taskCreated}&projectName=${row.productionName == null ? row.orderName : row.productionName}&principal=${row.principal}`
            );
          } else if (!reportNo && statementNo) {
            this.$router.push(
              `/index/major/todoDetail?id=${row.businessId}&orderId=${row.orderId}&statementNo=${row.statementNo}&doWorkflow=${true}&currentNodeId=${row.currentNodeId}&currentNodeCode=${
                row.nodeCode
              }&taskCreated=${row.taskCreated}&projectName=${row.productionName == null ? row.orderName : row.productionName}&principal=${row.principal}`
            );
          } else if (reportNo && !statementNo) {
            this.$router.push(
              `/index/major/todoDetail?id=${row.businessId}&orderId=${row.orderId}&reportNo=${reportNo}&doWorkflow=${true}&currentNodeId=${row.currentNodeId}&currentNodeCode=${
                row.nodeCode
              }&taskCreated=${row.taskCreated}&projectName=${row.productionName == null ? row.orderName : row.productionName}&principal=${row.principal}`
            );
          } else {
            this.$router.push(
              `/index/major/todoDetail?id=${row.businessId}&orderId=${row.orderId}&doWorkflow=${true}&currentNodeId=${row.currentNodeId}&currentNodeCode=${row.nodeCode}&taskCreated=${
                row.taskCreated
              }&projectName=${row.productionName == null ? row.orderName : row.productionName}&principal=${row.principal}`
            );
          }
          break;
      }
    },
    // 资产前往待办详情页
    toAssetsDetail(row) {
      switch (row.currentNodeCode) {
        case 'REPORT_OUT_APPLY':
        case 'REPORT_OUT_DEPARTMENT_CHECK':
        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:
          if (row.statementNo && row.reportNo) {
            this.$router.push(
              `/index/assets/todoDetail?assetsId=${row.assetsId}&statementNo=${row.statementNo}&reportNo=${row.reportNo}&currentNodeCode=${row.currentNodeCode}&handlerName=${
                row.handlerName
              }&projectName=${row.reportName || row.statementName || row.name}`
            );
          } else if (row.statementNo && !row.reportNo) {
            this.$router.push(
              `/index/assets/todoDetail?assetsId=${row.assetsId}&statementNo=${row.statementNo}&currentNodeCode=${row.currentNodeCode}&handlerName=${row.handlerName}&projectName=${
                row.reportName || row.statementName || row.name
              }`
            );
          } else if (!row.statementNo && row.reportNo) {
            this.$router.push(
              `/index/assets/todoDetail?assetsId=${row.assetsId}&reportNo=${row.reportNo}&currentNodeCode=${row.currentNodeCode}&handlerName=${row.handlerName}&projectName=${
                row.reportName || row.statementName || row.name
              }`
            );
          } else {
            this.$router.push(
              `/index/assets/todoDetail?assetsId=${row.assetsId}&currentNodeCode=${row.currentNodeCode}&handlerName=${row.handlerName}&projectName=${row.reportName || row.statementName || row.name}`
            );
          }
          break;
      }
    },
  },
};
</script>

<style scoped>
.card {
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}

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

.projectName {
  width: 100%;
  margin-bottom: 5px;
  display: flex;
}

.van-tag {
  margin: 2px;
}

.businessTitle {
  font-weight: bold;
  margin-bottom: 5px;
}
.clientInfo {
  margin-bottom: 5px;
}
/deep/ .van-tabs__wrap {
  width: 100%;
}
</style>