Salesforce lightning datatable 每行表示Link项目

原创

repick

发布于 2022-05-20 08:59:11

5480

发布于 2022-05-20 08:59:11

文章被收录于专栏：SalesforceSalesforce

使用LightningDatatable做成的ListView时，有时需要自定义Link项目，例如需要Link式的行删除事件，当点击消除Link时，消除当前行数据，如下

1.消除Link项目表示用子组件

首先js中需要继承【lightning/datatable】，然后自定义data类型(customLink)，在父组件的colmuns处指定，如果有其它类型可以在customTypes 下边直接添加。

opportunityListViewCusDatatable.js

import LightningDatatable from 'lightning/datatable';
import link from './link.html';

export default class OpportunityListViewCusDatatable extends LightningDatatable {
    static customTypes = {
        customLink: {
            template: link,
            typeAttributes: ['linkName'],
        },
    };
}

link.html

<template>
    <c-opportunity-list-view-cus-link-row
        row-id={value}
        link-name={typeAttributes.linkName}>
    </c-opportunity-list-view-cus-link-row>
</template>

2.Link项目显示子组件

可以接受value传过来的值，进行具体删除处理。

opportunityListViewCusLinkRow.html

<template>
    <a onclick={handleClick} target="_self">{linkName}</a>
</template>

opportunityListViewCusLinkRow.js

import { LightningElement, api } from 'lwc';

export default class OpportunityListViewCusLinkRow extends LightningElement {
    @api rowId
    @api linkName;

    handleClick(){
        console.log('this.rowId>>>>>>>>>>>>'+this.rowId);
        console.log('this.linkName>>>>>>>>>>>>'+this.linkName);
    }
}

3.ListView父组件

在把Html中的<lightning-datatable></lightning-datatable>替换成上边做成的子组件，如下

<c-opportunity-list-view-cus-datatable
    key-field="id"
    data={closedRecords}
    show-row-number-column
    row-number-offset={rowOffset}
    hide-checkbox-column
    columns={closedColumns}
    >
</c-opportunity-list-view-cus-datatable>

js中Columns指定自定义做成的customLink型

const closedColumns = [
    { label: 'Link', fieldName: 'link', type: 'customLink', typeAttributes: { linkName: { fieldName: 'linkName' }, }, initialWidth: 80 },
    ];

4.详细例

使用<lightning-datatable></lightning-datatable>和自定义方式分别做成两个ListView

opportunityListView.html

<template>
    <div class="slds-card__body">
        <lightning-datatable
            key-field="id"
            data={prospectRecords}
            show-row-number-column
            row-number-offset={rowOffset}
            hide-checkbox-column
            columns={prospectColumns}
            >
        </lightning-datatable>

        <c-opportunity-list-view-cus-datatable
            key-field="id"
            data={closedRecords}
            show-row-number-column
            row-number-offset={rowOffset}
            hide-checkbox-column
            columns={closedColumns}
            >
        </c-opportunity-list-view-cus-datatable>
        <template if:false={loaded}>
            <lightning-spinner alternative-text="Loading"></lightning-spinner>
        </template>
    </div>
</template>

opportunityListView.js

import { LightningElement, track, wire } from 'lwc';
import getOpportunityListView from '@salesforce/apex/OpportunityListViewController.getOpportunityListView';
// 案件
const prospectColumns = [
    { label: '案件名', fieldName: 'idLink', type: 'url', sortable: true, typeAttributes: { label: { fieldName: 'name' }, target: '_self' }, initialWidth: 300 },
    { label: '商品名', fieldName: 'productName', type: 'text' },
    { label: 'フェーズ', fieldName: 'stageName', type: 'text', editable: true },
    { label: '案件タイプ', fieldName: 'recordTypeName', type: 'text' },
    { label: '見込み保険料', fieldName: 'amount', type: 'currency' },
    { label: '確度', fieldName: 'probability', type: 'text' },
    { label: '完了予定日', fieldName: 'closeDate', type: 'date' },
    { label: '前回契約の満期日', fieldName: 'maturityDate', type: 'date' },
    { label: '担当者', fieldName: 'ownerName', type: 'text' },
    ];
const closedColumns = [
    { label: '案件名', fieldName: 'idLink', type: 'url', sortable: true, typeAttributes: { label: { fieldName: 'name' }, target: '_self' }, initialWidth: 300 },
    { label: '商品名', fieldName: 'productName', type: 'text' },
    { label: 'フェーズ', fieldName: 'stageName', type: 'text', editable: true },
    { label: '案件タイプ', fieldName: 'recordTypeName', type: 'text' },
    { label: '見込み保険料', fieldName: 'amount', type: 'currency' },
    { label: '確度', fieldName: 'probability', type: 'text' },
    { label: '完了予定日', fieldName: 'closeDate', type: 'date' },
    { label: '前回契約の満期日', fieldName: 'maturityDate', type: 'date' },
    { label: '担当者', fieldName: 'ownerName', type: 'text' },
    { label: 'Link', fieldName: 'link', type: 'customLink', typeAttributes: { linkName: { fieldName: 'linkName' }, }, initialWidth: 80 },
    ];
