geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 移除新增的tabKey，调整对应的路由设计，方便关闭路由和修改标题

Browse Source 
feat: 新样式的退回操作对话框
This commit is contained in:
gaoyunqi
2024-02-28 16:16:17 +08:00
parent cb075df41c
commit 8a8d18a33a
10 changed files with 362 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/SecondDev/OpinionDialog.vue
View File

@ -2,9 +2,14 @@
<a-modal :title="dialogTitle" :visible="isOpen" :width="500" centered class="geg" @cancel="onClickCancel" @ok="onClickOK">
<div class="dialog-wrap">
<a-form :label-col="{ span: 5 }" :model="formState" autocomplete="off">
<a-form-item label="下一节点" name="nextNodeName">
<a-form-item v-if="_action === 'agree'" label="下一节点" name="nextNodeName">
<span>{{ formState.nextNodeName }}</span>
</a-form-item>
<a-form-item v-if="_action === 'reject'" label="退回至" name="rejectNode">
<a-select v-model:value="rejectNodeId">
<a-select-option v-for="(item, index) in rejectNodeList" :key="index" :value="item.activityId">{{ item.activityName }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="审批意见" name="opinion">
<a-textarea v-model:value="formState.opinion" :maxlength="200" :rows="3" placeholder="请输入审批意见，不超过200字" />
</a-form-item>
@ -15,17 +20,17 @@
<script setup>
import { reactive, ref } from 'vue';
import { getRejectNodeList } from '/@/api/workflow/task';
const dialogTitle = ref('审批');
const isOpen = ref(false);
let _action = 'approve';
const titleMapping = {
approve: '同意',
deny: '拒绝',
eject: '退回',
cancel: '终止',
transfer: '转办'
};
const rejectNodeList = ref([]);
const rejectNodeId = ref('');
let _action = ref('agree');
let _processId = '';
let _taskId = '';
let _callback = null;
const formState = reactive({
@ -34,18 +39,35 @@
opinionList: ['同意。', '请领导审批。']
});
function toggleDialog({ action, callback } = {}) {
function toggleDialog({ isClose, action, callback, processId, taskId } = {}) {
if (isClose) {
isOpen.value = false;
return;
}
isOpen.value = true;
_action = action;
_action.value = action;
_callback = callback;
_processId = processId;
_taskId = taskId;
formState.opinion = '';
dialogTitle.value = `审批 - ${titleMapping[action]}`;
dialogTitle.value = `审批`;
if (action === 'reject') {
loadRejectNodeList();
}
}
async function loadRejectNodeList() {
let res = await getRejectNodeList(_processId, _taskId);
if (res && Array.isArray(res) && res.length > 0) {
rejectNodeList.value = res;
}
}
function onClickOK() {
if (_callback && typeof _callback === 'function') {
_callback({
opinion: formState.opinion
opinion: formState.opinion,
rejectNodeId: rejectNodeId.value
});
}
isOpen.value = false;
@ -62,6 +84,6 @@
<style lang="less" scoped>
.dialog-wrap {
padding-right: 15px;
padding: 10px 15px 0 0;
}
</style>

21
src/router/routes/basic.ts
View File

@ -125,8 +125,8 @@ export const USERCENTER_ROUTE: AppRouteRecordRaw = {
]
};
export const FLOW_ROUTE: AppRouteRecordRaw = {
path: '/flow',
export const FLOW_ROUTE: AppRouteRecordRaw[] = [{
path: '/flow/:arg1/:arg2',
name: 'Flow',
meta: {
title: '流程'
@ -148,18 +148,27 @@ export const FLOW_ROUTE: AppRouteRecordRaw = {
meta: {
title: '审批流程'
}
}
]
}, {
path: '/flowList',
name: 'FlowList',
meta: {
title: '流程列表'
},
component: LAYOUT,
children: [
/* 菜单不支持复用，不同菜单如果path或者name一样会报错 */
{
path: 'flowList',
path: 'draft',
name: 'FlowListPage',
component: () => import('/@/views/secondDev/processTasksPage.vue'),
meta: {
title: '流程列表'
title: '草稿箱'
}
},
{
path: 'flowList2',
path: 'todo',
name: 'FlowListPage2',
component: () => import('/@/views/secondDev/processTasksPage.vue'),
meta: {
@ -167,4 +176,4 @@ export const FLOW_ROUTE: AppRouteRecordRaw = {
}
}
]
};
}];

2
src/router/routes/index.ts
View File

@ -53,6 +53,6 @@ export const basicRoutes = [
PAGE_NOT_FOUND_ROUTE,
SYSTEM_ROUTE,
USERCENTER_ROUTE,
FLOW_ROUTE
...FLOW_ROUTE
// CUSTOMFORM_ROUTE,
];

4
src/store/modules/multipleTab.ts
View File

@ -177,8 +177,8 @@ export const useMultipleTabStore = defineStore({
cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList);
},
changeTitle(tabKey: string, title: string) {
const tab = (this.tabList as any).find((item) => item.tabKey === tabKey);
changeTitle(fullPath: string, title: string) {
const tab = (this.tabList as any).find((item) => item.fullPath === fullPath);
if (tab) {
tab.tabTitle = title;
}

154
src/views/secondDev/approveFlowPage.vue
View File

@ -24,9 +24,9 @@
<a-dropdown>
<template #overlay>
<a-menu @click="onMoreClick">
<a-menu-item key="1">退回</a-menu-item>
<a-menu-item key="2">终止</a-menu-item>
<a-menu-item key="3">转办</a-menu-item>
<a-menu-item key="terminate">终止</a-menu-item>
<a-menu-item key="transfer">转办</a-menu-item>
<a-menu-item key="flowchart">查看流程图</a-menu-item>
</a-menu>
</template>
<a-button>
@ -56,22 +56,26 @@
import { onMounted, reactive, ref, unref } from 'vue';
import FormInformation from '/@/views/secondDev/FormInformation.vue';
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
import { getApprovalProcess } from '/@/api/workflow/task';
import { getApprovalProcess, postApproval } from '/@/api/workflow/task';
import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
import { CheckCircleOutlined, StopOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons-vue';
import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';
import { separator } from '/@bpmn/config/info';
const { data, initProcessData } = userTaskItem();
const { data, approveUserData, initProcessData, notificationError, notificationSuccess } = userTaskItem();
const router = useRouter();
const { currentRoute } = router;
const rParams = currentRoute.value.query;
//const schemaId = ref(rParams.schemaId);
const taskId = ref(rParams.taskId);
const processId = ref(rParams.processId);
const currentRoute = router.currentRoute.value;
const rQuery = currentRoute.query;
const rParams = currentRoute.params;
const schemaId = ref(rParams.arg1);
const taskId = ref(rQuery.taskId);
const processId = ref(rParams.arg2);
const renderKey = ref('');
const formConfigs = ref();
const opinionDlg = ref();
const validateSuccess = ref(false);
const formInformation = ref();
let approvalData = reactive({
isCountersign: false,
@ -92,18 +96,44 @@
function onMoreClick() {}
function onApproveClick() {
async function onApproveClick() {
await submit();
approvalData.approvedType = ApproveType.AGREE;
approvalData.approvedResult = ApproveCode.AGREE;
opinionDlg.value.toggleDialog({
action: 'approve'
action: 'agree'
});
}
function onDenyClick() {
async function onDenyClick() {
approvalData.approvedType = ApproveType.REJECT;
approvalData.approvedResult = ApproveCode.REJECT;
opinionDlg.value.toggleDialog({
action: 'deny'
action: 'reject',
processId: processId.value,
taskId: taskId.value,
callback: (args) => {
approvalData.approvedContent = args.opinion;
approvalData.rejectNodeActivityId = args.rejectNodeId;
onFinish({});
}
});
}
function reset() {
approvalData.isAddOrSubSign = false;
approvalData.stampInfo = {
stampId: '',
password: ''
};
approvalData.buttonConfigs = [];
approvalData.approvedType = ApproveType.AGREE;
approvalData.approvedContent = '';
approvalData.rejectNodeActivityId = '';
approvalData.rejectNodeActivityIds = [];
approvalData.circulateConfigs = [];
}
onMounted(async () => {
if (unref(taskId)) {
try {
@ -131,4 +161,100 @@
} else {
}
});
async function submit() {
data.submitLoading = true;
validateSuccess.value = false;
try {
let validateForms = await formInformation.value.validateForm();
if (validateForms.length > 0) {
let successValidate = validateForms.filter((ele) => {
return ele.validate;
});
if (successValidate.length == validateForms.length) {
validateSuccess.value = true;
data.submitLoading = false;
} else {
data.submitLoading = false;
notificationError(t('审批流程'), t('表单校验未通过'));
}
}
} catch (error) {
data.submitLoading = false;
notificationError(t('审批流程'), t('审批流程失败'));
}
}
function getUploadFileFolderIds(formModels) {
let fileFolderIds = [];
let uploadComponentIds = formInformation.value.getUploadComponentIds();
uploadComponentIds.forEach((ids) => {
if (ids.includes(separator)) {
let arr = ids.split(separator);
if (arr.length == 2 && formModels[arr[0]][arr[1]]) {
fileFolderIds.push(formModels[arr[0]][arr[1]]);
} else if (arr.length == 3 && formModels[arr[0]][arr[1]] && Array.isArray(formModels[arr[0]][arr[1]])) {
formModels[arr[0]][arr[1]].forEach((o) => {
fileFolderIds.push(o[arr[2]]);
});
}
}
});
return fileFolderIds;
}
async function onFinish(values) {
try {
if (/*validateSuccess.value*/ true) {
let formModels = await formInformation.value.getFormModels();
let system = formInformation.value.getSystemType();
let fileFolderIds = getUploadFileFolderIds(formModels);
let params = {
approvedType: approvalData.approvedType,
approvedResult: approvalData.approvedResult, // approvalData.approvedType 审批结果 如果为 4 就需要传buttonCode
approvedContent: approvalData.approvedContent,
formData: formModels,
rejectNodeActivityId: approvalData.rejectNodeActivityId,
taskId: taskId.value,
fileFolderIds,
circulateConfigs: approvalData.circulateConfigs,
stampId: values.stampId,
stampPassword: values.password,
isOldSystem: system
};
let res = await postApproval(params);
// 下一节点审批人
let taskList = [];
if (res && res.length > 0) {
taskList = res
.filter((ele) => {
return ele.isMultiInstance == false && ele.isAppoint == true;
})
.map((ele) => {
return {
taskId: ele.taskId,
taskName: ele.taskName,
provisionalApprover: ele.provisionalApprover,
selectIds: []
};
});
if (taskList.length > 0) {
approveUserData.list = taskList;
approveUserData.schemaId = props.schemaId;
approveUserData.visible = true;
data.submitLoading = false;
} else {
opinionDlg.value.toggleDialog({ isClose: true });
data.submitLoading = false;
save(true, t('审批流程'));
}
} else {
opinionDlg.value.toggleDialog({ isClose: true });
data.submitLoading = false;
save(true, t('审批流程'));
}
}
} catch (error) {}
}
</script>

14
src/views/secondDev/createFlow.vue
View File

@ -71,10 +71,11 @@
const { t } = useI18n();
const { data, approveUserData, initProcessData, notificationSuccess, notificationError } = userTaskItem();
const currentRoute = router.currentRoute;
const rParams = currentRoute.value.query;
const rSchemaId = rParams.schemaId;
const rDraftsId = rParams.draftsId;
const currentRoute = router.currentRoute.value;
const rParams = currentRoute.params;
const fullPath = currentRoute.fullPath;
const rSchemaId = rParams.arg1;
const rDraftsId = rParams.arg2;
const draftsJsonStr = localStorage.getItem('draftsJsonStr');
let formInformation = ref();
let pageMode = 'new';
@ -147,9 +148,8 @@
let res = await getStartProcessInfo(rSchemaId);
const title = res?.schemaInfo?.name;
if (title) {
const tabKey = `${pageMode}_${pageMode === 'new' ? rSchemaId : rDraftsId}`;
const tabPrefix = pageMode === 'new' ? '新建' : '草稿';
tabStore.changeTitle(tabKey, `${tabPrefix}：${title}`);
tabStore.changeTitle(fullPath, `${tabPrefix}：${title}`);
}
initProcessData(res);
}
@ -179,7 +179,7 @@
try {
disableSubmit.value = true;
let formModels = await formInformation.value.saveDraftData();
if (rDraftsId) {
if (rDraftsId !== '0') {
let res = await putDraft(rSchemaId, formModels, rDraftsId, props.rowKeyData);
showResult(res, t('保存草稿'));
} else {

11
src/views/secondDev/processTasksPage.vue
View File

@ -94,17 +94,16 @@
];
const selectedKeys = ref(['ToDoTasks']);
const query = unref(currentRoute).query;
let id = query.name;
const tabKey = query.tabKey as string;
let id = 'ToDoTasks';
const lHash = location.hash;
if (lHash.indexOf('/draft') > 0) {
id = 'Drafts';
}
let data = reactive({
componentName: shallowRef(ToDoTasks)
});
if (id) {
selectedKeys.value = [id.toString()];
const tabName = treeData.find((item) => item.id === id)?.name;
if (tabName && tabKey) {
tabStore.changeTitle(tabKey, tabName);
}
handleSelect([id]);
}

68
src/views/workflow/task/FlowLaunch.vue
View File

@ -1,42 +1,15 @@
<template>
<PageLayout
:layoutClass="
currentRoute.path == '/workflow/launch'
? '!p-2'
: currentRoute.path == '/task/processtasks'
? '!p-0 !pr-7px'
: ''
"
:searchConfig="searchConfig"
:title="t('流程模板列表')"
@search="search"
@scroll-height="scrollHeight"
>
<PageLayout :layoutClass="currentRoute.path == '/workflow/launch' ? '!p-2' : currentRoute.path == '/task/processtasks' ? '!p-0 !pr-7px' : ''" :searchConfig="searchConfig" :title="t('流程模板列表')" @search="search" @scroll-height="scrollHeight">
<template #left>
<BasicTree
:clickRowToExpand="true"
:fieldNames="{ key: 'id', title: 'name' }"
:title="t('流程模板分类')"
:treeData="data.treeData"
search
@select="handleSelect"
/>
<BasicTree :clickRowToExpand="true" :fieldNames="{ key: 'id', title: 'name' }" :title="t('流程模板分类')" :treeData="data.treeData" search @select="handleSelect" />
</template>
<template #search></template>
<template #right>
<div
v-if="data.list.length > 0"
:style="{ overflowY: 'auto', height: tableOptions.scrollHeight + 30 + 'px' }"
>
<div v-if="data.list.length > 0" :style="{ overflowY: 'auto', height: tableOptions.scrollHeight + 30 + 'px' }">
<div class="list-page-box">
<TemplateCard
v-for="(item, index) in data.list"
:key="index"
:item="item"
@click="launchProcessInTab(item.id)"
/>
<TemplateCard v-for="(item, index) in data.list" :key="index" :item="item" @click="launchProcessInTab(item.id)" />
</div>
<div class="page-box">
<a-pagination
@ -54,11 +27,7 @@
<div v-else>
<EmptyBox />
</div>
<LaunchProcess
v-if="visibleLaunchProcess"
:schemaId="data.schemaId"
@close="visibleLaunchProcess = false"
/>
<LaunchProcess v-if="visibleLaunchProcess" :schemaId="data.schemaId" @close="visibleLaunchProcess = false" />
</template>
</PageLayout>
</template>
@ -85,13 +54,13 @@
{
field: 'code',
label: t('模板编码'),
type: 'input',
type: 'input'
},
{
field: 'name',
label: t('模板名称'),
type: 'input',
},
type: 'input'
}
];
const { tableOptions, scrollHeight } = userTableScrollHeight();
let visibleLaunchProcess = ref(false);
@ -109,8 +78,8 @@
pagination: {
current: 1,
total: 0,
pageSize: 18,
},
pageSize: 18
}
});
watch(
@ -118,7 +87,7 @@
(val) => {
if (val.path == '/workflow/launch') init();
},
{ deep: true },
{ deep: true }
);
onMounted(() => {
getCategoryTree();
@ -134,7 +103,7 @@
async function getCategoryTree() {
let res = (await getDicDetailList({
itemId: FlowCategory.ID,
itemId: FlowCategory.ID
})) as unknown as TreeItem[];
data.treeData = res.map((ele) => {
ele.icon = 'ant-design:tags-outlined';
@ -146,11 +115,11 @@
const searchParams = {
...{
limit: data.pagination.current,
size: data.pagination.pageSize,
size: data.pagination.pageSize
},
...{ category: data.selectDeptId },
...params,
...{ enabledMark: 1 }, // 流程发起list 需要隐藏 禁用的模板[enabledMark=1]
...{ enabledMark: 1 } // 流程发起list 需要隐藏 禁用的模板[enabledMark=1]
};
try {
@ -165,20 +134,15 @@
getList();
}
/*
async function launchProcess(id: string) {
// 旧版弹窗界面 便于调试
data.schemaId = id;
visibleLaunchProcess.value = true;
}
*/
function launchProcessInTab(id: string) {
router.push({
path: '/flow/createFlow',
query: {
schemaId: id,
tabKey: 'new_' + id,
},
path: `/flow/${id}/0/createFlow`
});
}

7
src/views/workflow/task/components/processTasks/DraftsV2.vue
View File

@ -96,12 +96,7 @@
processData.visible = true;*/
localStorage.setItem('draftsJsonStr', res.formData);
router.push({
path: '/flow/createFlow',
query: {
schemaId: res.schemaId,
draftsId: record.id,
tabKey: 'draft_' + record.id
}
path: `/flow/${res.schemaId}/${record.id}/createFlow`
});
} catch (error) {}
}

7
src/views/workflow/task/components/processTasks/ToDoTasksV2.vue
View File

@ -136,12 +136,9 @@
const onRowDblClick = (record, index) => {
const { processId, taskId, schemaId } = record;
router.push({
path: "/flow/approveFlow",
path: `/flow/${schemaId}/${processId}/approveFlow`,
query: {
schemaId,
taskId,
processId,
tabKey: "approve_" + taskId
taskId
}
});
};