<!--
|
Description: 工作流-设备点检处理页面 List
|
Author: 作者 liuyh
|
Date: 2025-02-27
|
-->
|
<template>
|
<a-modal
|
:title="title"
|
:width="width"
|
:visible="visible"
|
:footer="null"
|
@cancel="handCancel"
|
>
|
<a-card :bordered="false">
|
<div>
|
<b>{{ selectShenpiData.title }}</b>
|
<br>
|
<br>
|
<a-tag color="blue">
|
当前处理人 {{ selectShenpiData.assignee_dictText }}
|
</a-tag>
|
<a-tag color="blue">
|
任务创建时间 {{ selectShenpiData.createTime }}
|
</a-tag>
|
<br>
|
<br>
|
<button @click="fetchAndShowBmp" class="btn-custom">打开流程图</button>
|
<div v-if="imageSrc">
|
<img :src="imageSrc" alt="Fetched Image" />
|
</div>
|
<hr class="shallow-hr">
|
</div>
|
<div>
|
<b>点检工单详情</b>
|
<br>
|
<a-form :form='form'>
|
<a-spin :spinning="spinning">
|
<a-tabs default-active-key='1' @change='callback'>
|
<a-tab-pane key='1' tab='基本信息'>
|
<a-form-model ref='form' :model='tableRowRecord' :rules='validatorRules'>
|
<a-row>
|
<a-col :span='span'>
|
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="standardCode" label="工单号">
|
<a-input placeholder="工单号自动生成" :disabled="true" v-model="tableRowRecord.orderNum" />
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='span'>
|
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentId" label="设备编号">
|
<MaintenanceEquipmentSelect placeholder="请输入设备编号或名称搜索" v-model="tableRowRecord.equipmentId"
|
:maintenanceCategory="maintenanceCategory" :disabled="true"
|
@autocompleteForm="autocompleteForm"></MaintenanceEquipmentSelect>
|
</a-form-model-item>
|
</a-col>
|
|
</a-row>
|
<a-row>
|
<a-col :span='span'>
|
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="standardName" label="标准名称">
|
<a-input placeholder="请输入标准名称" disabled v-model="this.standardName" />
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='span'>
|
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="standardCode" label="标准编码">
|
<a-input placeholder="请输入标准编码" disabled v-model="this.standardCode" />
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<a-row>
|
<a-col :span='span'>
|
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenancePeriod" label="保养周期">
|
<a-input-number v-model="this.maintenancePeriod" :min="1" :precision="0" disabled style="width: 100%" />
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='span'>
|
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="operator" label="点检人">
|
<j-dict-select-tag v-model="tableRowRecord.operator" placeholder="请选择用户" disabled dictCode="sys_user,realname,username,username!='admin' order by create_time"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<a-row>
|
<a-col :span='span'>
|
<a-form-model-item label="点检日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="inspectionDate">
|
<j-date placeholder="请选择点检日期" v-model="tableRowRecord.inspectionDate" disabled style="width: 100%" />
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='span'>
|
<a-form-model-item label="点检过期时间" :labelCol="{span:6}" :wrapperCol="{span:15}" prop="expirationTime">
|
<j-date placeholder="请选择点检过期时间" v-model="tableRowRecord.expirationTime" disabled style="width: 100%" />
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<a-row >
|
<a-col :span="24">
|
<a-form-model-item label="备注" :labelCol="{span:1}" :wrapperCol="{span:22}" prop="remark">
|
<a-textarea v-model="tableRowRecord.remark" rows="3" placeholder="请输入备注" disabled />
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</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-spin>
|
</a-form>
|
</div>
|
<div>
|
<hr class="shallow-hr">
|
<br>
|
<b>保养项明细</b>
|
<br>
|
<a-form-model ref="form" :model="approveData" :rules="validatorRules" slot="detail">
|
<a-row :gutter="24">
|
<j-vxe-table
|
ref="editableDetailTable"
|
:rowNumber="false"
|
:rowSelection="false"
|
:bordered="true"
|
:alwaysEdit="true"
|
:toolbar="false"
|
keep-source
|
:height="300"
|
:loading="detail.loading"
|
:dataSource="detail.dataSource"
|
:columns="detail.columns"
|
style="margin-top: 8px;" />
|
</a-row>
|
<div class="table-operator" style="text-align: right;">
|
<a-button @click="handleQueXiaoTask" type="primary" icon="close">取消</a-button>
|
<a-button @click="submitForm">提 交</a-button>
|
</div>
|
</a-form-model>
|
</div>
|
</a-card>
|
|
|
</a-modal>
|
</template>
|
|
<script>
|
|
import '@assets/less/TableExpand.less'
|
import { mixinDevice } from '@/utils/mixin'
|
import { getAction, deleteAction, postAction, downFile, httpAction } from '@api/manage'
|
import MaintenanceEquipmentSelect from '@views/eam/equipment/modules/MaintenanceEquipmentSelect.vue'
|
import { JVXETypes } from '@comp/jeecg/JVxeTable'
|
export default {
|
name: 'FlowShenPi',
|
components: { MaintenanceEquipmentSelect },
|
mixins: [mixinDevice],
|
props: {
|
selectShenpiData: {
|
type: Object,
|
required: true
|
}
|
},
|
|
data() {
|
return {
|
form: this.$form.createForm(this),
|
span: 12,
|
span1: 8,
|
coldisabled: true,
|
spinning: false,
|
tableRowRecord: {},
|
assignFileStream:{},
|
tableDataSource: [],
|
usageDataSource: [],
|
hitaskDataSource:[],
|
bomForm: {},
|
approveContent:"",
|
imageSrc: null,
|
drawerVisible: true,
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 30 },
|
sm: { span: 16 }
|
},
|
validatorRules: {
|
status: {
|
rules: [
|
{ required: true, message: '请选择审批状态!'},
|
]
|
},
|
},
|
approveData: {},
|
flowData: {},
|
title: '详情页面',
|
width: 1000,
|
visible: false,
|
// 表头
|
url: {
|
queryBomDataById: '/eam/eamInspectionOrder/selectVoById',
|
diagramView: '/assign/flow/diagramView',
|
queryHisTaskList:'/dncFlow/dispatchFile/queryHisTaskList',
|
approve:"/eam/eamInspectionOrder/approval",
|
saveDispatchFile:"/dncFlow/dispatchFile/saveDispatchFile"
|
},
|
dictOptions: {},
|
superFieldList: [],
|
workflowSource: [],
|
maintenanceCategory: 'POINT_INSPECTION',
|
standardName:"",
|
maintenancePeriod:"",
|
standardCode:"",
|
detail: {
|
loading: false,
|
dataSource: [],
|
columns: [
|
{
|
title: '序号',
|
key: 'itemCode',
|
type: JVXETypes.normal,
|
width: '10%',
|
align:"center",
|
},
|
{
|
title: '保养项',
|
key: 'itemName',
|
type: JVXETypes.normal,
|
width: '20%',
|
align:"center",
|
},
|
{
|
title: '保养要求',
|
key: 'itemDemand',
|
type: JVXETypes.normal,
|
width: '30%',
|
align:"center",
|
},
|
{
|
title: "点检结果"
|
,key: 'inspectionResult'
|
,type: JVXETypes.selectSearch
|
,dictCode:'eam_inspection_result'
|
,width: '20%'
|
,align:"center"
|
},
|
{
|
title: '异常描述',
|
key: 'exceptionDescription',
|
type: JVXETypes.textarea,
|
width: '30%',
|
align:"center",
|
},
|
{
|
title: '异常是否报修',
|
key: 'reportFlag',
|
type: JVXETypes.selectSearch,
|
dictCode:'yn',
|
width: '20%',
|
align:"center",
|
}
|
]
|
}
|
}
|
},
|
created() {
|
},
|
computed: {},
|
methods: {
|
callback() {
|
},
|
handCancel() {
|
this.visible = false
|
},
|
clearTableSource() {
|
this.tableDataSource = []
|
this.usageDataSource = []
|
},
|
fetchAndShowBmp() {
|
console.log('flowData----->', this.flowData)
|
try {
|
let parm = {
|
processDefinitionId: this.flowData.processDefinitionId,
|
processInstanceId:this.flowData.processInstanceId,
|
TaskDefinitionKey:this.flowData.processDefinitionKey
|
}
|
downFile(this.url.diagramView,parm,'get').then((res=>{
|
console.log('Pica------>',res)
|
const urlObject = window.URL.createObjectURL(new Blob([res]))
|
this.imageSrc = urlObject
|
}))
|
} catch (error) {
|
console.error('Error fetching image blob:', error)
|
alert('无法加载图片，请稍后再试。')
|
}
|
},
|
handleQueXiaoTask(){
|
this.visible = false
|
this.routeReload()
|
},
|
autocompleteForm(selectObj) {
|
this.standardName = selectObj.standardName
|
this.maintenancePeriod=selectObj.maintenancePeriod
|
this.standardCode=selectObj.standardCode
|
},
|
submitForm () {
|
const that = this;
|
// 触发表单验证
|
this.form.validateFields((err, values) => {
|
if (!err) {
|
that.confirmLoading = true;
|
let url=this.url.approve
|
let method = 'post';
|
let flowTaskVo = {}
|
let tableData = that.$refs.editableDetailTable.getTableData()
|
flowTaskVo.comment =that.assignFileStream.approveContent;
|
flowTaskVo.dataId = this.selectShenpiData.dataId
|
flowTaskVo.taskId = this.selectShenpiData.id
|
flowTaskVo.userId = this.selectShenpiData.assignee
|
flowTaskVo.instanceId = this.selectShenpiData.procInstId
|
flowTaskVo.values = this.selectShenpiData.variables
|
flowTaskVo.tableDetailList=tableData
|
console.log("表单提交数据",flowTaskVo)
|
httpAction(url,flowTaskVo,method).then((res)=>{
|
if(res.success){
|
that.$message.success(res.message);
|
that.visible = false
|
//刷新表格
|
that.$emit('searchReset')
|
}else{
|
that.$message.warning(res.message);
|
}
|
}).finally(() => {
|
that.confirmLoading = false;
|
})
|
}
|
})
|
},
|
getAllApproveData(item) {
|
console.log('selectShenpiData----->', this.selectShenpiData)
|
this.flowData = item
|
let param = {
|
'id': item.dataId
|
}
|
let parmhis={
|
'procInstId': item.procInstId
|
}
|
getAction(this.url.queryHisTaskList,parmhis).then(res=>{
|
this.hitaskDataSource=res.result
|
getAction(this.url.queryBomDataById, param).then((res => {
|
if (res.success) {
|
this.tableRowRecord = res.result[0]
|
this.detail.dataSource=res.result[0].tableDetailList
|
console.log('this.tableRowRecord----->', this.tableRowRecord[0])
|
}
|
}))
|
}).finally(
|
this.visible = true,
|
console.log('this.approveData---->', this.approveData)
|
)
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.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;
|
}
|
|
@import '~@assets/less/common.less';
|
</style>
|
