add module fe mappign jasa account
This commit is contained in:
110
test/vuex/acc-one-map-jasa-coa/components/left-side.vue
Normal file
110
test/vuex/acc-one-map-jasa-coa/components/left-side.vue
Normal file
@@ -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>
|
||||||
61
test/vuex/acc-one-map-jasa-coa/components/right-side.vue
Normal file
61
test/vuex/acc-one-map-jasa-coa/components/right-side.vue
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar color="primary" dark>
|
||||||
|
<v-toolbar-title>Detail Account 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>
|
||||||
|
</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: { },
|
||||||
|
methods: { },
|
||||||
|
watch: { }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
63
test/vuex/acc-one-map-jasa-coa/index.php
Normal file
63
test/vuex/acc-one-map-jasa-coa/index.php
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<link rel="stylesheet" href="../../../libs/vendor/css/google-fonts.css">
|
||||||
|
<link rel="stylesheet" href="../../../libs/vendor/css/icomoon-fonts.css">
|
||||||
|
<link rel="stylesheet" href="../../../libs/vendor/css/vuetify.min.css">
|
||||||
|
<title>ONE | coa mapping jasa</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div v-cloak id="app">
|
||||||
|
<v-app id="smartApp">
|
||||||
|
<one-navbar></one-navbar>
|
||||||
|
<v-content style="background: #F5E8DF!important">
|
||||||
|
<v-container fluid fill-height class="px-1 py-2">
|
||||||
|
<v-flex xs4 class="left" fill-height pa-1>
|
||||||
|
<one-left></one-left>
|
||||||
|
</v-flex>
|
||||||
|
<v-flex xs8 class="right" fill-height pa-1>
|
||||||
|
<one-right></one-right>
|
||||||
|
</v-flex>
|
||||||
|
</v-container>
|
||||||
|
</v-content>
|
||||||
|
<one-footer></one-footer>
|
||||||
|
</v-app>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Vendor -->
|
||||||
|
<script src="../../../libs/vendor/moment.min.js"></script>
|
||||||
|
<script src="../../../libs/vendor/numeral.min.js"></script>
|
||||||
|
<script src="../../../libs/vendor/moment-locale-id.js"></script>
|
||||||
|
<script src="../../../libs/vendor/lodash.js"></script>
|
||||||
|
<script src="../../../libs/vendor/axios.min.js"></script>
|
||||||
|
<script src="../../../libs/vendor/vue.js"></script>
|
||||||
|
<script src="../../../libs/vendor/vuex.js"></script>
|
||||||
|
<script src="../../../libs/vendor/vuetify.js"></script>
|
||||||
|
<script src="../../../libs/vendor/httpVueLoader.js"></script>
|
||||||
|
<script src="../../../libs/one_global.js"></script>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
import { store } from "./store.js";
|
||||||
|
window.store = store;
|
||||||
|
new Vue({
|
||||||
|
store,
|
||||||
|
el: "#app",
|
||||||
|
methods: {},
|
||||||
|
components: {
|
||||||
|
'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
|
||||||
|
'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
|
||||||
|
'one-left': httpVueLoader('./components/left-side.vue'),
|
||||||
|
'one-right': httpVueLoader('./components/right-side.vue'),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
[v-cloak] {
|
||||||
|
display: true
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
test/vuex/acc-one-map-jasa-coa/modules/service.js
Normal file
26
test/vuex/acc-one-map-jasa-coa/modules/service.js
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state: {
|
||||||
|
snackbar: {
|
||||||
|
state: false,
|
||||||
|
mssg: "",
|
||||||
|
color: "error"
|
||||||
|
},
|
||||||
|
loading_process: false,
|
||||||
|
list_coaservice: []
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
update_snackbar(state, val) {
|
||||||
|
state.snackbar = val
|
||||||
|
},
|
||||||
|
update_loading_process(state, val) {
|
||||||
|
state.loading_process = val
|
||||||
|
},
|
||||||
|
update_list_coaservice(state, val) {
|
||||||
|
state.list_coaservice = val
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
12
test/vuex/acc-one-map-jasa-coa/store.js
Normal file
12
test/vuex/acc-one-map-jasa-coa/store.js
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import system from "../../../apps/modules/system/system.js";
|
||||||
|
import service from "./modules/service.js";
|
||||||
|
|
||||||
|
export const store = new Vuex.Store({
|
||||||
|
modules: {
|
||||||
|
system: system,
|
||||||
|
service: service
|
||||||
|
},
|
||||||
|
state: {},
|
||||||
|
mutations: {},
|
||||||
|
actions: {}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user