VersionCompare.vue 4.48 KB
<template>
  <a-modal
    title="Ebom版本比较"
    :width="modalWidth"
    :visible="visible"
    :bodyStyle="bodyStyle"
    style="top: 0px;"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper" style="margin-top: 10px;margin-left: 20px">
      <a-form layout="inline" >
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="选择版本">
              <a-select
                show-search
                placeholder="请选择版本"
                option-filter-prop="children"
                 style="width: 200px" v-model="ver1"
              >
                <a-select-option v-for="item in versionList" :key="item" :value="item">{{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="选择版本">
              <a-select
                show-search
                placeholder="请选择版本"
                option-filter-prop="children"
                 style="width: 200px" v-model="ver2"
              >
                <a-select-option v-for="item in versionList" :key="item" :value="item">{{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-button type="primary" icon="search" @click="compare" >比较</a-button>
          <a-button type="primary" icon="download"  style="margin-left: 30px" @click="toExportXls" >导出差异单</a-button>
        </a-row>

      </a-form>
    </div>
    <!-- 查询区域-END -->


    <split-pane :min-percent='20' :default-percent='50' split="vertical">
      <template slot="paneL">
        <compare-a ref="verA" :ver1="ver1"></compare-a>
      </template>
      <template slot="paneR">
       <compare-b ref="verB" :ver2="ver2"></compare-b>
      </template>
    </split-pane>

  </a-modal>
</template>

<script>
  import splitPane from 'vue-splitpane'
  import CompareA from "./modules/CompareA";
  import CompareB from "./modules/CompareB";
  import {getVersionList} from "../../api/api";
  import { downFile } from '@/api/manage'
  export default {
    name: "VersionCompare",
    components:{
      splitPane,
      CompareA,
      CompareB
    },
    data () {
      return {
        workno:'',
        ver1:'',
        ver2:'',
        visible: false,
        versionList:[],
        bodyStyle:{
          padding: "0",
          height:(window.innerHeight-150)+"px"
        },
        modalWidth:800,
        url: {
          list: '1',
          exportXlsUrl: "/epbom_info/epbomInfo/exportData"
        },
      }
    },
    created () {
      this.modalWidth = window.innerWidth-0;
    },
    methods: {
      toExportXls(){
        let time = new Date()
        var fileName=this.workno+'-版本差异单';

        let params = {
          "version1":this.ver1,
          "version2":this.ver2,
          "workno":this.workno
        }
        downFile(this.url.exportXlsUrl,params).then((data)=>{
          if (!data) {
            this.$message.warning("文件下载失败")
            return
          }
          if (data.size<100){
            this.$message.warning("请先查询出列表,再导出")
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
          }else{
            let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName+'.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
          }
        })
      },
      compare(){
        this.$refs.verA.search1();
        this.$refs.verB.search2();
      },

      show (workno) {
        this.workno=workno
        this.visible = true;
        let params = {
          'workno': this.workno
        }
        getVersionList(params).then((res) => {
          if (res.success) {
            this.versionList = res.result
          }
        })
      },
      handleOk(){

      },
      handleCancel () {
        this.visible = false;
      },
    }
  }
</script>

<style scoped>
</style>