src/views/TreeTable.vue - master - spectree/mstroy

src/views/TreeTable.vue
91 строка2 KB
Alastrr
feature: реализация тестового задания согласно тз
16 апр 2026, 23:22
16 апр 2026, 23:2255ff14c
<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from '@/stores'
import type { ValueGetterParams } from 'ag-grid-community'
import type { GridItemInterface } from '@/types/index'
import CategoryCell from '@/components/CategoryCell.vue'

const store = useStore()

const rowData = computed(() => store.tree.getAll())

const getDataPath = (data: GridItemInterface) =>
    store.tree
        .getAllParents(data.id)
        .reverse()
        .map((el) => String(el.id))

const autoSizeStrategy = { type: 'fitGridWidth' }

const defaultColDef = {
    cellStyle: { padding: '0 1rem' },
}

const columnDefs = [
    {
        headerName: '№ п/п',
        width: 100,
        valueGetter: (params: ValueGetterParams) =>
            (params.node?.rowIndex ?? 0) + 1,
    },
    {
        headerName: 'Категория',
        flex: 1,
        cellRenderer: CategoryCell,
        valueGetter: (params: ValueGetterParams) => {
            const children = store.tree.getChildren(params.data?.id)
            return children.length > 0 ? 'Группа' : 'Элемент'
        },
    },
    {
        headerName: 'Наименование',
        flex: 2,
        valueGetter: (params: ValueGetterParams) => params.data?.label,
    },
]
</script>

<template>
    <div class="table-wrapper">
        <ag-grid-vue
            :rowData="rowData"
            :columnDefs="columnDefs"
            :defaultColDef="defaultColDef"
            :autoSizeStrategy="autoSizeStrategy"
            :rowHeight="50"
            :headerHeight="50"
            :treeData="true"
            treeDataDisplayType="custom"
            :getDataPath="getDataPath"
            class="ag-theme-alpine"
        />
    </div>
</template>

<style scoped>
.table-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.table-wrapper :deep(.ag-theme-alpine) {
    height: 500px;
}

.table-wrapper :deep(.ag-header-cell) {
    padding: 0 1rem;
    display: flex;
    align-items: center;
}

.table-wrapper :deep(.ag-cell) {
    display: flex;
    align-items: center;
}

.table-wrapper :deep(.ag-menu) {
    background-color: #fff;
    z-index: 1000;
}
</style>