adib/fe-accone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change dialog form po aset, separate form order / form aset

Browse Source
This commit is contained in:
adibwp
2026-07-08 17:14:35 +07:00
parent a1aab09ac9
commit 1f5bcfacd5
17 changed files with 1216 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
test/vuex/acc-one-po-asset/components/dialog-create-order.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<v-dialog v-model="dialog_create_order" persistent width="80vw">
<v-card style="max-height: 80vh; display: flex; flex-direction: column;">
<v-card-title class="headline grey lighten-2">BUAT ORDER ASET</v-card-title>
<template>
<div>
<v-stepper non-linear v-model="steps">
<v-stepper-header>
<v-stepper-step editable step="1" @click="steps = 1">
FORM ORDER ASET
</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step editable step="2" @click="steps = 2">
FORM KONTRAK ASET
</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step editable step="3" @click="steps = 3">
ITEM ORDER ASET
</v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<form-order-asset></form-order-asset>
</v-stepper-content>
<v-stepper-content step="2">
<form-kontrak-asset></form-kontrak-asset>
</v-stepper-content>
<v-stepper-content step="3">
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</div>
</template>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="dialog_create_order = false" color="error" class="white--text">Batal</v-btn>
<v-btn @click="" color="primary" class="white--text">Simpan</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
module.exports = {
data() {
return {
steps: 1
}
},
components: {
'form-order-asset': httpVueLoader('./form-order-asset.vue'),
'form-kontrak-asset': httpVueLoader('./form-kontrak-asset.vue')
},
computed: {
dialog_create_order: {
get() {
return this.$store.state.orderAsset.dialog_create_order
},
set(val) {
this.$store.commit("orderAsset/update_dialog_create_order", val)
}
}
},
methods: {}
}
</script>

134
test/vuex/acc-one-po-asset/components/form-kontrak-asset.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<div>
<v-layout row wrap>
<v-flex xs3 pa-1>
<v-text-field v-model="form_kontrak.nama_kontrak" hide-details outline label="Nama Kontrak"
placeholder="masukan nama kontrak"></v-text-field>
</v-flex>
<v-flex xs3 pa-1>
<v-menu v-model="menuKontrakDate" 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="formattedDateKontrak" v-on="on" hide-details readonly outline
label="Tanggal Kontrak"></v-text-field>
</template>
<v-date-picker v-model="form_kontrak.tanggal_kontrak" no-title
@input="menuKontrakDate = false"></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs3 pa-1>
<v-menu v-model="menuKontrakStartdate" 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="formattedStartdateKontrak" outline v-on="on" hide-details
label="Tanggal Mulai Kontrak" readonly></v-text-field>
</template>
<v-date-picker v-model="form_kontrak.tanggalAwal_kontrak" no-title
@input="menuKontrakStartdate = false"></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs3 pa-1>
<v-menu v-model="menuKontrakEnddate" 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="formattedEnddateKontrak" outline v-on="on" hide-details
label="Tanggal Akhir Kontrak" readonly></v-text-field>
</template>
<v-date-picker v-model="form_kontrak.tanggalAkhir_kontrak" no-title
@input="menuKontrakEnddate = false"></v-date-picker>
</v-menu>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs2 pa-1>
<v-text-field v-model="form_kontrak.durasi_cicilan" hide-details outline placeholder="1"
label="Durasi Kontrak (Bulan)" readonly></v-text-field>
</v-flex>
<v-flex xs2 pa-1>
<v-text-field v-model="form_kontrak.jumlah_cicilan" hide-details placeholder="1" outline
label="Jumlah Cicilan"></v-text-field>
</v-flex>
<v-flex xs2 pa-1>
<v-text-field v-model="form_kontrak.tanggalBayar_cicilan" hide-details placeholder="1" outline
label="Tanggal Bayar Cicilan"></v-text-field>
</v-flex>
<v-flex xs2 pa-1>
<v-text-field v-model="form_kontrak.besarNilai_cicilan" hide-details label="Besar Bayar Cicilan"
placeholder="0" prefix="Rp." outline></v-text-field>
</v-flex>
<v-flex xs1 pa-1>
<v-autocomplete :items="['nominal', 'persen']" label="Tipe Nilai"
v-model="form_kontrak.type_downpayment" hide-details @input="changeTypeAmount('DP')"
outline></v-autocomplete>
</v-flex>
<v-flex xs3 pa-1>
<v-text-field v-if="form_kontrak.type_downpayment == 'persen'" label="Jumlah Uang Muka" hide-details
v-model="form_kontrak.besarNilai_downpayment" placeholder="0" suffix="%" outline></v-text-field>
<v-text-field v-else label="Jumlah Uang Muka" hide-details placeholder="0" prefix="Rp." outline
v-model="form_kontrak.besarNilai_downpayment"></v-text-field>
</v-flex>
</v-layout>
</div>
</template>
<script>
module.exports = {
data() {
return {
menuKontrakDate: false,
menuKontrakStartdate: false,
menuKontrakEnddate: false,
};
},
computed: {
supplier_list() {
return [];
},
form_kontrak: {
get() {
return this.$store.state.kontrakAsset.form_kontrak
},
set(val) {
this.$store.commit("kontrakAsset/update_form_kontrak", val);
}
},
formattedDateKontrak() {
return this.formatDate(this.form_kontrak.tanggal_kontrak);
},
formattedStartdateKontrak() {
return this.formatDate(this.form_kontrak.tanggalAwal_kontrak);
},
formattedEnddateKontrak() {
return this.formatDate(this.form_kontrak.tanggalAkhir_kontrak);
},
},
methods: {
formatDate(date) {
if (!date) return null;
const [year, month, day] = date.split('-');
return `${day}-${month}-${year}`;
},
countMonths(startdate, enddate) {
const start = new Date(startdate);
const end = new Date(enddate);
let months = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());
if (end.getDate() > start.getDate()) {
months += 1;
}
return Math.max(months, 1);
},
changeTypeAmount(name) {
let form = this.form_kontrak;
if (name == 'DP') {
form.jumlah_downpayment = 0;
}
}
},
watch: {
}
}
</script>

