eiru_bank_statement/src/components/steps/StatementModify.vue

<template lang="pug">
    .statement-modify
        .details-items
            form
                .form-item
                    label.form-label Caja
                    input.form-input(readonly='readonly' v-model="selectedStatement.name")
                .form-item
                    label.form-label Diario
                    input.form-input(readonly='readonly' v-model='getJournalSelectedStatement')
                .form-item
                    label.form-label Tipo de Caja
                    input.form-input(readonly='readonly' v-model="getTypeSelectedStatement")
                .form-item
                    label.form-label Responsable
                    input.form-input(readonly='readonly' v-model='getUserSelectedStatement')
        .details-items-line
            card-grid-item(
                :items='statementLines'
                @onClickUpdate='clickUpdate'
                @onClickDeleted='clickDeleted'
            )
        statement-line-modal(
            :show='showStatementLine'
            :line='lineSelected'
            :currencyStatement='currencyStatement'
            @onCancel='onCancel'
        )
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    import {SwitchButtonInput, InputDropdown } from '../common'
    import CardGridItem from '@/components/steps/CardGridItem'
    import StatementLineModal from '../modal/StatementLineModal'

    export default {
        components: {
            SwitchButtonInput,
            InputDropdown,
            CardGridItem,
            StatementLineModal,
        },
        methods: {
            clickUpdate(value) {
                // console.log(value);
                this.selectLineSelected(value)
                this.showStatementLineModify(true)
            },
            clickDeleted(value, state) {
                this.addDeletedLine({'id':value, 'state': state})
            },
            onCancel(){
                this.showStatementLineModify(false)
            },
            ...mapActions([
                'addDeletedLine',
                'addUpdateLine',
                'showStatementLineModify',
                'selectLineSelected',
            ])
        },
        computed: mapGetters([
            'selectedStatement',
            'getJournalSelectedStatement',
            'getTypeSelectedStatement',
            'getUserSelectedStatement',
            'statementLines',
            'showStatementLine',
            'lineSelected',
            'currencyStatement',
        ]),
    }
</script>

<style lang="sass">
    @import '../../assets/variables'

    .statement-modify
        width: 100%
        height: calc(100% - 50px)
        .details-items
            width: 100%
            height: 200px
            form
                width: 100%
                height: 100%
                margin-right: 50px
                padding: 25px
                border: 1px solid$app-border-color
                // background: $app-bg-color
                .form-item
                    width: 100%
                    height: 35px
                    margin-bottom: 5px
                    margin-top: 5px
                    text-align: center
                    & > .form-label, > .form-input
                        display: inline-block
                        vertical-align: top
                    .form-label
                        width: 250px
                        height: 35px
                        font-size: 12pt
                        line-height: 30px
                        padding-left: 100px
                        color: $app-dark-color
                    .form-input
                        width: 400px
                        height: 35px
                        font-size: 12pt
                        border-radius: 0
        .details-items-line
            width: 100%
            height: calc(100% - 200px)

</style>