293 lines
12 KiB
Vue
293 lines
12 KiB
Vue
<template>
|
|
<div class="sys-box">
|
|
<div class="sys-operate">
|
|
<el-button type="primary" @click="back" >{{config.cancelText}}</el-button>
|
|
|
|
</div>
|
|
<div class="sys-form">
|
|
<el-form
|
|
label-width="120px"
|
|
:inline-message=true
|
|
:model="formData1"
|
|
ref="form"
|
|
>
|
|
<div class="flex process-box">
|
|
<el-form-item label="客户名称" prop="clientName" class="form-inline">
|
|
<el-input v-model="formData1.clientName" readonly ></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="销售员" prop="salesPersonName" class="form-inline">
|
|
<el-input v-model="formData1.salesPersonName" readonly></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="销售部门" prop="salesPersonDeptName" class="form-inline">
|
|
<el-input v-model="formData1.salesPersonDeptName" readonly></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="flex process-box">
|
|
<el-form-item label="合同类型" prop="contractTypeName" class="form-inline">
|
|
<el-input v-model="formData1.contractTypeName" readonly></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="合同日期" prop="contractDate" class="form-inline">
|
|
<el-input v-model="formData1.contractDate" readonly></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="合同有效期" class="form-inline">
|
|
<el-input v-model="formData1.contractExpireDate" readonly></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="flex process-box">
|
|
<el-form-item label="合同编号" prop="contractCode" class="form-inline">
|
|
<el-input v-model="formData1.contractCode" readonly></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<el-form-item class="childlist">
|
|
<el-table border
|
|
show-summary
|
|
:header-cell-style="{ fontWeight: 'normal', textAlign: 'center', backgroundColor: '#eceff4', color: '#222'}"
|
|
:data="tableData1"
|
|
>
|
|
<el-table-column prop="serialNo" align="center" label="物料代码" show-overflow-tooltip ></el-table-column>
|
|
<el-table-column prop="name" align="center" label="物料名称" show-overflow-tooltip ></el-table-column>
|
|
<el-table-column prop="specification" align="center" label="规格型号" show-overflow-tooltip >
|
|
</el-table-column>
|
|
<el-table-column prop="unitUomName" align="center" label="单位" show-overflow-tooltip >
|
|
</el-table-column>
|
|
<el-table-column prop="countBefore" width="120" align="center" label="销售数量(变更前)" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column prop="countAfter" width="120" align="center" label="销售数量(变更后)" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column prop="taxAmountBefore" width="120" align="center" label="销售金额/元(变更前)" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column prop="taxAmountAfter" width="120" align="center" label="销售金额/元(变更后)" show-overflow-tooltip>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-form-item>
|
|
<div class="flex process-box1">
|
|
<el-form-item label="优惠折扣率（变更前）" class="form-inline">
|
|
<!-- <el-input-number v-model="formData.discountRate" :min="0" :max="100"
|
|
label="描述文字" size="small"></el-input-number>(%) -->
|
|
<el-input v-model="formData1.discountRateBefore" readonly ></el-input>(%)
|
|
</el-form-item>
|
|
<el-form-item label="优惠折扣率（变更后）" class="form-inline">
|
|
<!-- <el-input-number v-model="formData.discountAmount" :min="0" :max="100"
|
|
label="描述文字" size="small"></el-input-number> 元 -->
|
|
<el-input v-model="formData1.discountRateAfter" readonly ></el-input>元
|
|
</el-form-item>
|
|
|
|
<!-- <el-form-item label="优惠后金额" class="form-inline">
|
|
<el-input v-model="formData1.payAmount" readonly ></el-input>元
|
|
</el-form-item> -->
|
|
</div>
|
|
|
|
<el-divider content-position="left">合同收款条件</el-divider>
|
|
<el-form-item class="childlist">
|
|
<el-table border
|
|
:header-cell-style="{ fontWeight: 'normal', textAlign: 'center', backgroundColor: '#eceff4', color: '#222'}"
|
|
:data="contractData"
|
|
>
|
|
<el-table-column prop="receivableDateBefore" align="center" label="应收日期(变更前)" show-overflow-tooltip >
|
|
</el-table-column>
|
|
<el-table-column prop="receivableDateAfter" align="center" label="应收日期(变更后)" show-overflow-tooltip >
|
|
</el-table-column>
|
|
<el-table-column prop="receivableAmountBefore" align="center" label="应收金额/元(变更前)" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column prop="receivableAmountAfter" align="center" label="应收金额/元(变更后)" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column prop="type" align="center" label="变更说明" show-overflow-tooltip>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState, mapActions, mapGetters, mapMutations} from "vuex";
|
|
import config from "@/utils/config.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
total1: 0, //总条数
|
|
pageSizes: [10, 20, 50], //每页展示多少条
|
|
search_data1: {
|
|
pageno: 1,
|
|
pagesize: 10,
|
|
startTime: "",
|
|
endTime: "",
|
|
contractCode: '',
|
|
createByName: '',
|
|
},
|
|
formData1: {
|
|
clientName: '',
|
|
clientId: '',
|
|
salesPerson: '',
|
|
salesPersonName: '',
|
|
salesPersonDept: '',
|
|
salesPersonDeptName: '',
|
|
contractDate: '',
|
|
contractExpireDate: '',
|
|
contractType: '',
|
|
contractCode: '',
|
|
salesPersonDept: '',
|
|
discountRate: '',
|
|
discountAmount: 0,
|
|
payAmount: 0,
|
|
invoicedAmount: 0,
|
|
uninvoicedAmount: 0,
|
|
createBy: '',
|
|
createByName: '',
|
|
createTime: '',
|
|
auditorName: '',
|
|
auditTime: '',
|
|
closeStatusName: '',
|
|
},
|
|
alterationDetailId: '',
|
|
contractData: [],
|
|
tableData1: [],
|
|
contractList: [],
|
|
config: config,
|
|
alterationDetailVisible: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.alterationDetailId = this.$route.query.id;
|
|
this.getAlterationDetail()
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
removeTagNav: "tagNav/removeTagNav"
|
|
}),
|
|
/**
|
|
* 取消方法
|
|
*/
|
|
back() {
|
|
this.removeTagNav({
|
|
path: this.$route.path,
|
|
title: this.$route.meta.name
|
|
});
|
|
this.$router.push({ path: "/sales/salesContract_alterationList",query: { id: this.formData1.id, t: Date.now() } });
|
|
},
|
|
// 获取变更合同详情
|
|
getAlterationDetail() {
|
|
var _this = this;
|
|
this.$nextTick()
|
|
.then(() => {
|
|
this.$api.salesAPI.getAlterationDetail({id: this.alterationDetailId})
|
|
.then(res => {
|
|
if(res.code == 0) {
|
|
_this.$set(_this.formData1,"clientName",res.contract.clientName?res.contract.clientName:'')
|
|
// _this.$set(_this.formData1,"clientId",res.salesContract.clientId?res.salesContract.clientId:'')
|
|
_this.$set(_this.formData1,"salesPersonName",res.contract.salesPersonName?res.contract.salesPersonName:'')
|
|
_this.$set(_this.formData1,"id",res.contract.id?res.contract.id:'')
|
|
_this.$set(_this.formData1,"salesPerson",res.contract.salesPerson?res.contract.salesPerson:'')
|
|
_this.$set(_this.formData1,"salesPersonDeptName",res.contract.salesPersonDeptName?res.contract.salesPersonDeptName:'')
|
|
_this.$set(_this.formData1,"salesPersonDept",res.contract.salesPersonDept?res.contract.salesPersonDept:'')
|
|
_this.$set(_this.formData1,"contractCode",res.contract.contractCode?res.contract.contractCode:'')
|
|
_this.$set(_this.formData1,"contractType",res.contract.contractType?res.contract.contractType:'')
|
|
_this.$set(_this.formData1,"contractTypeName",res.contract.contractTypeName?res.contract.contractTypeName:'')
|
|
_this.$set(_this.formData1,"contractDate",res.contract.contractDate?(res.contract.contractDate).substr(0,10):'')
|
|
_this.$set(_this.formData1,"contractExpireDate",res.contract.contractExpireDate?(res.contract.contractExpireDate).substr(0,10):'')
|
|
_this.$set(_this.formData1,"discountRate",res.contract.discountRate?res.contract.discountRate:'')
|
|
_this.$set(_this.formData1,"discountAmount",res.contract.discountAmount?res.contract.discountAmount:'')
|
|
_this.$set(_this.formData1,"payAmount",res.contract.payAmount?res.contract.payAmount:'')
|
|
_this.$set(_this.formData1,"createByName",res.contract.createByName?res.contract.createByName:'')
|
|
_this.$set(_this.formData1,"createBy",res.contract.createBy?res.contract.createBy:'')
|
|
_this.$set(_this.formData1,"createTime",res.contract.createTime?res.contract.createTime:'')
|
|
_this.$set(_this.formData1,"closeStatusName",res.contract.closeStatusName?res.contract.closeStatusName:'')
|
|
_this.$set(_this.formData1,"discountRateBefore",res.head.discountRateBefore?res.head.discountRateBefore:'')
|
|
_this.$set(_this.formData1,"discountRateAfter",res.head.discountRateAfter?res.head.discountRateAfter:'')
|
|
_this.tableData1 = res.itemArray
|
|
|
|
_this.tableData1.forEach(item => {
|
|
item.countBefore = item.countBefore?parseFloat(item.countBefore):'',
|
|
item.taxAmountBefore = item.taxAmountBefore?parseFloat(item.taxAmountBefore):'',
|
|
item.countAfter = item.countAfter?parseFloat(item.countAfter):'',
|
|
item.taxAmountAfter = item.taxAmountAfter?parseFloat(item.taxAmountAfter):''
|
|
})
|
|
_this.contractData = res.payArray
|
|
_this.contractData.forEach(item => {
|
|
item.receivableDateBefore = /\d{4}-\d{1,2}-\d{1,2}/g.exec(item.receivableDateBefore)
|
|
item.receivableDateAfter = /\d{4}-\d{1,2}-\d{1,2}/g.exec(item.receivableDateAfter)
|
|
})
|
|
}
|
|
})
|
|
})
|
|
},
|
|
// 变更合同详情
|
|
alterationDetail(row) {
|
|
this.alterationDetailId = row.id
|
|
this.alterationDetailVisible = true
|
|
this.getAlterationDetail()
|
|
},
|
|
closeThis() {
|
|
this.alterationDetailVisible = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
|
.process-box .el-select,
|
|
.process-box .el-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.process-box .el-table thead {
|
|
line-height: 1;
|
|
}
|
|
|
|
.process-box .el-input-number .el-input {
|
|
width: 100% !important;
|
|
}
|
|
.process-box .el-input-number--small{
|
|
width: 70% !important;
|
|
}
|
|
.process-box .form-inline {
|
|
width: 33.3% !important;
|
|
}
|
|
.process-box1 .form-inline {
|
|
width: 50% !important;
|
|
}
|
|
.process-box .el-input-number el-input-number--small{
|
|
white-space: nowrap;
|
|
|
|
}
|
|
.process-box .el-form-item__content{
|
|
margin-left: 100px !important;
|
|
}
|
|
.process-box .el-form-item__label{
|
|
width: 100px !important;
|
|
}
|
|
.process-box1 .el-form-item__label{
|
|
width: 180px !important;
|
|
}
|
|
.process-box .el-input,.process-box .el-form--inline .el-input,.process-box .el-cascader--small{
|
|
width: 100% !important;
|
|
}
|
|
.childlist .el-form-item__content{
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.process-box .el-input--small{
|
|
width: 70% !important;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.sys-form .form-inline .el-input, .sys-form .el-form--inline .el-input {
|
|
width: 220px !important;
|
|
}
|
|
</style>
|
|
|
|
|
|
|