eep_page/src/components/AuditRemark.vue

<template>
  <div class="audit-remark">
    <h5>审核批注</h5>
    <ul v-if="remarkList.length > 0">
      <li
        v-for="{
          id: remarkId,
          content,
          remark_person_name,
          remark_time,
          content_select,
          audit_flow_node_name,
          file_list,
          position_y,
          audit_flow_node_color,
        } in remarkList"
        :key="remarkId"
      >
        <template v-if="content_select">
          <span class="el-icon-notebook-2"> 原文</span>
          <span class="content-select">{{ content_select }}</span>
        </template>
        <p v-html="content"></p>
        <template v-if="file_list.length > 0">
          <div v-for="(item, index) in file_list" :key="index" class="file-item">
            <SvgIcon :icon-class="item.icon_type" />
            <span class="file-item-name">{{ item.file_name }}</span>
            <AudioPlay v-if="item.icon_type === 'mp3'" :file-id="item.file_url" />
            <SvgIcon icon-class="uploadPreview" @click="viewDialog(item)" v-else />
            <SvgIcon icon-class="download" @click="downLoad(item)" />
          </div>
        </template>
        <div v-if="isAudit" class="remark-bottom">
          <span>{{ remark_person_name + ':' + remark_time }}</span>
          <div class="btn-box">
            <el-link v-if="showDelete" type="primary" class="delete-black delete-btn" @click="deleteRemarks(remarkId)">
              <SvgIcon icon-class="delete-black" size="12" />
            </el-link>
            <el-link type="primary" class="el-icon-place linkLocation" @click="handleLocation(position_y)" />
          </div>
        </div>
        <div v-if="audit_flow_node_name" class="remark-bottom">
          <span>
            审核流程节点：
            <span :style="{ color: audit_flow_node_color ? '#' + audit_flow_node_color : '' }">{{
              audit_flow_node_name
            }}</span></span
          >
        </div>
      </li>
    </ul>
    <p v-else style="text-align: center">暂无批注</p>
    <el-dialog
      v-if="visible"
      :visible.sync="visible"
      :show-close="true"
      :close-on-click-modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :lock-scroll="true"
      :width="'80%'"
      top="0"
    >
      <iframe v-if="visible" :src="newpath" width="100%" :height="iframeHeight" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { getToken, getConfig } from '@/utils/auth';
import { Base64 } from 'js-base64';
import AudioPlay from '@/views/book/courseware/preview/components/character_base/components/AudioPlay.vue';

export default {
  name: 'AuditRemark',
  components: { AudioPlay },
  provide() {
    return {
      bookInfo: { theme_color: '' },
    };
  },
  props: {
    isAudit: {
      type: Boolean,
      default: false,
    },
    remarkList: {
      type: Array,
      required: true,
    },
    showDelete: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      file_preview_url: getConfig() ? getConfig().doc_preview_service_address : '',
      visible: false,
      newpath: '',
      iframeHeight: `${window.innerHeight - 100}px`,
    };
  },
  methods: {
    deleteRemarks(remarkId) {
      this.$emit('deleteRemarks', remarkId);
    },
    handleLocation(componentId) {
      this.$emit('handleLocationRemarks', componentId);
    },
    // 下载文件
    downLoad(file) {
      let userInfor = getToken();
      let AccessToken = '';
      if (userInfor) {
        AccessToken = userInfor.access_token;
      }
      let FileID = file.file_id;
      let data = {
        AccessToken,
        FileID,
      };
      location.href = `${process.env.VUE_APP_EEP}/FileServer/WebFileDownload?AccessToken=${data.AccessToken}&FileID=${data.FileID}`;
    },
    // 预览
    viewDialog(file) {
      this.newpath = `${this.file_preview_url}onlinePreview?url=${Base64.encode(file.file_url)}`;
      this.visible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.audit-remark {
  width: 240px;
  height: 100%;
  overflow: auto;
  border: 1px solid #e5e5e5;

  h5 {
    padding: 0 5px;
    margin: 0;
    font-size: 18px;
    line-height: 40px;
    background: #f2f3f5;
  }

  .btn-box {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 55px;
    padding: 0 10px;
    border-left: 1px solid #e5e5e5;
  }

  .delete-btn {
    color: #f44444;
  }

  ul {
    height: calc(100% - 40px);
    overflow: auto;

    li {
      border-bottom: 1px solid #e5e5e5;

      .el-icon-notebook-2 {
        display: block;
        padding: 10px 10px 0;
        margin-bottom: 4px;
        font-size: 12px;
        color: grey;
      }

      .content-select {
        display: block;
        margin-left: 10px;
        border-bottom: 1px solid #eee;
      }

      > p {
        padding: 5px;
      }

      :deep p {
        margin: 0;
      }

      .remark-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 5px;
        font-size: 12px;
        color: #555;
        border-top: 1px solid #e5e5e5;
      }
    }
  }

  .file-item {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 3px;
    margin: 5px;
    background: #f2f3f5;
    border-radius: 3px;

    &-name {
      flex: 1;
      font-size: 12px;
      word-break: break-all;
    }

    .svg-icon {
      flex-shrink: 0;
      font-size: 16px;
    }

    .uploadPreview,
    .download {
      cursor: pointer;
    }
  }

  .audio-wrapper-nobg {
    height: 16px;

    :deep .audio-play {
      width: 16px;
      height: 16px;
      color: #000;
      background-color: initial;
    }

    :deep .audio-play.not-url {
      color: #a1a1a1;
    }

    :deep .voice-play {
      width: 16px;
      height: 16px;
    }
  }
}
</style>