wangxiang
2 years ago
9 changed files with 342 additions and 56 deletions
@ -0,0 +1,26 @@
@@ -0,0 +1,26 @@
|
||||
/** |
||||
* 提供api模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致 |
||||
* Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved. |
||||
* author wangxiang4 |
||||
*/ |
||||
import { Workflow } from '/@/api/platform/workflow/entity/workflow'; |
||||
import { defHttp } from '/@/utils/http/axios'; |
||||
import { FormProperty } from '/@/api/platform/workflow/entity/formProperty'; |
||||
|
||||
enum Api { |
||||
startProcessDefinition = '/workflow_proxy/workflow/form/startProcessDefinition', |
||||
getTaskFormData = '/workflow_proxy/workflow/form/getTaskFormData', |
||||
getProcessStartEventFormData = '/workflow_proxy/workflow/form/getProcessStartEventFormData', |
||||
auditTask = '/workflow_proxy/workflow/form/auditTask', |
||||
getHistoryFormTaskData = '/workflow_proxy/workflow/form/getHistoryFormTaskData', |
||||
} |
||||
|
||||
export const startProcessDefinition = (data: Partial<Workflow>) => defHttp.post<string>({ url: Api.startProcessDefinition, data }); |
||||
|
||||
export const getTaskFormData = (taskId: string) => defHttp.get<FormProperty[]>({ url: `${Api.getTaskFormData}/${taskId}` }); |
||||
|
||||
export const getProcessStartEventFormData = (processDefId: string) => defHttp.get<FormProperty[]>({ url: `${Api.getProcessStartEventFormData}/${processDefId}` }); |
||||
|
||||
export const auditTask = (data: Partial<Workflow>) => defHttp.post({ url: Api.auditTask, data }); |
||||
|
||||
export const getHistoryFormTaskData = (params?: Recordable) => defHttp.get<Recordable[]>({ url: Api.getHistoryFormTaskData, params }); |
||||
@ -0,0 +1,60 @@
@@ -0,0 +1,60 @@
|
||||
/** |
||||
* 提供api模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致 |
||||
* Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved. |
||||
* author wangxiang4 |
||||
*/ |
||||
import { Workflow } from '/@/api/platform/workflow/entity/workflow'; |
||||
import { defHttp } from '/@/utils/http/axios'; |
||||
import { ProcessInstanceInfoResult } from '/@/api/platform/workflow/entity/processInstanceInfo'; |
||||
import { HistoryTaskInfoResult } from '/@/api/platform/workflow/entity/historyTaskInfo'; |
||||
|
||||
enum Api { |
||||
list = '/workflow_proxy/workflow/task/list', |
||||
historyFlowChangeList = '/workflow_proxy/workflow/task/historyFlowChangeList', |
||||
historyList = '/workflow_proxy/workflow/task/historyList', |
||||
getTaskDefinition = '/workflow_proxy/workflow/task/getTaskDefinition', |
||||
complete = '/workflow_proxy/workflow/task/complete', |
||||
getPaintDiagramXml = '/workflow_proxy/workflow/task/getPaintDiagramXml', |
||||
removeTask = '/workflow_proxy/workflow/task/removeTask', |
||||
auditTask = '/workflow_proxy/workflow/task/auditTask', |
||||
undoTask = '/workflow_proxy/workflow/task/undoTask', |
||||
delegateTask = '/workflow_proxy/workflow/task/delegateTask', |
||||
claim = '/workflow_proxy/workflow/task/claim', |
||||
cancelClaim = '/workflow_proxy/workflow/task/cancelClaim', |
||||
transferTask = '/workflow_proxy/workflow/task/transferTask', |
||||
rollBackTaskList = '/workflow_proxy/workflow/task/rollBackTaskList', |
||||
rejectTask = '/workflow_proxy/workflow/task/rejectTask', |
||||
getFlowChart = '/workflow_proxy/workflow/task/getFlowChart', |
||||
} |
||||
|
||||
export const listTodoTask = (params?: Recordable) => defHttp.get<ProcessInstanceInfoResult>({ url: Api.list, params }, { isReturnResultResponse: true }); |
||||
|
||||
export const listHistoryFlowChange = (processInsId: string) => defHttp.get<Workflow[]>({ url: `${Api.historyFlowChangeList}/${processInsId}` }); |
||||
|
||||
export const listHistoryTask = (params?: Recordable) => defHttp.get<HistoryTaskInfoResult>({ url: Api.historyList, params }, { isReturnResultResponse: true }); |
||||
|
||||
export const getTaskDefinition = (params?: Partial<Workflow>)=> defHttp.get<Workflow>({ url: Api.getTaskDefinition, params }); |
||||
|
||||
export const complete = (data: Partial<Workflow>)=> defHttp.post({ url: Api.complete, data }); |
||||
|
||||
export const getPaintDiagramXml = (processInsId: string)=> defHttp.get({ url: `${Api.getPaintDiagramXml}/${processInsId}` }); |
||||
|
||||
export const removeTask = (taskId: string , reason: string ) => defHttp.delete({url: Api.removeTask, params: { taskId, reason } }); |
||||
|
||||
export const auditTask = (data: Partial<Workflow>)=> defHttp.post({ url: Api.auditTask, data }); |
||||
|
||||
export const undoTask = (data: Recordable)=> defHttp.post({ url: Api.undoTask, data }); |
||||
|
||||
export const delegateTask = (taskId: string, userId: string) => defHttp.post({url: Api.delegateTask, params: { taskId, userId } }); |
||||
|
||||
export const claim = (taskId: string)=> defHttp.post({ url: `${Api.claim}/${taskId}` }); |
||||
|
||||
export const cancelClaim = (taskId: string)=> defHttp.post({ url: `${Api.cancelClaim}/${taskId}` }); |
||||
|
||||
export const transferTask = (taskId: string, userId: string)=> defHttp.post({ url: Api.transferTask, params: { taskId, userId } }); |
||||
|
||||
export const rollBackTaskList = (taskId: string)=> defHttp.get<Workflow[]>({ url: `${Api.rollBackTaskList}/${taskId}` }); |
||||
|
||||
export const rejectTask = (data: Recordable) => defHttp.post({ url: Api.rejectTask, data }); |
||||
|
||||
export const getFlowChart = (processInsId: string)=> defHttp.get({ url: `${Api.getFlowChart}/${processInsId}` }); |
||||
@ -0,0 +1,19 @@
@@ -0,0 +1,19 @@
|
||||
import type { FormType } from './formType'; |
||||
|
||||
export interface FormProperty { |
||||
/** The key used to submit the property */ |
||||
id: string; |
||||
/** The display label */ |
||||
name: string; |
||||
/** Type of the property. */ |
||||
type: FormType; |
||||
/** Optional value that should be used to display in this property */ |
||||
value: string; |
||||
/** Is this property read to be displayed in the form and made accessible */ |
||||
readable: boolean; |
||||
/** Is this property expected when a user submits the form? */ |
||||
isWritable: boolean; |
||||
/** Is this property a required input field */ |
||||
required: boolean; |
||||
[key:string]: any; |
||||
} |
||||
@ -0,0 +1,12 @@
@@ -0,0 +1,12 @@
|
||||
|
||||
export interface FormType { |
||||
/** Name for the form type. */ |
||||
name: string; |
||||
|
||||
/** |
||||
* Retrieve type specific extra information like the list of values for enum types or the format for date types. Look in the userguide for which extra information keys each type provides and what |
||||
* return type they give. |
||||
*/ |
||||
information: Recordable; |
||||
[key:string]: any; |
||||
} |
||||
@ -0,0 +1,161 @@
@@ -0,0 +1,161 @@
|
||||
<template> |
||||
<LayoutContent style="min-height: 100vh"> |
||||
<h4 style="text-align:center">{{formTitle}}</h4> |
||||
|
||||
</LayoutContent> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
/** |
||||
* 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致 |
||||
* 采用vben-动态表格表单封装组件编写,采用 setup 写法 |
||||
* Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved. |
||||
* author wangxiang4 |
||||
*/ |
||||
import { ref, unref,reactive, toRaw } from 'vue'; |
||||
import { LayoutContent } from 'ant-design-vue'; |
||||
import {TreeItem} from '/@/components/Tree'; |
||||
import {useForm} from '/@/components/Form'; |
||||
import {formSchema} from '/@/views/system/role/role.data'; |
||||
import {DrawerProps, useDrawerInner} from '/@/components/Drawer'; |
||||
import {listToTree} from '/@/utils/helper/treeHelper'; |
||||
import {getRoleMenuIds, listMenu} from '/@/api/platform/system/controller/menu'; |
||||
import {addRole, editRole, getRole} from '/@/api/platform/system/controller/role'; |
||||
|
||||
/** 类型规范统一声明定义区域 */ |
||||
interface WindowState { |
||||
// 流程表单标题 |
||||
formTitle: string; |
||||
// 流程表单key |
||||
formKey: string; |
||||
// 表单类型(1:动态表单,2:外置表单) |
||||
formType: string; |
||||
// 外置表单路径 |
||||
formPath: ''; |
||||
// 外置表单是否只读 |
||||
formReadOnly: false; |
||||
// 外置表单业务数据绑定ID |
||||
businessId: ''; |
||||
// 动态表单字段配置数据 |
||||
taskFormData: [], |
||||
|
||||
// 设置选择任务选项卡 |
||||
taskSelectedTab: 'formInfo', |
||||
// 流程任务ID |
||||
taskId: '', |
||||
// 流程任务定义key |
||||
taskDefKey: '', |
||||
|
||||
// 流程定义ID |
||||
processDefId: '', |
||||
// 流程实例ID |
||||
processInsId: '', |
||||
// 流程定义Key |
||||
processDefKey: '', |
||||
|
||||
// 当前任务表单操作状态 |
||||
status: '', |
||||
// 历史流转信息 |
||||
historyFlowChangeList: [], |
||||
// 当前操作按钮配置信息 |
||||
buttons: [], |
||||
// 是否抄送 |
||||
isCC: false, |
||||
// 是否指定代理人 |
||||
isAssign: false, |
||||
// 打印表单信息 |
||||
printInfo: { |
||||
id: 'printForm', |
||||
popTitle: '', |
||||
extraCss: '', |
||||
extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>' |
||||
}, |
||||
// 审批表单信息 |
||||
auditForm: { |
||||
message: '', |
||||
mesCode: '', |
||||
mesName: '', |
||||
// 抄送用户ID |
||||
userIds: '', |
||||
// 任务代理人ID |
||||
assignee: '' |
||||
} |
||||
} |
||||
|
||||
/** 通用变量统一声明区域 */ |
||||
const state = reactive<WindowState>({ |
||||
// 操作标签 |
||||
tag: '', |
||||
// 菜单树形数据 |
||||
menuTree: [], |
||||
// 选中复选框的树节点 |
||||
checkedKeys: {}, |
||||
}); |
||||
/** https://v3.cn.vuejs.org/api/options-data.html#emits */ |
||||
const emit = defineEmits(['success', 'register']); |
||||
const [registerForm, { resetFields, setFieldsValue, validate, clearValidate }] = useForm({ |
||||
labelWidth: 100, |
||||
schemas: formSchema, |
||||
showActionButtonGroup: false, |
||||
baseColProps: { span: 24 } |
||||
}); |
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data: BoxPayload = { _tag: '' }) => { |
||||
// 处理清除脏数据 |
||||
await resetFields(); |
||||
await clearValidate(); |
||||
// 处理设置数据 |
||||
state.tag = data._tag; |
||||
state.menuTree = listToTree(await listMenu()); |
||||
const roleId = data.record?.id; |
||||
const props: Partial<DrawerProps> = { confirmLoading: false }; |
||||
// 采用tag标签区分操作 |
||||
switch (state.tag) { |
||||
case 'add': |
||||
props.title = '新增角色'; |
||||
break; |
||||
case 'edit': |
||||
props.title = '编辑角色'; |
||||
const result = await getRoleMenuIds(roleId); |
||||
const role = await getRole(roleId); |
||||
const checked = { |
||||
checkedKeys: result.extend?.filter(item => item.checkeType == '1')?.map(item=> item.menuId), |
||||
halfCheckedKeys: result.extend.filter(item => item.checkeType == '2')?.map(item=> item.menuId) |
||||
}; |
||||
state.checkedKeys = checked; |
||||
await setFieldsValue(Object.assign({}, role, { menuIds: checked.checkedKeys })); |
||||
break; |
||||
} |
||||
// 尾部:设置处理后的最终配置数据 |
||||
setDrawerProps(props); |
||||
}); |
||||
|
||||
/** 处理选中的半复选框合并至勾选数据中 */ |
||||
function handleHalfCheckedKeysMerge (checkedKeys: string[], e) { |
||||
state.checkedKeys = { checkedKeys, halfCheckedKeys: e.halfCheckedKeys }; |
||||
} |
||||
|
||||
/** 处理弹出框提交 */ |
||||
async function handleSubmit() { |
||||
try { |
||||
// 提取验证数据 |
||||
const formData = await validate(); |
||||
// 处理提交之前逻辑 |
||||
setDrawerProps({ confirmLoading: true }); |
||||
formData.menuIds = toRaw(state.checkedKeys); |
||||
// 采用tag标签区分操作 |
||||
switch (state.tag) { |
||||
case 'add': |
||||
await addRole(formData); |
||||
break; |
||||
case 'edit': |
||||
await editRole(formData); |
||||
break; |
||||
} |
||||
// 处理提交完成之后逻辑 |
||||
closeDrawer(); |
||||
emit('success'); |
||||
} finally { |
||||
setDrawerProps({ confirmLoading: false }); |
||||
} |
||||
} |
||||
|
||||
</script> |
||||
Loading…
Reference in new issue