mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-13 01:41:07 +03:30
528 lines
15 KiB
Vue
528 lines
15 KiB
Vue
<template>
|
|
<v-form ref="form">
|
|
<v-container grid-list-xs>
|
|
<material-card color="black" title="Submit Test Result">
|
|
<v-layout align-center justify-center wrap class="px-5 my-3" v-if="!$route.params.testResult">
|
|
<v-flex xs12 sm4 md4>
|
|
<v-autocomplete
|
|
:search-input.sync="searchInput"
|
|
:items="testTypeNames"
|
|
v-model="filter.name"
|
|
label="Choose Test Type"
|
|
color="black"
|
|
class="pa-2"
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
<v-flex xs12 sm3 md3>
|
|
<v-text-field
|
|
name="testcode"
|
|
v-model="filter.unique_code"
|
|
label="Or Enter Test Unique Code"
|
|
color="black"
|
|
class="pa-2"
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-center">
|
|
<v-btn
|
|
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
|
|
@click="selectTestType"
|
|
style="padding:10px 60px;"
|
|
>
|
|
<v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
|
|
<span class="black--text">Select Test Result</span>
|
|
</v-btn>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult && form.length">
|
|
<v-divider></v-divider>
|
|
</v-layout>
|
|
<v-layout align-center justify-center wrap class="px-5 my-3" v-if="form.length">
|
|
<v-flex xs12 sm12 md12>
|
|
<h3>{{testTypeNameSelected}}</h3>
|
|
</v-flex>
|
|
<v-flex xs12 sm4 md4>
|
|
<v-text-field
|
|
name="id"
|
|
v-model="formData.device_id"
|
|
:label="device_label[formData.device_label]"
|
|
color="black"
|
|
class="pa-2"
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs12 sm4 md4>
|
|
<v-menu
|
|
lazy
|
|
:close-on-content-click="true"
|
|
transition="v-scale-transition"
|
|
offset-y
|
|
v-model="menu"
|
|
>
|
|
<v-text-field
|
|
prepend-icon="far fa-clock"
|
|
required
|
|
slot="activator"
|
|
label="Date"
|
|
v-model="formData.date"
|
|
></v-text-field>
|
|
<v-date-picker
|
|
color="pink"
|
|
no-title
|
|
v-model="formData.date"
|
|
:date-format="date => new Date(formData.date).toDateString()"
|
|
></v-date-picker>
|
|
</v-menu>
|
|
</v-flex>
|
|
<v-flex xs12 sm4 md4>
|
|
<v-switch color="green" v-model="result" :label="'Result: ' + formData.result"></v-switch>
|
|
</v-flex>
|
|
<v-flex xs12 sm12 md12>
|
|
<div>
|
|
<input type="file" class="inputfile" @change="onFileChange" multiple />
|
|
<label for="file">
|
|
<v-icon class="v-icon greylighten-3--text mr-2 caption IconHover">fas fa-chevron-right</v-icon>Choose a file
|
|
</label>
|
|
</div>
|
|
<v-layout>
|
|
<v-flex v-for="(img, key) in images" :key="key" xs12 sm6 md3>
|
|
<img :src="img" style="width:100%;" />
|
|
<v-btn class="black" @click.native.stop="removeImage(key)">Remove image</v-btn>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
<v-flex :class="['pa-2', item.size]" v-for="(item, key) in form" :key="key">
|
|
<v-text-field
|
|
v-if="item.type == 'Text'"
|
|
v-model="formData[item.name+'_'+item.id]"
|
|
:label="item.name"
|
|
color="black"
|
|
></v-text-field>
|
|
<v-container fluid v-if="item.type == 'Temperature'">
|
|
<p>{{ item.name }}</p>
|
|
<v-flex xs12>
|
|
<v-slider
|
|
step="0.1"
|
|
prepend-icon="fas fa-temperature-high"
|
|
v-model="formData[item.name+'_'+item.id]"
|
|
min="0"
|
|
max="200"
|
|
thumb-label="always"
|
|
></v-slider>
|
|
</v-flex>
|
|
</v-container>
|
|
<v-container fluid v-if="item.type == 'Pressure'">
|
|
<p>{{ item.name }}</p>
|
|
<v-flex xs12>
|
|
<v-slider
|
|
prepend-icon="fa fa-flask"
|
|
step="0.01"
|
|
v-model="formData[item.name+'_'+item.id]"
|
|
min="-1"
|
|
max="3"
|
|
thumb-label="always"
|
|
></v-slider>
|
|
</v-flex>
|
|
</v-container>
|
|
<v-select
|
|
multiple
|
|
v-if="item.type == 'Select'"
|
|
:items="item.options"
|
|
v-model="formData[item.name+'_'+item.id]"
|
|
:label="item.name"
|
|
color="black"
|
|
item-text="title"
|
|
item-value="id"
|
|
></v-select>
|
|
<v-container fluid v-if="item.type == 'Checkbox'">
|
|
<p>{{ item.name }}</p>
|
|
<v-checkbox
|
|
v-for="(optionValue, keyOption) in item.options"
|
|
:key="keyOption"
|
|
:label="optionValue.title"
|
|
v-model="formData[item.name+'_'+item.id]"
|
|
:value="optionValue.id"
|
|
></v-checkbox>
|
|
</v-container>
|
|
<v-container fluid v-if="item.type == 'Radiobutton'">
|
|
<p>{{ item.name }}</p>
|
|
<v-radio-group v-model="formData[item.name+'_'+item.id]">
|
|
<v-radio
|
|
v-for="(optionValue, keyOption) in item.options"
|
|
:key="keyOption"
|
|
:label="optionValue.title"
|
|
:value="optionValue.id"
|
|
></v-radio>
|
|
</v-radio-group>
|
|
</v-container>
|
|
<v-container fluid v-if="item.type == 'Switch'">
|
|
<v-switch
|
|
color="green"
|
|
v-model="formData[item.name+'_'+item.id]"
|
|
:label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
|
|
></v-switch>
|
|
</v-container>
|
|
<v-container fluid v-if="item.type == 'Range'">
|
|
<p>{{ item.name }}</p>
|
|
<v-flex xs12>
|
|
<v-slider
|
|
v-model="formData[item.name+'_'+item.id]"
|
|
:min="item.options[0].title"
|
|
:max="item.options[1].title"
|
|
thumb-label="always"
|
|
></v-slider>
|
|
</v-flex>
|
|
</v-container>
|
|
<v-container fluid v-if="item.type == 'Time'">
|
|
<v-flex xs12>
|
|
<v-text-field
|
|
v-model="formData[item.name+'_'+item.id]"
|
|
:label="item.name"
|
|
class="WM-Font-30"
|
|
mask="##:##"
|
|
></v-text-field>
|
|
</v-flex>
|
|
</v-container>
|
|
<template v-if="item.type == 'Form'">
|
|
<v-container row md-12 sm-12 xs-12>
|
|
<v-layout row wrap>
|
|
<h3>{{ item.name }}</h3>
|
|
</v-layout>
|
|
<v-layout row wrap>
|
|
<v-flex
|
|
:class="['pa-2', children.size]"
|
|
v-for="(children, keyChildren) in item.children"
|
|
:key="keyChildren"
|
|
>
|
|
<v-text-field
|
|
v-if="children.type == 'Text'"
|
|
v-model="formData[children.name+'_'+children.id]"
|
|
:label="children.name"
|
|
color="black"
|
|
></v-text-field>
|
|
<v-container fluid v-if="children.type == 'Temperature'">
|
|
<p>{{ children.name }}</p>
|
|
<v-flex xs12>
|
|
<v-slider
|
|
prepend-icon="fas fa-temperature-high"
|
|
step="0.1"
|
|
v-model="formData[children.name+'_'+children.id]"
|
|
min="0"
|
|
max="200"
|
|
thumb-label="always"
|
|
></v-slider>
|
|
</v-flex>
|
|
</v-container>
|
|
<v-container fluid v-if="children.type == 'Pressure'">
|
|
<p>{{ children.name }}</p>
|
|
<v-flex xs12>
|
|
<v-slider
|
|
v-model="formData[children.name+'_'+children.id]"
|
|
min="-1"
|
|
step="0.01"
|
|
max="3"
|
|
prepend-icon="fa fa-flask"
|
|
thumb-label="always"
|
|
></v-slider>
|
|
</v-flex>
|
|
</v-container>
|
|
<v-select
|
|
multiple
|
|
v-if="children.type == 'Select'"
|
|
:items="children.options"
|
|
v-model="formData[children.name+'_'+children.id]"
|
|
:label="children.name"
|
|
color="black"
|
|
item-text="title"
|
|
item-value="id"
|
|
></v-select>
|
|
<v-container fluid v-if="children.type == 'Checkbox'">
|
|
<p>{{ children.name }}</p>
|
|
<v-checkbox
|
|
v-for="(optionValue, keyOption) in children.options"
|
|
:key="keyOption"
|
|
:label="optionValue.title"
|
|
v-model="formData[children.name+'_'+children.id]"
|
|
:value="optionValue.id"
|
|
></v-checkbox>
|
|
</v-container>
|
|
<v-container fluid v-if="children.type == 'Radiobutton'">
|
|
<p>{{ children.name }}</p>
|
|
<v-radio-group v-model="formData[children.name+'_'+children.id]">
|
|
<v-radio
|
|
v-for="(optionValue, keyOption) in children.options"
|
|
:key="keyOption"
|
|
:label="optionValue.title"
|
|
:value="optionValue.id"
|
|
></v-radio>
|
|
</v-radio-group>
|
|
</v-container>
|
|
<v-container fluid v-if="children.type == 'Switch'">
|
|
<v-switch
|
|
color="green"
|
|
v-model="formData[children.name+'_'+children.id]"
|
|
:label="children.name + ': ' + formData[children.name+'_'+children.id].toString()"
|
|
></v-switch>
|
|
</v-container>
|
|
<v-container fluid v-if="children.type == 'Range'">
|
|
<p>{{ item.name }}</p>
|
|
<v-flex xs12>
|
|
<v-slider
|
|
v-model="formData[children.name+'_'+children.id]"
|
|
:min="children.options[0].title"
|
|
:max="children.options[1].title"
|
|
thumb-label="always"
|
|
></v-slider>
|
|
</v-flex>
|
|
</v-container>
|
|
<v-container fluid v-if="children.type == 'Time'">
|
|
<v-flex xs12>
|
|
<v-text-field
|
|
v-model="formData[children.name+'_'+children.id]"
|
|
:label="children.name"
|
|
class="WM-Font-30"
|
|
mask="##:##"
|
|
></v-text-field>
|
|
</v-flex>
|
|
</v-container>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</template>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout row wrap class="px-5 my-3">
|
|
<v-divider></v-divider>
|
|
</v-layout>
|
|
<v-layout align-center justify-center wrap class="px-5 mt-2">
|
|
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm">
|
|
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
|
|
<span class="white--text">SAVE</span>
|
|
</v-btn>
|
|
<router-link :to="{name: 'Dashboard'}">
|
|
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
|
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
|
<span class="black--text">Back</span>
|
|
</v-btn>
|
|
</router-link>
|
|
</v-layout>
|
|
</material-card>
|
|
</v-container>
|
|
</v-form>
|
|
</template>
|
|
<script>
|
|
import { ApiService } from "@/services";
|
|
import { urls } from "@/config/urls";
|
|
export default {
|
|
data: () => ({
|
|
testTypeNames: [],
|
|
testTypeNameSelected: "",
|
|
searchInput: "",
|
|
form: [],
|
|
filter: {
|
|
test_result_id: "",
|
|
name: "",
|
|
unique_code: ""
|
|
},
|
|
result: false,
|
|
formData: {
|
|
device_id: "",
|
|
device_label: "ID",
|
|
result: "Reject",
|
|
img: null,
|
|
test_type_id: ""
|
|
},
|
|
images: [],
|
|
menu: "",
|
|
device_label: {
|
|
WasherID: "Washer ID",
|
|
AutoclaveID: "Autoclave ID",
|
|
SterilizerID: "Sterilizer ID",
|
|
WasherMachineID: "WasherMachine ID",
|
|
SealMachineID: "SealMachine ID",
|
|
PatientID: "Patient ID",
|
|
"Set/PackID": "Set/Pack ID",
|
|
MDID: "MD ID",
|
|
ORID: "OR ID",
|
|
PersonalID: "Personal ID",
|
|
InstrumentID: "Instrument ID",
|
|
ID: "ID"
|
|
}
|
|
}),
|
|
created() {
|
|
if (this.$route.params.testResult) {
|
|
this.filter.test_result_id = this.$route.params.testResult;
|
|
this.selectTestType();
|
|
}
|
|
this.load();
|
|
},
|
|
methods: {
|
|
async load() {
|
|
const result = await ApiService.get(urls.listTestTypeName);
|
|
this.testTypeNames = result.data.data;
|
|
},
|
|
async selectTestType() {
|
|
const result = await ApiService.post(urls.getInputs, this.filter);
|
|
if (result && result.status == 200) {
|
|
this.testTypeNameSelected = result.data.data.testType.name;
|
|
this.form = result.data.data.inputs;
|
|
this.formData.test_type_id = result.data.data.testType.id;
|
|
this.formData.device_label =
|
|
result.data.data.testType.device_label;
|
|
for (const key in result.data.data.inputs) {
|
|
if (result.data.data.inputs.hasOwnProperty(key)) {
|
|
if (result.data.data.inputs[key].type == "Form") {
|
|
for (const keyForm in result.data.data.inputs[key]
|
|
.children) {
|
|
if (
|
|
result.data.data.inputs[
|
|
key
|
|
].children.hasOwnProperty(keyForm)
|
|
) {
|
|
if (
|
|
result.data.data.inputs[key].children[
|
|
keyForm
|
|
].type == "Checkbox" ||
|
|
result.data.data.inputs[key].children[
|
|
keyForm
|
|
].type == "Select"
|
|
) {
|
|
this.formData[
|
|
result.data.data.inputs[key]
|
|
.children[keyForm].name +
|
|
"_" +
|
|
result.data.data.inputs[key]
|
|
.children[keyForm].id
|
|
] = [];
|
|
} else {
|
|
this.formData[
|
|
result.data.data.inputs[key]
|
|
.children[keyForm].name +
|
|
"_" +
|
|
result.data.data.inputs[key]
|
|
.children[keyForm].id
|
|
] = "";
|
|
}
|
|
}
|
|
}
|
|
} else if (
|
|
result.data.data.inputs[key].type == "Checkbox" ||
|
|
result.data.data.inputs[key].type == "Select"
|
|
) {
|
|
this.formData[
|
|
result.data.data.inputs[key].name +
|
|
"_" +
|
|
result.data.data.inputs[key].id
|
|
] = [];
|
|
} else {
|
|
this.formData[
|
|
result.data.data.inputs[key].name +
|
|
"_" +
|
|
result.data.data.inputs[key].id
|
|
] = "";
|
|
}
|
|
}
|
|
}
|
|
if (this.$route.params.testResult) {
|
|
const result = await ApiService.get(
|
|
urls.editTestResult(this.$route.params.testResult)
|
|
);
|
|
if (result && result.status == 200) {
|
|
this.formData = result.data.data;
|
|
for (const key in result.data.data.imagesPath) {
|
|
if (
|
|
result.data.data.imagesPath.hasOwnProperty(key)
|
|
) {
|
|
result.data.data.imagesPath[key] =
|
|
"/" + result.data.data.imagesPath[key];
|
|
}
|
|
}
|
|
this.images = result.data.data.imagesPath;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
async submitForm() {
|
|
let result;
|
|
if (this.$route.params.testResult) {
|
|
result = await ApiService.put(
|
|
urls.updateTestResult(this.$route.params.testResult),
|
|
this.formData
|
|
);
|
|
} else {
|
|
result = await ApiService.post(
|
|
urls.storeTestResult,
|
|
this.formData
|
|
);
|
|
}
|
|
|
|
if (result && result.status == 200) {
|
|
this.$router.push({ name: "AllResultTest" });
|
|
}
|
|
},
|
|
onFileChange(e) {
|
|
var files = e.target.files || e.dataTransfer.files;
|
|
if (!files.length) return;
|
|
for (const key in files) {
|
|
if (files.hasOwnProperty(key)) {
|
|
this.createImage(files[key], key);
|
|
}
|
|
}
|
|
},
|
|
createImage(file, index) {
|
|
var image = new Image();
|
|
var reader = new FileReader();
|
|
var vm = this;
|
|
|
|
reader.onload = e => {
|
|
vm.images.push(e.target.result);
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
},
|
|
removeImage(index) {
|
|
this.images.splice(index, 1);
|
|
}
|
|
},
|
|
watch: {
|
|
images(img) {
|
|
this.formData.imgs = img;
|
|
},
|
|
result(value) {
|
|
if (value) {
|
|
this.formData.result = "Accept";
|
|
} else {
|
|
this.formData.result = "Reject";
|
|
}
|
|
},
|
|
formData(value) {
|
|
if (value.result == "Accept") {
|
|
this.result = true;
|
|
} else {
|
|
this.result = false;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style >
|
|
.WM-Font-30 input {
|
|
font-size: 30px !important;
|
|
}
|
|
|
|
.v-input--switch__track:not(.green--text) {
|
|
color: red !important;
|
|
}
|
|
|
|
.v-input--switch__thumb:not(.green--text) {
|
|
background-color: red !important;
|
|
}
|
|
.v-btn--floating {
|
|
padding: 0 !important;
|
|
}
|
|
.theme--light.v-btn.v-btn--flat {
|
|
color: rgba(0, 0, 0, 0.87) !important;
|
|
}
|
|
.v-btn--floating,
|
|
.v-btn--icon:before {
|
|
border-radius: 50% !important;
|
|
}
|
|
</style> |