xps-web-csat-v5/src/views/hos/components/ArtDetail.vue

<template>
  <div class="content-container">
    <div class="header">
      <div class="title"><span v-if="withHeader">{{ artInfo.artTitle }}</span></div>
      <div v-if="type==='instruction'" class="handle-container">
        <el-button type="text" @click="handleAdd">新增</el-button>
        <el-button v-if="isNotNull(artId)" type="text" @click="handleEdit">编辑</el-button>
        <el-button v-if="isNotNull(artId)" type="text" @click="handleDel">删除</el-button>
      </div>
    </div>
    <template>
      <div class="artDetail-container">
        <div v-if="artInfo&&artInfo.artContent" class="art-container" v-html="artInfo.artContent" />
        <el-empty v-else description="没有实施指南信息" style="margin-top:100px;" />
        <div v-if="artInfo.attachList&&artInfo.attachList.length>0" class="attachList-container">
          <h4 class="title">附件：</h4>
          <div class="container">
            <div class="attach-list">
              <p v-for="(item,index) in artInfo.attachList" :key="index"><attach-list :uri="item.fileUrl" :name="item.fileTitle" /></p>
            </div>
          </div>
        </div>
      </div>
    </template>
    <art ref="EditArt" :type="2" title="编辑文章" @formSuccess="EditArtSuccess" />
    <art ref="AddArt" :type="2" title="新增文章" @formSuccess="addArtSuccess" />
  </div>
</template>
<script>
import Art from '@/views/system/art/components/Art'
import { getArtById, deleteArtById } from '@/api/system/artApi'
import AttachList from '@/components/AttachList'
import { isNotNull } from '@/utils'

export default {
  name: 'ArtDetail',
  components: { Art, AttachList },
  props: {
    withHeader: {
      type: [Boolean, String],
      default: true
    },
    type: {
      type: String,
      default: 'news'
    },
    artCatId: {
      type: [Number, String],
      default: 'true'
    }
  },
  data() {
    return {
      dialogVisible: false,
      artId: undefined,
      artCatTitle: '',
      artInfo: {
        artTitle: '',
        artContent: '',
        attachList: []
      }
    }
  },
  methods: {
    isNotNull,
    loadData(artId, artCatTitle) {
      this.dialogVisible = true
      this.artId = artId
      this.artCatTitle = artCatTitle
      this.getData()
    },

    getData() {
      getArtById(this.artId).then((res) => {
        const { code, msg, data } = res
        if (code === 200) {
          if (data) {
            this.artInfo = data
          } else {
            this.artInfo = false
          }
        } else {
          this.$message.error(msg)
        }
      })
    },
    addArtSuccess() {
      this.$emit('success', 'success')
    },
    EditArtSuccess() {
      this.$emit('success', 'edit')
    },
    handleAdd() {
      this.$refs['AddArt'].showAddModel(this.artCatId, this.artCatTitle)
    },
    handleEdit() {
      const artId = this.artId
      if (!artId) return
      this.$refs['EditArt'].showEditModel(artId)
    },
    handleDel() {
      const artId = this.artId
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteArtById(artId).then(() => {
          this.$emit('success', 'del')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '删除失败！'
          })
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content-container{
  color: #fff;
  margin: 10px 10px 10px 10px;
  padding: 15px;
  background-color: #193142FF;
  height: calc(100vh - 95px);
  .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title{
      font-size: 20px;
      font-weight: 600;
      line-height: 1.8;
    }
  }
  .artDetail-container{
    height:calc(100% - 50px);
    overflow-y: auto;
  }
  .art-container{
    font-size: 14px;
    line-height: 1.8;
    text-indent: 24px;
    text-align: justify;
    word-break: break-all;
  }
}
.attachList-container{
  padding: 10px 0;
  border-top: 1px solid #464646;
  margin-top: 10px;
  .title{
    margin: 0;
    font-size: 16px;
  }
  .container{
    padding:0 24px;
    .attach-list{
      p{
        margin: 0;
      }
    }
  }
  .emptyTxt{
    color:#ccc;
  }
}
</style>