Skip to content

phsl / admin

Go to a project
Commit c49e8bd3 by GoldenZqqq
Options

feat: 流程模型列表UI重构以及数组分类分组展示逻辑

parent b293f157
Showing with 441 additions and 606 deletions
src/views/bpm/model/index.vue
<template> <template>
<doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
<doc-alert
title="流程设计器（钉钉、飞书）"
url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
/>
<doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
<doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="流程标识" prop="key">
<el-input
v-model="queryParams.key"
placeholder="请输入流程标识"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="流程名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入流程名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="流程分类" prop="category">
<el-select
v-model="queryParams.category"
placeholder="请选择流程分类"
clearable
class="!w-240px"
>
<el-option
v-for="category in categoryList"
:key="category.code"
:label="category.name"
:value="category.code"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['bpm:model:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新建
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap> <ContentWrap>
<div class="flex justify-between pl-20px items-center"> <el-table v-loading="loading" :data="list">
<h3>表单管理</h3> <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
<!-- 搜索工作栏 --> <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
<el-form <template #default="scope">
class="-mb-15px flex" <el-image :src="scope.row.icon" class="h-32px w-32px" />
:model="queryParams" </template>
ref="queryFormRef" </el-table-column>
:inline="true" <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
label-width="68px" <template #default="scope">
> <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
<el-form-item align="right" prop="key" class="ml-auto"> 全部可见
<el-input </el-text>
v-model="queryParams.key" <el-text v-else-if="scope.row.startUsers.length == 1">
placeholder="搜索流程" {{ scope.row.startUsers[0].nickname }}
clearable </el-text>
@keyup.enter="handleQuery" <el-text v-else>
class="!w-240px" <el-tooltip
class="box-item"
effect="dark"
placement="top"
:content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
>
{{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
</el-tooltip>
</el-text>
</template>
</el-table-column>
<el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
<el-table-column label="表单信息" align="center" prop="formType" min-width="200">
<template #default="scope">
<el-button
v-if="scope.row.formType === 10"
type="primary"
link
@click="handleFormDetail(scope.row)"
> >
<template #prefix> <span>{{ scope.row.formName }}</span>
<Icon icon="ep:search" class="mx-10px" />
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新建流程
</el-button> </el-button>
</el-form-item> <el-button
v-else-if="scope.row.formType === 20"
<el-form-item> type="primary"
<el-button type="info" plain> link
<Icon icon="ep:setting" /> @click="handleFormDetail(scope.row)"
>
<span>{{ scope.row.formCustomCreatePath }}</span>
</el-button> </el-button>
</el-form-item> <label v-else>暂无表单</label>
</el-form> </template>
</div> </el-table-column>
<el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
<el-divider /> <template #default="scope">
<span v-if="scope.row.processDefinition">
<!-- 分类卡片组 --> {{ formatDate(scope.row.processDefinition.deploymentTime) }}
<div class="px-30px"> </span>
<ContentWrap v-for="(list, title) in categoryGroup" :key="title"> <el-tag v-if="scope.row.processDefinition" class="ml-10px">
<div class="flex items-center mb-20px"> v{{ scope.row.processDefinition.version }}
<h3 class="ml-20px mr-8px">{{ title }}</h3> </el-tag>
<div class="text-[var(--el-text-color-placeholder)]">({{ list?.length || 0 }})</div> <el-tag v-else type="warning">未部署</el-tag>
</div> <el-tag
<el-table v-loading="loading" :data="list"> v-if="scope.row.processDefinition?.suspensionState === 2"
<el-table-column label="流程名" align="center" prop="name" min-width="200"> type="warning"
<template #default="scope"> class="ml-10px"
<div class="flex items-center"> >
<el-image :src="scope.row.icon" class="h-32px w-32px mr-10px rounded" /> 已停用
{{ scope.row.name }} </el-tag>
</div> </template>
</template> </el-table-column>
</el-table-column> <el-table-column label="操作" align="center" width="200" fixed="right">
<el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100"> <template #default="scope">
<template #default="scope"> <el-button
<el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0"> link
全部可见 type="primary"
</el-text> @click="openForm('update', scope.row.id)"
<el-text v-else-if="scope.row.startUsers.length == 1"> v-hasPermi="['bpm:model:update']"
{{ scope.row.startUsers[0].nickname }} :disabled="!isManagerUser(scope.row)"
</el-text> >
<el-text v-else> 修改
<el-tooltip </el-button>
class="box-item" <el-button
effect="dark" link
placement="top" class="!ml-5px"
:content="scope.row.startUsers.map((user: any) => user.nickname).join('、')" type="primary"
@click="handleDesign(scope.row)"
v-hasPermi="['bpm:model:update']"
:disabled="!isManagerUser(scope.row)"
>
设计
</el-button>
<el-button
link
class="!ml-5px"
type="primary"
@click="handleDeploy(scope.row)"
v-hasPermi="['bpm:model:deploy']"
:disabled="!isManagerUser(scope.row)"
>
发布
</el-button>
<el-dropdown
class="!align-middle ml-5px"
@command="(command) => handleCommand(command, scope.row)"
v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
>
<el-button type="primary" link>更多</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
command="handleDefinitionList"
v-if="checkPermi(['bpm:process-definition:query'])"
> >
{{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见 历史
</el-tooltip> </el-dropdown-item>
</el-text> <el-dropdown-item
</template> command="handleChangeState"
</el-table-column> v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
<el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" /> :disabled="!isManagerUser(scope.row)"
<el-table-column label="表单信息" align="center" prop="formType" min-width="200"> >
<template #default="scope"> {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
<el-button </el-dropdown-item>
v-if="scope.row.formType === 10" <el-dropdown-item
type="primary" type="danger"
link command="handleDelete"
@click="handleFormDetail(scope.row)" v-if="checkPermi(['bpm:model:delete'])"
> :disabled="!isManagerUser(scope.row)"
<span>{{ scope.row.formName }}</span> >
</el-button> 删除
<el-button </el-dropdown-item>
v-else-if="scope.row.formType === 20" </el-dropdown-menu>
type="primary"
link
@click="handleFormDetail(scope.row)"
>
<span>{{ scope.row.formCustomCreatePath }}</span>
</el-button>
<label v-else>暂无表单</label>
</template>
</el-table-column>
<el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
<template #default="scope">
<span v-if="scope.row.processDefinition">
{{ formatDate(scope.row.processDefinition.deploymentTime) }}
</span>
<el-tag v-if="scope.row.processDefinition" class="ml-10px">
v{{ scope.row.processDefinition.version }}
</el-tag>
<el-tag v-else type="warning">未部署</el-tag>
<el-tag
v-if="scope.row.processDefinition?.suspensionState === 2"
type="warning"
class="ml-10px"
>
已停用
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="200" fixed="right">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['bpm:model:update']"
:disabled="!isManagerUser(scope.row)"
>
修改
</el-button>
<el-button
link
class="!ml-5px"
type="primary"
@click="handleDesign(scope.row)"
v-hasPermi="['bpm:model:update']"
:disabled="!isManagerUser(scope.row)"
>
设计
</el-button>
<el-button
link
class="!ml-5px"
type="primary"
@click="handleDeploy(scope.row)"
v-hasPermi="['bpm:model:deploy']"
:disabled="!isManagerUser(scope.row)"
>
发布
</el-button>
<el-dropdown
class="!align-middle ml-5px"
@command="(command) => handleCommand(command, scope.row)"
v-hasPermi="[
'bpm:process-definition:query',
'bpm:model:update',
'bpm:model:delete'
]"
>
<el-button type="primary" link>更多</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
command="handleDefinitionList"
v-if="checkPermi(['bpm:process-definition:query'])"
>
历史
</el-dropdown-item>
<el-dropdown-item
command="handleChangeState"
v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
:disabled="!isManagerUser(scope.row)"
>
{{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
</el-dropdown-item>
<el-dropdown-item
type="danger"
command="handleDelete"
v-if="checkPermi(['bpm:model:delete'])"
:disabled="!isManagerUser(scope.row)"
>
删除
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template> </template>
</el-table-column> </el-dropdown>
</el-table> </template>
</ContentWrap> </el-table-column>
</div> </el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap> </ContentWrap>
<!-- 表单弹窗：添加/修改流程 --> <!-- 表单弹窗：添加/修改流程 -->
...@@ -208,8 +227,6 @@ import { CategoryApi } from '@/api/bpm/category' ...@@ -208,8 +227,6 @@ import { CategoryApi } from '@/api/bpm/category'
import { BpmModelType } from '@/utils/constants' import { BpmModelType } from '@/utils/constants'
import { checkPermi } from '@/utils/permission' import { checkPermi } from '@/utils/permission'
import { useUserStoreWithOut } from '@/store/modules/user' import { useUserStoreWithOut } from '@/store/modules/user'
import { groupBy } from 'lodash-es'
import { mockData } from './mock'
defineOptions({ name: 'BpmModel' }) defineOptions({ name: 'BpmModel' })
...@@ -217,7 +234,10 @@ const message = useMessage() // 消息弹窗 ...@@ -217,7 +234,10 @@ const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由 const { push } = useRouter() // 路由
const userStore = useUserStoreWithOut() // 用户信息缓存 const userStore = useUserStoreWithOut() // 用户信息缓存
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
...@@ -227,16 +247,14 @@ const queryParams = reactive({ ...@@ -227,16 +247,14 @@ const queryParams = reactive({
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const categoryList = ref([]) // 流程分类列表 const categoryList = ref([]) // 流程分类列表
const categoryGroup = ref<any>({}) // 按照category分组的数据
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
// TODO 芋艿：这里需要一个不分页查全部的流程模型接口
const data = await ModelApi.getModelPage(queryParams) const data = await ModelApi.getModelPage(queryParams)
data.list = mockData list.value = data.list
categoryGroup.value = groupBy(data.list, 'categoryName') total.value = data.total
} finally { } finally {
loading.value = false loading.value = false
} }
...@@ -384,12 +402,3 @@ onMounted(async () => { ...@@ -384,12 +402,3 @@ onMounted(async () => {
categoryList.value = await CategoryApi.getCategorySimpleList() categoryList.value = await CategoryApi.getCategorySimpleList()
}) })
</script> </script>
<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
margin-right: 10px;
}
:deep(.el-divider--horizontal) {
margin-top: 10px;
}
</style>
src/views/bpm/model/index_old.vue → src/views/bpm/model/index_new.vue
<template> <template>
<doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
<doc-alert
title="流程设计器（钉钉、飞书）"
url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
/>
<doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
<doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="流程标识" prop="key">
<el-input
v-model="queryParams.key"
placeholder="请输入流程标识"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="流程名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入流程名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="流程分类" prop="category">
<el-select
v-model="queryParams.category"
placeholder="请选择流程分类"
clearable
class="!w-240px"
>
<el-option
v-for="category in categoryList"
:key="category.code"
:label="category.name"
:value="category.code"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['bpm:model:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新建
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap> <ContentWrap>
<el-table v-loading="loading" :data="list"> <div class="flex justify-between pl-20px items-center">
<el-table-column label="流程名称" align="center" prop="name" min-width="200" /> <h3>表单管理</h3>
<el-table-column label="流程图标" align="center" prop="icon" min-width="100"> <!-- 搜索工作栏 -->
<template #default="scope"> <el-form
<el-image :src="scope.row.icon" class="h-32px w-32px" /> class="-mb-15px flex"
</template> :model="queryParams"
</el-table-column> ref="queryFormRef"
<el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100"> :inline="true"
<template #default="scope"> label-width="68px"
<el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0"> >
全部可见 <el-form-item align="right" prop="key" class="ml-auto">
</el-text> <el-input
<el-text v-else-if="scope.row.startUsers.length == 1"> v-model="queryParams.key"
{{ scope.row.startUsers[0].nickname }} placeholder="搜索流程"
</el-text> clearable
<el-text v-else> @keyup.enter="handleQuery"
<el-tooltip class="!w-240px"
class="box-item"
effect="dark"
placement="top"
:content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
>
{{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
</el-tooltip>
</el-text>
</template>
</el-table-column>
<el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
<el-table-column label="表单信息" align="center" prop="formType" min-width="200">
<template #default="scope">
<el-button
v-if="scope.row.formType === 10"
type="primary"
link
@click="handleFormDetail(scope.row)"
>
<span>{{ scope.row.formName }}</span>
</el-button>
<el-button
v-else-if="scope.row.formType === 20"
type="primary"
link
@click="handleFormDetail(scope.row)"
>
<span>{{ scope.row.formCustomCreatePath }}</span>
</el-button>
<label v-else>暂无表单</label>
</template>
</el-table-column>
<el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
<template #default="scope">
<span v-if="scope.row.processDefinition">
{{ formatDate(scope.row.processDefinition.deploymentTime) }}
</span>
<el-tag v-if="scope.row.processDefinition" class="ml-10px">
v{{ scope.row.processDefinition.version }}
</el-tag>
<el-tag v-else type="warning">未部署</el-tag>
<el-tag
v-if="scope.row.processDefinition?.suspensionState === 2"
type="warning"
class="ml-10px"
> >
已停用 <template #prefix>
</el-tag> <Icon icon="ep:search" class="mx-10px" />
</template> </template>
</el-table-column> </el-input>
<el-table-column label="操作" align="center" width="200" fixed="right"> </el-form-item>
<template #default="scope"> <el-form-item>
<el-button <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
link <Icon icon="ep:plus" class="mr-5px" /> 新建流程
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['bpm:model:update']"
:disabled="!isManagerUser(scope.row)"
>
修改
</el-button>
<el-button
link
class="!ml-5px"
type="primary"
@click="handleDesign(scope.row)"
v-hasPermi="['bpm:model:update']"
:disabled="!isManagerUser(scope.row)"
>
设计
</el-button>
<el-button
link
class="!ml-5px"
type="primary"
@click="handleDeploy(scope.row)"
v-hasPermi="['bpm:model:deploy']"
:disabled="!isManagerUser(scope.row)"
>
发布
</el-button> </el-button>
<el-dropdown </el-form-item>
class="!align-middle ml-5px"
@command="(command) => handleCommand(command, scope.row)" <el-form-item>
v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']" <el-dropdown placement="bottom-end">
> <el-button type="info" plain>
<el-button type="primary" link>更多</el-button> <Icon icon="ep:setting" />
</el-button>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item <el-dropdown-item>
command="handleDefinitionList" <Icon icon="ep:circle-plus" size="13" class="mr-5px" />
v-if="checkPermi(['bpm:process-definition:query'])" 新建分组
>
历史
</el-dropdown-item>
<el-dropdown-item
command="handleChangeState"
v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
:disabled="!isManagerUser(scope.row)"
>
{{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item>
type="danger" <Icon icon="fa:sort-amount-desc" size="13" class="mr-5px" />
command="handleDelete" 分组排序
v-if="checkPermi(['bpm:model:delete'])"
:disabled="!isManagerUser(scope.row)"
>
删除
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</template> </el-form-item>
</el-table-column> </el-form>
</el-table> </div>
<!-- 分页 -->
<Pagination <el-divider />
:total="total"
v-model:page="queryParams.pageNo" <!-- 分类卡片组 -->
v-model:limit="queryParams.pageSize" <div class="px-15px">
@pagination="getList" <ContentWrap v-for="(list, title) in categoryGroup" :key="title">
/> <!-- 默认使其全部展开 -->
<el-collapse :modelValue="title">
<el-collapse-item :name="title">
<template #icon="{ isActive }">
<div
class="ml-20px flex items-center"
:class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
>
<Icon icon="ep:arrow-down" />
</div>
</template>
<template #title>
<div class="flex items-center">
<h3 class="ml-20px mr-8px text-18px">{{ title }}</h3>
<div class="text-[var(--el-text-color-placeholder)] text-16px">
({{ list?.length || 0 }})
</div>
</div>
</template>
<el-table v-loading="loading" :data="list">
<el-table-column label="流程名" prop="name" min-width="200">
<template #default="scope">
<div class="flex items-center">
<el-image :src="scope.row.icon" class="h-32px w-32px mr-10px rounded" />
{{ scope.row.name }}
</div>
</template>
</el-table-column>
<el-table-column label="可见范围" prop="startUserIds" min-width="100">
<template #default="scope">
<el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
全部可见
</el-text>
<el-text v-else-if="scope.row.startUsers.length == 1">
{{ scope.row.startUsers[0].nickname }}
</el-text>
<el-text v-else>
<el-tooltip
class="box-item"
effect="dark"
placement="top"
:content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
>
{{ scope.row.startUsers[0].nickname }}等
{{ scope.row.startUsers.length }} 人可见
</el-tooltip>
</el-text>
</template>
</el-table-column>
<el-table-column label="表单信息" prop="formType" min-width="200">
<template #default="scope">
<el-button
v-if="scope.row.formType === 10"
type="primary"
link
@click="handleFormDetail(scope.row)"
>
<span>{{ scope.row.formName }}</span>
</el-button>
<el-button
v-else-if="scope.row.formType === 20"
type="primary"
link
@click="handleFormDetail(scope.row)"
>
<span>{{ scope.row.formCustomCreatePath }}</span>
</el-button>
<label v-else>暂无表单</label>
</template>
</el-table-column>
<el-table-column label="最后发布" prop="deploymentTime" min-width="250">
<template #default="scope">
<span v-if="scope.row.processDefinition">
{{ formatDate(scope.row.processDefinition.deploymentTime) }}
</span>
<el-tag v-if="scope.row.processDefinition" class="ml-10px">
v{{ scope.row.processDefinition.version }}
</el-tag>
<el-tag v-else type="warning">未部署</el-tag>
<el-tag
v-if="scope.row.processDefinition?.suspensionState === 2"
type="warning"
class="ml-10px"
>
已停用
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['bpm:model:update']"
:disabled="!isManagerUser(scope.row)"
>
修改
</el-button>
<el-button
link
class="!ml-5px"
type="primary"
@click="handleDesign(scope.row)"
v-hasPermi="['bpm:model:update']"
:disabled="!isManagerUser(scope.row)"
>
设计
</el-button>
<el-button
link
class="!ml-5px"
type="primary"
@click="handleDeploy(scope.row)"
v-hasPermi="['bpm:model:deploy']"
:disabled="!isManagerUser(scope.row)"
>
发布
</el-button>
<el-dropdown
class="!align-middle ml-5px"
@command="(command) => handleCommand(command, scope.row)"
v-hasPermi="[
'bpm:process-definition:query',
'bpm:model:update',
'bpm:model:delete'
]"
>
<el-button type="primary" link>更多</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
command="handleDefinitionList"
v-if="checkPermi(['bpm:process-definition:query'])"
>
历史
</el-dropdown-item>
<el-dropdown-item
command="handleChangeState"
v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
:disabled="!isManagerUser(scope.row)"
>
{{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
</el-dropdown-item>
<el-dropdown-item
type="danger"
command="handleDelete"
v-if="checkPermi(['bpm:model:delete'])"
:disabled="!isManagerUser(scope.row)"
>
删除
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
</ContentWrap>
</div>
</ContentWrap> </ContentWrap>
<!-- 表单弹窗：添加/修改流程 --> <!-- 表单弹窗：添加/修改流程 -->
...@@ -227,6 +240,7 @@ import { CategoryApi } from '@/api/bpm/category' ...@@ -227,6 +240,7 @@ import { CategoryApi } from '@/api/bpm/category'
import { BpmModelType } from '@/utils/constants' import { BpmModelType } from '@/utils/constants'
import { checkPermi } from '@/utils/permission' import { checkPermi } from '@/utils/permission'
import { useUserStoreWithOut } from '@/store/modules/user' import { useUserStoreWithOut } from '@/store/modules/user'
import { groupBy } from 'lodash-es'
defineOptions({ name: 'BpmModel' }) defineOptions({ name: 'BpmModel' })
...@@ -234,10 +248,7 @@ const message = useMessage() // 消息弹窗 ...@@ -234,10 +248,7 @@ const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由 const { push } = useRouter() // 路由
const userStore = useUserStoreWithOut() // 用户信息缓存 const userStore = useUserStoreWithOut() // 用户信息缓存
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({ const queryParams = reactive({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
...@@ -247,14 +258,15 @@ const queryParams = reactive({ ...@@ -247,14 +258,15 @@ const queryParams = reactive({
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const categoryList = ref([]) // 流程分类列表 const categoryList = ref([]) // 流程分类列表
const categoryGroup = ref<any>({}) // 按照category分组的数据
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
// TODO 芋艿：这里需要一个不分页查全部的流程模型接口
const data = await ModelApi.getModelPage(queryParams) const data = await ModelApi.getModelPage(queryParams)
list.value = data.list categoryGroup.value = groupBy(data.list, 'categoryName')
total.value = data.total
} finally { } finally {
loading.value = false loading.value = false
} }
...@@ -266,11 +278,6 @@ const handleQuery = () => { ...@@ -266,11 +278,6 @@ const handleQuery = () => {
getList() getList()
} }
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** '更多'操作按钮 */ /** '更多'操作按钮 */
const handleCommand = (command: string, row: any) => { const handleCommand = (command: string, row: any) => {
...@@ -402,3 +409,24 @@ onMounted(async () => { ...@@ -402,3 +409,24 @@ onMounted(async () => {
categoryList.value = await CategoryApi.getCategorySimpleList() categoryList.value = await CategoryApi.getCategorySimpleList()
}) })
</script> </script>
<style lang="scss" scoped>
:deep() {
.el-form--inline .el-form-item {
margin-right: 10px;
}
.el-divider--horizontal {
margin-top: 10px;
}
.el-collapse,
.el-collapse-item__header,
.el-collapse-item__wrap {
border: none;
}
.el-collapse-item__arrow {
margin-left: 10px;
font-size: 20px;
font-weight: 500;
}
}
</style>
src/views/bpm/model/mock.js deleted 100644 → 0
export const mockData = [
{
key: 'out_apply',
name: '外出申请',
description: null,
category: '1',
categoryName: '测试1',
formType: 20,
formId: null,
formCustomCreatePath: '/OA/goingOut/create',
formCustomViewPath: '/OA/goingOut/detail',
id: 'ff8f8bab-4d4e-11ef-8201-0242ac130002',
formName: null,
createTime: 1722218716216,
processDefinition: {
id: 'out_apply:4:7f56d464-4eec-11ef-8c3a-0242ac130002',
version: 4,
deploymentTime: 1722396312641,
suspensionState: 1
}
},
{
key: 'contract_change_history',
name: '合同变更申请',
description: null,
category: '2',
categoryName: '测试2',
formType: 20,
formId: null,
formCustomCreatePath: '/project/changeRecord/detail',
formCustomViewPath: '/project/changeRecord/detail',
id: '0c689067-3a92-11ef-b7f0-0242ac130002',
formName: null,
createTime: 1720158441959,
processDefinition: {
id: 'contract_change_history:1:f69fff4f-3a9a-11ef-b7f0-0242ac130002',
version: 1,
deploymentTime: 1720162270788,
suspensionState: 1
}
},
{
key: 'expenses_claim',
name: '费用报销申请',
description: null,
category: '1',
categoryName: '测试1',
formType: 20,
formId: null,
formCustomCreatePath: '/finance/reimbursement/detail',
formCustomViewPath: '/finance/reimbursement/detail',
id: '0310ad0c-351e-11ef-a653-0242ac130002',
formName: null,
createTime: 1719558848849,
processDefinition: {
id: 'expenses_claim:5:a043a1d8-4eec-11ef-8c3a-0242ac130002',
version: 5,
deploymentTime: 1722396367911,
suspensionState: 1
}
},
{
key: 'out_business_apply',
name: '申请单',
description: null,
category: '2',
categoryName: '测试2',
formType: 20,
formId: null,
formCustomCreatePath: '/finance/businessTripApply/detail',
formCustomViewPath: '/finance/businessTripApply/detail',
id: '279e27a4-3393-11ef-8401-0242ac130002',
formName: null,
createTime: 1719389258966,
processDefinition: {
id: 'out_business_apply:9:a7b2d4e2-430f-11ef-876f-0242ac130002',
version: 9,
deploymentTime: 1721091998780,
suspensionState: 1
}
},
{
key: 'pms_project_delay_application',
name: '项目延时申请',
description: null,
category: '2',
categoryName: '测试2',
formType: 20,
formId: null,
formCustomCreatePath: '/project/workHourDelay/create',
formCustomViewPath: '/project/workHourDelay/detail',
id: '46d87275-27c7-11ef-b258-0242ac130002',
formName: null,
createTime: 1718092231234,
processDefinition: {
id: 'b7ed308a-430f-11ef-876f-0242ac130002',
version: 5,
deploymentTime: 1721092026059,
suspensionState: 1
}
},
{
key: 'pms_project_result_approval',
name: '项目成果审核',
description: null,
category: '2',
categoryName: '测试2',
formType: 20,
formId: null,
formCustomCreatePath: '/project/projectTaskResult/detail',
formCustomViewPath: '/project/projectTaskResult/detail',
id: '4a15d4f8-23cc-11ef-8dd0-0242ac130002',
formName: null,
createTime: 1717654579502,
processDefinition: {
id: 'dd3cc360-4eec-11ef-8c3a-0242ac130002',
version: 6,
deploymentTime: 1722396470232,
suspensionState: 1
}
},
{
key: 'pms_contract',
name: '合同管理',
description: null,
category: '2',
categoryName: '测试2',
formType: 20,
formId: null,
formCustomCreatePath: '/sales/contract/create',
formCustomViewPath: '/sales/contract/detail',
id: '8317cb71-0d1a-11ef-8445-70b5e844a623',
formName: null,
createTime: 1715159299146,
processDefinition: {
id: 'pms_contract:5:c7d6012a-29f2-11ef-a08d-0242ac130002',
version: 5,
deploymentTime: 1718330818270,
suspensionState: 1
}
},
{
key: 'pms_consult_task_act',
name: '咨询任务书',
description: null,
category: '1',
categoryName: '测试1',
formType: 20,
formId: null,
formCustomCreatePath: '/consultTask/create',
formCustomViewPath: '/consultTask/detail',
id: '47fad8e4-0b91-11ef-b841-70b5e844a623',
formName: null,
createTime: 1714990407756,
processDefinition: {
id: 'pms_consult_task_act:1:67c2ae59-0b91-11ef-b841-70b5e844a623',
version: 1,
deploymentTime: 1714990460960,
suspensionState: 1
}
},
{
key: 'pms_project',
name: '立项管理',
description: null,
category: '1',
categoryName: '测试1',
formType: 20,
formId: null,
formCustomCreatePath: '/project/applyProject/create',
formCustomViewPath: '/project/applyProject/detail',
id: 'f0ba6bde-0b90-11ef-b841-70b5e844a623',
formName: null,
createTime: 1714990261372,
processDefinition: {
id: 'pms_project:6:b9e4e33b-2c6c-11ef-8386-0242ac130002',
version: 6,
deploymentTime: 1718603095738,
suspensionState: 1
}
},
{
key: 'invoice_apply_manage',
name: '开票申请',
description: 'asdas',
category: '1',
categoryName: '测试1',
formType: 20,
formId: null,
formCustomCreatePath: '/sales/invoice/create',
formCustomViewPath: '/sales/invoice/detail',
id: '7ec07575-0605-11ef-ab76-cc96e508c010',
formName: null,
createTime: 1714380614292,
processDefinition: {
id: 'invoice_apply_manage:8:665a8c40-44c9-11ef-9813-0242ac130002',
version: 8,
deploymentTime: 1721281726671,
suspensionState: 1
}
}
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment