@ -3,7 +3,7 @@
< h1 > {{title}}< / h1 >
< div class = "row" >
< div class = "col-12" >
< form ref = "form" = " form-horizontal query" :action = "action" @ submit . prevent = "onSubmit($event) " v-if = "data.model ">
< form ref = "form" : class= " ' form-horizontal query '+this.entit y" :action = "action" @ submit . prevent = "onSubmit($event) ">
< div class = "card" v-if = "hasPermission()&&data.schema" >
< div class = "card-body" >
< template v-if = "data.errors" >
@ -15,39 +15,39 @@
< / template >
< input type = "hidden" name = "id" :value = "data.model.id" / >
< div class = "form-group row" >
< label class = "col-sm-2 col-form-label" :for= "key "> {{data.schema.properties.name.title}}:< / label >
< label class = "col-sm-2 col-form-label" for= "name "> {{data.schema.properties.name.title}}:< / label >
< div class = "col-sm-6 form-control" style = "border-color:transparent;height:auto;min-height:calc(2.25rem + 2px);" >
< template >
< component is = "edit-string" mode = "edit" name = "name" :value . sync = "data.model.name" @ change = "change" :data = "data.data" / >
< / template >
< div style = "height:1em;" >
< span v-if = "hasErrors('name')" class = "field-validation-error text-danger" > {{getErrors('name')}}< / span >
< span v-if = "hasErrors('name')" class = "field-validation-error text-danger" > {{getProperty Errors('name')}}< / span >
< span v-else class = "text-danger field-validation-valid" > < / span >
< / div >
< / div >
< div class = "col-sm-4" > {{data.schema.properties.name.description}}< / div >
< / div >
< div class = "form-group row" >
< label class = "col-sm-2 col-form-label" :for= "key "> {{data.schema.properties.type.title}}:< / label >
< label class = "col-sm-2 col-form-label" for= "type "> {{data.schema.properties.type.title}}:< / label >
< div class = "col-sm-6 form-control" style = "border-color:transparent;height:auto;min-height:calc(2.25rem + 2px);" >
< template >
< component is = "edit-selectlist" mode = "edit" name = "type" :value . sync = "data.model.type" @ change = "change" :data = "data.data" / >
< / template >
< div style = "height:1em;" >
< span v-if = "hasErrors('type')" class = "field-validation-error text-danger" > {{getErrors('type')}}< / span >
< span v-if = "hasErrors('type')" class = "field-validation-error text-danger" > {{getProperty Errors('type')}}< / span >
< span v-else class = "text-danger field-validation-valid" > < / span >
< / div >
< / div >
< div class = "col-sm-4" > {{data.schema.properties.type.description}}< / div >
< / div >
< div class = "form-group row" >
< label class = "col-sm-2 col-form-label" :for= "key "> {{data.schema.properties.value.title}}:< / label >
< label class = "col-sm-2 col-form-label" for= "value "> {{data.schema.properties.value.title}}:< / label >
< div class = "col-sm-6 form-control" style = "border-color:transparent;height:auto;min-height:calc(2.25rem + 2px);" >
< template >
< component :is = "getValueComponent()" mode = "edit" name = "value" :value . sync = "data.model.value" @ change = "change" :data = "data.data" / >
< / template >
< div style = "height:1em;" >
< span v-if = "hasErrors('value')" class = "field-validation-error text-danger" > {{getErrors('value')}}< / span >
< span v-if = "hasErrors('value')" class = "field-validation-error text-danger" > {{getProperty Errors('value')}}< / span >
< span v-else class = "text-danger field-validation-valid" > < / span >
< / div >
< / div >
@ -60,7 +60,7 @@
< / div >
< div class = "col-sm-10" >
< button type = "submit" class = "btn btn-primary" > 确定< / button >
< router-link :to = "{path: '/router/shared/ index.html',query:{area:area,entity:entity}}" class = "btn btn-default" > 返回< / router-link >
< router-link :to = "{path: base+' index.html',query:{area:area,entity:entity}}" class = "btn btn-default" > 返回< / router-link >
< / div >
< / div >
< / div >
@ -72,10 +72,15 @@
< / template >
< script >
export default {
props: ['parea', 'pentity', 'pid'],
name: 'edit',
name: 'update',
data: function () {
return {
service: 'IoTCenter',
area: "admin",
entity: 'Setting',
model: 'Setting',
mode: this.$route.query.mode,
id: this.$route.query.id,
data: {
errors: [],
schema: null,
@ -85,29 +90,23 @@
}
},
computed: {
area: function () {
return this.parea || this.$route.query.area || 'default';
},
entity: function () {
return this.pentity || this.$route.query.entity;
},
id: function () {
return this.pid || this.$route.query.id;
},
mode: function () {
return this.pmode || this.$route.query.mode;
path: function () {
return '/' + this.service + '/' + this.area + '/' + this.model + '/';
},
url: function () {
return '/IoTCenter/Admin/' + this.entity + '/' + this.mode + (this.mode === 'Add' ? '' : '?id=' + this.id);
return this.path + this.mode + (this.mode === 'edit' ? ('?id=' + this.id) : '');
},
action: function () {
return this.path + this.mode + 'Api';
},
name: function () {
return this.data.schema ? this.data.schema.title : '';
},
title: function () {
return this.name + '列表' ;
return this.name + (this.mode === 'edit' ? '编辑' : '新建') ;
},
action : function () {
return '/IoTCenter/Admin/' + this.$route.query.entity + '/' + this.$route.query.mode + 'Api' ;
base : function () {
return this.$route.path.substr(0, this.$route.path.lastIndexOf('/') + 1) ;
}
},
mounted: function () {
@ -121,162 +120,37 @@
vm.data = response.data;
});
},
getValueComponent: function () {
if (this.data.model.type) {
var value = Enumerable.from(this.data.data.typeSelectList).firstOrDefault(o => o.value === this.data.model.type.toString()).text;
var list = {
'单行文本': 'edit-string',
'多行文本': 'edit-multilinetext',
'Html代码': 'edit-html',
'图片': 'edit-imageurl',
'图片': 'edit-boolean',
};
if (value === '单行文本') {
return 'edit-string';
} else if (value === '多行文本') {
return 'edit-multilinetext';
}
}
return list[value] || 'edit-string';
getSchema: function () {
return this.data.schema;
},
change: function (name) {
var vm = this;
var value = this.data.model[name];
var property = this.data.schema.properties[name];
var list = [];
list.push(
this.validInternal(property.required, name, o => Promise.resolve(value !== undefined & & value !== null))
);
if (value) {
list.push(
this.validInternal(property.email, name, o => Promise.resolve(/^[a-zA-Z0-9.!#$%& '*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value)))
);
list.push(
this.validInternal(property.url, name, o => Promise.resolve(/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value)))
);
list.push(
this.validInternal(property.date, name, o => Promise.resolve(!/Invalid|NaN/.test(new Date(value).toString())))
);
list.push(
this.validInternal(property.number, name, o => Promise.resolve(/^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)))
);
list.push(
this.validInternal(property.digits, name, o => Promise.resolve(/^\d+$/.test(value)))
);
//dateiso
//creditcard
//accept
list.push(
this.validInternal(property.pattern, name, o => Promise.resolve(new RegExp(property.pattern.regex).test(value)))
);
list.push(
this.validInternal(property.minLength, name, o => Promise.resolve(value.length >= property.minLength.min))
);
list.push(
this.validInternal(property.maxLength, name, o => Promise.resolve(value.length < = property.maxLength.max))
);
list.push(
this.validInternal(property.rangeLength, name, o => Promise.resolve(value.length >= property.rangeLength.min & & value.length < = property.rangeLength.max))
);
list.push(
this.validInternal(property.range, name, o => Promise.resolve(parseFloat(value) >= property.range.min & & parseFloat(value) < = property.range.max))
);
list.push(this.validInternal(property.equalTo, name, o => Promise.resolve(o === vm.data.model[vm.camelCased(name)]))
);
list.push(
this.validInternal(property.remote, name, o => new Promise((resolve, reject) => {
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) {
resolve(response.data === true);
}).catch(function () {
resolve(false);
});
}))
);
}
return Promise.all(list);
},
valid: function () {
var vm = this;
var list = [];
_.forIn(this.data.schema.properties, function (value, key) {
list.push(vm.change(key));
});
return Promise.all(list);
getModel: function () {
return this.data.model;
},
validInternal: function (validator, name, valid, message) {
if (validator) {
var vm = this;
message = message || validator.message;
return valid().then(function (value) {
if (value) {
vm.removeError(name, message);
}
else {
vm.updateError(name, message);
}
});
}
return Promise.resolve('');
},
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) {
if (Enumerable.from(error.value.errors).any(o => o.errorMessage === message)) {
error.value.errors = Enumerable.from(error.value.errors).where(o => o.errorMessage !== message).toArray();
}
if (error.value.errors.length === 0) {
var index = _.findIndex(this.data.errors, o => o.key.toLowerCase() === name.toLowerCase());
this.data.errors.splice(index, 1);
}
}
getErrors: function () {
return this.data.errors;
},
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.errorMessage === message)) {
error.value.errors.push({ errorMessage: message });
}
}
hasErrors: function (key) {
key = key.toLowerCase();
return Enumerable.from(this.getErrors()).any(o => o.key.toLowerCase() === key);
},
getValidationSummary: function (excludePropertyErrors) {
var query = Enumerable.from(this.data.errors );
var query = Enumerable.from(this.getErrors());
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) {
getPropertyErrors: function (key) {
key = key.toLowerCase();
return Enumerable.from(this.data.errors )
return Enumerable.from(this.getErrors())
.where(o => o.key.toLowerCase() === key).selectMany(o => o.value.errors).select(o => o.errorMessage).toArray().join(',');
},
change: function (name) {
return this.$validProperty(name);
},
hasPermission: function () {
var permission = this.mode + '-' + this.entity;
return Enumerable.from(store.state.permissions).any(o => o === permission);
return Enumerable.from(store.state.permissions).any(o => o.toLowerCase() === permission.toLowerCase());
},
getEditComponent: function (key) {
var property = this.data.schema.properties[key];
@ -293,11 +167,11 @@
},
onSubmit: function (e) {
var vm = this;
vm.valid().then(function (value) {
vm.$ valid().then(function (value) {
if (vm.data.errors.length === 0) {
axios.post(e.target.action, vm.data.model).then(function (response) {
if (response.status === 204) {
var url = '/router/shared/ index.html?area=' + vm.area + '& entity=' + vm.entity;
var url = vm.base + ' index.html?area=' + vm.area + '& entity=' + vm.entity + '& model=' + vm.model ;
setTimeout(function () {
router.push(url);
}, 1000);
@ -308,6 +182,31 @@
});
}
});
},
getValueComponent: function () {
var vm = this;
if (vm.data.model & & vm.data.model.type) {
var list = {
'布尔值': 'edit-boolean',
'Html': 'edit-html',
'图片': 'edit-imageurl',
};
var item = Enumerable.from(vm.data.data.typeSelectList).firstOrDefault(o => o.value === vm.data.model.type.toString());
var value = item ? item.text : null;
if (value) {
if (this.data.model) {
if (value === '单行文本') {
return 'edit-string';
} else if (value === '多行文本') {
return 'edit-multilinetext';
}
}
if (list[value]) {
return list[value];;
}
}
}
return 'edit-string';
}
}
}
