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

<template>
  <van-tabs v-model:active="activeName" @change="tabChange()" :ellipsis="false">
    <van-tab v-if="menuStore.menuInfo.map((item) => item.name).includes('个贷业务')" 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 class="comments">
            <div>
              <van-icon name="notes-o" />
              {{ item.comments ? item.comments : '-' }}
            </div>
          </div>
          </div>
        </van-list>
      </van-pull-refresh>
      <van-back-top right="10vw" bottom="10vh" />
    </van-tab>
    <van-tab v-if="menuStore.menuInfo.map((item) => item.name).includes('大中型业务')" 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 v-if="menuStore.menuInfo.map((item) => item.name).includes('资产业务')" 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-tab v-if="majorAdmin" title="大中型提成审批" name="majorAdmin">
      <van-search v-model="majorDeclListQuery.orderId" placeholder="请输入项目编号" @search="onMajorDeclSearch()" />
      <van-pull-refresh v-model="loading" @refresh="onMajorDeclRefresh()">
        <van-list v-model:loading="loading" :finished="majorDeclFinished" finished-text="没有待办了" @load="getMajorDecl()">
          <div class="card" v-for="item in majorDeclListData" :key="item.id" @click="toMajorDeclDetail(item)">
            <div class="businessTitle">
              <van-icon name="link-o" />
              {{ item.majorSimple !== null ? item.majorSimple.orderId : '-' }}
            </div>
            <div class="productionNo">
              <van-icon name="coupon-o" />
              {{ item.majorSimple !== null ? item.majorSimple.reportNo : '-' }}
            </div>
            <div class="projectName">
              <div>
                <van-icon name="location-o" />
                {{ item.majorSimple !== null ? item.majorSimple.orderName : '-' }}
              </div>
            </div>
            <div class="otherInfo">
              <van-tag type="primary" size="medium" class="van-tag">{{ item.businessCate }}</van-tag>
              <van-tag type="success" size="medium" class="van-tag">{{ item.nodeName }}</van-tag>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
      <van-back-top right="10vw" bottom="10vh" />
    </van-tab>
    <van-tab v-if="assetsAdmin" title="资产提成审批" name="assetsAdmin">
      <van-search v-model="assetsDeclListQuery.orderId" placeholder="请输入项目编号" @search="onAssetsDeclSearch()" />
      <van-pull-refresh v-model="loading" @refresh="onAssetsDeclRefresh()">
        <van-list v-model:loading="loading" :finished="assetsDeclFinished" finished-text="没有待办了" @load="getAssetsDecl()">
          <div class="card" v-for="item in assetsDeclListData" :key="item.id" @click="toAssetsDeclDetail(item)">
            <div class="businessTitle">
              <van-icon name="link-o" />
              {{ item.assetsSimple.orderId }}
            </div>
            <div class="productionNo">
              <van-icon name="coupon-o" />
              {{ item.assetsSimple.reportNo }}
            </div>
            <div class="projectName">
              <div>
                <van-icon name="location-o" />
                {{ item.assetsSimple.orderName}}
              </div>
            </div>
            <div class="otherInfo">
              <van-tag type="primary" size="medium" class="van-tag">{{ item.businessCate }}</van-tag>
              <van-tag type="success" size="medium" class="van-tag">{{ item.nodeName }}</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';
