如何在另一个 div 中分配一个 div

问题描述

大家早上好，我正在创建一个产品销售系统，这个话题会有点长，因为我想好好解释一下。

系统正在Vaadin + MysqL + SpringBoot + Maven开发

在主屏幕上，我们有一个带有“新建”、“更改”和“删除”按钮的网格：

点击新按钮时会打开一个窗口，开始“销售”产品：

这里的问题如下，当我点击“+ item”时出现以下情况：

问题：创建了一个滚动条（在窗口右侧），Save、Close 和 + Item 按钮向下移动（仅在滚动条向下滚动时出现）。每次我尝试添加产品（+ 项目）时，重复该过程，按钮被扔下。

所需的解决方案：我希望将按钮“冻结或固定”在窗口底部，并且通过添加产品甚至可以创建滚动条，但无需向下移动按钮

我想到了这样的事情：

接收产品的div2在任何情况下都不能侵入divs1和divs3（上下）

但我承认我无法创造这个……我尝试了很多方法，但都失败了

如果有人可以帮助我，我很感激

我的代码：

package br.com.fjsistemas.cadastros.view;

import java.text.NumberFormat;
import java.text.ParseException;
import java.time.LocalDate;
import java.util.HashMap;
import java.util.List;
import java.util.Locale;
import java.util.Map;

import javax.annotation.postconstruct;

import org.springframework.beans.factory.annotation.Autowired;
import org.vaadin.textfieldformatter.CustomStringBlockFormatter;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.comboBox.ComboBox;
import com.vaadin.flow.component.datepicker.DatePicker;
import com.vaadin.flow.component.dialog.Dialog;
import com.vaadin.flow.component.formlayout.Formlayout;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.GridVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.textfield.NumberField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.data.binder.PropertyId;
import com.vaadin.flow.data.renderer.NumberRenderer;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

import br.com.fjsistemas.backend.Cliente;
import br.com.fjsistemas.backend.Produto;
import br.com.fjsistemas.backend.venda;
import br.com.fjsistemas.main.MainView;
import br.com.fjsistemas.repository.ClienteRepository;
import br.com.fjsistemas.repository.ProdutoRepository;
import br.com.fjsistemas.service.vendaService;

@Route(value = "venda-view",layout = MainView.class)
@PageTitle("Lançamento de vendas")
public class vendaView extends VerticalLayout {

    private static final long serialVersionUID = 1L;

    private HorizontalLayout hltvenda = new HorizontalLayout();
    Grid<venda> Grdvenda = new Grid<>(venda.class,false);

    private HorizontalLayout hltBarraBotoes = new HorizontalLayout();
    Button btnNovo = new Button("Novo");
    Button btnAlterar = new Button("Alterar");
    Button btnExcluir = new Button("Excluir");

    private Dialog dlgJanela = new Dialog();

    private Formlayout fltCamposvenda = new Formlayout();

    HorizontalLayout primeiraLinhaGuiavenda = new HorizontalLayout();
    HorizontalLayout segundalinhaGuiavenda = new HorizontalLayout();
    
    Tab vender = new Tab("vendas");
    Div venderDiv = new Div();

    Tab entrega = new Tab("Entregas");
    Div entregaDiv = new Div();

    Tab financeiro = new Tab("Financeiro");
    Div financeiroDiv = new Div();

    @PropertyId("data")
    private DatePicker txtDatavenda = new DatePicker("Data venda");

    @PropertyId("nome")
    private ComboBox<Cliente> txtNomeCliente = new ComboBox<>();

    @PropertyId("telefone")
    private TextField txtTelefone = new TextField("Telefone");

    @PropertyId("celular")
    private TextField txtCelular = new TextField("Celular");

    @PropertyId("campoSomaValores")
    private TextField campoSomaValores = new TextField();

    private HorizontalLayout htlDlgBarraBotoes = new HorizontalLayout();
    private Button btnSalvar = new Button("Salvar");
    private Button btnFechar = new Button("Fechar");
    private Button btnAdicionarItem = new Button("+ Item");

    @Autowired
    vendaService vendaService;

    @Autowired
    ClienteRepository clienteRepository;

    @Autowired
    ProdutoRepository produtoRepository;

    private List<venda> listavendas;
    private venda venda;

