1.入库标识卡功能开发

小小儁爺

2026-04-22 0f2acb4f868056eb7257ff8c6daee8a56849f95a

1.入库标识卡功能开发

 src/router/index.js

@@ -510,6 +510,13 @@
        code: '0605',
        component: () => import('@/views/produce/warehouseRecord'),
        meta: { code: '0605', title: '入库记录', icon: '', keepAlive: true }
      },
      {
        path: 'warehouseEntryIdCard',
        name: 'warehouseEntryIdCard',
        code: '0606',
        component: () => import('@/views/produce/warehouseEntryIdCard'),
        meta: { code: '0606', title: '入库标识卡', icon: '', keepAlive: true }
      }

    ]

 src/views/produce/warehouseEntryIdCard.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,134 @@
<template>
  <div>

    <div id="printMe" class="main">
      <div style="text-align: center">
        <h1 style="font-size: 40px">成品入库标识卡</h1>
      </div>
      <div class="container">
        <div class="block">日期</div>
        <div class="block">  <el-input v-model="form.value1" /></div>
        <div class="block">生产单号</div>
        <div class="block"> <el-input v-model="form.value2" /></div>

        <div class="block">型号</div>
        <div class="block"> <el-input v-model="form.value3" /></div>
        <div class="block">线别</div>
        <div class="block"> <el-input v-model="form.value4" /></div>

        <div class="block">颜色</div>
        <div class="block"> <el-input v-model="form.value5" /></div>
        <div class="block" style="border-right: none">台数/托数:</div>
        <div class="block" style="border-left: none"> <el-input v-model="form.value6" /></div>
      </div>
    </div>

    <div style="display: flex;margin:100px  805px;">
      <el-button type="info" @click="reset">清 ç©º</el-button>
      <el-button v-print="printObj" type="primary">打 å°</el-button>
    </div>

  </div>
</template>

<script>
export default {
  name: 'WarehouseEntryIdCard',
  data() {
    return {

      form: {
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '',
        value6: ''
      },

      printObj: {
        id: 'printMe',
        popTitle: '打印模板',
        preview: false,
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
        closeCallback(vue) { // å…³é—­æ‰“印的回调事件（无法确定点击的是确认还是取消）
          console.log('11212', vue)
          // vue.dialogVisible = false
          // vue.dialogVisibleApprove = false
        },
        beforeOpenCallback(vue) {
          // vue.printLoading = true
          console.log('打开之前')
          console.log()
        },
        openCallback(vue) {
          // vue.printLoading = false
          console.log('执行了打印')
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    reset() {
      this.form.value1 = ''
      this.form.value2 = ''
      this.form.value3 = ''
      this.form.value4 = ''
      this.form.value5 = ''
      this.form.value6 = ''
    }
  }
}
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
  width: 800px;
  height: 600px;
  padding: 20px 20px;
}

.container {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  display: flex;
  flex-wrap: wrap;
}

.block {
  width: 25%;
  height: 33.3%;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}

.block:nth-child(odd) {
  width: 20%;
}

.block:nth-child(even) {
  width: 30%;
}

::v-deep .el-input__inner{
  border: none;
  font-weight: 700;
  font-size: 24px;
}
</style>
<style media="print">
/*@media print {*/
@page {
  size: auto;
  margin: 1mm;
}

</style>