dd_pc/src/components/examinePopup.vue

<template>
	<div>
		<el-drawer :title="title" :visible.sync="show" :with-header="false" :size="'600px'" :before-close="closeDetail" direction="rtl">
			<div class="drawer_title">审批详情</div>
			<div v-loading="detail_loading">
				<div class="detail_popup" v-if="detail_info !== null">
					<el-row :gutter="10" style="padding-bottom:20px;border-bottom:1px #f8f8f8 solid;position: relative;">
						<el-col :span="24">
							<template>
								<userImage class="fl" :user_name="detail_info.employee_name" :img_url="detail_info.employee_img" width="50px" height="50px"></userImage>
							</template>
							<template>
								<div class="flex-box flex-v-ce">
									<span style="line-height:50px; margin-left:10px;margin-right:10px;">{{ detail_info.employee_name }}</span>
									<span class="point" v-if="detail_info.status == 1">
										<span class="red" v-if="detail_info.review_point > 0">+{{ detail_info.review_point }}</span>
										<span v-else class="green">{{ detail_info.review_point }}</span>
										<span style="margin-left: 5px;">{{ $getTypsName(detail_info.pt_id) }}</span>
									</span>
									<div style="margin-left: 5px;">
										<span v-if="detail_info.status == 1" class="green">审批通过</span>
										<span v-else-if="detail_info.status == 2" class="red">审批驳回</span>
										<span v-else-if="detail_info.status == 0" class="yellow">待审批</span>
										<span v-else></span>
									</div>
								</div>
							</template>
						</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-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 style="width: 100px; height: 100px" :src="detail_info.files[0]" :preview-src-list="detail_info.files"></el-image></el-col>
				    </el-row>

					<div v-show="detail_info.item_name != ''">
						<p class="row_title">
							规则依据 &nbsp;
							<span class="row_tips" style="font-size:12px;color:#909399">此事件打分参考以下积分规则</span>
						</p>
						<el-row>
							<el-col :span="4">事件分类</el-col>
							<el-col :span="20">{{ detail_info.rule_name }}</el-col>
						</el-row>
						<el-row>
							<el-col :span="4">积分规则</el-col>
							<el-col :span="20">{{ detail_info.item_name }}</el-col>
						</el-row>
						<el-row>
							<el-col :span="4">规则积分</el-col>
							<el-col :span="20">
								<span v-show="detail_info.point > 0">+</span>
								{{ detail_info.point }} {{ detail_info.pt_id == 3 ? 'B分' : detail_info.pt_id == 2 ? 'A分' : detail_info.pt_id == 1 ? '绩效分' : '' }}
							</el-col>
						</el-row>
					</div>

					<div v-show="detail_info.process">
						<Steps :process="detail_info.process"></Steps>	
					</div>

					<el-row style="border-top: 1px #f8f8f8 solid;">
						<el-col :span="24" style="text-align: right;padding-top:20px" v-if="detail_info.status == 0&&detail_info.reviewer_id==$getUserData().id">
							<el-button v-if="detail_info.pt_id == 1" @click="closeDetail">取消</el-button>
							<el-button v-else @click="rejectBtn">驳回</el-button>
							<el-button type="primary" @click="adoptBtn">通过</el-button>
						</el-col>
						<el-col :span="24" style="text-align: right;padding-top:20px" v-if="detail_info.can_refuse == '1'">
							<span style="color:#909399;font-size:12px;padding-right:20px">撤回后需重新审批</span>
							<el-button type="primary" @click="revokeApproval">撤回审批</el-button>
						</el-col>
					</el-row>
				</div>
			</div>
		</el-drawer>

		<el-dialog title="	" :visible.sync="rejectShow" :before-close="rejectClose" width="520px">
			<el-form :model="rejectForm" ref="rejectForm" label-width="80px" v-loading="rejectLoading">
				<el-form-item
					label="审批意见"
					prop="remark"
					:rules="[{ required: true, message: '请输入审批意见', trigger: 'blur' }, { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }]"
				>
					<el-input type="textarea" :rows="4" v-model="rejectForm.remark" placeholder="请输入审批意见(限50字)"></el-input>
				</el-form-item>
				<el-form-item style="text-align: right; margin-bottom: 0">
					<el-button @click="cancelReject('rejectForm')">取消</el-button>
					<el-button type="primary" @click="confirmReject('rejectForm')">确认驳回</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="审批通过" :visible.sync="adoptShow" width="571px" :before-close="adoptClose">
			<el-form :model="adoptForm" ref="adoptForm" label-width="80px" v-loading="determinedBy">
				<el-form-item label="指定规则" v-if="!detail_info.rule_id && !detail_info.item_id && detail_info.source_type != 4">
					<el-switch v-model="adoptForm.ruleOrItem"></el-switch>
				</el-form-item>
				<el-form-item
					label="分类"
					v-if="detail_info.source_type != 4"
					v-show="(detail_info.rule_id && !detail_info.item_id) || !adoptForm.ruleOrItem"
					prop="rule_id"
					:rules="[{ required: true, message: '请选择规则分类', trigger: 'blur' }]"
				>
					<el-cascader
						:disabled="!!detail_info.rule_id || !!detail_info.item_id"
						class="date-picker-width"
						v-model="adoptForm.rule_id"
						:options="ruleTrees"
						:props="{ value: 'id', label: 'name', children: 'child' }"
						@change="ruleChange"
						ref="rule"
						clearable
						filterable
						change-on-select
						placeholder="请选择规则分类"
					></el-cascader>
				</el-form-item>
				<el-form-item label="规则内容" v-if="(!!detail_info.rule_id && detail_info.item_name) || (!!detail_info.item_id && detail_info.item_name)">
					<span>{{ detail_info.item_name }}</span>
				</el-form-item>
				<el-form-item
					label="规则"
					v-if="detail_info.source_type != 4"
					v-show="(detail_info.rule_id && detail_info.item) || adoptForm.ruleOrItem"
					prop="item_id"
					:rules="[{ required: true, message: '请选择规则细则', trigger: 'blur' }]"
				>
					<el-cascader
						:disabled="!!detail_info.rule_id || !!detail_info.item_id"
						class="date-picker-width"
						:popper-class="'itemClass'"
						v-model="adoptForm.item_id"
						:options="item_list"
						:props="{
							value: 'id',
							label: 'name',
							children: 'child',
							emitPath: 'false'
						}"
						:show-all-levels="false"
						ref="ruleItem"
						@change="cascaderItemIdChange"
						placeholder="请选择规则细则"
					></el-cascader>
				</el-form-item>
				<el-form-item label="规则积分" v-show="detail_info.item_id">
					{{
						detail_info.item_range_type == 1
							? detail_info.item_min_point
							: detail_info.item_range_type == -1
							? detail_info.item_min_point
							: detail_info.item_min_point + '～' + detail_info.item_max_point
					}}{{ detail_info.pt_id == 3 ? 'B分' : detail_info.pt_id == 2 ? 'A分' : detail_info.pt_id == 1 ? '绩效分' : '' }}
				</el-form-item>

				<el-form-item label="" v-if="rangeType.rule_rangeType_pt_id == 2 || rangeType.rule_rangeType_pt_id == 3">
					<div style="line-height: 24px;">
						{{ rangeType.rule_min_point == rangeType.rule_max_point ? rangeType.rule_min_point : rangeType.rule_min_point + '~' + rangeType.rule_max_point }}
						<span class="blue" style="margin-left: 5px;">{{ rangeType.rule_rangeType_pt_id == 3 ? 'B分' : 'A分' }}</span>
					</div>
					<div style="line-height: 24px;">{{ rangeType.rule_rangeType_name }}</div>
				</el-form-item>
				<el-form-item label="审批积分">
					<el-col :span="10">
						<el-input-number
							v-if="detail_info.item_range_type == 2"
							:min="detail_info.item_min_point"
							:max="detail_info.item_max_point"
							v-model="adoptForm.point"
							type="number"
						></el-input-number>
						<el-input-number
							v-else-if="detail_info.item_range_type == 1"
							:disabled="detail_info.item_range_type == 1"
							:min="1"
							v-model="adoptForm.point"
							placeholder="请输入分值"
						></el-input-number>
						<div v-else>
							<el-input-number
								v-if="rangeType.rule_range_type == 2"
								:disabled="forbiddenInputNum"
								:min="rangeType.rule_min_point"
								:max="rangeType.rule_max_point"
								v-model="adoptForm.point"
								placeholder="请输入分值"
							></el-input-number>
							<el-input-number v-else :disabled="forbiddenInputNum" v-model="adoptForm.point" placeholder="请输入分值"></el-input-number>
						</div>
					</el-col>
				</el-form-item>
				<el-form-item
					v-if="detail_info.source_type == 4"
					label="审批意见"
					prop="remark"
					:rules="[{ required: true, message: '请输入审批意见', trigger: 'blur' }, { max: 100, message: '长度不能超过 100 个字符', trigger: 'blur' }]"
				>
					<el-input :rows="4" type="textarea" v-model="adoptForm.remark" placeholder="说点什么(限100字)"></el-input>
				</el-form-item>
				<div style="padding-left: 80px">奖票用于优秀表现和重要事项的表彰</div>
				<el-form-item label="发放奖票"><el-switch v-model="adoptForm.switch"></el-switch></el-form-item>
				<el-form-item label="递交审批" v-if="$getUserData().is_creator==0">
					<el-row>
						<el-col :span="18">
							<el-input auto-complete="off" v-model="manager" placeholder="请选择上级递交审批"></el-input>
							<div @click="show_employee_selector = true" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
						</el-col>
					</el-row>

					<el-dialog title="选择人员" width="640px" :visible.sync="show_employee_selector" append-to-body :before-close="handleClose">
						<EmployeeSelector
							:can_select_employee="true"
							v-if="show_employee_selector"
							ref="approval"
							:multi="false"
							:employee_list="employee_lists"
							:isCreatorSelect="true"
							:user_no_select="false"
							:selected="manager_selected"
							@confirm="employee_confirm"
						/>
						<span slot="footer" class="dialog-footer">
							<el-button @click="show_employee_selector = false">取 消</el-button>
							<el-button type="primary" @click="submitApproval('approval')">确 定</el-button>
						</span>
					</el-dialog>
				</el-form-item>
				<el-form-item v-if="detail_info.source_type != 4" label="审批意见" prop="remark" :rules="[{ max: 100, message: '长度不能超过 100 个字符', trigger: 'blur' }]">
					<el-input :rows="4" type="textarea" v-model="adoptForm.remark" placeholder="说点什么(限100字)"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button @click="adoptClose">取 消</el-button>
					<el-button type="primary" @click="submitAdopt('adoptForm')">确定通过</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import EmployeeSelector from '@/components/EmployeeSelector';
