Initial import

one-ui/test_x_old/vuex/one-bill-payment/api/bill.js

@@ -0,0 +1,20 @@
+const URL = "/one-api/mockup/billpayment/";
+
+export async function search(prm) {
+    try {
+        var resp = await axios.post(URL + 'bill/search', prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/test_x_old/vuex/one-bill-payment/api/payment.js

@@ -0,0 +1,118 @@
+const URL = "/one-api/mockup/billpayment/";
+
+export async function lookup_type(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_type',{token:token});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function lookup_banks(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_banks',{token:token});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function lookup_accounts(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_accounts',{token:token});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function searchcard(token,prm) {
+    try {
+       var resp = await axios.post(URL + 'payment/searchcard',{token:token,search:prm});
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp.data;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }
+
+export async function pay(prm) {
+    try {
+        var resp = await axios.post(URL + 'payment/pay',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function delete_note(prm) {
+    try {
+        var resp = await axios.post(URL + 'payment/delete_note',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}

one-ui/test_x_old/vuex/one-bill-payment/api/paymentmanual.js

@@ -0,0 +1,175 @@
+const URL = "/one-api/mockup/billpayment/";
+
+export async function lookup_type(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_type',{token:token});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function lookup_banks(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_banks',{token:token});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function lookup_accounts(token) {
+    try {
+        var resp = await axios.post(URL + 'payment/lookup_accounts',{token:token});
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+
+export async function searchcard(token,prm) {
+    try {
+       var resp = await axios.post(URL + 'payment/searchcard',{token:token,search:prm});
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp.data;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }
+
+export async function pay(prm) {
+    try {
+        var resp = await axios.post(URL + 'payment/paymanual',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function delete_note(prm) {
+    try {
+        var resp = await axios.post(URL + 'payment/delete_note',prm);
+        if (resp.status != 200) {
+            return {
+                status: "ERR",
+                message: resp.statusText
+            };
+        }
+        let data = resp.data;
+        return data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        };
+    }
+}
+
+export async function selectpaymenttype(token) {
+    try {
+       var resp = await axios.post(URL + 'payment/selectpaymenttype',{token:token});
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp.data;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }
+
+ export async function selectcard(token) {
+    try {
+       var resp = await axios.post(URL + 'payment/selectbank',{token:token});
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp.data;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }
+
+ export async function selectedc(token) {
+    try {
+       var resp = await axios.post(URL + 'payment/selectaccount',{token:token});
+       if (resp.status != 200) {
+          return {
+             status: "ERR",
+             message: resp.statusText
+          };
+       }
+       let data = resp.data;
+       return data;
+    } catch(e) {
+       return {
+          status: "ERR",
+          message: e.message
+       };
+    }
+ }

one-ui/test_x_old/vuex/one-bill-payment/components/oneBillList.vue

@@ -0,0 +1,372 @@
+<template>
+      <v-layout class="fill-height" column>
+            <v-card class="mb-2 pa-2 searchbox">
+                  <v-layout>
+                        <v-text-field class="xs3 ma-1" label="Kel. Pelanggan" placeholder="Cari..." outline v-model="searchcompany" hide-details></v-text-field>
+
+                        <v-text-field class="xs3 ma-1" label="No. Bayar / No. Tagihan" placeholder="Cari..." outline v-model="searchnamelab" hide-details></v-text-field>
+
+                        <v-select class="xs3 mini-select ma-1" :items="statuses" item-text="name" return-object v-model="status" label="Status" outline
+                              hide-details></v-select>
+                        <span @click="searchPatient" class="icon-medium-fill-base xs1 white--text success iconsearch-search"></span>
+                        <v-btn @click="changeBtnFlagCourier(xisauto)" v-if="xisauto === 'N'" small color="error">
+                              Manual</v-btn>
+                        <v-btn @click="changeBtnFlagCourier(xisauto)" v-if="xisauto === 'Y'" small color="success">
+                              Otomatis</v-btn>
+                  </v-layout>
+            </v-card>
+            <v-card>
+                  <v-layout row>
+                        <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+                              <v-data-table :headers="headers" :items="bills" :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)">{{ props.item.F_BillPaymentDate}}</td>
+                                          <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.F_BillNo}}</td>
+                                          <td class="pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.F_BillPaymentNumber}}</td>
+                                          <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.M_CompanyName}} : {{ props.item.M_MouName}}</td>
+                                          <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ convertMoney(props.item.F_BillTotal)}}</td>
+                                          <td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ convertMoney(props.item.F_BillPaymentAmount)}}</td>
+                                    </template>
+                              </v-data-table>
+                              <v-divider></v-divider>
+                              <v-pagination style="margin-top:10px;margin-bottom:10px" v-model="curr_page" :length="xtotal_page"></v-pagination>
+                        </v-flex>
+                  </v-layout>
+            </v-card>
+            <one-dialog-alert :status="openalertnopay" :msg="msgalertnopay" @forget-dialog-alert="forgetAlertNoPay()" @close-dialog-alert="closeAlertNoPay()"></one-dialog-alert>
+      </v-layout>
+</template>
+
+<style scoped>
+      .searchbox .v-input.v-text-field .v-input__slot {
+            min-height: 40px;
+      }
+
+      .searchbox .v-btn {
+            min-height: 40px;
+      }
+
+      table.v-table tbody td,
+      table.v-table tbody th {
+            height: 40px;
+      }
+
+      table.v-table thead tr {
+            height: 40px;
+      }
+
+      .v-messages {
+            min-height: 0px !important;
+      }
+</style>
+
+<script>
+      module.exports = {
+            components: {
+                  'one-dialog-info': httpVueLoader('../../common/oneDialogInfo.vue'),
+                  'one-dialog-alert': httpVueLoader('../../common/oneDialogAlert.vue')
+            },
+            mounted() {
+
+                  this.$store.dispatch("bill/search", {
+                        company: this.searchcompany,
+                        search: this.searchnamelab,
+                        status: this.status.value,
+                        current_page: 1,
+                        lastidx: 0
+                  })
+
+            },
+            methods: {
+                  formatDate(date) {
+                        if (!date) return null
+
+                        const [year, month, day] = date.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')}`
+                  },
+                  isSelected(p) {
+                        return p.F_BillID == this.$store.state.bill.selected_bill.F_BillID
+                  },
+                  convertMoney(money) {
+                        return one_money(money)
+                  },
+                  searchPatient() {
+                        this.$store.dispatch("bill/search", {
+                              company: this.searchcompany,
+                              search: this.searchnamelab,
+                              status: this.status.value,
+                              current_page: 1,
+                              lastidx: 0
+                        })
+                  },
+                  selectMe(pat) {
+                        if (this.xtotal_page > 0) {
+                              let totpay = this.$store.state.paymentnew.total_payment
+                              if (totpay === 0) {
+                                    let xobj = this.$store.state.paymentnew.types
+                                    console.log(xobj)
+                                    xobj.forEach(function (obj) {
+                                          obj.chex = false
+                                          obj.leftvalue = 0
+                                          obj.rightvalue = 0
+                                          obj.selected_card = {
+                                                id: 0,
+                                                name: ''
+                                          }
+                                          obj.selected_edc = {
+                                                id: 0,
+                                                name: ''
+                                          }
+                                    })
+                                    this.$store.commit("paymentnew/update_types", {
+                                          records: xobj,
+                                          total: xobj.length
+                                    })
+                                    this.$store.commit("bill/update_selected_bill", pat)
+                                    this.$store.commit("paymentnew/update_total_payment", 0)
+                                    this.$store.commit("paymentnew/update_notes", pat.notes)
+                                    this.$store.commit("paymentmanual/update_notes", pat.notes)
+                                    if (pat.flaglunas === 'N') {
+                                          this.$store.commit("paymentmanual/update_tagihans", pat.tagihans)
+                                    } else {
+                                          this.$store.commit("paymentmanual/update_tagihans", '')
+                                    }
+
+                              } else {
+                                    this.$store.commit("bill/update_open_alert_no_pay", true)
+                              }
+                        } else {
+                              let totpay = 0
+                              if (totpay === 0) {
+                                    let xobj = this.$store.state.paymentnew.types
+                                    console.log(xobj)
+                                    xobj.forEach(function (obj) {
+                                          obj.chex = false
+                                          obj.leftvalue = 0
+                                          obj.rightvalue = 0
+                                          obj.selected_card = {
+                                                id: 0,
+                                                name: ''
+                                          }
+                                          obj.selected_edc = {
+                                                id: 0,
+                                                name: ''
+                                          }
+                                    })
+                                    this.$store.commit("paymentnew/update_types", {
+                                          records: '',
+                                          total: 0
+                                    })
+                                    this.$store.commit("bill/update_selected_bill", '')
+                                    this.$store.commit("paymentnew/update_total_payment", 0)
+                                    this.$store.commit("paymentmanual/update_notes", '')
+                                    this.$store.commit("paymentnew/update_notes", '')
+                                    if (pat.flaglunas === 'N') {
+                                          this.$store.commit("paymentmanual/update_tagihans", pat.tagihans)
+                                    } else {
+                                          this.$store.commit("paymentmanual/update_tagihans", '')
+                                    }
+                              } else {
+                                    this.$store.commit("bill/update_open_alert_no_pay", true)
+                              }
+                        }
+
+
+                  },
+                  closeAlertNoPay() {
+                        this.$store.commit("bill/update_open_alert_no_pay", false)
+                  },
+                  forgetAlertNoPay() {
+                        var xval = this.$store.state.paymentnew.types
+                        var valpay = 0
+                        xval.forEach(function (obj) {
+                              obj.chex = false
+                              obj.leftvalue = 0
+                              obj.rightvalue = 0
+                              obj.selected_card = {
+                                    id: 0,
+                                    name: ''
+                              }
+                              obj.selected_edc = {
+                                    id: 0,
+                                    name: ''
+                              }
+                        })
+                        this.$store.commit("paymentnew/update_total_payment", 0)
+                        this.$store.commit("bill/update_open_alert_no_pay", false)
+                  },
+                  changeBtnFlagCourier(value) {
+                        var newval = (value === 'Y') ? 'N' : 'Y'
+                        this.xisauto = newval
+                  },
+                  changeBtnFlagDefaultCourier(value) {
+                        var newval = (value === 'Y') ? 'N' : 'Y'
+                        this.xdisauto = newval
+                  },
+            },
+            computed: {
+                  xstartdate: {
+                        get() {
+                              return this.$store.state.bill.start_date
+                        },
+                        set(val) {
+                              this.$store.commit("bill/update_start_date", val)
+                        }
+                  },
+                  xenddate: {
+                        get() {
+                              return this.$store.state.bill.end_date
+                        },
+                        set(val) {
+                              this.$store.commit("bill/update_end_date", val)
+                        }
+                  },
+                  xisauto: {
+                        get() {
+                              return this.$store.state.bill.isauto
+                        },
+                        set(val) {
+                              this.$store.commit("bill/update_isauto", val)
+                              this.$store.commit("paymentmanual/update_isauto", val)
+                              this.$store.commit("paymentnew/update_isauto", val)
+                        }
+                  },
+                  searchcompany: {
+                        get() {
+                              return this.$store.state.bill.scompany
+                        },
+                        set(val) {
+                              this.$store.commit("bill/update_scompany", val)
+                        }
+                  },
+                  searchnamelab: {
+                        get() {
+                              return this.$store.state.bill.search
+                        },
+                        set(val) {
+                              this.$store.commit("bill/update_search", val)
+                        }
+                  },
+                  statuses() {
+                        return this.$store.state.bill.statuses
+                  },
+                  status: {
+                        get() {
+                              return this.$store.state.bill.selected_status
+                        },
+                        set(val) {
+                              this.$store.commit("bill/update_selected_status", val)
+                        }
+                  },
+                  startDateFormatted() {
+                        return this.formatDate(this.xstartdate)
+                  },
+                  endDateFormatted() {
+                        return this.formatDate(this.xenddate)
+                  },
+                  isLoading() {
+                        return this.$store.state.bill.search_status == 1
+                  },
+                  bills() {
+                        return this.$store.state.bill.bills
+                  },
+                  openalertnopay: {
+                        get() {
+                              return this.$store.state.bill.open_alert_no_pay
+                        },
+                        set(val) {
+                              this.$store.commit("bill/update_open_alert_no_pay", false)
+                        }
+                  },
+                  msgalertnopay() {
+                        return this.$store.state.bill.msg_alert_no_pay
+                  },
+                  curr_page: {
+                        get() {
+                              return this.$store.state.bill.current_page
+                        },
+                        set(val) {
+                              this.$store.commit("bill/update_current_page", val)
+                              this.$store.dispatch("bill/search", {
+                                    company: this.searchcompany,
+                                    search: this.searchnamelab,
+                                    status: this.status.value,
+                                    current_page: val,
+                                    lastidx: 0
+                              })
+                        }
+                  },
+                  xtotal_page: {
+                        get() {
+                              return this.$store.state.bill.total_page
+                        },
+                        set(val) {
+                              this.$store.commit("bill/update_total_page", val)
+                        }
+                  },
+            },
+            data() {
+                  return {
+                        items: [],
+                        menustartdate: false,
+                        menuenddate: false,
+                        headers: [{
+                                    text: "TGL. BAYAR",
+                                    align: "left",
+                                    sortable: false,
+                                    value: "mr",
+                                    width: "15%",
+                                    class: "pa-2 blue lighten-3 white--text"
+                              },
+                              {
+                                    text: "NO. TAGIHAN",
+                                    align: "left",
+                                    sortable: false,
+                                    value: "lab",
+                                    width: "15%",
+                                    class: "pa-2 blue lighten-3 white--text"
+                              },
+                              {
+                                    text: "NO. PEMBAYARAN",
+                                    align: "left",
+                                    sortable: false,
+                                    value: "name",
+                                    width: "20%",
+                                    class: "pa-2 blue lighten-3 white--text"
+                              },
+
+                              {
+                                    text: "KEL.PELANGGAN / AGREEMENT",
+                                    align: "left",
+                                    sortable: false,
+                                    value: "status",
+                                    width: "20%",
+                                    class: "pa-2 blue lighten-3 white--text"
+                              },
+                              {
+                                    text: "TOTAL TAGIHAN",
+                                    align: "left",
+                                    sortable: false,
+                                    value: "status",
+                                    width: "10%",
+                                    class: "pa-2 blue lighten-3 white--text"
+                              },
+                              {
+                                    text: "TOTAL BAYAR",
+                                    align: "left",
+                                    sortable: false,
+                                    value: "status",
+                                    width: "10%",
+                                    class: "pa-2 blue lighten-3 white--text"
+                              }
+                        ],
+                  }
+            }
+      }
+</script>

one-ui/test_x_old/vuex/one-bill-payment/components/oneBillPaymentAuto.vue

@@ -0,0 +1,782 @@
+<template>
+    <v-layout column pb-2 v-if="this.xisauto === 'Y'">
+        <v-card class="mb-2" color="white">
+            <v-layout row wrap>
+                <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
+                    <table>
+                        <tr>
+                            <th class="text-md-center pt-2 pb-2">NO. PEMBAYARAN</th>
+                            <th class="text-md-center pt-2 pb-2"> TIPE PEMBAYARAN </th>
+                            <th class="text-md-center pt-2 pb-2">JUMLAH</th>
+                            <th class="text-md-center pt-2 pb-2">USER</th>
+                            <th class="text-md-center pt-2 pb-2">AKSI</th>
+                        </tr>
+                        <tr class="mini-input" v-if="notes.length > 0" v-for="(note,index) in notes">
+                            <td width="30%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" style="text-align:center;vertical-align:center;"
+                                align="center">{{note.note_number}}</td>
+                            <td width="30%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-center pl-3 pr-3">{{note.paymenttypes_name}}</td>
+                            <td width="15%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-right pl-3 pr-3">{{convertMoney(note.note_amount)}}</td>
+                            <td width="20%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-center pr-2">{{note.note_user}}</td>
+                            <td class="text-md-center">
+                                <span @click="printNote(note,index)" class="icon-medium-fill-base xs1 white--text grey darken-1 icon-print"></span>
+                                <!--<v-btn small  @click="printNote(note,index)" color="primary" dark>
+                                    Print
+                                </v-btn>
+
+                                <v-btn small  @click="deleteNote(note,index)" v-if="note.note_active === 'Y'" color="error" dark>
+                                    Hapus
+                                </v-btn>-->
+
+                            </td>
+                        </tr>
+                        <tr class="mini-input" v-if="notes.length ===  0">
+                            <td colspan="5" class="text-md-center pr-2">
+                                Tidak ada data
+                            </td>
+                        </tr>
+                    </table>
+            </v-layout>
+            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            <v-layout row mt-1 mb-1 pl-2 pr-2>
+            </v-layout>
+            </v-flex>
+        </v-card>
+        <v-card>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                            <div class="label-tagihan text-xs-left">Total Tagihan</div>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout pt-1 row>
+                        <v-flex xs9>
+                            <!--<div class="text-xs-left warning--text">Minimun DP ({{xmindp_percent}}%)</div>-->
+                        </v-flex>
+                        <v-flex xs3>
+                            <!--<div class="text-xs-right warning--text">{{convertMoney(xmindp_amount)}}</div>-->
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{convertMoney(restbill)}}</kbd></div>
+                </v-flex>
+            </v-layout>
+            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            <div v-for="(type, index) in types">
+                <v-layout row pt-2 pb-1 pl-2 align-center wrap>
+                    <v-flex xs12>
+                        <v-switch v-model="type.chex" @change="updateChx(type,index)" :label="type.chexlabel"></v-switch>
+                    </v-flex>
+                </v-layout>
+                <v-layout pl-2 row align-center wrap>
+                    <v-flex xs4 class="pa-1">
+                        <!--<input type="text" @change="updateTotal()" :class="{ 'disabled-background':type.chex === false }" :disabled="!type.chex"  v-model="type.leftvalue" class="input-plain text-xs-right font-weight-bold"/>-->
+                        <v-text-field label="Jumlah" :disabled="!type.chex" v-model="type.leftvalue" @change="updateTotal()" class="amount-right"
+                            reverse outline></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'CASH' || type.code === 'VOUCHER'" class="pa-1">
+                        <v-text-field v-if="type.code === 'CASH'" label="Kembali" :disabled="!type.chex" v-model="type.rightvalue" class="amount-right"
+                            reverse @change="updateTotal()" outline></v-text-field>
+                        <v-text-field v-if="type.code === 'VOUCHER'" label="Kode Voucher" :disabled="!type.chex" v-model="type.rightvalue" class="amount-right"
+                            outline></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'DEBIT' || type.code === 'CREDIT' || type.code === 'TRANSFER'" class="pa-1">
+                        <v-autocomplete v-if="type.code !== 'TRANSFER'" label="Kartu" v-model="type.selected_card" @change="changeCard('card',type.selected_card,index)"
+                            :disabled="!type.chex" :items="banks" auto-select-first no-filter outline item-text="name" item-value="id"
+                            return-object no-data-text="">
+                        </v-autocomplete>
+                        <v-autocomplete v-if="type.code === 'TRANSFER'" label="Nomor Rekening" v-model="type.selected_account" @change="changeCard('account',type.selected_account,index)"
+                            :disabled="!type.chex" :items="accounts" auto-select-first outline no-filter item-text="name" item-value="id"
+                            return-object no-data-text="">
+                        </v-autocomplete>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'DEBIT' || type.code === 'CREDIT'" class="pa-1">
+                        <v-autocomplete label="EDC" v-model="type.selected_edc" @change="changeCard('edc',type.selected_card,index)" :disabled="!type.chex"
+                            :items="accounts" auto-select-first outline no-filter item-text="name" item-value="id" return-object
+                            no-data-text="">
+                        </v-autocomplete>
+                    </v-flex>
+                </v-layout>
+                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            </div>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <div class="label-tagihan text-xs-left">
+                        <v-btn v-if="xdisable_btn_pay === 'N'" @click="pay()" color="warning" dark>
+                            Bayar
+                        </v-btn>
+                    </div>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{convertMoney(totpay)}}</kbd></div>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+
+
+        <template>
+            <v-dialog v-model="xdialogpaysuccess" max-width="30%" persistent>
+                <v-card>
+                    <v-card-title class="headline success pt-2 pb-2" primary-title>
+                        <h4 style="color:#FFEBEE">Pembayaran Berhasil</h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgpaysuccess" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn flat @click="doPrint()">
+                            Print
+                        </v-btn>
+                        <v-btn color="error" flat @click="closeDialogPaySuccess(false)">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <template>
+
+            <v-dialog v-model="xdialogdelete" persistent max-width="30%">
+                <v-card>
+                    <v-card-title :class="{ 'red':!_.isEmpty(xnotadelete), 'success':_.isEmpty(xnotadelete) }" class="headline darken-1 pt-2 pb-2"
+                        primary-title>
+                        <h4 style="color:#FFEBEE">
+                            <span v-if="!_.isEmpty(xnotadelete)">Peringatan !</span>
+                            <span v-if="_.isEmpty(xnotadelete)">Berhasil !</span>
+                        </h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgdelete" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                        <v-layout v-if="!_.isEmpty(xnotadelete)" row>
+                                            <v-flex pt-2 pr-2 xs12>
+                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" placeholder="Catatan (*Wajib diisi)" v-model="xnotedelete"
+                                                    class="input-plain" />
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" v-if="!_.isEmpty(xnotadelete) && xnotedelete " flat @click="doDeleteNote()">
+                            Yakin dong !
+                        </v-btn>
+
+                        <v-btn v-if="!_.isEmpty(xnotadelete)" color="primary" flat @click="xdialogdelete = false">
+                            Tutup
+                        </v-btn>
+                        <v-btn v-if="_.isEmpty(xnotadelete)" color="primary" flat @click="closeDialogDelete()">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+
+        </template>
+        <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprintnote" :urlprint="urlprintnote"
+            @close-dialog-print="openprintnote = false"></one-dialog-print>
+    </v-layout>
+</template>
+<style scoped>
+    .rTable {
+        display: table;
+        width: 100%;
+        border-spacing: 0 .2em;
+    }
+
+    .rTableGroup {
+        display: table-row-group;
+    }
+
+    .rTableRow {
+        display: table-row;
+        font-size: 14px;
+        -webkit-flex-wrap: wrap;
+        /* Safari 6.1+ */
+        flex-wrap: wrap;
+
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        background-color: #fffff;
+    }
+
+    .rTableCell {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        line-height: 2;
+        border: 1px solid #2196f3;
+        background-color: #fffff;
+        border-spacing: 5px;
+    }
+
+    .rTableHead {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 10px;
+        padding-bottom: 0px;
+        background-color: #fffff;
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+
+    .rTableFoot {
+        display: table-footer-group;
+        font-weight: bold;
+        background-color: #ddd;
+    }
+
+    .rTableBody {
+        display: table-row-group;
+    }
+
+    .rfirstCell {
+        border-left: 10px solid #2196f3;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+    }
+
+    .caption {
+        border: 1px solid grey;
+        caption-side: bottom;
+        display: table-caption;
+        text-align: center;
+        padding: 5px
+    }
+
+    .label-tagihan {
+        text-align: left;
+        font-size: 25px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-header {
+        text-align: left;
+        font-size: 18px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-title {
+        text-align: left;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .amount-right {
+        text-align: right !important;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .text-tagihan {
+        text-align: left;
+        font-size: 42px;
+        font-family: open sans, tahoma, sans-serif;
+    }
+
+    .disabled-background {
+        background: #b7b7b7;
+    }
+
+    .input-cash {
+        width: 100%;
+        padding: 8px 14px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 22px;
+        font-weight: 700;
+        text-align: right;
+    }
+
+    .input-plain {
+        width: 100%;
+        padding: 4px 8px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 14px;
+    }
+
+    .v-input,
+    .v-input__slot,
+    .v-messages {
+        margin: 0px;
+        padding: 0px;
+        min-height: 0px;
+    }
+
+    .v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
+        margin-bottom: 0px;
+    }
+
+    table {
+        font-family: arial, sans-serif;
+        border-collapse: collapse;
+        width: 100%;
+        background: white;
+        border: 0px;
+    }
+
+    th,
+    td {
+        border: 1px solid black;
+        border-collapse: collapse;
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+
+    table>tr>td {
+        padding: 8px;
+    }
+
+    table>tr>td:first {
+        padding-left: 15px !important;
+    }
+
+    .mini-input .v-input {
+        margin-top: 0px;
+    }
+
+    .mini-input .v-input,
+    .mini-input .v-input--selection-controls,
+    .mini-input .v-input__slot {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        margin-left: 3px;
+    }
+
+    .mini-input .v-messages {
+        min-height: 0px;
+    }
+
+    .border-bottom-dashed {
+        border-bottom: 1px dashed rgba(0, 0, 0, .12);
+    }
+</style>
+<script>
+    module.exports = {
+        components: {
+            'one-field-verification': httpVueLoader('../../common/oneFieldVerificationSupply.vue'),
+            'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
+        },
+        data() {
+            return {
+                checkbox: true,
+                radioGroup: 1,
+                switchCash: true,
+                switchDebit: false,
+                switchKredit: false,
+                dialog: false,
+                urlprintnote: '',
+                printtitle: '',
+                printwidth: '60%',
+                search_card: '',
+                search_edc: '',
+                isLoading: false,
+                fajrihidebtnpay: 'Y'
+            }
+        },
+        mounted() {
+            this.$store.dispatch("paymentnew/lookup_type")
+            this.$store.dispatch("paymentnew/lookup_banks")
+            this.$store.dispatch("paymentnew/lookup_accounts")
+        },
+        computed: {
+            cards() {
+                return this.$store.state.paymentnew.cards
+            },
+            banks() {
+                return this.$store.state.paymentnew.banks
+            },
+            accounts() {
+                return this.$store.state.paymentnew.accounts
+            },
+            xmindp_percent() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_percent
+                } else {
+                    return 0
+                }
+            },
+            xmindp_amount() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_amount
+                } else {
+                    return 0
+                }
+            },
+            notes() {
+                return this.$store.state.paymentnew.notes
+
+            },
+            xordertests() {
+                return this.$store.state.paymentnew.ordertests
+            },
+            xdialogpaysuccess() {
+                return this.$store.state.paymentnew.dialog_pay_success
+            },
+            xmsgpaysuccess() {
+                return this.$store.state.paymentnew.paynumber
+            },
+            types() {
+                return this.$store.state.paymentnew.types
+            },
+            totpay() {
+                return this.$store.state.paymentnew.total_payment
+            },
+            restbill() {
+                if (this.$store.state.bill.bills) {
+                    return this.$store.state.bill.selected_bill.unpaid
+                } else {
+                    return 0
+                }
+
+            },
+            xdialogdelete: {
+                get() {
+                    return this.$store.state.paymentnew.dialog_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_dialog_delete", val)
+                }
+            },
+            xmsgdelete() {
+                return this.$store.state.paymentnew.msg_delete
+            },
+            xnotadelete() {
+                return this.$store.state.paymentnew.nota_delete
+            },
+            xnotedelete: {
+                get() {
+                    return this.$store.state.paymentnew.note_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_note_delete", val)
+                }
+            },
+            openprintnote: {
+                get() {
+                    return this.$store.state.paymentnew.open_print_note
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_open_print_note", false)
+                }
+            },
+            selectedbill() {
+                return this.$store.state.bill.selected_bill
+            },
+            xdisable_btn_pay: {
+                get() {
+                    return this.$store.state.paymentnew.disable_btn_pay
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_disable_btn_pay", val)
+                }
+            },
+            xisauto: {
+                get() {
+                    return this.$store.state.paymentnew.isauto
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_isauto", val)
+                }
+            },
+
+        },
+        methods: {
+            changeCard(type, value, idx) {
+                var types = this.$store.state.paymentnew.types
+                if (type === 'card')
+                    types[idx].selected_card = value
+
+                if (type === 'edc')
+                    types[idx].selected_edc = value
+
+                if (type === 'account')
+                    types[idx].selected_account = value
+
+                this.updateTotal()
+            },
+            colorbginp(value) {
+                if (value.chex === false) {
+                    return 'grey'
+                } else {
+                    return 'white'
+                }
+            },
+            showDetail(idx) {
+                var arrOrders = this.$store.state.paymentnew.notes
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentnew/update_ordertests", arrOrders)
+            },
+            hideDetail(idx) {
+                var arrOrders = this.$store.state.paymentnew.notes
+
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentnew/update_ordertests", arrOrders)
+            },
+            convertMoney(money) {
+                return one_money(money)
+            },
+            closeDialogPaySuccess() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.F_BillID === this.$store.state.bill.selected_bill
+                    .F_BillID)
+                this.$store.commit("paymentnew/update_dialog_pay_success", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                console.log(this.$store.state.paymentnew.types)
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.start_date,
+                    enddate: this.$store.state.bill.end_date,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    current_page: this.$store.state.bill.current_page,
+                    lastidx: idx
+                })
+            },
+            updateTotal() {
+                /*var x = this.xdisable_btn_pay === 'N'?'Y':'N'
+                this.xdisable_btn_pay = x
+                console.log(this.xdisable_btn_pay)*/
+                var xval = this.$store.state.paymentnew.types
+                let xcash = _.filter(xval, {
+                    code: 'CASH'
+                })
+                let xother = _.filter(xval, type => type.code !== 'CASH')
+                var valother = 0
+                xother.forEach(function (obj) {
+                    valother += parseInt(obj.leftvalue)
+                })
+                //console.log('val other '+valother)
+                let restother = this.restbill - valother
+
+                let xchange = parseInt(xcash[0].leftvalue) - restother
+                xcash[0].rightvalue = Math.max(0, xchange)
+                let idxcash = _.findIndex(xval, item => item.code === 'CASH')
+                xval[idxcash] = xcash[0]
+                this.$store.commit("paymentnew/update_types", {
+                    records: xval,
+                    total: xval.length
+                })
+                let totpaid = valother + (parseInt(xcash[0].leftvalue) - Math.max(0, xchange))
+                this.$store.commit("paymentnew/update_total_payment", totpaid)
+
+                this.xdisable_btn_pay = 'Y'
+                var payments = this.$store.state.paymentnew.types
+                let selected_payments = _.filter(payments, {
+                    chex: true
+                })
+                //console.log(this.xdisable_btn_pay)
+                var xxx = 'Y'
+                selected_payments.forEach(function (obj) {
+                    if (parseInt(obj.leftvalue) !== 0)
+                        xxx = 'N'
+
+                    if ((obj.code === 'DEBIT' && parseInt(obj.selected_card.id) !== 0) || (obj.code ===
+                            'DEBIT' && parseInt(obj.selected_edc.id) !== 0))
+                        xxx = 'N'
+
+                    if ((obj.code === 'CREDIT' && parseInt(obj.selected_card.id) !== 0) || (obj.code ===
+                            'CREDIT' && parseInt(obj.selected_edc.id) !== 0))
+                        xxx = 'N'
+
+                })
+                this.xdisable_btn_pay = xxx
+                //console.log('after '+this.xdisable_btn_pay)
+            },
+            pay() {
+                var xval = this.$store.state.paymentnew.types
+                var valpay = 0
+                let xcash = _.filter(xval, {
+                    code: 'CASH'
+                })
+                xval.forEach(function (obj) {
+                    valpay += parseInt(obj.leftvalue)
+                })
+                let prm = {
+                    orderid: this.$store.state.bill.selected_bill.F_BillID,
+                    payments: this.$store.state.paymentnew.types
+                }
+                this.$store.dispatch("paymentnew/pay", prm)
+            },
+            deleteNote(note, idx) {
+                this.$store.commit("paymentnew/update_note_delete", "")
+                this.$store.commit("paymentnew/update_nota_delete", note)
+                let xmsg = "Yakin , mau hapus nota nomor <span style='color:red'>" + note.note_number + "</span> ?"
+                this.$store.commit("paymentnew/update_msg_delete", xmsg)
+                this.$store.commit("paymentnew/update_dialog_delete", true)
+            },
+            doDeleteNote() {
+                let prm = {
+                    catatan: this.$store.state.paymentnew.note_delete,
+                    nota: this.$store.state.paymentnew.nota_delete
+                }
+                this.$store.dispatch("paymentnew/delete_note", prm)
+            },
+            closeDialogDelete() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.F_BillID === this.$store.state.bill.selected_bill
+                    .F_BillID)
+                this.$store.commit("paymentnew/update_dialog_delete", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.start_date,
+                    enddate: this.$store.state.bill.end_date,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    lastidx: idx
+                })
+            },
+            updateChx(val, idx) {
+                //this.check_disable_btn_status()
+                var selpat = this.$store.state.bill.selected_bill
+                var firstamount = selpat.unpaid
+                //console.log(selpat)
+                let xobj = this.$store.state.paymentnew.types
+                xobj[idx].leftvalue = 0
+                xobj[idx].rightvalue = 0
+                if ((xobj[idx].code === 'DEBIT' || xobj[idx].code === 'CREDIT' || xobj[idx].code === 'TRANSFER') &&
+                    val.chex === false) {
+                    xobj[idx].selected_card = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_edc = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_account = {
+                        id: 0,
+                        name: ''
+                    }
+                }
+                var selected_payments = _.filter(xobj, function (o) {
+                    return o.chex
+                })
+                if (selected_payments.length === 1) {
+                    xobj.forEach(function (obj, index) {
+                        if (obj.code === selected_payments[0].code) {
+                            xobj[index].leftvalue = firstamount
+                        }
+                    })
+                }
+                this.$store.commit("paymentnew/update_types", {
+                    records: xobj,
+                    total: xobj.length
+                })
+
+
+                this.updateTotal()
+            },
+            check_disable_btn_status() {
+                this.xdisable_btn_pay = 'N'
+                var payments = this.$store.state.paymentnew.types
+                let selected_payments = _.filter(payments, {
+                    chex: true
+                })
+                console.log(this.xdisable_btn_pay)
+                selected_payments.forEach(function (obj) {
+                    if (obj.leftvalue === 0) {
+                        this.xdisable_btn_pay = 'Y'
+                    }
+                    if (obj.code === 'DEBIT' || obj.code === 'CREDIT' || obj.code === 'TRANSFER') {
+                        console.log(obj)
+                        if (obj.selected_card.id === '0' || obj.selected_card.id === 0 || obj.selected_edc.id ===
+                            '0' || obj.selected_edc.id === 0 || obj.selected_account.id === '0' || obj.selected_account
+                            .id === 0) {
+                            this.xdisable_btn_pay = 'Y'
+                            console.log('oye')
+                            console.log(this.xdisable_btn_pay)
+                        }
+                    }
+                })
+            },
+            printNote(val, idx) {
+                this.printwidth = 600
+                this.printtitle = ""
+                let user = one_user()
+                var rpt = 'rpt_t_010'
+                if (val.note_amount < 0)
+                    rpt = 'rpt_t_010'
+                this.urlprintnote = "/birt/run?__report=report/one/fo/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + val.note_id
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            doPrint() {
+                this.printtitle = ""
+                this.closeDialogPaySuccess()
+                let user = one_user()
+                let payments = this.$store.state.paymentnew.last_payments
+                let xcash = _.filter(payments, {
+                    code: 'CASH'
+                })
+                var rpt = 'rpt_t_010'
+                if (xcash[0].leftvalue < 0)
+                    rpt = 'rpt_t_010'
+                this.urlprintnote = "/birt/run?__report=report/one/fo/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + this.$store.state.paymentnew.idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            printKw() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.F_BillID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/fo/rpt_t_002.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            printInvoice() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.F_BillID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/fo/rpt_t_001.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            }
+        }
+    }
+</script>

one-ui/test_x_old/vuex/one-bill-payment/components/oneBillPaymentManual.vue

@@ -0,0 +1,988 @@
+<template>
+    <v-layout column pb-2 v-if="this.xisauto === 'N'">
+        <v-card class="mb-2" color="white">
+            <v-layout row wrap>
+                <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
+                    <table>
+                        <tr>
+                            <th class="text-md-center pt-2 pb-2">NO. PEMBAYARAN</th>
+                            <th class="text-md-center pt-2 pb-2"> TIPE PEMBAYARAN </th>
+                            <th class="text-md-center pt-2 pb-2">JUMLAH</th>
+                            <th class="text-md-center pt-2 pb-2">USER</th>
+                            <th class="text-md-center pt-2 pb-2">AKSI</th>
+                        </tr>
+                        <tr class="mini-input" v-if="notes.length > 0" v-for="(note,index) in notes">
+                            <td width="30%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" style="text-align:center;vertical-align:center;"
+                                align="center">{{note.note_number}}</td>
+                            <td width="30%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-center pl-3 pr-3">{{note.paymenttypes_name}}</td>
+                            <td width="15%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-right pl-3 pr-3">{{convertMoney(note.note_amount)}}</td>
+                            <td width="20%" v-bind:class="{ 'red--text':note.note_active === 'N','primary--text':note.note_amount < 0}" class="text-md-center pr-2">{{note.note_user}}</td>
+                            <td class="text-md-center">
+                                <span @click="printNote(note,index)" class="icon-medium-fill-base xs1 white--text grey darken-1 icon-print"></span>
+                                <!--<v-btn small  @click="printNote(note,index)" color="primary" dark>
+                                    Print
+                                </v-btn>
+
+                                <v-btn small  @click="deleteNote(note,index)" v-if="note.note_active === 'Y'" color="error" dark>
+                                    Hapus
+                                </v-btn>-->
+
+                            </td>
+                        </tr>
+                        <tr class="mini-input" v-if="notes.length ===  0">
+                            <td colspan="5" class="text-md-center pr-2">
+                                Tidak ada data
+                            </td>
+                        </tr>
+                    </table>
+            </v-layout>
+            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            <v-layout row mt-1 mb-1 pl-2 pr-2>
+            </v-layout>
+            </v-flex>
+        </v-card>
+        <v-card>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                            <div class="label-tagihan text-xs-left">Total Tagihan</div>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{convertMoney(restbill)}}</kbd></div>
+                </v-flex>
+            </v-layout>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs6 text-md-right>
+                    <v-btn color="warning" v-if="this.totpay > 0" dark class="white--text ma-1" @click="pay()">
+                        Bayar
+                        <v-icon right dark></v-icon>
+                    </v-btn>
+                </v-flex>
+            </v-layout>
+            <v-layout row pa-2 align-left wrap>
+                <v-flex xs12>
+                    <v-layout row>
+                        <v-flex xs4 pa-1>
+                            <v-text-field :readonly="this.totpay !== 0" class="amount-right" label="Jumlah Bayar" v-model="xbayar" @change="changeBayar()" outline></v-text-field>
+                        </v-flex>
+                        <v-flex xs4 pa-1>
+                        </v-flex>
+                        <v-flex xs4 pa-1>
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-layout row pa-2 align-left wrap>
+                    <v-flex xs12>
+                        <v-layout row>
+                            <v-flex xs4 pa-1>
+                                <v-select item-text="M_PaymentTypeName" return-object :items="xpaymenttypes" v-model="xpaymenttype" label="" outline></v-select>
+                            </v-flex>
+                            <v-flex xs4 pa-1>
+                                <v-select v-if="this.xpaymenttype.M_PaymentTypeName === 'Debit' || this.xpaymenttype.M_PaymentTypeName === 'Credit'" item-text="Nat_BankName"
+                                    return-object :items="xcards" v-model="xcard" placeholder="Kartu" outline></v-select>
+                                <v-select v-if="this.xpaymenttype.M_PaymentTypeName === 'Transfer'" item-text="M_BankAccountName" return-object :items="xaccounts"
+                                    v-model="xaccount" placeholder="No. Rekening" outline></v-select>
+                                <v-text-field v-if="this.xpaymenttype.M_PaymentTypeName === 'Voucher'" placeholder="Kode Voucher" v-model="xvoucher" outline></v-text-field>
+                            </v-flex>
+                            <v-flex xs4 pa-1>
+                                <v-select v-if="this.xpaymenttype.M_PaymentTypeName === 'Debit' || this.xpaymenttype.M_PaymentTypeName === 'Credit'" item-text="M_BankAccountName"
+                                    return-object :items="xedcs" v-model="xedc" placeholder="EDC" outline></v-select>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout>
+                <v-layout row>
+                    <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
+                        <table>
+                            <tr class="mini-input">
+                                <th class="text-md-center pt-2 pb-2"><v-checkbox style="padding-top:0;margin-top:0" color="blue lighten-3" hide-details @change="changeCbxAll(bar_chx_all)" v-model="bar_chx_all"></v-checkbox></th>
+                                <th class="text-md-center pt-2 pb-2">NO. REG</th>
+                                <th class="text-md-center pt-2 pb-2">JATUH TEMPO</th>
+                                <th class="text-md-center pt-2 pb-2">JUMLAH TAGIHAN</th>
+                                <th class="text-md-center pt-2 pb-2">SISA TAGIHAN</th>
+                                <th class="text-md-center pt-2 pb-2">BAYAR</th>
+                            </tr>
+                            <tr class="mini-input" v-if="tagihans.length > 0" v-for="(tagihan,index) in tagihans">
+                                <td style="width:3%" class="text-xs-center">
+                                    <v-checkbox style="padding-top:0;margin-top:0" color="blue lighten-3" hide-details v-model="tagihan.chex" @change="checkTop(tagihan)"></v-checkbox>
+                                </td>
+                                <td width="20%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" style="text-align:center;vertical-align:center;"
+                                    align="center">{{tagihan.tagihan_number}}</td>
+                                <td width="20%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-center pl-3 pr-3">{{tagihan.tagihan_duedate}}</td>
+                                <td width="15%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-right pl-3 pr-3">{{convertMoney(tagihan.tagihan_total)}}</td>
+                                <td width="15%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-center pr-2">{{convertMoney(tagihan.tagihan_tagihan)}}</td>
+                                <td width="15%" v-bind:class="{ 'red--text':tagihan.tagihan_active === 'N','primary--text':tagihan.tagihan_bayar < 0}" class="text-md-center pr-2">
+                                    <v-text-field style="margin-center:0;padidng-center:0" v-model="tagihan.tagihan_bayar" hide-details></v-text-field>
+                                </td>
+                            </tr>
+                            <tr class="mini-input" v-if="tagihans.length ===  0">
+                                <td colspan="6" class="text-md-center pr-2">
+                                    Tidak ada data
+                                </td>
+                            </tr>
+                        </table>
+                    </v-flex>
+                </v-layout>
+                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+                <div>
+                    <v-layout pl-2 row align-center wrap>
+                        <v-flex xs4 class="pa-1">
+                        </v-flex>
+                        <v-flex xs4 class="pa-1">
+                        </v-flex>
+                    </v-layout>
+                    <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+                </div>
+                <v-layout row pa-2 align-center wrap>
+                    <v-flex xs6>
+                        <div class="label-tagihan text-xs-left">
+                        </div>
+                    </v-flex>
+                    <v-flex xs6>
+                        <div class="text-tagihan text-xs-right"><kbd>{{convertMoney(totpay)}}</kbd></div>
+                    </v-flex>
+                </v-layout>
+        </v-card>
+
+
+
+        <template>
+            <v-dialog v-model="xdialogpaysuccess" max-width="30%" persistent>
+                <v-card>
+                    <v-card-title class="headline success pt-2 pb-2" primary-title>
+                        <h4 style="color:#FFEBEE">Pembayaran Berhasil</h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgpaysuccess" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn flat @click="doPrint()">
+                            Print
+                        </v-btn>
+                        <v-btn color="error" flat @click="closeDialogPaySuccess(false)">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <template>
+
+            <v-dialog v-model="xdialogdelete" persistent max-width="30%">
+                <v-card>
+                    <v-card-title :class="{ 'red':!_.isEmpty(xnotadelete), 'success':_.isEmpty(xnotadelete) }" class="headline darken-1 pt-2 pb-2"
+                        primary-title>
+                        <h4 style="color:#FFEBEE">
+                            <span v-if="!_.isEmpty(xnotadelete)">Peringatan !</span>
+                            <span v-if="_.isEmpty(xnotadelete)">Berhasil !</span>
+                        </h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgdelete" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                        <v-layout v-if="!_.isEmpty(xnotadelete)" row>
+                                            <v-flex pt-2 pr-2 xs12>
+                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" placeholder="Catatan (*Wajib diisi)" v-model="xnotedelete"
+                                                    class="input-plain" />
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" v-if="!_.isEmpty(xnotadelete) && xnotedelete " flat @click="doDeleteNote()">
+                            Yakin dong !
+                        </v-btn>
+
+                        <v-btn v-if="!_.isEmpty(xnotadelete)" color="primary" flat @click="xdialogdelete = false">
+                            Tutup
+                        </v-btn>
+                        <v-btn v-if="_.isEmpty(xnotadelete)" color="primary" flat @click="closeDialogDelete()">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+
+        </template>
+        <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprintnote" :urlprint="urlprintnote"
+            @close-dialog-print="openprintnote = false"></one-dialog-print>
+        </v-layout>
+</template>
+<style scoped>
+    .rTable {
+        display: table;
+        width: 100%;
+        border-spacing: 0 .2em;
+    }
+
+    .rTableGroup {
+        display: table-row-group;
+    }
+
+    .rTableRow {
+        display: table-row;
+        font-size: 14px;
+        -webkit-flex-wrap: wrap;
+        /* Safari 6.1+ */
+        flex-wrap: wrap;
+
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        background-color: #fffff;
+    }
+
+    .rTableCell {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        line-height: 2;
+        border: 1px solid #2196f3;
+        background-color: #fffff;
+        border-spacing: 5px;
+    }
+
+    .rTableHead {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 10px;
+        padding-bottom: 0px;
+        background-color: #fffff;
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+
+    .rTableFoot {
+        display: table-footer-group;
+        font-weight: bold;
+        background-color: #ddd;
+    }
+
+    .rTableBody {
+        display: table-row-group;
+    }
+
+    .rfirstCell {
+        border-left: 10px solid #2196f3;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+    }
+
+    .caption {
+        border: 1px solid grey;
+        caption-side: bottom;
+        display: table-caption;
+        text-align: center;
+        padding: 5px
+    }
+
+    .label-tagihan {
+        text-align: left;
+        font-size: 25px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-header {
+        text-align: left;
+        font-size: 18px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-title {
+        text-align: left;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .amount-right {
+        text-align: right !important;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .text-tagihan {
+        text-align: left;
+        font-size: 42px;
+        font-family: open sans, tahoma, sans-serif;
+    }
+
+    .disabled-background {
+        background: #b7b7b7;
+    }
+
+    .input-cash {
+        width: 100%;
+        padding: 8px 14px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 22px;
+        font-weight: 700;
+        text-align: right;
+    }
+
+    .input-plain {
+        width: 100%;
+        padding: 4px 8px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 14px;
+    }
+
+    .v-input,
+    .v-input__slot,
+    .v-messages {
+        margin: 0px;
+        padding: 0px;
+        min-height: 0px;
+    }
+
+    .v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
+        margin-bottom: 0px;
+    }
+
+    table {
+        font-family: arial, sans-serif;
+        border-collapse: collapse;
+        width: 100%;
+        background: white;
+        border: 0px;
+    }
+
+    th,
+    td {
+        border: 1px solid black;
+        border-collapse: collapse;
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+
+    table>tr>td {
+        padding: 8px;
+    }
+
+    table>tr>td:first {
+        padding-left: 15px !important;
+    }
+
+    .mini-input .v-input {
+        margin-top: 0px;
+    }
+
+    .mini-input .v-input,
+    .mini-input .v-input--selection-controls,
+    .mini-input .v-input__slot {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        margin-left: 3px;
+    }
+
+    .mini-input .v-messages {
+        min-height: 0px;
+    }
+
+    .border-bottom-dashed {
+        border-bottom: 1px dashed rgba(0, 0, 0, .12);
+    }
+</style>
+<script>
+    module.exports = {
+        components: {
+            'one-field-verification': httpVueLoader('../../common/oneFieldVerificationSupply.vue'),
+            'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
+        },
+        data() {
+            return {
+                checkbox: true,
+                radioGroup: 1,
+                switchCash: true,
+                switchDebit: false,
+                switchKredit: false,
+                dialog: false,
+                urlprintnote: '',
+                printtitle: '',
+                printwidth: '60%',
+                search_card: '',
+                search_edc: '',
+                isLoading: false,
+                fajrihidebtnpay: 'Y',
+                page: 1,
+                xvoucher: '',
+                xbayar: 0,
+                headers: [{
+                        text: "NO.BILL",
+                        align: "Center",
+                        sortable: false,
+                        value: "lab",
+                        width: "5%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "JATUH TEMPO",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "8%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "TOTAL TAGIHAN",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "10%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "SISA TAGIHAN",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "10%",
+                        class: "blue lighten-4"
+                    },
+                    {
+                        text: "BAYAR",
+                        align: "Center",
+                        sortable: false,
+                        value: "name",
+                        width: "10%",
+                        class: "blue lighten-4"
+                    }
+                ],
+                pagination: {
+                    descending: false,
+                    page: 1,
+                    rowsPerPage: 5,
+                    sortBy: 'trx_id ASC',
+                    totalItems: this.$store.state.paymentmanual.total_transactions
+                }
+            }
+        },
+        mounted() {
+            this.$store.dispatch("paymentmanual/selectpaymenttype")
+            this.$store.dispatch("paymentmanual/selectcard")
+            this.$store.dispatch("paymentmanual/selectedc")
+        },
+        computed: {
+            bar_chx_all: {
+                get() {
+                    return this.$store.state.paymentmanual.bar_chx_all
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_bar_chx_all", val)
+                }
+            },
+            indeterminatex: {
+                get() {
+                    return this.$store.state.paymentmanual.indeterminatex
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_indeterminatex", val)
+                }
+            },
+            cards() {
+                return this.$store.state.paymentmanual.cards
+            },
+            banks() {
+                return this.$store.state.paymentmanual.banks
+            },
+            accounts() {
+                return this.$store.state.paymentmanual.accounts
+            },
+            xmindp_percent() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_percent
+                } else {
+                    return 0
+                }
+            },
+            xmindp_amount() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_amount
+                } else {
+                    return 0
+                }
+            },
+            notes() {
+                return this.$store.state.paymentmanual.notes
+
+            },
+            tagihans() {
+                return this.$store.state.paymentmanual.tagihans
+
+            },
+            xordertests() {
+                return this.$store.state.paymentmanual.ordertests
+            },
+            xdialogpaysuccess() {
+                return this.$store.state.paymentmanual.dialog_pay_success
+            },
+            xmsgpaysuccess() {
+                return this.$store.state.paymentmanual.paynumber
+            },
+            types() {
+                return this.$store.state.paymentmanual.types
+            },
+            totpay() {
+                return this.$store.state.paymentmanual.total_payment
+            },
+            restbill() {
+                if (this.$store.state.bill.bills) {
+                    return this.$store.state.bill.selected_bill.unpaid
+                } else {
+                    return 0
+                }
+
+            },
+            xdialogdelete: {
+                get() {
+                    return this.$store.state.paymentmanual.dialog_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_dialog_delete", val)
+                }
+            },
+            xmsgdelete() {
+                return this.$store.state.paymentmanual.msg_delete
+            },
+            xnotadelete() {
+                return this.$store.state.paymentmanual.nota_delete
+            },
+            xnotedelete: {
+                get() {
+                    return this.$store.state.paymentmanual.note_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_note_delete", val)
+                }
+            },
+            openprintnote: {
+                get() {
+                    return this.$store.state.paymentmanual.open_print_note
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_open_print_note", false)
+                }
+            },
+            selectedbill() {
+                return this.$store.state.bill.selected_bill
+            },
+            xdisable_btn_pay: {
+                get() {
+                    return this.$store.state.paymentmanual.disable_btn_pay
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_disable_btn_pay", val)
+                }
+            },
+            xisauto: {
+                get() {
+                    return this.$store.state.paymentmanual.isauto
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_isauto", val)
+                }
+            },
+            xpaymenttypes() {
+                return this.$store.state.paymentmanual.paymenttypes
+            },
+            xpaymenttype: {
+                get() {
+                    return this.$store.state.paymentmanual.paymenttype
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_paymenttype", val)
+                }
+
+            },
+            xcards() {
+                return this.$store.state.paymentmanual.cards
+            },
+            xcard: {
+                get() {
+                    return this.$store.state.paymentmanual.card
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_card", val)
+                }
+
+            },
+            xedcs() {
+                return this.$store.state.paymentmanual.edcs
+            },
+            xedc: {
+                get() {
+                    return this.$store.state.paymentmanual.edc
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_edc", val)
+                }
+
+            },
+            xaccounts() {
+                return this.$store.state.paymentmanual.accounts
+            },
+            xaccount: {
+                get() {
+                    return this.$store.state.paymentmanual.account
+                },
+                set(val) {
+                    this.$store.commit("paymentmanual/update_account", val)
+                }
+
+            }
+        },
+        methods: {
+            changeCard(type, value, idx) {
+                var types = this.$store.state.paymentmanual.types
+                if (type === 'card')
+                    types[idx].selected_card = value
+
+                if (type === 'edc')
+                    types[idx].selected_edc = value
+
+                if (type === 'account')
+                    types[idx].selected_account = value
+
+                this.updateTotal()
+            },
+            changeBayar() {               
+                var bayar = parseInt(this.xbayar)
+                var tagihan = parseInt(this.restbill)
+                if (bayar > tagihan){
+                    alert('Jumlah bayar melebihi tagihan')
+                    this.xbayar = 0
+                }else{
+                    this.xdisable_btn_pay = 'Y'
+                }
+                    console.log(this.xdisable_btn_pay)
+            },
+            colorbginp(value) {
+                if (value.chex === false) {
+                    return 'grey'
+                } else {
+                    return 'white'
+                }
+            },
+            showDetail(idx) {
+                var arrOrders = this.$store.state.paymentmanual.notes
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentmanual/update_ordertests", arrOrders)
+            },
+            hideDetail(idx) {
+                var arrOrders = this.$store.state.paymentmanual.notes
+
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentmanual/update_ordertests", arrOrders)
+            },
+            changeCbxAll(value) {
+                var arr = this.tagihans
+                this.indeterminatex = false
+
+                arr.forEach((el) => {
+                    el.chex = value
+                    el.tagihan_bayar = value == true ? el.tagihan_tagihan : 0
+                })
+                
+                var selected = _.filter(arr, function (o) {
+                    return o.chex;
+                })
+                this.$store.commit("paymentmanual/update_selected_tagihan", selected)
+
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                let totpaid = valx
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+
+                if (this.totpay > this.xbayar){
+                    alert('Jumlah bayar tagihan yang dipilih melebihi input Jumlah Bayar')
+                var arr = this.tagihans
+                this.indeterminatex = false
+
+                arr.forEach((el) => {
+                    el.chex = false
+                    el.tagihan_bayar = 0
+                })
+                
+                var selected = _.filter(arr, function (o) {
+                    return o.chex;
+                })
+                this.$store.commit("paymentmanual/update_selected_tagihan", selected)
+
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                let totpaid = valx
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+                    
+                }
+            },
+            checkTop(pat) {
+                let tagihans = this.$store.state.paymentmanual.tagihans
+                let idx = _.findIndex(tagihans, function (p) {
+                    return p.F_BillDetailID == pat.F_BillDetailID
+                });
+                tagihans[idx].checx = !tagihans[idx].chex
+                tagihans[idx].tagihan_bayar = tagihans[idx].checx == false ? tagihans[idx].tagihan_tagihan : 0
+                var selected = _.filter(tagihans, function (o) {
+                    return o.chex;
+                })
+                this.$store.commit("paymentmanual/update_selected_tagihan", selected)
+
+
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                let totpaid = valx
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+
+                if (this.totpay > this.xbayar) {
+                    let xchange = valx - this.xbayar
+                    tagihans[idx].tagihan_bayar = tagihans[idx].tagihan_bayar - xchange
+                    var selectedx = _.filter(tagihans, function (o) {
+                        return o.chex;
+                    })
+                    this.$store.commit("paymentmanual/update_selected_tagihan", selectedx)
+
+                    var xval = this.$store.state.paymentmanual.selected_tagihan
+                    var valx = 0
+                    xval.forEach(function (obj) {
+                        valx += parseInt(obj.tagihan_bayar)
+                    })
+                    let totpaid = valx
+                    this.$store.commit("paymentmanual/update_total_payment", totpaid)
+                }
+
+            },
+            convertMoney(money) {
+                return one_money(money)
+            },
+            closeDialogPaySuccess() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.F_BillID === this.$store.state.bill.selected_bill
+                    .F_BillID)
+                this.$store.commit("paymentmanual/update_dialog_pay_success", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                console.log(this.$store.state.paymentmanual.types)
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.start_date,
+                    enddate: this.$store.state.bill.end_date,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    current_page: this.$store.state.bill.current_page,
+                    lastidx: idx
+                })
+            },
+            updateTotal() {
+                var xval = this.$store.state.paymentmanual.selected_tagihan
+                var valx = 0
+                xval.forEach(function (obj) {
+                    valx += parseInt(obj.tagihan_bayar)
+                })
+                // let xchange = this.restbill - valx
+                let totpaid = valx
+                this.$store.commit("paymentmanual/update_total_payment", totpaid)
+                this.xdisable_btn_pay = 'Y'
+            },
+            pay() {
+                let prm = {
+                    orderid: this.$store.state.bill.selected_bill.F_BillID,
+                    amount: this.xbayar > this.totpay ? this.totpay: this.xbayar,
+                    paymenttype: this.xpaymenttype.M_PaymentTypeID,
+                    card: this.xcard.Nat_BankID,
+                    edc: this.xedc.M_BankAccountID,
+                    account: this.xaccount.M_BankAccountID,
+                    voucher: this.xvoucher,
+                    bills: this.$store.state.paymentmanual.selected_tagihan
+                }
+                //console.log(prm.amount)
+                this.$store.dispatch("paymentmanual/pay", prm)
+            },
+            deleteNote(note, idx) {
+                this.$store.commit("paymentmanual/update_note_delete", "")
+                this.$store.commit("paymentmanual/update_nota_delete", note)
+                let xmsg = "Yakin , mau hapus nota nomor <span style='color:red'>" + note.note_number + "</span> ?"
+                this.$store.commit("paymentmanual/update_msg_delete", xmsg)
+                this.$store.commit("paymentmanual/update_dialog_delete", true)
+            },
+            doDeleteNote() {
+                let prm = {
+                    catatan: this.$store.state.paymentmanual.note_delete,
+                    nota: this.$store.state.paymentmanual.nota_delete
+                }
+                this.$store.dispatch("paymentmanual/delete_note", prm)
+            },
+            closeDialogDelete() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.F_BillID === this.$store.state.bill.selected_bill
+                    .F_BillID)
+                this.$store.commit("paymentmanual/update_dialog_delete", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.start_date,
+                    enddate: this.$store.state.bill.end_date,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    lastidx: idx
+                })
+            },
+            updateChx(val, idx) {
+                //this.check_disable_btn_status()
+                var selpat = this.$store.state.bill.selected_bill
+                var firstamount = selpat.unpaid
+                //console.log(selpat)
+                let xobj = this.$store.state.paymentmanual.types
+                xobj[idx].leftvalue = 0
+                xobj[idx].rightvalue = 0
+                if ((xobj[idx].code === 'DEBIT' || xobj[idx].code === 'CREDIT' || xobj[idx].code === 'TRANSFER') &&
+                    val.chex === false) {
+                    xobj[idx].selected_card = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_edc = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_account = {
+                        id: 0,
+                        name: ''
+                    }
+                }
+                var selected_payments = _.filter(xobj, function (o) {
+                    return o.chex
+                })
+                if (selected_payments.length === 1) {
+                    xobj.forEach(function (obj, index) {
+                        if (obj.code === selected_payments[0].code) {
+                            xobj[index].leftvalue = firstamount
+                        }
+                    })
+                }
+                this.$store.commit("paymentmanual/update_types", {
+                    records: xobj,
+                    total: xobj.length
+                })
+
+
+                this.updateTotal()
+            },
+            check_disable_btn_status() {
+                this.xdisable_btn_pay = 'Y'
+                var payments = this.$store.state.paymentmanual.types
+                let selected_payments = _.filter(payments, {
+                    chex: true
+                })
+                console.log(this.xdisable_btn_pay)
+                selected_payments.forEach(function (obj) {
+                    if (obj.leftvalue === 0) {
+                        this.xdisable_btn_pay = 'Y'
+                    }
+                    if (obj.code === 'DEBIT' || obj.code === 'CREDIT' || obj.code === 'TRANSFER') {
+                        console.log(obj)
+                        if (obj.selected_card.id === '0' || obj.selected_card.id === 0 || obj.selected_edc.id ===
+                            '0' || obj.selected_edc.id === 0 || obj.selected_account.id === '0' || obj.selected_account
+                            .id === 0) {
+                            this.xdisable_btn_pay = 'Y'
+                            console.log('oye')
+                            console.log(this.xdisable_btn_pay)
+                        }
+                    }
+                })
+            },
+            printNote(val, idx) {
+                this.printwidth = 600
+                this.printtitle = ""
+                let user = one_user()
+                var rpt = 'rpt_t_010'
+                this.urlprintnote = "/birt/run?__report=report/one/fo/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + val.note_id
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            },
+            doPrint() {
+                this.printtitle = ""
+                this.closeDialogPaySuccess()
+                let user = one_user()
+                var rpt = 'rpt_t_010'
+                this.urlprintnote = "/birt/run?__report=report/one/fo/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + this.$store.state.paymentmanual.idx
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            },
+            printKw() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.F_BillID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/fo/rpt_t_002.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            },
+            printInvoice() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.F_BillID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/fo/rpt_t_001.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentmanual/update_open_print_note", true)
+            }
+        }
+    }
+</script>

