Компонент представления данных

Индекс пакета: VUEADV

Описание

Библиотека компонентов Vue для отображения данных в таблице и виде карточек с поддержкой фильтрации, управления колонками и ленивой подгрузки — подходит для проектов, где требуется единый интерфейс просмотра и администрирования сущностей.

Окружение

• Docker >= 26.0.0
• Docker Compose >= 1.29.2

Переменные окружения

# Индекс проекта
PROJECT_INDEX=VUEADV

# Пользователь и группа контейнера (UID/GID)
APP_USER=1000
APP_GROUP=1000

# Настройки docker-реестра
DOCKER_REGISTRY=registry.local
DOCKER_APP_IMAGE_NAME=vueadv-library
DOCKER_IMAGE_VERSION=0.1.0

# Параметры приложения
APP_NODE_ENV=production
APP_PORT=4173

Установка в проект

1. Установить пакет компонентов:

   npm install @efko/data-view

2. Зарегистрировать компоненты и стиль в точке входа приложения:

   import { createApp } from 'vue';
   import Antd from 'ant-design-vue';
   import 'ant-design-vue/dist/reset.css';
   import { DataView } from '@efko/data-view';
   
   const app = createApp(App);
   app.use(Antd);
   app.component('DataView', DataView);
   app.mount('#app');

Запуск для локальной разработки

1. Установить зависимости проекта внутри контейнера билдера:

   make docker-build

2. Запустить контейнер data-view-app в режиме разработки:

   make up

3. Просмотреть собранные артефакты и их состояние:

   make logs

4. Для пересборки библиотеки и генерации типов выполнить:

   make restart

5. Для интерактивной работы:

   make shell

Пример использования

<template>
  <DataView
    :loading="loading"
    :columns="columns"
    :data-source="rows"
    :pagination="true"
    :meta="meta"
    :can-edit="true"
    :edit-action="true"
    :filter-values="filters"
    @page-change="handlePage"
    @size-change="handleSize"
    @filter-apply="handleFilter"
    @edit="handleEdit"
  >
    <template #title>
      <h2 class="text-lg font-semibold">Список заявок</h2>
    </template>
    <template #bodyCell="{ column, record }">
      <span v-if="column.dataIndex === 'amount'">
        {{ new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(record.amount) }}
      </span>
      <span v-else>{{ record[column.dataIndex] }}</span>
    </template>
    <template #actionColumn="{ record }">
      <a-space>
        <a-button type="link" @click="handleEdit(record)">Изменить</a-button>
        <a-button type="link" danger @click="handleDelete(record)">Удалить</a-button>
      </a-space>
    </template>
  </DataView>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { ColumnConfig, Meta, TableRecord } from '@efko/data-view';

const loading = ref(false);
const filters = ref({});

const columns: ColumnConfig<TableRecord>[] = [
  { title: 'ID', dataIndex: 'id', key: 'id', sortable: true },
  { title: 'Название', dataIndex: 'name', key: 'name', filterable: true },
  { title: 'Сумма', dataIndex: 'amount', key: 'amount', sortable: true, headerAlign: 'right', cellAlign: 'right' },
  { title: 'Статус', dataIndex: 'status', key: 'status', filterable: true }
];

const rows = ref<TableRecord[]>([
  { id: 101, name: 'Заявка №101', amount: 150000, status: 'draft' },
  { id: 102, name: 'Заявка №102', amount: 82000, status: 'approved' }
]);

const meta = ref<Meta>({
  currentPage: 1,
  pageSize: 10,
  total: 2,
  pageSizeOptions: [10, 20, 50]
});

const handlePage = (page: number) => {
  // загрузка данных для выбранной страницы
  meta.value.currentPage = page;
};

const handleSize = (page: number, size: number) => {
  meta.value.currentPage = page;
  meta.value.pageSize = size;
};

const handleFilter = ({ key, value }: { key: string; value: unknown[] }) => {
  filters.value = { ...filters.value, [key]: value };
};

const handleEdit = (record: TableRecord) => {
  console.log('Edit', record);
};

const handleDelete = (record: TableRecord) => {
  console.log('Delete', record);
};
</script>