export default class OpportunityListView extends LightningElement {
    @track prospectColumns = prospectColumns;
    @track closedColumns = closedColumns;
    @track records;
    @track prospectRecords;
    @track closedRecords;

    @track wiredRecordList;
    @track error;
    @track rowOffset = 0;
    @track loaded = false;

    @wire(getOpportunityListView)
    recordList(result) {
        this.wiredRecordList = result;
        if (result.data) {

            this.prospectRecords = result.data?.filter(function (element, index, self) {
                return element.stageName== 'Prospecting';
            });
            this.closedRecords = result.data?.filter(
                (r) => r.stageName== 'Closed Won'
            )?.map(r => {
                return {...r,link: r.id, linkName : '削除'}
            }) ?? [];;

            console.log('>>>>>>>>this.prospectRecords>>>>>>>' + JSON.stringify(this.prospectRecords));
            console.log('>>>>>>>>this.closedRecords>>>>>>>' + JSON.stringify(this.closedRecords));


            this.error = undefined;
            this.loaded = true;
        } else if (result.error) {
            this.error = result.error;
            this.records = [];
        }
    }
}

OpportunityListViewController.cls

public with sharing class OpportunityListViewController {
    @AuraEnabled(cacheable=true)
    public static List<OpportunityWrapper> getOpportunityListView(){
        List<OpportunityWrapper> wappers = new List<OpportunityWrapper>();
        // 案件名、商品名、フェーズ、案件タイプ、見込み保険料、確度、完了予定日、前回契約の満期日、担当者
        List<Opportunity> resultList = [SELECT Id,
                                            Name,                                       // 案件名
                                            StageName,                                  // フェーズ
                                            Amount,                                     // 見込み保険料
                                            Probability,                                // 確度
                                            CloseDate,                                  // 完了予定日
                                            RecordTypeId,                               // レコードタイプ
                                            RecordType.Name                            // レコードタイプ
                                            FROM Opportunity
                                            ORDER BY LastModifiedDate DESC
                                            LIMIT 5
                                            ];
        if (resultList!=null && resultList.size() > 0) {
            for (Opportunity opp : resultList) {
                OpportunityWrapper wapper = new OpportunityWrapper();
                wapper.id = opp.Id;
                wapper.idLink = '/opportunity/'+ opp.Id;
                // 案件名
                wapper.name = opp.Name;
                // フェーズ
                wapper.stageName = opp.StageName;
                // 見込み保険料
                wapper.amount = String.valueOf(opp.Amount);
                // 確度
                wapper.probability = String.valueOf(opp.Probability);
                // 完了予定日
                wapper.closeDate = opp.CloseDate;
                // レコードタイプ
                wapper.recordTypeId = opp.RecordTypeId;
                wappers.add(wapper);
            }
        }
        return wappers;
    }
    public class OpportunityWrapper {
        @AuraEnabled
        public String id;
        @AuraEnabled
        public String idLink;
        // 案件名
        @AuraEnabled
        public String name;
        // フェーズ
        @AuraEnabled
        public String stageName;
        // 見込み保険料
        @AuraEnabled
        public String amount;
        // 確度
        @AuraEnabled
        public String probability;
        // 完了予定日
        @AuraEnabled
        public Date closeDate;
        // レコードタイプ
        @AuraEnabled
        public String recordTypeId;
    }
}

5.子组件中添加删除处理Image

opportunityListViewCusLinkRow.html

<template>
    <a onclick={handleClick} target="_self">{linkName}</a>
    <template if:true={showDeleteDilog}>
        <div class="slds-modal slds-fade-in-open" style="width: 100%;">
            <div class="slds-modal__container" style="width:100%;">
                <header class="slds-modal__header inner">
                    <h2 class="title slds-text-heading--medium slds-hyphenate">Delete Opportunity</h2>
                    <lightning-button-icon class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                        icon-name="utility:close"  alternative-text="close" title="close" onclick={handleCancel}>
                    </lightning-button-icon>
                </header>
                <div class="slds-modal__content slds-p-around--medium">
                    <lightning-card style="text-align:center;">
                        <p class="title slds-text-heading--medium slds-hyphenate">
                            Are you sure you want to delete this opportunity?
                        </p>
                    </lightning-card>
                </div>

                <div class="slds-modal__footer">
                    <lightning-button onclick={handleDelete} variant="brand" label="削除" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
                    <lightning-button onclick={handleCancel} label="キャンセル" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
                </div>
            </div>
        </div>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

opportunityListViewCusLinkRow.js

import { LightningElement, api, track } from 'lwc';
import { deleteRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class OpportunityListViewCusLinkRow extends LightningElement {
    @api rowId
    @api linkName;
    @track showDeleteDilog = false;

    handleClick(){
        this.showDeleteDilog = true;
        console.log('this.rowId>>>>>>>>>>>>'+this.rowId);
        console.log('this.linkName>>>>>>>>>>>>'+this.linkName);
    }

    handleCancel() {
        this.showDeleteDilog = false;
    }

    handleDelete() {
        deleteRecord(this.rowId)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Record deleted',
                        variant: 'success'
                    })
                );
                this.showDeleteDilog = false;
                window.location.href = '/s/opportunitylistview';
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error deleting record',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            });

    }
}