mirror of
https://github.com/OpenXE-org/OpenXE.git
synced 2024-12-27 07:00:29 +01:00
303 lines
13 KiB
Smarty
303 lines
13 KiB
Smarty
<!--
|
|
SPDX-FileCopyrightText: 2022 Andreas Palm
|
|
|
|
SPDX-License-Identifier: LicenseRef-EGPL-3.1
|
|
-->
|
|
|
|
<div class="container-fluid" id="createshipmentapp">
|
|
<form action="" method="post" v-on:submit.prevent="submit">
|
|
<div class="row">
|
|
<div v-for="msg in messages" :class="msg.class">{{msg.text}}</div>
|
|
<div>
|
|
<h1>{|Paketmarken Drucker für|} [CARRIERNAME]</h1>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h2>{|Empfänger|}</h2>
|
|
<table>
|
|
<tr>
|
|
<td>{|Adresstyp|}:</td>
|
|
<td>
|
|
<select v-model.number="form.addresstype">
|
|
<option value="0">Haus</option>
|
|
<option value="1">Packstation</option>
|
|
<option value="2">Filiale</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Name / Zeile 1|}:</td>
|
|
<td><input type="text" size="36" v-model.trim="form.name"></td>
|
|
</tr>
|
|
<tr v-if="form.addresstype === 0">
|
|
<td>{|Firmenname / Zeile 2|}:</td>
|
|
<td><input type="text" size="36" v-model.trim="form.name2"></td>
|
|
</tr>
|
|
<tr v-if="form.addresstype === 1 || form.addresstype === 2">
|
|
<td>{|Postnummer|}:</td>
|
|
<td><input type="text" size="36" v-model.trim="form.postnumber"></td>
|
|
</tr>
|
|
<tr v-if="form.addresstype === 0">
|
|
<td>{|Firmenname / Zeile 3|}:</td>
|
|
<td><input type="text" size="36" v-model.trim="form.name3"></td>
|
|
</tr>
|
|
<tr v-if="form.addresstype === 0">
|
|
<td>{|Strasse/Hausnummer|}:</td>
|
|
<td>
|
|
<input type="text" size="30" v-model.trim="form.street">
|
|
<input type="text" size="5" v-model.trim="form.streetnumber">
|
|
</td>
|
|
</tr>
|
|
<tr v-if="form.addresstype === 1">
|
|
<td>{|Packstationsnummer|}:</td>
|
|
<td><input type="text" size="10" v-model.trim="form.parcelstationNumber"></td>
|
|
</tr>
|
|
<tr v-if="form.addresstype === 2">
|
|
<td>{|Postfilialnummer|}:</td>
|
|
<td><input type="text" size="10" v-model.trim="form.postofficeNumber"></td>
|
|
</tr>
|
|
<tr v-if="form.addresstype === 0">
|
|
<td>{|Adresszeile 2|}:</td>
|
|
<td><input type="text" size="36" v-model.trim="form.address2"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|PLZ/Ort|}:</td>
|
|
<td><input type="text" size="5" v-model.trim="form.zip">
|
|
<input type="text" size="30" v-model.trim="form.city">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Bundesland|}:</td>
|
|
<td><input type="text" size="36" v-model.trim="form.state"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Land|}:</td>
|
|
<td>
|
|
<select v-model="form.country" required>
|
|
<option v-for="(value, key) in countries" :value="key">{{value.name}}</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Ansprechpartner|}:</td>
|
|
<td><input type="text" size="36" v-model="form.contactperson"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|E-Mail|}:</td>
|
|
<td><input type="text" size="36" v-model.trim="form.email"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Telefon|}:</td>
|
|
<td><input type="text" size="36" v-model.trim="form.phone"></td>
|
|
</tr>
|
|
|
|
</table>
|
|
</div>
|
|
<div class="col-md-4" v-once>
|
|
<h2>vollst. Adresse</h2>
|
|
<table>
|
|
<tr>
|
|
<td>{|Name|}</td>
|
|
<td>{{form.original.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Ansprechpartner|}</td>
|
|
<td>{{form.original.ansprechpartner}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Abteilung|}</td>
|
|
<td>{{form.original.abteilung}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Unterabteilung|}</td>
|
|
<td>{{form.original.unterabteilung}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Adresszusatz|}</td>
|
|
<td>{{form.original.adresszusatz}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Strasse|}</td>
|
|
<td>{{form.original.strasse}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|PLZ/Ort|}</td>
|
|
<td>{{form.original.plz}} {{form.original.ort}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Bundesland|}</td>
|
|
<td>{{form.original.bundesland}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Land|}</td>
|
|
<td>{{form.original.land}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h2>{|Paket|}</h2>
|
|
<table>
|
|
<tr>
|
|
<td>{|Gewicht (in kg)|}:</td>
|
|
<td><input type="text" v-model.number="form.weight"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Höhe (in cm)|}:</td>
|
|
<td><input type="text" size="10" v-model.number="form.height"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Breite (in cm)|}:</td>
|
|
<td><input type="text" size="10" v-model.number="form.width"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Länge (in cm)|}:</td>
|
|
<td><input type="text" size="10" v-model.number="form.length"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Produkt|}:</td>
|
|
<td>
|
|
<select v-model="form.product" required>
|
|
<option v-for="prod in products" :value="prod.Id" v-if="productAvailable(prod)">{{prod.Name}}</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="serviceAvailable('premium')">
|
|
<td>{|Premium|}:</td>
|
|
<td><input type="checkbox" v-model="form.services.premium"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
<div class="col-md-12">
|
|
<h2>{|Bestellung|}</h2>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>{|Bestellnummer|}:</td>
|
|
<td><input type="text" size="36" v-model="form.order_number"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Versicherungssumme|}:</td>
|
|
<td><input type="text" size="10" v-model="form.total_insured_value"/></td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody v-if="customsRequired()">
|
|
<tr>
|
|
<td>{|Rechnungsnummer|}:</td>
|
|
<td><input type="text" size="36" v-model="form.invoice_number" required="required"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{|Sendungsart|}:</td>
|
|
<td>
|
|
<select v-model="form.shipment_type">
|
|
<option v-for="(value, key) in customs_shipment_types" :value="key">{{value}}</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-12" v-if="customsRequired()">
|
|
<table>
|
|
<tr>
|
|
<th>{|Bezeichnung|}</th>
|
|
<th>{|Menge|}</th>
|
|
<th>{|HSCode|}</th>
|
|
<th>{|Herkunftsland|}</th>
|
|
<th>{|Einzelwert|}</th>
|
|
<th>{|Einzelgewicht|}</th>
|
|
<th>{|Gesamtwert|}</th>
|
|
<th>{|Gesamtgewicht|}</th>
|
|
<th><a v-on:click="addPosition"><img src="themes/new/images/add.png"></a></
|
|
</th>
|
|
</tr>
|
|
<tr v-for="(pos, index) in form.positions">
|
|
<td><input type="text" v-model.trim="pos.bezeichnung" required></td>
|
|
<td><input type="text" v-model.number="pos.menge" required></td>
|
|
<td><input type="text" v-model.trim="pos.zolltarifnummer"></td>
|
|
<td><input type="text" v-model.trim="pos.herkunftsland"></td>
|
|
<td><input type="text" v-model.number="pos.zolleinzelwert"></td>
|
|
<td><input type="text" v-model.number="pos.zolleinzelgewicht"></td>
|
|
<td>{{Number(pos.menge*pos.zolleinzelwert || 0).toFixed(2)}}</td>
|
|
<td>{{Number(pos.menge*pos.zolleinzelgewicht || 0).toFixed(3)}}</td>
|
|
<td><a v-on:click="deletePosition(index)"><img src="themes/new/images/delete.svg"></a></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="6"></td>
|
|
<td>{{total_value.toFixed(2)}}</td>
|
|
<td>{{total_weight.toFixed(3)}}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<input class="btnGreen" type="submit" value="{|Paketmarke drucken|}" name="drucken">
|
|
<!--<input type="button" value="{|Andere Versandart auswählen|}" name="anders"> -->
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<script type="text/javascript">
|
|
const createshipmentapp = new Vue({
|
|
el: '#createshipmentapp',
|
|
data: [JSON],
|
|
computed: {
|
|
total_value() {
|
|
let sum = 0;
|
|
for (const pos of this.form.positions) {
|
|
sum += (pos.menge * pos.zolleinzelwert) || 0;
|
|
}
|
|
return sum;
|
|
},
|
|
total_weight() {
|
|
let sum = 0;
|
|
for (const pos of this.form.positions) {
|
|
sum += (pos.menge * pos.zolleinzelgewicht) || 0;
|
|
}
|
|
return sum;
|
|
}
|
|
},
|
|
methods: {
|
|
submit: function () {
|
|
let app = this;
|
|
let xhr = new XMLHttpRequest();
|
|
xhr.open('POST', location.href, true);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.onload = function () {
|
|
let json = JSON.parse(this.response);
|
|
app.messages = json.messages;
|
|
}
|
|
xhr.send(JSON.stringify($.extend({submit:'print'}, this.form)));
|
|
},
|
|
addPosition: function () {
|
|
this.form.positions.push({});
|
|
},
|
|
deletePosition: function (index) {
|
|
this.form.positions.splice(index, 1);
|
|
},
|
|
productAvailable: function (product) {
|
|
if (product == undefined)
|
|
return false;
|
|
if (product.WeightMin > this.form.weight || product.WeightMax < this.form.weight)
|
|
return false;
|
|
return true;
|
|
},
|
|
serviceAvailable: function (service) {
|
|
if (!this.products.hasOwnProperty(this.form.product))
|
|
return false;
|
|
return this.products[this.form.product].AvailableServices.indexOf(service) >= 0;
|
|
},
|
|
customsRequired: function () {
|
|
return this.countries[this.form.country].eu == '0';
|
|
}
|
|
},
|
|
beforeUpdate: function () {
|
|
if (!this.productAvailable(this.products[this.form.product])) {
|
|
for (prod in this.products) {
|
|
if (!this.productAvailable(this.products[prod]))
|
|
continue;
|
|
this.form.product = prod;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script> |