111 lines
3.5 KiB
Vue
111 lines
3.5 KiB
Vue
<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 xs12 pa-1>
|
|
<v-text-field v-model="keyword" hide-details outline
|
|
label="Cari" placeholder="Nama Item atau 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>
|