点检工单新增批量打印以及导出功能

zhaowei

16 小时以前 5d9726ee8fbf5c6648aa6e822b5509b51cfd758c

点检工单新增批量打印以及导出功能

 src/views/eam/maintenance/EamInspectionOrderList.vue

@@ -40,21 +40,34 @@
    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator" v-if="isDisplayOperation">
      <a-button v-has="'eam:inspection:add'" @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="batchZf('ABOLISH')" v-has="'eam:inspection:abolish'">
            <a-icon type="snippets"/>
            ä½œåºŸ
          </a-menu-item>
          <a-menu-item key="2" @click="batchLq('UNDER_INSPECTION')" v-has="'eam:inspection:collect'">
            <a-icon type="form"/>
            é¢†å–
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> æ‰¹é‡æ“ä½œ
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
      <!--<a-dropdown v-if="selectedRowKeys.length > 0">-->
      <!--<a-menu slot="overlay">-->
      <!--<a-menu-item key="1" @click="batchZf('ABOLISH')" v-has="'eam:inspection:abolish'">-->
      <!--<a-icon type="snippets"/>-->
      <!--作废-->
      <!--</a-menu-item>-->
      <!--<a-menu-item key="2" @click="batchLq('UNDER_INSPECTION')" v-has="'eam:inspection:collect'">-->
      <!--<a-icon type="form"/>-->
      <!--领取-->
      <!--</a-menu-item>-->
      <!--<a-menu-item key="3" @click="handleBatchPrint">-->
      <!--<a-icon type="printer"/>-->
      <!--打印-->
      <!--</a-menu-item>-->
      <!--</a-menu>-->
      <!--<a-button style="margin-left: 8px"> æ‰¹é‡æ“ä½œ-->
      <!--<a-icon type="down"/>-->
      <!--</a-button>-->
      <!--</a-dropdown>-->

      <a-button type="primary" icon="delete" @click="batchZf('ABOLISH')" v-has="'eam:inspection:abolish'"
                :disabled="selectedRowKeys.length===0">批量作废
      </a-button>
      <a-button type="primary" icon="form" @click="batchLq('UNDER_INSPECTION')" v-has="'eam:inspection:collect'"
                :disabled="selectedRowKeys.length===0">批量领取
      </a-button>
      <a-button type="primary" icon="monitor" @click="handleBatchPrint" :disabled="selectedRowKeys.length===0">批量预览
      </a-button>
    </div>

    <!-- table区域-begin -->
@@ -97,20 +110,26 @@
          </template>

          <template v-else>
            <template v-if="record.inspectionStatus=='COMPLETE'">
              <a @click="handlePrint(record)">预览</a>
              <a-divider type="vertical"/>
            </template>

             <a @click="handleDetail(record)">详情</a>

            <template v-if="record.inspectionStatus=='COMPLETE'">
              <a-divider type="vertical"/>

              <a @click="handlePrint(record)">预览</a>
            </template>
          </template>
        </span>
      </a-table>
    </div>

    <!--表单弹窗-->
    <eam-inspection-order-modal ref="modalForm" @ok="modalFormOk"/>

    <!--审批弹窗-->
    <inspection-order-handle ref="modalFormXq" :selectShenpiData="selectInspectionOrderXqData"/>

    <!--批量打印弹窗-->
    <eam-inspection-order-batch-print-modal ref="batchPrintModal"/>
  </a-card>
</template>