121
test/vuex/acc-one-po-asset/components/form-order-asset.vue Normal file
View File

@@ -0,0 +1,121 @@
<template>
<div>
<!-- first row -->
<v-layout row wrap>
<v-flex xs4 pa-1>
<v-menu
v-model="menuPOdate" 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="formatPOdate" label="Tanggal PO"
hide-details readonly v-on="on" outline
></v-text-field>
</template>
<v-date-picker
v-model="form_order_asset.podate" no-title
@input="menuPOdate = false"
></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs4 pa-1>
<v-autocomplete
:items="list_supplier" hide-details outline
v-model="form_order_asset.supplierID" label="Supplier"
item-text="SupplierName" item-value="SupplierID"
></v-autocomplete>
</v-flex>
<v-flex xs4 pa-1>
<v-text-field
v-model="form_order_asset.reference" hide-details outline
label="Referensi" placeholder="nomor request" readonly
></v-text-field>
</v-flex>
</v-layout>
<!-- 2nd row -->
<v-layout row wrap>
<v-flex xs4 pa-1>
<v-autocomplete
:items="list_cabang" hide-details outline
v-model="form_order_asset.branchID" label="Cabang"
item-text="M_BranchName" item-value="M_BranchID"
></v-autocomplete>
</v-flex>
<v-flex xs2 pa-1>
<v-autocomplete
:items="['nominal', 'persen']" label="Tipe Nilai"
v-model="form_order_asset.typepajak" hide-details outline
></v-autocomplete>
</v-flex>
<v-flex xs2 pa-1>
<v-text-field
v-if="form_order_asset.typepajak == 'persen'" label="Pajak"
v-model="form_order_asset.valuepajak" hide-details outline
placeholder="besar pajak dalam persen" suffix="%"
></v-text-field>
<v-text-field
v-else label="Pajak" outline prefix="Rp."
v-model="form_order_asset.valuepajak" hide-details
placeholder="besar pajak dalam rupiah"
></v-text-field>
</v-flex>
<v-flex xs2 pa-1>
<v-autocomplete
:items="['nominal', 'persen']" hide-details outline
v-model="form_order_asset.typediskon" label="Tipe Nilai"
></v-autocomplete>
</v-flex>
<v-flex xs2 pa-1>
<v-text-field
v-if="form_order_asset.typediskon == 'persen'" label="Diskon"
v-model="form_order_asset.valuediskon" hide-details outline
placeholder="besar diskon dalam persen" suffix="%"
></v-text-field>
<v-text-field
v-else label="Diskon" outline prefix="Rp."
v-model="form_order_asset.valuediskon" hide-details
placeholder="besar diskon dalam rupiah"s
></v-text-field>
</v-flex>
</v-layout>
</div>
</template>
<script>
module.exports = {
data() {
return {
menuPOdate: false,
}
},
computed: {
form_order_asset: {
get() {
return this.$store.state.orderAsset.form_order_asset;
},
set(val) {
this.$store.commit('orderAsset/update_form_order_asset', val);
}
},
formatPOdate() {
return this.formatDate(this.form_order_asset.podate);
},
list_supplier() {
return this.$store.state.orderAsset.list_supplier;
},
list_cabang() {
return this.$store.state.orderAsset.list_cabang;
}
},
methods: {
formatDate(date) {
if (!date) return null;
const [year, month, day] = date.split('-');
return `${day}-${month}-${year}`;
},
}
}
</script>

