FE_CPONE/test/vuex/one-process-reference-out/components/oneProcessRoMaster.vue

<template>
    <v-dialog
        v-model="dialog"
        width="1000px"
        >

        <v-card>
            <v-card-title
            class="headline grey lighten-2 pt-2 pb-2"
            primary-title
            >
            Admin Rujukan Keluar
            </v-card-title>
        <v-card-text class="pt-2 pb-2">

            <v-layout row wrap>
                <v-flex xs4>
                    <one-process-ro-master-add></one-process-ro-master-add>
                </v-flex>
                <v-flex xs8 pl-4>
                    <v-data-table
                        :headers="headers" :items="pxs"
                        :loading="isLoading"
                        hide-actions class="xelevation-1">
                        <template slot="items" slot-scope="props">
                        <td class="text-xs-left pa-2 green--text" v-bind:class="is_selected(props.item)"
                            @click="select(props.item)">
                            {{ props.item.T_TestCode }}
                        </td>
                        <td class="text-xs-left pa-2 green--text" v-bind:class="is_selected(props.item)"
                            @click="select(props.item)">
                            {{ props.item.T_TestName }}
                        </td>
                        <td class="text-xs-left pa-2" v-bind:class="is_selected(props.item)"
                            @click="select(props.item)">
                            {{ props.item.M_CompanyID == 0 ? props.item.M_BranchName : props.item.M_CompanyName }}
                        </td>
                        <td class="text-xs-center pa-0" v-bind:class="is_selected(props.item)"
                            @click="select(props.item)">
                            <v-btn small class="ma-0 one-btn-icon" color="red" dark @click="remove(props.item)"><span class="icon-del"></span></v-btn>
                        </td>
                        </template>

                    </v-data-table>
                    <v-pagination
                        v-model="curr_px_page"
                        :length="total_px_page"
                        :total-visible="5"
                        @input="change_page"
                    ></v-pagination>
                </v-flex>
            </v-layout>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn
            color="primary"
            @click="dialog = false"
            flat
          >
            Tutup
          </v-btn>

          <v-btn
            color="primary"
            @click="save"
            
          >
            Simpan
          </v-btn>

        </v-card-actions>
    </v-dialog>
</template>

<script>
module.exports = {
    components : {
        'one-process-ro-master-add': httpVueLoader('./oneProcessRoMasterAdd.vue')
    },

    data () {
        return {
            headers: [
                {
                text: "TEST CODE",
                align: "left",
                sortable: false,
                value: "mr",
                width: "15%",
                class: "pa-2 blue lighten-3 white--text"
                },
                {
                text: "TEST NAME",
                align: "left",
                sortable: false,
                value: "mr",
                width: "35%",
                class: "pa-2 blue lighten-3 white--text"
                },
                {
                text: "COMPANY",
                align: "left",
                sortable: false,
                value: "mr",
                width: "35%",
                class: "pa-2 blue lighten-3 white--text"
                },
                {
                text: "ACTION",
                align: "left",
                sortable: false,
                value: "mr",
                width: "10%",
                class: "pa-2 blue lighten-3 white--text"
                }
            ],
        }
    },

    computed : {
        dialog : {
            get () { return this.$store.state.ro_master.dialog_main },
            set (v) { this.$store.commit('ro_master/update_dialog_main', v) }
        },

        pxs () {
            return this.$store.state.ro_master.pxs
        },

        total_px () {
            return this.$store.state.ro_master.total_px
        },

        total_px_page () {
            return this.$store.state.ro_master.total_px_page
        },

        curr_px_page : {
            get () { return this.$store.state.ro_master.curr_px_page },
            set (v) { this.$store.commit('ro_master/update_curr_px_page', v) }
        },

        isLoading() {
            return this.$store.state.ro_master.search_status == 1
        }
    },

    methods : {
        is_selected (a) {
            return ""
        },

        select (a) {
            return
        },

        change_page(x) {
            this.curr_px = x
            this.$store.dispatch('re_master/search')
        },

        save() {
            this.$store.dispatch('ro_master/save')
        },

        remove(y) {
            let x = this.$store.state.ro_master.pxs
            let z = []

            for (let i in x) {
                if (x[i].T_TestID == y.T_TestID)
                    { z = x.splice(i, 1) }
            }

            let total_px = this.$store.state.ro_master.total_px
            let total_page = this.$store.state.ro_master.total_page
            this.$store.commit('ro_master/update_pxs', { records: x, total: total_px, total_page: total_page })
        }
    },

    watch : {
        dialog(n, o) {
            if (n && !o) {
                this.$store.dispatch('ro_master/search')
            }
        }
    }
}
</script>