dd_pc/src789/views/abPoint/apply_list.vue

<template>
	<div class="all" style="padding: 20px;">
		<el-tabs v-model="tabs" type="card">
			<el-tab-pane label="申请通过" name="complete"></el-tab-pane>
			<el-tab-pane label="待审批" name="waiting"></el-tab-pane>
			<el-tab-pane label="被驳回" name="refuse"></el-tab-pane>
		</el-tabs>

		<el-row style="margin-bottom: 15px;">
			<el-col :span="12"><el-button type="primary" @click="dialogVisible = true">申请积分</el-button></el-col>
			<el-col :span="6" :offset="6">
				<el-input v-model="formData.keyword" placeholder="输入申请内容" @keyup.enter.native="searchFun">
					<el-button slot="append" @click="searchFun" size="medium" icon="el-icon-search"></el-button>
				</el-input>
			</el-col>
		</el-row>

		<el-table :data="dataList" stripe fit v-loading="table_loading" v-if="tabs == 'complete'" @row-click="openDetail">
			<el-table-column label="申请内容" prop="remark">
				<template slot-scope="scope">
					{{ scope.row.remark.customize || scope.row.remark.rule }}
				</template>
			</el-table-column>
			<el-table-column label="积分" prop="review_point" width="120">
				<template slot-scope="scope">
					<span :class="{ color_green: scope.row.point < 0, color_red: scope.row.point > 0 }">
						<span v-show="scope.row.point > 0">+</span>
						{{ scope.row.point }} {{ scope.row.pt_id == 3 ? 'B分' : scope.row.pt_id == 2 ? 'A分' : scope.row.pt_id == 1 ? '绩效分' : '' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="时间" prop="event_time" width="150"></el-table-column>
			<template slot="empty">
				<div class="nopoint_box" v-if="!formData.keyword">
					<div class="noimg"></div>
					<span class="title">
						你还没有申请积分 现在
						<el-button type="text" @click="dialogVisible = true">申请积分</el-button>
					</span>
				</div>
				<div class="nopoint_box" v-else>
					<div class="noimg"></div>
					<span class="title">暂无数据</span>
				</div>
			</template>
		</el-table>

		<el-table :data="dataList" stripe fit v-loading="table_loading" v-if="tabs == 'waiting'" @row-click="openDetail">
			<el-table-column label="申请内容" prop="remark">
				<template slot-scope="scope">
					{{ scope.row.remark.customize || scope.row.remark.rule }}
				</template>
			</el-table-column>
			<el-table-column label="积分" prop="review_point" width="120">
				<template slot-scope="scope">
					<span>
						<span v-show="scope.row.point > 0">+</span>
						{{ scope.row.point }} B分
					</span>
				</template>
			</el-table-column>
			<el-table-column label="时间" prop="event_time" width="150"></el-table-column>
			<template slot="empty">
				<div class="nopoint_box" v-if="!formData.keyword">
					<div class="noimg"></div>
					<span class="title">
						你还没有申请积分 现在
						<el-button type="text" @click="dialogVisible = true">申请积分</el-button>
					</span>
				</div>
				<div class="nopoint_box" v-else>
					<div class="noimg"></div>
					<span class="title">暂无数据</span>
				</div>
			</template>
		</el-table>

		<el-table :data="dataList" stripe fit v-loading="table_loading" v-if="tabs == 'refuse'" @row-click="openDetail">
			<el-table-column label="申请内容" prop="remark">
				<template slot-scope="scope">
					{{ scope.row.remark.customize || scope.row.remark.rule }}
				</template>
			</el-table-column>
			<el-table-column label="时间" prop="event_time" width="150"></el-table-column>
			<template slot="empty">
				<div class="nopoint_box" v-if="!formData.keyword">
					<div class="noimg"></div>
					<span class="title">
						你还没有申请积分 现在
						<el-button type="text" @click="dialogVisible = true">申请积分</el-button>
					</span>
				</div>
				<div class="nopoint_box" v-else>
					<div class="noimg"></div>
					<span class="title">暂无数据</span>
				</div>
			</template>
		</el-table>

		<center style="margin-top: 15px;">
			<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="pageLimit"
				:total="total"
			></el-pagination>
		</center>

		<el-drawer :visible.sync="detailShow" :with-header="false" :size="'600px'">
			<div class="drawer_title">申请详情</div>
			<div class="detail_popup" v-loading="detail_loading" v-if="detail_info !== null">
				<el-row :gutter="10" style="padding-bottom:10px;border-bottom:1px #f8f8f8 solid;">
					<el-col :span="24">
						<userImage :id="detail_info.applyor_id" class="fl" width="50px" height="50px" fontSize="15" style="display: inline-block; margin-right: 10px;"></userImage>
						<div class="user_text">
							<p>{{ getEmployeeName(detail_info.applyor_id) }}</p>
							<!-- 优化 -->
							<div v-for="(item, index) in detail_info.process" :key="index" v-show="item.review_point != 0">
								<p v-if="detail_info.status == 1">
									<span
										v-show="
											(item.point !== 0 && item.review_point >= 0 && detail_info.item_prize_type == 1) ||
												(item.point !== 0 && item.review_point >= 0 && detail_info.item_prize_type == -1) ||
												(item.point !== 0 && item.review_point >= 0 && detail_info.item_prize_type == 0)
										"
										style="color:#f56c6c;font-size:16px;padding-left:8px"
									>
										+{{ item.review_point }}
									</span>
									<span
										v-show="
											(item.point !== 0 && item.review_point <= 0 && detail_info.item_prize_type == 2) ||
												(item.point !== 0 && item.review_point <= 0 && detail_info.item_prize_type == -1) ||
												(item.point !== 0 && item.review_point <= 0 && detail_info.item_prize_type == 0)
										"
										style="color:#67C23A;font-size:16px;padding-left:8px"
									>
										{{ item.review_point }}
									</span>
									<span v-show="detail_info.point">
										{{ detail_info.pt_id == 1 ? '绩效分' : detail_info.pt_id == 2 ? 'A分' : detail_info.pt_id == 3 ? 'B分' : '' }}
									</span>
								</p>
							</div>
						</div>
						<p class="user_text text_ccc">{{ detail_info.review_status_mark }}</p>
					</el-col>
				</el-row>
				<el-row :gutter="10" v-for="(item, index) in detail_info.detail" :key="index">
					<el-col :span="4">{{ item.key }}</el-col>
					<el-col :span="20" v-if="item.key == '附件'">
						<el-image
							v-for="(items, indexs) in item.value"
							:key="indexs"
							style="width: 100px; height: 100px;margin:2px;"
							:src="items"
							:preview-src-list="item.value"
						></el-image>
					</el-col>
					<el-col :span="20" v-else>{{ item.value }}</el-col>
				</el-row>

				<el-row :gutter="10" v-if="detail_info.files != null && detail_info.files > 0">
					<el-col :span="4">图片</el-col>
					<el-col :span="20"><el-image v-for="(item, index) in detail_info.files" :key="index" style="width: 100px; height: 100px" :src="item"></el-image></el-col>
				</el-row>
				<div v-show="detail_info.process != false">
					<p class="row_title">
						审批
						<span class="row_tips">多人审批时，以最后一人为准</span>
					</p>

					<div class="examine_steps">
						<el-steps direction="vertical" :space="50">
							<el-step v-for="(item, index) in detail_info.process" :key="index">
								<template slot="icon">
									<userImage width="36px" height="36px" :img_url="item.img_url" :user_name="item.name"></userImage>
								</template>
								<template slot="title">
									<div style="color: #303133;font-size:14px;margin-top:-2px;">
										{{ item.name }} {{ item.remark }}
										<!-- <span v-show="item.point !== 0">{{item.point}}</span> -->
									</div>
								</template>
								<template slot="description">
									<div>{{ item.time }}</div>
									<div style="color: #333; margin-bottom: 15px;">{{ item.review_remark }}</div>
								</template>
							</el-step>
						</el-steps>
					</div>
				</div>
			</div>
		</el-drawer>

		<applicationIntegrationPopup title="申请积分" :visible.sync="dialogVisible"></applicationIntegrationPopup>
	</div>
</template>

<script>
import moment from 'moment';
import EmployeeSelector from '@/components/EmployeeSelector.vue';
import applicationIntegrationPopup from '@/components/applicationIntegrationPopup';
export default {
	data() {
		return {
			tabs: 'complete',
			dataList: [],
			table_loading: false,
			detailShow: false,
			detail_loading: false,
			formData: {
				type: 'complete',
				pt_id: 0,
				page: 1,
				page_size: 10,
				keyword: ''
			},
			total: 0,
			pageLimit: 10,
			point_types: JSON.parse(localStorage.getItem('SET_POINT_TYPES')),
			employee_name: JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP')),
			detail_info: {},

			dialogVisible: false,
			itemIndex: 0
		};
	},
	components: {
		EmployeeSelector,
		applicationIntegrationPopup
	},
	watch: {
		tabs(val) {
			this.dataList = [];
			this.total = 0;
			this.formData.page = 1;
			this.formData.keyword = '';
			this.formData.type = val;
			// this.get_list();
		}
	},
	mounted() {
		// this.get_list();
	},
	methods: {
		getEmployeeName(id) {
			for (const key in this.employee_name) {
				if (this.employee_name[key].id == id) {
					return this.employee_name[key].name || '未知';
				}
			}
		},
		point_name(id) {
			let point = this.point_types.find(item => {
				if (item.id == id) {
					return item;
				}
			});
			return point.name;
		},
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list();
		},
		handleSizeChange(val) {
			this.pageLimit = val;
			this.formData.page_size = this.pageLimit;
			this.get_list();
		},
		searchFun() {
			this.dataList = [];
			this.total = 0;
			this.formData.page = 1;
			this.get_list();
		},
		get_list() {
			this.table_loading = true;
			this.$axios('get', '/api/integral/review/apply/list', this.formData)
				.then(res => {
					if (res.data.code == 1) {
						this.dataList = res.data.data.list;
						this.total = res.data.data.total;
					}
				})
				.catch(e => {
					this.$message.error(e.data.msg);
				})
				.finally(() => {
					this.table_loading = false;
				});
		},
		openDetail(item) {
			let data = {
				review_id: item.id
			};
			this.detailShow = true;
			this.detail_loading = true;
			this.$axios('get', '/api/integral/review', 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;
				});
		}
	}
};
</script>

<style scoped lang="scss">
.box {
	background-color: #ffffff;
	padding: 20px;
	min-height: calc(100vh - 160px);
}
.color_green {
	color: #4bd964;
}
.color_red {
	color: #f56c6c;
}

.detail_popup {
	padding: 20px;
	height: 90vh;
	overflow-y: auto;

	.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;
		}
	}
	.examine_steps {
		.el-step {
			flex-basis: auto !important;
		}
	}
}

// 滚动条样式
.detail_popup::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	background-color: rgba(216, 216, 216, 0.8);
}
.detail_popup::-webkit-scrollbar {
	width: 5px;
	background-color: rgba(201, 201, 201, 0);
}
.detail_popup::-webkit-scrollbar-thumb {
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px rgb(153, 145, 145) (160, 154, 154);
	background-color: rgb(168, 167, 167);
}

.drawer_title {
	font-size: 18px;
	padding: 20px;
	border-bottom: 1px #efefef solid;
}
.user_text {
	margin: 0;
	line-height: 25px;
	display: flex;
}
.text_ccc {
	font-size: 12px;
	color: #606266;
}
::v-deep .el-table tr:hover {
	cursor: pointer;
}
</style>