feat: 流程组样式

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

@@ -30,14 +30,10 @@
 							</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>
+							<el-icon :size="16" class="edit_icon" @click="editFlowGroup('edit', item, index)"><EditPen /></el-icon>
+							<el-tooltip effect="dark" content="删除" placement="top">
+								<el-icon :size="16" color="#d03050" class="ml-2" @click="deleteFlowGroup(item)"><Delete /></el-icon>
+							</el-tooltip>
 						</div>
 					</div>
 					<div class="group_body">
@@ -57,70 +53,68 @@
 							@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>-->
-									<div class="group_itemLeft">
-										<div class="group_itemNameWrapper flex flex-align-center" style="margin-bottom: 5px">
-											<div class="group_itemName">
-												<span>{{ element.processName }}</span>
+								<li class="group_item">
+									<el-row :gutter="5">
+										<el-col :span="5">
+											<div class="flex flex-align-center">
+												<LeIcon class="group_itemIcon" :icon-class="`${flowIconPrefix}${element.processIcon}`" />
+
+												<div class="truncate pr-2">
+													<div class="group_itemNameWrapper flex flex-align-center" style="margin-bottom: 5px">
+														<div class="group_itemName">
+															<span :title="element.processName">{{ element.processName }}</span>
+														</div>
+													</div>
+													<div class="group_itemIntro" :title="element.title">
+														{{ element.title }}
+													</div>
+												</div>
 											</div>
-										</div>
-										<div class="group_itemIntro">
-											{{ element.title }}
-										</div>
-									</div>
-									<div class="flex">
-										<div class="flex flex-1">
-											<div class="group_itemSeeable flex-1">
-												<el-tag round>V{{ element.processVersion }}</el-tag>
-												<el-tag v-if="element.processType === 'child'" type="warning" round>子流程</el-tag>
-												<el-tag v-if="element.processType === 'business'" type="success" round>业务流程</el-tag>
-												<el-tag v-if="element.processState === 0" type="danger" round>已停用</el-tag>
+										</el-col>
+										<el-col :span="15">
+											<div class="flex flex-align-center" style="height: 42px">
+												<div class="flex-1">
+													<el-tag round>V{{ element.processVersion }}</el-tag>
+													<el-tag v-if="element.processType === 'child'" type="warning" round class="ml-1">子流程</el-tag>
+													<el-tag v-if="element.processType === 'business'" type="success" round class="ml-1">业务流程</el-tag>
+													<el-tag v-if="element.processState === 0" type="danger" round class="ml-1">已停用</el-tag>
+												</div>
+												<div class="flex-1">{{ element.processKey }}</div>
 											</div>
-											<div class="group_itemSeeable">{{ element.processKey }}</div>
-										</div>
-										<div style="width: 200px" class="flex flex-pack-end">
-											<div class="group_itemOperations">
-												<el-space v-if="element.processVersion > 1" wrap>
-													<el-tooltip effect="dark" content="版本控制" placement="top">
-														<el-icon :size="16" @click="historyEv(element)"><SetUp /></el-icon>
-													</el-tooltip>
-												</el-space>
-												<el-space wrap style="margin-left: 10px">
-													<el-tooltip effect="dark" content="编辑" placement="top">
-														<el-icon :size="16" @click="updateEv(element)"><EditPen /></el-icon>
-													</el-tooltip>
-												</el-space>
-												<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-space>
+										</el-col>
+										<el-col :span="4">
+											<div class="group_itemOperations flex flex-pack-end pr-3">
+												<el-tooltip effect="dark" content="版本控制" placement="top">
+													<el-icon v-if="element.processVersion > 1" class="ml-2" :size="16" @click="historyEv(element)"><SetUp /></el-icon>
+												</el-tooltip>
+
+												<el-tooltip effect="dark" content="编辑" placement="top">
+													<el-icon class="ml-2" :size="16" @click="updateEv(element)"><EditPen /></el-icon>
+												</el-tooltip>
+
+												<el-popconfirm title="确定复制 ?" @confirm="copyEv(element.processId)">
+													<template #reference>
+														<el-tooltip effect="dark" content="复制" placement="top">
+															<el-icon class="ml-2" :size="16"><CopyDocument /></el-icon>
+														</el-tooltip>
+													</template>
+												</el-popconfirm>
+
+												<el-tooltip v-if="element.processState === 1" effect="dark" content="禁用" placement="top">
+													<el-icon class="ml-2" :size="16" @click="enabledEv(element.processId, 0)"><CircleClose /></el-icon>
 												</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>
-													</el-tooltip>
-													<el-tooltip v-if="element.processState === 0" effect="dark" content="启用" placement="top">
-														<el-icon :size="16" @click="enabledEv(element.processId, 1)"><Check /></el-icon>
-													</el-tooltip>
-												</el-space>
-												<el-space wrap style="margin-left: 10px">
-													<el-popconfirm title="确定删除 ?" @confirm="stopEv(element.processId)">
-														<template #reference>
-															<el-icon :size="16"><Delete /></el-icon>
-														</template>
-													</el-popconfirm>
-												</el-space>
+												<el-tooltip v-if="element.processState === 0" effect="dark" content="启用" placement="top">
+													<el-icon class="ml-2" :size="16" @click="enabledEv(element.processId, 1)"><Check /></el-icon>
+												</el-tooltip>
+
+												<el-popconfirm title="确定删除 ?" @confirm="stopEv(element.processId)">
+													<template #reference>
+														<el-icon class="ml-2" :size="16" color="#d03050"><Delete /></el-icon>
+													</template>
+												</el-popconfirm>
 											</div>
-										</div>
-									</div>
+										</el-col>
+									</el-row>
 								</li>
 							</template>
 						</draggable>
@@ -342,7 +336,6 @@ defineExpose({
 		margin-bottom: 16px;
 		box-shadow: var(--el-box-shadow-lighter);
 		background-color: var(--el-bg-color);
-		//font-family: PingFangSC-Regular;
 		.group_header {
 			height: 54px;
 			padding: 0px 16px 0px 12px;
@@ -389,7 +382,6 @@ defineExpose({
 			//width: 1000px;
 		}
 		.group_item {
-			justify-content: flex-start;
 			padding: 8px 12px;
 			&:not(.group_item-disabled):hover {
 				background-color: var(--el-fill-color-lighter);
@@ -409,25 +401,9 @@ defineExpose({
 				}*/
 			}
 			.group_itemLeft {
-				width: 426px;
-				//flex-shrink: 0;
 				padding-right: 8px;
 			}
-			.group_itemSeeable {
-				min-width: 249px;
-				font-size: 14px;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				flex: 1 1;
-				.el-tag + .el-tag {
-					margin-left: 4px;
-				}
-			}
 			.group_itemOperations {
-				max-width: 350px;
-				flex-shrink: 0;
-				display: flex;
 				cursor: pointer;
 			}
 			.group_itemIntro {