【代码优化】工作流：1）完善相关注释；2）解决模型每次操作后，刷新列表后，重渲染会导致滚动条的位置不对的问题

Author: YunaiV

src/views/bpm/model/CategoryDraggableModel.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="flex items-center h-50px">
+    <!-- 头部：分类名 -->
     <div class="flex items-center">
       <el-tooltip content="拖动排序" v-if="isCategorySorting">
         <Icon
@@ -11,6 +12,7 @@
       <h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
       <div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
     </div>
+    <!-- 头部：操作 -->
     <div class="flex-1 flex" v-if="!isCategorySorting">
       <div
         v-if="categoryInfo.modelList.length > 0"
@@ -62,6 +64,7 @@
       </div>
     </div>
   </div>
+  <!-- 模型列表 -->
   <el-collapse-transition>
     <div v-show="isExpand">
       <el-table
@@ -70,7 +73,7 @@
         :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
         :cell-style="{ paddingLeft: '10px' }"
         :row-style="{ height: '68px' }"
-        :data="tableData"
+        :data="modelList"
         row-key="id"
       >
         <el-table-column label="流程名" prop="name" min-width="150">
@@ -110,15 +113,15 @@
         <el-table-column label="表单信息" prop="formType" min-width="200">
           <template #default="scope">
             <el-button
-              v-if="scope.row.formType === 10"
+              v-if="scope.row.formType === BpmModelFormType.NORMAL"
               type="primary"
               link
               @click="handleFormDetail(scope.row)"
             >
               <span>{{ scope.row.formName }}</span>
             </el-button>
             <el-button
-              v-else-if="scope.row.formType === 20"
+              v-else-if="scope.row.formType === BpmModelFormType.CUSTOM"
               type="primary"
               link
               @click="handleFormDetail(scope.row)"
@@ -246,7 +249,7 @@ import { formatDate } from '@/utils/formatTime'
 import * as ModelApi from '@/api/bpm/model'
 import * as FormApi from '@/api/bpm/form'
 import { setConfAndFields2 } from '@/utils/formCreate'
-import { BpmModelType } from '@/utils/constants'
+import { BpmModelFormType, BpmModelType } from '@/utils/constants'
 import { checkPermi } from '@/utils/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { useAppStore } from '@/store/modules/app'
@@ -255,20 +258,19 @@ import { cloneDeep } from 'lodash-es'
 defineOptions({ name: 'BpmModel' })
 
 const props = defineProps({
-  // 分类后的数据
-  categoryInfo: propTypes.object.def([]),
-  isCategorySorting: propTypes.bool.def(false)
+  categoryInfo: propTypes.object.def([]), // 分类后的数据
+  isCategorySorting: propTypes.bool.def(false) // 是否分类在排序
 })
 const emit = defineEmits(['success'])
-const appStore = useAppStore()
 const message = useMessage() // 消息弹窗
-const isDark = computed(() => appStore.getIsDark)
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 const userStore = useUserStoreWithOut() // 用户信息缓存
+const isDark = computed(() => useAppStore().getIsDark) // 是否黑暗模式
+
 const isModelSorting = ref(false) // 是否正处于排序状态
-const tableData: any = ref([]) // 模型列表
 const originalData: any = ref([]) // 原始数据
+const modelList: any = ref([]) // 模型列表
 const isExpand = ref(false) // 是否处于展开状态
 
 /** '更多'操作按钮 */
