dvcp_v2_webapp/packages/wxwork/AppNotification/components/detail.vue

<template>
  <ai-detail>
    <template slot="title">
      <ai-title title="公告详情" isShowBack isShowBottomBorder @onBackClick="$parent.goBack"></ai-title>
    </template>
    <template #content>
      <ai-card :title="detailObj.title" class="title">
        <template #content>
          <el-row type="flex" justify="space-between" class="info">
            <span>时间：{{ detailObj.releaseTime }}</span>
            <span style="display:flex">发布单位：
            <span v-text="detailObj.unitName"/>
            </span>
            <span style="display:flex">发布人：
            <span v-text="detailObj.releaseUserName"/>
            </span>
          </el-row>
          <div v-html="detailObj.content" style="margin: 20px 0;"></div>
        </template>
      </ai-card>
      <ai-card title="附件" v-if="detailObj.files && detailObj.files.length">
        <template #content>
          <el-row type="flex" justify="space-between" class="file" v-for="(item,index) in detailObj.files" :key="index"
                  @click.native="open(item)">
            <span>{{ item.fileName }}</span>
            <span>{{ (item.size / 1024).toFixed(2) }}KB</span>
          </el-row>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: "detail",
  props: {
    instance: Function,
    dict: Object,
    detail: Object
  },
  data() {
    return {
      detailObj: {},
    }
  },
  methods: {
    open(item) {
      window.open(item.url);
    }
  },
  mounted() {
    this.instance.post("/app/appannouncement/detail", null, {
      params: {
        id: this.detail.id
      }
    }).then(res => {
      if (res && res.data) {
        this.detailObj = res.data;

      }
    })
  }
}
</script>

<style lang="scss" scoped>
::v-deep .title {
  .aibar-left {
    width: 100%;
    text-align: center;
  }
}

.file {
  height: 40px;
  line-height: 40px;
  padding: 0 8px;
  font-size: 14px;
  color: #333;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #d0d4dc;
  margin-bottom: 16px;
  cursor: pointer;
}

.info {
  & > span {
    font-size: 14px;
    color: #333;
  }
}

</style>