kanglai
/
kicc-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

chore: compose

master
wangxiang 2 years ago
parent
bad66cea82
commit
1ba713a2f0
No known key found for this signature in database
GPG Key ID: 1BA7946AB6B232E4
6 changed files with 693 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 151
      src/views/workflow/process/ApplyProcess.vue
  2. 165
      src/views/workflow/process/HistoryProcess.vue
  3. 168
      src/views/workflow/process/RunProcess.vue
  4. 68
      src/views/workflow/process/process.data.ts
  5. 207
      src/views/workflow/process/process.data.tsx
  6. 4
      src/views/workflow/task/TaskFormView.vue

151
src/views/workflow/process/ApplyProcess.vue
Unescape View File

@ -0,0 +1,151 @@
<template>
<div>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '历史',
icon: 'fa6-solid:clock-rotate-left',
onClick: handleProcessView.bind(null, record)
}]"
:dropDownActions="[
{
label: '撤销',
icon: 'fa-solid:toggle-on',
ifShow: record.mesCode === '_workflow_process_waiting',
onClick: handleRevoke.bind(null, record)
},
{
label: '编辑',
icon: 'fa-solid:toggle-on',
ifShow: record.mesCode === '_workflow_process_revoke' || record.mesCode === '_workflow_process_reject',
onClick: handleRestartSubmit.bind(null, record)
}]"
/>
</template>
</template>
</BasicTable>
</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 { applyColumns, searchApplyFormSchema } from './process.data';
import { getTaskDefinition } from '/@/api/platform/workflow/controller/task';
import { PageEnum } from '/@/enums/workflowEnum';
import { useRouter } from 'vue-router';
import { useMessage } from '/@/hooks/web/useMessage';
import { selfProcessInstanceList, undoProcessInstance } from '/@/api/platform/workflow/controller/process';
export default defineComponent({
name: 'ApplyProcess',
components: {
BasicTable,
TableAction,
},
setup() {
const { push } = useRouter();
const { createConfirm } = useMessage();
const [registerTable, { reload }] = useTable({
api: selfProcessInstanceList,
rowKey: 'processInsId',
columns: applyColumns,
formConfig: {
compact: true,
labelWidth: 100,
schemas: searchApplyFormSchema,
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 handleProcessView(record: Recordable) {
const { vars } = record;
const task = await getTaskDefinition({
processInsId: record.processInsId,
processDefId: record.processDefId
});
await push({
path: PageEnum.TASK_FORM_VIEW_PAGE,
query: {
_meta: 'y',
title: vars.title,
formTitle: vars.title,
formType: task.formType,
formKey: task.formKey,
processDefKey: task.processDefKey,
processInsId: task.processInsId,
processDefId: task.processDefId,
businessId: task.businessId,
}
});
}
async function handleRevoke(record: Recordable) {
createConfirm({
iconType: 'warning',
title: '警告',
content: '确定要撤销该流程吗?',
onOk: async () => {
await undoProcessInstance(record?.processInsId);
handleRefreshTable();
}
});
}
async function handleRestartSubmit(record: Recordable) {
const { vars } = record;
const task = await getTaskDefinition({
processDefId: record.processDefId
});
await push({
path: PageEnum.TASK_FORM_PAGE,
query: {
_meta: 'y',
status: 'reStart',
title: vars.title,
formTitle: vars.title,
formType: task.formType,
formKey: task.formKey,
processDefId: record.processDefId,
processDefKey: record.processDefKey,
processInsId: record.processInsId,
}
});
}
function handleRefreshTable() {
reload();
}
return {
handleProcessView,
registerTable,
handleRevoke,
handleRestartSubmit,
};
}
});
</script>

165
src/views/workflow/process/HistoryProcess.vue
Unescape View File

@ -0,0 +1,165 @@
<template>
<div>
<BasicTable @register="registerTable"
@selection-change="handleSelectionChange"
>
<template #tableTitle>
<a-button
danger
type="primary"
:disabled="state.multiple"
@click="handleDel()"
>删除</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '流程图',
icon: 'fa6-solid:bars-progress',
onClick: handleTrace.bind(null, record)
}]"
:dropDownActions="[
{
label: '历史',
icon: 'fa-solid:toggle-on',
onClick: handleProcessView.bind(null, record)
},
{
label: '删除',
icon: 'fa-solid:toggle-on',
onClick: handleDel.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, reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { historyColumns } from './process.data';
import { getTaskDefinition } from '/@/api/platform/workflow/controller/task';
import { PageEnum } from '/@/enums/workflowEnum';
import { useRouter } from 'vue-router';
import { useMessage } from '/@/hooks/web/useMessage';
import { listProcessHistory, removeHistoryProcessIns } from '/@/api/platform/workflow/controller/process';
import WorkflowChartModal from '/@/views/workflow/task/popups/WorkflowChartModal.vue';
import { useModal } from '/@/components/Modal';
interface TableState {
ids: string[];
single: boolean;
multiple: boolean;
}
export default defineComponent({
name: 'HistoryProcess',
components: {
WorkflowChartModal,
BasicTable,
TableAction,
},
setup() {
const state = reactive<TableState>({
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
});
const { push } = useRouter();
const [registerModal, { openModal }] = useModal();
const { createConfirm, createMessage } = useMessage();
const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
api: listProcessHistory,
rowKey: 'processInsId',
columns: historyColumns,
rowSelection: { type: 'checkbox' },
useSearchForm: false,
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 240,
title: '操作',
dataIndex: 'action',
fixed: false
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.ids = rowSelection;
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
async function handleProcessView(record: Recordable) {
const { vars } = record;
const task = await getTaskDefinition({
processInsId: record.processInsId,
processDefId: record.processDefId
});
await push({
path: PageEnum.TASK_FORM_VIEW_PAGE,
query: {
_meta: 'y',
title: vars.title,
formTitle: vars.title,
formType: task.formType,
formKey: task.formKey,
processInsId: task.processInsId,
processDefId: task.processDefId,
businessId: task.businessId,
}
});
}
async function handleDel(record?: Recordable) {
const ids = record?.id || toRaw(state.ids);
createConfirm({
iconType: 'warning',
title: '警告',
content: '确定要删除历史流程吗?',
onOk: async () => {
await removeHistoryProcessIns(ids);
createMessage.success('删除成功!');
handleRefreshTable();
}
});
}
function handleTrace(record: Recordable) {
openModal(true, { record: record.taskInfo });
}
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
return {
state,
registerModal,
registerTable,
handleProcessView,
handleDel,
handleTrace,
handleSelectionChange
};
}
});
</script>

168
src/views/workflow/process/RunProcess.vue
Unescape View File

@ -0,0 +1,168 @@
<template>
<div>
<BasicTable @register="registerTable"
@selection-change="handleSelectionChange"
>
<template #tableTitle>
<a-button
danger
type="primary"
:disabled="state.multiple"
@click="handleDiscard()"
>作废</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '详情',
icon: 'fa6-solid:bars-progress',
onClick: handleProcessView.bind(null, record)
}]"
:dropDownActions="[
{
label: '进度',
icon: 'fa-solid:toggle-on',
onClick: handleTrace.bind(null, record)
},
{
label: '作废',
icon: 'fa-solid:toggle-on',
onClick: handleDiscard.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, reactive, toRaw } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { runColumns } from './process.data';
import { getTaskDefinition } from '/@/api/platform/workflow/controller/task';
import { PageEnum } from '/@/enums/workflowEnum';
import { useRouter } from 'vue-router';
import { useMessage } from '/@/hooks/web/useMessage';
import { listProcessRun, removeProcessInstance } from '/@/api/platform/workflow/controller/process';
import WorkflowChartModal from '/@/views/workflow/task/popups/WorkflowChartModal.vue';
import { useModal } from '/@/components/Modal';
//import { createPrompt } from '/@/components/Prompt';
interface TableState {
ids: string[];
single: boolean;
multiple: boolean;
}
export default defineComponent({
name: 'RunProcess',
components: {
WorkflowChartModal,
BasicTable,
TableAction,
},
setup() {
const state = reactive<TableState>({
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
});
const { push } = useRouter();
const [registerModal, { openModal }] = useModal();
const { createMessage } = useMessage();
const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
api: listProcessRun,
rowKey: 'processInsId',
columns: runColumns,
useSearchForm: false,
rowSelection: { type: 'checkbox' },
showTableSetting: true,
bordered: true,
clickToRowSelect: false,
showIndexColumn: false,
actionColumn: {
width: 240,
title: '操作',
dataIndex: 'action',
fixed: false
},
handleSearchInfoFn: () => clearSelectedRowKeys()
});
function handleSelectionChange(selection?: Recordable) {
const rowSelection = toRaw(selection?.keys) || [];
state.ids = rowSelection;
state.single = rowSelection.length != 1;
state.multiple = !rowSelection.length;
}
async function handleProcessView(record: Recordable) {
const { vars } = record;
const task = await getTaskDefinition({
taskDefKey: record.activityId,
processInsId: record.processInsId,
processDefId: record.processDefId
});
await push({
path: PageEnum.TASK_FORM_VIEW_PAGE,
query: {
_meta: 'y',
title: vars.title,
formTitle: vars.title,
formType: task.formType,
formKey: task.formKey,
taskDefKey: task.taskDefKey,
processInsId: task.processInsId,
processDefId: task.processDefId,
businessId: task.businessId,
}
});
}
async function handleDiscard(record?: Recordable) {
const ids = record?.id || toRaw(state.ids);
/*createPrompt({
title: '流程作废',
required: true,
label: '作废原因',
onOK: async (value: string) => {
await removeProcessInstance(ids, value);
createMessage.success('作废成功!');
handleRefreshTable();
}
});*/
}
function handleTrace(record: Recordable) {
openModal(true, { record: record.taskInfo });
}
function handleRefreshTable() {
clearSelectedRowKeys();
reload();
}
return {
state,
registerModal,
registerTable,
handleProcessView,
handleDiscard,
handleTrace,
handleSelectionChange
};
}
});
</script>

