dd_pc/src/views/workbench/approval_list.vue

<template>
	<div>
		<div class="all padding-20">

			<el-form ref="formData" :inline="true" :model="formData" label-width="80px">
				<el-form-item label="工作类型">
				  <el-select 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>
				</el-form-item>
				<el-form-item label="积分类型">
					<el-select 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>
				</el-form-item>
				<el-select 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>
			</el-form>

			<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, 30, 40, 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';

export default {
	data() {
		return {
			formData: {
				type: 'waiting',
				source_type: '0',
				target_id:null,
				pt_id: 0,
				page_size: 10,
				page: 1
			},
			total: null,
			list: null,
			loading: false,
			point_types: null,
			detailShow: false,
			detail_id: null,
			employee_map: JSON.parse(localStorage.getItem("userList")),
			sourceList: [{ name: '全部', id: '0' }, { name: '积分任务', id: '1' }, { name: '积分申请', id: '2' }, { name: '积分录入', id: '3' }]
		};
	},
	watch: {
		'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>