add modules folder based on s_menu
This commit is contained in:
190
test/vuex/acc-one-md-ruangan/components/listing-layout.vue
Normal file
190
test/vuex/acc-one-md-ruangan/components/listing-layout.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-toolbar color="primary" dark>
|
||||
<v-toolbar-title class="white--text">MASTER DATA RUANGAN</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-btn v-on="on" icon @click="insertNewRuangan()">
|
||||
<v-icon large>add_box</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>TAMBAH RUANGAN BARU</span>
|
||||
</v-tooltip>
|
||||
</v-toolbar>
|
||||
|
||||
<v-card class="pa-2">
|
||||
<v-layout row align-center>
|
||||
<v-flex xs4 pr-1>
|
||||
<v-autocomplete :items="list_regional" label="Regional" hide-details outline
|
||||
:readonly="user.loginLevel != 'pusat'" item-text="S_RegionalName" item-value="S_RegionalID"
|
||||
v-model="filter_listing.regional" @change="onChangeReg"></v-autocomplete>
|
||||
</v-flex>
|
||||
<v-flex xs4 px-1>
|
||||
<v-autocomplete :items="list_cabang" label="Cabang" item-text="M_BranchName" item-value="M_BranchID"
|
||||
v-model="filter_listing.cabang" :readonly="user.loginLevel == 'branch'" hide-details
|
||||
outline></v-autocomplete>
|
||||
</v-flex>
|
||||
<v-flex grow px-1>
|
||||
<v-text-field v-model="filter_listing.keyword" label="Cari nama, kode" outline
|
||||
hide-details></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex shrink pl-1>
|
||||
<v-btn color="primary" @click="search()">
|
||||
<v-icon>search</v-icon>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
|
||||
<v-card class="pa-2 mt-2">
|
||||
<v-data-table :headers="headers" :items="list_ruangan.records" item-key="id" class="elevation-1"
|
||||
hide-actions>
|
||||
<template v-slot:items="props">
|
||||
<tr @click="openDetailRuangan(props.item)" :class="{ 'yellow lighten-4': isSelected(props.item) }">
|
||||
<td class="text-xs-center pa-1">
|
||||
{{ props.index + 1 }}
|
||||
</td>
|
||||
<td class="text-xs-center pa-1">
|
||||
{{ props.item.name }}
|
||||
</td>
|
||||
<td class="text-xs-center pa-1">
|
||||
{{ props.item.code }}
|
||||
</td>
|
||||
<td class="text-xs-left pa-1">
|
||||
<p class="mb-0">{{ props.item.branch_name }}</p>
|
||||
<p class="mb-0">{{ props.item.regional_name }}</p>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<v-divider class="my-1"></v-divider>
|
||||
<div class="pa-2 mt-1 text-xs-center">
|
||||
<v-pagination v-model="list_pagination" :length="len_page" :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 = {
|
||||
async mounted() {
|
||||
await this.$store.dispatch('ruangan/listingRegional', 'left');
|
||||
await this.$store.dispatch('ruangan/listingCabang', 'left');
|
||||
await this.$store.dispatch('ruangan/searchRuangan');
|
||||
|
||||
await this.$store.dispatch('ruangan/listingRegional', 'right');
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
headers: [
|
||||
{
|
||||
text: "NO", align: "center", sortable: false, value: "no",
|
||||
width: "10%", class: "pa-1 blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "NAMA", align: "center", sortable: false, value: "name",
|
||||
width: "35%", class: "pa-1 blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "KODE", align: "center", sortable: false, value: "code",
|
||||
width: "25%", class: "pa-1 blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "LOKASI", align: "center", sortable: false, value: "loc",
|
||||
width: "30%", class: "pa-1 blue lighten-3 white--text",
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.state.ruangan.user;
|
||||
},
|
||||
list_regional() {
|
||||
return this.$store.state.ruangan.filter_listreg;
|
||||
},
|
||||
list_cabang() {
|
||||
return this.$store.state.ruangan.filter_listcab;
|
||||
},
|
||||
list_ruangan() {
|
||||
return this.$store.state.ruangan.list_ruangan;
|
||||
},
|
||||
len_page() {
|
||||
const total = this.list_ruangan.total;
|
||||
if (total == undefined || total < 1) return 1;
|
||||
return Math.ceil(total / 10);
|
||||
},
|
||||
list_pagination: {
|
||||
get() {
|
||||
return this.$store.state.ruangan.list_pagination;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("ruangan/update_list_pagination", val);
|
||||
this.$store.dispatch('ruangan/searchRuangan');
|
||||
}
|
||||
},
|
||||
filter_listing: {
|
||||
get() {
|
||||
return this.$store.state.ruangan.filter_listing;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("ruangan/update_filter_listing", val);
|
||||
}
|
||||
},
|
||||
snackbar: {
|
||||
get() {
|
||||
return this.$store.state.ruangan.snackbar;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("ruangan/update_snackbar", val);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChangeReg(value) {
|
||||
this.filter_listing.regional = value;
|
||||
this.$store.dispatch('ruangan/listingCabang', 'left');
|
||||
},
|
||||
search() {
|
||||
this.$store.dispatch('ruangan/searchRuangan');
|
||||
},
|
||||
insertNewRuangan() {
|
||||
let detail = {
|
||||
id: 0,
|
||||
kode: "",
|
||||
nama: "",
|
||||
cabang: "",
|
||||
regional: ""
|
||||
};
|
||||
|
||||
this.$store.commit("ruangan/update_form_status", 'BARU');
|
||||
this.$store.commit("ruangan/update_form_detail", detail);
|
||||
},
|
||||
async openDetailRuangan(item) {
|
||||
let detail = {
|
||||
id: item.id,
|
||||
kode: item.code,
|
||||
nama: item.name,
|
||||
cabang: item.branch_id,
|
||||
regional: item.regional_id
|
||||
};
|
||||
|
||||
let cabs = this.list_cabang.filter((cab) => cab.M_BranchID != 0);
|
||||
this.$store.commit("ruangan/update_form_listcab", cabs);
|
||||
|
||||
this.$store.commit("ruangan/update_form_status", 'EDIT');
|
||||
this.$store.commit("ruangan/update_form_detail", detail);
|
||||
},
|
||||
isSelected(item) {
|
||||
let form = this.$store.state.ruangan.form_detail;
|
||||
return item.id === form.id
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user