You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
225 lines
11 KiB
225 lines
11 KiB
<template>
|
|
<layout v-bind:title="title">
|
|
<h1>{{title}}</h1>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<form ref="form" class="form-horizontal query" :action="action" @submit.prevent="onSubmit($event)">
|
|
<div class="card" v-if="hasPermission()&&data.schema">
|
|
<div class="card-body">
|
|
<template v-if="data.errors">
|
|
<div class="form-group" v-for="error in getValidationSummary(true)">
|
|
<div class="offset-sm-2 col-sm-10 ">
|
|
<div style="color:#dc3545;">{{error}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<input type="hidden" name="id" :value="data.model.id" />
|
|
<div class="form-group row" v-for="(value,key,index) in data.schema.properties" v-if="show(key,value)">
|
|
<label class="col-sm-2 col-form-label" :for="key">{{value.title}}:</label>
|
|
<div v-if="data.model" class="col-sm-6 form-control" style="border-color:transparent;height:auto;min-height:calc(2.25rem + 2px);">
|
|
<template v-if="value.readOnly&&mode!=='Add'">
|
|
<input type="hidden" :name="key" :value="data.model[key]" />
|
|
<component :is="getDisplayComponent(key)" :title="value.title" :name="key" :value="data.model[key]" :data="data.data" v-if="data.model" />
|
|
</template>
|
|
<template v-else>
|
|
<component :is="getEditComponent(key)" :mode="'edit'" :title="value.title" :name="key" :value.sync="data.model[key]" :data="data.data" v-on:change="change" />
|
|
</template>
|
|
<div style="height:1em;">
|
|
<span v-if="hasErrors(key)" class="field-validation-error text-danger" data-valmsg-for="UserName" data-valmsg-replace="true">{{getErrors(key)}}</span>
|
|
<span v-else class="text-danger field-validation-valid" :data-valmsg-for="key" data-valmsg-replace="true"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">{{value.description}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<button type="submit" class="btn btn-primary">确定</button>
|
|
<router-link :to="{path:'/router/shared/list.html',query:{entity:entity}}" class="btn btn-default">返回</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</layout>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'page-edit',
|
|
data: function () {
|
|
return {
|
|
mode: this.$route.query.mode,
|
|
entity: this.$route.query.entity,
|
|
data: {
|
|
errors: [],
|
|
schema: null,
|
|
model: null,
|
|
data: null
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
title: function () {
|
|
return (this.mode === 'Add' ? '新建' : '编辑') + (this.data.schema ? this.data.schema.title : '');
|
|
},
|
|
url: function () {
|
|
return '/IoTCenter/Admin/' +
|
|
this.$route.query.entity + '/' +
|
|
this.$route.query.mode +
|
|
(this.mode === 'Edit' ? ('?id=' + this.$route.query.id) : '');
|
|
},
|
|
action: function () {
|
|
return '/IoTCenter/Admin/' + this.$route.query.entity + '/' + this.$route.query.mode + 'Api';
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.load();
|
|
},
|
|
methods: {
|
|
load: function () {
|
|
var vm = this;
|
|
var url = this.baseUrl + this.url;
|
|
axios.get(url).then(function (response) {
|
|
vm.data = response.data;
|
|
});
|
|
},
|
|
change: function (name) {
|
|
var vm = this;
|
|
var value = this.data.model[name];
|
|
var property = this.data.schema.properties[name];
|
|
this.validInternal(property.required, name, o => value);
|
|
this.validInternal(property.pattern, name, o => new RegExp(property.pattern.regex).test(value));
|
|
this.validInternal(property.minLength, name, o => value.length >= property.minLength.min);
|
|
this.validInternal(property.maxLength, name, o => value.length <= property.maxLength.max);
|
|
this.validInternal(property.length, name, o => value.length >= property.length.min && value.length <= property.length.max);
|
|
this.validInternal(property.range, name, o => parseFloat(value) >= property.range.minimum && parseFloat(value) <= property.range.maximum);
|
|
this.validInternal(property.compare, name, o => o === vm.data.model[vm.camelCased(name)]);
|
|
this.validInternal(property.remote, name, o => {
|
|
var url = property.remote.url + '?' + name + '=' + value;
|
|
if (property.remote.additionalFields) {
|
|
var keys = property.remote.additionalFields.split(',');
|
|
for (var i = 0; i < keys.length; i++) {
|
|
var key = keys[i];
|
|
url = url + '&' + key + '=' + vm.data.model[vm.camelCased(key)];
|
|
}
|
|
}
|
|
axios.get(url).then(function (response) {
|
|
if (response.data === true) {
|
|
vm.removeError(name);
|
|
}
|
|
else {
|
|
var message = response.data === false ? property.remote.message : response.data;
|
|
vm.updateError(name, message);
|
|
}
|
|
}).catch(function (error) {
|
|
vm.removeError(name);
|
|
vm.updateError(name, 'network error');
|
|
});
|
|
return false;
|
|
}, 'loading');
|
|
console.log(this.data.errors);
|
|
},
|
|
validInternal: function (validator, name, valid, message) {
|
|
if (!validator) {
|
|
return;
|
|
}
|
|
var property = this.data.schema.properties[name];
|
|
if (valid()) {
|
|
this.removeError(name);
|
|
}
|
|
else {
|
|
message = message || validator.message;
|
|
this.updateError(name, message);
|
|
}
|
|
},
|
|
camelCased: function (name) {
|
|
return name[0].toLowerCase() + name.substr(1);
|
|
},
|
|
removeError: function (name, message) {
|
|
var error = Enumerable.from(this.data.errors).firstOrDefault(o => o.key.toLowerCase() === name.toLowerCase());
|
|
if (error) {
|
|
var index = _.findIndex(this.data.errors, o => o.key.toLowerCase() === name.toLowerCase());
|
|
this.data.errors.splice(index, 1);
|
|
}
|
|
},
|
|
updateError: function (name, message) {
|
|
var error = Enumerable.from(this.data.errors).firstOrDefault(o => o.key.toLowerCase() === name.toLowerCase());
|
|
if (!error) {
|
|
error = {
|
|
key: name,
|
|
value: {
|
|
errors: [{ errorMessage: message }]
|
|
}
|
|
};
|
|
this.data.errors.push(error);
|
|
}
|
|
else {
|
|
if (!Enumerable.from(error.value.errors).any(o => o === message)) {
|
|
error.value.errors.push({ errorMessage: message });
|
|
}
|
|
}
|
|
},
|
|
valid: function () {
|
|
var vm = this
|
|
_.forIn(this.data.schema.properties, function (value, key) {
|
|
vm.change(key);
|
|
});
|
|
return this.data.errors.length === 0;
|
|
},
|
|
getValidationSummary: function (excludePropertyErrors) {
|
|
var query = Enumerable.from(this.data.errors);
|
|
if (excludePropertyErrors) {
|
|
query = query.where(o => o.key === '')
|
|
}
|
|
return query.select(o => o.value.errors[0].errorMessage).toArray();
|
|
},
|
|
hasErrors: function (key) {
|
|
key = key.toLowerCase();
|
|
return Enumerable.from(this.data.errors).any(o => o.key.toLowerCase() === key);
|
|
},
|
|
getErrors: function (key) {
|
|
key = key.toLowerCase();
|
|
return Enumerable.from(this.data.errors)
|
|
.where(o => o.key.toLowerCase() === key).selectMany(o => o.value.errors).select(o => o.errorMessage).toArray();
|
|
},
|
|
hasPermission: function () {
|
|
var permission = this.mode + '-' + this.entity;
|
|
return Enumerable.from(store.state.permissions).any(o => o === permission);
|
|
},
|
|
getEditComponent: function (key) {
|
|
var property = this.data.schema.properties[key];
|
|
var template = 'edit-' + (property.ui || property.format || property.type);
|
|
return template;
|
|
},
|
|
getDisplayComponent: function (key) {
|
|
var property = this.data.schema.properties[key];
|
|
var template = 'display-' + (property.ui || property.format || property.type);
|
|
return template;
|
|
},
|
|
show: function (key, value) {
|
|
return key !== 'id';
|
|
},
|
|
onSubmit: function (e) {
|
|
if (this.valid()) {
|
|
var vm = this;
|
|
axios.post(e.target.action, this.data.model).then(function (response) {
|
|
if (response.status === 204) {
|
|
var url = '/router/shared/list.html?entity=' + vm.entity;
|
|
setTimeout(function () {
|
|
router.push(url);
|
|
}, 1000);
|
|
}
|
|
else {
|
|
vm.data = response.data;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |