<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"><span style="color: #f56c6c">*</span>收款计划负责人</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%"
|
max-height="375"
|
: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)
|
}
|
"
|
></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"
|
value-format="yyyy-MM-dd"
|
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-option label="5" :value="5"></el-option>
|
<el-option label="8" :value="8"></el-option>
|
<el-option label="10" :value="10"></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="droppedClick">取消</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: [],
|
addProductArr: [],
|
memberOptions: [],
|
allTerms: 3,
|
amount: 130,
|
sourceType: this.editCommonConfig.sourceType, // 源单类型 1销售明细2服务合同3销售发票
|
sourceId: this.editCommonConfig.infomation.id,
|
principalId: '',
|
planAmount: 0, // 计划金额
|
firstDate: this.getCurrentDate(1),
|
collectionType: 1,
|
tableInfomation: [],
|
allPercent: 0
|
}
|
},
|
created() {
|
console.log(this.editCommonConfig)
|
this.setData()
|
this.getCommonData()
|
},
|
methods: {
|
getCookie(cookieName) {
|
var cookieValue = null;
|
if (document.cookie && document.cookie !== '') {
|
var cookies = document.cookie.split(';');
|
for (var i = 0; i < cookies.length; i++) {
|
var cookie = cookies[i].trim();
|
// 忽略不完整的cookie
|
if (cookie.startsWith(cookieName + '=')) {
|
cookieValue = cookie.substring(cookieName.length + 1, cookie.length);
|
break;
|
}
|
}
|
}
|
return cookieValue;
|
},
|
// 设置初始值
|
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,
|
principalId:''
|
}
|
},
|
getCommonData() {
|
getAllData()
|
.then((res) => {
|
console.log(res)
|
if (res.code === 200) {
|
this.memberOptions = res.data.member
|
let username =this.getCookie('username')
|
this.memberOptions.map((item) => {
|
if (item.username == username) {
|
this.$set(this.editConfig.infomation, "principalId", item.id)
|
}
|
})
|
this.principalId=this.editConfig.infomation.principalId
|
}
|
this.setTableForm()
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
// 保存
|
saveClick() {
|
this.sumTotalAmount()
|
console.log(this.amount)
|
if (this.editConfig.title === "新建") {
|
if (this.principalId === 0) {
|
this.$message.error("请选择收款计划负责人")
|
} else if (this.amount === 0) {
|
this.$message.error("收款金额不能为0")
|
} else if (this.amount !== this.planAmount) {
|
this.$message.error("收款计划和未计划金额不一致，请重算")
|
} else if (this.allPercent > 100) {
|
this.$message.error("收款比例(%)总和大于100，请重新输入")
|
} 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()
|
}
|
})
|
}
|
}
|
},
|
droppedClick() {
|
this.editConfig.visible = false
|
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
|
this.$parent.getData()
|
},
|
setTableForm() {
|
this.setTableInfomation(this.allTerms, 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(allTerms, date) {
|
let arr = []
|
for (let i = 0; i < allTerms; i++) {
|
let ratio = 1
|
if (allTerms == 3) {
|
ratio = i == 0 ? 30 : i == 1 ? 50 : 20
|
} else {
|
ratio = 100 / allTerms
|
}
|
let data = {
|
amount: this.amount,
|
amountReceivable: (this.amount * ratio) / 100,
|
amountReceived: 0,
|
amountTotal: this.amount,
|
collectionDate: this.setDate(date, i),
|
collectionType: this.editConfig.infomation.collectionType,
|
fileId: 0,
|
id: 0,
|
moneyType: "人民币",
|
percent: ratio,
|
principalId: Number(this.principalId),
|
remark: "",
|
sourceId: this.sourceId,
|
sourceType: this.sourceType,
|
status: 1,
|
term: i + 1
|
}
|
arr.push(data)
|
}
|
this.tableInfomation = [...arr]
|
},
|
// 重算
|
recalculateClick() {
|
console.log(this.allTerms)
|
this.tableData.tableInfomation = []
|
this.setTableInfomation(this.allTerms, 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)
|
const array = this.tableData.tableInfomation
|
array.map((item) => {
|
this.allPercent += item.percent
|
})
|
console.log(this.allPercent)
|
},
|
// 获取当前日期
|
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)
|
console.log(str.split("-"))
|
let dateArr = str.split("-")
|
// 月份和
|
let monthCount = parseInt(dateArr[1]) + monthNumber
|
// 年
|
let year = monthCount > 12 ? parseInt(dateArr[0]) + 1 : parseInt(dateArr[0])
|
// 月
|
let month = monthCount > 12 ? monthCount - 12 : monthCount
|
// 日
|
let day = parseInt(dateArr[2])
|
|
return year + "-" + month + "-" + day
|
},
|
principalClick(val) {
|
this.principalId = val
|
this.setTableInfomation(this.allTerms, 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>
|
