wuye / webui

<template>
  <div class="print-equipment-account-label-container">
    <el-card>
      <div slot="header" class="flex justify-between">
        <span>{{ $t('printEquipmentAccount.machineId') }}：{{ printEquipmentAccountInfo.machineId }}</span>

        <span>{{ $t('printEquipmentAccount.printTime') }}：{{ nowTime }}</span>
      </div>

      <el-table :data="[printEquipmentAccountInfo]" border style="width: 100%; margin-top: 20px; margin-bottom: 0;">
        <el-table-column prop="header" label="" colspan="6" align="center">
          <template>
            <span style="font-size: 40px;">{{ $t('printEquipmentAccount.equipmentLabel') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="" colspan="2">
          <template slot-scope="scope">
            <el-row :gutter="20" style="font-size: 28px;">
              <el-col :span="12">
                <div>{{ $t('printEquipmentAccount.project') }}：{{ scope.row.yqName }}</div>
              </el-col>
              <el-col :span="12">
                <div>{{ $t('printEquipmentAccount.locationName') }}：{{ scope.row.locationDetail }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="font-size: 28px;">
              <el-col :span="12">
                <div>{{ $t('printEquipmentAccount.machineName') }}：{{ scope.row.machineName }}</div>
              </el-col>
              <el-col :span="12">
                <div>{{ $t('printEquipmentAccount.importanceLevel') }}：{{ scope.row.levelName }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="font-size: 28px;">
              <el-col :span="12">
                <div>{{ $t('printEquipmentAccount.systemName') }}：{{ scope.row.sysName }}</div>
              </el-col>
              <el-col :span="12">
                <div>{{ $t('printEquipmentAccount.enableDate') }}：{{ scope.row.firstEnableTime }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="font-size: 28px;">
              <el-col :span="12">
                <div>{{ $t('printEquipmentAccount.machineBrand') }}：{{ scope.row.brand }}</div>
              </el-col>
              <el-col :span="12" rowspan="4">
                <div id="qrcode" style="width:200px; height:200px;"></div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="font-size: 28px;">
              <el-col :span="12">
                <div>{{ $t('printEquipmentAccount.specificationModel') }}：{{ scope.row.model }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="font-size: 28px;">
              <el-col :span="12">
                <div>{{ $t('printEquipmentAccount.code') }}：{{ scope.row.machineCode }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="font-size: 28px;">
              <el-col :span="12">
                <div>{{ $t('printEquipmentAccount.responsiblePerson') }}：{{ scope.row.chargeUseName }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="font-size: 28px;">
              <el-col :span="24" align="center">
                <div>设备标志 严禁损坏</div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <div id="print-btn" style="margin-top: 20px;">
        <el-button type="primary" class="float-right" @click="_printPurchaseApplyDiv">
          <i class="el-icon-check"></i>&nbsp;{{ $t('common.print') }}
        </el-button>
        <el-button type="warning" class="float-right" style="margin-right: 20px;" @click="_closePage">
          {{ $t('common.cancel') }}
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getEquipmentAccountList } from '@/api/resource/printEquipmentAccountLabelApi'
import QRCode from 'qrcodejs2'
import { getCommunityId } from '@/api/community/communityApi'

export default {
  name: 'PrintEquipmentAccountLabelList',
  data() {
    return {
      printEquipmentAccountInfo: {
        machineId: '',
        machineName: '',
        machineCode: '',
        brand: '',
        model: '',
        locationDetail: '',
        firstEnableTime: '',
        warrantyDeadline: '',
        usefulLife: '',
        importanceLevel: '',
        levelName: '',
        state: '',
        purchasePrice: '',
        netWorth: '',
        useOrgId: '',
        useOrgName: '',
        useUserId: '',
        useUserName: '',
        useUseTel: '',
        chargeOrgId: '',
        chargeOrgName: '',
        chargeOrgTel: '',
        chargeUseId: '',
        chargeUseName: '',
        remark: '',
        yqName: '',
        url: ''
      },
      printFlag: '0',
      nowTime: '',
      communityId: ''
    }
  },
  created() {
    this.communityId = getCommunityId()
    this._initPrintRepairDetailDateInfo()
    const myDate = new Date()
    this.nowTime = myDate.toLocaleDateString()
    this.printEquipmentAccountInfo.yqName = this.$store.getters.currentCommunity.name
  },
  methods: {
    async _initPrintRepairDetailDateInfo() {
      const machineId = this.$route.query.machineId
      try {
        const res = await getEquipmentAccountList({
          page: 1,
          row: 1,
          machineId: machineId,
          communityId: this.communityId
        })
        const data = res.data[0]
        Object.assign(this.printEquipmentAccountInfo, data)

        document.getElementById('qrcode').innerHTML = ''
        new QRCode(document.getElementById('qrcode'), {
          text: this.printEquipmentAccountInfo.url,
          width: 200,
          height: 200,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      } catch (error) {
        console.error('请求失败:', error)
      }
    },
    _printPurchaseApplyDiv() {
      this.printFlag = '1'
      document.getElementById('print-btn').style.display = 'none'
      window.print()
      window.opener = null
      window.close()
    },
    _closePage() {
      window.opener = null
      window.close()
    }
  }
}
</script>

<style scoped>
.print-equipment-account-label-container {
  padding: 20px;
}

.float-right {
  float: right;
}

.margin-top {
  margin-top: 20px;
}

@media print {
  #print-btn {
    display: none !important;
  }
}
</style>