FlowTaskCardList 流程任务卡片列表

流程任务卡片列表组件。以卡片行形式展示流程任务列表，支持行选择（全选/单选/清空）、搜索、分页、刷新。提供丰富的具名插槽用于自定义各区域内容。

• 基础用法
• Props
• Events
• Slots
• 注意事项

基础用法

<template>
  <FlowTaskCardList
    title="待办任务"
    :items="taskList"
    :loading="loading"
    :pagination="pagination"
    :selected-keys="selectedKeys"
    :search-value="searchValue"
    @row-click="handleTaskClick"
  >
    <template #status="{ row }">
      <n-tag :type="row.urgent ? 'error' : 'default'">
        {{ row.urgent ? '紧急' : '普通' }}
      </n-tag>
    </template>

    <template #actions="{ row }">
      <n-button size="small" type="primary" @click="handleClaim(row)">签收</n-button>
    </template>
  </FlowTaskCardList>
</template>

<script setup>
import { ref } from 'vue'
import FlowTaskCardList from '@/components/flow/FlowTaskCardList.vue'

const taskList = ref([])
const loading = ref(false)
const pagination = ref({ page: 1, pageSize: 10, itemCount: 0 })
const selectedKeys = ref([])
const searchValue = ref('')
</script>

Props

属性	类型	默认值	说明
title	String	'列表'	列表标题
items	Array	[]	任务数据数组
loading	Boolean	false	加载状态
pagination	Object	—	分页配置 { page, pageSize, itemCount, pageSizes, showSizePicker }
selectedKeys	Array	[]	选中行的 key 数组（支持 v-model）
rowKey	String | Function	'id'	行唯一标识字段名或函数 (row) => key
searchValue	String	''	搜索关键词（支持 v-model）
searchPlaceholder	String	'通过名称搜索'	搜索框占位提示
emptyText	String	'暂无数据'	无数据时的提示文本
selectable	Boolean	true	是否显示行选择（复选框）
showSearch	Boolean	true	是否显示搜索框
unreadKey	String	''	未读标识字段名，值为 0 时标记为未读样式

Events

事件名	参数	说明
update:selectedKeys	(keys)	选中项变化
update:searchValue	(value)	搜索值变化
update:page	(page)	页码变化
update:pageSize	(pageSize)	每页条数变化
search	—	点击搜索按钮
refresh	—	点击刷新按钮
rowClick	(row)	点击行时触发

Slots

插槽名	Scope	说明
batch-actions	{ selectedKeys }	批量操作按钮区域
filters	—	筛选器区域（搜索框和刷新按钮之间）
status	{ row }	行状态标签
title	{ row }	行标题（默认取 item.title || item.taskName）
meta	{ row }	行元信息
summary	{ row }	行摘要内容
actions	{ row }	行操作按钮

注意事项

• 行点击事件 rowClick 和内部选择逻辑互斥，选中行后不会触发 rowClick
• 设置 unreadKey 后，值为 0 的行会显示未读样式（左侧蓝色竖线）
• 分页通过 v-model:page 和 v-model:pageSize 双向绑定