    Binder<venda> bindervenda = new Binder<>(venda.class);

    public vendaView() {

    }

    @postconstruct
    public void init() {
        configuraTela();

    }

    private void configuraTela() {

        setMargin(false);
        setPadding(false);

        configuraHltvenda();
        configuraFltBarraBotoes();
        configuraDlgJanela();
        populaGrdvenda();
        configurabinder();

        add(hltvenda,hltBarraBotoes);
    }

    private void configuraFltBarraBotoes() {

        btnNovo.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnNovo.addClickListener(e -> {
            novoClick();
        });

        btnAlterar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnAlterar.addClickListener(e -> {
            alterarClick();
        });

        btnExcluir.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnExcluir.addClickListener(e -> {
            excluirClick();
        });

        hltBarraBotoes.add(btnNovo,btnAlterar,btnExcluir);
    }

    private void excluirClick() {

        if (venda != null) {
            listavendas.remove(venda);
            vendaService.delete(venda);
            atualizaGrdvenda();
        }
    }

    private void configuraHltvenda() {
        hltvenda.setWidthFull();
        configuraGrdvenda();
        hltvenda.add(Grdvenda);
    }

    private void configuraGrdvenda() {
        Grdvenda.setHeight("820px");
        Grdvenda.setWidthFull();

        Grdvenda.addColumn(venda::getId).setHeader("ID:").setAutoWidth(true);

        Grdvenda.addColumn(venda::getDatavenda).setHeader("Data venda:").setAutoWidth(true).setKey("datavenda");

        Grdvenda.addColumn(venda::getNomeCliente).setHeader("Nome:").setAutoWidth(true).setKey("nome");

        Grdvenda.addColumn(new NumberRenderer<>(venda::getValorTotalvenda,"R$ %(,.2f",Locale.getDefault(),"R$ 0.00"))
                .setHeader("Valor Total:").setAutoWidth(true).setKey("valorTotalvenda");

        Grdvenda.addThemeVariants(GridVariant.LUMO_COMPACT,GridVariant.LUMO_COLUMN_BORDERS);

        Grdvenda.getColumns().forEach(col -> col.setAutoWidth(true).setSortable(true).setResizable(true));

        Grdvenda.addItemClickListener(e -> {
            venda = e.getItem();
        });

    }

    private void configuraDlgJanela() {

        dlgJanela.setHeight("755px");
        dlgJanela.setWidth("860px");

//=====================================================================================================================

        txtNomeCliente.setWidth("390px");
        txtNomeCliente.setLabel("Nome Cliente");

        List<Cliente> listaDeClientes = clienteRepository.findAll();
        txtNomeCliente.setItemLabelGenerator(Cliente::getNome);
        txtNomeCliente.setItems(listaDeClientes);
        txtNomeCliente.addValuechangelistener(event -> {
            txtTelefone.setValue(event.getValue().getFone());
            txtCelular.setValue(event.getValue().getCelular());
        });

        new CustomStringBlockFormatter.Builder().blocks(0,2,4,4).delimiters("(",")","-").numeric().build()
                .extend(txtTelefone);

        new CustomStringBlockFormatter.Builder().blocks(0,5,"-").numeric().build()
                .extend(txtCelular);

//=====================================================================================================================

        Label text = new Label("Valor Total da Compra");
        text.getElement().getStyle().set("fontWeight","bold");
        text.getStyle().set("margin-top","30em");
        text.getStyle().set("margin-left","5em");
        text.getStyle().set("text-align","center");
        campoSomaValores.getStyle().set("margin-top","30em");
        campoSomaValores.setWidth("30em");

//==========================================================================================================================    

        segundalinhaGuiavenda.add(txtNomeCliente,txtTelefone,txtCelular);

        fltCamposvenda.add(venderDiv,entregaDiv,financeiroDiv);
        venderDiv.setHeight("120px");
        venderDiv.add(txtDatavenda,segundalinhaGuiavenda);
        vender.add(venderDiv);

        LocalDate Now = LocalDate.Now();
        txtDatavenda.setValue(Now);

        Map<Tab,Component> tabsToPages = new HashMap<>();
        tabsToPages.put(vender,venderDiv);
        tabsToPages.put(entrega,entregaDiv);
        tabsToPages.put(financeiro,financeiroDiv);
        Tabs tabs = new Tabs(vender,entrega,financeiro);
        Div pages = new Div(venderDiv,financeiroDiv);

        tabs.addSelectedchangelistener(event -> {
            tabsToPages.values().forEach(page -> page.setVisible(false));
            Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
            selectedPage.setVisible(true);
        });

        dlgJanela.add(tabs,pages);

        btnSalvar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnSalvar.getStyle().set("margin-top","30em");
        btnSalvar.getStyle().set("margin-left","0em");
        btnSalvar.addClickListener(e -> {
            salvarClick();
        });

        btnFechar.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnFechar.getStyle().set("margin-top","30em");
        btnFechar.addClickListener(e -> {
            dlgJanela.close();
        });

        btnAdicionarItem.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        btnAdicionarItem.getStyle().set("margin-top","30em");
        btnAdicionarItem.addClickListener(e -> {
            adicionaProduto();
        });

        htlDlgBarraBotoes.add(btnSalvar,btnFechar,btnAdicionarItem,text,campoSomaValores);

        dlgJanela.add(fltCamposvenda,htlDlgBarraBotoes);
    }

