新增

ruoyi-ui/src/views/system/form/index.vue

@@ -11,7 +11,7 @@
    <!-- 内容 -->
    <div class="table_nav">
     <el-collapse v-model="activeNames" @change="handleChange">
-      <el-collapse-item :title="title" :name="index" v-for="(item,index) in 1" :key="index">
+      <el-collapse-item :title="title" :name="index" v-for="(item,index) in 1" :key="index" class="eitde">
         <el-form :model="queryParams" ref="queryForm" :inline="true"  >
           <el-row :gutter="0">
             <el-col :span="6" v-for="(item,index) in 8" :key="index">
@@ -30,7 +30,29 @@
       </el-collapse-item>
 
       <!-- 列表 -->
-     <el-collapse-item :title="title" :name="index" v-for="(item,index) in 1" :key="index">
+     <el-collapse-item :title="title" :name="index" v-for="(item,index) in 1" :key="index" class="eitde">
+      <div class="ppl">
+        <p v-for="(item,index) in 6" :key="index" @click="enditTab(index)">
+          <img src="../../../assets/images/icon_tbtab_normal.png" alt="" class="index_headerImg" v-if="numtab !== index">
+          <img src="../../../assets/images/icon_tbtab_selected.png" alt="" class="index_headerImg" v-if="numtab == index">
+          <span :class="[index == numtab ? 'span' : '']">列表名称</span>
+        </p>
+      </div>
+      <el-form style="margin-top: 30px;" :model="queryParams" ref="queryForm" :inline="true"  label-width="118px">
+        <el-form-item label="岗位编码" prop="postCode" v-for="(item,index) in 2" :key="index">
+          <el-input
+            v-model="queryParams.postCode"
+            placeholder="请输入岗位编码"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        </el-form-item>
+      </el-form>
+      <el-divider></el-divider>
        <el-table stripe v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
          <el-table-column label="序号" align="center" prop="noticeId" width="80" />
          <el-table-column :label="surlable" align="center" prop="name" />
@@ -48,6 +70,17 @@
 
          </el-table-column>
        </el-table>
+       <div class="index_haderPagin">
+         <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page.sync="currentPage3"
+              :page-size="pageSize"
+              layout="prev, pager, next, jumper"
+              :total="1000">   
+         </el-pagination>
+
+       </div>
      </el-collapse-item>
 
     </el-collapse>
@@ -101,7 +134,8 @@
                     name: '王小虎',
                     address: '上海市普陀区金沙江路 1516 弄'
                   }
-        ]
+        ],
+        numtab:0
       };
     },
     methods: {
@@ -109,6 +143,9 @@
         // tab点击
       tabSbu(index){
        this.num = index
+      },
+      enditTab(index){
+       this.numtab = index
       }
     },
   };
@@ -137,6 +174,9 @@
      .el-collapse{
        border-top: 0;
      }
+     .el-divider--horizontal{
+       margin-top: 0;
+     }
      .eitde{
        background-color: #fff;
        border-radius: 6px;
@@ -148,6 +188,7 @@
 </style>
 
 <style scoped lang="scss">
+
   .tabForm{
     background-color: #eef0ff;
     height: 100%;
@@ -168,6 +209,39 @@
       // background-color: #fff;
       // border-radius: 6px;
       // padding: 23px;
+      .ppl{
+        display: flex;
+        height: 38px;
+        p{
+          position: relative;
+          width: 113px;
+          height: 38px;
+          img{
+            position: absolute;
+            top:0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            // z-index: -1;
+          }
+          span{
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            // transform: translate(-50%);
+            text-align: center;
+            line-height: 38px;
+            font-size: 15px;
+            font-family: PingFang SC;
+            font-weight: bold;
+            color: #aaa;
+          }
+          .span{
+            color: #3C8DBC;
+          }
+        }
+      }
     }
   }
   // tab