Pole formularza składnika Magento 2.1 Ui Wejście tokena


16

Chcę dodać tagi w polu wejściowym, w podobny sposób, jak robi się to w formie produktu, aby dodać kategorie - co pokazano na poniższym obrazku. wprowadź opis zdjęcia tutaj

Tyle zadań wykonałem, dodając komponent pola w niestandardowym interfejsie użytkownika

<field name="parent">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Magento\Catalog\Ui\Component\Product\Form\Categories\Options</item>
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Tags</item>
                <item name="componentType" xsi:type="string">field</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="component" xsi:type="string">Magento_Catalog/js/components/new-category</item>
                <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
                <item name="dataScope" xsi:type="string">data.parent</item>
                <item name="filterOptions" xsi:type="boolean">true</item>
                <item name="showCheckbox" xsi:type="boolean">false</item>
                <item name="disableLabel" xsi:type="boolean">true</item>
                <item name="multiple" xsi:type="boolean">true</item>
                <item name="levelsVisibility" xsi:type="number">1</item>
                <item name="sortOrder" xsi:type="number">20</item>
                <item name="required" xsi:type="boolean">true</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
                <item name="listens" xsi:type="array">
                    <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
                </item>
            </item>
        </argument>
    </field>

Ale to nie spełnia moich wymagań. Nie potrzebuję menu rozwijanego i opcji - chciałem tylko dodać tagi w polu wejściowym, takim jak Tag1, Tag2, Tag 3 ... Czy każdy może wskazać, gdzie można wprowadzić ewentualne zmiany, aby osiągnąć to zadanie.

Odpowiedzi:


1

Szybka odpowiedź brzmi: tak , wszystko jest możliwe dzięki komponentom interfejsu użytkownika, ponieważ jest bardzo elastyczny.

W przeciwnym razie nie sądzę, aby poleganie / zastępowanie domyślnego elementu interfejsu użytkownika (jak wspomniano w poście - ui-select) było dobrym pomysłem. W tym samouczku utworzę nowy element interfejsu użytkownika dla tagów. Może być używany nie tylko w formie produktu, ale również w formie strony cms lub cokolwiek innego, zależnie od formularzy interfejsu użytkownika.

Teraz zacznij zabawę!

Po pierwsze, formularz ui_component powinien wyglądać następująco

StackOverflow / Catalog / view / adminhtml / ui_component / product_form.xml

<field name="parent">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Tags</item>
            <item name="componentType" xsi:type="string">field</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="component" xsi:type="string">StackOverflow_Catalog/js/form/element/tags</item>
            <item name="elementTmpl" xsi:type="string">StackOverflow_Catalog/form/element/tags</item>
            <item name="dataScope" xsi:type="string">data.parent</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">false</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="required" xsi:type="boolean">true</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="listens" xsi:type="array">
                <item name="${ $.namespace }.${ $.namespace }:responseData" xsi:type="string">setParsed</item>
            </item>
        </item>
    </argument>
</field>

Zanotuj formElement , component i elementTmpl . Powinno to być normalne pole wejściowe.

Teraz musimy utworzyć mechanizm renderujący widok dla tego elementu interfejsu użytkownika

StackOverflow / Catalog / view / base / web / js / form / element / tags.js

/**
 * StackOverflow Catalog.
 *
 * @category  Mage
 *
 * @author    Toan Nguyen <me@nntoan.com>
 * @copyright 2018 Toan Nguyen (https://nntoan.com)
 */
