283 lines
7.8 KiB
Vue
283 lines
7.8 KiB
Vue
<template>
|
|
<v-layout>
|
|
<v-flex>
|
|
<form>
|
|
<v-layout align-center justify-left row wrap>
|
|
<v-flex xs12 sm6 lg4 xl3 px-2>
|
|
<v-text-field
|
|
v-model="obj.name"
|
|
v-validate="'required|max:255'"
|
|
:counter="255"
|
|
:error-messages="errors.collect('name')"
|
|
:label="lc.get('WidgetName')"
|
|
data-vv-name="name"
|
|
required
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs12 sm6 lg4 xl3 px-2>
|
|
<v-text-field
|
|
v-model="obj.serial"
|
|
v-validate="'required|max:10'"
|
|
:counter="10"
|
|
:error-messages="errors.collect('serial')"
|
|
:label="lc.get('WidgetSerial')"
|
|
data-vv-name="serial"
|
|
required
|
|
></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs12 sm6 lg4 xl3 px-2>
|
|
<v-text-field
|
|
v-model="obj.count"
|
|
v-validate="'required|max:10'"
|
|
:counter="10"
|
|
:error-messages="errors.collect('count')"
|
|
:label="lc.get('WidgetCount')"
|
|
data-vv-name="count"
|
|
required
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs12 sm6 lg4 xl3 px-2>
|
|
<gz-date-time-picker label="Start" v-model="obj.startDate"></gz-date-time-picker>
|
|
</v-flex>
|
|
|
|
<v-flex xs12 sm6 lg4 xl3 px-2>
|
|
<v-text-field
|
|
v-model="obj.dollarAmount"
|
|
:prefix="lc.formats.currencySymbol"
|
|
v-validate="lc.decimalValidate(true)"
|
|
:error-messages="errors.collect('dollarAmount')"
|
|
:label="lc.get('WidgetDollarAmount')"
|
|
data-vv-name="dollarAmount"
|
|
required
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<!-- <v-flex xs12 sm6 lg4 xl3 px-2>
|
|
<div>{{obj.startDate}}</div>
|
|
<gz-date-picker label="TESTStartDate" v-model="obj.startDate"></gz-date-picker>
|
|
</v-flex>
|
|
|
|
<v-flex xs12 sm6 lg4 xl3 px-2>
|
|
<div>{{obj.startDate}}</div>
|
|
<gz-time-picker label="TESTStartTime" v-model="obj.startDate"></gz-time-picker>
|
|
</v-flex>
|
|
|
|
<v-flex xs12 sm6 lg4 xl3 px-2>
|
|
<v-checkbox
|
|
v-model="obj.active"
|
|
v-validate="'required'"
|
|
:error-messages="errors.collect('checkbox')"
|
|
value="1"
|
|
:label="lc.get('Active')"
|
|
data-vv-name="checkbox"
|
|
required
|
|
></v-checkbox>
|
|
</v-flex>
|
|
|
|
<v-flex xs12 sm6 lg4 xl3 px-2>
|
|
<div>{{obj.startDate}}</div>
|
|
<gz-date-time-picker label="TESTBOTHPICKERS" v-model="obj.startDate"></gz-date-time-picker>
|
|
</v-flex>-->
|
|
<!--
|
|
<v-menu
|
|
ref="menu"
|
|
v-model="menu"
|
|
:close-on-content-click="false"
|
|
:nudge-right="40"
|
|
:return-value.sync="date"
|
|
lazy
|
|
transition="scale-transition"
|
|
offset-y
|
|
full-width
|
|
min-width="290px"
|
|
>
|
|
<template v-slot:activator="{ on }">
|
|
<v-text-field
|
|
v-model="date"
|
|
label="Picker in menu"
|
|
prepend-icon="event"
|
|
readonly
|
|
v-on="on"
|
|
></v-text-field>
|
|
</template>
|
|
<v-date-picker v-model="date" no-title scrollable>
|
|
<v-spacer></v-spacer>
|
|
<v-btn flat color="primary" @click="menu = false">Cancel</v-btn>
|
|
<v-btn flat color="primary" @click="$refs.menu.save(date)">OK</v-btn>
|
|
</v-date-picker>
|
|
</v-menu>-->
|
|
</v-layout>
|
|
<v-layout align-center justify-space-around row wrap mt-5>
|
|
<v-flex xs1>
|
|
<v-btn @click="test">TEST</v-btn>
|
|
</v-flex>
|
|
<v-flex xs1>
|
|
<v-btn @click="clear">clear</v-btn>
|
|
</v-flex>
|
|
<v-flex xs1>
|
|
<v-btn @click="submit">submit</v-btn>
|
|
</v-flex>
|
|
</v-layout>
|
|
</form>
|
|
</v-flex>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<script>
|
|
/* eslint-disable */
|
|
// type="checkbox"
|
|
//import store from "../store";
|
|
import locale from "../api/locale";
|
|
import api from "../api/apiutil";
|
|
import dayjs from "dayjs";
|
|
//import _ from "../utils/libs/lodash.js";
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
obj: {},
|
|
lc: locale,
|
|
theDate: new Date(),
|
|
date: new Date().toISOString().substr(0, 10),
|
|
menu: false,
|
|
modal: false,
|
|
menu2: false
|
|
};
|
|
},
|
|
computed: {
|
|
// dateFormatted() {
|
|
// // var value = this.obj.startDate;
|
|
// // if (!value) return "";
|
|
// // var dj = dayjs(value);
|
|
// // return dj.format("YYYY-MM-DD hh:mm:ss A");
|
|
// return this.obj.startDate
|
|
// ? dayjs(this.obj.startDate).format("YYYY-MM-DD hh:mm:ss A")
|
|
// : "";
|
|
// //return this.obj.startDate ? moment(this.date).format("dddd, MMMM Do YYYY") : "";
|
|
// }
|
|
},
|
|
beforeRouteEnter(to, from, next) {
|
|
//Cache all required lt keys
|
|
var ltKeysRequired = [
|
|
"Widget",
|
|
"WidgetName",
|
|
"WidgetSerial",
|
|
"WidgetDollarAmount",
|
|
"WidgetCount",
|
|
"WidgetRoles",
|
|
"WidgetStartDate",
|
|
"WidgetEndDate",
|
|
"WidgetNotes",
|
|
"WidgetCustom1",
|
|
"WidgetCustom2",
|
|
"WidgetCustom3",
|
|
"WidgetCustom4",
|
|
"WidgetCustom5",
|
|
"WidgetCustom6",
|
|
"WidgetCustom7",
|
|
"WidgetCustom8",
|
|
"WidgetCustom9",
|
|
"WidgetCustom10",
|
|
"WidgetCustom11",
|
|
"WidgetCustom12",
|
|
"WidgetCustom13",
|
|
"WidgetCustom14",
|
|
"WidgetCustom15",
|
|
"WidgetCustom16"
|
|
].concat(locale.commonKeysEditForm);
|
|
locale.fetch(ltKeysRequired).then(() => {
|
|
next();
|
|
});
|
|
},
|
|
mounted() {
|
|
//debugger;
|
|
// this.getDataFromApi();
|
|
},
|
|
methods: {
|
|
getDataFromApi() {
|
|
//debugger;
|
|
|
|
//debugger;
|
|
var url = "Widget/" + this.$route.params.id;
|
|
api.get(url).then(res => {
|
|
// debugger;
|
|
//this.loading = false;
|
|
this.obj = res.data;
|
|
//this.totalItems = res.paging.count;
|
|
});
|
|
},
|
|
submit() {
|
|
//alert("VALIDATING>>>");
|
|
// debugger;
|
|
console.log(obj.dollarAmount2);
|
|
alert(obj.dollarAmount2);
|
|
this.$validator.validateAll();
|
|
},
|
|
clear() {
|
|
//debugger;
|
|
console.log(this.data().obj.dollarAmount);
|
|
alert(data().obj.dollarAmount);
|
|
},
|
|
test() {
|
|
// debugger;
|
|
|
|
console.log(this.lc.decimalParse(this.obj.dollarAmount));
|
|
}
|
|
},
|
|
created() {
|
|
this.getDataFromApi();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|
|
|
|
/*
|
|
Sample widget record api v8
|
|
{
|
|
"data": {
|
|
"id": 100,
|
|
"concurrencyToken": 2675248,
|
|
"ownerId": 1,
|
|
"name": "Fantastic Wooden Chips 122",
|
|
"serial": 100,
|
|
"dollarAmount": 584.83,
|
|
"active": true,
|
|
"roles": 8212,
|
|
"startDate": "2019-02-12T10:12:39.594206",
|
|
"endDate": "2019-02-12T13:40:59.986405",
|
|
"notes": "Eum optio incidunt blanditiis laboriosam. Sed ipsam occaecati minus corrupti repudiandae delectus. Culpa nostrum est ullam assumenda animi ut. Velit sunt ex ipsum. Temporibus cum quaerat at omnis at quas. Commodi dolor molestiae beatae.",
|
|
"count": 0,
|
|
"customFields": null,
|
|
"tags": [
|
|
"brown",
|
|
"red"
|
|
]
|
|
}
|
|
}
|
|
|
|
IN JS FORMAT
|
|
{
|
|
data: {
|
|
id: 100,
|
|
concurrencyToken: 2675248,
|
|
ownerId: 1,
|
|
name: 'Fantastic Wooden Chips 122',
|
|
serial: 100,
|
|
dollarAmount: 584.83,
|
|
active: true,
|
|
roles: 8212,
|
|
startDate: '2019-02-12T10:12:39.594206',
|
|
endDate: '2019-02-12T13:40:59.986405',
|
|
notes: 'Eum optio incidunt blanditiis laboriosam. Sed ipsam occaecati minus corrupti repudiandae delectus. Culpa nostrum est ullam assumenda animi ut. Velit sunt ex ipsum. Temporibus cum quaerat at omnis at quas. Commodi dolor molestiae beatae.',
|
|
count: 0,
|
|
customFields: null,
|
|
tags: [
|
|
'brown',
|
|
'red'
|
|
]
|
|
}
|
|
}
|
|
*/ |