dd_pc/src/views/common/below/taskDetailsPopup.vue

<template>
	<div>
		<!-- 任务详情弹窗 -->
		<el-drawer :visible.sync="Delay_to_open" :with-header="false" :size="'500px'" :before-close="handleClose" :custom-class="'drawer_details'">
			<div class="details_title">{{ title }}</div>
			<div class="details_content" v-if="workDetailData" v-loading="loading">
				<div class="flex-box flex-v-ce">
					<userImage class="user_img person_imghead" width="46px" height="46px" :user_name="workDetailData.employee_name" :img_url="workDetailData.img_url"></userImage>
					<div class="d_userMessage">
						<div>{{ workDetailData.employee_name }}</div>
						<div v-if="detailType != 2 && workDetailData.dept_list[0]">{{ workDetailData.dept_list[0].dept_name }}</div>
					</div>
					<div style="margin-left: 5px;" class="flex-box flex-v-ce">
						<div v-if="workDetailData.point_config.base_point > 0" class="red">+{{ workDetailData.point_config.base_point }}</div>
						<div v-else class="green">{{ workDetailData.point_config.base_point }}</div>
						<div style="margin-left: 5px;">{{ $getTypsName(workDetailData.pt_id) }}</div>
					</div>
				</div>
				<ul>
					<li class="flex-box">
						<div class="label">任务内容</div>
						<div class="content_text">{{ workDetailData.task_name }}</div>
					</li>
					<li class="flex-box">
						<div class="label">任务备注</div>
						<textarea class="flex-1" disabled="disabled" v-model="workDetailData.task_remark" style="border: none;height:100px"></textarea>
					</li>
					<li class="flex-box">
						<div class="label">任务积分</div>
						<div class="content_text">{{ workDetailData.point_config.base_point }}{{ workDetailData.pt_name }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config.review_point">
						<div class="label">最终分</div>
						<div class="content_text">{{ workDetailData.point_config.review_point }}</div>
					</li>
					<li class="flex-box">
						<div class="label">截止时间</div>
						<div class="content_text">{{ workDetailData.expire_time }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config.timeout_deduction_point > 0">
						<div class="label">逾期扣分</div>
						<div class="content_text">{{ workDetailData.point_config.timeout_deduction_point }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config.ahead_award_point > 0">
						<div class="label">提前奖分</div>
						<div class="content_text">{{ workDetailData.point_config.ahead_award_point }}</div>
					</li>
					<li class="flex-box">
						<div class="label">审批人</div>
						<div class="content_text">{{ workDetailData.reviewer_name }}</div>
					</li>
					<li class="flex-box">
						<div class="label">发布人</div>
						<div class="content_text">{{ workDetailData.publisher_name }}</div>
					</li>
					<li class="flex-box">
						<div class="label">积分种类</div>
						<div class="content_text">{{ workDetailData.pt_name }}</div>
					</li>
				</ul>
				<div v-show="showWork">
					<div class="d_progress">
						<div class="flex-box">
							<div class="flex-1">工作进度（{{ workDetailData.progress }}%）</div>
						</div>
						<el-progress :percentage="workDetailData.progress"></el-progress>
					</div>
					<div>
						<el-tabs v-model="activeName">
							<el-tab-pane label="工作记录" name="work">
								<div class="work_box" style="padding-top:10px">
									<div class="work_item" v-for="(item, index) in text_list" :key="index">
										<div class="flex-box-ce">
											<userImage class="user_img person_imghead" width="40px" height="40px" :user_name="item.recorder" :img_url="item.img_url"></userImage>
											<div class="d_name flex-1">{{ item.recorder }} 
												<span v-if="item.point * 1 > 0">+{{ item.point }}</span>
												<span v-if="item.point * 1 < 0">{{ item.point }}</span>
											</div>
											<div class="d_date fontColorF">{{ item.time }}</div>
										</div>
										<div class="d_content fontColorB">{{ item.remark }}</div>
									</div>
									<div v-if="text_list.length==0" class="fontColorF" style="text-align: center;">暂无工作记录</div>
								</div>
							</el-tab-pane>
							<el-tab-pane label="记分记录" name="participation">
								<div class="flex-box" style="padding-bottom: 10px;border-bottom: 1px solid #f1f1f1;">
									<div class="flex-1 blue">
										<span v-if="point_total > 0">合计：+{{ point_total }}</span>
										<span v-else>合计：{{ point_total }}</span>
									</div>
								</div>
								<div class="work_box" style="padding-top:10px">
									<div class="work_item" v-for="(item, index) in point_list" :key="index">
										<div class="flex-box-ce">
											<userImage class="user_img person_imghead" width="40px" height="40px" :user_name="item.recorder" :img_url="item.img_url"></userImage>
											<div class="d_name flex-1">{{ item.recorder }}
												<span class="red" v-if="item.point * 1 > 0">+{{ item.point }}</span>
												<span class="green" v-if="item.point * 1 < 0">{{ item.point }}</span>
											</div>
											<div class="d_date fontColorF">{{ item.time }}</div>
										</div>
										<div class="d_content fontColorB">{{ item.remark }}</div>
									</div>
									<div v-if="point_list.length==0" class="fontColorF" style="text-align: center;">暂无积分记录</div>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>

<script>
export default {
	name: 'taskDetailsPopup',
	props: {
		title: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: false
		},
		id: {
			type: Number,
			default: 0
		},
		showWork: {
			type: Boolean,
			default: true
		},
		detailType: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			Delay_to_open: false, //打开抽屉

			loading: false,
			workDetailData: {
				process: [],
				dept_list: [],
				point_config: {
					base_point: '0'
				}
			},
			// itemId: getId,
			isOne: false,
			text_list: [],
			isIntegral: false,
			
			point_total: 0,
			point_list: [],
			activeName: 'work',
			getDataUrl: '/api/integral/work',
			params: {}
		};
	},
	mounted() {
		this.detailType == 2 ? (this.getDataUrl = '/api/integral/schedule') : (this.getDataUrl = '/api/integral/work');
		this.$nextTick(() => {
			this.getData();
			this.Delay_to_open = this.visible; //更换打开抽屉时机，避免打开两次
		});
	},
	methods: {
		// 关闭弹窗
		handleClose() {
			this.$emit('update:visible', false);
		},
		// 删除
		delItem() {
			console.log('删除');
		},
		// 获取数据
		getData() {
			this.loading = true;
			let data = this.detailType == 2 ? { schedule_id: this.id } : { work_id: this.id };
			this.$axios('get', this.getDataUrl, data).then(res => {
				if (res.data.code == 1) {
					this.workDetailData = res.data.data;
					this.workDetailData = res.data.data
					this.text_list = []
					this.point_list = []
					this.point_total = 0
					if (this.workDetailData.process.list && this.workDetailData.process.list.length > 0) {
					  for (let i in this.workDetailData.process.list) {
					    this.point_total += this.workDetailData.process.list[i].point * 1
					    if (this.workDetailData.process.list[i].point != 0) {
					      this.point_list.push(this.workDetailData.process.list[i])
					    } else {
					      this.text_list.push(this.workDetailData.process.list[i])
					    }
					  }
					}
					
				}
			}).finally(() => {
				this.loading = false;
			});
		}
	}
};
</script>
<style lang="scss" scoped="scoped">
.details_content {
	& .d_userMessage {
		margin-left: 10px;
	}
	& .d_userMessage div:nth-child(1) {
		font-size: 16px;
	}
	& .d_userMessage div:nth-child(2) {
		font-size: 12px;
		color: #909399;
	}
	& .d_progress {
		padding: 12px 0;
		border-bottom: 1px solid #f1f1f1;
		margin-bottom: 10px;
	}
	& ul {
		padding: 12px 0;
		border-bottom: 1px solid #f1f1f1;
		& li {
			padding: 6px 0;
		}
		& .label {
			width: 80px;
			text-align: left;
			color: #909399;
		}
		& .content_text {
			flex: 1;
		}
	}
}
.fontColorF {
	color: #909399;
}
.details_content {
	padding: 20px;
	height: calc(100vh - 60px);
	overflow: 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;
		}
	}
}
.details_title {
	font-size: 18px;
	padding: 20px;
	border-bottom: 1px #efefef solid;
}
.d_name{
	margin-left: 10px;
}
.d_content{
	margin-left: 50px;
}
</style>