aiot-app/pages/home/wt/todo/todo.vue

<template>
  <view class="blacklog-container">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="我的待办"
      @clickLeft="back"
      background-color="#157A2C"
      color="#fff"
    ></uni-nav-bar>

    <view class="list-container">
      <u-list @scrolltolower="scrolltolower">
        <u-list-item v-for="(item, index) in list" :key="index">
          <view class="kd-card">
            <view class="card-title">
              <text>{{ item.processInstance.name }}</text>
              <text class="card-time">{{ item.createTime }}</text>
            </view>
            <view>
              <view class="card-body">
                <view class="card-col" v-for="itm in colOptions">
                  <text class="label">{{ itm.label }}</text>
                  <text class="content">{{ item[itm.key] }}</text>
                </view>
              </view>

              <view class="card-footer">
                <u-button
                  type="success"
                  @click="handleDetail(item, 'handle')"
                  v-if="
                    ['0', '2'].includes(
                      item.extensionProperty.taskHandlePlatform,
                    )
                  "
                  >处理</u-button
                >
                <u-button v-else type="error">请在PC端处理</u-button>
                <u-button type="info" @click="handleDetail(item, 'detail')"
                  >流程详情</u-button
                >
              </view>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
    <view v-show="list.length === 0" class="no_data">
      <u-empty mode="data" textSize="30"></u-empty>
    </view>
  </view>
</template>

<script>
import { getTodoTaskPage } from "@/api/wt/index.js";
let [page, size, isEnd] = [1, 10, true];

export default {
  computed: {
    colOptions() {
      return [
        {
          label: "流程节点",
          key: "name",
        },
        {
          label: "流程发起人",
          key: `startUserNickname`,
        },
      ];
    },
  },
  data() {
    return {
      list: [],
      params: {
        status: "",
        name: "",
      },
    };
  },
  onShow() {
    page = 1;
    this.list = [];
    this.getList();
  },

  methods: {
    scrolltolower() {
      if (isEnd) return;
      page++;
      this.getList();
    },
    //miniHandleRouter
    handleDetail(item, type) {
      console.log("111~~~", item);
      //'pages/home' + this.listData.miniHandleRouter
      ///wt/components/feeApplication/taskSubmit
      if (type == "handle") {
        console.log(Object.keys(item.formJson).length);
        if (Object.keys(item.formJson).length) {
          let params = JSON.stringify({
            id: item.id,
            processInstanceId: item.processInstance.id || "",
            type: type,
          });
          let queryParams = `params=${params}`;
          let url = "/pages/home/wt/components/formParser/routerView";
          uni.navigateTo({
            url: `${url}?${queryParams}`,
          });
        } else {
          let queryParams = `id=${item.processInstance.id}&businessId=${item.businessId}&taskId=${item.id}&taskDefinitionKey=${item.taskDefinitionKey}&miniHandleRouter=${item.miniHandleRouter}&miniViewRouter=${item.miniViewRouter}`;
          let url =
            "/pages/home" +
            item.miniHandleRouter.replace("taskForm", "processTask");

          console.log("url~~~", `${url}?${queryParams}`);
          uni.navigateTo({
            url: `${url}?${queryParams}`,
          });
        }

        //
      } else {
        uni.navigateTo({
          url: `/pages/home/wt/components/detail?processInstanceId=${item.processInstance.id}`,
        });
      }
    },
    async getList() {
      let paging = {
        pageNo: page,
        pageSize: size,
        processType: 0,
      };
      let par = Object.assign(paging, this.params);
      isEnd = false;
      const data = await getTodoTaskPage(par);
      this.list.push(...data.list);
      this.list.forEach((item) => {
        item.startUserNickname = item.processInstance.startUserNickname;
      });
      isEnd = this.list.length >= data.count;
    },
  },
};
</script>

<style lang="scss" scoped>
.blacklog-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.list-container {
  flex: 1;
  padding: 24rpx;
  background: $page-bg;
  flex: 1;
  overflow: hidden;
  // position: absolute;
  // top: 88rpx;
  // bottom: 0;
  // left: 0;
  // right: 0;

  /deep/ .u-list {
    height: 100% !important;
  }
}

.no_data {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 50rpx;
}

.kd-card {
  font-size: 34rpx;
  color: #333;
  background-color: #fff;
  border-radius: 10rpx;
  word-break: break-all;
  margin-bottom: 24rpx;

  .status {
    font-weight: normal;
  }

  .card-title {
    font-size: 1rem;
    font-weight: bold;

    .card-time {
      font-weight: normal;
      color: #bfbfbf;
      font-size: 0.9rem;
      align-self: center;
    }
  }

  .card-footer,
  .card-title {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 30rpx;
  }

  .card-footer {
    padding: 10rpx 30rpx 18rpx 30rpx;
    font-size: 0.8rem;

    /deep/ .u-button {
      width: 48%;
    }
  }

  .card-body {
    padding: 0 28rpx;
    position: relative;
    min-height: 150rpx;
  }

  .card-body:after {
    content: "";
    position: absolute;
    left: auto;
    top: auto;
    bottom: 10rpx;
    right: auto;
    height: 1rpx;
    width: 91%;
    background-color: #f1f1f1;
  }

  .card-col {
    padding: 8rpx 0;
    display: flex;

    // line-height: ;

    .content {
      flex: 1;
      overflow: hidden;
      font-size: 0.9rem;
    }

    .label {
      font-size: 0.9rem;
      color: #999;
      width: 25%;
    }
  }
}
</style>