feat: 流程组排序 100%

src/api/flow/group.ts

@@ -6,7 +6,8 @@ const api = {
 	listAll: '/v1/process-category/list-all',
 	create: '/v1/process-category/create',
 	update: '/v1/process-category/update',
-	delete: '/v1/process-category/delete'
+	delete: '/v1/process-category/delete',
+	sort: '/v1/process-category/sort'
 }
 /**
  * 流程分组 - 列表
@@ -40,8 +41,18 @@ function flowGroupDeleteApi(data: any): AxiosPromise {
 		data
 	})
 }
+
+function flowGroupSortApi(data: any): AxiosPromise {
+	return request({
+		url: api.sort,
+		method: 'post',
+		data
+	})
+}
+
 export default {
 	flowGroupListAllApi,
 	flowGroupAddOrEditSaveApi,
-	flowGroupDeleteApi
+	flowGroupDeleteApi,
+	flowGroupSortApi
 }

src/styles/index.scss

@@ -10,6 +10,8 @@
 @import './lance-element-ui.scss';
 // 涉及lance-element-ui的全局组件样式
 @import './lance-element-vue.scss';
+// 加入布局样式
+@import "./flex.scss";
 body {
 	margin: 0;
 	padding: 0;
@@ -131,4 +133,4 @@ div:focus {
 // table下 按钮集合的外壳样式
 .#{$prefix}button-wrap {
 	padding-bottom: 12px;
-}
+}

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

@@ -192,7 +192,7 @@ defineExpose({
 		border-radius: 4px;
 		margin-bottom: 16px;
 		box-shadow: 0px 0px 3px 1px rgb(238, 238, 238);
-		background-color: rgb(255, 255, 255);
+		background-color: var(--el-bg-color);
 		font-family: PingFangSC-Regular;
 		.group_header {
 			height: 54px;

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

@@ -26,21 +26,19 @@ import flowGroup from '@/api/flow/group'
 import flowDefinition from '@/api/flow/definition'
 const dragging = ref(false)
 const myArray = ref([])
+const sortFinallyValue = ref([])
 
 const endDraggableEv = () => {
 	dragging.value = false
-	console.log(JSON.parse(JSON.stringify(myArray.value)))
 	editFlowGroup()
 }
 
 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)
+		sortFinallyValue.value = param.map((item: any, index: number) => {
+			return { id: item.categoryId, sort: index }
 		})
-		await flowGroup.flowGroupAddOrEditSaveApi(param)
 	} catch (e) {
 		console.log(e)
 	}
@@ -61,12 +59,12 @@ const deleteFlowGroup = async item => {
 			buttonSize: 'default'
 		})
 			.then(async () => {
+				await flowGroup.flowGroupDeleteApi([item.categoryId])
+				flowGroupListAll()
 				ElMessage({
 					message: '删除成功!',
 					type: 'success'
 				})
-				await flowGroup.flowGroupDeleteApi([item.categoryId])
-				flowGroupListAll()
 			})
 			.catch(() => {
 				console.log('取消')
@@ -92,6 +90,14 @@ onMounted(() => {
 		flowGroupListAll()
 	})
 })
+
+const exportSortData = () => {
+	return sortFinallyValue.value
+}
+
+defineExpose({
+	exportSortData
+})
 </script>
 
 <style scoped lang="scss">

src/views/flow/group/index.vue

@@ -1,17 +1,17 @@
 <template>
-	<el-container class="flex flex-v flex-align-center" style="background-color: #ffffff; overflow-y: scroll; padding-bottom: 15px">
+	<el-container class="flex flex-v flex-align-center group-container">
 		<div class="ApprovalList">
 			<el-header class="flex flex-align-center" style="width: 100%; padding: 0px">
 				<div style="width: 100%">
 					<el-row style="width: 100%" justify="space-between">
-						<el-col :span="6"><el-input placeholder="搜索" clearable /></el-col>
-						<el-col :span="6">
+						<el-col :span="4"><el-input placeholder="搜索" clearable /></el-col>
+						<el-col :span="8">
 							<template v-if="!sortFlag">
 								<el-space wrap><el-button @click="addNewGroupEv">新建分组</el-button></el-space>
 								<el-space wrap><el-button @click="changeComponent">分组排序</el-button></el-space>
 							</template>
 							<template v-else>
-								<el-space wrap><el-button type="primary" plain :icon="CircleCheck" @click="changeComponent">完 成</el-button></el-space>
+								<el-space wrap><el-button type="primary" plain :icon="CircleCheck" @click="changeComponent('sort')">完 成</el-button></el-space>
 								<el-space wrap><el-button type="info" plain @click="changeComponent">取 消</el-button></el-space>
 							</template>
 							<el-space wrap><el-button :type="sortFlag ? 'info' : 'primary'" :icon="Plus" :disabled="sortFlag">创建审批</el-button></el-space>
@@ -30,6 +30,7 @@ import { ref } from 'vue'
 import { Plus, CircleCheck } from '@element-plus/icons-vue'
 import SortGroup from './components/sortGroup'
 import ListGroup from './components/listGroup'
+import flowGroup from '@/api/flow/group'
 
 const sortFlag = ref(false)
 const dyncComponent = ref() // 实例化子组件
@@ -39,13 +40,17 @@ const typeComponentMap = {
 }
 const pageType = ref(1)
 
-const changeComponent: () => void = () => {
+const changeComponent: (sort) => void = async sort => {
 	sortFlag.value = !sortFlag.value
 	if (pageType.value === 1) {
 		pageType.value = 2
 		return
 	}
 	if (pageType.value === 2) {
+		if (sort) {
+			const data = dyncComponent.value.exportSortData()
+			await flowGroup.flowGroupSortApi(data)
+		}
 		pageType.value = 1
 	}
 }
@@ -55,6 +60,11 @@ const addNewGroupEv = () => {
 }
 </script>
 <style scoped lang="scss">
+.group-container {
+	background-color: var(--el-bg-color);
+	overflow-y: scroll;
+	padding-bottom: 15px;
+}
 .ApprovalList {
 	width: 100%;
 	max-width: 1000px;