Files
FE_CPONE/test/vuex/one-md-packet/components/oneMdPacketPxList.vue
2026-04-27 10:13:31 +07:00

462 lines
15 KiB
Vue

<template>
<v-layout class="fill-height" column>
<v-card class="mb-2 pa-2">
<v-layout row wrap>
<v-flex xs6 v-if="state_add">
<h3 class="title">{{ packet_name }} ({{ packet_type }})</h3>
<v-layout row wrap pt-2>
<v-flex xs5 class="text-xs-right pr-2">
<v-text-field
label="HARGA PAKET"
hide-details
v-model="packet_price"
class="text-xs-right"
reverse
v-show="packet_type_code == 'PN'"
></v-text-field>
<v-text-field
label="HARGA PAKET"
hide-details
:value="one_money(packet_price)"
readonly
class="text-xs-right"
reverse
v-show="packet_type_code == 'PR'"
></v-text-field>
</v-flex>
<v-flex xs5 class="text-xs-right">
<v-text-field
label="TOTAL HARGA"
hide-details
:value="one_money(total_price)"
readonly
class="text-xs-right"
reverse
></v-text-field>
</v-flex>
</v-layout>
<v-flex xs12 pt-2 pl-0>
<v-btn color="red" dark @click="cancel" class="mt-0 mb-0 ml-0">Batal</v-btn>
<v-btn color="success" dark @click="save" class="ma-0">Simpan</v-btn>
</v-flex>
</v-flex>
<v-flex v-bind:class="state_add? 'xs6':'xs8'" class="searchbox">
<v-layout row wrap>
<v-text-field class="xs6 ma-1"
label=""
placeholder="Pencarian"
single-line
outline
v-model="query_px"
hide-details
></v-text-field>
<v-btn class="xs3 ma-1 one-btn-icon v-btn--search" color="success" @click="search_px" :disabled="!btn_enabled" :dark="btn_enabled">
<span class="icon-search"></span>
</v-btn>
<v-btn class="xs3 ma-1 one-btn-icon v-btn--search" color="orange" @click="imports"
:disabled="!btn_enabled || selected_mou.M_MouIsReleased == 'Y' || selected_mou.M_MouIsVerified == 'Y'" :dark="btn_enabled && selected_mou.M_MouIsReleased != 'Y' && selected_mou.M_MouIsVerified != 'Y'"
v-show="!state_add">
<span class="icon-import"></span>
</v-btn>
<v-btn class="xs3 ma-1 one-btn-icon v-btn--search" color="primary" @click="add"
:disabled="!btn_enabled || selected_mou.M_MouIsReleased == 'Y' || selected_mou.M_MouIsVerified == 'Y'" :dark="btn_enabled && selected_mou.M_MouIsReleased != 'Y' && selected_mou.M_MouIsVerified != 'Y'" v-show="!state_add">
<span class="icon-edit"></span>
</v-btn>
</v-layout>
<!-- <v-layout row wrap>
<v-btn color="success" @click="imports">Impor ...</v-btn>
</v-layout> -->
</v-flex>
<v-flex xs2 pl-3 v-show="!state_add">
<v-text-field
label="Harga Normal"
:value="selected_packet?one_money(selected_packet.T_PacketOriginalPrice):0"
reverse
readonly
hide-details
></v-text-field>
</v-flex>
<v-flex xs2 pl-4 v-show="!state_add">
<v-text-field
label="Harga Paket"
:value="selected_packet?one_money(selected_packet.T_PacketPrice):0"
reverse
readonly
hide-details
></v-text-field>
</v-flex>
<!-- <v-btn class="xs3 ma-1" color="info" @click="set" >Baru</v-btn> -->
</v-layout>
</v-card>
<!-- <v-card>
<v-layout row wrap>
<v-flex xs12>
<one-md-packet-px-new></one-md-packet-px-new>
</v-flex>
</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="pxs"
:loading="isLoading"
:pagination.sync="pagination"
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.T_TestCode }}</td>
<td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ props.item.T_TestName }}</td>
<td class="text-xs-right pa-2" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">{{ one_money(props.item.T_PacketDetailPrice) }}</td>
<td class="text-xs-center pa-0" v-bind:class="{'amber lighten-4':isSelected(props.item)}" @click="selectMe(props.item)">
<v-btn color="red" dark class="one-btn-icon" small ma-0 @click="remove(props.item)" v-show="state_add">«</v-btn>
</td>
</template>
<template>
<div class="text-xs-center">
<v-pagination
:length="15"
:total-visible="7"
></v-pagination>
</div>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-card>
</v-layout>
</template>
<style scoped>
/* .searchbox .v-input.v-text-field .v-input__slot{
min-height:60px;
} */
.searchbox .v-btn--search {
min-height:50px;
}
table.v-table tbody td,table.v-table tbody th {
height: 40px;
}
table.v-table thead tr {
height: 40px;
}
.one-btn-icon {
font-size: 1.5em
}
/* Overwrite */
.v-text-field--box>.v-input__control>.v-input__slot,
.v-text-field--full-width>.v-input__control>.v-input__slot,
.v-text-field--outline>.v-input__control>.v-input__slot {
align-items: stretch;
min-height: 50px
}
.v-text-field--box .v-label, .v-text-field--full-width .v-label, .v-text-field--outline .v-label {
top: 12px;
}
.v-text-field.v-text-field--enclosed .v-input__append-inner {
margin-top: 10px;
}
.v-text-field--outline.v-text-field--single-line input {
margin-top: 6px;
}
</style>
<script>
module.exports = {
components : {
// 'one-md-price-new-dialog': httpVueLoader('./oneMdPriceNewDialog.vue'),
// 'one-md-price-new-addon-dialog': httpVueLoader('./oneMdPriceNewAddonDialog.vue')
},
mounted() {
},
methods : {
one_money (p) {
return window.one_money(p)
},
isSelected(p) {
return false
},
search_px() {
this.$store.dispatch("px/search_px")
},
selectMe(doc) {
// this.$store.commit('price/update_selected_price', doc)
},
add() {
this.$store.commit('test/update_state_add', true)
this.$store.dispatch('test/search_test')
// copy price
let x = this.$store.state.packet.selected_packet.T_PacketPrice
let y = this.$store.state.packet.selected_packet.T_PacketOriginalPrice
this.$store.commit('px/update_estimate_total_price', y)
this.$store.commit('px/update_packet_price', x)
// update nat tests
// refresh nat_tests
let nt = []
let pxs = this.$store.state.px.pxs
for (let i in pxs) {
for (let j in pxs[i].nat_tests) {
nt.push(pxs[i].nat_tests[j])
}
}
this.$store.commit('px/update_nat_tests', nt)
},
cancel () {
this.$store.dispatch('px/search_px')
this.$store.commit('test/update_state_add', false)
return
let y = this.$store.state.px.pxs
let z = this.$store.state.px.total_px
for(let i in y) {
if (y[i].T_PacketDetailID == 0)
{
y.splice(i, 1)
z--
}
}
this.$store.commit('px/update_pxs', {
records: y,
total: z
})
},
save () {
let x = this.$store.state.packet.selected_packet
x.T_PacketPrice = this.packet_price
x.T_PacketOriginalPrice = this.total_price
this.$store.commit('packet/update_selected_packet', x)
this.$store.dispatch('px/save_px')
},
remove (x) {
// go to state add
let z = this.$store.state.test.state_add
if (!z) {
let y = this.$store.state.packet.selected_packet.T_PacketPrice
this.$store.commit('px/update_estimate_total_price', y)
this.$store.commit('test/update_state_add', true)
}
// add to test
let te = this.$store.state.test.exclude
let ti = this.$store.state.test.include
let td = te.indexOf(x.T_TestID)
if ( td > -1)
te.splice(td, 1)
else
ti.push(x.T_TestID)
this.$store.commit('test/update_exclude', te)
this.$store.commit('test/update_include', ti)
// search test
this.$store.dispatch('test/search_test')
let pxs = this.pxs
let price = 0
let total = pxs.length
let total_price = parseFloat(this.$store.state.px.estimate_total_price)
for (let i in pxs) {
if (pxs[i].T_TestID == x.T_TestID) {
price = parseFloat(pxs[i].T_PacketDetailPrice)
pxs.splice(i, 1)
}
}
total_price -= price
if (total_price < 0) total_price = 0
this.pxs = {total:total-1, records:pxs}
this.$store.commit('px/update_estimate_total_price', total_price)
if (this.packet_type_code == "PR")
this.$store.commit('px/update_packet_price', total_price)
// refresh nat_tests
let nt = []
for (let i in pxs) {
for (let j in pxs[i].nat_tests) {
nt.push(pxs[i].nat_tests[j])
}
}
this.$store.commit('px/update_nat_tests', nt)
},
imports () {
this.$store.commit('packet_copy/update_dialog_copy', true)
}
},
computed: {
pxs : {
get () {
return this.$store.state.px.pxs
},
set (v) {
this.$store.commit('px/update_pxs', v)
}
},
selected_px : {
get () {
return this.$store.state.px.selected_px
},
set (v) {
this.$store.commit('px/update_selected_px', v)
}
},
query_px : {
get () {
return this.$store.state.px.query_px
},
set (v) {
this.$store.commit('px/update_query_px', v)
}
},
isLoading () {
return false
},
btn_add_enabled () {
// if (this.$store.state.price.selected_mou.M_MouID)
return true
// return false
},
packet_name () {
if (this.$store.state.packet.selected_packet)
return this.$store.state.packet.selected_packet.T_PacketName
return ""
},
packet_type () {
if (!this.$store.state.packet.selected_packet)
return ""
if(this.$store.state.packet.selected_packet.T_PacketType == "PR")
return "Profile"
return "Panel"
},
packet_type_code () {
if (!this.$store.state.packet.selected_packet)
return ""
return this.$store.state.packet.selected_packet.T_PacketType
},
state_add () {
return this.$store.state.test.state_add
},
btn_enabled () {
if (this.$store.state.packet.selected_mou &&
this.$store.state.packet.selected_packet)
return true
return false
},
total_price : {
get () { return this.$store.state.px.estimate_total_price },
set (v) { this.$store.commit('px/update_estimate_total_price', v) }
},
packet_price : {
get () { return this.$store.state.px.packet_price },
set (v) { this.$store.commit('px/update_packet_price', v) }
},
selected_packet () {
return this.$store.state.packet.selected_packet
},
selected_mou () {
return this.$store.state.packet.selected_mou
}
},
data() {
return {
headers: [
{
text: "KODE",
align: "left",
sortable: false,
value: "mr",
width: "25%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "NAMA",
align: "left",
sortable: false,
value: "lab",
width: "50%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "HARGA",
align: "right",
sortable: false,
value: "name",
width: "25%",
class: "pa-2 blue lighten-3 white--text"
},
{
text: "ACTION",
align: "center",
sortable: false,
value: "name",
width: "10%",
class: "pa-2 blue lighten-3 white--text"
}
],
pagination:{
descending: false,
page: 1,
rowsPerPage: 5,
sortBy: 'T_TestName',
totalItems: this.$store.state.px.total_px
}
};
}
}
</script>