Salesforce FileUpload（四） 导入静态资源并显示自定义头像框

2022-02-10 16:57:35 浏览数 (1)

我们在项目中，会遇到顾客详细画面，或者用户详细画面需要显示头像功能，下面使用lwc开发一个如下图的自定义组件。

1.首先需要在【staticresources】文件夹中创建对应的svg图片，并上传。

personIcon.svg

代码语言：javascript复制
<?xml version="1.0" ?>
<svg height="24" version="1.1" viewBox="0 0 6.3499998 6.3500002" width="24" xmlns="http://www.w3.org/2000/svg">
  <defs/>
  <g>
    <path 
      d="M 3.1708661,3.2974124 C 1.907863,3.2997936 0.86304935,4.299744 0.79995125,5.5634239 A 0.26460945,0.26460945 0 0 0 1.0655682,5.8404096 H 5.2864993 A 0.26460945,0.26460945 0 0 0 5.5500489,5.5634239 C 5.48687,4.2981438 4.4396051,3.2975523 3.1750001,3.2974124 Z" 
     fill="#ffffff"
      /> 
      <path 
      d="m 3.1750901,0.5095872 c -0.669506,0 -1.2153281,0.54839 -1.2153321,1.21864 -1.9e-6,0.6702501 0.5458221,1.2205301 1.2153321,1.2205301 0.6695099,0 1.217222,-0.55028 1.2172191,-1.2205301 -4e-6,-0.67025 -0.5477132,-1.21864 -1.2172191,-1.21864 z" 
      fill="#ffffff"
      />  </g>
</svg>

personIcon.resource-meta.xml

代码语言：javascript复制
<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="http://soap.sforce.com/2006/04/metadata">
    <cacheControl>Public</cacheControl>
    <contentType>image/svg xml</contentType>
</StaticResource>

2.【js】文件中使用如下方法引入静态资源。

代码语言：javascript复制
import personIcon from "@salesforce/resourceUrl/personIcon";

accountInfo.js

代码语言：javascript复制
import { api, track, LightningElement } from 'lwc';
import personIcon from "@salesforce/resourceUrl/personIcon";

export default class AccountInfo extends LightningElement {
    @api
    account;

    @track recordId;

    @api
    contactList;
    async connectedCallback() {
        this.recordId = this.account.Id;
    }

    get accountImageStyle() {
        return `background-image: url(${personIcon})`;
    }
    handleClickForAcc(event) {
        console.log('>>>>>>>this.account.Id>>::' this.account.Id);
        let openUrl = '/s/accountDetails?recordId='   this.account.Id;
        let target = '_self';
        window.open(openUrl, target);
    }
}

accountInfo.html

代码语言：javascript复制
<template>
    <div class="grey-area" style="width: 100%;">

            <lightning-layout multiple-rows="true">
                <lightning-layout-item class="slds-var-p-around_xx-small" flexibility='auto' size='12'>
                    <lightning-layout multiple-rows="true">
                        <lightning-layout-item padding="horizontal-none" flexibility='auto' size='1'>
                            <div class="account-image" style={accountImageStyle}></div>
                        </lightning-layout-item>
                        <lightning-layout-item padding="horizontal-none" flexibility='auto' size='11'>
                            <lightning-layout multiple-rows="true">
                                <lightning-layout-item padding="horizontal-none" flexibility='auto' size='12'>
                                    <h1>&nbsp;</h1>
                                </lightning-layout-item>

                            </lightning-layout>

                            <lightning-layout multiple-rows="true">

                                <lightning-layout-item padding="horizontal-none" flexibility='auto' size='12'>
                                    <div class="account-basic">
                                        <div style="font-size: 25px;margin-left:2%;"><A onclick={handleClickForAcc}>{account.Name}</A></div>
                                        <h5 class="account-kana" style="margin-left:2%;"></h5>
                                    </div>
                                </lightning-layout-item>
                            </lightning-layout>
                        </lightning-layout-item>
                    </lightning-layout>

                    <div style="margin-left: 2%;">
                        <lightning-layout multiple-rows="true" style="margin-top:20px;">
                            <lightning-layout-item padding="horizontal-none" flexibility='auto' size='1'>
                                
                            </lightning-layout-item>
                            <lightning-layout-item padding="horizontal-none" flexibility='auto' size='1'>
                                <h1 style="font-size:16px;font-weight:bold">基本情報</h1>
                            </lightning-layout-item>
                            <lightning-layout-item padding="horizontal-none" flexibility='auto' size='4'>
                                <span class="label"></span>
                                <span class="value"></span>
                            </lightning-layout-item>
                            <lightning-layout-item padding="horizontal-none" flexibility='auto' size='2'>
                                <span class="label"></span>
                                <span class="value"></span>
                            </lightning-layout-item>
                            <lightning-layout-item padding="horizontal-none" flexibility='auto' size='4'>
                                <span class="label"></span>
                                <span class="value"></span>
                            </lightning-layout-item>
                        </lightning-layout>
                    </div>
                </lightning-layout-item>
            </lightning-layout>
    </div>
