RemoveItem.vue

<template>
  <v-container class="pt-0">
    <!-- Titulo -->
    <HeaderSemLeitor :tipo="'retornar'" />
    <!-- Corpo -->
    <v-layout row wrap>
      <v-flex
        class="green lighten-4 borda-arredondada
        borda-fina pa-4"
        xs12 sm6 offset-sm3>
        <!-- Mensagens Erro -->
        <v-flex
          v-if="msgsErro.length > 0"
          class="white--text red borda-arredondada pa-2 mb-2"
          xs12>
          <span
            v-for="(erro, i) in msgsErro"
            :key="i"
            class="caption maiuscula">{{ erro }}</span>
        </v-flex>
        <!-- Formulario -->
        <v-flex class="text-xs-center">
          <div v-if="!showroomTemporarioVazio">
            <!-- Linha Modelo -->
            <v-flex xs12>
              <v-layout row wrap>
                <!-- Modelo -->
                <v-flex xs6>
                  <v-select
                    color="primary"
                    :items="listaModelosEmShowroomTemporario"
                    v-model="produto.modelo"
                    autocomplete
                    :disabled="loading"
                    single-line
                    clearable
                    no-data-text="Este modelo não consta no Estoque.">
                  </v-select>
                </v-flex>
                <!-- Botão Repetir Modelo -->
                <v-flex xs6>
                  <v-btn
                    :disabled="ultimoModelo === null || modeloAnteriorNaoExisteMais"
                    @click="repetir('modelo')"
                    small
                    class="primary elevation-0">
                    REPETIR MODELO
                  </v-btn>
                </v-flex>
              </v-layout>
            </v-flex>
            <!-- Linha Cor -->
            <v-flex xs12>
              <v-layout row wrap>
                <!-- Cor -->
                <v-flex xs6>
                  <v-select
                    combobox
                    :disabled="listaCoresVazia"
                    color="primary"
                    :items="listaCoresDoModeloEscolhido"
                    v-model="produto.cor"
                    label="Cor"
                    required
                    clearable>
                  </v-select>
                </v-flex>
                <!-- Botão Repetir Cor -->
                <v-flex xs6>
                  <v-btn
                    small
                    :disabled="ultimaCor === null || this.produto.modelo === null || corAnteriorNaoExisteMais"
                    @click="repetir('cor')"
                    class="primary elevation-0">
                    REPETIR COR
                  </v-btn>
                </v-flex>
              </v-layout>
            </v-flex>
            <!-- Linha Tamanho e Qntidade -->
            <v-flex xs12>
              <v-layout row wrap>
                <!-- Tamanho -->
                <v-flex class="pr-1" xs6>
                  <v-select
                    :disabled="listaTamanhosVazia"
                    :items="listaTamanhosDoModeloEscolhido"
                    v-model="produto.tamanho"
                    label="Tamanho"
                    single-line
                    clearable
                    required>
                  </v-select>
                </v-flex>
                <!-- Qntidade -->
                <v-flex xs6>
                  <v-select
                    :disabled="listaQntidadeVazia"
                    :items="listaQntidadeDoModeloEscolhido"
                    v-model="produto.quantidade"
                    label="Quantidade"
                    single-line
                    clearable
                    required>
                  </v-select>
                </v-flex>
              </v-layout>
            </v-flex>
            <!-- BOTÃO Adicionar no Lote -->
            <v-btn
              color="primary"
              :disabled="!formValido"
              @click="adicionarProdutoLote('remover')"
              class="elevation-0">
              COLOCAR NO LOTE
            </v-btn>
          </div>
          <div v-else>
            <v-flex xs12>
              <span>Contando com o lote abaixo, o estoque não possui mais unidades a serem removidas.</span>
            </v-flex>
          </div>
        </v-flex>
      </v-flex>
      <!-- Lista de Produtos LOTE -->
      <v-flex class="grey lighten-2
        borda-fina pa-4"
        xs12 sm6 offset-sm3>
        <!-- Tabela Lote -->
        <table class="nova-tabela" style="width: 100%">
          <tr class="celula">
            <th class="celula caption">Modelo</th>
            <th class="celula caption">Cor</th>
            <th class="celula caption">Tam.</th>
            <th v-if="listaProdutos.length !== 0" class="celula caption"></th>
          </tr>
          <tr
            v-if="listaProdutos.length > 0"
            v-for="(produto, i) in listaProdutos"
            :key="i">
            <td class="celula">{{ produto.modelo }}</td>
            <td class="celula maiuscula">{{ produto.cor }}</td>
            <td class="celula">{{ produto.tamanho }}</td>
            <td class="celula text-xs-center caption">
              <span style="cursor: pointer" @click="removerProdutoDaLista(i)">
                <b>remover</b>
              </span>
            </td>
          </tr>
          <tr v-if="listaProdutos.length === 0">
            <td class="celula text-xs-center" colspan="3">Sem nenhum produto adicionado.</td>
          </tr>
        </table>
        <!-- BOTÃO Atualizar Showroom -->
        <v-flex class="text-xs-center mt-2" xs12>
          <v-btn
            v-if="listaProdutos.length > 0"
            color="primary"
            @click="salvarLote('retornar_van')"
            class="elevation-0">
            ATUALIZAR SHOWROOM
          </v-btn>
        </v-flex>
      </v-flex>
    </v-layout>
  </v-container>  
