fix: 移除新增的tabKey，调整对应的路由设计，方便关闭路由和修改标题
feat: 新样式的退回操作对话框
This commit is contained in:
gaoyunqi
@ -1,205 +1,169 @@
|
||||
<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"
|
||||
>
|
||||
<template #left>
|
||||
<BasicTree
|
||||
:clickRowToExpand="true"
|
||||
:fieldNames="{ key: 'id', title: 'name' }"
|
||||
:title="t('流程模板分类')"
|
||||
:treeData="data.treeData"
|
||||
search
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</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">
|
||||
<template #left>
|
||||
<BasicTree :clickRowToExpand="true" :fieldNames="{ key: 'id', title: 'name' }" :title="t('流程模板分类')" :treeData="data.treeData" search @select="handleSelect" />
|
||||
</template>
|
||||
|
||||
<template #search></template>
|
||||
<template #search></template>
|
||||
|
||||
<template #right>
|
||||
<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)"
|
||||
/>
|
||||
</div>
|
||||
<div class="page-box">
|
||||
<a-pagination
|
||||
v-model:current="data.pagination.current"
|
||||
v-model:pageSize="data.pagination.pageSize"
|
||||
:pageSizeOptions="['18', '36', '54', '72']"
|
||||
:show-total="(total) => t(`共 {total} 条数据`, { total })"
|
||||
:showSizeChanger="true"
|
||||
:total="data.pagination.total"
|
||||
@change="getList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template #right>
|
||||
<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)" />
|
||||
</div>
|
||||
<div class="page-box">
|
||||
<a-pagination
|
||||
v-model:current="data.pagination.current"
|
||||
v-model:pageSize="data.pagination.pageSize"
|
||||
:pageSizeOptions="['18', '36', '54', '72']"
|
||||
:show-total="(total) => t(`共 {total} 条数据`, { total })"
|
||||
:showSizeChanger="true"
|
||||
:total="data.pagination.total"
|
||||
@change="getList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<EmptyBox />
|
||||
</div>
|
||||
<LaunchProcess
|
||||
v-if="visibleLaunchProcess"
|
||||
:schemaId="data.schemaId"
|
||||
@close="visibleLaunchProcess = false"
|
||||
/>
|
||||
</template>
|
||||
</PageLayout>
|
||||
<div v-else>
|
||||
<EmptyBox />
|
||||
</div>
|
||||
<LaunchProcess v-if="visibleLaunchProcess" :schemaId="data.schemaId" @close="visibleLaunchProcess = false" />
|
||||
</template>
|
||||
</PageLayout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, unref, watch } from 'vue';
|
||||
import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
|
||||
import { EmptyBox } from '/@/components/ModalPanel/index';
|
||||
import { getDesignPage } from '/@/api/workflow/design';
|
||||
import { WorkflowPageModel } from '/@/api/workflow/model';
|
||||
import { getDicDetailList } from '/@/api/system/dic';
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
import { PageLayout } from '/@/components/ModalPanel';
|
||||
import LaunchProcess from './components/LaunchProcess.vue';
|
||||
import { FlowCategory } from '/@/enums/workflowEnum';
|
||||
import userTableScrollHeight from '/@/hooks/setting/userTableScrollHeight';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { onMounted, reactive, ref, unref, watch } from 'vue';
|
||||
import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
|
||||
import { EmptyBox } from '/@/components/ModalPanel/index';
|
||||
import { getDesignPage } from '/@/api/workflow/design';
|
||||
import { WorkflowPageModel } from '/@/api/workflow/model';
|
||||
import { getDicDetailList } from '/@/api/system/dic';
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
import { PageLayout } from '/@/components/ModalPanel';
|
||||
import LaunchProcess from './components/LaunchProcess.vue';
|
||||
import { FlowCategory } from '/@/enums/workflowEnum';
|
||||
import userTableScrollHeight from '/@/hooks/setting/userTableScrollHeight';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const { currentRoute } = router;
|
||||
const searchConfig = [
|
||||
{
|
||||
field: 'code',
|
||||
label: t('模板编码'),
|
||||
type: 'input',
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: t('模板名称'),
|
||||
type: 'input',
|
||||
},
|
||||
];
|
||||
const { tableOptions, scrollHeight } = userTableScrollHeight();
|
||||
let visibleLaunchProcess = ref(false);
|
||||
let data: {
|
||||
list: Array<WorkflowPageModel>;
|
||||
treeData: Array<TreeItem>;
|
||||
schemaId: string;
|
||||
selectDeptId: string;
|
||||
pagination: { current: number; total: number; pageSize: number };
|
||||
} = reactive({
|
||||
list: [],
|
||||
treeData: [],
|
||||
schemaId: '',
|
||||
selectDeptId: '',
|
||||
pagination: {
|
||||
current: 1,
|
||||
total: 0,
|
||||
pageSize: 18,
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => unref(currentRoute),
|
||||
(val) => {
|
||||
if (val.path == '/workflow/launch') init();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
onMounted(() => {
|
||||
getCategoryTree();
|
||||
init();
|
||||
});
|
||||
|
||||
async function init() {
|
||||
data.pagination.current = 1;
|
||||
data.pagination.total = 0;
|
||||
data.selectDeptId = '';
|
||||
await getList();
|
||||
}
|
||||
|
||||
async function getCategoryTree() {
|
||||
let res = (await getDicDetailList({
|
||||
itemId: FlowCategory.ID,
|
||||
})) as unknown as TreeItem[];
|
||||
data.treeData = res.map((ele) => {
|
||||
ele.icon = 'ant-design:tags-outlined';
|
||||
return ele;
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const { currentRoute } = router;
|
||||
const searchConfig = [
|
||||
{
|
||||
field: 'code',
|
||||
label: t('模板编码'),
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: t('模板名称'),
|
||||
type: 'input'
|
||||
}
|
||||
];
|
||||
const { tableOptions, scrollHeight } = userTableScrollHeight();
|
||||
let visibleLaunchProcess = ref(false);
|
||||
let data: {
|
||||
list: Array<WorkflowPageModel>;
|
||||
treeData: Array<TreeItem>;
|
||||
schemaId: string;
|
||||
selectDeptId: string;
|
||||
pagination: { current: number; total: number; pageSize: number };
|
||||
} = reactive({
|
||||
list: [],
|
||||
treeData: [],
|
||||
schemaId: '',
|
||||
selectDeptId: '',
|
||||
pagination: {
|
||||
current: 1,
|
||||
total: 0,
|
||||
pageSize: 18
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function getList(params?: any) {
|
||||
const searchParams = {
|
||||
...{
|
||||
limit: data.pagination.current,
|
||||
size: data.pagination.pageSize,
|
||||
},
|
||||
...{ category: data.selectDeptId },
|
||||
...params,
|
||||
...{ enabledMark: 1 }, // 流程发起list 需要隐藏 禁用的模板[enabledMark=1]
|
||||
};
|
||||
|
||||
try {
|
||||
let res = await getDesignPage(searchParams);
|
||||
data.pagination.total = res.total;
|
||||
data.list = res.list;
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
function handleSelect(deptIds) {
|
||||
data.selectDeptId = deptIds[0];
|
||||
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,
|
||||
},
|
||||
watch(
|
||||
() => unref(currentRoute),
|
||||
(val) => {
|
||||
if (val.path == '/workflow/launch') init();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
onMounted(() => {
|
||||
getCategoryTree();
|
||||
init();
|
||||
});
|
||||
}
|
||||
|
||||
function search(params: any) {
|
||||
data.pagination.current = 1;
|
||||
getList(params);
|
||||
}
|
||||
async function init() {
|
||||
data.pagination.current = 1;
|
||||
data.pagination.total = 0;
|
||||
data.selectDeptId = '';
|
||||
await getList();
|
||||
}
|
||||
|
||||
async function getCategoryTree() {
|
||||
let res = (await getDicDetailList({
|
||||
itemId: FlowCategory.ID
|
||||
})) as unknown as TreeItem[];
|
||||
data.treeData = res.map((ele) => {
|
||||
ele.icon = 'ant-design:tags-outlined';
|
||||
return ele;
|
||||
});
|
||||
}
|
||||
|
||||
async function getList(params?: any) {
|
||||
const searchParams = {
|
||||
...{
|
||||
limit: data.pagination.current,
|
||||
size: data.pagination.pageSize
|
||||
},
|
||||
...{ category: data.selectDeptId },
|
||||
...params,
|
||||
...{ enabledMark: 1 } // 流程发起list 需要隐藏 禁用的模板[enabledMark=1]
|
||||
};
|
||||
|
||||
try {
|
||||
let res = await getDesignPage(searchParams);
|
||||
data.pagination.total = res.total;
|
||||
data.list = res.list;
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
function handleSelect(deptIds) {
|
||||
data.selectDeptId = deptIds[0];
|
||||
getList();
|
||||
}
|
||||
|
||||
async function launchProcess(id: string) {
|
||||
// 旧版弹窗界面 便于调试
|
||||
data.schemaId = id;
|
||||
visibleLaunchProcess.value = true;
|
||||
}
|
||||
|
||||
function launchProcessInTab(id: string) {
|
||||
router.push({
|
||||
path: `/flow/${id}/0/createFlow`
|
||||
});
|
||||
}
|
||||
|
||||
function search(params: any) {
|
||||
data.pagination.current = 1;
|
||||
getList(params);
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.list-page-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.list-page-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
:deep(.list-item) {
|
||||
max-width: 320px;
|
||||
}
|
||||
:deep(.list-item) {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.page-box {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
.page-box {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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) {}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user