添加修改页面

Admin

2022-08-02 d592747d5eaa2cfbe698f8ac61222eb3aa75d1fc

 src/views/specialWorkSystem/approveProcessManagement/approveLinkSettings/reportTypeSetting/index.vue

@@ -1,26 +1,47 @@
<template>
   <div class="home-container">
      <el-scrollbar height="100%">
      <div style="height: 100%">
      <div class="homeCard">
      <el-row>
         <el-button type="primary" size="large" @click="addReport">新建上报类型</el-button>
      </el-row>
      <el-row>
         <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="标识" width="100"/>
            <el-table-column prop="type" label="上报数据类型名称" width="180" />
            <el-table-column prop="founder" label="创建人"/>
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column prop="editor" label="最新编辑人" width="180" />
            <el-table-column prop="editeTime" label="最新编辑时间" />
            <el-table-column fixed="right" label="操作" align="center" width="180">
               <template #default="scope">
                  <el-button link type="primary" size="small" :icon="Edit" @click="editeRow(scope.$index,scope.row)">编辑</el-button>
                  <el-button link type="danger" size="small" :icon="Delete" @click="deleteRow(scope.$index)">删除</el-button>
               </template>
            </el-table-column>
         </el-table>
      </el-row>
         <div class="main-card">
            <el-row class="cardTop">
               <el-col :span="12" class="mainCardBtn">
                  <el-button type="primary" size="default" @click="addReport">新建上报类型</el-button>
               </el-col>
            </el-row>
            <el-table ref="multipleTableRef"
                    :data="tableData"
                    style="width: 100%"
                    height="calc(100% - 100px)"
                    :header-cell-style="{background: '#fafafa'}"
                    @selection-change="handleSelectionChange">
               <el-table-column type="index" label="标识" width="100"/>
               <el-table-column prop="type" label="上报数据类型名称" width="180" />
               <el-table-column prop="founder" label="创建人"/>
               <el-table-column prop="createTime" label="创建时间" width="180" />
               <el-table-column prop="editor" label="最新编辑人" width="180" />
               <el-table-column prop="editeTime" label="最新编辑时间" />
               <el-table-column fixed="right" label="操作" align="center" width="180">
                  <template #default="scope">
                     <el-button link type="primary" size="small" :icon="Edit" @click="editeRow(scope.$index,scope.row)">编辑</el-button>
                     <el-button link type="danger" size="small" :icon="Delete" @click="deleteRow(scope.$index)">删除</el-button>
                  </template>
               </el-table-column>
            </el-table>
            <div class="pageBtn">
               <el-pagination
                     v-model:currentPage="currentPage"
                     v-model:page-size="pageSize"
                     :page-sizes="[10, 15]"
                     small=false
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="100"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
               />
            </div>
         </div>
      </div>
      </div>
      <el-dialog v-model="dialogAddForm" title="新建上报类型" @close="dialogColse">
         <el-form :model="reportForm" label-width="120px" ref="ruleFormRef" :rules="addRules">
@@ -46,7 +67,6 @@
            </el-form-item>
         </el-form>
      </el-dialog>
      </el-scrollbar>
   </div>
</template>

@@ -212,20 +232,72 @@
<style scoped lang="scss">
   $homeNavLengh: 8;
   .home-container {
      height: 100%;
      height: calc(100vh - 114px);
      box-sizing: border-box;
      overflow: hidden;
      padding: 20px;

      .homeCard{
         width: 100%;
         padding: 20px;
         box-sizing: border-box;
         background: #fff;
         border-radius: 4px;

         .main-card{
            width: 100%;
            height: 100%;
            .cardTop{
               display: flex;
               align-items: center;
               justify-content: space-between;
               margin-bottom: 20px;
               .mainCardBtn{
                  margin: 0;
               }
            }
            .pageBtn{
               height: 60px;
               display: flex;
               align-items: center;
               justify-content: right;

               .demo-pagination-block + .demo-pagination-block {
                  margin-top: 10px;
               }
               .demo-pagination-block .demonstration {
                  margin-bottom: 16px;
               }
            }
         }

         &:last-of-type{
            height: 100%;
         }

      }
      .el-row{
         display: flex;
         align-items: center;
         margin-bottom: 20px;
      }
      .el-row:last-child {
         margin-bottom: 0;
         &:last-child {
            margin-bottom: 0;
         }
         .grid-content{
            align-items: center;
            min-height: 36px;
         }

         .topInfo {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;

            &>div{
               white-space: nowrap;
               margin-right: 20px;
            }
         }
      }
   }
</style>