From fb2ea334b91d392870668b5e337007ee6aa2f01e Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Thu, 17 Oct 2024 15:36:15 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A1=86=E6=8C=89=E5=9B=9E=E8=BD=A6=E5=90=8E?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=E9=A1=B5=E9=9D=A2bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/index_new.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
index c0224fa0..3098054f 100644
--- a/src/views/bpm/model/index_new.vue
+++ b/src/views/bpm/model/index_new.vue
@@ -10,6 +10,7 @@
         ref="queryFormRef"
         :inline="true"
         label-width="68px"
+        @submit.prevent
       >
         <el-form-item align="right" prop="key" class="ml-auto">
           <el-input

From d818e338e3e95b3b6ec127ed242e3e14b80c6a12 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Thu, 17 Oct 2024 16:18:02 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E5=BC=83=E7=94=A8el-collapse?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=B9=E7=94=A8el-collapse-transi?=
 =?UTF-8?q?tion=E4=BB=A3=E6=9B=BF=EF=BC=8C=E6=8F=90=E9=AB=98=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=87=AA=E5=AE=9A=E4=B9=89=E7=A8=8B=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/model/CategoryDraggableModel.vue      | 159 +++++++-----------
 1 file changed, 64 insertions(+), 95 deletions(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index d30ff6d2..bff690f9 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -1,76 +1,66 @@
 <template>
-  <!-- 默认使其全部展开 -->
-  <el-collapse v-model="activeCollapse">
-    <el-collapse-item :name="categoryInfo.id" :disabled="categoryInfo.modelList.length === 0">
-      <template #icon="{ isActive }">
-        <div class="flex-1 flex" v-if="!isCategorySorting">
-          <div
+  <div class="flex items-center h-50px">
+    <div class="flex items-center">
+      <el-tooltip content="拖动排序" v-if="isCategorySorting">
+        <Icon
+          :size="22"
+          icon="ic:round-drag-indicator"
+          class="ml-10px category-drag-icon cursor-move text-#8a909c"
+        />
+      </el-tooltip>
+      <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"
+        class="ml-20px flex items-center"
+        :class="[
+          'transition-transform duration-300 cursor-pointer',
+          isExpand ? 'rotate-180' : 'rotate-0'
+        ]"
+        @click="isExpand = !isExpand"
+      >
+        <Icon icon="ep:arrow-down-bold" color="#999" />
+      </div>
+      <div class="ml-auto flex items-center" :class="isModelSorting ? 'mr-15px' : 'mr-45px'">
+        <template v-if="!isModelSorting">
+          <el-button
             v-if="categoryInfo.modelList.length > 0"
-            class="ml-20px flex items-center"
-            :class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
+            link
+            type="info"
+            class="mr-20px"
+            @click.stop="handleSort"
           >
-            <Icon icon="ep:arrow-down-bold" color="#999" />
-          </div>
-          <div class="ml-auto mr-45px flex items-center">
-            <template v-if="!isModelSorting">
-              <el-button
-                v-if="categoryInfo.modelList.length > 0"
-                link
-                type="info"
-                class="mr-20px"
-                @click.stop="handleSort"
-              >
-                <Icon icon="fa:sort-amount-desc" class="mr-5px" />
-                排序
-              </el-button>
-              <el-button
-                v-else
-                link
-                type="info"
-                class="mr-20px"
-                @click.stop="handleAddModel('create')"
-              >
-                <Icon icon="fa:plus" class="mr-5px" />
-                新建
-              </el-button>
-              <el-dropdown
-                @command="(command) => handleCategoryCommand(command)"
-                placement="bottom"
-              >
-                <el-button link type="info" @click.stop="handleGroup">
-                  <Icon icon="ep:setting" class="mr-5px" />
-                  分类
-                </el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
-                    <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
+            <Icon icon="fa:sort-amount-desc" class="mr-5px" />
+            排序
+          </el-button>
+          <el-button v-else link type="info" class="mr-20px" @click.stop="handleAddModel('create')">
+            <Icon icon="fa:plus" class="mr-5px" />
+            新建
+          </el-button>
+          <el-dropdown @command="(command) => handleCategoryCommand(command)" placement="bottom">
+            <el-button link type="info">
+              <Icon icon="ep:setting" class="mr-5px" />
+              分类
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
+                <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
+              </el-dropdown-menu>
             </template>
