feat: 调整流程组样式 100%

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

@@ -11,49 +11,48 @@
 			</div>
 			<div class="group_body">
 				<ul class="group_list_ul">
-					<div>
-						<li class="group_item flex flex-align-center">
-							<div class="group_itemIcon">
-								<img src="https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v3/bought.png" />
-							</div>
-							<div class="group_itemLeft">
-								<div class="group_itemNameWrapper flex flex-align-center" style="margin-bottom: 5px">
-									<div class="group_itemName">
-										<span>采购申请</span>
+					<draggable :list="item.children" item-key="id">
+						<template #item="{ element }">
+							<div>
+								<li class="group_item flex flex-align-center">
+									<div class="group_itemIcon">
+										<img src="https://lf3-ea.bytetos.com/obj/goofy/ee/approval/approval-admin/image/iconLib/v3/bought.png" />
 									</div>
-								</div>
-								<div class="group_itemIntro">各类办公、活动用品采购</div>
-							</div>
-							<div class="group_itemSeeable">全员可见</div>
-							<div class="group_itemOperations">
-								<el-space wrap>
-									<el-tooltip effect="dark" content="编辑" placement="top">
-										<el-icon :size="16"><EditPen /></el-icon>
-									</el-tooltip>
-								</el-space>
-								<el-space wrap>
-									<el-tooltip effect="dark" content="复制" placement="top">
-										<el-icon :size="16"><CopyDocument /></el-icon>
-									</el-tooltip>
-								</el-space>
-								<el-space wrap>
-									<el-tooltip effect="dark" content="禁用" placement="top">
-										<el-icon :size="16"><CircleClose /></el-icon>
-									</el-tooltip>
-								</el-space>
-								<el-space wrap>
-									<el-tooltip effect="dark" content="删除" placement="top">
-										<el-icon :size="16"><Delete /></el-icon>
-									</el-tooltip>
-								</el-space>
-								<el-space wrap>
-									<el-tooltip effect="dark" content="排序" placement="top">
-										<el-icon :size="16"><Operation /></el-icon>
-									</el-tooltip>
-								</el-space>
+									<div class="group_itemLeft">
+										<div class="group_itemNameWrapper flex flex-align-center" style="margin-bottom: 5px">
+											<div class="group_itemName">
+												<span>{{ element.name }}</span>
+											</div>
+										</div>
+										<div class="group_itemIntro">{{ element.title }}</div>
+									</div>
+									<div class="group_itemSeeable">{{ element.seeable }}</div>
+									<div class="group_itemOperations">
+										<el-space wrap>
+											<el-tooltip effect="dark" content="编辑" placement="top">
+												<el-icon :size="16"><EditPen /></el-icon>
+											</el-tooltip>
+										</el-space>
+										<el-space wrap>
+											<el-tooltip effect="dark" content="复制" placement="top">
+												<el-icon :size="16"><CopyDocument /></el-icon>
+											</el-tooltip>
+										</el-space>
+										<el-space wrap>
+											<el-tooltip effect="dark" content="禁用" placement="top">
+												<el-icon :size="16"><CircleClose /></el-icon>
+											</el-tooltip>
+										</el-space>
+										<el-space wrap>
+											<el-tooltip effect="dark" content="删除" placement="top">
+												<el-icon :size="16"><Delete /></el-icon>
+											</el-tooltip>
+										</el-space>
+									</div>
+								</li>
 							</div>
-						</li>
-					</div>
+						</template>
+					</draggable>
 				</ul>
 			</div>
 		</div>
@@ -61,11 +60,26 @@
 </template>
 
 <script lang="tsx" setup>
-import { Delete, CircleClose, Operation, EditPen, CopyDocument } from '@element-plus/icons-vue'
+import Draggable from 'vuedraggable'
+import { Delete, CircleClose, EditPen, CopyDocument } from '@element-plus/icons-vue'
 import { ref } from 'vue'
 const myArray = ref([
-	{ name: '考勤', id: 1 },
-	{ name: '人事', id: 2 },
+	{
+		name: '考勤',
+		id: 1,
+		children: [
+			{ name: '采购申请', title: '各类办公、活动用品采购', seeable: '全员可见', id: 123 },
+			{ name: '采购申请1', title: '各类办公、活动用品采购', seeable: '全员可见', id: 1232 }
+		]
+	},
+	{
+		name: '人事',
+		id: 2,
+		children: [
+			{ name: '采购申请', title: '各类办公、活动用品采购', seeable: '全员可见', id: 123 },
+			{ name: '采购申请1', title: '各类办公、活动用品采购', seeable: '全员可见', id: 1232 }
+		]
+	},
 	{ name: '财务', id: 3 },
 	{ name: '行政', id: 4 }
 ])
@@ -111,6 +125,9 @@ const myArray = ref([
 		.group_item {
 			justify-content: flex-start;
 			padding: 16px;
+			&:not(.group_item-disabled):hover {
+				background-color: #ededee;
+			}
 			.group_itemIcon {
 				flex-shrink: 0;
 				margin-right: 8px;