feat: 调整流程组删除 排序 新增 修改 100%

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

@@ -17,7 +17,7 @@
 							{{ item.categoryName }}
 						</template>
 						<template v-else>
-							<el-input v-model="item.name" placeholder="请输入流程组名称" v-autoFocus @blur="editFlowGroup('save', item, idx)" />
+							<el-input v-model="item.categoryName" v-autoFocus placeholder="请输入流程组名称" @blur="editFlowGroup('save', item, idx)" />
 						</template>
 					</span>
 				</div>
@@ -88,6 +88,7 @@ import { Delete, CircleClose, EditPen, CopyDocument } from '@element-plus/icons-
 import { nextTick, onMounted, ref } from 'vue'
 import flowGroup from '@/api/flow/group'
 import flowDefinition from '@/api/flow/definition'
+import { ElMessage, ElMessageBox } from 'element-plus'
 const myArray = ref([])
 const hideAddInput = ref(true)
 
@@ -107,7 +108,7 @@ const addFlowGroup = async () => {
 	try {
 		const param = {
 			name: listGroupName.value,
-			sort: 0
+			categorySort: 0
 		}
 		await flowGroup.flowGroupAddOrEditSaveApi(param)
 		showAddInput()
@@ -118,9 +119,9 @@ const addFlowGroup = async () => {
 }
 
 // 流程组列表
-const flowGroupListAll = () => {
+const flowGroupListAll = async () => {
 	try {
-		const data = flowDefinition.flowDefinitionListCategoryApi({})
+		const data = await flowDefinition.flowDefinitionListCategoryApi({})
 		myArray.value = data || []
 		console.log(data)
 	} catch (e) {
@@ -129,11 +130,26 @@ const flowGroupListAll = () => {
 }
 
 // 流程组删除
-const deleteFlowGroup = async item => {
+const deleteFlowGroup = item => {
 	try {
 		// todo 这里需要判断当前的流程组下是否有实例,有不能删除,没有 直接调用删除接口
-		await flowGroup.flowGroupDeleteApi([item.id])
-		flowGroupListAll()
+		ElMessageBox.confirm('是否删除该分组？', '提示', {
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'error',
+			buttonSize: 'default'
+		})
+			.then(async () => {
+				ElMessage({
+					message: '删除成功!',
+					type: 'success'
+				})
+				await flowGroup.flowGroupDeleteApi([item.categoryId])
+				flowGroupListAll()
+			})
+			.catch(() => {
+				console.log('取消')
+			})
 	} catch (e) {
 		console.log(e)
 	}
@@ -147,12 +163,12 @@ const editFlowGroup = async (type, item, idx) => {
 	try {
 		myArray.value[idx].editor = false
 		const param = {
-			id: myArray.value[idx].id,
-			name: myArray.value[idx].name,
-			sort: myArray.value[idx].sort
+			id: myArray.value[idx].categoryId,
+			name: myArray.value[idx].categoryName,
+			sort: myArray.value[idx].categorySort
 		}
-		console.log(param);
 		await flowGroup.flowGroupAddOrEditSaveApi(param)
+		flowGroupListAll()
 	} catch (e) {
 		console.log(e)
 	}

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

@@ -4,10 +4,10 @@
 			<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.name }}</div>
+						<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" /></el-icon>
+								<el-icon><Delete @click="deleteItem(element)" /></el-icon>
 							</el-tooltip>
 						</div>
 					</div>
@@ -20,16 +20,12 @@
 <script lang="tsx" setup>
 import Draggable from 'vuedraggable'
 import { Delete } from '@element-plus/icons-vue'
-import { ref } from 'vue'
-import { ElMessageBox } from 'element-plus'
+import { ref, nextTick, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import flowGroup from '@/api/flow/group'
+import flowDefinition from '@/api/flow/definition'
 const dragging = ref(false)
-const myArray = ref([
-	{ name: '考勤', id: 1 },
-	{ name: '人事', id: 2 },
-	{ name: '财务', id: 3 },
-	{ name: '行政', id: 4 }
-])
+const myArray = ref([])
 
 const endDraggableEv = () => {
 	dragging.value = false
@@ -39,43 +35,63 @@ const endDraggableEv = () => {
 
 const editFlowGroup = async () => {
 	try {
+		// todo
 		const param = JSON.parse(JSON.stringify(myArray.value))
+		param.map((item: any) => {
+			;(item.id = item.categoryId), (item.name = item.categoryName), (item.sort = item.categorySort)
+		})
 		await flowGroup.flowGroupAddOrEditSaveApi(param)
 	} catch (e) {
 		console.log(e)
 	}
 }
 
-const deleteItem = (item) => {
-	ElMessageBox.confirm('无法删除，请先删除组内的审批', '删除', {
-		confirmButtonText: '确定',
-		cancelButtonText: '取消',
-		type: 'error'
-	}).then(() => {
-		deleteFlowGroup(item)
-	})
+const deleteItem = item => {
+	deleteFlowGroup(item)
 }
 
 // 流程组删除
 const deleteFlowGroup = async item => {
 	try {
-		await flowGroup.flowGroupDeleteApi([item.id])
-		flowGroupListAll()
+		// todo 这里需要判断当前的流程组下是否有实例,有不能删除,没有 直接调用删除接口
+		ElMessageBox.confirm('是否删除该分组？', '提示', {
+			confirmButtonText: '确认',
+			cancelButtonText: '取消',
+			type: 'error',
+			buttonSize: 'default'
+		})
+			.then(async () => {
+				ElMessage({
+					message: '删除成功!',
+					type: 'success'
+				})
+				await flowGroup.flowGroupDeleteApi([item.categoryId])
+				flowGroupListAll()
+			})
+			.catch(() => {
+				console.log('取消')
+			})
 	} catch (e) {
 		console.log(e)
 	}
 }
 
 // 流程组列表
-const flowGroupListAll = () => {
+const flowGroupListAll = async () => {
 	try {
-		const data = flowGroup.flowGroupListAllApi({})
+		const data = await flowDefinition.flowDefinitionListCategoryApi({})
+		myArray.value = data || []
 		console.log(data)
 	} catch (e) {
 		console.log(e)
 	}
 }
 
+onMounted(() => {
+	nextTick(() => {
+		flowGroupListAll()
+	})
+})
 </script>
 
 <style scoped lang="scss">