Пользовательская сетка с модификациями в backend Magento 2

Question

Я новичок разработчик Magento2. Теперь я делаю небольшой модуль, и я застрял в одном месте. Я построил админ сетку с founded example и вот моим di.xml:

<preference for="Magento\Catalog\Model\Product" type="Vendor\Module\Model\Product" /> 
<virtualType name="Vendor\Module\Model\ResourceModel\Grid\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult"> 
     <arguments> 
      <argument name="mainTable" xsi:type="string">vendor_module</argument> 
      <argument name="resourceModel" xsi:type="string">Vendor\Module\Model\ResourceModel\Grid</argument> 
     </arguments> 
</virtualType> 
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory"> 
     <arguments> 
      <argument name="collections" xsi:type="array"> 
       <item name="grid_record_grid_list_data_source" xsi:type="string">Vendor\Module\Model\ResourceModel\Grid\Grid\Collection</item> 
      </argument> 
     </arguments> 
</type> 

А также я использую макет XML-файл с закодированными колоннами внутри:

... 
    <column name="customer" > 
     <argument name="data" xsi:type="array"> 
      <item name="config" xsi:type="array"> 
       <item name="filter" xsi:type="string">false</item> 
       <item name="label" xsi:type="string" translate="true">Customer</item> 
       </item> 
      </argument> 
    </column> 
... 

Моей таблица имеет столбцы, как: продукт идентификатор, идентификатор клиента, цена, статус

И мои вопросы:

• Как преобразовать идентификатор клиента в первую + фамилию?
• Столбец «status» имеет 3 разных состояния (0, 1 и 2) - как их преобразовать в удобочитаемые слова? (undefined, good, bad)
• Как добавить к этой же сетке другой столбец, например $ price + 10%?

Answer 1

В XML-компоненте компонента вы можете определить класс пользовательского интерфейса, который поможет отображать пользовательские/читаемые данные в Magento 2. Внутри ядра есть ряд примеров, например эскиз, отображаемый в виде сетки в каталоге.

Пользуясь тем, что в качестве примера, вот определение столбца в catalog/view/adminhtml/ui_component/product_listing.xml:

<column name="thumbnail" class="Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail"> 
     <argument name="data" xsi:type="array"> 
      <item name="config" xsi:type="array"> 
       <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item> 
       <item name="add_field" xsi:type="boolean">true</item> 
       <item name="sortable" xsi:type="boolean">false</item> 
       <item name="altField" xsi:type="string">name</item> 
       <item name="has_preview" xsi:type="string">1</item> 
       <item name="label" xsi:type="string" translate="true">Thumbnail</item> 
       <item name="sortOrder" xsi:type="number">20</item> 
      </item> 
     </argument> 
    </column> 

Как вы можете видеть, есть несколько аргументов, которые могут быть переданы в определении столбца, включая компонент, который зависит от типа данные, которые вы пытаетесь отобразить. В этом случае это миниатюра. Рассмотрение этого JS-файла показывает, что логика позволяет вытащить данные, установленные в методе ниже, которые будут отображаться в качестве фактического значка. Это не обязательно требование.

В пределах определенного класса в теге столбца вы видите Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail. Это класс, который определяет вспомогательные методы для отображения данных, а также анализ данных, которые будут отображаться таким образом, чтобы определенный компонент столбца мог правильно его отображать.

Обратите пристальное внимание на метод внутри этого класса, prepareDataSource:

/** 
* Prepare Data Source 
* 
* @param array $dataSource 
* @return array 
*/ 
public function prepareDataSource(array $dataSource) 
{ 
    if (isset($dataSource['data']['items'])) { 
     $fieldName = $this->getData('name'); 
     foreach ($dataSource['data']['items'] as & $item) { 
      $product = new \Magento\Framework\DataObject($item); 
      $imageHelper = $this->imageHelper->init($product, 'product_listing_thumbnail'); 
      $item[$fieldName . '_src'] = $imageHelper->getUrl(); 
      $item[$fieldName . '_alt'] = $this->getAlt($item) ?: $imageHelper->getLabel(); 
      $item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
       'catalog/product/edit', 
       ['id' => $product->getEntityId(), 'store' => $this->context->getRequestParam('store')] 
      ); 
      $origImageHelper = $this->imageHelper->init($product, 'product_listing_thumbnail_preview'); 
      $item[$fieldName . '_orig_src'] = $origImageHelper->getUrl(); 
     } 
    } 

    return $dataSource; 
} 

Вы могли бы использовать этот метод для форматирования данных вы показываете в нужный вам формат.

Например, способ Цена отображается на каталоге сетки (отформатирован в соответствующую валюту) через определенного класса столбца является:

public function prepareDataSource(array $dataSource) 
{ 
    if (isset($dataSource['data']['items'])) { 
     $store = $this->storeManager->getStore(
      $this->context->getFilterParam('store_id', \Magento\Store\Model\Store::DEFAULT_STORE_ID) 
     ); 
     $currency = $this->localeCurrency->getCurrency($store->getBaseCurrencyCode()); 

     $fieldName = $this->getData('name'); 
     foreach ($dataSource['data']['items'] as & $item) { 
      if (isset($item[$fieldName])) { 
       $item[$fieldName] = $currency->toCurrency(sprintf("%f", $item[$fieldName])); 
      } 
     } 
    } 

    return $dataSource; 
} 

Я надеюсь, что это помогает сделать это ясно, как форматировать данные в столбцах на сетках.