Начинаем разработку VespShop

<?php
use Illuminate\Database\Schema\Blueprint;
use Vesp\Services\Migration;

final class Products extends Migration
{

    public function up(): void
    {
        // Таблица категорий товаров
        $this->schema->create(
            'categories',
            function (Blueprint $table) {
                $table->id();
                $table->string('title');
                $table->text('description')->nullable();
                $table->boolean('active')->default(true)->index();
                $table->timestamps();
            }
        );

        // Таблица товаров
        $this->schema->create(
            'products',
            function (Blueprint $table) {
                $table->id();
               // Связь товаров с категорией
                $table->foreignId('category_id')
                    // Запрет удаления категории, если в ней есть хотя-бы 1 товар
                    ->constrained('categories')->restrictOnDelete();
                $table->string('title');
                $table->text('description')->nullable();
                // Артикул товара должен быть уникальным
                $table->string('sku')->unique();
                // Цену храним в колонке с цифрами после запятой
                $table->unsignedDecimal('price')->nullable();
                $table->boolean('active')->default(true)->index();
                $table->timestamps();
            }
        );
    }

    public function down(): void
    {
        // При откате миграции удаляем таблицы в обратном порядке
        $this->schema->drop('products');
        $this->schema->drop('categories');
    }
}

core/src/Models/Category.php

<?php

namespace App\Models;

use Carbon\Carbon;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;

/**
 * @property int $id
 * @property string $title
 * @property ?string $description
 * @property bool $active
 * @property Carbon $created_at
 * @property Carbon $updated_at
 *
 * @property-read Product[] $products
 */
class Category extends Model
{
    protected $guarded = ['id', 'created_at', 'updated_at'];
    protected $casts = ['active' => 'boolean'];

    // Каждая категория может иметь много товаров
    public function products(): HasMany
    {
        return $this->hasMany(Product::class);
    }
}

core/src/Models/Product.php

<?php

namespace App\Models;

use Carbon\Carbon;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;

/**
 * @property int $id
 * @property int $category_id
 * @property string $title
 * @property ?string $description
 * @property string $sku
 * @property float $price
 * @property bool $active
 * @property Carbon $created_at
 * @property Carbon $updated_at
 *
 * @property-read Category $category
 */
class Product extends Model
{
    protected $guarded = ['id', 'created_at', 'updated_at'];
    protected $casts = [
        'active' => 'boolean',
        'price' => 'float',
    ];

    //  Каждый товар принадлежит одной категории
    public function category(): BelongsTo
    {
        return $this->belongsTo(Category::class);
    }
}

core/src/Contollers/Admin/Categories.php

<?php

namespace App\Controllers\Admin;

use App\Models\Category;
use Vesp\Controllers\ModelController;

class Categories extends ModelController
{
    protected $scope = 'products';
    protected $model = Category::class;
}

core/src/Contollers/Admin/Products.php

<?php

namespace App\Controllers\Admin;

use App\Models\Product;
use Vesp\Controllers\ModelController;

class Products extends ModelController
{
    protected $scope = 'products';
    protected $model = Product::class;
}

core/routes.php

$group->group(
    '/admin',
    static function (RouteCollectorProxy $group) {
        // Это было по-умолчанию
        $group->any('/users[/{id}]', App\Controllers\Admin\Users::class);
        $group->any('/user-roles[/{id}]', App\Controllers\Admin\UserRoles::class);

        // А вот это мы добавляем
        $group->any('/categories[/{id}]', App\Controllers\Admin\Categories::class);
        $group->any('/products[/{id}]', App\Controllers\Admin\Products::class);
    }
);

Права доступа

$roles = [
    'Administrator' => [
        'scope' => ['profile', 'users', 'products'], // Вот здесь
    ],
    'User' => [
        'scope' => ['profile'],
    ],
];

Фронтенд

<template>
  <div>
    <vesp-table
      :url="url"
      :header-actions="headerActions"
      :table-actions="tableActions"
      :fields="fields"
      :filters="filters"
      :sort="sort"
      :dir="dir"
      :row-class="rowClass"
    />
    <nuxt-child />
  </div>
</template>

<script>
//  Адрес нашего контроллера
export const url = 'admin/categories'

export default {
  name: 'CategoriesPage',
  validate({app}) {
    // Проверка разрешения
    return app.$hasScope('products')
  },
  data() {
    return {
      url,
      filters: {
        query: '',
      },
      sort: 'id',
      dir: 'asc',
    }
  },
  head() {
    return {
      title: [this.$t('models.category.title_many'), this.$t('project')].join(' / '),
    }
  },
  computed: {
    headerActions() {
      return [{route: 'categories-create', icon: 'plus', title: this.$t('actions.create')}]
    },
    tableActions() {
      return [
        {route: 'categories-edit-id', icon: 'edit', title: this.$t('actions.edit')},
        {function: 'onDelete', icon: 'times', title: this.$t('actions.delete'), variant: 'danger'},
      ]
    },
    fields() {
      return [
        {key: 'id', label: this.$t('components.table.columns.id'), sortable: true},
        {key: 'title', label: this.$t('models.category.title'), sortable: true},
        // Эта колонка будет выводить количество товаров категории
        {key: 'products_count', label: this.$t('models.category.products'), sortable: true},
        {
          key: 'created_at',
          label: this.$t('components.table.columns.created_at'),
          formatter: this.$options.filters.datetime,
          sortable: true,
        },
      ]
    },
  },
  methods: {
    rowClass(item) {
      return item && !item.active ? 'text-muted' : ''
    },
  },
}
</script>

