103 lines
3.6 KiB
Vue
103 lines
3.6 KiB
Vue
<template>
|
||
<BasicModal
|
||
v-bind="$attrs"
|
||
@register="registerModal"
|
||
title="审批实例节点"
|
||
width="960px"
|
||
:showOkBtn="false"
|
||
cancelText="关闭"
|
||
destroyOnClose
|
||
>
|
||
<a-spin :spinning="loading">
|
||
<a-descriptions v-if="forecastInfo.processInstanceId" :column="2" size="small" bordered class="ding-forecast-head">
|
||
<a-descriptions-item label="MES审批流">{{ forecastInfo.mesFlowName || '-' }}</a-descriptions-item>
|
||
<a-descriptions-item label="节点来源">{{ forecastInfo.nodeSource || '-' }}</a-descriptions-item>
|
||
<a-descriptions-item label="钉钉模板" :span="2">{{ forecastInfo.templateName || '-' }}</a-descriptions-item>
|
||
<a-descriptions-item label="processCode" :span="2">{{ forecastInfo.processCode }}</a-descriptions-item>
|
||
<a-descriptions-item label="审批实例ID" :span="2">{{ forecastInfo.processInstanceId || '-' }}</a-descriptions-item>
|
||
</a-descriptions>
|
||
|
||
<a-table
|
||
:columns="columns"
|
||
:data-source="nodes"
|
||
:pagination="false"
|
||
size="small"
|
||
bordered
|
||
row-key="stepNo"
|
||
:locale="{ emptyText: '暂无审批节点' }"
|
||
/>
|
||
</a-spin>
|
||
</BasicModal>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
import { getDingProcessForecast } from '../MesXslApprovalTrace.api';
|
||
|
||
defineOptions({ name: 'DingApprovalForecastModal' });
|
||
|
||
const { createMessage } = useMessage();
|
||
|
||
const loading = ref(false);
|
||
const forecastInfo = ref<Recordable>({});
|
||
const nodes = ref<Recordable[]>([]);
|
||
|
||
const columns = [
|
||
{ title: '序号', dataIndex: 'stepNo', width: 70, align: 'center' },
|
||
{ title: 'activityId', dataIndex: 'activityId', width: 120, ellipsis: true },
|
||
{ title: 'MES节点', dataIndex: 'mesNodeName', width: 120, ellipsis: true },
|
||
{ title: '钉钉节点', dataIndex: 'activityName', width: 120, ellipsis: true },
|
||
{ title: '节点状态', dataIndex: 'nodeStatusText', width: 90, align: 'center' },
|
||
{ title: '审批方式', dataIndex: 'approvalMethodText', width: 100, align: 'center' },
|
||
{
|
||
title: '审批人',
|
||
dataIndex: 'actionerNames',
|
||
customRender: ({ record }) => formatActioners(record),
|
||
},
|
||
];
|
||
|
||
const [registerModal, { setModalProps }] = useModalInner(async (data) => {
|
||
forecastInfo.value = {};
|
||
nodes.value = [];
|
||
const record = data?.record || {};
|
||
const bizTable = record.bizTable || data?.bizTable;
|
||
const bizDataId = record.bizDataId;
|
||
const processInstanceId = record.externalInstanceId;
|
||
if (!processInstanceId && (!bizTable || !bizDataId)) {
|
||
createMessage.warning('缺少单据ID或钉钉审批流ID，无法获取审批节点');
|
||
return;
|
||
}
|
||
try {
|
||
loading.value = true;
|
||
setModalProps({ confirmLoading: false });
|
||
const res = await getDingProcessForecast({ bizTable, bizDataId, processInstanceId });
|
||
forecastInfo.value = res || {};
|
||
nodes.value = res?.nodes || [];
|
||
} catch (e: any) {
|
||
createMessage.error(e?.message || '获取审批节点失败');
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
|
||
function formatActioners(record: Recordable) {
|
||
const names = record?.actionerNames;
|
||
if (Array.isArray(names) && names.length) {
|
||
return names.join('、');
|
||
}
|
||
const ids = record?.actionerUserIds;
|
||
if (Array.isArray(ids) && ids.length) {
|
||
return ids.join('、');
|
||
}
|
||
return '-';
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.ding-forecast-head {
|
||
margin-bottom: 12px;
|
||
}
|
||
</style>
|