【功能实现】工作流：流程模型的分类、模型读取 list 接口

【功能实现】工作流：流程模型的分类名的修改实现

【功能实现】工作流：流程模型的分类、模型读取 list 接口
【功能实现】工作流：流程模型的分类名的修改实现
1bb6a23f · YunaiV · fec7af45 · 1bb6a23f · 1bb6a23f · 1bb6a23f
Commit 1bb6a23f authored Nov 02, 2024 by YunaiV
Showing with 67 additions and 53 deletions

pnpm-lock.yaml
+0 -0

src/api/bpm/model/index.ts
+2 -2

src/views/bpm/model/CategoryDraggableModel.vue
+34 -21

src/views/bpm/model/index.vue
+30 -29

src/views/bpm/model/index_old.vue
+1 -1

No files found.
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/api/bpm/model/index.ts
+++ b/src/api/bpm/model/index.ts
@@ -26,8 +26,8 @@ export type ModelVO = {
  bpmnXml: string
 }
-export const getModelPage = async (params) => {
+export const getModelList = async (name: string | undefined) => {
-  return await request.get({ url: '/bpm/model/page', params })
+  return await request.get({ url: '/bpm/model/list', params: { name } })
 }
 export const getModel = async (id: string) => {

--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -39,7 +39,10 @@
            <Icon icon="fa:plus" class="mr-5px" />
            新建
          </el-button>
-          <el-dropdown @command="(command) => handleCategoryCommand(command)" placement="bottom">
+          <el-dropdown
+            @command="(command) => handleCategoryCommand(command, categoryInfo)"
+            placement="bottom"
+          >
            <el-button link type="info">
              <Icon icon="ep:setting" class="mr-5px" />
              分类
@@ -47,7 +50,7 @@
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
-                <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
+                <el-dropdown-item command="handleDeleteCategory"> 删除该类 </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
@@ -178,7 +181,7 @@
            </el-button>
            <el-dropdown
              class="!align-middle ml-5px"
-              @command="(command) => handleCommand(command, scope.row)"
+              @command="(command) => handleModelCommand(command, scope.row)"
              v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
            >
              <el-button type="primary" link>更多</el-button>
@@ -215,27 +218,28 @@
  </el-collapse-transition>
  <!-- 弹窗：重命名分类 -->
-  <Dialog :fullscreen="false" class="rename-dialog" v-model="renameVisible" width="400">
+  <Dialog :fullscreen="false" class="rename-dialog" v-model="renameCategoryVisible" width="400">
    <template #title>
      <div class="pl-10px font-bold text-18px"> 重命名分类 </div>
    </template>
    <div class="px-30px">
-      <el-input v-model="renameVal" />
+      <el-input v-model="renameCategoryForm.name" />
    </div>
    <template #footer>
      <div class="pr-25px pb-25px">
-        <el-button @click="renameVisible = false">取 消</el-button>
+        <el-button @click="renameCategoryVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleRenameConfirm">确 定</el-button>
      </div>
    </template>
  </Dialog>
  <!-- 表单弹窗：添加流程模型 -->
  <ModelForm :categoryId="categoryInfo.code" ref="modelFormRef" @success="emit('success')" />
 </template>
 <script lang="ts" setup>
 import ModelForm from './ModelForm.vue'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import Sortable from 'sortablejs'
 import { propTypes } from '@/utils/propTypes'
 import { formatDate } from '@/utils/formatTime'
@@ -250,7 +254,6 @@ import { cloneDeep } from 'lodash-es'
 defineOptions({ name: 'BpmModel' })
-const renameVisible = ref(false)
 const props = defineProps({
  // 分类后的数据
  categoryInfo: propTypes.object.def([]),
@@ -267,8 +270,9 @@ const isModelSorting = ref(false) // 是否正处于排序状态
 const tableData: any = ref([])
 const originalData: any = ref([]) // 原始数据
 const isExpand = ref(false) // 是否处于展开状态
 /** '更多'操作按钮 */
-const handleCommand = (command: string, row: any) => {
+const handleModelCommand = (command: string, row: any) => {
  switch (command) {
    case 'handleDefinitionList':
      handleDefinitionList(row)
@@ -284,15 +288,15 @@ const handleCommand = (command: string, row: any) => {
  }
 }
-/* '分类'操作按钮 */
+/** '分类'操作按钮 */
-const handleCategoryCommand = (command: string) => {
+const handleCategoryCommand = async (command: string, row: any) => {
  switch (command) {
    case 'handleRename':
-      renameVal.value = props.categoryInfo.name
+      renameCategoryForm.value = await CategoryApi.getCategory(row.id)
-      renameVisible.value = true
+      renameCategoryVisible.value = true
      break
-    case 'handleDeleteGroup':
+    case 'handleDeleteCategory':
-      handleDeleteGroup()
+      await handleDeleteCategory()
      break
    default:
      break
@@ -364,7 +368,7 @@ const handleDeploy = async (row: any) => {
 }
 /** 跳转到指定流程定义列表 */
-const handleDefinitionList = (row) => {
+const handleDefinitionList = (row: any) => {
  push({
    name: 'BpmProcessDefinition',
    query: {
@@ -450,16 +454,25 @@ const updateTableData = () => {
  }
 }
-const renameVal = ref('')
+/** 重命名弹窗确定 */
-// 重命名弹窗确定
+const renameCategoryVisible = ref(false)
-const handleRenameConfirm = () => {
+const renameCategoryForm = ref({
-  if (!renameVal.value) {
+  name: ''
+})
+const handleRenameConfirm = async () => {
+  if (renameCategoryForm.value?.name.length === 0) {
    return message.warning('请输入名称')
  }
+  // 发起修改
+  await CategoryApi.updateCategory(renameCategoryForm.value as CategoryVO)
+  message.success('修改成功')
+  // 刷新列表
+  renameCategoryVisible.value = false
+  emit('success')
 }
 // 删除分类
-const handleDeleteGroup = async () => {
+const handleDeleteCategory = async () => {
  try {
    if (props.categoryInfo.modelList.length > 0) {
      return message.warning('该分类下仍有流程定义,不允许删除')

--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -12,9 +12,9 @@
        label-width="68px"
        @submit.prevent
      >
-        <el-form-item align="right" prop="key" class="ml-auto">
+        <el-form-item prop="name" class="ml-auto">
          <el-input
-            v-model="queryParams.key"
+            v-model="queryParams.name"
            placeholder="搜索流程"
            clearable
            @keyup.enter="handleQuery"
@@ -25,12 +25,12 @@
            </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-form-item>
        <el-form-item>
          <el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end">
            <el-button class="w-30px" plain>
@@ -59,7 +59,7 @@
    <el-divider />
-    <!-- 分类卡片组 -->
+    <!-- 按照分类，展示其所属的模型列表 -->
    <div class="px-15px">
      <draggable
        :disabled="!isCategorySorting"
@@ -75,7 +75,6 @@
            :key="element.id"
          >
            <CategoryDraggableModel
-              ref="categoryDraggableModelRef"
              :isCategorySorting="isCategorySorting"
              :categoryInfo="element"
              @success="getList"
@@ -88,7 +87,7 @@
  <!-- 表单弹窗：添加/修改流程 -->
  <ModelForm ref="formRef" @success="getList" />
-  <!-- 表单弹窗：添加/修改分类 -->
+  <!-- 表单弹窗：添加分类 -->
  <CategoryForm ref="categoryFormRef" @success="getList" />
  <!-- 弹窗：表单详情 -->
  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
@@ -107,34 +106,30 @@ import CategoryDraggableModel from './CategoryDraggableModel.vue'
 defineOptions({ name: 'BpmModel' })
-const categoryDraggableModelRef = ref()
 const categoryFormRef = ref()
 const loading = ref(true) // 列表的加载中
-const isCategorySorting = ref(false) // 是否正处于排序状态
+const isCategorySorting = ref(false) // 是否 category 正处于排序状态
 const queryParams = reactive({
-  pageNo: 1,
+  name: undefined
-  pageSize: 10,
-  key: undefined,
-  name: undefined,
-  category: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryGroup: any = ref([]) // 按照category分组的数据
+const categoryGroup: any = ref([]) // 按照 category 分组的数据
-const originalData: any = ref([])
+const originalData: any = ref([]) // 原始数据
-// 查询所有分类数据
+/** 查询所有分类 */
 const getAllCategory = async () => {
-  // TODO 芋艿：这里需要一个不分页查全部的流程分类接口
+  const list = await CategoryApi.getCategorySimpleList()
-  const data = await CategoryApi.getCategoryPage(queryParams)
+  categoryGroup.value = list.map((item: any) => ({ ...item, modelList: [] }))
-  categoryGroup.value = data.list.map((item) => ({ ...item, modelList: [] }))
 }
 /** 查询所有流程模型接口 */
 const getAllModel = async () => {
-  // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
+  // 查询所有流程模型
-  const data = await ModelApi.getModelPage(queryParams)
+  const list = await ModelApi.getModelList(queryParams.name)
-  const groupedData = groupBy(data.list, 'categoryName')
+  // 按照 categoryName 分组
+  const groupedData = groupBy(list, 'categoryName')
  Object.keys(groupedData).forEach((key) => {
-    const category = categoryGroup.value.find((item) => item.name === key)
+    const category = categoryGroup.value.find((item: any) => item.name === key)
    if (category) {
      category.modelList = groupedData[key]
    }
@@ -143,7 +138,6 @@ const getAllModel = async () => {
 /** 搜索按钮操作 */
 const handleQuery = () => {
-  queryParams.pageNo = 1
  getList()
 }
@@ -152,6 +146,7 @@ const formRef = ref()
 const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
 }
 /** 流程表单的详情按钮操作 */
 const formDetailVisible = ref(false)
 const formDetailPreview = ref({
@@ -173,27 +168,33 @@ const handleCommand = (command: string) => {
  }
 }
-// 新建分类
+/** 新建分类 */
 const handleAddCategory = () => {
  categoryFormRef.value.open('create')
 }
-// 分类排序
+// TODO 芋艿：需要实现
+/** 分类排序 */
 const handleSort = () => {
  // 保存初始数据
  originalData.value = cloneDeep(categoryGroup.value)
  isCategorySorting.value = true
 }
-// 取消排序
+// TODO 芋艿：需要实现
+/** 取消排序 */
 const cancelSort = () => {
  // 恢复初始数据
  categoryGroup.value = cloneDeep(originalData.value)
  isCategorySorting.value = false
 }
-// 保存排序
+/** 保存排序 */
 const saveSort = () => {
  // TODO 芋艿：这里需要一个保存分类排序接口
 }
+/** 加载数据 */
 const getList = async () => {
  loading.value = true
  try {
@@ -205,7 +206,7 @@ const getList = async () => {
 }
 /** 初始化 **/
-onMounted(async () => {
+onMounted(() => {
  getList()
 })
 </script>

--- a/src/views/bpm/model/index_old.vue
+++ b/src/views/bpm/model/index_old.vue
@@ -252,7 +252,7 @@ const categoryList = ref([]) // 流程分类列表
 const getList = async () => {
  loading.value = true
  try {
-    const data = await ModelApi.getModelPage(queryParams)
+    const data = await ModelApi.getModelList(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {