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>
|