cd-work-flow-web/src/views/oa/enter-ann/add/detAnnModal.vue

<template>
  <!-- 公告详情 弹框 -->
  <a-modal v-model="annVisible" title="公告通知详情" @ok="handleOk" width="90%" @cancel="close">
    <a-row :gutter="24">
      <a-col :span="12">
        <p>
          标题： <span class="annDet">{{ fatherData.title }}</span>
        </p>
      </a-col>
      <a-col :span="12">
        <p>
          类型： <span class="annDet">{{ fatherData.type }}</span> 
        </p>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :span="12">
        <p>
          创建人： <span class="annDet"> {{ fatherData.createBy }}</span>
        </p>
      </a-col>
      <a-col :span="12">
        <p>
          创建日期： <span class="annDet">{{ fatherData.createTime }}</span>
        </p>
      </a-col>
    </a-row>

    <a-row :gutter="24">
      <a-col :span="24">
        <p>详情：</p>
        <!-- 文本框 -->
        <span v-html="fatherData.content" class="valueBox" style="minHeight:120px;"></span>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
export default {
    data () {
        return {
            annVisible: false // 公告详情关闭
        }
    },
    // 接收父组件的数据
    props: {
        fatherData: {
            type: Object,
            default: null
        },
        fatherMethod: {
            type: Function,
            default: null
        }
    },

    methods: {
    // 公告详情 弹框按钮
        handleOk (e) {
            console.log(e)
            this.annVisible = false
            // this.fatherData = '' // 清空弹框 会报错
            this.fatherData.title = ''
            this.fatherData.type = ''
            this.fatherData.createBy = ''
            this.fatherData.createTime = ''
            this.fatherData.content = ''
        },
        close () {
            this.annVisible = false
            // this.fatherData = '' // 清空弹框 会报错
            this.fatherData.title = ''
            this.fatherData.type = ''
            this.fatherData.createBy = ''
            this.fatherData.createTime = ''
            this.fatherData.content = ''
        }
    }
}
</script>

<style lang="less" scoped>
//富文本内容
.valueBox {
  width: 100%;
  font-weight: 700;
  display: block;
  border: 1px solid #ccc;
  padding: 10px;
}
// 整个详情弹框内容
.annDet {
  font-weight: 700;
}
</style>