structureplugins/jero-web/src/views/documentTool/documentComparison/comparisonTermsView.vue

<template>
  <internal-detail-page :title="$t('docTool.comparison.comparisonOfTerms')"
                        :content-padding="0"
                        :loading="loading"
                        need-custom-back-func
                        @back="handleBack">
    <div class="can-scroll-content">
      <div class="can-scroll-content-header">
         {{titleLeft + ' ' + $route.query.serialNumberLeft + ' —— ' + titleRight + ' ' + $route.query.serialNumberRight}}
        <a-button icon="upload"
                  type="primary"
                  ghost
                  style="margin-left: 6px"
                  @click="handleExportXls">
            导出比对结果
        </a-button>
      </div>
        <j-table
          ref="table"
          size="middle"
          :columns="columns"
          :data-source="dataSource"
          :can-drag="true"
          :pagination="ipagination"
          :scroll="{x: '100%', y: yScrollHeight}"
          @operationClick="operationClick"
          :operation-list="operationList">
        </j-table>
    </div>
    <viewDifferenceModal ref="viewDifferenceModalRef" @viewDifferenceModalForm="viewDifferenceModalForm"/>
  </internal-detail-page>
</template>

<script>
import InternalDetailPage from '../../../components/InternalDetailPage.vue'
import JTable from '../../../components/jero/JTable.vue'
import { JeroListMixin } from '../../../mixins/JeroListMixin.js'
import viewDifferenceModal from './modules/viewDifferenceModal'
import { downFile } from '../../../api/manage'
export default {
  name: 'comparisonTermsView',
  mixins: [JeroListMixin],
  components: {
    InternalDetailPage,
    JTable,
    viewDifferenceModal
  },
  data () {
    return {
      loading: false,
      resultData: {},
      titleLeft: this.$route.query.titleLeft || '',
      titleRight: this.$route.query.titleRight || '',
      columns: [
        {
          title: '旧条款号',
          dataIndex: 'oldItemsNum',
          width: 170,
          ellipsis: true
        },
        {
          title: '旧条款名称',
          dataIndex: 'oldItemsName',
          width: 170,
          ellipsis: true
        },
        {
          title: '新条款号',
          dataIndex: 'newItemsNum',
          width: 170,
          ellipsis: true
        },
        {
          title: '新条款名称',
          dataIndex: 'newItemsName',
          width: 170,
          ellipsis: true
        },
        {
          title: '比对时间',
          dataIndex: 'createTime',
          width: 170,
          ellipsis: true
        },
        // 操作
        {
          title: this.$t('operation'),
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataSource: [],
      operationList: [
        {
          text: '查看差异',
          clickEvent: 'viewDifferenceClick'
        }
      ],
      pageNo: 1,
      pageSize: 10,
      standHisId: this.$route.query.id,
      url: {
        list: '/compare/sarItemsCompareHis/page'
      }
    }
  },
  watch: {
    standHisId: {
      immediate: true,
      handler (val) {
        this.queryParam.standHisId = val
      }
    }
  },
  methods: {
    handleBack () {
      this.$router.push({
        path: '/documentTool/documentComparison'
      })
    },
    viewDifferenceClick (item) {
      console.log(item)
      this.$refs.viewDifferenceModalRef.open(item)
    },
    viewDifferenceModalForm () {
      this.loadData()
    },
    handleExportXls () {

      const fileName = '条款比对信息'
      const fileSuffix = '.xlsx'
      const param = {}
      param.standHisId = this.standHisId
      param.exportName = fileName + fileSuffix
      // 加一个大的提示
      const modalLoading = this.$info({
          title: this.$t('tips'),
          content: <span>{this.$t('exportTip')}
        <a-spin size="small" /></span>,
      keyboard: false
    })
      // 把知道了这个按钮去掉
      this.$nextTick(() => {
        document.getElementsByClassName('ant-modal-confirm-btns')[0].style = 'display:none'
      })
      downFile('/compare/sarItemsCompareHis/exportSarItemsCompareHisXls', param).then((data) => {
        if (!data) {
          this.$message.warning(this.$t('fileDownloadFail'))
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + fileSuffix)
        } else {
          const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + fileSuffix)
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) // 下载完成移除元素
          window.URL.revokeObjectURL(url) // 释放掉blob对象
        }
      }).finally(() => {
        // 销毁这个提示
        modalLoading.destroy()
      })
    }
  }
}
</script>

<style scoped>
.can-scroll-content{
  padding: 24px;
  box-sizing: border-box;
}
.can-scroll-content-header{
  font-size: 16px;
  margin-bottom: 12px;
}
</style>