cssd-doc/cssd-back
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-back.git synced 2026-10-13 03:41:06 +03:30
Code Issues Packages Projects Releases Wiki Activity

add dropzone to test result form

Browse Source
This commit is contained in:
Fateme
2020-06-09 18:05:16 +04:30
parent 7496f1213f
commit a74e49af6f
14 changed files with 269 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/vue/components/core/Dropzone.vue
+95
View File
@@ -0,0 +1,95 @@
<template>
<div class="">
<vue-dropzone id="customdropzone02"
ref="myVueDropzone"
:options="dropzoneOptions"
:useCustomSlot="true"
@vdropzone-sending = "sending"
@vdropzone-success = "success"
@vdropzone-removed-file = "afterRemove"
@vdropzone-error = "error"
class="WM-Relative" >
<div class="dropzone-custom-content">
<!-- <h3 class="dropzone-custom-title">فایل مورد نظر خود را در این قسمت آپلود کنید</h3> -->
<div class="subtitle">Upload images here</div>
</div>
</vue-dropzone>
</div>
</template>
<script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
import { TokenService } from '@/services/auth/storage.service';
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
import toast from "@/services/global/toast.service";
import { mapGetters } from 'vuex'
export default {
props: ['ModelID', 'Images', 'BatchID', 'ModelType'],
components : {
vueDropzone: vue2Dropzone
},
data: () => ({
dropzoneOptions: {
url: '/api/UploadImage',
thumbnailWidth: 150,
maxFilesize: 2,
headers: { "Authorization": `Bearer ${TokenService.getToken()}` },
addRemoveLinks: true
},
}),
mounted() {
this.loadImages();
},
methods: {
loadImages(){
let vm = this;
if (vm.Images != null) {
vm.Images.forEach(function(image, key){
var file = { name: image.file_name, size:'1024', type: 'jpg', id: image.id};
vm.$refs.myVueDropzone.manuallyAddFile(file, '/'+image.path);
});
}
},
success(file, response){
file.id = response.data.id;
if(typeof response.message !== 'undefined') {
toast.success(response.message, response.title);
}
},
error(file, message, xhr){
if(typeof message.errors !== 'undefined') {
for (const key in message.errors) {
if (message.errors.hasOwnProperty(key)) {
toast.error(message.errors[key], 'خطا');
}
}
}
},
sending(file, xhr, form_data) {
form_data.append('image', file);
form_data.append('model_id', this.ModelID);
form_data.append('model_type', this.ModelType);
form_data.append('batch_id', this.BatchID);
},
async afterRemove( file, error, xhr) {
let status = null;
if (this.$refs.myVueDropzone.dropzone.disabled !== undefined) {
status = this.$refs.myVueDropzone.dropzone.disabled;
}
if (status !== true) {
let formdata = new FormData();
formdata.append('media_id', file.id);
formdata.append('name', file.name);
formdata.append('model_id', this.ModelID);
formdata.append('model_type', this.ModelType);
formdata.append('batch_id', this.BatchID);
let result = await ApiService.post(urls.deleteImage,formdata);
}
},
}
}
</script>
resources/js/vue/components/modal/testresult/Show.vue
+1 -1
View File
@@ -139,7 +139,7 @@
<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.title_image" :key="key">
<v-flex xs12 md6 sm6 v-for="(img, key) in data.images" :key="key">
<img :src="'/'+img.path" style="width: 100%" />
</v-flex>
</v-layout>
resources/js/vue/config/urls.js
Vendored
+2 -1
View File
@@ -19,6 +19,7 @@ const urls = {
sendVerifyCode: `/password/verifyCode`,
changePassword: `/password/reset`,
storeMessages: `/Messages`,
deleteImage: `/DeleteImage`,
listMessages: function(page) {
return `/Messages?page=${page}`;
},
@@ -173,7 +174,7 @@ const urls = {
return `/Item/Verify/${id}`;
},
Barcode: function(code, type) {
return `/BarCode/${code}/${type}`;
},
packageBarcode: function(code) {
resources/js/vue/views/TestResult/AddEdit.vue
+23 -20
View File
@@ -85,23 +85,15 @@
<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 sm2 md2>
<div class="WM-Align-R" style="position:relative">
<input type="file" class="inputfile" @change="onFileChange" multiple style="position:absolute;left:0;height:100px"/>
<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-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>
<v-layout wrap class="mt-4 px-5">
<v-flex v-for="(img, key) in images" :key="key" xs12 sm6 md1 class="WM-Border WM-Border-LightGray WM-Padding-10 WM-Align-C WM-Relative" style="margin:15px">
<img :src="img" width="120px" height="auto"/>
<v-btn class="mx-2" absolute right top fab dark small color="pink" style="top:-28px;right:-28px" @click.native.stop="removeImage(key)">
<v-icon>close</v-icon>
</v-btn>
</v-flex>
</v-layout>
<!--______________________ DynamicComponent :: Began _______________________-->
@@ -422,10 +414,17 @@
</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: "",
@@ -466,6 +465,9 @@ export default {
this.filter.test_result_id = this.$route.params.testResult;
this.selectTestType();
}
else{
this.galleryDataLoaded= true;
}
this.load();
},
methods: {
@@ -543,20 +545,21 @@ export default {
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)
) {
if (result.data.data.imagesPath.hasOwnProperty(key)) {
result.data.data.imagesPath[key] =
"/" + result.data.data.imagesPath[key];
result.data.data.imagesPath[key];
}
}
this.images = result.data.data.imagesPath;
// this.images = result.data.data.imagesPath;
this.galleries = result.data.data.imagesPath;
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),