Files
cssd-back/resources/js/vue/views/TestResult/AddEdit.vue
T
2020-07-04 23:26:44 +04:30

676 lines
20 KiB
Vue

<template>
<v-form ref="form">
<v-container grid-list-xs>
<material-card color="black" title="Submit Test Result">
<v-layout wrap class="px-5 my-3" v-if="!$route.params.testResult">
<v-flex xs12 md2 sm3 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete
:search-input.sync="searchInput"
:items="testTypeNames"
v-model="filter.name"
label="Choose Test Type"
color="black"
class="py-3 pr-3"
></v-autocomplete>
</v-flex>
<v-flex xs12 md2 sm3 class="WM-FlexCenter ml-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
<v-text-field
name="testcode"
v-model="filter.unique_code"
label="Or Enter Test Unique Code"
color="black"
class="py-3 pr-3"
></v-text-field>
</v-flex>
<!-- <v-spacer></v-spacer> -->
<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 wrap class="px-5 my-3" v-if="form.length">
<v-flex xs12 sm12 md12>
<h3 class="WM-BorderLeftTitle">{{testTypeNameSelected}}</h3>
</v-flex>
<!-- <v-flex xs12 sm3 md3>
<v-text-field
name="id"
v-model="formData.device_id"
:label="device_label[formData.device_label]"
color="black"
class="pa-2"
prepend-icon="fas fa-sort-numeric-up"
></v-text-field>
</v-flex> -->
<v-flex xs12 sm2 md2>
<v-menu
lazy
:close-on-content-click="true"
transition="v-scale-transition"
offset-y
v-model="menu"
class="pa-2"
>
<v-text-field style="padding-top:0 !important"
prepend-icon="far fa-calendar-alt"
required
slot="activator"
label="Date"
v-model="formData.date"
color="black"
></v-text-field>
<v-date-picker
min="2020-01-01"
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 sm2 md2>
<v-switch color="light-green accent-3" v-model="result" :label="'Result: ' + formData.result"></v-switch>
</v-flex>
<v-spacer></v-spacer>
<v-flex xs12 sm12 md12>
<template v-if="galleryDataLoaded">
<wm-Dropzone :Images="galleries" :BatchID="file_batch_id" :ModelID="$route.params.testResult" ModelType="TestResult"></wm-Dropzone>
</template>
</v-flex>
</v-layout>
<!--______________________ DynamicComponent :: Began _______________________-->
<v-layout wrap class="px-5 my-3">
<v-flex :class="['pa-2', item.size]" v-for="(item, key) in form" :key="key">
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Temperature'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<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-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Text'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-text-field
v-model="formData[item.name+'_'+item.id]"
:label="item.name"
color="black"
prepend-icon="fa fa-align-left"
></v-text-field>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Pressure'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<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-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Select'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12>
<v-select
multiple
prepend-icon="fa fa-check"
:items="item.options"
v-model="formData[item.name+'_'+item.id]"
:label="item.name"
color="black"
item-text="title"
item-value="id"
></v-select>
</v-flex>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Checkbox'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12 class="WM-FlexWrap mr-3">
<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-flex>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Radiobutton'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12 class="WM-FlexWrap">
<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-flex>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Switch'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12>
<v-switch
color="light-green accent-3"
v-model="formData[item.name+'_'+item.id]"
:label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
></v-switch>
</v-flex>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Range'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<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"
color="black"
prepend-icon="fa fa-sliders"
></v-slider>
</v-flex>
</v-container>
</v-layout>
</v-container>
<v-container row md-12 sm-12 xs-12 v-if="item.type == 'Time'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ item.name }}</h3>
</v-layout>
<v-layout row wrap>
<v-container fluid class="WM-Padding-LR-0">
<v-flex xs12>
<v-text-field
v-model="formData[item.name+'_'+item.id]"
:label="item.name"
class="WM-Font-30"
mask="##:##"
color="black"
prepend-icon="fa fa-clock-o"
></v-text-field>
</v-flex>
</v-container>
</v-layout>
</v-container>
<!-- <v-layout row wrap>
<template v-if="item.type == 'Form'"> -->
<v-container row md-12 sm-12 xs-12 class="WM-Border WM-Border-LightGray WM-Padding-10 WM-BorderRadius-5" v-if="item.type == 'Form'">
<v-layout row wrap>
<h3 class="WM-BorderLeftTitle">{{ 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-container fluid v-if="children.type == 'Text'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-text-field
prepend-icon="fa fa-align-left"
v-model="formData[children.name+'_'+children.id]"
:label="children.name"
color="black"
></v-text-field>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Temperature'" class="WM-Padding-LR-0">
<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'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-slider
prepend-icon="fa fa-flask"
v-model="formData[children.name+'_'+children.id]"
min="-1"
step="0.01"
max="3"
thumb-label="always"
></v-slider>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Select'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-select
multiple
prepend-icon="fa fa-check"
:items="children.options"
v-model="formData[children.name+'_'+children.id]"
:label="children.name"
color="black"
item-text="title"
item-value="id"
></v-select>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Checkbox'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12 class="WM-FlexWrap mr-3">
<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-flex>
</v-container>
<v-container fluid v-if="children.type == 'Radiobutton'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12 class="WM-FlexWrap">
<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-flex>
</v-container>
<v-container fluid v-if="children.type == 'Switch'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-switch
color="light-green accent-3"
v-model="formData[children.name+'_'+children.id]"
:label="children.name + ': ' + formData[children.name+'_'+children.id].toString()"
></v-switch>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Range'" class="WM-Padding-LR-0">
<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"
prepend-icon="fa fa-check"
></v-slider>
</v-flex>
</v-container>
<v-container fluid v-if="children.type == 'Time'" class="WM-Padding-LR-0">
<p>{{ children.name }}</p>
<v-flex xs12>
<v-text-field
v-model="formData[children.name+'_'+children.id]"
:label="children.name"
class="WM-Font-30"
mask="##:##"
prepend-icon="fa fa-clock-o"
></v-text-field>
</v-flex>
</v-container>
</v-flex>
</v-layout>
</v-container>
<!-- </template>
</v-layout> -->
</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: 'AllResultTest'}">
<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 Dropzone from '@/components/core/Dropzone'
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
components : {
'wm-Dropzone' : Dropzone,
},
data: () => ({
galleryDataLoaded: false,
galleries: [],
file_batch_id: Math.floor(Math.random() * 9000000000) + 1000000000,
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: "",
date : "2020-01-01"
},
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();
}
else{
this.galleryDataLoaded= true;
}
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;
this.galleries = result.data.data.filesPath;
this.galleryDataLoaded = true;
}
}
}
},
async submitForm() {
let result;
this.formData['file_batch_id'] = this.file_batch_id;
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(.light-green--text) {
/* color: #F44336 !important; */
color: #ed1c24;
}
.v-input--switch__thumb:not(.light-green--text) {
/* background-color: #F44336 !important; */
background-color: #ed1c24;
}
.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;
}
.v-input--selection-controls__input {
margin-right :0;
}
.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
margin-bottom : 0;
}
.v-input--radio-group--column .v-input--radio-group__input {
flex-direction: row;
}
.v-input--selection-controls .v-input__control {
margin-right: 12px;
}
.v-input--selection-controls__input {
margin-right: 7px;
}
.accent--text {
color: #E91E63 !important;
caret-color: #E91E63 !important;
}
.WM-Padding-LR-0 {
padding:24px 0;
}
.WM-BorderLeftTitle {
border-left: 1px solid;
padding-left: 5px;
}
</style>