Vendure电商平台：自定义管理后台表单输入组件实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01125/article/details/148487809

Vendure电商平台：自定义管理后台表单输入组件实战指南

vendure A headless GraphQL commerce platform for the modern web 项目地址: https://gitcode.com/gh_mirrors/ve/vendure

前言

在Vendure电商平台开发过程中，我们经常需要扩展系统功能，其中自定义表单输入组件是提升后台管理体验的重要环节。本文将深入讲解如何在Vendure管理后台中创建和使用自定义表单输入组件，涵盖从基础实现到高级应用的完整流程。

一、自定义表单组件概述

Vendure提供了灵活的扩展机制，允许开发者创建两种类型的自定义表单组件：

用于渲染实体自定义字段的组件
用于可配置操作(Configurable Operations)参数的组件

这种机制让我们能够突破默认表单控件的限制，实现更符合业务需求的交互方式。

二、自定义字段组件开发实战

2.1 场景示例：产品强度滑块控件

假设我们需要为产品添加一个"强度"自定义字段，默认的数字输入框体验不佳，我们希望改为滑块控件。

第一步：定义组件

Angular实现方案

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { IntCustomFieldConfig, SharedModule, FormInputComponent } from '@vendure/admin-ui/core';

@Component({
    template: `
      <input
          type="range"
          [min]="config.min || 0"
          [max]="config.max || 100"
          [formControl]="formControl" />
      {{ formControl.value }}
    `,
    standalone: true,
    imports: [SharedModule],
})
export class SliderControlComponent implements FormInputComponent<IntCustomFieldConfig> {
    readonly: boolean;  // 标识是否为只读状态
    config: IntCustomFieldConfig;  // 字段配置信息
    formControl: FormControl;  // 表单控制对象
}

React实现方案

import React from 'react';
import { useFormControl, ReactFormInputOptions } from '@vendure/admin-ui/react';

export function SliderFormInput({ readonly, config }: ReactFormInputOptions) {
    const { value, setFormValue } = useFormControl();
    
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const val = +e.target.value;
        setFormValue(val);
    };
    
    return (
        <>
            <input
                type="range"
                readOnly={readonly}
                min={config.min || 0}
                max={config.max || 100}
                value={value}
                onChange={handleChange}
            />
            {value}
        </>
    );
}

第二步：注册组件

创建并注册组件是使其可用的关键步骤：

Angular注册方式

import { registerFormInputComponent } from '@vendure/admin-ui/core';
import { SliderControlComponent } from './components/slider-form-input/slider-form-input.component';

export default [
    registerFormInputComponent('slider-form-input', SliderControlComponent),
];

React注册方式

import { registerReactFormInputComponent } from '@vendure/admin-ui/react';
import { SliderFormInput } from './components/SliderFormInput';

export default [
    registerReactFormInputComponent('slider-form-input', SliderFormInput),
];

第三步：配置自定义字段

最后，在自定义字段配置中指定使用我们的滑块组件：

customFields: {
    Product: [
        {
            name: 'intensity', 
            type: 'int', 
            min: 0, 
            max: 100, 
            defaultValue: 0,
            ui: { component: 'slider-form-input' }  // 关键配置
        },
    ],
}

2.2 高级应用：关联字段自定义组件

对于关联类型(relation)的自定义字段，组件的实现略有不同：

表单控件的值是关联的实体对象而非ID
通常需要获取数据来显示选择列表

示例：产品评论关联选择器

@Component({
    selector: 'relation-review-input',
    template: `
        <div *ngIf="formControl.value as review">
            <vdr-chip>{{ review.rating }} / 5</vdr-chip>
            {{ review.summary }}
            <a [routerLink]="['/extensions', 'product-reviews', review.id]">
                <clr-icon shape="link"></clr-icon>
            </a>
        </div>
        <select [formControl]="formControl" [compareWith]="compareFn">
            <option [ngValue]="null">Select a review...</option>
            <option *ngFor="let item of reviews$ | async" [ngValue]="item">
                <b>{{ item.summary }}</b>
                {{ item.rating }} / 5
            </option>
        </select>
    `,
    standalone: true,
    imports: [SharedModule],
})
export class RelationReviewInputComponent implements OnInit, FormInputComponent<RelationCustomFieldConfig> {
    // 组件实现...
}

三、可配置操作参数的自定义组件

可配置操作(如ShippingCalculator、PaymentMethodHandler等)的参数(ConfigArgs)也可以使用自定义表单组件，配置方式与自定义字段类似：

export const orderFixedDiscount = new PromotionOrderAction({
    code: 'order_fixed_discount',
    args: {
        discount: {
            type: 'int',
            ui: {
                component: 'currency-form-input',  // 使用货币输入组件
            },
        },
    },
    // ...其他配置
});