xxxxxxxxxx1
<template>2
<mdb-tabs3
:active="active"4
color="primary"5
tabs6
class="mb-2"7
:links="links"8
>9
<template :slot="'home-slot'">10
<mdb-card>11
12
<mdb-card-header color=" blue accent-1" text-color="dark-blue"><strong>New DCA Case</strong></mdb-card-header>13
14
<mdb-card-body>15
<mdb-row>16
<mdb-col>17
<mdb-input label="Case Name" icon="file-signature"/>18
</mdb-col>19
<mdb-col>20
<mdb-select v-model="fc_type" label="Forecast Type" icon="chart-line"/>21
</mdb-col>22
</mdb-row>23
<mdb-row>24
<mdb-col>25
<mdb-select v-model="dca_method" label="Method" icon="hammer"/>26
</mdb-col>27
<mdb-col>28
<mdb-select v-model="dca_fluid" label="Primary Fluid" icon="flask"/>29
</mdb-col>30
</mdb-row>31
<mdb-row>32
<mdb-col>33
<mdb-input v-mdb-input-mask="'♠♠♠♠♠♠♠'" v-model="fc_defaults.initial_rate"34
label="Default Initial Forecast Rate" icon="hand-point-right"/>35
</mdb-col>36
<mdb-col>37
<mdb-date-picker label="Default Initial Forecast Date" icon="calendar"38
v-model="fc_defaults.initial_date"/>39
</mdb-col>40
</mdb-row>41
<mdb-row>42
<mdb-col>43
<mdb-input v-mdb-input-mask="'♠♠♠♠♠♠♠'" v-model="fc_defaults.ab_rate"44
label="Default Abandonment Rate" icon="hand-point-right"/>45
</mdb-col>46
<mdb-col>47
<mdb-input v-mdb-input-mask="'♠♠♠♠♠♠♠'" v-model="fc_defaults.period"48
label="Default Forecast Period (months)" icon="tachometer-alt"/>49
</mdb-col>50
</mdb-row>51
<mdb-row>52
<mdb-col>53
<mdb-input type="textarea" label="Comments" icon="pen" :rows="2"/>54
</mdb-col>55
</mdb-row>56
</mdb-card-body>57
<mdb-card-footer class="white d-flex justify-content-end">58
<mdb-btn gradient="blue" class="black-text" icon="paper-plane" rounded>Create Case</mdb-btn>59
</mdb-card-footer>60
</mdb-card>61
62
</template>63
64
65
</mdb-tabs>66
</template>xxxxxxxxxx1
<style>2
h3 {3
font-weight: normal;4
padding-top: 20px;5
padding-bottom: 30px;6
}7
p {8
color: #969696;9
margin-bottom: 0;10
font-size: 14px;11
}12
</style>xxxxxxxxxx1
<script>2
import {3
mdbBtn,4
mdbCard,5
mdbCardBody,6
mdbCardFooter,7
mdbCardHeader,8
mdbCol,9
mdbDatePicker,10
mdbInput,11
mdbInputMask,12
mdbRow,13
mdbSelect,14
mdbTabs,15
} from 'mdbvue';16
17
export default {18
name: "dca",19
components: {20
mdbTabs,21
//mdbContent,22
mdbRow,23
mdbCol,24
mdbInput,25
mdbBtn,26
mdbCard,27
mdbCardBody,28
mdbSelect,29
mdbDatePicker,30
//mdbTimePicker,31
mdbCardHeader,32
//mdbCardTitle,33
mdbCardFooter,34
//mdbAutocomplete,35
},36
directives: {37
mdbInputMask38
},39
data() {40
return {41
active: '0',42
modal: false,43
dca_method: [{value: "Arps", text: "Arps"},44
{value: "Duong", text: "Duong"},45
],46
dca_fluid: [{value: "oil", text: "oil"},47
{value: "gas", text: "gas"},48
],49
50
fc_type: [{value: "Deterministic", text: "Deterministic"},51
{value: "Probabilistic", text: "Probabilistic"},52
],53
fc_defaults: {54
initial_rate: '',55
dec: '',56
b: '',57
ab_rate: '',58
initial_date: '',59
period: '60',60
},61
62
links: [63
{64
text: 'File', dropdown: true, slot: 'home-slot',65
dropdownItems: [66
{text: 'New Case', slot: 'home-slot'},67
{text: 'Open Case'},68
69
{divider: true},70
{text: 'Separeted link'}]71
},72
{text: 'New Case', icon: 'plus', slot: 'home-slot'},73
{text: 'Open Case', icon: 'heart',},74
{text: 'Secondary Product', icon: 'tint',},75
{text: 'Terciary Product', icon: 'water',}]76
}77
}78
}79
</script> Console errors: 0