Merge branch 'feature/bpm' of https://github.com/yudaocode/yudao-ui-admin-vue3 into feature/bpm

src/views/bpm/model/CategoryDraggableModel.vue

@@ -1,81 +1,72 @@
 <template>
-  <!-- 默认使其全部展开 -->
+  <div class="flex items-center h-50px">
-  <el-collapse v-model="activeCollapse">
+    <div class="flex items-center">
-    <el-collapse-item :name="categoryInfo.id" :disabled="categoryInfo.modelList.length === 0">
+      <el-tooltip content="拖动排序" v-if="isCategorySorting">
-      <template #icon="{ isActive }">
+        <Icon
-        <div class="flex-1 flex" v-if="!isCategorySorting">
+          :size="22"
-          <div
+          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"
+            link
-            :class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
+            type="info"
+            class="mr-20px"
+            @click.stop="handleSort"
           >
-            <Icon icon="ep:arrow-down-bold" color="#999" />
+            <Icon icon="fa:sort-amount-desc" class="mr-5px" />
-          </div>
+            排序
-          <div class="ml-auto mr-45px flex items-center">
+          </el-button>
-            <template v-if="!isModelSorting">
+          <el-button v-else link type="info" class="mr-20px" @click.stop="handleAddModel('create')">
-              <el-button
+            <Icon icon="fa:plus" class="mr-5px" />
-                v-if="categoryInfo.modelList.length > 0"
+            新建
-                link
+          </el-button>
-                type="info"
+          <el-dropdown @command="(command) => handleCategoryCommand(command)" placement="bottom">
-                class="mr-20px"
+            <el-button link type="info">
-                @click.stop="handleSort"
+              <Icon icon="ep:setting" class="mr-5px" />
-              >
+              分类
-                <Icon icon="fa:sort-amount-desc" class="mr-5px" />
+            </el-button>
-                排序
+            <template #dropdown>
-              </el-button>
+              <el-dropdown-menu>
-              <el-button
+                <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
-                v-else
+                <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
-                link
+              </el-dropdown-menu>
-                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>
             </template>
-            <template v-else>
+          </el-dropdown>
-              <el-button @click.stop="cancelSort"> 取 消 </el-button>
+        </template>
-              <el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
+        <template v-else>
-            </template>
+          <el-button @click.stop="cancelSort"> 取 消 </el-button>
-            <!-- <el-button v-else type="primary" @click.stop="addModel"> 新建模型 </el-button> -->
+          <el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
-          </div>
+        </template>
-        </div>
+      </div>
-        <div></div>
+    </div>
-      </template>
+  </div>
-      <template #title>
+  <el-collapse-transition>
-        <div class="flex items-center">
+    <div v-show="isExpand">
-          <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-table
         :class="categoryInfo.name"
         ref="tableRef"
         :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
         :cell-style="{ paddingLeft: '10px' }"
+        :row-style="{ height: '68px' }"
         :data="tableData"
         row-key="id"
       >
@@ -220,8 +211,8 @@
           </template>
         </el-table-column>
       </el-table>
-    </el-collapse-item>
+    </div>
-  </el-collapse>
+  </el-collapse-transition>
 
   <!-- 弹窗：重命名分类 -->
   <Dialog :fullscreen="false" class="rename-dialog" v-model="renameVisible" width="400">
@@ -259,7 +250,6 @@ import { cloneDeep } from 'lodash-es'
 
 defineOptions({ name: 'BpmModel' })
 
-const activeCollapse: any = ref([])
 const renameVisible = ref(false)
 const props = defineProps({
   // 分类后的数据
@@ -276,7 +266,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 +426,6 @@ const cancelSort = () => {
   isModelSorting.value = false
 }
 
-/* 分类 */
-const handleGroup = () => {
-  console.log('分类')
-}
 const tableRef = ref()
 // 创建拖拽实例
 const initSort = () => {
@@ -466,7 +452,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 +489,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,24 +508,9 @@ 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;
-  }
+    overflow: hidden;
-  .el-table__row {
-    height: 68px;
   }
 }
 </style>

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
@@ -60,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"
@@ -201,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;
   }