step1
cnpm install -S ant-design-vue
cnpm install -S moment
step2
// 仅引入需要的组件和样式
import Calendar from 'ant-design-vue/lib/calendar'
import 'ant-design-vue/lib/calendar/style/css'
// ant design使用moment格式化日历等插件 http://momentjs.cn/
import moment from 'moment'
// 本地化时间插件
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
step3
<template>
<div class="app-container">
<div class="detail-container">
<p class="info_header">{{`当前选择日期: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}}</p>
</div>
<a-calendar
@change="change"
@panelChange="panelChange"
@select="onSelect"
:validRange="validRange"
id="calendar"
>
<!-- v-if="value.format('YYYY-MM-DD') ==" -->
<ul class="events" slot="dateCellRender" slot-scope="value">
<div v-if="getListData(value).length >0" style="width:200px;padding:5px 0 3px 10px; font-size:12px;heigt:80px;background:#def4f5;">
<p><i class="el-icon-info" />预计回款信息</p>
<li v-for="(item,index) in getListData(value)" :key="index">
<div @click.stop="viewInfo(item)" v-if="index < 3">
<span style="padding-right:10px;">{{item.name}}:</span><span>{{item.value}}元</span>
</div>
</li>
<p v-if="getListData(value).length >3" style="color:blue;text-align:center;height:3px;">查看更多</p>
</div>
</ul>
</a-calendar>
<el-dialog width="80%" title="资金回笼报表" :visible.sync="dialogFormVisible">
<div class="detail-container">
<p class="info_header" style="margin-left:30px;margin-bottom: 10px;">
日期: {{detailDay}}
</p>
<div v-for="(item,index) in detailList" :key="index" style="min-width:1000px;min-height:300px;background:#d4d8d347;padding:20px;margin-left:30px;margin-bottom:20px">
<div style="margin-bottom:10px;color:#313338eb;font-size: 15px;font-weight:bold;">客户： {{item.customerName}}，预计总回款金额{{item.backTotalAmount}}元</div>
<div v-for="(itemQ,i) in item.chanFlowResults" :key="i" style="margin-left:30px;">
<p>渠道：{{itemQ.channelName}}，预估回款金额{{itemQ.backTotalChnAmount}}元</p>
<el-table :data="itemQ.actyFlowResults" style="width: 100%;margin-bottom:30px;"
row-key="id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="activityNo" label="活动编码" min-width="120px" align="center"></el-table-column>
<el-table-column prop="activityName" label="活动名称" min-width="180px" align="center"></el-table-column>
<el-table-column prop="activityDate" label="活动时间" min-width="180px" align="center"></el-table-column>
<el-table-column prop="dzFlag" label="是否对账" min-width="120px" align="center"></el-table-column>
<el-table-column prop="tradeTime" label="交易发生时间" min-width="180px" align="center"></el-table-column>
<el-table-column prop="backTotalActAmount" label="预计回款金额" min-width="180px" align="center"></el-table-column>
</el-table>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import {v4} from 'uuid' // npm install -S uuid
import moment from 'moment'
const dataFormat = "YYYY-MM-DD"
export default {
data() {
return {
validRange:[moment('2020-01-01'),moment('2020-12-31')],
selectedValue: moment(new Date()),
dialogFormVisible: false,
listLoading: false,
list: [],
detailDay: '',
detailList: [],
activiteDetailList: []
}
},
created(){
this.getCurrentMonthFirstAndEnd()
},
methods: {
getCurrentMonthFirstAndEnd(){
const now = new Date(); //当前日期
const nowMonth = now.getMonth(); //当前月
const nowYear = now.getFullYear(); //当前年
//本月的开始时间
const monthStartDate = new Date(nowYear, nowMonth, 1);
//本月的结束时间
const monthEndDate = new Date(nowYear, nowMonth+1, 0);
// 当前月后的6个月日期
const sixMonthEndDate = new Date(nowYear, nowMonth+7, 0);
// const timeStar=Date.parse(monthStartDate)/1000;//s
// const timeEnd=Date.parse(monthEndDate)/1000;//s
// 格式化 当前年月第一天跟最后一天
const currentMonthFirst = moment(monthStartDate).format(dataFormat)
const currentMonthEnd = moment(monthEndDate).format(dataFormat)
// 当前月后的6个月日期最后一天
const currentMonthSixEnd = moment(sixMonthEndDate).format(dataFormat)
this.validRange = [moment(currentMonthFirst),moment(currentMonthSixEnd)]
this.getList(currentMonthFirst,currentMonthEnd)
},
getList(currentMonthFirst,currentMonthEnd) {
this.listLoading = true
const param = {
startDate: currentMonthFirst, //当月第一天
endDate: currentMonthEnd ////当月最后一天
}
this.$HttpPost(this.$api.fundsWithdrawalMenuList, param).then(res => {
if (res.data.code == '000') {
this.list = res.data.content
setTimeout(() => {
this.listLoading = false
}, 1.5 * 100)
} else {
this.$error(res.data.desc)
}
}).catch(err => {
})
},
// 详情页
getDetail(selectDay) {
this.listLoading = true
const param = {
dateStr: selectDay, //回款日期
}
this.$HttpPost(this.$api.fundsWithdrawalMenuDetail, param).then(res => {
if (res.data.code == '000') {
this.dialogFormVisible = true
let data = res.data.content
data.forEach(item=>{
item.chanFlowResults.forEach(itemQ=>{
itemQ.actyFlowResults.forEach(itemA => {
itemA.hasChildren = true
itemA.id = v4() // 避免key重复
})
})
})
this.detailList = data
} else {
this.$error(res.data.desc)
}
})
},
getListData(value) {
// 格式化当前日期
const day = moment(value).format(dataFormat)
// 匹配当前日期对应的事件组
const dayContent = this.selectDayContent(day)
// 渲染对应日历空档日期内容
if(dayContent){
return dayContent.infoList
}
return []
},
selectDayContent(day){
return this.list.find(item=>item.day === day)
},
viewInfo(item){
// this.$message({
// message: `${item.name} ${item.value}, 阻止事件冒泡`,
// type: 'success'
// });
},
panelChange(value){
// 日历切换，如日历测翻了一页（4月=》5月）
const now = new Date(value); //当前日期
const nowMonth = now.getMonth(); //当前月
const nowYear = now.getFullYear(); //当前年
//本月的开始时间
const monthStartDate = new Date(nowYear, nowMonth, 1);
//本月的结束时间
const monthEndDate = new Date(nowYear, nowMonth+1, 0);
// 格式化 当前年月第一天跟最后一天
const currentMonthFirst = moment(monthStartDate).format(dataFormat)
const currentMonthEnd = moment(monthEndDate).format(dataFormat)
},
onSelect(value){
// 选中某一天
const day = moment(value).format(dataFormat)
const dayContent = this.selectDayContent(day)
this.selectedValue = value;
// 这天有消息备注
if(dayContent){
console.log(dayContent,'dayContent')
this.getDetail(dayContent.day)
this.detailDay = day
}
},
change(value){},
// async await ，替换 then 的回调
async load(row, treeNode, resolve) { // 函数最前添加 async，指明函数使用 await
const param = {
customerNo: row.customerNo, //客户编号
channelNo: row.channelNo, //渠道编号
activityNo: row.activityNo, //活动编号
dateStr: row.paymentPeriod //活动日期
}
const res = await this.$HttpPost(this.$api.fundsWithdrawalMenuActiveDetail, param)
if(res && res.data.content){
const data = res.data.content.map(item => {
return {
id: v4(), // 避免key重复
dzFlag: item.dzFlag, //是否需要对账
tradeTime: item.tradeTime, //交易发生时间
backTotalActAmount: item.backTotalActAmount //预计回款金额
}
})
resolve(data)
}
}
},
};
</script>
<style scoped>
.events {
list-style: none;
margin: 0;
padding: 0;
}
.events .ant-badge-status {
overflow: hidden;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
font-size: 12px;
}
.notes-month {
text-align: center;
font-size: 28px;
}
.notes-month section {
font-size: 28px;
}
.ant-fullcalendar-fullscreen .ant-fullcalendar-date {
height: 138px;
}
</style>
浙公网安备 33010602011771号