dd_pc/src/views/abPoint/award_punish.vue

<template>
	<div class="all padding-20">
		<el-tabs v-model="tabs">
			<el-tab-pane :disabled="table_loading" label="奖扣成功" name="success"></el-tab-pane>
			<el-tab-pane :disabled="table_loading"  label="待审批" name="waiting"></el-tab-pane>
			<el-tab-pane :disabled="table_loading"  label="被驳回" name="refuse"></el-tab-pane>
			<el-tab-pane :disabled="table_loading" label="已复核" name="review"></el-tab-pane>
		</el-tabs>
		<FormBox >
			<template slot="header">
					<el-button type="primary" @click="point_b">奖扣B分</el-button>
					<el-button type="primary" @click="point_a" plain>奖扣A分</el-button>
					<span class="orange" style="padding-left: 10px;" v-if="config.event_review_status&&config.event_entry_review">复核开启后，积分需管理员复核后才计入排名和统计</span>
			</template>
			<template slot="footer">
				<el-form ref="formData" :inline="true" :model="formData" label-width="70px">
					<el-form-item label="复核状态" v-if="tabs == 'review'">
						<el-select style="width: 100px;" size="medium" v-model="dc_status"  placeholder="请选择复核状态">
							<el-option v-for="item in dcArr" :key="item.name" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="人员" v-if="tabs=='success'">
						<el-select  size="medium" v-model="select_employee_id" filterable clearable placeholder="请输入或选择人员" style="width: 200px;">
							<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="搜索">
						<el-input v-model="keyword" style="width: 200px;" clearable size="medium" :placeholder="tabs=='success'||tabs == 'review'?'输入内容':'输入人员姓名/事件内容'" ></el-input>
					</el-form-item>
				</el-form>
			</template>
		</FormBox>
		<el-table v-if="tabs == 'success'||tabs == 'review'" res="table1" :data="dataList" stripe fit v-loading="table_loading" @row-click="open_detail">
			<el-table-column label="人员" prop="employee_id" align="left" width="250">
				<template slot-scope="scope">
					<div class="flex-box flex-contet-conter" >
						<userImage :img_url="scope.row.employee_img_url" :user_name="scope.row.employee_name" width="50px" height="50px"></userImage>
						<span style="margin-left: 10px; line-height: 50px;">{{ scope.row.employee_name }}</span>
					</div>
				</template>
			</el-table-column>
			
			<el-table-column label="奖扣内容">
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" placement="top">
					  <div slot="content" style="width: 400px;">{{scope.row.remark_data.customize}}</div>
					  <div class="remark">{{scope.row.remark_data.customize}}</div>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column  label="积分" width="120">
				<template slot-scope="scope">
					<span :class="{green: scope.row.point < 0, red: scope.row.point > 0 }">
						<span v-show="scope.row.point > 0">+</span>
						{{ scope.row.point }} {{ point_name(scope.row.pt_id) }}
					</span>
				</template>
			</el-table-column>
			
			<el-table-column label="奖扣时间" width="150">
				<template slot-scope="scope">
					{{scope.row.update_time}}
					<!-- {{ cuttString(scope.row.create_time) }} -->
				</template>
			</el-table-column>
			<el-table-column label="状态"  width="150" v-if="tabs == 'review'">
				<template slot-scope="scope">
					<span class="green" v-if="scope.row.dc_status==1">通过</span>
					<span class="red" v-if="scope.row.dc_status==2">不通过</span>
				</template>
			</el-table-column>
			<template slot="empty">
				<noData></noData>
			</template>
		</el-table>

		<el-table v-else :data="dataList2" res="table2" stripe fit v-loading="table_loading" @row-click="open_detail1">
			<el-table-column label="人员" prop="employee_id" align="left">
				<template slot-scope="scope">
					<div class="flex-box flex-contet-conter">
						<userImage :img_url="scope.row.employee_img_url" :user_name="scope.row.employee_name" width="50px" height="50px"></userImage>
						<span style="margin-left: 10px; line-height: 50px;">{{ scope.row.employee_name }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="奖扣内容">
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" placement="top">
					  <div slot="content" style="width: 400px;">{{scope.row.remark.customize}}</div>
					  <div class="remark">{{scope.row.remark.customize}}</div>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column label="奖扣时间" width="150">
				<template slot-scope="scope">
					{{ cuttString(scope.row.event_time) }}
				</template>
			</el-table-column>
			<template slot="empty">
				<noData></noData>
			</template>
		</el-table>

		<center style="margin-top: 15px;">
			<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="formData.total"
			></el-pagination>
		</center>

		<el-drawer :title="tabs != 'review'? '奖扣详情':'事件详情'" :visible.sync="drawer" ref="drawer" :with-header="false" :size="'600px'" direction="rtl">
			<div class="drawer_title flex-box-ce">
				<span class="flex-1">{{tabs != 'review'? '奖扣详情':'事件详情'}}</span>
				<i  @click="drawer=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 :gutter="10" style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
					<el-col :span="24">
						<div class="flex-box flex-v-ce">
							<userImage :user_name="detail_info.employee_name" :img_url="detail_info.img_url" width="50px" height="50px" fontSize="1"></userImage>
							<span style="line-height:50px; margin-left:10px;margin:0px 10px;">{{ detail_info.employee_name }}</span>
							<span class="red point" v-show="detail_info.point >= 0 && detail_info.point"> +{{ detail_info.point }}</span>
							<span class="green point" v-show="detail_info.point < 0 && detail_info.point"> {{ detail_info.point }}</span>
							<span v-show="detail_info.point" style="margin-left: 5px;"> {{ detail_info.pt_id == 1 ? '绩效分' : detail_info.pt_id == 2 ? 'A分' : detail_info.pt_id == 3 ? 'B分' : '' }}</span>
						</div>
					</el-col>
				</el-row>

				<el-row :gutter="10">
					<el-col :span="4">事件内容</el-col>
					<el-col :span="20" v-if="detail_info.remark">{{ detail_info.remark && (detail_info.remark.customize || detail_info.remark.rule) }}</el-col>
				</el-row>

				<el-row :gutter="10">
					<el-col :span="4">规则分类</el-col>
					<el-col :span="20">{{ detail_info.rule_list }}</el-col>
				</el-row>

				<el-row :gutter="10" v-show="detail_info.rule_list">
					<el-col :span="4">事件时间</el-col>
					<el-col :span="20">{{ detail_info.date }}</el-col>
				</el-row>
				<el-row :gutter="10" v-show="detail_info.source_type_mark">
				  <el-col :span="4" style="margin-bottom:5px;">来源类型</el-col>
				  <el-col :span="20">{{ detail_info.source_type_mark }}</el-col>
				</el-row>

				<el-row :gutter="10" v-show="detail_info.recorder_name">
					<el-col :span="4">记录人</el-col>
					<el-col :span="20">{{ detail_info.recorder_name }}</el-col>
				</el-row>

				<el-row :gutter="10" :v-if="detail_info.files">
					<el-col v-for="(item, index) in detail_info.files" :key="index" :span="4">{{ index == 0 ? '图片' : '' }}</el-col>
					<el-col :span="20">
						<el-image
							v-for="(item, index) in detail_info.files"
							:key="index"
							style="width: 100px; height: 100px;margin-right:8px"
							:src="item"
							:preview-src-list="detail_info.files"
						></el-image>
					</el-col>
				</el-row>

				<div v-show="detail_info.rule_item_id">
					<p class="row_title">规则依据</p>
					<el-row :gutter="10">
						<el-col :span="4">规则分类</el-col>
						<el-col :span="19">{{ detail_info.rule_list }}</el-col>
					</el-row>
					<el-row v-if="detail_info.remark && detail_info.remark.rule">
						<el-col :span="4">积分规则</el-col>
						<el-col :span="19">{{ detail_info.remark.rule }}</el-col>
					</el-row>
					<el-row v-if="detail_info.rule_item">
						<el-col :span="4">积分</el-col>
						<el-col :span="19" 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="19" 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>
				<template v-if="tabs == 'success'||tabs == 'review'">	
					<div v-if="detail_info.dc_remark"><Review :process="detail_info.dc_remark.flow" :status="detail_info.dc_status"></Review></div>
				</template>
				<template v-if="tabs != 'review'">
					<div class="btn_danger flex-box flex-center-center" v-if="detail_info.recorder_id==userId&&(detail_info.event_type==3||detail_info.event_type==4)">
					  <el-button type="danger" class="danger" @click="revocation" :loading="cx_loading">撤销</el-button>
					</div>
				</template>
			</div>
		</el-drawer>

		<el-drawer title="奖扣详情" :visible.sync="detailShow" :with-header="false" :size="'600px'" direction="rtl">
			<div class="drawer_title flex-box-ce">
				<span class="flex-1">奖扣详情</span>
				<i  @click="detailShow=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 :gutter="10" style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
					<el-col :span="24" >
						<div class="flex-box flex-v-ce">
						<userImage :user_name="detail_info.employee_name" :img_url="detail_info.img_url" width="50px" height="50px" fontSize="1"></userImage>
						<span style="line-height:50px; margin-left:10px;margin:0px 10px;">{{ detail_info.employee_name }}</span>
						<span class="red point" v-show="detail_info.point >= 0 && detail_info.point">+{{ detail_info.point }}</span>
						<span class="green point" v-show="detail_info.point < 0 && detail_info.point">{{ detail_info.point }}</span>
						<span v-show="detail_info.point" style="margin-left: 5px;">{{ detail_info.pt_id == 1 ? '绩效分' : detail_info.pt_id == 2 ? 'A分' : detail_info.pt_id == 3 ? 'B分' : '' }}</span>
						</div>
					</el-col>
				</el-row>

				<el-row :gutter="10" v-show="detail_info.source_type_mark">
					<el-col :span="4">来源类型</el-col>
					<el-col :span="20">{{ detail_info.source_type_mark }}</el-col>
				</el-row>

				<el-row :gutter="10" v-for="(item, index) in detail_info.detail" :key="index">
					<el-col :span="4">{{ item.key }}</el-col>
					<el-col :span="20" v-if="item.key == '附件'">
						<el-image  style="width: 100px; height: 100px;margin-right:8px" v-for="(item2, index2) in item.value" :key="index2" :src="item2" :preview-src-list="item.value"></el-image>
					</el-col>
					<el-col :span="20" v-else>{{ item.value }}</el-col>
				</el-row>

				<el-row :gutter="10" :v-if="detail_info.files">
					<el-col v-for="(item, index) in detail_info.files" :key="index" :span="4">{{ index == 0 ? '图片' : '' }}</el-col>
					<el-col :span="20">
						<el-image
							v-for="(item, index) in detail_info.files"
							:key="index"
							style="width: 100px; height: 100px;margin-right:8px"
							:src="item"
							:preview-src-list="detail_info.files"
						></el-image>
					</el-col>
				</el-row>


				<div v-show="detail_info.rule_id">
					<p class="row_title">规则依据</p>
					<el-row :gutter="10">
						<el-col :span="4">规则分类</el-col>
						<el-col :span="19">{{ detail_info.rule_name }}</el-col>
					</el-row>
					<el-row v-if="detail_info.item_name">
						<el-col :span="4">积分规则</el-col>
						<el-col :span="19">{{ detail_info.item_name }}</el-col>
					</el-row>
					<el-row v-if="detail_info.item_id > 0">
						<el-col :span="4">积分</el-col>
						<el-col :span="19" v-show="detail_info.item_min_point == detail_info.item_max_point">{{ detail_info.item_min_point }}</el-col>
						<el-col :span="19" v-show="detail_info.item_min_point != detail_info.item_max_point">
							{{ detail_info.item_min_point }} ~ {{ detail_info.item_max_point }}
						</el-col>
					</el-row>
				</div>
				<div v-show="detail_info.process">
					<Steps :process="detail_info.process"></Steps>
				</div>
				<div v-if="detail_info.dc_remark"><Review :process="detail_info.dc_remark.flow" :status="detail_info.dc_status"></Review></div>

				<div class="btn_danger flex-box flex-center-center" v-if="detail_info.applyor_id==userId&&detail_info.status==0&&detail_info.source_type==3">
				  <el-button type="danger" class="danger" @click="revocation2" :loading="cx_loading">撤销</el-button>
				</div>
			</div>
		</el-drawer>
		
		<bonusPointsPopup :isBreak="isBreak" :title="popuTitle" :visible.sync="popupVisible" :ruleOnoff="ruleOnoff" :refresh.sync="refreshData" :integralType.sync="integralType">
			<div style=" position: absolute;top: 0px;right: 0;" class="orange">最多只能选择30人</div>
		</bonusPointsPopup>
	</div>
</template>

<script>
import EmployeeSelector from '@/components/EmployeeSelector.vue';
import bonusPointsPopup from '@/components/bonusPointsPopup';
import Steps from '@/components/Steps'; 
import { _debounce } from '@/api/auth';
import Review from '@/components/Review';
import {getToken } from '@/api/auth';
export default {
	data() {
		return {
			ruleOnoff: false,
			refreshData: '',
			popuTitle: '奖扣A分',
			popupVisible: false,
			integralType: 0,
			table_loading: false,
			formData: {
				page: 1,
				page_size: 10,
				total: 0
			},
			tabs: 'success',
			dataList: [],
			dataList2: [],
			pageLimit: 10,
			keyword: '',
			rule_list: [],
			drawer: false,
			detail_loading: false,
			detail_info: {
				process:[],
				dc_remark:{}
			},
			select_employee_id: '',
			employee_map: [],
			detailShow: false,
			employee_name: this.$getCache('SET_EMPLOYEE_MAP'),
			userId:'',
			cx_loading:false,
			selectId:'',//打开详情ID
			
			// 长连接
			isBreak:false,//是否打开缓存的未完成奖扣
			
			config:{},
			dcArr: [
			  { id: '[1,2]', name: '全部' },
			  { id: '[1]', name: '通过' },
			  { id: '[2]', name: '不通过' },
			],
			dc_status:'[1,2]',
		};
	},
	components: {
		EmployeeSelector,
		bonusPointsPopup,
		Steps,
		Review
	},
	created() {
		this.getEmployee();
	},
	mounted() {
		this.cheakAx()
		this.userId=this.$getUserData().id,
		this.config=this.$store.state.config;
		this.getData()
		setTimeout(() => {
			let award_punish=this.$getCache('award_punish')
			if(award_punish&&award_punish.obj.length>0){
				this.isBreak=true;
				award_punish.type==3? this.point_b():this.point_a()
			}else{
				this.isBreak=false;
			}
		}, 1000)
	},
	watch: {
		dc_status(){
			this.formData.page = 1;
			this.getData();
		},
		select_employee_id(){
			this.formData.page = 1;
			this.getData();
		},
		keyword: {
			deep: true,
			handler: _debounce(function(val) {
				this.formData.page = 1;
				this.getData();
			}, 1000)
		},
		tabs(val) {
			this.dataList = [];
			this.dataList2 = [];
			this.formData.total = 0;
			this.keyword = '';
			this.formData.page = 1;
			this.formData.page_size = 10;
			
			this.getData();
		},
		refreshData(val) {
			this.getData();
		}
	},
	methods: {
		//获取员工列表
		getEmployee() {
			this.$axios('get', '/api/employee/index', { dept_id: 0, keywords: '', page: 1, page_size: 3000, is_official: 1 }).then(res => {
				let list = res.data.data.list;
				this.employee_map = list;
			});
		},
		cheakAx() {
			this.$axios('get', '/api/integral/site/config')
				.then(res => {
					let data = res.data.data;
					if(data.specified_rule_item){
						this.ruleOnoff = data.specified_rule_item == 1 ? true : false;
					}else{
						this.ruleOnoff = false
					}
				})
		},
		// 撤销待审批
		revocation2(){
			var that=this;
			this.$confirm('撤销此项数据将不可恢复，是否撤销?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					let data = {
						review_id: that.selectId,
					};
					that.cx_loading = true;
					that.$axios('post', '/api/integral/review/destroy', data).then(res => {
						if (res.data.code == 1) {
							that.getData()
						} else {
							that.$message.error(res.data.data.msg);
						}
					}).finally(() => {
						that.detailShow = false;
						that.cx_loading = false;
					});
				})
		},
		// 撤销奖扣
		revocation(){
			var that=this;
			this.$confirm('撤销此项数据将不可恢复，是否撤销?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					let data = {
						target_id: that.selectId,
						type:1
					};
					that.cx_loading = true;
					that.$axios('post', '/api/integral/review/prize/destroy', data).then(res => {
						if (res.data.code == 1) {
							that.getData()
						} else {
							that.$message.error(res.data.data.msg);
						}
					}).finally(() => {
						that.cx_loading = false;
						that.drawer = false;
					});
				})
		},
		getEmployeeName(id) {
			for (const key in this.employee_name) {
				if (this.employee_name[key].id == id) {
					return this.employee_name[key].name;
				}
			}
		},
		open_detail1(item) {
			this.detailShow = true;
			this.selectId=item.id
			let data = {
				review_id: item.id
			};
			this.detail_loading = true;
			this.$axios('get', '/api/integral/review', data).then(res => {
				if (res.data.code == 1) {
					this.detail_info = res.data.data;
				} else {
					this.$message.error(res.data.data.msg);
				}
			})
			.finally(() => {
				this.detail_loading = false;
			});
		},
		open_detail(item) {
			this.drawer = true;
			let data = {event_id: item.id};
			this.selectId=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;
				} else {
					this.$message.error(res.data.data.msg);
				}
			})
			.finally(() => {
				this.detail_loading = false;
			});
		},

		cuttString(data) {
			return data.substring(0, 10);
		},
		point_a() {
			this.popupVisible = false;
			this.integralType = 2;
			this.popuTitle = '奖扣A分';
			this.popupVisible = true;
		},
		point_b() {
			this.popupVisible = false;
			this.integralType = 3;
			this.popuTitle = '奖扣B分';
			this.popupVisible = true;
		},
		point_name(id) {
			return this.$getTyps(id).name;
		},
		handleCurrentChange(val) {
			this.formData.page = val;
			this.getData();
		},
		handleSizeChange(val) {
			this.pageLimit = val;
			this.formData.page_size = this.pageLimit;
			this.getData();
		},
		getData() {
			this.table_loading = true;
			let data = {};
			if (this.tabs == 'success') {
				data = {
					page: this.formData.page,
					page_size: this.formData.page_size,
					recorder_id:this.userId,
					source_type: '1',
					keyword: this.keyword,
					employee_ids: this.select_employee_id,
					// order_key:'update_time'
				};
			} else if (this.tabs == 'waiting') {
				data = {
					page: this.formData.page,
					page_size: this.formData.page_size,
					keyword: this.keyword,
					pt_id: '0',
					type: 'waiting'
				};
			} else if(this.tabs=='refuse') {
				data = {
					page: this.formData.page,
					page_size: this.formData.page_size,
					keyword: this.keyword,
					pt_id: '0',
					type: 'refuse'
				};
			}else{
				data = {
					page: this.formData.page,
					page_size: this.formData.page_size,
					recorder_id:this.userId,
					source_type: '1',
					keyword: this.keyword,
					employee_ids: this.select_employee_id,
					dc_status:this.dc_status,
					// order_key:'update_time'
				};
			}
			this.$axios('get', (this.tabs == 'success'||this.tabs == 'review') ? '/api/integral/statistics/integral' : '/api/integral/review/entry/list', data)
				.then(res => {
					if (res.data.code == 1) {
						if(this.tabs == 'success'||this.tabs == 'review'){
							this.dataList = res.data.data.list;
						}else{
							this.dataList2 = res.data.data.list;
						}
						if(data.page==1){
							this.formData.total = res.data.data.total;
						}
					}
				})
				.finally(() => {
					this.table_loading = false;
				});
		}
	}
};
</script>

<style scoped lang="scss">
	.remark{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
 .btn_danger{
	 margin-top: 20px;
 }
 .btn_danger .danger{
 	width: 120px;
 }
.box {
	background-color: #ffffff;
	padding: 20px;
	min-height: calc(100vh - 160px);
}
.examine_steps {
	.el-step {
		flex-basis: auto !important;
	}
}
.detail_popup {
	padding: 20px;
	height: calc(100vh - 100px);
	overflow: auto;
	.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;
		}
	}
}
.drawer_title {
	font-size: 18px;
	padding: 20px;
	border-bottom: 1px #efefef solid;
}
::v-deep .el-table tr:hover {
	cursor: pointer;
}
</style>