<template>
<!-- 弹出框表单 -->
<el-drawer
:title="title"
:visible.sync="open"
:direction="direction"
:destroy-on-close="true"
size="50%"
>
<el-form
ref="form"
class="dra_content"
:model="form"
:rules="rules"
label-width="120px"
>
<div class="box">
<div class="title">异常情况</div>
<div class="content">
<el-row>
<el-col :span="8"
>员工：{{ form.staffName ? form.staffName : "--" }}</el-col
>
<el-col :span="8"
>所属部门：{{ form.deptName ? form.deptName : "--" }}</el-col
>
<el-col :span="8"
>窗口编号：{{ form.windowNum ? form.windowNum : "--" }}</el-col
>
</el-row>
<el-row>
<el-col :span="8"
>考勤组：{{
form.attendanceGroupName ? form.attendanceGroupName : "--"
}}</el-col
>
<el-col :span="8"
>异常时间：{{ formatterDate(form.errorTime) }}</el-col
>
<el-col :span="8"
>上下班时间：{{
form.goOffTimeStr ? form.goOffTimeStr : "--"
}}</el-col
>
</el-row>
<el-row>
<el-col :span="10"
>实际打卡时间：{{ formatterDate(form.actualAttendTime) }}</el-col
>
<el-col :span="9"
>异常结果：{{
form.errorResult ? form.errorResult : "--"
}}</el-col
>
<el-col :span="5"
>加分/扣分方式：{{
form.subAddType
? util_formatter("subAddType", form.subAddType)
: "--"
}}</el-col
>
</el-row>
<el-row>
<el-col :span="8"
>加分/扣分时间：{{ formatterDate(form.deductTime) }}</el-col
>
<el-col :span="8"
>加分/扣分人员：{{
form.deductPerson ? form.deductPerson : "--"
}}</el-col
>
</el-row>
</div>
</div>
<div class="box">
<div class="title">核查情况</div>
<div class="content">
<el-row>
<el-col :span="8"
>核查结果：{{
form.checkResult ? form.checkResult : "--"
}}</el-col
>
<el-col :span="8"
>绩效规则：{{ form.ruleName ? form.ruleName : "--" }}</el-col
>
<el-col :span="8"
>加分/扣除分值：<span style="color:#ff0000">{{
form.score ? form.score : "--"
}}</span></el-col
>
</el-row>
<el-row>
<el-col :span="8"
>说明：{{ form.checkDesc ? form.checkDesc : "--" }}</el-col
>
<el-col :span="8"
>核查人员：{{
form.checkPerson ? form.checkPerson : "--"
}}</el-col
>
<el-col :span="8"
>核查时间：{{ formatterDate(form.checkTime) }}</el-col
>
</el-row>
</div>
</div>
<div class="box">
<div class="title">申诉情况</div>
<div class="content">
<el-row>
<el-col :span="24"
>申诉说明：{{ form.appealDesc ? form.appealDesc : "--" }}</el-col
>
<el-col :span="24"
>申诉时间：{{ formatterDate(form.appealTime) }}</el-col
>
<el-col :span="24"
>申诉附件：
<span v-if="!form.performAttendAppealFilesList">
--
</span>
<div class="img_content" v-else>
<div
class="imgBox"
v-for="val in form.performAttendAppealFilesList"
:key="val.id"
>
<el-image
v-if="
val.filePath.includes('.png') ||
val.filePath.includes('.jpg') ||
val.filePath.includes('.jpeg') ||
val.filePath.includes('.bmp')
"
style="width: 100px; height: 100px"
:src="
`${
val.filePath.indexOf('http') == -1
? baseUrl + val.filePath
: val.filePath
}`
"
:preview-src-list="
val.filePath.indexOf('http') == -1
? [baseUrl + val.filePath]
: [val.filePath]
"
>
</el-image>
<img
src="../../../../assets/images/fileImg.png"
v-else
alt=""
@click="hanldeDownloadFile(val)"
/>
<p>{{ val.fileName }}</p>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="box" v-if="form.view == '查看'">
<div class="title">申诉结果</div>
<div class="content">
<el-row>
<el-col :span="8"
>申诉结果：{{
form.appealResult
? util_formatter("appealResult", form.appealResult)
: "--"
}}</el-col
>
<el-col :span="8"
>处理人员：{{
util_formatter("updateUserId", form.updateUserId + "")
}}</el-col
>
<el-col :span="8"
>处理时间： {{ formatterDate(form.updateTime) }}</el-col
>
</el-row>
<el-row>
<el-col :span="24"
>说明：{{ form.remark ? form.remark : "--" }}</el-col
>
</el-row>
</div>
</div>
<div class="box" v-else>
<div class="title">申诉结果</div>
<div class="content">
<el-row>
<el-col :span="24">
<el-form-item label="申诉结果：">
<el-radio-group
v-model="form.appealResult"
@input="radioChange"
>
<el-radio :label="1">通过</el-radio>
<el-radio :label="2">不通过</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="说明：">
<el-input type="textarea" v-model="form.remark"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<form-buttons
@submit="submitForm"
v-if="pageInfo.type != 'view'"
noCancelBtn
/>
</el-form>
<!-- <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<Field
label="核查记录Id"
prop="checkRecordId"
v-model="form.checkRecordId"
placeholder="请输入核查记录Id"
/>
<Field
label="员工ID"
prop="staffId"
v-model="form.staffId"
placeholder="请输入员工ID"
/>
<Field
label="员工姓名"
prop="staffName"
v-model="form.staffName"
placeholder="请输入员工姓名"
/>
<Field
label="工号"
prop="workNum"
v-model="form.workNum"
placeholder="请输入工号"
/>
<Field
label="所属部门"
prop="deptId"
v-model="form.deptId"
placeholder="请输入所属部门"
/>
<Field
label="所属部门名称"
prop="deptName"
v-model="form.deptName"
placeholder="请输入所属部门名称"
/>
<Field
label="所属考勤组ID"
prop="attendanceGroupId"
v-model="form.attendanceGroupId"
placeholder="请输入所属考勤组ID"
/>
<Field
label="所属考勤组名称"
prop="attendanceGroupName"
v-model="form.attendanceGroupName"
placeholder="请输入所属考勤组名称"
/>
<Field
label="考勤时间"
prop="attendanceDate"
v-model="form.attendanceDate"
type="date"
/>
<Field
label="绩效规则id"
prop="ruleId"
v-model="form.ruleId"
placeholder="请输入绩效规则id"
/>
<Field
label="规则名称"
prop="ruleName"
v-model="form.ruleName"
placeholder="请输入规则名称"
/>
<Field
label="加分/扣分方式"
prop="subMethod"
v-model="form.subMethod"
type="select"
:enumData="dict.subMethod"
placeholder="请选择加分/扣分方式"
/>
<Field
label="增减类型"
prop="subAddType"
v-model="form.subAddType"
type="select"
:enumData="dict.subAddType"
placeholder="请选择增减类型"
/>
<Field
label="扣分或增加分值"
prop="score"
v-model="form.score"
placeholder="请输入扣分或增加分值"
/>
<Field
label="上下班时间"
prop="goOffTimeStr"
v-model="form.goOffTimeStr"
placeholder="请输入上下班时间"
/>
<Field
label="异常时间"
prop="errorTime"
v-model="form.errorTime"
type="date"
/>
<Field
label="实际打卡时间"
prop="actualAttendTime"
v-model="form.actualAttendTime"
type="date"
/>
<Field
label="异常处理结果"
prop="errorResult"
v-model="form.errorResult"
placeholder="请输入异常处理结果"
/>
<Field
label="核查人员"
prop="checkPerson"
v-model="form.checkPerson"
placeholder="请输入核查人员"
/>
<Field
label="核查时间"
prop="checkTime"
v-model="form.checkTime"
type="date"
/>
<Field
label="核查说明"
prop="checkDesc"
v-model="form.checkDesc"
type="textarea"
placeholder="请输入核查说明"
/>
<Field
label="核查结果"
prop="checkResult"
v-model="form.checkResult"
placeholder="请输入核查结果"
/>
<Field
label="处理状态"
prop="processStatus"
v-model="form.processStatus"
type="select"
:enumData="dict.processStatus"
placeholder="请选择处理状态"
/>
<Field
label="申诉说明"
prop="appealDesc"
v-model="form.appealDesc"
placeholder="请输入申诉说明"
/>
<Field
label="申诉时间"
prop="appealTime"
v-model="form.appealTime"
type="date"
/>
<Field
label="申诉结果"
prop="appealResult"
v-model="form.appealResult"
type="select"
:enumData="dict.appealResult"
placeholder="请选择申诉结果"
/>
<Field
label="说明"
prop="remark"
v-model="form.remark"
type="textarea"
placeholder="请输入说明"
/>
</el-row>
<el-divider content-position="center"
>绩效记录申诉附件信息信息</el-divider
>
<br />
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAddPerformAttendAppealFiles"
>添加</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
@click="handleDeletePerformAttendAppealFiles"
>删除</el-button
>
</el-col>
</el-row>
<el-table
:data="performAttendAppealFilesList"
:row-class-name="rowPerformAttendAppealFilesIndex"
@selection-change="handlePerformAttendAppealFilesSelectionChange"
ref="performAttendAppealFiles"
>
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" prop="index" width="50" />
<el-table-column label="文件名称" prop="fileName">
<template slot-scope="scope">
<el-input
v-model="scope.row.fileName"
placeholder="请输入文件名称"
/>
</template>
</el-table-column>
<el-table-column label="文件地址" prop="filePath">
<template slot-scope="scope">
<el-input
v-model="scope.row.filePath"
placeholder="请输入文件地址"
/>
</template>
</el-table-column>
<el-table-column label="创建用户" prop="createUserId">
<template slot-scope="scope">
<el-input
v-model="scope.row.createUserId"
placeholder="请输入创建用户"
/>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="createTime">
<template slot-scope="scope">
<el-input
v-model="scope.row.createTime"
placeholder="请输入创建时间"
/>
</template>
</el-table-column>
<el-table-column label="更新用户" prop="updateUserId">
<template slot-scope="scope">
<el-input
v-model="scope.row.updateUserId"
placeholder="请输入更新用户"
/>
</template>
</el-table-column>
<el-table-column label="更新时间" prop="updateTime">
<template slot-scope="scope">
<el-input
v-model="scope.row.updateTime"
placeholder="请输入更新时间"
/>
</template>
</el-table-column>
</el-table>
<form-buttons
@submit="submitForm"
v-if="pageInfo.type != 'view'"
noCancelBtn
/>
</el-form> -->
</el-drawer>
</template>
<script>
import form from "@/assets/mixins/formdialog";
import { timestampToTime } from "@/assets/utils/dateFormat.js";
import { downloadFile } from "@/assets/utils/index";
import { formatterDate } from "@/assets/utils/index";
export default {
name: "PerformAttendAppealDetail",
mixins: [form],
components: {},
created() {
this.changePath("perform/attend/appeal");
},
data() {
return {
// 子表选中数据
checkedPerformAttendAppealFiles: [],
// 绩效记录申诉附件信息表格数据
performAttendAppealFilesList: [],
// 遮罩层
loading: true,
// 弹出层标题
title: "绩效记录申诉信息",
// 是否显示弹出层
open: false,
direction: "rtl",
toString: [
"subMethod",
"subAddType",
"processStatus",
"appealResult",
"updateUserId",
],
toDate: [
"attendanceDate",
"errorTime",
"actualAttendTime",
"checkTime",
"appealTime",
],
baseUrl: process.env.VUE_APP_API_BASE_URL + "/",
// 表单校验
rules: {
staffName: [
{ required: true, message: "请输入员工姓名", trigger: "blur" },
{ max: 64, message: "最多只能录入64个字符", trigger: "blur" },
],
createTime: [{ required: true, message: "请选择创建时间" }],
},
urls: {
saveUrl: "/perform/attend/appeal/audit",
},
};
},
methods: {
radioChange(val) {
this.form.appealResult = val;
this.$forceUpdate(this.form);
},
util_formatter(key, val) {
try {
return this.dict[key][val];
} catch (error) {
return val;
}
},
formatterDate,
// 下载附件
hanldeDownloadFile(val) {
downloadFile(val.filePath, val.fileName);
},
picMatter(val) {
if (val || val !== "--") {
return (
<el-image
src={val.indexOf("http") == -1 ? this.baseUrl + val : val}
preview-src-list={
val.indexOf("http") == -1 ? this.baseUrl + val : val
}
style="width: 100px"
></el-image>
);
} else {
return val;
}
},
/** 绩效记录申诉附件信息序号 */
rowPerformAttendAppealFilesIndex({ row, rowIndex }) {
row.index = rowIndex + 1;
},
/** 绩效记录申诉附件信息添加按钮操作 */
handleAddPerformAttendAppealFiles() {
let obj = {};
obj.fileName = "";
obj.filePath = "";
obj.createUserId = "";
obj.createTime = "";
obj.updateUserId = "";
obj.updateTime = "";
this.performAttendAppealFilesList.push(obj);
},
/** 绩效记录申诉附件信息删除按钮操作 */
handleDeletePerformAttendAppealFiles() {
if (this.checkedPerformAttendAppealFiles.length == 0) {
this.$alert("请先选择要删除的绩效记录申诉附件信息数据", "提示", {
confirmButtonText: "确定",
});
} else {
this.performAttendAppealFilesList.splice(
this.checkedPerformAttendAppealFiles[0].index - 1,
1
);
}
},
/** 单选框选中数据 */
handlePerformAttendAppealFilesSelectionChange(selection) {
if (selection.length > 1) {
this.$refs.performAttendAppealFiles.clearSelection();
this.$refs.performAttendAppealFiles.toggleRowSelection(selection.pop());
} else {
this.checkedPerformAttendAppealFiles = selection;
}
},
// 渲染前置处理
beforeRender(data) {
if (data.performAttendAppealFilesList) {
this.performAttendAppealFilesList = data.performAttendAppealFilesList;
}
return data;
},
/** 编辑 */
edit(row) {
this.reset();
this.query = { id: row.id };
// this.urls.currUrl = "/perform/attend/appeal/info";
// this.getData();
this.$get("/perform/attend/appeal/info", { id: row.id }).then((res) => {
if (res.code == 1) {
this.form = res.data;
this.dict = res.dict;
} else {
this.reset();
}
this.form.appealResult = "";
this.form.processStatus = 2;
this.form.remark = "";
this.form.view = "核查";
this.open = true;
});
this.pageInfo.type = "edit";
this.title = "处理绩效记录申诉信息";
},
/** 新增 */
add(row) {
this.reset();
this.urls.currUrl = "perform/attend/appeal/add";
this.getData();
this.pageInfo.type = "add";
this.title = "新增绩效记录申诉信息";
},
/** 查看*/
view(row) {
this.reset();
this.query = { id: row.id };
// this.urls.currUrl = "perform/attend/appeal/view";
// this.getData();
this.$get("/perform/attend/appeal/view", { id: row.id }).then((res) => {
if (res.code == 1) {
this.form = res.data.entity;
this.dict = res.data.dict;
} else {
this.reset();
}
this.form.view = "查看";
this.pageInfo.type = "view";
this.open = true;
});
this.title = "绩效记录申诉信息详细";
},
/**取消按钮 */
cancel() {
this.open = false;
},
/**获取数据后弹框 */
afterRender(data) {
this.open = true;
},
afterSubmit(data) {
this.open = false;
this.$emit("ok");
},
// 表单重置
reset() {
this.form = {
checkRecordId: null,
staffId: null,
staffName: "",
workNum: "",
deptId: null,
deptName: "",
attendanceGroupId: null,
attendanceGroupName: "",
attendanceDate: null,
ruleId: null,
ruleName: "",
subMethod: 1,
subAddType: 1,
score: 0.0,
goOffTimeStr: "",
errorTime: null,
actualAttendTime: null,
errorResult: "",
checkPerson: "",
checkTime: null,
checkDesc: "",
checkResult: "",
processStatus: 1,
appealDesc: "",
appealTime: null,
appealResult: "",
remark: "",
};
this.resetForm("form");
},
resetForm(refName) {
if (this.$refs[refName]) {
this.$refs[refName].resetFields();
}
},
},
};
</script>
<style lang="less" scoped>
.dra_content {
width: 100%;
height: 100%;
padding: 20px;
.box {
width: 100%;
height: auto;
background: inherit;
background-color: rgba(242, 246, 252, 1);
border: none;
border-radius: 8px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
padding: 15px 0 0 15px;
.title {
color: #1890ff;
font-size: 16px;
padding-left: 10px;
position: relative;
margin-bottom: 30px;
&::after {
content: "";
display: block;
border-left: 3px solid #1890ff;
left: 0;
top: 0;
bottom: 0;
position: absolute;
}
}
.content {
width: 100%;
padding: 10px;
font-family: "微软雅黑", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
margin-left: 0 auto;
margin-bottom: 30px;
/deep/.el-row {
margin-bottom: 20px;
}
.img_content {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
padding: 10px 0 0 10px;
}
.imgBox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
cursor: pointer;
margin-right: 10px;
img {
width: 100%;
height: 80px;
margin-top: 10px;
}
p {
width: 100%;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
}
</style>