Preenchimento automático de campo, baseado em dataset, na tabela pai x filho

TOTVS Fluig Processos (BPM)
, , ,
1

Tenho uma tabela paixfilho que tem 2 campos zoom buscando dados do mesmo dataset. O campo principal é o fornecedor, e no dataset para cada fornecedor é atribuído um código. Eu preciso que selecionando o fornecedor (name=“fornnn”) o campo do código (name=“codtcf”) seja preenchido automaticamente baseado no dataset.
Para input fora da tabela consegui fazer a função funcionar, mas dentro da tabela não funciona. Alguém pode ajudar?

	<!-- inicio table de notas fiscais -->
	<div class="form-input"><div class="form-group">
	<label></label>
	
	<div class="table-responsive">
	<table tablename="tablenf" class="table" noaddbutton="true">
		<thead>
			<tr class="tableHeadRow">
				<th class="tableColumn" style="width: 10%;">Data de Emissão</th>
            <th class="tableColumn" style="width: 15%;">N° Nota Fiscal</th>
            <th class="tableColumn" style="width: 30%;">Fornecedor</th>
            <th class="tableColumn" style="width: 15%;">Contrato/OC/OS</th>
            <th class="tableColumn" style="width: 10%;">Valor</th>
            <th class="tableColumn" style="width: 10%;">Forma de Pagamento</th>
            <th class="tableColumn" style="width: 10%;">Vencimento</th>
			</tr>
		</thead>
		<tbody>
			<tr class="tableBodyRow">
				<td class="fs-v-align-middle">
				<div class="form-input">
					<input type="date" name="emissao" class="form-control" label="emissao" mask="00/00/0000" maxlength="10" data-only-numbers="true">
				</div>
				</td>

				<td class="fs-v-align-middle">
					<div class="form-input">
						<input type="number" name="numero" class="form-control" label="numero">
					</div>
				</td>

				<td class="fs-v-align-middle">
					<div class="form-input">
				<div class="form-field" data-type="zoomfield" data-show-properties="" data-field-name="fornnn">
				<input type="zoom" class="form-control" name="fornnn" id="fornnn" dataset="dsFornecedor2" zoomvalue="NOMEFANTASIA" datasetvalue="NOMEFANTASIA" style="" data-zoom="{'displayKey':'NOMEFANTASIA','datasetId':'dsFornecedor2','fields':[{'field':'NOMEFANTASIA','label':'NOMEFANTASIA','standard':true},{'field':'CGCCFO','label':'CNPJ','standard':true}]}">
		</div>
				<input type="hidden" name="hidden_forn" id="hidden_forn">
					</div>
				</td>

				<td class="fs-v-align-middle">
					<div class="form-input">
						<input type="text" name="contrato" class="form-control" label="contrato">
					</div>
				</td>

				<td class="fs-v-align-middle">
					<div class="form-input">
						<input type="text" name="valor" class="form-control" label="valor">
					</div>
				</td>

				<td class="fs-v-align-middle">
					<div class="form-input">
						<input type="text" name="forma" class="form-control" label="forma">
					</div>
				</td>

				<td class="fs-v-align-middle">
					<div class="form-input">
						<input type="text" name="venc" class="form-control" label="venc">
					</div>
				</td>
				<td class="fs-v-align-middle">
					<div class="form-input">
                    <input type="zoom" class="form-control" name="codtcf" id="codtcf" dataset="dsFornecedor2" zoomvalue="CODTCF" datasetvalue="CODTCF" style="" data-zoom="{'displayKey':'CODTCF','datasetId':'dsFornecedor2','fields':[{'field':'NOMEFANTASIA','label':'NOMEFANTASIA','standard':true},{'field':'CODTCF','label':'CODTCF','standard':true}]}">

					</div>
				</td>
				
			</tr>
		</tbody>
	</table>
		<button type="button" class="btn btn-info" id="btnnota" name="btnnota" onclick="wdkAddChild('tablenf')">Nova nota</button>
	</div></div></div>
	
	<!-- fim table de notas fiscais -->
