132 lines
4.4 KiB
Vue
132 lines
4.4 KiB
Vue
<script setup lang="tsx">
|
|
import type { ColumnDef } from '@tanstack/vue-table'
|
|
import Badge from '../../../packages/ui/components/ui/badge/Badge.vue'
|
|
import DataTable from '~/components/common/table/DataTable.vue'
|
|
import DataTableColumnHeader from '~/components/common/table/DataTableColumnHeader.vue'
|
|
import DataTableRowActions from '~/components/common/table/DataTableRowActions.vue'
|
|
import EditEnv from '~/components/form/resource/edit-env.vue'
|
|
import ShowCraft from '~/components/form/resource/show-craft.vue'
|
|
|
|
const resource = useResourceStore()
|
|
|
|
const columns: ColumnDef<ResourceTechnologyInfo, any>[] = [
|
|
{
|
|
accessorKey: 'properThing',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="适用废弃物" />,
|
|
cell: ({ row }) => <div class='w-26'>{row.original.properThing.join(',')}</div>,
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
},
|
|
{
|
|
accessorKey: 'craftImage',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="工艺流程" />,
|
|
cell: ({ row }) => (<ShowCraft resource={row.original}/>),
|
|
},
|
|
{
|
|
accessorKey: 'device',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="所需设备" />,
|
|
cell: ({ row }) => <div class='w-26'>{row.original.device}</div>,
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'env',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="场地条件" />,
|
|
cell: ({ row }) => <EditEnv env={row.original.env} />,
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'production',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="产出产品" />,
|
|
cell: ({ row }) => <div class='w-26'>{row.original.production}</div>,
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'work',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="用工" />,
|
|
cell: ({ row }) => <div class='w-26'>{row.original.work}</div>,
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'discharge',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="排放物" />,
|
|
cell: ({ row }) => (
|
|
<>
|
|
|
|
<div class=''>{ row.original.discharge.effluent.map(i => (<Badge class="bg-blue-500">{i}</Badge>))} </div>
|
|
|
|
<div class=''>{ row.original.discharge.sludge.map(i => (<Badge class="bg-orange-500">{i}</Badge>))} </div>
|
|
<div class=''>{ row.original.discharge.gas.map(i => (<Badge class="bg-gray-500">{i}</Badge>))} </div>
|
|
</>
|
|
),
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'cost',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="成本" />,
|
|
cell: ({ row }) => <div class='w-26'>{row.original.cost}元</div>,
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'efficiency',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="效益" />,
|
|
cell: ({ row }) => <div class='w-26'>{row.original.efficiency}</div>,
|
|
filterFn: (row, id, value) => {
|
|
return value.includes(row.getValue(id))
|
|
},
|
|
},
|
|
{
|
|
accessorKey: 'utilization',
|
|
header: ({ column }) => <DataTableColumnHeader column={column} title="资源利用效率" />,
|
|
cell: ({ row }) => <div class='w-26'>{row.original.utilization}</div>,
|
|
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)
|
|
},
|
|
}]}/>
|
|
),
|
|
},
|
|
]
|
|
</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">
|
|
资源化技术信息
|
|
</h1>
|
|
</div>
|
|
<DataTable :data="resource.resources" :columns="columns" class="px-10">
|
|
<template #toolbar>
|
|
<FormResourceCreateForm />
|
|
</template>
|
|
</DataTable>
|
|
</div>
|
|
</template>
|