<template>
|
<div class="add-collectionPlan">
|
<el-dialog
|
:title="editCommonConfig.title + '收款计划'"
|
:visible.sync="editConfig.visible"
|
:width="dialogWidth"
|
:before-close="handleClose"
|
append-to-body
|
custom-class="iframe-dialog"
|
>
|
<!-- 信息 -->
|
<div class="basic-info">
|
<div class="collection-view">
|
<div class="label">收款计划类型</div>
|
<el-select v-model="editConfig.infomation.collectionType" size="mini">
|
<el-option label="计划收款日期" :value="1"></el-option>
|
<el-option label="项目状态" :value="2"></el-option>
|
</el-select>
|
</div>
|
<div class="collection-view">
|
<div class="label">币种</div>
|
<el-select v-model="editConfig.infomation.moneyType" size="mini">
|
<el-option label="人民币" value="人民币"></el-option>
|
</el-select>
|
</div>
|
<div class="collection-view">
|
<div class="label">金额</div>
|
<div>{{ editConfig.infomation.amountTotal }}</div>
|
</div>
|
<div class="collection-view">
|
<div class="label">未计划金额</div>
|
<div>{{ editConfig.infomation.amountTotal }}</div>
|
</div>
|
<div class="collection-view">
|
<div class="label">收款计划负责人</div>
|
<el-select
|
v-model="editConfig.infomation.principalId"
|
placeholder="请选择"
|
size="mini"
|
@change="principalClick"
|
>
|
<el-option v-for="item in memberOptions" :key="item.id" :label="item.username" :value="item.id">
|
</el-option>
|
</el-select>
|
</div>
|
<!-- 产品管理 -->
|
<div class="product-view">
|
<el-table
|
ref="table"
|
border
|
:data="tableData.tableInfomation"
|
tooltip-effect="dark"
|
style="width: 100%"
|
:header-cell-style="{ background: '#ECF4FF', color: '#666' }"
|
>
|
<el-table-column
|
v-for="(item, i) in tableData.tableColumn"
|
:key="i"
|
:prop="item.prop"
|
:label="item.label"
|
:width="item.width"
|
:min-width="item.min"
|
align="center"
|
>
|
<!-- column样式 -->
|
<template slot-scope="scope">
|
<div v-if="item.inputNumber">
|
<el-input-number
|
v-model="scope.row[item.prop]"
|
placeholder=""
|
:min="0"
|
:controls="false"
|
style="width: 100%; margin-right: 5px"
|
@change="
|
(val) => {
|
commonInputChange(val, item.prop, scope.row)
|
}
|
"
|
></el-input-number>
|
</div>
|
<div v-else-if="item.inputFloat">
|
<el-input-number
|
v-model="scope.row[item.prop]"
|
placeholder=""
|
:min="0"
|
:precision="2"
|
:controls="false"
|
style="width: 100%; margin-right: 5px"
|
@change="
|
(val) => {
|
commonInputChange(val, item.prop, scope.row)
|
}
|
"
|
></el-input-number>
|
</div>
|
|
<el-input
|
v-else-if="item.input"
|
v-model.trim="scope.row[item.prop]"
|
maxlength="50"
|
size="mini"
|
@change="
|
(val) => {
|
commonInputChange(val, item.prop, scope.row)
|
}
|
"
|
></el-input>
|
<div v-else-if="item.date">
|
<el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 130px">
|
</el-date-picker>
|
</div>
|
<div v-else @click="delClick(scope.row)"><i class="el-icon-delete"></i></div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<!-- </el-form> -->
|
<div class="dialog-footer">
|
<div class="bottom-fixed">
|
<div class="all">
|
<span>总期数: </span>
|
<el-select v-model="allTerms" size="mini" placeholder="" style="width: 60px">
|
<el-option label="1" :value="1"></el-option>
|
<el-option label="2" :value="2"></el-option>
|
<el-option label="3" :value="3"></el-option>
|
</el-select>
|
<span> 期, </span>
|
</div>
|
<div class="first">
|
<span>首次收款日期: </span>
|
<el-date-picker
|
v-model="firstDate"
|
value-format="yyyy-MM-dd"
|
type="date"
|
size="mini"
|
style="width: 130px; margin-right: 10px"
|
>
|
</el-date-picker>
|
<el-button type="text" size="mini" @click="recalculateClick" style="margin-right: 10px">重算</el-button>
|
</div>
|
</div>
|
<div class="btn-view">
|
<el-button type="primary" size="small" @click="saveClick">保存</el-button>
|
<el-button size="small" @click="editConfig.visible = false">取消</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getAllData } from "@/api/client/client"
|
import { addCollectionPlan } from "@/api/common/payment"
|
|
export default {
|
name: "AddCollectionPlanDialog",
|
components: {},
|
props: {
|
editCommonConfig: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
title: "新建",
|
sourceType: 1,
|
infomation: {}
|
}
|
}
|
}
|
},
|
computed: {},
|
data() {
|
return {
|
dialogWidth: "45%",
|
editConfig: this.editCommonConfig,
|
productTableList: {},
|
showSummary: {
|
show: true,
|
total: false,
|
sumProp: ["other1", "other7"],
|
mergeNumber: 7
|
},
|
tableData: [],
|
productId: 1,
|
addProductArr: [],
|
memberOptions: [],
|
allTerms: 3,
|
amount: 130,
|
sourceType: this.editCommonConfig.sourceType, // 源单类型 1销售明细2服务合同3销售发票
|
sourceId: this.editCommonConfig.infomation.id,
|
principalId: 0,
|
planAmount: 0, // 计划金额
|
firstDate: this.getCurrentDate(1),
|
collectionType: 1,
|
tableInfomation: []
|
}
|
},
|
created() {
|
console.log(this.editCommonConfig)
|
this.setData()
|
this.setTableForm()
|
this.getCommonData()
|
},
|
methods: {
|
// 设置初始值
|
setData() {
|
this.amount =
|
typeof this.editCommonConfig.infomation.amountTotal == "string"
|
? parseInt(this.editCommonConfig.infomation.amountTotal)
|
: this.editCommonConfig.infomation.amountTotal
|
this.editConfig.infomation = {
|
collectionType: this.collectionType,
|
moneyType: "人民币",
|
amountTotal: this.editCommonConfig.infomation.amountTotal
|
}
|
},
|
getCommonData() {
|
getAllData()
|
.then((res) => {
|
console.log(res)
|
if (res.code === 200) {
|
this.memberOptions = res.data.member
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
// 保存
|
saveClick() {
|
this.sumTotalAmount()
|
if (this.editConfig.title === "新建") {
|
if (this.principalId === 0) {
|
this.$message.error("请选择收款计划负责人")
|
} else if (this.amount !== this.planAmount) {
|
this.$message.error("收款计划和未计划金额不一致，请重算")
|
} else {
|
const params = this.saveParams()
|
addCollectionPlan(params).then((res) => {
|
console.log(res)
|
this.editConfig.visible = false
|
if (res.code === 200) {
|
this.$message.success("添加成功")
|
this.$parent.getData()
|
}
|
})
|
}
|
}
|
},
|
// 计算计划总额
|
sumTotalAmount() {
|
this.planAmount = 0
|
if (this.tableData.tableInfomation && this.tableData.tableInfomation.length > 0) {
|
this.tableData.tableInfomation.map((item) => {
|
this.planAmount += item.amountReceivable
|
})
|
}
|
},
|
saveParams() {
|
let params = {
|
list: this.tableData.tableInfomation
|
}
|
return params
|
},
|
handleClose() {
|
this.editConfig.visible = false
|
},
|
setTableForm() {
|
this.setTableInfomation(this.firstDate)
|
this.tableData = {
|
tableInfomation: this.tableInfomation,
|
tableColumn: [
|
{ label: "操作", prop: "operate", width: 60 },
|
{ label: "期次", prop: "term", inputNumber: true, width: 90 },
|
{ label: "比例(%)", prop: "percent", inputNumber: true, width: 90 },
|
{ label: "金额", prop: "amountReceivable", inputFloat: true, width: 120 },
|
{ label: "计划收款日期", prop: "collectionDate", date: true, width: 150 },
|
{ label: "备注", prop: "remark", input: true }
|
]
|
}
|
},
|
setTableInfomation(date) {
|
console.log(this.sourceId)
|
this.tableInfomation = [
|
{
|
amount: this.amount,
|
amountReceivable: this.amount * 0.3,
|
amountReceived: 0,
|
amountTotal: this.amount,
|
collectionDate: this.setDate(date, 0),
|
collectionType: this.editConfig.infomation.collectionType,
|
fileId: 0,
|
id: 0,
|
moneyType: "人民币",
|
percent: 30,
|
principalId: this.principalId,
|
remark: "",
|
sourceId: this.sourceId,
|
sourceType: this.sourceType,
|
status: 1,
|
term: 1
|
},
|
{
|
amount: this.amount,
|
amountReceivable: this.amount * 0.5,
|
amountReceived: 0,
|
amountTotal: this.amount,
|
collectionDate: this.setDate(date, 1),
|
collectionType: this.editConfig.infomation.collectionType,
|
fileId: 0,
|
id: 0,
|
moneyType: "人民币",
|
percent: 50,
|
principalId: this.principalId,
|
remark: "",
|
sourceId: this.sourceId,
|
sourceType: this.sourceType,
|
status: 1,
|
term: 2
|
},
|
{
|
amount: this.amount,
|
amountReceivable: this.amount * 0.2,
|
amountReceived: 0,
|
amountTotal: this.amount,
|
collectionDate: this.setDate(date, 2),
|
collectionType: this.editConfig.infomation.collectionType,
|
fileId: 0,
|
id: 0,
|
moneyType: "人民币",
|
percent: 20,
|
principalId: this.principalId,
|
remark: "",
|
sourceId: this.sourceId,
|
sourceType: this.sourceType,
|
status: 1,
|
term: 3
|
}
|
]
|
},
|
// 重算
|
recalculateClick() {
|
console.log(this.allTerms)
|
this.tableData.tableInfomation = []
|
if (this.allTerms === 1) {
|
console.log("aaa")
|
this.tableData.tableInfomation = [
|
{
|
amount: this.amount,
|
amountReceivable: this.amount,
|
amountReceived: 0,
|
amountTotal: this.amount,
|
collectionDate: this.setDate(this.firstDate, 0),
|
collectionType: this.editConfig.infomation.collectionType,
|
fileId: 0,
|
id: 0,
|
moneyType: "人民币",
|
percent: 100,
|
principalId: this.principalId,
|
remark: "",
|
sourceId: this.sourceId,
|
sourceType: this.sourceType,
|
status: 1,
|
term: 1
|
}
|
]
|
} else if (this.allTerms === 2) {
|
this.tableData.tableInfomation = [
|
{
|
amount: this.amount,
|
amountReceivable: this.amount * 0.5,
|
amountReceived: 0,
|
amountTotal: this.amount,
|
collectionDate: this.setDate(this.firstDate, 0),
|
collectionType: this.editConfig.infomation.collectionType,
|
fileId: 0,
|
id: 0,
|
moneyType: "人民币",
|
percent: 50,
|
principalId: this.principalId,
|
remark: "",
|
sourceId: this.sourceId,
|
sourceType: this.sourceType,
|
status: 1,
|
term: 1
|
},
|
{
|
amount: this.amount,
|
amountReceivable: this.amount * 0.5,
|
amountReceived: 0,
|
amountTotal: this.amount,
|
collectionDate: this.setDate(this.firstDate, 1),
|
collectionType: this.editConfig.infomation.collectionType,
|
fileId: 0,
|
id: 0,
|
moneyType: "人民币",
|
percent: 50,
|
principalId: this.principalId,
|
remark: "",
|
sourceId: this.sourceId,
|
sourceType: this.sourceType,
|
status: 1,
|
term: 2
|
}
|
]
|
} else if (this.allTerms === 3) {
|
this.setTableInfomation(this.firstDate)
|
this.tableData.tableInfomation = this.tableInfomation
|
}
|
},
|
delClick(row) {
|
console.log(row)
|
this.tableData.tableInfomation = this.tableData.tableInfomation.filter((item) => {
|
return item.term != row.term
|
})
|
this.allTerms = this.tableData.tableInfomation.length === 0 ? 3 : this.tableData.tableInfomation.length
|
},
|
commonInputChange(val, prop, row) {
|
console.log(val, prop)
|
console.log(row)
|
},
|
// 获取当前日期
|
getCurrentDate(monthNumber) {
|
let now = new Date()
|
let year = now.getFullYear()
|
let month = now.getMonth() + monthNumber
|
let day = now.getDate()
|
return year + "-" + month + "-" + day
|
},
|
// 日期处理
|
setDate(str, monthNumber) {
|
console.log(str.split("-"))
|
let dateArr = str.split("-")
|
let year = parseInt(dateArr[0])
|
let month = parseInt(dateArr[1]) + monthNumber
|
let day = parseInt(dateArr[2])
|
return year + "-" + month + "-" + day
|
},
|
principalClick(val) {
|
this.principalId = val
|
this.setTableInfomation(this.firstDate)
|
this.tableData.tableInfomation = this.tableInfomation
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
::v-deep {
|
.iframe-dialog .el-dialog__body {
|
.basic-info {
|
.collection-view {
|
height: 42px;
|
line-height: 42px;
|
display: flex;
|
border-bottom: 1px solid #ebeef5;
|
color: #666;
|
.label {
|
width: 230px;
|
text-align: right;
|
margin-right: 10px;
|
}
|
}
|
}
|
|
.dialog-footer {
|
position: sticky;
|
.bottom-fixed {
|
height: 42px;
|
line-height: 42px;
|
display: flex;
|
align-items: center;
|
background: #fff;
|
|
.all {
|
margin-left: auto;
|
}
|
}
|
.btn-view {
|
height: 55px;
|
line-height: 55px;
|
text-align: center;
|
background-color: #f5f5f5;
|
}
|
}
|
}
|
}
|
</style>
|
