dd_pc/src/views/ranking/JfDetail.vue

<template>
	<div>
		<div class="all padding-20">
			<header class="flex-box-ce" style="padding-bottom: 20px;">
				<div style="padding-right: 20px;" class="fh" @click="$router.go(-1)">返回</div>
				<div>{{ userInfo.name }}的积分明细</div>
			</header>
			<div class="flex-box-ce" style="padding: 20px;">
				<userImage :user_name="userInfo.name" :img_url="userInfo.img_url" width="50px" height="50px"></userImage>
				<div style="padding-left: 10px;" class="flex-1">
					<div style="font-weight: 700;font-size: 18px;margin-bottom: 5px;">{{ userInfo.name }}</div>
					<div class="flex-box-ce fontColorC">
						<div v-for="(item, index) in userInfo.dept_list" :key="index">{{ item.dept_name }}<span v-if="userInfo.dept_list.length-index>1"> ， </span></div>
					</div>
				</div>
<!-- 				<el-select class="date-picker-width" size="medium" v-model="formData.source_type2" placeholder="全部">
					<el-option v-for="item in source_type" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select> -->
			</div>
			<div class="diy-tip1" style="margin-bottom: 10px;">
				<div v-if="type==1||type==3">分值：<span class="blue">{{point}} {{formData.pt_id==3? 'B分':'A分'}}</span> (当前明细不包含基础分和工龄分)</div>
				<div v-if="type==2">总分：<span class="blue">{{point}} B分</span> (包含基础分<span class="blue">{{base_point}}</span>,工龄分<span class="blue">{{service_point}}</span>)</div>
			</div>
			<!-- 表格 -->
			<div>
				<el-table :data="list" style="width: 100%;cursor: pointer;" v-loading="loading" @row-click="open_detail">
					<el-table-column prop="employee_name" label="姓名" align="left" min-width="125px">
						<template slot-scope="scope">
							<div class="flex-box">
								<userImage :user_name="scope.row.employee_name" :img_url="scope.row.employee_img_url" width="50px" height="50px"></userImage>
								<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.employee_name }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="dept" show-overflow-tooltip label="部门" align="left" min-width="120px"></el-table-column>
					<el-table-column prop="point" label="积分" align="left" min-width="120px">
						<template slot-scope="scope">
							<span :class="scope.row.point < 0 ? 'green' : 'red'">{{ scope.row.point }} {{ point_name(scope.row.pt_id) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="事件内容" align="left" min-width="280px">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" placement="top">
								<div slot="content" style="width: 400px;">{{ scope.row.remark }}</div>
								<div class="remark">{{ scope.row.remark }}</div>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column prop="rule_name" show-overflow-tooltip label="规则分类" align="left" min-width="140px"></el-table-column>
					<el-table-column prop="create_time" label="事件发生时间" align="left" min-width="140px">
						<template slot-scope="scope">
							{{ scope.row.event_time }}
						</template>
					</el-table-column>
					<el-table-column prop="source_type" label="来源" align="left" min-width="140px">
						<template slot-scope="scope">
							<span v-show="scope.row.source_type == 1">
								积分奖扣
								<span v-if="scope.row.recorder_name">({{ scope.row.recorder_name }})</span>
							</span>
							<span v-show="scope.row.source_type == 2">任务</span>
							<span v-show="scope.row.source_type == 3">积分系统分配</span>
							<span v-show="scope.row.source_type == 4">考勤系统分配</span>
							<span v-show="scope.row.source_type == 5">
								积分申请
								<span v-if="scope.row.applyor_name">({{ scope.row.applyor_name }})</span>
							</span>
							<span v-show="scope.row.source_type == 6">绩效任务包</span>
							<span v-show="scope.row.source_type == 8">积分导入</span>
							<span v-show="scope.row.source_type == 9">A分转B分</span>
							<span v-show="scope.row.source_type == 10">钉钉汇报(日志)奖扣分</span>
							<span v-show="scope.row.source_type > 10">其他</span>
						</template>
					</el-table-column>
					<el-table-column prop="update_time" label="录入时间" align="left" width="140px">
						<template slot-scope="scope">
							<!-- {{ cuttString(scope.row.create_time) }} -->
							{{ scope.row.update_time }}
						</template>
					</el-table-column>

					<template slot="empty">
						<noData></noData>
					</template>
				</el-table>
				<center class="pagination">
					<el-pagination
						background
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="formData.page"
						:page-sizes="[10, 20, 50, 100]"
						layout="total, sizes, prev, pager, next"
						:page-size="pageLimit"
						:total="total"
					></el-pagination>
				</center>
			</div>
		</div>
		<el-drawer title="事件详情" :visible.sync="detail_popup" ref="drawer" :with-header="false" :width="'500px'" direction="rtl">
			<div class="drawer_title flex-box-ce">
				<span class="flex-1">事件详情</span>
				<i  @click="detail_popup=false" style="cursor: pointer;" class="el-icon-close"></i>
			</div>
			<div class="detail_popup" v-loading="detail_loading" v-if="detail_info !== null">
				<el-row style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
					<div class="flex-box flex-v-ce">
						<userImage :user_name="detail_info.employee_name" width="50px" height="50px" fontSize="1"></userImage>
						<span style="font-size: 18px;line-height:50px; margin-left:10px;margin-right:4px;">{{ detail_info.employee_name }}</span>
						<span class="red point" v-show="detail_info.point >= 0">+{{ detail_info.point }} {{ point_name(detail_info.pt_id) }}</span>
						<span class="green point" v-show="detail_info.point < 0">{{ detail_info.point }} {{ point_name(detail_info.pt_id) }}</span>
					</div>
				</el-row>

				<el-row v-show="detail_info.rule_list">
					<el-col :span="6">事件内容</el-col>
					<el-col :span="18" v-if="detail_info.remark">{{ detail_info.remark && (detail_info.remark.customize || detail_info.remark.rule) }}</el-col>
				</el-row>

				<el-row v-show="detail_info.files && detail_info.files.length > 0">
					<el-col :span="18" :offset="6">
						<el-image
							v-for="(itme, index) in detail_info.files"
							:key="index"
							style="width: 80px; height: 80px;margin: 0 5px;"
							:src="itme"
							:preview-src-list="detail_info.files"
						></el-image>
					</el-col>
				</el-row>

				<el-row v-show="detail_info.rule_list">
					<el-col :span="6">规则分类</el-col>
					<el-col :span="18">{{ detail_info.rule_list }}</el-col>
				</el-row>

				<el-row v-show="detail_info.source_type_mark">
					<el-col :span="6">来源类型</el-col>
					<el-col :span="18">{{ detail_info.source_type_mark }}</el-col>
				</el-row>

				<el-row v-show="detail_info.recorder_name">
					<el-col :span="6">记录人</el-col>
					<el-col :span="18">{{ detail_info.recorder_name }}</el-col>
				</el-row>

				<el-row v-show="detail_info.date">
					<el-col :span="6">事件时间</el-col>
					<el-col :span="18">{{ detail_info.date }}</el-col>
				</el-row>

				<el-row v-show="detail_info.complete_task.time">
					<el-col :span="6">完成时间</el-col>
					<el-col :span="18">{{ detail_info.complete_task.time }}</el-col>
				</el-row>

				<el-row v-show="detail_info.complete_task.remark">
					<el-col :span="6">完成备注</el-col>
					<el-col :span="18">{{ detail_info.complete_task.remark }}</el-col>
				</el-row>

				<el-row v-show="detail_info.complete_task && detail_info.complete_task.files && detail_info.complete_task.files.length > 0">
					<el-col :span="18" :offset="6">
						<el-image
							v-for="(itme, index) in detail_info.complete_task.files"
							:key="index"
							style="width: 80px; height: 80px;margin: 0 5px;"
							:src="itme"
							:preview-src-list="detail_info.complete_task.files"
						></el-image>
					</el-col>
				</el-row>

				<div v-show="detail_info.rule_id">
					<p class="row_title">规则依据</p>
					<el-row>
						<el-col :span="6">规则分类</el-col>
						<el-col :span="18">{{ detail_info.rule_list }}</el-col>
					</el-row>
					<el-row v-show="detail_info.remark.rule">
						<el-col :span="6">积分规则</el-col>
						<el-col :span="18">{{ detail_info.remark.rule }}</el-col>
					</el-row>
					<el-row>
						<el-col :span="6">积分</el-col>
						<el-col :span="18" v-show="detail_info.rule_item.min_point == detail_info.rule_item.max_point">{{ detail_info.rule_item.min_point }}</el-col>
						<el-col :span="18" v-show="detail_info.rule_item.min_point != detail_info.rule_item.max_point">
							{{ detail_info.rule_item.min_point }} ~ {{ detail_info.rule_item.max_point }}
						</el-col>
					</el-row>
				</div>
				<div v-show="detail_info.process"><Steps :process="detail_info.process"></Steps></div>
				<div v-show="detail_info.dc_remark.flow"><Review :process="detail_info.dc_remark.flow" :status="detail_info.dc_status"></Review></div>
				<div style="text-align: center;margin-top: 30px;" v-if="detail_info.source_type == 10">
					<el-button type="primary" size="medium" @click="showLog = true">
						查看日志详情内容
						<span style=";padding-left:5px;">»</span>
					</el-button>
				</div>
			</div>
			<div v-if="!this.$authoritys('employee') && !this.$authoritys('dept_manager')" style="position: absolute; bottom: 20px; display: block; right: 20px;">
				<el-button @click="detail_popup=false">取消</el-button>
				<!-- <el-button type="danger" @click="del_integral_event(detail_info)">删除</el-button> -->
			</div>
		</el-drawer>

		<el-dialog title="查看日志详情" width="600px" :visible.sync="showLog">
			<div class="title">{{ ding_report.creator_name }}的{{ ding_report.template_name }}</div>
			<div v-if="ding_report.contents.length > 0">
				<div class="contents" v-for="(item, index) in ding_report.contents" :key="index">
					<div class="key">{{ item.key }}</div>
					<div class="value fontColorC">
						<span v-if="item.value">{{ item.value }}</span>
						<span v-else>未填写</span>
					</div>
				</div>
			</div>
			<div v-if="ding_report.images.length > 0">
				<div class="key" style="margin-bottom: 20px;">图片</div>
				<div class="flex-box flex-d-wrap">
					<el-image
						v-for="(item, index) in ding_report.images"
						:key="index"
						style="width: 100px; height: 100px;margin-right:8px"
						:src="item"
						:preview-src-list="ding_report.images"
					></el-image>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import Steps from '@/components/Steps';
import Review from '@/components/Review';
import toLead from '@/components/toLead';
export default {
	name: 'JfDetail',
	data() {
		return {
			userInfo: this.$getUserData(),
			loading: false,
			point_types: this.$getTyps(),
			formData: {
				page: 1,
				page_size: 10,
				dc_status:JSON.stringify([1]),
				order_key:'create_time',
				source_type2:0,
				pt_id:3,
			},
			list: [],
			total: null,
			detail_info: null,
			detail_popup: false,
			detail_loading: false,
			pageLimit: 10,
			// 查看日志
			showLog: false,
			ding_report: {
				contents: [],
				images: []
			},
			source_type: [
				{ id: 0, name: '按最新事件时间排序' },
				{ id: 1, name: '按积分由高到低排序' },
				{ id: 2, name: '按积分由低到高排序' },
			],
			
			type:1,//判断那个列表进入  1阶段排名，2累计排名，3自定义排名
			point:0,
			base_point:0,//基础分
			service_point:0 //工龄发
		};
	},
	components: { Steps, toLead,Review },
	created() {
		this.type=this.$route.query.type;
		if(this.$route.query.type==1){
			let userInfo=JSON.parse(this.$route.query.userInfo);
			this.point=userInfo.point;
			this.userInfo={
				name:userInfo.employee_name,
				img_url:userInfo.employee_img_url,
				dept_list:userInfo.dept_list
			}
			// console.log(this.$route.query)
			let parameter=JSON.parse(this.$route.query.parameter);
			// this.formData.dept_ids=parameter.dept_id||0;//部门
			this.formData.employee_ids=userInfo.employee_id//人员
			this.formData.rule_id=parameter.rule||0//分类ID
			this.formData.pt_id=parameter.pt_id//事件类型ID
			this.formData.start_day = parameter.start_date
			this.formData.end_day = parameter.end_date
			
		}else if(this.$route.query.type==2){
			let userInfo=JSON.parse(this.$route.query.userInfo);
			this.point=userInfo.point;
			this.userInfo={
				name:userInfo.employee_name,
				img_url:userInfo.employee_img_url,
				dept_list:userInfo.dept_list
			}
			this.formData.employee_ids=userInfo.employee_id//人员
			this.getUserInfo(userInfo.employee_id);
		}else{
			let userInfo=JSON.parse(this.$route.query.userInfo);
			console.log(this.$route.query)
			this.point=userInfo.point;
			this.userInfo=userInfo
			this.formData.employee_ids=userInfo.employee_id//人员
			this.formData.item_id=this.$route.query.items.length>0?this.$route.query.items.toString():0//人员
			if(this.$route.query.dateType=='1'){
				this.formData.month=this.$route.query.date//月
			}else if(this.$route.query.dateType=='2'){//季度
				this.formData.start_day = this.$route.query.start_date
				this.formData.end_day = this.$route.query.end_date
			}else{
				this.formData.year=this.$route.query.date//年
			}
		}

	},
	mounted() {
		this.get_integral_list();
		this.point_types = this.getTypes();
		document.getElementById('main').scrollTop = 0;
	},
	watch: {
		'formData.source_type2'(val) {
			this.formData.page = 1;
			if(val==0){
				this.formData.order_key='create_time'
				this.formData.order_type='desc'
			}
			if(val==1){
				this.formData.order_key='point'
				this.formData.order_type='desc'
			}
			if(val==2){
				this.formData.order_key='point'
				this.formData.order_type='asc'
			}
			this.get_integral_list();
		},
		'formData.page'(val, old_val) {
			
			this.get_integral_list();
		},
	},
	methods: {
		getUserInfo(id){
			this.$axios('get', '/api/employee/detail',{target:id}).then(res => {
					this.base_point=res.data.data.user.site_config.base_point;//基础分
					this.service_point=res.data.data.user.point_config.service_point //工龄发
			})
		},
		getTypes() {
			var arr = this.$getTyps();
			return arr.filter(function(item) {
				return item.code != 'JX';
			});
		},
		// end 文件上传
		handleSizeChange(val) {
			this.pageLimit = val;
			this.formData.page_size = this.pageLimit;
			this.get_integral_list(this.formData);
		},
		open_detail(item) {
			this.detail_popup = true;
			let data = {
				event_id: item.id
			};
			this.detail_loading = true;
			this.$axios('get', '/api/integral/statistics/integral/info', data)
				.then(res => {
					if (res.data.code == 1) {
						this.detail_info = res.data.data;
						var ding_report = res.data.data.remark.ding_report;
						if (Object.keys(ding_report).length != 0) {
							this.ding_report = res.data.data.remark.ding_report;
						}
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.detail_loading = false;
				});
		},
		get_integral_list(data) {
			this.loading = true;
			this.$axios('get', '/api/integral/statistics/integral', this.formData)
				.then(res => {
					if (res.data.code == 1) {
						this.list = res.data.data.list;
						if(this.formData.page==1){
							this.total = res.data.data.total;
						}
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handleCurrentChange(val) {
			this.formData.page = val;
		},

		del_integral_event(item) {
			this.$confirm('删除事件的同时也会撤销积分，确定删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios('post', '/api/integral/statistics/integral/destroy', { event_id: item.event_id }).then(res => {
					if (res.data.code == 1) {
						this.$message.success(res.data.msg);
						this.detail_popup = false;
						this.get_integral_list(this.formData);
					} else {
						this.$message.error(res.data.msg);
					}
				});
			});
		},
		point_name(id) {
			return this.point_types.find(item => {
				if (item.id == id) {
					return item.name;
				}
			}).name;
		},
	}
};
</script>
<style scoped lang="scss">
.diy-tip1 {
	margin-bottom: 10px !important;
	background: #f0f9eb !important;
	color: #333 !important;
	border: 1px solid #67c23a !important;
	padding: 9px !important;
	min-width: 800px;
	border-radius: 4px;
}
.fh {
	position: relative;
	cursor: pointer;
	padding-right: 40px !important;
}
.fh:hover {
	color: #26a2ff;
}
.fh::after {
	width: 2px;
	background-color: #ccc;
	height: 30px;
	content: ' ';
	position: absolute;
	right: 20px;
	top: -5px;
}
.remark {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.title {
	text-align: center;
	font-weight: 700;
	max-width: 70%;
	margin: 20px auto;
	margin-top: 0;
	font-size: 18px;
}
.key {
	font-weight: 700;
	font-size: 16px;
}
.value {
	font-size: 14px;
	margin: 10px 0;
	margin-bottom: 20px;
}
.imgs {
	width: 80px;
	height: 80px;
	margin-right: 5px;
	margin-bottom: 5px;
}
header.el-drawer__header {
	font-size: 18px;
	font-family: MicrosoftYaHei;
	color: #303133;
	width: 500px;
	span {
		:focus {
			outline: 0;
		}
	}
}
.display_flex {
	display: flex;
}
.label {
	line-height: 36px;
	padding-right: 10px;
}
.time_section {
	.el-range-editor {
		width: 330px;
	}
}
.pagination {
	padding: 20px 0;
}
.detail_popup {
	padding: 20px;
	height: calc(100vh - 140px);
	overflow: auto;
	padding-bottom: 100px;
	.row_title {
		position: relative;
		margin: 0 0 20px 0;
		padding-top: 12px;
		font-size: 16px;
		color: #303133;
		line-height: 22px;
	}
	.row_title:before {
		position: absolute;
		top: 0;
		content: ' ';
		width: 100%;
		border-top: 1px #f8f8f8 solid;
	}
	.el-row {
		margin-bottom: 10px;
		font-size: 14px;
		.el-col-4 {
			color: #606266;
		}
	}
}
span.point {
	font-size: 16px;
}
.drawer_title {
	font-size: 18px;
	padding: 20px;
	border-bottom: 1px #efefef solid;
}
.row_tips {
	display: block;
	color: #909399;
	font-size: 12px;
	margin-top: 0px;
}
.el-range-editor--medium .el-range-separator {
	width: 25px;
}
.integral_event_box {
	background-color: #ffffff;
	padding: 20px;
	min-height: calc(100vh - 160px);
}
.examine_steps ::v-deep .el-step.is-vertical .el-step__title {
	padding-bottom: 0;
}
</style>