mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-12 19:31:07 +03:30
responsive
This commit is contained in:
shokouhi
@@ -8,39 +8,38 @@
|
||||
<hr class="v-divider theme--light">
|
||||
</v-flex>
|
||||
<v-layout row wrap class="ml-4">
|
||||
<v-flex xs12 md6 sm6>
|
||||
<div class="WM-d-flex">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<!-- class="WM-d-flex" -->
|
||||
<div>
|
||||
<span class="title">Cycle ID :</span>
|
||||
<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.id }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
|
||||
|
||||
<v-flex xs12 md6 sm6>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<div>
|
||||
<span class="title">Sterilizer ID :</span>
|
||||
<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.sterilizer_id }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 sm6>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-user"></v-icon>
|
||||
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.user ? data.user.name : '' }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 sm6>
|
||||
<div class="WM-d-flex">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<div>
|
||||
<span class="title">Cycle Number :</span>
|
||||
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.cycle_number }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 sm6>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-Industry"></v-icon>
|
||||
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.date }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 sm6>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-pencil"></v-icon>
|
||||
<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.note }}</span>
|
||||
|
||||
@@ -8,25 +8,25 @@
|
||||
<hr class="v-divider theme--light">
|
||||
</v-flex>
|
||||
<v-layout row wrap class="ml-4">
|
||||
<v-flex xs12 md6 sm6>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-info"></v-icon>
|
||||
<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 sm6>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-Industry"></v-icon>
|
||||
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 sm6>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-user"></v-icon>
|
||||
<span class="headline ml-2" style="letter-spacing:0 !important">{{ data.user ? data.user.name : '' }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 md6 sm6>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<div class="WM-d-flex">
|
||||
<v-icon class="WMi-pencil"></v-icon>
|
||||
<span class="headline ml-1" style="letter-spacing:0 !important">{{ data.note }}</span>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
>{{ data.device_id }}</span>
|
||||
</div>
|
||||
</v-flex> -->
|
||||
<v-flex xs6 md6 sm6>
|
||||
<v-flex xs3 md3 sm3>
|
||||
<div class>
|
||||
<span class="subtitle-1">Result :</span>
|
||||
<v-icon class="green--text ml-2 caption">fas fa-check</v-icon>
|
||||
@@ -27,7 +27,7 @@
|
||||
>{{ data.result }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs6 md6 sm6>
|
||||
<v-flex xs3 md3 sm3>
|
||||
<div class>
|
||||
<span class="subtitle-1">verify :</span>
|
||||
<v-icon class="pink--text ml-2 caption">fas fa-times</v-icon>
|
||||
@@ -37,7 +37,7 @@
|
||||
>{{ data.verified }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs6 md6 sm6>
|
||||
<v-flex xs3 md3 sm3>
|
||||
<div class>
|
||||
<span class="subtitle-1">Register User :</span>
|
||||
<span
|
||||
@@ -46,7 +46,7 @@
|
||||
>{{ data.user.name }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs6 md6 sm6>
|
||||
<v-flex xs3 md3 sm3>
|
||||
<div class>
|
||||
<span class="subtitle-1">Date :</span>
|
||||
<span
|
||||
@@ -55,7 +55,7 @@
|
||||
>{{ data.created_at }}</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs6 md6 sm6>
|
||||
<v-flex xs3 md3 sm3>
|
||||
<div class>
|
||||
<span class="subtitle-1">Medical Center :</span>
|
||||
<span
|
||||
@@ -74,9 +74,9 @@
|
||||
<v-layout row wrap class="ml-4">
|
||||
<template v-if="data.inputs">
|
||||
<v-flex
|
||||
xs12
|
||||
md12
|
||||
sm12
|
||||
xs3
|
||||
md3
|
||||
sm3
|
||||
v-for="(inputData, keyInputs) in data.inputs"
|
||||
:key="keyInputs"
|
||||
>
|
||||
@@ -89,9 +89,9 @@
|
||||
</template>
|
||||
<template v-if="data.options">
|
||||
<v-flex
|
||||
xs6
|
||||
md6
|
||||
sm6
|
||||
xs3
|
||||
md3
|
||||
sm3
|
||||
v-for="(optionData, keyOptions) in data.options"
|
||||
:key="keyOptions"
|
||||
>
|
||||
@@ -105,16 +105,22 @@
|
||||
</v-flex>
|
||||
</template>
|
||||
<template v-if="data.children">
|
||||
<v-layout row wrap class="WM-Width-Full">
|
||||
<v-flex class="mt-4 pb-4" style="border-left:3px solid #32c5d2;border-bottom:1px solid #ddd"
|
||||
xs6
|
||||
xs3
|
||||
md6
|
||||
sm6
|
||||
v-for="(formData, keyForm) in data.children"
|
||||
:key="keyForm"
|
||||
>
|
||||
<h4 class="ml-3 headline font-weight-bold">{{keyForm}}</h4>
|
||||
<div v-for="(childData, keyChild) in formData" :key="keyChild">
|
||||
<div class="ml-4">
|
||||
<v-layout row wrap>
|
||||
<v-layout row wrap v-for="(childData, keyChild) in formData" :key="keyChild">
|
||||
<v-flex
|
||||
xs12
|
||||
md12
|
||||
sm12
|
||||
class="ml-4">
|
||||
<span class="subtitle-1">{{keyChild}} :</span>
|
||||
<template v-if="Array.isArray(childData)">
|
||||
<span
|
||||
@@ -127,9 +133,11 @@
|
||||
<template v-else>
|
||||
<span class="headline ml-2">{{childData}}</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</template>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
@@ -139,7 +147,8 @@
|
||||
<hr class="v-divider theme--light" />
|
||||
</v-flex>
|
||||
<v-layout row wrap class="ml-4">
|
||||
<v-flex xs12 md6 sm6 v-for="(img, key) in data.images" :key="key">
|
||||
<!-- <LightBox :media="data.images.map(img => ({thumb: img.path, src: img.path}))" style="width: 20%"></LightBox> -->
|
||||
<v-flex xs6 md2 sm2 v-for="(img, key) in data.images" :key="key">
|
||||
<img :src="'/'+img.path" style="width: 100%" />
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
@@ -148,10 +157,10 @@
|
||||
<material-card> -->
|
||||
<v-layout row wrap align-center justify-center class="px-5 my-3" v-if="$hasRole('Admin|Supervisor')">
|
||||
<v-flex
|
||||
class="mr-4"
|
||||
class="WM-Align-R mr-1"
|
||||
xs12
|
||||
md2
|
||||
sm2
|
||||
md3
|
||||
sm3
|
||||
v-if="data.verified == 'NotVerified'"
|
||||
@click="verify(data.id)"
|
||||
>
|
||||
@@ -160,7 +169,7 @@
|
||||
<span class="white--text">Verify</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex class xs12 md2 sm2 v-else>
|
||||
<v-flex class="WM-Align-R" xs6 md3 sm3 v-else>
|
||||
<v-btn
|
||||
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
|
||||
@click="verify(data.id)"
|
||||
@@ -170,9 +179,19 @@
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs6 md2 sm2>
|
||||
<a :href="'/Show/TestResult/'+data.id">
|
||||
<v-btn
|
||||
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
|
||||
>
|
||||
<v-icon class="black--text mr-2 caption">fas fa-print</v-icon>
|
||||
<span class="black--text">Go to Print Page</span>
|
||||
</v-btn>
|
||||
</a>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row wrap align-center justify-center class="px-5 my-3" >
|
||||
<v-flex class xs12 md2 sm2>
|
||||
<!-- <v-flex class xs6 md2 sm2>
|
||||
<v-btn
|
||||
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Gray"
|
||||
@click="print"
|
||||
@@ -180,7 +199,7 @@
|
||||
<v-icon class="black--text mr-2 caption">fas fa-print</v-icon>
|
||||
<span class="black--text">Print</span>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-flex> -->
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
@@ -196,8 +215,13 @@ export default {
|
||||
import { mapGetters, mapMutations } from "vuex";
|
||||
import { ApiService } from "@/services";
|
||||
import { urls } from "@/config/urls";
|
||||
import LightBox from 'vue-image-lightbox';
|
||||
import 'vue-image-lightbox/dist/vue-image-lightbox.min.css'
|
||||
export default {
|
||||
data: () => ({}),
|
||||
components:{
|
||||
LightBox
|
||||
},
|
||||
methods: {
|
||||
...mapMutations("modal", ["closeModal", "setResultModal"]),
|
||||
async verify(id) {
|
||||
@@ -243,7 +267,7 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.data = this.getModalProperties.result.data.data;
|
||||
console.log(this.data);
|
||||
console.log(this.data.images.map(img => img.path));
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
Reference in New Issue
Block a user