<template>
|
<j-modal :width="1200" :visible="visible" :title="title" :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
|
@cancel="handCancel" @ok="submitForm" :mask-closable="false" :confirmLoading="confirmLoading" fullscreen>
|
<a-spin :spinning="spinning">
|
<a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelColLong"
|
:wrapperCol="wrapperColLong">
|
<a-row :gutter="24" id="outer-row">
|
<a-col :span="8" class="scroll-col">
|
<a-tabs>
|
<a-tab-pane tab="基础信息">
|
<a-row>
|
<a-col :span="12">
|
<a-form-model-item label="维修开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input v-model="model.actualStartTime" readOnly/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="维修结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input v-model="model.actualEndTime" readOnly/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-model-item label="故障原因">
|
<a-textarea v-model="model.faultReason" readOnly/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-model-item label="故障分析">
|
<a-textarea v-model="model.faultAnalysis" readOnly/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-model-item label="排故过程">
|
<a-textarea v-model="model.faultProcess" readOnly/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-model-item label="预防措施">
|
<a-textarea v-model="model.faultPrevent" readOnly/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-tab-pane>
|
</a-tabs>
|
</a-col>
|
|
<!--维修人明细-->
|
<a-col class="scroll-col" :span="10">
|
<a-tabs v-model="activeTabKey">
|
<a-tab-pane key="1" tab="维修人明细">
|
<j-vxe-table ref="editableDetailTable" rowNumber bordered keep-source :dataSource="detail.dataSource"
|
:columns="detail.columns"/>
|
</a-tab-pane>
|
|
<template v-if="selectShenpiData.procInstId">
|
<a-tab-pane key='2' tab='流程图'>
|
<img :src="imageSrc" alt="Fetched Image"/>
|
</a-tab-pane>
|
</template>
|
</a-tabs>
|
</a-col>
|
|
<!--右侧审批列-->
|
<a-col :span="6" class="scroll-col">
|
<a-tabs>
|
<a-tab-pane tab="操作工确认">
|
<a-row>
|
<a-col :span="24">
|
<a-form-model-item prop="confirmResult" label="确认类型">
|
<j-dict-select-tag type='radio' v-model='model.confirmResult' dictCode='approve_reject'
|
placeholder="请选择确认类型"
|
:disabled="disableSubmit || model.repairStatus!='PENDING_CONFIRMATION'"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-model-item label="确认意见">
|
<a-textarea placeholder="请输入意见" v-model="model.confirmComment"
|
:disabled="disableSubmit || model.repairStatus!='PENDING_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 { getAction, downFile, httpAction } from '@api/manage'
|
import LxSearchEquipmentSelect from '@views/eam/equipment/modules/LxSearchEquipmentSelect'
|
import { JVXETypes } from '@comp/jeecg/JVxeTable'
|
|
export default {
|
name: 'RepairOrderApprovalModal',
|
components: { LxSearchEquipmentSelect },
|
props: {
|
selectShenpiData: {
|
type: Object,
|
required: true
|
}
|
},
|
data() {
|
return {
|
title: '',
|
disableSubmit: false,
|
confirmLoading: false,
|
spinning: false,
|
model: {},
|
imageSrc: null,
|
activeTabKey: '1',
|
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 }
|
},
|
validatorRules: { confirmResult: [{ required: true, message: '请选择确认类型' }] },
|
detail: {
|
dataSource: [],
|
columns: [
|
{
|
title: 'ID',
|
key: 'id',
|
type: JVXETypes.hidden
|
},
|
{
|
title: '维修人',
|
key: 'repairUser',
|
align: 'center',
|
type: JVXETypes.normal
|
},
|
{
|
title: '是否是主维修人',
|
key: 'repairPrimary_dictText',
|
align: 'center',
|
type: JVXETypes.normal
|
},
|
{
|
title: '维修时长',
|
key: 'repairDuration',
|
align: 'center',
|
type: JVXETypes.normal
|
},
|
{
|
title: '备注',
|
key: 'remark',
|
align: 'center',
|
type: JVXETypes.normal
|
}
|
],
|
toolbarConfig: {
|
// prefix 前缀；suffix 后缀
|
slot: ['prefix', 'suffix'],
|
// add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
|
btn: ['add', 'remove', 'clearSelection']
|
}
|
},
|
visible: false,
|
// 表头
|
url: {
|
queryById: '/eam/eamRepairOrder/queryByReportId',
|
diagramView: '/assign/flow/diagramView',
|
approve: '/eam/eamRepairOrder/perform',
|
detail: '/eam/eamRepairPerson/list'
|
}
|
}
|
},
|
computed: {
|
operatorConfirm() {
|
return ['WAIT_CONFIRM', 'COMPLETE'].includes(this.model.repairStatus)
|
}
|
},
|
methods: {
|
/**
|
* 主页面点击执行审批时触发
|
* @param record 主页面列表行记录
|
*/
|
async handleDetail(record) {
|
this.spinning = true
|
this.activeTabKey = '1'
|
this.model = {}
|
this.getBasicInformationByApi(record)
|
this.getFlowChartImageByApi(record)
|
this.loadDetail(record.dataId)
|
},
|
|
/**
|
* 主页面点击详情时触发
|
* @param record 主页面列表行记录
|
*/
|
recordDetail(record) {
|
this.spinning = true
|
this.activeTabKey = '1'
|
this.model = Object.assign({}, record)
|
this.loadDetail(record.id)
|
},
|
|
/**
|
* 获取基础信息
|
* @param record 主页面列表行记录
|
*/
|
getBasicInformationByApi(record) {
|
const that = this
|
getAction(this.url.queryById, { id: record.dataId })
|
.then(res => {
|
if (res.success) {
|
that.model = Object.assign({}, res.result[0])
|
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
|
})
|
}
|
})
|
},
|
|
/**
|
* 获取流程图
|
* @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
|
})
|
})
|
},
|
|
/**
|
* 获取维修人明细
|
* @param repairId
|
*/
|
loadDetail(repairId) {
|
getAction(this.url.detail, { repairId })
|
.then(res => {
|
if (res.success) this.detail.dataSource = res.result
|
})
|
.finally(() => {
|
this.spinning = false
|
})
|
},
|
|
|
submitForm() {
|
const that = this
|
// 触发表单验证
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
that.confirmLoading = that.spinning = true
|
httpAction(this.url.approve, that.model, 'post')
|
.then((res) => {
|
if (res.success) {
|
that.$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
that.handCancel()
|
that.$emit('modalFormOk')
|
} else {
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.finally(() => {
|
that.confirmLoading = that.spinning = false
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
|
handCancel() {
|
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;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
