Files
JY1.0/src/views/PurchasingCenter/ContractChange/index.vue

648 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="12">
<el-card>
<el-row>
<span>时间段:</span>
<el-date-picker
v-model="startEndDate"
style="width:250px"
size="small"
type="daterange"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"/>
<span>合同号:</span>
<el-select v-model="contractNumValue" placeholder="合同号" size="small" filterable clearable>
<el-option
v-for="item in contractNum"
:key="item.value"
:label="item.label"
:value="item.value">
<div style="float: left">{{ item.label }}</div>
<div style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</div>
</el-option>
</el-select>
<span>采购员:</span>
<el-select v-model="personValue" placeholder="采购员" size="small" clearable style="width: 100px">
<el-option
v-for="item in person"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-row>
<el-row>
<span>供应商:</span>
<el-input v-model="supplierName" placeholder="供应商" size="small" clearable style="width:180px"/>
<el-button
type="success"
size="small"
icon="el-icon-search"
style="margin-left:10px"
@click="total1=0;pageCurrent1=1;pageSize1=10;searchTable1()">查询新合同</el-button>
<span>变更原因:</span>
<el-input v-model="changeReason" placeholder="变更原因" size="small" clearable style="width:200px"/>
<el-button
type="primary"
size="small"
icon="el-icon-edit-outline"
style="margin-left:10px"
@click="contractChange">合同变更</el-button>
</el-row>
<el-table
v-loading="loading1"
:data="tableData1"
size="mini"
border
style="width: 100%;max-height: 250px;"
height="250px"
highlight-current-row
@row-click="searchTable2">
<el-table-column label="采购合同号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.采购合同编号 }}
</template>
</el-table-column>
<el-table-column label="采购合同名称" align="center" min-width="150">
<template slot-scope="scope">
{{ scope.row.采购合同名称 }}
</template>
</el-table-column>
<el-table-column label="供应商" align="center" min-width="150">
<template slot-scope="scope">
{{ scope.row.供应商名称 }}
</template>
</el-table-column>
<el-table-column label="规定到货时间" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.规定到货时间.split(' ')[0] }}
</template>
</el-table-column>
<el-table-column label="采购员" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.姓名 }}
</template>
</el-table-column>
<el-table-column label="总金额" align="center" min-width="80">
<template slot-scope="scope">
{{ scope.row.总金额 }}
</template>
</el-table-column>
<el-table-column label="付款方式" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.付款方式内容 }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="100" fixed="right">
<template slot-scope="scope">
<el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteContract(scope.row)">作废</el-button>
</template>
</el-table-column>
</el-table>
<div class="block" style="margin: 10px 0 10px 0;">
<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>
<table id="01" cellspacing="0px" align="center" border width="100%" style="">
<tr style="height: 40px">
<td colspan="1" align="center" style="font-weight: bold">GAOJING</td>
<td colspan="3" align="center" style="font-weight: bold">产品销售合同</td>
</tr>
<tr style="height: 40px">
<td colspan="1" align="center">需方</td>
<td colspan="1" align="center">江苏高精机电装备有限公司</td>
<td colspan="1" align="center">合同编号</td>
<td colspan="1" align="center">{{ contract01 }}</td>
</tr>
<tr style="height: 40px">
<td colspan="1" align="center">供方</td>
<td colspan="1" align="center">{{ supplier01 }}</td>
<td colspan="1" align="center">签订地点</td>
<td colspan="1" align="center">江苏盐城</td>
</tr>
</table>
<div> 产品名称型号数量单价品牌</div>
<table id="02" cellspacing="0px" align="center" border width="100%" style="">
<tbody id="04">
<tr id="tableHead01" style="height: 40px">
<td colspan="1" align="center">物料名称</td>
<td colspan="1" align="center">物料规格</td>
<td colspan="1" align="center">物料型号</td>
<td colspan="1" align="center">发货天数</td>
<td colspan="1" align="center">数量</td>
<td colspan="1" align="center">单价</td>
<td colspan="1" align="center">总价</td>
</tr>
</tbody>
<tfoot>
<tr style="height: 40px">
<td colspan="6">运费</td>
<td colspan="1" align="center">{{ freight01 }}</td>
</tr>
<tr style="height: 40px">
<td colspan="6">总价: (人民币){{ RMB01 }}(含0.17增值税) </td>
<td colspan="1" align="center">{{ TotalAmount01 }}</td>
</tr>
</tfoot>
</table>
<div id="textarea01"/>
</el-card>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<el-row>
<span>时间段:</span>
<el-date-picker
v-model="startEndDate3"
style="width:250px"
size="small"
type="daterange"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"/>
<span>合同号:</span>
<el-select v-model="contractNumValue3" placeholder="合同号" size="small" filterable clearable>
<el-option
v-for="item in contractNum3"
:key="item.value"
:label="item.label"
:value="item.value">
<div style="float: left">{{ item.label }}</div>
<div style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</div>
</el-option>
</el-select>
<span>采购员:</span>
<el-select v-model="personValue3" placeholder="采购员" size="small" clearable style="width: 100px">
<el-option
v-for="item in person"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-row>
<el-row>
<span>供应商:</span>
<el-input v-model="supplierName3" placeholder="供应商" size="small" clearable style="width:180px"/>
<el-button
type="success"
size="small"
icon="el-icon-search"
style="margin-left:10px"
@click="total3=0;pageCurrent3=1;pageSize3=10;searchTable3()">查询旧合同</el-button>
</el-row>
<el-table
v-loading="loading3"
:data="tableData3"
size="mini"
border
style="width: 100%;max-height: 250px;"
height="250px"
highlight-current-row
@row-click="searchTable4">
<el-table-column label="采购合同号" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.采购合同编号 }}
</template>
</el-table-column>
<el-table-column label="采购合同名称" align="center" min-width="150">
<template slot-scope="scope">
{{ scope.row.采购合同名称 }}
</template>
</el-table-column>
<el-table-column label="供应商" align="center" min-width="150">
<template slot-scope="scope">
{{ scope.row.供应商名称 }}
</template>
</el-table-column>
<el-table-column label="规定到货时间" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.规定到货时间 }}
</template>
</el-table-column>
<el-table-column label="采购员" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.姓名 }}
</template>
</el-table-column>
<el-table-column label="总金额" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.总金额 }}
</template>
</el-table-column>
<el-table-column label="付款方式" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.付款方式内容 }}
</template>
</el-table-column>
<el-table-column label="更改标记" align="center" min-width="70">
<template slot-scope="scope">
{{ scope.row.更改标记 }}
</template>
</el-table-column>
<el-table-column label="合同变更原因" align="center" min-width="100">
<template slot-scope="scope">
{{ scope.row.合同变更原因 }}
</template>
</el-table-column>
</el-table>
<div class="block" style="margin: 10px 0 10px 0;">
<el-pagination
:current-page="pageCurrent3"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize3"
:total="total3"
style="display:inline-block;width:50%"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange3"
@current-change="handleCurrentChange3"/>
</div>
<el-card>
<table id="11" cellspacing="0px" align="center" border width="100%" style="">
<tr style="height: 40px">
<td colspan="1" align="center" style="font-weight: bold">GAOJING</td>
<td colspan="3" align="center" style="font-weight: bold">产品销售合同</td>
</tr>
<tr style="height: 40px">
<td colspan="1" align="center">需方</td>
<td colspan="1" align="center">江苏高精机电装备有限公司</td>
<td colspan="1" align="center">合同编号</td>
<td colspan="1" align="center">{{ contract02 }}</td>
</tr>
<tr style="height: 40px">
<td colspan="1" align="center">供方</td>
<td colspan="1" align="center">{{ supplier02 }}</td>
<td colspan="1" align="center">签订地点</td>
<td colspan="1" align="center">江苏盐城</td>
</tr>
</table>
<div> 产品名称型号数量单价品牌</div>
<table id="12" cellspacing="0px" align="center" border width="100%" style="">
<tbody id="14">
<tr id="tableHead02" style="height: 40px">
<td colspan="1" align="center">物料名称</td>
<td colspan="1" align="center">物料规格</td>
<td colspan="1" align="center">物料型号</td>
<td colspan="1" align="center">发货天数</td>
<td colspan="1" align="center">数量</td>
<td colspan="1" align="center">单价</td>
<td colspan="1" align="center">总价</td>
</tr>
</tbody>
<tfoot>
<tr style="height: 40px">
<td colspan="6">运费</td>
<td colspan="1" align="center">{{ freight02 }}</td>
</tr>
<tr style="height: 40px">
<td colspan="6">总价: (人民币){{ RMB02 }}(含0.17增值税) </td>
<td colspan="1" align="center">{{ TotalAmount02 }}</td>
</tr>
</tfoot>
</table>
<div id="textarea02"/>
</el-card>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import { initContract, initBuyer, searchTable1, searchTable2, contractChange,
searchChangeContract, initChangeContract, searchTable4, initPayMethod, deleteContract } from '@/api/PurchasingCenter/ContractChange'
export default {
data() {
return {
returns01: [],
contract01: '',
supplier01: '',
freight01: '',
RMB01: '',
TotalAmount01: '',
textarea01: '',
returns02: [],
contract02: '',
supplier02: '',
freight02: '',
RMB02: '',
TotalAmount02: '',
textarea02: '',
check1: 0,
check2: 0,
check3: 0,
check4: 0,
startEndDate: '',
contractNumValue: '',
contractNum: [],
personValue: '',
person: [],
supplierName: '',
supplierValue: '',
total1: 0,
pageCurrent1: 1,
pageSize1: 10,
tableData1: [],
loading1: false,
tableData01: [],
tableData02: [],
submitDisable: true,
dialogVisible2: false,
changeReason: '',
contractValue: '', // 显示表2和变更合同用的变量
tableData3: [],
loading3: false,
total3: 0,
pageCurrent3: 1,
pageSize3: 10,
check31: 0,
check32: 0,
check33: 0,
check34: 0,
check35: 0,
check36: 0,
startEndDate3: '',
contractNumValue3: '',
supplierName3: '',
project3: '',
personValue3: '',
contractNum3: [],
payMethod: [],
payMethodValue: ''
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
this.contractNum = []
initContract().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.contractNum.push({
label: response.data[i].采购合同编号,
name: response.data[i].采购合同名称,
value: response.data[i].采购合同流水号
})
}
})
this.contractNum3 = []
initChangeContract().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.contractNum3.push({
label: response.data[i].采购合同编号,
name: response.data[i].采购合同名称,
value: response.data[i].采购合同流水号
})
}
})
this.payMethod = []
initPayMethod().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.payMethod.push({
label: response.data[i].付款方式内容,
value: response.data[i].付款方式流水号
})
}
})
this.person = []
initBuyer().then(response => {
for (let i = 0; i < response.data.length; i++) {
this.person.push({
text: response.data[i].姓名,
label: response.data[i].姓名,
value: response.data[i].人员编号
})
}
})
},
searchTable1() {
this.textarea01 = ''
this.loading1 = true
if (this.startEndDate === '' || this.startEndDate === null || this.startEndDate[0] === '' || this.startEndDate[1] === '') {
this.check1 = 0
this.startEndDate = ''
} else { this.check1 = 1 }
this.contractNumValue ? this.check2 = 1 : this.check2 = 0
this.personValue ? this.check3 = 1 : this.check3 = 0
this.supplierName ? this.check4 = 1 : this.check4 = 0
searchTable1(this.pageCurrent1, this.pageSize1, this.check1, this.startEndDate[0], this.startEndDate[1], this.check2, this.contractNumValue, this.check3, this.personValue, this.check4, this.supplierName).then(response => {
this.loading1 = false
this.tableData1 = response.data.rows
this.total1 = response.data.total
})
},
handleSizeChange1(val) {
this.pageCurrent1 = 1
this.pageSize1 = val
this.searchTable1()
},
handleCurrentChange1(val) {
this.pageCurrent1 = val
this.searchTable1()
},
searchTable2(row) {
this.supplier01 = row.供应商名称
this.contract01 = row.采购合同编号
this.freight01 = parseFloat(row.总金额) - parseFloat(row.总金额_小计)
this.RMB01 = row.总金额_文本
this.TotalAmount01 = row.总金额
this.textarea01 = row.合同文本
document.getElementById('textarea01').innerText = this.textarea01
this.contractValue = parseInt(row.采购合同流水号)
searchTable2(this.contractValue).then(response => {
this.returns01 = response.data
const children = document.getElementsByClassName('tableData01')
const parent = document.getElementById('04')
if (children.length !== 0) {
for (let i = children.length - 1; i >= 0; i--) {
parent.removeChild(children[i])
}
}
const tr = []
for (let i = 0; i < this.returns01.length; i++) {
tr[i] = document.createElement('tr')
tr[i].setAttribute('class', 'tableData01')
tr[i].innerHTML = '<td colspan="1" align="center"></td>' + '<td colspan="1" align="center"></td>' + '<td colspan="1" align="center"></td>' + '<td colspan="1" align="center"></td>' +
'<td colspan="1" align="center"></td>' + '<td colspan="1" align="center"></td>' + '<td colspan="1" align="center"></td>'
document.getElementById('tableHead01').after(tr[i])
}
for (let j = 0; j < this.returns01.length; j++) {
document.getElementsByClassName('tableData01')[j].children[0].innerHTML = response.data[j].物料名称
document.getElementsByClassName('tableData01')[j].children[1].innerHTML = response.data[j].物料规格
document.getElementsByClassName('tableData01')[j].children[2].innerHTML = response.data[j].物料型号
document.getElementsByClassName('tableData01')[j].children[3].innerHTML = response.data[j].发货天数
document.getElementsByClassName('tableData01')[j].children[4].innerHTML = response.data[j].数量
document.getElementsByClassName('tableData01')[j].children[5].innerHTML = response.data[j].单价
document.getElementsByClassName('tableData01')[j].children[6].innerHTML = response.data[j].金额
}
})
},
contractChange() {
if (this.contractValue) {
this.$confirm('确定更改该合同?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
contractChange(this.contractValue, this.changeReason).then(response => {
this.contractValue = ''
this.changeReason = ''
if (response.data[0].result === '1') {
this.$message.success('变更成功')
this.searchTable1()
this.contractNumValue = ''
this.contractNumValue3 = ''
this.fetchData()
} else { this.$message.error('变更失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
} else {
this.$message.error('请先选择合同')
}
},
searchTable3() {
this.textarea02 = ''
this.loading3 = true
if (this.startEndDate3 === '' || this.startEndDate3 === null || this.startEndDate3[0] === '' || this.startEndDate3[1] === '') {
this.check31 = 0
this.startEndDate3 = ''
} else { this.check31 = 1 }
this.contractNumValue3 ? this.check32 = 1 : this.check32 = 0
this.personValue3 ? this.check33 = 1 : this.check33 = 0
this.supplierName3 ? this.check34 = 1 : this.check34 = 0
this.project3 ? this.check35 = 1 : this.check35 = 0
this.payMethodValue ? this.check36 = 1 : this.check36 = 0
searchChangeContract(this.pageCurrent3, this.pageSize3, this.check31, this.startEndDate3[0], this.startEndDate3[1], this.check32, this.contractNumValue3, this.check33, this.personValue3, this.check34, this.supplierName3, this.check35, this.project3, this.check36, this.payMethodValue).then(response => {
this.loading3 = false
console.log(response.data)
for (let j = 0; j < response.data.rows.length; j++) {
if (response.data.rows[j].预到货时间 !== null) {
response.data.rows[j].预到货时间 = response.data.rows[j].预到货时间.substring(0, response.data.rows[j].预到货时间.indexOf(' '))
}
if (response.data.rows[j].规定到货时间 !== null) {
response.data.rows[j].规定到货时间 = response.data.rows[j].规定到货时间.substring(0, response.data.rows[j].规定到货时间.indexOf(' '))
}
if (response.data.rows[j].实际到货时间 !== null) {
response.data.rows[j].实际到货时间 = response.data.rows[j].实际到货时间.substring(0, response.data.rows[j].实际到货时间.indexOf(' '))
}
}
this.tableData3 = response.data.rows
this.total3 = response.data.total
})
},
handleSizeChange3(val) {
this.pageCurrent3 = 1
this.pageSize3 = val
this.searchTable3()
},
handleCurrentChange3(val) {
this.pageCurrent3 = val
this.searchTable3()
},
searchTable4(row) {
this.supplier02 = row.供应商名称
this.contract02 = row.采购合同编号
this.freight02 = parseFloat(row.运费)
this.RMB02 = row.总金额_文本
this.TotalAmount02 = row.总金额
this.textarea02 = row.合同文本
document.getElementById('textarea02').innerText = this.textarea02
this.contractValue = parseInt(row.采购合同变更流水号)
searchTable4(this.contractValue).then(response => {
this.returns02 = response.data
const children = document.getElementsByClassName('tableData02')
const parent = document.getElementById('14')
if (children.length !== 0) {
for (let i = children.length - 1; i >= 0; i--) {
parent.removeChild(children[i])
}
}
const tr = []
for (let i = 0; i < this.returns02.length; i++) {
tr[i] = document.createElement('tr')
tr[i].setAttribute('class', 'tableData02')
tr[i].innerHTML = '<td colspan="1" align="center"></td>' + '<td colspan="1" align="center"></td>' + '<td colspan="1" align="center"></td>' + '<td colspan="1" align="center"></td>' +
'<td colspan="1" align="center"></td>' + '<td colspan="1" align="center"></td>' + '<td colspan="1" align="center"></td>'
document.getElementById('tableHead02').after(tr[i])
}
for (let j = 0; j < this.returns02.length; j++) {
document.getElementsByClassName('tableData02')[j].children[0].innerHTML = response.data[j].物料名称
document.getElementsByClassName('tableData02')[j].children[1].innerHTML = response.data[j].物料规格
document.getElementsByClassName('tableData02')[j].children[2].innerHTML = response.data[j].物料型号
document.getElementsByClassName('tableData02')[j].children[3].innerHTML = response.data[j].发货天数
document.getElementsByClassName('tableData02')[j].children[4].innerHTML = response.data[j].数量
document.getElementsByClassName('tableData02')[j].children[5].innerHTML = response.data[j].单价
document.getElementsByClassName('tableData02')[j].children[6].innerHTML = response.data[j].金额
}
})
},
deleteContract(row) { // 合同作废
this.$confirm('确定作废该合同?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteContract(row.采购合同流水号).then(response => {
if (response.data[0].result === '1') {
this.$message.success('作废成功')
this.searchTable1()
this.contractNumValue = ''
this.contractNumValue3 = ''
this.fetchData()
} else { this.$message.error('作废失败') }
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
}
}
}
</script>
<style scoped>
.el-card{
margin-bottom: 15px;
}
.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-row{
margin-bottom: 10px;
}
</style>