设备台账页面实现批量打印铭牌功能

zhaowei

2025-04-02 66d2a3a44b44489eaab5465bd7a2e906d508d898

设备台账页面实现批量打印铭牌功能

 src/views/eam/equipment/EamEquipmentList.vue

@@ -89,6 +89,10 @@
            <a-icon type="delete"/>
            删除
          </a-menu-item>
          <a-menu-item key="2" @click="handleOpenNameplateModal(selectionRows)">
            <a-icon type="printer"/>
            打印铭牌
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down"/>
@@ -141,7 +145,7 @@
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleOpenNameplateModal(record)">铭牌</a>
                <a href="javascript:;" @click="handleOpenNameplateModal([record])">铭牌</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="handleOpenResumeDrawer(record)">履历</a>
@@ -171,7 +175,7 @@
    <!-- 表单区域 -->
    <eamEquipment-modal ref="modalForm" @ok="modalFormOk"></eamEquipment-modal>
    <!--铭牌弹窗-->
    <nameplate-modal ref="nameplateModalRef"/>
    <nameplate-modal ref="nameplateModalRef" :printedRows="printedRows"/>
    <!--履历弹窗-->
    <resume-drawer ref="resumeDrawerRef"/>
  </a-card>
@@ -453,6 +457,7 @@
        templateXlsDownloadUrl: '导入模板/设备台账导入模板_v1.0.xlsx'
      },
      treeData: [],
      printedRows: [],
      activeTabKey: 1,
      appHomeUrl: ''
    }
@@ -480,17 +485,17 @@

    /**
     * 开启铭牌弹窗
     * @param record 表格行信息
     * @param recordArray 表格行信息集合
     */
    handleOpenNameplateModal(record) {
      this.$refs.nameplateModalRef.model = Object.assign({}, record)
      this.$refs.nameplateModalRef.httpUrl = this.appHomeUrl + record.equipmentCode
    handleOpenNameplateModal(recordArray) {
      this.printedRows = recordArray
      this.$refs.nameplateModalRef.httpUrl = this.appHomeUrl
      this.$refs.nameplateModalRef.visible = true
    },

    /**
     * 开启履历抽屉
     * @param record
     * @param record 表格行信息
     */
    handleOpenResumeDrawer(record) {
      this.$refs.resumeDrawerRef.visible = true
@@ -526,9 +531,11 @@
    /**
     * 设备台账表格多选框状态改变时触发
     * @param selectedRowKeys 已选择的rowKey集合
     * @param selectionRows 当前分页下已选择的行信息集合
     */
    onSelectChange(selectedRowKeys) {
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
      this.$refs.tabPaneTableListRef.dataSource = []
      this.$refs.tabPaneTableListRef.onClearSelected()
      if (selectedRowKeys.length === 1) this.loadTabPaneTableData(selectedRowKeys[0])

 src/views/eam/equipment/modules/NameplateModal.vue

@@ -6,62 +6,66 @@
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <table id="nameplateTable" border="1" cellpadding="12" cellspacing="0" align="center" width="80%">
      <thead>
      <tr>
        <th colspan="3">设备管理牌</th>
      </tr>
      </thead>

      <tbody>
      <tr>
        <td rowspan="3">
          <QrcodeVue :value="httpUrl"/>
        </td>
        <td>设备编号</td>
        <td>{{ model.equipmentCode }}</td>
      </tr>
    <div id="nameplateTable">
      <table border="1" cellpadding="12" cellspacing="0" align="center" width="80%" v-for="item in printedRows"
             :key="item.id">
        <thead>
        <tr>
          <th colspan="3">设备管理牌</th>
        </tr>
        </thead>

      <tr>
        <td>设备名称</td>
        <td>{{ model.equipmentName }}</td>
      </tr>
        <tbody>
        <tr>
          <td rowspan="3">
            <QrcodeVue :value="httpUrl+item.equipmentCode"/>
          </td>
          <td>设备编号</td>
          <td>{{ item.equipmentCode }}</td>
        </tr>

      <tr>
        <td>设备型号</td>
        <td>{{ model.equipmentModel }}</td>
      </tr>
        <tr>
          <td>设备名称</td>
          <td>{{ item.equipmentName }}</td>
        </tr>

      <tr>
        <td>设备管理</td>
        <td>使用车间</td>
        <td>{{ model.orgId_dictText }}</td>
      </tr>
        <tr>
          <td>设备型号</td>
          <td>{{ item.equipmentModel }}</td>
        </tr>

      <tr>
        <td rowspan="3">
          <QrcodeVue :value="model.equipmentCode"/>
        </td>
        <td>出厂编号</td>
        <td>{{ model.factoryNumber }}</td>
      </tr>
        <tr>
          <td>设备管理</td>
          <td>使用车间</td>
          <td>{{ item.orgId_dictText }}</td>
        </tr>

      <tr>
        <td>设备管理员</td>
        <td>{{ model.equipmentManager_dictText }}</td>
      </tr>
        <tr>
          <td rowspan="3">
            <QrcodeVue :value="item.equipmentCode"/>
          </td>
          <td>出厂编号</td>
          <td>{{ item.factoryNumber }}</td>
        </tr>

      <tr>
        <td>安装位置</td>
        <td>{{ model.installationPosition }}</td>
      </tr>
        <tr>
          <td>设备管理员</td>
          <td>{{ item.equipmentManager_dictText }}</td>
        </tr>

      <tr>
        <td>MES</td>
        <td colspan="2" style="color: #f00;font-weight: bold;letter-spacing: 1px">非管理员勿动此铭牌</td>
      </tr>
      </tbody>
    </table>
        <tr>
          <td>安装位置</td>
          <td>{{ item.installationPosition }}</td>
        </tr>

        <tr>
          <td>MES</td>
          <td colspan="2" style="color: #f00;font-weight: bold;letter-spacing: 1px">非管理员勿动此铭牌</td>
        </tr>
        </tbody>
      </table>
    </div>

    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
@@ -76,11 +80,15 @@
export default {
  name: 'NameplateModal',
  components: { QrcodeVue },
  props: {
    printedRows: {
      type: Array
    }
  },
  data() {
    return {
      title: '铭牌',
      visible: false,
      model: {},
      httpUrl: ''
    }
  },
@@ -93,11 +101,37 @@
</script>

<style lang="less" scoped>
/deep/ .ant-modal {
  height: 75%;
  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 {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: #000;
  text-align: center;

  &:not(:last-child) {
    margin-bottom: 10px;
  }

  th {
    font-size: 28px;
    letter-spacing: 3px;