Former-commit-id: 6eb5cc06348e15da4faac962e4ac62b304e73f61
Former-commit-id: e842d7e73d0cff1b97c7e0b4308abb6612cf637f
TSXN
wanggang 5 years ago
parent 828dd17e7c
commit bd9769f5f9

@ -5,7 +5,7 @@ Vue.prototype.uploadUrl = config.uploadUrl;
Vue.use(window.vuelidate.default); Vue.use(window.vuelidate.default);
Vue.directive('valid', { Vue.directive('valid', {
bind: function (el, binding) { inserted: function (el, binding) {
if (binding.value) { if (binding.value) {
$(el).attr('data-val',true); $(el).attr('data-val',true);
if (binding.value.required) { if (binding.value.required) {
@ -15,11 +15,23 @@ Vue.directive('valid', {
$(el).attr('data-val-regex-pattern', binding.value.pattern.regex); $(el).attr('data-val-regex-pattern', binding.value.pattern.regex);
$(el).attr('data-val-regex-message', binding.value.pattern.message); $(el).attr('data-val-regex-message', binding.value.pattern.message);
} }
//var temp = this;
//$(el).change(function () {
// console.log(temp);
// if (!$(this).attr('data-val')) {
// return;
// }
// if (!$(this).attr('data-val-required')) {
// if (!$(this).val()) {
// console.log('required');
// }
// }
//});
} }
}, },
update: function (el, binding) { update: function (el, binding) {
if (binding.value !== binding.oldValue) { if (binding.value.currentValue !== binding.oldValue.currentValue) {
console.log('value changed:' + el.value); //$(el).parents('form').validate().element($(el));
} }
} }
}); });

@ -3,8 +3,8 @@
<h1>{{title}}</h1> <h1>{{title}}</h1>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<form v-if="hasPermission()" ref="form" class="form-horizontal query" :action="action" @submit.prevent="onSubmit($event)"> <form ref="form" class="form-horizontal query" :action="action" @submit.prevent="onSubmit($event)">
<div class="card" v-if="data.schema"> <div class="card" v-if="hasPermission()&&data.schema">
<div class="card-body"> <div class="card-body">
<template v-if="data.errors"> <template v-if="data.errors">
<div class="form-group" v-for="error in getValidationSummary(true)"> <div class="form-group" v-for="error in getValidationSummary(true)">
@ -24,8 +24,10 @@
<template v-else> <template v-else>
<component :is="getEditComponent(key)" :title="value.title" :name="key" :value.sync="data.model[key]" :data="data.data" :valid="valid(value,key,data.model[key])" :mode="'edit'" v-if="data.model" /> <component :is="getEditComponent(key)" :title="value.title" :name="key" :value.sync="data.model[key]" :data="data.data" :valid="valid(value,key,data.model[key])" :mode="'edit'" v-if="data.model" />
</template> </template>
<span class="field-validation-error text-danger" data-valmsg-for="UserName" data-valmsg-replace="true" v-if="hasErrors(key)">{{getErrors(key)}}</span> <div style="height:1em;">
<span class="text-danger field-validation-valid" :data-valmsg-for="key" data-valmsg-replace="true" v-else></span> <span class="field-validation-error text-danger" data-valmsg-for="UserName" data-valmsg-replace="true" v-if="hasErrors(key)">{{getErrors(key)}}</span>
<span class="text-danger field-validation-valid" :data-valmsg-for="key" data-valmsg-replace="true" v-else></span>
</div>
</div> </div>
<div class="col-sm-4">{{value.description}}</div> <div class="col-sm-4">{{value.description}}</div>
</div> </div>
@ -76,21 +78,29 @@
mounted: function () { mounted: function () {
this.load(); this.load();
}, },
watch: {
'data.model': {
handler: function (newModel, oldModel) {
console.log(newModel);
},
deep: true
}
},
methods: { methods: {
load: function () { load: function () {
var vm = this; var vm = this;
var url = this.baseUrl + this.url; var url = this.baseUrl + this.url;
axios.get(url).then(function (response) { axios.get(url).then(function (response) {
vm.data = response.data; vm.data = response.data;
vm.validInit(); vm.$nextTick(function () {
vm.validInit();
});
}); });
}, },
validInit: function () { validInit: function () {
this.$nextTick(function () { var form = $(this.$refs.form);
$(this.$refs.form).removeData('validator'); form.removeData('validator').removeData('unobtrusiveValidation');
$(this.$refs.form).removeData('unobtrusiveValidation'); $.validator.unobtrusive.parse(form);
$.validator.unobtrusive.parse(this.$refs.form);
});
}, },
getValidationSummary: function (excludePropertyErrors) { getValidationSummary: function (excludePropertyErrors) {
var query = Enumerable.from(this.data.errors); var query = Enumerable.from(this.data.errors);
@ -138,7 +148,8 @@
return result; return result;
}, },
onSubmit: function (e) { onSubmit: function (e) {
if ($(e.target).validate()) { if ($(e.target).valid()) {
alert('submit');
var vm = this; var vm = this;
axios.post(e.target.action, this.data.model).then(function (response) { axios.post(e.target.action, this.data.model).then(function (response) {
if (response.status === 204) { if (response.status === 204) {
@ -149,7 +160,9 @@
} }
else { else {
vm.data = response.data; vm.data = response.data;
vm.validInit(); vm.$nextTick(function () {
this.validInit();
});
} }
}); });
} }

@ -1,15 +1,20 @@
<template> <template>
<div> <div>
<input type="text" :name="name" class="form-control" v-model="value" v-valid="valid" /> <input type="text" :name="name" class="form-control" v-model="currentValue" v-valid="valid" />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['name', 'value', 'valid', 'data', 'prefix'], props: ['name', 'value', 'valid', 'data', 'prefix'],
data: function () {
return {
currentValue: this.value
};
},
watch: { watch: {
value(val) { currentValue(val) {
this.$emit('update:value', val) this.$emit('update:value', val)
}, },
} },
}; };
</script> </script>
Loading…
Cancel
Save