</template>

accountInfo.css

代码语言：javascript复制
.grey-area {
  border-top: 1px solid #E4E5EA;
  border-bottom: 1px solid #E4E5EA;
  box-shadow: 0 2px 6px 0px rgb(0 0 0 / 10%);
  background-color: #F8F8F8;
  width: 100%;
  position: relative;
  z-index: 2;
  height: 100%;
}
.account-image {
  width: 100px;
  height: 100px;
  margin-right: 2rem;
  border-radius: 50px;
  background-color: #aaa;
  background-size: cover;
  background-position: center 10px;
  background-repeat: no-repeat;

}
.img-style {
  border-radius: 50%;
  margin-top: 1%;
  margin-left: 1%;
}

3.使用Apex类，取得相应信息，开发一个父组件，并且调用上边做好的子组件，用来显示头像框以外的信息。

AccountInfoController.cls

代码语言：javascript复制
public with sharing class AccountInfoController {
    @AuraEnabled(Cacheable=true)
    public static AccountInfoWrapper getAccInfoRecord(Id recordId) {
        AccountInfoWrapper wrapper = new AccountInfoWrapper();
        Account accountItem = [SELECT
                                Id,
                                Name
                                FROM Account
                                WHERE Id = :recordId];
        wrapper.account = accountItem;

        List<Contact> resultContactList = [SELECT
                                        Id
                                        FROM Contact
                                        WHERE AccountId = :recordId];
        if (resultContactList != null && resultContactList.size() > 0) {
            wrapper.contactList = resultContactList;
        }
        return wrapper;
    }
    public class AccountInfoWrapper {
        @AuraEnabled
        public Account account;
        @AuraEnabled
        public List<Contact> contactList;
    }
}

accountHeader.js

代码语言：javascript复制
import { api, LightningElement, track } from 'lwc';
import getAccInfoRecord from "@salesforce/apex/AccountInfoController.getAccInfoRecord";

export default class AccountHeader extends LightningElement {
    @api
    recordId;

    @track
    account;

    @track
    contactList;

    async connectedCallback() {
        getAccInfoRecord({ recordId: this.recordId })
        .then(result => {
            if(result !== null) {
                this.account = result.account;
                this.contactList = result.contactList;
            }
        }).catch(error => {

        });
    }

    get hasAcc() {
        return !!this.account;
    }
}

accountHeader.html

代码语言：javascript复制
<template>
  <template if:true={hasAcc}>
    <div>
      <div class="page-header">
        <h1 class="page-title">顧客情報</h1>
      </div>
      <c-account-info
        account={account}
        contact-list={contactList}
      ></c-account-info>
    </div>
  </template>
</template>

accountHeader.js-meta.xml

代码语言：javascript复制
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default,lightning__RecordPage">
            <property name="recordId" type="String" label="Record ID" default="{!recordId}"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

效果展示：

xml html svg javascript

0 人点赞