修改页面布局样式

Admin

2022-07-05 cffe20b222f298a757e96e2b2e08c8baa3834bb4

 src/views/specialWorkSystem/approvalProcess/approveProcessSetting/index.vue

@@ -1,6 +1,7 @@
<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>
@@ -26,25 +27,26 @@
         <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>
@@ -76,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,
@@ -119,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) => {
@@ -148,6 +162,13 @@
            approveSteps.splice( i,1)
            deleteDialog.value = false
         }
         const colseDrawer = ()=>{
            addProgress.value = {
               department: '',
               manager: '',
               others: ''
            }
         }
         const cancelEdit = () => {

         }
@@ -166,9 +187,13 @@
            showAdd,
            approveSteps,
            addProgress,
            ruleFormRef,
            ProgressRules,
            chosenIndex,
            deleteDialog,
            colseDrawer,
            conFirmDelete,
            cancelClick,
            deleteFlow,
            addFlow,
            confirmClick,
@@ -185,7 +210,13 @@
   .home-container {
      height: 100%;
      overflow: hidden;
      padding: 40px;
      padding: 20px;
      .homeCard{
         width: 100%;
         padding: 20px;
         background: #fff;
         border-radius: 4px;
      }
      .stepItem{
         display: flex;
         align-items: flex-start;