2 curtidas
2

Tenta usar isso no seu JS.

A função extrairIndex pega o index dos campos na tabela paixfilho.
A função setSelectedZoomItem é chamada sempre que um campo zoom é selecionado. O parametro selectedItem contém todas informações selecionadas no campo zoom.

/**
 * Função extrairIndex() 
 * Extrai o index de um elemento da tabela paixfilho
 * @param {string} oElement - Id da tabela paixfilho
 */
function extrairIndex(oElement){
    const index = oElement.split('___');
    return index[1];
}

/**
 * Função setSelectedZoomItem() 
 * É chamada ao selecionar um item no zoom
 * @param {object} selectedItem - Objeto retornado pelo zoom
 */
function setSelectedZoomItem(selectedItem){
    var indexItem = extrairIndex(selectedItem.inputId)

    if(selectedItem.inputId == 'fornnn___' + indexItem){
        //Seta o valor do campo zoom codtcf com o valor NOMEFANTASIA do item selecionado no campo Zoom fornnn
        setZoomData("codtcf___" + indexItem, selectedItem.NOMEFANTASIA.trim());
    }
}
1 curtida
3

Olá Caio, obrigado por responder. Mas infelizmente não deu certo. Eu já tentei inúmeras formas mas nada dá certo.

5

Uma dúvida. Você tem o código do fornecedor no zoom fornnn? Me parece que no Fornnn você só tem o campo Nome fantasia e Cnpj, mas o código do fornecedor, que é o que você precisa pegar ao selecionar o fornecedor, não existe no zoom

6

@alinne.ferreira , por qual motivo você tem 2 zoom buscando o mesmo dataset? Não precisaria ter o segundo. Pode torná-lo um input texto e deixá-lo somente como leitura. Aí quando selecionar no primeiro zoom você simplesmente preenche esse input.

Exemplo de como ficariam na tabela (removi tudo “desnecessário” pra facilitar a leitura).

Importante notar que no seu zoom eu coloquei os campos que usa do dataset.

<td>
	<input type="zoom" class="form-control" name="fornnn" id="fornnn"
		data-zoom="{
			'displayKey':'NOMEFANTASIA',
			'datasetId':'dsFornecedor2',
			'fields':[
				{
					'field':'NOMEFANTASIA',
					'label':'NOMEFANTASIA',
					'standard':'true'
				},
				{
					'field':'CGCCFO',
					'label':'CNPJ'
				},
				{
					'field':'CODTCF',
					'label':'CODTCF'
				}
			]
		}"
	>
</td>
<td>
	<input type="text" class="form-control" name="codtcf" id="codtcf" readonly>
</td>

Aí você, no JS do formulário, declara a função setSelectedZoomItem pra tratar quando selecionar, igual ao que o @caiocustodio mostrou. Mas importante também declarar a função removedZoomItem pra limpar o campo quando desmarcar o item no zoom.

// Ação quando há uma seleção em algum Zoom
function setSelectedZoomItem(selectedItem){
	const [inputName, inputIndex] = selectedItem.inputName.split("___");

	if (inputName === "fornnn") {
		$(`#codtcf___${inputIndex}`).val(selectedItem.CODTCF);
	}
}

// Ação quando desmarca uma seleção em algum zoom
function removedZoomItem(removedItem){
	const [inputName, inputIndex] = removedItem.inputName.split("___");

	if (inputName === "fornnn") {
		$(`#codtcf___${inputIndex}`).val("");
	}
}
2 curtidas
7

Outro ponto importante. Você só pode ter 1 função setSelectedZoomItem e 1 função removedZoomItem declarada no JS do formulário.

Então se há outros Zooms (dentro ou fora da pai x filho) deve tratá-los todos na mesma função. Por isso é comum sempre ter um if validando o nome do zoom, garantindo assim qual procedimento executará.

2 curtidas
8

Muito obrigado @caiocustodio e @brunogasparetto, adicionei a coluna CODTCF no zoom e mudei o segundo campo para input text como vocês indicaram e a função deu certo.

4 curtidas