shawncai/ERP
1
1
Fork 0
mirror of https://github.com/shawncai/ERP.git synced 2025-01-26 09:28:12 +08:00
Code Issues Projects Releases Packages Wiki Activity

打印问题

Browse source 
打印问题
This commit is contained in:
shawnzhang 2019-08-01 20:05:41 +08:00
parent cc9175ebff
commit 25757b73f7
4 changed files with 140 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -50,6 +50,7 @@
"mockjs": "1.0.1-beta3",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"print-js": "^1.0.61",
"screenfull": "3.3.3",
"showdown": "1.8.6",
"simplemde": "1.11.2",

4
src/main.js
View file

@ -21,7 +21,7 @@ import './icons' // icon
import './errorLog' // error log
import './permission' // permission control
import './mock' // simulation data
import Print from 'vue-print-nb'
// import Print from 'vue-print-nb'
import * as filters from './filters' // global filters
Vue.use(Element, {
@ -29,7 +29,7 @@ Vue.use(Element, {
i18n: (key, value) => i18n.t(key, value)
})
Vue.use(Print)
// Vue.use(Print)
Vue.use(VueElementExtends)

29
src/views/SaleOut/components/DetailList.vue
View file

@ -4,7 +4,7 @@
<!--基本信息-->
<el-card class="box-card" style="margin-top: 63px" shadow="never">
<h2 ref="geren" class="form-name" style="font-size: 16px;color: #606266;margin-top: -5px;">基本信息</h2>
<button v-print="'#printTest'" class="print" style="font-size: 13px;background: white;">打印</button>
<button style="font-size: 13px;background: white;" @click="printdata">打印</button>
<div class="container" style="margin-top: 37px">
<el-form :model="personalForm" :inline="true" status-icon class="demo-ruleForm" label-width="130px">
<el-row>
@ -389,6 +389,7 @@
<script>
import { productlist } from '@/api/public'
import printJS from 'print-js'
export default {
filters: {
sourceTypeFilter(status) {
@ -506,6 +507,32 @@ export default {
}
},
methods: {
printdata() {
const arr = [
{
name: '小明',
sex: '男'
},
{
name: '小红',
sex: '女'
}
]
printJS({
printable: arr,
type: 'json',
properties: [
{ field: 'name', displayName: '姓名', columnSize: `50%` },
{ field: 'sex', displayName: '性别', columnSize: `50%` }
],
header: `<p class="custom-p"> 名单 </p>`,
style: '.custom-p { padding:5px 0; font-size:12px; }',
gridHeaderStyle: 'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:center;',
gridStyle: 'font-size:12px; padding:3px; border:1px solid; text-align:left;',
repeatTableHeader: true
})
},
// 计划金额
planMoney(row) {
row.planMoney = row.basicPrice * row.planQuantity

110
src/views/StockOrder/components/DetailList.vue
View file

@ -4,7 +4,7 @@
<!--基本信息-->
<el-card class="box-card" style="margin-top: 63px" shadow="never">
<h2 ref="geren" class="form-name" style="font-size: 16px;color: #606266;margin-top: -5px;">基本信息</h2>
<button v-print="'#printTest'" style="font-size: 10px;">打印</button>
<button style="font-size: 10px;" @click="printdata">打印</button>
<button style="font-size: 10px;margin-left: 10px" @click="handleMyReceipt2()">复制单据</button>
<div class="container" style="margin-top: 37px">
<el-form :model="personalForm" :inline="true" status-icon class="demo-ruleForm" label-width="100px" style="margin-left: 30px;">
@ -283,6 +283,7 @@
<script>
import { searchstockArrival } from '@/api/StockArrival'
import printJS from 'print-js'
export default {
filters: {
isVatFilter(status) {
@ -383,6 +384,113 @@ export default {
}
},
methods: {
cutnull(data) {
for (const x in data) {
if (data[x] === null) { // 如果是null 把直接内容转为 ''
data[x] = ''
} else {
if (Array.isArray(data[x])) { // 是数组遍历数组 递归继续处理
data[x] = data[x].map(z => {
return this.cutnull(z)
})
}
if (typeof (data[x]) === 'object') { // 是json 递归继续处理
data[x] = this.cutnull(data[x])
}
}
}
return data
},
printdata() {
const arr = this.cutnull(this.list2)
for (const i in arr) {
arr[i].step = Number(i) + 1
}
const handleperson = this.reviewList.map(item => {
if (item.actualStepHandler) {
return item.actualStepHandler
}
}).join(',')
console.log(handleperson)
printJS({
printable: arr,
type: 'json',
properties: [
{ field: 'step', displayName: '行号', columnSize: `100px` },
{ field: 'productCode', displayName: '物料代码', columnSize: `100px` },
{ field: 'productName', displayName: '物料名称', columnSize: `100px` },
{ field: 'productType', displayName: '规格型号', columnSize: `100px` },
{ field: 'unit', displayName: '单位', columnSize: `100px` },
{ field: 'stockQuantity', displayName: '数量', columnSize: `100px` },
{ field: 'includeTaxPrice', displayName: '单价', columnSize: `100px` },
{ field: 'includeTaxMoney', displayName: '金额', columnSize: `100px` },
{ field: 'deliveryDate', displayName: '交货日期', columnSize: `100px` },
{ field: 'remarks', displayName: '备注', columnSize: `100px` }
],
header: `<div class="pringtitle">
<div class="custom-p"> 江苏新视窗国际贸易有限公司 </div>
<br>
<div class="ordername">采购订单</div>
<br>
<div class="line1"></div>
<div class="line2"></div>
<div class="supplier">
<div class="item">
<div class="itemname">供应商：</div>
<div class="itemcontent">${this.personalForm.supplierName}</div>
</div>
<div class="item">
<div class="itemname">日期：</div>
<div class="itemcontent">${this.personalForm.orderDate}</div>
</div>
<div class="item">
<div class="itemname">编号：</div>
<div class="itemcontent">${this.personalForm.orderNumber}</div>
</div>
</div>
</div>`,
bottom: `<div>
<div class="allmoney" style="display: flex;justify-content: space-around;width: 99%;height: 40px;align-items: center;border:1px solid;border-top: none;padding-right: 1%">
<div class="allmoneyname" style="margin-right: 10%">合计</div>
<div class="allmoneynum" style="width: 10%;border-left: 1px solid; border-right: 1px solid;height: 40px;display: flex;align-items: center;justify-content: center;">${this.personalForm.allIncludeTaxMoney}</div>
</div>
<div class="printbottom" style="display: flex;align-items: center;justify-content: center;width: 100%;margin-top: 20px">
<div class="bottomitem" style="width: 25%;display: flex;align-items: center;justify-content: center;flex-wrap: nowrap">
<div class="ceshi">审核：</div>
<div class="bottomname" >${handleperson}</div>
</div>
<div class="bottomitem" style="width: 25%;display: flex;align-items: center;justify-content: center;flex-wrap: nowrap">
<div class="ceshi">部门：</div>
<div class="bottomname">${this.personalForm.deptName}</div>
</div>
<div class="bottomitem" style="width: 25%;display: flex;align-items: center;justify-content: center;flex-wrap: nowrap">
<div class="ceshi">业务员：</div>
<div class="bottomname">${this.personalForm.stockPersonName}</div>
</div>
<div class="bottomitem" style="width: 25%;display: flex;align-items: center;justify-content: center;flex-wrap: nowrap">
<div class="ceshi">制单：</div>
<div class="bottomname">${this.personalForm.createPersonName}</div>
</div>
</div>
</div>`,
bottomStyle: '.printbottom: { display: flex;margin-top: 20px}',
style: '.custom-p {font-size:20px;text-align: center; }' +
' .ordername {text-align: center; font-size:25px;letter-spacing:15px}' +
'.pringtitle { line-height: 20px; margin-bottom: 10px }' +
'.line1 { width: 200px; border: 1px solid #000; margin: 0 auto }' +
'.line2 {width: 200px; border: 2px dashed #000; margin: 3px auto }' +
'.supplier {display: flex;justify-content: center; align-items: center;margin-top: 10px}' +
'.item { width: 33%; justify-content: center; align-items: center; display: flex}' +
'.item2 { width: 50%; justify-content: center; align-items: center; display: flex}' +
'.itemname2 { width: 20% }' +
'.itemcontent2 {width: 80%}' +
'.itemname { width: 40% }' +
'.itemcontent {width: 80%}',
gridHeaderStyle: 'font-size:12px; padding:3px; border:1px solid; color: #000; text-align:center;',
gridStyle: 'font-size:12px; padding:3px; border:1px solid; text-align:center;',
repeatTableHeader: true
})
},
handleMyReceipt2() {
console.log(this.detaildata)
this.$store.dispatch('getempcontract', this.detaildata)