서비스 센터
Home

스마트 양식 컴포넌트의 고급 속성

eSignGlobal스마트 양식 생성 시 사용자 정의 컴포넌트에 대한 고급 속성 구성을 지원합니다:

  • 【이벤트 구성】 기능을 사용하면 여러 정보 수집 컴포넌트의 입력 값에 대해 실시간으로 간단한 공식 계산을 수행하고 계산 결과를 대상 컴포넌트에 자동으로 표시할 수 있습니다.
  • 【동작 구성】 기능을 사용하면 양식 컨트롤에서 특정 동작 작업이 발생할 때 생성기를 호출하여 사용자 정의 복잡한 계산을 실행하고 해당 컴포넌트에 값을 할당할 수 있습니다. JavaScript를 사용하여 자체 비즈니스 로직을 구현합니다.
 

이벤트 구성

기능 소개

공식 계산을 통해 여러 정보 수집 컴포넌트의 입력 값을 실시간으로 계산하고 계산 결과를 대상 컴포넌트에 자동으로 표시합니다. 이 기능은 시각적 공식을 통해 컴포넌트 바인딩 및 반응형 업데이트를 구현하여 코드를 작성하지 않고도 복잡한 비즈니스 로직 계산을 완료할 수 있습니다.

1.png

설명:

  • 이벤트 구성 기능은 현재 사칙 연산만 지원합니다.

 

응용 시나리오

간단한 계산 후 실시간으로 표시해야 하는 시나리오에 적합합니다. 예:

  • 구매 주문 양식에서 세금 포함 총액을 실시간으로 계산합니다. (단가 * 수량) * (1 + 세율/100)
  • 장비 작동 효율을 동적으로 계산합니다. (전류 * 전압 * 작동 시간) / 1000

사용 방법

구매 주문을 통해 실시간으로 세금 포함 총액을 계산하는 예를 들어보겠습니다.

  1. 양식에 숫자 필드 4개(단가, 수량, 세율, 세금 포함 총액)를 끌어다 놓습니다.
2.png

설명:

  • 계산 기능은 숫자 필드에만 적용됩니다.
  • 텍스트 필드를 추가하면 "+" 기능만 지원하여 문자열 연결을 구현할 수 있으며, 이때 대상 필드 유형도 텍스트 필드여야 합니다.
  1. 【단가】 필드의 구성 패널에서 【고급 속성】>【이벤트 구성】에 이벤트를 추가합니다.。
3.png
  1. 【이벤트 구성】에서 【트리거 유형】이 【필드 변경】일 때 함수를 트리거하도록 구성합니다.
4.png
  1. 계산식 편집: "@"+컴포넌트 이름을 입력하여 계산하려는 필드를 추가할 수 있습니다.
5.png

필요에 따라 (단가 * 수량)*(1 + 세율/100)과 같이 공식을 작성합니다.

6.png

주의:

  • 괄호를 사용할 때는 영어 괄호"()"를 사용하십시오.
  1. 【대상 필드】에서 계산 결과를 표시할 필드를 선택합니다.。대상 필드의 데이터 유형에 따라 계산에 참여하는 필드 유형을 강제로 변환합니다.

주의:

  • 대상 필드 유형은 계산에 참여하는 필드 유형과 동일해야 합니다.
7.png
  1. 계산에 참여하는 모든 필드는 해당 공식을 구성하여 계산에 참여하는 각 필드 값이 변경될 때마다 다시 계산해야 합니다. 이 시나리오에서는 [단가], [수량], [세율] 모두 해당 이벤트 구성을 설정해야 합니다.

주의:

  • [대상 필드]는 구성할 필요가 없습니다.
  1. 구성을 완료한 후 양식을 저장합니다.
8.png

 

동작 구성

기능 소개

사용자는 [고급 속성] > [동작 설정]에서 javascript 코드를 작성하여 자신의 비즈니스 로직을 구현할 수 있습니다.

응용 시나리오

  • 간단한 [공식 계산] 기능으로 완료할 수 없는 복잡한 필드 값 계산. 예를 들어 한 줄 텍스트에 입력된 내용을 숫자로 변환한 다음 사용자 정의 계산 규칙을 통해 계산을 완료한 후 다른 하나 이상의 필드에 설정합니다.
  • 양식 컨트롤에서 특정 동작이 발생하면 생성기 메서드를 호출합니다.

