feat：【bpm】流程任务、流程实例的管理：100%

2025-12-23 23:17:54 +08:00
parent dbaa0b9daf
commit 99b1f97565
7 changed files with 849 additions and 53 deletions
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -66,3 +66,13 @@ export function createProcessInstance(data: {
 export function cancelProcessInstanceByStartUser(id: string, reason: string) {
  return http.delete<boolean>('/bpm/process-instance/cancel-by-start-user', { id, reason })
 }
+
+/** 查询管理员流程实例分页 */
+export function getProcessInstanceManagerPage(params: PageParam) {
+  return http.get<PageResult<ProcessInstance>>('/bpm/process-instance/manager-page', params)
+}
+
+/** 管理员取消流程实例 */
+export function cancelProcessInstanceByAdmin(id: string, reason: string) {
+  return http.delete<boolean>('/bpm/process-instance/cancel-by-admin', { id, reason })
+}
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
@@ -18,9 +18,11 @@ export interface Task {
  status: number
  createTime: Date
  endTime?: Date
+  durationInMillis?: number // 持续时间
  reason?: string
  assigneeUser?: TaskUser
  ownerUser?: TaskUser
+  processInstanceId?: string // 流程实例 ID
  processInstance: ProcessInstance
 }

@@ -48,3 +50,8 @@ export function rejectTask(data: { id: string, reason: string }) {
 export function getTaskListByProcessInstanceId(processInstanceId: string) {
  return http.get<Task[]>(`/bpm/task/list-by-process-instance-id?processInstanceId=${processInstanceId}`)
 }
+
+/** 查询任务管理分页 */
+export function getTaskManagerPage(params: PageParam) {
+  return http.get<PageResult<Task>>('/bpm/task/manager-page', params)
+}
--- a/src/pages-bpm/processInstance/manager/components/search-form.vue
+++ b/src/pages-bpm/processInstance/manager/components/search-form.vue
@@ -0,0 +1,222 @@
+<template>
+  <!-- 搜索框入口 -->
+  <view @click="visible = true">
+    <wd-search :placeholder="placeholder" hide-cancel disabled />
+  </view>
+
+  <!-- 搜索弹窗 -->
+  <wd-popup v-model="visible" position="top" @close="visible = false">
+    <view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          发起人
+        </view>
+        <UserPicker
+          v-model="formData.startUserId"
+          type="radio"
+          placeholder="请选择发起人"
+        />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          流程名称
+        </view>
+        <wd-input
+          v-model="formData.name"
+          placeholder="请输入流程名称"
+          clearable
+        />
+      </view>
+      <view v-if="processDefinitionList.length > 0" class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          所属流程
+        </view>
+        <wd-picker
+          v-model="formData.processDefinitionId"
+          :columns="processDefinitionList"
+          label-key="name"
+          value-key="id"
+          label=""
+        />
+      </view>
+      <!-- 流程分类 -->
+      <view v-if="categoryList.length > 0" class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          流程分类
+        </view>
+        <wd-picker
+          v-model="formData.category"
+          :columns="categoryList"
+          label-key="name"
+          value-key="code"
+          label=""
+        />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          流程状态
+        </view>
+        <wd-radio-group v-model="formData.status" shape="button">
+          <wd-radio :value="-1">
+            全部
+          </wd-radio>
+          <wd-radio v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)" :key="dict.value" :value="dict.value">
+            {{ dict.label }}
+          </wd-radio>
+        </wd-radio-group>
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          发起时间
+        </view>
+        <view class="yd-search-form-date-range-container">
+          <view class="flex-1" @click="visibleCreateTime[0] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.createTime?.[0]) || '开始日期' }}
+            </view>
+          </view>
+          -
+          <view class="flex-1" @click="visibleCreateTime[1] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.createTime?.[1]) || '结束日期' }}
+            </view>
+          </view>
+        </view>
+        <wd-datetime-picker-view v-if="visibleCreateTime[0]" v-model="tempCreateTime[0]" type="date" />
+        <view v-if="visibleCreateTime[0]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleCreateTime[0] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime0Confirm">
+            确定
+          </wd-button>
+        </view>
+        <wd-datetime-picker-view v-if="visibleCreateTime[1]" v-model="tempCreateTime[1]" type="date" />
+        <view v-if="visibleCreateTime[1]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleCreateTime[1] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime1Confirm">
+            确定
+          </wd-button>
+        </view>
+      </view>
+      <view class="yd-search-form-actions">
+        <wd-button class="flex-1" plain @click="handleReset">
+          重置
+        </wd-button>
+        <wd-button class="flex-1" type="primary" @click="handleSearch">
+          搜索
+        </wd-button>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script lang="ts" setup>
+import type { Category } from '@/api/bpm/category'
+import type { ProcessDefinition } from '@/api/bpm/definition'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { getCategorySimpleList } from '@/api/bpm/category'
+import { getProcessDefinitionList } from '@/api/bpm/definition'
+import UserPicker from '@/components/system-select/user-picker.vue'
+import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
+import { getNavbarHeight } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+import { formatDate, formatDateRange } from '@/utils/date'
+
+const emit = defineEmits<{
+  search: [data: Record<string, any>]
+  reset: []
+}>()
+
+const visible = ref(false)
+const formData = reactive({
+  startUserId: undefined as number | undefined, // 发起人
+  name: undefined as string | undefined, // 流程名称
+  processDefinitionId: undefined as string | undefined, // 所属流程
+  category: undefined as string | undefined, // 流程分类
+  status: -1, // -1 表示全部
+  createTime: [undefined, undefined] as [number | undefined, number | undefined], // 发起时间
+})
+
+/** 搜索条件 placeholder 拼接 */
+const placeholder = computed(() => {
+  const conditions: string[] = []
+  if (formData.name) {
+    conditions.push(`名称:${formData.name}`)
+  }
+  if (formData.status !== -1) {
+    conditions.push(`状态:${getDictLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, formData.status)}`)
+  }
+  if (formData.createTime?.[0] && formData.createTime?.[1]) {
+    conditions.push(`时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索流程实例'
+})
+
+const categoryList = ref<Category[]>([])
+const processDefinitionList = ref<ProcessDefinition[]>([])
+
+// 时间选择器状态
+const visibleCreateTime = ref<[boolean, boolean]>([false, false])
+const tempCreateTime = ref<[number, number]>([Date.now(), Date.now()])
+
+/** 创建时间[0]确认 */
+function handleCreateTime0Confirm() {
+  formData.createTime = [tempCreateTime.value[0], formData.createTime?.[1]]
+  visibleCreateTime.value[0] = false
+}
+
+/** 创建时间[1]确认 */
+function handleCreateTime1Confirm() {
+  formData.createTime = [formData.createTime?.[0], tempCreateTime.value[1]]
+  visibleCreateTime.value[1] = false
+}
+
+/** 获取流程分类列表 */
+async function getCategoryList() {
+  try {
+    categoryList.value = await getCategorySimpleList()
+  } catch (error) {
+    console.error('获取流程分类失败:', error)
+  }
+}
+
+/** 获取流程定义列表 */
+async function getProcessDefinitions() {
+  try {
+    processDefinitionList.value = await getProcessDefinitionList({ suspensionState: 1 })
+  } catch (error) {
+    console.error('获取流程定义失败:', error)
+  }
+}
+
+/** 搜索 */
+function handleSearch() {
+  visible.value = false
+  emit('search', {
+    ...formData,
+    status: formData.status === -1 ? undefined : formData.status,
+    createTime: formatDateRange(formData.createTime),
+  })
+}
+
+/** 重置 */
+function handleReset() {
+  formData.startUserId = undefined
+  formData.name = undefined
+  formData.processDefinitionId = undefined
+  formData.category = undefined
+  formData.status = -1
+  formData.createTime = [undefined, undefined]
+  visible.value = false
+  emit('reset')
+}
+
+/** 初始化 */
+onMounted(() => {
+  getCategoryList()
+  getProcessDefinitions()
+})
+</script>
--- a/src/pages-bpm/processInstance/manager/index.vue
+++ b/src/pages-bpm/processInstance/manager/index.vue
@@ -0,0 +1,231 @@
+<template>
+  <view class="yd-page-container">
+    <!-- 顶部导航栏 -->
+    <wd-navbar
+      title="流程管理"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <!-- 搜索组件 -->
+    <SearchForm @search="handleQuery" @reset="handleReset" />
+
+    <!-- 流程实例列表 -->
+    <view class="p-24rpx">
+      <view
+        v-for="item in list"
+        :key="item.id"
+        class="mb-24rpx overflow-hidden rounded-12rpx bg-white shadow-sm"
+        @click="handleDetail(item)"
+      >
+        <view class="p-24rpx">
+          <view class="mb-16rpx flex items-center justify-between">
+            <view class="mr-16rpx flex-1">
+              <view class="line-clamp-1 text-32rpx text-[#333] font-semibold">
+                {{ item.name }}
+              </view>
+              <view class="mt-8rpx text-24rpx text-[#999]">
+                {{ item.categoryName || '-' }}
+              </view>
+            </view>
+            <DictTag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="item.status" />
+          </view>
+          <view class="mb-12rpx flex items-center">
+            <view class="mr-8rpx h-48rpx w-48rpx flex items-center justify-center rounded-full bg-[#1890ff] text-20rpx text-white">
+              {{ item.startUser?.nickname?.[0] || '?' }}
+            </view>
+            <view class="flex-1">
+              <view class="text-28rpx text-[#333]">
+                {{ item.startUser?.nickname || '-' }}
+              </view>
+              <view class="text-24rpx text-[#999]">
+                {{ item.startUser?.deptName || '-' }}
+              </view>
+            </view>
+          </view>
+          <view class="mb-12rpx rounded-8rpx bg-[#f7f8f9] p-16rpx">
+            <view class="mb-8rpx flex items-center justify-between text-26rpx">
+              <text class="text-[#999]">发起时间</text>
+              <text class="text-[#333]">{{ formatDateTime(item.startTime) }}</text>
+            </view>
+            <view v-if="item.endTime" class="flex items-center justify-between text-26rpx">
+              <text class="text-[#999]">结束时间</text>
+              <text class="text-[#333]">{{ formatDateTime(item.endTime) }}</text>
+            </view>
+          </view>
+          <view v-if="item.tasks && item.tasks.length > 0" class="mb-12rpx">
+            <view class="mb-8rpx text-26rpx text-[#999]">
+              当前审批任务
+            </view>
+            <view class="flex flex-wrap gap-8rpx">
+              <wd-tag
+                v-for="task in item.tasks"
+                :key="task.id"
+                type="primary"
+                plain
+                @click.stop="handleTaskDetail(item, task)"
+              >
+                {{ task.name }}
+              </wd-tag>
+            </view>
+          </view>
+          <view
+            v-if="item.status === BpmProcessInstanceStatus.RUNNING"
+            class="flex items-center justify-end border-t border-[#f0f0f0] -mt-8"
+          >
+            <wd-button size="small" type="error" plain @click.stop="handleCancel(item)">
+              取消流程
+            </wd-button>
+          </view>
+        </view>
+      </view>
+
+      <!-- 加载更多 -->
+      <view v-if="loadMoreState !== 'loading' && list.length === 0" class="py-100rpx text-center">
+        <wd-status-tip image="content" tip="暂无流程实例" />
+      </view>
+      <wd-loadmore
+        v-if="list.length > 0"
+        :state="loadMoreState"
+        @reload="loadMore"
+      />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { ProcessInstance } from '@/api/bpm/processInstance'
+import type { LoadMoreState } from '@/http/types'
+import { onReachBottom } from '@dcloudio/uni-app'
+import { onMounted, ref } from 'vue'
+import { useToast } from 'wot-design-uni'
+import {
+  cancelProcessInstanceByAdmin,
+  getProcessInstanceManagerPage,
+} from '@/api/bpm/processInstance'
+import DictTag from '@/components/dict-tag/dict-tag.vue'
+import { navigateBackPlus } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+import { formatDateTime } from '@/utils/date'
+import SearchForm from './components/search-form.vue'
+
+// 流程实例状态枚举
+const BpmProcessInstanceStatus = {
+  RUNNING: 1, // 进行中
+  APPROVE: 2, // 审批通过
+  REJECT: 3, // 审批不通过
+  CANCEL: 4, // 已取消
+}
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+const toast = useToast()
+const total = ref(0)
+const list = ref<(ProcessInstance & { tasks?: { id: string, name: string }[] })[]>([])
+const loadMoreState = ref<LoadMoreState>('loading')
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+})
+
+/** 返回上一页 */
+function handleBack() {
+  navigateBackPlus()
+}
+
+/** 查询流程实例列表 */
+async function getList() {
+  loadMoreState.value = 'loading'
+  try {
+    const data = await getProcessInstanceManagerPage(queryParams.value)
+    list.value = [...list.value, ...data.list]
+    total.value = data.total
+    loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
+  } catch {
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
+    loadMoreState.value = 'error'
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
+  list.value = []
+  getList()
+}
+
+/** 重置按钮操作 */
+function handleReset() {
+  handleQuery()
+}
+
+/** 加载更多 */
+function loadMore() {
+  if (loadMoreState.value === 'finished') {
+    return
+  }
+  queryParams.value.pageNo++
+  getList()
+}
+
+/** 查看详情 */
+function handleDetail(item: ProcessInstance) {
+  uni.navigateTo({ url: `/pages-bpm/processInstance/detail/index?id=${item.id}` })
+}
+
+/** 查看任务详情 */
+function handleTaskDetail(row: ProcessInstance, task: { id: string, name: string }) {
+  uni.navigateTo({ url: `/pages-bpm/processInstance/detail/index?id=${row.id}&taskId=${task.id}` })
+}
+
+/** 取消流程实例 */
+function handleCancel(item: ProcessInstance) {
+  uni.showModal({
+    title: '取消流程',
+    editable: true,
+    placeholderText: '请输入取消原因',
+    success: async (res) => {
+      if (!res.confirm) {
+        return
+      }
+      const reason = res.content?.trim()
+      if (!reason) {
+        toast.error('请输入取消原因')
+        return
+      }
+      try {
+        await cancelProcessInstanceByAdmin(item.id, reason)
+        toast.success('取消成功')
+        // 刷新列表
+        queryParams.value.pageNo = 1
+        list.value = []
+        await getList()
+      } catch (error) {
+        console.error('取消流程失败:', error)
+      }
+    },
+  })
+}
+
+/** 触底加载更多 */
+onReachBottom(() => {
+  loadMore()
+})
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/pages-bpm/task/manager/components/search-form.vue
+++ b/src/pages-bpm/task/manager/components/search-form.vue
@@ -0,0 +1,128 @@
+<template>
+  <!-- 搜索框入口 -->
+  <view @click="visible = true">
+    <wd-search :placeholder="placeholder" hide-cancel disabled />
+  </view>
+
+  <!-- 搜索弹窗 -->
+  <wd-popup v-model="visible" position="top" @close="visible = false">
+    <view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          任务名称
+        </view>
+        <wd-input
+          v-model="formData.name"
+          placeholder="请输入任务名称"
+          clearable
+        />
+      </view>
+      <view class="yd-search-form-item">
+        <view class="yd-search-form-label">
+          创建时间
+        </view>
+        <view class="yd-search-form-date-range-container">
+          <view class="flex-1" @click="visibleCreateTime[0] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.createTime?.[0]) || '开始日期' }}
+            </view>
+          </view>
+          -
+          <view class="flex-1" @click="visibleCreateTime[1] = true">
+            <view class="yd-search-form-date-range-picker">
+              {{ formatDate(formData.createTime?.[1]) || '结束日期' }}
+            </view>
+          </view>
+        </view>
+        <wd-datetime-picker-view v-if="visibleCreateTime[0]" v-model="tempCreateTime[0]" type="date" />
+        <view v-if="visibleCreateTime[0]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleCreateTime[0] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime0Confirm">
+            确定
+          </wd-button>
+        </view>
+        <wd-datetime-picker-view v-if="visibleCreateTime[1]" v-model="tempCreateTime[1]" type="date" />
+        <view v-if="visibleCreateTime[1]" class="yd-search-form-date-range-actions">
+          <wd-button size="small" plain @click="visibleCreateTime[1] = false">
+            取消
+          </wd-button>
+          <wd-button size="small" type="primary" @click="handleCreateTime1Confirm">
+            确定
+          </wd-button>
+        </view>
+      </view>
+      <view class="yd-search-form-actions">
+        <wd-button class="flex-1" plain @click="handleReset">
+          重置
+        </wd-button>
+        <wd-button class="flex-1" type="primary" @click="handleSearch">
+          搜索
+        </wd-button>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, ref } from 'vue'
+import { getNavbarHeight } from '@/utils'
+import { formatDate, formatDateRange } from '@/utils/date'
+
+const emit = defineEmits<{
+  search: [data: Record<string, any>]
+  reset: []
+}>()
+
+const visible = ref(false)
+const formData = reactive({
+  name: undefined as string | undefined, // 任务名称
+  createTime: [undefined, undefined] as [number | undefined, number | undefined], // 创建时间
+})
+
+/** 搜索条件 placeholder 拼接 */
+const placeholder = computed(() => {
+  const conditions: string[] = []
+  if (formData.name) {
+    conditions.push(`名称:${formData.name}`)
+  }
+  if (formData.createTime?.[0] && formData.createTime?.[1]) {
+    conditions.push(`时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索任务'
+})
+
+// 时间选择器状态
+const visibleCreateTime = ref<[boolean, boolean]>([false, false])
+const tempCreateTime = ref<[number, number]>([Date.now(), Date.now()])
+
+/** 创建时间[0]确认 */
+function handleCreateTime0Confirm() {
+  formData.createTime = [tempCreateTime.value[0], formData.createTime?.[1]]
+  visibleCreateTime.value[0] = false
+}
+
+/** 创建时间[1]确认 */
+function handleCreateTime1Confirm() {
+  formData.createTime = [formData.createTime?.[0], tempCreateTime.value[1]]
+  visibleCreateTime.value[1] = false
+}
+
+/** 搜索 */
+function handleSearch() {
+  visible.value = false
+  emit('search', {
+    ...formData,
+    createTime: formatDateRange(formData.createTime),
+  })
+}
+
+/** 重置 */
+function handleReset() {
+  formData.name = undefined
+  formData.createTime = [undefined, undefined]
+  visible.value = false
+  emit('reset')
+}
+</script>
--- a/src/pages-bpm/task/manager/index.vue
+++ b/src/pages-bpm/task/manager/index.vue
@@ -0,0 +1,166 @@
+<template>
+  <view class="yd-page-container">
+    <!-- 顶部导航栏 -->
+    <wd-navbar
+      title="任务管理"
+      left-arrow placeholder safe-area-inset-top fixed
+      @click-left="handleBack"
+    />
+
+    <!-- 搜索组件 -->
+    <SearchForm @search="handleQuery" @reset="handleReset" />
+
+    <!-- 任务列表 -->
+    <view class="p-24rpx">
+      <view
+        v-for="item in list"
+        :key="item.id"
+        class="mb-24rpx overflow-hidden rounded-12rpx bg-white shadow-sm"
+        @click="handleDetail(item)"
+      >
+        <view class="p-24rpx">
+          <view class="mb-16rpx flex items-center justify-between">
+            <view class="mr-16rpx flex-1">
+              <view class="line-clamp-1 text-32rpx text-[#333] font-semibold">
+                {{ item.processInstance?.name || '-' }}
+              </view>
+              <view class="mt-8rpx text-24rpx text-[#999]">
+                当前任务：{{ item.name }}
+              </view>
+            </view>
+            <DictTag :type="DICT_TYPE.BPM_TASK_STATUS" :value="item.status" />
+          </view>
+          <view class="mb-12rpx flex items-center">
+            <view class="mr-8rpx h-48rpx w-48rpx flex items-center justify-center rounded-full bg-[#1890ff] text-20rpx text-white">
+              {{ item.processInstance?.startUser?.nickname?.[0] || '?' }}
+            </view>
+            <view class="flex-1">
+              <view class="text-28rpx text-[#333]">
+                发起人：{{ item.processInstance?.startUser?.nickname || '-' }}
+              </view>
+              <view class="text-24rpx text-[#999]">
+                审批人：{{ item.assigneeUser?.nickname || '-' }}
+              </view>
+            </view>
+          </view>
+          <view class="rounded-8rpx bg-[#f7f8f9] p-16rpx">
+            <view class="mb-8rpx flex items-center justify-between text-26rpx">
+              <text class="text-[#999]">任务开始时间</text>
+              <text class="text-[#333]">{{ formatDateTime(item.createTime) }}</text>
+            </view>
+            <view v-if="item.endTime" class="mb-8rpx flex items-center justify-between text-26rpx">
+              <text class="text-[#999]">任务结束时间</text>
+              <text class="text-[#333]">{{ formatDateTime(item.endTime) }}</text>
+            </view>
+            <view v-if="item.reason" class="flex items-center justify-between text-26rpx">
+              <text class="text-[#999]">审批建议</text>
+              <text class="line-clamp-1 ml-16rpx flex-1 text-right text-[#333]">{{ item.reason }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 加载更多 -->
+      <view v-if="loadMoreState !== 'loading' && list.length === 0" class="py-100rpx text-center">
+        <wd-status-tip image="content" tip="暂无任务" />
+      </view>
+      <wd-loadmore
+        v-if="list.length > 0"
+        :state="loadMoreState"
+        @reload="loadMore"
+      />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { Task } from '@/api/bpm/task'
+import type { LoadMoreState } from '@/http/types'
+import { onReachBottom } from '@dcloudio/uni-app'
+import { onMounted, ref } from 'vue'
+import { getTaskManagerPage } from '@/api/bpm/task'
+import DictTag from '@/components/dict-tag/dict-tag.vue'
+import { navigateBackPlus } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+import { formatDateTime } from '@/utils/date'
+import SearchForm from './components/search-form.vue'
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+const total = ref(0)
+const list = ref<Task[]>([])
+const loadMoreState = ref<LoadMoreState>('loading')
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+})
+
+/** 返回上一页 */
+function handleBack() {
+  navigateBackPlus()
+}
+
+/** 查询任务列表 */
+async function getList() {
+  loadMoreState.value = 'loading'
+  try {
+    const data = await getTaskManagerPage(queryParams.value)
+    list.value = [...list.value, ...data.list]
+    total.value = data.total
+    loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
+  } catch {
+    queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
+    loadMoreState.value = 'error'
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery(data?: Record<string, any>) {
+  queryParams.value = {
+    ...data,
+    pageNo: 1,
+    pageSize: queryParams.value.pageSize,
+  }
+  list.value = []
+  getList()
+}
+
+/** 重置按钮操作 */
+function handleReset() {
+  handleQuery()
+}
+
+/** 加载更多 */
+function loadMore() {
+  if (loadMoreState.value === 'finished') {
+    return
+  }
+  queryParams.value.pageNo++
+  getList()
+}
+
+/** 查看详情（历史） */
+function handleDetail(item: Task) {
+  if (item.processInstance?.id) {
+    uni.navigateTo({ url: `/pages-bpm/processInstance/detail/index?id=${item.processInstance.id}` })
+  }
+}
+
+/** 触底加载更多 */
+onReachBottom(() => {
+  loadMore()
+})
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/pages/index/index.ts
+++ b/src/pages/index/index.ts
@@ -30,6 +30,7 @@ const menuGroupsData: MenuGroup[] = [
    key: 'system',
    name: '系统管理',
    menus: [
+      // === 用户权限相关（蓝色系）===
      {
        key: 'user',
        name: '用户管理',
@@ -41,9 +42,9 @@ const menuGroupsData: MenuGroup[] = [
      {
        key: 'role',
        name: '角色管理',
-        icon: 'usergroup',
+        icon: 'secured', // 安全/权限
        url: '/pages-system/role/index',
-        iconColor: '#52c41a',
+        iconColor: '#2f54eb',
        permission: 'system:role:query',
      },
      {
@@ -51,13 +52,14 @@ const menuGroupsData: MenuGroup[] = [
        name: '菜单管理',
        icon: 'menu-fold',
        url: '/pages-system/menu/index',
-        iconColor: '#fa8c16',
+        iconColor: '#597ef7',
        permission: 'system:menu:query',
      },
+      // === 组织架构相关（青色系）===
      {
        key: 'dept',
        name: '部门管理',
-        icon: 'attach',
+        icon: 'layers', // 层级结构
        url: '/pages-system/dept/index',
        iconColor: '#13c2c2',
        permission: 'system:dept:query',
@@ -67,13 +69,14 @@ const menuGroupsData: MenuGroup[] = [
        name: '岗位管理',
        icon: 'flag',
        url: '/pages-system/post/index',
-        iconColor: '#eb2f96',
+        iconColor: '#36cfc9',
        permission: 'system:post:query',
      },
+      // === 日志相关（紫色系）===
      {
        key: 'operateLog',
        name: '操作日志',
-        icon: 'format-horizontal-align-top',
+        icon: 'history', // 历史记录
        url: '/pages-system/operate-log/index',
        iconColor: '#722ed1',
        permission: 'system:operate-log:query',
@@ -81,25 +84,26 @@ const menuGroupsData: MenuGroup[] = [
      {
        key: 'loginLog',
        name: '登录日志',
-        icon: 'view-list',
+        icon: 'login', // 登录
        url: '/pages-system/login-log/index',
-        iconColor: '#1677ff',
+        iconColor: '#9254de',
        permission: 'system:login-log:query',
      },
+      // === 消息通知相关（橙色系）===
      {
        key: 'notice',
        name: '通知公告',
-        icon: 'spool',
+        icon: 'notification', // 通知
        url: '/pages-system/notice/index',
-        iconColor: '#faad14',
+        iconColor: '#fa8c16',
        permission: 'system:notice:query',
      },
      {
        key: 'sms',
        name: '短信管理',
-        icon: 'chat1',
+        icon: 'chat1', // 消息
        url: '/pages-system/sms/index',
-        iconColor: '#36cfc9',
+        iconColor: '#faad14',
        permission: 'system:sms-channel:query',
      },
      {
@@ -107,23 +111,24 @@ const menuGroupsData: MenuGroup[] = [
        name: '邮件管理',
        icon: 'mail',
        url: '/pages-system/mail/index',
-        iconColor: '#40a9ff',
+        iconColor: '#ffc53d',
        permission: 'system:mail-account:query',
      },
      {
        key: 'notify',
        name: '站内信管理',
-        icon: 'read',
+        icon: 'read', // 阅读/消息
        url: '/pages-system/notify/index',
-        iconColor: '#ff85c0',
+        iconColor: '#ff7a45',
        permission: 'system:notify-template:query',
      },
+      // === 系统配置相关（粉色系）===
      {
        key: 'tenant',
        name: '租户管理',
        icon: 'shop',
        url: '/pages-system/tenant/index',
-        iconColor: '#9254de',
+        iconColor: '#eb2f96',
        permission: 'system:tenant:query',
      },
      {
@@ -131,23 +136,23 @@ const menuGroupsData: MenuGroup[] = [
        name: '三方用户',
        icon: 'share',
        url: '/pages-system/social/index',
-        iconColor: '#08979c',
+        iconColor: '#f759ab',
        permission: 'system:social-client:query',
      },
      {
        key: 'oauth2',
        name: 'OAuth2.0',
-        icon: 'transfer',
+        icon: 'lock-on', // 授权/锁
        url: '/pages-system/oauth2/index',
-        iconColor: '#d48806',
+        iconColor: '#ff85c0',
        permission: 'system:oauth2-client:query',
      },
      {
        key: 'dict',
        name: '字典管理',
-        icon: 'hourglass',
+        icon: 'books', // 字典/书籍
        url: '/pages-system/dict/index',
-        iconColor: '#faad14',
+        iconColor: '#c41d7f',
        permission: 'system:dict:query',
      },
      {
@@ -155,7 +160,7 @@ const menuGroupsData: MenuGroup[] = [
        name: '地区管理',
        icon: 'location',
        url: '/pages-system/area/index',
-        iconColor: '#d50f0f',
+        iconColor: '#f5222d',
      },
    ],
  },
@@ -163,12 +168,13 @@ const menuGroupsData: MenuGroup[] = [
    key: 'infra',
    name: '基础设施',
    menus: [
+      // === 日志监控相关（红蓝色系）===
      {
        key: 'accessLog',
        name: '访问日志',
-        icon: 'laptop',
+        icon: 'view-list', // 列表/日志
        url: '/pages-infra/api-access-log/index',
-        iconColor: '#2f54eb',
+        iconColor: '#1890ff',
        permission: 'infra:api-access-log:query',
      },
      {
@@ -179,72 +185,77 @@ const menuGroupsData: MenuGroup[] = [
        iconColor: '#f5222d',
        permission: 'infra:api-error-log:query',
      },
+      // === 配置相关（青紫色系）===
      {
        key: 'config',
        name: '参数配置',
        icon: 'setting',
        url: '/pages-infra/config/index',
-        iconColor: '#597ef7',
+        iconColor: '#722ed1',
        permission: 'infra:config:query',
      },
      {
        key: 'dataSourceConfig',
        name: '数据源配置',
-        icon: 'setting',
+        icon: 'server', // 服务器/数据源
        url: '/pages-infra/data-source-config/index',
-        iconColor: '#13c2c2',
+        iconColor: '#9254de',
        permission: 'infra:data-source-config:query',
      },
+      // === 文件存储相关（蓝色系）===
      {
        key: 'file',
        name: '文件管理',
        icon: 'folder',
        url: '/pages-infra/file/index',
-        iconColor: '#1890ff',
+        iconColor: '#2f54eb',
        permission: 'infra:file:query',
      },
+      // === 通信相关（青色系）===
      {
        key: 'websocket',
        name: 'WebSocket',
-        icon: 'chat',
+        icon: 'wifi', // 网络连接
        url: '/pages-infra/web-socket/index',
-        iconColor: '#36cfc9',
+        iconColor: '#13c2c2',
      },
+      // === 任务调度相关（橙色系）===
      {
        key: 'job',
        name: '定时任务',
-        icon: 'clock',
+        icon: 'time', // 时间/定时
        url: '/pages-infra/job/index',
-        iconColor: '#eb2f96',
+        iconColor: '#fa8c16',
        permission: 'infra:job:query',
      },
+      // === 开发工具相关（绿色系）===
      {
        key: 'codegen',
        name: '代码生成',
-        icon: 'chevron-up-rectangle',
+        icon: 'code',
        url: ONLY_PC_PAGE,
-        iconColor: '#1677ff',
+        iconColor: '#52c41a',
      },
      {
        key: 'build',
        name: '表单构建',
        icon: 'edit-outline',
        url: ONLY_PC_PAGE,
-        iconColor: '#722ed1',
+        iconColor: '#73d13d',
      },
      {
        key: 'swagger',
        name: 'API 接口',
        icon: 'link',
        url: ONLY_PC_PAGE,
-        iconColor: '#52c41a',
+        iconColor: '#95de64',
      },
      {
        key: 'druid',
        name: '监控中心',
-        icon: 'computer',
+        icon: 'dashboard', // 仪表盘
        url: ONLY_PC_PAGE,
-        iconColor: '#fa8c16',
+        iconColor: '#389e0d',
      },
    ],
  },
@@ -252,20 +263,21 @@ const menuGroupsData: MenuGroup[] = [
    key: 'bpm',
    name: '工作流程',
    menus: [
+      // === 个人工作台（蓝色系）===
      {
        key: 'bpmMy',
        name: '我的流程',
-        icon: 'list',
+        icon: 'user-circle', // 个人
        url: '/pages/bpm/index?tab=my',
-        iconColor: '#597ef7',
+        iconColor: '#1890ff',
        permission: 'bpm:process-instance:query',
      },
      {
        key: 'bpmTodo',
        name: '待办任务',
-        icon: 'clock',
+        icon: 'time', // 待处理/时间
        url: '/pages/bpm/index?tab=todo',
-        iconColor: '#ff7a45',
+        iconColor: '#fa8c16',
        permission: 'bpm:task:query',
      },
      {
@@ -273,7 +285,7 @@ const menuGroupsData: MenuGroup[] = [
        name: '已办任务',
        icon: 'check-circle',
        url: '/pages/bpm/index?tab=done',
-        iconColor: '#73d13d',
+        iconColor: '#52c41a',
        permission: 'bpm:task:query',
      },
      {
@@ -281,29 +293,31 @@ const menuGroupsData: MenuGroup[] = [
        name: '抄送我的',
        icon: 'mail',
        url: '/pages/bpm/index?tab=copy',
-        iconColor: '#5cdbd3',
+        iconColor: '#13c2c2',
        permission: 'bpm:process-instance-cc:query',
      },
+      // === 流程设计相关（紫色系）===
      {
        key: 'bpmModel',
        name: '流程模型',
-        icon: 'app',
+        icon: 'app', // 应用/模型
        url: ONLY_PC_PAGE,
-        iconColor: '#1677ff',
+        iconColor: '#722ed1',
        permission: 'bpm:process-definition:query',
      },
      {
        key: 'bpmForm',
        name: '流程表单',
-        icon: 'edit-1',
+        icon: 'edit-1', // 编辑/表单
        url: ONLY_PC_PAGE,
-        iconColor: '#722ed1',
+        iconColor: '#9254de',
        permission: 'bpm:form:query',
      },
+      // === 流程配置相关（橙黄色系）===
      {
        key: 'bpmCategory',
        name: '流程分类',
-        icon: 'folder',
+        icon: 'folder-open', // 分类/文件夹
        url: '/pages-bpm/category/index',
        iconColor: '#faad14',
        permission: 'bpm:category:query',
@@ -313,15 +327,16 @@ const menuGroupsData: MenuGroup[] = [
        name: '用户分组',
        icon: 'usergroup',
        url: '/pages-bpm/user-group/index',
-        iconColor: '#52c41a',
+        iconColor: '#ffc53d',
        permission: 'bpm:user-group:query',
      },
+      // === 流程扩展相关（粉色系）===
      {
        key: 'bpmProcessListener',
        name: '流程监听器',
-        icon: 'bell',
+        icon: 'sound', // 监听/声音
        url: '/pages-bpm/process-listener/index',
-        iconColor: '#1890ff',
+        iconColor: '#eb2f96',
        permission: 'bpm:process-listener:query',
      },
      {
@@ -329,9 +344,26 @@ const menuGroupsData: MenuGroup[] = [
        name: '流程表达式',
        icon: 'code',
        url: '/pages-bpm/process-expression/index',
-        iconColor: '#eb2f96',
+        iconColor: '#f759ab',
        permission: 'bpm:process-expression:query',
      },
+      // === 流程管理相关（青色系）===
+      {
+        key: 'bpmProcessInstanceManager',
+        name: '流程实例',
+        icon: 'queue', // 队列/实例
+        url: '/pages-bpm/processInstance/manager/index',
+        iconColor: '#36cfc9',
+        permission: 'bpm:process-instance:manager-query',
+      },
+      {
+        key: 'bpmTaskManager',
+        name: '流程任务',
+        icon: 'bulletpoint', // 任务列表
+        url: '/pages-bpm/task/manager/index',
+        iconColor: '#5cdbd3',
+        permission: 'bpm:task:manager-query',
+      },
    ],
  },
 ]