240 lines
10 KiB
Vue
240 lines
10 KiB
Vue
<template>
|
|
<v-layout row wrap class="pa-2">
|
|
<div style="width: 100%;" class="pa-2">
|
|
<v-chip class="w-100 font-weight-bold subheading" style="width: 100%;" label text-color="white"
|
|
color="primary">IDENTITAS</v-chip>
|
|
<div class="pa-2">
|
|
<v-layout row wrap>
|
|
<v-flex xs4 class="pa-2">
|
|
<v-text-field :disabled="disabled" label="Nama"
|
|
v-model="formData.identitas.nama"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs4 class="pa-2">
|
|
<v-text-field :disabled="disabled" label="Usia"
|
|
v-model="formData.identitas.usia"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs4 class="pa-2">
|
|
<v-text-field :disabled="disabled" label="Masa Kerja "
|
|
v-model="formData.identitas.masa_kerja"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs4 class="pa-2">
|
|
<v-select :disabled="disabled" :items="formData.identitas.jenis_kelamin_option"
|
|
v-model="formData.identitas.jenis_kelamin" label="Jenis Kelamin*"></v-select>
|
|
</v-flex>
|
|
<v-flex xs4 class="pa-2">
|
|
<v-text-field :disabled="disabled" label="Departement"
|
|
v-model="formData.identitas.departement"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs4 class="pa-2">
|
|
<v-select :disabled="disabled" :items="formData.identitas.status_pekerja_option"
|
|
v-model="formData.identitas.status_pekerja" label="Status Pekerja*"></v-select>
|
|
</v-flex>
|
|
<v-flex xs3 class="pa-2">
|
|
<v-select :disabled="disabled" :items="formData.identitas.jenis_pekerjaan_option"
|
|
v-model="formData.identitas.jenis_pekerjaan" label="Jenis Pekerjaan*"></v-select>
|
|
</v-flex>
|
|
<v-flex xs3 class="pa-2">
|
|
<v-select :disabled="disabled" :items="formData.identitas.level_jabatan_option"
|
|
v-model="formData.identitas.level_jabatan" label="Level Jabatan*"></v-select>
|
|
</v-flex>
|
|
<v-flex xs3 class="pa-2">
|
|
<v-select :disabled="disabled" :items="formData.identitas.pendidikan_option"
|
|
v-model="formData.identitas.pendidikan" label="Pendidikan*"></v-select>
|
|
</v-flex>
|
|
<v-flex xs3 class="pa-2">
|
|
<v-select :disabled="disabled" :items="formData.identitas.status_perkawinan_option"
|
|
v-model="formData.identitas.status_perkawinan" label="Status perkawinan*"></v-select>
|
|
</v-flex>
|
|
</v-layout>
|
|
</div>
|
|
<v-toolbar dark color="primary" dense flat>
|
|
<v-toolbar-title>Survey Diagnostic Stress (SDS 30)</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-toolbar-items>
|
|
<v-btn dark @click="changeTypeSDS('SDS30')" v-if="typeSdsForm === 'SRQ20'" small color="orange">
|
|
<v-icon dark>close</v-icon> Tidak Aktif</v-btn>
|
|
<v-btn dark v-if="typeSdsForm === 'SDS30'" small color="success"><v-icon dark>check</v-icon>
|
|
Aktif</v-btn>
|
|
</v-toolbar-items>
|
|
</v-toolbar>
|
|
|
|
<v-layout v-for="(qst, i) in formData.sds30.questions" v-if="typeSdsForm === 'SDS30'" row class="pa-2"
|
|
:key="testStatus + typeSdsForm + i">
|
|
<v-flex shrink pa-1 class="mr-2 font-weight-bold">
|
|
{{ qst.orderNumber }}
|
|
</v-flex>
|
|
<v-flex grow pa-1>
|
|
<div class="font-weight-bold">
|
|
{{ qst.display }}
|
|
</div>
|
|
|
|
<v-layout row wrap>
|
|
<v-radio-group @change="interpretationSds()" hide-details v-if="testStatus && typeSdsForm" row
|
|
v-model="qst.value">
|
|
<v-radio v-for="(opt, j) in formData.sds30.options" :key="j" class="mb-1"
|
|
:label="opt.display" :value="opt.id"></v-radio>
|
|
</v-radio-group>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
<div v-if="typeSdsForm === 'SDS30'" class="pa-2">
|
|
<v-data-table :headers="headerSds" :items="formData.sds30.interpretation" hide-actions
|
|
class="elevation-1">
|
|
<template slot="headerCell" slot-scope="props">
|
|
<span>
|
|
{{ props.header.text }}
|
|
</span>
|
|
</template>
|
|
<template v-slot:items="props">
|
|
<td>{{ props.item.display }}</td>
|
|
<td class="text-xs-center">
|
|
{{ props.item.score }}
|
|
</td>
|
|
<td class="text-xs-center">
|
|
{{ props.item.levelDisplay }}
|
|
</td>
|
|
</template>
|
|
</v-data-table>
|
|
</div>
|
|
<v-toolbar class="mt-2" dense dark color="primary" flat>
|
|
<v-toolbar-title>Survey Reporting Questioner (SRQ 20)</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-toolbar-items>
|
|
<v-btn @click="changeTypeSDS('SRQ20')" v-if="typeSdsForm === 'SDS30'" dark small color="orange">
|
|
<v-icon dark>close</v-icon> Tidak Aktif</v-btn>
|
|
<v-btn dark v-if="typeSdsForm === 'SRQ20'" small color="success"><v-icon dark>check</v-icon>
|
|
Aktif</v-btn>
|
|
</v-toolbar-items>
|
|
</v-toolbar>
|
|
|
|
<v-layout v-if="typeSdsForm === 'SRQ20'" v-for="(qst, i) in formData.srq20.questions" row class="pa-2"
|
|
:key="testStatus + typeSdsForm + i">
|
|
<v-flex shrink pa-1 class="mr-2 font-weight-bold">
|
|
{{ qst.orderNumber }}
|
|
</v-flex>
|
|
<v-flex grow pa-1>
|
|
<div class="font-weight-bold">
|
|
{{ qst.display }}
|
|
</div>
|
|
|
|
<div>
|
|
<v-radio-group @change="interpretationSrq()" hide-details :key="testStatus + typeSdsForm" row
|
|
v-model="qst.value">
|
|
<v-radio v-for="(opt, j) in formData.srq20.options" :key="j" class="mb-1"
|
|
:label="opt.display" :value="opt.id"></v-radio>
|
|
</v-radio-group>
|
|
</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
<div v-if="typeSdsForm === 'SRQ20'" class="pa-2">
|
|
<v-data-table :headers="headerSrq" :items="formData.srq20.interpretation" hide-actions
|
|
class="elevation-1">
|
|
<template slot="headerCell" slot-scope="props">
|
|
<span>
|
|
{{ props.header.text }}
|
|
</span>
|
|
</template>
|
|
<template v-slot:items="props">
|
|
<td>{{ props.item.display }}</td>
|
|
<td class="text-xs-center">
|
|
{{ props.item.score }}
|
|
</td>
|
|
<td class="text-xs-center">
|
|
{{ props.item.levelDisplay }}
|
|
</td>
|
|
</template>
|
|
</v-data-table>
|
|
</div>
|
|
</div>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
props: {
|
|
formData: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
typeSdsForm: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
testStatus: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
headerSds: [
|
|
{
|
|
text: "KOMPONEN STRESS KERJA",
|
|
value: "string",
|
|
sortable: false,
|
|
align: "center",
|
|
class: "font-font-weight-bold pa-2 primary white--text",
|
|
width: "60%",
|
|
},
|
|
{
|
|
text: "SKOR",
|
|
value: "string",
|
|
sortable: false,
|
|
align: "center",
|
|
class: "font-font-weight-bold pa-2 primary white--text",
|
|
width: "20%",
|
|
},
|
|
{
|
|
text: "TINGKAT STRESS",
|
|
value: "string",
|
|
align: "center",
|
|
sortable: false,
|
|
class: "font-font-weight-bold pa-2 primary white--text",
|
|
width: "20%",
|
|
},
|
|
],
|
|
headerSrq: [
|
|
{
|
|
text: "GEJALA",
|
|
value: "string",
|
|
sortable: false,
|
|
align: "center",
|
|
class: "font-font-weight-bold pa-2 primary white--text",
|
|
width: "60%",
|
|
},
|
|
{
|
|
text: "SKOR",
|
|
value: "string",
|
|
sortable: false,
|
|
align: "center",
|
|
class: "font-font-weight-bold pa-2 primary white--text",
|
|
width: "20%",
|
|
},
|
|
{
|
|
text: "NTEPRETASI",
|
|
value: "string",
|
|
align: "center",
|
|
sortable: false,
|
|
class: "font-font-weight-bold pa-2 primary white--text",
|
|
width: "20%",
|
|
},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
changeTypeSDS(value) {
|
|
this.$emit('change-type-sds', value);
|
|
},
|
|
interpretationSds() {
|
|
this.$emit('interpretation-sds');
|
|
},
|
|
interpretationSrq() {
|
|
this.$emit('interpretation-srq');
|
|
}
|
|
}
|
|
}
|
|
</script> |