사용 방법

1. js 편집 패널 열기

  1. 컨트롤 선택;
  2. [고급 속성]을 클릭하여 해당 패널로 전환합니다.
  3. 【동작 설정】>【새 동작】을 클릭하십시오.
  4. 표시되는 드롭다운 메뉴에서 해당 동작을 선택하면 해당 동작이 트리거될 때 작성한 JS 코드가 실행됩니다. 현재 다음 네 가지 동작을 지원합니다.
    1. mounted, 컴포넌트 로드 후
    2. onBlur, 컴포넌트에서 포커스가 해제될 때
    3. onChange, 컴포넌트 값이 변경될 때
    4. onFocus, 컴포넌트가 선택될 때
9.png

설명:

  • 【mounted 컴포넌트 로드 후】를 설정하려면 먼저 나머지 세 가지 상태 중 하나를 선택하고 이동한 페이지에서 오른쪽 상단의 【저장】을 클릭한 다음 왼쪽의 【mounted】를 선택해야 합니다.
10.png
  1. js 편집 패널에 코드를 작성하십시오. 일반적인 코드 작성 외에도 다음 장에서는 매개변수 입력, 매개변수 출력 및 현재 지원되는 함수를 사용하는 방법을 알려드립니다. js 패널 미리보기는 다음과 같습니다.
13.png

 

2. 이벤트 매개변수 가져오기

코드로 다른 컴포넌트의 값을 전달하여 처리하는 등 매개변수를 입력해야 하는 경우 다음과 같이 작성하십시오.

function () {

this.models[fieldKey]

//示例：this.models[' input_yi7bli17 ']

}

2.1. 현재 컴포넌트 속성 가져오기

이벤트 함수에서 arguments[0]을 통해 속성 값을 가져올 수 있습니다. 예:

function () {

const { field} = arguments[0]

}

서로 다른 동작에서 가져올 수 있는 컴포넌트 속성도 다릅니다. 자세한 내용은 다음을 참조하십시오.

2.1.1. onBlur

컴포넌트의 다음을 가져올 수 있습니다.fieldKey，fieldKey는 string 유형입니다. 예를 들어:

function () {

//表示获取当前组件的值

const { field } = arguments[0]

this.models['input_pr13o8wi']=field

}

2.1.2. onChange

컴포넌트의 다음을 가져올 수 있습니다.fieldKey및value，데이터 유형은 다음과 같습니다.{ field: string, value: any }

속성 의미:

  • field: 필드 키
  • value: 필드 값

2.1.3. onFocus

onBlur와 동일

2.2. 함수 [this] 상세 설명

컴포넌트 속성을 가져오는 것 외에도 다른 컴포넌트의 속성을 가져오는 것을 지원합니다.

액션 함수에서 this는 GenerateForm 인스턴스를 가리키며, GenerateForm의 메서드를 직접 호출할 수 있습니다.

여기서 강조할 점은 this 함수에서 컴포넌트 키를 대입하면 해당 값을 가져오거나 해당 fieldKey에 값을 쓸 수 있다는 것입니다. 예: this.models['fieldKey']

function () {

// 获取表单值

this.getData()

// 设置表单字段的值

this.models['id'] = 'new value'

// 触发某个编写好的函数

this.triggerEvent('foo', { a: 123 })

// 显示表单隐藏的字段

this.display('id')

}

3. 코드 작성

원하는 속성이나 값을 얻은 후에는 다음과 같이 코드를 직접 작성할 수 있습니다.

const keyA = 'input_yi7bli17'const keyB = 'input_78qtmi79'const keyC = 'input_n8qwf66f'this.models[keyC] = this.models[keyA] + this.models[keyB]

3.1. 지원되는 함수

함수에서 triggerEvent를 사용하여 함수를 호출합니다.

function () {

this.triggerEvent('test', { id: '123' })

}

test 메서드에서 다음 방법으로 매개변수를 가져올 수 있습니다.

function () {

const { id } = arguments[0]

}

4. 실행

양식의 '미리보기'를 클릭하여 해당 동작을 트리거하면 효과를 볼 수 있습니다.

5. 예시 설명

예: 현재 구성 요소 값을 가져와 다른 구성 요소에 할당합니다. 다른 구성 요소의 키는 input_69m9x9mj입니다.

11.png
12.PNG

 

    링크: