tyrel/benchtopdevices
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 2 Releases Wiki Activity

<div></div>

Browse Source
This commit is contained in:
Tyrel Souza 2024-07-04 23:37:28 -04:00
parent 5001030746
commit 098b616db2
No known key found for this signature in database
GPG Key ID: F3614B02ACBE438E
10 changed files with 516 additions and 498 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
benchtop-fe/src/components/CalibrationDevice/CalibrationDeviceForm.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<div>
<div class="card-header"> <div class="card-header">
Primary Cal Device Primary Cal Device
<button class="custom-button" role="button" @click="showNewCalibrationClick">+ New</button> <button class="custom-button" role="button" @click="showNewCalibrationClick">+ New</button>
@ -27,6 +28,7 @@
</p> </p>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { ref, defineEmits, watchEffect } from "vue"; import { ref, defineEmits, watchEffect } from "vue";

44
benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue
View File

@ -1,28 +1,30 @@
<template> <template>
<div class="card-header">Calibration Devices</div> <div>
<div class="card-body"> <div class="card-header">Calibration Devices</div>
<h3>Primary Device</h3> <div class="card-body">
<select name="primary_device" v-model="primary_device" required id="id_report_type"> <h3>Primary Device</h3>
<option value="-" selected>----Primary-----</option> <select name="primary_device" v-model="primary_device" required id="id_report_type">
<option value="Menzer1">Menzer1</option> <option value="-" selected>----Primary-----</option>
<option value="Blackbelt">Blackbelt</option> <option value="Menzer1">Menzer1</option>
</select> <option value="Blackbelt">Blackbelt</option>
</select>
<h3>Calibration Date</h3>
<div class="date-picker">
<VueDatePicker v-model="primary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
</div>
<hr />
<h3>Secondary Device</h3>
<select name="secondary_device" v-model="secondary_device" required id="id_report_type">
<option value="-" selected>----Secondary-----</option>
<option value="Menzer1">Menzer1</option>
<option value="Blackbelt">Blackbelt</option>
</select>
<h3>Calibration Date</h3> <h3>Calibration Date</h3>
<div class="date-picker"> <div class="date-picker">
<VueDatePicker v-model="primary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker> <VueDatePicker v-model="secondary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
</div> </div>
<hr />
<h3>Secondary Device</h3>
<select name="secondary_device" v-model="secondary_device" required id="id_report_type">
<option value="-" selected>----Secondary-----</option>
<option value="Menzer1">Menzer1</option>
<option value="Blackbelt">Blackbelt</option>
</select>
<h3>Calibration Date</h3>
<div class="date-picker">
<VueDatePicker v-model="secondary_calibration_date" auto-apply :enableTimePicker="false" :flow="flow"></VueDatePicker>
</div> </div>
</div> </div>
</template> </template>

76
benchtop-fe/src/components/CustomerForm.vue
View File

@ -1,41 +1,43 @@
<template> <template>
<div class="card-header">Customer</div> <div>
<div class="card-body"> <div class="card-header">Customer</div>
<table class="table"> <div class="card-body">
<tbody> <table class="table">
<tr> <tbody>
<td>Customer Name</td> <tr>
<td> <td>Customer Name</td>
<input type="text" name="customer_name" maxlength="256" v-model="customer_name" required <td>
id="id_customer_name"> <input type="text" name="customer_name" maxlength="256" v-model="customer_name" required
</td> id="id_customer_name">
</tr> </td>
<tr> </tr>
<td>On Site Calibration</td> <tr>
<td> <td>On Site Calibration</td>
<div class="checkbox-wrapper-55"> <td>
<label class="rocker rocker-small"> <div class="checkbox-wrapper-55">
<input type="checkbox" name="onsite_cal" v-model="onsite_cal" id="id_onsite_cal"> <label class="rocker rocker-small">
<span class="switch-left">Yes</span> <input type="checkbox" name="onsite_cal" v-model="onsite_cal" id="id_onsite_cal">
<span class="switch-right">No</span> <span class="switch-left">Yes</span>
</label> <span class="switch-right">No</span>
</div> </label>
</td> </div>
</tr> </td>
<tr> </tr>
<td>Control Doc#</td> <tr>
<td> <td>Control Doc#</td>
<input type="text" name="control_doc" maxlength="256" v-model="control_doc" required id="id_control_doc"> <td>
</td> <input type="text" name="control_doc" maxlength="256" v-model="control_doc" required id="id_control_doc">
</tr> </td>
<tr> </tr>
<td>Technician</td> <tr>
<td> <td>Technician</td>
<input type="text" name="technician" maxlength="256" v-model="technician" required id="id_technician"> <td>
</td> <input type="text" name="technician" maxlength="256" v-model="technician" required id="id_technician">
</tr> </td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</template> </template>

68
benchtop-fe/src/components/EnvironmentForm.vue
View File

@ -1,37 +1,39 @@
<template> <template>
<div class="card-header">Environment</div> <div>
<div class="card-body"> <div class="card-header">Environment</div>
<table class="table"> <div class="card-body">
<tbody> <table class="table">
<tr> <tbody>
<td>Accuracy</td> <tr>
<td> <td>Accuracy</td>
<input type="number" name="accuracy" step="0.001" v-model="accuracy" required id="id_accuracy"> <td>
</td> <input type="number" name="accuracy" step="0.001" v-model="accuracy" required id="id_accuracy">
</tr> </td>
<tr> </tr>
<td>Pressure (psi)</td> <tr>
<td> <td>Pressure (psi)</td>
<input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure" <td>
required id="id_pressure"> <input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure"
</td> required id="id_pressure">
</tr> </td>
<tr> </tr>
<td>Temperature (&deg;F)</td> <tr>
<td> <td>Temperature (&deg;F)</td>
<input type="number" name="temperature" step="0.01" max="1000.0" min="-459.67" v-model="temperature" required <td>
id="id_temperature"> <input type="number" name="temperature" step="0.01" max="1000.0" min="-459.67" v-model="temperature" required
</td> id="id_temperature">
</tr> </td>
<tr> </tr>
<td>Humidity (%RH)</td> <tr>
<td> <td>Humidity (%RH)</td>
<input type="number" name="humidity" step="0.01" max="100.0" min="0.0" v-model="humidity" required <td>
id="id_humidity"> <input type="number" name="humidity" step="0.01" max="100.0" min="0.0" v-model="humidity" required
</td> id="id_humidity">
</tr> </td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>

54
benchtop-fe/src/components/Instrument/InstrumentForm.vue
View File

@ -1,30 +1,32 @@
<template> <template>
<div class="card-header"> <div>
Instrument <div class="card-header">
<button class="custom-button" role="button" @click="showNewInstrumentClick">+ New</button> Instrument
</div> <button class="custom-button" role="button" @click="showNewInstrumentClick">+ New</button>
<div class="card-body"> </div>
<table class="table"> <div class="card-body">
<tbody> <table class="table">
<tr> <tbody>
<td>Serial #</td> <tr>
<td> <td>Serial #</td>
<input <td>
type="text" <input
name="serial" type="text"
maxlength="100" name="serial"
v-model="serial" maxlength="100"
required v-model="serial"
id="id_serial" required
/> id="id_serial"
</td> />
</tr> </td>
</tbody> </tr>
</table> </tbody>
<div class="summary"> </table>
<p>Enter a serial number to search for an existing <br/> <div class="summary">
Primary Calibration Device, or press New to log a new device. <p>Enter a serial number to search for an existing <br/>
</p> Primary Calibration Device, or press New to log a new device.
</p>
</div>
</div> </div>
</div> </div>
</template> </template>

196
benchtop-fe/src/components/Instrument/NewInstrumentForm.vue
View File

