492 lines
15 KiB
Vue
492 lines
15 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div :class="{ content1: this.auditType === '审批信息', content2: this.auditType !== '审批信息' }">
|
||
<img
|
||
src="@/assets/file/no_data.png"
|
||
alt="暂无数据"
|
||
v-if="!items"
|
||
style="position: absolute; top: 30%; left: 43%"
|
||
/>
|
||
<div style="height: 90%" v-else>
|
||
<el-timeline :reverse="reverse">
|
||
<el-timeline-item
|
||
v-for="(item, index) in auditRecordList"
|
||
:key="index"
|
||
:timestamp="item.time"
|
||
placement="top"
|
||
:color="item.name === userName ? color : color1"
|
||
>
|
||
<el-card style="border-radius: 15px">
|
||
<span>审批部门：{{ item.section }}</span>
|
||
<span style="margin-left: 50px">审批人：{{ item.name }}</span>
|
||
<p>审批时间： {{ item.time }}</p>
|
||
<!-- <p>审批状态： {{ auditingType(item) }}</p> -->
|
||
<p>审批状态： {{ item.status }}</p>
|
||
<p v-if="item.name.indexOf(userName) != -1 && showType == 2">
|
||
审批意见：
|
||
<el-input
|
||
v-model="reason"
|
||
maxlength="200"
|
||
show-word-limit
|
||
placeholder="请输入审批意见"
|
||
@change="changReason"
|
||
style="width: 60%"
|
||
></el-input>
|
||
</p>
|
||
<p v-else>审批意见： {{ item.reason.replaceAll(/@@/g, ' ') }}</p>
|
||
<p v-if="item.turnDownReason !== '' && showPosition === 2">驳回原因： {{ item.turnDownReason }}</p>
|
||
<p v-else-if="item.turnDownReason !== '' && item.name !== userName">
|
||
驳回原因： {{ item.turnDownReason }}
|
||
</p>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
<div
|
||
slot="footer"
|
||
class="dialog-footer"
|
||
v-show="btnShow"
|
||
style="position: absolute; top: 94%; left: 80%; z-index: 999 !important; width: 250px"
|
||
>
|
||
<el-button type="warning" @click="finalInstanceBtn" v-if="finalCheck != '0'">终审</el-button>
|
||
<el-button type="primary" @click="passBtn">通过</el-button>
|
||
<el-button type="primary" plain @click="turnDownBtn">驳回</el-button>
|
||
</div>
|
||
</div>
|
||
<el-dialog title="驳回原因" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
|
||
<el-form :model="form" ref="form" :rules="rules" label-width="80px">
|
||
<el-form-item label="请输入驳回原因" label-width="120px" prop="turnDownReason">
|
||
<el-input
|
||
type="textarea"
|
||
v-model="form.turnDownReason"
|
||
:rows="6"
|
||
maxlength="200"
|
||
show-word-limit
|
||
placeholder="请输入驳回原因"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="submitForm('form')" v-preventReClick="5000">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
<div
|
||
style="width: 38%; position: absolute; left: 65%; top: 0; height: 70vh; overflow: auto"
|
||
v-if="this.auditType === '审批信息' && auditPersonArr.length > 0"
|
||
>
|
||
<el-aside width="100%" style="background: transparent; margin-top: 2%">
|
||
<div style="display: flex; flex-direction: column; align-items: center">
|
||
<div
|
||
style="
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
border: 1.5px solid black;
|
||
width: 50%;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
"
|
||
>
|
||
开始
|
||
</div>
|
||
<div class="arrow-container">
|
||
<div class="line"></div>
|
||
<div class="arrow-down"></div>
|
||
</div>
|
||
|
||
<div
|
||
v-for="(item, index) in auditPersonArr"
|
||
:key="index"
|
||
style="width: 100%; display: flex; flex-direction: column; align-items: center"
|
||
>
|
||
<div :class="styleByType(item, index)">
|
||
{{ item.checkPerson }} (
|
||
{{ item.examineType === '0' ? '依次' : item.examineType === '1' ? '会签' : '或签' }})
|
||
<span style="margin-left: 15px; font-size: 20px; font-weight: bold">
|
||
<!-- {{ index < currentCheckIndex && item.isResult ? '√' : currentCheckIndex === index ? '?' : '?' }} -->
|
||
{{ iconByType(item, index) }}
|
||
</span>
|
||
</div>
|
||
<!-- <div
|
||
:class="{
|
||
highlight: index < currentCheckIndex,
|
||
normal: index > currentCheckIndex,
|
||
currentLight: index === currentCheckIndex,
|
||
}"
|
||
>
|
||
{{ item.checkPerson }} (
|
||
{{ item.examineType === '0' ? '依次' : item.examineType === '1' ? '会签' : '或签' }})
|
||
<span style="margin-left: 15px; font-size: 20px; font-weight: bold">
|
||
{{ index < currentCheckIndex && item.isResult ? '√' : currentCheckIndex === index ? '?' : '?' }}
|
||
</span>
|
||
</div> -->
|
||
|
||
<!-- <div :class="styleByType(item)">
|
||
{{ item.name }} ( {{ item.examineType === '0' ? '依次' : item.examineType === '1' ? '会签' : '或签' }})
|
||
<span style="margin-left: 15px; font-size: 20px; font-weight: bold">
|
||
{{ index < currentCheckIndex && item.isResult ? '√' : currentCheckIndex === index ? '?' : '?' }}
|
||
</span>
|
||
</div> -->
|
||
|
||
<div class="arrow-container">
|
||
<div class="line"></div>
|
||
<div class="arrow-down"></div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
border: 1.5px solid black;
|
||
width: 50%;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
"
|
||
>
|
||
结束
|
||
</div>
|
||
</div>
|
||
</el-aside>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getAuditPerson } from '@/api/pro/approval_cons'
|
||
import store from '@/store'
|
||
|
||
export default {
|
||
props: {
|
||
auditReason: {
|
||
type: Array,
|
||
default: [],
|
||
},
|
||
showType: Number, // 1 展示审批意见 2 展示填写按钮
|
||
isExamine: false, // 是否为审批页面 true 是 展示审核按钮 false 否
|
||
btnShow: false, // 是否审核按钮
|
||
finalCheck: String,
|
||
ids: Object, // {proId: '', consId: '', subId: '', supId: '', personId: ''}等等 目前暂定
|
||
auditType: {
|
||
type: String,
|
||
default: '审批信息',
|
||
}, // 审批类型 企业资质，安全协议书，四措两案等
|
||
items: {
|
||
type: Array,
|
||
default: [
|
||
{
|
||
section: '',
|
||
name: '',
|
||
time: '',
|
||
status: '',
|
||
reason: '',
|
||
turnDownReason: '',
|
||
},
|
||
],
|
||
},
|
||
showPosition: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
|
||
// 审批信息
|
||
opinionValueOther: {
|
||
type: String,
|
||
default: () => '',
|
||
},
|
||
},
|
||
computed: {
|
||
store() {
|
||
return store
|
||
},
|
||
isUserIncluded(index) {
|
||
console.log('index=========', index)
|
||
if (this.auditPersonArr[index].checkPerson.includes(this.userName)) {
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
// 根据审核状态以及审核结果添加样式
|
||
styleByType() {
|
||
return (item, index) => {
|
||
// if (this.items[index].status == '审核通过') return 'highlight'
|
||
// if (this.items[index].status == '审核驳回') return 'rejectHighlight'
|
||
// if (item.isActive != 1) return 'normal'
|
||
// if (item.isActive == 1) return 'currentLight'
|
||
if (item.auditStatus == 1 || item.auditStatus == 3) return 'highlight'
|
||
if (item.auditStatus == 2) return 'rejectHighlight'
|
||
if (item.auditStatus == null && this.endAuditingIndex < 0) return 'normal'
|
||
if ((item.auditStatus == null || item.auditStatus == 4) && this.endAuditingIndex > -1) return 'currentGary'
|
||
if (item.auditStatus == 4 && this.endAuditingIndex < 0) return 'currentLight'
|
||
}
|
||
},
|
||
|
||
// 根据审核状态以及审核结果添加符号
|
||
iconByType() {
|
||
return (item, index) => {
|
||
if (item.auditStatus == 1 || item.auditStatus == 3) return '√'
|
||
if (item.auditStatus == 2) return 'X'
|
||
if (item.auditStatus == null || this.endAuditingIndex > -1) return ''
|
||
if (item.auditStatus == 4 && this.endAuditingIndex < 0) return '?'
|
||
}
|
||
},
|
||
},
|
||
watch: {
|
||
items: {
|
||
handler: function (val) {
|
||
console.log('=----------------items9996', val)
|
||
|
||
const endIndex = val.findIndex(item => item.status === '终审通过')
|
||
this.endAuditingIndex = endIndex
|
||
if (endIndex > -1) {
|
||
this.auditRecordList = val.slice(0, endIndex + 1)
|
||
} else {
|
||
this.auditRecordList = val
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
|
||
opinionValueOther: {
|
||
handler(newValue) {
|
||
if (newValue && this.isExamine) {
|
||
this.reason = newValue
|
||
}
|
||
},
|
||
deep: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
currentCheckIndex: 0,
|
||
auditPersonArr: [],
|
||
taskId: '',
|
||
reason: '',
|
||
dialogVisible: false,
|
||
height: this.$props.auditType ? 600 : 750,
|
||
form: {
|
||
turnDownReason: '',
|
||
},
|
||
rules: {
|
||
turnDownReason: [{ required: true, message: '请输入驳回原因', trigger: 'blur' }],
|
||
},
|
||
reverse: false,
|
||
color: '#0bbd87',
|
||
color1: '#ededed',
|
||
userName: this.$store.state.user.userData.nickName,
|
||
code: 1,
|
||
num: 0,
|
||
assignNum: 0,
|
||
|
||
// 3.31更改bug新增
|
||
auditRecordList: [],
|
||
endAuditingIndex: -1,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.assign()
|
||
},
|
||
methods: {
|
||
assign() {
|
||
console.log('111auditType===' + this.auditType)
|
||
if (this.assignNum > 5) {
|
||
return
|
||
}
|
||
if (this.auditType === '审批信息' || this.auditRecordType === '全部') {
|
||
if (this.taskId) {
|
||
this.getAuditPerson()
|
||
} else {
|
||
if (this.$props.items && this.$props.items.length > 0) {
|
||
this.taskId = this.$props.items[0].taskId
|
||
}
|
||
setTimeout(() => {
|
||
this.assignNum++
|
||
this.assign()
|
||
}, 500)
|
||
}
|
||
this.num++
|
||
}
|
||
},
|
||
getAuditPerson() {
|
||
getAuditPerson({ taskId: this.taskId }).then(res => {
|
||
if (res.code === 200) {
|
||
this.auditPersonArr = res.data
|
||
console.log('this.auditPersonArr审核流程', this.auditPersonArr)
|
||
//获取isActive为1的下标
|
||
this.currentCheckIndex = this.auditPersonArr.findIndex(item => item.isActive == '1')
|
||
|
||
if (this.auditPersonArr[0].isActive == '10') {
|
||
this.currentCheckIndex = this.auditPersonArr.length
|
||
}
|
||
|
||
this.auditPersonArr.forEach(e => {
|
||
if (e.isActive == 10) {
|
||
e.isResult = true
|
||
} else {
|
||
e.isResult = false
|
||
}
|
||
})
|
||
console.log('this.auditPersonArr.===' + JSON.stringify(this.auditPersonArr))
|
||
console.log('this.currentCheckIndex===' + this.currentCheckIndex)
|
||
}
|
||
})
|
||
},
|
||
changReason(e) {
|
||
console.log('222auditType===' + this.auditType)
|
||
this.$emit('reason', { reason: e, auditType: this.auditType })
|
||
},
|
||
//终审
|
||
finalInstanceBtn() {
|
||
this.$emit('finalInstance', this.reason)
|
||
},
|
||
//通过
|
||
passBtn() {
|
||
if (this.reason === '') {
|
||
this.reason = '@@'
|
||
}
|
||
this.$emit('pass', this.reason)
|
||
},
|
||
//驳回
|
||
turnDownBtn() {
|
||
console.log('333auditType===' + JSON.stringify(this.auditReason))
|
||
console.log('333auditType===' + this.auditReason.toString())
|
||
let reason = ''
|
||
if (this.auditReason && this.auditReason.length > 0) {
|
||
this.auditReason.forEach(item => {
|
||
if (item.reason === '' || item.reason === null || item.reason === undefined) {
|
||
} else {
|
||
reason += item.reason + '；'
|
||
}
|
||
})
|
||
reason = reason.substring(0, reason.length - 1)
|
||
} else {
|
||
reason = this.reason
|
||
}
|
||
this.form.turnDownReason = reason
|
||
this.dialogVisible = true
|
||
},
|
||
submitForm() {
|
||
this.$refs.form.validate(valid => {
|
||
if (valid) {
|
||
this.dialogVisible = false
|
||
if (this.reason === '') {
|
||
this.reason = '@@'
|
||
}
|
||
this.$emit('turnDown', { rejectReason: this.form.turnDownReason, reason: this.reason })
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
addReason() {
|
||
this.dialogVisible = true
|
||
},
|
||
|
||
// 审批状态
|
||
auditingType(item) {
|
||
if (item.status === '未审核' || item.status == '') return '未审核'
|
||
if (item.status === '已审核' && (item.agree == 1 || item.agree == 3)) return '审核通过'
|
||
if (item.status === '已审核' && item.agree == 2) return '审核驳回'
|
||
if (item.status === '已审核' && (item.agree == 4 || item.agree == null)) return '撤回'
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.container {
|
||
display: flex;
|
||
flex-direction: row;
|
||
overflow-y: auto;
|
||
}
|
||
.arrow-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.line {
|
||
width: 2px;
|
||
height: 40px;
|
||
background-color: black;
|
||
}
|
||
|
||
.arrow-down {
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 5px solid transparent;
|
||
border-right: 5px solid transparent;
|
||
border-top: 10px solid black;
|
||
}
|
||
|
||
.highlight {
|
||
/* Add any specific styles for the highlighted state */
|
||
padding: 8px;
|
||
border: 1px solid green;
|
||
width: 50%;
|
||
text-align: center;
|
||
/* height: 50px; */
|
||
font-size: 14px;
|
||
margin-top: 2px;
|
||
border-radius: 5px;
|
||
background: #35c50c;
|
||
}
|
||
.rejectHighlight {
|
||
/* Add any specific styles for the highlighted state */
|
||
padding: 8px;
|
||
/* border: 1px solid green; */
|
||
width: 50%;
|
||
text-align: center;
|
||
/* height: 50px; */
|
||
font-size: 14px;
|
||
margin-top: 2px;
|
||
border-radius: 5px;
|
||
background: #f56c6c;
|
||
}
|
||
.currentGary {
|
||
/* Add any specific styles for the highlighted state */
|
||
padding: 8px;
|
||
/* border: 1px solid green; */
|
||
width: 50%;
|
||
text-align: center;
|
||
/* height: 50px; */
|
||
font-size: 14px;
|
||
margin-top: 2px;
|
||
border-radius: 5px;
|
||
background: rgb(153, 153, 153);
|
||
}
|
||
.currentLight {
|
||
/* Add any specific styles for the highlighted state */
|
||
padding: 8px;
|
||
border: 1px solid green;
|
||
width: 50%;
|
||
text-align: center;
|
||
/* height: 50px; */
|
||
font-size: 14px;
|
||
margin-top: 2px;
|
||
border-radius: 5px;
|
||
background: #e6f511;
|
||
}
|
||
.normal {
|
||
/* Add any specific styles for the normal state */
|
||
padding: 8px;
|
||
border: 1px solid black;
|
||
width: 50%;
|
||
text-align: center;
|
||
/* height: 50px; */
|
||
font-size: 14px;
|
||
margin-top: 2px;
|
||
border-radius: 5px;
|
||
}
|
||
.content1 {
|
||
/* Add any specific styles for the highlighted state */
|
||
width: 70%;
|
||
overflow-y: auto;
|
||
height: 700px;
|
||
}
|
||
.content2 {
|
||
/* Add any specific styles for the highlighted state */
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
</style>
|