<!--
|
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>{{ selectSparePartApplyData.description }}</b>
|
<br>
|
<br>
|
<a-tag color="blue">
|
处理人 {{ selectSparePartApplyData.assignee_dictText }}
|
</a-tag>
|
<a-tag color="blue">
|
创建时间 {{ selectSparePartApplyData.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='2'
|
tab='申请明细信息'
|
>
|
<a-row>
|
<a-col :span='span'>
|
<a-form-model-item
|
label='备件请购单编号'
|
:labelCol='labelCol'
|
:wrapperCol='wrapperCol'
|
prop='requisitionCode'
|
>
|
<a-input
|
:disabled='coldisabled'
|
v-model='tableRowRecord.requisitionCode'
|
></a-input>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
<a-table
|
ref="table"
|
size="middle"
|
bordered
|
rowKey="id"
|
:scroll="{x:'max-content'}"
|
:columns="columns"
|
:dataSource="dataSource"
|
:pagination="ipagination"
|
:loading="loading"
|
:rowSelection="null"
|
>
|
</a-table>
|
</a-tab-pane>
|
<a-tab-pane
|
key='3'
|
tab='流程节点'
|
>
|
<a-timeline>
|
<a-timeline-item
|
v-for="(item,index) in hitaskDataSource"
|
:key="index"
|
>
|
<div>
|
<h3 style="font-weight: bold;">{{item.taskName}}</h3>
|
<div>处理人：{{item.assignee_dictText}}</div>
|
<div v-if="index !==0">处理时长：{{item.duration}}</div>
|
<div v-if="item.name !== '提交申请'">处理类型：{{item.sequenceFlowName}}</div>
|
<div v-if="item.description">处理意见：{{item.description}}</div>
|
</div>
|
</a-timeline-item>
|
</a-timeline>
|
</a-tab-pane>
|
</a-tabs>
|
</a-spin>
|
</a-form>
|
</div>
|
<div v-if="auditVisible">
|
<hr class="shallow-hr">
|
<br>
|
<b>审批详情</b>
|
<br>
|
<a-form-model
|
ref="form"
|
:model="approveData"
|
:rules="validatorRules"
|
slot="detail"
|
>
|
<a-row>
|
<a-col ::span='span'>
|
<a-form-model-item
|
label="申请人"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
prop='reportUser'
|
>
|
<a-input
|
:disabled='coldisabled'
|
v-model='tableRowRecord.reportUser'
|
></a-input>
|
</a-form-model-item>
|
</a-col>
|
<a-col ::span='span'>
|
<a-form-model-item
|
label="申请时间"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
prop="createTime"
|
>
|
<a-input
|
:disabled='coldisabled'
|
v-model='tableRowRecord.createTime'
|
></a-input>
|
</a-form-model-item>
|
</a-col>
|
<a-col
|
:span="24"
|
class="btxx"
|
>
|
<a-form-item
|
label="审批状态"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
>
|
<a-select
|
v-model='assignFileStream.status'
|
placeholder="请选择审批结果"
|
>
|
<a-select-option value="1">通过</a-select-option>
|
<a-select-option value="2">驳回</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col
|
:span="24"
|
class="btxx"
|
>
|
<a-form-model-item
|
label="审批意见"
|
:labelCol="labelCol"
|
:wrapperCol="wrapperCol"
|
>
|
<a-textarea
|
v-model="assignFileStream.approvalOpinion"
|
rows="4"
|
placeholder="请输入审批意见"
|
/>
|
</a-form-model-item>
|
</a-col>
|
</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'
|
export default {
|
name: 'FlowShenPi',
|
mixins: [mixinDevice],
|
props: {
|
selectSparePartApplyData: {
|
type: Object,
|
required: true
|
}
|
},
|
|
data() {
|
return {
|
form: this.$form.createForm(this),
|
span: 12,
|
span1: 8,
|
coldisabled: true,
|
spinning: false,
|
tableRowRecord: {},
|
assignFileStream: {},
|
tableDataSource: [],
|
usageDataSource: [],
|
hitaskDataSource: [],
|
dataSource: [],
|
bomForm: {},
|
imageSrc: null,
|
drawerVisible: true,
|
auditVisible: true,
|
loading: false,
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 30 },
|
sm: { span: 16 }
|
},
|
/* 分页参数 */
|
ipagination: {
|
current: 1,
|
pageSize: 5,
|
pageSizeOptions: ['5', '10', '50'],
|
showTotal: (total, range) => {
|
return range[0] + "-" + range[1] + " 共" + total + "条"
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0
|
},
|
columns: [
|
{
|
title: '#',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 60,
|
align: "center",
|
customRender: function (t, r, index) {
|
return parseInt(index) + 1;
|
}
|
},
|
{
|
title: '备件分类',
|
align: "left",
|
dataIndex: 'partCategory'
|
},
|
{
|
title: '备件编码',
|
align: "left",
|
dataIndex: 'partCode'
|
},
|
{
|
title: '备件名称',
|
align: "center",
|
dataIndex: 'partName'
|
},
|
{
|
title: '备件规格',
|
align: "center",
|
dataIndex: 'partModel'
|
},
|
{
|
title: '型号',
|
align: "center",
|
dataIndex: 'partSpecification'
|
},
|
|
{
|
title: '申请数量',
|
align: "center",
|
dataIndex: 'quantity'
|
},
|
],
|
validatorRules: {
|
status: {
|
rules: [
|
{ required: true, message: '请选择审批状态!' },
|
]
|
},
|
},
|
approveData: {},
|
flowData: {},
|
title: '审批页面',
|
width: 1200,
|
visible: false,
|
// 表头
|
url: {
|
getSparePartRequisitionList: '/eam/eamSparePartRequisition/getSparePartRequisitionList',
|
diagramView: '/assign/flow/diagramView',
|
queryHisTaskList: '/assign/flow/queryHisTaskList',
|
approve: "/eam/eamSparePartRequisition/approval",
|
},
|
dictOptions: {},
|
superFieldList: [],
|
workflowSource: []
|
}
|
},
|
created() {
|
},
|
computed: {},
|
methods: {
|
callback() {
|
},
|
handCancel() {
|
this.assignFileStream = {}
|
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()
|
},
|
submitForm() {
|
const that = this;
|
if (!that.assignFileStream.status == null || that.assignFileStream.status === undefined) {
|
this.$message.warning('请选择审批状态！')
|
return false;
|
}
|
if (!that.assignFileStream.approvalOpinion == null || that.assignFileStream.approvalOpinion === undefined) {
|
this.$message.warning('请输入审批意见！')
|
return false;
|
}
|
// 触发表单验证
|
this.form.validateFields((err, values) => {
|
if (!err) {
|
that.confirmLoading = true;
|
let url = this.url.approve
|
let method = 'post';
|
let EamSparePartRequisitionRequest = {}
|
EamSparePartRequisitionRequest.id = this.flowData.dataId
|
EamSparePartRequisitionRequest.status = that.assignFileStream.status;
|
EamSparePartRequisitionRequest.approvalOpinion = that.assignFileStream.approvalOpinion;
|
EamSparePartRequisitionRequest.comment = that.assignFileStream.approvalOpinion;
|
EamSparePartRequisitionRequest.dataId = this.selectSparePartApplyData.dataId
|
EamSparePartRequisitionRequest.taskId = this.selectSparePartApplyData.id
|
EamSparePartRequisitionRequest.userId = this.selectSparePartApplyData.assignee
|
EamSparePartRequisitionRequest.instanceId = this.selectSparePartApplyData.procInstId
|
EamSparePartRequisitionRequest.targetKey = this.selectSparePartApplyData.taskDefKey
|
EamSparePartRequisitionRequest.values = this.selectSparePartApplyData.variables
|
EamSparePartRequisitionRequest.assignee = this.selectSparePartApplyData.assignee
|
httpAction(url, EamSparePartRequisitionRequest, method).then((res) => {
|
if (res.success) {
|
that.$message.success(res.message);
|
this.handCancel()
|
//刷新表格
|
that.$emit('searchReset')
|
} else {
|
that.$message.warning(res.message);
|
}
|
}).finally(() => {
|
that.confirmLoading = false;
|
})
|
}
|
|
})
|
},
|
|
|
getAllApproveData(item) {
|
this.tableRowRecord = {}
|
this.assignFileStream = {}
|
this.visible = true
|
this.loading = true
|
console.log('selectSparePartApplyData----->', this.selectSparePartApplyData)
|
this.flowData = item
|
getAction(this.url.queryHisTaskList, { procInstId: item.procInstId }).then(res => {
|
if (res.success) {
|
this.hitaskDataSource = res.result
|
}
|
})
|
getAction(this.url.getSparePartRequisitionList, { id: item.dataId }).then(res => {
|
if (res.success) {
|
this.tableRowRecord.requisitionCode = res.result.records[0].requisitionCode
|
this.tableRowRecord.reportUser = res.result.records[0].reportUser
|
this.tableRowRecord.createTime = res.result.records[0].createTime
|
this.dataSource = res.result.records[0].sparePartRequisitionDetailList
|
if (res.result.total) {
|
this.ipagination.total = res.result.total
|
} else {
|
this.ipagination.total = 0
|
}
|
} else {
|
this.$message.warning(res.message)
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
}
|
}
|
}
|
</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>
|
