真空热处理炉三保批量导出及打印

zhaowei

13 小时以前 b99765f7cba95796975ea26f5d8a079d09b29660

真空热处理炉三保批量导出及打印

 src/views/eam/maintenance/EamThirdMaintenanceFurnaceList.vue

@@ -40,21 +40,12 @@
    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="handleBatchCollect">
            <a-icon type="form"/>
            é¢†å–
          </a-menu-item>
          <a-menu-item key="1" @click="handleBatchAbolish">
            <a-icon type="delete"/>
            ä½œåºŸ
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> æ‰¹é‡æ“ä½œ
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
      <a-button @click="handleBatchCollect" type="primary" icon="form" :disabled="selectedRowKeys.length===0">批量领取
      </a-button>
      <a-button @click="handleBatchPrint" type="primary" icon="monitor" :disabled="selectedRowKeys.length===0">批量预览
      </a-button>
      <a-button @click="handleBatchAbolish" type="primary" icon="delete" :disabled="selectedRowKeys.length===0">批量作废
      </a-button>
    </div>

    <!-- table区域-begin -->
@@ -109,6 +100,9 @@
    <!--审批窗口-->
    <third-maintenance-furnace-approval-modal ref="thirdMaintenanceFurnaceApprovalModal"
                                              :selectShenpiData="selectedRowData"/>

    <!--批量打印窗口-->
    <eam-third-maintenance-furnace-batch-print-modal ref="batchPrintModal"/>
  </a-card>
</template>

