mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-13 21:11:06 +03:30
print and new types and multi image
This commit is contained in:
saeid
@@ -52,18 +52,27 @@
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-text-field
|
||||
:items="result"
|
||||
v-model="formData.cycle_number "
|
||||
label="Cycle Number"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4>
|
||||
<v-select
|
||||
:items="result"
|
||||
v-model="formData.result"
|
||||
label="Resualt"
|
||||
label="Result"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm4 md4>
|
||||
<div v-if="!image">
|
||||
<input type="file" class="inputfile" @change="onFileChange">
|
||||
<input type="file" class="inputfile" @change="onFileChange" multiple>
|
||||
<label for="file"><v-icon class="v-icon greylighten-3--text mr-2 caption IconHover">fas fa-chevron-right</v-icon>Choose a file</label>
|
||||
</div>
|
||||
<div v-else>
|
||||
@@ -98,6 +107,38 @@
|
||||
:value="optionValue.id"
|
||||
></v-checkbox>
|
||||
</v-container>
|
||||
<v-container fluid v-if="item.type == 'Radiobutton'">
|
||||
<p>{{ item.name }}</p>
|
||||
<v-radio-group v-model="formData[item.name+'_'+item.id]">
|
||||
<v-radio
|
||||
v-for="(optionValue, keyOption) in item.options"
|
||||
:key="keyOption"
|
||||
:label="optionValue.title"
|
||||
:value="optionValue.id"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
</v-container>
|
||||
<v-container fluid v-if="item.type == 'Switch'">
|
||||
<v-switch
|
||||
v-model="formData[item.name+'_'+item.id]"
|
||||
:label="item.name + ': ' + formData[item.name+'_'+item.id].toString()"
|
||||
></v-switch>
|
||||
</v-container>
|
||||
<v-container fluid v-if="item.type == 'Range'">
|
||||
<v-flex xs12>
|
||||
<v-slider
|
||||
v-model="formData[item.name+'_'+item.id]"
|
||||
:min="item.options[0].id"
|
||||
:max="item.options[1].id"
|
||||
thumb-label="always"
|
||||
></v-slider>
|
||||
</v-flex>
|
||||
</v-container>
|
||||
<v-container fluid v-if="item.type == 'Time'">
|
||||
<v-flex xs12>
|
||||
<v-time-picker v-model="formData[item.name+'_'+item.id]"></v-time-picker>
|
||||
</v-flex>
|
||||
</v-container>
|
||||
<template v-if="item.type == 'Form'">
|
||||
<v-container row md-12 sm-12 xs-12>
|
||||
<v-layout row wrap>
|
||||
@@ -177,6 +218,7 @@ export default {
|
||||
formData : {
|
||||
autoclave_id: "",
|
||||
result: "",
|
||||
cycle_number: "",
|
||||
img: null,
|
||||
test_type_id: "",
|
||||
},
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
<v-text-field
|
||||
required
|
||||
slot="activator"
|
||||
label="FromDate"
|
||||
label="UpToDate"
|
||||
v-model="filter.upToPicker"
|
||||
></v-text-field>
|
||||
<v-date-picker
|
||||
@@ -128,6 +128,10 @@
|
||||
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
|
||||
<span>Show</span>
|
||||
</v-btn>
|
||||
<v-btn color="orange" class="mr-2" @click="generateBarcode(item.id)">
|
||||
<v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
|
||||
<span>generate Barcode</span>
|
||||
</v-btn>
|
||||
<router-link
|
||||
v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
|
||||
:to="{name: 'EditTestResult', params: {testResult: item.id}}"
|
||||
@@ -295,6 +299,15 @@ export default {
|
||||
this.medicalCenters = result.data.data.MedicalCenters;
|
||||
this.testTypes = result.data.data.TestTypes;
|
||||
}
|
||||
},
|
||||
async generateBarcode(id) {
|
||||
const result = await ApiService.post(urls.Barcode(`Cssd-100 ${id}`));
|
||||
if (result && result.status == 200) {
|
||||
this.changeCurrentModal({
|
||||
modal: "modal-barcode-barcode",
|
||||
properties: { result }
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -1,441 +1,536 @@
|
||||
<template>
|
||||
<v-form ref="form">
|
||||
<v-container grid-list-xs>
|
||||
<material-card color="black" title="Add a New Test" class>
|
||||
<v-layout row wrap class="ma-2">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
name="name"
|
||||
v-model="form.name"
|
||||
label="Name"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
:rules="[rules.required]"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
:rules="[rules.required]"
|
||||
name="uniquecode"
|
||||
v-model="form.unique_code"
|
||||
label="Unique Code"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative"
|
||||
:key="keyForm"
|
||||
v-for="(info, keyForm) in form.info"
|
||||
>
|
||||
<v-layout row wrap class="ma-2">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
name="inputname"
|
||||
v-model="info.name"
|
||||
label="Input Name"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
:rules="[rules.required]"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="type"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
v-bind="info.id !== 0 ? {disabled: true} : {disabled: false}"
|
||||
v-model="info.type"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
@change="changeType(keyForm, info.type)"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<!-- Text Input Section -->
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="size"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Size"
|
||||
v-model="info.size"
|
||||
v-if="info.type !== 'Form'"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<!-- SelectBox Section -->
|
||||
<v-layout
|
||||
class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
|
||||
row
|
||||
wrap
|
||||
v-if="info.type === 'Select' || info.type === 'Checkbox'"
|
||||
>
|
||||
<v-layout row wrap class="WM-Relative WM-Width-Full" v-if="info['options'].length > 0">
|
||||
<v-flex
|
||||
xs12
|
||||
md3
|
||||
sm3
|
||||
v-for="(selectbox , keySelect) in info['options']"
|
||||
:key="keySelect"
|
||||
class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
|
||||
>
|
||||
<v-text-field
|
||||
:rules="[rules.required]"
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="selectbox.title"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="pink"
|
||||
v-if="keySelect >= 1"
|
||||
@click="removeSelectbox(keyForm, keySelect)"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="addSelectbox(keyForm)"
|
||||
color="black"
|
||||
class="mb-2"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<!-- Form Section -->
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
v-if="info.type === 'Form'"
|
||||
class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative"
|
||||
>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
v-for="(children , keychildren) in info.children"
|
||||
:key="keychildren"
|
||||
class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Color-LightGrey WM-Width-Full WM-Relative Form"
|
||||
>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
:rules="[rules.required]"
|
||||
name="name"
|
||||
v-model="children.name"
|
||||
label="Input Name"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="type"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
v-model="children.type"
|
||||
v-bind="children.id !== 0 ? {disabled: true} : {disabled: false}"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
@change="changeTypeForm(keyForm, children.type, keychildren)"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="size"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Size"
|
||||
v-if="children.type !== 'Form'"
|
||||
v-model="children.size"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<!-- Inner Form Selectbox Section -->
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
|
||||
v-if="children.type === 'Select' || children.type === 'Checkbox'"
|
||||
>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
class="WM-Relative WM-Width-Full"
|
||||
v-if="children['options'].length > 0"
|
||||
>
|
||||
<v-flex
|
||||
xs12
|
||||
md3
|
||||
sm3
|
||||
v-for="(selectbox , keySelect) in children['options']"
|
||||
:key="keySelect"
|
||||
class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
|
||||
>
|
||||
<v-text-field
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="selectbox.title"
|
||||
:rules="[rules.required]"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="pink"
|
||||
@click="removeSelectboxForm(keyForm, keySelect, keychildren)"
|
||||
v-if="keySelect >= 1"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-form ref="form">
|
||||
<v-container grid-list-xs>
|
||||
<material-card color="black" title="Add a New Test" class>
|
||||
<v-layout row wrap class="ma-2">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
name="name"
|
||||
v-model="form.name"
|
||||
label="Name"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
:rules="[rules.required]"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
:rules="[rules.required]"
|
||||
name="uniquecode"
|
||||
v-model="form.unique_code"
|
||||
label="Unique Code"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="addSelectboxForm(keyForm, keychildren)"
|
||||
color="black"
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Relative"
|
||||
:key="keyForm"
|
||||
v-for="(info, keyForm) in form.info"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
top
|
||||
color="pink"
|
||||
@click="removeForm(keyForm, keychildren)"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<v-btn absolute small right bottom color="cyan" @click="duplicateForm(keyForm)">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<v-btn v-if="keyForm > 0" absolute small right top color="pink" @click="removeInput(keyForm)">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
|
||||
</v-btn>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
align-center
|
||||
justify-center
|
||||
class="mt-4"
|
||||
v-if="(form.info.length -1) == keyForm"
|
||||
>
|
||||
<v-btn absolute right bottom small @click="addInput" color="pink" class="mb-2">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
<v-layout row wrap class="ma-2">
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
name="inputname"
|
||||
v-model="info.name"
|
||||
label="Input Name"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
:rules="[rules.required]"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="type"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
v-bind="info.id !== 0 ? {disabled: true} : {disabled: false}"
|
||||
v-model="info.type"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
@change="changeType(keyForm, info.type)"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<!-- Text Input Section -->
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="size"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Size"
|
||||
v-model="info.size"
|
||||
v-if="info.type !== 'Form'"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<!-- SelectBox Section -->
|
||||
<v-layout
|
||||
class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
|
||||
row
|
||||
wrap
|
||||
v-if="info.type === 'Select' || info.type === 'Checkbox' || info.type === 'Radiobutton'"
|
||||
>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
class="WM-Relative WM-Width-Full"
|
||||
v-if="info['options'].length > 0"
|
||||
>
|
||||
<v-flex
|
||||
xs12
|
||||
md3
|
||||
sm3
|
||||
v-for="(selectbox , keySelect) in info['options']"
|
||||
:key="keySelect"
|
||||
class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
|
||||
>
|
||||
<v-text-field
|
||||
:rules="[rules.required]"
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="selectbox.title"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="pink"
|
||||
v-if="keySelect >= 1"
|
||||
@click="removeSelectbox(keyForm, keySelect)"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="addSelectbox(keyForm)"
|
||||
color="black"
|
||||
class="mb-2"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<v-layout
|
||||
class="ma-3 pa-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
|
||||
row
|
||||
wrap
|
||||
v-if="info.type === 'Range'"
|
||||
>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
class="WM-Relative WM-Width-Full"
|
||||
v-if="info['options'].length > 0"
|
||||
>
|
||||
<v-flex
|
||||
xs12
|
||||
md3
|
||||
sm3
|
||||
class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
|
||||
>
|
||||
<v-text-field
|
||||
:rules="[rules.required]"
|
||||
name="from"
|
||||
label="From"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="info['options'][0].title"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
md3
|
||||
sm3
|
||||
class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
|
||||
>
|
||||
<v-text-field
|
||||
:rules="[rules.required]"
|
||||
name="to"
|
||||
label="To"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="info['options'][1].title"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
<!-- Form Section -->
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
v-if="info.type === 'Form'"
|
||||
class="pa-3 my-4 mx-3 WM-Border WM-Border-Black WM-Relative"
|
||||
>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
v-for="(children , keychildren) in info.children"
|
||||
:key="keychildren"
|
||||
class="pa-3 my-4 mx-3 WM-Border WM-Border-Gray WM-Color-LightGrey WM-Width-Full WM-Relative Form"
|
||||
>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-text-field
|
||||
:rules="[rules.required]"
|
||||
name="name"
|
||||
v-model="children.name"
|
||||
label="Input Name"
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="type"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Type"
|
||||
v-model="children.type"
|
||||
v-bind="children.id !== 0 ? {disabled: true} : {disabled: false}"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
@change="changeTypeForm(keyForm, children.type, keychildren)"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<v-flex xs12 md3 sm3>
|
||||
<v-select
|
||||
:items="size"
|
||||
item-text="state"
|
||||
item-value="abbr"
|
||||
label="Size"
|
||||
v-if="children.type !== 'Form'"
|
||||
v-model="children.size"
|
||||
single-line
|
||||
color="black"
|
||||
class="pa-2"
|
||||
></v-select>
|
||||
</v-flex>
|
||||
<!-- Inner Form Selectbox Section -->
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
class="pa-3 mb-3 WM-Border WM-Border-Black WM-Relative WM-Width-Full"
|
||||
v-if="children.type === 'Select' || children.type === 'Checkbox' || children.type === 'Radiobutton'"
|
||||
>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
class="WM-Relative WM-Width-Full"
|
||||
v-if="children['options'].length > 0"
|
||||
>
|
||||
<v-flex
|
||||
xs12
|
||||
md3
|
||||
sm3
|
||||
v-for="(selectbox , keySelect) in children['options']"
|
||||
:key="keySelect"
|
||||
class="pb-4 ma-2 WM-Border WM-Border-Gray WM-BG-White WM-Width-Full WM-Relative"
|
||||
>
|
||||
<v-text-field
|
||||
name="title"
|
||||
label="Title"
|
||||
color="black"
|
||||
class="pa-2 Input"
|
||||
v-model="selectbox.title"
|
||||
:rules="[rules.required]"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="pink"
|
||||
@click="removeSelectboxForm(keyForm, keySelect, keychildren)"
|
||||
v-if="keySelect >= 1"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="addSelectboxForm(keyForm, keychildren)"
|
||||
color="black"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
top
|
||||
color="pink"
|
||||
@click="removeForm(keyForm, keychildren)"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
absolute
|
||||
small
|
||||
right
|
||||
bottom
|
||||
color="cyan"
|
||||
@click="duplicateForm(keyForm)"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
<v-btn
|
||||
v-if="keyForm > 0 || form.info.length > 1"
|
||||
absolute
|
||||
small
|
||||
right
|
||||
top
|
||||
color="pink"
|
||||
@click="removeInput(keyForm)"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-times</v-icon>REMOVE
|
||||
</v-btn>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
align-center
|
||||
justify-center
|
||||
class="mt-4"
|
||||
v-if="(form.info.length -1) == keyForm"
|
||||
>
|
||||
<v-btn
|
||||
absolute
|
||||
right
|
||||
bottom
|
||||
small
|
||||
@click="addInput"
|
||||
color="pink"
|
||||
class="mb-2"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
|
||||
<span class="white--text">Add</span>
|
||||
</v-btn>
|
||||
</v-layout>
|
||||
</v-layout>
|
||||
|
||||
<v-layout row wrap align-center justify-center class="mt-4">
|
||||
<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="registerForm">
|
||||
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
|
||||
<span class="white--text">Generate Form</span>
|
||||
</v-btn>
|
||||
<router-link to="/dashboard">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</v-form>
|
||||
<v-layout row wrap align-center justify-center class="mt-4">
|
||||
<v-btn
|
||||
class="WM-CyanBlueGradient-BG"
|
||||
style="padding:10px 60px"
|
||||
@click="registerForm"
|
||||
>
|
||||
<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
|
||||
<span class="white--text">Generate Form</span>
|
||||
</v-btn>
|
||||
<router-link to="/dashboard">
|
||||
<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
|
||||
<v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
|
||||
<span class="black--text">Back</span>
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-layout>
|
||||
</material-card>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</template>
|
||||
<script>
|
||||
import { ApiService } from "@/services";
|
||||
import { urls } from "@/config/urls";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: "",
|
||||
unique_code: "",
|
||||
info: [
|
||||
{
|
||||
id: 0,
|
||||
name: "",
|
||||
type: "",
|
||||
size: ""
|
||||
}
|
||||
]
|
||||
},
|
||||
type: [
|
||||
{ state: "Text", abbr: "Text" },
|
||||
{ state: "Checkbox", abbr: "Checkbox" },
|
||||
{ state: "Select", abbr: "Select" },
|
||||
{ state: "Form", abbr: "Form" }
|
||||
],
|
||||
size: [
|
||||
{ state: "not Selected", abbr: "" },
|
||||
{ state: "2 as 12", abbr: "md2 xs12" },
|
||||
{ state: "3 as 12", abbr: "md3 xs12" },
|
||||
{ state: "4 as 12", abbr: "md4 xs12" },
|
||||
{ state: "6 as 12", abbr: "md6 xs12" },
|
||||
{ state: "8 as 12", abbr: "md8 xs12" },
|
||||
{ state: "10 as 12", abbr: "md10 xs12" },
|
||||
{ state: "10 as 12", abbr: "md12 xs12" },
|
||||
],
|
||||
rules: {
|
||||
required: value => !!value || "Required."
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.$route.params.testType) {
|
||||
this.load(this.$route.params.testType);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeType(infoIndex, selectedboxType) {
|
||||
if (selectedboxType == "Select" || selectedboxType == "Checkbox") {
|
||||
this.form.info[infoIndex]["options"] = [{ id: 0, title: "" }];
|
||||
} else {
|
||||
this.form.info[infoIndex]["options"] = [];
|
||||
}
|
||||
if (selectedboxType == "Form") {
|
||||
this.form.info[infoIndex]["children"] = [
|
||||
{ id: 0, name: "", type: "", size: "" }
|
||||
];
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: "",
|
||||
unique_code: "",
|
||||
info: [
|
||||
{
|
||||
id: 0,
|
||||
name: "",
|
||||
type: "",
|
||||
size: ""
|
||||
}
|
||||
]
|
||||
},
|
||||
type: [
|
||||
{ state: "Text", abbr: "Text" },
|
||||
{ state: "Checkbox", abbr: "Checkbox" },
|
||||
{ state: "Select", abbr: "Select" },
|
||||
{ state: "Radiobutton", abbr: "Radiobutton" },
|
||||
{ state: "Switch", abbr: "Switch" },
|
||||
{ state: "Range", abbr: "Range" },
|
||||
{ state: "Time", abbr: "Time" },
|
||||
{ state: "Form", abbr: "Form" }
|
||||
],
|
||||
size: [
|
||||
{ state: "not Selected", abbr: "" },
|
||||
{ state: "2 as 12", abbr: "md2 xs12" },
|
||||
{ state: "3 as 12", abbr: "md3 xs12" },
|
||||
{ state: "4 as 12", abbr: "md4 xs12" },
|
||||
{ state: "6 as 12", abbr: "md6 xs12" },
|
||||
{ state: "8 as 12", abbr: "md8 xs12" },
|
||||
{ state: "10 as 12", abbr: "md10 xs12" },
|
||||
{ state: "10 as 12", abbr: "md12 xs12" }
|
||||
],
|
||||
rules: {
|
||||
required: value => !!value || "Required."
|
||||
}
|
||||
};
|
||||
},
|
||||
removeSelectbox(infoIndex, selectboxOptions) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["options"].splice(selectboxOptions, 1);
|
||||
this.form = form;
|
||||
},
|
||||
addSelectbox(infoIndex) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["options"].push({ id: 0, title: "" });
|
||||
this.form = form;
|
||||
},
|
||||
addInput() {
|
||||
this.form.info.push({ id: 0, name: "", type: "", size: "" });
|
||||
},
|
||||
changeTypeForm(infoIndex, type, formLevel) {
|
||||
if (type == "Select" || type == "Checkbox") {
|
||||
let form = this.form;
|
||||
this.form = "";
|
||||
form.info[infoIndex]["children"][formLevel]["options"] = [
|
||||
{ id: 0, title: "" }
|
||||
];
|
||||
this.form = form;
|
||||
} else {
|
||||
let form = this.form;
|
||||
this.form = "";
|
||||
form.info[infoIndex]["children"][formLevel]["options"] = [];
|
||||
this.form = form;
|
||||
}
|
||||
},
|
||||
removeSelectboxForm(infoIndex, selectboxOptions, formLevel) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["children"][formLevel]["options"].splice(
|
||||
selectboxOptions,
|
||||
1
|
||||
);
|
||||
this.form = form;
|
||||
},
|
||||
addSelectboxForm(infoIndex, formLevel) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["children"][formLevel]["options"].push({
|
||||
id: 0,
|
||||
title: ""
|
||||
});
|
||||
this.form = form;
|
||||
},
|
||||
duplicateForm(infoIndex) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["children"].push({
|
||||
id: 0,
|
||||
name: "",
|
||||
type: "",
|
||||
size: ""
|
||||
});
|
||||
this.form = form;
|
||||
},
|
||||
removeForm(infoIndex, formLevel) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["children"].splice(formLevel, 1);
|
||||
this.form = form;
|
||||
},
|
||||
removeInput(infoIndex) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info.splice(infoIndex, 1);
|
||||
this.form = form;
|
||||
},
|
||||
async registerForm() {
|
||||
if (this.$refs.form.validate()) {
|
||||
let result = null;
|
||||
created() {
|
||||
if (this.$route.params.testType) {
|
||||
result = await ApiService.put(urls.updateTestType(this.$route.params.testType), this.form);
|
||||
} else {
|
||||
result = await ApiService.post(urls.storeTestType, this.form);
|
||||
this.load(this.$route.params.testType);
|
||||
}
|
||||
if (result && result.status == 200) {
|
||||
this.$router.push({ name: `Dashboard` });
|
||||
},
|
||||
methods: {
|
||||
changeType(infoIndex, selectedboxType) {
|
||||
if (selectedboxType == "Select" || selectedboxType == "Checkbox" || selectedboxType == "Radiobutton") {
|
||||
this.form.info[infoIndex]["options"] = [{ id: 0, title: "" }];
|
||||
} else if(selectedboxType == "Range") {
|
||||
this.form.info[infoIndex]["options"] = [{ id: 0, from: "", to: "" }];
|
||||
} else {
|
||||
this.form.info[infoIndex]["options"] = [];
|
||||
}
|
||||
if (selectedboxType == "Form") {
|
||||
this.form.info[infoIndex]["children"] = [
|
||||
{ id: 0, name: "", type: "", size: "" }
|
||||
];
|
||||
}
|
||||
},
|
||||
removeSelectbox(infoIndex, selectboxOptions) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["options"].splice(selectboxOptions, 1);
|
||||
this.form = form;
|
||||
},
|
||||
addSelectbox(infoIndex) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["options"].push({ id: 0, title: "" });
|
||||
this.form = form;
|
||||
},
|
||||
addInput() {
|
||||
this.form.info.push({ id: 0, name: "", type: "", size: "" });
|
||||
},
|
||||
changeTypeForm(infoIndex, type, formLevel) {
|
||||
if (type == "Select" || type == "Checkbox" || type == "Radiobutton") {
|
||||
let form = this.form;
|
||||
this.form = "";
|
||||
form.info[infoIndex]["children"][formLevel]["options"] = [
|
||||
{ id: 0, title: "" }
|
||||
];
|
||||
this.form = form;
|
||||
} else if(type == "Rang") {
|
||||
let form = this.form;
|
||||
this.form = "";
|
||||
form.info[infoIndex]["children"][formLevel]["options"] = [
|
||||
{ id: 0, from: "", to: "" }
|
||||
];
|
||||
this.form = form;
|
||||
} else {
|
||||
let form = this.form;
|
||||
this.form = "";
|
||||
form.info[infoIndex]["children"][formLevel]["options"] = [];
|
||||
this.form = form;
|
||||
}
|
||||
},
|
||||
removeSelectboxForm(infoIndex, selectboxOptions, formLevel) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["children"][formLevel]["options"].splice(
|
||||
selectboxOptions,
|
||||
1
|
||||
);
|
||||
this.form = form;
|
||||
},
|
||||
addSelectboxForm(infoIndex, formLevel) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["children"][formLevel]["options"].push({
|
||||
id: 0,
|
||||
title: ""
|
||||
});
|
||||
this.form = form;
|
||||
},
|
||||
duplicateForm(infoIndex) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["children"].push({
|
||||
id: 0,
|
||||
name: "",
|
||||
type: "",
|
||||
size: ""
|
||||
});
|
||||
this.form = form;
|
||||
},
|
||||
removeForm(infoIndex, formLevel) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info[infoIndex]["children"].splice(formLevel, 1);
|
||||
this.form = form;
|
||||
},
|
||||
removeInput(infoIndex) {
|
||||
let form = this.form;
|
||||
this.form = [];
|
||||
form.info.splice(infoIndex, 1);
|
||||
this.form = form;
|
||||
},
|
||||
async registerForm() {
|
||||
if (this.$refs.form.validate()) {
|
||||
let result = null;
|
||||
if (this.$route.params.testType) {
|
||||
result = await ApiService.put(
|
||||
urls.updateTestType(this.$route.params.testType),
|
||||
this.form
|
||||
);
|
||||
} else {
|
||||
result = await ApiService.post(
|
||||
urls.storeTestType,
|
||||
this.form
|
||||
);
|
||||
}
|
||||
if (result && result.status == 200) {
|
||||
this.$router.push({ name: `Dashboard` });
|
||||
}
|
||||
}
|
||||
},
|
||||
async load(id) {
|
||||
const result = await ApiService.get(urls.editTestType(id));
|
||||
if (result.status == 200) {
|
||||
this.form = result.data.data;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async load(id) {
|
||||
const result = await ApiService.get(urls.editTestType(id));
|
||||
if (result.status == 200) {
|
||||
this.form = result.data.data;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="css" scoped>
|
||||
.WM-Border-Gray {
|
||||
border-color: #aaa !important;
|
||||
border-color: #aaa !important;
|
||||
}
|
||||
.WM-Color-LightGrey {
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.v-btn--top.v-btn--absolute.v-btn--small {
|
||||
top: -25px !important;
|
||||
top: -25px !important;
|
||||
}
|
||||
.v-btn--bottom.v-btn--absolute.v-btn--small {
|
||||
bottom: -24px !important;
|
||||
bottom: -24px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user