Browse Source

chore: work todo task compose

master
wangxiang 2 years ago
parent
commit
4541d7b1e9
No known key found for this signature in database
GPG Key ID: 1BA7946AB6B232E4
  1. 4
      src/enums/workflowEnum.ts
  2. 2
      src/views/workflow/extension/form/helper/WorkflowFormDesign.vue
  3. 2
      src/views/workflow/model/helper/WorkflowModelDesign.vue
  4. 3
      src/views/workflow/process/index.vue
  5. 118
      src/views/workflow/task/HistoryTask.vue
  6. 4
      src/views/workflow/task/TaskForm.vue
  7. 2
      src/views/workflow/task/WorkflowChartModel.vue
  8. 119
      src/views/workflow/task/index.vue
  9. 88
      src/views/workflow/task/popups/WorkflowChartModal.vue
  10. 58
      src/views/workflow/task/task.data.ts

4
src/enums/workflowEnum.ts

@ -6,5 +6,7 @@
*/ */
export enum PageEnum { export enum PageEnum {
TODO_TASK_PAGE = '/workflow/task/index', TODO_TASK_PAGE = '/workflow/transaction/todo',
TASK_FORM_PAGE = '/workflow/task/taskForm',
TASK_FORM_VIEW_PAGE = '/workflow/task/taskViewForm'
} }

2
src/views/workflow/extension/form/helper/WorkflowFormDesign.vue

@ -90,7 +90,7 @@
}); });
function handleVisibleChange(visible: boolean) { function handleVisibleChange(visible: boolean) {
!visible && state.formDesignApp.unmount(); !visible && state.formDesignApp?.unmount();
} }
/** 处理弹出框提交 */ /** 处理弹出框提交 */

2
src/views/workflow/model/helper/WorkflowModelDesign.vue

@ -77,7 +77,7 @@
}, 100); }, 100);
}); });
function handleVisibleChange(visible: boolean) { function handleVisibleChange(visible: boolean) {
!visible && state.workflowDesignApp.unmount(); !visible && state.workflowDesignApp?.unmount();
} }
</script> </script>
<style lang="less"> <style lang="less">

3
src/views/workflow/process/index.vue

@ -52,6 +52,7 @@
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '/@/store/modules/user';
import { formatToDateTime } from '/@/utils/dateUtil'; import { formatToDateTime } from '/@/utils/dateUtil';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { PageEnum } from '/@/enums/workflowEnum';
/** 类型规范统一声明定义区域 */ /** 类型规范统一声明定义区域 */
interface TableState { interface TableState {
@ -108,7 +109,7 @@
const formTitle = `${userStore.getUserInfo.nickName}${formatToDateTime()} 发起了 [${record?.name}]`; const formTitle = `${userStore.getUserInfo.nickName}${formatToDateTime()} 发起了 [${record?.name}]`;
const data = await getTaskDefinition( { processDefId: record?.id }); const data = await getTaskDefinition( { processDefId: record?.id });
await push({ await push({
path: '/workflow/task/taskForm', path: PageEnum.TASK_FORM_PAGE,
query: { query: {
_meta: 'y', _meta: 'y',
processDefId: record?.id, processDefId: record?.id,

118
src/views/workflow/task/HistoryTask.vue

@ -0,0 +1,118 @@
<template>
<div>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction :actions="[
{
label: '办理',
icon: 'fa6-regular:pen-to-square',
onClick: handleTodo.bind(null, record)
},
{
label: '进度',
icon: 'fa6-solid:bars-progress',
onClick: handleTrace.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
<WorkflowChartModal @register="registerModal"/>
</div>
</template>
<script lang="ts">
/**
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用vben-动态表格表单封装组件编写,不采用 setup 写法
* Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
* author wangxiang4
*/
import { defineComponent } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import { columns, searchFormSchema } from './task.data';
import { listTodoTask, getTaskDefinition } from '/@/api/platform/workflow/controller/task';
import { PageEnum } from '/@/enums/workflowEnum';
import { useRouter } from 'vue-router';
import WorkflowChartModal from './popups/WorkflowChartModal.vue';
export default defineComponent({
name: 'WorkflowTodoTask',
components: {
WorkflowChartModal,
BasicTable,
TableAction,
},
setup() {
const [registerModal, { openModal }] = useModal();
const { push } = useRouter();
const [registerTable] = useTable({
api: listTodoTask,
rowKey: 'id',
columns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
},
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 240,
title: '操作',
dataIndex: 'action',
fixed: false
},
});
async function handleTodo(record: Recordable) {
const { taskInfo, vars } = record;
const task = await getTaskDefinition({
taskId: taskInfo.id,
taskName: taskInfo.name,
taskDefKey: taskInfo.taskDefKey,
processInsId: taskInfo.processInsId,
processDefId: taskInfo.processDefId,
processDefKey: taskInfo.processDefKey
});
await push({
path: PageEnum.TASK_FORM_PAGE,
query: {
_meta: 'y',
title: `审批【${taskInfo.name || ''}`,
formTitle: `${vars.title}`,
formType: task.formType,
formKey: task.formKey,
formReadOnly: String(task.formReadOnly),
processInsId: task.processInsId,
processDefId: task.processDefId,
processDefKey: task.processDefKey,
taskId: task.taskId,
taskDefKey: task.taskDefKey,
businessId: task.businessId
}
});
}
function handleTrace(record: Recordable) {
openModal(true, { record: record.taskInfo });
}
return {
handleTodo,
handleTrace,
registerTable,
registerModal,
};
}
});
</script>

4
src/views/workflow/task/TaskForm.vue

@ -26,7 +26,7 @@
:businessId="state.businessId" :businessId="state.businessId"
/> />
</ATabPane> </ATabPane>
<ATabPane key="processInfo"> <ATabPane v-if="state.processInsId" key="processInfo">
<template #tab> <template #tab>
<span> <span>
<Icon icon="fa6-solid:money-bill-wheat"/>流程信息 <Icon icon="fa6-solid:money-bill-wheat"/>流程信息
@ -42,7 +42,7 @@
</template> </template>
<WorkflowChartModel ref="workflowChart"/> <WorkflowChartModel ref="workflowChart"/>
</ATabPane> </ATabPane>
<ATabPane key="flowRecord"> <ATabPane v-if="state.processInsId" key="flowRecord">
<template #tab> <template #tab>
<span> <span>
<Icon icon="fa6-solid:bars-progress"/>流转记录 <Icon icon="fa6-solid:bars-progress"/>流转记录

2
src/views/workflow/task/WorkflowChartModel.vue

@ -34,7 +34,7 @@
state.loading = true; state.loading = true;
// xml // xml
try { try {
if (this.processInsId) { if (processInsId) {
state.bpmnData = await getProcessInsFlowChart(processInsId); state.bpmnData = await getProcessInsFlowChart(processInsId);
} else { } else {
const bpmnXml = await getProcessDefFlowChart(processDefId); const bpmnXml = await getProcessDefFlowChart(processDefId);

119
src/views/workflow/task/index.vue

@ -0,0 +1,119 @@
<template>
<div>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '办理',
icon: 'fa6-regular:pen-to-square',
onClick: handleTodo.bind(null, record)
},
{
label: '进度',
icon: 'fa6-solid:bars-progress',
onClick: handleTrace.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
<WorkflowChartModal @register="registerModal"/>
</div>
</template>
<script lang="ts">
/**
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
* 采用vben-动态表格表单封装组件编写,不采用 setup 写法
* Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
* author wangxiang4
*/
import { defineComponent } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import { columns, searchFormSchema } from './task.data';
import { listTodoTask, getTaskDefinition } from '/@/api/platform/workflow/controller/task';
import { PageEnum } from '/@/enums/workflowEnum';
import { useRouter } from 'vue-router';
import WorkflowChartModal from './popups/WorkflowChartModal.vue';
export default defineComponent({
name: 'WorkflowTodoTask',
components: {
WorkflowChartModal,
BasicTable,
TableAction,
},
setup() {
const [registerModal, { openModal }] = useModal();
const { push } = useRouter();
const [registerTable] = useTable({
api: listTodoTask,
rowKey: 'id',
columns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
showAdvancedButton: true,
autoAdvancedLine: 3,
fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
},
useSearchForm: true,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 240,
title: '操作',
dataIndex: 'action',
fixed: false
},
});
async function handleTodo(record: Recordable) {
const { taskInfo, vars } = record;
const task = await getTaskDefinition({
taskId: taskInfo.id,
taskName: taskInfo.name,
taskDefKey: taskInfo.taskDefKey,
processInsId: taskInfo.processInsId,
processDefId: taskInfo.processDefId,
processDefKey: taskInfo.processDefKey
});
await push({
path: PageEnum.TASK_FORM_PAGE,
query: {
_meta: 'y',
title: `审批【${taskInfo.name || ''}`,
formTitle: `${vars.title}`,
formType: task.formType,
formKey: task.formKey,
formReadOnly: String(task.formReadOnly),
processInsId: task.processInsId,
processDefId: task.processDefId,
processDefKey: task.processDefKey,
taskId: task.taskId,
taskDefKey: task.taskDefKey,
businessId: task.businessId
}
});
}
function handleTrace(record: Recordable) {
openModal(true, { record: record.taskInfo });
}
return {
handleTodo,
handleTrace,
registerTable,
registerModal,
};
}
});
</script>

88
src/views/workflow/task/popups/WorkflowChartModal.vue

@ -0,0 +1,88 @@
<template>
<BasicModal
v-bind="$attrs"
defaultFullscreen
:canFullscreen="false"
:showCancelBtn="false"
:showOkBtn="false"
@register="registerModal"
@visible-change="handleVisibleChange"
>
<div id="workflowChart"/>
</BasicModal>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { loadMicroApp, MicroApp } from 'qiankun';
import { getSubDefineProps } from '/@/qiankun/state';
import { GlStateEnum, WORKFLOW_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
import { useMicroAppStore } from '/@/store/modules/microApp';
import { apps } from '/@/qiankun/apps';
import { getFlowChart as getProcessDefFlowChart } from '/@/api/platform/workflow/controller/process';
import { getFlowChart as getProcessInsFlowChart } from '/@/api/platform/workflow/controller/task';
import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
interface WindowState {
workflowDesignApp: MicroApp;
bpmnData: Recordable;
}
const state = reactive<WindowState>({
workflowDesignApp: undefined!,
bpmnData: {},
});
const workflowDesignProps = {
style: { 'min-height': '100vh' },
};
const emit = defineEmits(['register']);
const microAppStore = useMicroAppStore();
const { createMessage } = useMessage();
const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
const props: Partial<ModalProps> = { title: '查看进度' };
const { processInsId, processDefId } = data.record || {};
if (processInsId || processDefId) {
changeLoading();
try {
if (processInsId) {
state.bpmnData = await getProcessInsFlowChart(processInsId);
} else {
const bpmnXml = await getProcessDefFlowChart(processDefId);
state.bpmnData = { bpmnXml };
}
state.workflowDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'workflow-design'), {
container: '#workflowChart',
props: {
...getSubDefineProps(),
mountApp: WORKFLOW_DESIGN_APP_COMPONENTS.CHART,
[GlStateEnum.WORKFLOW_DESIGN_APP_PROPS_KEY]: workflowDesignProps
}
}), { sandbox: { experimentalStyleIsolation: true }});
state.workflowDesignApp.mountPromise.then(() => {
const workflowChartApp: Recordable = microAppStore.getWorkflowDesignApp(WORKFLOW_DESIGN_APP_COMPONENTS.CHART),
workflowRef: Recordable = workflowChartApp.getRef().$refs['workflow-chart'];
workflowRef.setHighlightImportDiagram(state.bpmnData);
changeLoading(false);
});
} catch(e: any) {
createMessage.error(e);
changeLoading(false);
}
} else createMessage.error('无法打开流程图,没有关联流程图ID!');
setModalProps(props);
});
function handleVisibleChange(visible: boolean) {
!visible && state.workflowDesignApp?.unmount();
}
</script>
<style lang="less">
.ant-modal {
.ant-modal-body > .scrollbar {
padding: 0;
}
}
</style>

58
src/views/workflow/task/task.data.ts

@ -0,0 +1,58 @@
import { BasicColumn, FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
export const columns: BasicColumn[] = [
{
title: '流程标题',
dataIndex: ['vars', 'title'],
width: 200,
},
{
title: '流程名称',
dataIndex: 'processDefName',
width: 200,
},
{
title: '当前环节',
dataIndex: ['taskInfo', 'name'],
width: 150,
customRender: ({ record }) => {
const taskName = record.taskInfo?.name;
return h(Tag, { color: 'processing' }, () => taskName);
}
},
{
title: '流程发起人',
dataIndex: ['vars', 'userName'],
width: 150
},
{
title: '创建时间',
dataIndex: ['taskInfo', 'createTime'],
width: 200
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'title',
label: '流程标题',
component: 'Input',
componentProps: {
placeholder: '请输入流程标题',
},
colProps: { span: 8 }
},
{
field: 'dateRange',
label: '创建时间',
component: 'RangePicker',
componentProps: {
style: { width:'100%' },
valueFormat: 'YYYY-MM-DD',
placeholder: ['开始日期','结束日期']
},
colProps: { span: 8 }
}
];
Loading…
Cancel
Save