Files
FE_CPONE/test/vuex/cpone-resultentry-so-others-v6-ui-all/components/sections/TestResults.vue
2026-04-27 10:13:31 +07:00

162 lines
6.7 KiB
Vue

<template>
<v-card>
<v-card-title class="headline">
Hasil Pemeriksaan
<v-spacer></v-spacer>
<v-btn v-if="canEdit" color="primary" @click="handleSaveAll">
Simpan Semua
</v-btn>
</v-card-title>
<v-card-text>
<v-layout row wrap v-for="(test, index) in tests" :key="test.id" class="mb-3">
<v-flex xs12>
<v-card flat>
<v-card-title>
<div>
<h3>{{ test.template_name }}</h3>
<div v-if="test.doctor">Dokter: {{ test.doctor.name }}</div>
</div>
<v-spacer></v-spacer>
<v-btn-toggle>
<v-btn flat icon color="primary" @click="$emit('open-doctor', test)" v-if="canEdit">
<v-icon>person</v-icon>
</v-btn>
<v-btn flat icon color="primary"
@click="$emit('print', test, 'print', test.template_name)">
<v-icon>print</v-icon>
</v-btn>
<v-btn flat icon color="primary"
@click="$emit('print-2-tahun', test, 'print2tahun', test.template_name)"
v-if="test.template_name === 'Fisik Umum'">
<v-icon>print</v-icon>
<span class="caption">2 Tahun</span>
</v-btn>
<v-btn flat icon color="primary"
@click="$emit('print-1-tahun', test, 'print1tahun', test.template_name)"
v-if="test.template_name === 'Fisik Umum'">
<v-icon>print</v-icon>
<span class="caption">1 Tahun</span>
</v-btn>
<v-btn flat icon color="success" @click="$emit('validate', test)"
v-if="canEdit && !test.validated">
<v-icon>check_circle</v-icon>
</v-btn>
<v-btn flat icon color="error" @click="$emit('unvalidate', test)"
v-if="canEdit && test.validated">
<v-icon>cancel</v-icon>
</v-btn>
</v-btn-toggle>
</v-card-title>
<v-card-text>
<v-layout row wrap>
<v-flex xs12 v-if="test.results && test.results.length > 0">
<v-data-table :headers="getHeaders(test)" :items="test.results" hide-actions
class="elevation-1">
<template slot="items" slot-scope="props">
<tr>
<td>{{ props.item.name }}</td>
<td>
<v-text-field v-if="canEdit && !test.validated"
v-model="props.item.result"
@change="handleResultChange(test)"></v-text-field>
<span v-else>{{ props.item.result }}</span>
</td>
<td>{{ props.item.unit }}</td>
<td>{{ props.item.normal_range }}</td>
</tr>
</template>
</v-data-table>
</v-flex>
<v-flex xs12 v-else-if="test.template_name === 'Fisik Umum'">
<v-textarea v-if="canEdit && !test.validated" v-model="test.result"
label="Hasil Pemeriksaan" rows="10"
@change="handleResultChange(test)"></v-textarea>
<div v-else v-html="test.result"></div>
</v-flex>
<v-flex xs12 v-else>
<v-textarea v-if="canEdit && !test.validated" v-model="test.result"
label="Hasil Pemeriksaan" rows="10"
@change="handleResultChange(test)"></v-textarea>
<div v-else>{{ test.result }}</div>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</template>
<script>
const _ = require('lodash')
const one_user = require("@/plugins/one/one_user").one_user
module.exports = {
name: 'TestResults',
components: {
// Jika TestResults membutuhkan komponen lain, tambahkan di sini
},
props: {
tests: {
type: Array,
default: function () { return [] }
},
canEdit: {
type: Boolean,
default: false
}
},
methods: {
getHeaders: function (test) {
return [
{ text: 'Parameter', value: 'name', sortable: false },
{ text: 'Hasil', value: 'result', sortable: false },
{ text: 'Satuan', value: 'unit', sortable: false },
{ text: 'Nilai Normal', value: 'normal_range', sortable: false }
]
},
handleResultChange: function (test) {
this.$emit('change-result')
this.$emit('save', test, 'save', test.template_name)
},
handleSaveAll: function () {
var self = this
this.tests.forEach(function (test) {
if (!test.validated) {
self.$emit('save', test, 'save', test.template_name)
}
})
}
}
}
</script>
<style scoped>
.v-text-field,
.v-textarea {
margin-top: 0;
padding-top: 0;
}
.v-radio-group {
margin-top: 0;
}
.v-card-actions {
flex-wrap: wrap;
}
.v-btn {
margin: 4px;
}
</style>