labsop_scientific_h5/pages/todo/index.vue

<template>
  <view class="todo-container">
    <!-- 顶部搜索 + tab -->
    <view class="search-header">
      <view class="search-row">
        <uv-input
          placeholder="请输入审批名称"
          v-model="queryParams.instTitle"
          prefixIcon="search"
          prefixIconStyle="color: #999; font-size: 32rpx;"
          clearable
          shape="circle"
          customStyle="background-color: #f5f7fa; border: none;"
        ></uv-input>
      </view>

      <view class="type-tabs">
        <uv-tabs
          :list="tabList"
          :current="currentTab"
          @change="onTabChange"
          :activeStyle="{ color: '#1c9bfd', fontWeight: 'bold', transform: 'scale(1.05)' }"
          :inactiveStyle="{ color: '#666' }"
          lineColor="#1c9bfd"
          lineWidth="40"
          :itemStyle="{ height: '88rpx', flex: 1 }"
          :scrollable="false"
        ></uv-tabs>
      </view>
    </view>

    <!-- 列表区域 -->
    <view class="list-container">
      <scroll-view
        scroll-y
        class="scroll-list"
        :scroll-top="scrollTopValue"
        scroll-with-animation
        refresher-enabled
        :refresher-triggered="isTriggered"
        @refresherrefresh="onRefresh"
        @scroll="onScroll"
        @scrolltolower="loadMore"
        :show-scrollbar="false"
      >
        <uv-empty v-if="!todoStore.list.length && loadStatus !== 'loading'" mode="list"></uv-empty>

        <view
          class="common-list-card"
          v-for="item in todoStore.list"
          :key="item.id || item.taskId"
        >
          <view class="card-header">
            <text class="title">{{ item.instTitle || '未命名流程' }}</text>
            <text
              class="status-tag"
              :class="item.isFinish == '10' ? 'status-done' : 'status-undo'"
            >
              {{ item.isFinish == '10' ? '已完成' : '未完成' }}
            </text>
          </view>
          <view class="card-body" @click="viewDetail(item)">
            <view class="info-item">
              <text class="label">审批类型：</text>
              <text class="value">{{ (item as any).defName || '-' }}</text>
            </view>
            <view class="info-item">
              <text class="label">申请人：</text>
              <text class="value">{{ item.startUserName || '-' }}</text>
            </view>
            <view class="info-item">
              <text class="label">创建时间：</text>
              <text class="value">{{ formatDate(item.createdTime, 'YYYY-MM-DD HH:mm') }}</text>
            </view>
          </view>
          <view class="card-footer" v-if="currentType === 'approval'">
            <uv-button
              v-if="item.isFinish == '20'"
              type="primary"
              text="审批"
              size="small"
              customStyle="padding: 0 24rpx; height: 60rpx;"
              @click="openApprove(item)"
            ></uv-button>
          </view>
        </view>

        <uv-load-more
          v-if="todoStore.list.length > 0 || loadStatus === 'loading'"
          :status="loadStatus"
          @loadmore="loadMore"
        ></uv-load-more>
      </scroll-view>

      <uv-back-top
        :scrollTop="currentScrollTop"
        :bottom="100"
        :right="30"
        @click="backToTop"
      ></uv-back-top>
    </view>

  </view>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { debounce } from 'lodash-es';
import { useTodoStore } from '@/store/modules/todo';
import { onRouterPush } from '@/utils/router';
import { formatDate } from '@/utils/date';
import type { TodoItem } from '@/types/todo';
import { TODO_TAB_LIST } from '@/constants/index';

const todoStore = useTodoStore();

const tabList = ref(TODO_TAB_LIST);

const currentTab = ref(0);
const currentType = computed(() => tabList.value[currentTab.value].type);

const queryParams = ref({
  platformId: 100010,
  defName: '',
  instTitle: '',
  pageNum: 1,
  pageSize: 20,
  orderBy: ''
});

const scrollTopValue = ref(0);
const currentScrollTop = ref(0);
const isTriggered = ref(false);
const loadStatus = ref<'loadmore' | 'loading' | 'nomore'>('loadmore');

/**
 * 获取列表数据
 */
const fetchListData = async (reset = false) => {
  if (todoStore.loading) return;

  if (reset) {
    queryParams.value.pageNum = 1;
  }

  loadStatus.value = 'loading';
  const res = await todoStore.fetchList(currentType.value, queryParams.value, !reset);

  if (res.success) {
    if (todoStore.list.length >= todoStore.total) {
      loadStatus.value = 'nomore';
    } else {
      loadStatus.value = 'loadmore';
      queryParams.value.pageNum += 1;
    }
  } else {
    loadStatus.value = 'nomore';
  }

  if (reset) {
    isTriggered.value = false;
  }
};

const onTabChange = (e: any) => {
  currentTab.value = e.index;
  fetchListData(true);
};

// 监听查询条件变化
const debouncedFetchList = debounce(() => {
  fetchListData(true);
}, 500);

watch(() => queryParams.value.instTitle, () => {
  debouncedFetchList();
});

const onRefresh = async () => {
  isTriggered.value = true;
  await fetchListData(true);
};

const loadMore = async () => {
  if (loadStatus.value !== 'loadmore') return;
  await fetchListData(false);
};

const onScroll = (e: any) => {
  currentScrollTop.value = e.detail.scrollTop;
};

const backToTop = () => {
  scrollTopValue.value = currentScrollTop.value;
  nextTick(() => {
    scrollTopValue.value = 0;
  });
};

const viewDetail = (item: TodoItem) => {
  onRouterPush(`/pages/todo/detail?mode=view&id=${item.id || ''}&taskId=${item.taskId || ''}&taskCode=${item.businessCode || ''}&defCode=${item.defCode || ''}`);
};

const openApprove = (item: TodoItem) => {
  onRouterPush(`/pages/todo/detail?mode=approval&id=${item.id || ''}&taskId=${item.taskId || ''}&taskCode=${item.businessCode || ''}&defCode=${item.defCode || ''}`);
};

onShow(() => {
  fetchListData(true);
});

onLoad(() => {
  // onLoad 只执行一次基础初始化
});
</script>

<style lang="scss" scoped>
.todo-container {
  height: calc(100vh - var(--window-top));
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

.search-header {
  background-color: #fff;
  padding: 20rpx 30rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
  position: sticky;
  top: 0;
  z-index: 99;

  .search-row {
    margin-bottom: 24rpx;
  }

  .type-tabs {
    margin-top: 10rpx;
  }
}

.list-container {
  padding: 30rpx;
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
}

.scroll-list {
  flex: 1;
  height: 100%;
}

.common-list-card {
  .card-header {
    .status-tag {
      &.status-done {
        color: #52c41a;
        background-color: rgba(82, 196, 26, 0.1);
      }

      &.status-undo {
        color: #fa8c16;
        background-color: rgba(250, 173, 20, 0.1);
      }
    }
  }
}

/* 审批弹窗样式已移除，审批在详情页中处理 */
</style>