emits
This commit is contained in:
Tyrel Souza
parent
9e999d5bce
commit
f728948f6b
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="item card">
|
||||
<UploadForm />
|
||||
<UploadForm @uploadForm="uploadForm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -19,13 +19,25 @@
|
|||
<div class="item card">
|
||||
<NewCalibrationDeviceForm />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineEmits } from "vue";
|
||||
|
||||
import CustomerForm from "./CustomerForm.vue";
|
||||
import NewInstrumentForm from "./Instrument/NewInstrumentForm.vue";
|
||||
import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceForm.vue";
|
||||
import EnvironmentForm from "./EnvironmentForm.vue";
|
||||
import UploadForm from "./UploadForm.vue";
|
||||
</script>
|
||||
|
||||
const upload_form_data = ref();
|
||||
|
||||
const uploadForm = (form) => {
|
||||
upload_form_data.value = form;
|
||||
}
|
||||
|
||||
|
||||
const emits = defineEmits(["uploadForm"]);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,109 +3,144 @@
|
|||
<div class="card-body">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Report Type</td>
|
||||
<td>
|
||||
<select name="report_type" v-model="report_type" required id="id_report_type">
|
||||
<option value="" selected>---------</option>
|
||||
<option value="TV">Transducer Verify</option>
|
||||
<option value="HC">Hardware Calibration</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2>
|
||||
<ul>
|
||||
<li v-for="file in files" :key="file.id">
|
||||
{{ file.name }}
|
||||
<tr>
|
||||
<td>Report Type</td>
|
||||
<td>
|
||||
<select
|
||||
name="report_type"
|
||||
v-model="report_type"
|
||||
required
|
||||
id="id_report_type"
|
||||
>
|
||||
<option value="" selected>---------</option>
|
||||
<option value="TV">Transducer Verify</option>
|
||||
<option value="HC">Hardware Calibration</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<button class="button" @click="openFileInput" v-if="showUpload">
|
||||
Select File
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li v-for="(file, index) in files" :key="index">
|
||||
<button @click="removeUpload(index)">x</button>
|
||||
{{ file.name }}
|
||||
<label>
|
||||
<input type="radio" name="alignment" value="both" @change="kindChange('both', file)"> Both
|
||||
<input
|
||||
type="radio"
|
||||
name="alignment"
|
||||
value="both"
|
||||
@change="kindChange('both', file)"
|
||||
/>
|
||||
Both
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="alignment" value="left" @change="kindChange('left', file)"> As Left
|
||||
<input
|
||||
type="radio"
|
||||
name="alignment"
|
||||
value="left"
|
||||
@change="kindChange('left', file)"
|
||||
/>
|
||||
As Left
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="alignment" value="found" @change="kindChange('found', file)"> As Found
|
||||
<input
|
||||
type="radio"
|
||||
name="alignment"
|
||||
value="found"
|
||||
@change="kindChange('found', file)"
|
||||
/>
|
||||
As Found
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<file-upload
|
||||
class="btn btn-primary"
|
||||
post-action="/upload/post"
|
||||
extensions="txt"
|
||||
accept="text/plain"
|
||||
:multiple="true"
|
||||
:size="1024 * 1024 * 10"
|
||||
v-model="files"
|
||||
@input-filter="inputFilter"
|
||||
@input-file="inputFile"
|
||||
ref="upload">
|
||||
<i class="fa fa-plus"></i>
|
||||
Select files
|
||||
</file-upload>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button type="button" class="btn btn-success" v-if="!upload || !upload.active" @click.prevent="upload.active = true">
|
||||
<i class="fa fa-arrow-up" aria-hidden="true"></i>
|
||||
Start Upload
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" v-else @click.prevent="upload.active = false">
|
||||
<i class="fa fa-stop" aria-hidden="true"></i>
|
||||
Stop Upload
|
||||
</button>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td align="right">
|
||||
<input type="submit" value="Generate PDF and Label">
|
||||
</td>
|
||||
</tr>
|
||||
<input
|
||||
ref="doc"
|
||||
type="file"
|
||||
style="display: none"
|
||||
@change="readFile($event)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td align="right">
|
||||
<input type="submit" value="Generate PDF and Label" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue'
|
||||
import {VueUploadComponent as FileUpload} from 'vue-upload-component'
|
||||
import { ref, computed, watchEffect } from "vue";
|
||||
|
||||
const report_type = ref('')
|
||||
const files = ref([])
|
||||
const upload = ref(null)
|
||||
const report_type = ref("");
|
||||
const files = ref([]);
|
||||
const current_file = ref(null);
|
||||
const doc = ref();
|
||||
|
||||
const inputFile = (newFile, oldFile) => {
|
||||
if (newFile && oldFile && !newFile.active && oldFile.active) {
|
||||
// Get response data
|
||||
console.log('response', newFile.response)
|
||||
if (newFile.xhr) {
|
||||
// Get the response status code
|
||||
console.log('status', newFile.xhr.status)
|
||||
const showUpload = computed({
|
||||
get() {
|
||||
if (files.length > 2) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const inputFilter = (newFile, oldFile, prevent) => {
|
||||
if (newFile && !oldFile) {
|
||||
// Filter non-image file
|
||||
if (!/\.(txt)$/i.test(newFile.name)) {
|
||||
return prevent()
|
||||
if (files.value.length > 0 && files.value[0].kind == "both") {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Create a blob field
|
||||
newFile.blob = ''
|
||||
const URL = window.URL || window.webkitURL
|
||||
if (URL && URL.createObjectURL) {
|
||||
newFile.blob = URL.createObjectURL(newFile.file)
|
||||
}
|
||||
console.log(URL)
|
||||
}
|
||||
return true;
|
||||
},
|
||||
});
|
||||
|
||||
const openFileInput = () => {
|
||||
// Trigger a click event on the file input element
|
||||
doc.value.click();
|
||||
};
|
||||
|
||||
const kindChange = (opt, file) => {
|
||||
// Change the file kind metadata, (both, as found, as left) for the uploaded file
|
||||
file.kind = opt
|
||||
console.log(file)
|
||||
}
|
||||
</script>
|
||||
file.kind = opt;
|
||||
console.log(file);
|
||||
};
|
||||
|
||||
const removeUpload = (index) => {
|
||||
files.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const readFile = ($event) => {
|
||||
const target = $event.target;
|
||||
if (target && target.files) {
|
||||
current_file.value = target.files[0];
|
||||
}
|
||||
if (!current_file.value.name.includes(".txt")) {
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = (res) => {
|
||||
let content = res.target.result;
|
||||
files.value.push({
|
||||
name: current_file.value.name,
|
||||
value: content,
|
||||
kind: "",
|
||||
});
|
||||
};
|
||||
reader.onerror = (err) => console.log(err);
|
||||
reader.readAsText(current_file.value);
|
||||
doc.value.value = null;
|
||||
};
|
||||
|
||||
const emit = defineEmits();
|
||||
watchEffect(() => {
|
||||
emit("upload-form", {
|
||||
report_type,
|
||||
files,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<div class="card-header">Report Uploads</div>
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Report Type</td>
|
||||
<td>
|
||||
<select name="report_type" v-model="report_type" required id="id_report_type">
|
||||
<option value="" selected>---------</option>
|
||||
<option value="TV">Transducer Verify</option>
|
||||
<option value="HC">Hardware Calibration</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=2>
|
||||
<ul>
|
||||
<li v-for="file in files" :key="file.id">
|
||||
{{ file.name }}
|
||||
<label>
|
||||
<input type="radio" name="alignment" value="both" @change="kindChange('both', file)"> Both
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="alignment" value="left" @change="kindChange('left', file)"> As Left
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="alignment" value="found" @change="kindChange('found', file)"> As Found
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<file-upload
|
||||
class="btn btn-primary"
|
||||
post-action="/upload/post"
|
||||
extensions="txt"
|
||||
accept="text/plain"
|
||||
:multiple="true"
|
||||
:size="1024 * 1024 * 10"
|
||||
v-model="files"
|
||||
@input-filter="inputFilter"
|
||||
@input-file="inputFile"
|
||||
ref="upload">
|
||||
<i class="fa fa-plus"></i>
|
||||
Select files
|
||||
</file-upload>
|
||||
|
||||
<button type="button" class="btn btn-success" v-if="!upload || !upload.active" @click.prevent="upload.active = true">
|
||||
<i class="fa fa-arrow-up" aria-hidden="true"></i>
|
||||
Start Upload
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" v-else @click.prevent="upload.active = false">
|
||||
<i class="fa fa-stop" aria-hidden="true"></i>
|
||||
Stop Upload
|
||||
</button>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td align="right">
|
||||
<input type="submit" value="Generate PDF and Label">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue'
|
||||
import {VueUploadComponent as FileUpload} from 'vue-upload-component'
|
||||
|
||||
const report_type = ref('')
|
||||
const files = ref([])
|
||||
const upload = ref(null)
|
||||
|
||||
const inputFile = (newFile, oldFile) => {
|
||||
if (newFile && oldFile && !newFile.active && oldFile.active) {
|
||||
// Get response data
|
||||
console.log('response', newFile.response)
|
||||
if (newFile.xhr) {
|
||||
// Get the response status code
|
||||
console.log('status', newFile.xhr.status)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const inputFilter = (newFile, oldFile, prevent) => {
|
||||
if (newFile && !oldFile) {
|
||||
// Filter non-image file
|
||||
if (!/\.(txt)$/i.test(newFile.name)) {
|
||||
return prevent()
|
||||
}
|
||||
}
|
||||
|
||||
// Create a blob field
|
||||
newFile.blob = ''
|
||||
const URL = window.URL || window.webkitURL
|
||||
if (URL && URL.createObjectURL) {
|
||||
newFile.blob = URL.createObjectURL(newFile.file)
|
||||
}
|
||||
console.log(URL)
|
||||
}
|
||||
|
||||
const kindChange = (opt, file) => {
|
||||
// Change the file kind metadata, (both, as found, as left) for the uploaded file
|
||||
file.kind = opt
|
||||
console.log(file)
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue