<template>
<div class="flexOne">
<div class="query-box" style="border-bottom:none;">
<ul>
<li>
<span>
<em>{{$t('pub.date')}}</em>
<el-date-picker class="w150" clearable
v-model="msg.dStartTime"
type="date"
:picker-options="pickerOptions1"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:placeholder="$t('admin.admin_choDate')">
</el-date-picker>
-
<el-date-picker class="w150" clearable
v-model="msg.dEtartTime"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions2"
:placeholder="$t('admin.admin_choDate')">
</el-date-picker>
</span>
</li>
<li><span><em>任务名称</em><el-input v-model="msg.TaskName"></el-input></span></li>
<li>
<span>
<em>完成状态</em>
<el-select v-model="msg.TaskStatus" filterable :placeholder="$t('pub.pleaseSel')">
<el-option v-for="item in dataList"
:label="item.name"
:value="item.id"
:key='item.id'>
</el-option>
</el-select>
</span>
</li> <li>
<span>
<em>发起者</em>
<el-select filterable v-model='msg.CreateBy'>
<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><input type="button" class="hollowbtn" :value="$t('pub.searchBtn')" @click="tPageIndex(),getList()"/></li>
</ul>
</div>
<div class="saleTaskHistoryList" v-if="DataList.length!=0">
<div class="ListItem" v-for="(item,index) in DataList" v-loading="loading">
<div class="divOne _red" v-if="item.departmentFinishNum<item.departmentTaskNum"></div>
<div class="divOne _green" v-else-if="item.departmentFinishNum>=item.departmentTaskNum" ></div>
<div class="divTwo">
{{item.taskName}}
</div>
<div class="divThree"></div>
<div class="divFour">
<div class="name">
<img v-if='!item.createPhoto' src="../../assets/img/litheader.png"/>
<img v-if='item.createPhoto' :onerror="defaultImg" :src='item.createPhoto'/>
{{item.createBy}}
</div>
<div class="icon">
<i class="iconfont icon-ico-shijianfanwei"></i>
</div>
<div class="time">
{{item.datetimeStr}}
</div>
<div class="progress">
<p v-if="item.departmentFinishNum<item.departmentTaskNum"><el-progress :stroke-width='ba' :percentage="(item.departmentFinishNum/item.departmentTaskNum)*100" color='#e95252' :show-text='false' ></el-progress></p>
<p v-else-if="item.departmentFinishNum>=item.departmentTaskNum" ><el-progress :stroke-width='ba' :percentage="(item.departmentFinishNum/item.departmentTaskNum)*100" color='#47bf8c' :show-text='false'></el-progress></p>
<p class="smallfont">{{item.departmentFinishNum}}/{{item.departmentTaskNum}}{{item.Unit}}</p>
</div>
<div class="state">{{item.departmentTaskNum>item.departmentFinishNum?'未完成':'超额完成'}}</div>
</div>
<div class="divThree"></div>
<div class="divFive">
<div class="list shortcutsDiv">
<div v-if='item.mvpList.length==0&&item.mupList.length==0'>无人完成任务</div>
<div class="mvp" v-for="o in item.mvpList">
<img class="mvpIcon" src="../../assets/img/mvpIcon.png" />
<img v-if='!o.photo' src="../../assets/img/litheader.png"/>
<img v-if='o.photo' :onerror="defaultImg" :src='o.photo'/>
<p><span class="mvpSpan">MVP</span></p>
<p>{{o.name==''?"无人":o.name}}</p>
</div>
<div class="mup" v-for="o in item.mupList">
<img class="mupIcon" src="../../assets/img/mupIcon.png" />
<img v-if='!o.photo' src="../../assets/img/litheader.png"/>
<img v-if='o.photo' :onerror="defaultImg" :src='o.photo'/>
<p><span class="mupSpan">MUP</span></p>
<p>{{o.name==''?"无人":o.name}}</p>
</div>
</div>
<div style="float: right!important;padding: 30px 10px 0 0;">
<input type="button" class="normalBtn" @click="goUrl('saleTaskDetail',item.id)" value="详情" />
</div>
</div>
</div>
<div>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize
:total=total>
</el-pagination>
</div>
</div>
<div class="noData" v-else>
暂无数据
</div>
</div>
</template>
<script>
export default {
data(){
return{
PersonOrDepartment:0,
msg:{
pageIndex:1,
pageSize:6,
dStartTime:'',
dEtartTime:'',
TaskName:'',
CreateBy:'',
TaskStatus:0,
PersonOrDepartment:0
},
employeeMsg: {
RB_Group_id:'0',
RB_Branch_id:'0',
departmentId:'0',
IsLeave:'-1'
},
pickerOptions1:{
disabledDate: (time) => {
let endTime = new Date(this.msg.dEtartTime);
return endTime.getTime()<time.getTime();
}
},
pickerOptions2:{
disabledDate: (time) => {
let startTime = new Date(this.msg.dStartTime);
return startTime.getTime()>=time.getTime()
}
},
dataList:[
{
id:0,
name:'全部'
},{
id:1,
name:'未完成'
},{
id:2,
name:'已完成'
}
],
employeeList: [],
DataList:[],
defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
total:0,
ba:8,
currentPage:1,
loading:true,
text:'',
dialogTitle:'',
ed:false
}
},methods:{
getEmployee() {
this.apipost('app_get_company_employee', this.employeeMsg, res => {
if(res.data.resultCode == 1) {
this.employeeList = res.data.data;
}
}, err => {})
},
getList(){ //获取列表
this.loading = true
this.apipost('TaskManagemnet_post_GetPageList',this.msg,res=>{
if(res.data.resultCode==1){
this.total = res.data.data.count;
let data = res.data.data.pageData;
this.DataList = data
this.loading = false;
}else{
this.$message.error(res.data.message)
this.loading = false;
}
},err=>{})
},
tPageIndex() {//查询初始化页码
this.msg.pageIndex = 1;
this.currentPage = 1
},
handleCurrentChange(val) {//翻页功能按钮
this.msg.pageIndex = val;
this.getList();
},
goUrl(path, id) {
this.$router.push({ path: path, query: { id: id,PersonOrDepartment:this.$route.query.PersonOrDepartment } });
}
},mounted(){
this.getEmployee()
this.getList()
let userInfo=this.getLocalStorage();
this.employeeMsg.RB_Group_id= userInfo.RB_Group_id; //集团
this.employeeMsg.RB_Branch_id=userInfo.RB_Branch_id; //公司
this.PersonOrDepartment=this.msg.PersonOrDepartment=this.$route.query.PersonOrDepartment;
}
}
</script>
<style>
.saleTaskHistoryList .ListItem ._red {
background-color: #e95252;
}
.saleTaskHistoryList .ListItem ._green {
background-color: #47bf8c;
}
.saleTaskHistoryList{width: 1660px; min-height: 300px; }
.saleTaskHistoryList .ListItem{width:1660px; height: 100px; margin-top: 20px; font-size: 14px; color: #333;}
.saleTaskHistoryList .ListItem:hover{box-shadow: 2px 2px 5px rgba(0,0,0,.1);}
.saleTaskHistoryList .ListItem>div{float: left;}
.saleTaskHistoryList .ListItem .divOne{width: 5px; height: 100px; border-radius: 4px 0 0 4px;}
.saleTaskHistoryList .ListItem .divTwo{width: 130px; height: 100px; background: #fff; border-radius: 0 8px 8px 0; padding:30px 20px; line-height: 20px;}
.saleTaskHistoryList .ListItem .divThree{ height:84px; margin-top: 8px; width: 1px; border-left: 1px dashed #DCDFE6;}
.saleTaskHistoryList .ListItem .divFour{width: 760px; height: 100px; background: #fff; border-radius:8px; padding:30px;}
.saleTaskHistoryList .ListItem .divFour>div{float: left;}
.saleTaskHistoryList .ListItem .divFour .name{width: 120px; line-height: 40px;}
.saleTaskHistoryList .ListItem .divFour .name>img{width: 40px; height: 40px; border-radius: 20px; float: left; margin-right: 10px;}
.saleTaskHistoryList .ListItem .divFour .icon{color: #D9D9D9; width: 20px;}
.saleTaskHistoryList .ListItem .divFour .time{color: #666; width: 92px;}
.saleTaskHistoryList .ListItem .divFour .progress{color: #666; width:400px; padding: 0 50px;}
.saleTaskHistoryList .ListItem .divFour .progress>p{line-height:14px; padding: 5px 0;}
.saleTaskHistoryList .ListItem .divFour .state{font-weight: bold; color: #E95252;}
.saleTaskHistoryList .ListItem .divFive{width: 760px; height: 100px; overflow-x:auto; background: #fff; border-radius:8px 4px 4px 8px; padding: 0 10px 0 30px;}
.saleTaskHistoryList .ListItem .divFive>div{float: left;}
.saleTaskHistoryList .ListItem .divFive .list{width: 600px; height: 100px; overflow-x: auto; overflow-y: hidden; white-space:nowrap; padding-top:30px;}
.saleTaskHistoryList .ListItem .divFive .list>div{display: inline-block;}
.saleTaskHistoryList .ListItem .divFive .mvp{width: 120px; position: relative;}
.saleTaskHistoryList .ListItem .divFive .mup{width: 120px; position: relative}
.saleTaskHistoryList .ListItem .divFive .mvp .mvpIcon{position: absolute; border-radius: 0; border: none; width: 32px; height:16px; left: 4px; top:-10px; z-index: 50;}
.saleTaskHistoryList .ListItem .divFive .mup .mupIcon{position: absolute; border-radius: 0; border: none; width: 32px; height:16px; left: 4px; top:-10px; z-index: 50;}
.saleTaskHistoryList .ListItem .divFive .mvp>img{width: 40px; height: 40px; border:2px solid #FAA915; border-radius: 20px; float: left; margin-right: 10px;}
.saleTaskHistoryList .ListItem .divFive .mvp .mvpSpan{background:#FAA915; color: #fff; padding: 0 3px; border-radius: 4px;}
.saleTaskHistoryList .ListItem .divFive .mup>img{width: 40px; height: 40px; border:2px solid #ccc; border-radius: 20px; float: left; margin-right: 10px;}
.saleTaskHistoryList .ListItem .divFive .mup .mupSpan{background:#ccc; color: #fff; padding: 0 3px; border-radius: 4px;}
</style>