添加修改页面

Admin

2022-07-04 364ad41d844696b80b1de0a33d8c2d1e8c101031

 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,6 +21,11 @@
            </el-card>
         </div>
      </div>
      </div>
      <el-row>
         <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>
@@ -44,8 +51,8 @@
         </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 +60,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>

@@ -140,6 +148,12 @@
            approveSteps.splice( i,1)
            deleteDialog.value = false
         }
         const cancelEdit = () => {

         }
         const confirmEdit = () =>{

         }
         const state  = reactive<stateType>({});
         // 折线图
         const renderMenu = async (value: string) => {
@@ -158,6 +172,8 @@
            deleteFlow,
            addFlow,
            confirmClick,
            cancelEdit,
            confirmEdit,
            ...toRefs(state),
         };
      },
@@ -167,14 +183,19 @@
<style scoped lang="scss">
   $homeNavLengh: 8;
   .home-container {
      height: 100%;
      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;