export default [
  // Новые записи ставим в начало
  {
    name: 'products',
    title: 'models.product.title_many',
    scope: 'products',
  },
  {
    name: 'categories',
    title: 'models.category.title_many',
    scope: 'products',
  },
  // Старые, понятно, тоже оставляем как было
  {
    name: 'users',
    title: 'models.user.title_many',
    scope: 'users',
    children: [
      {
        name: 'users-roles',
        title: 'models.user_role.title_many',
        scope: 'users',
      },
    ],
  },
]

Лексиконы

export default {
  project: 'Vesp',
  // ...
  models: {
    user: {
      // ...
    },
    user_role: {
      // ...
    },
    category: {
      title_one: 'Категория',
      title_many: 'Категории',
      title: 'Название',
      description: 'Описание',
      products: 'Товары',
      active: 'Включено',
    },
    product: {
      title_one: 'Товар',
      title_many: 'Товары',
      title: 'Название',
      description: 'Описание',
      sku: 'Артикул',
      price: 'Цена',
      category: 'Категория',
      active: 'Включено',
    },
  },
  // ...
}

Формы редактирования

forms/category.vue

<template>
  <div>
    <b-form-group :label="$t('models.category.title')">
      <b-form-input v-model.trim="record.title" required autofocus />
    </b-form-group>

    <b-form-group :label="$t('models.category.description')">
      <b-form-textarea v-model.trim="record.description" rows="5" />
    </b-form-group>

    <b-form-group>
      <b-form-checkbox v-model="record.active">
        {{ $t('models.category.active') }}
      </b-form-checkbox>
    </b-form-group>
  </div>
</template>

<script>
// Никакой особой логики
export default {
  // Имя компонента
  name: 'FormCategory',
  // Один-единственный принимаемый параметр через v-model
  props: {
    value: {
      type: Object,
      required: true,
    },
  },
  // И вычисляемый параметр для изменения
  computed: {
    record: {
      get() {
        return this.value
      },
      set(newValue) {
        this.$emit('input', newValue)
      },
    },
  },
}
</script>

forms/product.vue

<template>
  <div>
    <b-form-group :label="$t('models.product.title')">
      <b-form-input v-model.trim="record.title" required autofocus />
    </b-form-group>

    <b-form-group :label="$t('models.product.description')">
      <b-form-textarea v-model.trim="record.description" rows="5" />
    </b-form-group>

    <!--Артикул и цену располагаем в одну строку-->
    <b-row>
      <b-col md="6">
        <b-form-group :label="$t('models.product.sku')">
          <b-form-input v-model.trim="record.sku" required />
        </b-form-group>
      </b-col>
      <b-col md="6">
        <b-form-group :label="$t('models.product.price')">
          <b-form-input v-model.trim="record.price" />
        </b-form-group>
      </b-col>
    </b-row>

    <!--А вот и выбор категории-->
    <b-form-group :label="$t('models.product.category')">
      <vesp-input-combo-box v-model="record.category_id" url="admin/categories" required />
    </b-form-group>

    <b-form-group>
      <b-form-checkbox v-model.trim="record.active">
        {{ $t('models.product.active') }}
      </b-form-checkbox>
    </b-form-group>
  </div>
</template>

Создание и редактирование моделей

• pages/categories/create.vue - создание категории
• pages/categories/edit/_id.vue - редактирование категории
• pages/products/create.vue - создание товара
• pages/products/edit/_id.vue - редактирование товара

pages/products/create.vue

<template>
  <vesp-modal v-model="record" :url="url" :title="$t('models.product.title_one')">
    <template #form-fields>
      <form-product v-model="record" />
    </template>
  </vesp-modal>
</template>

<script>
// импорт адреса контроллера из таблицы
import {url} from '../products'
// Импорт формы
import FormProduct from '../../components/forms/product'

export {url}
export default {
  name: 'ProductCreatePage',
  components: {FormProduct},
  data() {
    return {
      url,
      record: {
        // Значения по-умолчанию
        title: '',
        description: '',
        sku: '',
        price: null,
        category_id: null,
        active: true,
      },
    }
  },
}
</script>

pages/products/edit/_id.vue

<script>
import Create, {url} from '../create'

export default {
  name: 'ProductEditPage',
  extends: Create,
  validate({params}) {
    return /^\d+$/.test(params.id)
  },
  async asyncData({app, params, error}) {
    try {
      const {data: record} = await app.$axios.get(url + '/' + params.id)
      return {record}
    } catch (e) {
      error({statusCode: e.statusCode, message: e.data})
    }
  },
}
</script>

Всё готово