WZC2/fe/UI.DY.AgGridReport/src/views/report/inspection.vue

<template>
  <div>
    <reportPage
      :columnList="columnDefs" 
      :searchConfig="searchConfig"
      :searchForm="searchForm"
      :BottomFixedItem="BottomFixedItem"
      :averageFixedItem="averageFixedItem"
      :reportName="'质检报表'"
      :procName="'Proc_质检报表'"
    ></reportPage>
    <!-- 抽屉查看供应商报告弹窗 -->
    <el-image-viewer 
      v-if="isShowImg" 
      :on-close="(()=>{isShowImg = false})" 
      :url-list="imgListViews" />
  </div>
</template>
  
<script>
import reportPage from "@/components/reportPage/index"
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import util from '@/utils/util'
import {inventoryTransactionSerial} from "@/api/api"
import {getInspectionImg} from "@/api/businessApi"

export default {
  name: "inspection",
  components: {
    reportPage,
    ElImageViewer
  },
  data () {
    return {
      columnDefs: [
        { field: '采购订单号', minWidth:130,filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '物料号', headerName:'ERP料号', cellClass:"centerAlign", filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '零件号', filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '描述',  filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '供应商', filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '箱码',  cellClass:"centerAlign", filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '批次',  filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '分级',  filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '生产日期', minWidth:170,maxWidth:170, valueFormatter: ((data)=>{return util.formatTimeStrToStr(data.value)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '检验时间', minWidth:170,maxWidth:170, valueFormatter: ((data)=>{return util.formatTimeStrToStr(data.value)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '不合格原因', filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '合格', type:"kiloNumber", cellClass:"rightAlign", valueFormatter: ((data)=>{return util.numberFixedFormatter(data.value,true)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '不合格', type:"kiloNumber", cellClass:"rightAlign", valueFormatter: ((data)=>{return util.numberFixedFormatter(data.value,true)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '合格率', type:"percentNumber", cellClass:"rightAlign", valueFormatter: ((data)=>{return util.numberPercentFormatter(data.value)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { field: '抽检数量', type:"kiloNumber", cellClass:"rightAlign", valueFormatter: ((data)=>{return util.numberFixedFormatter(data.value,true)}), filter: 'agTextColumnFilter', suppressMenu: true, floatingFilterComponentParams: { suppressFilterButton: true } },
        { headerName: "操作", cellClass:"centerAlign", cellRenderer: this.ActionCellRenderer } // 自定义操作列
      ],
      searchConfig:[
        {type:'input',prop:'PoNumber',label:'订单号'},
        {type:'select',prop:'Supplier',label:'供应商',optionsProc:'SupplierCode',options:[]},
        {type:'selectExcess',prop:'ItemCode',label:'ERP料号',optionsProc:'itemCode',options:[],optionsTS:[],rangeNumber:100,rangeSize:100},
        {type:'date',prop:'beginDate',label:'起始'},
        {type:'date',prop:'endDate',label:'截止'},
      ],
      searchForm:{
        ItemCode:"",
        beginDate:"",
        endDate:'',
        Supplier:"",
        PoNumber:"",
      },
      BottomFixedItem:['合格','不合格','合格率','抽检数量'],
      averageFixedItem:['合格率'],
      isShowImg:false,
      imgListViews:[]
    };
  },
  methods:{
    ActionCellRenderer(row) {
      // 底部固定栏不显示按钮
      if(row.node.id.indexOf('b') >= 0){ return '' }
      // 没有之间报告的不显示
      try {
        let _json = JSON.parse(row.data['质检报告'])
        if(_json.length > 0){
          const eButton = document.createElement('span');
          eButton.innerHTML = '查看报告';
          eButton.style.color = 'blue'
          eButton.style.fontSize = '14px'
          eButton.style.cursor = 'pointer'
          eButton.addEventListener('click', () => {
            this.showImg(row)
          });
          return eButton;
        }else{
          return ''
        }
        
      } catch (error) {
        return ''
      }
    },
    async showImg(row){
      let _json = JSON.parse(row.data['质检报告'])
      this.imgListViews = []
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
      });
      _json.forEach(async item=>{
        let res = await getInspectionImg(item.FileKey)
        this.imgListViews.push('data:application/pdf;base64,' + res.bytes)
        if(this.imgListViews.length == _json.length){
          this.isShowImg = true
          loading.close();
        }
      })
    }
  }
};
</script>