sd-vue/src/views/shengde/productionSystem/productionOperation/batching/already.vue

<template>
  <el-card>
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="订单号" prop="contractCode">
        <el-input placeholder="请输入" v-model="queryParams.contractCode" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="万里牛单号" prop="tradeNo">
        <el-input placeholder="请输入" v-model="queryParams.tradeNo" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="BOM品号" prop="specCode">
        <el-input placeholder="请输入" v-model="queryParams.specCode" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="BOM品名" prop="nameChinese">
        <el-input placeholder="请输入" v-model="queryParams.nameChinese" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="事业部" prop="subsidiaryId">
        <el-select v-model="queryParams.subsidiaryId" placeholder="请选择事业部" size="small" style="width: 100%" @change="handleQuery">
          <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="handleQuery" class="searchBtn">搜索</el-button>
        <el-button size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableList"
      size="small"
      :row-style="{ height: '35px' }"
      :cell-style="{ padding: '0' }"
      v-loading="loading"
      header-row-class-name="tableHeader"
      :cell-class-name="cellClassName"
    >
      <el-table-column label="设计图" prop="workCode" align="left" width="60">
        <template slot-scope="scope">
          <div v-if="scope.row.imgPath && scope.row.dataResource === 1">
            <img
              v-if="!scope.row.imgPath.includes('https')"
              class="img"
              v-lazy="pathPrefix + scope.row.imgPath"
              @click="openFile(pathPrefix + scope.row.imgPath)"
            />
            <img v-else class="img" v-lazy="scope.row.imgPath" @click="openFile(scope.row.imgPath)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="事业部" prop="subsidiaryName" align="left" width="120" />
      <el-table-column label="BOM品号" prop="specCode" align="left" width="140">
        <template slot-scope="scope">
          <div>
            <span
              style="border-radius: 50%; height: 20px; width: 20px; display: inline-block; background: #f30303; vertical-align: top"
              v-if="scope.row.type === 1"
            >
              <span style="display: block; color: #ffffff; height: 20px; line-height: 20px; text-align: center">补</span>
            </span>
            <span style="cursor: pointer; padding-left: 8px" :style="{ color: scope.row.type === 1 ? 'red' : '#409eff' }">{{ scope.row.specCode }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="BOM品名" prop="nameChinese" align="left" min-width="300" />
      <el-table-column label="订单号" prop="contractCode" align="left" width="150" />
      <el-table-column label="万里牛单号" prop="tradeNo" width="140" />
      <el-table-column label="件数" width="80">
        <template slot-scope="scope">
          <span>{{ Number(scope.row.quantity) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投产时间" prop="putTime" align="center" width="140" />
      <el-table-column label="SKU品名" prop="productColorName" width="280" />
      <el-table-column label="操作" align="center" fixed="right" width="100">
        <template slot-scope="scope">
          <div class="miniBtn">
            <el-button type="text" @click="printCode(scope.row)" v-if="scope.row.dataResource === 1" v-db-click>打印生产面单</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <el-dialog :visible.sync="dialogVisible" title="打印生产面单" width="40%" append-to-body>
      <el-form label-width="100px" :model="form" ref="form" :rules="rules">
        <el-form-item label="打印张数：" prop="num">
          <el-input v-model="form.num" placeholder="请输入"> </el-input>
        </el-form-item>
      </el-form>
      <el-row style="text-align: center; margin-top: 30px">
        <el-button size="small" type="primary" @click="handleSubmit">打 印</el-button>
        <el-button size="small" @click="handleCancel">取 消</el-button>
      </el-row>
    </el-dialog>

    <div style="display: none">
      <div style="width: 250px" id="printMiniTwo">
        <div v-for="(item, index) in QRcodeList" :key="index">
          <div style="height: 442px; padding-top: 2px; overflow: hidden; position: relative">
            <div style="border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: center" v-if="item.tradeNo">
              <barcode :value="item.tradeNo" :height="50" :width="1.6" />
            </div>
            <div style="border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: center" v-else>
              <barcode :value="item.contractCode" :height="50" :width="1.6" />
            </div>
            <div style="display: flex; align-items: center; justify-content: center">
              <div style="width: 150px; height: 150px; margin-top: 8px" :id="'print' + index" :ref="'print' + index">
                <img src="" alt="" style="vertical-align: middle; height: 100%; width: 100%" />
              </div>
            </div>
            <div style="text-align: center; font-size: 18px; font-weight: 700; padding: 4px 0; border-bottom: 1px solid #000">{{ item.dataForTime }}</div>
            <div style="word-break: break-all; padding: 2px">SKU品号：{{ item.productColorCode }}</div>
            <div style="word-break: break-all; padding: 2px">SKU品名：{{ item.productColorName }}</div>
            <div style="word-break: break-all; padding: 2px">BOM品号：{{ item.specCode }}</div>
            <div style="word-break: break-all; padding: 2px">BOM品名：{{ item.nameChinese }}</div>
            <div v-if="item.contractDataResource === 1" class="one">
              <div class="two">
                <div class="three">万里牛</div>
              </div>
            </div>
          </div>
          <div style="page-break-after: always"></div>
        </div>
      </div>
      <el-button type="primary" size="mini" v-print="'#printMiniTwo'" id="printBtnMiniTwo"></el-button>
    </div>
  </el-card>
</template>

<script>
import QRCode from 'qrcodejs2'
import Print from 'vue-print-nb'
import Vue from 'vue'
Vue.use(Print)

import { mapGetters } from 'vuex'
import * as API from '@/api/shengde/productionSystem/productionOperation/batching/index'
import { getUid } from '@/util/saas.js'
import { getSubsidiaryList } from '@/api/shengde/subsidiary/bill/bill'

export default {
  name: 'already',
  components: {},
  data() {
    return {
      pathPrefix: process.env.VUE_APP_IMG_URL,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        contractCode: '',
        tradeNo: '',
        specCode: '',
        nameChinese: '',
        // beginTime: '',
        // endTime: '',
        status: '1',
        subsidiaryId: '',
      },
      tableList: [],
      total: null,
      dialogVisible: false,
      form: {
        num: '',
      },
      rules: {
        num: [{ required: true, message: '请输入打印张数', trigger: 'blur' }],
      },
      QRcodeList: [],
      qrList: [],
      companyList: [],
    }
  },
  computed: mapGetters(['dictData']),
  created() {},
  mounted() {
    getSubsidiaryList({ pageNum: 1, pageSize: 9999 }).then((res) => {
      this.companyList = res.data.data.records
    })
  },
  methods: {
    pageInit() {
      this.getList()
    },
    getList() {
      this.loading = true
      API.list(this.queryParams).then(
        (res) => {
          this.tableList = res.data.data.records
          this.total = res.data.data.total
          this.loading = false
        },
        (err) => {
          console.log('list:' + err)
          this.loading = false
        }
      )
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    openFile(path) {
      window.open(path)
    },
    printCode(row) {
      this.rowData = row
      this.dialogVisible = true
    },
    handleCancel() {
      this.dialogVisible = false
      this.form = {
        num: '',
      }
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let arr = []
          for (let i = 0; i < this.form.num; i++) {
            let obj = { ...this.rowData, sort: i, uid: getUid() }
            arr.push(obj)
          }
          console.log(arr)
          this.QRcodeList = arr
          this.$nextTick(() => {
            for (let i = 0; i < this.QRcodeList.length; i++) {
              let element = this.QRcodeList[i]
              this.$refs['print' + i][0].innerHTML = '' //清除二维码方法一
              let text = element.contractProductId + '-' + element.uid
              new QRCode(this.$refs['print' + i][0], {
                text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
                width: 150,
                height: 150,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H,
              })
            }
          })
          const btn = document.getElementById('printBtnMiniTwo')
          btn.click()
          this.handleCancel()
        } else {
          return false
        }
      })
    },
    cellClassName(val) {
      if (val && val.row && val.row.dataResource === 0) {
        return 'colorDim'
      }
    },
  },
}
</script>
<style>
@media print {
  @page {
    size: auto;
    margin: 5mm;
  }
  body,
  html {
    height: auto !important;
  }
}
</style>
<style lang="scss" scoped>
::v-deep {
  .vue-barcode-element {
    text {
      font-size: 20px !important;
      font-weight: 700;
    }
  }
  .el-input__inner {
    height: 28px;
    line-height: 28px;
  }
  .el-button {
    border-radius: 0;
  }
  .miniBtn .el-button {
    padding: 0px !important;
  }
  .tableHeader th {
    background-color: #edf0f5;
    height: 35px;
    padding: 0;
  }
  .colorDim {
    color: #909399;
  }
}
.searchBtn {
  background: #20b2aa;
  color: #fff;
  border: 1px solid #20b2aa;
}
.img {
  margin-top: 3px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  object-fit: contain;
  vertical-align: middle;
}
.one {
  position: absolute;
  right: 10px;
  top: 320px;
  width: 70px;
  height: 70px;
  z-index: 99;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #000;
  .two {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
    border: 1px dashed #000;
    .three {
      rotate: -45deg;
      font-size: 14px;
    }
  }
}
.codeList {
  width: 340px;
  .item {
    margin-top: 15px;
    border: 1px solid #000;
    height: 510px;
    overflow: hidden;
    position: relative;
    .top {
      .QRbox {
        border-bottom: 1px solid #000;
        padding: 4px 8px;
        display: flex;
        height: 270px;
        .img {
          width: 200px;
          height: 200px;
          img {
            vertical-align: middle;
            width: 100%;
            height: 100%;
          }
        }
      }

      .productInfo {
        display: flex;
        flex-direction: column;
        padding: 5px 10px;
        .title1 {
          margin-bottom: 5px;
          font-size: 12px;
          .val {
            font-size: 12px;
            font-weight: 700;
          }
        }
      }
      .address {
        padding: 5px 10px;
        display: flex;
        align-items: center;
        border-top: 1px dashed #000;
      }
    }
    .seal {
      position: absolute;
      right: 10px;
      top: 320px;
      width: 70px;
      height: 70px;
      z-index: 99;
      line-height: 80px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid #000;
      .wln {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: 50%;
        border: 1px dashed #000;
        .aa {
          rotate: -45deg;
          font-size: 14px;
        }
      }
    }
    .two-sided {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #000;
      position: absolute;
      right: 20px;
      top: 400px;
      .wln {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 30px;
        text-align: center;
        border: 1px dashed #000;
      }
    }
  }
}
</style>