add module fe mappign jasa account

2026-08-20 03:13:29 +07:00
parent 0c8848c18a
commit 89dddeb638
5 changed files with 272 additions and 0 deletions
--- a/test/vuex/acc-one-map-jasa-coa/components/left-side.vue
+++ b/test/vuex/acc-one-map-jasa-coa/components/left-side.vue
@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <v-toolbar color="primary" dark>
+            <v-toolbar-title>Daftar Jasa</v-toolbar-title>
+            <v-spacer></v-spacer>
+        </v-toolbar>
+        <v-card class="pa-2">
+            <v-layout row wrap>
+                <v-flex xs4 pa-1>
+                    <v-text-field v-model="keyword" hide-details outline
+                        label="Cari" placeholder="Nama Jasa"></v-text-field>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+        <v-card class="pa-2 mt-2">
+            <v-data-table :headers="headers" :items="list_coaservice.records"
+                hide-actions class="elevation-1">
+                <template v-slot:items="props">
+                    <tr @click="selectjasa(props.item)" :class="{ 'amber lighten-4': isSelected(props.item) }">
+                        <td class="text-xs-center pa-2">
+                            {{ props.index + 1 }}
+                        </td>
+                        <td class="text-xs-left pa-2">
+                            {{ props.item.M_ItemDesc }}
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+            <v-divider class="my-1"></v-divider>
+            <div class="pa-2 mt-1 text-xs-centar">
+                <v-pagination v-model="currpage" :length="pagelength" :total-visible="5"></v-pagination>
+            </div>
+        </v-card>
+
+        <v-snackbar v-model="snackbar.state" multi-line top :timeout="3000" :color="snackbar.color">
+            {{ snackbar.mssg }}
+            <v-btn class="pa-2" round flat @click="snackbar.state = false">Tutup</v-btn>
+        </v-snackbar>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    components: { },
+    mounted() { },
+    data() {
+        return {
+            keyword: "",
+            headers: [
+                {
+                    text: "NO", align: "center", sortable: false, value: "nomor",
+                    width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "NAMA JASA", align: "center", sortable: false, value: "name",
+                    width: "80%", class: "pa-1 blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: {
+        snackbar: {
+            get() {
+                return this.$store.state.service.snackbar
+            },
+            set(val) {
+                this.$store.commit("service/update_snackbar", val)
+            }
+        },
+        currpage: {
+            get() {
+                return this.$store.state.service.currpage
+            },
+            set(val) {
+                this.$store.commit("service/update_currpage", val)
+            }
+        },
+        selected_jasa: {
+            get() {
+                return this.$store.state.service.selected_jasa
+            },
+            set(val) {
+                this.$store.commit("service/update_selected_jasa", val)
+            }
+        },
+        list_coaservice() {
+            return this.$store.state.service.list_coaservice
+        },
+        pagelength() {
+            const total = this.list_coaservice.total;
+            if (total === undefined || total <= 1) return 1;
+            return Math.ceil(total / 10);
+        }
+    },
+    methods: {
+        selectjasa(item) {
+            this.selected_jasa = item
+        },
+        isSelected(item) {
+            return item.M_ItemID == this.selected_jasa.M_ItemID
+        }
+    },
+    watch: {
+        keyword(newval, oldval) {
+            if (newval == oldval) return;
+        }
+    }
+}
+</script>