275 lines
9.0 KiB
Vue
275 lines
9.0 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 items"
|
|||
|
|
: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>审批状态： {{ 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')">确 定</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="{'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 ? '√' : (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: {
|
|||
|
|
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,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
store() {
|
|||
|
|
return store
|
|||
|
|
},
|
|||
|
|
isUserIncluded(index) {
|
|||
|
|
console.log("index=========",index)
|
|||
|
|
if (this.auditPersonArr[index].checkPerson.includes(this.userName)) {
|
|||
|
|
return true
|
|||
|
|
} else {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
items: {
|
|||
|
|
handler: function (val) {
|
|||
|
|
console.log("=----------------",val)
|
|||
|
|
},
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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
|
|||
|
|
//获取isActive为1的下标
|
|||
|
|
this.currentCheckIndex = this.auditPersonArr.findIndex(item => item.isActive == '1')
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
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() {
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
.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>
|