Browse Source

fix: 审批相关模块 样式

lanceJiang 1 year ago
parent
commit
9e323064c4
2 changed files with 41 additions and 27 deletions
  1. 2 0
      src/styles/project_normal.scss
  2. 39 27
      src/views/approve/components/approvedContent.vue

+ 2 - 0
src/styles/project_normal.scss

@@ -58,6 +58,7 @@ body {
 	flex-direction: row;
 	background-color: #f2f3f5;
 	padding: 10px 10px 0 10px;
+	overflow: hidden;
 }
 
 .warp-left {
@@ -69,4 +70,5 @@ body {
 
 .warp-right {
 	flex: 1; /*这里设置为占比1,填充满剩余空间*/
+	height: 100%;
 }

+ 39 - 27
src/views/approve/components/approvedContent.vue

@@ -35,35 +35,36 @@
 						</div>
 					</div>
 					<div class="area-divider"></div>
+					<div class="scroll-wrap">
+						<!-- 表单 -->
+						<div v-loading="validateForm.loading" class="form-wrap">
+							<FormCreate v-show="validateForm.rule.length" v-model:api="validateForm.api" :option="validateForm.option" :rule="validateForm.rule" />
+							<LeNoData v-if="!validateForm.rule.length" message="表单无数据" />
+						</div>
 
-					<!-- 表单 -->
-					<div v-loading="validateForm.loading" class="form-wrap">
-						<FormCreate v-show="validateForm.rule.length" v-model:api="validateForm.api" :option="validateForm.option" :rule="validateForm.rule" />
-						<LeNoData v-if="!validateForm.rule.length" message="表单无数据" />
-					</div>
-
-					<div class="area-divider"></div>
+						<div class="area-divider"></div>
 
-					<!--审批流-->
-					<el-timeline style="margin-left: 50px">
-						<el-timeline-item v-for="active in activeData" :key="active.id" hollow :timestamp="active.taskName" placement="top">
-							<template #dot>
-								<FlowTypeDot :status="active.taskState" :type="active.taskType" />
-							</template>
+						<!--审批流-->
+						<el-timeline style="margin-left: 50px">
+							<el-timeline-item v-for="active in activeData" :key="active.id" hollow :timestamp="active.taskName" placement="top">
+								<template #dot>
+									<FlowTypeDot :status="active.taskState" :type="active.taskType" />
+								</template>
 
-							<div class="timeline-box flex-1">
-								<div class="flex flex-align-center">
-									<div class="timeline-box-user flex-1">
-										<FlowNodeAvatar id="1" />
-										<div class="comment">
-											<div class="comment-content">{{ active.duration }}</div>
+								<div class="timeline-box flex-1">
+									<div class="flex flex-align-center">
+										<div class="timeline-box-user flex-1">
+											<FlowNodeAvatar id="1" />
+											<div class="comment">
+												<div class="comment-content">{{ active.duration }}</div>
+											</div>
 										</div>
+										<span class="timeline-box-date">{{ formatTimestamp(active.finishTime) }}</span>
 									</div>
-									<span class="timeline-box-date">{{ formatTimestamp(active.finishTime) }}</span>
 								</div>
-							</div>
-						</el-timeline-item>
-					</el-timeline>
+							</el-timeline-item>
+						</el-timeline>
+					</div>
 				</div>
 
 				<!-- 3、底部操作按钮 -->
@@ -376,6 +377,8 @@ watch(
 	border-radius: 6px;
 	flex: auto;
 	.flow-detail-container {
+		display: flex;
+		flex-direction: column;
 		position: relative;
 		height: 100%;
 		overflow: hidden;
@@ -415,11 +418,15 @@ watch(
 
 	// 内容体
 	.flow-detail-box {
-		height: calc(100% - 92px);
-		overflow: hidden;
-		overflow-y: auto;
+		//height: calc(100% - 92px);
+		//overflow: hidden;
+		//overflow-y: auto;
+		flex: 1;
+		min-height: 0;
 		padding: 0 20px;
-
+		display: flex;
+		flex-direction: column;
+		height: 100%;
 		.header-box {
 			display: flex;
 			flex-direction: column;
@@ -454,6 +461,11 @@ watch(
 			margin: 20px 0;
 			//position: relative;
 		}
+		.scroll-wrap {
+			overflow: hidden;
+			overflow-y: auto;
+			flex: 1;
+		}
 	}
 
 	// 底部