<template>
|
<a-modal
|
:width="1000"
|
:visible="visible"
|
@cancel="handCancel"
|
:mask-closable="false"
|
centered
|
>
|
<a-card :bordered="false">
|
<div>
|
<b>{{ selectShenpiData.title }}</b>
|
<br/>
|
<br/>
|
<a-tag color="blue">
|
处理人 {{ selectShenpiData.assignee }}
|
</a-tag>
|
<a-tag color="blue">
|
创建时间 {{ selectShenpiData.createTime }}
|
</a-tag>
|
<br>
|
<br>
|
<a-button @click="fetchAndShowBmp" :loading="showBmpButtonLoading" class="btn-custom">流程图</a-button>
|
<div v-if="imageSrc&&isDisplayBmp">
|
<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'>
|
<a-tab-pane key='1' tab='基本信息'>
|
<a-form-model ref='form' :model='tableRowRecord' :rules='validatorRules' :labelCol='labelCol'
|
:wrapperCol='wrapperCol'>
|
<a-row>
|
<a-col :span='span'>
|
<a-form-model-item label='工单编号'>
|
<a-input :readOnly='inputReadOnly' v-model='tableRowRecord.repairCode'/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='span'>
|
<a-form-model-item label='设备编号'>
|
<a-input :readOnly='inputReadOnly' v-model='tableRowRecord.equipmentId_dictText'/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='span'>
|
<a-form-model-item label='单据状态'>
|
<a-input :readOnly='inputReadOnly' v-model='tableRowRecord.repairStatus_dictText'/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span='span'>
|
<a-form-model-item label='维修负责人'>
|
<a-input :readOnly='inputReadOnly' v-model='tableRowRecord.repairer'/>
|
</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.startTime}}</p>
|
<p>结束时间：{{item.endTime}}</p>
|
<p>处理人：{{item.assignee}}</p>
|
<p>办理类型：{{item.bllx_dictText}}</p>
|
<p v-if="item.name == '提交申请'">指派原因：{{item.cause}}</p>
|
<p v-else>处理意见：{{item.cause}}</p>
|
<div class="left_qiu"><span>{{item.name}}</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>
|
<br>
|
<a-form-model ref="form" :model="approveData" :rules="validatorRules" :labelCol='labelCol'
|
:wrapperCol='wrapperCol'>
|
<a-row>
|
<a-col :span="24">
|
<a-form-model-item label="是否需要领用备件" prop="status">
|
<a-radio-group v-model="approveData.status">
|
<a-radio :value="1">是</a-radio>
|
<a-radio :value="0">否</a-radio>
|
</a-radio-group>
|
</a-form-model-item>
|
</a-col>
|
|
<template v-if="approveData.status===0">
|
<a-col :span="24">
|
<a-form-model-item label="故障原因" prop="faultReason">
|
<a-input v-model="approveData.faultReason" rows="4" placeholder="请输入故障原因"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-model-item label="维修结果描述" prop="repairResultDescription">
|
<a-textarea v-model="approveData.repairResultDescription" placeholder="请输入维修结果描述"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-model-item label="维修图片">
|
<j-image-upload v-model="approveData.imageFiles" :is-multiple="true" :number="3"/>
|
</a-form-model-item>
|
</a-col>
|
</template>
|
</a-row>
|
</a-form-model>
|
</div>
|
</a-card>
|
|
<template slot="footer">
|
<div>
|
<a-button @click="handCancel">取消</a-button>
|
<a-button @click="submitForm" type="primary">提 交</a-button>
|
</div>
|
</template>
|
</a-modal>
|
</template>
|
|
<script>
|
import '@assets/less/TableExpand.less'
|
import { getAction, deleteAction, postAction, downFile, httpAction } from '@api/manage'
|
|
export default {
|
name: 'RepairOrderApprovalModal',
|
props: {
|
selectShenpiData: {
|
type: Object,
|
required: true
|
}
|
},
|
data() {
|
return {
|
form: this.$form.createForm(this),
|
span: 12,
|
inputReadOnly: true,
|
spinning: false,
|
tableRowRecord: {},
|
assignFileStream: {},
|
hitaskDataSource: [],
|
imageSrc: null,
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
validatorRules: {
|
status: [
|
{ required: true, message: '请选择是否需要领用备件' }
|
],
|
faultReason: [
|
{ required: true, message: '请输入故障原因' }
|
],
|
repairResultDescription: [
|
{ required: true, message: '请输入维修结果描述' }
|
]
|
},
|
approveData: {},
|
flowData: {},
|
visible: false,
|
// 表头
|
url: {
|
queryBomDataById: '/eam/eamRepairOrder/queryById',
|
diagramView: '/assign/flow/diagramView',
|
queryHisTaskList: '/assign/flow/queryHisTaskList',
|
approve: '/activit/assign/file/approve'
|
},
|
isDisplayBmp: false,
|
showBmpButtonLoading: false
|
}
|
},
|
created() {
|
},
|
methods: {
|
/**
|
* 获取待办记录的基本信息
|
* @param record 待办记录信息
|
*/
|
getAllApproveData(record) {
|
console.log('selectShenpiData----->', this.selectShenpiData)
|
this.flowData = Object.assign({}, record)
|
const param = { 'procInstId': record.dataId }
|
getAction(this.url.queryHisTaskList, param)
|
.then(res => {
|
this.hitaskDataSource = res.result
|
})
|
},
|
|
/**
|
* 获取待办记录的基本信息
|
* @param record 待办记录信息
|
*/
|
getBasicInformation(record) {
|
this.spinning = true
|
const that = this
|
const param = { id: record.dataId }
|
this.tableRowRecord = this.approveData = {}
|
getAction(this.url.queryBomDataById, param)
|
.then((res => {
|
if (res.success) {
|
that.tableRowRecord = res.result
|
console.log('this.tableRowRecord----->', that.tableRowRecord)
|
}
|
}))
|
.finally(() => {
|
that.spinning = false
|
})
|
},
|
|
// 获取并展开流程图
|
fetchAndShowBmp() {
|
this.isDisplayBmp = !this.isDisplayBmp
|
if (!this.imageSrc) {
|
this.showBmpButtonLoading = true
|
const that = this
|
let param = {
|
processDefinitionId: this.flowData.processDefinitionId,
|
processInstanceId: this.flowData.processInstanceId,
|
TaskDefinitionKey: this.flowData.processDefinitionKey
|
}
|
downFile(this.url.diagramView, param, 'get')
|
.then((res => {
|
const urlObject = window.URL.createObjectURL(new Blob([res]))
|
this.imageSrc = urlObject
|
}))
|
.catch(err => {
|
that.$notification.error({
|
message: '消息',
|
description: res.message
|
})
|
})
|
.finally(() => {
|
this.showBmpButtonLoading = false
|
})
|
}
|
},
|
|
submitForm() {
|
const that = this
|
// 触发表单验证
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
that.confirmLoading = true
|
const flowTaskVo = {}
|
flowTaskVo.status = that.approveData.status
|
flowTaskVo.approveContent = flowTaskVo.comment = that.approveData.approveContent
|
flowTaskVo.dataId = this.selectShenpiData.dataId
|
flowTaskVo.taskId = this.selectShenpiData.id
|
flowTaskVo.userId = flowTaskVo.assignee = this.selectShenpiData.assignee
|
flowTaskVo.instanceId = this.selectShenpiData.procInstId
|
flowTaskVo.targetKey = this.selectShenpiData.taskDefKey
|
flowTaskVo.values = this.selectShenpiData.variables
|
console.log('表单提交数据', flowTaskVo)
|
// httpAction(this.url.approve, flowTaskVo, 'post')
|
// .then((res) => {
|
// if (res.success) {
|
// that.$message.success(res.message)
|
// that.$emit('ok')
|
// } else {
|
// that.$message.warning(res.message)
|
// }
|
// }).finally(() => {
|
// that.confirmLoading = false
|
// })
|
} else {
|
return false
|
}
|
})
|
},
|
|
handCancel() {
|
this.visible = false
|
this.isDisplayBmp = false
|
this.imageSrc = null
|
}
|
}
|
}
|
</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: #fff; /* 白色文字 */
|
}
|
|
.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;
|
}
|
|
@import '~@assets/less/common.less';
|
</style>
|
