Browse Source

feat: 调整流程组样式

luoyali 1 year ago
parent
commit
6dac0207c9
2 changed files with 62 additions and 7 deletions
  1. 53 3
      src/views/flow/group/components/listGroup.vue
  2. 9 4
      src/views/setting/role/index.vue

+ 53 - 3
src/views/flow/group/components/listGroup.vue

@@ -1,7 +1,57 @@
 <template>
-	<h4>你好啊</h4>
+	<div class="list_group_container">
+		<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">{{ item.name }}</div>
+				<div class="group_header_nameOperate">
+					<el-tooltip effect="dark" content="删除" placement="top">
+						<el-icon><Delete /></el-icon>
+					</el-tooltip>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
-<script lang="tsx" setup></script>
+<script lang="tsx" setup>
+import { Delete } from '@element-plus/icons-vue'
+import { ref } from 'vue'
 
-<style scoped></style>
+const myArray = ref([
+	{ name: '考勤', id: 1 },
+	{ name: '人事', id: 2 },
+	{ name: '财务', id: 3 },
+	{ name: '行政', id: 4 }
+])
+</script>
+
+<style scoped lang="scss">
+.list_group_container {
+	// 同sortGroup一样的样式
+	.group_list {
+		border-radius: 4px;
+		margin-bottom: 16px;
+		box-shadow: rgb(238, 238, 238) 0px 0px 3px 1px;
+		background-color: rgb(255, 255, 255);
+		font-family: PingFangSC-Regular;
+		.group_header {
+			height: 54px;
+			padding: 0px 16px 0px 12px;
+			font-size: 16px;
+			line-height: 24px;
+			color: rgb(37, 40, 52);
+			background-color: rgba(244, 245, 246, 0.5);
+			&_title {
+				position: relative;
+				font-family: PingFangSC-Medium;
+				display: flex;
+				align-items: center;
+				color: rgba(0, 0, 0, 0.25);
+			}
+			&_nameOperate {
+				cursor: pointer;
+			}
+		}
+	}
+}
+</style>

+ 9 - 4
src/views/setting/role/index.vue

@@ -24,7 +24,9 @@
 							<Delete />
 						</el-icon>
 					</el-button>
-					<el-button type="primary" plain :disabled="!curSelectionRows.length || curSelectionRows.length !== 1" @click="visiblePermission = true">权限设置</el-button>
+					<el-button type="primary" plain :disabled="!curSelectionRows.length || curSelectionRows.length !== 1" @click="visiblePermission = true"
+						>权限设置</el-button
+					>
 				</template>
 
 				<template #statusSlot="scope">
@@ -62,9 +64,12 @@
 		/>
 
 		<!-- 权限设置 -->
-		<Permission v-if="visiblePermission"
-								:role-id="curSelectionRows.map(item => item.id).join(',')"
-								v-model="visiblePermission" @closed="visiblePermission = false" />
+		<Permission
+			v-if="visiblePermission"
+			:role-id="curSelectionRows.map(item => item.id).join(',')"
+			v-model="visiblePermission"
+			@closed="visiblePermission = false"
+		/>
 	</div>
 </template>
 <script lang="tsx" setup>