    private void salvarClick() {

        venda = bindervenda.getBean();

        boolean adicionarLista = venda.getId() == null ? true : false;

        vendaService.create(venda);

        if (adicionarLista) {
            listavendas.add(venda);
        }
        atualizaGrdvenda();
        novavenda();
        txtNomeCliente.focus();

        bindervenda.setBean(venda);

        if (adicionarLista) {
            dlgJanela.close();
        }
    }

    private void populaGrdvenda() {

        listavendas = vendaService.read();
        atualizaGrdvenda();
    }

    private void atualizaGrdvenda() {
        Grdvenda.setItems(listavendas);
    }

    private void configurabinder() {

        bindervenda.bindInstanceFields(this);

    }

    private void novoClick() {

        novavenda();
        bindervenda.setBean(venda);

        dlgJanela.open();
        txtNomeCliente.focus();
    }

    private void alterarClick() {

        if (venda != null) {
            bindervenda.setBean(venda);

            dlgJanela.open();

        }
    }

    private void adicionaProduto() {

        ComboBox<Produto> txtProdutos = new ComboBox<>();

        NumberField txtQuantidade = new NumberField("Quantidade");

        TextField txtValorUnitario = new TextField("Valor Unitário");

        TextField txtValorTotalItem = new TextField("Valor Total Item");

        txtProdutos.setWidth("370px");
        txtProdutos.setLabel("Produtos");
        List<Produto> listaDeProdutos = produtoRepository.findAll();
        txtProdutos.setItemLabelGenerator(Produto::getNome);
        txtProdutos.setItems(listaDeProdutos);
        txtProdutos.addValuechangelistener(event -> {

            NumberFormat formatter = NumberFormat.getCurrencyInstance(new Locale("pt","BR"));
            try {

                txtValorUnitario.setValue(formatter.format(event.getValue().getValor()));

            } catch (Exception e) {
                e.printstacktrace();
            }

        });

//==========================================================================================================================

        txtQuantidade.setHasControls(true);
        txtQuantidade.setValue(null);
        txtQuantidade.setMin(1);

        txtQuantidade.addValuechangelistener(event -> {

            NumberFormat formatter = NumberFormat.getCurrencyInstance(new Locale("pt","BR"));
            double valorTotal = 0;
            try {
                valorTotal = formatter.parse(txtValorUnitario.getValue()).doubleValue() * txtQuantidade.getValue();
            } catch (ParseException e1) {
                // Todo Auto-generated catch block
                e1.printstacktrace();
            }
            txtValorTotalItem.setValue(formatter.format(valorTotal));
            campoSomaValores.setValue(formatter.format(valorTotal));
        });

        HorizontalLayout linhaNova = new HorizontalLayout();
        
        linhaNova.add(txtProdutos,txtQuantidade,txtValorUnitario,txtValorTotalItem);
        

        venderDiv.add(linhaNova);

    }

    private void novavenda() {
        venda = new venda();
        venda.setNomeCliente(" ");
        dlgJanela.close();

    }
}

解决方法

您还可以使用百分比。所以代替

venderDiv.setHeight("120px");

使用百分比表示 div 高度

venderDiv.setHeight("30%");