91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<byjove-model-crud model-name="Product"
|
||
|
|
:allow-edit="allowEdit"
|
||
|
|
:mode="mode"
|
||
|
|
@refresh="record => { product = record }">
|
||
|
|
|
||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
||
|
|
|
||
|
|
<b-field label="Item ID">
|
||
|
|
<b-input v-if="mode == 'creating' || mode == 'editing'"
|
||
|
|
v-model="product.item_id">
|
||
|
|
</b-input>
|
||
|
|
<span v-if="mode == 'viewing' || mode == 'deleting'">
|
||
|
|
{{ product.item_id }}
|
||
|
|
</span>
|
||
|
|
</b-field>
|
||
|
|
|
||
|
|
<img :src="product.image_url" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<b-collapse class="card"
|
||
|
|
animation="slide"
|
||
|
|
:open="false"
|
||
|
|
aria-id="contentIdForVendors">
|
||
|
|
|
||
|
|
<template #trigger="props">
|
||
|
|
<div class="card-header"
|
||
|
|
role="button"
|
||
|
|
aria-controls="contentIdForVendors"
|
||
|
|
:aria-expanded="props.open">
|
||
|
|
<p class="card-header-title">
|
||
|
|
Vendors
|
||
|
|
</p>
|
||
|
|
<a class="card-header-icon">
|
||
|
|
<b-icon pack="fas"
|
||
|
|
:icon="props.open ? 'angle-down' : 'angle-up'">
|
||
|
|
</b-icon>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<div class="card-content">
|
||
|
|
<div class="content">
|
||
|
|
|
||
|
|
<b-field label="Preferred Vendor">
|
||
|
|
{{ product.vendor_name }} @ {{ product.default_unit_cost_display }}
|
||
|
|
</b-field>
|
||
|
|
|
||
|
|
<b-table :data="product.costs">
|
||
|
|
<b-table-column label="Vendor"
|
||
|
|
field="vendor_name"
|
||
|
|
v-slot="props">
|
||
|
|
{{ props.row.vendor_name }}
|
||
|
|
</b-table-column>
|
||
|
|
<b-table-column label="Unit Cost"
|
||
|
|
field="unit_cost"
|
||
|
|
v-slot="props">
|
||
|
|
{{ props.row.unit_cost }}
|
||
|
|
</b-table-column>
|
||
|
|
</b-table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</b-collapse>
|
||
|
|
|
||
|
|
</byjove-model-crud>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ByjoveModelCrud from '../model-crud'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Product',
|
||
|
|
props: {
|
||
|
|
mode: String,
|
||
|
|
allowEdit: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
ByjoveModelCrud,
|
||
|
|
},
|
||
|
|
data: function() {
|
||
|
|
return {
|
||
|
|
product: {},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|