309 lines
9.9 KiB
Vue
309 lines
9.9 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Dialog View -->
|
|
<v-dialog v-model="dialogRiwayat" persistent width="85vw">
|
|
<v-card>
|
|
<v-card-title class="headline grey lighten-2" primary-title>
|
|
RIWAYAT PURCHASE ORDER BY SUPPLIER
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<v-layout row wrap class="px-2 py-2">
|
|
<!-- TABEL ITEM VIEW -->
|
|
<v-flex xs12>
|
|
<v-data-table :headers="headers" :items="riwayatPoList" :loading="loading" hide-actions class="elevation-1">
|
|
<template v-slot:items="props">
|
|
<td class="text-xs-center">{{ formatDate(props.item.PurchaseOrderCreated) }}</td>
|
|
<td class="text-xs-center">{{ props.item.SupplierName }}</td>
|
|
<td class="text-xs-center">{{ props.item.PurchaseOrderNumber }}</td>
|
|
<td class="text-xs-right">
|
|
{{ props.item.PurchaseOrderGrandTotal != null ? oneMoney(props.item.PurchaseOrderGrandTotal) : '0' }}
|
|
</td>
|
|
|
|
<td class="text-xs-center">
|
|
<v-chip color="blue" v-if="props.item.PurchaseOrderStatus === 'Draft'" text-color="white">{{
|
|
props.item.PurchaseOrderStatus }}
|
|
</v-chip>
|
|
<v-chip color="warning" v-else-if="props.item.PurchaseOrderStatus === 'Pending'" text-color="white">{{
|
|
props.item.PurchaseOrderStatus }}
|
|
</v-chip>
|
|
<v-chip color="green" v-else-if="props.item.PurchaseOrderStatus === 'Approved'" text-color="white">{{
|
|
props.item.PurchaseOrderStatus }}
|
|
</v-chip>
|
|
<v-chip color="red" v-else-if="props.item.PurchaseOrderStatus === 'Rejected'" text-color="white">{{
|
|
props.item.PurchaseOrderStatus }}
|
|
</v-chip>
|
|
<v-chip color="primary" v-else-if="props.item.PurchaseOrderStatus === 'Completed'" text-color="white">{{
|
|
props.item.PurchaseOrderStatus }}
|
|
</v-chip>
|
|
<v-chip v-else text-color="white">{{ props.item.PurchaseOrderStatus }}
|
|
</v-chip>
|
|
</td>
|
|
<td class="text-xs-center">
|
|
<v-tooltip bottom>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn icon :disabled="loading" @click="openDialogView(props.item)" v-on="on" class="mx-0 px-0">
|
|
<v-icon color="blue">visibility</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>View Detail</span>
|
|
</v-tooltip>
|
|
</td>
|
|
</template>
|
|
</v-data-table>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-pagination
|
|
style="margin-top: 10px; margin-bottom: 10px;"
|
|
v-model="currPageRiwayatPo"
|
|
:length="riwayatPoPage"
|
|
></v-pagination>
|
|
</v-card-text>
|
|
|
|
<v-divider></v-divider>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="green" flat @click="dialogRiwayat = false">
|
|
TUTUP
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
headers: [
|
|
{
|
|
text: "TANGGAL",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "date",
|
|
width: "15%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "SUPPLIER",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "supplier",
|
|
width: "25%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "NO PO",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "PoQty",
|
|
width: "25%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "TOTAL",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "Total",
|
|
width: "15%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "STATUS",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "status",
|
|
width: "10%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
{
|
|
text: "AKSI",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "action",
|
|
width: "10%",
|
|
class: "blue lighten-3 white--text",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
riwayatPoList() {
|
|
return this.$store.state.po.riwayatPoList;
|
|
},
|
|
dialogRiwayat: {
|
|
get() {
|
|
return this.$store.state.po.dialogRiwayat;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("po/update_dialogRiwayat", val);
|
|
},
|
|
},
|
|
selected_riwayatPo: {
|
|
get() {
|
|
return this.$store.state.po.selected_riwayatPo;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("po/update_selected_riwayatPo", val);
|
|
},
|
|
},
|
|
loading: {
|
|
get() {
|
|
return this.$store.state.po.loading;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("po/update_loading", val);
|
|
},
|
|
},
|
|
riwayatPoPage: {
|
|
get() {
|
|
return this.$store.state.po.riwayatPoPage;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("po/update_riwayatPoPage", val);
|
|
},
|
|
},
|
|
currPageRiwayatPo: {
|
|
get() {
|
|
return this.$store.state.po.currPageRiwayatPo;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("po/update_currPageRiwayatPo", val);
|
|
this.$store.dispatch("po/getPoBySupplier");
|
|
},
|
|
},
|
|
selectedPO: {
|
|
get() {
|
|
return this.$store.state.po.selectedPO;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("po/update_selectedPO", val);
|
|
},
|
|
},
|
|
dialogView: {
|
|
get() {
|
|
return this.$store.state.po.dialogView;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("po/update_dialogView", val);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
openDialogView(data) {
|
|
this.selectedPO = data;
|
|
this.dialogView = true;
|
|
this.dialogRiwayat = false;
|
|
this.$store.dispatch("po/getItemUpdate");
|
|
this.$store.commit("po/update_dialogForm", false);
|
|
// this.$store.dispatch("po/resetForm");
|
|
// this.$store.commit("update_selectedDateForm", moment(new Date()).format('YYYY-MM-DD'));
|
|
// this.$store.commit("update_selectedWarehouse", {});
|
|
// this.$store.commit("update_defaultWarehouse", {});
|
|
// this.$store.commit("update_warehouseType", 'Single');
|
|
// this.$store.commit("update_refNumber", '');
|
|
// this.$store.commit("update_taxPpn", 0);
|
|
// this.$store.commit("update_taxPph", 0);
|
|
// this.$store.commit("update_paymentTerm", 0);
|
|
// this.$store.commit("update_discountType", 'Percentage');
|
|
// this.$store.commit("update_discountAmount", 0);
|
|
// this.$store.commit("update_note", '');
|
|
|
|
// this.$store.commit("update_selectedItemTemp", []);
|
|
// this.$store.commit("update_selectedItem", []);
|
|
// this.$store.commit("update_deletedItem", []);
|
|
// this.$store.commit("update_selectedItemCategory", {});
|
|
// this.$store.commit("update_summary", []);
|
|
|
|
// this.$store.commit("update_shippingCost", 0);
|
|
// this.$store.commit("update_shippingCostStatus", true);
|
|
|
|
// this.$store.commit("update_itemList", []);
|
|
// this.$store.commit("update_searchItem", '');
|
|
|
|
// this.$store.commit("update_warehouseList", []);
|
|
// this.$store.commit("update_searchSupplier", 'null');
|
|
// this.$store.commit("update_supplierList", []);
|
|
// this.$store.commit("update_summaryTotal", {
|
|
// total: 0,
|
|
// tax: 0,
|
|
// ppn: 0,
|
|
// pph: 0,
|
|
// discount: 0,
|
|
// finalTotal: 0,
|
|
// });
|
|
// this.$store.commit("update_itemTotal", {
|
|
// total: 0,
|
|
// tax: 0,
|
|
// ppn: 0,
|
|
// pph: 0,
|
|
// discount: 0,
|
|
// finalTotal: 0,
|
|
// });
|
|
},
|
|
formatDate(date) {
|
|
if (!date) return null;
|
|
|
|
// Pisahkan tanggal dan waktu
|
|
const [datePart, timePart] = date.split(" ");
|
|
|
|
const [year, month, day] = datePart.split("-");
|
|
let formatted = `${day}-${month}-${year}`;
|
|
|
|
if (timePart) {
|
|
const [hour, minute, second] = timePart.split(":");
|
|
formatted += ` ${hour}:${minute}:${second}`;
|
|
}
|
|
|
|
return formatted;
|
|
},
|
|
oneMoney(value) {
|
|
//return one_money(value);
|
|
// let splitValue = value.toString().split(".");
|
|
// if(splitValue.length > 1) {
|
|
// let val = splitValue[0]
|
|
// return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "," + this.roundToThreeSignificantDigits(splitValue[1]);
|
|
// } else {
|
|
// return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
// }
|
|
// Ubah ke float jika belum angka
|
|
if (typeof value !== 'number') {
|
|
value = parseFloat(value);
|
|
}
|
|
|
|
if (isNaN(value)) return '0,00';
|
|
|
|
// Bulatkan dulu ke 2 desimal
|
|
const fixed = value.toFixed(2); // hasil string, misal "16200000.00" atau "123456.70"
|
|
const splitValue = fixed.split(".");
|
|
|
|
const val = splitValue[0]; // bagian ribuan
|
|
const decimal = splitValue[1]; // bagian desimal
|
|
|
|
const formatted = val.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
|
|
return `${formatted},${decimal}`;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.label-value subheading mb-2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.label {
|
|
font-weight: bold;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.value {
|
|
font-size: 1rem;
|
|
}
|
|
</style>
|