279
test/vuex/acc-one-po-asset/components/main-layout.vue
View File

@@ -1,160 +1,131 @@
<template>
<div>
<v-toolbar color="primary" dark>
<v-toolbar-title class="white--text">PURCHASE ORDER ASET</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon @click="createNewContract()">
<v-icon large>add_box</v-icon>
</v-btn>
<v-btn icon @click="createNewOrder()">
<v-icon large>add_box</v-icon>
</v-btn>
</v-toolbar>
<div>
<v-toolbar color="primary" dark>
<v-toolbar-title class="white--text">PURCHASE ORDER ASET</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon @click="createNewOrder()">
<v-icon large>add_box</v-icon>
</v-btn>
<!-- <v-btn icon @click="createNewContract()">
<v-icon large>add_box</v-icon>
</v-btn>
<v-btn icon @click="createNewOrder()">
<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="filterpo.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="filterpo.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="filterpo.status" label="Status"
></v-autocomplete>
</v-flex>
<v-flex xs3 pl-2>
<v-text-field
v-model="filterpo.search" hide-details outline
label="Cari" placeholder="cari nomor po"
></v-text-field>
</v-flex>
</v-layout>
</v-card>
<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="filterpo.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="filterpo.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="filterpo.status"
label="Status"></v-autocomplete>
</v-flex>
<v-flex xs3 pl-2>
<v-text-field v-model="filterpo.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" class="elevation-1"
:items="list_asetpo.records" hide-actions
>
<template v-slot:items="props">
<tr>
<td class="text-xs-center pa-2">{{ props.item.PurchaseOrderNumber }}</td>
<td class="text-xs-center pa-2">{{ props.item.PurchaseOrderDate }}</td>
<td class="text-xs-center pa-2">{{ props.item.SupplierName }}</td>
<td class="text-xs-center pa-2">{{ props.item.M_BranchName }}</td>
<td class="text-xs-center pa-2">{{ props.item.PurchaseOrderNote }}</td>
<td class="text-xs-center pa-2">
Rp. {{ formatCurrency(props.item.PurchaseOrderGrandTotal) }}
</td>
<td class="text-xs-center pa-2">{{ props.item.PurchaseOrderStatus }}</td>
<td class="text-xs-center pa-2">
<div v-show="props.item.PurchaseOrderStatus == 'Draft'">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
color="warning" dark v-on="on"
@click="" small
style="min-width: 40px; margin: 0;"
>
<v-icon small>send</v-icon>
</v-btn>
</template>
<span>Buat Request PO</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
color="info" dark v-on="on"
@click="" small
style="min-width: 40px; margin: 0;"
>
<v-icon small>edit</v-icon>
</v-btn>
</template>
<span>Edit Request PO</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
color="error" dark v-on="on"
@click="" small
style="min-width: 40px; margin: 0;"
>
<v-icon small>delete</v-icon>
</v-btn>
</template>
<span>Delete Request PO</span>
</v-tooltip>
</div>
<div v-show="props.item.PurchaseOrderStatus != 'Draft'">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
color="warning" dark v-on="on"
@click="viewPO(props.item)" small
style="min-width: 40px; margin: 0;"
>
<v-icon small>visibility</v-icon>
</v-btn>
<span>Detail PO</span>
</template>
</v-tooltip>
</div>
</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="currpage" :length="pagelength" :total-visible="10"></v-pagination>
</div>
</v-card>
<v-card class="pa-2 mt-2">
<v-data-table :headers="headers" class="elevation-1" :items="list_asetpo.records" hide-actions>
<template v-slot:items="props">
<tr>
<td class="text-xs-center pa-2">{{ props.item.PurchaseOrderNumber }}</td>
<td class="text-xs-center pa-2">{{ props.item.PurchaseOrderDate }}</td>
<td class="text-xs-center pa-2">{{ props.item.SupplierName }}</td>
<td class="text-xs-center pa-2">{{ props.item.M_BranchName }}</td>
<td class="text-xs-center pa-2">{{ props.item.PurchaseOrderNote }}</td>
<td class="text-xs-center pa-2">
Rp. {{ formatCurrency(props.item.PurchaseOrderGrandTotal) }}
</td>
<td class="text-xs-center pa-2">{{ props.item.PurchaseOrderStatus }}</td>
<td class="text-xs-center pa-2">
<div v-show="props.item.PurchaseOrderStatus == 'Draft'">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="warning" dark v-on="on" @click="" small
style="min-width: 40px; margin: 0;">
<v-icon small>send</v-icon>
</v-btn>
</template>
<span>Buat Request PO</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="info" dark v-on="on" @click="" small
style="min-width: 40px; margin: 0;">
<v-icon small>edit</v-icon>
</v-btn>
</template>
<span>Edit Request PO</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="error" dark v-on="on" @click="" small
style="min-width: 40px; margin: 0;">
<v-icon small>delete</v-icon>
</v-btn>
</template>
<span>Delete Request PO</span>
</v-tooltip>
</div>
<div v-show="props.item.PurchaseOrderStatus != 'Draft'">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn color="warning" dark v-on="on" @click="viewPO(props.item)" small
style="min-width: 40px; margin: 0;">
<v-icon small>visibility</v-icon>
</v-btn>
<span>Detail PO</span>
</template>
</v-tooltip>
</div>
</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="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>
<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>
<dialog-add-attchment></dialog-add-attchment>
<dialog-form-order-aset></dialog-form-order-aset>
<dialog-add-item-aset></dialog-add-item-aset>
<dialog-delete-order></dialog-delete-order>
<dialog-add-attchment></dialog-add-attchment>
<dialog-add-item-aset></dialog-add-item-aset>
<dialog-delete-order></dialog-delete-order>
<dialog-create-kontrak></dialog-create-kontrak>
</div>
<!-- <dialog-form-order-aset></dialog-form-order-aset> -->
<!-- <dialog-create-kontrak></dialog-create-kontrak> -->
<dialog-create-order></dialog-create-order>
</div>
</template>
<script>
@@ -210,6 +181,7 @@ module.exports = {
'dialog-delete-order': httpVueLoader('./dialog-delete-order.vue'),
'dialog-create-kontrak': httpVueLoader('./dialog-create-contract.vue'),
'dialog-create-order': httpVueLoader('./dialog-create-order.vue'),
},
computed: {
snackbar: {
@@ -251,7 +223,7 @@ module.exports = {
pagelength() {
const total = this.list_asetpo.total;
if (total === undefined || total < 1) return 1;
return Math.ceil(total/10);
return Math.ceil(total / 10);
}
},
methods: {
@@ -271,6 +243,9 @@ module.exports = {
createNewContract() {
this.$store.commit("kontrakAsset/update_dialog_create_contract", true);
},
createNewOrder() {
this.$store.commit("orderAsset/update_dialog_create_order", true);
},
viewPO(item) {
}