dd_pc/src/views/workbench/approvalAll.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" v-model="formData.target_id" 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.reviewer_id" 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.source_type" placeholder="请选择排序">
							<el-option v-for="item in sourceList" :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.pt_id" placeholder="请选择排序">
							<el-option v-for="item in point_types" :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.type" placeholder="请选择排序">
							<el-option v-for="item in stateList" :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>
				<div class="orange" style="padding-left: 10px;" v-if="config.event_review_status">仅展示待审批中的记录，方便快速查阅当前审批阻塞的节点和相关负责人</div>
				<el-table :data="list" style="cursor: pointer;" v-loading="loading" class="listTable" @row-click="openDetail">
					<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 label="审批内容" prop="remark.rule">
						<template slot-scope="scope">
							<span class="font-flex-word" style="max-width: 200px;">{{ 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 label="积分" prop="review_point" width="120">
						<template slot-scope="scope">
							<span v-if="scope.row.review_point < 0" class="green">
								{{ scope.row.review_point }}
								<span>{{ $getTypsName(scope.row.pt_id) }}</span>
							</span>
							<span class="red" v-else-if="scope.row.review_point > 0">
								+{{ scope.row.review_point }}<span>{{ $getTypsName(scope.row.pt_id) }}</span>
							</span>
							<span v-else>--</span>
						</template>
					</el-table-column> -->
<!-- 					<el-table-column label="状态" prop="review_status" width="80">
						<template slot-scope="scope">
							<span v-show="scope.row.review_status == 0">待审批</span>
							<span v-show="scope.row.review_status == 1" class="green">审批通过</span>
							<span v-show="scope.row.review_status == 2" class="red">审批驳回</span>
						</template>
					</el-table-column> -->
					<template slot="empty">
						<div class="nopoint_box">
							<div class="noimg noperson"></div>
							<span class="title">没有对应的数据</span>
						</div>
					</template>
				</el-table>
			</div>

			<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>
	</div>
</template>

<script>
import examinePopup from '@/components/examinePopup.vue';
import { _debounce, getToken } from '@/api/auth';
export default {
	data() {
		return {
			formData: {
				type: 'waiting',
				source_type: '0',
				target_id:null,
				pt_id: 0,
				page_size: 10,
				page: 1,
				keyword:'',
				reviewer_id:null,
			},
			total: null,
			list: null,
			loading: false,
			point_types: null,
			detailShow: false,
			detail_id: null,
			employee_map: this.$getCache("userList"),
			sourceList: [{ name: '全部', id: '0' }, { name: '积分任务', id: '1' }, { name: '积分申请', id: '2' }, { name: '积分奖扣', id: '3' }],
			config:{},
			stateList: [{ name: '全部', id: 'all' }, { name: '待审批', id: 'waiting' }, { name: '已结束', id: 'reviewed' }],
		};
	},
	watch: {
		'formData.keyword': {
			deep: true,
			handler: _debounce(function(val) {
				this.formData.page = 1;
				this.getSpList();
			}, 1000)
		},
		'formData.pt_id'() {
			this.formData.page = 1;
			this.getSpList();
		},
		// 'formData.type'() {
		// 	this.formData.page = 1;
		// 	this.getSpList();
		// },
		'formData.source_type'() {
		  this.formData.page = 1;
		  this.getSpList();
		},
		'formData.target_id'(val) {
		  if(!val){
		    this.formData.target_id = null;
		  }
		  this.formData.page = 1;
		  this.getSpList();
		},
		'formData.reviewer_id'(val) {
		  if(!val){
		    this.formData.reviewer_id = null;
		  }
		  this.formData.page = 1;
		  this.getSpList();
		}
	},
	components: { examinePopup },
	mounted() {
		this.getSpList();
		this.config=this.$store.state.config;
		this.point_types = this.getPointTypes();
	},
	methods: {
		openDetail(item) {
			this.detail_id = item.id;
			this.detailShow = true;
		},
		getTypes() {
			var arr = this.$getTyps();
			return arr.filter(function(item) {
				return item.code != 'JX';
			});
		},
		// 获取积分类型
		getPointTypes() {
			let point = this.getTypes();
			point.unshift({ code: 'all', id: 0, name: '全部' });
			return point;
		},
		// 页码变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.getSpList();
		},
		handleSizeChange(val) {
			this.formData.page_size = val;
			this.getSpList();
		},
		getSpList() {
			let self = this;
			self.loading = true;
			let params = JSON.parse(JSON.stringify(this.formData));
			self.$axios('get', '/api/integral/review/list', params)
				.then(res => {
					if (res.data.code == 1) {
						self.list = res.data.data.list;
						self.total = res.data.data.total;
					}
				})
				.finally(e => {
					self.loading = false;
				});
		}
	}
};
</script>

<style lang="scss">
.box {
	min-height: calc(100vh - 140px);
	width: 100%;
	background-color: #fff;
	padding: 20px;
	& .listTable {
		& .tableTitle {
			line-height: 50px;
			padding-left: 10px;
		}
	}
}
.popperSPBOX {
	max-width: calc(100vh - 400px);
	background-color: #fff;
}
</style>