</template>

<script>
import {compartilhado} from '@/mixins/Showroom/Shared/compartilhado'
import {retornarVan} from '@/mixins/Showroom/RetornarVan/retornarVan'
import HeaderSemLeitor from '../Shared/HeaderSemLeitor'

export default {
  mixins: [compartilhado, retornarVan],
  components: {
    HeaderSemLeitor
  },
  computed: {
    showroomTemporarioVazio () {
      if (Object.keys(this.showroomTemporario).length === 0) {
        return true
      } else {
        return false
      }
    },
    modeloAnteriorNaoExisteMais () {
      if (this.ultimoModelo) {
        if (!this.listaModelosEmShowroomTemporario.includes(this.ultimoModelo)) {
          return true
        }
      }
      return false
    },
    listaModelosEmShowroomTemporario () {
      let showroomTemporario = this.reorganizaShowroomTemporario
      let arrayModelos = []

      if (showroomTemporario) {
        for (let key in showroomTemporario) {
          if (!arrayModelos.includes(key)) {
            arrayModelos.push(key)
          }
        }
      }

      return arrayModelos
    },
    listaCoresDoModeloEscolhido () {
      let modeloEscolhido = this.modeloNormalizado
      let arrayCores = []

      if (modeloEscolhido) {
        let showroomTemporario = this.reorganizaShowroomTemporario
        let objSomenteModeloPassado = showroomTemporario[modeloEscolhido]

        if (objSomenteModeloPassado) {
          for (let key in objSomenteModeloPassado) {
            arrayCores.push(key)
          }
        }
      }

      return arrayCores
    },
    listaTamanhosDoModeloEscolhido () {
      let modeloEscolhido = this.modeloNormalizado
      let corEscolhida = this.corNormalizada
      let arrayTamanhos = []

      if (modeloEscolhido && corEscolhida) {
        let showroomTemporario = this.reorganizaShowroomTemporario
        let objSomenteCorDoModeloEscolhido = showroomTemporario[modeloEscolhido][corEscolhida]

        if (objSomenteCorDoModeloEscolhido) {
          for (let key in objSomenteCorDoModeloEscolhido) {
            arrayTamanhos.push(key)
          }
        }
      }

      return arrayTamanhos
    },
    listaQntidadeDoModeloEscolhido () {
      let modeloEscolhido = this.modeloNormalizado
      let corEscolhida = this.corNormalizada
      let tamanhoEscolhido = this.tamanhoNormalizado
      let arrayQuantidade = []

      if (modeloEscolhido && corEscolhida && tamanhoEscolhido) {
        let showroomTemporario = this.reorganizaShowroomTemporario
        let quantidadeNoEstoque = showroomTemporario[modeloEscolhido][corEscolhida][tamanhoEscolhido]

        if (quantidadeNoEstoque && quantidadeNoEstoque > 0) {
          for (let i = 1; i <= quantidadeNoEstoque; i++) {
            arrayQuantidade.push(i)
          }
        }
      }

      return arrayQuantidade
    }
  },
  watch: {
    listaProdutos () {
      // Atualizar Session Storage
      sessionStorage.setItem('listaShowroomRemoveSemLeitor', JSON.stringify(this.listaProdutos))
    }
  },
  created () {
    if (sessionStorage.getItem('listaShowroomRemoveSemLeitor')) {
      this.listaProdutos = JSON.parse(sessionStorage.getItem('listaShowroomRemoveSemLeitor'))
    }
  }
}
</script>