68
src/views/workflow/process/process.data.ts
Unescape View File

@ -1,68 +0,0 @@
import { BasicColumn, FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { listProcessCategory } from '/@/api/platform/workflow/extension/controller/processCategory';
export const columns: BasicColumn[] = [
{
title: '流程名称',
dataIndex: 'name',
width: 200,
},
{
title: '流程KEY',
dataIndex: 'key',
width: 200,
},
{
title: '流程分类',
dataIndex: 'category',
width: 150,
customRender: ({ record }) => {
const category = record.category;
return h(Tag, { color: 'processing' }, () => String(record.category).split(',')[1] || '未分类');
}
},
{
title: '流程版本',
dataIndex: 'version',
width: 150,
customRender: ({ record }) => {
const version = record.version;
return h(Tag, { color: version ? 'success' : 'warning' }, () => version || '版本未发布');
}
},
{
title: '上次发布时间',
dataIndex: 'deploymentTime',
width: 200
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'categoryId',
label: '流程分类',
component: 'ApiTreeSelect',
componentProps: {
placeholder: '请选择流程分类',
fieldNames:{
label: 'name',
key: 'id',
value: 'id'
},
api: listProcessCategory,
listToTree: true
},
colProps: { span: 8 }
},
{
field: 'name',
label: '流程名称',
component: 'Input',
componentProps: {
placeholder: '请输入流程名称'
},
colProps: { span: 8 }
}
];

207
src/views/workflow/process/process.data.tsx
Unescape View File

@ -0,0 +1,207 @@
import { BasicColumn, FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { listProcessCategory } from '/@/api/platform/workflow/extension/controller/processCategory';
export const columns: BasicColumn[] = [
{
title: '流程名称',
dataIndex: 'name',
width: 200,
},
{
title: '流程KEY',
dataIndex: 'key',
width: 200,
},
{
title: '流程分类',
dataIndex: 'category',
width: 150,
customRender: ({ record }) => {
const category = record.category;
return h(Tag, { color: 'processing' }, () => String(record.category).split(',')[1] || '未分类');
}
},
{
title: '流程版本',
dataIndex: 'version',
width: 150,
customRender: ({ record }) => {
const version = record.version;
return h(Tag, { color: version ? 'success' : 'warning' }, () => version || '版本未发布');
}
},
{
title: '上次发布时间',
dataIndex: 'deploymentTime',
width: 200
}
];
export const searchFormSchema: FormSchema[] = [
{
field: 'categoryId',
label: '流程分类',
component: 'ApiTreeSelect',
componentProps: {
placeholder: '请选择流程分类',
fieldNames:{
label: 'name',
key: 'id',
value: 'id'
},
api: listProcessCategory,
listToTree: true
},
colProps: { span: 8 }
},
{
field: 'name',
label: '流程名称',
component: 'Input',
componentProps: {
placeholder: '请输入流程名称'
},
colProps: { span: 8 }
}
];
export const applyColumns: BasicColumn[] = [
{
title: '流程标题',
dataIndex: ['vars', 'title'],
width: 200,
},
{
title: '流程名称',
dataIndex: 'processDefName',
width: 200,
},
{
title: '当前节点',
dataIndex: 'taskName',
width: 200,
},
{
title: '流程状态',
dataIndex: 'mesName',
width: 150,
customRender: ({ record }) => {
return h(Tag, { color: 'processing' }, () => record.mesName);
}
},
{
title: '发起时间 / 结束时间',
dataIndex: 'startTime',
width: 200,
customRender: ({ record }) => {
return [
<p style={{ margin: '0', padding: '0' }}>
{ record.startTime || '--' }
</p>,
<p style={{ margin: '0', padding: '0', color: '#999!import'}}>
{ record.endTime || '--' }
</p>
];
}
}
];
export const searchApplyFormSchema: 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 }
}
];
export const historyColumns: BasicColumn[] = [
{
title: '实例名称',
dataIndex: ['vars', 'title'],
width: 200,
},
{
title: '流程名称',
dataIndex: 'processDefName',
width: 200,
},
{
title: '流程发起人',
dataIndex: ['vars', 'userName'],
width: 200,
},
{
title: '流程状态',
dataIndex: 'mesName',
width: 150,
customRender: ({ record }) => {
return h(Tag, { color: 'processing' }, () => record.mesName);
}
},
{
title: '发起时间 / 结束时间',
dataIndex: 'startTime',
width: 200,
customRender: ({ record }) => {
return [
<p style={{ margin: '0', padding: '0' }}>
{ record.startTime || '--' }
</p>,
<p style={{ margin: '0', padding: '0', color: '#999!import' }}>
{ record.endTime || '--' }
</p>
];
}
}
];
export const runColumns: BasicColumn[] = [
{
title: '标题',
dataIndex: ['vars', 'title'],
width: 200,
},
{
title: '流程名称',
dataIndex: 'processDefName',
width: 200,
},
{
title: '当前节点',
dataIndex: 'taskName',
width: 150,
customRender: ({ record }) => {
return h(Tag, { color: 'processing' }, () => record.taskName);
}
},
{
title: '流程状态',
dataIndex: 'mesName',
width: 150,
customRender: ({ record }) => {
return h(Tag, { color: 'processing' }, () => record.mesName);
}
},
{
title: '流程发起人',
dataIndex: ['vars', 'userName'],
width: 200,
},
];

4
src/views/workflow/task/TaskFormView.vue
Unescape View File

@ -32,7 +32,7 @@
:disabled="true" :disabled="true"
/> />
</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"/>流程信息
@ -48,7 +48,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"/>流转记录

Write Preview
Loading…
Cancel
Save