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.
93 lines
3.6 KiB
93 lines
3.6 KiB
<template>
|
|
<layout v-bind:title="data.schema.title">
|
|
<h1>{{data.schema.title}}详情页</h1>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body" v-if="hasPermission('Read')">
|
|
<div class="form-group row" v-for="(value,key,index) in data.schema.properties" v-if="showForDetails(key,value)">
|
|
<label class="col-sm-2 col-form-label" :for="key">{{value.title}}:</label>
|
|
<div class="col-sm-6 form-control" style="border-color:transparent;height:auto;min-height:calc(2.25rem + 2px);">
|
|
<component :is="getComponent(key)" :title="value.title" :name="key" :value="data.model[key]" :data="data.data" v-if="data.model" />
|
|
</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">
|
|
<router-link :to="{path:'/router/shared/list.html',query:{area:area,entity:entity,action:action}}" class="btn btn-default" v-if="hasPermission('Read')">返回</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</layout>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['parea', 'pentity', 'pid'],
|
|
name: 'details',
|
|
data: function () {
|
|
return {
|
|
data: {
|
|
schema: {
|
|
title: ''
|
|
},
|
|
model: {},
|
|
data: {}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
area: function () {
|
|
return this.parea || this.$route.query.area || 'default';
|
|
},
|
|
entity: function () {
|
|
return this.pentity || this.$route.query.entity;
|
|
},
|
|
action: function () {
|
|
return this.$route.query.action || this.entity;
|
|
},
|
|
id: function () {
|
|
return this.pid || this.$route.query.id;
|
|
},
|
|
url: function () {
|
|
return '/IoTCenter/Admin/' + this.action + '/Details?id=' + this.id;
|
|
},
|
|
name: function () {
|
|
return this.data.schema ? this.data.schema.title : '';
|
|
},
|
|
title: function () {
|
|
return this.name + '列表';
|
|
},
|
|
},
|
|
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;
|
|
});
|
|
},
|
|
hasPermission: function (cmd) {
|
|
var permission = cmd + '-' + this.entity;
|
|
return Enumerable.from(store.state.permissions).any(o => o === permission);
|
|
},
|
|
getComponent: function (key) {
|
|
var property = this.data.schema.properties[key];
|
|
var template = 'display-' + (property.ui || property.format || property.type);
|
|
console.log(template);
|
|
return template;
|
|
},
|
|
showForDetails: function (key, value) {
|
|
return key !== 'id';
|
|
}
|
|
}
|
|
}
|
|
</script> |