feat: 流程组排序

src/views/flow/group/components/sortGroup.vue

@@ -1,19 +1,40 @@
 <template>
 	<div>
-		<draggable :list="myArray" item-key="id" chosen-class="chosen" style="height: 100%" @start="dragging = true" @end="endDraggableEv">
-			<template #item="{ element }">
+		<draggable v-bind="dragOptions" v-model="myArray" handle=".group_header" item-key="categoryId" @update:model-value="update_item_categoryList">
+			<template #item="{ element: item }">
 				<div class="group_list">
 					<div class="group_header flex flex-pack-justify flex-align-center">
-						<div class="group_header_title disabled">{{ element.categoryName }}</div>
+						<div class="group_header_title disabled">{{ item.categoryName }}</div>
 						<div class="group_header_nameOperate">
 							<el-tooltip effect="dark" content="删除" placement="top">
-								<el-icon><Delete @click="deleteItem(element)" /></el-icon>
+								<el-icon><Delete @click="deleteItem(item)" /></el-icon>
 							</el-tooltip>
 						</div>
 					</div>
 				</div>
 			</template>
 		</draggable>
+
+		<!--		<draggable-->
+		<!--			:list="myArray"-->
+		<!--			item-key="id"-->
+		<!--			chosen-class="chosen"-->
+		<!--			style="height: 100%"-->
+		<!--			@start="dragging = true"-->
+		<!--			@end="endDraggableEv">-->
+		<!--			<template #item="{ element }">-->
+		<!--				<div class="group_list">-->
+		<!--					<div class="group_header flex flex-pack-justify flex-align-center">-->
+		<!--						<div class="group_header_title disabled">{{ element.categoryName }}</div>-->
+		<!--						<div class="group_header_nameOperate">-->
+		<!--							<el-tooltip effect="dark" content="删除" placement="top">-->
+		<!--								<el-icon><Delete @click="deleteItem(element)" /></el-icon>-->
+		<!--							</el-tooltip>-->
+		<!--						</div>-->
+		<!--					</div>-->
+		<!--				</div>-->
+		<!--			</template>-->
+		<!--		</draggable>-->
 	</div>
 </template>
 
@@ -24,9 +45,16 @@ import { ref, nextTick, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import flowGroup from '@/api/flow/group'
 import flowDefinition from '@/api/flow/definition'
+import { debounce } from '@/utils'
 const dragging = ref(false)
 const myArray = ref([])
 const sortFinallyValue = ref([])
+const dragOptions = {
+	animation: 200,
+	group: 'processId',
+	disabled: false,
+	ghostClass: 'ghost'
+}
 
 const endDraggableEv = () => {
 	dragging.value = false
@@ -74,6 +102,13 @@ const deleteFlowGroup = async item => {
 	}
 }
 
+const update_categoryListSort = debounce(() => {
+	flowDefinition.updateProcessSortApi(myArray.value.map(v => ({ categoryId: v.categoryId, processIds: v.processList.map(_v => _v.processId) })))
+}, 50)
+const update_item_categoryList = (values: any[]) => {
+	update_categoryListSort()
+}
+
 // 流程组列表
 const flowGroupListAll = async (item = {}) => {
 	try {

src/views/flow/group/index.vue

@@ -10,10 +10,10 @@
 					</template>
 					<template v-else>
 						<el-button type="primary" plain :icon="CircleCheck" @click="changeComponent('sort')">完 成</el-button>
-						<el-button type="info" plain @click="changeComponent">取 消</el-button>
+						<el-button type="info" plain @click="changeComponent" v-if="false">取 消</el-button>
 					</template>
 					<el-tooltip content="不可直接审批只能作为流程任务" placement="bottom" effect="light">
-					<el-button icon="Plus" @click="createProcessEv('child')">创建子流程</el-button>
+						<el-button icon="Plus" @click="createProcessEv('child')">创建子流程</el-button>
 					</el-tooltip>
 					<el-tooltip content="关联业务逻辑执行的审批流程" placement="bottom" effect="light">
 						<el-button icon="Plus" @click="createProcessEv('business')">创建业务审批</el-button>
@@ -53,10 +53,11 @@ const changeComponent: (sort) => void = async sort => {
 		return
 	}
 	if (pageType.value === 2) {
-		if (sort) {
-			const data = dyncComponent.value.exportSortData()
-			await flowGroup.flowGroupSortApi(data)
-		}
+		// 无效代码
+		// if (sort) {
+		// 	const data = dyncComponent.value.exportSortData()
+		// 	await flowGroup.flowGroupSortApi(data)
+		// }
 		pageType.value = 1
 	}
 }