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>

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

@@ -1,74 +1,56 @@
<template>
<div>
<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-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-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"
>
<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>
<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-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"
>
<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>
<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-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-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-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
>
<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>
@@ -84,11 +66,8 @@
<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-btn color="warning" dark v-on="on" @click="" small
style="min-width: 40px; margin: 0;">
<v-icon small>send</v-icon>
</v-btn>
</template>
@@ -96,11 +75,8 @@
</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-btn color="info" dark v-on="on" @click="" small
style="min-width: 40px; margin: 0;">
<v-icon small>edit</v-icon>
</v-btn>
</template>
@@ -108,11 +84,8 @@
</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-btn color="error" dark v-on="on" @click="" small
style="min-width: 40px; margin: 0;">
<v-icon small>delete</v-icon>
</v-btn>
</template>
@@ -122,11 +95,8 @@
<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-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>
@@ -149,12 +119,13 @@
</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-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) {
}

7
test/vuex/acc-one-po-asset/modules/kontrak-asset.js
View File

@@ -5,17 +5,14 @@ export default {
form_kontrak: {
nama_kontrak: '',
tanggal_kontrak: moment(new Date()).format('YYYY-MM-DD'),
supplierID_kontrak: '',
tanggalAwal_kontrak: moment(new Date()).format('YYYY-MM-DD'),
tanggalAkhir_kontrak: moment(new Date()).format('YYYY-MM-DD'),
durasi_cicilan: 1,
jumlah_cicilan: 1,
tanggalBayar_cicilan: 1,
besarNilai_cicilan: 0,
type_downpayment: 'nominal',
besarNilai_downpayment: 0,
type_pajak: 'persen',
besarNilai_pajak: 0
type_downpayment: 'persen',
besarNilai_downpayment: 0
}
},
mutations: {

36
test/vuex/acc-one-po-asset/modules/order-asset.js Normal file
View File

@@ -0,0 +1,36 @@
export default {
namespaced: true,
state: {
/* dialog create order */
dialog_create_order: false,
form_order_asset: {
podate: moment(new Date()).format('YYYY-MM-DD'),
supplierID: "",
reference: "",
branchID: "",
typepajak: "persen",
valuepajak: 0,
typediskon: "persen",
valuediskon: 0
},
list_supplier: [],
list_cabang: []
},
mutations: {
update_dialog_create_order(state, val) {
state.dialog_create_order = val
},
update_form_order_asset(state, val) {
state.form_order_asset = val
},
update_list_supplier(state, val) {
state.list_supplier = val
},
update_list_cabang(state, val) {
state.list_cabang = val
}
},
actions: {
}
}

4
test/vuex/acc-one-po-asset/modules/poasset.js
View File

@@ -35,9 +35,9 @@ export default {
supplierID: "",
reference: "",
branchcode: "",
typepajak: "percent",
typepajak: "persen",
valuepajak: 0,
typediskon: "percent",
typediskon: "persen",
valuediskon: 0
},
item_orderaset: [],

4
test/vuex/acc-one-po-asset/store.js
View File

@@ -1,11 +1,13 @@
import system from "../../../apps/modules/system/system.js";
import kontrakAsset from "./modules/kontrak-asset.js";
import orderAsset from "./modules/order-asset.js";
import poasset from "./modules/poasset.js";
export const store = new Vuex.Store({
modules: {
system: system,
poasset: poasset,
kontrakAsset: kontrakAsset
kontrakAsset: kontrakAsset,
orderAsset: orderAsset
},
state: {},
mutations: {},

20
test/vuex/acc-one-receive-order-asset/api/api.js
View File

@@ -0,0 +1,20 @@
const URL = "";
async function request(endpoint, param) {
try {
const resp = await axios.post(URL + endpoint, param);
if (resp.status !== 200) {
throw new Error(resp.statusText);
}
return resp.data;
} catch (e) {
return {
status: "ERR",
message: e.message
};
}
}
export async function lookupOrderAssetReceived(param) {
return request("/lookupOrderAssetReceived", param);
}

198
test/vuex/acc-one-receive-order-asset/components/dialog-add-attachment.vue Normal file
View File

@@ -0,0 +1,198 @@
<template>
<div>
<v-dialog v-model="dialog_attachment" persistent max-width="60vw">
<v-card>
<v-card-title class="headline grey lighten-2" primary-title>
UPLOAD BUKTI TERIMA ASET
</v-card-title>
<v-card-text>
<v-layout row wrap>
<v-flex xs12 class="mb-2 pa-2" style="border: 1px solid black;">
<input type="file" id="files" ref="files" multiple accept="image/*"
v-on:change="addAttachment($event)">
</v-flex>
<v-flex v-for="(nota) in preview_attachment" xs4 class="pa-2"
:key="nota.attach_id || nota.img_url">
<div style="position: relative; padding-bottom: 35px;">
<v-img :src="makeImageURL(nota)" aspect-ratio="1" contain class="grey lighten-2"
@click="fullview(nota, -1)"></v-img>
</div>
</v-flex>
<v-flex v-for="(url, index) in attachViews" xs4 class="pa-2" :key="index">
<div style="position: relative; padding-bottom: 35px;">
<v-img :src="url" aspect-ratio="1" contain class="grey lighten-2"
@click="fullview(url, index)"></v-img>
<v-icon color="red" class="close-button" @click="removeAttachment(index)">close</v-icon>
</div>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="BatalAddAttachment()" color="error" class="white--text">Batal</v-btn>
<v-btn v-if="selected_roasset.ReceiveOrderPoConfirmed != 'Y'" @click="SimpanAttachment()"
color="primary" class="white--text">Simpan</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="dialog_fullview" persistent max-width="50vw">
<v-card>
<v-card-title class="headline grey lighten-2" primary-title>
{{ viewtitle }}
<v-spacer></v-spacer>
<v-btn color="red" fab small outline @click="dialog_fullview = false">
<v-icon color="red">close</v-icon>
</v-btn>
</v-card-title>
<v-card-text style="max-height: 80vh; overflow-y: auto;">
<div class="pa-2">
<v-img :src="viewurl" contain class="grey lighten-2"></v-img>
</div>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn class="mr-2" color="red" flat outline @click="dialog_fullview = false">
Tutup
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<style>
.close-button {
position: absolute;
top: 5px;
right: 5px;
z-index: 1;
cursor: pointer;
}
</style>
<script>
module.exports = {
data() {
return {
attachViews: [],
attachFiles: [],
dialog_fullview: false,
viewtitle: "",
viewurl: ""
}
},
computed: {
dialog_attachment: {
get() {
return this.$store.state.roasset.dialog_attachment
},
set(val) {
this.$store.commit("roasset/update_dialog_attachment", val)
}
},
selected_roasset: {
get() {
return this.$store.state.roasset.selected_roasset
},
set(val) {
this.$store.commit("roasset/update_selected_roasset", val)
}
},
preview_attachment: {
get() {
return this.$store.state.roasset.preview_attachment
},
set(val) {
this.$store.commit("roasset/update_preview_attachment", val)
}
},
loading_process: {
get() {
return this.$store.state.roasset.loading_process
},
set(val) {
this.$store.commit("roasset/update_loading_process", val)
}
}
},
methods: {
addAttachment(event) {
const files = event.target.files;
if (files.length == 0) {
return;
}
for (let index = 0; index < files.length; index++) {
const file = files[index];
const url = URL.createObjectURL(file);
this.attachFiles.push(file);
this.attachViews.push(url);
}
event.target.value = null;
},
fullview(url, index) {
if (index < 0) {
this.viewtitle = url.img_url;
this.viewurl = this.makeImageURL(url);
} else {
this.viewtitle = this.attachFiles[index].name;
this.viewurl = url;
}
this.dialog_fullview = true;
},
makeImageURL(nota) {
if (nota.url) {
return nota.url;
}
if (nota.src) {
return nota.src;
}
const year = new Date(nota.created).getFullYear();
const baseURL = BASE_URL + `/one-media/order-asset/${year}/`;
return baseURL + nota.img_url;
},
removeAttachment(index) {
URL.revokeObjectURL(this.attachViews[index]);
this.attachFiles.splice(index, 1);
this.attachViews.splice(index, 1);
},
clearAttachment() {
this.attachViews.forEach(function (url) {
URL.revokeObjectURL(url);
});
this.attachFiles = [];
this.attachViews = [];
},
BatalAddAttachment() {
this.clearAttachment();
this.preview_attachment = [];
this.dialog_attachment = false;
},
SimpanAttachment() {
if (!this.loading_process) {
} else {
let snac = { color: 'warning', msg: 'proses sedang berjalan', state: true };
this.$store.commit("roasset/update_snackbar", snac);
}
}
},
watch: {
dialog_fullview(val) {
if (!val) {
this.viewurl = "";
this.viewtitle = "";
}
},
dialog_attachment(val) {
if (val) {
this.clearAttachment();
}
}
}
}
</script>

64
test/vuex/acc-one-receive-order-asset/components/dialog-delete-order-asset.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<v-dialog v-model="dialog_delete" persistent width="40vw">
<v-card>
<v-card-title class="headline grey lighten-2">DELETE RECEIVE ORDER ASSET</v-card-title>
<v-card-text>
<v-flex xs3 class="pr-2"><strong>Tanggal</strong></v-flex>
<v-flex xs9>: {{ }}</v-flex>
<v-flex xs3 class="pr-2"><strong>Nomor</strong></v-flex>
<v-flex xs9>: {{ }}</v-flex>
<v-flex xs3 class="pr-2"><strong>Nomor Referensi</strong></v-flex>
<v-flex xs9>: {{ }}</v-flex>
<v-flex xs3 class="pr-2"><strong>Supplier</strong></v-flex>
<v-flex xs9>: {{ }}</v-flex>
<v-flex xs3 class="pr-2"><strong>Catatan</strong></v-flex>
<v-flex xs9>: {{ }}</v-flex>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="batalDelete()" color="error" class="white--text">Batal</v-btn>
<v-btn @click="confirmDelete()" color="primary" class="white--text">Hapus</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
module.exports = {
data() {
return {
}
},
computed: {
dialog_delete: {
get() {
return this.$store.state.roasset.dialog_delete
},
set(val) {
this.$store.commit("roasset/update_dialog_delete", val)
}
},
selected_roasset: {
get() {
return this.$store.state.roasset.selected_roasset
},
set(val) {
this.$store.commit("roasset/update_selected_roasset", val)
}
}
},
methods: {
batalDelete() {
this.dialog_delete = false
},
confirmDelete() { }
},
watch: {}
}
</script>

81
test/vuex/acc-one-receive-order-asset/components/dialog-pick-contract.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<v-dialog v-model="dialog_pick_contract" persistent width="50vw">
<v-card>
<v-card-title class="headline grey lighten-2">PILIH KONTRAK ORDER ASET</v-card-title>
<v-card-text>
<v-layout row wrap>
<v-flex xs12>
<v-autocomplete :items="[]" :loading="loading" hide-no-data cache-items outline
:search-input.sync="searchkey" label="Kontrak Order Aset" return-object
v-model="temp_selected" hide-details></v-autocomplete>
</v-flex>
<v-flex xs12 mt-2>
<v-data-table :headers="headers" :items="[]" class="elevation-1" hide-actions>
<template v-slot:items="props">
<tr>
<td class="text-xs-start pa-2">
{{ }}
</td>
<td class="text-xs-start pa-2">
{{ }}
</td>
<td class="text-xs-start pa-2">
{{ }}
</td>
</tr>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="cancelPickContract()" color="error" class="white--text">Batal</v-btn>
<v-btn @click="pickContractOrder()" color="primary" class="white--text">Simpan</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
module.exports = {
data() {
return {
searchkey: "",
loading: false,
temp_selected: null,
headers: [
{
text: "ITEM", align: "center", sortable: false, value: "date",
width: "60%", class: "pa-1 blue lighten-3 white--text",
},
{
text: "UNIT", align: "center", sortable: false, value: "date",
width: "20%", class: "pa-1 blue lighten-3 white--text",
},
{
text: "SATUAN", align: "center", sortable: false, value: "date",
width: "20%", class: "pa-1 blue lighten-3 white--text",
},
]
}
},
computed: {
dialog_pick_contract: {
get() {
return this.$store.state.roasset.dialog_pick_contract;
},
set(val) {
this.$store.commit("roasset/update_dialog_pick_contract", val);
}
}
},
methods: {
cancelPickContract() {
this.dialog_pick_contract = false;
},
pickContractOrder() { }
},
watch: {}
}
</script>

159
test/vuex/acc-one-receive-order-asset/components/dialog-receive-order-asset.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<v-dialog v-model="dialog_receive_aset" persistent width="70vw">
<v-card>
<v-card-title class="headline grey lighten-2">FORM TERIMA ASET</v-card-title>
<v-card-text style="max-height: 80vh; overflow-y: auto;">
<v-layout row wrap>
<v-flex xs4>
<v-menu offset-y lazy min-width="290px" transition="scale-transition" max-width="290px"
v-model="menuROdate" full-width :nudge-right="40" :close-on-content-click="false">
<template v-slot:activator="{ on }">
<v-text-field label="Tanggal RO" hide-details readonly v-on="on" outline
v-model="formattedRODate"></v-text-field>
</template>
<v-date-picker no-title @input="menuROdate = false"
v-model="form_receive.date"></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs4 pl-2>
<v-autocomplete :items="[]" hide-details outline label="Vendor" v-model="form_receive.supplier"
item-text="SupplierName" item-value="SupplierID" @input=""></v-autocomplete>
</v-flex>
<v-flex xs4 pl-2>
<v-text-field hide-details outline placeholder="Nomor Delivery / Supplier Invoice"
v-model="form_receive.reference" label="Referensi"></v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap class="mt-2">
<v-flex xs2>
<v-text-field hide-details outline label="No PO" placeholder="nomor po"
v-model="form_receive.ponumber" readonly></v-text-field>
</v-flex>
<v-flex xs2 pl-2>
<v-text-field hide-details outline label="Total Tagihan" placeholder="0"
v-model="form_receive.totalbill" readonly></v-text-field>
</v-flex>
<v-flex xs2 pl-2>
<v-text-field hide-details outline label="Uang Muka" placeholder="0"
v-model="form_receive.downpayment" readonly></v-text-field>
</v-flex>
<v-flex xs2 pl-2>
<v-text-field hide-details outline label="Cicilan" placeholder="0"
v-model="form_receive.cicilan" readonly></v-text-field>
</v-flex>
<v-flex xs2 pl-2>
<v-text-field hide-details outline label="Lama Kontrak (bulan)" placeholder="0"
v-model="form_receive.contractlength" readonly></v-text-field>
</v-flex>
<v-flex xs2 pl-2>
<v-text-field hide-details outline label="Tanggal Bayar" placeholder="0"
v-model="form_receive.datepayment" readonly></v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap class="mt-2">
<v-flex xs12>
<v-textarea auto-grow rows="1" outline label="Catatan" hide-details
v-model="form_receive.catatan"></v-textarea>
</v-flex>
<v-flex xs3 mt-2>
<!-- :disabled="form_receive.supplier == ''" -->
<v-btn block color="info" @click="pickKontrakAset()">
PILIH KONTRAK
</v-btn>
</v-flex>
</v-layout>
<v-layout row wrap class="mt-3">
<!-- <v-flex xs12 v-if="item_receive.length > 0"> -->
<v-flex xs12>
<v-data-table :headers="headers" :items="[]" class="elevation-1" hide-actions>
<template v-slot:items="props">
<tr>
<td></td>
</tr>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="dialog_receive_aset = false" color="error" class="white--text">Batal</v-btn>
<v-btn color="primary" class="white--text">Simpan</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
module.exports = {
data() {
return {
menuROdate: false,
headers: [
{
text: "ITEM", align: "center", sortable: false,
value: "nopo", width: "40%", class: "pa-1 blue lighten-3 white--text",
},
{
text: "QTY", align: "center", sortable: false,
value: "type", width: "10%", class: "pa-1 blue lighten-3 white--text",
},
{
text: "UNIT ITEM", align: "center", sortable: false,
value: "item", width: "15%", class: "pa-1 blue lighten-3 white--text",
},
{
text: "INSPEKSI", align: "center", sortable: false,
value: "inspec", width: "20%", class: "pa-1 blue lighten-3 white--text",
},
{
text: "AKSI", align: "center", sortable: false,
value: "act", width: "15%", class: "pa-1 blue lighten-3 white--text",
},
]
}
},
computed: {
dialog_receive_aset: {
get() {
return this.$store.state.roasset.dialog_receive_aset
},
set(val) {
this.$store.commit("roasset/update_dialog_receive_aset", val)
}
},
form_receive: {
get() {
return this.$store.state.roasset.form_receive
},
set(val) {
this.$store.commit("roasset/update_form_receive", val)
}
},
item_receive: {
get() {
return this.$store.state.roasset.item_receive
},
set(val) {
this.$store.commit("roasset/update_item_receive", val)
}
},
formattedRODate() {
return this.formatDate(this.form_receive.date)
}
},
methods: {
formatDate(date) {
if (!date) return null;
const [year, month, day] = date.split('-');
return `${day}-${month}-${year}`;
},
pickKontrakAset() {
this.$store.commit("roasset/update_dialog_pick_contract", true);
}
}
}
</script>

110
test/vuex/acc-one-receive-order-asset/components/main-layout.vue
View File

@@ -3,7 +3,7 @@
<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-btn icon @click="openDialogReceive()">
<v-icon large>add_box</v-icon>
</v-btn>
</v-toolbar>
@@ -11,20 +11,22 @@
<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">
<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>
<v-text-field label="Tanggal Awal" hide-details readonly v-on="on" outline
v-model="formattedStartdate"></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">
<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>
<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>
@@ -42,7 +44,48 @@
</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-data-table :headers="headers" :items="list_roasset.records" class="elevation-1" hide-actions>
<template v-slot:items="props">
<tr>
<td class="text-xs-center pa-2">
{{ props.item.date }}
</td>
<td class="text-xs-center pa-2">
{{ props.item.receiveordernumber }} <br>
{{ props.item.purchaseordernumber }}
</td>
<td class="text-xs-center pa-2">
{{ props.item.suppliername }}
</td>
<td class="text-xs-start pa-2">
<v-layout row wrap>
<v-flex xs6>
Total tagihan : {{ props.item.totaltagihan }} <br>
Besar uang muka : {{ props.item.uangmuka }} <br>
</v-flex>
<v-flex xs6 pl-2>
Status cicilan : {{ props.item.cicilanterbayar }} / {{ props.item.numbercicilan }} <br>
Besar cicilan : {{ props.item.besarcicilan }} <br>
</v-flex>
</v-layout>
</td>
<td class="text-xs-center pa-2">
{{ props.item.status }}
</td>
<td class="text-xs-center pa-2">
<v-tooltip bottom pr-2>
<template v-slot:activator="{ on }">
<v-btn color="green" dark @click="uploadAttachment(props.item)"
style="min-width: 40px; margin: 0;" small v-on="on">
<v-icon small>attachment</v-icon>
</v-btn>
</template>
<span>Upload Bukti</span>
</v-tooltip>
</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>
@@ -53,43 +96,53 @@
{{ snackbar.msg }}
<v-btn class="ml-2" round flat @click="snackbar.state = false">Tutup</v-btn>
</v-snackbar>
<dialog-receive-aset></dialog-receive-aset>
<dialog-add-attachment></dialog-add-attachment>
<dialog-delete-order-asset></dialog-delete-order-asset>
<dialog-pick-contract></dialog-pick-contract>
</div>
</template>
<script>
module.exports = {
components: {
'dialog-receive-aset': httpVueLoader('./dialog-receive-order-asset.vue'),
'dialog-add-attachment': httpVueLoader('./dialog-add-attachment.vue'),
'dialog-delete-order-asset': httpVueLoader('./dialog-delete-order-asset.vue'),
'dialog-pick-contract': httpVueLoader('./dialog-pick-contract.vue'),
},
mounted() {
this.$store.dispatch("roasset/lookupOrderAssetReceived")
},
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: "TANGGAL RECEIVE", align: "center", sortable: false, value: "date",
width: "15%", 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 RO/PO", align: "start", sortable: false, value: "noropo",
width: "20%", 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: "supplier",
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: "INFO", align: "center", sortable: false, value: "note",
width: "25%", 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: "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",
text: "AKSI", align: "center", sortable: false, value: "acts",
width: "15%", class: "pa-1 blue lighten-3 white--text",
},
]
}
@@ -128,7 +181,7 @@ module.exports = {
pagelength() {
let total = this.list_roasset.total
if (total === undefined || total < 1) return 1
return Math.ceil(total/10)
return Math.ceil(total / 10)
},
formattedStartdate() {
return this.formatDate(this.filterasset.startdate)
@@ -142,6 +195,13 @@ module.exports = {
if (!date) return null;
const [year, month, day] = date.split('-');
return `${day}-${month}-${year}`;
},
openDialogReceive() {
this.$store.commit("roasset/update_dialog_receive_aset", true)
},
uploadAttachment(item) {
this.$store.commit("roasset/update_selected_roasset", item)
this.$store.commit("roasset/update_dialog_attachment", true);
}
}
}

5
test/vuex/acc-one-receive-order-asset/index.php
View File

@@ -16,7 +16,7 @@
<v-content style="background: #F5E8DF!important">
<v-container fluid fill-height class="px-1 py-2">
<v-flex xs12 fill-height pa-1>
<main-layout></main-layout>
</v-flex>
</v-container>
</v-content>
@@ -46,7 +46,8 @@
methods: {},
components: {
'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue')
'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
'main-layout': httpVueLoader('./components/main-layout.vue')
}
})
</script>

