From 39d90ac360f55f8835920c6e12e5cd1e4246bdcc Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期二, 05 七月 2022 19:18:34 +0800 Subject: [PATCH] '风险' --- src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue | 70 +++++++++++++++++++++++++++------- 1 files changed, 55 insertions(+), 15 deletions(-) diff --git a/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue b/src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue index 5d7eae9..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,29 +22,31 @@ </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"> + </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> @@ -62,6 +67,7 @@ </span> </template> </el-dialog> + </el-scrollbar> </div> </template> @@ -72,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, @@ -115,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) => { @@ -144,6 +162,13 @@ approveSteps.splice( i,1) deleteDialog.value = false } + const colseDrawer = ()=>{ + addProgress.value = { + department: '', + manager: '', + others: '' + } + } const cancelEdit = () => { } @@ -162,9 +187,13 @@ showAdd, approveSteps, addProgress, + ruleFormRef, + ProgressRules, chosenIndex, deleteDialog, + colseDrawer, conFirmDelete, + cancelClick, deleteFlow, addFlow, confirmClick, @@ -179,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