|
|
@@ -0,0 +1,152 @@
|
|
|
+<template lang="pug">
|
|
|
+ .ticket
|
|
|
+ .ticket-summary
|
|
|
+ .ticket-summary-header
|
|
|
+ h3 {{ companyName || 'No company' }}
|
|
|
+ table
|
|
|
+ tbody
|
|
|
+ tr
|
|
|
+ td Producto
|
|
|
+ td Precio
|
|
|
+ td Cant
|
|
|
+ td Subtotal
|
|
|
+ .ticket-items-wrapper
|
|
|
+ table
|
|
|
+ tbody
|
|
|
+ tr(v-for='item in items' :key='item.id')
|
|
|
+ td {{ item.name || 'no data' }}
|
|
|
+ td {{ item.price || 'no data' }}
|
|
|
+ td {{ item.quantity || 'no data' }}
|
|
|
+ td {{ ((item.price || 0) * (item.quatity || 0)) || 'no data' }}
|
|
|
+ .ticket-summary-footer
|
|
|
+ table
|
|
|
+ tbody
|
|
|
+ tr
|
|
|
+ td Total:
|
|
|
+ td {{ total || 'no data' }}
|
|
|
+ tr
|
|
|
+ td Cliente:
|
|
|
+ td {{ customerName || 'no data' }}
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ companyName: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ customerName: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ total: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ items: {
|
|
|
+ type: [],
|
|
|
+ default: []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="sass">
|
|
|
+ @import '../../assets/variables'
|
|
|
+ .ticket
|
|
|
+ width: 500px
|
|
|
+ height: 100%
|
|
|
+ .ticket-summary
|
|
|
+ width: 350px
|
|
|
+ height: 450px
|
|
|
+ border: 1px solid $app-border-color
|
|
|
+ margin: auto
|
|
|
+ box-shadow: -2px 2px 5pc $app-border-color, 2px 2px 5px $app-border-color
|
|
|
+ position: relative
|
|
|
+ .ticket-summary-header, .ticket-summary-footer
|
|
|
+ width: 100%
|
|
|
+ position: absolute
|
|
|
+ .ticket-summary-header
|
|
|
+ height: 65px
|
|
|
+ top: 0
|
|
|
+ h3
|
|
|
+ text-align: center
|
|
|
+ font-size: 14pt
|
|
|
+ margin: 0 15px
|
|
|
+ padding: 30px 0 15px 0
|
|
|
+ color: $app-dark-color
|
|
|
+ table
|
|
|
+ width: 308px
|
|
|
+ height: 30px
|
|
|
+ margin: 0 20px
|
|
|
+ font-size: 7.5pt
|
|
|
+ font-weight: bold
|
|
|
+ tbody
|
|
|
+ tr
|
|
|
+ line-height: 30px
|
|
|
+ border-top: 1px solid $app-border-color
|
|
|
+ border-bottom: 1px solid $app-border-color
|
|
|
+ td
|
|
|
+ &:nth-child(1)
|
|
|
+ width: 180px
|
|
|
+ text-align: left
|
|
|
+
|
|
|
+ &:nth-child(2)
|
|
|
+ width: 50px
|
|
|
+ text-align: right
|
|
|
+
|
|
|
+ &:nth-child(3)
|
|
|
+ width: 30px
|
|
|
+ text-align: right
|
|
|
+
|
|
|
+ &:nth-child(4)
|
|
|
+ width: 50px
|
|
|
+ text-align: right
|
|
|
+ .ticket-items-wrapper
|
|
|
+ width: 310px
|
|
|
+ height: 280px
|
|
|
+ margin: 95px 20px 75px 20px
|
|
|
+ padding-top: 5px
|
|
|
+ overflow-y: auto
|
|
|
+ table
|
|
|
+ width: 100%
|
|
|
+ font-size: 7.5pt
|
|
|
+ tbody
|
|
|
+ tr
|
|
|
+ height: 28px
|
|
|
+ line-height: 30px
|
|
|
+
|
|
|
+ td
|
|
|
+ &:nth-child(1)
|
|
|
+ width: 180px
|
|
|
+
|
|
|
+ &:nth-child(2)
|
|
|
+ width: 50px
|
|
|
+ text-align: right
|
|
|
+
|
|
|
+ &:nth-child(3)
|
|
|
+ width: 30px
|
|
|
+ text-align: right
|
|
|
+
|
|
|
+ &:nth-child(4)
|
|
|
+ width: 50px
|
|
|
+ text-align: right
|
|
|
+ .ticket-summary-footer
|
|
|
+ width: 348px
|
|
|
+ height: 75px
|
|
|
+ bottom: 0
|
|
|
+ padding: 15px 25px
|
|
|
+ background: $app-bg-color
|
|
|
+ table
|
|
|
+ width: 100%
|
|
|
+ tbody
|
|
|
+ tr
|
|
|
+ height: 25px
|
|
|
+ line-height: 20px
|
|
|
+ td
|
|
|
+ &:nth-child(1)
|
|
|
+ font-weight: bold
|
|
|
+ &:nth-child(2)
|
|
|
+ text-align: right
|
|
|
+</style>
|
Gogs