import Steps from '@/components/Steps'; 
export default {
	name: 'examinePopup',
	data() {
		return {
			employee_lists: [],
			itemParticulars: false,
			rangeType: {
				rule_range_type: 0,
				rule_min_point: 0,
				rule_max_point: 0,
				rule_rangeType_pt_id: 0,
				rule_rangeType_name: ''
			},
			itemMaxPoint: 1,
			forbiddenInputNum: false,
			determinedBy: false, //确定通过loading
			rejectLoading: false, //驳回loading
			detail_id: null,
			detail_loading: false,
			detailShow: false,
			detail_info: {
				rule_id: ''
			},
			rejectShow: false,
			adoptShow: false,
			rejectForm: {
				remark: ''
			},
			adoptForm: {
				ruleOrItem: false,
				rule_id: null,
				item_id: 0,
				showPoint: null,
				point: null,
				switch: false,
				remark: ''
			},
			// 规则 or 细则
			ruleTrees: null,
			item_list: null,
			// 奖扣积分数组
			awardPointsArray: [{ name: '奖分', value: 1 }, { name: '扣分', value: 2 }],
			awardPoints: 1,

			// 下一个审批人
			manager: '',
			employee_not_select: [],
			manager_selected: { dept: [], employee: [] },
			show_employee_selector: false
		};
	},
	props: {
		id: {
			type: Number,
			default: 0
		},
		show: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ''
		}
	},
	watch: {
		id(val) {
			this.detail_id = val;
		},
		show(val) {
			if (val) {
				this.detail_info= {rule_id: ''};
				this.getDetail();
			}
		},
		'adoptForm.ruleOrItem'(val) {
			if (val) {
				this.adoptForm.rule_id = 0;
			} else {
				this.rangeType = {
					rule_range_type: 0,
					rule_min_point: 0,
					rule_max_point: 0,
					rule_rangeType_pt_id: 0,
					rule_rangeType_name: ''
				};
				this.forbiddenInputNum = false;
				this.adoptForm.item_id = 0;
			}
		}
	},
	components: { EmployeeSelector,Steps },
	mounted() {
		this.getRuleItem();
		this.getRuleItemTree();
		this.employee_lists = this.$getUserData().employee_detail.superior_list;
	},
	methods: {
		submitApproval(name) {
			this.$refs[name].confirm(); //调用组件的confirm（）；
		},
		//关闭
		handleClose(done) {
			done();
		},
		cascaderItemIdChange(val) {
			let datas = this.$refs['ruleItem'].getCheckedNodes()[0].data;
			if (datas.range_type == 1) {
				this.forbiddenInputNum = true;
			} else {
				this.forbiddenInputNum = false;
			}
			this.adoptForm.point = datas.min_point;
			this.rangeType.rule_range_type = datas.range_type;
			this.rangeType.rule_min_point = datas.min_point;
			this.rangeType.rule_max_point = datas.max_point;
			this.rangeType.rule_rangeType_pt_id = datas.pt_id;
			this.rangeType.rule_rangeType_name = datas.name;
			this.adoptForm.rule_id = datas.rule_id;
		},
		//审批撤销
		revokeApproval() {
			this.$confirm('确定要撤回此项吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.detail_loading = true;
				this.$axios('post', '/api/integral/review/destroy', { review_id: this.detail_id })
					.then(res => {
						if (res.data.code == 1) {
							this.$message.success(res.data.msg);
							this.closeDetail(); //关闭抽屉
							this.$parent.getSpList(); //刷新列表
						}
					})
					.finally(() => {
						this.detail_loading = false;
					});
			});
		},
		// 选择规则分类关闭down
		ruleChange(val) {
			if (val.length == 0) {
				this.adoptForm.rule_id = 0;
			} else {
				this.adoptForm.rule_id = val[val.length - 1];
			}
			this.$nextTick(() => {
				this.$refs.rule.dropDownVisible = false;
			});
		},
		// 选择规则细则
		itemChange(val) {
			if (val.length == 0) {
				this.adoptForm.item_id = 0;
			} else {
				this.adoptForm.item_id = val[val.length - 1];
			}
			this.$nextTick(() => {
				this.$refs.ruleItem.dropDownVisible = false;
			});
		},
		// 获取规则细则树
		getRuleItemTree() {
			let self = this;
			let params = {
				pt_id: this.detail_info.pt_id,
				cycle_type: '1'
			};
			this.$axios('get', '/api/integral/rule/trees', params, 'v2').then(res => {
				if (res.data.code == 1) {
					self.item_list = res.data.data.tree;
				} else {
					self.$message.error(res.data.data.msg);
				}
			});
		},
		// 获取规则分类规则细则信息
		getRuleItem() {
			let self = this;
			let params = {
				cycle_type: 1
			};
			this.$axios('get', '/api/integral/rule/trees', params).then(res => {
				if (res.data.code == 1) {
					self.ruleTrees = this.getTreeData(res.data.data.rule_tree);
				} else {
					self.$message.error(res.data.data.msg);
				}
			});
		},
		// 打开详情
		getDetail() {
			let self = this;
			let params = {
				review_id: self.detail_id
			};
			self.detailShow = true;
			self.detail_loading = true;
			this.$axios('get', '/api/integral/review', params)
				.then(res => {
					if (res.data.code == 1) {
						self.detail_info = res.data.data;
						self.detail_info.rule_id ? (self.adoptForm.rule_id = self.detail_info.rule_id) : '';
						if (res.data.data.item_id) {
							self.adoptForm.item_id = self.detail_info.item_id;
							self.adoptForm.showPoint = self.detail_info.point;
							self.detail_info.point > 0 ? (self.awardPoints = 1) : (self.awardPoints = 2);
							self.adoptForm.point = Math.abs(self.detail_info.point);
						}
					}
				})
				.finally(e => {
					self.detail_loading = false;
				});
		},
		// 关闭抽屉
		closeDetail() {
			this.$emit('update:show', false);
		},
		// 驳回按钮
		rejectBtn() {
			this.rejectShow = true;
		},
		// 关闭驳回弹窗
		rejectClose() {
			this.rejectShow = false;
			this.$refs['rejectForm'].resetFields();
		},
		// 确定驳回
		confirmReject(formName) {
			let self = this;
			self.$refs[formName].validate(valid => {
				if (valid) {
					let data = {
						review_id: self.detail_id,
						action: 'refuse',
						ticket_count: '0',
						remark: self.rejectForm.remark
					};
					this.rejectLoading = true;
					this.$axios('post', '/api/integral/review', data)
						.then(res => {
							if (res.data.code == 1) {
								self.rejectShow = false;
								self.detail_info.status = 2;
								self.$message.success(res.data.msg);
								self.rejectClose(); //关闭驳回弹窗
								self.closeDetail(); //关闭抽屉
								self.$parent.getSpList(); //刷新列表
							}
						})
						.finally(e => {
							setTimeout(() => {
								//延迟关闭，防止重复点击
								self.rejectLoading = false;
							}, 200);
						});
				}
			});
		},
		// 取消驳回
		cancelReject(formName) {
			this.rejectShow = false;
			this.$refs[formName].resetFields();
		},
		// 通过按钮
		adoptBtn() {
			if (this.detail_info.item_range_type == 1) {
				this.adoptForm.point = Math.abs(this.detail_info.point);
			} else {
				this.adoptForm.point = this.detail_info.point;
			}
			this.detail_info.point > 0 ? (this.awardPoints = 1) : (this.awardPoints = 2);
			this.adoptForm.rule_id = this.detail_info.rule_id;
			this.adoptForm.item_id = this.detail_info.item_id;
			if (this.detail_info.rule_id == 0 && this.detail_info.item_id == 0 && this.detail_info.pt_id != 1) {
				//没有  规则分类 与 规则细则 与 不是绩效任务时，才请求规则细则（减少请求）
				this.getRuleItemTree();
			}
			this.adoptShow = true;

			this.rangeType = {
				rule_range_type: 0,
				rule_min_point: 0,
				rule_max_point: 0,
				rule_rangeType_pt_id: 0,
				rule_rangeType_name: ''
			};
		},
		// 递归判断列表，把最后的child设为undefined
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i].child.length < 1) {
					// child若为空数组，则将child设为undefined
					data[i].child = undefined;
				} else {
					// child若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i].child);
				}
			}
			return data;
		},
		// 下一个审批人
		employee_confirm(data) {
			this.manager_selected = { dept: [], employee: [] };
			this.adoptForm.reviewer_id = '';
			this.manager = '';
			if (data.employee !== null && data.employee.length != 0) {
				this.manager_selected.employee = data.employee;
				this.adoptForm.reviewer_id = data.employee[0].id;
				this.manager = data.employee[0].name;
			}
			this.show_employee_selector = false;
		},
		// 关闭通过弹窗
		adoptClose() {
			this.adoptForm.rule_id = 0;
			this.adoptForm.item_id = 0;
			this.forbiddenInputNum = false;
			this.adoptForm.reviewer_id = 0;
			this.adoptShow = false;
			this.manager = ''; //清空递交审批
			this.manager_selected = { dept: [], employee: [] }; //清空递交审批
			this.adoptForm.remark = '';
			this.adoptForm.switch = false;
		},
		// 确定通过
		submitAdopt(formName) {
			let self = this;
			self.$refs[formName].validate(valid => {
				if (valid) {
					let data = {
						review_id: self.detail_id,
						action: 'complete',
						rule_id: self.adoptForm.rule_id,
						item_id: 0,
						point: self.adoptForm.point,
						reviewer_id: '',
						remark: self.adoptForm.remark,
						ticket_count: 0
					};
					self.adoptForm.item_id ? (data.item_id = self.adoptForm.item_id) : (data.item_id = 0);
					self.adoptForm.reviewer_id ? (data.reviewer_id = self.adoptForm.reviewer_id) : (data.reviewer_id = 0);
					self.adoptForm.switch ? (data.ticket_count = 1) : (data.ticket_count = 0);
					if (this.detail_info.item_range_type == 1) {
						if (self.awardPoints === 1) {
							data.point = self.adoptForm.point;
						} else {
							data.point = self.adoptForm.point * -1;
						}
					}
					if (data.rule_id == '' || data.rule_id == null) {
						data.rule_id = 0;
					}
					if (this.detail_info.item_range_type == -1) {
						let itemID = '';
						for (let i in data.item_id) {
							itemID = data.item_id[i];
						}
						data.item_id = itemID;
					}
					if (data.item_id == '' || data.item_id == null) {
						data.item_id = 0;
					}
					if (self.adoptForm.ruleOrItem) {
						if (data.item_id == 0) {
							self.$message.error('请选择所属规则');
							return;
						}
					} else {
						if (data.rule_id == 0) {
							self.$message.error('请选择所属分类');
							return;
						}
					}
					if (data.point == 0 || !data.point) {
						self.$message.error('积分不能为0或空');
						return;
					}
					this.determinedBy = true;
					this.$axios('post', '/api/integral/review', data)
						.then(res => {
							if (res.data.code == 1) {
								self.adoptShow = false;
								self.detail_info.status = 2;
								self.$message.success(res.data.msg);
								self.adoptClose(); //关闭通过弹窗
								self.closeDetail(); //关闭抽屉
								self.$parent.getSpList(); //刷新列表
							}
						})
						.finally(e => {
							setTimeout(() => {
								//预防重复点击
								this.determinedBy = false;
							}, 200);
						});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
label {
	font-weight: 700;
}
.fl {
	float: left;
}
.itemClass .el-cascader-menu .el-cascader-menu__wrap li.el-cascader-node {
	height: auto;
	max-width: 500px;
	.el-cascader-node__label {
		white-space: initial;
		overflow: initial;
		text-overflow: initial;
	}
}

.detail_popup {
	padding: 20px;
	overflow-y: auto;
	overflow-x: hidden !important;
	height: calc(100vh - 100px);
	padding-bottom: 30px;
	.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;
		}
	}
}
.drawer_title {
	font-size: 18px;
	padding: 20px;
	border-bottom: 1px #efefef solid;
}
.examine_steps {
	.el-step {
		flex-basis: auto !important;
	}
}
</style>