Pre Merge pull request !160 from Jason/dev

apps/web-antd/src/components/simple-process-design/components/nodes-config/user-task-node-config.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { Rule } from 'ant-design-vue/es/form';
 
-import type { Ref } from 'vue';
+import type { ComponentPublicInstance, Ref } from 'vue';
 
 import type { ButtonSetting, SimpleFlowNode } from '../../consts';
 import type { UserTaskFormType } from '../../helpers';
 
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, nextTick, onMounted, reactive, ref } from 'vue';
 
 import { useVbenDrawer } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
@@ -144,6 +144,7 @@ const {
   btnDisplayNameEdit,
   changeBtnDisplayName,
   btnDisplayNameBlurEvent,
+  setInputRef,
 } = useButtonsSetting();
 
 const approveType = ref(ApproveType.USER);
@@ -453,9 +454,19 @@ function useButtonsSetting() {
   const buttonsSetting = ref<ButtonSetting[]>();
   // 操作按钮显示名称可编辑
   const btnDisplayNameEdit = ref<boolean[]>([]);
+  // 输入框的引用数组 - 内部使用，不暴露出去
+  const _btnDisplayNameInputRefs = ref<Array<HTMLInputElement | null>>([]);
+
   const changeBtnDisplayName = (index: number) => {
     btnDisplayNameEdit.value[index] = true;
+    // 输入框自动聚集
+    nextTick(() => {
+      if (_btnDisplayNameInputRefs.value[index]) {
+        _btnDisplayNameInputRefs.value[index]?.focus();
+      }
+    });
   };
+
   const btnDisplayNameBlurEvent = (index: number) => {
     btnDisplayNameEdit.value[index] = false;
     const buttonItem = buttonsSetting.value![index];
@@ -463,11 +474,21 @@ function useButtonsSetting() {
       buttonItem.displayName =
         buttonItem.displayName || OPERATION_BUTTON_NAME.get(buttonItem.id)!;
   };
+
+  // 设置 ref 引用的方法
+  const setInputRef = (
+    el: ComponentPublicInstance | Element | null,
+    index: number,
+  ) => {
+    _btnDisplayNameInputRefs.value[index] = el as HTMLInputElement;
+  };
+
   return {
     buttonsSetting,
     btnDisplayNameEdit,
     changeBtnDisplayName,
     btnDisplayNameBlurEvent,
+    setInputRef,
   };
 }
 
@@ -1123,12 +1144,13 @@ onMounted(() => {
                 {{ OPERATION_BUTTON_NAME.get(item.id) }}
               </Col>
               <Col :span="12" class="flex items-center">
-                <!-- TODO  v-mountedFocus 自动聚集需要迁移 -->
                 <Input
                   v-if="btnDisplayNameEdit[index]"
+                  :ref="(el) => setInputRef(el, index)"
                   type="text"
                   class="max-w-32 focus:border-blue-500 focus:shadow-[0_0_0_2px_rgba(24,144,255,0.2)] focus:outline-none"
                   @blur="btnDisplayNameBlurEvent(index)"
+                  @press-enter="btnDisplayNameBlurEvent(index)"
                   v-model:value="item.displayName"
                   :placeholder="item.displayName"
                 />

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

@@ -7,7 +7,6 @@ import { Page, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
-import { refAutoReset } from '@vueuse/core';
 import { useSortable } from '@vueuse/integrations/useSortable';
 import { Button, Card, Dropdown, Input, Menu, message } from 'ant-design-vue';
 
@@ -28,7 +27,7 @@ const [CategoryFormModal, categoryFormModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 // 模型列表加载状态
-const modelListSpinning = refAutoReset(false, 3000);
+const modelListSpinning = ref(false);
 // 保存排序状态
 const saveSortLoading = ref(false);
 // 按照 category 分组的数据
@@ -148,7 +147,6 @@ async function handleCategorySortSubmit() {
 
 <template>
   <Page auto-content-height>
-    <!-- TODO @jason：体感整个页面的加载，有点卡顿。先看到分类，大概 1-2 秒后，上箭头变成下，然后看到每个模型。我本地大概 4 个分类，每个分类下 20+ 模型 -->
     <!-- 流程分类表单弹窗 -->
     <CategoryFormModal @success="getList" />
     <Card
@@ -212,11 +210,12 @@ async function handleCategorySortSubmit() {
       <!-- 按照分类，展示其所属的模型列表 -->
       <div class="px-3" ref="categoryGroupRef">
         <CategoryDraggableModel
-          v-for="element in categoryGroup"
+          v-for="(element, index) in categoryGroup"
           :class="isCategorySorting ? 'cursor-move' : ''"
           :key="element.id"
           :category-info="element"
           :is-category-sorting="isCategorySorting"
+          :is-first="index === 0"
           @success="getList"
         />
       </div>

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

@@ -45,6 +45,7 @@ import { useGridColumns } from './data';
 const props = defineProps<{
   categoryInfo: ModelCategoryInfo;
   isCategorySorting: boolean;
+  isFirst?: boolean; // 是否为第一个分类
 }>();
 
 const emit = defineEmits(['success']);
@@ -68,7 +69,8 @@ const userId = userStore.userInfo?.id;
 const isModelSorting = ref(false);
 const originalData = ref<BpmModelApi.Model[]>([]);
 const modelList = ref<BpmModelApi.Model[]>([]);
-const isExpand = ref(false);
+// 根据是否为第一个分类, 来设置初始展开状态
+const isExpand = ref(!!props.isFirst);
 
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
@@ -376,9 +378,7 @@ const updateModelList = useDebounceFn(() => {
   const newModelList = props.categoryInfo.modelList;
   if (!isEqual(modelList.value, newModelList)) {
     modelList.value = cloneDeep(newModelList);
-    if (newModelList?.length > 0) {
+    // 不再自动设置展开状态，除非是第一个分类
-      isExpand.value = true;
-    }
     // 关闭排序
     isModelSorting.value = false;
     // 重置排序实例