feat: 调整流程组样式 100%

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

@@ -1,17 +1,42 @@
 <template>
 	<div class="list_group_container">
+		<div class="group_list" v-if="!hideAddInput">
+			<div class="group_header flex flex-pack-justify flex-align-center">
+				<div class="group_header_title">
+					<span>
+						<el-input v-model="listGroupName" placeholder="请输入流程组名称" autofocus />
+					</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 class="group_header flex flex-pack-justify flex-align-center">
 				<div class="group_header_title">
 					<span>
-						<el-icon :size="16"><EditPen /></el-icon>
+						<template v-if="hideInput">
+							{{ item.name }}
+						</template>
+						<template v-else>
+							<el-input v-model="item.name" placeholder="请输入流程组名称" @blur="hideInput = !hideInput" />
+						</template>
 					</span>
-					{{ item.name }}
 				</div>
 				<div class="group_header_nameOperate">
-					<el-tooltip effect="dark" content="删除" placement="top">
-						<el-icon :size="16" :color="'#eeeeee'"><Delete /></el-icon>
-					</el-tooltip>
+					<el-space>
+						<el-icon :size="16" class="edit_icon" @click="hideInput = !hideInput"><EditPen /></el-icon>
+					</el-space>
+					<el-space>
+						<el-tooltip effect="dark" content="删除" placement="top">
+							<el-icon :size="16"><Delete /></el-icon>
+						</el-tooltip>
+					</el-space>
 				</div>
 			</div>
 			<div class="group_body">
@@ -88,6 +113,19 @@ const myArray = ref([
 	{ name: '财务', id: 3 },
 	{ name: '行政', id: 4 }
 ])
+const hideInput = ref(true)
+const hideAddInput = ref(true)
+
+const listGroupName = ref('')
+
+const showAddInput = () => {
+	hideAddInput.value = !hideAddInput.value
+}
+
+// 父组件使用的话需要导出
+defineExpose({
+	showAddInput
+})
 </script>
 
 <style scoped lang="scss">
@@ -115,7 +153,7 @@ const myArray = ref([
 				&.disabled {
 					color: rgba(0, 0, 0, 0.25);
 				}
-				span {
+				.edit_line {
 					display: inline-block;
 					width: 200px;
 					border: 1px solid #eeeeee;
@@ -124,13 +162,15 @@ const myArray = ref([
 					position: absolute;
 					left: -5px;
 				}
+				.edit_icon {
+					right: -170px;
+					visibility: hidden;
+				}
 				&:hover {
-					span {
+					.edit_line,
+					.edit_icon {
 						visibility: visible;
 					}
-					//border: 1px solid #eeeeee;
-					//padding: 3px 0px;
-					//min-width: 200px;
 				}
 			}
 			&_nameOperate {

src/views/flow/group/index.vue

@@ -7,7 +7,7 @@
 						<el-col span="6"><el-input placeholder="搜索" clearable /></el-col>
 						<el-col span="6">
 							<template v-if="!sortFlag">
-								<el-space wrap><el-button>新建分组</el-button></el-space>
+								<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>
@@ -20,7 +20,7 @@
 				</div>
 			</el-header>
 			<div>
-				<component :is="typeComponentMap[pageType]"></component>
+				<component :is="typeComponentMap[pageType]" ref="dyncComponent"></component>
 			</div>
 		</div>
 	</el-container>
@@ -32,6 +32,7 @@ import SortGroup from './components/sortGroup'
 import ListGroup from './components/listGroup'
 
 const sortFlag = ref(false)
+const dyncComponent = ref() // 实例化子组件
 const typeComponentMap = {
 	1: ListGroup,
 	2: SortGroup
@@ -48,6 +49,10 @@ const changeComponent: () => void = () => {
 		pageType.value = 1
 	}
 }
+
+const addNewGroupEv = () => {
+	dyncComponent.value.showAddInput()
+}
 </script>
 <style scoped lang="scss">
 .ApprovalList {