JeecgBoot 前端详情页建立事例

1、代码生成器根据数据表结构生成前后端代码，将前端代码放置前端相关项目工程目录下。如下图所示

2、执行前端代码，结果如图：

3、目标是实现 上图是的 详情点击后出现不可编辑的弹出框，并显示相关字段内容，按如下步骤建立：
（1）ScactivityrecordList.vue文件中增加 详情 按钮

红框内容是增加的详情按钮功能，注意绿框中的定义的功能名称。
handleDetail(record) 下面会用到
（2）建立一个详情内容显示界面 ScactivityrecorddetailModal.vue
内容如下：

<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-card :bordered="false">
      <detail-list title="基础信息">
        <detail-list-item term="组织机构编号">{{model.publisherNo}}</detail-list-item>
        <detail-list-item term="组织机构名称">{{model.publisherName}}</detail-list-item>
        <detail-list-item term="组织机构MC">124355</detail-list-item>

      </detail-list>
      <a-divider style="margin-bottom: 32px"/>
      <detail-list title="详情信息">
        <detail-list-item term="信息来源">{{model.newsSource}}</detail-list-item>
        <detail-list-item term="内容">{{model.newsContent}}</detail-list-item>
        <!--<detail-list-item term="评分">{{model.rank}}</detail-list-item>-->

      </detail-list>
      <a-divider style="margin-bottom: 32px"/>
    </a-card>
    <!--</page-layout>-->
  </j-modal>
</template>

<script>
  import PageLayout from '@/components/page/PageLayout'
  import { httpAction,getUserList } from '@/api/manage'
  import pick from 'lodash.pick'
  import DetailList from '@/components/tools/DetailList'
  const DetailListItem = DetailList.Item
  import moment from "moment"
  import ABadge from 'ant-design-vue/lib/badge/Badge'
  import STable from '../../profile/basic/Index'

  export default {
    name: "ScactivityrecorddetailModal",
    components: {
      PageLayout,
      DetailList,
      DetailListItem
    },
    data () {
      return {
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
      }
    },
    methods: {
      editdetail(record) {
        this.model = Object.assign({}, record)
        this.visible = true
        /*this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'upShopNo', 'upShopName'))
          //时间格式化
        })*/
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.close()
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>

相关要显示的字段部分代码

（3）ScactivityrecordList.vue中加入下面代码
注意先后顺序


上图是已经提示出来了，我们要加入的内容标签提示。如果没有import 引入，就不会出现这个提示。个人在实现操作时体会到的。
（4）加入如下代码

this.$refs.modaldetailForm.title = '详情测试'
this.$refs.modaldetailForm.editdetail(record)

这部分的 modaldetailForm 名字一定要和上面设置的一个位置的内容一样。这一点一定要切记！！！！！！！

this.$refs.modaldetailForm.editdetail(record)

这时的 editdetail 名称是在 刚才我们建立的ScactivityrecorddetailModal.vue文件中

以上代码建立完成后，就可以正确显示详情了。
同时用户也可以修改详情的具体格式和内容。

以上内容仅作为个人学习的笔记，有不正确的地方，请留言本人加以改正。

增加一张正确显示富文本编辑器写入数据表的文本图片