feat: 流程模型列表 70%

apps/web-antd/src/views/bpm/model/index.vue

@@ -3,7 +3,7 @@ import type { BpmModelApi } from '#/api/bpm/model';
 
 import { onActivated, reactive, ref, useTemplateRef, watch } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus, Search, Settings } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
@@ -26,7 +26,16 @@ import {
 } from '#/api/bpm/category';
 import { getModelList } from '#/api/bpm/model';
 
+// 流程分类对话框
+import CategoryForm from '../category/modules/form.vue';
 import CategoryDraggableModel from './modules/category-draggable-model.vue';
+
+// 新建流程分类对话框
+const [CategoryFormModal, categoryFormModalApi] = useVbenModal({
+  connectedComponent: CategoryForm,
+  destroyOnClose: true,
+});
+
 // 模型列表加载状态
 const modelListSpinning = refAutoReset(false, 3000);
 // 保存排序状态
@@ -100,7 +109,8 @@ const createModel = () => {
 /** 处理下拉菜单命令 */
 const handleCommand = (command: string) => {
   if (command === 'handleCategoryAdd') {
-    //  TODO 新建分类逻辑
+    // 打开新建流程分类弹窗
+    categoryFormModalApi.open();
   } else if (command === 'handleCategorySort') {
     originalData.value = cloneDeep(categoryGroup.value);
     isCategorySorting.value = true;
@@ -152,7 +162,7 @@ const handleCategorySortSubmit = async () => {
   <Page auto-content-height>
     <Card
       :body-style="{ padding: '10px' }"
-      class="mb-4 h-[89vh]"
+      class="mb-4"
       v-spinning="modelListSpinning"
     >
       <div class="flex h-full items-center justify-between pl-5">
@@ -184,7 +194,7 @@ const handleCategorySortSubmit = async () => {
             </Button>
           </Form.Item>
           <Form.Item>
-            <Dropdown placement="bottomRight">
+            <Dropdown placement="bottomRight" arrow>
               <Button>
                 <template #icon>
                   <Settings class="size-4" />
@@ -239,4 +249,7 @@ const handleCategorySortSubmit = async () => {
       </div>
     </Card>
   </Page>
+
+  <!-- 流程分类表单弹窗 -->
+  <CategoryFormModal @success="getList" />
 </template>

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -4,6 +4,7 @@ import type { BpmModelApi } from '#/api/bpm/model';
 
 import { computed, ref, watchEffect } from 'vue';
 
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
 
 import { useDebounceFn } from '@vueuse/core';
@@ -12,16 +13,23 @@ import {
   Button,
   Card,
   Collapse,
+  Dropdown,
+  Menu,
   message,
   Table,
   Tag,
   Tooltip,
 } from 'ant-design-vue';
 
+import { deleteCategory } from '#/api/bpm/category';
 import { updateModelSortBatch } from '#/api/bpm/model';
 import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
 import { DICT_TYPE } from '#/utils';
 
+// 导入重命名表单
+import CategoryRenameForm from '../../category/modules/rename-form.vue';
+
 const props = defineProps<{
   categoryInfo: BpmCategoryApi.ModelCategoryInfo;
   isCategorySorting: boolean;
@@ -131,6 +139,36 @@ const handleModelSortCancel = () => {
   }
 };
 
+/** 处理下拉菜单命令 */
+const handleCommand = (command: string) => {
+  if (command === 'renameCategory') {
+    // 打开重命名分类对话框
+    categoryRenameModalApi.setData(props.categoryInfo).open();
+  } else if (command === 'deleteCategory') {
+    handleDeleteCategory();
+  }
+};
+
+/** 删除流程分类 */
+const handleDeleteCategory = async () => {
+  if (props.categoryInfo.modelList.length > 0) {
+    message.warning('该分类下仍有流程定义,不允许删除');
+    return;
+  }
+
+  confirm({
+    content: `确定要删除[${props.categoryInfo.name}]吗？`,
+  }).then(async () => {
+    // 发起删除
+    await deleteCategory(props.categoryInfo.id);
+    message.success(
+      $t('ui.actionMessage.deleteSuccess', [props.categoryInfo.name]),
+    );
+    // 刷新列表
+    emit('success');
+  });
+};
+
 /** 处理表单详情点击 */
 const handleFormDetail = (row: any) => {
   // TODO 待实现
@@ -169,6 +207,17 @@ const customRow = (_record: any) => {
     class: isModelSorting.value ? 'cursor-move' : '',
   };
 };
+
+// 重命名分类对话框
+const [CategoryRenameModal, categoryRenameModalApi] = useVbenModal({
+  connectedComponent: CategoryRenameForm,
+  destroyOnClose: true,
+});
+
+// 处理重命名成功
+const handleRenameSuccess = () => {
+  emit('success');
+};
 </script>
 
 <template>
@@ -205,20 +254,39 @@ const customRow = (_record: any) => {
 
         <div
           class="ml-auto flex items-center"
-          :class="isModelSorting ? 'mr-4' : 'mr-12'"
+          :class="isModelSorting ? 'mr-4' : 'mr-8'"
         >
           <template v-if="!isModelSorting">
             <Button
               v-if="categoryInfo.modelList.length > 0"
               type="link"
-              class="mr-5 flex items-center text-[14px]"
+              size="small"
+              class="flex items-center text-[14px]"
               @click.stop="handleModelSort"
             >
               <template #icon>
-                <span class="icon-[fa--sort-amount-desc] mr-1"></span>
+                <span class="icon-[fa--sort-amount-desc]"></span>
               </template>
               排序
             </Button>
+            <Dropdown placement="bottom" arrow>
+              <Button
+                type="link"
+                size="small"
+                class="flex items-center text-[14px]"
+              >
+                <template #icon>
+                  <span class="icon-[ant-design--setting-outlined]"></span>
+                </template>
+                分类
+              </Button>
+              <template #overlay>
+                <Menu @click="(e) => handleCommand(e.key as string)">
+                  <Menu.Item key="renameCategory"> 重命名 </Menu.Item>
+                  <Menu.Item key="deleteCategory"> 删除分类 </Menu.Item>
+                </Menu>
+              </template>
+            </Dropdown>
           </template>
 
           <template v-else>
@@ -370,6 +438,9 @@ const customRow = (_record: any) => {
       </Collapse.Panel>
     </Collapse>
   </Card>
+
+  <!-- 重命名分类弹窗 -->
+  <CategoryRenameModal @success="handleRenameSuccess" />
 </template>
 
 <style lang="scss" scoped>