瀏覽代碼

feat: 审批流程 排序支持

lanceJiang 1 年之前
父節點
當前提交
34c732385c
共有 2 個文件被更改,包括 107 次插入53 次删除
  1. 10 1
      src/api/flow/definition.ts
  2. 97 52
      src/views/flow/group/components/listGroup.vue

+ 10 - 1
src/api/flow/definition.ts

@@ -5,7 +5,7 @@ import { AxiosPromise } from 'axios'
 const api = {
 	listCategory: '/v1/process/list-category', // 获取所有分类流程定义列表
 	updateStateId: '/v1/process/update-state', // 根据流程定义ID更新流程状态
-	updateSortId: '/v1/process/update-sort', // 根据流程定义ID更新排序
+	updateProcessSort: '/v1/process/sort', // 流程组排序
 	delete: '/v1/process/delete', // 根据流程定义ID删除流程定义相关信息
 	create: '/v1/process/create', // 创建添加
 	get: '/v1/process/get', // 查询Id信息
@@ -27,6 +27,14 @@ function flowDefinitionUpdateStateIdApi(data: any): AxiosPromise {
 	})
 }
 
+function updateProcessSortApi(data: any): AxiosPromise {
+	return request({
+		url: api.updateProcessSort,
+		method: 'post',
+		data
+	})
+}
+
 function flowDefinitionUpdateSortIdApi(data: any): AxiosPromise {
 	return request({
 		url: `${api.updateStateId}-${data.id}`,
@@ -68,6 +76,7 @@ function flowDefinitionCloneApi(data: any): AxiosPromise {
 export default {
 	flowDefinitionListCategoryApi,
 	flowDefinitionUpdateStateIdApi,
+	updateProcessSortApi,
 	flowDefinitionUpdateSortIdApi,
 	flowDefinitionDeleteApi,
 	flowDefinitionCreateApi,

+ 97 - 52
src/views/flow/group/components/listGroup.vue

@@ -9,39 +9,59 @@
 				</div>
 			</div>
 		</div>
-		<div v-for="(item, idx) in myArray" :key="item.categoryId" class="group_list">
-			<div class="group_header flex flex-pack-justify flex-align-center">
-				<div class="group_header_title">
-					<span>
-						<template v-if="!item.editor">
-							{{ item.categoryName }}
-						</template>
-						<template v-else>
-							<el-input v-model="item.categoryName" v-autoFocus placeholder="请输入流程组名称" @blur="editFlowGroup('save', item, idx)" />
-						</template>
-					</span>
-				</div>
-				<div class="group_header_nameOperate">
-					<el-space>
-						<el-icon :size="16" class="edit_icon" @click="editFlowGroup('edit', item, idx)"><EditPen /></el-icon>
-					</el-space>
-					<el-space style="margin-left: 10px">
-						<el-tooltip effect="dark" content="删除" placement="top">
-							<el-icon :size="16" @click="deleteFlowGroup(item)"><Delete /></el-icon>
-						</el-tooltip>
-					</el-space>
-				</div>
-			</div>
-			<div class="group_body">
-				<ul class="group_list_ul">
-					<draggable :list="item.processList" item-key="id">
-						<template #item="{ element }">
-							<div>
+		<draggable
+			v-bind="dragOptions"
+			handle=".group_header"
+			v-model="categoryList"
+			item-key="categoryId"
+			@update:model-value="update_item_categoryList"
+		>
+			<template #item="{ element: item, index }">
+				<div class="group_list">
+					<div class="group_header flex flex-pack-justify flex-align-center">
+						<div class="group_header_title">
+							<span>
+								<template v-if="!item.editor">
+									{{ item.categoryName }}
+								</template>
+								<template v-else>
+									<el-input v-model="item.categoryName" v-autoFocus placeholder="请输入流程组名称" @blur="editFlowGroup('save', item, index)" />
+								</template>
+							</span>
+						</div>
+						<div class="group_header_nameOperate">
+							<el-space>
+								<el-icon :size="16" class="edit_icon" @click="editFlowGroup('edit', item, index)"><EditPen /></el-icon>
+							</el-space>
+							<el-space style="margin-left: 10px">
+								<el-tooltip effect="dark" content="删除" placement="top">
+									<el-icon :size="16" @click="deleteFlowGroup(item)"><Delete /></el-icon>
+								</el-tooltip>
+							</el-space>
+						</div>
+					</div>
+					<div class="group_body">
+						<draggable
+							v-model="item.processList"
+							v-bind="dragOptions"
+							group="categoryId"
+							tag="ul"
+							class="group_list_ul"
+							:component-data="{
+								type: 'transition-group',
+								name: !drag ? 'flip-list' : null
+							}"
+							item-key="processId"
+							@update:model-value="update_item_processList"
+							@start="drag = true"
+							@end="drag = false"
+						>
+							<template #item="{ element }">
 								<li class="group_item flex flex-align-center">
 									<LeIcon class="group_itemIcon" :icon-class="`${flowIconPrefix}${element.processIcon}`" />
 									<!--									<div class="group_itemIcon">
-                    <img :src="getAssetsFile(element.processIcon + '.svg')" />
-									</div>-->
+									<img :src="getAssetsFile(element.processIcon + '.svg')" />
+								</div>-->
 									<div class="group_itemLeft">
 										<div class="group_itemNameWrapper flex flex-align-center" style="margin-bottom: 5px">
 											<div class="group_itemName">
@@ -64,15 +84,15 @@
 												<el-icon :size="16" @click="updateEv(element)"><EditPen /></el-icon>
 											</el-tooltip>
 										</el-space>
-										<el-space wrap style="margin-left: 10px">
-											<el-tooltip effect="dark" content="复制" placement="top">
+										<el-tooltip effect="dark" content="复制" placement="top">
+											<el-space wrap style="margin-left: 10px">
 												<el-popconfirm title="确定复制 ?" @confirm="copyEv(element.processId)">
 													<template #reference>
 														<el-icon :size="16"><CopyDocument /></el-icon>
 													</template>
 												</el-popconfirm>
-											</el-tooltip>
-										</el-space>
+											</el-space>
+										</el-tooltip>
 										<el-space wrap style="margin-left: 10px">
 											<el-tooltip v-if="element.processState === 1" effect="dark" content="禁用" placement="top">
 												<el-icon :size="16" @click="enabledEv(element.processId, 0)"><CircleClose /></el-icon>
@@ -90,29 +110,35 @@
 										</el-space>
 									</div>
 								</li>
-							</div>
-						</template>
-					</draggable>
-				</ul>
-			</div>
-		</div>
+							</template>
+						</draggable>
+					</div>
+				</div>
+			</template>
+		</draggable>
 	</div>
 </template>
 
 <script lang="tsx" setup>
 import Draggable from 'vuedraggable'
-import { Delete, CircleClose, EditPen, CopyDocument } from '@element-plus/icons-vue'
+// import { Delete, CircleClose, EditPen } from '@element-plus/icons-vue'
 import { ref, onActivated, nextTick, onMounted } from 'vue'
 import flowGroup from '@/api/flow/group'
 import flowDefinition from '@/api/flow/definition'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import process from '@/api/flow/process'
 import router from '@/router'
-import { flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
-const myArray = ref([])
+import { debounce, flowIconPrefix /*, getAssetsFile*/ } from '@/utils/index'
+const categoryList = ref<any[]>([])
 const hideAddInput = ref(true)
 const listGroupName = ref('')
-
+const dragOptions = {
+	animation: 200,
+	group: 'processId',
+	disabled: false,
+	ghostClass: 'ghost'
+}
+const drag = ref(false)
 // 显示隐藏添加流程组元素
 const showAddInput = () => {
 	hideAddInput.value = !hideAddInput.value
@@ -136,12 +162,27 @@ const addFlowGroup = async () => {
 		console.log(e)
 	}
 }
-
+const update_categoryListSort = debounce(() => {
+	// console.error('刷新数据........', xxx)
+	// {categoryId:string; processIds: string[]}[]
+	flowDefinition.updateProcessSortApi(categoryList.value.map(v => ({ categoryId: v.categoryId, processIds: v.processList.map(_v => _v.processId) })))
+	/*.then(res => {
+			console.warn(res, 'res......')
+		})*/
+}, 50)
+const update_item_categoryList = (values: any[]) => {
+	// console.warn(values, 'values update_item_categoryList', categoryList.value)
+	update_categoryListSort()
+}
+const update_item_processList = (values: any[]) => {
+	// console.warn(values, 'values update_item_processList', categoryList.value)
+	update_categoryListSort()
+}
 // 流程组列表
 const flowGroupListAll = async (item = {}) => {
 	try {
-		const data = await flowDefinition.flowDefinitionListCategoryApi(item)
-		myArray.value = data || []
+		const data: any = await flowDefinition.flowDefinitionListCategoryApi(item)
+		categoryList.value = data || []
 		console.log(data)
 	} catch (e) {
 		console.log(e)
@@ -184,15 +225,15 @@ const deleteFlowGroup = (item: any) => {
  */
 const editFlowGroup = async (type, item, idx) => {
 	if (type === 'edit') {
-		myArray.value[idx].editor = true
+		categoryList.value[idx].editor = true
 		return false
 	}
 	try {
-		myArray.value[idx].editor = false
+		categoryList.value[idx].editor = false
 		const param = {
-			id: myArray.value[idx].categoryId,
-			name: myArray.value[idx].categoryName,
-			sort: myArray.value[idx].categorySort
+			id: categoryList.value[idx].categoryId,
+			name: categoryList.value[idx].categoryName
+			// sort: categoryList.value[idx].categorySort
 		}
 		await flowGroup.flowGroupAddOrEditSaveApi(param)
 		flowGroupListAll()
@@ -376,5 +417,9 @@ defineExpose({
 			}
 		}
 	}
+	.ghost {
+		opacity: 0.5;
+		box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, .15);
+	}
 }
 </style>