初始版本提交
This commit is contained in:
yaoyn
307
src/views/workflow/task/ProcessMonitor.vue
Normal file
307
src/views/workflow/task/ProcessMonitor.vue
Normal file
@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
||||
<div
|
||||
class="w-1/4 xl:w-1/5 overflow-hidden bg-white h-full"
|
||||
:style="{ 'border-right': '1px solid #e5e7eb' }"
|
||||
>
|
||||
<BasicTree
|
||||
:title="t('流程监控状态')"
|
||||
:clickRowToExpand="true"
|
||||
:treeData="treeData"
|
||||
:fieldNames="{ key: 'id', title: 'name' }"
|
||||
@select="handleSelect"
|
||||
:selectedKeys="selectedKeys"
|
||||
/>
|
||||
</div>
|
||||
<BasicTable
|
||||
@register="registerTable"
|
||||
class="w-3/4 xl:w-4/5"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<template #toolbar>
|
||||
<LookProcess :taskId="taskId" :processId="processId" @close="reload"
|
||||
><a-button v-auth="'monitor:view'">{{ t('查看') }}</a-button></LookProcess
|
||||
>
|
||||
<a-button v-auth="'monitor:appointedAuditor'" @click="approveUser" v-if="data.type === 0">{{
|
||||
t('指派审核人')
|
||||
}}</a-button>
|
||||
<a-button v-auth="'monitor:pending'" @click="setSuspended" v-if="data.type === 0">{{
|
||||
suspendedTitle
|
||||
}}</a-button>
|
||||
|
||||
<a-button v-auth="'monitor:delete'" @click="deleteFlow" v-if="data.type === 0">{{
|
||||
t('删除流程')
|
||||
}}</a-button>
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<Tag color="warning" v-if="record.status == ProcessMonitorStatus.SUSPENDED">{{
|
||||
t('挂起')
|
||||
}}</Tag>
|
||||
<Tag color="processing" v-if="record.status == ProcessMonitorStatus.ACTIVE">{{
|
||||
t('活动中')
|
||||
}}</Tag>
|
||||
<Tag color="success" v-if="record.status == ProcessMonitorStatus.COMPLETED">{{
|
||||
t('完成')
|
||||
}}</Tag>
|
||||
<Tag color="error" v-if="record.status == ProcessMonitorStatus.INTERNALLY_TERMINATED">{{
|
||||
t('内部终止')
|
||||
}}</Tag>
|
||||
</template>
|
||||
<template #currentProgress="{ record }">
|
||||
<a-progress v-if="record.currentProgress" :percent="record.currentProgress" size="small" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
|
||||
<!-- 指派审核人 -->
|
||||
<ApproveProcessMonitorUser
|
||||
v-if="data.approvedUserVisible"
|
||||
:taskId="taskId"
|
||||
:schemaId="schemaId"
|
||||
:title="approvedUserTitle"
|
||||
@close="
|
||||
() => {
|
||||
data.approvedUserVisible = false;
|
||||
reload();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, reactive, ref } from 'vue';
|
||||
import { BasicTree } from '/@/components/Tree';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import LookProcess from './components/LookProcess.vue';
|
||||
import ApproveProcessMonitorUser from './components/flow/ApproveProcessMonitorUser.vue';
|
||||
import { deleteWorkflow, getProcessMonitorPage, postSetSuspended } from '/@/api/workflow/monitor';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { notification, Tag } from 'ant-design-vue';
|
||||
import { ProcessMonitorStatus } from '/@/enums/workflowEnum';
|
||||
import { BasicTable, useTable, FormSchema, BasicColumn } from '/@/components/Table';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
const configColumns: BasicColumn[] = [
|
||||
{
|
||||
title: t('流水号'),
|
||||
dataIndex: 'serialNumber',
|
||||
sorter: {
|
||||
multiple: 1,
|
||||
},
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('任务'),
|
||||
dataIndex: 'currentTaskName',
|
||||
width: 120,
|
||||
sorter: {
|
||||
multiple: 2,
|
||||
},
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('标题'),
|
||||
dataIndex: 'schemaName',
|
||||
width: 120,
|
||||
sorter: {
|
||||
multiple: 3,
|
||||
},
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('状态'),
|
||||
dataIndex: 'status',
|
||||
sorter: {
|
||||
multiple: 4,
|
||||
},
|
||||
align: 'left',
|
||||
slots: { customRender: 'status' },
|
||||
},
|
||||
// {
|
||||
// title: '状态详情',
|
||||
// dataIndex: 'statusMessage',
|
||||
// },
|
||||
{
|
||||
title: t('当前进度'),
|
||||
dataIndex: 'currentProgress',
|
||||
align: 'left',
|
||||
slots: { customRender: 'currentProgress' },
|
||||
},
|
||||
{
|
||||
title: t('发起人'),
|
||||
dataIndex: 'originator',
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('时间'),
|
||||
width: 160,
|
||||
dataIndex: 'createDate',
|
||||
align: 'left',
|
||||
},
|
||||
];
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'keyword',
|
||||
label: t('关键字'),
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
componentProps: {
|
||||
placeholder: t('请输入关键字'),
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'searchDate',
|
||||
label: t('时间范围'),
|
||||
component: 'RangePicker',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
];
|
||||
|
||||
const treeData = [
|
||||
{
|
||||
key: 0,
|
||||
id: 0,
|
||||
name: t('未完成'),
|
||||
icon: 'ant-design:profile-outlined',
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
id: 1,
|
||||
name: t('已完成'),
|
||||
icon: 'ant-design:profile-outlined',
|
||||
},
|
||||
];
|
||||
const selectedKeys = ref([0]);
|
||||
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
|
||||
title: t('流程监控列表'),
|
||||
api: getProcessMonitorPage,
|
||||
rowKey: 'processId',
|
||||
columns: configColumns,
|
||||
formConfig: {
|
||||
rowProps: {
|
||||
gutter: 16,
|
||||
},
|
||||
schemas: searchFormSchema,
|
||||
fieldMapToTime: [['searchDate', ['startTime', 'endTime'], 'YYYY-MM-DD', true]],
|
||||
showResetButton: false,
|
||||
},
|
||||
rowSelection: {
|
||||
type: 'radio',
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
//发送请求默认新增 左边树结构所选机构id
|
||||
return { ...params, type: data.type };
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
pagination: {
|
||||
pageSize: 18,
|
||||
},
|
||||
tableSetting: {
|
||||
size: false,
|
||||
setting: false,
|
||||
},
|
||||
});
|
||||
let data: {
|
||||
type: number;
|
||||
approvedUserVisible: boolean;
|
||||
} = reactive({
|
||||
type: 0,
|
||||
approvedUserVisible: false,
|
||||
});
|
||||
const processId = ref('');
|
||||
const taskId = ref('');
|
||||
const schemaId = ref('');
|
||||
const approvedUserTitle = ref(t('任务'));
|
||||
const suspendedTitle = ref(t('挂起'));
|
||||
function selectionChange({ keys, rows }) {
|
||||
if (keys?.length > 0) {
|
||||
processId.value = rows[0].processId;
|
||||
taskId.value = rows[0].taskId;
|
||||
schemaId.value = rows[0].schemaId;
|
||||
approvedUserTitle.value = t('任务-') + rows[0].schemaName + '-' + rows[0].currentTaskName;
|
||||
suspendedTitle.value =
|
||||
rows[0].status && rows[0].status === ProcessMonitorStatus.SUSPENDED ? t('恢复') : t('挂起');
|
||||
} else {
|
||||
processId.value = '';
|
||||
taskId.value = '';
|
||||
schemaId.value = '';
|
||||
approvedUserTitle.value = t('任务');
|
||||
suspendedTitle.value = t('挂起');
|
||||
}
|
||||
}
|
||||
|
||||
async function setSuspended() {
|
||||
let row = checkSelectSingleRow();
|
||||
if (row) {
|
||||
let res = await postSetSuspended(row.processId);
|
||||
if (res) {
|
||||
reload();
|
||||
notification.open({
|
||||
type: 'success',
|
||||
message: suspendedTitle.value,
|
||||
description: t('成功'),
|
||||
});
|
||||
}
|
||||
}
|
||||
clearSelectedRowKeys();
|
||||
}
|
||||
function deleteFlow() {
|
||||
let row = checkSelectSingleRow('请先选择一行后再进行操作。');
|
||||
if (row) {
|
||||
Modal.confirm({
|
||||
title: t('提示'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: t('请确认是否删除该流程？删除后无法进行恢复。'),
|
||||
okText: t('确定'),
|
||||
okType: 'danger',
|
||||
cancelText: t('取消'),
|
||||
onOk() {
|
||||
if (row.processId) {
|
||||
deleteWorkflow(row.processId).then((res) => {
|
||||
if (res) {
|
||||
reload();
|
||||
notification.open({
|
||||
type: 'success',
|
||||
message: t('删除成功'),
|
||||
description: t('成功'),
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
onCancel() {},
|
||||
});
|
||||
}
|
||||
clearSelectedRowKeys();
|
||||
}
|
||||
function handleSelect(_, e) {
|
||||
clearSelectedRowKeys();
|
||||
data.type = e.node.key;
|
||||
selectedKeys.value = [e.node.key];
|
||||
reload();
|
||||
}
|
||||
function approveUser() {
|
||||
let row = checkSelectSingleRow();
|
||||
if (row) {
|
||||
if (row.taskId) {
|
||||
data.approvedUserVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
function checkSelectSingleRow(tip?) {
|
||||
const selectRows: any = getSelectRows();
|
||||
if (selectRows.length > 0) {
|
||||
return selectRows[0];
|
||||
} else {
|
||||
notification.open({
|
||||
type: 'error',
|
||||
message: t('流程'),
|
||||
description: t(tip || '请选择一个流程进行'),
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user