441 lines
13 KiB
Vue
441 lines
13 KiB
Vue
<template>
|
||
<div class="flow-labour-drawer">
|
||
<el-drawer
|
||
v-if="isOpen"
|
||
:visible.sync="isOpen"
|
||
ref="drawer"
|
||
direction="rtl"
|
||
@close="closeCallBack"
|
||
size="60%"
|
||
>
|
||
<template slot="title">
|
||
<div>{{ title }}</div>
|
||
</template>
|
||
<div class="drawer">
|
||
<div class="drawerLeft">
|
||
<el-steps :active="active" finish-status="success" simple>
|
||
<el-step title="提交投诉"></el-step>
|
||
<el-step title="总包处理"></el-step>
|
||
<el-step title="甲代审核"></el-step>
|
||
<el-step title="集团审核"></el-step>
|
||
</el-steps>
|
||
<el-timeline>
|
||
<el-timeline-item
|
||
v-for="(item, index) in flowLabourNodes"
|
||
:key="index"
|
||
:icon="setIcon(item)"
|
||
:color="setColor(item)"
|
||
>
|
||
<p style="font-weight: 700">
|
||
{{ getSort(index)
|
||
}}{{
|
||
item.flowNode == "0" ? item.createBy + "提交投诉" : item.flowNodeName
|
||
}}
|
||
</p>
|
||
<el-card :body-style="{ padding: '6px' }">
|
||
<el-descriptions class="margin-top" :column="1" size="small" border>
|
||
<el-descriptions-item
|
||
v-if="item.createBy"
|
||
label-class-name="my-label"
|
||
:labelStyle="labelStyle"
|
||
>
|
||
<template slot="label"><i class="el-icon-user"></i>办理人</template>
|
||
{{ item.createBy }}
|
||
<el-tag type="info" size="mini" v-show="item.flowNode == '0'">{{
|
||
dataInfo.subDeptName
|
||
}}</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
v-if="item.createTime"
|
||
label-class-name="my-label"
|
||
:labelStyle="labelStyle"
|
||
>
|
||
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
|
||
{{ item.createTime }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
v-if="item.flowComment"
|
||
label-class-name="my-label"
|
||
:labelStyle="labelStyle"
|
||
>
|
||
<template slot="label"
|
||
><i class="el-icon-tickets"></i>处理意见</template
|
||
>
|
||
{{ item.flowComment }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
v-if="item.files"
|
||
label-class-name="my-label"
|
||
:labelStyle="labelStyle"
|
||
>
|
||
<template slot="label"
|
||
><i class="el-icon-picture"></i>凭证附件</template
|
||
>
|
||
<el-image
|
||
ref="preview"
|
||
v-for="(img, idx) in item.files.split(',')"
|
||
:key="idx"
|
||
:src="getImageUrl(img)"
|
||
style="width: 60px; height: 60px; margin-right: 8px"
|
||
@click="onPreview(img)"
|
||
></el-image>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
<div class="drawerRight">
|
||
<el-form
|
||
ref="form"
|
||
v-loading="loading"
|
||
:model="form"
|
||
:rules="rules"
|
||
label-width="80px"
|
||
style="padding-right: 20px; padding-left: 20px"
|
||
>
|
||
<el-form-item label="项目名称">
|
||
{{ dataInfo.projectName }}
|
||
</el-form-item>
|
||
<el-form-item label="总包单位">
|
||
{{ dataInfo.deptName }}
|
||
</el-form-item>
|
||
<el-form-item label="分包单位">
|
||
{{ dataInfo.subDeptName }}
|
||
</el-form-item>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="投诉人">
|
||
{{ dataInfo.laborName }}
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="联系电话">
|
||
{{ dataInfo.laborPhone }}
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="身份证号">
|
||
{{ dataInfo.laborCardId }}
|
||
</el-form-item>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="欠薪人数">
|
||
{{ dataInfo.laborNumber }} <el-tag size="small">人</el-tag>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="欠薪金额">
|
||
{{ dataInfo.laborAmount }} <el-tag size="small">元</el-tag>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="原因说明">
|
||
{{ dataInfo.laborReason }}
|
||
</el-form-item>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="投诉时间">
|
||
<span>{{ parseTime(dataInfo.createTime, "{y}-{m}-{d}") }}</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="投诉进度">
|
||
<dict-tag
|
||
:options="dict.type.flow_labou_appstatus"
|
||
:value="dataInfo.approveStatus"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="凭证附件" v-if="dataInfo.files">
|
||
<el-image
|
||
ref="preview"
|
||
v-for="(img, idx) in dataInfo.files.split(',')"
|
||
:key="idx"
|
||
:src="getImageUrl(img)"
|
||
style="width: 65px; height: 65px; margin-right: 8px"
|
||
@click="onPreview(img)"
|
||
></el-image>
|
||
</el-form-item>
|
||
<!-- <el-alert
|
||
v-if="dataInfo.approveStatus != '100'"
|
||
show-icon
|
||
title="温馨提示"
|
||
type="info"
|
||
description="请如实并客观的受理投诉并核实！"
|
||
>
|
||
</el-alert> -->
|
||
<el-form-item label="处理意见" prop="flowComment">
|
||
<el-input
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="请输入处理意见（600字内）"
|
||
v-model="form.flowComment"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="凭证附件" prop="files">
|
||
<image-upload v-model="form.files" :limit="9" />
|
||
</el-form-item>
|
||
<div style="text-align: center; padding-bottom: 20px">
|
||
<el-button @click="cancel">取 消</el-button>
|
||
<el-button
|
||
type="success"
|
||
icon="el-icon-success"
|
||
@click="submitForm(100)"
|
||
v-if="dataInfo.approveStatus == '10'"
|
||
>提 交 处 理 结 果</el-button
|
||
>
|
||
<el-button
|
||
type="danger"
|
||
icon="el-icon-error"
|
||
@click="submitForm(1)"
|
||
v-if="dataInfo.approveStatus != '10' && dataInfo.approveStatus != '21'"
|
||
>审 批 驳 回</el-button
|
||
>
|
||
<el-button
|
||
type="success"
|
||
icon="el-icon-success"
|
||
@click="submitForm(100)"
|
||
v-if="dataInfo.approveStatus != '10'"
|
||
>审 批 通 过</el-button
|
||
>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</el-drawer>
|
||
<el-image-viewer
|
||
v-if="showViewer"
|
||
:on-close="closeViewer"
|
||
:url-list="previewList"
|
||
style="z-index: 2050"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getFlowLabourInfo,
|
||
flowLabourAuditNode,
|
||
findMyFlowLabourNodes,
|
||
} from "@/api/flow/flowLabourInfo";
|
||
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
|
||
|
||
export default {
|
||
name: "approveFlowLabourDrawer",
|
||
components: {
|
||
ElImageViewer,
|
||
},
|
||
props: {
|
||
closeCallBack: {
|
||
type: Function,
|
||
},
|
||
},
|
||
dicts: ["flow_labou_appstatus"],
|
||
data() {
|
||
return {
|
||
showViewer: false,
|
||
open: false,
|
||
isOpen: false,
|
||
dataInfo: {
|
||
files: "",
|
||
},
|
||
title: "",
|
||
form: {},
|
||
rules: {
|
||
flowComment: [
|
||
{ required: true, message: "请输入处理意见", trigger: "blur" },
|
||
{ max: 600, message: "处理意见最多600字符", trigger: "blur" },
|
||
],
|
||
},
|
||
// 遮罩层
|
||
loading: true,
|
||
previewList: [],
|
||
flowLabourNodes: [],
|
||
active: 100,
|
||
//label样式
|
||
labelStyle: { width: "180px" },
|
||
minRoles: [],
|
||
};
|
||
},
|
||
computed: {},
|
||
mounted() {},
|
||
created() {
|
||
this.minRoles = this.$store.getters.roles;
|
||
},
|
||
methods: {
|
||
setIcon(row) {
|
||
if (row.flowResult == null || row.flowResult == "100") {
|
||
return "el-icon-check";
|
||
} else {
|
||
return "el-icon-close";
|
||
}
|
||
},
|
||
setColor(row) {
|
||
if (row.flowResult == null || row.flowResult == "100") {
|
||
return "#2bc418";
|
||
} else {
|
||
return "#f56c6c";
|
||
}
|
||
},
|
||
getSort(i) {
|
||
let num = this.flowLabourNodes.length - i;
|
||
if (num < 10) {
|
||
num = "0" + num;
|
||
}
|
||
return num + ". ";
|
||
},
|
||
getImageUrl(url) {
|
||
return process.env.VUE_APP_BASE_API + url + ".min.jpg";
|
||
},
|
||
onPreview(urls) {
|
||
this.previewList = [];
|
||
urls.split(",").forEach((item) => {
|
||
this.previewList.push(process.env.VUE_APP_BASE_API + item);
|
||
});
|
||
this.showViewer = true;
|
||
},
|
||
closeViewer() {
|
||
this.showViewer = false;
|
||
},
|
||
show(options) {
|
||
this.title = "劳资投诉审批详情";
|
||
this.form = {};
|
||
this.form.flowId = options.id;
|
||
this.active = parseInt(options.approveStatus / 10);
|
||
this.isOpen = true;
|
||
getFlowLabourInfo(options.id).then((res) => {
|
||
this.dataInfo = res.data;
|
||
this.loading = false;
|
||
});
|
||
//投诉进度查看
|
||
findMyFlowLabourNodes(options.id).then((res) => {
|
||
this.flowLabourNodes = res.data || [];
|
||
});
|
||
},
|
||
// 取消按钮
|
||
cancel() {
|
||
this.isOpen = false;
|
||
},
|
||
/** 提交按钮 */
|
||
submitForm(v) {
|
||
let that = this;
|
||
this.$refs["form"].validate((valid) => {
|
||
if (valid) {
|
||
this.form.flowResult = v;
|
||
let msg = "审批通过";
|
||
let wagMsg = "";
|
||
if (v != "100") {
|
||
msg = "审批驳回";
|
||
}
|
||
if (
|
||
this.dataInfo.approveStatus == "10" ||
|
||
this.dataInfo.approveStatus == "21"
|
||
) {
|
||
msg = "提交处理结果";
|
||
if (
|
||
this.minRoles.includes("admin") ||
|
||
this.minRoles.includes("super") ||
|
||
this.minRoles.includes("jtgs") ||
|
||
this.minRoles.includes("zgs")
|
||
) {
|
||
wagMsg = "当前数据总包单位正在处理，您";
|
||
}
|
||
} else if (
|
||
this.dataInfo.approveStatus == "20" ||
|
||
this.dataInfo.approveStatus == "31"
|
||
) {
|
||
if (
|
||
this.minRoles.includes("admin") ||
|
||
this.minRoles.includes("super") ||
|
||
this.minRoles.includes("jtgs")
|
||
) {
|
||
wagMsg = "当前数据甲方代表正在审批，您";
|
||
}
|
||
}
|
||
this.$confirm(wagMsg + "是否确认" + msg + "?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
that.loading = true;
|
||
flowLabourAuditNode(that.form).then((res) => {
|
||
that.$modal.msgSuccess("操作成功");
|
||
that.loading = false;
|
||
//关闭并刷新列表
|
||
that.$refs.drawer.closeDrawer();
|
||
});
|
||
})
|
||
.catch(() => {
|
||
console.log("取消操作");
|
||
});
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scope>
|
||
.el-alert {
|
||
display: flex !important;
|
||
}
|
||
.el-alert--info.is-light {
|
||
background: cornflowerblue !important;
|
||
color: #ffffff !important;
|
||
}
|
||
.el-alert--info .el-alert__description {
|
||
color: #ffffff !important;
|
||
}
|
||
.el-steps--simple {
|
||
padding: 5px 5px !important;
|
||
}
|
||
.el-timeline-item {
|
||
padding-bottom: 0px !important;
|
||
}
|
||
.el-timeline {
|
||
padding-left: 5px !important;
|
||
padding-top: 20px !important;
|
||
}
|
||
.el-timeline-item__wrapper {
|
||
padding-left: 15px !important;
|
||
}
|
||
.el-timeline-item__content {
|
||
font-weight: 900;
|
||
}
|
||
.el-form-item {
|
||
margin-bottom: 15px !important;
|
||
}
|
||
.el-step.is-simple .el-step__title{
|
||
font-size:13px !important;
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.flow-labour-drawer {
|
||
.drawer {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
padding-bottom: 20px;
|
||
.drawerLeft {
|
||
width: 55%;
|
||
min-width: 280px;
|
||
height: 100%;
|
||
float: left;
|
||
border-right: 1px solid #dcdfe6;
|
||
overflow-y: scroll;
|
||
padding-right: 20px;
|
||
}
|
||
.drawerRight {
|
||
width: 45%;
|
||
min-width: 400px;
|
||
height: 100%;
|
||
float: left;
|
||
padding-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|