Files
JY1.0/src/views/WorkshopProcurement/PurchaseContractChange/index.vue
2018-11-19 09:50:08 +08:00

627 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">
<div style="width: 48%; float: left;margin-left: 20px">
<el-card>
<el-row>
<span>时间段:</span>
<el-date-picker
v-model="startEndDate"
style="width:240px"
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" style="width:180px" 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-input v-model="buyerName" placeholder="请双击选择" size="small" clearable style="width:120px" @dblclick.native="initBuyer();dialogVisible2=true;submitDisable=true;Buyer=0"/>
</el-row>
<el-row style="margin-top: 10px">
<span>供应商:</span>
<el-input v-model="supplierName" placeholder="供应商" size="small" clearable/>
<el-button
type="success"
size="small"
icon="el-icon-search"
style="margin-left:10px"
@click="total1=0;pageCurrent1=1;pageSize1=10;searchTable1()">查询现有合同</el-button>
</el-row>
<el-card>
<el-table v-loading="loading1" :data="tableData1" border style="width: 100%;max-height: 400px;" height="200px" highlight-current-row size="mini" @row-click="searchTable2">
<el-table-column label="采购合同号" align="center">
<template slot-scope="scope">
{{ scope.row.采购合同编号 }}
</template>
</el-table-column>
<el-table-column label="规定到货时间" align="center">
<template slot-scope="scope">
{{ scope.row.规定到货时间 }}
</template>
</el-table-column>
<el-table-column label="采购员" align="center">
<template slot-scope="scope">
{{ scope.row.姓名 }}
</template>
</el-table-column>
<el-table-column label="总金额" align="center">
<template slot-scope="scope">
{{ scope.row.总金额 }}
</template>
</el-table-column>
<el-table-column label="付款方式" align="center">
<template slot-scope="scope">
{{ scope.row.付款方式内容 }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="100" fixed="right">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="open(scope.row)">变更合同</el-button>
</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-card>
<div style="width:750px">
<el-card>
<table id="1" 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">{{ contract }}</td>
</tr>
<tr style="height: 40px">
<td colspan="1" align="center">供方</td>
<td colspan="1" align="center">{{ supplier }}</td>
<td colspan="1" align="center">签订地点</td>
<td colspan="1" align="center">江苏盐城</td>
</tr>
</table>
<div> 产品名称型号数量单价品牌</div>
<table id="2" cellspacing="0px" align="center" border width="100%" style="">
<tbody id="4">
<tr id="tableHead" 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">{{ freight }}</td>
</tr>
<tr style="height: 40px">
<td colspan="6">总价: (人民币){{ RMB }}(含0.17增值税) </td>
<td colspan="1" align="center">{{ TotalAmount }}</td>
</tr>
</tfoot>
</table>
<div id="23"/>
<!--<el-input-->
<!--type="textarea"-->
<!--:rows="40" style="width:900px;margin:20px auto;display: block"-->
<!--v-model="textarea">-->
<!--</el-input>-->
</el-card>
</div>
</el-card>
</el-card>
</div>
<div style="width: 48%; float: right; margin-right: 20px">
<el-card>
<el-row>
<span>时间段:</span>
<el-date-picker
v-model="startEndDate"
style="width:240px"
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" style="width:180px" 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-input v-model="buyerName1" placeholder="请双击选择" size="small" clearable style="width:120px" @dblclick.native="initBuyer();dialogVisible2=true;submitDisable=true;buyer=1"/>
</el-row>
<el-row style="margin-top: 10px">
<span>供应商:</span>
<el-input v-model="supplierName" placeholder="供应商" size="small" clearable/>
<el-button
type="success"
size="small"
icon="el-icon-search"
style="margin-left:10px"
@click="total2=0;pageCurrent2=1;pageSize2=10;searchTable3()">查询变更记录</el-button>
</el-row>
<el-card>
<el-table v-loading="loading2" :data="tableData2" border style="width: 100%;max-height: 400px" height="200px" highlight-current-row size="mini" @row-click="searchTable4">
<el-table-column label="采购合同号" align="center">
<template slot-scope="scope">
{{ scope.row.采购合同编号 }}
</template>
</el-table-column>
<el-table-column label="规定到货时间" align="center">
<template slot-scope="scope">
{{ scope.row.规定到货时间 }}
</template>
</el-table-column>
<el-table-column label="采购员" align="center">
<template slot-scope="scope">
{{ scope.row.姓名 }}
</template>
</el-table-column>
<el-table-column label="总金额" align="center">
<template slot-scope="scope">
{{ scope.row.总金额 }}
</template>
</el-table-column>
<el-table-column label="付款方式" align="center">
<template slot-scope="scope">
{{ scope.row.付款方式内容 }}
</template>
</el-table-column>
<el-table-column label="变更原因" align="center">
<template slot-scope="scope">
{{ scope.row.合同变更原因 }}
</template>
</el-table-column>
<el-table-column label="变更标记" align="center">
<template slot-scope="scope">
{{ scope.row.更改标记 }}
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px;">
<el-pagination
:current-page="pageCurrent2"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize2"
:total="total2"
style="display:inline-block;width:50%"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange2"
@current-change="handleCurrentChange2"/>
</div>
</el-card>
<el-card>
<div style="width:750px">
<el-card>
<table id="3" 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">{{ contract1 }}</td>
</tr>
<tr style="height: 40px">
<td colspan="1" align="center">供方</td>
<td colspan="1" align="center">{{ supplier1 }}</td>
<td colspan="1" align="center">签订地点</td>
<td colspan="1" align="center">江苏盐城</td>
</tr>
</table>
<div> 产品名称型号数量单价品牌</div>
<table id="5" cellspacing="0px" align="center" border width="100%" style="">
<tbody id="6">
<tr id="tableHead1" 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">{{ freight1 }}</td>
</tr>
<tr style="height: 40px">
<td colspan="6">总价: (人民币){{ RMB1 }}(含0.17增值税) </td>
<td colspan="1" align="center">{{ TotalAmount1 }}</td>
</tr>
</tfoot>
</table>
<div id="24"/>
<!--<el-input-->
<!--type="textarea"-->
<!--:rows="40" style="width:900px;margin:20px auto;display: block"-->
<!--v-model="textarea">-->
<!--</el-input>-->
</el-card>
</div>
</el-card>
</el-card>
</div>
<el-dialog :visible.sync="dialogVisible2" title="采购员选择" center style="min-height: 300px;" width="40%">
<el-table
:data="tableData02"
size="small"
border
style="width: 100%;min-height:300px"
height="300px"
highlight-current-row
@row-click="clickBuyer">
<el-table-column label="考勤编号" align="center">
<template slot-scope="scope">
{{ scope.row.考勤编号 }}
</template>
</el-table-column>
<el-table-column label="姓名" align="center">
<template slot-scope="scope">
{{ scope.row.姓名 }}
</template>
</el-table-column>
<el-table-column label="性别" align="center">
<template slot-scope="scope">
{{ scope.row.性别 }}
</template>
</el-table-column>
<el-table-column label="工作岗位" align="center">
<template slot-scope="scope">
{{ scope.row.岗位名称 }}
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button :disabled="submitDisable" type="primary" size="small" icon="el-icon-check" @click="submitSelectBuyer">确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogVisible3" title="合同变更" center style="min-height: 300px;" width="20%">
<el-form ref="form2" :model="form2" :rules="rules2" label-position="left" label-width="110px" class="demo-ruleForm">
<el-form-item label="变更原因" prop="变更原因" center>
<el-input v-model="form2.变更原因" size="small"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="submitContract('form2')">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { initContract, initBuyer, searchTable1, searchTable2, searchTable3, searchTable4, submitContract } from '@/api/WorkshopProcurement/PurchaseContractChange'
export default {
data() {
return {
RMB: '',
TotalAmount: '',
RMB1: '',
TotalAmount1: '',
check1: 0,
check2: 0,
check3: 0,
check4: 0,
check5: 0,
startEndDate: '',
contract: '',
contract1: '',
freight: '',
freight1: '',
contractNumValue: '',
contractNum: [],
ProcurementContractNum: '',
buyer: 0,
Supplier: 0,
buyerName: '',
buyerValue: '',
buyerName1: '',
buyerValue1: '',
supplier: '',
supplierName: '',
supplierValue: '',
supplier1: '',
supplierName1: '',
supplierValue1: '',
total1: 0,
pageCurrent1: 1,
pageSize1: 10,
tableData1: [],
total2: 0,
pageCurrent2: 1,
pageSize2: 10,
tableData2: [],
loading1: false,
loading2: false,
dialogVisible1: false,
form1: {},
form2: {
变更原因: ''
},
rules2: {
变更原因: [{ required: true, message: '请输入变更原因', trigger: 'blur' }]
},
returns: [],
returns1: [],
tableData01: [],
tableData02: [],
submitDisable: true,
dialogVisible2: false,
dialogVisible3: false,
contractChangeValue: '',
textarea: ``,
textarea1: ``,
contractValue: '', // 显示表2和变更合同用的变量
contractValue1: ''
}
},
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].采购合同流水号
})
}
})
},
initBuyer() { // 初始化采购人员
initBuyer().then(response => {
this.tableData02 = response.data
})
},
clickBuyer(row) { // 点击采购员表某一行
this.submitDisable = false
if (this.buyer === 0) {
this.buyerName = row.姓名
this.buyerValue = row.人员编号
} else if (this.buyer === 1) {
this.buyerName1 = row.姓名
this.buyerValue1 = row.人员编号
}
},
submitSelectBuyer() { // 确定
this.dialogVisible2 = false
},
searchTable1() {
this.textarea = ``
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.buyerName ? this.check3 = 1 : this.check3 = 0
this.supplierName ? this.check4 = 1 : this.check4 = 0
if (this.approvalValue === '' || this.approvalValue === 0) {
this.check5 = 0
} else {
this.check5 = 1
}
searchTable1(this.pageCurrent1, this.pageSize1, this.check1, this.startEndDate[0], this.startEndDate[1], this.check2, this.contractNumValue, this.check3, this.buyerValue, this.check4, this.supplierName, this.check5, this.approvalValue).then(response => {
this.loading1 = false
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(' '))
}
}
this.tableData1 = response.data.rows
this.total1 = response.data.total
})
},
searchTable3() {
this.textarea1 = ``
this.loading2 = 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.buyerName ? this.check3 = 1 : this.check3 = 0
this.supplierName ? this.check4 = 1 : this.check4 = 0
searchTable3(this.pageCurrent2, this.pageSize2, this.check1, this.startEndDate[0], this.startEndDate[1], this.check2, this.contractNumValue, this.check3, this.buyerValue, this.check4, this.supplierName).then(response => {
this.loading2 = false
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(' '))
}
}
this.tableData2 = response.data.rows
this.total2 = response.data.total
})
},
open(row) {
if (this.$refs['form2'] !== undefined) {
this.$refs['form2'].resetFields()
}
this.dialogVisible3 = true
this.contractChangeValue = row.采购合同流水号
},
submitContract(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.dialogVisible3 = false
submitContract(this.contractChangeValue, this.form2.变更原因).then(response => {
if (response.data[0].result === '1') {
this.$message.success('变更成功')
this.searchTable1()
} else { this.$message.error('变更失败') }
})
} else {
console.log('error submit!!')
return false
}
})
},
handleSizeChange1(val) {
this.pageCurrent1 = 1
this.pageSize1 = val
this.searchTable1()
},
handleCurrentChange1(val) {
this.pageCurrent1 = val
this.searchTable1()
},
handleSizeChange2(val) {
this.pageCurrent2 = 1
this.pageSize2 = val
this.searchTable3()
},
handleCurrentChange2(val) {
this.pageCurrent2 = val
this.searchTable3()
},
searchTable2(row) {
console.log(row)
this.textarea = row.合同文本
this.supplier = row.供应商名称
this.contract = row.采购合同编号
this.freight = parseInt(row.总金额) - parseInt(row.总金额_小计)
this.RMB = row.总金额_文本
this.TotalAmount = row.总金额
document.getElementById('23').innerText = this.textarea
this.contractValue = parseInt(row.采购合同流水号)
searchTable2(this.contractValue).then(response => {
this.returns = response.data
const children = document.getElementsByClassName('tableData')
const parent = document.getElementById('4')
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.returns.length; i++) {
tr[i] = document.createElement('tr')
tr[i].setAttribute('class', 'tableData')
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('tableHead').after(tr[i])
}
for (let j = 0; j < this.returns.length; j++) {
document.getElementsByClassName('tableData')[j].children[0].innerHTML = response.data[j].物料名称
document.getElementsByClassName('tableData')[j].children[1].innerHTML = response.data[j].物料规格
document.getElementsByClassName('tableData')[j].children[2].innerHTML = response.data[j].物料型号
document.getElementsByClassName('tableData')[j].children[3].innerHTML = response.data[j].发货天数
document.getElementsByClassName('tableData')[j].children[4].innerHTML = response.data[j].数量
document.getElementsByClassName('tableData')[j].children[5].innerHTML = response.data[j].单价
document.getElementsByClassName('tableData')[j].children[6].innerHTML = response.data[j].金额
}
})
},
searchTable4(row) {
console.log(row)
this.textarea1 = row.合同文本
this.supplier1 = row.供应商名称
this.contract1 = row.采购合同编号
this.freight1 = parseInt(row.总金额) - parseInt(row.总金额_小计)
this.RMB1 = row.总金额_文本
this.TotalAmount1 = row.总金额
document.getElementById('24').innerText = this.textarea1
this.contractValue1 = parseInt(row.采购合同变更流水号)
searchTable4(this.contractValue1).then(response => {
this.returns1 = response.data
const children1 = document.getElementsByClassName('tableData1')
const parent1 = document.getElementById('6')
if (children1.length !== 0) {
for (let i = children1.length - 1; i >= 0; i--) {
parent1.removeChild(children1[i])
}
}
const tr = []
for (let i = 0; i < this.returns1.length; i++) {
tr[i] = document.createElement('tr')
tr[i].setAttribute('class', 'tableData1')
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('tableHead1').after(tr[i])
}
for (let j = 0; j < this.returns1.length; j++) {
document.getElementsByClassName('tableData1')[j].children[0].innerHTML = response.data[j].物料名称
document.getElementsByClassName('tableData1')[j].children[1].innerHTML = response.data[j].物料规格
document.getElementsByClassName('tableData1')[j].children[2].innerHTML = response.data[j].物料型号
document.getElementsByClassName('tableData1')[j].children[3].innerHTML = response.data[j].发货天数
document.getElementsByClassName('tableData1')[j].children[4].innerHTML = response.data[j].数量
document.getElementsByClassName('tableData1')[j].children[5].innerHTML = response.data[j].单价
document.getElementsByClassName('tableData1')[j].children[6].innerHTML = response.data[j].金额
}
})
}
}
}
</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;
}
</style>
<style>
.tableData1{
height: 30px;
}
</style>