hitch-sb-antd/src/views/sb/info/modules/PrintInSbInfoBatch.vue

<template>
  <div class="print-content" v-show="visible">
    <a-row :gutter="48" slot="extra">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right">
          <a-button type="dashed" @click="handleEdit()">保存参数</a-button>
          <a-button type="primary" style="margin-left: 8px" v-print="'#print-container-batch'" :disabled="disabled">打印</a-button>
          <a-button style="margin-left: 8px" @click="handleCancel()">返回列表</a-button>
        </span>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="4">
        标签纸宽度（黑色背景）
      </a-col>
      <a-col :span="12">
        <a-slider v-model="labelWidth" :min="1" :max="1000" />
      </a-col>
      <a-col :span="2">
        <a-input-number v-model="labelWidth" style="marginLeft: 8px" />
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="4">
        标签表格宽度
      </a-col>
      <a-col :span="12">
        <a-slider v-model="labelContentWidth" :min="1" :max="1000" />
      </a-col>
      <a-col :span="2">
        <a-input-number v-model="labelContentWidth" suffix="px" style="marginLeft: 8px" />
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="4">
        标签表格高度
      </a-col>
      <a-col :span="12">
        <a-slider v-model="labelContentHeight" :min="1" :max="1000" />
      </a-col>
      <a-col :span="2">
        <a-input-number v-model="labelContentHeight" suffix="px" style="marginLeft: 8px" />
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="4">
        二维码宽度
      </a-col>
      <a-col :span="12">
        <a-slider v-model="imgWidth" :min="1" :max="1000" />
      </a-col>
      <a-col :span="2">
        <a-input-number v-model="imgWidth" suffix="px" style="marginLeft: 8px" />
      </a-col>
    </a-row>
    <div class="container" :style="labelWidthProgress" id="print-container-batch">
      <table class="gridtable list" :style="labelContentWidthProgress" :id="'printDiv' + record.id" v-for="record in sbInfoList" :key="record.id">
        <tbody>
          <tr>
            <td class="text-center">名称</td>
            <td class="text-center">{{ record.name }}</td>
            <td rowspan="4" style="padding: 0 !important;" class="text-center">
              <img :style="imageProgress" :src="record.qrCode"/> <br />
              {{ record.producerId }}
            </td>
          </tr>
          <tr>
            <td class="text-center">位号</td>
            <td class="text-center">{{ record.positionNo }}</td>
          </tr>
          <tr>
            <td class="text-center">等级</td>
            <td class="text-center">{{ BaseTool.Object.getField(levelMap,record.level) }}</td>
          </tr>
          <tr>
            <td class="text-center" width="17%">资产编号</td>
            <td class="text-center">{{ record.financingNo }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/util'
import { configData, updateSysConfigBatch } from '@/api/upms/config'

export default {
  name: 'PrintInSbInfoBatch',
  components: { },
  data () {
    return {
      visible: false,
      disabled: true,
      sbInfoList: [],
      count: 0,
      levelMap: {},
      user: this.$store.getters.userInfo,
      labelWidth: 200,
      labelContentWidth: 100,
      labelContentHeight: 100,
      imgWidth: 50,
      configMap: {}
      // 下拉框map
    }
  },
  computed: {
    labelWidthProgress () {
      const style = {}
      style.width = this.labelWidth + 'px'
      style.backgroundColor = 'black'
      style.textAlign = 'center'
      return style
    },
    labelContentWidthProgress () {
      const style = {}
      style.width = this.labelContentWidth + 'px'
      style.height = this.labelContentHeight + 'px'
      style.backgroundColor = 'white'
      style.textAlign = 'center'
      style.margin = '4px auto'
      return style
    },
    imageProgress () {
      const style = {}
      style.width = this.imgWidth + 'px'
      return style
    }
  },
  props: {},
  created () {
    // 下拉框map
    this.moneyTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.MONEY_TYPE)
    this.levelMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SBINFO_LEVEL)
    configData().then(res => {
      this.configMap = res.data['config:open:value']
      this.labelWidth = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_WIDTH])
      this.labelContentWidth = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_CONTENT_WIDTH])
      this.labelContentHeight = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_CONTENT_HEIGHT])
      this.imgWidth = parseInt(this.configMap[this.DictCache.TYPE.SB_QR_CODE_LABEL_IMG_WIDTH])
    })
  },
  methods: {
    base (sbInfoList) {
      this.disabled = true
      this.visible = true
      this.sbInfoList = sbInfoList
      this.disabled = false
    },
    formatDateEn (value) {
      return formatDate(new Date(value), 'yyyy-MM-dd')
    },
    formatDateCh (value) {
      return formatDate(new Date(value), 'yyyy年MM月dd日')
    },
    handleCancel (values) {
      this.visible = false
      this.$emit('ok', values)
    },
    print () {
      this.count = this.count + 1
    },
    handleEdit () {
      const parameter = []
      parameter.push({ code: this.DictCache.TYPE.SB_QR_CODE_LABEL_WIDTH, content: this.labelWidth })
      parameter.push({ code: this.DictCache.TYPE.SB_QR_CODE_LABEL_CONTENT_WIDTH, content: this.labelContentWidth })
      parameter.push({ code: this.DictCache.TYPE.SB_QR_CODE_LABEL_CONTENT_HEIGHT, content: this.labelContentHeight })
      parameter.push({ code: this.DictCache.TYPE.SB_QR_CODE_LABEL_IMG_WIDTH, content: this.imgWidth })
      updateSysConfigBatch(parameter).then(res => {
        this.$message.info('更新成功, 退出，重新登录后全局生效')
      })
    }

  }
}
</script>
<style media=print>
/* 应用这个样式的在打印时隐藏 */
.noPrint {
  display: none;
}

/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
.page {
  page-break-after: always;
}
</style>
<style>
.print-content{
  margin: 0 auto;
  width: 1000px;
  background-color: #fff;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

table.gridtable {
  width: 100%;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
  page-break-after: always;
}

table.gridtable th {
  border-width: 1px;
  padding: 8px 0px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}

table.gridtable td {
  border-width: 1px;
  padding: 0;
  border-style: solid;
  color: black;
  font-weight: bold;
  border-color: #666666;
  background-color: #ffffff;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.container:before,
.container:after,
.row:before, .row:after {
  display: table;
  content: " ";
}

.container:after, .row:after {
  clear: both;
}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  float: left;
}

.col-md-12 {
  width: 100%;
}

.col-md-11 {
  width: 91.66666667%;
}

.col-md-10 {
  width: 83.33333333%;
}

.col-md-9 {
  width: 75%;
}

.col-md-8 {
  width: 66.66666667%;
}

.col-md-7 {
  width: 58.33333333%;
}

.col-md-6 {
  width: 50%;
}

.col-md-5 {
  width: 41.66666667%;
}

.col-md-4 {
  width: 33.33333333%;
}

.col-md-3 {
  width: 25%;
}

.col-md-2 {
  width: 16.66666667%;
}

.col-md-1 {
  width: 8.33333333%;
}

 .node-line{
   position: absolute;
   width: 60px;
   height: 10px;
   left:20%;
 }
</style>