vue migration edit form changes
This commit is contained in:
@@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<v-row row wrap v-if="!readonly">
|
<v-row row wrap v-if="!readonly">
|
||||||
<v-col xs6>
|
<v-col xs6>
|
||||||
<v-dialog v-model="dlgdate" persistent lazy full-width width="290px">
|
<v-dialog v-model="dlgdate" persistent width="290px">
|
||||||
<template v-slot:activator="{ on }">
|
<template v-slot:activator="{ on }">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-on="on"
|
v-on="on"
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
</v-dialog>
|
</v-dialog>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col xs6>
|
<v-col xs6>
|
||||||
<v-dialog v-model="dlgtime" persistent lazy full-width width="290px">
|
<v-dialog v-model="dlgtime" persistent width="290px">
|
||||||
<template v-slot:activator="{ on }">
|
<template v-slot:activator="{ on }">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-on="on"
|
v-on="on"
|
||||||
|
|||||||
@@ -1,181 +1,182 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-row v-if="this.formState.ready">
|
<v-container>
|
||||||
<v-col>
|
<v-row v-if="this.formState.ready">
|
||||||
<v-form ref="form">
|
<v-col>
|
||||||
<v-row align-center justify-left row wrap>
|
<v-form ref="form">
|
||||||
<v-col cols="12" mt-1 mb-2>
|
<v-row>
|
||||||
<v-alert
|
<v-col cols="12" mt-1 mb-2>
|
||||||
ref="errorbox"
|
<v-alert
|
||||||
v-show="formState.errorBoxMessage"
|
ref="errorbox"
|
||||||
color="error"
|
v-show="formState.errorBoxMessage"
|
||||||
icon="fa-exclamation-circle "
|
color="error"
|
||||||
value="true"
|
icon="fa-exclamation-circle "
|
||||||
transition="scale-transition"
|
:value="true"
|
||||||
class="multi-line"
|
transition="scale-transition"
|
||||||
outlined
|
class="multi-line"
|
||||||
>{{ formState.errorBoxMessage }}</v-alert
|
outlined
|
||||||
>
|
>{{ formState.errorBoxMessage }}</v-alert
|
||||||
</v-col>
|
>
|
||||||
<v-col cols="12" sm6 lg4 xl3 px-2>
|
</v-col>
|
||||||
<v-text-field
|
<v-col cols="12" sm="6" lg="4" xl="3">
|
||||||
v-model="obj.name"
|
<v-text-field
|
||||||
:readonly="this.formState.readOnly"
|
v-model="obj.name"
|
||||||
clearable
|
:readonly="this.formState.readOnly"
|
||||||
@click:clear="onChange('name')"
|
clearable
|
||||||
:counter="255"
|
@click:clear="onChange('name')"
|
||||||
:label="lt('WidgetName')"
|
:counter="255"
|
||||||
:rules="[
|
:label="lt('WidgetName')"
|
||||||
form().max255(this, 'name'),
|
:rules="[
|
||||||
form().required(this, 'name')
|
form().max255(this, 'name'),
|
||||||
]"
|
form().required(this, 'name')
|
||||||
:error-messages="form().serverErrors(this, 'name')"
|
]"
|
||||||
ref="name"
|
:error-messages="form().serverErrors(this, 'name')"
|
||||||
@change="onChange('name')"
|
ref="name"
|
||||||
></v-text-field>
|
@change="onChange('name')"
|
||||||
</v-col>
|
></v-text-field>
|
||||||
<v-col cols="12" sm6 lg4 xl3 px-2>
|
</v-col>
|
||||||
<v-text-field
|
<v-col cols="12" sm="6" lg="4" xl="3">
|
||||||
v-model="obj.serial"
|
<v-text-field
|
||||||
:readonly="this.formState.readOnly"
|
v-model="obj.serial"
|
||||||
clearable
|
:readonly="this.formState.readOnly"
|
||||||
@click:clear="onChange('serial')"
|
clearable
|
||||||
:counter="10"
|
@click:clear="onChange('serial')"
|
||||||
:label="lt('WidgetSerial')"
|
:counter="10"
|
||||||
:rules="[form().maxLength(this, 'serial', 10)]"
|
:label="lt('WidgetSerial')"
|
||||||
:error-messages="form().serverErrors(this, 'serial')"
|
:rules="[form().maxLength(this, 'serial', 10)]"
|
||||||
ref="serial"
|
:error-messages="form().serverErrors(this, 'serial')"
|
||||||
@change="onChange('serial')"
|
ref="serial"
|
||||||
></v-text-field>
|
@change="onChange('serial')"
|
||||||
</v-col>
|
></v-text-field>
|
||||||
<v-col cols="12" sm6 lg4 xl3 px-2>
|
</v-col>
|
||||||
<v-text-field
|
<v-col cols="12" sm="6" lg="4" xl="3">
|
||||||
v-model="obj.count"
|
<v-text-field
|
||||||
:readonly="this.formState.readOnly"
|
v-model="obj.count"
|
||||||
clearable
|
:readonly="this.formState.readOnly"
|
||||||
@click:clear="onChange('count')"
|
clearable
|
||||||
:counter="10"
|
@click:clear="onChange('count')"
|
||||||
:label="lt('WidgetCount')"
|
:counter="10"
|
||||||
ref="count"
|
:label="lt('WidgetCount')"
|
||||||
:rules="[
|
ref="count"
|
||||||
form().integerValid(this, 'count'),
|
:rules="[
|
||||||
form().required(this, 'count')
|
form().integerValid(this, 'count'),
|
||||||
]"
|
form().required(this, 'count')
|
||||||
:error-messages="form().serverErrors(this, 'count')"
|
]"
|
||||||
required
|
:error-messages="form().serverErrors(this, 'count')"
|
||||||
@change="onChange('count')"
|
required
|
||||||
type="number"
|
@change="onChange('count')"
|
||||||
></v-text-field>
|
type="number"
|
||||||
</v-col>
|
></v-text-field>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" sm6 lg4 xl3 px-2>
|
<v-col cols="12" sm="6" lg="4" xl="3">
|
||||||
<v-text-field
|
<v-text-field
|
||||||
v-model="obj.dollarAmount"
|
v-model="obj.dollarAmount"
|
||||||
:readonly="this.formState.readOnly"
|
:readonly="this.formState.readOnly"
|
||||||
:prefix="ltFormat().currencySymbol"
|
:prefix="ltFormat().currencySymbol"
|
||||||
:label="lt('WidgetDollarAmount')"
|
:label="lt('WidgetDollarAmount')"
|
||||||
ref="dollarAmount"
|
ref="dollarAmount"
|
||||||
required
|
required
|
||||||
:rules="[
|
:rules="[
|
||||||
form().decimalValid(this, 'dollarAmount'),
|
form().decimalValid(this, 'dollarAmount'),
|
||||||
form().required(this, 'dollarAmount')
|
form().required(this, 'dollarAmount')
|
||||||
]"
|
]"
|
||||||
:error-messages="form().serverErrors(this, 'dollarAmount')"
|
:error-messages="form().serverErrors(this, 'dollarAmount')"
|
||||||
@change="onChange('dollarAmount')"
|
@change="onChange('dollarAmount')"
|
||||||
type="number"
|
type="number"
|
||||||
></v-text-field>
|
></v-text-field>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" sm6 lg4 xl3 px-2>
|
<v-col cols="12" sm="6" lg="4" xl="3">
|
||||||
<gz-date-time-picker
|
<gz-date-time-picker
|
||||||
:label="lt('WidgetStartDate')"
|
:label="lt('WidgetStartDate')"
|
||||||
v-model="obj.startDate"
|
v-model="obj.startDate"
|
||||||
:readonly="this.formState.readOnly"
|
:readonly="this.formState.readOnly"
|
||||||
ref="startDate"
|
ref="startDate"
|
||||||
:error-messages="form().serverErrors(this, 'startDate')"
|
:error-messages="form().serverErrors(this, 'startDate')"
|
||||||
@change="onChange('startDate')"
|
@change="onChange('startDate')"
|
||||||
></gz-date-time-picker>
|
></gz-date-time-picker>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" sm6 lg4 xl3 px-2>
|
<v-col cols="12" sm="6" lg="4" xl="3">
|
||||||
<gz-date-time-picker
|
<gz-date-time-picker
|
||||||
:label="lt('WidgetEndDate')"
|
:label="lt('WidgetEndDate')"
|
||||||
:rules="[form().datePrecedence(this, 'startDate', 'endDate')]"
|
:rules="[form().datePrecedence(this, 'startDate', 'endDate')]"
|
||||||
:error-messages="form().serverErrors(this, 'endDate')"
|
:error-messages="form().serverErrors(this, 'endDate')"
|
||||||
v-model="obj.endDate"
|
v-model="obj.endDate"
|
||||||
:readonly="this.formState.readOnly"
|
:readonly="this.formState.readOnly"
|
||||||
ref="endDate"
|
ref="endDate"
|
||||||
@change="onChange('endDate')"
|
@change="onChange('endDate')"
|
||||||
></gz-date-time-picker>
|
></gz-date-time-picker>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" sm6 lg4 xl3 px-2>
|
<v-col cols="12" sm="6" lg="4" xl="3">
|
||||||
<v-checkbox
|
<v-checkbox
|
||||||
v-model="obj.active"
|
v-model="obj.active"
|
||||||
:readonly="this.formState.readOnly"
|
:readonly="this.formState.readOnly"
|
||||||
:label="lt('Active')"
|
:label="lt('Active')"
|
||||||
ref="active"
|
ref="active"
|
||||||
:error-messages="form().serverErrors(this, 'active')"
|
:error-messages="form().serverErrors(this, 'active')"
|
||||||
required
|
required
|
||||||
@change="onChange('active')"
|
@change="onChange('active')"
|
||||||
></v-checkbox>
|
></v-checkbox>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" sm6 lg4 xl3 px-2>
|
<v-col cols="12" sm="6" lg="4" xl="3">
|
||||||
<v-select
|
<v-select
|
||||||
v-model="obj.roles"
|
v-model="obj.roles"
|
||||||
:items="pickLists.roles"
|
:items="pickLists.roles"
|
||||||
item-text="name"
|
item-text="name"
|
||||||
item-value="id"
|
item-value="id"
|
||||||
:readonly="this.formState.readOnly"
|
:readonly="this.formState.readOnly"
|
||||||
:label="lt('WidgetRoles')"
|
:label="lt('WidgetRoles')"
|
||||||
ref="roles"
|
ref="roles"
|
||||||
:rules="[
|
:rules="[
|
||||||
form().integerValid(this, 'roles'),
|
form().integerValid(this, 'roles'),
|
||||||
form().required(this, 'roles')
|
form().required(this, 'roles')
|
||||||
]"
|
]"
|
||||||
:error-messages="form().serverErrors(this, 'roles')"
|
:error-messages="form().serverErrors(this, 'roles')"
|
||||||
required
|
required
|
||||||
@change="onChange('roles')"
|
@change="onChange('roles')"
|
||||||
></v-select>
|
></v-select>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" px-2>
|
<v-col cols="12">
|
||||||
<v-textarea
|
<v-textarea
|
||||||
v-model="obj.notes"
|
v-model="obj.notes"
|
||||||
:readonly="this.formState.readOnly"
|
:readonly="this.formState.readOnly"
|
||||||
:label="lt('WidgetNotes')"
|
:label="lt('WidgetNotes')"
|
||||||
:error-messages="form().serverErrors(this, 'notes')"
|
:error-messages="form().serverErrors(this, 'notes')"
|
||||||
ref="notes"
|
ref="notes"
|
||||||
@change="onChange('notes')"
|
@change="onChange('notes')"
|
||||||
auto-grow
|
auto-grow
|
||||||
></v-textarea>
|
></v-textarea>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" px-2>
|
<v-col cols="12">
|
||||||
<gz-tag-picker
|
<gz-tag-picker
|
||||||
:label="lt('Tags')"
|
:label="lt('Tags')"
|
||||||
v-model="obj.tags"
|
v-model="obj.tags"
|
||||||
:readonly="this.formState.readOnly"
|
:readonly="this.formState.readOnly"
|
||||||
ref="tags"
|
ref="tags"
|
||||||
:error-messages="form().serverErrors(this, 'tags')"
|
:error-messages="form().serverErrors(this, 'tags')"
|
||||||
@change="onChange('tags')"
|
@change="onChange('tags')"
|
||||||
></gz-tag-picker>
|
></gz-tag-picker>
|
||||||
</v-col>
|
</v-col>
|
||||||
|
|
||||||
<v-col cols="12" px-2>
|
<v-col cols="12">
|
||||||
<gz-custom-fields
|
<gz-custom-fields
|
||||||
:formKey="formCustomTemplateKey"
|
:formKey="formCustomTemplateKey"
|
||||||
v-bind:value.sync="obj.customFields"
|
v-bind:value.sync="obj.customFields"
|
||||||
:readOnly="this.formState.readOnly"
|
:readOnly="this.formState.readOnly"
|
||||||
ref="customFields"
|
ref="customFields"
|
||||||
:error-messages="form().serverErrors(this, 'customFields')"
|
:error-messages="form().serverErrors(this, 'customFields')"
|
||||||
@change="onChange('customFields')"
|
@change="onChange('customFields')"
|
||||||
></gz-custom-fields>
|
></gz-custom-fields>
|
||||||
<!-- v-model="obj.customFields" -->
|
<!-- v-model="obj.customFields" -->
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
<!-- <v-layout align-left justify-center row wrap mt-12>
|
<!-- <v-layout align-left justify-center row wrap mt-12>
|
||||||
<v-col xs6 sm4> FORMtags: {{ obj.tags }} </v-col>
|
<v-col xs6 sm4> FORMtags: {{ obj.tags }} </v-col>
|
||||||
</v-row> -->
|
</v-row> -->
|
||||||
<!-- <v-layout align-left justify-center row wrap mt-12>
|
<!-- <v-layout align-left justify-center row wrap mt-12>
|
||||||
<v-col xs6 sm4>
|
<v-col xs6 sm4>
|
||||||
READY: {{ formState.ready }}
|
READY: {{ formState.ready }}
|
||||||
<br />
|
<br />
|
||||||
@@ -189,9 +190,10 @@
|
|||||||
<br />
|
<br />
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>-->
|
</v-row>-->
|
||||||
</v-form>
|
</v-form>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Reference in New Issue
Block a user