<script lang="ts" setup>
|
import type { ActionItem, BasicColumn } from '@jnpf/ui/vxeTable';
|
|
import { computed } from 'vue';
|
|
import { createImgPreview } from '@jnpf/ui';
|
import { useModal } from '@jnpf/ui/modal';
|
import { BasicVxeTable, TableAction, useVxeTable } from '@jnpf/ui/vxeTable';
|
|
import { Image } from 'ant-design-vue';
|
|
import { useFlowState } from '#/hooks/flow/useFlowStatus';
|
|
import LogErrorModal from './modal/LogErrorModal.vue';
|
|
const props = defineProps({
|
list: { type: Array, default: () => [] },
|
endTime: { type: Number, default: 0 },
|
opType: { default: '' },
|
type: { type: Number, default: 0 },
|
status: { type: Number, default: 0 },
|
});
|
const emit = defineEmits(['viewDetail']);
|
const { getFlowStateContent, getFlowStateColor } = useFlowState();
|
const columns: BasicColumn[] = [
|
{ title: '节点名称', dataIndex: 'nodeName', minWidth: 200, slots: { default: 'nodeName' } },
|
{ title: '操作人员', dataIndex: 'userName', width: 120 },
|
{ title: '接收时间', dataIndex: 'creatorTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '操作时间', dataIndex: 'handleTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '执行动作', dataIndex: 'handleType', width: 200, slots: { default: 'handleType' } },
|
{ title: '签名', dataIndex: 'signImg', width: 100, align: 'center', ellipsis: false, slots: { default: 'signImg' } },
|
{ title: '附件', dataIndex: 'fileList', width: 200, slots: { default: 'fileList' } },
|
{ title: '备注', dataIndex: 'handleOpinion', width: 200 },
|
];
|
const taskColumns: BasicColumn[] = [
|
{ title: '节点名称', dataIndex: 'nodeName', minWidth: 200, slots: { default: 'nodeName' } },
|
{ title: '进入时间', dataIndex: 'startTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '离开时间', dataIndex: 'endTime', width: 150, format: 'date|YYYY-MM-DD HH:mm:ss' },
|
{ title: '状态', dataIndex: 'status', width: 200, slots: { default: 'status' } },
|
{ title: '操作', dataIndex: 'action', width: 85, slots: { default: 'action' } },
|
];
|
const [registerTable] = useVxeTable({
|
showTableSetting: false,
|
pagination: false,
|
});
|
const [registerLogErrorModal, { openModal: openLogErrorModal }] = useModal();
|
|
const getList = computed<any[]>(() => {
|
const list = (props.list as any[]).map((o) => {
|
const operator = [5, 7, 11, 13].includes(o.handleStatus) ? `：${o.handleUserName}` : '';
|
o.statusText = getFlowStateContent(o.handleType || 0) + operator;
|
o.fileJson = o.fileList ? JSON.parse(o.fileList) : [];
|
return o;
|
});
|
return list;
|
});
|
|
function handlePreview(img) {
|
createImgPreview({ imageList: [img] });
|
}
|
function handleNodeDetail(record) {
|
const data = {
|
id: record.taskId,
|
taskId: record.id,
|
opType: 4,
|
status: record.status,
|
title: record.nodeName,
|
disabled: true,
|
};
|
emit('viewDetail', data);
|
}
|
function getTaskTableActions(record): ActionItem[] {
|
return [
|
{
|
ifShow: record.status !== 0,
|
label: '查看异常',
|
onClick: handleShowErrorModal.bind(null, record),
|
},
|
];
|
}
|
function handleShowErrorModal(item) {
|
openLogErrorModal(true, { errorTip: item.errorTip, errorData: item.errorData });
|
}
|
</script>
|
|
<template>
|
<BasicVxeTable @register="registerTable" :columns="type === 2 ? taskColumns : columns" :data-source="getList">
|
<template #nodeName="{ record }">
|
<span class="recordList-nodeName" @click="handleNodeDetail(record)" v-if="opType == '6' && type !== 2 && !record.isOutSideNode">
|
{{ record.nodeName }}
|
</span>
|
<span v-else>{{ record.nodeName }}</span>
|
</template>
|
|
<template #handleType="{ record }">
|
<div class="handle-action" :title="record.statusText">
|
<span class="spot" :style="{ background: getFlowStateColor(record.handleType || 0) }"></span>{{ record.statusText }}
|
</div>
|
</template>
|
<template #signImg="{ record }">
|
<Image :width="80" :src="record.signImg" :preview="false" v-if="record.signImg" class="cursor-pointer" @click="handlePreview(record.signImg)" />
|
</template>
|
<template #fileList="{ record }">
|
<jnpf-upload-file v-model:value="record.fileJson" type="workFlow" detailed simple />
|
</template>
|
<template #status="{ record }">
|
<div class="task-flow-status" :class="{ 'stop-status': status == 4 }">
|
<i class="icon icon-ym icon-ym-success" v-if="record.status === 0"></i>
|
<i class="icon icon-ym icon-ym-fail" v-else></i>{{ record.status === 0 ? '已完成' : '异常' }}
|
</div>
|
</template>
|
<template #action="{ record }">
|
<TableAction :actions="getTaskTableActions(record)" />
|
</template>
|
</BasicVxeTable>
|
<LogErrorModal @register="registerLogErrorModal" />
|
</template>
|
<style lang="scss">
|
.recordList-nodeName {
|
color: var(--primary-color);
|
cursor: pointer;
|
}
|
|
.handle-action {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
|
.spot {
|
display: inline-block;
|
width: 7px;
|
height: 7px;
|
margin-right: 5px;
|
margin-bottom: 2px;
|
border-radius: 50%;
|
}
|
}
|
</style>
|