one-ui/test_x_old/vuex/one-bill-payment/components/oneBillPaymentNew.vue

@@ -0,0 +1,815 @@
+<template>
+    <v-layout column pb-2>
+        <v-card class="mb-2" color="white">
+            <v-layout row wrap>
+                <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
+                    <div class="rTable">
+                        <div class="rTableHeading">
+                            <div style="width:30%" class="rTableHead">NO. PEMBAYARAN</div>
+                            <div style="width:30%" class="rTableHead">TIPE PEMBAYARAN</div>
+                            <div style="width:10%" class="rTableHead">JUMLAH</div>
+                            <div style="width:10%" class="rTableHead">USER</div>
+                            <div style="width:10%" class="rTableHead">AKSI</div>
+                        </div>
+                    </div>
+                    <div v-if="notes.length === 0" class="rTable pt-2">
+                        <div class="rTableRow">
+                            <div style="width:100%;text-align:center" class="rTableCell">Belum ada data</div>
+                        </div>
+                    </div>
+                    <div v-if="notes.length > 0" v-for="(vo,idx) in notes" :key="vo.F_BillPaymentID">
+                        <div class="rTable">
+                            <div class="rTableGroup">
+                                <div class="rTableRow">
+                                    <div style="width:25%" class="rTableCell rfirstCell">{{vo.note_number}}</div>
+                                    <div style="width:25%" class="rTableCell">{{vo.paymenttypes_name}}</div>
+                                    <div style="width:20%" class="rTableCell">{{convertMoney(vo.note_amount)}}</div>
+                                    <div style="width:10%" class="rTableCell">{{vo.note_user}}</div>
+                                    <div style="width:10%" class="rTableCell">
+                                        <v-icon style="color:#757575" class="text-sm-right" @click="printNote(vo,idx)">print</v-icon>
+                                        <!--<v-icon v-if="vo.show_detail === 'N'" style="color:#757575" class="text-sm-right" @click="showDetail(idx)">more_vert</v-icon>
+                                        <v-icon v-if="vo.show_detail === 'Y'" style="color:#757575" class="text-sm-right" @click="hideDetail(idx)">more_vert</v-icon>-->
+
+                                    </div>
+                                </div>
+                            </div>
+                            <transition name="fade">
+                                <div v-if="vo.show_detail === 'Y'" style="width:100%;border:1px solid black" class="caption">
+                                    <v-layout row>
+                                        <table>
+                                            <tr>
+                                                <th style="width:30%" class="text-md-center pt-2 pb-2">NO. REG</th>
+                                                <th style="width:30%" class="text-md-center pt-2 pb-2">TOTAL TAGIHAN</th>
+                                                <th style="width:30%" class="text-md-center pt-2 pb-2">TOTAL BAYAR</th>
+
+                                            </tr>
+                                            <tr v-for="(vt,tidx) in vo.tests" :key="vt.F_BillPaymentDetailID">
+                                                <td class="text-md-left pl-3">
+                                                   {{vt.T_OrderHeaderLabNumber}}
+                                                </td>
+                                                <td class="text-md-right pr-2">
+                                                    {{convertMoney(vt.F_BillDetailTotal)}}
+                                                </td>
+                                                <td class="text-md-right pr-2">
+                                                    {{convertMoney(vt.F_BillPaymentDetailAmount)}}
+                                                </td>
+                                            </tr>
+
+                                            <!--<tfoot>
+                            <tr>
+                                <th style="background:#03a9f43d" colspan="3" class="text-md-right pr-2 pt-1 pb-1">SUB TOTAL</th>
+                                <th style="background:#03a9f43d" class="text-md-right pr-2 pt-2 pb-2" colspan="2">300.000</th>
+
+                            </tr>
+                            <tr>
+                                <th colspan="3"  class="text-md-right pr-2 pt-1 pb-1">DISKON PEMBULATAN</th>
+                                <th class="text-md-right pr-2 pt-1 pb-1"  colspan="2">0</th>
+
+                            </tr>
+                            <tr>
+                                <th style="background:#03a9f43d" colspan="3"  class="text-md-right pr-2 pt-2 pb-2">TOTAL</th>
+                                <th style="background:#03a9f43d" class="text-md-right pr-2 pt-1 pb-1"  colspan="2">300.000</th>
+
+                            </tr>
+                            </tfoot>-->
+                                        </table>
+                                    </v-layout>
+                                </div>
+                            </transition>
+                        </div>
+                    </div>
+            </v-layout>
+            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            <v-layout row mt-1 mb-1 pl-2 pr-2>
+            </v-layout>
+            </v-flex>
+        </v-card>
+        <v-card>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <v-layout row>
+                        <v-flex xs12>
+                            <div class="label-tagihan text-xs-left">Total Tagihan</div>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout pt-1 row>
+                        <v-flex xs9>
+                            <!--<div class="text-xs-left warning--text">Minimun DP ({{xmindp_percent}}%)</div>-->
+                        </v-flex>
+                        <v-flex xs3>
+                            <!--<div class="text-xs-right warning--text">{{convertMoney(xmindp_amount)}}</div>-->
+                        </v-flex>
+                    </v-layout>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{convertMoney(restbill)}}</kbd></div>
+                </v-flex>
+            </v-layout>
+            <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            <div v-for="(type, index) in types">
+                <v-layout row pt-2 pb-1 pl-2 align-center wrap>
+                    <v-flex xs12>
+                        <v-switch v-model="type.chex" @change="updateChx(type,index)" :label="type.chexlabel"></v-switch>
+                    </v-flex>
+                </v-layout>
+                <v-layout pl-2 row align-center wrap>
+                    <v-flex xs4 class="pa-1">
+                        <!--<input type="text" @change="updateTotal()" :class="{ 'disabled-background':type.chex === false }" :disabled="!type.chex"  v-model="type.leftvalue" class="input-plain text-xs-right font-weight-bold"/>-->
+                        <v-text-field label="Jumlah" :disabled="!type.chex" v-model="type.leftvalue" @change="updateTotal()" class="amount-right"
+                            reverse outline></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'CASH' || type.code === 'VOUCHER'" class="pa-1">
+                        <v-text-field v-if="type.code === 'CASH'" label="Kembali" :disabled="!type.chex" v-model="type.rightvalue" class="amount-right"
+                            reverse @change="updateTotal()" outline></v-text-field>
+                        <v-text-field v-if="type.code === 'VOUCHER'" label="Kode Voucher" :disabled="!type.chex" v-model="type.rightvalue" class="amount-right"
+                            outline></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'DEBIT' || type.code === 'CREDIT' || type.code === 'TRANSFER'" class="pa-1">
+                        <v-autocomplete v-if="type.code !== 'TRANSFER'" label="Kartu" v-model="type.selected_card" @change="changeCard('card',type.selected_card,index)"
+                            :disabled="!type.chex" :items="banks" auto-select-first no-filter outline item-text="name" item-value="id"
+                            return-object no-data-text="">
+                        </v-autocomplete>
+                        <v-autocomplete v-if="type.code === 'TRANSFER'" label="Nomor Rekening" v-model="type.selected_account" @change="changeCard('account',type.selected_account,index)"
+                            :disabled="!type.chex" :items="accounts" auto-select-first outline no-filter item-text="name" item-value="id"
+                            return-object no-data-text="">
+                        </v-autocomplete>
+                    </v-flex>
+                    <v-flex xs4 v-if="type.code === 'DEBIT' || type.code === 'CREDIT'" class="pa-1">
+                        <v-autocomplete label="EDC" v-model="type.selected_edc" @change="changeCard('edc',type.selected_card,index)" :disabled="!type.chex"
+                            :items="accounts" auto-select-first outline no-filter item-text="name" item-value="id" return-object
+                            no-data-text="">
+                        </v-autocomplete>
+                    </v-flex>
+                </v-layout>
+                <v-layout style="border-top:1px dashed rgb(221,221,221)" row mt-1 mb-1></v-layout>
+            </div>
+            <v-layout row pa-2 align-center wrap>
+                <v-flex xs6>
+                    <div class="label-tagihan text-xs-left">
+                        <v-btn v-if="xdisable_btn_pay === 'N'" @click="pay()" color="warning" dark>
+                            Bayar
+                        </v-btn>
+                    </div>
+                </v-flex>
+                <v-flex xs6>
+                    <div class="text-tagihan text-xs-right"><kbd>{{convertMoney(totpay)}}</kbd></div>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+
+
+        <template>
+            <v-dialog v-model="xdialogpaysuccess" max-width="30%" persistent>
+                <v-card>
+                    <v-card-title class="headline success pt-2 pb-2" primary-title>
+                        <h4 style="color:#FFEBEE">Pembayaran Berhasil</h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgpaysuccess" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn flat @click="doPrint()">
+                            Print
+                        </v-btn>
+                        <v-btn color="error" flat @click="closeDialogPaySuccess(false)">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+        </template>
+
+        <template>
+
+            <v-dialog v-model="xdialogdelete" persistent max-width="30%">
+                <v-card>
+                    <v-card-title :class="{ 'red':!_.isEmpty(xnotadelete), 'success':_.isEmpty(xnotadelete) }" class="headline darken-1 pt-2 pb-2"
+                        primary-title>
+                        <h4 style="color:#FFEBEE">
+                            <span v-if="!_.isEmpty(xnotadelete)">Peringatan !</span>
+                            <span v-if="_.isEmpty(xnotadelete)">Berhasil !</span>
+                        </h4>
+                    </v-card-title>
+                    <v-card-text class="pt-2 pb-2">
+                        <v-layout row>
+                            <v-flex xs12 d-flex>
+                                <v-layout row>
+                                    <v-flex pb-1 xs12>
+                                        <v-layout row>
+                                            <v-flex pt-2 pr-2 v-html="xmsgdelete" xs12>
+
+                                            </v-flex>
+                                        </v-layout>
+                                        <v-layout v-if="!_.isEmpty(xnotadelete)" row>
+                                            <v-flex pt-2 pr-2 xs12>
+                                                <input style="border: 1px solid black;padding: 5px;width: 100%;" type="text" placeholder="Catatan (*Wajib diisi)" v-model="xnotedelete"
+                                                    class="input-plain" />
+                                            </v-flex>
+                                        </v-layout>
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-card-text>
+                    <v-divider></v-divider>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn color="error" v-if="!_.isEmpty(xnotadelete) && xnotedelete " flat @click="doDeleteNote()">
+                            Yakin dong !
+                        </v-btn>
+
+                        <v-btn v-if="!_.isEmpty(xnotadelete)" color="primary" flat @click="xdialogdelete = false">
+                            Tutup
+                        </v-btn>
+                        <v-btn v-if="_.isEmpty(xnotadelete)" color="primary" flat @click="closeDialogDelete()">
+                            Tutup
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+
+        </template>
+        <one-dialog-print :title="printtitle" :width="printwidth" :height="550" :status="openprintnote" :urlprint="urlprintnote"
+            @close-dialog-print="openprintnote = false"></one-dialog-print>
+    </v-layout>
+</template>
+<style scoped>
+    .rTable {
+        display: table;
+        width: 100%;
+        border-spacing: 0 .2em;
+    }
+
+    .rTableGroup {
+        display: table-row-group;
+    }
+
+    .rTableRow {
+        display: table-row;
+        font-size: 14px;
+        -webkit-flex-wrap: wrap;
+        /* Safari 6.1+ */
+        flex-wrap: wrap;
+
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        background-color: #fffff;
+    }
+
+    .rTableCell {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        line-height: 2;
+        border: 1px solid #2196f3;
+        background-color: #fffff;
+        border-spacing: 5px;
+    }
+
+    .rTableHead {
+        display: table-cell;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 10px;
+        padding-bottom: 0px;
+        background-color: #fffff;
+    }
+
+    .rTableHeading {
+        display: table-header-group;
+        text-transform: uppercase;
+        font-weight: 500;
+    }
+
+    .rTableFoot {
+        display: table-footer-group;
+        font-weight: bold;
+        background-color: #ddd;
+    }
+
+    .rTableBody {
+        display: table-row-group;
+    }
+
+    .rfirstCell {
+        border-left: 10px solid #2196f3;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+    }
+    .caption {
+        border: 1px solid grey;
+        caption-side: bottom;
+        display: table-caption;
+        text-align: center;
+        padding: 5px
+    }
+    .label-tagihan {
+        text-align: left;
+        font-size: 25px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-header {
+        text-align: left;
+        font-size: 18px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .sub-title {
+        text-align: left;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .amount-right {
+        text-align: right !important;
+        font-size: 14px;
+        font-family: open sans, tahoma, sans-serif;
+        font-weight: 700;
+    }
+
+    .text-tagihan {
+        text-align: left;
+        font-size: 42px;
+        font-family: open sans, tahoma, sans-serif;
+    }
+
+    .disabled-background {
+        background: #b7b7b7;
+    }
+
+    .input-cash {
+        width: 100%;
+        padding: 8px 14px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 22px;
+        font-weight: 700;
+        text-align: right;
+    }
+
+    .input-plain {
+        width: 100%;
+        padding: 4px 8px;
+        box-sizing: border-box;
+        border: 2px solid grey;
+        border-radius: 4px;
+        font-size: 14px;
+    }
+
+    .v-input,
+    .v-input__slot,
+    .v-messages {
+        margin: 0px;
+        padding: 0px;
+        min-height: 0px;
+    }
+
+    .v-input--selection-controls:not(.v-input--hide-details) .v-input__slot {
+        margin-bottom: 0px;
+    }
+
+    table {
+        font-family: arial, sans-serif;
+        border-collapse: collapse;
+        width: 100%;
+        background: white;
+        border: 0px;
+    }
+
+    th,
+    td {
+        border: 1px solid black;
+        border-collapse: collapse;
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+
+    table>tr>td {
+        padding: 8px;
+    }
+
+    table>tr>td:first {
+        padding-left: 15px !important;
+    }
+
+    .mini-input .v-input {
+        margin-top: 0px;
+    }
+
+    .mini-input .v-input,
+    .mini-input .v-input--selection-controls,
+    .mini-input .v-input__slot {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        margin-left: 3px;
+    }
+
+    .mini-input .v-messages {
+        min-height: 0px;
+    }
+
+    .border-bottom-dashed {
+        border-bottom: 1px dashed rgba(0, 0, 0, .12);
+    }
+</style>
+<script>
+    module.exports = {
+        components: {
+            'one-field-verification': httpVueLoader('../../common/oneFieldVerificationSupply.vue'),
+            'one-dialog-print': httpVueLoader('../../common/oneDialogPrintX.vue')
+        },
+        data() {
+            return {
+                checkbox: true,
+                radioGroup: 1,
+                switchCash: true,
+                switchDebit: false,
+                switchKredit: false,
+                dialog: false,
+                urlprintnote: '',
+                printtitle: '',
+                printwidth: '60%',
+                search_card: '',
+                search_edc: '',
+                isLoading: false,
+                fajrihidebtnpay: 'Y'
+            }
+        },
+        mounted() {
+            this.$store.dispatch("paymentnew/lookup_type")
+            this.$store.dispatch("paymentnew/lookup_banks")
+            this.$store.dispatch("paymentnew/lookup_accounts")
+        },
+        computed: {
+            cards() {
+                return this.$store.state.paymentnew.cards
+            },
+            banks() {
+                return this.$store.state.paymentnew.banks
+            },
+            accounts() {
+                return this.$store.state.paymentnew.accounts
+            },
+            xmindp_percent() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_percent
+                } else {
+                    return 0
+                }
+            },
+            xmindp_amount() {
+                if (this.$store.state.bill.selected_bill) {
+                    return this.$store.state.bill.selected_bill.mindp_amount
+                } else {
+                    return 0
+                }
+            },
+            notes() {
+                return this.$store.state.paymentnew.notes
+
+            },
+            xordertests() {
+                return this.$store.state.paymentnew.ordertests
+            },
+            xdialogpaysuccess() {
+                return this.$store.state.paymentnew.dialog_pay_success
+            },
+            xmsgpaysuccess() {
+                return this.$store.state.paymentnew.paynumber
+            },
+            types() {
+                return this.$store.state.paymentnew.types
+            },
+            totpay() {
+                return this.$store.state.paymentnew.total_payment
+            },
+            restbill() {
+                if (this.$store.state.bill.bills) {
+                    return this.$store.state.bill.selected_bill.unpaid
+                } else {
+                    return 0
+                }
+
+            },
+            xdialogdelete: {
+                get() {
+                    return this.$store.state.paymentnew.dialog_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_dialog_delete", val)
+                }
+            },
+            xmsgdelete() {
+                return this.$store.state.paymentnew.msg_delete
+            },
+            xnotadelete() {
+                return this.$store.state.paymentnew.nota_delete
+            },
+            xnotedelete: {
+                get() {
+                    return this.$store.state.paymentnew.note_delete
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_note_delete", val)
+                }
+            },
+            openprintnote: {
+                get() {
+                    return this.$store.state.paymentnew.open_print_note
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_open_print_note", false)
+                }
+            },
+            selectedbill() {
+                return this.$store.state.bill.selected_bill
+            },
+            xdisable_btn_pay: {
+                get() {
+                    return this.$store.state.paymentnew.disable_btn_pay
+                },
+                set(val) {
+                    this.$store.commit("paymentnew/update_disable_btn_pay", val)
+                }
+            },
+
+        },
+        methods: {
+            changeCard(type, value, idx) {
+                var types = this.$store.state.paymentnew.types
+                if (type === 'card')
+                    types[idx].selected_card = value
+
+                if (type === 'edc')
+                    types[idx].selected_edc = value
+
+                if (type === 'account')
+                    types[idx].selected_account = value
+
+                this.updateTotal()
+            },
+            colorbginp(value) {
+                if (value.chex === false) {
+                    return 'grey'
+                } else {
+                    return 'white'
+                }
+            },
+            showDetail(idx) {
+                var arrOrders = this.$store.state.paymentnew.notes
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentnew/update_ordertests", arrOrders)
+            },
+            hideDetail(idx) {
+                var arrOrders = this.$store.state.paymentnew.notes
+
+                arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
+                this.$store.commit("paymentnew/update_ordertests", arrOrders)
+            },
+            convertMoney(money) {
+                return one_money(money)
+            },
+            closeDialogPaySuccess() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.F_BillID === this.$store.state.bill.selected_bill
+                    .F_BillID)
+                this.$store.commit("paymentnew/update_dialog_pay_success", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                console.log(this.$store.state.paymentnew.types)
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.start_date,
+                    enddate: this.$store.state.bill.end_date,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    current_page: this.$store.state.bill.current_page,
+                    lastidx: idx
+                })
+            },
+            updateTotal() {
+                /*var x = this.xdisable_btn_pay === 'N'?'Y':'N'
+                this.xdisable_btn_pay = x
+                console.log(this.xdisable_btn_pay)*/
+                var xval = this.$store.state.paymentnew.types
+                let xcash = _.filter(xval, {
+                    code: 'CASH'
+                })
+                let xother = _.filter(xval, type => type.code !== 'CASH')
+                var valother = 0
+                xother.forEach(function (obj) {
+                    valother += parseInt(obj.leftvalue)
+                })
+                //console.log('val other '+valother)
+                let restother = this.restbill - valother
+
+                let xchange = parseInt(xcash[0].leftvalue) - restother
+                xcash[0].rightvalue = Math.max(0, xchange)
+                let idxcash = _.findIndex(xval, item => item.code === 'CASH')
+                xval[idxcash] = xcash[0]
+                this.$store.commit("paymentnew/update_types", {
+                    records: xval,
+                    total: xval.length
+                })
+                let totpaid = valother + (parseInt(xcash[0].leftvalue) - Math.max(0, xchange))
+                this.$store.commit("paymentnew/update_total_payment", totpaid)
+
+                this.xdisable_btn_pay = 'Y'
+                var payments = this.$store.state.paymentnew.types
+                let selected_payments = _.filter(payments, {
+                    chex: true
+                })
+                //console.log(this.xdisable_btn_pay)
+                var xxx = 'Y'
+                selected_payments.forEach(function (obj) {
+                    if (parseInt(obj.leftvalue) !== 0)
+                        xxx = 'N'
+
+                    if ((obj.code === 'DEBIT' && parseInt(obj.selected_card.id) !== 0) || (obj.code ===
+                            'DEBIT' && parseInt(obj.selected_edc.id) !== 0))
+                        xxx = 'N'
+
+                    if ((obj.code === 'CREDIT' && parseInt(obj.selected_card.id) !== 0) || (obj.code ===
+                            'CREDIT' && parseInt(obj.selected_edc.id) !== 0))
+                        xxx = 'N'
+
+                })
+                this.xdisable_btn_pay = xxx
+                //console.log('after '+this.xdisable_btn_pay)
+            },
+            pay() {
+                var xval = this.$store.state.paymentnew.types
+                var valpay = 0
+                let xcash = _.filter(xval, {
+                    code: 'CASH'
+                })
+                xval.forEach(function (obj) {
+                    valpay += parseInt(obj.leftvalue)
+                })
+                let prm = {
+                    orderid: this.$store.state.bill.selected_bill.F_BillID,
+                    payments: this.$store.state.paymentnew.types
+                }
+                this.$store.dispatch("paymentnew/pay", prm)
+            },
+            deleteNote(note, idx) {
+                this.$store.commit("paymentnew/update_note_delete", "")
+                this.$store.commit("paymentnew/update_nota_delete", note)
+                let xmsg = "Yakin , mau hapus nota nomor <span style='color:red'>" + note.note_number + "</span> ?"
+                this.$store.commit("paymentnew/update_msg_delete", xmsg)
+                this.$store.commit("paymentnew/update_dialog_delete", true)
+            },
+            doDeleteNote() {
+                let prm = {
+                    catatan: this.$store.state.paymentnew.note_delete,
+                    nota: this.$store.state.paymentnew.nota_delete
+                }
+                this.$store.dispatch("paymentnew/delete_note", prm)
+            },
+            closeDialogDelete() {
+                let arrbill = this.$store.state.bill.bills
+                var idx = _.findIndex(arrbill, item => item.F_BillID === this.$store.state.bill.selected_bill
+                    .F_BillID)
+                this.$store.commit("paymentnew/update_dialog_delete", false)
+                this.$store.commit("bill/update_selected_bill", {})
+                this.$store.dispatch("bill/search", {
+                    startdate: this.$store.state.bill.start_date,
+                    enddate: this.$store.state.bill.end_date,
+                    search: this.$store.state.bill.search,
+                    status: this.$store.state.bill.selected_status.value,
+                    lastidx: idx
+                })
+            },
+            updateChx(val, idx) {
+                //this.check_disable_btn_status()
+                var selpat = this.$store.state.bill.selected_bill
+                var firstamount = selpat.unpaid
+                //console.log(selpat)
+                let xobj = this.$store.state.paymentnew.types
+                xobj[idx].leftvalue = 0
+                xobj[idx].rightvalue = 0
+                if ((xobj[idx].code === 'DEBIT' || xobj[idx].code === 'CREDIT' || xobj[idx].code === 'TRANSFER') &&
+                    val.chex === false) {
+                    xobj[idx].selected_card = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_edc = {
+                        id: 0,
+                        name: ''
+                    }
+                    xobj[idx].selected_account = {
+                        id: 0,
+                        name: ''
+                    }
+                }
+                var selected_payments = _.filter(xobj, function (o) {
+                    return o.chex
+                })
+                if (selected_payments.length === 1) {
+                    xobj.forEach(function (obj, index) {
+                        if (obj.code === selected_payments[0].code) {
+                            xobj[index].leftvalue = firstamount
+                        }
+                    })
+                }
+                this.$store.commit("paymentnew/update_types", {
+                    records: xobj,
+                    total: xobj.length
+                })
+
+
+                this.updateTotal()
+            },
+            check_disable_btn_status() {
+                this.xdisable_btn_pay = 'N'
+                var payments = this.$store.state.paymentnew.types
+                let selected_payments = _.filter(payments, {
+                    chex: true
+                })
+                console.log(this.xdisable_btn_pay)
+                selected_payments.forEach(function (obj) {
+                    if (obj.leftvalue === 0) {
+                        this.xdisable_btn_pay = 'Y'
+                    }
+                    if (obj.code === 'DEBIT' || obj.code === 'CREDIT' || obj.code === 'TRANSFER') {
+                        console.log(obj)
+                        if (obj.selected_card.id === '0' || obj.selected_card.id === 0 || obj.selected_edc.id ===
+                            '0' || obj.selected_edc.id === 0 || obj.selected_account.id === '0' || obj.selected_account
+                            .id === 0) {
+                            this.xdisable_btn_pay = 'Y'
+                            console.log('oye')
+                            console.log(this.xdisable_btn_pay)
+                        }
+                    }
+                })
+            },
+            printNote(val, idx) {
+                this.printwidth = 600
+                this.printtitle = ""
+                let user = one_user()
+                var rpt = 'rpt_t_010'
+                if (val.note_amount < 0)
+                    rpt = 'rpt_t_010'
+                this.urlprintnote = "/birt/run?__report=report/one/fo/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + val.note_id
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            doPrint() {
+                this.printtitle = ""
+                this.closeDialogPaySuccess()
+                let user = one_user()
+                let payments = this.$store.state.paymentnew.last_payments
+                let xcash = _.filter(payments, {
+                    code: 'CASH'
+                })
+                var rpt = 'rpt_t_010'
+                if (xcash[0].leftvalue < 0)
+                    rpt = 'rpt_t_010'
+                this.urlprintnote = "/birt/run?__report=report/one/fo/" + rpt + ".rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + this.$store.state.paymentnew.idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            printKw() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.F_BillID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/fo/rpt_t_002.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            },
+            printInvoice() {
+                this.printwidth = 800
+                this.printtitle = ""
+                let idx = this.$store.state.bill.selected_bill.F_BillID
+                let user = one_user()
+                this.urlprintnote = "/birt/run?__report=report/one/fo/rpt_t_001.rptdesign&__format=pdf&username=" +
+                    user.M_UserUsername + "&PID=" + idx
+                this.$store.commit("paymentnew/update_open_print_note", true)
+            }
+        }
+    }
+</script>

one-ui/test_x_old/vuex/one-bill-payment/index.php

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+   <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="X-UA-Compatible" content="ie=edge">
+      <title>One</title>
+      <link rel="stylesheet" href="../../../libs/vendor/css/google-fonts.css">
+      <link rel="stylesheet" href="../../../libs/vendor/css/icomoon-fonts.css">
+      <link rel="stylesheet" href="../../../libs/vendor/css/vuetify.min.css">
+   </head>
+
+   <body>
+      <div v-cloak id="app">
+         <v-app id="smartApp" >
+            <one-navbar></one-navbar>
+            <v-content style="background:#F5E8DF!important" >
+               <v-container fluid fill-height class="pl-1 pr-1 pt-2 pb-2">
+                  <v-layout row wrap >
+                     <v-flex xs7 class="left" fill-height pa-1>
+                        <one-bill-list></one-bill-list>
+                     </v-flex>
+                     <v-flex xs5 class="right" fill-height pa-1>
+                        <!-- komponen kanan -->
+                        <one-bill-payment></one-bill-payment>
+                        <one-bill-payment-manual></one-bill-payment-manual>
+                     </v-flex>
+                  </v-layout>
+               </v-container>
+            </v-content>
+            <one-footer> </one-footer>
+         </v-app>
+      </div>
+
+      <!-- Vendor -->
+      <script src="../../../libs/vendor/moment.min.js"></script>
+      <script src="../../../libs/vendor/numeral.min.js"></script>
+      <script src="../../../libs/vendor/moment-locale-id.js"></script>
+      <script src="../../../libs/vendor/lodash.js"></script>
+      <script src="../../../libs/vendor/axios.min.js"></script>
+      <script src="../../../libs/vendor/vue.js"></script>
+      <script src="../../../libs/vendor/vuex.js"></script>
+      <script src="../../../libs/vendor/vuetify.js"></script>
+      <script src="../../../libs/vendor/httpVueLoader.js"></script>
+      <script src="../../../libs/one_global.js"></script>
+      <!-- App Script -->
+<?php
+$ts = "?ts=" . Date("ymdhis");
+?>
+<script type="module">
+window.calculate_age = function (inp_dob) {
+   var now = moment(new Date())
+   var dob = moment(new Date(inp_dob))
+   var year = now.diff(dob,'years')
+   dob.add(year,'years')
+   var month = now.diff(dob,'months')
+   dob.add(month,'months')
+   var day = now.diff(dob,'days')
+   if (isNaN(year)) return ''
+   return `${year} tahun ${month} bulan ${day} hari`
+}
+
+
+import { store } from './store.js<?php echo $ts ?>';
+//for testing
+window.store = store;
+new Vue({
+store,
+   el: '#app',
+   methods: {
+   tab_selected : function(tab) {
+      return this.$store.state.tab_selected == tab
+      }
+   },
+   components: {
+   'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+      'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+        'one-bill-list': httpVueLoader('./components/oneBillList.vue'),
+        'one-bill-payment-manual': httpVueLoader('./components/oneBillPaymentManual.vue'),
+        'one-bill-payment': httpVueLoader('./components/oneBillPaymentAuto.vue')
+      }
+    })
+    </script>
+    <style>
+[v-cloak] {
+   display: none
+}
+   .left {
+   }
+   .right {
+   }
+    </style>
+   </body>
+
+</html>

one-ui/test_x_old/vuex/one-bill-payment/modules/bill.js

@@ -0,0 +1,183 @@
+// 1 => LOADING
+// 2 => DONE
+// 3 => ERROR
+import * as api from "../api/bill.js"
+
+export default {
+    namespaced: true,
+    state: {
+        search_bill: 0,
+        search_error_message: '',
+        start_date: moment(new Date()).format('YYYY-MM-DD'),
+        end_date: moment(new Date()).format('YYYY-MM-DD'),
+        search: '',
+        scompany: '',
+        isauto:'N',
+        bills: [],
+        total_bill: 0,
+        selected_bill: {
+            totalbill: 0,
+            mindp_percent: 0
+        },
+        save_error_message: '',
+        statuses: [{
+            name: 'Belum Lunas',
+            value: 'N'
+        }, {
+            name: 'Lunas',
+            value: 'Y'
+        }],
+        selected_status: {
+            name: 'Belum Lunas',
+            value: 'N'
+        },
+        open_alert_no_pay: false,
+        msg_alert_no_pay: "Loh ... Gak jadi bayar dong ?",
+        current_page: 1,
+        total_page: 0,
+        pay_disabled: 'Y',
+        get_data_status: 0,
+        get_data_error_message: ''
+    },
+    mutations: {
+        update_pay_disabled(state, val) {
+            state.pay_disabled = val
+        },
+        update_total_page(state, val) {
+            state.total_page = val
+        },
+        update_current_page(state, val) {
+            state.current_page = val
+        },
+        update_search_error_message(state, bill) {
+            state.search_error_message = bill
+        },
+        update_search_bill(state, bill) {
+            state.search_bill = bill
+        },
+        update_bills(state, data) {
+            state.bills = data.records
+            state.total_bill = data.total
+            state.total_page = data.total
+        },
+        update_selected_bill(state, val) {
+            state.selected_bill = val
+        },
+        update_start_date(state, val) {
+            state.start_date = val
+        },
+        update_end_date(state, val) {
+            state.end_date = val
+        },
+        update_search(state, val) {
+            state.search = val
+        },
+        update_scompany(state, val) {
+            state.scompany = val
+        },
+        update_selected_status(state, val) {
+            state.selected_status = val
+        },
+        update_open_alert_no_pay(state, val) {
+            state.open_alert_no_pay = val
+        },
+        update_msg_alert_no_pay(state, val) {
+            state.msg_alert_no_pay = val
+        },
+        update_isauto(state, val) {
+            state.isauto = val
+        },
+        update_get_data_status(state, val) {
+            state.get_data_status = val
+        },
+        update_get_data_error_message(state, val) {
+            state.get_data_error_message = val
+        }
+    },
+    actions: {
+        async search(context, prm) {
+            context.commit("update_search_bill", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.search(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_search_bill", 3)
+                    context.commit("update_search_error_message", resp.message)
+                } else {
+                    context.commit("update_search_bill", 2)
+                    context.commit("update_search_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_bills", data)
+                    context.commit("update_total_page", data.total)
+                    if (prm.lastidx === 0 && data.total > 0) {
+                        context.commit("update_selected_bill", data.records[0])
+                        if (!_.isEmpty(data.records[0])) {
+                            context.commit("paymentnew/update_notes", data.records[0].notes, {
+                                root: true
+                            })
+                            context.commit("paymentmanual/update_notes", data.records[0].notes, {
+                                root: true
+                            })
+                            if (data.records[0].flaglunas === 'N') {
+                                context.commit("paymentmanual/update_tagihans", data.records[0].tagihans, {
+                                    root: true
+                                })
+                            } else {
+                                context.commit("paymentmanual/update_tagihans", [], {
+                                    root: true
+                                })
+                            }
+                        } else {
+                            context.commit("paymentnew/update_notes", [], {
+                                root: true
+                            })
+                            context.commit("paymentmanual/update_notes", [], {
+                                root: true
+                            })
+                            context.commit("paymentmanual/update_tagihans", [], {
+                                root: true
+                            })
+
+                        }
+                    } else if (prm.lastidx > 0 && data.total > 0) {
+                        context.commit("update_selected_bill", data.records[prm.lastidx])
+                        context.commit("paymentnew/update_notes", data.records[prm.lastidx].notes, {
+                            root: true
+                        })
+                        context.commit("paymentmanual/update_notes", data.records[prm.lastidx].notes, {
+                            root: true
+                        })
+                        if (data.records[prm.lastidx].flaglunas === 'N') {
+                            context.commit("paymentmanual/update_tagihans", data.records[prm.lastidx].tagihans, {
+                                root: true
+                            })
+                        } else {
+                            context.commit("paymentmanual/update_tagihans", [], {
+                                root: true
+                            })
+                        }
+                    } else {
+                        context.commit("update_selected_bill", '')
+                        context.commit("paymentnew/update_notes", [], {
+                            root: true
+                        })
+                        context.commit("paymentmanual/update_notes", [], {
+                            root: true
+                        })
+                        context.commit("paymentmanual/update_tagihans", [], {
+                            root: true
+                        })
+                    }
+
+                }
+            } catch (e) {
+                context.commit("update_search_bill", 3)
+                context.commit("update_search_error_message", e.message)
+                console.log(e)
+            }
+        }
+    }
+}

one-ui/test_x_old/vuex/one-bill-payment/modules/paymentmanual.js

@@ -0,0 +1,379 @@
+import * as api from "../api/paymentmanual.js"
+
+export default {
+    namespaced: true,
+    state: {
+        lookup_status: 0,
+        lookup_error_message: '',
+        types: [],
+        total_payment: 0,
+        reload_after_save: false,
+        dialog_pay_success: false,
+        paynumber: '',
+        notes: [],
+        tagihans: [],
+        dialog_delete: false,
+        msg_delete: '',
+        note_delete: '',
+        nota_delete: {},
+        open_print_note: false,
+        idx: 0,
+        last_payments: {},
+        payment_total: 0,
+        banks: [],
+        disable_btn_pay: 'Y',
+        ordertests: [],
+        isauto: 'N',
+        paymenttypes: [],
+        paymenttype: {M_PaymentTypeID:'1',M_PaymentTypeName:'Cash'},
+        cards: [],
+        card: {},
+        edcs: [],
+        edc: {},
+        accounts: [],
+        account: {},
+        bar_chx_all: false,
+        selected_tagihan: {},
+        indeterminatex: false
+    },
+    mutations: {
+        update_disable_btn_pay(state, val) {
+            state.disable_btn_pay = val
+        },
+        update_banks(state, val) {
+            state.banks = val
+        },
+        update_lookup_error_message(state, val) {
+            state.lookup_error_message = val
+        },
+        update_lookup_status(state, status) {
+            state.lookup_status = status
+        },
+        update_types(state, data) {
+            state.types = data.records
+            state.total_type = data.total
+        },
+        update_selected_status(state, val) {
+            state.selected_status = val
+        },
+        update_total_payment(state, val) {
+            state.total_payment = val
+        },
+        update_reload_after_save(state, val) {
+            state.reload_after_save = val
+        },
+        update_dialog_pay_success(state, val) {
+            state.dialog_pay_success = val
+        },
+        update_paynumber(state, val) {
+            state.paynumber = val
+        },
+        update_notes(state, val) {
+            state.notes = val
+        },
+        update_tagihans(state, val) {
+            state.tagihans = val
+        },
+        update_dialog_delete(state, val) {
+            state.dialog_delete = val
+        },
+        update_note_delete(state, val) {
+            state.note_delete = val
+        },
+        update_msg_delete(state, val) {
+            state.msg_delete = val
+        },
+        update_nota_delete(state, val) {
+            state.nota_delete = val
+        },
+        update_open_print_note(state, val) {
+            state.open_print_note = val
+        },
+        update_idx(state, val) {
+            state.idx = val
+        },
+        update_last_payments(state, val) {
+            state.last_payments = val
+        },
+        update_ordertests(state, data) {
+            state.ordertests = data
+        },
+        update_isauto(state, val) {
+            state.isauto = val
+        },
+        update_paymenttypes(state, data) {
+            state.paymenttypes = data
+        },
+        update_paymenttype(state, val) {
+            state.paymenttype = val
+        },
+        update_cards(state, data) {
+            state.cards = data
+        },
+        update_card(state, val) {
+            state.card = val
+        },
+        update_edcs(state, data) {
+            state.edcs = data
+        },
+        update_edc(state, val) {
+            state.edc = val
+        },
+        update_accounts(state, data) {
+            state.accounts = data
+        },
+        update_account(state, val) {
+            state.account = val
+        },
+        update_bar_chx_all(state, val) {
+            state.bar_chx_all = val
+        },
+        update_indeterminatex(state, val) {
+            state.indeterminatex = val
+        },
+        update_selected_tagihan(state, val) {
+            state.selected_tagihan = val
+        }
+    },
+    actions: {
+        async lookup_type(context, prm) {
+            context.commit("update_lookup_status", 1)
+            try {
+                let resp = await api.lookup_type(one_token())
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_status", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_status", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_types", data)
+
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async lookup_banks(context) {
+            context.commit("bill/update_get_data_status", 1, {
+                root: true
+            })
+            try {
+                let resp = await api.lookup_banks(one_token())
+                if (resp.status != "OK") {
+                    context.commit("bill/update_get_data_status", 3, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", resp.message, {
+                        root: true
+                    })
+                } else {
+                    context.commit("bill/update_get_data_status", 2, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", "", {
+                        root: true
+                    })
+                    context.commit("update_paymenttypes", resp.data.records.paymenttypes)
+                }
+            } catch (e) {
+                context.commit("bill/update_get_data_status", 3, {
+                    root: true
+                })
+                context.commit("bill/update_get_data_error_message", e.message, {
+                    root: true
+                })
+                console.log(e)
+            }
+        },
+        async lookup_accounts(context) {
+            context.commit("update_lookup_status", 1)
+            try {
+                let resp = await api.lookup_accounts(one_token())
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_status", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_status", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_accounts", data.records)
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async searchcard(context, prm) {
+            context.commit("update_lookup_status", 1)
+            try {
+                let resp = await api.searchcard(one_token(), prm)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_status", 3)
+                } else {
+                    context.commit("update_lookup_status", 2)
+                    let data = {
+                        records: resp.data.records,
+                        total: resp.data.total
+                    }
+                    context.commit("update_cards", resp.data.records)
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+            }
+        },
+        async pay(context, prm) {
+            context.commit("update_lookup_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.pay(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_status", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_status", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let data = {
+                        records: resp.data.records.types,
+                        total: resp.data.total
+                    }
+                    let xnumber = resp.data.records.data.numberx
+                    let id = resp.data.records.data.idx 
+                    context.commit("update_disable_btn_pay", 'Y')
+                    context.commit("update_idx", id)
+                    context.commit("update_total_payment", 0)
+                    context.commit("update_paynumber", "Pembayaran nomor <span style='color:red'>" + xnumber + "</span> telah berhasil")
+                    context.commit("update_dialog_pay_success", true)
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async delete_note(context, prm) {
+            context.commit("update_lookup_status", 1)
+            try {
+                prm.token = one_token()
+                let resp = await api.delete_note(prm)
+                if (resp.status != "OK") {
+                    context.commit("update_lookup_status", 3)
+                    context.commit("update_lookup_error_message", resp.message)
+                } else {
+                    context.commit("update_lookup_status", 2)
+                    context.commit("update_lookup_error_message", "")
+                    let xmsg = "Nota nomor <span style='color:red'>" + prm.nota.note_number + "</span> telah dihapus"
+                    context.commit("update_msg_delete", xmsg)
+                    context.commit("update_note_delete", '')
+                    context.commit("update_nota_delete", {})
+                }
+            } catch (e) {
+                context.commit("update_lookup_status", 3)
+                context.commit("update_lookup_error_message", e.message)
+            }
+        },
+        async selectpaymenttype(context) {
+            context.commit("bill/update_get_data_status", 1, {
+                root: true
+            })
+            try {
+                let resp = await api.selectpaymenttype(one_token())
+                if (resp.status != "OK") {
+                    context.commit("bill/update_get_data_status", 3, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", resp.message, {
+                        root: true
+                    })
+                } else {
+                    context.commit("bill/update_get_data_status", 2, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", "", {
+                        root: true
+                    })
+                    context.commit("update_paymenttypes", resp.data.records.paymenttypes)
+                }
+            } catch (e) {
+                context.commit("bill/update_get_data_status", 3, {
+                    root: true
+                })
+                context.commit("bill/update_get_data_error_message", e.message, {
+                    root: true
+                })
+                console.log(e)
+            }
+        },
+        async selectcard(context) {
+            context.commit("bill/update_get_data_status", 1, {
+                root: true
+            })
+            try {
+                let resp = await api.selectcard(one_token())
+                if (resp.status != "OK") {
+                    context.commit("bill/update_get_data_status", 3, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", resp.message, {
+                        root: true
+                    })
+                } else {
+                    context.commit("bill/update_get_data_status", 2, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", "", {
+                        root: true
+                    })
+                    context.commit("update_cards", resp.data.records.banks)
+                }
+            } catch (e) {
+                context.commit("bill/update_get_data_status", 3, {
+                    root: true
+                })
+                context.commit("bill/update_get_data_error_message", e.message, {
+                    root: true
+                })
+                console.log(e)
+            }
+        },
+        async selectedc(context) {
+            context.commit("bill/update_get_data_status", 1, {
+                root: true
+            })
+            try {
+                let resp = await api.selectedc(one_token())
+                if (resp.status != "OK") {
+                    context.commit("bill/update_get_data_status", 3, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", resp.message, {
+                        root: true
+                    })
+                } else {
+                    context.commit("bill/update_get_data_status", 2, {
+                        root: true
+                    })
+                    context.commit("bill/update_get_data_error_message", "", {
+                        root: true
+                    })
+                    context.commit("update_edcs", resp.data.records.accounts)
+                    context.commit("update_accounts", resp.data.records.accounts)
+                }
+            } catch (e) {
+                context.commit("bill/update_get_data_status", 3, {
+                    root: true
+                })
+                context.commit("bill/update_get_data_error_message", e.message, {
+                    root: true
+                })
+                console.log(e)
+            }
+        }
+    }
+}