@@ -414,7 +416,7 @@ const handleModelSort = () => {
 /** 处理模型的排序提交 */
 const handleModelSortSubmit = async () => {
   // 保存排序
-  const ids = tableData.value.map((item: any) => item.id)
+  const ids = modelList.value.map((item: any) => item.id)
   await ModelApi.updateModelSortBatch(ids)
   // 刷新列表
   isModelSorting.value = false
@@ -425,12 +427,12 @@ const handleModelSortSubmit = async () => {
 /** 处理模型的排序取消 */
 const handleModelSortCancel = () => {
   // 恢复初始数据
-  tableData.value = cloneDeep(originalData.value)
+  modelList.value = cloneDeep(originalData.value)
   isModelSorting.value = false
 }
 
+/** 创建拖拽实例 */
 const tableRef = ref()
-// 创建拖拽实例
 const initSort = () => {
   const table = document.querySelector(`.${props.categoryInfo.name} .el-table__body-wrapper tbody`)
   Sortable.create(table, {
@@ -441,19 +443,19 @@ const initSort = () => {
     // 结束拖动事件
     onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
       if (oldDraggableIndex !== newDraggableIndex) {
-        tableData.value.splice(
+        modelList.value.splice(
           newDraggableIndex,
           0,
-          tableData.value.splice(oldDraggableIndex, 1)[0]
+          modelList.value.splice(oldDraggableIndex, 1)[0]
         )
       }
     }
   })
 }
 
-// 更新表格数据
-const updateTableData = () => {
-  tableData.value = cloneDeep(props.categoryInfo.modelList)
+/** 更新 modelList 模型列表 */
+const updateModeList = () => {
+  modelList.value = cloneDeep(props.categoryInfo.modelList)
   if (props.categoryInfo.modelList.length > 0) {
     isExpand.value = true
   }
@@ -497,7 +499,7 @@ const openModelForm = (type: string, id?: number) => {
   modelFormRef.value.open(type, id)
 }
 
-watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })
+watch(() => props.categoryInfo.modelList, updateModeList, { immediate: true })
 watch(
   () => props.isCategorySorting,
   (val) => {

src/views/bpm/model/index.vue

@@ -38,11 +38,11 @@
             </el-button>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item command="handleAddCategory">
+                <el-dropdown-item command="handleCategoryAdd">
                   <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
                   新建分类
                 </el-dropdown-item>
-                <el-dropdown-item command="handleSort">
+                <el-dropdown-item command="handleCategorySort">
                   <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
                   分类排序
                 </el-dropdown-item>
@@ -101,7 +101,7 @@ import { CategoryApi } from '@/api/bpm/category'
 import * as ModelApi from '@/api/bpm/model'
 import ModelForm from './ModelForm.vue'
 import CategoryForm from '../category/CategoryForm.vue'
-import { groupBy, cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'lodash-es'
 import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
@@ -116,26 +116,6 @@ const queryFormRef = ref() // 搜索的表单
 const categoryGroup: any = ref([]) // 按照 category 分组的数据
 const originalData: any = ref([]) // 原始数据
 
-/** 查询所有分类 */
-const getAllCategory = async () => {
-  const list = await CategoryApi.getCategorySimpleList()
-  categoryGroup.value = list.map((item: any) => ({ ...item, modelList: [] }))
-}
-
-/** 查询所有流程模型接口 */
-const getAllModel = async () => {
-  // 查询所有流程模型
-  const list = await ModelApi.getModelList(queryParams.name)
-  // 按照 categoryName 分组
-  const groupedData = groupBy(list, 'categoryName')
-  Object.keys(groupedData).forEach((key) => {
-    const category = categoryGroup.value.find((item: any) => item.name === key)
-    if (category) {
-      category.modelList = groupedData[key]
-    }
-  })
-}
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   getList()
@@ -157,10 +137,10 @@ const formDetailPreview = ref({
 /** 右上角设置按钮 */
 const handleCommand = (command: string) => {
   switch (command) {
-    case 'handleAddCategory':
-      handleAddCategory()
+    case 'handleCategoryAdd':
+      handleCategoryAdd()
       break
-    case 'handleSort':
+    case 'handleCategorySort':
       handleCategorySort()
       break
     default:
@@ -170,7 +150,7 @@ const handleCommand = (command: string) => {
 
 /** 新建分类 */
 const categoryFormRef = ref()
-const handleAddCategory = () => {
+const handleCategoryAdd = () => {
   categoryFormRef.value.open('create')
 }
 
@@ -203,8 +183,15 @@ const handleCategorySortSubmit = async () => {
 const getList = async () => {
   loading.value = true
   try {
-    await getAllCategory()
-    await getAllModel()
+    // 查询模型 + 分裂的列表
+    const modelList = await ModelApi.getModelList(queryParams.name)
+    const categoryList = await CategoryApi.getCategorySimpleList()
+    // 按照 category 聚合
+    // 注意：必须一次性赋值给 categoryGroup，否则每次操作后，列表会重新渲染，滚动条的位置会偏离！！！
+    categoryGroup.value = categoryList.map((category: any) => ({
+      ...category,
+      modelList: modelList.filter((model: any) => model.categoryName == category.name)
+    }))
   } finally {
     loading.value = false
   }