add modules folder based on s_menu
This commit is contained in:
700
test/vuex/acc-one-cashier-v2/components/cashierListing.vue
Normal file
700
test/vuex/acc-one-cashier-v2/components/cashierListing.vue
Normal file
@@ -0,0 +1,700 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<!-- SNACKBAR -->
|
||||
<v-snackbar
|
||||
v-model="snackbar"
|
||||
:timeout="5000"
|
||||
:multi-line="false"
|
||||
:vertical="false"
|
||||
:top="true"
|
||||
>
|
||||
{{ msgSnackbar }}
|
||||
<v-btn flat @click="updateAlertSuccess(false)"> Tutup </v-btn>
|
||||
</v-snackbar>
|
||||
|
||||
<!-- ERROR DIALOG -->
|
||||
<v-dialog v-model="dialog_error" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span>ERROR !</span>
|
||||
<v-spacer></v-spacer>
|
||||
</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<div class="ma-3 red--text">{{ msgError }}</div>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" flat @click="dialog_error = false"
|
||||
>Tutup</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- END ERROR DIALOG -->
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 fill-height pa-1>
|
||||
<v-toolbar color="primary" dark>
|
||||
<v-toolbar-title class="white--text"
|
||||
>KASIR</v-toolbar-title
|
||||
>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn v-if="(status != '' || status != null) && (xdate != '' && xdate != null)" @click="goBack()" color="orange darken-2" title="Kembali ke listing pending approval" dark>
|
||||
<v-icon dark left>arrow_back</v-icon>Back
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
<v-card class="pa-2">
|
||||
<v-layout>
|
||||
<v-flex xs3 pl-2>
|
||||
<v-menu
|
||||
v-model="menuStartDate"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
:nudge-right="40"
|
||||
lazy
|
||||
offset-y
|
||||
max-width="290px"
|
||||
min-width="290px"
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-text-field
|
||||
v-model="startDateFormatted"
|
||||
label="Tanggal Awal"
|
||||
readonly
|
||||
style="max-width: 250px"
|
||||
outline
|
||||
hide-details
|
||||
v-on="on"
|
||||
@blur="dStartDate = deFormatedDate(startDateFormatted)"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker
|
||||
no-title
|
||||
v-model="xStartDate"
|
||||
@input="menuStartDate = false"
|
||||
></v-date-picker>
|
||||
</v-menu>
|
||||
</v-flex>
|
||||
<v-flex xs3 pl-2>
|
||||
<v-menu
|
||||
v-model="menuEndDate"
|
||||
:close-on-content-click="false"
|
||||
transition="scale-transition"
|
||||
:nudge-right="40"
|
||||
lazy
|
||||
offset-y
|
||||
max-width="290px"
|
||||
min-width="290px"
|
||||
>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-text-field
|
||||
v-model="endDateFormatted"
|
||||
label="Tanggal Akhir"
|
||||
readonly
|
||||
style="max-width: 250px"
|
||||
outline
|
||||
hide-details
|
||||
v-on="on"
|
||||
@blur="dEndDate = deFormatedDate(endDateFormatted)"
|
||||
></v-text-field>
|
||||
</template>
|
||||
<v-date-picker
|
||||
no-title
|
||||
v-model="xEndDate"
|
||||
@input="menuEndDate = false"
|
||||
></v-date-picker>
|
||||
</v-menu>
|
||||
</v-flex>
|
||||
<v-flex xs3 pl-2>
|
||||
<v-autocomplete
|
||||
return-object
|
||||
item-text="text"
|
||||
label="Status"
|
||||
:items="statusOptions"
|
||||
v-model="selected_status"
|
||||
outline
|
||||
hide-details
|
||||
></v-autocomplete>
|
||||
</v-flex>
|
||||
<v-flex xs3 pl-2>
|
||||
<v-text-field
|
||||
label="Cari..."
|
||||
placeholder="NO."
|
||||
outline
|
||||
hide-details
|
||||
v-model="xsearch"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex pl-2 pr-2>
|
||||
<v-btn
|
||||
dark
|
||||
color="primary"
|
||||
style="min-width: 50px; height: 50px; margin: 0"
|
||||
@click="mainTableSearch()"
|
||||
>
|
||||
<v-icon>search</v-icon>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
<v-card class="pa-2 mt-2">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 pl-2>
|
||||
<div v-if="selected_status.text == 'Draft'">
|
||||
<span>Total belum di bayar : </span>
|
||||
<span>{{ totalDraft }}</span>
|
||||
</div>
|
||||
<div v-if="selected_status.text == 'Paid'">
|
||||
<span>Total belum di realisasi : </span>
|
||||
<span>{{ totalPaid }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row style="max-height: 600px; overflow: auto">
|
||||
<v-flex xs12 pl-2 pr-2 pt-2 pb-2>
|
||||
<v-data-table
|
||||
:items="xvoucehrList"
|
||||
:headers="headers"
|
||||
:loading="isLoading"
|
||||
hide-actions
|
||||
class="elevation-1"
|
||||
>
|
||||
<template slot="items" slot-scope="props">
|
||||
<td
|
||||
class="text-xs-left pa-2"
|
||||
v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
|
||||
@click="selectMe(props.item)"
|
||||
>
|
||||
<p class="mb-0 font-weight-bold" style="color:#000000">{{ props.item.PaymentVoucherNumber }}</p>
|
||||
<p class="mb-0 info--text mono font-weight-bold caption">{{ formatDateHeader(props.item.PaymentVoucherDate) }}</p>
|
||||
</td>
|
||||
<td
|
||||
class="text-xs-left pa-2"
|
||||
v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
|
||||
@click="selectMe(props.item)"
|
||||
>
|
||||
<p class="mb-0">{{ props.item.M_BranchName }}</p>
|
||||
<p class="mb-0 font-weight-bold" style="color:#000000">Total : Rp {{ convertMoney(props.item.PaymentVoucherTotal) }}</p>
|
||||
</td>
|
||||
<td
|
||||
class="text-xs-left pa-2"
|
||||
v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
|
||||
@click="selectMe(props.item)"
|
||||
>{{ formatDateHeader(props.item.PaymentVoucherRealitationDate) }}</td>
|
||||
<td
|
||||
class="text-xs-center pa-2"
|
||||
v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
|
||||
@click="selectMe(props.item)"
|
||||
>
|
||||
<v-chip
|
||||
small
|
||||
:text-color="props.item.PaymentVoucherStatus === 'Draft' ? 'black' : 'white'"
|
||||
:color="getChipStatusColor(props.item.PaymentVoucherStatus)">
|
||||
{{ props.item.PaymentVoucherStatus }}
|
||||
</v-chip>
|
||||
</td>
|
||||
<template v-if="props.item.PaymentVoucherStatus == 'Draft'">
|
||||
<td class="text-xs-center pa-2"
|
||||
v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
|
||||
@click="selectMe(props.item)"
|
||||
>
|
||||
<v-btn small color="lime darken-2" dark @click="openDialogPay(props.item)">Bayar</v-btn>
|
||||
</td>
|
||||
|
||||
</template>
|
||||
<template v-else-if="props.item.PaymentVoucherStatus == 'Paid'">
|
||||
<td class="text-xs-center pa-2"
|
||||
v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
|
||||
@click="selectMe(props.item)"
|
||||
>
|
||||
<v-icon class="mr-2" color="orange" small @click="doPrintPaid(props.item)">picture_as_pdf</v-icon>
|
||||
<v-btn small color="teal darken-2" dark @click="openDialogUpdate(props.item)">Realisasi</v-btn>
|
||||
</td>
|
||||
</template>
|
||||
<template v-else-if="props.item.PaymentVoucherStatus == 'Realitation'">
|
||||
<td
|
||||
class="text-xs-center pa-2"
|
||||
v-bind:class="{
|
||||
'amber lighten-4': isSelected(props.item),
|
||||
}"
|
||||
>
|
||||
<v-icon class="mr-2" color="orange" small @click="doPrintPaid(props.item)">picture_as_pdf</v-icon>
|
||||
<v-icon class="mr-2" color="teal" small @click="doPrintRealitation(props.item)">picture_as_pdf</v-icon>
|
||||
</td>
|
||||
</template>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider></v-divider>
|
||||
<v-pagination
|
||||
style="margin-top: 10px; margin-bottom: 10px"
|
||||
v-model="curr_page"
|
||||
:length="xtotal_page"
|
||||
></v-pagination>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<!-- <dialog-form></dialog-form> -->
|
||||
<!-- <dialog-realized-item></dialog-realized-item> -->
|
||||
<dialog-form-realise></dialog-form-realise>
|
||||
<dialog-view-img></dialog-view-img>
|
||||
<dialog-form-pay></dialog-form-pay>
|
||||
|
||||
<one-dialog-alert
|
||||
:status="dialogAlertDelete"
|
||||
:msg="msgAlertDelete"
|
||||
@forget-dialog-alert="dialogAlertDelete = false"
|
||||
@close-dialog-alert="closeAndDelete()"
|
||||
></one-dialog-alert>
|
||||
<one-dialog-print :title="printtitle" :width="printwidth" :height="700" :status="openprint" :urlprint="urlprint"
|
||||
@close-dialog-print="openprint = false"></one-dialog-print>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.date-type-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.table.v-table tbody td,
|
||||
table.v-table tbody th {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.table.v-table thead tr {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
scroll-padding: 50px 0 0 50px;
|
||||
}
|
||||
|
||||
.wrap-header {
|
||||
white-space: normal !important;
|
||||
line-height: 1.2;
|
||||
word-break: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
components: {
|
||||
"dialog-form": httpVueLoader("./dialogForm.vue"),
|
||||
"dialog-form-pay": httpVueLoader("./dialogFormPay.vue"),
|
||||
"dialog-realized-item": httpVueLoader("./dialogItemRealize.vue"),
|
||||
"dialog-form-realise": httpVueLoader("./dialogFormRealise.vue"),
|
||||
"dialog-view-img": httpVueLoader("./dialogViewImg.vue"),
|
||||
"one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
|
||||
"one-dialog-error": httpVueLoader("../../common/oneDialogError.vue"),
|
||||
'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
msgAlertDelete: "",
|
||||
dialogAlertDelete: false,
|
||||
xPVID: 0,
|
||||
xPVNumber: "",
|
||||
formatreport: "pdf",
|
||||
urlprint: "",
|
||||
printtitle: '',
|
||||
printwidth: '100%',
|
||||
headers: [
|
||||
{
|
||||
text: "NO / TANGGAL",
|
||||
align: "center",
|
||||
sortable: false,
|
||||
value: "no",
|
||||
width: "20%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "PENERIMA",
|
||||
align: "center",
|
||||
sortable: false,
|
||||
value: "supplier",
|
||||
width: "19%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "TANGGAL REALISASI",
|
||||
align: "center",
|
||||
sortable: false,
|
||||
value: "total",
|
||||
width: "16%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "STATUS",
|
||||
align: "center",
|
||||
sortable: false,
|
||||
value: "status",
|
||||
width: "15%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "AKSI",
|
||||
align: "center",
|
||||
sortable: false,
|
||||
value: "status",
|
||||
width: "15%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch("cashier/search");
|
||||
this.$store.dispatch("cashier/getTotalDraft");
|
||||
this.$store.dispatch("cashier/getTotalPaid");
|
||||
},
|
||||
computed: {
|
||||
status() {
|
||||
return this.$store.state.cashier.status;
|
||||
},
|
||||
xdate() {
|
||||
return this.$store.state.cashier.xdate;
|
||||
},
|
||||
statusOptions() {
|
||||
return this.$store.state.cashier.status_options;
|
||||
},
|
||||
selected_status: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_status;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_status", val);
|
||||
this.mainTableSearch();
|
||||
},
|
||||
},
|
||||
menuStartDate: {
|
||||
get() {
|
||||
return this.$store.state.cashier.menuStartDate;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_menuStartDate", val);
|
||||
},
|
||||
},
|
||||
menuEndDate: {
|
||||
get() {
|
||||
return this.$store.state.cashier.menuEndDate;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_menuEndDate", val);
|
||||
},
|
||||
},
|
||||
startDateFormatted() {
|
||||
return this.formatDate(this.xStartDate);
|
||||
},
|
||||
endDateFormatted() {
|
||||
return this.formatDate(this.xEndDate);
|
||||
},
|
||||
xStartDate: {
|
||||
get() {
|
||||
return this.$store.state.cashier.xStartDate;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_xStartDate", val);
|
||||
},
|
||||
},
|
||||
xEndDate: {
|
||||
get() {
|
||||
return this.$store.state.cashier.xEndDate;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_xEndDate", val);
|
||||
},
|
||||
},
|
||||
dEndDate: {
|
||||
get() {
|
||||
return this.$store.state.cashier.dEndDate;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_dEndDate", val);
|
||||
},
|
||||
},
|
||||
dStartDate: {
|
||||
get() {
|
||||
return this.$store.state.cashier.dStartDate;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_dStartDate", val);
|
||||
},
|
||||
},
|
||||
xvoucehrList() {
|
||||
return this.$store.state.cashier.cashierList;
|
||||
},
|
||||
curr_page: {
|
||||
get() {
|
||||
return this.$store.state.cashier.currentPage;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_currentPage", val);
|
||||
this.mainTableSearch();
|
||||
},
|
||||
},
|
||||
xtotal_page: {
|
||||
get() {
|
||||
return this.$store.state.cashier.total_page_cashier;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_total_page_cashier", val);
|
||||
},
|
||||
},
|
||||
xsearch: {
|
||||
get() {
|
||||
return this.$store.state.cashier.xsearch;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_xsearch", val);
|
||||
},
|
||||
},
|
||||
isLoading() {
|
||||
return this.$store.state.cashier.search_status === 1;
|
||||
},
|
||||
msgSnackbar() {
|
||||
return this.$store.state.cashier.success_message;
|
||||
},
|
||||
snackbar: {
|
||||
get() {
|
||||
return this.$store.state.cashier.alert_success;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_alert_success", val);
|
||||
},
|
||||
},
|
||||
dialog_error: {
|
||||
get() {
|
||||
return this.$store.state.cashier.alert_error;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_alert_error", val);
|
||||
},
|
||||
},
|
||||
msgError: {
|
||||
get() {
|
||||
return this.$store.state.cashier.error_message;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_error_message", val);
|
||||
}
|
||||
},
|
||||
totalDraft() {
|
||||
return this.$store.state.cashier.totalDraft
|
||||
},
|
||||
totalPaid() {
|
||||
return this.$store.state.cashier.totalPaid
|
||||
},
|
||||
openprint: {
|
||||
get() {
|
||||
return this.$store.state.cashier.openprint;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_openprint", val);
|
||||
},
|
||||
},
|
||||
voucher_details() {
|
||||
return this.$store.state.cashier.details
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
window.history.back();
|
||||
// location.href = "/one-ui/test/vuex/one-accone-approve-all/"
|
||||
},
|
||||
convertMoney(money){
|
||||
return one_money(money)
|
||||
},
|
||||
doPrintPaid(val) {
|
||||
// console.log(val)
|
||||
this.printwidth = 1028
|
||||
this.printtitle = ""
|
||||
let user = one_user()
|
||||
tm = Date.now()
|
||||
var rptname = 'rpt_payment_voucher_paid_001'
|
||||
var formatrpt = this.formatreport
|
||||
|
||||
this.urlprint = "/birt/run?__report=report/one/accounting/" + rptname + ".rptdesign&__format=" + formatrpt + "&PID=" + val.PaymentVoucherID + "&username=" + user.M_StaffName + "&tm=" + tm
|
||||
// console.log(this.urlprint)
|
||||
|
||||
this.$store.commit("cashier/update_openprint", true)
|
||||
},
|
||||
doPrintRealitation(val) {
|
||||
// console.log(val)
|
||||
this.printwidth = 1028
|
||||
this.printtitle = ""
|
||||
let user = one_user()
|
||||
tm = Date.now()
|
||||
var rptname = 'rpt_payment_voucher_realitation_001'
|
||||
var formatrpt = this.formatreport
|
||||
|
||||
this.urlprint = "/birt/run?__report=report/one/accounting/" + rptname + ".rptdesign&__format=" + formatrpt + "&PID=" + val.PaymentVoucherID + "&username=" + user.M_StaffName + "&tm=" + tm
|
||||
// console.log(this.urlprint)
|
||||
|
||||
this.$store.commit("cashier/update_openprint", true)
|
||||
},
|
||||
isSelected(o) {
|
||||
return o.PaymentVoucherID == this.$store.state.cashier.selected_cashier.PaymentVoucherID;
|
||||
},
|
||||
selectMe(sc) {
|
||||
this.$store.commit("cashier/update_selected_cashier", sc);
|
||||
this.$store.dispatch("cashier/searchdetail", sc.PaymentVoucherID);
|
||||
this.$store.dispatch("cashier/getVoucherDetail");
|
||||
},
|
||||
openDialogVoucher() {
|
||||
this.$store.commit("cashier/update_dialog_cashier", true);
|
||||
this.$store.commit("cashier/update_act", "new");
|
||||
this.$store.commit("cashier/update_selected_branch", {});
|
||||
this.$store.commit("cashier/update_selected_accountDana", {});
|
||||
this.$store.commit("cashier/update_selected_accountBiaya", {});
|
||||
this.$store.commit("cashier/update_selected_accountTemp", {});
|
||||
this.$store.commit("cashier/update_selected_purchase", []);
|
||||
this.$store.commit("cashier/update_purchaseList", []);
|
||||
this.$store.commit("cashier/update_resume_total", {"totalRealitation": 0});
|
||||
},
|
||||
formatDate(date) {
|
||||
if (!date) return null;
|
||||
|
||||
const [year, month, day] = date.split("-");
|
||||
return `${day}-${month}-${year}`;
|
||||
},
|
||||
formatDateHeader(date) {
|
||||
if (!date) return null;
|
||||
const cleanDate = date.split(" ")[0];
|
||||
const [year, month, day] = cleanDate.split("-");
|
||||
return `${day}-${month}-${year}`;
|
||||
},
|
||||
deFormatedDate(date) {
|
||||
if (!date) return null;
|
||||
|
||||
const [day, month, year] = date.split("-");
|
||||
return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
|
||||
},
|
||||
getChipStatusColor(status) {
|
||||
switch (status) {
|
||||
case "Paid":
|
||||
return "warning";
|
||||
case "Realitation":
|
||||
return "success";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
},
|
||||
mainTableSearch() {
|
||||
this.$store.dispatch("cashier/search");
|
||||
},
|
||||
thr_searchDate: _.debounce(function () {
|
||||
this.$store.dispatch("cashier/search")
|
||||
}, 1000),
|
||||
thr_search: _.debounce(function () {
|
||||
this.$store.dispatch("cashier/search")
|
||||
}, 1000),
|
||||
deleteVoucher(data) {
|
||||
this.xPVID = data.PaymentVoucherID;
|
||||
this.xPVNumber = data.PaymentVoucherNumber;
|
||||
|
||||
this.msgAlertDelete = `Yakin, mau hapus Payment Voucher [${data.PaymentVoucherNumber}] ?`;
|
||||
this.dialogAlertDelete = true;
|
||||
},
|
||||
closeAndDelete() {
|
||||
// this.$store.dispatch("cashier/delete", {
|
||||
// PVID: this.xPVID,
|
||||
// PVNumber: this.xPVNumber
|
||||
// });
|
||||
this.dialogAlertDelete = false
|
||||
},
|
||||
openDialogUpdate(data) {
|
||||
this.$store.commit("cashier/update_act", "edit");
|
||||
this.$store.commit("cashier/update_dialog_cashier", true);
|
||||
this.$store.commit("cashier/update_imageRelationPreviews", []);
|
||||
this.$store.commit("cashier/update_imageRelationFiles", []);
|
||||
|
||||
const fileBaseUrl = BASE_URL + "/one-media/cashier/";
|
||||
|
||||
const allImageUrls = [];
|
||||
|
||||
for (let index = 0; index < data.dataAttachment.length; index++) {
|
||||
const element = data.dataAttachment[index];
|
||||
|
||||
if (element.PurchaseDirectAttachmentName == null || element.PurchaseDirectAttachmentName == '') {
|
||||
continue;
|
||||
}
|
||||
allImageUrls.push(fileBaseUrl + element.PurchaseDirectAttachmentName)
|
||||
}
|
||||
|
||||
this.$store.commit("cashier/update_imagePrevPaid", allImageUrls);
|
||||
},
|
||||
openDialogPay(data) {
|
||||
// cek detail sudah terisi account biaya atau belum
|
||||
const voucherdetails = this.voucher_details;
|
||||
const incomplete = voucherdetails.some(element => {
|
||||
const acc = element.account_biaya
|
||||
const splitacc = acc.split(';').map(part => part.trim())
|
||||
return splitacc.some(account => account === 'notset')
|
||||
});
|
||||
if (incomplete) {
|
||||
this.dialog_error = true
|
||||
this.msgError = 'Terdapat item voucher yang belum diset account biayanya'
|
||||
return;
|
||||
}
|
||||
|
||||
this.$store.dispatch("cashier/getUserReceive");
|
||||
this.$store.commit("cashier/update_act", "edit");
|
||||
this.$store.commit("cashier/update_dialog_cashier_pay", true);
|
||||
this.$store.commit("cashier/update_imagePayPreviews", []);
|
||||
|
||||
const fileBaseUrl = BASE_URL + "/one-media/cashier/";
|
||||
|
||||
const allImageUrls = [];
|
||||
const allNumberRequest = [];
|
||||
let descriptions = '';
|
||||
|
||||
for (let index = 0; index < data.dataAttachment.length; index++) {
|
||||
const element = data.dataAttachment[index];
|
||||
|
||||
if (element.PurchaseDirectAttachmentName == null || element.PurchaseDirectAttachmentName == '') {
|
||||
continue;
|
||||
}
|
||||
allImageUrls.push(fileBaseUrl + element.PurchaseDirectAttachmentName)
|
||||
}
|
||||
|
||||
this.$store.commit("cashier/update_imagePreviews", allImageUrls);
|
||||
|
||||
for (let index = 0; index < data.requestNumber.length; index++) {
|
||||
const element = data.requestNumber[index];
|
||||
|
||||
allNumberRequest.push(element.PurchaseRequestDirectNumber)
|
||||
|
||||
let desc = element.PurchaseRequestDirectDescription;
|
||||
|
||||
descriptions += desc;
|
||||
if (index !== data.requestNumber.length - 1) {
|
||||
descriptions += ', ';
|
||||
}
|
||||
}
|
||||
this.$store.commit("cashier/update_numberRequest", allNumberRequest);
|
||||
this.$store.commit("cashier/update_requestDescription", descriptions);
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
xStartDate(val, old) {
|
||||
this.xStartDate = val;
|
||||
this.thr_searchDate();
|
||||
},
|
||||
xEndDate(val, old) {
|
||||
this.xEndDate = val;
|
||||
this.thr_searchDate();
|
||||
},
|
||||
xsearch(val, old) {
|
||||
this.xsearch = val;
|
||||
this.thr_search();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
682
test/vuex/acc-one-cashier-v2/components/dialogForm.vue
Normal file
682
test/vuex/acc-one-cashier-v2/components/dialogForm.vue
Normal file
@@ -0,0 +1,682 @@
|
||||
<template>
|
||||
<v-layout row justify-center>
|
||||
<v-dialog v-model="dialogVoucher" persistent max-width="50vw">
|
||||
<v-card>
|
||||
<v-card-title class="headline grey lighten-2" primary-title>
|
||||
FORM REALISASI
|
||||
</v-card-title>
|
||||
<v-card-text class="pt-2 pb-0">
|
||||
<v-layout row>
|
||||
<v-flex xs12 pa-2>
|
||||
<v-textarea
|
||||
filled
|
||||
outline
|
||||
hide-details
|
||||
label="Catatan*"
|
||||
rows="3"
|
||||
v-model="xnote"
|
||||
></v-textarea>
|
||||
<p v-if="checkErrorForm('requireNote')" class="error pl-2 pr-2" style="color:#fff">Catatan harus diisi</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout mr-2 ml-2 style="border:1px solid black" align-center row pa-2 mb-2>
|
||||
<v-flex xs9>
|
||||
<!-- <input type="file" ref="image" accept="image/*" @change="onFilePicked"> -->
|
||||
<input type="file" id="files" ref="files" accept="image/*" multiple v-on:change="onFilePicked()"/>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout v-if="show_progrees_upload" row align-center mr-2 ml-2>
|
||||
<v-flex xs12>
|
||||
|
||||
<v-progress-linear :indeterminate="true"></v-progress-linear>
|
||||
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout v-if="imageRelationPreviews.length > 0 && !show_progrees_upload" align-center row wrap>
|
||||
<v-flex
|
||||
v-for="(imgUrl, index) in imageRelationPreviews"
|
||||
:key="index"
|
||||
xs6
|
||||
class="pa-2">
|
||||
<v-img :src="imgUrl">
|
||||
<div class="fill-height bottom-gradient"></div>
|
||||
</v-img>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row>
|
||||
<v-flex xs12 pa-2>
|
||||
<v-text-field
|
||||
prefix="Rp"
|
||||
v-model="formatted_total_price"
|
||||
readonly
|
||||
hide-details
|
||||
outline
|
||||
label="Total Bayar">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row>
|
||||
<v-flex xs11 pl-2>
|
||||
<v-text-field
|
||||
prefix="Rp"
|
||||
v-model="formattedRestPrice"
|
||||
@blur="resetRestPrice"
|
||||
@focus="clearRestPrice"
|
||||
outline readonly
|
||||
hide-details
|
||||
label="Harga">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs>
|
||||
<v-btn
|
||||
outline color="blue lighten-2"
|
||||
@click="openRealisedItem()"
|
||||
>
|
||||
<v-icon small color="blue">edit</v-icon>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row>
|
||||
<v-flex xs12 pa-2>
|
||||
<v-text-field
|
||||
prefix="Rp"
|
||||
v-model="formattedTotalAkhir"
|
||||
readonly
|
||||
hide-details
|
||||
outline
|
||||
label="Sisa">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-layout v-if="imagePrevPaid.length > 0" pt-2>
|
||||
<v-flex xs12 pa-2>
|
||||
<span class="font-weight-bold">BUKTI PEMBAYARAN :</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout v-if="imagePrevPaid.length > 0" align-center row wrap>
|
||||
<v-flex
|
||||
v-for="(img, index) in imagePrevPaid"
|
||||
:key="index"
|
||||
xs6
|
||||
class="pa-2"
|
||||
>
|
||||
<v-img :src="img">
|
||||
<div class="fill-height bottom-gradient"></div>
|
||||
</v-img>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error" flat @click="closeDiallogCashier()"> Tutup </v-btn>
|
||||
<v-btn v-if="xact === 'new'" color="primary" dark @click="saveVoucher()">Simpan</v-btn>
|
||||
<v-btn v-if="xact === 'edit'" color="primary" dark @click="updateChasier()">Realisasi & Simpan</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "DialogFormVoucher",
|
||||
data() {
|
||||
return {
|
||||
url: "",
|
||||
filesToUpload: [],
|
||||
fileName: "", // Untuk menyimpan nama file
|
||||
imageName: "",
|
||||
imageFile: "",
|
||||
imageUrl: "",
|
||||
headers: [
|
||||
{
|
||||
text: "NO",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "no",
|
||||
width: "15%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "DESKRIPSI",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "date",
|
||||
width: "40%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "TOTAL REALISASI",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "supplier",
|
||||
width: "30%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "AKSI",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "status",
|
||||
width: "15%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
formatted_total_price() {
|
||||
var val = Object.keys(this.$store.state.cashier.selected_cashier).length > 0 ? this.$store.state.cashier.selected_cashier.PaymentVoucherTotal : 0;
|
||||
return this.oneMoney(val);
|
||||
},
|
||||
formattedRestPrice: {
|
||||
get() {
|
||||
return this.oneMoney(this.restPrice);
|
||||
},
|
||||
set(value) {
|
||||
// Hilangkan titik dan koma, ubah jadi number
|
||||
let raw = value.replace(/\./g, '').replace(',', '.');
|
||||
this.restPrice = parseFloat(raw) || 0;
|
||||
}
|
||||
},
|
||||
total_akhir() {
|
||||
return this.$store.state.cashier.total_akhir;
|
||||
},
|
||||
formattedTotalAkhir: {
|
||||
get() {
|
||||
return this.oneMoney(this.total_akhir);
|
||||
},
|
||||
set(value) {
|
||||
// Hilangkan titik dan koma, ubah jadi number
|
||||
let raw = value.replace(/\./g, '').replace(',', '.');
|
||||
this.total_akhir = parseFloat(raw) || 0;
|
||||
}
|
||||
},
|
||||
dialogVoucher: {
|
||||
get() {
|
||||
return this.$store.state.cashier.dialog_cashier;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_dialog_cashier", val);
|
||||
},
|
||||
},
|
||||
branchList() {
|
||||
return this.$store.state.cashier.branchList;
|
||||
},
|
||||
selectedBranch: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_branch;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_branch", val);
|
||||
this.getPurchaseReq();
|
||||
},
|
||||
},
|
||||
search_branch: {
|
||||
get() {
|
||||
return this.$store.state.cashier.search_branch;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_search_branch", val);
|
||||
},
|
||||
},
|
||||
accountDanaList() {
|
||||
return this.$store.state.cashier.accountDanaList;
|
||||
},
|
||||
selectedAccountDana: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_accountDana;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_accountDana", val);
|
||||
},
|
||||
},
|
||||
search_accountDana: {
|
||||
get() {
|
||||
return this.$store.state.cashier.search_accountDana;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_search_accountDana", val);
|
||||
},
|
||||
},
|
||||
accountBiayaList() {
|
||||
return this.$store.state.cashier.accountBiayaList;
|
||||
},
|
||||
selectedAccountBiaya: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_accountBiaya;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_accountBiaya", val);
|
||||
},
|
||||
},
|
||||
search_accountBiaya: {
|
||||
get() {
|
||||
return this.$store.state.cashier.search_accountBiaya;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_search_accountBiaya", val);
|
||||
},
|
||||
},
|
||||
accountTempList() {
|
||||
return this.$store.state.cashier.accountTempList;
|
||||
},
|
||||
selectedAccountTemp: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_accountTemp;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_accountTemp", val);
|
||||
},
|
||||
},
|
||||
search_accountTemp: {
|
||||
get() {
|
||||
return this.$store.state.cashier.search_accountTemp;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_search_accountTemp", val);
|
||||
},
|
||||
},
|
||||
purchaseList() {
|
||||
return this.$store.state.cashier.purchaseList;
|
||||
},
|
||||
selected_purchase: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_purchase;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_purchase", val);
|
||||
},
|
||||
},
|
||||
resume() {
|
||||
return this.$store.state.cashier.resume_total;
|
||||
},
|
||||
xact: {
|
||||
get() {
|
||||
return this.$store.state.cashier.act;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_act", val);
|
||||
},
|
||||
},
|
||||
show_progrees_upload: {
|
||||
get() {
|
||||
return this.$store.state.cashier.show_progrees_upload
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_show_progrees_upload", val)
|
||||
}
|
||||
},
|
||||
xnote: {
|
||||
get() {
|
||||
return this.$store.state.cashier.note
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_note", val)
|
||||
}
|
||||
},
|
||||
restPrice: {
|
||||
get() {
|
||||
return this.$store.state.cashier.restPrice
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_restPrice", val)
|
||||
}
|
||||
},
|
||||
imagePrevPaid: {
|
||||
get() {
|
||||
return this.$store.state.cashier.imagePrevPaid
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_imagePrevPaid", val)
|
||||
}
|
||||
},
|
||||
imageRelationPreviews: {
|
||||
get() {
|
||||
return this.$store.state.cashier.imageRelationPreviews;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_imageRelationPreviews", val);
|
||||
},
|
||||
},
|
||||
imageRelationFiles: {
|
||||
get() {
|
||||
return this.$store.state.cashier.imageRelationFiles;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_imageRelationFiles", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
roundToThreeSignificantDigits(num) {
|
||||
if (num === 0) return 0;
|
||||
|
||||
// Hitung jumlah digit
|
||||
const absNum = Math.abs(num);
|
||||
const magnitude = Math.floor(Math.log10(absNum)) + 1;
|
||||
|
||||
// Jika kurang dari 3 digit, tidak perlu dibulatkan
|
||||
if (magnitude <= 3) return num;
|
||||
|
||||
// Hitung faktor pembulatan
|
||||
const factor = Math.pow(10, magnitude - 3);
|
||||
|
||||
// Bulatkan
|
||||
return Math.round(num / factor) * factor;
|
||||
},
|
||||
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, ".");
|
||||
}
|
||||
},
|
||||
convertMoney(money){
|
||||
return one_money(money)
|
||||
},
|
||||
formatAngka(nilai) {
|
||||
// Jika tidak ada nilai
|
||||
if (!nilai) return '';
|
||||
|
||||
try {
|
||||
// Ubah ke string
|
||||
let strNilai = String(nilai);
|
||||
|
||||
// Jika berisi titik desimal
|
||||
if (strNilai.includes('.')) {
|
||||
// Split bagian utama dan desimal
|
||||
let bagian = strNilai.split('.');
|
||||
let utama = bagian[0];
|
||||
let desimal = bagian[1];
|
||||
|
||||
// Format bagian utama
|
||||
utama = utama.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
|
||||
|
||||
// Kembalikan gabungan
|
||||
return utama + ',' + desimal;
|
||||
} else {
|
||||
// Tidak ada desimal, hanya format bagian utama
|
||||
return strNilai.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error formatting:", error);
|
||||
return nilai;
|
||||
}
|
||||
},
|
||||
resetRestPrice() {
|
||||
if (this.restPrice === '' || this.restPrice === null) {
|
||||
this.restPrice = 0
|
||||
}
|
||||
},
|
||||
clearRestPrice() {
|
||||
if (this.restPrice === 0) {
|
||||
this.restPrice = ''
|
||||
}
|
||||
},
|
||||
handleFileUploadsbkp(){
|
||||
// this.files = this.$refs.files.files
|
||||
|
||||
const files = this.$refs.files.files;
|
||||
this.urls = [];
|
||||
this.filesToUpload = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
const url = URL.createObjectURL(file);
|
||||
this.urls.push(url);
|
||||
this.filesToUpload.push(file);
|
||||
}
|
||||
// console.log('urls', this.urls)
|
||||
console.log('filesToUpload', this.filesToUpload)
|
||||
},
|
||||
handleFileUploads(){
|
||||
const file = this.$refs.files.files[0];
|
||||
if (file) {
|
||||
this.fileName = file.name; // Simpan nama file
|
||||
this.filesToUpload = [file]; // Masukkan ke array untuk konsistensi
|
||||
this.url = URL.createObjectURL(file); // Preview jika diperlukan
|
||||
}
|
||||
|
||||
},
|
||||
onFilePicked(){
|
||||
// this.files = this.$refs.files.files
|
||||
|
||||
const files = this.$refs.files.files;
|
||||
this.imageRelationPreviews = [];
|
||||
this.imageRelationFiles = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
const url = URL.createObjectURL(file);
|
||||
this.imageRelationPreviews.push(url);
|
||||
this.imageRelationFiles.push(file);
|
||||
}
|
||||
},
|
||||
onFilePicked_old(e) {
|
||||
const files = e.target.files
|
||||
console.log('cek files',files[0]);
|
||||
if (files[0] !== undefined) {
|
||||
this.imageName = files[0].name
|
||||
if (this.imageName.lastIndexOf('.') <= 0) {
|
||||
return
|
||||
}
|
||||
const fr = new FileReader()
|
||||
fr.readAsDataURL(files[0])
|
||||
fr.addEventListener('load', () => {
|
||||
this.imageUrl = fr.result
|
||||
this.imageFile = files[0] // this is an image file that can be sent to server...
|
||||
})
|
||||
|
||||
// console.log('imageName', this.imageName)
|
||||
// console.log('imageFile', this.imageFile)
|
||||
// console.log('imageUrl', this.imageUrl)
|
||||
|
||||
} else {
|
||||
this.imageName = ''
|
||||
this.imageFile = ''
|
||||
this.imageUrl = ''
|
||||
}
|
||||
},
|
||||
thr_search_branch: _.debounce(function() {
|
||||
this.$store.dispatch("cashier/searchBranch", this.search_branch);
|
||||
}, 500),
|
||||
thr_search_accountDana: _.debounce(function() {
|
||||
this.$store.dispatch("cashier/searchAccDana", this.search_accountDana);
|
||||
}, 500),
|
||||
thr_search_accountBiaya: _.debounce(function() {
|
||||
this.$store.dispatch("cashier/searchAccBiaya", this.search_accountBiaya);
|
||||
}, 500),
|
||||
thr_search_accountTemp: _.debounce(function() {
|
||||
this.$store.dispatch("cashier/searchAccTemp", this.search_accountTemp);
|
||||
}, 500),
|
||||
getPurchaseReq() {
|
||||
this.$store.dispatch("cashier/getPurchase", this.selectedBranch === undefined ? "" : this.selectedBranch.M_BranchCode);
|
||||
},
|
||||
formatCurrency(val) {
|
||||
// Format the price above to USD using the locale, style, and currency.
|
||||
let price = parseFloat(val);
|
||||
let USDollar = new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
});
|
||||
|
||||
// console.log(
|
||||
// `The formated version of ${price} is ${USDollar.format(price)}`
|
||||
// );
|
||||
return `${USDollar.format(price)}`;
|
||||
},
|
||||
addPurchase(item) {
|
||||
let selected_purchase = this.$store.state.cashier.selected_purchase;
|
||||
selected_purchase.push(item);
|
||||
|
||||
let totalRealitation = 0;
|
||||
for (let i = 0; i < selected_purchase.length; i++) {
|
||||
const e = selected_purchase[i];
|
||||
totalRealitation += parseFloat(e.PurchaseRequestDirectTotalRealitation);
|
||||
}
|
||||
let xresume = {
|
||||
"totalRealitation": totalRealitation,
|
||||
};
|
||||
this.$store.commit("cashier/update_resume_total", xresume);
|
||||
},
|
||||
purchaseExist(item) {
|
||||
let selected_purchase = this.$store.state.cashier.selected_purchase;
|
||||
let found = selected_purchase.find((el) => el.PurchaseRequestDirectID === item.PurchaseRequestDirectID);
|
||||
if (found) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
removePurchase(item) {
|
||||
let selected_purchase = this.$store.state.cashier.selected_purchase;
|
||||
let found = selected_purchase.find((el) => el.PurchaseRequestDirectID === item.PurchaseRequestDirectID);
|
||||
if (found) {
|
||||
let index = selected_purchase.indexOf(found);
|
||||
selected_purchase.splice(index, 1);
|
||||
}
|
||||
|
||||
let totalRealitation = 0;
|
||||
for (let i = 0; i < selected_purchase.length; i++) {
|
||||
const e = selected_purchase[i];
|
||||
totalRealitation += parseFloat(e.PurchaseRequestDirectTotalRealitation);
|
||||
}
|
||||
let xresume = {
|
||||
"totalRealitation": totalRealitation,
|
||||
};
|
||||
this.$store.commit("cashier/update_resume_total", xresume);
|
||||
},
|
||||
checkErrorForm(val) {
|
||||
let errors = this.$store.state.cashier.errors;
|
||||
if (errors.includes(val)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
closeDiallogCashier() {
|
||||
this.dialogVoucher = false;
|
||||
this.xnote = ""
|
||||
this.url = ""
|
||||
this.filesToUpload = []
|
||||
this.imageName = ''
|
||||
this.imageFile = ''
|
||||
this.imageUrl = ''
|
||||
this.restPrice = 0
|
||||
this.$store.commit("cashier/update_total_akhir", 0);
|
||||
this.$store.commit("cashier/update_errors", []);
|
||||
},
|
||||
saveVoucher() {
|
||||
this.$store.commit("cashier/update_errors", []);
|
||||
var errors = this.$store.state.cashier.errors;
|
||||
if (_.isEmpty(this.selectedBranch)) {
|
||||
errors.push("requireBranch");
|
||||
}
|
||||
if (_.isEmpty(this.selectedAccountDana)) {
|
||||
errors.push("requireAccountDana");
|
||||
}
|
||||
if (_.isEmpty(this.selectedAccountBiaya)) {
|
||||
errors.push("requireAccountBiaya");
|
||||
}
|
||||
if (_.isEmpty(this.selectedAccountTemp)) {
|
||||
errors.push("requireAccountTemp");
|
||||
}
|
||||
if (errors.length === 0) {
|
||||
let prm = {
|
||||
"branch": this.selectedBranch.M_BranchCode,
|
||||
"accountDana": this.selectedAccountDana.coaID,
|
||||
"accountBiaya": this.selectedAccountBiaya.coaID,
|
||||
"accountTemp": this.selectedAccountTemp.coaID,
|
||||
"total": this.$store.state.cashier.resume_total.totalRealitation,
|
||||
"details": this.$store.state.cashier.selected_purchase,
|
||||
};
|
||||
// this.$store.dispatch("cashier/save", prm);
|
||||
}
|
||||
},
|
||||
resetAllInput() {
|
||||
this.xnote = ""
|
||||
this.restPrice = 0
|
||||
this.$store.commit("cashier/update_total_akhir", 0);
|
||||
this.$store.commit("cashier/update_imageRelationPreviews", []);
|
||||
this.$store.commit("cashier/update_imageRelationFiles", []);
|
||||
},
|
||||
updateChasier() {
|
||||
this.$store.commit("cashier/update_errors", []);
|
||||
var errors = this.$store.state.cashier.errors;
|
||||
if (_.isEmpty(this.xnote)) {
|
||||
errors.push("requireNote");
|
||||
}
|
||||
if (errors.length === 0) {
|
||||
var formData = new FormData()
|
||||
|
||||
for( var i = 0; i < this.imageRelationFiles.length; i++ ){
|
||||
let file = this.imageRelationFiles[i]
|
||||
|
||||
formData.append('files[' + i + ']', file)
|
||||
}
|
||||
|
||||
formData.append("token", one_token())
|
||||
formData.append("note", this.xnote)
|
||||
formData.append("restPrice", this.restPrice)
|
||||
formData.append("ID", this.$store.state.cashier.selected_cashier.PaymentVoucherID)
|
||||
|
||||
this.$store.dispatch("cashier/update", formData);
|
||||
}
|
||||
},
|
||||
calculateTotalPrice() {
|
||||
var totalHarga = Object.keys(this.$store.state.cashier.selected_cashier).length > 0 ? this.$store.state.cashier.selected_cashier.PaymentVoucherTotal : 0;
|
||||
if (this.restPrice > 0) {
|
||||
let total = totalHarga - this.restPrice;
|
||||
this.$store.commit("cashier/update_total_akhir", total);
|
||||
}
|
||||
},
|
||||
openRealisedItem() {
|
||||
this.$store.dispatch("cashier/getVoucherDetail")
|
||||
this.$store.commit("cashier/update_dialog_realise_item", true)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
search_branch(val, old) {
|
||||
if (val == old) return;
|
||||
if (!val) return;
|
||||
if (val.length < 1) return;
|
||||
if (this.$store.state.cashier.load_status_branch == 1) return;
|
||||
this.thr_search_branch();
|
||||
},
|
||||
search_accountDana(val, old) {
|
||||
if (val == old) return;
|
||||
if (!val) return;
|
||||
if (val.length < 1) return;
|
||||
if (this.$store.state.cashier.load_status_accDana == 1) return;
|
||||
this.thr_search_accountDana();
|
||||
},
|
||||
search_accountBiaya(val, old) {
|
||||
if (val == old) return;
|
||||
if (!val) return;
|
||||
if (val.length < 1) return;
|
||||
if (this.$store.state.cashier.load_status_accBiaya == 1) return;
|
||||
this.thr_search_accountBiaya();
|
||||
},
|
||||
search_accountTemp(val, old) {
|
||||
if (val == old) return;
|
||||
if (!val) return;
|
||||
if (val.length < 1) return;
|
||||
if (this.$store.state.cashier.load_status_accTemp == 1) return;
|
||||
this.thr_search_accountTemp();
|
||||
},
|
||||
restPrice(val, old) {
|
||||
if (val < 0) {
|
||||
this.$store.commit("cashier/update_restPrice",0);
|
||||
}
|
||||
this.calculateTotalPrice();
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
649
test/vuex/acc-one-cashier-v2/components/dialogFormPay.vue
Normal file
649
test/vuex/acc-one-cashier-v2/components/dialogFormPay.vue
Normal file
@@ -0,0 +1,649 @@
|
||||
<template>
|
||||
<v-layout row justify-center>
|
||||
<v-dialog v-model="dialogVoucherPay" persistent max-width="50vw">
|
||||
<v-card>
|
||||
<v-card-title class="headline grey lighten-2" primary-title>
|
||||
FORM PEMBAYARAN
|
||||
</v-card-title>
|
||||
<v-card-text class="pt-2 pb-0">
|
||||
<v-layout pt-2>
|
||||
<v-flex xs12 pa-2>
|
||||
<span class="font-weight-bold">NOMOR REQUEST:</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row>
|
||||
<v-flex xs12 pa-2>
|
||||
<v-chip label
|
||||
v-for="(item, index) in numberRequest"
|
||||
:key="index"
|
||||
class="ma-1"
|
||||
>
|
||||
{{ item }}
|
||||
</v-chip label>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row>
|
||||
<v-flex xs12 pa-2>
|
||||
<v-textarea
|
||||
filled
|
||||
outline
|
||||
hide-details
|
||||
label="Catatan*"
|
||||
rows="3"
|
||||
v-model="xnotepay"
|
||||
></v-textarea>
|
||||
<p v-if="checkErrorForm('requireNote')" class="error pl-2 pr-2" style="color:#fff">Catatan harus diisi</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout>
|
||||
<v-flex xs12 pa-2>
|
||||
<v-textarea
|
||||
filled
|
||||
outline
|
||||
hide-details
|
||||
label="Deskripsi Request"
|
||||
rows="3"
|
||||
readonly
|
||||
v-model="requestDescription"
|
||||
></v-textarea>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout>
|
||||
<v-flex xs12 pa-2>
|
||||
<v-text-field
|
||||
v-model="this.$store.state.cashier.selected_cashier.user_request"
|
||||
readonly
|
||||
hide-details
|
||||
outline
|
||||
label="Nama Request">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout>
|
||||
<v-flex xs12 pa-2>
|
||||
<v-autocomplete
|
||||
v-model="selected_userReceive"
|
||||
menu-icon="mdi-chevron-down"
|
||||
:items="userReceive"
|
||||
item-text="M_UserUsername"
|
||||
item-value="M_UserID"
|
||||
label="Penerima Uang*"
|
||||
outline
|
||||
hide-details
|
||||
></v-autocomplete>
|
||||
<p v-if="checkErrorForm('requireUserReceive')" class="error pl-2 pr-2" style="color:#fff">Penerima uang belum di pilih</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout>
|
||||
<v-flex xs12 pa-2>
|
||||
<v-text-field
|
||||
prefix="Rp"
|
||||
v-model="formatted_total_price"
|
||||
readonly
|
||||
hide-details
|
||||
outline
|
||||
label="Total Bayar">
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout mr-2 ml-2 style="border:1px solid black" align-center row pa-2 mb-2>
|
||||
<v-flex xs9>
|
||||
<!-- <input type="file" ref="image" accept="image/*" @change="onFilePicked"> -->
|
||||
<input type="file" id="files" ref="files" accept="image/*" multiple v-on:change="onFilePicked()"/>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout v-if="show_progrees_upload" row align-center mr-2 ml-2>
|
||||
<v-flex xs12>
|
||||
|
||||
<v-progress-linear :indeterminate="true"></v-progress-linear>
|
||||
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout v-if="imagePayPreviews.length > 0 && !show_progrees_upload" align-center row wrap>
|
||||
<v-flex
|
||||
v-for="(imgUrl, index) in imagePayPreviews"
|
||||
:key="index"
|
||||
xs6
|
||||
class="pa-2">
|
||||
<v-img :src="imgUrl">
|
||||
<div class="fill-height bottom-gradient"></div>
|
||||
</v-img>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-layout v-if="imagePreviews.length > 0" pt-2>
|
||||
<v-flex xs12 pa-2>
|
||||
<span class="font-weight-bold">BUKTI PEMBAYARAN :</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout v-if="imagePreviews.length > 0" align-center row wrap>
|
||||
<v-flex
|
||||
v-for="(img, index) in imagePreviews"
|
||||
:key="index"
|
||||
xs6
|
||||
class="pa-2"
|
||||
>
|
||||
<v-img :src="img">
|
||||
<div class="fill-height bottom-gradient"></div>
|
||||
</v-img>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error" flat @click="closeDiallogCashier()"> Tutup </v-btn>
|
||||
<v-btn v-if="xact === 'new'" color="primary" dark @click="saveVoucher()">Simpan</v-btn>
|
||||
<v-btn v-if="xact === 'edit'" color="primary" dark @click="updatePay()">Bayar & Simpan</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
name: "DialogFormVoucher",
|
||||
data() {
|
||||
return {
|
||||
url: "",
|
||||
filesToUpload: [],
|
||||
fileName: "", // Untuk menyimpan nama file
|
||||
imageName: "",
|
||||
imageFile: "",
|
||||
imageUrl: "",
|
||||
headers: [
|
||||
{
|
||||
text: "NO",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "no",
|
||||
width: "15%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "DESKRIPSI",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "date",
|
||||
width: "40%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "TOTAL REALISASI",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "supplier",
|
||||
width: "30%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "AKSI",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "status",
|
||||
width: "15%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
formatted_total_price() {
|
||||
var val = Object.keys(this.$store.state.cashier.selected_cashier).length > 0 ? this.$store.state.cashier.selected_cashier.PaymentVoucherTotal : 0;
|
||||
return this.oneMoney(val);
|
||||
},
|
||||
dialogVoucherPay: {
|
||||
get() {
|
||||
return this.$store.state.cashier.dialog_cashier_pay;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_dialog_cashier_pay", val);
|
||||
},
|
||||
},
|
||||
branchList() {
|
||||
return this.$store.state.cashier.branchList;
|
||||
},
|
||||
selectedBranch: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_branch;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_branch", val);
|
||||
this.getPurchaseReq();
|
||||
},
|
||||
},
|
||||
search_branch: {
|
||||
get() {
|
||||
return this.$store.state.cashier.search_branch;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_search_branch", val);
|
||||
},
|
||||
},
|
||||
accountDanaList() {
|
||||
return this.$store.state.cashier.accountDanaList;
|
||||
},
|
||||
selectedAccountDana: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_accountDana;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_accountDana", val);
|
||||
},
|
||||
},
|
||||
search_accountDana: {
|
||||
get() {
|
||||
return this.$store.state.cashier.search_accountDana;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_search_accountDana", val);
|
||||
},
|
||||
},
|
||||
accountBiayaList() {
|
||||
return this.$store.state.cashier.accountBiayaList;
|
||||
},
|
||||
selectedAccountBiaya: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_accountBiaya;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_accountBiaya", val);
|
||||
},
|
||||
},
|
||||
search_accountBiaya: {
|
||||
get() {
|
||||
return this.$store.state.cashier.search_accountBiaya;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_search_accountBiaya", val);
|
||||
},
|
||||
},
|
||||
accountTempList() {
|
||||
return this.$store.state.cashier.accountTempList;
|
||||
},
|
||||
selectedAccountTemp: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_accountTemp;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_accountTemp", val);
|
||||
},
|
||||
},
|
||||
search_accountTemp: {
|
||||
get() {
|
||||
return this.$store.state.cashier.search_accountTemp;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_search_accountTemp", val);
|
||||
},
|
||||
},
|
||||
purchaseList() {
|
||||
return this.$store.state.cashier.purchaseList;
|
||||
},
|
||||
selected_purchase: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_purchase;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_purchase", val);
|
||||
},
|
||||
},
|
||||
resume() {
|
||||
return this.$store.state.cashier.resume_total;
|
||||
},
|
||||
xact: {
|
||||
get() {
|
||||
return this.$store.state.cashier.act;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_act", val);
|
||||
},
|
||||
},
|
||||
show_progrees_upload: {
|
||||
get() {
|
||||
return this.$store.state.cashier.show_progrees_upload
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_show_progrees_upload", val)
|
||||
}
|
||||
},
|
||||
xnotepay: {
|
||||
get() {
|
||||
return this.$store.state.cashier.notepay
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_notepay", val)
|
||||
}
|
||||
},
|
||||
imagePreviews: {
|
||||
get() {
|
||||
return this.$store.state.cashier.imagePreviews
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_imagePreviews", val)
|
||||
}
|
||||
},
|
||||
numberRequest: {
|
||||
get() {
|
||||
return this.$store.state.cashier.numberRequest;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_numberRequest", val);
|
||||
},
|
||||
},
|
||||
requestDescription: {
|
||||
get() {
|
||||
return this.$store.state.cashier.requestDescription;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_requestDescription", val);
|
||||
},
|
||||
},
|
||||
imagePayPreviews: {
|
||||
get() {
|
||||
return this.$store.state.cashier.imagePayPreviews;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_imagePayPreviews", val);
|
||||
},
|
||||
},
|
||||
imagePayFiles: {
|
||||
get() {
|
||||
return this.$store.state.cashier.imagePayFiles;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_imagePayFiles", val);
|
||||
},
|
||||
},
|
||||
selected_userReceive: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_userReceive;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_userReceive", val);
|
||||
},
|
||||
},
|
||||
userReceive() {
|
||||
return this.$store.state.cashier.userReceive;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
roundToThreeSignificantDigits(num) {
|
||||
if (num === 0) return 0;
|
||||
|
||||
// Hitung jumlah digit
|
||||
const absNum = Math.abs(num);
|
||||
const magnitude = Math.floor(Math.log10(absNum)) + 1;
|
||||
|
||||
// Jika kurang dari 3 digit, tidak perlu dibulatkan
|
||||
if (magnitude <= 3) return num;
|
||||
|
||||
// Hitung faktor pembulatan
|
||||
const factor = Math.pow(10, magnitude - 3);
|
||||
|
||||
// Bulatkan
|
||||
return Math.round(num / factor) * factor;
|
||||
},
|
||||
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, ".");
|
||||
}
|
||||
},
|
||||
handleFileUploadsbkp(){
|
||||
// this.files = this.$refs.files.files
|
||||
|
||||
const files = this.$refs.files.files;
|
||||
this.urls = [];
|
||||
this.filesToUpload = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
const url = URL.createObjectURL(file);
|
||||
this.urls.push(url);
|
||||
this.filesToUpload.push(file);
|
||||
}
|
||||
// console.log('urls', this.urls)
|
||||
console.log('filesToUpload', this.filesToUpload)
|
||||
},
|
||||
handleFileUploads(){
|
||||
const file = this.$refs.files.files[0];
|
||||
if (file) {
|
||||
this.fileName = file.name; // Simpan nama file
|
||||
this.filesToUpload = [file]; // Masukkan ke array untuk konsistensi
|
||||
this.url = URL.createObjectURL(file); // Preview jika diperlukan
|
||||
}
|
||||
|
||||
},
|
||||
onFilePicked(){
|
||||
// this.files = this.$refs.files.files
|
||||
|
||||
const files = this.$refs.files.files;
|
||||
this.imagePayPreviews = [];
|
||||
this.imagePayFiles = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
const url = URL.createObjectURL(file);
|
||||
this.imagePayPreviews.push(url);
|
||||
this.imagePayFiles.push(file);
|
||||
}
|
||||
},
|
||||
onFilePickedold(e) {
|
||||
const files = e.target.files
|
||||
console.log('cek files',files[0]);
|
||||
if (files[0] !== undefined) {
|
||||
this.imageName = files[0].name
|
||||
if (this.imageName.lastIndexOf('.') <= 0) {
|
||||
return
|
||||
}
|
||||
const fr = new FileReader()
|
||||
fr.readAsDataURL(files[0])
|
||||
fr.addEventListener('load', () => {
|
||||
this.imageUrl = fr.result
|
||||
this.imageFile = files[0] // this is an image file that can be sent to server...
|
||||
})
|
||||
|
||||
// console.log('imageName', this.imageName)
|
||||
// console.log('imageFile', this.imageFile)
|
||||
// console.log('imageUrl', this.imageUrl)
|
||||
|
||||
} else {
|
||||
this.imageName = ''
|
||||
this.imageFile = ''
|
||||
this.imageUrl = ''
|
||||
}
|
||||
},
|
||||
thr_search_branch: _.debounce(function() {
|
||||
this.$store.dispatch("cashier/searchBranch", this.search_branch);
|
||||
}, 500),
|
||||
thr_search_accountDana: _.debounce(function() {
|
||||
this.$store.dispatch("cashier/searchAccDana", this.search_accountDana);
|
||||
}, 500),
|
||||
thr_search_accountBiaya: _.debounce(function() {
|
||||
this.$store.dispatch("cashier/searchAccBiaya", this.search_accountBiaya);
|
||||
}, 500),
|
||||
thr_search_accountTemp: _.debounce(function() {
|
||||
this.$store.dispatch("cashier/searchAccTemp", this.search_accountTemp);
|
||||
}, 500),
|
||||
getPurchaseReq() {
|
||||
this.$store.dispatch("cashier/getPurchase", this.selectedBranch === undefined ? "" : this.selectedBranch.M_BranchCode);
|
||||
},
|
||||
formatCurrency(val) {
|
||||
// Format the price above to USD using the locale, style, and currency.
|
||||
let price = parseFloat(val);
|
||||
let USDollar = new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
});
|
||||
|
||||
// console.log(
|
||||
// `The formated version of ${price} is ${USDollar.format(price)}`
|
||||
// );
|
||||
return `${USDollar.format(price)}`;
|
||||
},
|
||||
addPurchase(item) {
|
||||
let selected_purchase = this.$store.state.cashier.selected_purchase;
|
||||
selected_purchase.push(item);
|
||||
|
||||
let totalRealitation = 0;
|
||||
for (let i = 0; i < selected_purchase.length; i++) {
|
||||
const e = selected_purchase[i];
|
||||
totalRealitation += parseFloat(e.PurchaseRequestDirectTotalRealitation);
|
||||
}
|
||||
let xresume = {
|
||||
"totalRealitation": totalRealitation,
|
||||
};
|
||||
this.$store.commit("cashier/update_resume_total", xresume);
|
||||
},
|
||||
purchaseExist(item) {
|
||||
let selected_purchase = this.$store.state.cashier.selected_purchase;
|
||||
let found = selected_purchase.find((el) => el.PurchaseRequestDirectID === item.PurchaseRequestDirectID);
|
||||
if (found) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
removePurchase(item) {
|
||||
let selected_purchase = this.$store.state.cashier.selected_purchase;
|
||||
let found = selected_purchase.find((el) => el.PurchaseRequestDirectID === item.PurchaseRequestDirectID);
|
||||
if (found) {
|
||||
let index = selected_purchase.indexOf(found);
|
||||
selected_purchase.splice(index, 1);
|
||||
}
|
||||
|
||||
let totalRealitation = 0;
|
||||
for (let i = 0; i < selected_purchase.length; i++) {
|
||||
const e = selected_purchase[i];
|
||||
totalRealitation += parseFloat(e.PurchaseRequestDirectTotalRealitation);
|
||||
}
|
||||
let xresume = {
|
||||
"totalRealitation": totalRealitation,
|
||||
};
|
||||
this.$store.commit("cashier/update_resume_total", xresume);
|
||||
},
|
||||
checkErrorForm(val) {
|
||||
let errors = this.$store.state.cashier.errors;
|
||||
if (errors.includes(val)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
closeDiallogCashier() {
|
||||
this.dialogVoucherPay = false;
|
||||
this.xnotepay = ""
|
||||
this.url = ""
|
||||
this.filesToUpload = []
|
||||
this.imageName = ''
|
||||
this.imageFile = ''
|
||||
this.imageUrl = ''
|
||||
this.$store.commit("cashier/update_errors", []);
|
||||
this.$store.commit("cashier/update_selected_userReceive",);
|
||||
},
|
||||
saveVoucher() {
|
||||
this.$store.commit("cashier/update_errors", []);
|
||||
var errors = this.$store.state.cashier.errors;
|
||||
if (_.isEmpty(this.selectedBranch)) {
|
||||
errors.push("requireBranch");
|
||||
}
|
||||
if (_.isEmpty(this.selectedAccountDana)) {
|
||||
errors.push("requireAccountDana");
|
||||
}
|
||||
if (_.isEmpty(this.selectedAccountBiaya)) {
|
||||
errors.push("requireAccountBiaya");
|
||||
}
|
||||
if (_.isEmpty(this.selectedAccountTemp)) {
|
||||
errors.push("requireAccountTemp");
|
||||
}
|
||||
if (errors.length === 0) {
|
||||
let prm = {
|
||||
"branch": this.selectedBranch.M_BranchCode,
|
||||
"accountDana": this.selectedAccountDana.coaID,
|
||||
"accountBiaya": this.selectedAccountBiaya.coaID,
|
||||
"accountTemp": this.selectedAccountTemp.coaID,
|
||||
"total": this.$store.state.cashier.resume_total.totalRealitation,
|
||||
"details": this.$store.state.cashier.selected_purchase,
|
||||
};
|
||||
// this.$store.dispatch("cashier/save", prm);
|
||||
}
|
||||
},
|
||||
resetAllInput() {
|
||||
this.xnotepay = ""
|
||||
this.imageName = ''
|
||||
this.imageFile = ''
|
||||
this.imageUrl = ''
|
||||
},
|
||||
updatePay() {
|
||||
this.$store.commit("cashier/update_errors", []);
|
||||
var errors = this.$store.state.cashier.errors;
|
||||
if (_.isEmpty(this.xnotepay)) {
|
||||
errors.push("requireNote");
|
||||
}
|
||||
if (_.isEmpty(this.selected_userReceive)) {
|
||||
errors.push("requireUserReceive");
|
||||
}
|
||||
if (errors.length === 0) {
|
||||
var formData = new FormData()
|
||||
console.log("formData",this.imagePayFiles.length)
|
||||
for( var i = 0; i < this.imagePayFiles.length; i++ ){
|
||||
let file = this.imagePayFiles[i]
|
||||
|
||||
formData.append('files[' + i + ']', file)
|
||||
console.log("formData",formData)
|
||||
}
|
||||
|
||||
formData.append("token", one_token())
|
||||
formData.append("note", this.xnotepay)
|
||||
formData.append("ID", this.$store.state.cashier.selected_cashier.PaymentVoucherID)
|
||||
formData.append("userReceiveID", this.$store.state.cashier.selected_userReceive)
|
||||
|
||||
// let prm = {
|
||||
// "img": this.imageUrl + '/' + this.imageName + '/' + this.imageFile,
|
||||
// "note": this.xnotepay,
|
||||
// "ID": this.$store.state.cashier.selected_cashier.PaymentVoucherID
|
||||
// }
|
||||
|
||||
this.$store.dispatch("cashier/updatepaid", formData);
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
search_branch(val, old) {
|
||||
if (val == old) return;
|
||||
if (!val) return;
|
||||
if (val.length < 1) return;
|
||||
if (this.$store.state.cashier.load_status_branch == 1) return;
|
||||
this.thr_search_branch();
|
||||
},
|
||||
search_accountDana(val, old) {
|
||||
if (val == old) return;
|
||||
if (!val) return;
|
||||
if (val.length < 1) return;
|
||||
if (this.$store.state.cashier.load_status_accDana == 1) return;
|
||||
this.thr_search_accountDana();
|
||||
},
|
||||
search_accountBiaya(val, old) {
|
||||
if (val == old) return;
|
||||
if (!val) return;
|
||||
if (val.length < 1) return;
|
||||
if (this.$store.state.cashier.load_status_accBiaya == 1) return;
|
||||
this.thr_search_accountBiaya();
|
||||
},
|
||||
search_accountTemp(val, old) {
|
||||
if (val == old) return;
|
||||
if (!val) return;
|
||||
if (val.length < 1) return;
|
||||
if (this.$store.state.cashier.load_status_accTemp == 1) return;
|
||||
this.thr_search_accountTemp();
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
392
test/vuex/acc-one-cashier-v2/components/dialogFormRealise.vue
Normal file
392
test/vuex/acc-one-cashier-v2/components/dialogFormRealise.vue
Normal file
@@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog_form_realise" persistent width="50vw">
|
||||
<v-card>
|
||||
<v-card-title class="headline grey lighten-2" primary-title>
|
||||
FORM REALISASI
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 class="mb-2">
|
||||
<v-textarea
|
||||
filled outline hide-details label="Catatan*"
|
||||
rows="3" v-model="xnote"
|
||||
></v-textarea>
|
||||
<p v-show="checkErrorForm('requireNote')" class="error">Catatan harus diisi</p>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs3 class="pr-1">
|
||||
<v-text-field
|
||||
prefix="Rp." v-model="formated_total_price" outline
|
||||
label="Total Bayar" hide-details readonly
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs3 class="px-1">
|
||||
<v-text-field
|
||||
prefix="Rp." v-model="formatted_adj_price" outline
|
||||
readonly hide-details label="Tambahan"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs3 class="px-1">
|
||||
<v-text-field
|
||||
prefix="Rp." v-model="formated_rest_price" outline
|
||||
readonly hide-details label="Harga"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs3 class="pl-1">
|
||||
<v-text-field
|
||||
prefix="Rp." v-model="formated_sisa_price" outline
|
||||
readonly hide-details label="Sisa"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<v-expansion-panel class="mt-4">
|
||||
<v-expansion-panel-content v-for="(item, index) in listing_item_realise" :key="index">
|
||||
<template v-slot:header>
|
||||
<div>{{ item.PurchaseRequestDirectDescription }}</div>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs3 class="pr-1">
|
||||
<p class="mb-0">{{ item.PurchaseRequestDirectNumber }}</p>
|
||||
</v-flex>
|
||||
<v-flex xs3 class="px-1">
|
||||
<p class="mb-0">{{ item.PurchaseRequestDirectDescription }}</p>
|
||||
<p class="mb-0 font-weight-bold" style="color:#000000">
|
||||
Kategori: {{ item.PurchaseDirectCategoryName }}
|
||||
</p>
|
||||
</v-flex>
|
||||
<v-flex xs3>
|
||||
<p class="mb-0">Harga Estimasi: </p>
|
||||
<p class="mb-0">Rp. {{ oneMoney(item.estimate_price) }}</p>
|
||||
</v-flex>
|
||||
<v-flex xs3 class="pl-1">
|
||||
<v-text-field
|
||||
prefix="Rp" v-model="item.realised_price"
|
||||
outline hide-details label="Harga Realisasi"
|
||||
@input="processMoney()"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 style="border:1px solid black" class="pa-2 mt-2">
|
||||
<input
|
||||
type="file" id="files" ref="files"
|
||||
accept="image/*" multiple
|
||||
v-on:change="onFilePicked(item, $event)"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
v-for="(nota) in item.prevNota"
|
||||
xs4 class="pa-2" :key="nota.nota_id"
|
||||
>
|
||||
<div class="image-container">
|
||||
<v-img
|
||||
:src="makeImgUrl(nota)" aspect-ratio="1" contain
|
||||
class="grey lighten-2" @click="viewImage(makeImgUrl(nota))"
|
||||
></v-img>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
v-for="(url, index) in item.attachPreview"
|
||||
xs4 class="pa-2" :key="index"
|
||||
>
|
||||
<div class="image-container">
|
||||
<v-img
|
||||
:src="url" aspect-ratio="1" contain
|
||||
class="grey lighten-2" @click="viewImage(url)"
|
||||
></v-img>
|
||||
<v-icon
|
||||
color="red"
|
||||
class="close-button"
|
||||
@click="removeImage(index, item)"
|
||||
>
|
||||
close
|
||||
</v-icon>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="error" flat outline
|
||||
@click="closeFormRealise()"
|
||||
>Tutup</v-btn>
|
||||
<v-btn
|
||||
color="primary" dark
|
||||
@click="realiseForm()"
|
||||
>Simpan & Realisasi</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.image-container {
|
||||
position: relative;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
store_temp_attach: {},
|
||||
penyesuaian: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialog_form_realise: {
|
||||
get() {
|
||||
return this.$store.state.cashier.dialog_cashier;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_dialog_cashier", val);
|
||||
}
|
||||
},
|
||||
xnote: {
|
||||
get() {
|
||||
return this.$store.state.cashier.note
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_note", val)
|
||||
}
|
||||
},
|
||||
formated_total_price() {
|
||||
const price = this.$store.state.cashier.selected_cashier
|
||||
if (price.PaymentVoucherTotal) {
|
||||
return this.oneMoney(price.PaymentVoucherTotal)
|
||||
}
|
||||
return this.oneMoney(0)
|
||||
},
|
||||
formated_rest_price() {
|
||||
let rest = this.$store.state.cashier.restPrice || 0
|
||||
return this.oneMoney(rest)
|
||||
},
|
||||
formated_sisa_price() {
|
||||
let sisa = this.$store.state.cashier.total_akhir || 0
|
||||
return this.oneMoney(sisa)
|
||||
},
|
||||
formatted_adj_price() {
|
||||
return this.oneMoney(this.calcAdjustmentMoney());
|
||||
},
|
||||
selected_cashier() {
|
||||
return this.$store.state.cashier.selected_cashier;
|
||||
},
|
||||
listing_item_realise: {
|
||||
get() {
|
||||
return this.$store.state.cashier.listing_item_realise
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_listing_item_realise", val);
|
||||
}
|
||||
},
|
||||
detail_voucher() {
|
||||
return this.$store.state.cashier.details;
|
||||
},
|
||||
dialog_error: {
|
||||
get() {
|
||||
return this.$store.state.cashier.alert_error;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_alert_error", val);
|
||||
},
|
||||
},
|
||||
msgError: {
|
||||
get() {
|
||||
return this.$store.state.cashier.error_message;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_error_message", val);
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
roundToThreeSignificantDigits(digit) {
|
||||
const num = parseInt(digit, 10)
|
||||
if (isNaN(num) || num <= 0) {
|
||||
return '00';
|
||||
}
|
||||
|
||||
const scale = 10 ** digit.length;
|
||||
const decimal = num / scale
|
||||
return Math.round(decimal * 100);
|
||||
},
|
||||
oneMoney(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, ".");
|
||||
}
|
||||
},
|
||||
processMoney() {
|
||||
let data = JSON.parse(JSON.stringify(this.listing_item_realise))
|
||||
let realised = 0
|
||||
data.forEach(element => {
|
||||
if (!element.realised_price) {
|
||||
element.realised_price = 0
|
||||
}
|
||||
|
||||
realised = realised + Number(element.realised_price)
|
||||
element.realised_price = Number(element.realised_price)
|
||||
});
|
||||
|
||||
this.listing_item_realise = data
|
||||
|
||||
let adjusment = this.calcAdjustmentMoney();
|
||||
let total = Number(this.selected_cashier.PaymentVoucherTotal) + adjusment
|
||||
let sisa = total - realised
|
||||
|
||||
this.$store.commit("cashier/update_restPrice", realised)
|
||||
this.$store.commit("cashier/update_total_akhir", sisa)
|
||||
},
|
||||
checkErrorForm(val) {
|
||||
let errors = this.$store.state.cashier.errors;
|
||||
if (errors.includes(val)) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
onFilePicked(item, event) {
|
||||
const files = event.target.files;
|
||||
|
||||
if (files.length == 0) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!this.store_temp_attach[item.detail_id]) {
|
||||
this.$set(this.store_temp_attach, item.detail_id, {
|
||||
files: []
|
||||
})
|
||||
}
|
||||
|
||||
for (let index = 0; index < files.length; index++) {
|
||||
const file = files[index];
|
||||
const url = URL.createObjectURL(file);
|
||||
|
||||
this.store_temp_attach[item.detail_id].files.push(file);
|
||||
item.attachFiles.push(file);
|
||||
item.attachPreview.push(url);
|
||||
}
|
||||
event.target.value = null;
|
||||
},
|
||||
removeImage(index, item) {
|
||||
URL.revokeObjectURL(item.attachPreview[index])
|
||||
item.attachPreview.splice(index, 1)
|
||||
item.attachFiles.splice(index, 1)
|
||||
|
||||
// remove that in local
|
||||
const filestore = this.store_temp_attach[item.detail_id];
|
||||
if (filestore && filestore.files.length > index) {
|
||||
filestore.files.splice(index, 1);
|
||||
}
|
||||
},
|
||||
viewImage(url) {
|
||||
this.$store.commit("cashier/update_selected_img_view", url)
|
||||
this.$store.commit("cashier/update_dialog_view_img", true)
|
||||
},
|
||||
makeImgUrl(nota) {
|
||||
const imgbase_url = BASE_URL + "/one-media/cashier/";
|
||||
return imgbase_url + nota.img_url
|
||||
},
|
||||
calcAdjustmentMoney() {
|
||||
const detail = this.detail_voucher
|
||||
const adj_val = detail.reduce((sum, item) => sum + Number(item.PurchaseRequestDirectAdjustment), 0)
|
||||
return adj_val;
|
||||
},
|
||||
closeFormRealise() {
|
||||
this.store_temp_attach = {}
|
||||
this.listing_item_realise = []
|
||||
this.$store.commit("cashier/update_selected_cashier", {})
|
||||
this.dialog_form_realise = false
|
||||
},
|
||||
realiseForm() {
|
||||
let detail = this.detail_voucher
|
||||
const nota_pending = detail.filter(element => element.PurchaseRequestDirectNotaStatus == 'Pending');
|
||||
if (nota_pending.length > 0) {
|
||||
const req_number = nota_pending.map(item => item.PurchaseRequestDirectNumber).join(',');
|
||||
this.dialog_error = true;
|
||||
this.msgError = 'Terdapat nota yang belum di-approve pada ' + req_number;
|
||||
return;
|
||||
}
|
||||
|
||||
const voucher = this.selected_cashier
|
||||
if (voucher.PaymentVoucherRealitationApproved == 'N') {
|
||||
this.dialog_error = true;
|
||||
this.msgError = 'Voucher ini belum di approve realisasi oleh kacab';
|
||||
return;
|
||||
}
|
||||
|
||||
this.$store.commit("cashier/update_errors", []);
|
||||
var errors = this.$store.state.cashier.errors;
|
||||
if (_.isEmpty(this.xnote)) {
|
||||
errors.push('requireNote')
|
||||
}
|
||||
if (errors.length === 0) {
|
||||
var formData = new FormData()
|
||||
|
||||
const dataSerialize = JSON.parse(JSON.stringify(this.listing_item_realise));
|
||||
let allFiles = [];
|
||||
|
||||
let notanotfound = [];
|
||||
dataSerialize.forEach(item => {
|
||||
const detail_id = item.detail_id;
|
||||
const file = this.store_temp_attach[detail_id] ? this.store_temp_attach[detail_id].files : []
|
||||
|
||||
item.fileCount = file.length;
|
||||
allFiles = allFiles.concat(file);
|
||||
|
||||
if (item.attachFiles.length < 1) {
|
||||
if (item.prevNota.length < 1) {
|
||||
notanotfound.push(item.PurchaseRequestDirectDescription);
|
||||
}
|
||||
}
|
||||
|
||||
delete item.attachFiles;
|
||||
delete item.attachPreview;
|
||||
});
|
||||
|
||||
if (notanotfound.length > 0) {
|
||||
const nonota = notanotfound.join(", ");
|
||||
this.dialog_error = true;
|
||||
this.msgError = 'Belum ada nota realisasi pada barang berikut: ' + nonota;
|
||||
return;
|
||||
}
|
||||
|
||||
formData.append("data", JSON.stringify(dataSerialize));
|
||||
allFiles.forEach(file => {
|
||||
formData.append("files[]", file);
|
||||
});
|
||||
|
||||
formData.append("token", one_token())
|
||||
formData.append("note", this.xnote)
|
||||
formData.append("restPrice", this.$store.state.cashier.restPrice)
|
||||
formData.append("ID", this.$store.state.cashier.selected_cashier.PaymentVoucherID)
|
||||
|
||||
this.$store.dispatch("cashier/update", formData);
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
136
test/vuex/acc-one-cashier-v2/components/dialogItemRealize.vue
Normal file
136
test/vuex/acc-one-cashier-v2/components/dialogItemRealize.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog_realise_item" persistent width="40vw">
|
||||
<v-card>
|
||||
<v-card-title class="headline grey lighten-2">ITEM REALISE</v-card-title>
|
||||
<v-card-text>
|
||||
<v-layout row wrap v-for="(item, index) in listing_item_realise" class="mt-2">
|
||||
<v-flex xs3 class="pr-1">
|
||||
<p class="mb-0">{{ item.PurchaseRequestDirectNumber }}</p>
|
||||
</v-flex>
|
||||
<v-flex xs3 class="px-1">
|
||||
<p class="mb-0">{{ item.PurchaseRequestDirectDescription }}</p>
|
||||
<p class="mb-0 font-weight-bold" style="color:#000000">Kategori: {{ item.PurchaseDirectCategoryName }}</p>
|
||||
</v-flex>
|
||||
<v-flex xs3>
|
||||
<p class="mb-0">Harga Estimasi: </p>
|
||||
<p class="mb-0">Rp. {{ oneMoney(item.estimate_price) }}</p>
|
||||
</v-flex>
|
||||
<v-flex xs3 class="pl-1">
|
||||
<v-text-field
|
||||
prefix="Rp" v-model="item.realised_price"
|
||||
outline hide-details label="Harga Realisasi"
|
||||
@input="formatMoney()"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-divider class="mt-2" v-if="index + 1 < listing_item_realise.length" :key="`divider-${index}`"></v-divider>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error" @click="batalAccItem()">BATAL</v-btn>
|
||||
<v-btn color="primary" @click="simpanAccItem()">SIMPAN</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialog_realise_item: {
|
||||
get() {
|
||||
return this.$store.state.cashier.dialog_realise_item
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_dialog_realise_item", val);
|
||||
}
|
||||
},
|
||||
listing_item_realise: {
|
||||
get() {
|
||||
return this.$store.state.cashier.listing_item_realise
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_listing_item_realise", val);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
oneMoney(value) {
|
||||
// First, remove any non-digit characters (like existing dots or commas)
|
||||
// to get a clean number.
|
||||
let cleanValue = String(value).replace(/\D/g, '');
|
||||
|
||||
// Convert the clean value to a number.
|
||||
const num = parseInt(cleanValue, 10);
|
||||
|
||||
// If the result is not a number, return an empty string or '0'.
|
||||
if (isNaN(num)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Use toLocaleString() to format the number with dots as thousand separators.
|
||||
// The 'id-ID' locale is used here for Indonesian Rupiah formatting.
|
||||
return num.toLocaleString('id-ID');
|
||||
},
|
||||
oneMoneyToInt(formattedValue) {
|
||||
if (formattedValue === null || formattedValue === undefined || formattedValue === '') {
|
||||
return 0; // Return 0 for empty or null values
|
||||
}
|
||||
|
||||
// Remove all dots (thousand separators) from the string.
|
||||
// The global flag 'g' is important to replace all occurrences.
|
||||
const cleanString = String(formattedValue).replace(/\./g, '');
|
||||
|
||||
// Convert the clean string to an integer.
|
||||
// The second argument '10' is the radix, ensuring it's parsed as base-10.
|
||||
const intValue = parseInt(cleanString, 10);
|
||||
|
||||
// Check if the result is a valid number.
|
||||
if (isNaN(intValue)) {
|
||||
return 0; // Return 0 if the conversion fails
|
||||
}
|
||||
|
||||
return intValue;
|
||||
},
|
||||
batalAccItem() {
|
||||
this.listing_item_realise = []
|
||||
this.dialog_realise_item = false
|
||||
},
|
||||
simpanAccItem() {
|
||||
let data = JSON.parse(JSON.stringify(this.listing_item_realise))
|
||||
let isEmpty = false
|
||||
data.forEach(element => {
|
||||
if (element.realised_price == '' ) {
|
||||
isEmpty = true
|
||||
} else {
|
||||
element.realised_price = this.oneMoneyToInt(element.realised_price)
|
||||
}
|
||||
});
|
||||
|
||||
if (isEmpty) {
|
||||
return
|
||||
}
|
||||
|
||||
this.$store.dispatch("cashier/saveVoucherDetail", {detail: data});
|
||||
},
|
||||
formatMoney() {
|
||||
let data = this.listing_item_realise
|
||||
data.forEach(element => {
|
||||
element.realised_price = this.oneMoney(element.realised_price)
|
||||
});
|
||||
this.listing_item_realise = data
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
62
test/vuex/acc-one-cashier-v2/components/dialogViewImg.vue
Normal file
62
test/vuex/acc-one-cashier-v2/components/dialogViewImg.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog_view_img" persistent width="50vw">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="red" fab outline @click="dialog_view_img = false">
|
||||
<v-icon color="red">close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-card-text class="dialog-content-scroll">
|
||||
<div class="pa-2">
|
||||
<v-img
|
||||
:src="selected_img_view" 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_view_img = false">
|
||||
Tutup
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.dialog-content-scroll {
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialog_view_img: {
|
||||
get() {
|
||||
return this.$store.state.cashier.dialog_view_img
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_dialog_view_img", val)
|
||||
}
|
||||
},
|
||||
selected_img_view() {
|
||||
return this.$store.state.cashier.selected_img_view
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeViewImg() {
|
||||
this.$store.commit("cashier/update_selected_img_view", '')
|
||||
this.dialog_view_img = false;
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
208
test/vuex/acc-one-cashier-v2/components/listingDetail.vue
Normal file
208
test/vuex/acc-one-cashier-v2/components/listingDetail.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12 fill-height pa-1>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs11>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<div>
|
||||
<span>No : </span>
|
||||
<span>{{
|
||||
selected_cashier.PaymentVoucherNumber
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<div>
|
||||
<span>Sumber Dana : </span>
|
||||
<span>{{
|
||||
selected_cashier.CoaSource
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
|
||||
<!-- <v-flex xs12>
|
||||
<div>
|
||||
<span>Biaya : </span>
|
||||
<span>{{
|
||||
selected_cashier.CoaExpense
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex> -->
|
||||
|
||||
<v-flex xs12>
|
||||
<div>
|
||||
<span>Tampungan Sementara : </span>
|
||||
<span>{{
|
||||
selected_cashier.CoaTemporary
|
||||
}}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<!-- <v-flex xs1>
|
||||
<v-btn
|
||||
color="primary"
|
||||
flat
|
||||
icon
|
||||
@click="openDialogDetail()"
|
||||
>
|
||||
<v-icon>add_box</v-icon>
|
||||
</v-btn>
|
||||
</v-flex> -->
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
<v-flex xs12 pt-2 pb-2>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs12>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="xdetails"
|
||||
:loading="isLoading"
|
||||
hide-actions
|
||||
class="elevation-1"
|
||||
>
|
||||
<template slot="items" slot-scope="props">
|
||||
<td class="text-xs-center pa-2">
|
||||
{{ props.index + 1 }}
|
||||
</td>
|
||||
<td class="text-xs-left pa-2">
|
||||
{{ props.item.M_UserUsername }}
|
||||
</td>
|
||||
<td class="text-xs-left pa-2">
|
||||
{{ props.item.PurchaseRequestDirectNumber }}
|
||||
</td>
|
||||
<td class="text-xs-left pa-2">
|
||||
Rp
|
||||
{{
|
||||
convertMoney(props.item.PaymentVoucherDetailTotal)
|
||||
}}
|
||||
</td>
|
||||
<td class="text-xs-left pa-2">
|
||||
<p v-for="value in splitArray(props.item.account_biaya)" class="mb-0">
|
||||
{{ value == 'notset'? '-' : value }}
|
||||
</p>
|
||||
</td>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.date-type-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.table.v-table tbody td,
|
||||
table.v-table tbody th {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.table.v-table thead tr {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
scroll-padding: 50px 0 0 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
module.exports = {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
headers: [
|
||||
{
|
||||
text: "NO",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "no",
|
||||
width: "10%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "USER REQUEST",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "no",
|
||||
width: "15%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "NO REQUEST",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "request",
|
||||
width: "30%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "TOTAL",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "total",
|
||||
width: "20%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
{
|
||||
text: "ACCOUNT BIAYA",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "total",
|
||||
width: "25%",
|
||||
class: "blue lighten-3 white--text",
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
xdetails() {
|
||||
return this.$store.state.cashier.details;
|
||||
},
|
||||
isLoading() {
|
||||
return this.$store.state.cashier.search_status_detail === 1;
|
||||
},
|
||||
selected_cashier: {
|
||||
get() {
|
||||
return this.$store.state.cashier.selected_cashier;
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("cashier/update_selected_cashier", val);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
convertMoney(money){
|
||||
return one_money(money)
|
||||
},
|
||||
splitArray(data) {
|
||||
const list = data.split(';').map(part => part.trim())
|
||||
return list
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user