import { checkHasBusinessHandle } from '@/api/workFlowNodeInstance';
import { assetsCheckPage, majorCheckPage } from '@/api/commissonDeclare';
import { mapStores } from 'pinia';
import { menuStore } from '@/stores/menuStore';

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,
      },
      assetsDeclFinished: false,
      assetsDeclListQuery: {
        // 当前页数
        current: 1,
        // 项目编号
        orderId: null,
      },
      assetsDeclListData: [],
      majorDeclFinished: false,
      majorDeclListQuery: {
        // 当前页数
        current: 1,
        // 项目编号
        orderId: null,
      },
      majorDeclListData: [],
    };
  },
  computed: {
    ...mapStores(menuStore),
    majorAdmin() {
      const adminMeun = this.menuStore.menuInfo.filter((item) => item.name == '行政审批');
      if (adminMeun.length > 0) {
        return adminMeun[0].children.map((item) => item.name).includes('大中型提成申报审核');
      }
      return false;
    },
    assetsAdmin() {
      const adminMeun = this.menuStore.menuInfo.filter((item) => item.name == '行政审批');
      if (adminMeun.length > 0) {
        return adminMeun[0].children.map((item) => item.name).includes('资产提成申报审核');
      }
      return false;
    },
  },
  created() {
    
  },
  methods: {
    // 监听标签页改变
    tabChange() {
      switch (this.activeName) {
        case 'personal':
          break;
        case 'major':
          break;
        case 'assets':
          break;
        case 'majorAdmin':
          break;
        case 'assetsAdmin':
          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() {
      console.log(this.activeName)
      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 'DEPARTMENT_ALLOCATION':
        case 'DETERMINE_PRICE':
        // case 'QUOTATION_FEEDBACK':
        case 'GENERATE_STATEMENT':
        case 'REVIEW_STATEMENT':
        case 'STATEMENT_BOOKBINDING_STAMP':
        case 'STATEMENT_IN':
        case 'STATEMENT_OUT':
        //case 'STATEMENT_FEEDBACK':
        case 'WRITE_REPORT':
        case 'CHECK_REPORT':
        case 'REPORT_BOOKBINDING_STAMP':
        case 'REPORT_IN':
        case 'REPORT_OUT':
        case 'WRITE_LETTER':
        case 'CHECK_LETTER':
        case 'LETTER_BOOKBINDING_STAMP':
        case 'LETTER_IN':
        case 'LETTER_OUT':
        case 'BUSINESS_ARCHIVING':
          //case 'REPORT_FEEDBACK':
          //case 'LETTER_FEEDBACK':
          showDialog({
            message: '当前节点需要业务操作, 请在电脑端处理节点',
          });
          break;
        default:
          checkHasBusinessHandle(row.currentNodeId).then((res) => {
            // 跳转前判断节点是否需要业务操作
            if (!res.data) {
              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}&lastestComments=${row.comments}`
              );
            } else {
              showDialog({
                message: '当前节点需要业务操作, 请在电脑端处理节点',
              });
            }
          });
          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:
          checkHasBusinessHandle(row.currentNodeId).then((res) => {
            // 跳转前判断节点是否需要业务操作
            if (!res.data) {
              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}`
                );
              }
            } else {
              showDialog({
                message: '当前节点需要业务操作, 请在电脑端处理节点',
              });
            }
          });
          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:
          checkHasBusinessHandle(row.currentNodeId).then((res) => {
            // 跳转前判断节点是否需要业务操作
            if (!res.data) {
              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
                  }`
                );
              }
            } else {
              showDialog({
                message: '当前节点需要业务操作, 请在电脑端处理节点',
              });
            }
          });
          break;
      }
    },
    // 资产提成申报审批列表刷新
    onAssetsDeclRefresh() {
      this.assetsDeclListQuery.current = 1;
      this.assetsDeclFinished = false;
      this.assetsDeclListData = [];
      this.getAssetsDecl();
    },
    onAssetsDeclSearch() {
      this.assetsDeclListQuery.current = 1;
      this.assetsDeclFinished = false;
      this.assetsDeclListData = [];
      this.getAssetsDecl();
    },
    // 获取资产提成申报审批列表
    getAssetsDecl() {
      assetsCheckPage(this.assetsDeclListQuery).then((res) => {
        if (res.code == 200) {
          if (res.data.records) {
            this.assetsDeclListData = this.assetsDeclListData.concat(res.data.records);
          }
          if (res.data.pages > this.assetsDeclListQuery.current) {
            this.assetsDeclListQuery.current++;
          } else {
            this.assetsDeclFinished = true;
          }
        }
        this.loading = false;
      });
    },
    // 前往资产申报详情
    toAssetsDeclDetail(item) {
      this.$router.push(`/index/commissonDeclare/assets/declareDetail?businessId=${item.businessId}&businessType=${item.businessType}&couldEdit=${true}`);
    },
    // 大中型提成申报审批列表刷新
    onMajorDeclRefresh() {
      this.majorDeclListQuery.current = 1;
      this.majorDeclFinished = false;
      this.majorDeclListData = [];
      this.getMajorDecl();
    },
    onMajorDeclSearch() {
      this.majorDeclListQuery.current = 1;
      this.majorDeclFinished = false;
      this.majorDeclListData = [];
      this.getMajorDecl();
    },
    // 获取大中型提成申报审批列表
    getMajorDecl() {
      majorCheckPage(this.majorDeclListQuery).then((res) => {
        if (res.code == 200) {
          if (res.data.records) {
            this.majorDeclListData = this.majorDeclListData.concat(res.data.records);
          }
          if (res.data.pages > this.majorDeclListQuery.current) {
            this.majorDeclListData.current++;
          } else {
            this.majorDeclFinished = true;
          }
        }
        this.loading = false;
      });
    },
    // 前往资产申报详情
    toMajorDeclDetail(item) {
      this.$router.push(`/index/commissonDeclare/major/declareDetail?businessId=${item.businessId}&businessType=${item.businessType}&couldEdit=${true}`);
    },
  },
};
</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;
}
.comments {
  margin-bottom: 5px;
  color: darkgrey
}
/deep/ .van-tabs__wrap {
  width: 100%;
}
</style>