dd_pc/src/views/workbench/approval_list.vue

<template>
	<div>
		<div class="all padding-20">
			<FormBox>
				<div class="form-item">
					<div class="form-label">姓名搜索</div>
					<div class="form-search">
						<el-select v-model="formData.target_id" filterable clearable placeholder="请输入或选择人员">
							<el-option size="medium" 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-input size="medium" v-model="formData.keyword" max="20" placeholder="请输入"	clearable></el-input>
					</div>
				</div>
			</FormBox>

			<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="owner_id" width="80">
						<template slot-scope="scope">
							<el-button type="text">审批</el-button>
						</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:this.$getUserData().id,
				},
				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'
				}]
			};
		},
		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.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();
			}
		},
		components: {
			examinePopup
		},
		mounted() {
			this.getSpList();
			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>