1、二、三保工单增加批量打印及导出完工单和验收单功能 2、二保工单审批流程图展示增加滚动条 3、html导出成excel工具方法增加单元格换行展示以及...

zhaowei

23 小时以前 1cb38dbdb58bc3966453ca43585140323e50d1b8

1、二、三保工单增加批量打印及导出完工单和验收单功能
2、二保工单审批流程图展示增加滚动条
3、html导出成excel工具方法增加单元格换行展示以及自适应换行高度功能

 src/components/table2excel/table2excel.js

@@ -82,6 +82,7 @@
              compStyle = getComputedStyle(q);
              additionalStyles += (compStyle && compStyle.backgroundColor ? "background-color: " + compStyle.backgroundColor + ";" : "");
              additionalStyles += (compStyle && compStyle.color ? "color: " + compStyle.color + ";" : "");
              additionalStyles += (compStyle && compStyle.wordWrap ? "word-wrap: " + compStyle.wordWrap + ";" : "");
            }

            var rc = {

 src/views/eam/maintenance/EamSecondMaintenanceOrderList.vue

@@ -41,25 +41,45 @@
      <a-button v-has="'secondMaintenanceOrder:add'" @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button v-has="'secondMaintenanceOrder:batchAdd'" @click="handleBatchAdd" type="primary" icon="plus">批量新增
      </a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item v-has="'secondMaintenanceOrder:batchAbolish'" key="1" @click="handlerBatchAbolish">
            <a-icon type="delete"/>
            ä½œåºŸ
          </a-menu-item>
          <a-menu-item v-has="'secondMaintenanceOrder:batchCollect'" key="2" @click="handlerBatchCollect">
            <a-icon type="form"/>
            é¢†å–
          </a-menu-item>
          <a-menu-item v-has="'secondMaintenanceOrder:batchRestore'" key="3" @click="handlerBatchRestore">
            <a-icon type="reload"/>
            è¿˜åŽŸ
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> æ‰¹é‡æ“ä½œ
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
      <a-button v-has="'secondMaintenanceOrder:batchAbolish'" @click="handlerBatchAbolish" type="primary"
                icon="delete" :disabled="selectedRowKeys.length===0">
        æ‰¹é‡ä½œåºŸ
      </a-button>
      <a-button v-has="'secondMaintenanceOrder:batchCollect'" @click="handlerBatchCollect" type="primary" icon="form"
                :disabled="selectedRowKeys.length===0">
        æ‰¹é‡é¢†å–
      </a-button>
      <a-button v-has="'secondMaintenanceOrder:batchRestore'" @click="handlerBatchRestore" type="primary"
                :disabled="selectedRowKeys.length===0"
                icon="reload">
        æ‰¹é‡è¿˜åŽŸ
      </a-button>
      <a-button v-has="'secondMaintenanceOrder:batchAdd'" @click="handleBatchPrint" type="primary" icon="monitor"
                :disabled="selectedRowKeys.length===0">批量预览
      </a-button>
      <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay">
           <a-menu-item v-has="'secondMaintenanceOrder:batchAbolish'" key="1" @click="handlerBatchAbolish">
             <a-icon type="delete"/>
             ä½œåºŸ
           </a-menu-item>
           <a-menu-item v-has="'secondMaintenanceOrder:batchCollect'" key="2" @click="handlerBatchCollect">
             <a-icon type="form"/>
             é¢†å–
           </a-menu-item>
           <a-menu-item v-has="'secondMaintenanceOrder:batchRestore'" key="3" @click="handlerBatchRestore">
             <a-icon type="reload"/>
             è¿˜åŽŸ
           </a-menu-item>
           <a-menu-item key="4" @click="handleBatchPrint">
             <a-icon type="monitor"/>
             é¢„览
           </a-menu-item>
         </a-menu>
         <a-button style="margin-left: 8px"> æ‰¹é‡æ“ä½œ
           <a-icon type="down"/>
         </a-button>
       </a-dropdown>-->
    </div>


@@ -126,10 +146,15 @@
    <!-- è¡¨å•åŒºåŸŸ -->
    <eamSecondMaintenanceOrder-modal ref="modalForm" @ok="modalFormOk"/>

    <!--批量新增-->
    <eam-second-maintenance-batch-order-modal ref="batchModalForm" @ok="modalFormOk"/>

    <!--审批弹窗-->
    <second-maintenance-approval-modal ref="secondMaintenanceApprovalModal"
                                       :selectShenpiData="selectSecondMaintenanceData"/>

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

@@ -141,11 +166,13 @@
    from '@views/flowable/workflow/secondMaintenance/SecondMaintenanceApprovalModal.vue'
  import LxSearchEquipmentSelect from '../equipment/modules/LxSearchEquipmentSelect'
  import EamSecondMaintenanceBatchOrderModal from './modules/EamSecondMaintenanceBatchOrderModal'
  import EamSecondMaintenanceOrderBatchPrintModal from './modules/EamSecondMaintenanceOrderBatchPrintModal'

  export default {
    name: 'EamSecondMaintenanceOrderList',
    mixins: [JeecgListMixin],
    components: {
      EamSecondMaintenanceOrderBatchPrintModal,
      EamSecondMaintenanceBatchOrderModal,
      LxSearchEquipmentSelect,
      EamSecondMaintenanceOrderModal,
@@ -342,6 +369,7 @@
        let href = `${window._CONFIG['domianURL']}/jmreport/view/1110733537193545728?id=` + record.id //网站链接
        window.open(href, '_blank')
      },

      handlerAbolish(id) {
        var that = this
        deleteAction(that.url.abolish, { id })
@@ -393,6 +421,7 @@
          }
        })
      },

      //还原
      handlerRestore(id) {
        let that = this
@@ -414,6 +443,7 @@
            }
          })
      },

      //批量还原
      handlerBatchRestore() {
        if (!this.url.restoreBatch) {
@@ -463,6 +493,7 @@
          })
        }
      },

      //批量领取
      handlerBatchCollect() {
        if (!this.url.collectBatch) {
@@ -513,6 +544,11 @@
        }
      },

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

      onMaintenanceDateChange: function(dataArray) {
        this.queryParam.maintenanceDateBegin = dataArray[0]
        this.queryParam.maintenanceDateEnd = dataArray[1]

 src/views/eam/maintenance/EamThirdMaintenanceOrderList.vue

@@ -39,11 +39,29 @@
    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator" v-if="isDisplayOperation">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>

      <a-dropdown :disabled="selectedRowKeys.length===0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="handleBatchPrint(1)">
            éªŒæ”¶å•
          </a-menu-item>
          <a-menu-item key="2" @click="handleBatchPrint(2)">
            å®Œå·¥ç§»äº¤å•
          </a-menu-item>
          <a-menu-item key="3" @click="handleBatchPrint(3)">
            ä»¥ä¸ŠåŒæ—¶å±•ç¤º
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px" type="primary"> æ‰¹é‡é¢„览
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
             :pagination="ipagination" :loading="loading" :scroll="{x:'max-content'}"
             :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
             @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <template v-if="record.maintenanceStatus === 'WAIT_MAINTENANCE'">
@@ -69,7 +87,7 @@
          <template v-if="record.maintenanceStatus === 'COMPLETE'">
          <a-divider type="vertical"/>

          <a @click="handlePrint(record)">打印</a>
          <a @click="handlePrint(record)">预览</a>
          </template>
        </span>
    </a-table>
@@ -83,6 +101,9 @@

    <!--工单变更弹窗-->
    <eam-third-maintenance-change-modal ref="orderChangeModal" @ok="modalFormOk"/>

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

@@ -94,11 +115,13 @@
  import ThirdMaintenanceApprovalModal
    from '@views/flowable/workflow/thirdMaintenance/ThirdMaintenanceApprovalModal.vue'
  import EamThirdMaintenanceChangeModal from './modules/EamThirdMaintenanceChangeModal.vue'
  import EamThirdMaintenanceOrderBatchPrintModal from './modules/EamThirdMaintenanceOrderBatchPrintModal'

  export default {
    name: 'EamThirdMaintenanceOrderList',
    mixins: [JeecgListMixin],
    components: {
      EamThirdMaintenanceOrderBatchPrintModal,
      EamThirdMaintenanceChangeModal,
      LxSearchEquipmentSelect,
      EamThirdMaintenanceOrderModal,
@@ -363,11 +386,20 @@
        this.$refs.thirdMaintenanceApprovalModal.handleDetail(record)
      },

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

      onMaintenanceDateChange(dateString) {
        this.queryParam.maintenanceDateBegin = dateString[0]
        this.queryParam.maintenanceDateEnd = dateString[1]
      },

      /**
       * ç§¯æœ¨æŠ¥è¡¨é¢„览打印
       * @param record
       */
      handlePrint(record) {
        let href = `${window._CONFIG['domianURL']}/jmreport/view/1094880052100399104?id=` + record.id
        //  + `&orderId=` + record.id; //网站链接

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,213 @@
<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="6" style="border: none">
                <div style="text-align: right">{{dataItem.hfCode}}</div>
              </td>
            </tr>
            </thead>

            <tbody>
            <tr style="height: 48px;">
              <th colspan="6" style="border: none;font-size: 20px">生产设备二级保养完工移交单</th>
            </tr>

            <tr>
              <td>设备名称</td>
              <td>{{dataItem.equipmentName}}</td>
              <td>设备型号</td>
              <td>{{dataItem.equipmentModel}}</td>
              <td>统一编号</td>
              <td>{{dataItem.equipmentCode}}</td>
            </tr>

            <tr>
              <td>使用单位</td>
              <td>{{dataItem.factoryName}}</td>
              <td>保养日期</td>
              <td colspan="3">{{dataItem.maintenanceDateFormatted}}</td>
            </tr>

            <tr>
              <td class="vertical-display" :rowspan="dataItem.maintenanceOrderDetails.length+1">维修人员保养内容</td>
              <td class="vertical-display">序号</td>
              <td colspan="2">保养内容</td>
              <td>执行情况</td>
              <td>执行人</td>
            </tr>

            <tr v-for="(item,index) in dataItem.maintenanceOrderDetails">

              <td>{{item.itemCode}}</td>
              <td colspan="2">{{item.itemName}}</td>
              <td>{{item.maintenanceResult_dictText}}</td>
              <td>{{item.createBy_dictText}}</td>
            </tr>

            <tr>
              <td class="vertical-display" :rowspan="dataItem.operationOrderDetails.length+1">操作人员保养内容</td>
              <td class="vertical-display">序号</td>
              <td colspan="2">保养内容</td>
              <td>执行情况</td>
              <td>执行人</td>
            </tr>

            <tr v-for="(item,index) in dataItem.operationOrderDetails">
              <td>{{item.itemCode}}</td>
              <td colspan="2">{{item.itemName}}</td>
              <td>{{item.maintenanceResult_dictText}}</td>
              <td>{{item.createBy_dictText}}</td>
            </tr>

            <tr>
              <td colspan="6" style="padding: 5px">
                <div style="text-align: left">问题：{{dataItem.problemDescription}}</div>
                <br/><br/><br/>
                <div style="text-align: left">处理措施描述：{{dataItem.dealDescription}}</div>
                <br/><br/><br/>
                <div style="text-align: right">使用单位设备管理员：{{dataItem.manageUser_dictText}}</div>
              </td>
            </tr>

            <tr>
              <td colspan="6" style="padding: 5px">
                <div style="text-align: left">该设备经二级保养检查后，达到保养规范要求。</div>
                <br/><br/><br/>
                <div style="text-align: right">设备检查人员：{{dataItem.inspector_dictText}}</div>
              </td>
            </tr>

            <tr>
              <td colspan="6" style="border: none">
                å¡«å†™è¯´æ˜Žï¼šæ‰§è¡Œä¿å…»å·¥ä½œä¸­ï¼Œæ ¹æ®ä¿å…»å†…容，在执行情况对应栏划“√”
              </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: 'EamSecondMaintenanceOrderBatchPrintModal',
    data() {
      return {
        visible: false,
        spinning: false,
        dataSource: [],
        url: {
          list: '/eam/secondMaintenanceOrder/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
          })
      },

      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
        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>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,353 @@
<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">

          <template v-if="tableType!==2">
            <div style="page-break-before:always"></div>

            <table class="import-table" :id="'加工设备三级保养验收单-'+dataItem.equipmentCode">
              <thead>
              <tr>
                <td colspan="18" style="border: none;text-align: right">{{dataItem.hfCodeB}}</td>
              </tr>
              </thead>

              <tbody>
              <tr style="height: 48px;">
                <th colspan="18" style="border: none;font-size: 20px">加工设备三级保养验收单</th>
              </tr>

              <tr>
                <td colspan="3">设备类别</td>
                <td colspan="6">{{dataItem.equipmentCategory_dictText}}</td>

                <td colspan="3">设备编号</td>
                <td colspan="6">{{dataItem.equipmentCode}}</td>
              </tr>

              <tr>
                <td colspan="3">设备名称</td>
                <td colspan="6">{{dataItem.equipmentName}}</td>

                <td colspan="3">设备型号</td>
                <td colspan="6">{{dataItem.equipmentModel}}</td>
              </tr>

              <tr>
                <td colspan="3" rowspan="2">保养部位</td>
                <td colspan="6" rowspan="2">保养内容</td>
                <td colspan="3" rowspan="2">验收标准</td>
                <td colspan="6">验收次数</td>
              </tr>

              <tr>
                <td colspan="3">第一次检</td>
                <td colspan="3">第二次检</td>
              </tr>

              <tr v-for="item in dataItem.eamThirdMaintenanceOrderDetailList">
                <td colspan="3" :rowSpan="item.rowSpan" v-show="!item.rowSpanDis">{{item.itemPart}}</td>
                <td colspan="6">{{item.itemName}}</td>
                <td colspan="3">{{item.itemDemand}}</td>
                <td colspan="3">{{+item.firstInspectResult?'√':'×'}}</td>
                <td colspan="3">{{item.secondInspectResult}}</td>
              </tr>
              </tbody>
            </table>

            <div style="display:flex;justify-content: space-between; margin-top: 5px;padding: 0 20px">
              <div>检查人员：{{dataItem.inspectorSignature_dictText}}</div>
              <div>检查日期：{{dataItem.inspectTime}}</div>
            </div>
          </template>

          <template v-if="tableType!==1">
            <div style="page-break-before:always"></div>

            <table class="import-table" :id="'加工设备三级保养完工移交单-'+dataItem.equipmentCode">
              <thead>
              <tr>
                <td colspan="18" style="border: none;text-align: right">{{dataItem.hfCodeA}}</td>
              </tr>
              </thead>

              <tbody>
              <tr style="height: 48px;">
                <th colspan="18" style="border: none;font-size: 20px">加工设备三级保养完工移交单</th>
              </tr>

              <tr>
                <td colspan="3">设备名称</td>
                <td colspan="3">{{dataItem.equipmentName}}</td>
                <td colspan="3">设备型号</td>
                <td colspan="3">{{dataItem.equipmentModel}}</td>
                <td colspan="3">统一编号</td>
                <td colspan="3">{{dataItem.equipmentCode}}</td>
              </tr>

              <tr>
                <td colspan="3">使用单位</td>
                <td colspan="3">{{dataItem.factoryName}}</td>
                <td colspan="3">保养日期</td>
                <td colspan="9">{{dataItem.maintenanceDateFormatted}}</td>
              </tr>

              <tr>
                <td colspan="18" style="text-align: left;padding: 5px">
                  ä¿å…»å‰æŠ€æœ¯çŠ¶æ€<br/>
                  1、设备功能是否齐全：{{+dataItem.fullyFunctional===1?'是（√）否（）':'是（）否（√）'}}<br/>
                  2、设备能否正常运转，满足加工要求：{{+dataItem.runningNormally===1?'是（√）否（）':'是（）否（√）'}}<br/>
                  3、问题描述：{{dataItem.problemDescription}}
                </td>
              </tr>

              <tr>
                <td colspan="18" style="text-align: left;padding: 5px">
                  ä¿å…»å†…容<br/>
                  1、按照三级保养规范进行保养。<br/>
                  2、对整改情况进行描述。
                </td>
              </tr>

              <tr>
                <td colspan="18" style="text-align: left;padding: 5px">
                  ä¿®ç†æ›´æ¢å¤‡ä»¶æ˜Žç»†ï¼š
                </td>
              </tr>

              <tr>
                <td colspan="3">序号</td>
                <td colspan="3">名称</td>
                <td colspan="3">型号</td>
                <td colspan="3">数量</td>
                <td colspan="6">备注</td>
              </tr>

              <tr v-for="item in dataItem.eamThirdMaintenanceSpareList">
                <td colspan="3">{{item.spareCode}}</td>
                <td colspan="3">{{item.spareName}}</td>
                <td colspan="3">{{item.spareModel}}</td>
                <td colspan="3">{{item.spareQuantity}}</td>
                <td colspan="6">{{item.remark}}</td>
              </tr>

              <tr>
                <td colspan="18" style="text-align: left;padding: 5px">
                  è¯¥è®¾å¤‡ç»ä¸‰çº§ä¿å…»æ£€æŸ¥åŽï¼Œè¾¾åˆ°ä¿å…»è§„范要求。
                  <br/><br/><br/>
                  <div style="display: flex;justify-content: space-between">
                    <div>操作人员：{{dataItem.operatorSignature_dictText}}</div>
                    <div>维修室主任：{{dataItem.repairManagerSignature_dictText}}</div>
                    <br/><br/><br/>
                  </div>


                  <div style="display: flex;justify-content: space-between">
                    <div>维修人员：{{dataItem.repairmanSignature_dictText}}</div>
                    <div>设备检验员：{{dataItem.inspectorSignature_dictText}}</div>
                    <br/>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </template>
        </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: 'EamThirdMaintenanceOrderBatchPrintModal',
    data() {
      return {
        visible: false,
        spinning: false,
        tableType: null,
        dataSource: [
          {
            hfCode: 'HF-16548ASDSADA',
            equipmentName: '手打十点多',
            equipmentModel: '6500P',
            equipmentCode: '2125400',
            factoryName: '燃机厂',
            maintenanceDateFormatted: '2025å¹´5月20日'

          }
        ],
        url: {
          list1: '/eam/thirdMaintenanceOrder/batchExportCheck',
          list2: '/eam/thirdMaintenanceOrder/batchExport'
        }
      }
    },
    methods: {
      /**
       * æ‰¹é‡é¢„览
       * @param type String å±•ç¤ºç±»åž‹
       * @param ids String ä¸»é¡µé¢åˆ—表勾选ids
       */
      handlePreview(type, ids) {
        this.visible = true
        this.spinning = true
        this.dataSource = []
        this.tableType = type
        if (type === 3) {
          this.displayAllTableType(ids)
          return
        }
        const that = this
        getAction(this.url['list' + type], { ids })
          .then(res => {
            if (res.success) {
              that.dataSource = res.result
              that.combineCell()
            }
          })
          .finally(() => {
            that.spinning = false
          })
      },

      displayAllTableType(ids) {
        const that = this
        getAction(this.url.list1, { ids })
          .then(res1 => {
            if (res1.success) {
              getAction(this.url.list2, { ids })
                .then(res2 => {
                  if (res2.success) {
                    res1.result.forEach(item1 => {
                      for (let i = 0; i < res2.result.length; i++) {
                        if (item1.id === res2.result[i].id) {
                          console.log('res2', res2.result)
                          const dataItem = { ...item1, ...res2.result[i] }
                          that.dataSource.push(dataItem)
                          console.log('item1', item1)
                          break
                        }
                      }
                    })
                    that.combineCell()
                  }
                })
                .finally(() => {
                  that.spinning = false
                })
            }
          })

      },

      // åˆå¹¶
      combineCell() {
        this.dataSource.forEach(item => {
          let list = item.eamThirdMaintenanceOrderDetailList
          let k = 0
          while (k < list.length) {
            list[k]['rowSpan'] = 1
            list[k]['rowSpanDis'] = false
            for (var i = k + 1; i <= list.length - 1; i++) {
              if (list[k]['itemPart'] === list[i]['itemPart'] && list[k]['itemPart'] !== '') {
                list[k]['rowSpan']++
                list[k]['rowSpanDis'] = false
                list[i]['rowSpan'] = 1
                list[i]['rowSpanDis'] = true
              } else {
                break
              }
            }
            k = i
          }
        })
        console.log('dataSource', this.dataSource)
      },

      handleImport() {
        document.querySelectorAll('table.import-table').forEach(item => {
          console.log('item', item)
          $(item).table2excel({
            exclude: '.noExl',
            name: 'Excel Document Name',
            filename: item.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 {
      transform: rotate(360deg);
      writing-mode: vertical-lr;
      letter-spacing: 5px;
      padding: 10px 0;
    }
  }
</style>

 src/views/eam/repair/modules/EamRepairPersonForm.vue

ÎļþÒÑɾ³ý

 src/views/eam/repair/modules/ImagesPreviewModal.vue

ÎļþÒÑɾ³ý

 src/views/flowable/workflow/secondMaintenance/SecondMaintenanceApprovalModal.vue

@@ -154,14 +154,14 @@
              </a-tab-pane>

              <template v-if="selectShenpiData.processDefinitionKey">
                <a-tab-pane key='3' tab='流程图'>
                  <img :src="imageSrc" alt="Fetched Image"/>
                <a-tab-pane key='3' tab='流程图' style="overflow: auto">
                  <img :src="imageSrc" v-if="imageSrc"/>
                </a-tab-pane>
              </template>

              <a-tab-pane key='4' tab='流转节点'>
                <a-card>
                  <a-timeline style="padding:0 1% 0 12%" >
                  <a-timeline style="padding:0 1% 0 12%">
                    <a-timeline-item color='white' v-for="(item,index1) in hitaskDataSource" :key="index1">
                      <div class="bottom">
                        <p>处理人：{{item.assignee_dictText}}</p>
@@ -239,7 +239,7 @@
        </a-row>
      </a-form-model>

      <eamReportRepair-modal ref="modalForm"  @ok="handleRepairComplete" @close="handleRepairClose"/>
      <eamReportRepair-modal ref="modalForm" @ok="handleRepairComplete" @close="handleRepairClose"/>

    </a-spin>
  </j-modal>
@@ -250,7 +250,7 @@
  import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
  import { JVXETypes } from '@comp/jeecg/JVxeTable'
  import MaintenanceEquipmentSelect from '@views/eam/equipment/modules/MaintenanceEquipmentSelect'
  import EamReportRepairModal from "@views/eam/repair/modules/EamReportRepairList/EamReportRepairModal.vue";
  import EamReportRepairModal from '@views/eam/repair/modules/EamReportRepairList/EamReportRepairModal.vue'

  export default {
    name: 'SecondMaintenanceApprovalModal',
@@ -299,12 +299,12 @@
          detail: '/eam/secondMaintenanceOrderDetail/queryList',
          approval: '/eam/secondMaintenanceOrder/approval',
          diagramView: '/assign/flow/diagramView',
          queryHisTaskList:'/assign/flow/queryHisTaskList',
          queryHisTaskList: '/assign/flow/queryHisTaskList'
        },
        disableSubmit: false,
        selectedOperatorMaintenanceRowKeys: [],
        selectedRepairerMaintenanceRowKeys: [],
        hitaskDataSource:[],
        hitaskDataSource: [],
        detail: {
          operatorMaintenanceList: [],
          repairerMaintenanceList: [],
@@ -383,7 +383,7 @@
      },
      // æ“ä½œåˆ—仅在保养中状态下显示
      shouldShowActionColumn() {
        return this.model.maintenanceStatus === 'UNDER_MAINTENANCE';
        return this.model.maintenanceStatus === 'UNDER_MAINTENANCE'
      }
    },
    methods: {
@@ -444,7 +444,7 @@
              { handler: this.customValidator }
            ]
          }
        ];
        ]

        // ä»…在保养中状态下添加操作列
        if (this.shouldShowActionColumn) {
@@ -455,10 +455,10 @@
            width: 150,
            slotName: 'action',
            fixed: 'right'
          });
          })
        }

        return columns;
        return columns
      },

      /**
@@ -469,7 +469,6 @@
        this.spinning = true
        this.model = {}
        this.detail.operatorMaintenanceList = this.detail.repairerMaintenanceList = []
        this.handleTabToFirstTable()
        this.getBasicInformationByApi(record)
        this.getFlowChartImageByApi(record)
        this.getFlowTaskListByApi(record)
@@ -503,6 +502,7 @@
              that.model.taskId = record.id
              that.model.userId = record.assignee
              that.model.instanceId = record.procInstId
              this.handleTabToFirstTable()
            }
            else {
              that.$notification.warning({
@@ -518,11 +518,11 @@
       * @param record
       */
      getFlowTaskListByApi(record) {
        let parmhis={
        let parmhis = {
          'procInstId': record.procInstId
        }
        getAction(this.url.queryHisTaskList,parmhis).then(res=>{
          this.hitaskDataSource=res.result
        getAction(this.url.queryHisTaskList, parmhis).then(res => {
          this.hitaskDataSource = res.result
        }).finally(
          this.visible = true,
          console.log('this.approveData---->', this.approveData)
@@ -720,15 +720,15 @@
          this.model.maintenanceStatus !== 'UNDER_MAINTENANCE' ||
          row.maintenanceResult === '1' ||
          row.reportFlag === '1'
        );
        )
      },

      handleRepairComplete(success) {
        if (success && this.currentRepairRow) {
          this.$set(this.currentRepairRow, 'reportFlag', '1');
          this.$message.success("报修已成功提交");
          this.$set(this.currentRepairRow, 'reportFlag', '1')
          this.$message.success('报修已成功提交')
        }
        this.currentRepairRow = null;
        this.currentRepairRow = null
      },

      /**
@@ -736,7 +736,7 @@
       * @param exceptionDescription
       */
      handleRepairReporting(row) {
        this.currentRepairRow = row; // å­˜å‚¨å½“前操作行
        this.currentRepairRow = row // å­˜å‚¨å½“前操作行
        let record = {
          faultDescription: row.exceptionDescription,
          equipmentId: this.model.equipmentId
@@ -746,7 +746,7 @@

      handleRepairClose(success) {
        if (!success && this.currentRepairRow) {
          this.currentRepairRow = null; // æ¸…除未成功的操作
          this.currentRepairRow = null // æ¸…除未成功的操作
        }
      },

@@ -789,6 +789,7 @@
      }
    }
  }

  /* å…¨å±€ç¦é€‰æ ·å¼ - ä½œç”¨äºŽæ•´ä¸ªé¡µé¢ */
  html.submitting,
  html.submitting body {
@@ -834,6 +835,7 @@
    background-color: rgba(0, 0, 0, 0.1); /* ä½¿ç”¨ RGBA é¢œè‰²ï¼Œå¹¶è®¾ç½®è¾ƒä½Žçš„透明度 */
    margin: 20px 0; /* åˆ†ç•Œçº¿ä¸Šä¸‹çš„外边距 */
  }

  .btn-custom {
    background-color: #4CAF50; /* ç»¿è‰²èƒŒæ™¯ */
    color: white; /* ç™½è‰²æ–‡å­— */
@@ -852,13 +854,14 @@
    font-weight: bold;
    font-size: 20px; /* æˆ–你需要的任何大小 */
  }
  .left_qiu{

  .left_qiu {
    position: absolute;
    left: -74px;
    top: 0;
    width:54px;
    width: 54px;
    border-radius: 50%;
    height:54px;
    height: 54px;
    font-size: 13px;
    margin: auto;
    display: flex;
@@ -868,20 +871,23 @@
    background: #0099ff;
    transform: translate(0, 0);
  }
  /deep/ .ant-timeline-item-tail{

  /deep/ .ant-timeline-item-tail {
    left: -29px !important;
  }
  .left_qiu span{

  .left_qiu span {
    width: 3em;
    display: block;
    color: #fff;
    text-align: center;
  }
  .img{

  .img {
    width: 75%;
  }

  .wrap{
  .wrap {
    clear: both;
    width: 100%;
    display: flex;
@@ -889,13 +895,14 @@
    border: 1px solid #ccc;
    /* background-color: aqua; */
  }
  .box{
    width:21%;
    height:50px;

  .box {
    width: 21%;
    height: 50px;
    border-right: 1px solid #ccc;
    line-height: 50px;
    /* background: red; */
    text-align:center;
    text-align: center;
    margin: auto;
  }