add modules folder based on s_menu
This commit is contained in:
0
test/vuex/acc-one-receive-order-asset/api/api.js
Normal file
0
test/vuex/acc-one-receive-order-asset/api/api.js
Normal file
148
test/vuex/acc-one-receive-order-asset/components/main-layout.vue
Normal file
148
test/vuex/acc-one-receive-order-asset/components/main-layout.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-toolbar color="primary" dark>
|
||||
<v-toolbar-title class="white--text">RECEIVE ORDER ASET</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon>
|
||||
<v-icon large>add_box</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<v-card class="pa-2">
|
||||
<v-layout row align-center>
|
||||
<v-flex xs3>
|
||||
<v-menu v-model="menuStartdateFilter" offset-y lazy min-width="290px" transition="scale-transition" max-width="290px" full-width
|
||||
:nudge-right="40" :close-on-content-click="false">
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-text-field v-model="formattedStartdate" label="Tanggal Awal" hide-details readonly v-on="on" outline></v-text-field>
|
||||
</template>
|
||||
<v-date-picker v-model="filterasset.startdate" no-title
|
||||
@input="menuStartdateFilter = false"></v-date-picker>
|
||||
</v-menu>
|
||||
</v-flex>
|
||||
<v-flex xs3 pl-2>
|
||||
<v-menu v-model="menuEnddateFilter" offset-y lazy min-width="290px" transition="scale-transition" max-width="290px" full-width
|
||||
:nudge-right="40" :close-on-content-click="false">
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-text-field v-model="formattedEnddate" label="Tanggal Akhir" hide-details readonly v-on="on" outline></v-text-field>
|
||||
</template>
|
||||
<v-date-picker v-model="filterasset.enddate" no-title
|
||||
@input="menuEnddateFilter = false"></v-date-picker>
|
||||
</v-menu>
|
||||
</v-flex>
|
||||
<v-flex xs3 pl-2>
|
||||
<v-autocomplete :items="list_status" hide-details outline v-model="filterasset.status"
|
||||
label="Status"></v-autocomplete>
|
||||
</v-flex>
|
||||
<v-flex xs3 pl-2>
|
||||
<v-text-field v-model="filterasset.search" hide-details outline label="Cari"
|
||||
placeholder="cari nomor po..."></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
|
||||
<v-card class="pa-2 mt-2">
|
||||
<v-data-table :headers="headers" :items="list_roasset.records" class="elevation-1" hide-actions></v-data-table>
|
||||
<v-divider class="my-1"></v-divider>
|
||||
<div class="pa-2 mt-1 text-xs-center">
|
||||
<v-pagination v-model="currpage" :length="pagelength" :total-visible="10"></v-pagination>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<v-snackbar v-model="snackbar.state" multi-line top :timeout="3000" :color="snackbar.color">
|
||||
{{ snackbar.msg }}
|
||||
<v-btn class="ml-2" round flat @click="snackbar.state = false">Tutup</v-btn>
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
menuStartdateFilter: false,
|
||||
menuEnddateFilter: false,
|
||||
headers: [
|
||||
{
|
||||
text: "TANGGAL RO", align: "center", sortable: false,
|
||||
value: "date", width: "10%", class: "pa-1 blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "NOMOR RO", align: "center", sortable: false,
|
||||
value: "noro", width: "15%", class: "pa-1 blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "NOMOR PO", align: "center", sortable: false,
|
||||
value: "nopo", width: "15%", class: "pa-1 blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "SUPPLIER", align: "center", sortable: false,
|
||||
value: "supp", width: "15%", class: "pa-1 blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "CATATAN", align: "center", sortable: false,
|
||||
value: "note", width: "20%", class: "pa-1 blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "STATUS", align: "center", sortable: false,
|
||||
value: "status", width: "10%", class: "pa-1 blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "AKSI", align: "center", sortable: false,
|
||||
value: "acts", width: "15%", class: "pa-1 blue lighten-3 white--text",
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
snackbar: {
|
||||
get() {
|
||||
return this.$store.state.roasset.snackbar
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("roasset/update_snackbar", val)
|
||||
}
|
||||
},
|
||||
filterasset: {
|
||||
get() {
|
||||
return this.$store.state.roasset.filterasset
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("roasset/update_filterasset", val)
|
||||
}
|
||||
},
|
||||
currpage: {
|
||||
get() {
|
||||
return this.$store.state.roasset.currpage
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("roasset/update_currpage", val)
|
||||
}
|
||||
},
|
||||
list_status() {
|
||||
return this.$store.state.roasset.list_status
|
||||
},
|
||||
list_roasset() {
|
||||
return this.$store.state.roasset.list_roasset
|
||||
},
|
||||
pagelength() {
|
||||
let total = this.list_roasset.total
|
||||
if (total === undefined || total < 1) return 1
|
||||
return Math.ceil(total/10)
|
||||
},
|
||||
formattedStartdate() {
|
||||
return this.formatDate(this.filterasset.startdate)
|
||||
},
|
||||
formattedEnddate() {
|
||||
return this.formatDate(this.filterasset.enddate)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
if (!date) return null;
|
||||
const [year, month, day] = date.split('-');
|
||||
return `${day}-${month}-${year}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
59
test/vuex/acc-one-receive-order-asset/index.php
Normal file
59
test/vuex/acc-one-receive-order-asset/index.php
Normal file
@@ -0,0 +1,59 @@
|
||||
<!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</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 xs12 fill-height pa-1>
|
||||
|
||||
</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>
|
||||
|
||||
<!-- App 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')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
51
test/vuex/acc-one-receive-order-asset/modules/roasset.js
Normal file
51
test/vuex/acc-one-receive-order-asset/modules/roasset.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import * as api from "../api/api.js";
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
/* common */
|
||||
snackbar: {
|
||||
color: 'success',
|
||||
msg: '',
|
||||
state: false
|
||||
},
|
||||
loading_process: false,
|
||||
|
||||
/* main layout */
|
||||
filterasset: {
|
||||
startdate: moment(new Date()).format('YYYY-MM-DD'),
|
||||
enddate: moment(new Date()).format('YYYY-MM-DD'),
|
||||
status: 'All',
|
||||
search: ''
|
||||
},
|
||||
list_status: ['All', 'Confirmed', 'Unconfirmed'],
|
||||
list_roasset: {
|
||||
records: [],
|
||||
total: 0
|
||||
},
|
||||
currpage: 1
|
||||
},
|
||||
mutations: {
|
||||
/* common */
|
||||
update_snackbar(state, val) {
|
||||
state.snackbar = val
|
||||
},
|
||||
update_loading_process(state, val) {
|
||||
state.loading_process = val
|
||||
},
|
||||
|
||||
/* main layout */
|
||||
update_filterasset(state, val) {
|
||||
state.filterasset = val
|
||||
},
|
||||
update_list_status(state, val) {
|
||||
state.list_status = val
|
||||
},
|
||||
update_list_roasset(state, val) {
|
||||
state.list_roasset = val
|
||||
},
|
||||
update_currpage(state, val) {
|
||||
state.currpage = val
|
||||
}
|
||||
},
|
||||
actions: {}
|
||||
}
|
||||
12
test/vuex/acc-one-receive-order-asset/store.js
Normal file
12
test/vuex/acc-one-receive-order-asset/store.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import system from "../../../apps/modules/system/system.js";
|
||||
import roasset from "./modules/roasset.js"
|
||||
|
||||
export const store = new Vuex.Store({
|
||||
modules: {
|
||||
system: system,
|
||||
roasset:roasset
|
||||
},
|
||||
state: {},
|
||||
mutatios: {},
|
||||
actions: {}
|
||||
});
|
||||
Reference in New Issue
Block a user