DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/JobPerformance/list.vue

 <template>
 	<view class="page">
 		<!-- 主列表页 -->
 		<view :class="sideOpen ? 'show' : ''" class="mainpage" >
			<view class="timeTable_sec1">
				<view class="tSec1Box" id="weekTime">
					<text class="text-xxl cuIcon cuIcon-back" @click="timeTap(1)"></text>
						<text style="margin: 0;">{{searchData.IssueYear}}</text>
						<text>年</text>
						<text style="margin: 0;">{{searchData.IssueMonth}}</text>
						<text>月</text>
					<text class="text-xxl cuIcon cuIcon-right" @click="timeTap(2)"></text>
				</view>
				
				<view style="text-align: center;font-size: 60rpx;margin-top: 15rpx;color: #ffffff;">
					{{list.length > 0 ? list[0].PerformanceTotalScore +  parseFloat(list[0].HolidayJobPerformance) || 0 : 0}}
				</view>
				
				<view style="text-align: center;font-size: 20rpx;margin-top: 15rpx;color: #94d4ff;">
					<text style="margin: 0;">{{searchData.IssueYear}}</text>
					<text>年</text>
					<text style="margin: 0;">{{searchData.IssueMonth}}</text>
					<text>月常规工作绩效</text>
				</view>
				
			</view>
			
			<view>
				<view class="item-titlewrap" @click="GoTosingle(1)">
					<text>月绩效考核分合计</text>
					<text>{{list.length > 0 ? list[0].PerformanceTotalScore || 0 : 0}}  <text class="text-xxl cuIcon cuIcon-right" style="font-size: 16px;" ></text>  </text>
				</view>
				<view class="item-titlewrap">
					<text>假期工作绩效</text>
					<text>{{list.length > 0 ? list[0].HolidayJobPerformance || 0 : 0}}  <text class="text-xxl cuIcon cuIcon-right" style="font-size: 16px;" ></text>  </text>
				</view>
			</view>
			
			
 		</view>
 
 	</view>
 </template>
 
 <script>
 	import moment from 'moment'
 	import get from 'lodash/get'
 	import set from 'lodash/set'
 	import pickBy from 'lodash/pickBy'
 	import mapValues from 'lodash/mapValues'
 	import common from '@/common/js/common.js'
 	export default {
 		data() {
 			return {
 				// 表单结构
 				scheme: {
					
 				},
 
 				// 筛选菜单值
 				searchData: {
 					Sqlparam: 1,
 					IssueYear: '',
 					IssueMonth: ''
 				},
 				defaultQueryData: {},
 				queryData: {
 					keyword: ''
 				},
 
 				// 数据源
 				dataSource: {
 					F_CustomerId: []
 				},
 
 				// 页面相关参数
 				ready: false,
 				tips: '加载中…',
 				loadState: '向下翻以加载更多',
 				sideOpen: false,
 
 				// 列表条目与分页信息
 				page: 1,
 				total: 2,
 				list: [],
 			}
 		},
 
 		async onLoad() {
 			await this.init()
 		},
 
 		onUnload() {
 			this.OFF('invoice-list-change')
 		},
 
 		methods: {
 			// 页面初始化
 			async init() {
 				let _this = this;
 				let date = new Date()
 				_this.searchData.IssueYear = date.getFullYear();
 				_this.searchData.IssueMonth = date.getMonth()+1;
 				this.ON('invoice-list-change', this.refreshList)
 				
 				await Promise.all([
 					// 加载 F_CustomerId 字段的数据源：客户信息
 					// this.FETCH_DATASOURCE('crmCustomer').then(result => {
 					//   this.dataSource.F_CustomerId = result.data.map(t => ({ text: t.f_fullname, value: t.f_customerid }))
 					// }),
 					// 拉取列表信息
 					this.fetchList()
 				])
 
 				this.defaultQueryData = this.COPY(this.queryData)
 				this.ready = true
 			},
 			// 切换时间
 			timeTap(num) {
 				let _this = this;
 				if (num == 1) {
 					if(_this.searchData.IssueMonth == 1){
 						_this.searchData.IssueYear = _this.searchData.IssueYear - 1;
 						_this.searchData.IssueMonth = 12
 					}else{
 						_this.searchData.IssueMonth = _this.searchData.IssueMonth - 1;
 					}
 					
 				} else {
 					if(_this.searchData.IssueMonth == 12){
 						_this.searchData.IssueYear = _this.searchData.IssueYear + 1;
 						_this.searchData.IssueMonth = 1
 					}else{
 						_this.searchData.IssueMonth = _this.searchData.IssueMonth + 1;
 					}
 				}
 				
 				this.fetchList()
 			},
 			// 拉取列表
 			async fetchList(isConcat = true) {
 				// if (this.page > this.total) {
 				// 	return
 				// }
 				const result = await this.HTTP_GET(
 					'learun/adms/JobPerformance/getlist', {
 						pagination: {
 							rows: 10,
 							page: this.page,
 							sidx: 'CreateTime',
 							sord: 'DESC'
 						},
 						queryJson: JSON.stringify(this.searchData)
 					},
 					'加载数据时出错'
 				)
 
 				if (!result) {
 					return
 				}
 
 				this.total = result.total
 				// this.page = result.page + 1
 				// this.list = isConcat ? this.list.concat(result.rows) : result.rows;
 				this.list = result.rows
 				this.tips = `已加载 ${Math.min(result.page, result.total)} / ${result.total} 页，共 ${result.records} 项`
 				this.loadState = result.page >= result.total ? '已加载所有项目' : '向下翻以加载更多'
 			},
 
 			// 刷新清空列表
 			async refreshList(isConcat = true) {
 				this.page = 1
 				this.total = 2
 				this.list = []
 
 				await this.fetchList(isConcat);
 			},
 
 			// 列表下拉
 			pullDown() {
 				this.refreshList().then(() => {
 					this.$refs.list.stopPullDown()
 				})
 			},
 
 			// 点击「编辑」、「查看」、「添加」、「删除」按钮
 			action(type, item) {
 				switch (type) {
 					default:
 					case 'create':
 						this.NAV_TO('./single?type=create')
 						return
 
 					case 'view':
 						this.NAV_TO('./single?type=view&&id=' + item.Id, item, true)
 						return
 
 					case 'edit':
 						this.NAV_TO('./single?type=edit', item, true)
 						return
 				}
 			},
 
 			// 显示列表中的标题项
 			displayListItem(item, field) {
 				const fieldItem = this.scheme[field]
 				const value = item[field]
 
 				switch (fieldItem.type) {
 					case 'currentInfo':
 					case 'organize':
 						switch (fieldItem.dataType) {
 							case 'user':
 								return get(this.GET_GLOBAL('user'), `${value}.name`, '')
 							case 'department':
 								return get(this.GET_GLOBAL('department'), `${value}.name`, '')
 							case 'company':
 								return get(this.GET_GLOBAL('company'), `${value}.name`, '')
 							default:
 								return value || ''
 						}
 
 						case 'radio':
 						case 'select':
 							const selectItem = this.dataSource[field].find(t => t.value === value)
 							return get(selectItem, 'text', '')
 
 						case 'checkbox':
 							if (!value || value.split(',').length <= 0) {
 								return ''
 							}
 							const checkboxItems = value.split(',')
 							return this.dataSource[field]
 								.filter(t => checkboxItems.includes(t.value))
 								.map(t => t.text)
 								.join('，')
 
 						case 'datetime':
 							if (!value) {
 								return ''
 							}
 							return moment(value).format(Number(fieldItem.dateformat) === 0 ? 'YYYY年 M月 D日' :
 								'YYYY-MM-DD HH:mm')
 
 						default:
 							return value || ''
 				}
 			},
 
 			// 设置搜索条件
 			async searchChange() {
 				const result = {}
 
 				const queryObj = pickBy(this.queryData, t => (Array.isArray(t) ? t.length > 0 : t))
 				Object.assign(result, mapValues(queryObj, t => (Array.isArray(t) ? t.join(',') : t)))
 
 				this.searchData = result
 				await this.refreshList(false);
 			},
 
 			// 点击「清空搜索条件」按钮
 			reset() {
 				this.queryData = this.COPY(this.defaultQueryData)
 				this.searchChange()
 			},
			
			// 点击跳转到详情页
			GoTosingle(type){
				let _this = this
				if(_this.list.length>0){
					uni.navigateTo({
					    url: './single?type='+type+'&item='+encodeURIComponent(JSON.stringify(_this.list))
					});
				}else{
					uni.showToast({
					    title: '当月无绩效',
					    icon: 'none',
					    duration: 2000
					})
				}
				
				
			}
 		}
 	}
 </script>
 
 <style lang="less" scoped>
 	@import '~@/common/css/sidepage.less';
 	@import '~@/common/css/customlist.less';
 	
 	.customlist-item{
 		// padding: 0;
 		padding-left: 0;
 		padding-right: 0;
		padding-top: 0;
		padding-bottom: 0;
		border-top: none !important;
 	}
 	.customlist-item-field{
 		padding-left: 10px;
		padding-right: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 52px;
		
		
		background-color: #ffffff;
		justify-content: space-between;
		border-bottom: 0.5px solid #eee;
		
		
 	}
 	.page {
 		background: #fff;
 	}
 
 	.timeTable_sec1 {
 		padding: 14px 12px;
 		text-align: center;
 		background: #0075c4;
 		color: #94d4ff;
 		font-size: 0;
 	}
 	
 	.tSec1Box>* {
 		display: inline-block;
 		vertical-align: middle;
 	}
 	
 	.tSec1Line {
 		height: 13px;
 		width: 1px;
 		background: #94d4ff;
 		margin: 0 10px;
 	}
 	
 	.tSec1Box {
 		font-size: 15px;
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 	}
 	
 	#semester {
 		margin-bottom: 10px;
 	}
 	
 	#weekTime {}
 	
 	#weekTime text {
 		margin: 0 10px;
 	}
 	
 	.tSec1Box>text {
 		width: auto;
 		text-align: center;
 		line-height: 22px;
 	}
 	
 	.tSec1Box image {
 		width: 15px;
 		margin-right: 2px;
 	}
 	
 	.tSec1Box text:after {
 		display: none;
 	}
 	.item-title{
 		color: #000;
 		font-size: 16px;
 		line-height: 36px;
 		background: #f1f1f1;
 		padding-left: 5px;
 	}
	.item-titlewrap{
		color: #000;
		font-size: 16px;
		line-height: 50px;
		background: #f1f1f1;
		padding:0 10px;
		border-bottom: 1rpx solid #ddd;
		display: flex;
		justify-content: space-between;
	}
 </style>