Lightning Webコンポーネントで関連リスト風コンポーネントを作ってみる

<template>
    <div style="border: 1px solid #D8D8D8; border-radius: 5px;">
        <article class="slds-card">
            <div class="slds-card__header slds-grid ">
                <header class="slds-media slds-media_center slds-has-flexi-truncate">
                    <div class="slds-media__body">
                        <h2 class="slds-card__header-title">
                            <div class="slds-card__header slds-truncate " title="Contact">
                                <div class="slds-m-left_small slds-m-top_medium">
                                    <lightning-icon icon-name="standard:contact" size="small"></lightning-icon>
                                    <span class="slds-m-left_small" style="font-weight: bold">取引先責任者一覧</span>
                                </div>
                            </div>
                        </h2>
                    </div>
                    <!-- 「新規」ボタン -->
                    <div class="slds-text-align_right slds-m-top_x-small">
                        <lightning-button
                            label="新規"
                            title="新規取引先責任者を作成する"
                            onclick={openModal}
                            class="slds-m-right_x-small">
                        </lightning-button>
                    </div>
                </header>
            </div>
            <div class="slds-scrollable" >
                <!-- 取引先責任者リスト -->
                <lightning-datatable
                    key-field="Id"
                    data={contactList}
                    columns={columns}
                    show-row-number-column
                    hide-checkbox-column>
                </lightning-datatable>
            </div>

        </article>
    </div>

    <!-- 新規取引先責任者ダイアログ -->
    <template if:true={isShowModal}>
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <!-- ヘッダー-->
                <header class="slds-modal__header">
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                        <lightning-icon
                            icon-name="utility:close"
                            alternative-text="close"
                            variant="inverse"
                            size="small" >
                        </lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 class="slds-text-heading_medium slds-hyphenate">新規取引先責任者</h2>
                </header>
                <!-- 入力部分-->
                <div class="slds-modal__content slds-p-around_medium">
                    <lightning-record-form
                        object-api-name="Contact"
                        fields={createFields}
                        onsuccess={onSuccess}
                        columns="2"
                        oncancel={closeModal}
                        onsubmit={onSubmit}>
                    </lightning-record-form>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

import { LightningElement, track, wire, api } from 'lwc';
/** トーストメッセージを表示する */
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import { refreshApex } from '@salesforce/apex';
import getContacts  from '@salesforce/apex/ContactListController.getContactsByAccountId';
/** カスタム表示ラベル：取引先責任者を取得でエラーが発生しました。 */
import ERROR_GETCONTACTS from '@salesforce/label/c.ErrMsg_GetContacts'
/** 新規取引先責任者作成用項目取得 */
import FIELD_LASTNAME from '@salesforce/schema/Contact.LastName';
import FIELD_FIRSTNAME from '@salesforce/schema/Contact.FirstName';
import FIELD_DEPARTMENT from '@salesforce/schema/Contact.Department';
import FIELD_TITLE from '@salesforce/schema/Contact.Title';
import FIELD_PHONE from '@salesforce/schema/Contact.Phone';
import FIELD_EMAIL from '@salesforce/schema/Contact.Email';

export default class TestContactList extends LightningElement {

    // 画面で表示しているレコードID
    @api recordId;
    // 取引先責任者リストヘッダー
    @track columns =  [
        {label:'取引先責任者名', fieldName:'Name' }
        ,{label:'部署', fieldName:'Department'}
        ,{label:'役職', fieldName:'Title' }
        ,{label:'電話', fieldName:'Phone', type:'phone'}
        ,{label:'メール', fieldName:'Email', type: 'email'}
    ];
    // 取引先責任者取得結果
    resultContact = [];
    // 取引先責任者リストデータ
    @track contactList = [];
    // 新規作成モーダルダイアログ表示フラグ
    @track isShowModal = false;
    // 新規ダイアログ表示項目
    createFields = [FIELD_LASTNAME, FIELD_FIRSTNAME, FIELD_DEPARTMENT, FIELD_TITLE, FIELD_PHONE, FIELD_EMAIL];

    /**
     * 取引先責任者取得
     */
    @wire ( getContacts, ( { 'accountId' : '$recordId' } ) )
        setContactList( result ){
            this.resultContact = result;
            if( result.data ){
                this.contactList = result.data;
            }else if( result.error ){
                // トーストでエラー表示
                this.showToast( ERROR_GETCONTACTS, result.error.details.body.message, 'error', 'sticky');
            }
        }

    /**
     * modalダイアログオープン
     */
    openModal(){
        this.isShowModal = true;
    }

    /**
     * modalダイアログクローズ
     */
    closeModal(){
        this.isShowModal = false;
    }

    /**
     * 新規 取引先責任者データ作成実行
     */
    onSubmit( event ){
        // 更新を止める
        event.preventDefault();
        let fields = event.detail.fields;
        // 取引先IDをセット
        fields.AccountId = this.recordId;
        console.log(JSON.stringify(fields));
        // 更新再開
        this.template.querySelector('lightning-record-form').submit(fields);
    }

    /**
     * 新規データ作成成功時メソッド
     * 更新データ画面描画
     */
    onSuccess(event) {

        // 確認用コード
        const contact = event.detail;
        console.log(JSON.stringify(contact));
        const updatedRecord = event.detail.id;
        console.log('onsuccess: ', updatedRecord);
        // @wireのキャッシュをクリアして、取引先責任者データを再取得する。
        refreshApex(this.resultContact);
        //ダイアログクローズ
        this.isShowModal = false;
        //データ作成報告
        this.showToast('SUCCESS','取引先責任者が作成されました。','success','pester');
    }


    /*
     *トーストによるメッセージ表示
     */
    showToast(title,message,varient,mode) {
        const event = new ShowToastEvent({
             title   : title
            ,message : message
            ,variant : varient //info/success/warning/error
            ,mode    : mode    //sticky クローズボタンを押すまで表示
                               //pester 3秒間表示
                               //dismissable sticky+pester
        });
        this.dispatchEvent(event);
    }
}

public with sharing class ContactListController {

    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactsByAccountId( Id accountId ){
        //取引先に関連する取引先責任者を取得する
        return [
            SELECT Id, Name, Department, Title ,Phone, Email
            FROM Contact
            WHERE AccountId = :accountId
            ORDER BY CreatedDate
        ];
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="testContactList">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <description>test Contact List</description>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>