修改页面布局样式

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,7 +27,8 @@
         <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>
@@ -122,25 +124,23 @@
         })
         const ruleFormRef = ref<FormInstance>()
         const ProgressRules = reactive<FormRules>({
            department: [{required:true,message: '该选项不能为空'}],
            manager: [{required:true,message: '该选项不能为空'}]
            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)
                  addProgress.value = {
                     department: '',
                     manager: '',
                     others: ''
                  }
                  showAdd.value = false
               } else {
                  console.log('error submit!', fields)
               }
            })

         }
         const cancelClick=()=>{
            showAdd.value = false
         }
         const addFlow = (index) => {
            showAdd.value = true
@@ -161,6 +161,13 @@
            const i = chosenIndex.value
            approveSteps.splice( i,1)
            deleteDialog.value = false
         }
         const colseDrawer = ()=>{
            addProgress.value = {
               department: '',
               manager: '',
               others: ''
            }
         }
         const cancelEdit = () => {

@@ -184,7 +191,9 @@
            ProgressRules,
            chosenIndex,
            deleteDialog,
            colseDrawer,
            conFirmDelete,
            cancelClick,
            deleteFlow,
            addFlow,
            confirmClick,
@@ -200,9 +209,14 @@
   $homeNavLengh: 8;
   .home-container {
      height: 100%;
      background: #fff;
      overflow: hidden;
      padding: 40px;
      padding: 20px;
      .homeCard{
         width: 100%;
         padding: 20px;
         background: #fff;
         border-radius: 4px;
      }
      .stepItem{
         display: flex;
         align-items: flex-start;