yxk-electronic-archives/src/views/archivesManage/openInventory/module/detail.vue

<template>
  <!-- 详情 -->
  <el-dialog :title="detialTitle" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="detialVisible" @opened="opened">
    <div class="setting-dialog">
      <ul v-if="inventType!==7" class="hitch-info">
        <li><span>标题：</span>{{ rowCurrent && rowCurrent.title }}</li>
        <li><span>申请时间：</span>{{ rowCurrent && rowCurrent.createTime }}</li>
        <li><span>申请人：</span>{{ rowCurrent && rowCurrent.applicant }}</li>
        <li><span>申请部门：</span>{{ rowCurrent && rowCurrent.deptsName }}</li>
        <li><span>申请理由：</span>{{ rowCurrent && rowCurrent.reason }}</li>
        <li v-if="inventType===6"><span>移交类型：</span>内部移交</li>
        <li><span>完成时间：</span>{{ rowCurrent && rowCurrent.completeTime }}</li>
        <li><span>审批意见：</span>{{ rowCurrent && rowCurrent.opinion }}</li>
        <li class="state-list">
          <span v-if="rowCurrent && rowCurrent.status === 1" class="row-state ing-state">进行中</span>
          <span v-if="rowCurrent && rowCurrent.status === 2" class="row-state case-cancel">已取消</span>
          <span v-if="rowCurrent && rowCurrent.status === 3" class="row-state end-state">已完成</span>
          <span v-if="rowCurrent && rowCurrent.status === 4" class="row-state cancel-state">不通过</span>
        </li>
      </ul>
      <ul v-else class="hitch-info">
        <li><span>包名：</span>{{ rowCurrent && rowCurrent.title }}</li>
        <li><span>操作时间：</span>{{ rowCurrent && rowCurrent.createTime }}</li>
        <li><span>操作人：</span>{{ rowCurrent && rowCurrent.applicant }}</li>
        <li><span>导出方式：</span>离线移交</li>
        <li><span>完成时间：</span>{{ rowCurrent && rowCurrent.completeTime }}</li>
        <li><span>审批意见：</span>{{ rowCurrent && rowCurrent.opinion }}</li>
        <li class="state-list">
          <span class="row-state end-state">导出成功</span>
        </li>
      </ul>
      <div v-if="inventType===7" style="display: flex; justify-content: flex-end; margin-bottom: 12px;">
        <el-button class="task-btn" @click="downloadFile"><i class="iconfont icon-xiazai" />下载文件</el-button>
      </div>
      <el-table ref="table" :data="tableData" style="width: 100%;" height="calc(100vh - 420px)">
        <el-table-column type="index" align="center" width="55" label="序号" />
        <el-table-column prop="fondsName" label="所属全宗" min-width="120" />
        <el-table-column prop="categoryName" label="门类名称" min-width="120" />
        <el-table-column prop="categoryLevel" label="整理方式">
          <template slot-scope="scope">
            <span>{{ scope.row.categoryLevel === 2 ? '案卷整理' : '按件整理' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="archiveNo" label="项目号/档号" min-width="280" show-overflow-tooltip />
        <el-table-column prop="maintitle" label="题名" min-width="160" show-overflow-tooltip />
        <el-table-column v-if="inventType===4" prop="reason2" label="成文日期" min-width="140" />
        <el-table-column v-if="inventType===4" prop="reason2" label="保管期限" min-width="120" />
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import { FetchBusinessFlowDetails } from '@/api/archivesManage/library'
import { downloadFile } from '@/utils/index'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
export default {
  name: 'Detail',
  components: { },
  props: {
    inventType: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      rowCurrent: null,
      detialVisible: false,
      baseInfo: null,
      tableData: []
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ]),
    detialTitle() {
      if (this.inventType === 3) {
        return '开放清册详情'
      } else if (this.inventType === 4) {
        return '销毁清册详情'
      } else if (this.inventType === 6) {
        return '移交清册详情'
      } else if (this.inventType === 7) {
        return '导出任务详情'
      }
      return '开放清册详情'
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    opened() {
      this.getBusinessFlowDetails()
    },
    getBusinessFlowDetails() {
      const params = {
        'businessId': this.rowCurrent.id
      }
      FetchBusinessFlowDetails(params).then((res) => {
        if (res.code !== 500) {
          console.log(res)
          this.baseInfo = res.businessFlow
          this.tableData = res.details.content
        } else {
          this.$message({ message: '获取数据失败', type: 'error', offset: 8 })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // downloadFile() {
    //   if (this.rowCurrent.zip_path) {
    //     const url = this.baseApi + '/downloadFile' + this.rowCurrent.zip_path
    //     fetch(url).then(res => res.blob()).then(blob => {
    //       downloadFile(blob, this.rowCurrent.title, 'zip')
    //     }).catch(() => {
    //       this.$message({ message: '下载文件失败', type: 'error', offset: 8 })
    //     })
    //   } else {
    //     this.$message({ message: '下载文件路径获取失败', type: 'error', offset: 8 })
    //   }
    // }
    downloadFile() {
      // bucketType = 3 离线下载
      if (this.rowCurrent.zip_path) {
        const url = this.baseApi + '/api/minioUpload/getFile?filePath=' + this.rowCurrent.zip_path + '&bucketType=3'
        const fetchOptions = {
          method: 'GET',
          headers: {
            'Authorization': getToken()
          }
        }
        fetch(url, fetchOptions).then(res => res.blob()).then(blob => {
          downloadFile(blob, this.rowCurrent.title, 'zip')
          this.downloading = false
        }).catch(() => {
          this.$message({ message: '下载文件失败', type: 'error', offset: 8 })
          this.downloading = false
        })
      } else {
        this.$message({ message: '下载文件路径获取失败', type: 'error', offset: 8 })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
@import "~@/assets/styles/collect-reorganizi.scss";
.row-state{
  font-style: normal;
  padding: 0 8px;
}
</style>