<style>
/* 日期样式开始 */
.visitMonthStatistics .month ul {
border-radius: 4px 4px 0 0;
width: 100%;
height: 50px;
line-height: 50px;
background: #e95252;
margin: 0;
padding: 0;
text-align: center;
}
.visitMonthStatistics .year-month {
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.visitMonthStatistics .year-month > input {
width: 100px;
float: left;
}
.visitMonthStatistics .arrow {
padding: 10px;
font-style: normal;
cursor: pointer;
}
.visitMonthStatistics .monthminus {
position: absolute;
left: 0px;
top: 15px;
}
.visitMonthStatistics .monthadd {
position: absolute;
right: 21px;
top: 15px;
}
.visitMonthStatistics .month ul li {
font-size: 18px;
color: #fff;
position: relative;
display: inline-block;
letter-spacing: 3px;
}
.visitMonthStatistics .month ul li i {
font-size: 22px;
color: #ff7e7e;
cursor: pointer;
}
.visitMonthStatistics .month ul li > input {
text-align: center;
}
.visitMonthStatistics .weekdays {
margin: 0;
padding: 3px 0;
background-color: #3fa783;
display: flex;
width: 100%;
flex-wrap: wrap;
color: #fff;
justify-content: space-around;
}
.visitMonthStatistics .weekdays li {
display: inline-block;
width: 14.2857%;
text-align: center;
}
.visitMonthStatistics .days li:nth-child(7n-1) p {
color: #e95252 !important;
}
.visitMonthStatistics .days li:nth-child(7n) p {
color: #e95252 !important;
}
.visitMonthStatistics .days {
width: 100%;
padding: 0;
margin: 0;
border-left: 1px solid #dddddd;
flex-wrap: wrap;
box-sizing: border-box;
justify-content: space-around;
}
.visitMonthStatistics .days > li {
list-style-type: none;
width: 14.2857%;
height: 140px;
text-align: center;
position: relative;
font-size: 12px;
float: left;
color: #000;
box-sizing: border-box;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.visitMonthStatistics .days li > div {
height: 112px;
width: 100%;
overflow-y: auto;
text-align: left;
}
.visitMonthStatistics .days li > div > p {
border-bottom: 1px dashed #ccc;
line-height: 20px;
padding: 3px 0 3px 10px;
width: 100%;
background: #fff;
}
.visitMonthStatistics .days li > div > p:nth-child(2n) {
background: #f5f5f5;
}
.visitMonthStatistics .currentInput {
width: 120px;
height: 30px;
border-radius: 17px;
outline: none;
border: none;
color: #fff;
background: transparent;
font-size: 18px;
}
.visitMonthStatistics .days li .other-month {
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
width: 24px;
height: 17px;
font-size: 12px;
line-height: 17px;
background-color: #cccccc;
color: #fff;
}
.visitMonthStatistics .addCompany {
width: 700px;
}
.visitMonthStatistics .ckStyle {
width: 100%;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 14px;
font-weight: bold;
background: #ccc;
color: #000;
}
.visitMonthStatistics .ckStyleOther {
background: #dddddd !important;
font-weight: normal !important;
color: #999;
}
.visitMonthStatistics .el-dialog--center .el-dialog__body {
padding-top: 0;
}
.HB_Inventor {
display: block;
text-align: left;
padding-top: 8px;
}
.HB_Inventor > span {
display: block;
padding-left: 10px;
font-size: 12px;
height: 18px;
margin-bottom: 3px;
}
.visitMonthStatistics .Owe_Room {
color: #e95252;
}
.visitMonthStatistics .Used_room {
color: #13b0ae;
}
.visitMonthStatistics .otherMoth {
background: #f2f2f2;
}
.visitMonthStatistics .weekendDay {
color: #e95252;
}
.visitMonthStatistics .title {
height: 14px;
line-height: 14px;
border-left: 3px solid #e95252;
font-size: 14px;
color: #333;
text-indent: 10px;
margin: 20px 0;
}
.visitMonthStatistics .title em{margin-right: 10px;}
.visitMonthStatistics .metaLink{
background: #E3E3E3;
border-radius: 4px;
height: 28px;
line-height: 28px;
font-size: 14px;
font-weight: bold;
display: inline-block;
padding: 0 15px;
}
.visitMonthStatistics .metaLink>span{
margin-right: 5px;
}
/* 日期样式结束*/
</style>
<template>
<div class="flexOne visitMonthStatistics">
<div class="query-box Plan_Query" style="border-bottom: none;">
<ul style="overflow: initial!important">
<li><span class="fl mt10"><em>部门</em></span>
<treeselect class='w200 fl'
:options="departmentList"
@select='getEmployeeList'
v-model="DepartmentId"
:disabled="!isPrincipal"
placeholder="不限"
:normalizer="normalizer"
/>
</li>
<li><span><em>员工</em><el-select :disabled="!isPrincipal" filterable v-model='msg.CreateBy' @change='getName();GetHoltelInventory()'>
<el-option :label="$t('pub.unlimitedSel')" value='-1'></el-option>
<el-option v-for='item in employeeList'
:label='item.name'
:value='item.empId'
:key='item.empId'>
</el-option>
</el-select>
</span></li>
<li style="margin-right:50px;">
<button
class="normalBtn"
type="button"
@click="GetHoltelInventory()"
>{{$t('pub.searchBtn')}}</button>
</li>
</ul>
</div>
<div class="metaLink mt5">
<span>{{currentYear}}年{{currentMonth}}月</span>
<span>{{DepartmentName}}</span>
<span>{{employeeName}}</span>
<span>拜访记录</span>
</div>
<div class="title">
<template v-for="item in SalesProcessList">
<em>
{{item.Name}}
<span class="colorE95252">{{item.VisitCount}}</span>次
</em>
</template>
</div>
<div class="month">
<ul>
<li>
<i
class="el-icon-caret-left monthminus"
@click="currentYear-=1,getDateString(),initCalendar(dateString)"
></i>
<input
type="text"
disabled="disabled"
v-model="currentYear"
class="currentInput"
@input="getDateString(),initCalendar(dateString)"
>年
<i
class="el-icon-caret-right monthadd"
@click="currentYear+=1,getDateString(),initCalendar(dateString)"
></i>
</li>
<li>
<i class="el-icon-caret-left monthminus" @click="pickPre(currentYear,currentMonth)"></i>
<input
type="text"
disabled="disabled"
v-model="currentMonth"
class="currentInput"
@input="getDateString(),initCalendar(dateString)"
>月
<i class="el-icon-caret-right monthadd" @click="pickNext(currentYear,currentMonth)"></i>
</li>
</ul>
</div>
<ul class="weekdays">
<li>{{$t('hotel.hotel_Monday')}}</li>
<li>{{$t('hotel.hotel_Tuesday')}}</li>
<li>{{$t('hotel.hotel_Wednesday')}}</li>
<li>{{$t('hotel.hotel_Thursday')}}</li>
<li>{{$t('hotel.hotel_Friday')}}</li>
<li class="weekendDay">{{$t('hotel.hotel_Saturday')}}</li>
<li class="weekendDay">{{$t('hotel.hotel_Sunday')}}</li>
</ul>
<ul class="days clearfix">
<li v-for="(dayobject,index) in days" :key="dayobject.index">
<p
class="ckStyle"
:class="{ckStyleOther:dayobject.day.getMonth()+1 != currentMonth}"
>{{dayobject.day.getDate()}} <span v-if="dayobject.day.getMonth()+1 == currentMonth">({{dayobject.TotalCount}})</span>
</p>
<div class="ownScrollbarStyle">
<p v-for="item in dayobject.listArr">
<span style="color: #0F0FCD;" v-if='item.CreateBy!=msg.CreateBy&&isPrincipal==true'>{{item.CreateByName}}</span>
<span class="color333" v-if='item.CreateBy!=msg.CreateBy'>拜访</span>
<span class="color333">{{item.CustomerName}}</span>
<span v-if="item.VisitStateStr=='未拜访'" style="color: #E95252;">{{item.VisitStateStr}}</span>
<span v-else style="color: #3FA783;">{{item.VisitStateStr}}</span>
<!--{{item}}
-->
</p>
</div>
</li>
</ul>
</div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Treeselect },
data() {
return {
normalizer(node) {
return {
id: node.DepartmentId,
label: node.DepartmentName,
children: node.ChildList,
}
},
DepartmentId:null,
DepartmentName:"",
employeeName:"",
msg: {
Year: new Date().Format("yyyy"),
Month: new Date().Format("MM"),
//操作人
CreateBy: "",
DepartmentId: "",
ExpectVisitDateTime:""
},
departmentMsg: {
RB_Group_Id: '0',
RB_Branch_Id:'-1',
Status:'0',
ParentId:'-1',
Tier:'0',
},
employeeMsg: {
RB_Group_id:'0',
RB_Branch_id:'-1',
departmentId:'0',
IsLeave:'-1',
},
departmentList:[],
employeeList:[],
SalesProcessList:[],
//线路列表
LineList: [],
defaultSelectValue: 0,
//城市列表
cityList: [],
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
//每天的机位库存
DayData: [],
//员工列表
TotalCount: 0,
TotalSeat: 0,
isPrincipal:true,
};
},
methods: {
getIsPrincipal(){
this.apipost('app_customer_GetIsPrincipal', {}, res => {
if(res.data.resultCode == 1) {
this.isPrincipal = res.data.data.IsPrincipal
if(res.data.data.IsPrincipal!=true){
this.employeeName=this.getLocalStorage().emName
this.DepartmentName=this.getLocalStorage().DepartmentName
}
}
}, err => {})
},
getDepartment() {
this.apipost('Advertising_get_GetNowDepartmentAndSubordinate',{}, res => {
if(res.data.resultCode == 1) {
this.departmentList = res.data.data;
}
}, err => {})
},
linkageEmployeeMsg(){
this.employeeMsg.departmentId=this.msg.DepartmentId
this.msg.CreateBy='-1'
this.employeeName=''
this.getEmployee()
let obj=this.departmentList.find(item=>item.DepartmentID===this.msg.DepartmentId)
if(obj)
{
this.DepartmentName=obj.DepartmentName
}else{
this.DepartmentName=''
}
},
getEmployeeList(node,id){
this.DepartmentName=node.DepartmentName
this.employeeName=''
this.msg.CreateBy='-1'
this.msg.DepartmentId=this.employeeMsg.departmentId=node.DepartmentId
this.getEmployee()
this.GetHoltelInventory()
},
getName(){
let obj=this.employeeList.find(item=>item.empId===this.msg.CreateBy)
if(obj)
{
this.employeeName=obj.name
}else{
this.employeeName=''
}
},
getEmployee() {
this.apipost('app_get_company_employee', this.employeeMsg, res => {
if(res.data.resultCode == 1) {
this.employeeList = res.data.data;
}
}, err => {})
},
goUrl(path, obj, name) {
this.$router.push({
path: path,
query: {
id: obj.AirLineTicketId,
blank: "y",
tab: name
}
});
},
//格式化日期
getDateString: function() {
this.dateString = this.$calendarUtils.formatDate(
this.currentYear,
this.currentMonth,
1
);
this.GetHoltelInventory();
},
initCalendar: function(cur) {
var newDays = this.$calendarUtils.createCalendar(cur);
this.currentDay = newDays.CurrentDay;
this.currentYear = newDays.CurrentYear;
this.currentMonth = newDays.CurrentMonth;
this.currentWeek = newDays.CurrentWeek;
this.days.length = 0;
var dateArray = newDays.DayArray;
for (var i = 0; i < dateArray.length; i++) {
var d = dateArray[i].day;
var dayobject = {};
dayobject.day = d;
this.days.push(dayobject);
}
},
//点击左箭头切换年月
pickPre: function(year, month) {
var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
d.setDate(0);
this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
this.initCalendar(
this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
);
this.GetHoltelInventory();
},
//点击右箭头切换年月
pickNext: function(year, month) {
var d = new Date(this.$calendarUtils.formatDate(year, month, 1));
d.setDate(35);
this.nowDate = d.getFullYear() + "-" + (d.getMonth() + 1) + "-1";
this.initCalendar(
this.$calendarUtils.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
);
this.GetHoltelInventory();
},
//点击获取酒店库存数据
GetHoltelInventory() {
this.msg.ExpectVisitDateTime = this.currentYear + "-" + this.currentMonth + "-01";
this.apipost(
"app_customer_GetMonthVisit",
this.msg,
res => {
this.SalesProcessList=res.data.data.SalesProcessList
this.DayData = res.data.data.VisitList;
this.TotalCount = 0;
this.TotalSeat = 0;
this.days.forEach(dayItem => {
let d = dayItem.day;
let myDate = this.$calendarUtils.formatDate(
d.getFullYear(),
d.getMonth() + 1,
d.getDate()
);
for (var j = 0; j < this.DayData.length; j++) {
if (this.DayData[j].DayStr == myDate) {
dayItem.listArr = this.DayData[j].SubList;
dayItem.TotalCount = dayItem.listArr.length;
dayItem.listArr.forEach(subItem => {
this.TotalSeat += subItem.TicketNum;
});
this.TotalCount += dayItem.TotalCount;
}
}
});
this.$forceUpdate();
},
err => {}
);
},
//获取中国下面的城市列表
getCityList() {
this.apipost(
"Destination_get_GetCityListByCountryId",
{
Id: 2
},
res => {
this.cityList = res.data.data;
},
err => {}
);
},
},
mounted() {
let userInfo = this.getLocalStorage();
// this.departmentMsg.RB_Group_Id=this.employeeMsg.RB_Group_id=this.companyMsg.RB_Group_Id = userInfo.RB_Group_id; //集团
//初始化日历
let myDate = new Date();
this.currentYear = myDate.getFullYear();
this.currentMonth = myDate.getMonth() + 1;
this.getCityList();
this.initCalendar();
this.GetHoltelInventory();
this.getDepartment()
this.getEmployee()
this.getIsPrincipal()
}
};
</script>