97
test/vuex/acc-one-receive-order-asset/modules/roasset.js
View File

@@ -22,7 +22,32 @@ export default {
records: [],
total: 0
},
currpage: 1
currpage: 1,
selected_roasset: {},
/* form receive */
dialog_receive_aset: false,
form_receive: {
date: moment(new Date()).format('YYYY-MM-DD'),
supplier: "",
reference: "",
ponumber: "",
contractlength: 0,
datepayment: "",
cicilan: 0,
downpayment: 0,
totalbill: 0,
catatan: ""
},
item_receive: [],
dialog_pick_contract: false,
/* upload attachment */
dialog_attachment: false,
preview_attachment: [],
/* delete */
dialog_delete: false
},
mutations: {
/* common */
@@ -45,7 +70,75 @@ export default {
},
update_currpage(state, val) {
state.currpage = val
},
update_selected_roasset(state, val) {
state.selected_roasset = val
},
/* form receive */
update_dialog_receive_aset(state, val) {
state.dialog_receive_aset = val
},
update_form_receive(state, val) {
state.form_receive = val
},
update_item_receive(state, val) {
state.item_receive = val
},
update_dialog_pick_contract(state, val) {
state.dialog_pick_contract = val
},
/* attachment */
update_dialog_attachment(state, val) {
state.dialog_attachment = val
},
update_preview_attachment(state, val) {
state.preview_attachment = val
},
/* delete */
update_dialog_delete(state, val) {
state.dialog_delete = val
}
},
actions: {}
actions: {
async lookupOrderAssetReceived(context) {
try {
// const param = {
// token: one_token(),
// }
// const resp = await api.lookupOrderAssetReceived(param);
// if (resp.status != "OK") {
// throw new Error(resp.message);
// }
// context.commit("update_list_roasset", resp.data);
const dummy = {
records: [
{
date: moment(new Date()).format('YYYY-MM-DD'),
receiveordernumber: "GR-003/SDM-14/SM-1/VI/2026",
purchaseordernumber: "PO-002/OPR-RL/SM-2/VI/2026",
suppliername: "PT MEJA ABADI",
uangmuka: 4000000,
totaltagihan: 10000000,
besarcicilan: 500000,
numbercicilan: 12,
cicilanterbayar: 0,
status: "Unconfirmed"
}
],
total: 1
}
context.commit("update_list_roasset", dummy);
} catch (e) {
const snac = { color: 'error', msg: e.message, state: false };
context.commit("update_snackbar", snac);
}
}
}
}