-            <template v-else>
-              <el-button @click.stop="cancelSort"> 取 消 </el-button>
-              <el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
-            </template>
-            <!-- <el-button v-else type="primary" @click.stop="addModel"> 新建模型 </el-button> -->
-          </div>
-        </div>
-        <div></div>
-      </template>
-      <template #title>
-        <div class="flex items-center">
-          <el-tooltip content="拖动排序" v-if="isCategorySorting">
-            <Icon
-              :size="22"
-              icon="ic:round-drag-indicator"
-              class="ml-10px category-drag-icon cursor-move text-#8a909c"
-            />
-          </el-tooltip>
-          <h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
-          <div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
-        </div>
-      </template>
+          </el-dropdown>
+        </template>
+        <template v-else>
+          <el-button @click.stop="cancelSort"> 取 消 </el-button>
+          <el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
+        </template>
+      </div>
+    </div>
+  </div>
+  <el-collapse-transition>
+    <div v-show="isExpand">
       <el-table
         :class="categoryInfo.name"
         ref="tableRef"
@@ -220,8 +210,8 @@
           </template>
         </el-table-column>
       </el-table>
-    </el-collapse-item>
-  </el-collapse>
+    </div>
+  </el-collapse-transition>
 
   <!-- 弹窗：重命名分类 -->
   <Dialog :fullscreen="false" class="rename-dialog" v-model="renameVisible" width="400">
@@ -259,7 +249,6 @@ import { cloneDeep } from 'lodash-es'
 
 defineOptions({ name: 'BpmModel' })
 
-const activeCollapse: any = ref([])
 const renameVisible = ref(false)
 const props = defineProps({
   // 分类后的数据
@@ -276,7 +265,7 @@ const userStore = useUserStoreWithOut() // 用户信息缓存
 const isModelSorting = ref(false) // 是否正处于排序状态
 const tableData: any = ref([])
 const originalData: any = ref([]) // 原始数据
-
+const isExpand = ref(false) // 是否处于展开状态
 /** '更多'操作按钮 */
 const handleCommand = (command: string, row: any) => {
   switch (command) {
@@ -436,10 +425,6 @@ const cancelSort = () => {
   isModelSorting.value = false
 }
 
-/* 分类 */
-const handleGroup = () => {
-  console.log('分类')
-}
 const tableRef = ref()
 // 创建拖拽实例
 const initSort = () => {
@@ -466,7 +451,7 @@ const initSort = () => {
 const updateTableData = () => {
   tableData.value = cloneDeep(props.categoryInfo.modelList)
   if (props.categoryInfo.modelList.length > 0) {
-    activeCollapse.value = [props.categoryInfo.id]
+    isExpand.value = true
   }
 }
 
@@ -503,13 +488,10 @@ watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })
 watch(
   () => props.isCategorySorting,
   (val) => {
-    if (val) activeCollapse.value = []
+    if (val) isExpand.value = false
   },
   { immediate: true }
 )
-defineExpose({
-  activeCollapse
-})
 </script>
 
 <style lang="scss">
@@ -525,19 +507,6 @@ defineExpose({
 </style>
 <style lang="scss" scoped>
 :deep() {
-  .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;
-  }
-  .el-collapse-item__content {
-    padding-bottom: 0;
-  }
   .el-table__cell {
     border-bottom: none !important;
   }

From 498244020d5198c3de4f5f45a430061ecb4e6f0a Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Fri, 18 Oct 2024 20:49:08 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E7=BB=84=E4=B8=8D=E5=9C=A8=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E4=B8=8B=E4=B9=9F=E8=83=BD=E6=8B=96=E5=8A=A8?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/CategoryDraggableModel.vue |  5 ++---
 src/views/bpm/model/index_new.vue              | 17 +++++++++++++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index bff690f9..6d25128b 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -66,6 +66,7 @@
         ref="tableRef"
         :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
         :cell-style="{ paddingLeft: '10px' }"
+        :row-style="{ height: '68px' }"
         :data="tableData"
         row-key="id"
       >
@@ -509,9 +510,7 @@ watch(
 :deep() {
   .el-table__cell {
     border-bottom: none !important;
-  }
-  .el-table__row {
-    height: 68px;
+    overflow: hidden;
   }
 }
 </style>
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
index 3098054f..97dca594 100644
--- a/src/views/bpm/model/index_new.vue
+++ b/src/views/bpm/model/index_new.vue
@@ -61,9 +61,19 @@
 
     <!-- 分类卡片组 -->
     <div class="px-15px">
-      <draggable v-model="categoryGroup" item-key="id" :animation="400">
+      <draggable
+        :disabled="!isCategorySorting"
+        v-model="categoryGroup"
+        item-key="id"
+        :animation="400"
+      >
         <template #item="{ element }">
-          <ContentWrap v-loading="loading" :body-style="{ padding: 0 }" :key="element.id">
+          <ContentWrap
+            class="rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
+            v-loading="loading"
+            :body-style="{ padding: 0 }"
+            :key="element.id"
+          >
             <CategoryDraggableModel
               ref="categoryDraggableModelRef"
               :isCategorySorting="isCategorySorting"
@@ -202,6 +212,9 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 :deep() {
+  .el-table--fit .el-table__inner-wrapper:before {
+    height: 0;
+  }
   .el-card {
     border-radius: 8px;
   }