<template>
|
<j-modal :title="title" :visible="visible" :confirmLoading="confirmLoading" :width="1300"
|
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }" fullscreen @ok="handleOk"
|
@cancel="handleCancel" centered cancelText="关闭">
|
<a-spin :spinning="spinning">
|
<a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-row id="outer-row" :gutter="24">
|
<!--左侧基础信息列-->
|
<a-col :span="selectShenpiData.procInstId?8:12" class="scroll-col">
|
<a-tabs>
|
<a-tab-pane tab="基础信息">
|
<a-row>
|
<a-col :span="12">
|
<a-form-model-item label="统一编码">
|
<lx-search-equipment-select v-model="model.equipmentId" disabled/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="批次号">
|
<a-input v-model="model.batchNumber" readOnly/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row>
|
<a-col :span="12">
|
<a-form-model-item label="加工零件号">
|
<a-input v-model="model.processingPart" readOnly/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="件数">
|
<a-input-number v-model="model.quantity" disabled/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row>
|
<a-col :span="12">
|
<a-form-model-item label="产品损失情况">
|
<j-dict-select-tag dict-code="yn" type="radio" v-model="model.productLoss" disabled/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row>
|
<a-col :span="24">
|
<a-form-model-item label="产品损失质量影响分析" :labelCol="labelColLong" :wrapperCol="wrapperColLong">
|
<a-textarea v-model="model.qualityAnalysis" readOnly/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-tab-pane>
|
</a-tabs>
|
</a-col>
|
|
<!-- 中间明细项列-->
|
<a-col v-if="selectShenpiData.procInstId" :span="10" class="scroll-col">
|
<a-tabs default-active-key="1">
|
<a-tab-pane key='1' tab='流程图'>
|
<img :src="imageSrc" v-if="imageSrc" style="width: 100%"/>
|
</a-tab-pane>
|
|
<a-tab-pane key='2' tab='流转节点'>
|
<a-card>
|
<a-timeline style="padding:0 1% 0 12%" >
|
<a-timeline-item color='white' v-for="(item,index1) in hitaskDataSource" :key="index1">
|
<div class="bottom">
|
<p>处理人：{{item.assignee_dictText}}</p>
|
<p v-if="index1 !==0">处理时长：{{item.duration}}</p>
|
<p v-if="item.name !== '提交申请'">处理类型：{{item.sequenceFlowName}}</p>
|
<p v-if="item.description != null">处理意见：{{item.description}}</p>
|
<div class="left_qiu"><span>{{item.taskName}}</span></div>
|
</div>
|
</a-timeline-item>
|
</a-timeline>
|
</a-card>
|
</a-tab-pane>
|
|
</a-tabs>
|
</a-col>
|
|
<!--右侧审批列-->
|
<a-col :span="selectShenpiData.procInstId?6:12" class="scroll-col">
|
<a-tabs v-if="displayRegionalManagerFlag">
|
<a-tab-pane tab="主管工艺确认">
|
<a-row>
|
<a-col :span="24">
|
<a-form-model-item prop="technologistResult" label="确认类型"
|
:labelCol="rightColLabelCol" :wrapperCol="rightColWrapperCol">
|
<j-dict-select-tag type='radio' v-model='model.technologistResult'
|
dictCode='approve_reject'
|
:disabled="disableSubmit||(model.confirmStatus&&model.confirmStatus!=='PENDING_SUPERIOR_TECHNICAL_CONFIRMATION')"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-model-item label="确认意见" :labelCol="rightColLabelCol" :wrapperCol="rightColWrapperCol">
|
<a-textarea placeholder="请输入意见" v-model="model.technologistComment"
|
:disabled="disableSubmit||(model.confirmStatus&&model.confirmStatus!=='PENDING_SUPERIOR_TECHNICAL_CONFIRMATION')"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-tab-pane>
|
</a-tabs>
|
|
<a-tabs v-if="displayRepairRegionalManagerFlag">
|
<a-tab-pane tab="部级领导确认">
|
<a-row>
|
<a-col :span="24">
|
<a-form-model-item prop="deputyDepartmentResult" label="确认类型"
|
:labelCol="rightColLabelCol" :wrapperCol="rightColWrapperCol">
|
<j-dict-select-tag type='radio' v-model='model.deputyDepartmentResult'
|
dictCode='approve_reject'
|
:disabled="disableSubmit||(model.confirmStatus&&model.confirmStatus!=='PENDING_DEPARTMENT_LEADER_CONFIRMATION')"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-model-item label="确认意见" :labelCol="rightColLabelCol" :wrapperCol="rightColWrapperCol">
|
<a-textarea placeholder="请输入意见" v-model="model.deputyDepartmentComment"
|
:disabled="disableSubmit||(model.confirmStatus&&model.confirmStatus!=='PENDING_DEPARTMENT_LEADER_CONFIRMATION')"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-tab-pane>
|
</a-tabs>
|
|
|
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</a-spin>
|
</j-modal>
|
</template>
|
|
<script>
|
import { downFile, getAction, httpAction } from '@/api/manage'
|
import TechnicalStatusEquipmentSelect from '../../../eam/equipment/modules/TechnicalStatusEquipmentSelect'
|
import LxSearchEquipmentSelect from '../../../eam/equipment/modules/LxSearchEquipmentSelect'
|
|
export default {
|
name: 'reportProductHazardsApprovalModal',
|
components: {
|
LxSearchEquipmentSelect,
|
TechnicalStatusEquipmentSelect
|
},
|
props: {
|
selectShenpiData: {
|
type: Object
|
}
|
},
|
data() {
|
return {
|
title: '操作',
|
visible: false,
|
model: {},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 10 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 14 }
|
},
|
labelColLong: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperColLong: {
|
xs: { span: 24 },
|
sm: { span: 19 }
|
},
|
rightColLabelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
rightColWrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 15 }
|
},
|
confirmLoading: false,
|
spinning: false,
|
imageSrc: null,
|
validatorRules: {
|
technicalDirectorLeaderResult: [{ required: true, message: '请选择确认类型' }],
|
technicalDirectorPartResult: [{ required: true, message: '请选择确认类型' }]
|
},
|
url: {
|
queryById: '/eam/eamReportProductHazards/queryById',
|
approval: '/eam/eamReportProductHazards/perform',
|
diagramView: '/assign/flow/diagramView',
|
queryHisTaskList:'/assign/flow/queryHisTaskList',
|
},
|
disableSubmit: false,
|
hitaskDataSource:[],
|
}
|
},
|
computed: {
|
displayRegionalManagerFlag() {
|
return this.model.confirmStatus && ['PENDING_SUPERIOR_TECHNICAL_CONFIRMATION', 'PENDING_DEPARTMENT_LEADER_CONFIRMATION','REPAIR_COMPLETED', 'REJECTED'].includes(this.model.confirmStatus)
|
},
|
displayRepairRegionalManagerFlag() {
|
return this.model.confirmStatus && ['PENDING_DEPARTMENT_LEADER_CONFIRMATION','REPAIR_COMPLETED', 'REJECTED'].includes(this.model.confirmStatus)
|
},
|
},
|
methods: {
|
/**
|
* 主页面点击执行审批时触发
|
* @param record 主页面列表行记录
|
*/
|
async handleApprove(record) {
|
this.model = {}
|
this.getBasicInformationByApi(record)
|
this.getFlowChartImageByApi(record)
|
this.getFlowTaskListByApi(record)
|
},
|
|
/**
|
* 主页面点击详情时触发
|
* @param record 主页面列表行记录
|
*/
|
handleDetail(record) {
|
this.model = Object.assign({}, record)
|
this.getFlowTaskListByApi(record)
|
},
|
|
/**
|
* 获取基础信息
|
* @param record 主页面列表行记录
|
*/
|
getBasicInformationByApi(record) {
|
this.spinning = true
|
const that = this
|
getAction(this.url.queryById, { id: record.dataId })
|
.then(res => {
|
if (res.success) {
|
that.model = Object.assign({}, res.result, { repairConfirmResult: '1' })
|
that.model.dataId = record.dataId
|
that.model.taskId = record.id
|
that.model.userId = record.assignee
|
that.model.instanceId = record.procInstId
|
}
|
else {
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.finally(() => {
|
that.spinning = false
|
})
|
},
|
|
/**
|
* 获取流转节点
|
* @param record
|
*/
|
getFlowTaskListByApi(record) {
|
let parmhis={
|
'procInstId': record.procInstId
|
}
|
getAction(this.url.queryHisTaskList,parmhis).then(res=>{
|
this.hitaskDataSource=res.result
|
}).finally(
|
this.visible = true,
|
console.log('this.approveData---->', this.approveData)
|
)
|
},
|
|
/**
|
* 获取流程图
|
* @param record 主页面列表行记录
|
*/
|
getFlowChartImageByApi(record) {
|
const { processDefinitionId, processInstanceId, processDefinitionKey } = record
|
|
downFile(this.url.diagramView, {
|
processDefinitionId,
|
processInstanceId,
|
TaskDefinitionKey: processDefinitionKey
|
}, 'get')
|
.then((res => {
|
this.imageSrc = window.URL.createObjectURL(new Blob([res]))
|
}))
|
.catch(err => {
|
this.$notification.error({
|
message: '消息',
|
description: err.message
|
})
|
})
|
},
|
|
async handleOk() {
|
const that = this
|
|
// 触发表单验证
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
that.confirmLoading = that.spinning = true
|
|
httpAction(that.url.approval, that.model, 'post')
|
.then((res) => {
|
if (res.success) {
|
that.$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
that.$emit('modalFormOk')
|
that.close()
|
} else {
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.finally(() => {
|
that.confirmLoading = that.spinning = false
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
|
/**
|
* 原因分析核对值发生改变时触发
|
* @param value
|
*/
|
handleCheckAgreeChange(value) {
|
if (value === '1') delete this.model.disagreeReason
|
},
|
|
handleCancel() {
|
this.close()
|
},
|
|
close() {
|
this.$emit('close')
|
this.visible = false
|
if (this.$refs.form) this.$refs.form.clearValidate()
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
/deep/ .ant-spin-nested-loading {
|
height: 100%;
|
|
.ant-spin-container {
|
height: 100%;
|
|
.ant-form {
|
height: 100%;
|
|
#outer-row {
|
height: 100%;
|
|
.scroll-col {
|
height: 100%;
|
overflow: auto;
|
}
|
}
|
}
|
}
|
}
|
|
/* 全局禁选样式 - 作用于整个页面 */
|
html.submitting,
|
html.submitting body {
|
pointer-events: none !important;
|
cursor: wait !important;
|
}
|
|
/* 蒙层效果增强 */
|
html.submitting::before {
|
content: '';
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(255, 255, 255, 0.5);
|
z-index: 9998;
|
}
|
|
/* 加载指示器 - 更明显的视觉反馈 */
|
html.submitting::after {
|
content: '提交中...';
|
position: fixed;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background: #1890ff;
|
color: white;
|
padding: 10px 20px;
|
border-radius: 4px;
|
z-index: 9999;
|
}
|
|
/* 禁用状态按钮样式 */
|
.disabled-btn {
|
opacity: 0.6;
|
cursor: not-allowed !important;
|
}
|
|
.shallow-hr {
|
border: 0;
|
height: 1px; /* 分界线的高度 */
|
background-color: rgba(0, 0, 0, 0.1); /* 使用 RGBA 颜色，并设置较低的透明度 */
|
margin: 20px 0; /* 分界线上下的外边距 */
|
}
|
.btn-custom {
|
background-color: #4CAF50; /* 绿色背景 */
|
color: white; /* 白色文字 */
|
border: none; /* 无边框 */
|
padding: 5px 15px; /* 内边距 */
|
text-align: center; /* 文字居中 */
|
text-decoration: none; /* 无下划线 */
|
display: inline-block; /* 行内块元素 */
|
font-size: 12px; /* 字体大小 */
|
margin: 4px 2px; /* 外边距 */
|
cursor: pointer; /* 鼠标悬停时显示手型 */
|
border-radius: 4px; /* 圆角边框 */
|
}
|
|
.bold-large-label {
|
font-weight: bold;
|
font-size: 20px; /* 或你需要的任何大小 */
|
}
|
.left_qiu{
|
position: absolute;
|
left: -74px;
|
top: 0;
|
width:54px;
|
border-radius: 50%;
|
height:54px;
|
font-size: 13px;
|
margin: auto;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
justify-content: center;
|
background: #0099ff;
|
transform: translate(0, 0);
|
}
|
/deep/ .ant-timeline-item-tail{
|
left: -29px !important;
|
}
|
.left_qiu span{
|
width: 3em;
|
display: block;
|
color: #fff;
|
text-align: center;
|
}
|
.img{
|
width: 75%;
|
}
|
|
.wrap{
|
clear: both;
|
width: 100%;
|
display: flex;
|
height: 50px;
|
border: 1px solid #ccc;
|
/* background-color: aqua; */
|
}
|
.box{
|
width:21%;
|
height:50px;
|
border-right: 1px solid #ccc;
|
line-height: 50px;
|
/* background: red; */
|
text-align:center;
|
margin: auto;
|
}
|
</style>
|