@ -1,101 +1,103 @@
<template> <template>
<div class="card-header">Instrument</div> <div>
<div class="card-body"> <div class="card-header">Instrument</div>
<table class="table"> <div class="card-body">
<tbody> <table class="table">
<tr> <tbody>
<td colspan="2"> <tr>
<h3>Calibration Date</h3> <td colspan="2">
<div class="date-picker"> <h3>Calibration Date</h3>
<VueDatePicker <div class="date-picker">
v-model="date" <VueDatePicker
auto-apply v-model="date"
:enableTimePicker="false" auto-apply
:flow="flow" :enableTimePicker="false"
></VueDatePicker> :flow="flow"
</div> ></VueDatePicker>
</td> </div>
</tr> </td>
<tr> </tr>
<td colspan="2"> <tr>
<h3>Calibration Due Date</h3> <td colspan="2">
<div class="date-picker"> <h3>Calibration Due Date</h3>
<VueDatePicker <div class="date-picker">
v-model="due_date" <VueDatePicker
:enableTimePicker="false" v-model="due_date"
auto-apply :enableTimePicker="false"
:flow="flow" auto-apply
></VueDatePicker> :flow="flow"
</div> ></VueDatePicker>
</td> </div>
</tr> </td>
<tr> </tr>
<td>Model</td> <tr>
<td> <td>Model</td>
<input <td>
type="text" <input
name="model" type="text"
maxlength="256" name="model"
v-model="model" maxlength="256"
required v-model="model"
id="id_model" required
/> id="id_model"
</td> />
</tr> </td>
<tr> </tr>
<td>Serial Number</td> <tr>
<td> <td>Serial Number</td>
<input <td>
type="text" <input
name="serial_number" type="text"
maxlength="256" name="serial_number"
v-model="serial_number" maxlength="256"
required v-model="serial_number"
id="id_serial_number" required
/> id="id_serial_number"
</td> />
</tr> </td>
<tr> </tr>
<td>Channel</td> <tr>
<td> <td>Channel</td>
<input <td>
type="text" <input
name="channel" type="text"
maxlength="256" name="channel"
v-model="channel" maxlength="256"
required v-model="channel"
id="id_channel" required
/> id="id_channel"
</td> />
</tr> </td>
<tr> </tr>
<td>Transducer Model</td> <tr>
<td> <td>Transducer Model</td>
<input <td>
type="text" <input
name="transducer_model" type="text"
maxlength="256" name="transducer_model"
v-model="transducer_model" maxlength="256"
required v-model="transducer_model"
id="id_transducer_model" required
/> id="id_transducer_model"
</td> />
</tr> </td>
<tr> </tr>
<td>Transducer Span (psia)</td> <tr>
<td> <td>Transducer Span (psia)</td>
<input <td>
type="text" <input
name="transducer_span" type="text"
maxlength="256" name="transducer_span"
v-model="transducer_span" maxlength="256"
required v-model="transducer_span"
id="id_transducer_span" required
/> id="id_transducer_span"
</td> />
</tr> </td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>

214
benchtop-fe/src/components/PDF/PDF.vue
View File

