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.
290 lines
16 KiB
290 lines
16 KiB
<template>
|
|
<layout :title="title">
|
|
<h1>{{title}}</h1>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<form ref="form" :class="'form-horizontal query '+this.entity" :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">
|
|
<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">{{getPropertyErrors('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="displayOrder">{{data.schema.properties.displayOrder.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="displayOrder" :value.sync="data.model.displayOrder" @change="change" :data="data.data" />
|
|
</template>
|
|
<div style="height:1em;">
|
|
<span v-if="hasErrors('name')" class="field-validation-error text-danger">{{getPropertyErrors('displayOrder')}}</span>
|
|
<span v-else class="text-danger field-validation-valid"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">{{data.schema.properties.displayOrder.description}}</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-sm-2 col-form-label" for="disabled">{{data.schema.properties.disabled.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-boolean" mode="edit" name="disabled" :value.sync="data.model.disabled" @change="change" :data="data.data" />
|
|
</template>
|
|
<div style="height:1em;">
|
|
<span v-if="hasErrors('name')" class="field-validation-error text-danger">{{getPropertyErrors('disabled')}}</span>
|
|
<span v-else class="text-danger field-validation-valid"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">{{data.schema.properties.disabled.description}}</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-sm-2 col-form-label" for="nodeId">{{data.schema.properties.nodeId.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="nodeId" :value.sync="data.model.nodeId" @change="change" :data="data.data" />
|
|
</template>
|
|
<div style="height:1em;">
|
|
<span v-if="hasErrors('name')" class="field-validation-error text-danger">{{getPropertyErrors('nodeId')}}</span>
|
|
<span v-else class="text-danger field-validation-valid"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">{{data.schema.properties.nodeId.description}}</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-sm-2 col-form-label" for="deviceId">{{data.schema.properties.deviceId.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="deviceId" :value.sync="data.model.deviceId" @change="change" :data="data.data" />
|
|
</template>
|
|
<div style="height:1em;">
|
|
<span v-if="hasErrors('name')" class="field-validation-error text-danger">{{getPropertyErrors('deviceId')}}</span>
|
|
<span v-else class="text-danger field-validation-valid"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">{{data.schema.properties.deviceId.description}}</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-sm-2 col-form-label" for="apiId">{{data.schema.properties.apiId.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="apiId" :value.sync="data.model.apiId" @change="change" :data="data.data" />
|
|
</template>
|
|
<div style="height:1em;">
|
|
<span v-if="hasErrors('name')" class="field-validation-error text-danger">{{getPropertyErrors('apiId')}}</span>
|
|
<span v-else class="text-danger field-validation-valid"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">{{data.schema.properties.apiId.description}}</div>
|
|
</div>
|
|
<template v-if="data.model&&data.model.apiId&&data.model.parameters.length">
|
|
<hr />
|
|
<template v-if="deviceName==='红外转发器'">
|
|
{{deviceName}}
|
|
</template>
|
|
<template v-else-if="deviceName==='串口控制器'">
|
|
{{deviceName}}
|
|
</template>
|
|
<template v-else v-for="param in data.model.parameters">
|
|
<div class="form-group row">
|
|
<label class="col-sm-2 col-form-label">{{param.description}}:</label>
|
|
<div class="col-sm-6 form-control" style="border-color:transparent;height:auto;min-height:calc(2.25rem + 2px);">
|
|
<input type="text" class="form-control" :value="param.value" />
|
|
<div style="height:1em;">
|
|
<!--<span v-if="hasErrors('name')" class="field-validation-error text-danger">{{getPropertyErrors('apiId')}}</span>
|
|
<span v-else class="text-danger field-validation-valid"></span>-->
|
|
</div>
|
|
</div>
|
|
<!--<div class="col-sm-4">{{data.schema.properties.apiId.description}}</div>-->
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</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:base+'index.html',query:{area:area,entity:entity}}" class="btn btn-default">返回</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</layout>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'update',
|
|
data: function () {
|
|
return {
|
|
service: 'IoTCenter',
|
|
area: "admin",
|
|
entity: 'Command',
|
|
model: 'Command',
|
|
mode: this.$route.query.mode,
|
|
id: this.$route.query.id,
|
|
data: {
|
|
errors: [],
|
|
schema: null,
|
|
model: null,
|
|
data: null
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
path: function () {
|
|
return '/' + this.service + '/' + this.area + '/' + this.model + '/';
|
|
},
|
|
url: function () {
|
|
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 + (this.mode === 'edit' ? '编辑' : '新建');
|
|
},
|
|
base: function () {
|
|
return this.$route.path.substr(0, this.$route.path.lastIndexOf('/') + 1);
|
|
},
|
|
deviceName: function () {
|
|
return this.data.data[this.data.model.deviceId];
|
|
}
|
|
},
|
|
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;
|
|
});
|
|
},
|
|
getSchema: function () {
|
|
return this.data.schema;
|
|
},
|
|
getModel: function () {
|
|
return this.data.model;
|
|
},
|
|
getErrors: function () {
|
|
return this.data.errors;
|
|
},
|
|
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.getErrors());
|
|
if (excludePropertyErrors) {
|
|
query = query.where(o => o.key === '')
|
|
}
|
|
return query.select(o => o.value.errors[0].errorMessage).toArray();
|
|
},
|
|
getPropertyErrors: function (key) {
|
|
key = key.toLowerCase();
|
|
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.toLowerCase() === permission.toLowerCase());
|
|
},
|
|
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) {
|
|
var vm = this;
|
|
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 = vm.base + 'index.html?area=' + vm.area + '&entity=' + vm.entity + '&model=' + vm.model;
|
|
setTimeout(function () {
|
|
router.push(url);
|
|
}, 1000);
|
|
}
|
|
else {
|
|
vm.data = response.data;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
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';
|
|
}
|
|
},
|
|
watch: {
|
|
'data.model.apiId': function (val) {
|
|
var vm = this;
|
|
if (val && this.data.model.deviceId) {
|
|
var url = this.path + 'Api?apiId=' + val + '&deviceId=' + this.data.model.deviceId;
|
|
axios.get(url).then(function (response) {
|
|
console.log(response.data);
|
|
Vue.set(vm.data.data, vm.data.model.deviceId, response.data.data.device.name);
|
|
vm.data.model.parameters = response.data.model;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |