From 3c40f5e98cbeaf554cf0245d4f528063f0b9db69 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期二, 05 七月 2022 15:24:47 +0800
Subject: [PATCH] 添加修改页面

---
 src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue |   56 +++++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue b/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue
index 5d7eae9..46fa8cd 100644
--- a/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue
+++ b/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue
@@ -1,5 +1,7 @@
 <template>
 	<div class="home-container">
+		<el-scrollbar height="100%">
+		<div>
 		<div v-for="(item,index) in approveSteps" class="stepItem">
 			<div class="stepNum">{{index+1}}</div>
 			<div class="stepCard">
@@ -19,29 +21,30 @@
 				</el-card>
 			</div>
 		</div>
+		</div>
 		<el-row>
-			<el-button type="primary" @click="confirmEdit" size="default">确认</el-button>
-			<el-button @click="cancelEdit" size="default">取消</el-button>
+			<el-button type="primary" @click="confirmEdit" size="large">确认</el-button>
+			<el-button @click="cancelEdit" size="large">取消</el-button>
 		</el-row>
 		<el-drawer v-model="showAdd" direction="rtl">
 			<template #title>
 				<h4>新增审批流</h4>
 			</template>
 			<template #default>
-				<el-form :model="addProgress" label-width="120px">
-					<el-form-item label="审批部门">
+				<el-form :model="addProgress" label-width="120px" ref="ruleFormRef" :rules="ProgressRules">
+					<el-form-item label="审批部门" prop="department">
 						<el-select v-model="addProgress.department" placeholder="请选择审批部门">
 							<el-option label="动土" value="动土" />
 							<el-option label="动火" value="动火" />
 						</el-select>
 					</el-form-item>
-					<el-form-item label="审批人员">
+					<el-form-item label="审批人员" prop="manager">
 						<el-select v-model="addProgress.manager" placeholder="请选择审批人员">
 							<el-option label="人员1" value="人员1" />
 							<el-option label="人员2" value="人员2" />
 						</el-select>
 					</el-form-item>
-					<el-form-item label="其他参数">
+					<el-form-item label="其他参数" prop="others">
 						<el-input v-model="addProgress.others" />
 					</el-form-item>
 				</el-form>
@@ -62,6 +65,7 @@
 			  </span>
 			</template>
 		</el-dialog>
+	</el-scrollbar>
 	</div>
 </template>
 
@@ -72,6 +76,7 @@
 	import {useUserInfo} from "/@/stores/userInfo";
 	import { Session } from '/@/utils/storage';
 	import { ElMessage } from 'element-plus'
+	import type { FormInstance, FormRules } from 'element-plus'
 	let global: any = {
 		homeChartOne: null,
 		homeChartTwo: null,
@@ -115,14 +120,27 @@
 				manager: '',
 				others: ''
 			})
-			const confirmClick = () => {
-				approveSteps.splice(chosenIndex.value+1,0,addProgress.value)
-				addProgress.value = {
-					department: '',
-					manager: '',
-					others: ''
-				}
-				showAdd.value = false
+			const ruleFormRef = ref<FormInstance>()
+			const ProgressRules = reactive<FormRules>({
+				department: [{required:true,message: '该选项不能为空'}],
+				manager: [{required:true,message: '该选项不能为空'}]
+			})
+			const confirmClick = async (formEl: FormInstance | undefined) => {
+				if (!formEl) return
+				await formEl.validate((valid, fields) => {
+					if (valid) {
+						approveSteps.splice(chosenIndex.value+1,0,addProgress.value)
+						addProgress.value = {
+							department: '',
+							manager: '',
+							others: ''
+						}
+						showAdd.value = false
+					} else {
+						console.log('error submit!', fields)
+					}
+				})
+
 			}
 			const addFlow = (index) => {
 				showAdd.value = true
@@ -162,6 +180,8 @@
 				showAdd,
 				approveSteps,
 				addProgress,
+				ruleFormRef,
+				ProgressRules,
 				chosenIndex,
 				deleteDialog,
 				conFirmDelete,
@@ -179,14 +199,20 @@
 <style scoped lang="scss">
 	$homeNavLengh: 8;
 	.home-container {
+		height: 100%;
+		background: #fff;
 		overflow: hidden;
-		padding: 80px;
+		padding: 40px;
 		.stepItem{
 			display: flex;
 			align-items: flex-start;
 			margin-bottom: 30px;
+			margin-left: 30px;
 			padding-bottom: 30px;
 			border-left: 2px solid #ccc;
+			&:first-of-type{
+				margin-top: 30px;
+			}
 			&:last-of-type{
 				margin-bottom: 0;
 				border-left: none;

--
Gitblit v1.9.2