meswork/JY1.0
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

发货管理

Browse Source
This commit is contained in:
caoxinyu
2018-12-22 09:57:23 +08:00
parent e86762e3ae
commit 504c61c842
6 changed files with 206 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -17,8 +17,10 @@
"echarts": "^4.2.0-rc.2",
"element-ui": "2.4.6",
"file-saver": "^1.3.8",
"html2canvas": "^1.0.0-alpha.12",
"jquery": "^3.3.1",
"js-cookie": "2.2.0",
"jspdf": "^1.4.1",
"node-sass": "^4.10.0",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",

4
src/main.js
View File

@@ -16,8 +16,10 @@ import '@/permission' // permission control
import curd from '@/utils/curd'
import time from 'time-formater'
Vue.use(curd)
import htmlToPdf from '@/vendor/htmlToPdf'
Vue.use(curd)
Vue.use(htmlToPdf)
Vue.use(ElementUI)
// 处理时间字符串格式全局过滤器 '2018/1/23 00:00:00' to '2018-01-23'
Vue.filter('formatTime', function(value) {

113
src/vendor/htmlToPdf.js vendored
View File

@@ -1,78 +1,35 @@
// // /* eslint-disable */
// // import html2Canvas from 'html2canvas'
// // import JsPDF from 'jspdf'
// // export default{
// // install (Vue, options) {
// // Vue.prototype.getPdf = function (id) {
// // let title = this.htmlTitle
// // html2Canvas(document.querySelector(`#${id}`), {
// // allowTaint: true
// // }).then(function (canvas) {
// // let contentWidth = canvas.width
// // let contentHeight = canvas.height
// // let pageHeight = contentWidth / 592.28 * 841.89 //一页pdf显示html页面生成的canvas高度;
// // let leftHeight = contentHeight //未生成pdf的html页面高度
// // let position = 0 //页面偏移
// // let imgWidth = 595.28 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
// // let imgHeight = 592.28 / contentWidth * contentHeight
// // let pageData = canvas.toDataURL('image/jpeg', 1.0)
// // window.print(pageData)
// // let PDF = new JsPDF('', 'pt', 'a4')
// // if (leftHeight < pageHeight) { //当内容未超过pdf一页显示的范围，无需分页
// // PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
// // } else {
// // while (leftHeight > 0) {
// // PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
// // leftHeight -= pageHeight
// // position -= 841.89
// // if (leftHeight > 0) { //避免添加空白页
// // PDF.addPage()
// // }
// // }
// // }
// // PDF.save(title + '.pdf')
// // }
// // )
// // }
// // }
// // }
//
// /* eslint-disable */
// import html2Canvas from 'html2canvas'
// import JsPDF from 'jspdf'
// export default{
// install (Vue, options) {
// Vue.prototype.getPdf = function (id) {
// let title = this.htmlTitle
// html2Canvas(document.querySelector(`#${id}`), {
// allowTaint: true
// }).then(function (canvas) {
// let contentWidth = canvas.width
// let contentHeight = canvas.height
// let pageHeight = contentWidth / 592.28 * 841.89 //一页pdf显示html页面生成的canvas高度;
// let leftHeight = contentHeight //未生成pdf的html页面高度
// let position = 0 //页面偏移
// let imgWidth = 595.28 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
// let imgHeight = 592.28 / contentWidth * contentHeight
// let pageData = canvas.toDataURL('image/jpeg', 1.0)
// window.print(pageData)
// let PDF = new JsPDF('', 'pt', 'a4')
// if (leftHeight < pageHeight) { //当内容未超过pdf一页显示的范围，无需分页
// PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
// } else {
// while (leftHeight > 0) {
// PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
// leftHeight -= pageHeight
// position -= 841.89
// if (leftHeight > 0) { //避免添加空白页
// PDF.addPage()
// }
// }
// }
// PDF.save(title + '.pdf')
// }
// )
// }
// }
// }
//
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
Vue.prototype.getPdf = function(id, title) {
html2Canvas(document.querySelector(`#${id}`), {
allowTaint: true
}).then(function(canvas) {
const contentWidth = canvas.width
const contentHeight = canvas.height
const pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
const imgWidth = 595.28
const imgHeight = 592.28 / contentWidth * contentHeight
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const PDF = new JsPDF('', 'pt', 'a4')
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
}
)
}
}
}

2
src/views/MarketingCenter/BidBond/index.vue
View File