@@ -119,11 +113,13 @@
  import { getAction, deleteAction } from '@/api/manage'
  import ThirdMaintenanceFurnaceApprovalModal
    from '../../flowable/workflow/thirdMaintenance/ThirdMaintenanceFurnaceApprovalModal'
  import EamThirdMaintenanceFurnaceBatchPrintModal from './modules/EamThirdMaintenanceFurnaceBatchPrintModal'

  export default {
    name: 'EamThirdMaintenanceFurnaceList',
    mixins: [JeecgListMixin],
    components: {
      EamThirdMaintenanceFurnaceBatchPrintModal,
      ThirdMaintenanceFurnaceApprovalModal,
      LxSearchEquipmentSelect,
      EamThirdMaintenanceFurnaceModal
@@ -333,6 +329,11 @@
        })
      },

      // æ‰¹é‡æ‰“印
      handleBatchPrint() {
        this.$refs.batchPrintModal.handlePreview(this.selectedRowKeys.join())
      },

      /**
       * ç‚¹å‡»ä½œåºŸæ—¶è§¦å‘
       * @param id è¡Œè®°å½•id

 src/views/eam/maintenance/modules/EamThirdMaintenanceFurnaceBatchPrintModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,192 @@
<template>
  <j-modal title="预览（仅可预览已完成工单）" :width="948" :visible="visible" switchFullscreen centered
           :mask-closable="false" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="spinning" style="height: 100%">
      <div id="dataTable">
        <div v-for="dataItem in dataSource" class="table-container">
          <div style="page-break-before:always"></div>

          <table class="import-table" :id="dataItem.equipmentCode">
            <thead>
            <tr>
              <td colspan="14" style="border: none">
                <div style="text-align: right">{{dataItem.hfCode}}</div>
              </td>
            </tr>
            </thead>

            <tbody>
            <tr style="height: 55px;">
              <td colspan="14">真空热处理炉整体性能检测表</td>
            </tr>

            <tr style="height: 40px">
              <td colspan="4" style="border-right:none">
                <div style="text-align: left">生产单位：{{dataItem.zxfactoryOrgCode_dictText}}</div>
              </td>
              <td colspan="4" style="border:none">
                <div style="text-align: left">设备名称：{{dataItem.equipmentName}}</div>
              </td>
              <td colspan="3" style="border:none">
                <div style="text-align: left">设备型号：{{dataItem.equipmentModel}}</div>
              </td>
              <td colspan="3" style="border-left:none">
                <div style="text-align: left">统一编码：{{dataItem.equipmentCode}}</div>
              </td>
            </tr>

            <tr style="height: 80px">
              <td colspan="3">压缩空气压力（MPa）</td>
              <td colspan="2">极限真空（Pa）</td>
              <td colspan="2">泄漏率（Pa/h）</td>
              <td colspan="2">净化处理</td>
              <td colspan="3">炉温均匀性检测</td>
              <td colspan="2">加热功率测试</td>
            </tr>

            <tr style="height: 100px">
              <td colspan="3">{{dataItem.compressedAirPressureValue}}</td>
              <td colspan="2">{{dataItem.ultimateVacuumValue}}</td>
              <td colspan="2">{{dataItem.leakRate}}</td>
              <td colspan="2">{{dataItem.purificationTreatment}}</td>
              <td colspan="3">{{dataItem.furnaceTemperatureUniformityTesting}}</td>
              <td colspan="2">{{dataItem.heatingPowerTest}}</td>
            </tr>

            <tr>
              <td colspan="14" style="padding: 20px 100px;border: none">
                <div style="text-align: right">
                  èƒ½å¦æ»¡è¶³åŠ å·¥éœ€æ±‚：{{dataItem.processingRequirementsFlag==='1'?'能（√）否（）':'能（）否（√）'}}
                </div>
                <br/><br/>
                <div style="text-align: right">执行人：<i>第三方维护人员签字</i>&nbsp;&nbsp;{{dataItem.operator_dictText}}
                </div>
                <br/><br/>
                <div style="text-align: right">确认人：<i>第三方维护组长签字</i>&nbsp;&nbsp;{{dataItem.confirmUser_dictText}}
                </div>
                <br/><br/>
                <div style="text-align: right">确认时间：{{dataItem.confirmTime}}</div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </a-spin>

    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="handleExportToExcel">导出</a-button>
      <a-button type="primary" v-print="'#dataTable'">打印</a-button>
    </template>
  </j-modal>
</template>

<script>
  import { getAction } from '@/api/manage'
  import $ from 'jquery'
  import '@/components/table2excel/table2excel'

  export default {
    name: 'EamThirdMaintenanceFurnaceBatchPrintModal',
    data() {
      return {
        visible: false,
        spinning: false,
        dataSource: [],
        url: {
          list: '/eam/eamThirdMaintenanceFurnace/batchExport'
        }
      }
    },
    methods: {
      /**
       * æ‰¹é‡é¢„览
       * @param ids String ä¸»é¡µé¢åˆ—表勾选ids
       */
      handlePreview(ids) {
        this.visible = true
        this.spinning = true
        this.dataSource = []
        const that = this
        getAction(this.url.list, { ids })
          .then(res => {
            if (res.success) that.dataSource = res.result
          })
          .finally(() => {
            that.spinning = false
          })
      },

      // å¯¼å‡ºåˆ°Excel
      handleExportToExcel() {
        document.querySelectorAll('table.import-table').forEach(element => {
          console.log('element', element.id)
          $(element).table2excel({
            exclude: '.noExl',
            name: 'Excel Document Name',
            filename: '真空热处理炉整体性能检测表-' + element.id,
            exclude_img: true,
            fileext: '.xls',
            exclude_links: true,
            exclude_inputs: false
          })
        })
      },

      handleCancel() {
        this.close()
      },

      close() {
        this.$emit('close')
        this.visible = false
        if (this.$refs.form) this.$refs.form.clearValidate()
      }
    }
  }
</script>

<style scoped lang="less">
  /deep/ .ant-modal {
    height: 90%;
    overflow: hidden;

    .ant-modal-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      .ant-modal-body {
        flex: 1;
        overflow: auto;
      }
    }
  }

  .table-container:not(:last-child) {
    margin-bottom: 20px;
  }

  table {
    width: 100%;
    text-align: center;
    table-layout: fixed;

    td, th {
      border: 1px solid #000;
    }

    td.vertical-display {
      writing-mode: vertical-lr;
      letter-spacing: 5px;
      padding: 5px 0;
    }
  }
</style>