{extend name="common/common2" /}
{block name="main"}
<style>
a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus{
background-color: #284a94 !important;
border-color: #284a94 !important;
}
</style>
<div id="feeapp">
<div class="panel panel-default">
<div class="panel-heading">
收费科目
<div class="btn-group pull-right">
<a href="javascript:history.go(-1);">返回</a>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12" style="padding-bottom: 20px;">
业主：{$owner['name']}
联系电话：{$owner['phone']}
类型：{if $owner['type'] == 1}住户{else}租户{/if}
</div>
<div class="col-xs-3" style="min-height: 200px">
<div class="list-group">
<a v-for="(item,index) in lists" :key="index" href="javascript:;" @click="selectData(item)" class="list-group-item" :class="curData&&curData.type == item.type&&curData.id == item.id?'active':''">
<span v-if="item.cate == 1">[住房] </span>
<span v-if="item.cate == 2">[商铺] </span>
<span v-if="item.cate == 3">[营业房] </span>
<span v-if="item.cate == 4">[储藏室] </span>
<span v-if="item.cate == 5">[停车位] </span>
{{item.title}}
<span v-if="item.c_type > 0">({{item.c_type_name}})</span>
</a>
</div>
</div>
<div class="col-xs-3" style="min-height: 200px">
<div class="list-group" v-if="curData && curData.fee.length > 0">
<a v-for="(item,index) in curData.fee" :key="index" href="javascript:;" @click="selectFee(item)" class="list-group-item" :class="curFee&&curFee.id == item.id?'active':''">
[{{item.parent_title}}] {{item.title}}
</a>
</div>
</div>
<div class="col-xs-6" style="min-height: 200px">
<!-- <p><strong>收费详情</strong></p>-->
<table class="table" v-if="curData && curFee">
<tr v-if="curFee.area == 1">
<td style="width: 100px;">产权面积</td>
<td>{{curData.area}}</td>
</tr>
<tr>
<td>基本单价</td>
<td>{{curFee.price}}元</td>
</tr>
<tr v-if="curFee.area != 0 || curFee.cycle != 0">
<td>计算公式</td>
<td v-if="curFee.area == 1">基本单价*产权面积</td>
<td v-if="curFee.area == 0">基本单价</td>
</tr>
<tr v-if="curFee.cycle == 1 && curFee.end">
<td>最近缴费日期</td>
<td>
{{curFee.start}} ~ {{curFee.start}}
</td>
</tr>
<tr v-if="curFee.cycle == 1 && curFee.end">
<td>历史收费金额</td>
<td>
{{curFee.tmoney}}
</td>
</tr>
<tr v-if="curFee.cycle == 1">
<td>起止日期</td>
<td>
<input type="date" v-model="start" max="2100-01-01"> ~ <input type="date" v-model="end" max="2100-01-01">
<!--<el-date-picker
v-model="date"
type="daterange"
size="small"
value-format="yyyy-MM-dd"
@change="changeDate"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>-->
</td>
</tr>
<tr>
<td>总金额</td>
<td>{{totalPrice}}元</td>
</tr>
<tr>
<td>备注</td>
<td>
<el-input
type="textarea"
:rows="2"
placeholder="请输入"
v-model="remark">
</el-input>
</td>
</tr>
<tr>
<td></td>
<td>
<button type="button" @click="saveBtn" class="btn btn-sm btn-primary">保存数据</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">收费明细</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<table class="table">
<tr>
<th>资源名称</th>
<th>科目名称</th>
<th>应收金额</th>
<th>起止日期</th>
<th>备注</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in selData" :key="index">
<td>
<span v-if="item.cate == 1">[住房] </span>
<span v-if="item.cate == 2">[商铺] </span>
<span v-if="item.cate == 3">[营业房] </span>
<span v-if="item.cate == 4">[储藏室] </span>
<span v-if="item.cate == 5">[停车位] </span>
{{item.title}}
</td>
<td>[{{item.fee_parent_title}}] {{item.fee_title}}</td>
<td>{{item.total_price}}</td>
<td v-if="item.start">{{item.start}} ~ {{item.end}}</td>
<td v-if="!item.start"></td>
<td>{{item.remark}}</td>
<td>
<button type="button" @click="delSelectData(index)" class="btn btn-xs btn-danger">删除</button>
</td>
</tr>
</table>
<div>
<form class="form-inline">
<div class="form-group">
<label>最晚缴费日期 <span class="text-danger">*</span></label>
<el-date-picker
v-model="lastDate"
type="date"
size="small"
value-format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</div>
<button type="button" @click="submitOrder" class="btn btn-sm btn-primary">生成缴费单</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{/block}
{block name="script"}
<script>
var lists = {:json_encode($lists)};
var houseId = "{$houseId}";
var vm = new Vue({
el: '#feeapp',
data: {
lists: lists,
curData: null,
curFee: null,
curRet: null,
date: '',
remark: '',
totalPrice: 0,
selData: [],
lastDate: '',
flag: false,
houseId: houseId,
start: '',
end: '',
},
computed: {
},
watch: {
start(val,oldVal){
this.calculationPrice();
},
end(val, oldVal){
this.calculationPrice();
}
},
created: function () {
this.initDate();
},
methods: {
initDate(){
var nowDate = new Date();
var fullYear = nowDate.getFullYear();
var month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
var endDate = this.getFullDate(nowDate.setDate(endOfMonth));//当月最后一天
var startDate = this.getFullDate(nowDate.setDate(1));//当月第一天
this.date = [startDate,endDate];
this.start = startDate;
this.end = endDate;
},
calculationPrice(){ // 计算总金额
this.date = [this.start,this.end];
let price = Number(this.curFee.price);
let tPrice = price;
this.curFee.MONTHS = [];
if(this.curFee.cycle == 1){ //按周期算
tPrice = 0;
if(this.date){
let months = this.getMonthBetween(this.date[0],this.date[1]);
console.log('months',months);
if(months.length == 1){ //不跨月
let day = this.getDaysBetween(this.date[0],this.date[1]);
tPrice = Number(tPrice) + (Number(price)/months[0].days) * day;
this.curFee.MONTHS.push({
year: months[0].year,
month: months[0].month,
money: (Number(price)/months[0].days) * day
});
}else{
for (let o in months){
let start = this.date[0];
let end = this.date[1];
let pri = 0;
if(start >= months[o].start){
let sarr = start.split('-');
let day = months[o].days - Number(sarr[2]) + 1;
tPrice = Number(tPrice) + (Number(price)/months[o].days) * day;
pri = (Number(price)/months[o].days) * day;
}
if(end <= months[o].end){
let earr = end.split('-');
let day = Number(earr[2]);
tPrice = Number(tPrice) + (Number(price)/months[o].days) * day;
pri = (Number(price)/months[o].days) * day;
}
if(start < months[o].start && end > months[o].end){
tPrice = Number(tPrice) + Number(price);
pri = Number(price);
}
this.curFee.MONTHS.push({
year: months[o].year,
month: months[o].month,
money: pri.toFixed(2)
});
}
}
}else{
tPrice = 0;
}
}
if(this.curFee.area == 1){ //按面积算
tPrice = Number(tPrice) * Number(this.curData.area);
for(let o in this.curFee.MONTHS){
this.curFee.MONTHS[o].money = (Number(this.curFee.MONTHS[o].money) * Number(this.curData.area)).toFixed(2);
}
}
if(this.curFee.cycle == 0 && this.curFee.area == 0){
tPrice = price;
}
this.totalPrice = Number(tPrice).toFixed(2);
console.log('change',this.totalPrice,this.curFee);
},
selectData(item){
this.curData = item;
this.curFee = null;
this.curRet = null;
},
selectFee(item){
this.curFee = item;
this.curRet = null;
this.remark = '';
if(item.cycle == 1){
this.initDate();
}else{
this.date = '';
}
this.calculationPrice();
},
changeDate(){
this.calculationPrice();
},
saveBtn(){
// 先检查是否有该科目的单子，有提示错误
for(let o in this.selData){
if(this.curData.type == this.selData[o].type && this.curData.id == this.selData[o].id && this.curFee.id == this.selData[o].fee_id){
this.$message.error('该科目已存在记录');
return false;
}
}
this.selData.push({
type: this.curData.type,
cate: this.curData.cate,
id: this.curData.id,
title: this.curData.title,
area: this.curData.area,
fee_id: this.curFee.id,
fee_title: this.curFee.title,
fee_parent_title: this.curFee.parent_title,
price: this.curFee.price,
months: this.curFee.MONTHS,
total_price: this.totalPrice,
start: this.start,
end: this.end,
remark: this.remark
});
},
delSelectData(index){
let oldoptions = JSON.parse(JSON.stringify(this.selData));
let newoptions = [];
for(let o in oldoptions){
if(o != index){
newoptions.push(oldoptions[o]);
}
}
this.selData = JSON.parse(JSON.stringify(newoptions));
},
submitOrder(){ //生成欠费单
if(this.selData.length == 0){
this.$message.error('请选择收费科目');
return false;
}
if(!this.lastDate){
this.$message.error('请选择最晚缴费日期');
return false;
}
if(this.flag){
return false;
}
this.flag = true;
let that = this;
$.ajax({
type: 'POST',
url: '{:url("feeSave")}',
dataType: 'json',
data:{
houseId: this.houseId,
lastDate: this.lastDate,
order: JSON.stringify(this.selData)
},
success: function(res){
if(res.code == 1){
window.location.href = '{:url("HousePay/detail",[],"")}/id/'+res.data.id;
}else{
that.$message.error(res.msg);
that.flag = false;
}
},
error: function(){
that.$message.error('操作失败');
that.flag = false;
return false;
}
});
},
getFullDate(targetDate) { // 获取时间
var D, y, m, d;
if (targetDate) {
D = new Date(targetDate);
y = D.getFullYear();
m = D.getMonth() + 1;
d = D.getDate();
} else {
y = fullYear;
m = month;
d = date;
}
m = m > 9 ? m : '0' + m;
d = d > 9 ? d : '0' + d;
return y + '-' + m + '-' + d;
},
getDaysBetween(dateString1,dateString2){ // 获取两个日期之间的天数
var startDate = Date.parse(dateString1);
var endDate = Date.parse(dateString2);
if (startDate>endDate){
return 0;
}
if (startDate==endDate){
return 1;
}
var days=(endDate - startDate)/(1*24*60*60*1000);
return days + 1;
},
getMonthBetween (start, end) {
var result = [];
var s = start.split("-");
var e = end.split("-");
var min = new Date();
var max = new Date();
min.setFullYear(s[0], s[1] * 1 - 1, 1);//开始日期
max.setFullYear(e[0], e[1] * 1 - 1, 1);//结束日期
var curr = min;
while (curr <= max) {
let month = curr.getMonth() + 1;
let year = curr.getFullYear();
let endOfMonth = new Date(year, month, 0).getDate(); // 获取本月最后一天
let endDate = this.getFullDate(curr.setDate(endOfMonth));//当月最后一天
let startDate = this.getFullDate(curr.setDate(1));//当月第一天
result.push({
year: year,
month: month,
days: this.getMonthDay(year,month),
start: startDate,
end: endDate
});
curr.setMonth(month);
}
return result;
},
getMonthDay(year, month){
var d = new Date(year, month, 0);
return d.getDate();
},
}
});
</script>
{/block}