From 2db1f726c3b9e38711ea48aa734b0e0fad2b62c0 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 15 Oct 2024 16:29:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E6=8E=92=E5=BA=8F=E6=8C=89=E9=92=AE=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 2a5c5e14..51a53a07 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -36,6 +36,13 @@
       </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">{{ title }}</h3>
           <div class="color-gray-600 text-16px"> ({{ dataList?.length || 0 }}) </div>
         </div>
@@ -228,7 +235,8 @@ const renameVisible = ref(false)
 const props = defineProps({
   // 分类后的数据
   dataList: propTypes.object.def([]),
-  title: propTypes.string.def('')
+  title: propTypes.string.def(''),
+  isCategorySorting: propTypes.bool.def(false)
 })
 const emit = defineEmits(['success'])
 const appStore = useAppStore()
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
index 4cf3e3b0..2942a25d 100644
--- a/src/views/bpm/model/index_new.vue
+++ b/src/views/bpm/model/index_new.vue
@@ -4,6 +4,7 @@
       <h3 class="font-extrabold">流程模型</h3>
       <!-- 搜索工作栏 -->
       <el-form
+        v-if="!isCategorySorting"
         class="-mb-15px flex"
         :model="queryParams"
         ref="queryFormRef"
@@ -30,17 +31,17 @@
         </el-form-item>
 
         <el-form-item>
-          <el-dropdown placement="bottom-end">
+          <el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end">
             <el-button class="w-30px" plain>
               <Icon icon="ep:setting" />
             </el-button>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item>
+                <el-dropdown-item command="handleAddCategory">
                   <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
                   新建分类
                 </el-dropdown-item>
-                <el-dropdown-item>
+                <el-dropdown-item command="handleSort">
                   <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
                   分类排序
                 </el-dropdown-item>
@@ -49,6 +50,10 @@
           </el-dropdown>
         </el-form-item>
       </el-form>
+      <template v-else>
+        <el-button type="primary" @click="cancelSort"> 取 消 </el-button>
+        <el-button type="primary" @click="saveSort"> 保存排序 </el-button>
+      </template>
     </div>
 
     <el-divider />
@@ -63,6 +68,7 @@
       >
         <CategoryDraggableModel
           ref="draggableModelRef"
+          :isCategorySorting="isCategorySorting"
           :dataList="list"
           :title="title"
           @success="getList"
@@ -91,6 +97,7 @@ defineOptions({ name: 'BpmModel' })
 
 const draggableModelRef = ref()
 const loading = ref(true) // 列表的加载中
+const isCategorySorting = ref(false) // 是否正处于排序状态
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -105,7 +112,7 @@ const categoryGroup = ref<any>({}) // 按照category分组的数据
 const getList = async () => {
   loading.value = true
   try {
-    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
+    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口，并且每条数据都应包含categoryId字段，用于重命名/删除分类。
     const data = await ModelApi.getModelPage(queryParams)
     data.list = mockData
     categoryGroup.value = groupBy(data.list, 'categoryName')
@@ -133,6 +140,33 @@ const formDetailPreview = ref({
   option: {}
 })
 
+/** 右上角设置按钮 */
+const handleCommand = (command: string) => {
+  switch (command) {
+    case 'handleAddCategory':
+      handleAddCategory()
+      break
+    case 'handleSort':
+      handleSort()
+      break
+    default:
+      break
+  }
+}
+
+// 新建分类
+const handleAddCategory = () => {}
+// 分类排序
+const handleSort = () => {
+  isCategorySorting.value = true
+}
+// 取消排序
+const cancelSort = () => {
+  isCategorySorting.value = false
+}
+// 保存排序
+const saveSort = () => {}
+
 /** 初始化 **/
 onMounted(async () => {
   await getList()