ProList 高级列表 ​

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Delete2, Disable, Enable } from '@uniboot/icons-vue'
import { ProList, UButton, USpace } from 'uniboot-ui'

type Row = {
  id: number
  name: string
  owner: string
  department: string
  status: number
  createdAt: string
}

const ROW_COUNT = 128

const DEPTS = ['rd', 'ops', 'mkt'] as const
const OWNERS = [
  'Alice',
  'Bob',
  'Carol',
  'Dave',
  'Erin',
  'Frank',
  'Grace',
  'Henry',
]

const all = ref<Row[]>(
  Array.from({ length: ROW_COUNT }, (_, i) => {
    const day = (i % 28) + 1
    const month = (Math.floor(i / 28) % 12) + 1
    return {
      id: i + 1,
      name: `Item ${i + 1}`,
      owner: OWNERS[i % OWNERS.length],
      department: DEPTS[i % DEPTS.length],
      status: i % 2,
      createdAt: `2026-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
    }
  })
)

const selectedKeys = ref<Array<string | number>>([])
const expandedKeys = ref<Array<string | number>>([])

const metas = computed(() => ({
  title: { dataIndex: 'name' as const },
  subTitle: (r: Row) => `负责人：${r.owner}｜部门：${r.department}`,
  description: (r: Row) => `创建时间：${r.createdAt}`,
  content: (r: Row) => (r.status === 1 ? '状态：启用' : '状态：停用'),
}))

function onDisable(row: Row) {
  console.log('disable', row.id)
}

function onEnable(row: Row) {
  console.log('enable', row.id)
}

function onDelete(row: Row) {
  console.log('delete', row.id)
}

async function request({
  current,
  pageSize,
  keyword,
}: {
  current: number
  pageSize: number
  keyword?: string
  query: Record<string, unknown>
}) {
  await new Promise((r) => setTimeout(r, 200))
  let rows = [...all.value]
  if (keyword) {
    rows = rows.filter(
      (r) => r.name.includes(keyword) || r.owner.includes(keyword)
    )
  }
  const start = (current - 1) * pageSize
  return {
    data: rows.slice(start, start + pageSize),
    total: rows.length,
    success: true,
  }
}
</script>

<template>
  <div class="pro-list-doc-demo">
    <pro-list
      v-model:selected-row-keys="selectedKeys"
      v-model:expanded-row-keys="expandedKeys"
      header-title="高级列表"
      show-search
      row-key="id"
      :metas="metas"
      :request="request"
      show-actions="hover"
      :grid="{ column: 2, gutter: 12, minItemWidth: '320px' }"
      :row-selection="{ selectedRowKeys: selectedKeys }"
      :expandable="{ expandedRowKeys: expandedKeys }"
    >
      <template #actions="{ item }">
        <u-space>
          <u-button
            :icon="Disable"
            tooltip="禁用"
            type="danger"
            @click="onDisable(item as Row)"
          />
          <u-button
            :icon="Enable"
            tooltip="启用"
            type="primary"
            @click="onEnable(item as Row)"
          />
          <u-button
            :icon="Delete2"
            tooltip="删除"
            type="danger"
            @click="onDelete(item as Row)"
          />
        </u-space>
      </template>
      <template #expandedRowRender="{ item }">
        <div style="color: var(--u-text-color-regular)">
          这里是展开内容：{{ (item as Row).name }}（{{ (item as Row).id }}）
        </div>
      </template>
    </pro-list>
  </div>
</template>

<style scoped>
.pro-list-doc-demo {
  box-sizing: border-box;
  width: 100%;
  min-height: 240px;
  padding: 8px 0 16px;
}
</style>