219 lines
7.4 KiB
Vue
219 lines
7.4 KiB
Vue
<template>
|
|
<v-dialog v-model="dialog" persistent max-width="1000px" min-height="600px" transition="dialog-transition">
|
|
|
|
<v-layout class="fill-height" column>
|
|
<v-card class="grow" color="blue-grey lighten-2">
|
|
<v-card-title primary-title class="title white--text pb-2">
|
|
<!-- HISTORI PEMERIKSAAN
|
|
<br />
|
|
<p style="font-size: 10px;">Catatan Pasien : {{ patient_note }}</p> -->
|
|
<v-row align="left">
|
|
<v-col>
|
|
<h3>HISTORI PEMERIKSAAN</h3>
|
|
</v-col>
|
|
<v-col class="text-left">
|
|
<p v-if="(patient_note != '')" style="font-size: 15px; margin-top:10px;">Catatan Pasien : {{ patient_note }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="white" flat @click="filter_test()">{{ text_filter_test }}</v-btn>
|
|
<v-btn color="white" flat @click="uncheck_all()">Clear Test</v-btn>
|
|
<v-btn color="white" flat @click="dialog = false">Tutup</v-btn>
|
|
</v-card-title>
|
|
|
|
<v-card-text class="pt-2 pb-2">
|
|
|
|
<v-layout v-if="show_filter_test" xs12 row wrap
|
|
style="background-color:white;padding-top:10px;border-radius:10px 10px 0px 0px;padding-left:10px;">
|
|
<v-flex xs3 v-for="(p, i) in pxs" v-bind:key="p.code" class="pr-2 pb-1">
|
|
<v-layout row>
|
|
<v-flex class="boxoutline" class="text-left" style="padding-top:10px" pl-2 pr-2 xs2>
|
|
<v-layout row align-left justify-space-between>
|
|
<v-icon v-if="!px_selected(p.code)" @click="selectPx(p.code)"
|
|
style="color:red">clear</v-icon>
|
|
<v-icon v-if="px_selected(p.code)" @click="unSelectPx(p.code)"
|
|
style="color:green">check</v-icon>
|
|
</v-layout>
|
|
</v-flex>
|
|
<v-flex class="boxoutline " style="text-overflow:ellipsis;overflow:hidden;padding-top:10px;" xs11>
|
|
<span>{{ p.name }}</span>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
|
|
<v-layout row wrap>
|
|
<v-flex xs12>
|
|
<v-card>
|
|
<v-card-text class="pt-1 pb-1 pl-1 pr-1">
|
|
<v-data-table :headers="new_headers" :items="result" :loading="isLoading" hide-actions
|
|
class="elevation-1 table-history">
|
|
<template slot="items" slot-scope="props">
|
|
<td class="text-xs-left pl-2 pr-2 pa-1 green--text">
|
|
{{ props.item.px_name }}
|
|
</td>
|
|
<td class="text-xs-left pl-2 pr-2 pa-1">
|
|
{{ props.item.unit }}
|
|
</td>
|
|
|
|
<td class="text-xs-left pl-2 pr-2 pa-1" v-for="xdate in dates">
|
|
{{ props.item.result[xdate] }}
|
|
<br />
|
|
<!-- internal note -->
|
|
<p style="color: rgba(255, 0, 0, 0.5);">{{ props.item.notes[xdate] }}</p>
|
|
</td>
|
|
</template>
|
|
</v-data-table>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="white" flat @click="dialog = false">Tutup</v-btn>
|
|
</v-card-actions>
|
|
|
|
|
|
</v-card>
|
|
</v-layout>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<style>
|
|
.table-history table td {
|
|
height: 40px !important
|
|
}
|
|
|
|
.boxoutline {
|
|
color: #000099;
|
|
border: 1px solid #e6f7ff;
|
|
justify-content: center;
|
|
height: 55px;
|
|
line-height: 25px;
|
|
padding-left: 5px;
|
|
background: #b3e7ff;
|
|
font-size: 14px;
|
|
border-radius: 1px;
|
|
font-weight: 200;
|
|
}
|
|
|
|
.boxoutline:hover {
|
|
background: #e6f7ff !important;
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
query: "",
|
|
items: [],
|
|
|
|
isLoading: false,
|
|
show_filter_test: false
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
filter_test() {
|
|
this.show_filter_test = !this.show_filter_test
|
|
},
|
|
oneMoment: function (d) {
|
|
return window.oneMoment(d)
|
|
},
|
|
uncheck_all() {
|
|
this.$store.commit('re_history/update_selected_px', [])
|
|
},
|
|
selectPx(code) {
|
|
console.log('Select ' + code)
|
|
let pxs = this.$store.state.re_history.pxs
|
|
let obj = _.filter(pxs, function (o) { return o.code == code })
|
|
let spx = this.$store.state.re_history.selected_px
|
|
let n_spx = _.concat(spx, obj)
|
|
this.$store.commit('re_history/update_selected_px', n_spx)
|
|
},
|
|
unSelectPx(code) {
|
|
let spx = this.$store.state.re_history.selected_px
|
|
let new_spx = _.filter(spx, function (o) { return o.code != code })
|
|
this.$store.commit('re_history/update_selected_px', new_spx)
|
|
},
|
|
px_selected(code) {
|
|
let spx = this.$store.state.re_history.selected_px
|
|
let rst = _.findIndex(spx, { 'code': code })
|
|
if (rst == -1) return false
|
|
return true
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
dates() {
|
|
return this.$store.state.re_history.dates
|
|
},
|
|
text_filter_test() {
|
|
if (this.show_filter_test) return "Hide Test"
|
|
return "Show Test"
|
|
},
|
|
new_headers() {
|
|
let headers = [
|
|
{
|
|
text: "PEMERIKSAAN",
|
|
align: "left",
|
|
sortable: false,
|
|
width: "45%",
|
|
class: "pa-2 green lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "Unit",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "mr",
|
|
width: "16%",
|
|
class: "pa-2 green lighten-3 white--text"
|
|
}]
|
|
|
|
for (let i = 0; i < this.dates.length; i++) {
|
|
headers.push({
|
|
text: this.dates[i],
|
|
align: "left",
|
|
sortable: false,
|
|
value: "mr",
|
|
width: "15%",
|
|
class: "pa-2 green lighten-3 white--text"
|
|
})
|
|
}
|
|
|
|
return headers
|
|
},
|
|
result() {
|
|
let spx = this.$store.state.re_history.selected_px
|
|
let rst = this.$store.state.re_history.result
|
|
let new_rst = _.filter(rst, function (r) {
|
|
return _.findIndex(spx, { 'code': r.code }) > -1
|
|
})
|
|
return new_rst
|
|
},
|
|
pxs() {
|
|
return this.$store.state.re_history.pxs
|
|
},
|
|
// patient note
|
|
patient_note() {
|
|
return this.$store.state.re_history.patient_note
|
|
},
|
|
dialog: {
|
|
get() { return this.$store.state.re_history.dialog_history },
|
|
set(v) { this.$store.commit('re_history/update_dialog_history', v) }
|
|
},
|
|
selected_px: {
|
|
get() { return this.$store.state.re_history.selected_px }
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|