84 lines
2.7 KiB
Vue
84 lines
2.7 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { Pencil, Trash2, Copy, Archive, Download } from '@lucide/vue'
|
||
import { G3Message, G3Table } from '@g3soft/ui'
|
||
import type { G3TableColumn, TableRow } from '@g3soft/ui'
|
||
|
||
// 操作列：列上加 actions 即可，渲染成一排小按钮。
|
||
// - type: 'danger' | 'delete' → 危险色
|
||
// - visible / disabled 可传 boolean 或 (row) => boolean
|
||
// - confirm：字符串=标题，对象=完整配置；确认后才执行 onClick
|
||
// - type: 'more' 的项收进「更多」下拉（它的 items 是子项）
|
||
//
|
||
// 操作列建议显式写 resizable: false —— 宽度由内容决定，拖了不会落库，列一重建就丢。
|
||
const data = ref<TableRow[]>([
|
||
{ id: 1, name: '框架合同', amount: 120000, status: 'draft' },
|
||
{ id: 2, name: '采购订单', amount: 86000, status: 'active' },
|
||
{ id: 3, name: '验收单', amount: 43000, status: 'archived' },
|
||
])
|
||
|
||
const columns: G3TableColumn<TableRow>[] = [
|
||
{ dataIndex: 'name', title: '名称', width: 180 },
|
||
{ dataIndex: 'amount', title: '金额', width: 120, align: 'right' },
|
||
{
|
||
dataIndex: 'op',
|
||
title: '操作',
|
||
width: 220,
|
||
resizable: false,
|
||
actions: [
|
||
{
|
||
label: '编辑',
|
||
icon: Pencil,
|
||
onClick: (row) => G3Message.info(`编辑：${row.name}`),
|
||
},
|
||
{
|
||
label: '删除',
|
||
icon: Trash2,
|
||
type: 'danger',
|
||
// 已归档的单据不允许删除
|
||
disabled: (row) => row.status === 'archived',
|
||
confirm: { title: '确认删除', description: '删除后不可恢复，确定继续吗？' },
|
||
onClick: (row) => G3Message.success(`已删除：${row.name}`),
|
||
},
|
||
{
|
||
type: 'more',
|
||
label: '更多',
|
||
items: [
|
||
{
|
||
key: 'copy',
|
||
label: '复制',
|
||
icon: Copy,
|
||
onClick: (row) => G3Message.info(`复制：${row.name}`),
|
||
},
|
||
{
|
||
key: 'archive',
|
||
label: '归档',
|
||
icon: Archive,
|
||
// 已归档的不再显示该项（visible 传函数）
|
||
visible: (row) => row.status !== 'archived',
|
||
onClick: (row) => G3Message.success(`已归档：${row.name}`),
|
||
},
|
||
{
|
||
key: 'export',
|
||
label: '导出',
|
||
icon: Download,
|
||
onClick: (row) => G3Message.info(`导出：${row.name}`),
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
]
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<p style="margin: 0 0 8px; color: #999; font-size: 12px">
|
||
「删除」带二次确认，且对已归档行禁用；「更多」里「归档」对已归档行隐藏。
|
||
</p>
|
||
<div style="height: 260px">
|
||
<G3Table :columns="columns" :data-source="data" />
|
||
</div>
|
||
</div>
|
||
</template>
|