366 lines
15 KiB
Vue
366 lines
15 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card style="width: 1050px;">
|
||
<div slot="header">
|
||
<el-row>
|
||
<el-input v-model="supplierName" placeholder="供应商/合同编号" size="small" clearable style="width:180px;margin: 0px 10px"/>
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
:picker-options="pickerOptions"
|
||
size="small"
|
||
type="daterange"
|
||
align="center"
|
||
style="width: 240px;margin: 3px 0"
|
||
value-format="yyyy-MM-dd"
|
||
format="yyyy-MM-dd"
|
||
range-separator="～"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"/>
|
||
<el-button type="primary" size="small" icon="el-icon-search" plain style="margin-left:10px" @click="total1=0;pageCurrent1=1;pageSize1=10;searchTable1()">查询</el-button>
|
||
<el-tooltip :open-delay="200" effect="dark" content="打回重新编制" placement="top">
|
||
<div style="display: inline-block">
|
||
<el-button type="danger" size="small" icon="el-icon-back" plain style="margin-left:10px" @click="back">打回</el-button>
|
||
</div>
|
||
</el-tooltip>
|
||
<el-button type="success" size="small" icon="el-icon-download" plain style="float: right;margin-right: 20px;text-align: right;" @click="exportExcel">导出</el-button>
|
||
</el-row>
|
||
</div>
|
||
</el-card>
|
||
<el-row>
|
||
<el-card style="width: 1050px; float: left">
|
||
<el-table
|
||
v-loading="loading1"
|
||
id="expandTable"
|
||
:data="tableData1"
|
||
size="mini"
|
||
border
|
||
stripe
|
||
style="width: 100%"
|
||
height="350px"
|
||
highlight-current-row
|
||
@sort-change="sortChange"
|
||
@row-click="searchTable2">
|
||
<el-table-column label="供应商" align="center" prop="供应商名称" min-width="200" sortable="custom" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
{{ scope.row.供应商名称 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="离线合同编号" align="center" prop="离线合同编号" min-width="130" sortable="custom" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
{{ scope.row.离线合同编号 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="合同金额(元)" align="center" min-width="110">
|
||
<template slot-scope="scope">
|
||
{{ Number(scope.row.合同总额).toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="到货金额(元)" align="center" min-width="110">
|
||
<template slot-scope="scope">
|
||
{{ Number(scope.row.到货金额).toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="已付金额(元)" align="center" min-width="110">
|
||
<template slot-scope="scope">
|
||
{{ Number(scope.row.已付金额).toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="未付金额(元)" align="center" min-width="110">
|
||
<template slot-scope="scope">
|
||
{{ (Number(scope.row.合同总额) - Number(scope.row.已付金额)).toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="采购员" align="center" min-width="110">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.采购员 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="采购日期" align="center" prop="采购日期" min-width="110" sortable="custom">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.提交日期 ? scope.row.提交日期.split(' ')[0] : '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="block" style="margin-top: 10px;">
|
||
<el-pagination
|
||
:current-page="pageCurrent1"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
:page-size="pageSize1"
|
||
:total="total1"
|
||
style="display:inline-block;width:50%"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="handleSizeChange1"
|
||
@current-change="handleCurrentChange1"/>
|
||
</div>
|
||
</el-card>
|
||
</el-row>
|
||
<el-row>
|
||
<el-card style="width: 1050px;padding-bottom: 50px;">
|
||
<table v-show="contractDetail.length > 0" class="offlineContract" cellspacing="0px" align="center" border="1 solid black" width="500px">
|
||
<tr>
|
||
<th colspan="14"><h1>离线合同</h1></th>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="3" rowspan="2" style="text-align:center;font-size: 30px;font-weight: bold">GAOJING</td>
|
||
<td style="text-align: center;" width="80px">合同名称</td>
|
||
<td id="contractName" colspan="2" style="text-align: center;"/>
|
||
<td style="text-align: center;" width="80px">供应商</td>
|
||
<td id="supplier" colspan="5" style="text-align: center;"/>
|
||
<td id="qrCode" style="text-align: center;" colspan="2" rowspan="2"/>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align: center;" width="80px">合同编号</td>
|
||
<td id="contractNum" colspan="2" style="text-align: center;"/>
|
||
<td style="text-align: center;" width="80px">采购员</td>
|
||
<td id="buyer" colspan="5" style="text-align: center;"/>
|
||
</tr>
|
||
<tr id="tablehead">
|
||
<td style="text-align: center;" width="50px">序号</td>
|
||
<td style="text-align: center;" colspan="2">名称</td>
|
||
<td style="text-align: center;">规格</td>
|
||
<td style="text-align: center;" colspan="2">型号</td>
|
||
<td style="text-align: center;">数量</td>
|
||
<td style="text-align: center;" colspan="2">单价</td>
|
||
<td style="text-align: center;" colspan="2">合计</td>
|
||
<td style="text-align: center;">交货期</td>
|
||
<td style="text-align: center;" colspan="2">备注</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align: center;">总计</td>
|
||
<td id="remark" colspan="13" style="text-align: center;"/>
|
||
<!--<td id="total" colspan="2" style="text-align: center;"/>-->
|
||
<!--<td/>-->
|
||
</tr>
|
||
</table>
|
||
</el-card>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { searchOfflineContract, searchOfflineContractContent, back } from '@/api/PurchasingCenter/OfflineContractSearch'
|
||
import QRCode from 'qrcode'
|
||
import $ from 'jquery'
|
||
export default {
|
||
name: 'OfflineContractSearch',
|
||
data() {
|
||
return {
|
||
row1: '',
|
||
dateRange: '',
|
||
contractNumber: '',
|
||
supplierName: '',
|
||
total1: 0,
|
||
number: '',
|
||
pageCurrent1: 1,
|
||
pageSize1: 10,
|
||
tableData1: [],
|
||
loading1: false,
|
||
contractDetail: [],
|
||
pickerOptions: {
|
||
shortcuts: [{
|
||
text: '上季度',
|
||
onClick(picker) {
|
||
const end = new Date()
|
||
const start = new Date()
|
||
start.setTime(end.getTime() - 3600 * 1000 * 24 * 30 * 3)
|
||
picker.$emit('pick', [start, end])
|
||
}
|
||
}, {
|
||
text: '过去半年',
|
||
onClick(picker) {
|
||
const end = new Date()
|
||
const start = new Date()
|
||
start.setTime(end.getTime() - 3600 * 1000 * 24 * 366 / 2)
|
||
picker.$emit('pick', [start, end])
|
||
}
|
||
}, {
|
||
text: '过去一年',
|
||
onClick(picker) {
|
||
const end = new Date()
|
||
const start = new Date()
|
||
start.setTime(end.getTime() - 3600 * 1000 * 24 * 365)
|
||
picker.$emit('pick', [start, end])
|
||
}
|
||
}]
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
// this.searchTable1()
|
||
},
|
||
methods: {
|
||
sortChange(column, prop, order) {
|
||
console.log(column + '-' + column.prop + '-' + column.order, 11111)
|
||
if (column.prop === '供应商名称') {
|
||
this.partName = 1
|
||
} else if (column.prop === '离线合同编号') {
|
||
this.partName = 2
|
||
} else if (column.prop === '创建日期') {
|
||
this.partName = 3
|
||
} else {
|
||
this.partName = ''
|
||
}
|
||
console.log(this.ordername, 9990999)
|
||
if (column.order === 'ascending') {
|
||
this.order = 1
|
||
} else if (column.order === 'descending') { this.order = 2 } else {
|
||
this.order = ''
|
||
}
|
||
this.searchTable1()
|
||
},
|
||
// 查合同列表
|
||
searchTable1() {
|
||
let check1, check2, check3
|
||
this.contractNumber ? check1 = 1 : check1 = 0
|
||
this.supplierName ? check2 = 1 : check2 = 0
|
||
this.dateRange ? check3 = 1 : (check3 = 0, this.dateRange = '')
|
||
this.loading1 = true
|
||
console.log(this.dateRange, 'dateRange')
|
||
searchOfflineContract(this.pageCurrent1, this.pageSize1, check1, this.contractNumber, check2, this.supplierName, this.order, this.partName, check3, this.dateRange[0], this.dateRange[1]).then(response => {
|
||
this.tableData1 = response.data.rows
|
||
this.total1 = response.data.total
|
||
this.loading1 = false
|
||
})
|
||
},
|
||
exportExcel() { // 离线合同导出
|
||
let check1, check2, check3
|
||
this.contractNumber ? check1 = 1 : check1 = 0
|
||
this.supplierName ? check2 = 1 : check2 = 0
|
||
this.dateRange ? check3 = 1 : (check3 = 0, this.dateRange = '')
|
||
var param = []
|
||
param[0] = ['离线合同编号_check', check1]
|
||
param[1] = ['离线合同编号', this.contractNumber]
|
||
param[2] = ['供应商名称_check', check2]
|
||
param[3] = ['供应商名称', this.supplierName]
|
||
param[4] = ['时间_check', check3]
|
||
param[5] = ['开始时间', this.dateRange[0]]
|
||
param[6] = ['结束时间', this.dateRange[1]]
|
||
param[7] = ['是否不包含编辑中', 1]
|
||
var Data = this.CreateData('2001', '报表_离线采购合同信息', param)
|
||
this.exportExcel_NPOI(Data)
|
||
},
|
||
// 离线合同列表分页
|
||
handleSizeChange1(val) {
|
||
this.pageSize1 = val
|
||
this.searchTable1()
|
||
},
|
||
// 离线合同列表分页
|
||
handleCurrentChange1(val) {
|
||
this.pageCurrent1 = val
|
||
this.searchTable1()
|
||
},
|
||
back() {
|
||
if (this.row1.到货金额 !== '0') {
|
||
this.$message.error('已有到货信息，无法打回！！！')
|
||
} else {
|
||
this.$confirm('确定打回合同?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
if (this.number) {
|
||
back(this.number).then(response => {
|
||
if (response.data[0].result !== '0') {
|
||
this.$message.success('打回成功')
|
||
this.searchTable1()
|
||
} else {
|
||
this.$message.success('打回失败')
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.warning('请选择要打回的合同')
|
||
}
|
||
})
|
||
}
|
||
},
|
||
searchTable2(row) {
|
||
this.row1 = row
|
||
this.number = row.离线合同流水号
|
||
searchOfflineContractContent(row.离线合同流水号).then(response => {
|
||
this.contractDetail = response.data
|
||
this.showOffline(row)
|
||
})
|
||
},
|
||
showOffline(row) {
|
||
const children = document.getElementsByClassName('tableData')
|
||
const parent = document.getElementsByClassName('offlineContract')[0]
|
||
if (children.length !== 0) {
|
||
for (let i = children.length - 1; i >= 0; i--) {
|
||
parent.removeChild(children[i])
|
||
}
|
||
}
|
||
const tr = []
|
||
let length = 0
|
||
length = this.contractDetail.length
|
||
for (let i = 0; i < length; i++) {
|
||
tr[i] = document.createElement('tr')
|
||
tr[i].setAttribute('class', 'tableData')
|
||
tr[i].innerHTML = `<td style="text-align:center;height: 40px"/><td colspan="2" style="text-align:center;height: 40px"/><td style="text-align:center;height: 40px"/><td colspan="2" style="text-align:center;height: 40px"/><td style="text-align:center;height: 40px"/><td colspan="2" style="text-align:center;height: 40px"/><td colspan="2" style="text-align:center;height: 40px"/><td style="text-align:center;height: 40px"/><td colspan="2" style="text-align:center;height: 40px"/>`
|
||
$('#tablehead').after(tr[i])
|
||
}
|
||
let total = 0
|
||
for (let j = 0; j < this.contractDetail.length; j++) {
|
||
document.getElementsByClassName('tableData')[j].children[0].innerHTML = j + 1
|
||
document.getElementsByClassName('tableData')[j].children[1].innerHTML = this.contractDetail[j].物料名称 ? this.contractDetail[j].物料名称 : this.contractDetail[j].零件名称
|
||
document.getElementsByClassName('tableData')[j].children[2].innerHTML = this.contractDetail[j].物料规格 ? this.contractDetail[j].物料规格 : this.contractDetail[j].规格
|
||
document.getElementsByClassName('tableData')[j].children[3].innerHTML = this.contractDetail[j].物料型号 ? this.contractDetail[j].物料型号 : this.contractDetail[j].零件图号
|
||
document.getElementsByClassName('tableData')[j].children[4].innerHTML = this.contractDetail[j].数量
|
||
document.getElementsByClassName('tableData')[j].children[5].innerHTML = Number(this.contractDetail[j].单价).toFixed(2)
|
||
document.getElementsByClassName('tableData')[j].children[6].innerHTML = (this.contractDetail[j].数量 * this.contractDetail[j].单价).toFixed(2)
|
||
document.getElementsByClassName('tableData')[j].children[7].innerHTML = this.contractDetail[j].交货期要求
|
||
document.getElementsByClassName('tableData')[j].children[8].innerHTML = this.contractDetail[j].备注
|
||
total += Number(this.contractDetail[j].数量 * this.contractDetail[j].单价)
|
||
}
|
||
total = total.toFixed(2)
|
||
document.getElementById('contractNum').innerHTML = row.离线合同编号
|
||
document.getElementById('contractName').innerHTML = row.离线合同名称
|
||
document.getElementById('supplier').innerHTML = row.供应商名称
|
||
document.getElementById('buyer').innerHTML = row.采购员
|
||
// document.getElementById('total').innerHTML = ''
|
||
document.getElementById('remark').innerHTML = total + ' 元'
|
||
$('#qrCode').html(`<img id="img">`)
|
||
this.useqrcode(row.离线合同编号) // 显示二维码
|
||
},
|
||
useqrcode(contractNum) { // 二维码
|
||
const opts = {
|
||
errorCorrectionLevel: 'H',
|
||
type: 'image/jpeg',
|
||
rendererOpts: {
|
||
quality: 0.3
|
||
}
|
||
}
|
||
const str = contractNum
|
||
QRCode.toDataURL(str, opts, function(err, url) {
|
||
if (err) throw err
|
||
const img = document.getElementById('img')
|
||
img.src = url
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-card{
|
||
margin-bottom: 0px;
|
||
}
|
||
.el-date-editor{
|
||
width:200px
|
||
}
|
||
.el-select{
|
||
width:200px
|
||
}
|
||
.el-input{
|
||
width:200px
|
||
}
|
||
span{
|
||
margin: 10px 0 10px 10px;
|
||
}
|
||
.searchForm .el-form-item{
|
||
margin-bottom: 5px;
|
||
}
|
||
.el-tag{
|
||
margin: 0
|
||
}
|
||
</style>
|