更改 javascript 文件 [Laravel] 中数据库的枚举索引值

Change the enum index value from database in javascript file [Laravel]

在我的 Laravel 网站中,我正在从数据库 table marketplace_trades 中检索值,其中包含 enum 类型的数据。在 js 文件中,我试图更改此值并制作不同的颜色。我可以用不同的颜色制作它,但不知道如何更改 enum 值。数据库中的确切字段如下所示:

$table->enum('status', [
                'active', 'successful', 'cancelled', 'dispute'
            ])->default('active');

在我调用它的 js 文件中是:

dataIndex : 'status',
                render    : (status) => (
                    <Tag color={this.getStatusColor(status)}>
                        {upperFirst(status)}

一切都很棒。我唯一需要做的就是将“active”一词更改为“Active Trades”(例如),并让用户像这样看到这个词。由于网站的多语言选项,因此需要它。我可以在 js 文件中进行 if 查询并在其上附加新值吗?

非常感谢任何帮助!

编辑:放下完整的 js 代码:

getStatusColor = (status) => {
        switch (status) {
            case 'successful':
                return "#52c41a";
            case 'active':
                return "#2db7f5";
            case 'dispute':
                return "#faad14";
            case "cancelled":
                return "#f5222d";
            default :
                return null;
        }
    };

    columns = () => {
        return [
            {
                title     : (
                    <FormattedMessage
                        defaultMessage="Coin"
                        id="common.coin"/>
                ),
                dataIndex : 'coin_name',
            },
            {
                title     : (
                    <FormattedMessage
                        defaultMessage="Amount"
                        id="common.amount"/>
                ),
                dataIndex : 'formatted_amount_price',
            },
            {
                title     : (
                    <FormattedMessage
                        defaultMessage="Seller"
                        id="common.seller"/>
                ),
                dataIndex : 'seller',
                render    : (seller) => (
                    <UserTableCell user={seller}/>
                )
            },
            {
                title     : (
                    <FormattedMessage
                        defaultMessage="Buyer"
                        id="common.buyer"/>
                ),
                dataIndex : 'buyer',
                render    : (buyer) => (
                    <UserTableCell user={buyer}/>
                )
            },
            {
                title     : (
                    <FormattedMessage
                        defaultMessage="Status"
                        id="common.status"/>
                ),
                dataIndex : 'status',
                render    : (status) => (
                    <Tag color={this.getStatusColor(status)}>
                        {upperFirst(status)}
                    </Tag>
                )
            },
            {
                title     : (
                    <FormattedMessage
                        defaultMessage="Rate"
                        id="common.rate"/>
                ),
                dataIndex : 'formatted_rate',
            },
            {
                title     : (
                    <FormattedMessage
                        defaultMessage="Payment Method"
                        id="common.payment_method"/>
                ),
                dataIndex : 'payment_method_name',
                render : (payment_method_name, record) => (
                    <div style={{whiteSpace : 'nowrap'}}>
                        <span className="mr-2">
                            {payment_method_name}
                        </span>
                        {record.payment_method_description && (
                            <Popover overlayStyle={{maxWidth : 250}}
                                     content={record.payment_method_description}
                                     title={
                                         <FormattedMessage
                                             id="common.payment_method_description"
                                             defaultMessage="Description"/>
                                     }
                                     trigger="click">
                                <Icon type="question-circle" theme="filled"/>
                            </Popover>
                        )}
                    </div>
                )
            },
            {
                title  : (
                    <FormattedMessage
                        defaultMessage="Action"
                        id="common.action"/>
                ),
                key    : 'action',
                fixed  : 'right',
                render : (text, record) => {
                    return (
                        <Button type="primary"
                                onClick={(e) => this.goToChat(record.chat_id)}
                                icon="link"/>
                    );
                },
            },
        ];
    };

我不熟悉 React,但我认为你需要这样做:

getStatusName = (status) => {
        switch (status) {
            case 'successful':
                return "Successfull";
            case 'active':
                return "Active Trades";
            case 'dispute':
                return "Dispute";
            case "cancelled":
                return "Cancelled";
            default :
                return null;
        }
    };

并像这样渲染它:

render    : (status) => (
   <Tag color={this.getStatusColor(status)}>
       {this.getStatusName(status)}
  </Tag>
 )