wdly-mobile/src/views/processApproval/index.vue

<template>
  <van-nav-bar
    :title="$t('processApproval.name')"
    left-text=""
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  >
  </van-nav-bar>
  <van-search
    v-model="req.keyword"
    :placeholder="$t('common.pleaseEnterKeywords')"
    @search="onRefresh"
  />
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div class="list">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :finished-text="$t('common.noMore')"
        @load="onLoad"
        style="margin-bottom: 60px"
      >
        <commonList
          :data="listData"
          @onClick="toDtl"
          :config="listConfig"
        ></commonList>
      </van-list>
    </div>
  </van-pull-refresh>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import commonList from "@/components/common-list.vue";
import { useRoute } from "vue-router";
import { getUserInfo } from "@/utils/auth";

const loading = ref(false);
const route = useRoute();
const req = ref({
  pageNum: 1,
  keyword: null,
  definition: "1",
  tenantId: getUserInfo().tenantId,
});
const finished = ref(false);
const proxy = getCurrentInstance().proxy;
const listData = ref([]);
const listConfig = ref([
  {
    label: proxy.t("processApproval.processType"),
    prop: "flowName",
  },
  {
    label: proxy.t("processApproval.initiator"),
    prop: "createUserName",
  },
  {
    label: proxy.t("processApproval.processTitle"),
    prop: "title",
  },
]);
const onRefresh = () => {
  req.value.pageNum = 1;
  finished.value = false;
  getList("refresh");
};
const onLoad = () => {
  getList();
};
const onClickLeft = () => proxy.$router.push("/main/working");
const onClickRight = () => {
  proxy.$router.push({
    path: "userAdd",
    query: {
      type: "add",
    },
  });
};
proxy.uploadDdRightBtn(onClickRight, proxy.t("common.add"));
const toDtl = (row) => {
  if (row.status != 1 && row.status != 0) {
    proxy.$router.push({
      path: "/main/processDtl",
      query: {
        flowKey: row.flowKey,
        id: row.id,
        processType: 20,
        version: row.version,
        businessId: row.businessId,
      },
    });
    return;
  }
  proxy.post("flowExample/getApprovalRecord", { id: row.id }).then((res) => {
    if (res.data.recordList.length > 0) {
      let data = res.data.recordList.filter((item) => item.status === 2);
      let nodeType = 0;
      if (data && data.length > 0) {
        nodeType = data[0].nodeType;
      }
      proxy.$router.push({
        path: "/main/processDtl",
        query: {
          flowKey: row.flowKey,
          id: row.id,
          processType: nodeType == 1 ? 30 : 10,
          version: row.version,
          businessId: row.businessId,
        },
      });
    }
  });
  // proxy.$router.push({
  // 	path: 'processDtl',
  // 	query: {
  // 		flowKey: row.flowKey,
  // 		id: row.id,
  // 		processType: 10,
  // 	},
  // })
};
onMounted(() => {
  if (route.query) {
    getList();
  }
});

const getList = (type) => {
  loading.value = true;
  const postUrl = {
    1: "/flowExample/getToBeProcessedPage",
    2: "/flowExample/getHaveInitiatedPage",
    3: "/flowExample/getProcessedPage",
  };
  proxy
    .post(postUrl[route.query.status], req.value)
    .then((res) => {
      listData.value =
        type === "refresh"
          ? res.data.rows
          : listData.value.concat(res.data.rows);
      if (req.value.pageNum * 10 >= res.data.total) {
        finished.value = true;
      }
      req.value.pageNum++;
      loading.value = false;
    })
    .catch((err) => {
      loading.value = false;
    });
};
</script>

<style lang="scss" scoped>
.list {
  min-height: 70vh;
}
</style>