dd_pc/src/views/common/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" v-if="workDetailData.task_file_list && workDetailData.task_file_list.length > 0">
						<div class="label"></div>
						<div class="content_text">
						<el-image
							v-for="(item, index) in workDetailData.task_file_list"
							:key="index"
							style="width: 100px; height: 100px;margin-right:8px"
							:src="item"
							:preview-src-list="workDetailData.task_file_list"
						></el-image>
						</div>
					</li>
					<li class="flex-box">
						<div class="label">积分种类</div>
						<div class="content_text">{{ workDetailData.pt_name }}</div>
					</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.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" v-if="workDetailData.create_time">
						<div class="label">发布时间</div>
						<div class="content_text">{{ workDetailData.create_time }}</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.ahead_award_point > 0">
						<div class="label">提前奖分</div>
						<div class="content_text">{{ workDetailData.point_config.ahead_award_point }} B分/天</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 }} B分/天</div>
					</li>
					<li class="flex-box" v-if="workDetailData.complete_task && workDetailData.complete_task.time">
						<div class="label">完成时间</div>
						<div class="content_text">{{ workDetailData.complete_task.time }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.complete_task && workDetailData.complete_task.remark">
						<div class="label">完成备注</div>
						<div class="content_text">{{ workDetailData.complete_task.remark }}</div>
					</li>
					<li class="flex-box" v-if="workDetailData.complete_task && workDetailData.complete_task.files && workDetailData.complete_task.files.length > 0">
						<div class="label"></div>
						<div class="content_text">
						<el-image
							v-for="(item, index) in workDetailData.complete_task.files"
							:key="index"
							style="width: 100px; height: 100px;margin-right:8px"
							:src="item"
							:preview-src-list="workDetailData.complete_task.files"
						></el-image>
						</div>
					</li>
				</ul>
				
				<div v-show="workDetailData.point_config && workDetailData.point_config.item_info">
					<p class="row_title">规则依据</p>
					<el-row :gutter="10" v-if="workDetailData.point_config.rule_info">
						<el-col :span="4">规则分类</el-col>
						<el-col :span="19">{{ workDetailData.point_config.rule_info.name }}</el-col>
					</el-row>
					<el-row v-if="workDetailData.point_config.item_info">
						<el-col :span="4">积分规则</el-col>
						<el-col :span="19">{{ workDetailData.point_config.item_info.remark }}</el-col>
					</el-row>
					<el-row v-if="workDetailData.point_config.item_info">
						<el-col :span="4">积分</el-col>
						<el-col :span="19" v-show="workDetailData.point_config.item_info.min_point == workDetailData.point_config.item_info.max_point">{{ workDetailData.point_config.item_info.min_point }} {{workDetailData.pt_name}}</el-col>
						<el-col :span="19" v-show="workDetailData.point_config.item_info.min_point != workDetailData.point_config.item_info.max_point">
							{{ workDetailData.point_config.item_info.min_point }} ~ {{ workDetailData.point_config.item_info.max_point }} {{workDetailData.pt_name}}
						</el-col>
					</el-row>
				</div>
				<div v-show="showWork" style="border-top: 2px solid #f8f8f8;">
					<div class="d_progress">
						<div class="flex-box ">
							<div class="flex-1">工作进度（{{ workDetailData.progress }}%）</div>
            				<div class="fontColorF addJf" @click="sliderShow" v-if="workDetailData.employee_id == userId && workDetailData.status==1">+更新进度</div>
						</div>
						<el-progress :percentage="workDetailData.progress"></el-progress>
					</div>
					<div>
						<el-tabs v-model="activeName">
							<el-tab-pane label="工作记录" name="work">
								<div class="flex-box">
									<div class="flex-1"></div>
									<div class="fontColorF addJf" @click="isOne = true" v-if="workDetailData.employee_id == userId && workDetailData.status < 3 ">+记一条工作记录</div>
								</div>
								<div class="work_box" style="padding-top:10px">
									<div class="work_item" v-for="(item, index) in text_list" :key="index" style="margin: 0 0 15px 0">
										<div class="flex-box">
											<userImage class="user_img person_imghead" width="40px" height="40px" :user_name="item.recorder" :img_url="item.img_url"></userImage>
											<div style="width: 100%;" class="d_name">
												<div class="flex-box flex-d-center">
													<div class="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 }} <span class="delete_jfjl" v-if="item.recorder_id == userId && workDetailData.status < 3 " @click="deletejf_cli(index,0)"><i class="el-icon-delete"></i></span> </div>
												</div>
												<div class="fontColorB" style="margin-top: 5px;">{{ item.remark }}</div>
											</div>
										</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 class="fontColorF addJf" @click="isIntegral = true" v-if="keepTheScore">+记分</div>
								</div>
								<div class="work_box" style="padding-top:10px">
									<div class="work_item" v-for="(item, index) in point_list" :key="index" style="margin: 0 0 15px 0">
										<div class="flex-box">
											<userImage class="user_img person_imghead" width="40px" height="40px" :user_name="item.recorder" :img_url="item.img_url"></userImage>
											<div style="width: 100%;" class="d_name">
												<div class="flex-box flex-d-center">
													<div class="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 }} <span class="delete_jfjl" v-if="userId == item.recorder_id && workDetailData.status < 3" @click="deletejf_cli(index,1)"><i class="el-icon-delete"></i></span> </div>
												</div>
												<div class="fontColorB" style="margin-top: 5px;">{{ item.remark }}</div>
											</div>
										</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>
		
		<!-- 更新进度 -->
		<el-dialog title="更新进度" :close-on-click-modal="false" :visible.sync="isSlider" :before-close="publicClose" width="40%">
			<div class="slider">
			<div class="fontColorF">拖动滑杆更新进度</div>
			<el-slider v-model="progress"></el-slider>
			</div>
			<span slot="footer">
			<el-button @click="publicClose()">取消</el-button>
			<el-button type="primary" @click="sliderSend">完成</el-button>
			</span>
		</el-dialog>
		<!-- 记一条 -->
		<el-dialog title="记一条" :close-on-click-modal="false" :visible.sync="isOne" destroy-on-close :before-close="publicClose" width="40%">
			<div class="flex-box">
				<div style="width: 80px;">工作记录</div>
				<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
			</div>
			<span slot="footer">
				<el-button @click="publicClose()">取消</el-button>
				<el-button type="primary" @click="onerecord">完成</el-button>
			</span>
		</el-dialog>
		<!-- 记分记录 -->
		<el-dialog title="记分" :visible.sync="isIntegral" :before-close="publicClose" width="40%" destroy-on-close :close-on-click-modal="false">
			<el-form :model="integral" ref="integral" label-width="80px" :rules="formRules">
				<el-form-item label="记录"  prop="text" :rules="[{ required: true, message: '记录不能为空'}]">
					<el-input type="textarea" :rows="3" v-model="integral.text"></el-input>
				</el-form-item>
				<!-- 记分不能为空 -->
				<el-form-item label="记分"  prop="num" >
				<!-- <el-form-item label="记分"  prop="num" :rules="[{ required: false, message: '记分不能为空'},{ type: 'number', message: '积分必须为数字值'}]"> -->
					<div class="num" :class="[integral.type=='1'?'add':'jian']"></div>
					<el-input placeholder="请输入内容" type="Number" v-model.number="integral.num" @input="(val)=>{integral.num = val.replace(/[^\d]/g, '')}" >
						<el-select v-model="integral.type" slot="prepend" placeholder="请选择" style="width: 80px;">
							<el-option label="奖分" value="1"></el-option>
							<el-option label="扣分" value="2"></el-option>
						</el-select>
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="publicClose()">取消</el-button>
				<el-button type="primary" @click="integralSend('integral')">完成</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
const validatorNoZero = (rule, value, callback) => {//设置记分的验证
	if (value === 0) {
		return callback(new Error("记分不能为0"));
	} else if (value === '') {
		return callback(new Error("记分不能为空"));
	}else if (isNaN(value)){
		return callback(new Error("积分必须为数字值"));
	}else{
		callback();
	}
};
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: {},


			userId: this.$getUserData().id,
			isSlider: false,//更新进度弹窗
			  progress: 0,//更新进度modus
			  isOne: false,//记一条
			  textarea: '',//记录一条内容
			  isIntegral:false,//记分记录
			integral:{
				text:'',
				num:0,
				type:"1",
			},
			formRules:{//记分验证
				num: [
				{
					required: true,
					validator: validatorNoZero,
					trigger: "blur"
				}
				],
			},
			keepTheScore: false,
			employeeMe: {},
		};
	},
	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: {
		employee_me(data){
			let params = {
				id: data.employee_id
			};
			this.$axios('get', '/api/employee/info', params)
			.then(res => {
				this.employeeMe = res.data.data
				this.keepTheScore = this.keepThe_score(data)
			})
		},
		keepThe_score(cer){
			if(cer.status > 2){
				return false
			}
			if(this.userId == cer.reviewer_id){
				return true
			}
			return this.employeeMe.employee_detail.superior_list.some(x =>{
				if(this.userId == x.id){
					return true
				}
			})
		},
		deletejf_cli(cor,cur){
			this.$confirm('确定永久删除此项?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
			}).then(() => {
				let lier = cur == 1 ? this.point_list : this.text_list
				let libf = cur == 1 ? this.text_list : this.point_list
				lier.splice(cor,1)
				let data = {
					work_id: this.workDetailData.id,
            		process: []
				}
				data.process =lier.concat(libf)
				if (data.process.length == 0) {
					data.process = "[1]"
				} else {
					data.process = JSON.stringify(data.process);
				}
				this.$axios('post', '/api/integral/work', data).then(res =>{
					if(res.data.code == 1){
						this.getData();
					}
				})
			}).catch(() => {});
		},
		//记分记录
		integralSend(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					var items = this.workDetailData.process.list || [];
					var process = {
							img_url: this.$getUserData().img_url,
							point: this.integral.type == "1" ? this.integral.num : '-' + this.integral.num,
							recorder_id: this.$getUserData().id,
							recorder: this.$getUserData().name,
							remark: this.integral.text,
							time: this.$moment().format('YYYY-MM-DD HH:mm')
					}
					var data = {
						work_id: this.workDetailData.id,
						process: [],
					}
					items.unshift(process);
					data.process = JSON.stringify(items);
					this.$axios('post','/api/integral/work',data).then(res => {
						if (res.data.code == 1) {
							this.publicClose();
							this.getData();
						}
					})
				}
			})
		},
		//记一条
		onerecord(){
			if(!this.textarea){
				this.$message.error("请输入备注内容");
				return
			}
			var items = this.workDetailData.process.list || [];
			var process = {
				img_url: this.$getUserData().img_url,
				point: 0,
				recorder_id: this.$getUserData().id,
				recorder: this.$getUserData().name,
				remark: this.textarea,
				time: this.$moment().format('YYYY-MM-DD HH:mm')
			}
			var data={
				work_id:this.workDetailData.id,
				process:[],
			}
			items.unshift(process);
			data.process=JSON.stringify(items);
			this.$axios('post', '/api/integral/work', data).then(res => {
				if (res.data.code == 1) {
					this.publicClose();
					this.getData();
				}
			})
		},
		//更新进度
		sliderShow(){
			this.progress = this.workDetailData.progress
			this.isSlider = true
		},
		sliderSend(){
			var self = this;
			let data = {
				work_id: self.workDetailData.id,
				progress: self.progress,
			}
			self.$axios('post','/api/integral/work',data).then(res => {
				if (res.data.code == 1) {
					this.getData();
					self.isSlider = false;
				}
			})
		},
		publicClose(){
			this.textarea = '';
			this.integral = {
				text: '',
				num: 0,
				type: "1",
			};
			this.isSlider = false;
			this.isOne = false;
			this.isIntegral = false;
		},
		// 关闭弹窗
		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.employee_me(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 {
							if(this.workDetailData.process.list[i].recorder_id == this.workDetailData.employee_id) {
					      		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;
	padding-bottom: 100px;
	.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;
}
.addJf{
	font-size: 13px;
	cursor: pointer;
	margin-bottom: 5px;
	padding: 5px;
	transition: all .3s;
}
.addJf:hover{
	color: #26a2ff !important;
}
.num{
	position: absolute;
	height: 22px;
	width: 20px;
	z-index: 999;
	left: 85px;
	line-height: 40px !important;
}
.add:before{
	position: absolute;
	content: "+";
	color: #f56c6c;
}
.jian:before{
	position: absolute;
	content: "-";
	color: #67c23a;
}
.delete_jfjl{
	transition: .3s all;
	cursor: pointer;
	margin: 0 0 0 10px;
}
.delete_jfjl:hover{
	color: #26a2ff;
}
</style>