<template>
<div class="share">
<div class="header">
<div class="top-content">
<span class="iconfont icon-fanhui1" @click="back"></span>
<span>{{appMenuName}}</span>
<span class="iconfont"></span>
<!-- <span class="iconfont icon-nian2" @click="openPicker"></span> -->
</div>
</div>
<!-- <search-new @search='search'></search-new> -->
<div class="scrollLoad">
<ul
infinite-scroll-immediate-check="false"
infinite-scroll-listen-for-event
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="80"
infinite-scroll-throttle-delay="200">
<li class="item" v-for='(item,index) in listData' :key="index">
<div class="itemCardTime">
<span class="iconfont icon-daishenpi"></span>
<span class="date">
<span class="date-day">
{{item.lastApprovalTime|selectDate}}
</span>
</span>
</div>
<div class="itemCard" @click='selectItem(item)'>
<div class="top">
<span class="font">{{item.name}}</span>
<span class="date">
<span class="date-day">
<span>申请人</span>：<span>{{item.applyUserName}}</span>
</span>
</span>
</div>
<div class="collect"><span>申请原因</span>：<span class="reasonDetail">{{item.content}}</span></div>
<div class="bottom">
<span class="font">{{funStatus(item.status,item.approvalUserName)}}</span>
<span class="date">
<span class="iconfont icon-return-copy"></span>
</span>
</div>
</div>
</li>
</ul>
<div class="loadingStyle" v-show="loading==true">
<loading-pull></loading-pull>
</div>
</div>
<router-view :selectIt='selectItemData' :approvalTypeV='approvalTypeV' @backParent="backParent"></router-view>
<mt-datetime-picker
ref="picker"
type="date"
:cancelText='cancelText'
:confirmText='confirmText'
year-format="{value}"
:startDate="startDate"
v-model="valueYear" @confirm="handleConfirm">
</mt-datetime-picker>
</div>
</template>
<script>
import Vue from 'vue'
import headx from 'base/head/head-back'
import {mixins} from 'assets/js/mixins'
import { DatetimePicker } from 'mint-ui';
Vue.component(DatetimePicker.name, DatetimePicker);
import i18n from 'assets/js/vi18n/i18n.js'
import searchNew from 'base/search_new/search'
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll)
import loadingPull from 'base/loading/loadingPull'
import {Toast} from 'mint-ui';
export default {
mixins: [mixins],
i18n,
data() {
return {
timeNow:new Date().getFullYear(),
valueYear:new Date(),
startDate: new Date('2018'),
listData: [],
selectItemData: null,
cancelText:'',
confirmText:'',
curPage: 1,
pageSize: 10,
loading:false,
totalPages:1,
lastPage:false,
}
},
components: {
headx,
loadingPull,
searchNew
},
props: {
appMenuName: {
type: null
},
approvalTypeV: {
type: Number
}
},
methods: {
handleConfirm(){
this.timeNow=new Date(this.valueYear).getFullYear();
this._getData();
},
openPicker() {
this.$refs.picker.open();
},
backParent(){
/**审批后跳回 */
this.approvalTypeV = 0;
this.listData = [];
this.curPage = 1;
this._getData();
},
back() {
this.$router.push({
path: `/onlineApproval`
});
},
search(val){
let content=val.replace(/^\s+|\s+$/g,"");
this._getData(content);
},
selectItem(item){
this.selectItemData=item;
this.$router.push({
path: `/onlineApproval/onlineApprovalList/`+item.documentTypeCode
});
},
_getData() {
let vm = this;
var url = '/workbench/myList';
var status=1;
if(this.approvalTypeV==0){
status=1;
}else{
status=2;
}
let params = {
status:status,//1未审批2通过3驳回
curPage: vm.curPage - 1,
pageSize: vm.pageSize
}
this.ajaxSend(url, params).then(res => {
if(res.code==='00000000'){
if(res.payload.results.workbenchs.numberOfElements>0){
let dataList = res.payload.results.workbenchs.content;
vm.totalPages = res.payload.results.workbenchs.totalPages;
for (let i = 0; i < dataList.length; i++) {
vm.listData.push(dataList[i]);
}
}
}
})
},
loadMore() {
let vm=this;
if (vm.lastPage===true) {
return false;
}
vm.loading = true;
vm.curPage = vm.curPage + 1;
if(vm.curPage > vm.totalPages+1){
vm.loading = false;
setTimeout(() => {
Toast('已加载完所有数据');
//已经超出页码范围，标记不能再加载
vm.lastPage = true;
return false;
},500)
}else{
vm._getData();
setTimeout(() => {
vm.loading = false;
}, 2500);
}
},
funStatus(status,userName){
if(status===0||status===1){
return `等待${userName}审批`;
}else if(status===2){
return `审核通过`
}else if(status===3){
return `被${userName}驳回`;
}
},
},
created() {
this._getData();
},
filters: {
selectDate(value) {
if (value < 60) {
return value
} else {
var oDate = new Date(value);
return oDate.getFullYear() + '/' + (oDate.getMonth() + 1 > 9 ? oDate.getMonth() + 1 : '0' + (oDate.getMonth() + 1)) + '/' + (oDate.getDate() > 9 ? oDate.getDate() : '0' + oDate.getDate());
}
},
}
}
</script>
<style scoped lang="stylus">
@import '~assets/stylus/veriable.styl'
@import "~assets/stylus/mixin.styl"
.share
position absolute
top 0
bottom 0
left 0
right 0
z-index 15
background $color-background
.header
width 100%
background $color-background-head
border-bottom .0625rem solid #dadada
text-align: center
color #000
.top-content
height 3.125rem
padding-top .625rem
width 100%
display flex
justify-content space-between
align-items center
.iconfont
padding 0.625rem
width 3.75rem
color #bfbfbf
font-size .875rem
font-weight normal
.scrollLoad
position absolute
overflow hidden
width 100%
top 3.2rem
bottom 0
background #f7f8f8
overflow-y: auto;
-webkit-overflow-scrolling: touch;
ul
padding 0 0.625rem 1rem 0.625rem
.item
display flex
flex-direction column
margin 0.9375rem 0
position relative
.itemCardTime
padding-bottom .5rem
.itemCard
background white
border 1px solid #eaeaea
border-radius .375rem
padding .8rem
.top
display flex
justify-content space-between
margin-bottom 0.75rem
.font
color black
font-size 1rem
no-wrap()
.date
display flex
align-items center
font-size 0.875rem
color #bfbfbf
.bottom
display flex
justify-content space-between
padding 0.75rem 0 0 0
border-top 1px solid #eaeaea
.font
color #f7540d
font-size 1rem
no-wrap()
.date
display flex
align-items center
font-size 0.875rem
color #bfbfbf
.collect
margin .5rem 0 .3125rem 0
font-size .9375rem
color #333
.reasonDetail
line-height 1.5rem
word-break: break-all
.circle
position absolute
width 0.625rem
height 0.625rem
border-radius 50%
background #7ac143
left -1.25rem
top 0.25rem
</style>
<style lang="stylus">
.picker-items>.picker-slot:nth-child(2)
display none
.picker-items>.picker-slot:nth-child(3)
display none
</style>
