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

This commit is contained in:
2026-07-08 17:14:35 +07:00
parent a1aab09ac9
commit 1f5bcfacd5
17 changed files with 1216 additions and 205 deletions

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>

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>

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>

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>

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);
}
}
}