81 lines
2.2 KiB
Vue
81 lines
2.2 KiB
Vue
<script setup lang="tsx">
|
|
import type { ColumnDef } from '@tanstack/vue-table'
|
|
import DataTable from '~/components/common/table/DataTable.vue'
|
|
import DataTableColumnHeader from '~/components/common/table/DataTableColumnHeader.vue'
|
|
import DataTableRowActions from '~/components/common/table/DataTableRowActions.vue'
|
|
|
|
const router = useRoute()
|
|
const resource = usePolicyStore()
|
|
type Task = typeof resource.policy[0]
|
|
|
|
console.log(router.params.name)
|
|
|
|
const columns: ColumnDef<Task, any>[] = [
|
|
{
|
|
accessorKey: 'name',
|
|
header: ({ column }) =>
|
|
<DataTableColumnHeader column={column} title="政策名称" />,
|
|
cell: ({ row }) => <div class='w-26'>{row.original.name}</div>,
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
},
|
|
{
|
|
accessorKey: 'description',
|
|
header: ({ column }) =>
|
|
<DataTableColumnHeader column={column} title="描述" />,
|
|
|
|
cell: ({ row }) => <div class='w-26'>{row.original.description}</div>,
|
|
},
|
|
{
|
|
accessorKey: 'url',
|
|
header: ({ column }) =>
|
|
<DataTableColumnHeader column={column} title="地址" />,
|
|
|
|
cell: ({ row }) => <FormPolicyShowWeb url={row.original.url}/>,
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
},
|
|
},
|
|
{
|
|
id: 'actions',
|
|
cell: ({ row }) => (
|
|
<DataTableRowActions row={row} menus={[{
|
|
label: '修改',
|
|
icon: 'tabler:edit',
|
|
click: () => {
|
|
console.log('edit', row.original)
|
|
},
|
|
}, {
|
|
label: '删除',
|
|
icon: 'tabler:trash',
|
|
click: () => {
|
|
console.log('delete', row.original)
|
|
},
|
|
}]}/>
|
|
),
|
|
},
|
|
]
|
|
|
|
onMounted(() => {
|
|
console.log(resource.policy)
|
|
console.log(resource.policy.filter(i => i.type === router.params.name))
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-4 mt-10 mx-autoto ">
|
|
<div class="flex justify-center">
|
|
<h1 class="text-3xl font-bold mb-4 text-center">
|
|
{{ router.params.name }}政策
|
|
</h1>
|
|
</div>
|
|
<DataTable :data="resource.policy.filter(i => i.type === router.params.name)" :columns="columns" class="px-10">
|
|
<template #toolbar>
|
|
<Button size="xs">
|
|
添加
|
|
</Button>
|
|
</template>
|
|
</DataTable>
|
|
</div>
|
|
</template>
|