define([
    'underscore',
    'mageUtils',
    'Magento_Ui/js/form/element/abstract',
    'ko',
    'Magento_Ui/js/lib/validation/validator'
], function (_, utils, Element, ko, validator) {
    'use strict';

    return Element.extend({
        defaults: {
            list: ([]),
            valueUpdate: 'afterkeydown',
            listens: {
                'valueArea': 'onUpdateArea'
            }
        },

        initialize: function () {
            this._super();
            this.on('value', this.onUpdateArea.bind(this));
            var self = this;
            var list = this.value().split(',');
            _.each(list, function (value, index) {
                if (value.length > 0) {
                    self.list.push(value.trim());
                }
            });

            return this;
        },

        initObservable: function () {
            this._super();
            this.observe(['valueArea']);
            this.observe('list', this.list);
            return this;
        },

        onUpdateArea: function (value) {
            if (value.length > 1) {
                if (value.indexOf(',') !== -1 || value.indexOf(' ') !== -1) {
                    var newValue = value.slice(0, -1);
                    this.correctValue(newValue);
                }
            }
        },

        correctValue: function (tag) {
            if (this.hasTag(tag)) {
                this.valueArea('');
                return false;
            }
            if (this.isValidTag(tag).passed) {
                this.list.push(tag);
                this.joinList(this.list());
                this.valueArea('');
                return true;
            }

            return false;
        },

        isValidTag: function (tag) {
            return validator('validate-alphanum', tag);
        },

        OnBlurEvent: function (object) {
            if (this.valueArea() && this.valueArea().length > 0) {
                if (!this.correctValue(this.valueArea())) {
                    this.valueArea('');
                }
            }
        },

        deleteTag: function (self, value, event) {
            event ? event.stopPropagation() : false;
            var key = -1;
            _.each(this.list(), function (element, index) {
                if (value === element) {
                    key = index;
                }
            });
            if (key > -1) {
                this.list.splice(key, 1);
                this.joinList(this.list());
                this.valueArea('');
            }
        },

        joinList: function (array) {
            this.value(array.join(','));
        },

        hasTag: function (value) {
            return this.list().indexOf(value) !== -1;
        }
    });
});

szablon nokaut jest w drodze ...

StackOverflow / Catalog / view / base / web / template / form / element / tags.html

<div class="tags">
    <div class="admin__control-text">
        <div class="apps-share-chips-editor">
            <input class="admin__control-text" type="hidden"
                   data-bind="
        value: value,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled
    }"/>
            <span data-bind="foreach: { data: list, as: 'item' }">
                <span class="field-tag-chip">
                <div class="field-tag-content" data-bind="text: item"></div>
                <div class="field-tag-close-before">
                    <span class="field-tag-close" data-bind="event: {click: $parent.deleteTag.bind($parent, $index)}"></span>
                </div>
                </span>
            </span>
            <textarea
                    class="field-tag-input" placeholder="Add more tags..." data-bind="
        event: {change: userChanges, blur: OnBlurEvent},
        hasFocus: focused,
        valueUpdate: valueUpdate,
        value: valueArea
        "></textarea>
        </div>
    </div>
</div>

może stylizacja? ...

StackOverflow / Catalog / view / base / web / css / tags.css

.field-tag-content {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.field-tag-chip {
    background: #e0e0e0;
    border: 1px solid #e0e0e0;
    display: inline-block;
    -webkit-border-radius: 3px;
    color: #444;
    margin: 4px 1px 0 2px;
    outline: none;
    vertical-align: middle;
    cursor: default;
    padding: 0;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    overflow: hidden;
    padding:5px;
    padding-right:25px;
}

.field-tag-input {
    display: inline-block;
    margin: 10px 4px 0 4px;
    vertical-align: middle;
    background: none;
    border: 0;
    height: 25px;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0 0 5px;
    position: relative;
    resize: none;
    width:50%;
}
.field-tag-close-before {
    position:relative;
}
.field-tag-close{
    position: absolute;
    top: -10px;
    right: -5px;
    cursor: pointer;
}

.field-tag-close:before,
.field-tag-close:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 15px;
    height: 4px;
    background: #303030;
}

.field-tag-close:before {
    webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.field-tag-close:after {
    webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Po co wkładać wszystko do view/base? Nie mam na to jednoznacznej odpowiedzi, ale wydaje mi się to właściwe, ponieważ zespół Magento umieszcza również wszystkie elementy interfejsu użytkownika view/base? :)

I na koniec, musisz dodać swoje tags.cssdo view/adminhtml/layout/catalog_product_edit.xmli view/adminhtml/layout/catalog_product_new.xml.

Więc to wszystko! Teraz Twój wkład powinien wyglądać następująco:

Tagi elementów interfejsu użytkownika

Twoje zdrowie.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.