From 15518c9dd36749e814ab729f92b1256ae0da3ff1 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期四, 07 七月 2022 18:27:47 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt

---
 src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue |   86 ++++++++++++++++++++++++++++++++++--------
 1 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue b/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue
index 703ba60..33de449 100644
--- a/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue
+++ b/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue
@@ -1,5 +1,8 @@
 <template>
 	<div class="home-container">
+		<el-scrollbar height="100%">
+		<div class="homeCard">
+		<div>
 		<div v-for="(item,index) in approveSteps" class="stepItem">
 			<div class="stepNum">{{index+1}}</div>
 			<div class="stepCard">
@@ -19,33 +22,39 @@
 				</el-card>
 			</div>
 		</div>
-		<el-drawer v-model="showAdd" direction="rtl">
+		</div>
+		<el-row>
+			<el-button type="primary" @click="confirmEdit" size="large">确认</el-button>
+			<el-button @click="cancelEdit" size="large">取消</el-button>
+		</el-row>
+		</div>
+		<el-drawer v-model="showAdd" direction="rtl" @close="colseDrawer">
 			<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>
 			</template>
 			<template #footer>
 				<div style="flex: auto">
-					<el-button @click="cancelClick">取消</el-button>
-					<el-button type="primary" @click="confirmClick(ruleFormRef)">确认</el-button>
+					<el-button type="primary" @click="confirmClick(ruleFormRef)" size="default">确认</el-button>
+					<el-button @click="cancelClick" size="default">取消</el-button>
 				</div>
 			</template>
 		</el-drawer>
@@ -53,11 +62,12 @@
     		<span>您确定要删除该审批流吗?</span>
 			<template #footer>
 			  <span class="dialog-footer">
-				<el-button @click="deleteDialog = false">取消</el-button>
-				<el-button type="primary" @click="conFirmDelete">确认</el-button>
+				<el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
+			  	<el-button @click="deleteDialog = false" size="default">取消</el-button>
 			  </span>
 			</template>
 		</el-dialog>
+	</el-scrollbar>
 	</div>
 </template>
 
@@ -68,6 +78,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,
@@ -111,13 +122,24 @@
 				manager: '',
 				others: ''
 			})
-			const confirmClick = () => {
-				approveSteps.splice(chosenIndex.value+1,0,addProgress.value)
-				addProgress.value = {
-					department: '',
-					manager: '',
-					others: ''
-				}
+			const ruleFormRef = ref<FormInstance>()
+			const ProgressRules = reactive<FormRules>({
+				department: [{required:true,message: '该选项不能为空',trigger: 'blur'}],
+				manager: [{required:true,message: '该选项不能为空',trigger: 'blur'}]
+			})
+			const confirmClick = async (formEl: FormInstance | undefined) => {
+				if (!formEl) return
+				await formEl.validate((valid, fields) => {
+					if (valid) {
+						approveSteps.splice(chosenIndex.value+1,0,addProgress.value)
+						showAdd.value = false
+					} else {
+						console.log('error submit!', fields)
+					}
+				})
+
+			}
+			const cancelClick=()=>{
 				showAdd.value = false
 			}
 			const addFlow = (index) => {
@@ -140,6 +162,19 @@
 				approveSteps.splice( i,1)
 				deleteDialog.value = false
 			}
+			const colseDrawer = ()=>{
+				addProgress.value = {
+					department: '',
+					manager: '',
+					others: ''
+				}
+			}
+			const cancelEdit = () => {
+
+			}
+			const confirmEdit = () =>{
+
+			}
 			const state  = reactive<stateType>({});
 			// 折线图
 			const renderMenu = async (value: string) => {
@@ -152,12 +187,18 @@
 				showAdd,
 				approveSteps,
 				addProgress,
+				ruleFormRef,
+				ProgressRules,
 				chosenIndex,
 				deleteDialog,
+				colseDrawer,
 				conFirmDelete,
+				cancelClick,
 				deleteFlow,
 				addFlow,
 				confirmClick,
+				cancelEdit,
+				confirmEdit,
 				...toRefs(state),
 			};
 		},
@@ -167,14 +208,25 @@
 <style scoped lang="scss">
 	$homeNavLengh: 8;
 	.home-container {
+		height: 100%;
 		overflow: hidden;
-		padding: 80px;
+		padding: 20px;
+		.homeCard{
+			width: 100%;
+			padding: 20px;
+			background: #fff;
+			border-radius: 4px;
+		}
 		.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