feat: #0000 流程模型 100%

src/api/system/flowGroup.ts

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+import { AxiosPromise } from 'axios'
+
+// apiUrl 流程分组
+const api = {
+	listAll: '/v1/flw/category/list-all',
+	create: '/v1/flw/category/create',
+	update: '/v1/flw/category/update',
+	delete: '/v1/flw/category/delete'
+}
+/**
+ * 流程分组 - 列表
+ */
+function flowGroupListAllApi(data: any): AxiosPromise {
+	return request({
+		url: api.listAll,
+		method: 'post',
+		data
+	})
+}
+
+/**
+ * 流程分组 - 新增编辑保存
+ */
+function flowGroupAddOrEditSaveApi(data: any): AxiosPromise {
+	return request({
+		url: data.id ? api.update : api.create,
+		method: 'post',
+		data
+	})
+}
+
+/**
+ * 流程分组 - 删除
+ */
+function flowGroupDeleteApi(data: any): AxiosPromise {
+	return request({
+		url: api.delete,
+		method: 'post',
+		data
+	})
+}
+export default {
+	flowGroupListAllApi,
+	flowGroupAddOrEditSaveApi,
+	flowGroupDeleteApi
+}

src/directive/index.ts

@@ -2,11 +2,12 @@
  * 配置和注册全局指令 directives
  */
 import { App, Directive } from 'vue'
