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.
88 lines
3.6 KiB
88 lines
3.6 KiB
<template>
|
|
<layout :title="data.schema.title">
|
|
<h1 style="font-size:1.5rem;margin:.5em 0;">{{data.schema.title}}详情页</h1>
|
|
<slot></slot>
|
|
<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);" :data-test="key">
|
|
<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:base+'index.html',query:{area:area,entity:entity}}" class="btn btn-default" v-if="hasPermission('Read')">返回</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</layout>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'display',
|
|
props: ['service', 'area', 'entity', 'model', 'id'],
|
|
data: function () {
|
|
return {
|
|
data: {
|
|
schema: {
|
|
title: ''
|
|
},
|
|
model: {},
|
|
data: {}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
path: function () {
|
|
return '/' + this.service + '/' + this.area + '/' + this.model + '/';
|
|
},
|
|
url: function () {
|
|
return this.path + 'Details?id=' + this.id;
|
|
},
|
|
name: function () {
|
|
return this.data.schema ? this.data.schema.title : '';
|
|
},
|
|
title: function () {
|
|
return this.name + '列表';
|
|
},
|
|
base: function () {
|
|
return this.$route.path.substr(0, this.$route.path.lastIndexOf('/') + 1);
|
|
}
|
|
},
|
|
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;
|
|
vm.$emit('load', vm.data.model);
|
|
});
|
|
},
|
|
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);
|
|
return template;
|
|
},
|
|
showForDetails: function (key, value) {
|
|
return key !== 'id' && this.getComponent(key) !== 'display-array';
|
|
}
|
|
}
|
|
}
|
|
</script> |