dd_pc/src/views/award/grantAward.vue

<template>
	<div>
		<div class="all padding-20">
			<FormBox>
				<div class="form-item">
					<div class="form-label">姓名搜索</div>
					<div class="form-search">
						<el-select size="medium" multiple v-model="formData.employee_ids" filterable clearable
							placeholder="请输入或选择人员">
							<el-option v-for="item in employee_map" :key="item.id" :label="item.name"
								:value="item.id"></el-option>
						</el-select>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">发放状态</div>
					<div class="form-search">
						<el-select size="medium" v-model="formData.has_ticket">
							<el-option v-for="item in dcArr" :key="item.name" :label="item.name"
								:value="item.id"></el-option>
						</el-select>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">
						<el-tooltip effect="dark" placement="top">
							<template slot="content">
								此处的“我奖扣的”包含所有与我有关的积分事件（1、我直接奖扣成功，2、申请、任务、奖扣<br /> 提交上来由我作为第一审批人审批的，3、积分导入填写的奖扣记录人是我）
							</template>
							<span>相关性 <i class="el-icon-warning"></i></span>
						</el-tooltip>
					</div>
					<div class="form-search">
						<el-select size="medium" v-model="formData.iSrecorder">
							<el-option v-for="item in source_type" :key="item.name" :label="item.name"
								:value="item.id"></el-option>
						</el-select>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">事件时间</div>
					<div class="form-search">
						<el-date-picker v-model="time_slot" type="daterange" size="medium" value-format="yyyy-MM-dd"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">内容搜索</div>
					<div class="form-search">
						<el-input size="medium" v-model="formData.keyword" max="20" placeholder="请输入"
							clearable></el-input>
					</div>
				</div>
			</FormBox>
			<div style="margin: 10px 0;">
				<el-button size="medium" :disabled="selectionID.length==0? true:false" @click="deleteInBatches()"
					type="primary">批量发放奖票</el-button>
			</div>

			<div class="diy-tip1" style="margin-bottom: 10px;">
				<div>当前数据：{{ total }}条</div>
			</div>
			<!-- 表格 -->
			<div>
				<el-table :data="list" style="width: 100%;" v-loading="loading" @selection-change="deleteEvents">
					<el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
					<el-table-column prop="employee_name" label="姓名" align="left" min-width="150px">
						<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>
								<div style="height: 50px;padding-left: 10px;" class="flex-box-v flex-h-zhu">
									<div>{{ scope.row.employee_name }}</div>
									<div v-if="scope.row.dept" style="font-size: 12px;max-width: 150px;"
										class="fontColorC font-flex-word">{{ scope.row.dept }}</div>
								</div>
							</div>
						</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="point" label="积分" align="left" min-width="120px">
						<template slot-scope="scope">
							<span :class="scope.row.point < 0 ? 'red' : 'green'">{{ scope.row.point }} {{
								point_name(scope.row.pt_id) }}</span>
						</template>
					</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">
							<span class="green" v-if="scope.row.has_ticket">已发放</span>
							<span class="fontColorC" v-else>未发放</span>
						</template>
					</el-table-column>
					<el-table-column width="150" label="操作">
						<template slot-scope="scope">
							<span class="blue" style="cursor: pointer;padding-right: 10px;"
								@click="open_detail(scope.row)">查看详情</span>
							<span class="blue" style="cursor: pointer;" v-if="!scope.row.has_ticket"
								@click="deleteInBatches(scope.row)">发放奖票</span>
						</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="formData.page_size"
						:total="total"></el-pagination>
				</center>
			</div>
		</div>

		<el-drawer title="事件详情" :visible.sync="detail_popup" ref="drawer" show-close :with-header="false"
			:width="'500px'">
			<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" :img_url="detail_info.img_url" 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="green point" v-if="detail_info.point >= 0">+{{ detail_info.point }} {{
							point_name(detail_info.pt_id) }}</span>
						<span class="red point" v-if="detail_info.point < 0">{{ detail_info.point }} {{
							point_name(detail_info.pt_id) }}</span>
					</div>
				</el-row>

				<el-row>
					<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 }} {{ point_name(detail_info.pt_id) }}</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 }} {{
							point_name(detail_info.pt_id) }}
						</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>
			<div style="position: absolute; bottom: 20px;right: 20px;left: 20px;" class="flex-box-ce">
				<el-button type="primary" v-if="!detail_info.has_ticket"
					@click="deleteInBatches({id:detail_info.event_id},true)">发放奖票</el-button>
				<el-button type="primary" v-else @click="openDetail({id:detail_info.event_id})">查看奖票</el-button>
				<div class="flex-1"></div>
				<el-button @click="detail_popup=false">取消</el-button>
			</div>
		</el-drawer>
		<!-- 检查单详情 -->
		<BrawerBox :showDrawer.sync="isShowDetail" drawerTitle="奖票详情">
			<template slot="main">
				<div>
					<div class="flex-box-v">
						<div class="message-box">
							<div class="flex-box-ce">
								<div class="fontColorC">奖票对象</div>
								<div class="flex-1">{{detail.employee_name}}</div>
							</div>
							<div class="flex-box-ce">
								<div class="fontColorC">事件时间</div>
								<div class="flex-1">{{$moment(detail.date+'').format("YYYY-MM-DD")}}</div>
							</div>
							<div class="flex-box-ce">
								<div class="fontColorC">发放人</div>
								<div class="flex-1">{{detail.publisher_name||'--'}}</div>
							</div>
							<div class="flex-box-ce">
								<div class="fontColorC">发放时间</div>
								<div class="flex-1">{{detail.ct}}</div>
							</div>
							<div class="flex-box-ce">
								<div class="fontColorC">奖票事件</div>
								<div class="flex-1">{{detail.remark.customize||detail.remark.rule}}</div>
							</div>
						</div>
					</div>
					<div class="message-box" v-if="detail.event">
						<div style="font-size: 16px;margin-bottom: 20px;">对应积分事件</div>
						<div class="flex-box"
							style="background-color: rgb(248, 252, 255);margin-bottom: 14px;position: relative;padding: 8px;border-radius: 5px;">
							<div class="flex-1" style="padding-right: 20px;">
								{{detail.event.remark.customize||detail.event.remark.rule}}</div>
							<div class="red" v-if="detail.event.point>0">+{{detail.event.point}}
								{{detail.event.pt_id==3? 'B分':'A分'}}</div>
							<div class="green" v-else>{{detail.event.point}} {{detail.event.pt_id==3? 'B分':'A分'}}</div>
						</div>
					</div>
				</div>
			</template>
			<template slot="footer">
				<el-button type="danger" plain @click="deleteItem"
					v-if="detail.publisher_id==$getUserData().id||($supremeAuthority()!='dept_manager'&&$supremeAuthority()!='employee')">{{detail.publisher_id==$getUserData().id
					?'撤回奖票':'删除奖票'}}</el-button>
				<div class="flex-1"></div>
				<el-button plain @click="isShowDetail=false">关 闭</el-button>
			</template>
		</BrawerBox>

	</div>
</template>
<script>
import Steps from '@/components/Steps';
import Review from '@/components/Review';
import toLead from '@/components/toLead';
import {_debounce} from '@/api/auth';
export default {
	data() {
		return {
			loading: false,
			formData: {
				page: 1,
				page_size: 10,
				status:1,
				dc_status:JSON.stringify([1]),
				iSrecorder:0,
				keyword:'',
				has_ticket:0,
				add_subtract:1,
				employee_ids:[],
			},
			time_slot: null,
			list: [],
			
			total: null,
			detail_info: {complete_task:{},remark:{},rule_item:{},dc_remark:{},pt_id:3},
			detail_popup: false,
			detail_loading: false,
			
			employeeOrdept: !this.$authoritys('employee') && !this.$authoritys('dept_manager'),
			employee_map: this.$getCache('userList'),
			selectionID: [], //删除的事件ID
			source_type: [
			  { id: 0, name: '全部事件' },
			  { id: 1, name: '我奖扣的' },
			],
			dcArr: [
			  { id: -1, name: '全部' },
			  { id: 1, name: '已发放' },
			  { id: 0, name: '未发放' },
			],
			isShowDetail:false,
			detail:{remark:{},event:{remark:{}},date:''},
		};
	},
	components: { Steps, toLead,Review },
	mounted() {
		this.get_integral_list();
	},
	watch: {
		detail_popup(val){
			if(!val){
				this.get_integral_list();
			}
		},
		'formData.has_ticket'(val) {
			this.formData.page = 1;
			this.get_integral_list();
		},
		'formData.keyword': {
			deep: true,
			handler: _debounce(function(val) {
				this.formData.page = 1;
				this.get_integral_list();
			}, 1000)
		},
		'formData.status'(val) {
			this.formData.page = 1;
			this.get_integral_list();
		},
		'formData.employee_ids'(val) {
		  this.formData.page = 1;
		  this.get_integral_list();
		},
		'formData.iSrecorder'(val) {
		  this.formData.page = 1;
		  this.get_integral_list();
		},
		time_slot(val, old_val) {
			this.formData.page = 1;
			if (val !== null) {
				this.formData.start_day = val[0];
				this.formData.end_day = val[1];
			} else {
				delete this.formData.start_day;
				delete this.formData.end_day;
			}
			this.get_integral_list();
		},
	},
	methods: {
		deleteItem(){
			this.$confirm(`确定${this.detail.publisher_id==this.$getUserData().id? '撤回':'删除'}此奖票?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios("post", "/api/integral/ticket/del",{id:this.detail.id}).then(res => {
					this.$message.success(this.detail.publisher_id==this.$getUserData().id? "已撤回":'已删除');
					this.open_detail({id:this.detail_info.event_id});
					this.isShowDetail=false;
				})
			}).catch(() => {});
		},
		selectable(row) {
			if (row.has_ticket) {
				return false;
			}  else {
				return true;
			}
		},
		openDetail(item){
			this.$axios("get", "/api/integral/ticket/info",{event_id:item.id}).then(res => {
				this.detail=res.data.data;
				this.isShowDetail=true;
			})
		},
		deleteInBatches(item,is){
			this.$confirm('你确定发放奖票?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'info'
			}).then(() => {
				let data={}
				if(item){
					data={event_ids:item.id}
				}else{
					data={event_ids:this.selectionID.toString()}
				}
				this.$axios("post", "/api/integral/ticket/create",data,'v2').then(res => {
					if(is){
						this.$message.success("已发放");
						this.open_detail({id:this.detail_info.event_id});
						this.openDetail(item);
					}else{
						this.$message.success("已发放");
						this.get_integral_list();
					}
				})
			}).catch(() => {});
		},
		getTypes() {
			var arr = this.$getTyps();
			return arr.filter(function(item) {
				return item.code != 'JX';
			});
		},
		deleteEvents(selection) {
			let listId = [];
			selection.forEach(item => {
				listId.push(item.id);
			});
			this.selectionID = listId;
		},
		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;
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.detail_loading = false;
				});
		},
		get_integral_list() {
			let data=JSON.parse(JSON.stringify(this.formData))
			if(this.employeeOrdept){
				if(this.formData.iSrecorder==1){
					data.recorder_id=this.$getUserData().id
				}
			}else{
				data.recorder_id=this.$getUserData().id
			}
			data.employee_ids=data.employee_ids.toString()
			this.loading = true;
			this.$axios('get', '/api/integral/statistics/integral',data).then(res => {
				this.list = res.data.data.list;
				if(data.page==1){
					this.total = res.data.data.total;
				}
			}).finally(() => {
				this.loading = false;
			});
		},
		handleCurrentChange(val) {
		  this.formData.page = val;
		  this.get_integral_list();
		},
		handleSizeChange(val) {
		  this.formData.page_size =val;
		  this.formData.page = 1;
		  this.get_integral_list();
		},
		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 => {
					this.$message.success(res.data.msg);
					this.detail_popup = false;
					this.get_integral_list();
				});
			});
		},
		point_name(id) {
			let point_types=this.$getTyps();
			return point_types.find(item => {
				if (item.id == id) {
					return item.name;
				}
			}).name;
		},
	}
};
</script>
<style scoped lang="scss">
  .message-box .label{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .message-box .flex-box-ce{
    margin-bottom:16px ;
  }
  .message-box .fontColorC{
    width: 100px;
  }	
.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;
}

.diy-tip1 {
	margin-bottom: 10px !important;
	background: #f0f9eb !important;
	color: #67c23a !important;
	border: 1px solid #67c23a !important;
	padding: 9px !important;
	min-width: 800px;
	border-radius: 4px;
}
</style>