打印优化
This commit is contained in:
		
							parent
							
								
									649226311b
								
							
						
					
					
						commit
						7758d128dc
					
				| 
						 | 
				
			
			@ -166,7 +166,7 @@
 | 
			
		|||
            </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>
 | 
			
		||||
              <tr>
 | 
			
		||||
                <th style="width: 60px; text-align: center">序号</th>
 | 
			
		||||
| 
						 | 
				
			
			@ -430,6 +430,13 @@ export default {
 | 
			
		|||
                    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({
 | 
			
		||||
                      printable: 'checkId',
 | 
			
		||||
                      type: 'html',
 | 
			
		||||
| 
						 | 
				
			
			@ -456,6 +463,13 @@ export default {
 | 
			
		|||
                  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({
 | 
			
		||||
                    printable: 'checkId',
 | 
			
		||||
                    type: 'html',
 | 
			
		||||
| 
						 | 
				
			
			@ -589,6 +603,13 @@ export default {
 | 
			
		|||
                    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({
 | 
			
		||||
                      printable: 'checkIdTwo',
 | 
			
		||||
                      type: 'html',
 | 
			
		||||
| 
						 | 
				
			
			@ -603,6 +624,13 @@ export default {
 | 
			
		|||
                  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({
 | 
			
		||||
                    printable: 'checkIdTwo',
 | 
			
		||||
                    type: 'html',
 | 
			
		||||
| 
						 | 
				
			
			@ -660,13 +688,84 @@ export default {
 | 
			
		|||
    font-size: 18px;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@media print {
 | 
			
		||||
  .no-print {
 | 
			
		||||
    display: none;
 | 
			
		||||
@media screen {
 | 
			
		||||
  body {
 | 
			
		||||
    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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -21,9 +21,9 @@
 | 
			
		|||
        </el-date-picker>
 | 
			
		||||
      </el-form-item>
 | 
			
		||||
 | 
			
		||||
      <el-form-item prop="keyword">
 | 
			
		||||
      <el-form-item prop="keyWord">
 | 
			
		||||
        <el-input
 | 
			
		||||
          v-model="queryParams.keyword"
 | 
			
		||||
          v-model="queryParams.keyWord"
 | 
			
		||||
          placeholder="请输入关键字"
 | 
			
		||||
          clearable
 | 
			
		||||
          maxlength="50"
 | 
			
		||||
| 
						 | 
				
			
			@ -269,7 +269,7 @@ export default {
 | 
			
		|||
        time: null, //申请时间
 | 
			
		||||
        name: undefined,
 | 
			
		||||
        taskStatus: "",
 | 
			
		||||
        keyword: "",
 | 
			
		||||
        keyWord: "",
 | 
			
		||||
      },
 | 
			
		||||
      form: {
 | 
			
		||||
        remark: "",
 | 
			
		||||
| 
						 | 
				
			
			@ -351,7 +351,7 @@ export default {
 | 
			
		|||
    getList() {
 | 
			
		||||
      this.loading = true;
 | 
			
		||||
      const params = {
 | 
			
		||||
        keyword: this.queryParams.keyword,
 | 
			
		||||
        keyWord: this.queryParams.keyWord,
 | 
			
		||||
        startTime: this.queryParams.time && this.queryParams.time[0],
 | 
			
		||||
        endTime: this.queryParams.time && this.queryParams.time[1],
 | 
			
		||||
        pageSize: this.queryParams.pageSize,
 | 
			
		||||
| 
						 | 
				
			
			@ -377,7 +377,7 @@ export default {
 | 
			
		|||
      start.setMonth(start.getMonth() - 1)
 | 
			
		||||
      this.queryParams.time = [this.format(start), this.format(end)]
 | 
			
		||||
      this.resetForm("queryForm");
 | 
			
		||||
      this.queryParams.keyword = "";
 | 
			
		||||
      this.queryParams.keyWord = "";
 | 
			
		||||
      this.handleQuery();
 | 
			
		||||
    },
 | 
			
		||||
    /** 通过按钮操作 */
 | 
			
		||||
| 
						 | 
				
			
			@ -569,8 +569,8 @@ export default {
 | 
			
		|||
  watch: {
 | 
			
		||||
    $route: {
 | 
			
		||||
      handler(to) {
 | 
			
		||||
        if (to.query.keyword) {
 | 
			
		||||
          this.queryParams.keyword = to.query.keyword;
 | 
			
		||||
        if (to.query.keyWord) {
 | 
			
		||||
          this.queryParams.keyWord = to.query.keyWord;
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
      deep: true,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue