243 lines
6.8 KiB
Vue
243 lines
6.8 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="uni-flex uni-row">
|
||
<view class="otherFixed" >
|
||
<view class="text" style="width:90% !important" @click="filterDate">{{timeData.begin==''?'选择时期':(timeData.begin+'~'+timeData.end)}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="example-body" v-if="listCards.length>0">
|
||
<view v-for="(item,index) in listCards" :key="index" class="example-box" style="position: relative;flex: 1;" >
|
||
<view class="uni-common-mt">
|
||
<view class="uni-list">
|
||
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
|
||
<view class="uni-padding-wrap">
|
||
<view class="uni-flex uni-row">
|
||
<view class="mydefineText" style="width: 200upx;">所属时期</view>
|
||
<view class="mydefineText rightText">{{item.monthDate}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
|
||
<view class="uni-padding-wrap">
|
||
<view class="uni-flex uni-row">
|
||
<view class="mydefineText" style="width: 200upx;">员工姓名</view>
|
||
<view class="mydefineText rightText">{{item.employeeName}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-for="(p,index) in nameCards" :key="index">
|
||
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
|
||
<view class="uni-padding-wrap">
|
||
<view class="uni-flex uni-row">
|
||
<view class="mydefineText" style="width: 200upx;">{{p.name}}</view>
|
||
<view class="mydefineText rightText">{{item[p.property]}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<uni-calendar ref="calendar" :lunar="false" :range="true" @confirm="confirmDate" @cancel='cancleData'/>
|
||
<uni-load-more :status="loading_status"></uni-load-more>
|
||
<view class="goHome" @click='goMain()'>
|
||
<img src="../../static/img/gohome.png">
|
||
</view>
|
||
|
||
</view>
|
||
<view class="example-body" v-else>
|
||
<no-record ></no-record>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
|
||
import noRecord from '@/components/xinsoft-no-record/xinsoft-no-record';
|
||
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
|
||
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
|
||
import {
|
||
config
|
||
} from '../../request/js/config.js'
|
||
export default {
|
||
components: {
|
||
noRecord,uniLoadMore,mpvuePicker,uniCalendar,
|
||
},
|
||
data() {
|
||
return {
|
||
fixed: true,
|
||
pageno:1,//当前第几页
|
||
pagesize:5,//每页加载数据条数
|
||
id:'',
|
||
config:config,
|
||
deviceInfo:{},
|
||
filterResult:{},
|
||
listCards: [],
|
||
nameCards:[],
|
||
search_data: {
|
||
pageno: 1,
|
||
pagesize: 10000,
|
||
isShowSalaryAccounting:1
|
||
},
|
||
loading_status: 'more',//more（loading前）、loading（loading中）、noMore（没有更多了）
|
||
//日历变量。
|
||
timeData: {
|
||
begin: "",
|
||
end: ''
|
||
},
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
var _this = this;
|
||
uni.getStorage({
|
||
key: 'userInfo',
|
||
success: function (res) {
|
||
console.log(res.data)
|
||
_this.id = res.data.userId
|
||
}
|
||
});
|
||
},
|
||
mounted() {
|
||
this.getName()
|
||
this.$nextTick(function(){
|
||
this.getAccounting()
|
||
})
|
||
|
||
},
|
||
methods: {
|
||
// 获取动态字段
|
||
getName() {
|
||
this.$http.request({
|
||
url: '/apis/salary/project/getProjectList',
|
||
paramsBody: this.search_data,
|
||
})
|
||
.then(res=> {
|
||
console.log(res.data)
|
||
if(res.data.code ==0) {
|
||
this.nameCards = res.data.data;
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
|
||
getAccounting() {
|
||
this.filterResult.pageno = this.pageno;
|
||
this.filterResult.pagesize = this.pagesize;
|
||
this.filterResult.userId = this.id;
|
||
this.filterResult.startTime = this.timeData.begin;
|
||
this.filterResult.endTime = this.timeData.end;
|
||
this.$http.request({
|
||
url: '/apis/salaryAccounting/pageList',
|
||
paramsBody: this.filterResult,
|
||
})
|
||
.then(res => {
|
||
uni.stopPullDownRefresh();
|
||
if(!res.data.data){
|
||
this.loading_status="noMore";
|
||
}else if(res.data.data.datas.length<this.pagesize){
|
||
this.loading_status="noMore";
|
||
}else{
|
||
this.loading_status="more";
|
||
}
|
||
|
||
if (res.data.code == 0) {
|
||
this.listCards = this.listCards.concat(res.data.data.datas);
|
||
this.listCards.forEach(item => {
|
||
item.monthDate = (item.monthDate).slice(0,7)
|
||
})
|
||
}
|
||
}).catch(err => {
|
||
this.loading_status="noMore";
|
||
});
|
||
|
||
},
|
||
|
||
/*
|
||
* 日历相关方法。
|
||
*/
|
||
filterDate() {
|
||
this.$refs.calendar.open();
|
||
},
|
||
confirmDate(e) {
|
||
if (e.range.begin && e.range.end) {
|
||
this.timeData = {
|
||
begin: e.range.begin + ' 00:00:00',
|
||
end: e.range.end + ' 00:00:00'
|
||
}
|
||
this.listCards=[];
|
||
this.pagenumber=1;
|
||
this.loading_status="more";
|
||
this.getAccounting();
|
||
}
|
||
},
|
||
/**
|
||
* 对日期进行加减操作 该方法不会修改传入的Date对象
|
||
* @param date 如果为null 则表示为当前日期
|
||
* @param unit 单位 y:年 M:月 d:日 h:小时 m:分钟 s:秒
|
||
* @param value 增加的数值 可以为负数
|
||
* @return 返回值为修改后的新的Date对象
|
||
*/
|
||
addDate:function(date,unit,value){
|
||
date = new Date(date.replace(/-/g, "/"));
|
||
var units = {
|
||
y:'FullYear',
|
||
M:'Month',
|
||
d:'Date',
|
||
h:'Hours',
|
||
m:'Minutes',
|
||
s:'Seconds'
|
||
}
|
||
|
||
try{
|
||
if(units[unit]){
|
||
date['set'+units[unit]](date['get'+units[unit]]() + parseInt(value));
|
||
}
|
||
}catch (e){
|
||
console.error(e);
|
||
}
|
||
var day1 = new Date();
|
||
var time = date.getFullYear()+"-" + this.minTenAndZero(date.getMonth()+1) + "-" + this.minTenAndZero(date.getDate())+
|
||
" " + this.minTenAndZero(date.getHours()) + ":" + this.minTenAndZero(date.getMinutes()) + ":" + this.minTenAndZero(date.getSeconds());
|
||
return time;
|
||
},
|
||
minTenAndZero:function(value){
|
||
return value<10?('0'+value):value;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.mydefineText {
|
||
margin: 7px 5px;
|
||
height: 70upx;
|
||
line-height: 70upx;
|
||
color: #999;
|
||
font-size: 28upx;
|
||
}
|
||
.rightText{
|
||
text-align: right;
|
||
color: #333;
|
||
-webkit-flex: 1;
|
||
flex: 1;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden
|
||
}
|
||
.red{color: #f00;}
|
||
.otherFixed {
|
||
position: relative;
|
||
background: #fff;
|
||
width: 101%;
|
||
text-align: center;
|
||
color: #666;
|
||
/* position: fixed; */
|
||
z-index: 2;
|
||
height: 40px;
|
||
right: 0;
|
||
}
|
||
</style>
|
||
|