jasonli
jasonli
This guy hasn't written anything yet

注册于 1 year ago

回答
4
文章
0
关注者
0

自己写了一个详情页,有不对或者需要修改的地方恳请大佬斧正,谢谢!

首先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>

curd.js下面的 pagination组件

pageSizes: [5, 10, 15, 20, 50, 100]

image.png

` {

      title: '标签',
      key: 'tag',
      filters: [
        { text: '家', value: '家' },
        { text: '公司', value: '公司' }
      ],
      filterMethod (value, row) {
        return row.tag === value
      },
      filterPlacement: 'bottom-end'
    }
  `
  
  希望能给你帮助!

我是根据Gitee的文件变更查看更新了哪些代码在进行替换。。。

发布
问题