查看功能是一个dialog,想改成另开一个详情页,请教一下大家有没有详情页的Demo
自己写了一个详情页,有不对或者需要修改的地方恳请大佬斧正,谢谢!
首先curd.js里面rowHandle下view改为false,然后在custom下新建一个view,emit是重点,代码如下:
view: false,
custom[{
thin: true,
icon: 'el-icon-view',
text: '',
type: '',
size: 'small',
emit: 'computerDetail',
order: 1,
disabled () {
return !vm.hasPermissions('Update')
}
}]
然后Index.vue的d2-crud-x内添加@emit="emit"代码如下:
<d2-crud-x
@computerDetail="computerDetail"
>
接着methods下定义一个computerDetail方法,代码如下:
computerDetail (scope) {
this.$router.push(
{
path: '/computer/detail/:id',
name: 'computerDetail',
query: { id: scope.row.id }
}
)
},
接着找到router文件夹下router.js添加路由,代码如下:
{
path: 'computerDetail',
name: 'computerDetail',
meta: {
title: '计算机详情',
auth: true
},
props: true,
component: () => import('@/views/assets/computer/detail/index')
},
接下来就是详情页的代码,路径在/computer/detail下新建一个vue文件,代码如下:
可通过查询字典value获取对应Label。。
<template>
<d2-container class="computer-detail" >
<div slot="header">
<el-page-header @back="goBack" content= "详情页面"></el-page-header>
</div>
<div class="detail" >
<el-descriptions class="margin-top" title="" :column="3" border>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-user"></i>
计算机名称
</template>
{{name}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-office-building"></i>
状态
</template>
<span
v-for="item in dictionary('status')"
:value="item.value"
:label="item.label"
:key="item.value"
v-show="status==item.value">{{ item.label }}</span>
</el-descriptions-item>
</el-descriptions>
</div>
</d2-container>
</template>
<script>
import { request } from '@/api/service'
export default {
name: 'computerDetail',
props: {
},
watch: {
},
data (vm) {
return {
name: '',
status: ''
}
},
created () {
this._getDetail()
},
methods: {
_getDetail (Detail) {
var that = this
var id = that.$route.query && that.$route.query.id
console.log(id)
const url = '/api/asset/computer/'
return request({
url: url + id,
method: 'get'
}).then(res => {
Detail = res.data
console.log(Detail.FAId)
this.name = Detail.name
this.status = Detail.status
})
},
goBack () {
return window.history.go(-1)
}
}
}
</script>