@@ -120,11 +139,13 @@
  import { deleteAction, getAction } from '@api/manage'
  import InspectionOrderHandle from '../../flowable/workflow/InspectionOrder/InspectionOrderHandle'
  import LxSearchEquipmentSelect from '../equipment/modules/LxSearchEquipmentSelect'
  import EamInspectionOrderBatchPrintModal from './modules/EamInspectionOrderBatchPrintModal'

  export default {
    name: 'EamInspectionOrderList',
    mixins: [JeecgListMixin],
    components: {
      EamInspectionOrderBatchPrintModal,
      LxSearchEquipmentSelect,
      InspectionOrderHandle,
      EamInspectionOrderModal
@@ -281,6 +302,10 @@
        this.$refs.modalFormXq.handleDetail(record)
      },

      /**
       * é¢†å–
       * @param id
       */
      handleInspection(id) {
        var that = this
        this.loading = true
@@ -302,6 +327,10 @@
          })
      },

      /**
       * ä½œåºŸ
       * @param id
       */
      handleAbolish(id) {
        var that = this
        this.loading = true
@@ -323,6 +352,10 @@
          })
      },

      /**
       * æ‰¹é‡ä½œåºŸ
       * @param type
       */
      batchZf(type) {
        var ids = ''
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
@@ -356,6 +389,10 @@
        })
      },

      /**
       * æ‰¹é‡é¢†å–
       * @param type
       */
      batchLq(type) {
        var ids = ''
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
@@ -390,11 +427,19 @@
        })
      },

      /**
       * é¢„览
       * @param record
       */
      handlePrint(record) {
        let href = `${window._CONFIG['domianURL']}/jmreport/view/1105664887569121280?equipmentCode=` + record.equipmentCode
        window.open(href, '_blank')
      },

      handleBatchPrint() {
        this.$refs.batchPrintModal.handlePreview(this.selectedRowKeys.join())
      },

      onInspectionDateChange: function(value, dateString) {
        this.queryParam.inspectionDateBegin = dateString[0]
        this.queryParam.inspectionDateEnd = dateString[1]

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

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

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

            <tbody>
            <tr style="height: 48px;position: relative">
              <th colspan="42">生产设备自主维护点检表</th>
            </tr>

            <tr style="height: 48px">
              <th colspan="9">设备名称：{{dataItem.equipmentName}}</th>
              <th colspan="9">设备型号：{{dataItem.equipmentModel}}</th>
              <th colspan="9">统一编号：{{dataItem.equipmentCode}}</th>
              <th colspan="6">
                {{dataItem.inspectionYear}}&nbsp;å¹´&nbsp;{{dataItem.inspectionMonth}}&nbsp;月
              </th>
              <th colspan="9">单位：{{dataItem.factoryName_dictText}}</th>
            </tr>

            <tr>
              <td rowspan="2">序号</td>
              <td rowspan="2" colspan="5">点检项目</td>
              <td rowspan="2" colspan="5">完成数据/要求</td>
              <td colspan="31">日期</td>
            </tr>

            <tr>
              <td v-for="item in 31">{{item}}</td>
            </tr>

            <tr v-for="item in dataItem.eamDailyInspectionList">
              <td>{{item.itemCode}}</td>
              <td colspan="5">{{item.itemName}}</td>
              <td colspan="5">{{item.itemDemand}}</td>
              <td v-for="childItem in item.dateFlag">{{childItem!==null?childItem:''}}</td>
            </tr>

            <tr>
              <td colspan="11">维护责任人签字</td>
              <td v-for="item in dataItem.dailyResponsibleInfo.operators">
                {{item!==null?item:''}}
              </td>
            </tr>

            <tr>
              <td colspan="11">检查责任人签字</td>
              <td v-for="item in dataItem.dailyResponsibleInfo.confirmUsers">
                {{item!==null?item:''}}
              </td>
            </tr>

            <tr style="height: 48px">
              <td>序号</td>
              <td colspan="5">周保养项目</td>
              <td colspan="5">检查标准</td>
              <td colspan="31">周保执行记录</td>
            </tr>

            <tr v-for="item in dataItem.eamWeeklyInspectionList">
              <td>{{item.itemCode}}</td>
              <td colspan="5">{{item.itemName}}</td>
              <td colspan="5">{{item.itemDemand}}</td>

              <td v-for="(childItem,childIndex) in item.weekFlag"
                  :colspan="childIndex!==item.weekFlag.length-1?6:7">
                {{childItem!==null?childItem:''}}
              </td>
            </tr>

            <tr>
              <td colspan="11">周保养操作者执行（操作者签字）</td>
              <td v-for="(item,index) in dataItem.weeklyResponsibleInfo.operators"
                  :colspan="index!==dataItem.weeklyResponsibleInfo.operators.length-1?6:7">
                {{item!==null?item:''}}
              </td>
            </tr>

            <tr>
              <td colspan="11">周保养检查人确认（维修人员签字）</td>
              <td v-for="(item,index) in dataItem.weeklyResponsibleInfo.confirmUsers"
                  :colspan="index!==dataItem.weeklyResponsibleInfo.confirmUsers.length-1?6:7">
                {{item!==null?item:''}}
              </td>
            </tr>

            <tr>
              <td colspan="42">
                <div style="text-align: left">
                  å¡«å†™è¦æ±‚：正常＝√，异常＝×，故障停机＝△，没开机＝T：设备日常点检记录由操作人员执行并记录。执行情况检查由维修人员负责执行并记录，对发现问题记录至点检表背面备注栏，对发现问题进行全程闭环记录。
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </a-spin>

    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="handleImport">导出</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: 'EamInspectionOrderBatchPrintModal',
    data() {
      return {
        visible: false,
        dataSource: [],
        spinning: false,
        url: {
          list: '/eam/eamInspectionOrder/printInspectionOrder'
        }
      }
    },
    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
          })
      },

      handleImport() {
        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 {
    width: 100%;
    text-align: center;
    table-layout: fixed;

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

    tr:first-child th {
      border-bottom: 0;
    }

    tr:nth-child(2) th {
      border-top: 0;
    }

    tr:nth-child(2) th {
      border-left: 0;
      border-right: 0;
    }

    tr:nth-child(2) th:first-child {
      border-left: 1px solid #000;
    }

    tr:nth-child(2) th:last-child {
      border-right: 1px solid #000;
    }
  }

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