打印优化
This commit is contained in:
		
							parent
							
								
									649226311b
								
							
						
					
					
						commit
						7758d128dc
					
				| 
						 | 
					@ -166,7 +166,7 @@
 | 
				
			||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
          </div>
 | 
					          </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
          <table border="1" cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse">
 | 
					          <table border="1.5" cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse">
 | 
				
			||||||
            <thead>
 | 
					            <thead>
 | 
				
			||||||
              <tr>
 | 
					              <tr>
 | 
				
			||||||
                <th style="width: 60px; text-align: center">序号</th>
 | 
					                <th style="width: 60px; text-align: center">序号</th>
 | 
				
			||||||
| 
						 | 
					@ -430,6 +430,13 @@ export default {
 | 
				
			||||||
                    this.$modal.msgSuccess('单据文件已保存到服务器')
 | 
					                    this.$modal.msgSuccess('单据文件已保存到服务器')
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                    // 上传成功后执行打印
 | 
					                    // 上传成功后执行打印
 | 
				
			||||||
 | 
					                    const images = element.querySelectorAll('img')
 | 
				
			||||||
 | 
					                    images.forEach(img => {
 | 
				
			||||||
 | 
					                      if (!img.complete || img.naturalWidth === 0) {
 | 
				
			||||||
 | 
					                        console.warn('图片加载失败,替换为透明图:', img.src)
 | 
				
			||||||
 | 
					                        img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 透明1x1
 | 
				
			||||||
 | 
					                      }
 | 
				
			||||||
 | 
					                    })
 | 
				
			||||||
                    printJS({
 | 
					                    printJS({
 | 
				
			||||||
                      printable: 'checkId',
 | 
					                      printable: 'checkId',
 | 
				
			||||||
                      type: 'html',
 | 
					                      type: 'html',
 | 
				
			||||||
| 
						 | 
					@ -456,6 +463,13 @@ export default {
 | 
				
			||||||
                  this.$modal.msgError('上传单据文件时发生错误')
 | 
					                  this.$modal.msgError('上传单据文件时发生错误')
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                  // 即使上传失败也执行打印
 | 
					                  // 即使上传失败也执行打印
 | 
				
			||||||
 | 
					                  const images = element.querySelectorAll('img')
 | 
				
			||||||
 | 
					                  images.forEach(img => {
 | 
				
			||||||
 | 
					                    if (!img.complete || img.naturalWidth === 0) {
 | 
				
			||||||
 | 
					                      console.warn('图片加载失败,替换为透明图:', img.src)
 | 
				
			||||||
 | 
					                      img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 透明1x1
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					                  })
 | 
				
			||||||
                  printJS({
 | 
					                  printJS({
 | 
				
			||||||
                    printable: 'checkId',
 | 
					                    printable: 'checkId',
 | 
				
			||||||
                    type: 'html',
 | 
					                    type: 'html',
 | 
				
			||||||
| 
						 | 
					@ -589,6 +603,13 @@ export default {
 | 
				
			||||||
                    this.$modal.msgSuccess('单据PDF文件已保存到服务器')
 | 
					                    this.$modal.msgSuccess('单据PDF文件已保存到服务器')
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                    // 上传成功后执行打印
 | 
					                    // 上传成功后执行打印
 | 
				
			||||||
 | 
					                    const images = element.querySelectorAll('img')
 | 
				
			||||||
 | 
					                    images.forEach(img => {
 | 
				
			||||||
 | 
					                      if (!img.complete || img.naturalWidth === 0) {
 | 
				
			||||||
 | 
					                        console.warn('图片加载失败,替换为透明图:', img.src)
 | 
				
			||||||
 | 
					                        img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 透明1x1
 | 
				
			||||||
 | 
					                      }
 | 
				
			||||||
 | 
					                    })
 | 
				
			||||||
                    printJS({
 | 
					                    printJS({
 | 
				
			||||||
                      printable: 'checkIdTwo',
 | 
					                      printable: 'checkIdTwo',
 | 
				
			||||||
                      type: 'html',
 | 
					                      type: 'html',
 | 
				
			||||||
| 
						 | 
					@ -603,6 +624,13 @@ export default {
 | 
				
			||||||
                  this.$modal.msgError('上传明细单据文件时发生错误')
 | 
					                  this.$modal.msgError('上传明细单据文件时发生错误')
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                  // 即使上传失败也执行打印
 | 
					                  // 即使上传失败也执行打印
 | 
				
			||||||
 | 
					                  const images = element.querySelectorAll('img')
 | 
				
			||||||
 | 
					                  images.forEach(img => {
 | 
				
			||||||
 | 
					                    if (!img.complete || img.naturalWidth === 0) {
 | 
				
			||||||
 | 
					                      console.warn('图片加载失败,替换为透明图:', img.src)
 | 
				
			||||||
 | 
					                      img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' // 透明1x1
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					                  })
 | 
				
			||||||
                  printJS({
 | 
					                  printJS({
 | 
				
			||||||
                    printable: 'checkIdTwo',
 | 
					                    printable: 'checkIdTwo',
 | 
				
			||||||
                    type: 'html',
 | 
					                    type: 'html',
 | 
				
			||||||
| 
						 | 
					@ -660,13 +688,84 @@ export default {
 | 
				
			||||||
    font-size: 18px;
 | 
					    font-size: 18px;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
@media print {
 | 
					@media screen {
 | 
				
			||||||
  .no-print {
 | 
					  body {
 | 
				
			||||||
    display: none;
 | 
					    font-family: 'Microsoft YaHei', sans-serif;
 | 
				
			||||||
 | 
					    background-color: #f5f5f5;
 | 
				
			||||||
 | 
					    padding: 20px;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  .print-content {
 | 
					  .print-container {
 | 
				
			||||||
    /* 打印内容的样式 */
 | 
					    max-width: 1000px;
 | 
				
			||||||
 | 
					    margin: 0 auto;
 | 
				
			||||||
 | 
					    background: white;
 | 
				
			||||||
 | 
					    padding: 20px;
 | 
				
			||||||
 | 
					    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .action-buttons {
 | 
				
			||||||
 | 
					    text-align: center;
 | 
				
			||||||
 | 
					    margin: 20px 0;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  button {
 | 
				
			||||||
 | 
					    padding: 10px 20px;
 | 
				
			||||||
 | 
					    margin: 0 10px;
 | 
				
			||||||
 | 
					    background: #409eff;
 | 
				
			||||||
 | 
					    color: white;
 | 
				
			||||||
 | 
					    border: none;
 | 
				
			||||||
 | 
					    border-radius: 4px;
 | 
				
			||||||
 | 
					    cursor: pointer;
 | 
				
			||||||
 | 
					    font-size: 16px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  button:hover {
 | 
				
			||||||
 | 
					    background: #66b1ff;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/* 通用样式 */
 | 
				
			||||||
 | 
					.text-center {
 | 
				
			||||||
 | 
					  text-align: center;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.text-bold {
 | 
				
			||||||
 | 
					  font-weight: bold;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.title {
 | 
				
			||||||
 | 
					  font-size: 20px;
 | 
				
			||||||
 | 
					  font-weight: bold;
 | 
				
			||||||
 | 
					  margin: 15px 0;
 | 
				
			||||||
 | 
					  text-align: center;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.info-row {
 | 
				
			||||||
 | 
					  display: flex;
 | 
				
			||||||
 | 
					  justify-content: space-between;
 | 
				
			||||||
 | 
					  margin: 10px 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.info-item {
 | 
				
			||||||
 | 
					  flex: 1;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.signature-area {
 | 
				
			||||||
 | 
					  display: flex;
 | 
				
			||||||
 | 
					  justify-content: space-between;
 | 
				
			||||||
 | 
					  margin-top: 30px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.signature-box {
 | 
				
			||||||
 | 
					  width: 30%;
 | 
				
			||||||
 | 
					  min-height: 100px;
 | 
				
			||||||
 | 
					  border-bottom: 1px solid #000;
 | 
				
			||||||
 | 
					  text-align: center;
 | 
				
			||||||
 | 
					  padding-top: 60px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.is-rotate {
 | 
				
			||||||
 | 
					  transform: rotate(90deg);
 | 
				
			||||||
 | 
					  transform-origin: center center;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
</style>
 | 
					</style>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -21,9 +21,9 @@
 | 
				
			||||||
        </el-date-picker>
 | 
					        </el-date-picker>
 | 
				
			||||||
      </el-form-item>
 | 
					      </el-form-item>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      <el-form-item prop="keyword">
 | 
					      <el-form-item prop="keyWord">
 | 
				
			||||||
        <el-input
 | 
					        <el-input
 | 
				
			||||||
          v-model="queryParams.keyword"
 | 
					          v-model="queryParams.keyWord"
 | 
				
			||||||
          placeholder="请输入关键字"
 | 
					          placeholder="请输入关键字"
 | 
				
			||||||
          clearable
 | 
					          clearable
 | 
				
			||||||
          maxlength="50"
 | 
					          maxlength="50"
 | 
				
			||||||
| 
						 | 
					@ -269,7 +269,7 @@ export default {
 | 
				
			||||||
        time: null, //申请时间
 | 
					        time: null, //申请时间
 | 
				
			||||||
        name: undefined,
 | 
					        name: undefined,
 | 
				
			||||||
        taskStatus: "",
 | 
					        taskStatus: "",
 | 
				
			||||||
        keyword: "",
 | 
					        keyWord: "",
 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
      form: {
 | 
					      form: {
 | 
				
			||||||
        remark: "",
 | 
					        remark: "",
 | 
				
			||||||
| 
						 | 
					@ -351,7 +351,7 @@ export default {
 | 
				
			||||||
    getList() {
 | 
					    getList() {
 | 
				
			||||||
      this.loading = true;
 | 
					      this.loading = true;
 | 
				
			||||||
      const params = {
 | 
					      const params = {
 | 
				
			||||||
        keyword: this.queryParams.keyword,
 | 
					        keyWord: this.queryParams.keyWord,
 | 
				
			||||||
        startTime: this.queryParams.time && this.queryParams.time[0],
 | 
					        startTime: this.queryParams.time && this.queryParams.time[0],
 | 
				
			||||||
        endTime: this.queryParams.time && this.queryParams.time[1],
 | 
					        endTime: this.queryParams.time && this.queryParams.time[1],
 | 
				
			||||||
        pageSize: this.queryParams.pageSize,
 | 
					        pageSize: this.queryParams.pageSize,
 | 
				
			||||||
| 
						 | 
					@ -377,7 +377,7 @@ export default {
 | 
				
			||||||
      start.setMonth(start.getMonth() - 1)
 | 
					      start.setMonth(start.getMonth() - 1)
 | 
				
			||||||
      this.queryParams.time = [this.format(start), this.format(end)]
 | 
					      this.queryParams.time = [this.format(start), this.format(end)]
 | 
				
			||||||
      this.resetForm("queryForm");
 | 
					      this.resetForm("queryForm");
 | 
				
			||||||
      this.queryParams.keyword = "";
 | 
					      this.queryParams.keyWord = "";
 | 
				
			||||||
      this.handleQuery();
 | 
					      this.handleQuery();
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
    /** 通过按钮操作 */
 | 
					    /** 通过按钮操作 */
 | 
				
			||||||
| 
						 | 
					@ -569,8 +569,8 @@ export default {
 | 
				
			||||||
  watch: {
 | 
					  watch: {
 | 
				
			||||||
    $route: {
 | 
					    $route: {
 | 
				
			||||||
      handler(to) {
 | 
					      handler(to) {
 | 
				
			||||||
        if (to.query.keyword) {
 | 
					        if (to.query.keyWord) {
 | 
				
			||||||
          this.queryParams.keyword = to.query.keyword;
 | 
					          this.queryParams.keyWord = to.query.keyWord;
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
      },
 | 
					      },
 | 
				
			||||||
      deep: true,
 | 
					      deep: true,
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue