dd_pc/src/views/workbench/approval_batch.vue

<template>
	<div>
		<div class="diy_tip_bg">
			<el-alert class="diy-tip" type="success" @close="tips_close" v-if="tips_show">
				<p style="font-size: 14px;">批量审批仅支持快速处理任务审批和已指定规则的积分审批，其余情况的审批单请到【待我审批】处理
					</br>权限分不足时，请进入【审批详情】→【通过】→【递交审批】给上级
				</p>
			</el-alert>
		</div>
		<div class="all padding-20">
			<FormBox>
				<div class="form-item">
					<div class="form-label">姓名搜索</div>
					<div class="form-search">
						<el-select size="medium" v-model="target_id" filterable collapse-tags 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-input size="medium" max="20" v-model="formData.keyword" placeholder="请输入"
							clearable></el-input>
					</div>
				</div>
			</FormBox>
			<div style="margin: 10px 0;">
				<el-button size="medium" type="primary" plain @click="pass">批量通过</el-button>
				<el-button size="medium" type="danger" plain @click="reject">批量驳回</el-button>
			</div>
			<el-table :data="list" style="width: 100%;cursor: pointer;" v-loading="loading"
				@selection-change="deleteEvents" @row-click="openDetail">
				<el-table-column width="50" type="selection"></el-table-column>
				<el-table-column label="" prop="task_name">
					<template slot-scope="scope">
						<div class="flex-box flex-v-ce">
							<userImage width="50px" height="50px" :id="scope.row.employee_id"
								:user_name="scope.row.employee_name"></userImage>
							<div style="margin-left: 5px;">
								<span class="tableTitle" v-show="scope.row.source_type == 1">{{ scope.row.employee_name
									}}的积分任务</span>
								<span class="tableTitle" v-show="scope.row.source_type == 2">{{ scope.row.employee_name
									}}的积分申请</span>
								<span class="tableTitle" v-show="scope.row.source_type == 3">{{ scope.row.employee_name
									}}的积分奖扣</span>
								<span class="tableTitle" v-show="scope.row.source_type == 4">{{ scope.row.employee_name
									}}的绩效工作</span>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="point" label="积分" align="center">
					<template slot-scope="scope">
						<span class="green" v-if="scope.row.point > 0">+{{ scope.row.point }}
							{{$getTyps(scope.row.pt_id).name}}</span>
						<span class="red" v-else>{{ scope.row.point }} {{$getTyps(scope.row.pt_id).name}}</span>
					</template>
				</el-table-column>
				<el-table-column label="审批内容" prop="remark" min-width="200">
					<template slot-scope="scope">
						<span class="font-flex-word">{{ scope.row.remark.customize || scope.row.remark.rule }}</span>
					</template>
				</el-table-column>
				<el-table-column label="时间" prop="event_time" width="150"></el-table-column>
				<el-table-column prop="remark" label="操作" align="center">
					<template slot-scope="scope">
						<span class="blue" style="cursor: pointer;">审批</span>
					</template>
				</el-table-column>
				<template slot="empty">
					<noData></noData>
				</template>
			</el-table>
			<center style="padding: 20px 0;">
				<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>
		<examinePopup :title="'审核详情'" :id="detail_id" :show.sync="detailShow"></examinePopup>
		<el-dialog title="审批驳回" :visible.sync="rejectShow" width="520px">
			<div style="text-align: center;margin-bottom: 10px;" class="fontColorB">
				已选中{{selectionID.length}}条审批单，确认全部驳回吗？</div>
			<el-form :model="rejectForm" ref="rejectForm" label-width="80px" style="margin-top: 20px;">
				<el-form-item label="审批意见" prop="remark"
					:rules="[{ required: true, message: '请输入审批意见', trigger: 'blur' }, { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }]">
					<el-input type="textarea" :rows="4" v-model="rejectForm.remark"
						placeholder="请输入审批意见(限50字)"></el-input>
				</el-form-item>
				<el-form-item style="text-align: right; margin-bottom: 0">
					<el-button @click="rejectShow = false">取消</el-button>
					<el-button type="primary" @click="confirmReject()">确认驳回</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 审批结果 -->
		<el-dialog title="提交结果" :visible.sync="isResult" width="800" :close-on-click-modal="false"
			:close-on-press-escape="false" :show-close="false">
			<div v-if="!isShowError">
				<el-progress :text-inside="true" :stroke-width="24" :percentage="percentage"></el-progress>
				<div style="margin-top: 20px;border: 1px solid #f1f1f1;">
					<div class="flex-box-ce results" style="font-weight: 600;">
						<div style="border-right: 1px solid #f1f1f1;width: 50px;">序号</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">奖扣对象</div>
						<div class="flex-2" style="border-right: 1px solid #f1f1f1;">审批内容</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">积分</div>
						<div class="flex-2">处理结果</div>
					</div>
					<div class="flex-box-ce results" v-for="(item, index) in results" :key="index">
						<div style="border-right: 1px solid #f1f1f1;width: 50px;">{{results.length-index}}</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{ item.name }}</div>
						<div class="flex-2" style="border-right: 1px solid #f1f1f1;">{{ item.remark.customize ||
							item.remark.rule }}</div>
						<div class="flex-1" style="border-right: 1px solid #f1f1f1;">
							{{ item.point>0? '+'+item.point:item.point }}
							<span>{{ item.pt_id==3? 'B分':'A分' }}</span>
						</div>
						<div class="flex-2 green" v-if="item.status == 1">{{ item.msg }}</div>
						<div class="flex-2 red" v-else>{{ item.msg }}</div>
					</div>
				</div>
				<span slot="footer">
					<div class="flex-box-end" style="margin-top: 20px;" v-show="results.length==resultList.length">
						<el-button type="primary" @click="isResult = false" size="small">确 定</el-button>
					</div>
				</span>
			</div>
			<div v-else>
				<div style="text-align: center;" class="red">服务器繁忙，请稍后再试</div>
				<span slot="footer">
					<div class="flex-box-end" style="margin-top: 20px;"><el-button type="primary"
							@click="isResult = false" size="small">确 定</el-button></div>
				</span>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import examinePopup from '@/components/examinePopup.vue';
import { _debounce, getToken } from '@/api/auth';
var setIntervalWesocketPush = null;
export default {
	components: { examinePopup },
	data() {
		return {
			detailShow: false,
			detail_id: null,
			employee_map: this.$getCache('SET_EMPLOYEE_MAP'),
			total: 0,
			target_id: '',
			formData: {
				target_id: '',
				type: 'waiting',
				keyword: '',
				batch: 1,
				page: 1,
				pt_id: '0',
				page_size: 10,
				source_type: '0',
				reviewer_id:this.$getUserData().id,
			},
			loading: false,
			list: [],
			selectionID: [],
			rejectShow: false,
			rejectForm: {
				remark: ''
			},
			// 长连接结果
			results: [], //提交的返回结果集合
			isResult: false,
			percentage: 0,
			resultList:[],//要发送数据的集合
			resultIndex:0,
			isShowError:false,
			tips_show: false,
		};
	},
	watch: {
		isResult(val) {
			if (!val) {
				this.isShowError = false;
				this.percentage = 0;
				this.results = [];
				this.selectionItems = [];
				this.getSpList();
				this.$socketApiTow.closewebsocket();
			}
		},
		target_id(val) {
			this.formData.page = 1;
			this.formData.target_id = val;
			this.getSpList();
		},
		'formData.keyword': {
			deep: true,
			handler: _debounce(function(val) {
				this.formData.page = 1;
				this.getSpList();
			}, 1000)
		},
		rejectShow(val) {
			if (!val) {
				this.rejectForm.remark = '';
			}
		}
	},
	created() {
		this.getEmployeeList();
	},
	mounted() {
		if (this.$getCache('voluntarilyPoint')) {
			this.tips_show = false;
		} else {
			this.tips_show = true;
		}
		this.getSpList();
	},
	methods: {
		// 关闭提示语
		tips_close() {
			this.$setCache('voluntarilyPoint', 'true');
			this.tips_show = false;
		},
		// 详情
		openDetail(item) {
			this.detail_id = item.id;
			this.detailShow = true;
		},
		// 确定驳回
		confirmReject() {
			if (!this.rejectForm.remark) {
				this.$message.error('请输入审批意见');
				return false;
			}
			this.rejectShow = false;
			this.webSocket(false);
		},
		//驳回
		reject() {
			if (this.selectionID.length == 0) {
				this.$message.error('请选择审批单');
				return false;
			}
			this.rejectShow = true;
		},
		//通过
		pass() {
			if (this.selectionID.length == 0) {
				this.$message.error('请选择审批单');
				return false;
			}
			this.$confirm(`已选中${this.selectionID.length}条审批单，确认全部通过？`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				this.webSocket(true);
			}).catch(() => {});
		},
		webSocket(is){
			let arr=[];
			let wsData;
			this.selectionID.forEach(item => {
				if(is){
					wsData = {
						type: 'review',
						action: 'complete',
						review_id: item
					};
				}else{
					wsData = {
						type: 'review',
						action: 'refuse',
						review_id: item,
						remark: this.rejectForm.remark
					};
				}
				arr.push(wsData);
			});
			this.resultList=arr;
			this.resultIndex=0;
			this.percentage=0;
			this.results=[];
			this.isResult=true;
			this.opneWebSocket()
		},
		opneWebSocket() {
			let wsData=this.resultList;
			if(wsData[this.resultIndex]){
				this.$socketApiTow.sendData(wsData[this.resultIndex],this.onmessageWS)
			}
		},
		onmessageWS(e){
			if(e.type=='review'){
				let item=this.selectionItems[this.resultIndex];
				let result=e.result;
				result.name=item.employee_name
				result.remark=item.remark
				result.point=item.point
				result.pt_id=item.pt_id
				this.results.push(e.result);
				
				this.resultIndex++;
				this.opneWebSocket();
				// 进度条
				let lng = this.resultList.length;
				this.percentage = Math.floor(this.resultIndex / (lng / 100))
				if (lng == this.results.length) {
					this.percentage = 100;
				}
			}
			if(e.type=='error'||e.type=='break'){
				this.isShowError = true;
			}
		},
		searchFun() {
			this.dataList = [];
			this.total = 0;
			this.formData.page = 1;
			this.getSpList();
		},
		deleteEvents(selection) {
			this.selectionItems = selection;
			this.selectionID = selection.map(item => {
				return item.id;
			});
		},
		getEmployeeList() {
			this.$axios('get', '/api/employee/list', {}).then(res => {
				if (res.data.code == 1) {
					this.employee_map = res.data.data.list;
				}
			});
		},
		exportExcel() {
			window.open();
		},
		// 页面变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.getSpList();
		},
		handleSizeChange(val) {
			this.formData.page = 1;
			this.formData.page_size = val;
			this.getSpList();
		},
		//请求数据
		getSpList() {
			this.loading = true;
			if (!this.formData.target_id) {
				delete this.formData.target_id;
			}
			this.$axios('get', '/api/integral/review/list', this.formData)
				.then(res => {
					this.list = res.data.data.list;
					this.total = res.data.data.total;
					if(this.formData.page!=1&&this.list.length==0){
						this.formData.page = 1;
						this.getSpList();
					}
				})
				.finally(() => {
					this.loading = false;
				});
		}
	}
};
</script>

<style scoped>
.results {
	border-bottom: 1px solid #f1f1f1;
	text-align: center;
}
.results div {
	padding: 10px;
}
.el-date-editor.el-input {
	width: auto;
}
.date-picker-width {
	width: 145px !important;
}
.search ::v-deep .el-input-group__append:active {
	background: #26a2ff;
}
.search ::v-deep .el-input-group__append:active .el-icon-search {
	color: #fff;
}
.diy_tip_bg {
	background: #f5f6f9;
	overflow: hidden;
	.diy-tip {
		margin-bottom: 15px;
		border: 1px solid #67c23a;
		padding: 20px 16px;
		p {
			color: #67c23a !important;
			font-size: 16px;
			margin: 0 !important;
			padding: 4px 0;
		}
	}
}
::v-deep .el-dialog__body {
	padding: 0px 20px 30px;
}
</style>