522 lines
15 KiB
Java
522 lines
15 KiB
Java
<template>
|
|
<div class="box">
|
|
<div class="box-text">
|
|
<div class="header-text">
|
|
{{title}}
|
|
</div>
|
|
</div>
|
|
<div class="process-content">
|
|
|
|
<div class="process-content-top">
|
|
<div class="process-content-content" v-for="(item,index) in regulatoryCertificationTaskPlanList" :key="index">
|
|
<img v-if="item.status == 1" src="../../../../assets/wancheng.png" class="process-content-left" alt="">
|
|
<span v-else-if="item.status == 2" class="process-content-left">
|
|
<span class="process-content-left-yuan">
|
|
{{index+1}}
|
|
</span>
|
|
</span>
|
|
<span v-else-if="item.status == 3" class="process-content-left">
|
|
<span class="process-content-left-last">
|
|
{{index+1}}
|
|
</span>
|
|
</span>
|
|
<div class="process-content-right">
|
|
<div class="process-content-right-top" :title="item.name">{{item.name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="process-content-right-xian"></div>
|
|
</div>
|
|
<div style="width: 100%">
|
|
<a-table
|
|
ref="table"
|
|
size="middle"
|
|
:loading="loading"
|
|
:pagination="false"
|
|
:scroll="{x: '100%'}"
|
|
:data-source="dataSource"
|
|
:columns="columns"
|
|
>
|
|
<span slot="approvalResult" slot-scope="text,result">
|
|
{{approvalResult[text]}}
|
|
</span>
|
|
<span slot="approvalOpinion" slot-scope="text,result">
|
|
<a-tooltip placement="topLeft">
|
|
<template slot="title" >
|
|
<span>{{text}}</span>
|
|
</template>
|
|
{{text}}
|
|
</a-tooltip>
|
|
<!-- <span :title="text">-->
|
|
<!-- {{text}}-->
|
|
<!-- </span>-->
|
|
</span>
|
|
<span slot="resultofhandling" slot-scope="text,result">
|
|
<span :class="statusClass[result.operatorResult]" :title="result.operatorResultName">
|
|
{{result.operatorResultName}}
|
|
</span>
|
|
</span>
|
|
<span slot="approvalFile" slot-scope="text,result">
|
|
<span class="viewFile"
|
|
:title="$t('viewFile')"
|
|
@click="viewFileClick(result.approvalFile)"
|
|
v-if="result.approvalFile">
|
|
{{$t('viewFile')}}
|
|
</span>
|
|
<span v-else>--</span>
|
|
</span>
|
|
</a-table>
|
|
</div>
|
|
<viewFileModel ref="viewFileModelRef"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment'
|
|
import { getAction, postAction, downloadFile } from '@/api/manage'
|
|
import viewFileModel from '@/components/viewFileModel/index'
|
|
|
|
export default {
|
|
name: 'circulationHistory',
|
|
components: {
|
|
viewFileModel
|
|
},
|
|
props: {
|
|
queryProject: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
dataSource: [],
|
|
statusClass: {
|
|
'Accepted': 'AcceptedClass',
|
|
'Rejected': 'RejectedClass',
|
|
'Transfer': 'TransferClass',
|
|
'Returned': 'ReturnedClass',
|
|
'Adopt': 'AdoptClass',
|
|
'Compliance': 'ComplianceClass',
|
|
'Non-Compliance': 'NonComplianceClass',
|
|
'To be tracked': 'trackedClass',
|
|
'NA': 'NAClass'
|
|
},
|
|
verifyList: [
|
|
{
|
|
status: '1',
|
|
name: this.$t('initiatingProcess')
|
|
},
|
|
{
|
|
status: '1',
|
|
name: this.$t('Taskresponsibilityrecognition')
|
|
},
|
|
{
|
|
status: '1',
|
|
name: this.$t('verificationComplianceReview')
|
|
},
|
|
{
|
|
status: '2',
|
|
name: this.$t('verificationComplianceExamine')
|
|
},
|
|
{
|
|
status: '3',
|
|
name: this.$t('missionAccomplished')
|
|
}
|
|
],
|
|
designList: [
|
|
{
|
|
status: '1',
|
|
name: this.$t('initiatingProcess')
|
|
},
|
|
{
|
|
status: '1',
|
|
name: this.$t('Taskresponsibilityrecognition')
|
|
},
|
|
{
|
|
status: '1',
|
|
name: this.$t('designComplianceReview')
|
|
},
|
|
{
|
|
status: '2',
|
|
name: this.$t('designComplianceReviewAdmin')
|
|
},
|
|
{
|
|
status: '3',
|
|
name: this.$t('missionAccomplished')
|
|
}
|
|
],
|
|
regulatoryCertificationTaskPlanList: [],
|
|
columns: [
|
|
{
|
|
title: this.$t('Operator'),
|
|
dataIndex: 'assignee',
|
|
align: 'left',
|
|
width: 120,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: this.$t('Tasknode'),
|
|
dataIndex: 'name',
|
|
align: 'left',
|
|
width: 180,
|
|
ellipsis: true
|
|
},
|
|
{
|
|
title: this.$t('feedback'),
|
|
dataIndex: 'approvalOpinion',
|
|
align: 'left',
|
|
width: 200,
|
|
ellipsis: true,
|
|
scopedSlots: { customRender: 'approvalOpinion' }
|
|
},
|
|
{
|
|
title: this.$t('resultofhandling'),
|
|
dataIndex: 'operatorResultName',
|
|
align: 'left',
|
|
width: 160,
|
|
ellipsis: true,
|
|
scopedSlots: { customRender: 'resultofhandling' }
|
|
},
|
|
{
|
|
title: this.$t('enclosure'),
|
|
dataIndex: 'approvalFile',
|
|
align: 'left',
|
|
width: 100,
|
|
ellipsis: true,
|
|
scopedSlots: { customRender: 'approvalFile' }
|
|
},
|
|
{
|
|
title: this.$t('OperationTime'),
|
|
dataIndex: 'createTime',
|
|
align: 'left',
|
|
width: 200,
|
|
ellipsis: true,
|
|
customRender: function(t, r, index) {
|
|
return moment(t).format('YYYY-MM-DD HH:mm:ss')
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log(this.queryProject)
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
let query = {
|
|
actiProcInstId: this.queryProject.actiProcInstId || this.queryProject.prcId
|
|
}
|
|
this.loading = true
|
|
getAction('/wkflow/processHistoryEO/list', query).then((res) => {
|
|
if (res.success) {
|
|
this.dataSource = res.result || []
|
|
if (this.dataSource.length > 0) {
|
|
if (this.queryProject.flowType == 4) {
|
|
this.regulatoryCertificationTaskPlanList = this.verifyList
|
|
} else {
|
|
this.regulatoryCertificationTaskPlanList = this.designList
|
|
}
|
|
let taskData = this.dataSource[this.dataSource.length - 1]
|
|
if (this.queryProject.TaskKey == 'fqlc') {
|
|
this.regulatoryCertificationTaskPlanList.forEach(val => {
|
|
if (val.name == this.$t('initiatingProcess')) {
|
|
val.status = '2'
|
|
} else if (val.name == this.$t('Taskresponsibilityrecognition')) {
|
|
val.status = '3'
|
|
} else {
|
|
val.status = '3'
|
|
}
|
|
})
|
|
}
|
|
if (this.queryProject.TaskKey == 'zrrqr' || this.queryProject.TaskKey == 'dezrrqr') {
|
|
this.regulatoryCertificationTaskPlanList.forEach(val => {
|
|
if (val.name == this.$t('initiatingProcess')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('Taskresponsibilityrecognition')) {
|
|
val.status = '2'
|
|
} else {
|
|
val.status = '3'
|
|
}
|
|
})
|
|
}
|
|
if (this.queryProject.TaskKey == 'zrrtjjfw' || this.queryProject.TaskKey == 'dezrrtjjfw') {
|
|
this.regulatoryCertificationTaskPlanList.forEach(val => {
|
|
if (val.name == this.$t('initiatingProcess')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('Taskresponsibilityrecognition')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('designComplianceReview')) {
|
|
val.status = '2'
|
|
} else if (val.name == this.$t('verificationComplianceReview')) {
|
|
val.status = '2'
|
|
} else {
|
|
val.status = '3'
|
|
}
|
|
})
|
|
}
|
|
if (this.queryProject.TaskKey == 'fggcssh') {
|
|
if (taskData.operatorResult == 'Adopt') {
|
|
this.regulatoryCertificationTaskPlanList.forEach(val => {
|
|
if (val.name == this.$t('initiatingProcess')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('Taskresponsibilityrecognition')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('designComplianceReview')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('designComplianceReviewAdmin')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('verificationComplianceReview')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('verificationComplianceExamine')) {
|
|
val.status = '1'
|
|
} else {
|
|
val.status = '1'
|
|
}
|
|
})
|
|
} else {
|
|
this.regulatoryCertificationTaskPlanList.forEach(val => {
|
|
if (val.name == this.$t('initiatingProcess')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('Taskresponsibilityrecognition')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('designComplianceReview')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('verificationComplianceReview')) {
|
|
val.status = '1'
|
|
} else if (val.name == this.$t('designComplianceReviewAdmin')) {
|
|
val.status = '2'
|
|
} else if (val.name == this.$t('verificationComplianceExamine')) {
|
|
val.status = '2'
|
|
} else {
|
|
val.status = '3'
|
|
}
|
|
})
|
|
}
|
|
}
|
|
this.regulatoryCertificationTaskPlanList = [...this.regulatoryCertificationTaskPlanList]
|
|
}
|
|
this.loading = false
|
|
} else {
|
|
this.dataSource = []
|
|
this.loading = false
|
|
}
|
|
})
|
|
},
|
|
viewFileClick(item) {
|
|
this.$refs.viewFileModelRef.clickButtonToUpload(item)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/common.less';
|
|
|
|
.box {
|
|
padding: 0 0 24px 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.box-text {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 40px;
|
|
line-height: 24px;
|
|
|
|
.header-text {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.viewFile {
|
|
color: #00B3BE;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.process-content {
|
|
margin-top: 8px;
|
|
position: relative;
|
|
margin-bottom: 26px;
|
|
|
|
.process-content-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.process-content-content {
|
|
background: #fff;
|
|
z-index: 1000;
|
|
padding: 0 10px;
|
|
|
|
.process-content-left {
|
|
float: left;
|
|
display: inline-block;
|
|
|
|
.process-content-left-yuan {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: #00B3BE;
|
|
color: #fff;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
.process-content-left-last {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
border: 1px solid #E6E7EC;
|
|
color: #040B29;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.process-content-right {
|
|
float: left;
|
|
margin-left: 7px;
|
|
margin-top: 7px;
|
|
|
|
.process-content-right-top {
|
|
font-size: 14px;
|
|
font-weight: lighter;
|
|
color: #040B29;
|
|
max-width: 155px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.process-content-content:first-child {
|
|
padding: 0 10px 0 0;
|
|
}
|
|
|
|
.process-content-content:last-child {
|
|
padding: 0 0 0 10px;
|
|
}
|
|
|
|
.process-content-right-xian {
|
|
height: 2px;
|
|
width: calc(100% - 27px);
|
|
background: #E6E6E9;
|
|
position: absolute;
|
|
top: 16px;
|
|
}
|
|
}
|
|
|
|
.AcceptedClass {
|
|
background: #e9f8ed;
|
|
color: #26BD4B;
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 2px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.RejectedClass {
|
|
background: #fdeaea;
|
|
color: #E83030;
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 2px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.TransferClass {
|
|
background: #fff6e8;
|
|
color: #FDA71C;
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 2px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ReturnedClass {
|
|
background: #fff6e8;
|
|
color: #FDA71C;
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 2px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.AdoptClass {
|
|
background: #e9f8ed;
|
|
color: #26BD4B;
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 2px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.ComplianceClass {
|
|
background: #e9f8ed;
|
|
color: #26BD4B;
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 2px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.NonComplianceClass {
|
|
background: #fdeaea;
|
|
color: #E83030;
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 2px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.trackedClass {
|
|
background: #fff6e8;
|
|
color: #FDA71C;
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 2px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.NAClass {
|
|
background: #f1f1f3;
|
|
color: #707486;
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 2px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
}
|
|
|
|
|
|
///deep/.ant-table-row-cell-ellipsis .tooltip {
|
|
// span {
|
|
// display: inline-block;
|
|
// width: 50%;
|
|
// white-space:nowrap;/*强制单行显示*/
|
|
// text-overflow:ellipsis;/*超出部分省略号表示*/
|
|
// overflow:hidden;/*超出部分隐藏*/
|
|
// }
|
|
//}
|
|
</style> |