-import { hasPerm, hasRole } from './permission'
+import { hasPerm, hasRole, autoFocus } from './permission'
 
 const directives = {
 	hasPerm,
-	hasRole
+	hasRole,
+	autoFocus
 }
 
 export function setupGlobDirectives(app: App) {

src/directive/permission/index.ts

@@ -1,5 +1,5 @@
 import useUserStore from '@/store/modules/user'
-import { Directive, DirectiveBinding } from 'vue'
+import { Directive, DirectiveBinding, nextTick } from 'vue'
 
 /**
  * 按钮权限校验
@@ -52,3 +52,17 @@ export const hasRole: Directive = {
 		}
 	}
 }
+
+/**
+ * 自动聚焦
+ */
+const getInput = (el: HTMLElement): HTMLInputElement | null => el instanceof HTMLInputElement ? el : el.querySelector('input')
+export const autoFocus: Directive = {
+	mounted: async (el: HTMLElement, { arg }) => {
+		// 为了防止数据未即使更新。
+		await nextTick()
+		// 对于非文本框聚焦（使用了 contenteditable ）的直接聚焦即可
+		if (arg) el.focus?.()
+		else getInput(el)?.focus()
+	}
+}

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

@@ -1,40 +1,33 @@
 <template>
 	<div class="list_group_container">
-		<div class="group_list" v-if="!hideAddInput">
+		<div v-if="!hideAddInput" class="group_list">
 			<div class="group_header flex flex-pack-justify flex-align-center">
 				<div class="group_header_title">
 					<span>
-						<el-input v-model="listGroupName" placeholder="请输入流程组名称" autofocus />
+						<el-input v-model="listGroupName" v-autoFocus placeholder="请输入流程组名称" @blur="addFlowGroup" />
 					</span>
 				</div>
-				<div class="group_header_nameOperate">
-					<el-space>
-						<el-tooltip effect="dark" content="删除" placement="top">
-							<el-icon :size="16"><Delete /></el-icon>
-						</el-tooltip>
-					</el-space>
-				</div>
 			</div>
 		</div>
-		<div v-for="item in myArray" :key="item" class="group_list">
+		<div v-for="(item, idx) in myArray" :key="item" class="group_list">
 			<div class="group_header flex flex-pack-justify flex-align-center">
 				<div class="group_header_title">
 					<span>
-						<template v-if="hideInput">
+						<template v-if="!item.editor">
 							{{ item.name }}
 						</template>
 						<template v-else>
-							<el-input v-model="item.name" placeholder="请输入流程组名称" @blur="hideInput = !hideInput" />
+							<el-input v-model="item.name" placeholder="请输入流程组名称" v-autoFocus @blur="editFlowGroup('save', item, idx)" />
 						</template>
 					</span>
 				</div>
 				<div class="group_header_nameOperate">
 					<el-space>
-						<el-icon :size="16" class="edit_icon" @click="hideInput = !hideInput"><EditPen /></el-icon>
+						<el-icon :size="16" class="edit_icon" @click="editFlowGroup('edit', item, idx)"><EditPen /></el-icon>
 					</el-space>
 					<el-space>
 						<el-tooltip effect="dark" content="删除" placement="top">
-							<el-icon :size="16"><Delete /></el-icon>
+							<el-icon :size="16" @click="deleteFlowGroup(item)"><Delete /></el-icon>
 						</el-tooltip>
 					</el-space>
 				</div>
@@ -92,7 +85,8 @@
 <script lang="tsx" setup>
 import Draggable from 'vuedraggable'
 import { Delete, CircleClose, EditPen, CopyDocument } from '@element-plus/icons-vue'
-import { ref } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
+import flowGroup from '@/api/system/flowGroup'
 const myArray = ref([
 	{
 		name: '考勤',
@@ -100,7 +94,9 @@ const myArray = ref([
 		children: [
 			{ name: '采购申请', title: '各类办公、活动用品采购', seeable: '全员可见', id: 123 },
 			{ name: '采购申请1', title: '各类办公、活动用品采购', seeable: '全员可见', id: 1232 }
-		]
+		],
+		editor: false,
+		sort: 0
 	},
 	{
 		name: '人事',
@@ -108,20 +104,86 @@ const myArray = ref([
 		children: [
 			{ name: '采购申请', title: '各类办公、活动用品采购', seeable: '全员可见', id: 123 },
 			{ name: '采购申请1', title: '各类办公、活动用品采购', seeable: '全员可见', id: 1232 }
-		]
+		],
+		editor: false,
+		sort: 1
 	},
-	{ name: '财务', id: 3 },
-	{ name: '行政', id: 4 }
+	{ name: '财务', id: 3, editor: false, sort: 2 },
+	{ name: '行政', id: 4, editor: false, sort: 3 }
 ])
-const hideInput = ref(true)
 const hideAddInput = ref(true)
 
 const listGroupName = ref('')
 
+// 显示隐藏添加流程组元素
 const showAddInput = () => {
 	hideAddInput.value = !hideAddInput.value
 }
 
+// 新增流程组
+const addFlowGroup = async () => {
+	if (!listGroupName.value.trim()) {
+		showAddInput()
+		return false
+	}
+	try {
+		const param = {
+			name: listGroupName.value,
+			sort: 0
+		}
+		await flowGroup.flowGroupAddOrEditSaveApi(param)
+		showAddInput()
+		flowGroupListAll()
+	} catch (e) {
+		console.log(e)
+	}
+}
+
+// 流程组列表
+const flowGroupListAll = () => {
+	try {
+		const data = flowGroup.flowGroupListAllApi({})
+		console.log(data)
+	} catch (e) {
+		console.log(e)
+	}
+}
+
+// 流程组删除
+const deleteFlowGroup = async item => {
+	try {
+		// todo 这里需要判断当前的流程组下是否有实例,有不能删除,没有 直接调用删除接口
+		await flowGroup.flowGroupDeleteApi([item.id])
+		flowGroupListAll()
+	} catch (e) {
+		console.log(e)
+	}
+}
+
+const editFlowGroup = async (type, item, idx) => {
+	if (type === 'edit') {
+		myArray.value[idx].editor = true
+		return false
+	}
+	try {
+		myArray.value[idx].editor = false
+		const param = {
+			id: myArray.value[idx].id,
+			name: myArray.value[idx].name,
+			sort: myArray.value[idx].sort
+		}
+		console.log(param);
+		await flowGroup.flowGroupAddOrEditSaveApi(param)
+	} catch (e) {
+		console.log(e)
+	}
+}
+
+onMounted(() => {
+	nextTick(() => {
+		flowGroupListAll()
+	})
+})
 // 父组件使用的话需要导出
 defineExpose({
 	showAddInput

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

@@ -22,6 +22,7 @@ import Draggable from 'vuedraggable'
 import { Delete } from '@element-plus/icons-vue'
 import { ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
+import flowGroup from '@/api/system/flowGroup'
 const dragging = ref(false)
 const myArray = ref([
 	{ name: '考勤', id: 1 },
@@ -32,16 +33,49 @@ const myArray = ref([
 
 const endDraggableEv = () => {
 	dragging.value = false
-	console.log(myArray.value)
+	console.log(JSON.parse(JSON.stringify(myArray.value)))
+	editFlowGroup()
 }
 
-const deleteItem = () => {
+const editFlowGroup = async () => {
+	try {
+		const param = JSON.parse(JSON.stringify(myArray.value))
+		await flowGroup.flowGroupAddOrEditSaveApi(param)
+	} catch (e) {
+		console.log(e)
+	}
+}
+
+const deleteItem = (item) => {
 	ElMessageBox.confirm('无法删除，请先删除组内的审批', '删除', {
 		confirmButtonText: '确定',
 		cancelButtonText: '取消',
 		type: 'error'
-	}).then(() => {})
+	}).then(() => {
+		deleteFlowGroup(item)
+	})
+}
+
+// 流程组删除
+const deleteFlowGroup = async item => {
+	try {
+		await flowGroup.flowGroupDeleteApi([item.id])
+		flowGroupListAll()
+	} catch (e) {
+		console.log(e)
+	}
 }
+
+// 流程组列表
+const flowGroupListAll = () => {
+	try {
+		const data = flowGroup.flowGroupListAllApi({})
+		console.log(data)
+	} catch (e) {
+		console.log(e)
+	}
+}
+
 </script>
 
 <style scoped lang="scss">