@@ -408,7 +408,7 @@
<script>
import elInput from 'element-ui/packages/input'
import { initType, selectBidBond, getTree, tree, getTablePeople, TakeBack, ComplianceGold, addBidBond, editBidBond, delBidBond, winningBid, executionProgressID, intProject, submitPerformanceBond } from '@/api/MarketingCenter/BidBond'
import { initType, selectBidBond, getTree, tree, getTablePeople, TakeBack, addBidBond, editBidBond, delBidBond, winningBid, executionProgressID, intProject, submitPerformanceBond } from '@/api/MarketingCenter/BidBond'
export default {
components: {
elInput

38
src/views/MarketingCenter/DeliveryManagement/htmlToPdf.js Normal file
View File

@@ -0,0 +1,38 @@
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
Vue.prototype.getPdf = function() {
console.log(document)
var title = '12' // this.htmlTitle
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true
}).then(function(canvas) {
const contentWidth = canvas.width
const contentHeight = canvas.height
const pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
const imgWidth = 595.28
const imgHeight = 592.28 / contentWidth * contentHeight
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const PDF = new JsPDF('', 'pt', 'a4')
console.log(PDF, 99)
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
if (leftHeight > 0) {
PDF.addPage()
}
}
}
PDF.save(title + '.pdf')
}
)
}
}
}

209
src/views/MarketingCenter/DeliveryManagement/index.vue
View File