@ -1,122 +1,124 @@
<template> <template>
<div class="card-header">Finished?</div> <div>
<div class="card-body"> <div class="card-header">Finished?</div>
<button class="custom-button" @click="exportToPDF"> <div class="card-body">
Generate PDF and Label <button class="custom-button" @click="exportToPDF">
</button> Generate PDF and Label
<br> </button>
<br> <br>
<div :class="{ hide: hide }" class="px666 scroll-pdf"> <br>
<div id="pdf" ref="document"> <div :class="{ hide: hide }" class="px666 scroll-pdf">
<div v-for="table of tables"> <div id="pdf" ref="document">
<div class="header"> <div v-for="table of tables">
<div class="flex-container"> <div class="header">
<div class="column pct-25"> <div class="flex-container">
<img :src="BenchTopLogoUrl" alt="benchtop devices logo" /> <div class="column pct-25">
</div> <img :src="BenchTopLogoUrl" alt="benchtop devices logo" />
<div class="column pct-50"> </div>
<div>Customer: {{ props.customer?.customer_name }}</div> <div class="column pct-50">
<div>Onsite cal (yes/no): {{ onsite() }}</div> <div>Customer: {{ props.customer?.customer_name }}</div>
<div>Control Doc#: {{ props.customer?.control_doc }}</div> <div>Onsite cal (yes/no): {{ onsite() }}</div>
<div>Technician: {{ props.customer?.technician }}</div> <div>Control Doc#: {{ props.customer?.control_doc }}</div>
</div> <div>Technician: {{ props.customer?.technician }}</div>
<div class="column pct-25"> </div>
<img :src="Al2pCertUrl"/> <div class="column pct-25">
<img :src="Al2pCertUrl"/>
</div>
</div> </div>
</div> </div>
</div> <!-- EndHeader -->
<!-- EndHeader --> <h1>Calibration Certificate</h1>
<h1>Calibration Certificate</h1>
<!-- Instrument Info --> <!-- Instrument Info -->
<div class="instrument-information"> <div class="instrument-information">
<div class="flex-container"> <div class="flex-container">
<div class="column pct-33"> <div class="column pct-33">
<div><span class="ul">Instrument</span></div> <div><span class="ul">Instrument</span></div>
<div> <div>
<span class="label">Model :</span>{{ props.instrument?.model }} <span class="label">Model :</span>{{ props.instrument?.model }}
</div>
<div>
<span class="label">Serial# :</span
>{{ props.instrument?.serial_number }}
</div>
<div>
<span class="label">Channel :</span
>{{ props.instrument?.channel }}
</div>
<div>
<span class="label">Transducer Model :</span
>{{ props.instrument?.transducer_model }}
</div>
<div>
<span class="label">Transducer Span :</span
>{{ props.instrument?.transducer_span }}
</div>
</div> </div>
<div> <div class="column pct-33">
<span class="label">Serial# :</span <div><span class="ul">Primary Cal Device</span></div>
>{{ props.instrument?.serial_number }} <div>
<span class="label">Model :</span>{{ props.calibration?.model }}
</div>
<div>
<span class="label">Serial# :</span
>{{ props.calibration?.serial }}
</div>
<div><span class="label">Cal Date :</span>{{ c_date() }}</div>
<div>
<span class="label">Cal Due Date :</span>{{ c_due_date() }}
</div>
<div>
<span class="label">Cert ID :</span
>{{ props.calibration?.cert_id }}
</div>
</div> </div>
<div> <div class="column pct-33">
<span class="label">Channel :</span <div><span class="label">Cal Date :</span>{{ i_date() }}</div>
>{{ props.instrument?.channel }} <div>
</div> <span class="label">Cal Due Date :</span>{{ i_due_date() }}
<div> </div>
<span class="label">Transducer Model :</span <div><span class="ul">Environmental Data</span></div>
>{{ props.instrument?.transducer_model }} <div>
</div> <span class="label">Baro (Psi) :</span
<div> >{{ props.environment?.pressure }}
<span class="label">Transducer Span :</span </div>
>{{ props.instrument?.transducer_span }} <div>
</div> <span class="label">Temp (&deg;F):</span
</div> >{{ props.environment?.temperature }}
<div class="column pct-33"> </div>
<div><span class="ul">Primary Cal Device</span></div> <div>
<div> <span class="label">Humidity (%RH):</span
<span class="label">Model :</span>{{ props.calibration?.model }} >{{ props.environment?.humidity }}
</div> </div>
<div>
<span class="label">Serial# :</span
>{{ props.calibration?.serial }}
</div>
<div><span class="label">Cal Date :</span>{{ c_date() }}</div>
<div>
<span class="label">Cal Due Date :</span>{{ c_due_date() }}
</div>
<div>
<span class="label">Cert ID :</span
>{{ props.calibration?.cert_id }}
</div>
</div>
<div class="column pct-33">
<div><span class="label">Cal Date :</span>{{ i_date() }}</div>
<div>
<span class="label">Cal Due Date :</span>{{ i_due_date() }}
</div>
<div><span class="ul">Environmental Data</span></div>
<div>
<span class="label">Baro (Psi) :</span
>{{ props.environment?.pressure }}
</div>
<div>
<span class="label">Temp (&deg;F):</span
>{{ props.environment?.temperature }}
</div>
<div>
<span class="label">Humidity (%RH):</span
>{{ props.environment?.humidity }}
</div> </div>
</div> </div>
</div> </div>
</div> <br/>
<br/> <!-- End InstrumentInfo -->
<!-- End InstrumentInfo --> <!-- As Found -->
<!-- As Found --> <ReadingTable :as_found="table.as_found" />
<ReadingTable :as_found="table.as_found" /> <br/>
<br/> <!-- As Left -->
<!-- As Left --> <ReadingTable :as_left="table.as_left" />
<ReadingTable :as_left="table.as_left" /> <!-- End Instruments-->
<!-- End Instruments--> <div class="box">
<div class="box"> <p>
<p> Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006
Secondary Cal Device (For Environmental Data): EXTECH S/N A23050006 Cert # 1535483 07/24/23 (Cal Date) (Precision Psychrometer)
Cert # 1535483 07/24/23 (Cal Date) (Precision Psychrometer) </p>
</p> <p>
<p> Uncertainty Statement: The accuracy of measurement is determined by
Uncertainty Statement: The accuracy of measurement is determined by the standards uncertainty, with a coverage factor of k=2 (confidence
the standards uncertainty, with a coverage factor of k=2 (confidence of roughly 95%).
of roughly 95%). </p>
</p> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div>
<div> {{ output() }}
{{ output() }} </div>
</div> </div>
</template> </template>

192
benchtop-fe/src/components/PDF/ReadingTable.vue
View File

@ -1,99 +1,101 @@
<template> <template>
<div class="readings"> <div>
<table class="table table-striped"> <div class="readings">
<thead> <table class="table table-striped">
<tr> <thead>
<th>Gauge Reading</th> <tr>
<th>Accuracy (+/- FS)</th> <th>Gauge Reading</th>
<th>Low Limit</th> <th>Accuracy (+/- FS)</th>
<th>High Limit</th> <th>Low Limit</th>
<th>As Found (units)</th> <th>High Limit</th>
<th>OOT</th> <th>As Found (units)</th>
</tr> <th>OOT</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<td>TBD</td> <tr>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
</tr> <td>TBD</td>
<tr> </tr>
<td>TBD</td> <tr>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
</tr> <td>TBD</td>
<tr> </tr>
<td>TBD</td> <tr>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
</tr> <td>TBD</td>
<tr> </tr>
<td>TBD</td> <tr>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
<td>TBD</td> <td>TBD</td>
</tr> <td>TBD</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
<tr> </tr>
<td>&nbsp;</td> <tr>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
<td>&nbsp;</td> <td>&nbsp;</td>
</tr> <td>&nbsp;</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>