one-ui/test_x_old/vuex/one-bill-payment/modules/paymentnew.js

@@ -0,0 +1,241 @@
+import * as api from "../api/payment.js"
+
+export default  {
+   namespaced: true,
+   state: {
+      lookup_status:0,
+      lookup_error_message:'',
+      types: [],
+      total_payment:0,
+      reload_after_save: false,
+      dialog_pay_success:false,
+      paynumber :'',
+      notes :[],
+      dialog_delete:false,
+      msg_delete:'',
+      note_delete:'',
+      nota_delete:{},
+      open_print_note:false,
+      idx:0,
+      last_payments:{},
+      payment_total: 0,
+      banks:[],
+      disable_btn_pay:'Y',
+      accounts:[],
+      ordertests:[],
+      isauto: 'N'
+   },
+   mutations: {
+      update_accounts(state,val) {
+         state.accounts = val
+      },
+      update_disable_btn_pay(state,val) {
+         state.disable_btn_pay = val
+      },
+      update_banks(state,val) {
+         state.banks = val
+      },
+      update_lookup_error_message(state,val) {
+         state.lookup_error_message = val
+      },
+      update_lookup_status(state,status) {
+         state.lookup_status = status
+      },
+      update_types(state,data) {
+         state.types = data.records
+         state.total_type = data.total
+      },
+      update_selected_status(state,val) {
+         state.selected_status=val 
+      },
+      update_total_payment(state,val) {
+         state.total_payment=val 
+      },
+      update_reload_after_save(state,val) {
+         state.reload_after_save=val 
+      },
+      update_dialog_pay_success(state,val) {
+         state.dialog_pay_success=val 
+      },
+      update_paynumber(state,val) {
+         state.paynumber=val 
+      },
+      update_notes(state,val) {
+         state.notes=val 
+      },
+      update_dialog_delete(state,val) {
+         state.dialog_delete=val 
+      },
+      update_note_delete(state,val) {
+         state.note_delete=val 
+      },
+      update_msg_delete(state,val) {
+         state.msg_delete=val 
+      },
+      update_nota_delete(state,val) {
+         state.nota_delete=val 
+      },
+      update_open_print_note(state,val) {
+         state.open_print_note=val 
+      },
+      update_idx(state,val) {
+         state.idx=val 
+      },
+      update_last_payments(state,val) {
+         state.last_payments=val 
+      },
+      update_ordertests(state,data){
+        state.ordertests = data
+    },
+    update_isauto(state, val) {
+        state.isauto = val
+    }
+   },
+   actions: {
+      async lookup_type(context,prm) {
+         context.commit("update_lookup_status",1)
+         try {
+            let resp= await api.lookup_type(one_token())
+            if (resp.status != "OK") {
+               context.commit("update_lookup_status",3)
+               context.commit("update_lookup_error_message",resp.message)
+            } else {
+               context.commit("update_lookup_status",2)
+               context.commit("update_lookup_error_message","")
+               let data = {
+                  records : resp.data.records,
+                  total: resp.data.total
+               }
+               context.commit("update_types",data)
+
+            }
+         } catch(e) {
+            context.commit("update_lookup_status",3)
+            context.commit("update_lookup_error_message",e.message )
+         }
+      },
+      async lookup_banks(context) {
+         context.commit("update_lookup_status",1)
+         try {
+            let resp= await api.lookup_banks(one_token())
+            if (resp.status != "OK") {
+               context.commit("update_lookup_status",3)
+               context.commit("update_lookup_error_message",resp.message)
+            } else {
+               context.commit("update_lookup_status",2)
+               context.commit("update_lookup_error_message","")
+               let data = {
+                  records : resp.data.records,
+                  total: resp.data.total
+               }
+               context.commit("update_banks",data.records)
+            }
+         } catch(e) {
+            context.commit("update_lookup_status",3)
+            context.commit("update_lookup_error_message",e.message )
+         }
+      },
+      async lookup_accounts(context) {
+         context.commit("update_lookup_status",1)
+         try {
+            let resp= await api.lookup_accounts(one_token())
+            if (resp.status != "OK") {
+               context.commit("update_lookup_status",3)
+               context.commit("update_lookup_error_message",resp.message)
+            } else {
+               context.commit("update_lookup_status",2)
+               context.commit("update_lookup_error_message","")
+               let data = {
+                  records : resp.data.records,
+                  total: resp.data.total
+               }
+               context.commit("update_accounts",data.records)
+            }
+         } catch(e) {
+            context.commit("update_lookup_status",3)
+            context.commit("update_lookup_error_message",e.message )
+         }
+      },
+      async searchcard(context,prm) {
+         context.commit("update_lookup_status",1)
+         try {
+             let resp= await api.searchcard(one_token(),prm)
+             if (resp.status != "OK") {
+                 context.commit("update_lookup_status",3)
+             } else {
+                 context.commit("update_lookup_status",2)
+                 let data = {
+                     records : resp.data.records,
+                     total: resp.data.total
+                 }
+                 context.commit("update_cards",resp.data.records)
+             }
+         } catch(e) {
+         context.commit("update_lookup_status",3)
+         }
+     },
+      async pay(context,prm) {
+         context.commit("update_lookup_status",1)
+         try {
+            prm.token = one_token()
+            let resp= await api.pay(prm)
+            if (resp.status != "OK") {
+               context.commit("update_lookup_status",3)
+               context.commit("update_lookup_error_message",resp.message)
+            } else {
+               context.commit("update_lookup_status",2)
+               context.commit("update_lookup_error_message","")
+               let data = {
+                  records : resp.data.records.types,
+                  total: resp.data.total
+               }
+               let xnumber = resp.data.records.data.numberx
+               let id = resp.data.records.data.idx
+               var xobj = context.state.types
+               //console.log(xobj)
+               xobj.forEach(function(obj){
+                  obj.chex = false
+                  obj.leftvalue = 0
+                  obj.rightvalue = 0
+                  obj.selected_card = {id:0,name:''}
+                  obj.selected_edc = {id:0,name:''}
+                  obj.selected_account = {id:0,name:''}
+               })
+               var xray = {records:xobj,total:xobj.length}
+               context.commit("update_types",xray)
+               context.commit("update_disable_btn_pay",'Y')
+               console.log(context.state.types)
+               context.commit("update_last_payments",prm.payments)
+               context.commit("update_idx",id)
+               context.commit("update_total_payment",0)
+               context.commit("update_paynumber","Pembayaran nomor <span style='color:red'>"+xnumber+"</span> telah berhasil")
+               context.commit("update_dialog_pay_success",true)
+            }
+         } catch(e) {
+            context.commit("update_lookup_status",3)
+            context.commit("update_lookup_error_message",e.message )
+         }
+      },
+      async delete_note(context,prm) {
+         context.commit("update_lookup_status",1)
+         try {
+            prm.token = one_token()
+            let resp= await api.delete_note(prm)
+            if (resp.status != "OK") {
+               context.commit("update_lookup_status",3)
+               context.commit("update_lookup_error_message",resp.message)
+            } else {
+               context.commit("update_lookup_status",2)
+               context.commit("update_lookup_error_message","")
+               let xmsg = "Nota nomor <span style='color:red'>"+prm.nota.note_number+"</span> telah dihapus"
+               context.commit("update_msg_delete",xmsg)
+               context.commit("update_note_delete",'')
+               context.commit("update_nota_delete",{})
+            }
+         } catch(e) {
+            context.commit("update_lookup_status",3)
+            context.commit("update_lookup_error_message",e.message )
+         }
+      }
+   }
+}

one-ui/test_x_old/vuex/one-bill-payment/store.js

@@ -0,0 +1,31 @@
+// State
+//  data ...
+// Mutations
+//
+//
+// Actions
+import bill from "./modules/bill.js";
+import paymentnew from "./modules/paymentnew.js";
+import paymentmanual from "./modules/paymentmanual.js";
+import system from "../../../apps/modules/system/system.js";
+export const store = new Vuex.Store({
+    modules: {
+        bill: bill,
+        paymentnew:paymentnew,
+        paymentmanual: paymentmanual,
+        system:system
+    },
+    state: {
+        tab_selected: 'pasien-dokter'
+    },
+    mutations: {
+        change_tab(state, ntab) {
+            state.tab_selected = ntab
+        }
+    },
+    actions: {
+        change_tab(context, ntab) {
+            context.commit('change_tab', ntab)
+        }
+    }
+});