@@ -87,7 +87,7 @@
size="mini"
type="warning"
icon="el-icon-edit"
@click.stop="exportTable()">导出</el-button>
@click.stop="exportTable(scope.row)">导出</el-button>
<el-button
size="mini"
type="primary"
@@ -508,7 +508,7 @@
<el-input v-model="form2.名称" size="small" style="width: 200px" disabled/>
</el-form-item>
<el-form-item label="数量" prop="数量" label-width="110px">
<el-input-number v-model="form2.数量" :min="0" :max="maxNum" :precision="2" :step="1" controls-position="right" size="small" style="width: 200px" placeholder="请输入本次付款金额"/>
<el-input-number v-model="form2.数量" :min="0" :max="maxNum" controls-position="right" size="small" style="width: 200px" placeholder="请输入本次付款金额"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@@ -531,69 +531,75 @@
<el-button type="primary" @click="submitRremove('form3')">确 定</el-button>
</div>
</el-dialog>
<el-card>
<div style="width: 100%">
<table id="table" class="tg" style="table-layout: fixed; width: 1228px;margin: auto;left: 50%;right: 50%">
<colgroup>
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
</colgroup>
<tr>
<th class="tg-v15n" colspan="8" style="font-size: 38px">江苏高精机电装备有限公司</th>
<th class="tg-c3ow" rowspan="2" style="text-align: center; line-height: 114px">二维码</th>
</tr>
<tr>
<td class="tg-uys7" colspan="8" style="text-align: center;font-size: 26px">{{ 装箱单名称 }}发货单</td>
</tr>
<tr>
<td class="tg-c3ow">发货单号</td>
<td class="tg-c3ow" colspan="2">{{ 发货单号 }}</td>
<td class="tg-c3ow">收货人</td>
<td class="tg-c3ow" colspan="2">{{ 收货人 }}</td>
<td class="tg-c3ow">联系电话</td>
<td class="tg-c3ow" colspan="2">{{ 联系电话 }}</td>
</tr>
<tr>
<td class="tg-c3ow">收货地址</td>
<td class="tg-c3ow" colspan="2">{{ 收货地址 }}</td>
<td class="tg-c3ow">委托车辆</td>
<td class="tg-c3ow" colspan="2">{{ 委托车辆 }}</td>
<td class="tg-c3ow">发货日期</td>
<td class="tg-c3ow" colspan="2">{{ 发货日期 }}</td>
</tr>
<tr>
<td class="tg-c3ow">序号</td>
<td class="tg-c3ow">代号</td>
<td class="tg-c3ow" colspan="2">名称</td>
<td class="tg-c3ow">规格</td>
<td class="tg-c3ow">数量</td>
<td class="tg-c3ow" colspan="2">备注</td>
<td class="tg-c3ow">确认</td>
</tr>
<tr v-for="(list, index) in table" :key="index">
<td class="tg-c3ow">{{ index + 1 }}</td>
<td class="tg-c3ow">{{ list.代号 }}</td>
<td class="tg-c3ow" colspan="2">{{ list.名称 }}</td>
<td class="tg-c3ow">{{ list.规格 }}</td>
<td class="tg-c3ow">{{ list.数量 }}</td>
<td class="tg-c3ow" colspan="2">{{ list.备注 }}</td>
<td class="tg-c3ow"/>
</tr>
<tr>
<td class="tg-c3ow" colspan="7">本清单一式两份：一份请收货人清点货物；一份请签收人签收后交还司机带回本公司。请签收人在货物卸车后立即清点！</td>
<td class="tg-c3ow">签收人签字：</td>
<td class="tg-c3ow"/>
</tr>
</table>
<el-dialog :visible.sync="DeliveryVisiable" width="70%" center>
<el-card>
<div id="pdfDom" style="width: 100%">
<table id="table" class="tg" style="table-layout: fixed; width: 1228px;margin: auto;left: 50%;right: 50%">
<colgroup>
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
</colgroup>
<tr>
<th class="tg-v15n" colspan="8" style="font-size: 30px">江苏高精机电装备有限公司</th>
<th class="tg-c3ow" rowspan="2" style="text-align: center; line-height: 17px"><img id="img" alt="" src="http://123.206.50.60:8412/#/searchBoxDetails/index?id="></th>
</tr>
<tr>
<td class="tg-uys7" colspan="8" style="text-align: center;font-size: 20px">{{ 装箱单名称 }}发货单</td>
</tr>
<tr>
<td class="tg-c3ow">发货单号</td>
<td class="tg-c3ow" colspan="2">{{ 发货单号 }}</td>
<td class="tg-c3ow">收货人</td>
<td class="tg-c3ow" colspan="2">{{ 收货人 }}</td>
<td class="tg-c3ow">联系电话</td>
<td class="tg-c3ow" colspan="2">{{ 联系电话 }}</td>
</tr>
<tr>
<td class="tg-c3ow">收货地址</td>
<td class="tg-c3ow" colspan="2">{{ 收货地址 }}</td>
<td class="tg-c3ow">委托车辆</td>
<td class="tg-c3ow" colspan="2">{{ 委托车辆 }}</td>
<td class="tg-c3ow">发货日期</td>
<td class="tg-c3ow" colspan="2">{{ 发货日期 }}</td>
</tr>
<tr>
<td class="tg-c3ow">序号</td>
<td class="tg-c3ow">代号</td>
<td class="tg-c3ow" colspan="2">名称</td>
<td class="tg-c3ow">规格</td>
<td class="tg-c3ow">数量</td>
<td class="tg-c3ow" colspan="2">备注</td>
<td class="tg-c3ow">确认</td>
</tr>
<tr v-for="(list, index) in table" :key="index">
<td class="tg-c3ow">{{ index + 1 }}</td>
<td class="tg-c3ow">{{ list.代号 }}</td>
<td class="tg-c3ow" colspan="2">{{ list.名称 }}</td>
<td class="tg-c3ow">{{ list.规格 }}</td>
<td class="tg-c3ow">{{ list.数量 }}</td>
<td class="tg-c3ow" colspan="2">{{ list.备注 }}</td>
<td class="tg-c3ow"/>
</tr>
<tr>
<td class="tg-c3ow" colspan="7">本清单一式两份：一份请收货人清点货物；一份请签收人签收后交还司机带回本公司。请签收人在货物卸车后立即清点！</td>
<td class="tg-c3ow">签收人签字：</td>
<td class="tg-c3ow"/>
</tr>
</table>
</div>
</el-card>
<div slot="footer" class="dialog-footer">
<el-button @click="callOffDownLoadDelivery()">取消</el-button>
<el-button type="primary" @click="downLoadDelivery()">打印</el-button>
</div>
</el-card>
</el-dialog>
</div>
</template>
@@ -601,7 +607,9 @@
import request from '@/utils/request'
// import { sleep } from '@/utils/tool'
import elInput from 'element-ui/packages/input'
import { exportExcelMethod } from './exportExcel'
import $ from 'jquery'
import install from './htmlToPdf'
// import { exportExcelMethod } from './exportExcel'
import { selectDelivery, submitRremove, searchCargoBoxDetailed, submitMoveInto, delCargoBox, addCargoBox, searchCargoBox, editInvoice, delInvoice, addInvoice, editAdress, addAdress, deleteAdress, citySearch, provinceSearch, addressSearch, searchParts, searchHost, searchSparePart, searchProjectName, searchPackingList, searchFile, searchInvoice } from '@/api//MarketingCenter/DeliveryManagement'
import QRCode from 'qrcode'
export default {
@@ -614,6 +622,7 @@ export default {
canvas: [],
show: false,
num: '',
DeliveryVisiable: false,
fileList: [],
发货单号: '',
收货人: '',
@@ -684,6 +693,7 @@ export default {
dialogFormVisible3: false, // 填充货箱内货物对话框显示隐藏
dialogFormVisible4: false, // 移除货箱内货物对话框显示隐藏
QueryDetail: '',
QueryDetail1: '',
dialogImageUrl: '',
dialogVisible: false,
Transport: [
@@ -818,7 +828,7 @@ export default {
return data
}).then(res => {
for (let i = 0; i < res.length; i++) {
QRCode.toCanvas(document.getElementById(this.canvas[i]), 'http://192.168.0.110:8080/#/DeliveryManagement/index?id=' + res[i].发货单编号.toString(), function(error) {
QRCode.toCanvas(document.getElementById(this.canvas[i]), 'http://123.206.50.60:8412/#/DeliveryManagement/index?id=' + res[i].发货单编号.toString(), function(error) {
if (error) console.error(error)
console.log('success!')
})
@@ -995,18 +1005,6 @@ export default {
this.invoiceNum = row.发货单编号
this.getFileList()
this.getSelect(searchCargoBox, ['货箱号', '货箱号编号'], 'cargoBox', this.invoiceNum)
selectDelivery(this.invoiceNum).then(response => {
this.table = response.data
this.装箱单名称 = response.data[0].装箱单名称
this.发货单号 = response.data[0].发货单号
this.收货人 = response.data[0].联系人
this.收货地址 = response.data[0].省份 + response.data[0].市名 + response.data[0].详细地址
this.委托车辆 = response.data[0].车辆牌号
this.联系电话 = response.data[0].联系方式
if (response.data[0].发货日期 !== '' || response.data[0].发货日期 !== null) {
this.发货日期 = response.data[0].发货日期.substring(0, response.data[0].发货日期.length - 8)
}
})
},
addCargoBox() {
this.$confirm('此操作将新增货箱, 是否继续?', '提示', {
@@ -1183,7 +1181,7 @@ export default {
// 生成的二维码内容，可以添加变量
this.QueryDetail = this.cargoBoxValue.toString()
var canvas = document.getElementById('canvas')
QRCode.toCanvas(canvas, 'http://192.168.0.110:8080/#/searchBoxDetails/index?id=' + this.QueryDetail, function(error) {
QRCode.toCanvas(canvas, 'http://123.206.50.60:8412/#/searchBoxDetails/index?id=' + this.QueryDetail, function(error) {
if (error) console.error(error)
console.log('success!')
})
@@ -1254,13 +1252,55 @@ export default {
this.$message.error('上传失败')
}
},
exportTable() {
exportExcelMethod('table', '发货单', 'sheet1')
exportTable(row) {
this.QueryDetail1 = row.发货单编号.toString()
this.invoiceNum = row.发货单编号
this.DeliveryVisiable = true
selectDelivery(this.invoiceNum).then(response => {
this.table = response.data
this.装箱单名称 = response.data[0].装箱单名称
this.发货单号 = response.data[0].发货单号
this.收货人 = response.data[0].联系人
this.收货地址 = response.data[0].省份 + response.data[0].市名 + response.data[0].详细地址
this.委托车辆 = response.data[0].车辆牌号
this.联系电话 = response.data[0].联系方式
if (response.data[0].发货日期 !== '' || response.data[0].发货日期 !== null) {
this.发货日期 = response.data[0].发货日期.substring(0, response.data[0].发货日期.length - 8)
}
return this.QueryDetail1
}).then(data => {
const opts = {
errorCorrectionLevel: 'H',
type: 'image/jpeg',
rendererOpts: {
quality: 0.3
}
}
QRCode.toDataURL('http://123.206.50.60:8412/#/DeliveryManagement/index?id=' + data, opts, function(err, url) {
if (err) throw err
const img = document.getElementById('img')
img.src = url
})
})
},
clearProject() {
this.cargoBox = []
this.cargoBoxValue = ''
this.tableData6 = []
this.fileList = []
},
downLoadDelivery() {
const htmlNode = $('#pdfDom').html()
const body = $('body')
body.children().hide()
const printNode = $(htmlNode)
body.append(printNode)
window.print()
body.children().show()
printNode.remove()
},
callOffDownLoadDelivery() {
this.DeliveryVisiable = false
}
}
}
@@ -1275,9 +1315,14 @@ export default {
width: 120px !important;
height: auto!important;
}
#img{
width: 120px !important;
height: 120px !important;
margin-top: 5px;
}
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:0px 0px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-v15n{font-weight:bold;font-size:24px;border-color:inherit;text-align:center}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-kluc{font-size:24px;border-color:inherit;text-align:center}