2
benchtop-fe/src/components/Sheet.vue
View File

@ -110,7 +110,7 @@ const showNewCalibration = (val) => {
show_new_calibration.value = val; show_new_calibration.value = val;
}; };
const emit = defineEmits([ const emits = defineEmits([
"uploadForm", "uploadForm",
"customerForm", "customerForm",
"environmentForm", "environmentForm",

166
benchtop-fe/src/components/UploadForm.vue
View File

@ -1,86 +1,88 @@
<template> <template>
<div class="card-header">Report Uploads</div> <div>
<div class="card-body"> <div class="card-header">Report Uploads</div>
<table class="table"> <div class="card-body">
<tbody> <table class="table">
<tr> <tbody>
<td> <tr>
Report Type <td>
<select Report Type
name="report_type" <select
v-model="report_type" name="report_type"
required v-model="report_type"
id="id_report_type" required
> id="id_report_type"
<option value="-" selected>----Select-----</option> >
<option value="Transducer Verify">Transducer Verify</option> <option value="-" selected>----Select-----</option>
<option value="Hardware Calibration">Hardware Calibration</option> <option value="Transducer Verify">Transducer Verify</option>
</select> <option value="Hardware Calibration">Hardware Calibration</option>
</td> </select>
</tr> </td>
<tr v-if="report_type != '-' || showUpload"> </tr>
<td> <tr v-if="report_type != '-' || showUpload">
<button <td>
class="custom-button" <button
@click="openFileInput" class="custom-button"
v-if="showUpload" @click="openFileInput"
> v-if="showUpload"
Select {{ report_type }} File >
</button> Select {{ report_type }} File
</td> </button>
</tr> </td>
<tr v-if="files.length > 0"> </tr>
<td> <tr v-if="files.length > 0">
<ul> <td>
<li v-for="(file, index) in files" :key="index" class="file-list"> <ul>
<button class="custom-button red" @click="removeUpload(index)"> <li v-for="(file, index) in files" :key="index" class="file-list">
X <button class="custom-button red" @click="removeUpload(index)">
</button> X
<span>{{ file.name }}</span> </button>
<div class="kind btn-group"> <span>{{ file.name }}</span>
<input <div class="kind btn-group">
type="radio" <input
class="btn-check" type="radio"
:id="'both_kind_' + index" class="btn-check"
:name="'kind_' + index" :id="'both_kind_' + index"
value="both" :name="'kind_' + index"
@change="kindChange('both', file)" value="both"
/> @change="kindChange('both', file)"
<label class="btn btn-primary" :for="'both_kind_' + index"> Both </label> />
<label class="btn btn-primary" :for="'both_kind_' + index"> Both </label>
<input <input
type="radio" type="radio"
class="btn-check" class="btn-check"
:id="'af_kind_' + index" :id="'af_kind_' + index"
:name="'kind_' + index" :name="'kind_' + index"
value="found" value="found"
@change="kindChange('found', file)" @change="kindChange('found', file)"
/> />
<label class="btn btn-primary" :for="'af_kind_' + index"> <label class="btn btn-primary" :for="'af_kind_' + index">
As Found As Found
</label> </label>
<input <input
type="radio" type="radio"
class="btn-check" class="btn-check"
:id="'al_kind_' + index" :id="'al_kind_' + index"
:name="'kind_' + index" :name="'kind_' + index"
value="left" value="left"
@change="kindChange('left', file)" @change="kindChange('left', file)"
/> />
<label class="btn btn-primary" :for="'al_kind_' + index"> As Left </label> <label class="btn btn-primary" :for="'al_kind_' + index"> As Left </label>
</div> </div>
</li> </li>
</ul> </ul>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<input <input
ref="doc" ref="doc"
type="file" type="file"
style="display: none" style="display: none"
@change="readFile($event)" @change="readFile($event)"
/> />
</div>
</div> </div>
</template> </template>
@ -152,7 +154,7 @@ const readFile = ($event) => {
const emit = defineEmits(); const emit = defineEmits();
watchEffect(() => { watchEffect(() => {
emit("upload-form", { emit("uploadForm", {
report_type, report_type,
files, files,
}); });